/* ------------------------------------------------------------------ */
/* 暖屿 · 手机版通用层                                                 */
/* 不改变桌面布局，只补齐安全区、动态视口、触控尺寸与窄屏可读性。       */
/* ------------------------------------------------------------------ */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
  html,
  body,
  .app-shell {
    height: 100dvh;
  }
}

@media (max-width: 960px), (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }

  .app-shell {
    height: var(--app-height, 100dvh);
    min-height: 0;
    padding-top: max(6px, var(--safe-top));
    padding-right: max(6px, var(--safe-right));
    padding-bottom: max(6px, var(--safe-bottom));
    padding-left: max(6px, var(--safe-left));
  }

  .app-main {
    min-height: 0;
  }

  .topbar {
    padding-top: max(8px, var(--safe-top));
  }

  .mobile-nav {
    height: auto;
    min-height: 56px;
    padding-bottom: calc(5px + var(--safe-bottom));
    touch-action: manipulation;
  }

  .mobile-nav-item {
    min-height: 44px;
    touch-action: manipulation;
  }

  .page {
    padding-right: max(8px, var(--safe-right));
    padding-bottom: calc(28px + var(--safe-bottom));
    padding-left: max(8px, var(--safe-left));
  }

  .page-chat {
    padding-bottom: 0;
  }

  .chat-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .composer {
    padding-bottom: max(0px, var(--safe-bottom));
  }

  .status-panel,
  .modal-card,
  [role="dialog"],
  .modal-panel,
  .sheet-panel {
    max-height: calc(var(--app-height, 100dvh) - 16px);
    -webkit-overflow-scrolling: touch;
  }

  .toast-region {
    top: calc(var(--safe-top) + 68px);
    right: max(10px, var(--safe-right));
    left: max(10px, var(--safe-left));
  }

  .skip-link {
    top: calc(var(--safe-top) + 4px);
  }

  button,
  [role="button"],
  .icon-btn,
  .mobile-nav-item,
  .starter-chip {
    touch-action: manipulation;
  }

  .icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .chat-head-actions .btn,
  .chat-head-actions .icon-btn,
  .topbar-actions .icon-btn {
    min-width: 36px;
    min-height: 36px;
  }

  .visible-scroll,
  .table-scroll,
  .token-table-wrap,
  .log-details,
  .plugin-prompt {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  .rich-text,
  .bubble,
  .message-body,
  .sandbox-narrative-body,
  .plugin-prompt,
  .log-message,
  .worldbook-entry-content,
  .resource-row,
  .strong-memory-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* iOS 输入框低于 16px 会触发自动放大；手机端统一到可读字号。 */
@media (max-width: 760px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .composer textarea,
  #chat-input,
  #sandbox-action-input,
  .strong-memory-input {
    font-size: 16px !important;
    line-height: 1.55;
  }

  .topbar-crumb h1,
  .chat-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-actions,
  .chat-head-actions {
    flex-wrap: wrap;
  }

  .modal-card,
  [role="dialog"] {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .toast-card {
    max-width: 100%;
  }
}

/* 软键盘弹出时隐藏底部导航，把空间留给输入框。 */
.keyboard-open .mobile-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.keyboard-open .app-main {
  padding-bottom: 0;
}

@media (max-width: 700px) {
  .sandbox-status-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sandbox-status-tab {
    min-height: 40px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .mobile-nav {
    display: none;
  }

  .app-main {
    padding-bottom: 0;
  }

  .topbar {
    min-height: 48px;
  }

  .page-head {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

@media (hover: none) {
  .icon-btn,
  .text-link,
  .mobile-nav-item,
  .starter-chip,
  .sandbox-status-tab {
    transition: none;
  }
}