/* 移动端额外修复样式 - 最高优先级，兼容所有浏览器 */

@media (max-width: 980px) {
  /* 强制修复层级关系 - 使用更高的优先级 */
  body .mobile-menu-toggle,
  html body .mobile-menu-toggle {
    z-index: 1001 !important;
    position: fixed !important;
  }

  body .side,
  html body .side {
    z-index: 1000 !important;
    position: fixed !important;
  }

  body .mobile-overlay,
  html body .mobile-overlay {
    z-index: 999 !important;
    position: fixed !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.65) !important;
  }

  body .mobile-overlay.show,
  html body .mobile-overlay.show {
    pointer-events: auto !important;
    display: block !important;
  }

  /* 关键修复：确保侧边栏打开时可以点击 */
  body .side.mobile-open,
  html body .side.mobile-open {
    pointer-events: auto !important;
  }

  body .side.mobile-open *,
  html body .side.mobile-open * {
    pointer-events: auto !important;
  }

  body .theme-toggle,
  html body .theme-toggle {
    z-index: 90 !important;
    position: fixed !important;
  }

  /* 确保背景元素不干扰 */
  .bg-wrap,
  .noise,
  .grid-lines,
  .orb {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 主容器层级 */
  .app {
    z-index: 1 !important;
    position: relative !important;
  }

  .main {
    z-index: 2 !important;
    position: relative !important;
  }

  /* 修复聊天页面布局 */
  body:has(#pane-chat.show) .main,
  body:has(.chat-page) .main {
    height: 100vh !important;
    overflow: hidden !important;
  }

  body:has(#pane-chat.show) #pane-chat,
  body:has(.chat-page) .chat-page {
    height: calc(100vh - 64px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .chat-layout {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .chat {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    overflow: hidden !important;
  }

  .msgs {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    padding: 20px 0 16px !important;
    margin-bottom: 0 !important;
  }

  /* 关键修复：输入框区域避开浏览器底部导航栏 */
  body .composer,
  html body .composer {
    flex-shrink: 0 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--ink, #161310) !important;
    padding: 12px 0 !important;
    /* 兼容所有浏览器：使用固定值而不是 max() */
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
    -webkit-box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* 为支持安全区域的浏览器额外添加 */
  @supports (padding: env(safe-area-inset-bottom)) {
    body .composer,
    html body .composer {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }

  /* 确保 composer 内的元素可见 - 兼容所有浏览器 */
  body .composer *,
  html body .composer * {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: auto !important;
  }

  /* 优化输入框容器 */
  body .box,
  html body .box {
    background: var(--box, rgba(31,27,23,.82)) !important;
    border: 1px solid var(--line, rgba(255,255,255,.12)) !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 12 !important;
    pointer-events: auto !important;
  }

  /* 确保输入框和按钮可点击 */
  body .box input,
  body .box textarea,
  body .box button,
  html body .box input,
  html body .box textarea,
  html body .box button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* 确保输入框始终可见 */
  #chatInput,
  #kbAiInput {
    max-height: 100px !important;
  }

  /* 修复知识库页面滚动 */
  #pane-kb {
    height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 优化按钮大小 */
  .kb-head .btn-primary {
    padding: 12px 18px !important;
    font-size: 13px !important;
  }

  /* 优化卡片布局 */
  .kb-card {
    touch-action: manipulation !important;
  }

  /* 防止双击缩放 */
  button,
  a,
  input,
  textarea {
    touch-action: manipulation !important;
  }

  /* 优化模态框 */
  .modal {
    z-index: 1100 !important;
  }

  .modal.show {
    display: flex !important;
  }

  /* 优化 Toast 提示 */
  .toast {
    z-index: 1200 !important;
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 20px !important;
    max-width: calc(100vw - 32px) !important;
  }

  /* 优化图片预览 */
  .preview {
    z-index: 1300 !important;
  }

  /* 设置菜单层级 */
  .settings-menu {
    z-index: 1000 !important;
  }

  /* 通知面板层级 */
  .notify-panel {
    z-index: 1050 !important;
  }

  /* 修复页面底部空间 */
  .pane:not(#pane-chat) {
    min-height: calc(100vh - 64px) !important;
    padding-bottom: 100px !important;
  }

  /* 优化备案信息位置 */
  .site-beian-footer {
    z-index: 85 !important;
  }

  /* 确保所有可滚动区域平滑 */
  .msgs,
  .pane,
  .main,
  #pane-kb,
  .conv-list,
  .table-wrap {
    scroll-behavior: smooth !important;
  }
}

/* 超小屏幕优化 */
@media (max-width: 640px) {
  .mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    left: 12px !important;
    top: 12px !important;
  }

  .theme-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
  }

  .theme-toggle-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 修复可能的视口高度问题 */
@media (max-width: 980px) {
  html,
  body {
    height: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  /* 使用 CSS 变量存储视口高度 */
  :root {
    --mobile-vh: 1vh;
  }
}