/* ============================================================================
 * Deva Web —— 移动端适配层（≤820px）
 * 由 /api/mobile.css 动态下发，index.html 引入（位于打包 CSS 之后）。
 *
 * 设计铁律：
 *   1. 所有规则都在 @media (max-width: 820px) 内 —— 桌面端零影响。
 *   2. 只做「重排 / 重尺寸」，不隐藏任何功能入口。
 *   3. 不改 Deva 源码与构建产物结构：本层靠「后加载 + 同特异性」胜出，
 *      仅在必须压过内联变量/更高特异性时才用 !important（均有注释）。
 *
 * 病灶（CDP 真机仿真实测 390×844）：
 *   .cf-body { grid-template-columns: var(--cf-rail-w,56px) var(--cf-side,300px) minmax(0,1fr) }
 *   被 resizable.tsx 的 JS 夹取成 56px / 220px / 114px —— 主内容区只剩 114px，
 *   文字逐词断行、元素重叠。全库 CSS 零响应式断点，本文件是第一处。
 *
 * 层叠上下文（关键）：
 *   .cf-shell 是 position:fixed ⇒ 自成层叠上下文，其内部 z-index 是一套独立编号。
 *   故遮罩用 .cf-shell::after 伪元素实现（同上下文），而不是往 <body> 塞节点
 *   —— 挂 body 的遮罩 z-index 再大也压不过 shell 内的抽屉。
 *   顺序：底部导航 45 < 遮罩(::after) 50 < 列表抽屉 55 < 弹窗背板 60(原有)
 * ========================================================================== */

@media (max-width: 820px) {
  /* ------------------------------ 基础变量 ------------------------------ */
  .cf-shell {
    /* 桌面端 780px 居中内容列在手机上必然溢出 → 交由内边距控制 */
    --cf-main: 100%;
    /* 底部导航高度（iPhone 安全区另计，见 env()） */
    --deva-navh: 58px;
    /* 13px 在手机上偏小，整体上浮一档 */
    font-size: 14px;
  }

  /* 移动端下拉刷新/橡皮筋会打断抽屉手势 */
  html,
  body {
    overscroll-behavior: none;
  }

  /* ------------------------- 主体：三列 → 单列 ------------------------- */
  /* !important：压过 .cf-body 规则与被 JS 内联写上的 --cf-rail-w / --cf-side。
     图标栏与列表列都已改 position:fixed（脱离网格流），
     故这一列实际由主内容区（.cf-conv）独占。 */
  .cf-body {
    grid-template-columns: minmax(0, 1fr) !important;
    /* 给底部导航让位，避免输入框被遮 */
    padding-bottom: calc(var(--deva-navh) + env(safe-area-inset-bottom, 0px));
  }

  /* 桌面列宽拖拽手柄：手机上是纯误触源（touch-action:none 还会吞手势） */
  .cf-resizer {
    display: none !important;
  }

  /* Electron 窗口拖拽区：Web 无窗口概念，纯占位 */
  .cf-dragbar {
    display: none !important;
  }

  /* 桌面端这三处是居中定宽列（780 / 860px），手机上溢出 */
  .cf-msgs__inner,
  .cf-quick__inner,
  .cf-composer__inner,
  .cf-profile__inner,
  .chat__thread,
  .composer__box {
    max-width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* ------------------- 图标栏 → 底部导航（微信式） ------------------- */
  /* 5 个入口（对话/角色/任务/机器人 + 设置）全在 .cf-iconrail 里，
     横向排布即底部导航 —— 纯重排，入口零丢失。 */
  .cf-iconrail {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: calc(var(--deva-navh) + env(safe-area-inset-bottom, 0px));
    padding: 0 8px env(safe-area-inset-bottom, 0px);
    background: var(--bg-panel);
    border-right: 0;
    border-top: 1px solid var(--border);
  }

  /* 桌面端靠 .cf-spacer 把 bots/settings 顶到栏底；横向栏里会撑出异常间距 */
  .cf-spacer {
    flex: 0 0 0;
  }

  /* 触摸目标 ≥44px（Apple HIG 最小推荐值） */
  .cf-navbtn,
  .cf-iconrail__me {
    width: 46px;
    height: 46px;
    -webkit-tap-highlight-color: transparent;
  }

  .cf-iconrail__me {
    margin-bottom: 0;
  }

  /* 桌面端「选中态左侧强调条」为纵向图标栏设计，横向栏里会飘到栏外 */
  .cf-navbtn.is-active::before {
    display: none;
  }

  .cf-navbtn__dot {
    top: 6px;
    right: 6px;
  }

  /* ------------------------ 列表列 → 左侧抽屉 ------------------------ */
  /* 桌面端第二列（对话/角色/任务列表）改为滑入抽屉，主区独占全宽。
     bottom 让出底部导航，避免抽屉压住导航。 */
  .cf-rail {
    position: fixed;
    top: 0;
    bottom: calc(var(--deva-navh) + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: min(86vw, 380px);
    z-index: 55;
    transform: translateX(-101%);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.4);
    overscroll-behavior: contain;
  }

  /* 抽屉状态挂在 <html data-deva-drawer="open">：
     React 从不管理 documentElement 属性，任何重渲染都不会抹掉它
     （若挂 .cf-rail 的 class，React 替换 className 时会被冲掉）。 */
  html[data-deva-drawer='open'] .cf-rail {
    transform: none;
  }

  /* 遮罩：用伪元素（零 DOM 注入，绝不碰 React 管理的节点）。
     position:fixed 使其脱离 .cf-shell 的 grid 流，不会多出一行。
     点击关闭由 mobile.js 在 .cf-shell 上委托处理。 */
  .cf-shell::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  html[data-deva-drawer='open'] .cf-shell::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* ------------------------ 对话头 / 输入区 ------------------------ */
  /* !important：打包 CSS 给 .cf-conv__head 留了 140px 右内边距，
     是给 Electron 原生窗口控件（min/max/close）预留的 —— Web 上白扔 140px。 */
  .cf-conv__head {
    padding-right: var(--space-4) !important;
  }

  /* iOS Safari 对字号 <16px 的输入框会在聚焦时自动放大整页
     —— 这是「手机上一打字页面就变形」的第二只手，必须抬到 16px。 */
  .cf-shell input:not([type='checkbox']):not([type='radio']),
  .cf-shell textarea,
  .cf-shell select {
    font-size: 16px !important;
  }

  /* ==================== 输入栏：手机上的「横向预算」修复 ==================== */
  /* 病灶（CDP 中文 locale 实测 390×844）：
   *   输入区内缩链 .cf-composer(16px) + .cf-composer__inner(16px) + .cf-box(12px)
   *   = 每侧 44px，输入栏可用宽度只剩 300px；而 5 个控件自然宽度合计 ≈ 450px
   *   （附件 25 + 挂载工作区 131 + 模型 chip 152 + 思考 chip 73 + 发送 68）。
   *   结果：发送按钮被挤出屏幕右侧（x=441..509，屏宽 390）—— 手机上点不到发送。
   *   用户截图里输入栏只剩「挂载工作区 / 模型名 / 最高」，就是这个原因。
   *
   * 修复思路（按「信息价值」排序分配宽度，零功能删减）：
   *   ① 收紧三层内边距 44px → 24px/侧，凭空多出 40px；
   *   ② 窄屏把「挂载工作区」收敛为图标（文字仍在 DOM，font-size:0 隐藏，
   *      由 mobile.js 补 title/aria-label，功能与可访问性都不丢）；
   *   ③ 发送按钮改图标箭头（移动端通用语义），固定 38px；
   *   ④ 模型 chip 吃掉剩余宽度（flex:1），字号自适应 —— 优先完整显示；
   *   ⑤ 思考等级保留文字「最高」（用户最需要的信息，不做降级）。
   * 实测：390/375/360 模型名完整可见，320 极端窄屏优雅省略号截断。 */
  .cf-composer {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .cf-composer__inner,
  .cf-box {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  /* 单行不换行 + 允许子项收缩（默认 flex 项 min-width:auto 会拒绝收缩 → 溢出） */
  .cf-box__bar {
    flex-wrap: nowrap !important;
    gap: var(--space-1) !important;
    min-width: 0 !important;
  }

  .cf-box__bar > * {
    min-width: 0 !important;
  }

  /* 模型 chip：吃掉剩余宽度 */
  .cf-box__bar .model-pick:first-of-type {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .cf-box__bar .model-pick:first-of-type .chip {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
  }

  /* 思考等级 chip：按内容定宽，不参与收缩 */
  .cf-box__bar .model-pick:nth-of-type(2) {
    flex: 0 0 auto !important;
  }

  .cf-box__bar .model-pick .chip__label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    display: block !important;
  }

  .cf-box__bar .chip__dot,
  .cf-box__bar .chip svg {
    flex: 0 0 auto !important;
  }

  /* 挂载工作区 → 纯图标（加号文件夹），把宽度让给模型名 */
  .cf-box__bar .cf-wschip {
    flex: 0 0 auto !important;
    width: 34px !important;
    min-width: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 var(--space-2) !important;
  }

  .cf-box__bar .cf-wschip svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  /* 发送 → 图标箭头（移动端通用语义），固定 38px 不再被挤走 */
  .cf-box__bar .cf-send {
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cf-box__bar .cf-send::after {
    content: '\2191';
    font-size: 18px !important;
    line-height: 1;
  }

  /* 模型名字号随屏宽自适应：≥375px 完整显示，窄屏优雅省略 */
  .cf-box__bar .model-pick .chip {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
    gap: var(--space-1) !important;
  }

  /* 模型名字号分档（CDP 实测：各视口「不截断」的最大可读字号）：
   *   390px+ → 11.5px 完整；375–389px → 10px 完整；360 以下 → 10px + 省略号。
   *   单条 clamp() 表达不了这种跳变，故用 min-width 断点精确对齐（11.5 是 390
   *   下的实测临界点：12px 会截断 4px）。 */
  .cf-box__bar .model-pick .chip__label {
    font-size: 10px !important;
  }

  @media (min-width: 390px) {
    .cf-box__bar .model-pick .chip__label {
      font-size: 11.5px !important;
    }
  }

  /* ---------------------------- 弹窗全屏化 ---------------------------- */
  /* .cf-modal__backdrop 是 display:grid + place-items:center（不是 flex）。
     桌面端 720/560/460px 定宽弹窗在 390px 屏上左右被裁 → 占满可用空间。 */
  .cf-modal__backdrop {
    padding: 0;
    place-items: stretch;
  }

  .cf-modal,
  .cf-modal.is-editor,
  .cf-modal.bots-scanmodal,
  .cf-modal.bots-pickmodal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  /* 设置面板内部：桌面是「168px 竖向导航 + 内容」两列，手机上改为
     横向可滚动导航 + 内容，否则内容区只剩 222px。 */
  .cf-modal__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .cf-nav {
    flex-direction: row;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cf-nav__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 设置内容页在手机上定宽 620/720px → 全宽 */
  .cf-pane,
  .settings,
  .pane,
  .field,
  .textarea,
  .ext-field,
  .ext-status,
  .kv-editor,
  .mcp-tools,
  .mcp-error,
  .provider-warn,
  .ext-detail__text,
  .ext-detail__md {
    max-width: 100%;
  }

  .cf-pane,
  .settings,
  .pane {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* --------------------- 触摸端：hover 才显的操作 --------------------- */
  /* 手机没有 hover：桌面端「悬停浮现」的行内操作（删除/更多）在触摸端
     永远不出现。改为常显（降透明度保留视觉层次），并在点按行时不遮 meta。 */
  @media (hover: none) {
    .list-row__action,
    .gitrow__actions,
    .termtab__close {
      opacity: 0.55 !important;
    }

    /* 桌面端 hover 时用操作按钮盖住 meta 防抖动；触摸端无 hover，
       一旦 tap 命中该规则会把 meta 藏掉，这里钉住常显。 */
    .list-row:hover .list-row__meta {
      opacity: 1 !important;
    }

    /* :disabled 的 opacity:0 是设计行为（保留，勿覆盖） */
    .list-row__action:disabled {
      opacity: 0 !important;
    }
  }
}

/* 横屏手机 / 小平板：底部栏可矮一点 */
@media (max-width: 820px) and (orientation: landscape) {
  .cf-shell {
    --deva-navh: 50px;
  }
}