:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --mobile-page-gutter: 12px;
  --app-viewport-height: 100vh;
}

html,
body {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  min-height: var(--app-viewport-height, 100dvh);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

.top-nav,
.page-header,
.app-header {
  padding-top: max(12px, var(--safe-top));
}

.navbar {
  margin-top: var(--safe-top);
}

.sidebar {
  bottom: var(--safe-bottom) !important;
}

@media (max-width: 768px), (pointer: coarse) {
  :root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  :root:root select,
  :root:root textarea {
    font-size: 16px !important;
  }

  button,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    touch-action: manipulation;
  }

  .fixed-bottom,
  .bottom-bar,
  .chat-input-area,
  .modal-actions {
    padding-bottom: max(12px, var(--safe-bottom));
  }

  main,
  main > *,
  .container,
  .page-wrap,
  .card,
  .grid,
  .row {
    min-width: 0;
  }

  .mobile-scroll-region,
  .table-wrap,
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* [主题迁移] css/mobile-runtime.css 旧版已完成的语义主题适配。 */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --mobile-page-gutter: 12px;
  --app-viewport-height: 100vh;
}

html,
body {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  min-height: var(--app-viewport-height, 100dvh);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

.top-nav,
.page-header,
.app-header {
  padding-top: max(12px, var(--safe-top));
}

.navbar {
  margin-top: var(--safe-top);
}

.sidebar {
  bottom: var(--safe-bottom) !important;
}

@media (max-width: 768px), (pointer: coarse) {
  :root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  :root:root select,
  :root:root textarea {
    font-size: 16px !important;
  }

  button,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    touch-action: manipulation;
  }

  .fixed-bottom,
  .bottom-bar,
  .chat-input-area,
  .modal-actions {
    padding-bottom: max(12px, var(--safe-bottom));
  }

  main,
  main > *,
  .container,
  .page-wrap,
  .card,
  .grid,
  .row {
    min-width: 0;
  }

  .mobile-scroll-region,
  .table-wrap,
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Semantic theme adapter: visual declarations only; mobile guardrails stay above. */
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background-color: var(--theme-canvas);
  color: var(--theme-text-1);
}

html[data-theme="light"] .top-nav,
html[data-theme="dark"] .top-nav,
html[data-theme="light"] .page-header,
html[data-theme="dark"] .page-header,
html[data-theme="light"] .app-header,
html[data-theme="dark"] .app-header,
html[data-theme="light"] .navbar,
html[data-theme="dark"] .navbar,
html[data-theme="light"] .sidebar,
html[data-theme="dark"] .sidebar {
  background-color: var(--theme-canvas-alt);
  border-color: var(--theme-line);
  color: var(--theme-text-1);
}

html[data-theme="light"] .mobile-overlay,
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .drawer-backdrop {
  background: rgba(63, 52, 38, .28);
}

html[data-theme="dark"] .mobile-overlay,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .drawer-backdrop {
  background: rgba(11, 15, 13, .58);
}

html[data-theme="light"] .soft-keyboard-canvas,
html[data-theme="dark"] .soft-keyboard-canvas,
html[data-theme="light"] .chat-input-area,
html[data-theme="dark"] .chat-input-area,
html[data-theme="light"] .bottom-bar,
html[data-theme="dark"] .bottom-bar,
html[data-theme="light"] .fixed-bottom,
html[data-theme="dark"] .fixed-bottom {
  background-color: var(--theme-surface);
  border-color: var(--theme-line-strong);
  color: var(--theme-text-1);
  box-shadow: var(--theme-shadow);
}