/* ===== 移动端适配样式 ===== */

/* 移动端汉堡菜单 */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 12px;
  background: var(--glass-strong, rgba(28,24,19,.92));
  backdrop-filter: blur(18px);
  color: var(--txt, #f4ece0);
  font-size: 20px;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 999;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.mobile-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* 移动端侧边栏滑出 */
.side.mobile-open {
  transform: translateX(0) !important;
}

/* 小屏幕适配 (< 980px) */
@media (max-width: 980px) {
  .mobile-menu-toggle {
    display: grid;
    place-items: center;
  }

  .app {
    grid-template-columns: 1fr !important;
  }

  .side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
  }

  .main {
    width: 100%;
  }

  /* 顶部栏适配 */
  .top, .topbar {
    padding: 16px 18px 16px 70px !important;
    min-height: 64px !important;
  }

  .top h1, .topbar h3 {
    font-size: 16px !important;
  }

  .top small, .topbar h3 small {
    font-size: 11px !important;
  }

  /* 面板内容适配 */
  .pane {
    padding: 20px 16px 80px !important;
  }

  /* 知识库头部 */
  .kb-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .kb-head h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  /* 网格布局 */
  .kb-grid, .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .model-cards {
    grid-template-columns: 1fr !important;
  }

  /* 表格容器 */
  .table-wrap {
    border-radius: 14px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .member-table {
    min-width: 800px;
  }

  /* 表单网格 */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* 模型类型选择 */
  .model-types {
    grid-template-columns: 1fr !important;
  }

  /* 成员工具栏 */
  .member-tools {
    grid-template-columns: 1fr !important;
  }

  /* 按钮全宽 */
  .btn-primary, .new-btn {
    width: 100%;
  }

  /* 卡片适配 */
  .kb-card {
    padding: 16px !important;
    min-height: auto !important;
  }

  /* 主题切换按钮 */
  .theme-toggle {
    left: 16px !important;
    bottom: 16px !important;
    z-index: 90 !important;
    padding: 9px 12px !important;
  }

  body.has-site-footer .theme-toggle {
    bottom: 80px !important;
  }

  /* 通知面板 */
  .notify-panel {
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 弹窗适配 */
  .modal {
    padding: 16px !important;
  }

  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .dialog-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  /* 知识库编辑器 */
  .kb-editor-modal {
    padding: 0 !important;
  }

  .kb-editor-card {
    border-radius: 0 !important;
  }

  .kb-editor-body {
    grid-template-columns: 1fr !important;
  }

  .kb-editor-side {
    border-right: none !important;
    border-bottom: 1px solid #e7e1d8 !important;
    max-height: 40vh;
    overflow: auto;
  }

  .kb-doc-page {
    padding: 24px 16px 100px !important;
  }

  .kb-editor-actions {
    right: 16px !important;
    bottom: 16px !important;
  }

  /* 聊天页面 */
  .chat-page {
    grid-template-columns: 1fr !important;
    height: 100% !important;
  }

  .convs {
    display: none !important;
  }

  .chat {
    padding: 0 14px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-conversation-tools {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    padding: 10px 0 0 !important;
    flex: 0 0 auto !important;
  }

  .mobile-conversation-picker {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 5px !important;
    color: var(--txt-faint, #9f978d) !important;
    font-size: 11px !important;
  }

  .mobile-conversation-picker select {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid var(--line, rgba(255,255,255,.12)) !important;
    border-radius: 8px !important;
    background: var(--glass-strong, #211d19) !important;
    color: var(--txt, #f4ece0) !important;
    font: inherit !important;
    font-size: 13px !important;
  }

  .mobile-new-conversation {
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,138,61,.55) !important;
    border-radius: 8px !important;
    background: rgba(255,138,61,.12) !important;
    color: var(--amber, #ff8a3d) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .msg {
    max-width: 100% !important;
  }

  .bubble {
    font-size: 14px !important;
    padding: 13px 15px !important;
  }

  .ava {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  /* 输入框 */
  .box {
    padding: 9px !important;
  }

  textarea {
    font-size: 14px !important;
  }

  .attach, .attach-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  .send {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }

  /* 消息区域 */
  .msgs {
    padding: 20px 0 16px !important;
    gap: 16px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 输入区域固定在底部，避免被浏览器导航栏遮挡 */
  .composer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 0 !important;
    /* 关键：添加大量底部间距 */
    padding-bottom: 60px !important;
    background: var(--ink) !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
  }

  /* 聊天区域添加底部内边距，避免被输入框遮挡 */
  #pane-chat.show {
    padding: 0 !important;
    height: calc(100vh - 64px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

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

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

  /* 空状态卡片 */
  .empty-card {
    padding: 28px 20px !important;
  }

  .empty h2 {
    font-size: clamp(22px, 5vw, 28px) !important;
  }

  /* Toast 提示 */
  .toast {
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
  }

  .toast-card {
    min-width: auto !important;
    max-width: none !important;
  }

  /* 图片预览 */
  .preview {
    padding: 16px !important;
  }

  .preview img {
    max-width: 100% !important;
    max-height: 85vh !important;
  }

  /* 头像裁剪 */
  .crop-box {
    width: min(85vw, 340px) !important;
    height: min(85vw, 340px) !important;
  }

  .crop-tools {
    width: min(85vw, 340px) !important;
  }
}

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

  .top, .topbar {
    padding: 12px 14px 12px 60px !important;
    min-height: 56px !important;
  }

  .pane {
    padding: 16px 12px 50px !important;
  }

  .kb-head h2 {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .kb-head p {
    font-size: 13px !important;
  }

  .kb-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .kb-card h5 {
    font-size: 15px !important;
  }

  .kb-card .ex {
    font-size: 13px !important;
  }

  .modal-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .modal-head h3, .dialog-card h3 {
    font-size: 20px !important;
  }

  .theme-toggle {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .theme-toggle-text {
    display: none !important;
  }

  .theme-toggle-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  /* 聊天消息 */
  .msg {
    gap: 10px !important;
  }

  .ava {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .bubble {
    font-size: 13.5px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  /* 输入框 */
  .box {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .attach, .attach-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .send {
    width: 40px !important;
    height: 40px !important;
  }

  /* 空状态 */
  .empty-card {
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .empty-ico {
    width: 54px !important;
    height: 54px !important;
    font-size: 24px !important;
  }

  /* 备案信息 */
  .site-beian-footer {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    font-size: 10.5px !important;
  }

  /* 统计卡片 */
  .stat-card {
    padding: 18px !important;
  }

  .stat-card .v {
    font-size: 32px !important;
  }

  /* 按钮 */
  .btn-primary, .btn {
    padding: 13px 20px !important;
    font-size: 14px !important;
  }

  /* 字段输入 */
  .field input, .field textarea, .field select {
    padding: 13px 14px !important;
    font-size: 14px !important;
  }

  /* 知识库编辑器 */
  .kb-doc-editor {
    font-size: 16px !important;
  }

  .kb-editor-toolbar {
    padding: 10px 14px !important;
    gap: 6px !important;
  }

  .kb-tool {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
  }
}

/* 横屏适配 */
@media (max-width: 980px) and (orientation: landscape) {
  .side {
    width: 260px;
  }

  .msgs {
    padding: 16px 0 12px !important;
  }

  .empty-card {
    padding: 24px 20px !important;
  }
}

/* 触摸友好的最小点击区域 */
@media (max-width: 980px) {
  button, a, .kb-card, .conv, .nav-item, .settings-item {
    min-height: 44px;
  }

  /* 确保触摸目标足够大 */
  .kb-actions button, .member-actions button, .member-actions a {
    min-height: 36px;
    min-width: 36px;
    padding: 8px 12px;
  }

  /* 开关按钮 */
  .switch {
    width: 50px;
    height: 28px;
  }

  .switch::after {
    width: 22px;
    height: 22px;
    top: 3px;
  }

  .switch.on::after {
    left: 25px;
  }
}

/* 防止内容溢出 */
@media (max-width: 980px) {
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  pre, code {
    max-width: 100%;
    overflow-x: auto;
  }

  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS 安全区域适配 */
@supports (padding: max(0px)) {
  @media (max-width: 980px) {
    .side {
      padding-top: max(26px, env(safe-area-inset-top));
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .composer {
      padding-bottom: max(22px, calc(22px + env(safe-area-inset-bottom))) !important;
    }

    .theme-toggle {
      bottom: max(16px, calc(16px + env(safe-area-inset-bottom))) !important;
      left: max(16px, env(safe-area-inset-left)) !important;
    }

    body.has-site-footer .theme-toggle {
      bottom: max(80px, calc(80px + env(safe-area-inset-bottom))) !important;
    }

    /* 聊天页面特殊处理 */
    #pane-chat {
      height: calc(100vh - 64px - env(safe-area-inset-bottom)) !important;
    }

    /* 页面容器避开底部导航栏 */
    .pane {
      padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* 移动端优化滚动 */
@media (max-width: 980px) {
  .msgs, .conv-list, .kb-grid, .pane, .notify-list, .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 移动端隐藏自定义光标 */
  .cur, .cur-dot {
    display: none !important;
  }

  /* 恢复默认光标 */
  * {
    cursor: auto !important;
  }

  /* 确保主容器正确布局 */
  .app {
    position: relative !important;
    overflow: hidden !important;
  }

  .main {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
  }

  /* 修复知识库页面布局 */
  #pane-kb {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

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

  /* 优化卡片间距 */
  .kb-card {
    margin-bottom: 4px;
  }

  /* 优化空状态卡片 */
  .empty-card {
    margin: 20px 0;
  }
}

/* 添加平滑过渡 */
@media (max-width: 980px) {
  .side,
  .mobile-overlay,
  .mobile-menu-toggle,
  .theme-toggle {
    will-change: transform, opacity;
  }

  /* 优化渲染性能 */
  .msgs,
  .chat,
  .pane {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}