/* === 11-mobile.css (原 user.css L4478-L5222,原 Section 14b 主体,沿 ═══ 切出 S15/S16/S17 后剩余;移动端覆盖原样搬迁) === */

/* ================================================================
   14. 移动端 ChatGPT 式重构(P191 — T071)
   - 抽屉:#sidebar 复用 PC DOM,移动端变 fixed 左抽屉(对称于 P189 右抽屉)
   - 首页:#home-view 改造为输入框首页(.home-compose)
   - 抽屉内容(功能入口 / 助手节点 / 底部的你):38-mobile-drawer.css
   - 所有新增 mobile 专属元素默认隐藏,移动端媒体查询开启
   - PC 完全不动:此 block 全部包裹在 @media (max-width: 1023px) 或用
     默认 display: none + 媒体查询覆盖,两种方式任选规范
   ================================================================ */

/* ── 默认隐藏(任何屏宽)── */
.mobile-only { display: none; }
.sidebar-backdrop { display: none; }
.home-topbar-ghost { visibility: hidden; pointer-events: none; }

/* ── 移动端激活 ── */
@media (max-width: 1023px) {
  /* Step 1:mobile-only class 在移动端变可见(icon-btn 基础 display:flex) */
  .mobile-only { display: flex; }

  /* ───────────────────────────────────────────
     Step 2:#sidebar 移动端左侧抽屉
     P192 XHTML 协作整合 — 取代 P191 移动端 sidebar 样式
     抽屉容器只管滑入滑出;里面的品牌/功能入口/助手节点/底部的你见 38-mobile-drawer.css
     ─────────────────────────────────────────── */
  #sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;          /* 贴住屏幕上下沿(同 #chat-view),不依赖启动时可能测短的 --app-height */
    height: auto;       /* 盖掉 .sidebar 电脑端的固定高度 */
    animation: none;    /* 电脑端的入场滑入动画会覆盖收起位移,让抽屉在启动时闪现一次 */
    left: 0;
    width: 86vw;
    max-width: 380px;
    z-index: 201;
    padding: 0;
    margin: 0;
    border: none;
    border-right: 1px solid var(--border-glass);
    border-radius: 0;
    /* P427:抽屉底改 bg-surface(卡片色),与 PC `.glass-panel` 基类对齐 */
    background: var(--bg-surface);
    box-shadow: var(--shadow-ambient);
    transform: translateX(-100%);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    overflow: hidden;
  }
  body.sidebar-mobile-open #sidebar {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* backdrop:复用 modal-overlay 视觉契约(shadow-deep + blur)*/
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--shadow-deep);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }
  body.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* P420-fix2:circuit 在移动端隐藏(手机抽屉有自己的"原点与节点"结构)
     P428-2 续:`.sidebar-circuit` 已抽出 `#sidebar` 成为兄弟节点,原 descendant
     selector `#sidebar .sidebar-circuit` 不再匹配 — 改为不依赖父子关系的直接选择器,
     同时隐藏 PC 端只有意义的 `.sidebar-column`(移动端 wrapper 无视觉但仍占 flex 槽) */
  .sidebar-circuit { display: none; }
  .sidebar-column { display: contents; }

  /* ── 对话视图:移除旧返回按钮(三横线接管)── */
  #btn-chat-back { display: none !important; }

  /* ── P192 chat-view 修复:回到最新浮动按钮 + textarea 高度 ── */
  /* 回到最新按钮:全局段(line 2063)给的 bottom: 100px 在移动端被
     输入栏遮挡(input-bar 总高 ~110px+ + safe-area)。提到输入栏顶部以上 */
  #chat-view .scroll-to-latest {
    bottom: calc(140px + env(safe-area-inset-bottom));
  }
  #chat-view .scroll-to-latest.hidden {
    transform: translateX(-50%) translateY(10px);
  }

  /* textarea:全局段 min-height: 24px 在 box-sizing: border-box 下,
     content-area 实际只有 4px(24 - 10*2 padding),首次输入或换行时
     渲染区域不够,文字被裁切。改用 line-height 等高 + box-sizing 显式 */
  #chat-view #chat-input,
  #chat-view .input-bar textarea {
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 0;
    line-height: 1.4;
  }

  /* ── 首页输入框视图 ── */
  #home-view {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .home-topbar { justify-content: space-between; }
  /* home 顶栏三横线是 icon-btn 但非 mobile-only(避免 PC 也被 display:none 误伤) */
  #btn-home-drawer { flex-shrink: 0; }
  /* 手机顶栏(首页/对话页)左右图标统一略大于通用 20px,单手点按更易辨认 */
  .topbar .icon-btn svg { width: 22px; height: 22px; }
  /* 右侧 ghost 占位,保持 topbar 左右对称居中 */
  .home-topbar-ghost {
    width: 44px; height: 44px;
    flex-shrink: 0;
  }

  .home-compose {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-5);
    padding-top: calc(56px + var(--app-top-inset) + var(--space-4));
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-5));
    box-sizing: border-box;
  }
  .home-compose-inner {
    width: 100%;
    max-width: 540px;
    margin-block: auto;   /* 输入区垂直居中;内容超高时退化为顶部对齐可滚动 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  /* 顶部定位标题:刻意轻 — 小字/常规字重/弱色,不抢输入框焦点、不像宣传语 */
  .compose-heading {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.01em;
  }

  /* 输入卡:页面焦点 — 正文为主,目标/语音/发送内嵌 */
  .compose-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: var(--space-5) var(--space-5) var(--space-4);
    box-shadow: var(--shadow-ambient);
    transition: border-color var(--transit-fast), box-shadow var(--transit-fast);
  }
  .compose-card:focus-within {
    border-color: var(--brand-border);
    box-shadow: 0 0 0 3px var(--brand-bg-light);
  }
  #compose-input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 16px; /* ≥16 防 iOS 缩放 */
    line-height: 1.6;
    resize: none;
    outline: none;
    font-family: inherit;
    padding: 0;
    min-height: 132px;   /* 焦点主角:显著增高 */
    max-height: 220px;
  }
  #compose-input::placeholder { color: var(--text-muted); }

  /* 投递目标行(发往 …)— 给确定性,不加分割线降噪 */
  .compose-target-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin-top: var(--space-4);
    font-size: 13px;
  }
  .compose-target-dot {
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-bright);
    box-shadow: 0 0 0 3px var(--bg-active);
  }
  .compose-target-line.is-newtopic .compose-target-dot {
    background: var(--text-dim);
    box-shadow: none;
  }
  .compose-target-label {
    flex-shrink: 0;
    color: var(--text-muted);
  }
  .compose-target-name {
    min-width: 0;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compose-card-foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .compose-send-btn {
    margin-left: auto;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border: none;
    background: var(--send-bg);
    color: var(--send-text);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--transit-fast), transform var(--transit-fast), opacity var(--transit-fast);
  }
  .compose-send-btn:hover { background: var(--send-bg-hover); }
  .compose-send-btn:active { transform: scale(0.94); }
  .compose-send-btn:disabled {
    background: var(--bg-active);
    color: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .compose-send-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* 输入框下方轻文字操作(低存在感,不抢焦点)*/
  .compose-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }
  .compose-link {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    transition: color var(--transit-fast);
  }
  .compose-link:hover { color: var(--text-main); }

  /* 最近继续:常显最近 3 条,轻量不抢焦点(选中带内容低对比,其余助手+标题)*/
  .compose-recent {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .compose-recent.hidden { display: none; }
  /* "最近助手对话" 头:小字弱色作提示与区隔 */
  .compose-recent-head { padding: 0 var(--space-1); }
  .compose-recent-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .compose-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .compose-recent-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background var(--transit-fast);
  }
  .compose-recent-card:hover { background: var(--bg-hover); }
  .compose-recent-card.active { background: var(--bg-subtle); }
  .compose-recent-card.active::before {
    content: "";
    position: absolute;
    left: var(--space-3); top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-bright);
    box-shadow: 0 0 0 3px var(--bg-active);
  }
  .compose-recent-card-title {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compose-recent-card.active .compose-recent-card-title { font-weight: 700; }
  .compose-recent-card-sub {
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 选中项的"最近内容"低对比,不喧宾夺主 */
  .compose-recent-card.active .compose-recent-card-sub { color: var(--text-dim); }

}

/* ── 键盘弹出:对话页不动,只有输入栏滑到键盘上方(变量由 keyboard-inset.js 写入)──
   1. 聚焦后文字区先透明再淡入:iOS 不会为"看不见的输入框"整页上推,于是不再抖动。
      系统决定是否上推的时刻随键盘类型/负载早晚不定,只透明一帧会有两三成漏网,
      所以透明要覆盖到键盘弹出初段(约 0.25 秒),再随输入栏上滑淡入;
   2. 输入栏只做位移(随键盘平滑上滑),消息区高度不变、内容不动,被键盘盖住的部分可继续往下滚;
   3. 若浏览器仍上推了页面(--vv-top>0),对话页与顶栏跟着可见区域放回原位作兜底。
   键盘下方没有安全区,位移时一并扣掉底部安全区留白,输入框贴近键盘。 */
@keyframes kbNoPan { 0%, 65% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 1023px) {
  #chat-view .input-wrapper textarea:focus { animation: kbNoPan 0.38s ease-out; }
  #chat-view .input-bar { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
  html.kb-open #chat-view { top: var(--vv-top); bottom: auto; height: calc(var(--vv-height) + var(--kb-bottom)); }
  html.kb-open #chat-view .topbar { top: var(--vv-top); }
  html.kb-open #chat-view .input-bar {
    transform: translateY(calc(max(24px, env(safe-area-inset-bottom)) - 6px - var(--kb-bottom)));
  }
  html.kb-open #chat-view .chat-area { padding-bottom: calc(var(--chat-input-height, 0px) + var(--kb-bottom)); }
  html.kb-open #chat-view .scroll-to-latest { bottom: calc(140px + var(--kb-bottom)); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #chat-view .input-bar { transition: none; }
}