/* 统一处理 iOS 刘海、Android/鸿蒙动态地址栏和触屏操作区域。 */
:root {
  --app-height: 100dvh;
}

html,
body {
  min-height: var(--app-height);
  overscroll-behavior-x: none;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

.app-header {
  padding-top: env(safe-area-inset-top);
}

.app-main {
  min-height: calc(var(--app-height) - 156px);
}

.dialog {
  max-height: min(880px, calc(var(--app-height) - 32px));
}

.dialog-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (pointer: coarse) {
  button,
  label[for],
  select {
    min-height: 44px;
  }

  .icon-button,
  .date-picker-button {
    min-width: 44px;
    min-height: 44px;
  }

  .item-actions .icon-button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 740px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  /* iOS Safari 会在小于 16px 时自动放大输入框。 */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .app-header {
    position: sticky;
  }

  .app-main {
    min-height: calc(var(--app-height) - 124px);
  }

  .dialog {
    max-height: calc(var(--app-height) - 16px);
  }

  .dialog-body {
    max-height: calc(var(--app-height) - 154px);
  }

  .dialog-footer {
    padding-bottom: max(15px, env(safe-area-inset-bottom));
  }

  .item-actions .icon-button,
  .mobile-filter-button,
  .date-picker-button {
    min-width: 44px;
    min-height: 44px;
  }

  .app-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .header-inner,
  .app-main,
  .app-footer {
    width: calc(100% - 16px);
  }

  .brand {
    gap: 7px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand strong {
    font-size: 12px;
  }

  .header-tool-group {
    gap: 3px;
  }
}

@supports not (height: 100dvh) {
  :root {
    --app-height: 100vh;
  }
}