:root {
    color-scheme: dark;
    --bg: #090a0c;
    --raised: #101215;
    --sunken: #0c0e11;
    --border: rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.13);
    --text: #edf0f2;
    --dim: #8b949f;
    --code: #c6ced6;
    --accent: #5f8cff;
    --accent-bg: rgba(95,140,255,.14);
    --accent-fg: #ffffff;
    --user-bubble: rgba(95,140,255,.16);
    --ok: #35c46f;
    --ok-bg: rgba(53,196,111,.12);
    --warn: #d7a84f;
    --warn-bg: rgba(215,168,79,.13);
    --warn-border: rgba(215,168,79,.34);
    --err: #ff6b6b;
    --danger: #ff5f62;
    --shadow-menu: 0 20px 56px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04);
    --shadow-float: 0 10px 34px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.035);
    --term-canvas-bg: #111318;
    --term-canvas-fg: #d8dee9;
    --term-canvas-border: rgba(255,255,255,.08);
    --term-scrollbar: rgba(216,222,233,.22);
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --motion-fast: 140ms;
  }
  /* 深色为默认。启动脚本把 auto/手动选择解析成单一 effective 属性，
     因而浅色变量只维护这一份，不再为系统主题和手动主题重复声明。 */
  :root[data-theme-effective="light"] {
    color-scheme: light;
    --bg: #f7f7f5;
    --raised: #ffffff;
    --sunken: #f1f1ef;
    --border: rgba(0,0,0,.085);
    --border-strong: rgba(0,0,0,.15);
    --text: #171717;
    --dim: #6f7177;
    --code: #3f4650;
    --accent: #255fd6;
    --accent-bg: rgba(37,95,214,.10);
    --accent-fg: #ffffff;
    --user-bubble: rgba(37,95,214,.11);
    --shadow-menu: 0 18px 48px rgba(15,23,42,.14), 0 0 0 1px rgba(0,0,0,.035);
    --shadow-float: 0 8px 28px rgba(15,23,42,.09), 0 0 0 1px rgba(0,0,0,.035);
    --ok: #168a4a;
    --ok-bg: rgba(22,138,74,.10);
    --warn: #8a6818;
    --warn-bg: rgba(193,139,25,.12);
    --warn-border: rgba(138,104,24,.26);
    --err: #c44747;
    --danger: #c83d42;
    --term-canvas-bg: #f7f7f5;
    --term-canvas-fg: #171717;
    --term-canvas-border: rgba(0,0,0,.09);
    --term-scrollbar: rgba(23,23,23,.22);
  }
  * { box-sizing: border-box; }
  /* 禁掉浏览器原生下拉刷新：会话/首页滚到顶再拉不会 reload（reload 会把 SPA 弹回首页） */
  html { overscroll-behavior-y: contain; }
  body { margin: 0; font: 16px/1.65 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
         "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
         background: var(--bg); color: var(--text); overscroll-behavior-y: contain;
         text-rendering: optimizeLegibility; }
  /* 固定输入栏会把底部安全区也算进自身高度，消息列表需同步预留，避免 PWA 中最后一条被遮住。 */
  body.insession main { padding-bottom: calc(145px + env(safe-area-inset-bottom)); }
  button, input, textarea { font: inherit; }
  button, [role="button"] { touch-action: manipulation; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  /* 关掉系统的点按高亮：它按元素矩形盒子画方块（国产内核尤甚），与圆形/裸图标不符；
     按下反馈一律走各自的 :active（圆钮显示圆底色、裸图标变淡/变灰）。 */
  * { -webkit-tap-highlight-color: transparent; }

  /* 头部：居中标题 + 电脑名/状态副标题（对标官方 App 首页） */
  header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent);
           padding: 4px 10px; display: grid;
           grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
           align-items: center; column-gap: 8px; border-bottom: 1px solid var(--border);
           min-height: 44px; backdrop-filter: blur(18px) saturate(130%);
           -webkit-backdrop-filter: blur(18px) saturate(130%); }
  #hleft, #hright { min-width: 0; display: flex; align-items: center; gap: 6px; }
  #hleft { justify-content: flex-start; }
  #hright { justify-content: flex-end; }
  #hmid { min-width: 0; text-align: center; }
  /* 会话页：左侧返回+agent，右侧模型+分享+菜单 */
  body.insession > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  #titlehit { display: inline-block; max-width: 100%; cursor: pointer; user-select: none; }
  #titlesubline { display: flex; align-items: center; justify-content: center; gap: 6px;
                  min-width: 0; max-width: 100%; margin-top: 2px; }
  #headmodel { display: none; flex: none; max-width: 120px; border: 1px solid var(--border);
               border-radius: 999px; background: var(--sunken); color: var(--dim);
               padding: 1px 6px; font: 11px/1.2 inherit; cursor: pointer;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               align-items: center; justify-content: center; }
  body.insession #headmodel { display: flex; }
  #headmodel:active { color: var(--text); }
  header h1 { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -.01em;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 返回：无背景的图标按钮，尺寸与右侧图标按钮呼应 */
  #back { flex: none; width: 32px; height: 32px; margin-left: -4px; border: none;
          background: none; color: var(--text); cursor: pointer; padding: 0;
          align-items: center; justify-content: center; }
  #back:active { color: var(--dim); }
  #back svg { width: 22px; height: 22px; }
  #status { display: block; min-width: 0; font-size: 11px; line-height: 1.2; color: var(--dim);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
                    background: var(--dim); margin-right: 5px; vertical-align: 1px; }
  #status.online { color: var(--dim); }
  #status.online::before { background: var(--ok); }
  #status.warn { color: var(--warn); }
  #status.warn::before { background: var(--warn); }
  #status.down { color: var(--err); }
  #status.down::before { background: var(--err); }
  /* 局域网直连 WiFi 图标：stroke 用 currentColor，颜色随所在文本（副标题/诊断标题）走 */
  .wifiico { width: 1em; height: 1em; vertical-align: -0.15em; }
  /* 直连时顶掉左侧在线绿点：同一位置换成绿色 WiFi 图标，一眼看出走的是直连 */
  #status.direct::before { content: none; }
  #status.direct .wifiico { color: var(--ok); margin-right: 5px; }
  .diagtitle .wifiico { margin-right: 4px; }
  #agentpick { flex: none; display: none; position: relative; align-items: center; }
  #agentpick .agentbtn { display: flex; align-items: center; gap: 5px; height: 32px;
                         border: none; border-radius: 16px; background: none; color: var(--text);
                         cursor: pointer; padding: 0 4px 0 0; font: 600 12px/1 inherit; }
  #agentpick .agentbtn:active, #agentpick.open .agentbtn { color: var(--accent); }
  #agentpick .agentchev { color: var(--dim); font-size: 11px; line-height: 1; transform: translateY(1px); }
  #agentpick .agentmenu { display: none; position: fixed; left: 10px; top: 48px; z-index: 45;
                          min-width: 170px; padding: 6px; border: 1px solid var(--border);
                          border-radius: 16px; background: var(--raised);
                          box-shadow: 0 10px 32px rgba(0,0,0,.35); }
  #agentpick.open .agentmenu { display: block; }
  #agentpick .agentopt { display: flex; align-items: center; gap: 8px; width: 100%;
                         border: none; border-radius: var(--radius-sm); background: none; color: var(--text);
                         cursor: pointer; padding: 12px 14px; font-size: 15px; text-align: left; }
  #agentpick .agentopt:hover { background: var(--sunken); }
  #agentpick .agentopt:active { background: var(--sunken); }
  #agentpick .agentopt.active { background: var(--accent-bg); }
  #agentpick .agentico { flex: none; width: 18px; height: 18px; display: inline-flex;
                         align-items: center; justify-content: center; }
  #agentpick .agentico svg { width: 18px; height: 18px; display: block; fill: currentColor; }
  #agentpick .agentico.codex { color: #7a9dff; }
  #agentpick .agentico.claude { color: hsl(14.8 63.1% 59.6%); }
  #agentpick .agentname { flex: 1; min-width: 0; }
  #agentpick .agentwarn { color: var(--warn); font-size: 12px; }
  #agentpick .agentck { color: var(--accent); font-weight: 700; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) #agentpick .agentmenu { box-shadow: 0 10px 32px rgba(29,35,43,.16); }
    :root:not([data-theme]) #agentpick .agentico.codex { color: #3941ff; }
    :root:not([data-theme]) #agentpick .agentico.claude { color: hsl(14.8 55% 50%); }
    :root:not([data-theme]) #agentpick .agentico.pi { color: #7c3aed; }
  }
  :root[data-theme="light"] #agentpick .agentmenu { box-shadow: 0 10px 32px rgba(29,35,43,.16); }
  :root[data-theme="light"] #agentpick .agentico.codex { color: #3941ff; }
  :root[data-theme="light"] #agentpick .agentico.claude { color: hsl(14.8 55% 50%); }
  :root[data-theme="light"] #agentpick .agentico.pi { color: #7c3aed; }
  /* 会话页也显示 agentpick（与返回键同在左侧） */
  body.viewer #agentpick, body:not(.paired) #agentpick { display: none !important; }
  /* 打开某个终端后只留返回键+标题，隐藏顶部「终端」选择器（已在具体终端里，选择器多余） */
  body.interminal #agentpick { display: none !important; }
  #menubtn { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%;
             background: var(--sunken); color: var(--text); font-size: 16px; line-height: 1;
             cursor: pointer; padding: 0; }
  #menubtn:active { background: var(--border); }
  body:not(.paired) #menubtn { display: none; }
  /* ⋯ 菜单：组织方式 + 外观/字体/语言 + 管理 */
  #topmenu { display: none; position: fixed; right: 10px; top: 48px; z-index: 45;
             background: var(--raised); border: 1px solid var(--border); border-radius: 16px;
             padding: 6px; min-width: 230px; box-shadow: 0 10px 32px rgba(0,0,0,.35); }
  #topmenu.open { display: block; }
  #topmenu .m-session, #topmenu .m-session-label, #topmenu .m-session-sep { display: none; }
  body.insession #topmenu .m-list { display: none; }
  body.insession:not(.viewer) #topmenu .m-session { display: flex; }
  body.insession:not(.viewer) #topmenu .m-session-label,
  body.insession:not(.viewer) #topmenu .m-session-sep { display: block; }
  body.viewer #topmenu .m-session,
  body.viewer #topmenu .m-session-label,
  body.viewer #topmenu .m-session-sep { display: none !important; }
  /* 终端会话专属：悬浮钮显隐开关，仅在终端页出现；同时隐掉与首页列表相关的项 */
  #topmenu .m-term, #topmenu .m-term-label, #topmenu .m-term-sep { display: none; }
  body.interminal #topmenu .m-term { display: flex; }
  body.interminal #topmenu .m-term-label { display: block; }
  body.interminal #topmenu .m-term-sep { display: block; }
  body.interminal #topmenu .m-list { display: none; }
  #topmenu .mlabel { font-size: 12px; color: var(--dim); padding: 10px 14px 4px; letter-spacing: .04em; text-transform: uppercase; }
  #topmenu button { display: flex; align-items: center; gap: 12px; width: 100%; border: none;
                    background: none; color: var(--text); font-size: 15px; padding: 12px 14px;
                    min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
  #topmenu button:hover { background: var(--sunken); }
  #topmenu button:active { background: var(--sunken); }
  #topmenu button:disabled { opacity: .45; cursor: default; }
  #topmenu button:disabled:active { background: none; }
  #topmenu button svg { flex: none; }
  #topmenu .mck { margin-left: auto; color: var(--accent); }
  #topmenu .mseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
                   margin: 2px 4px 8px; border: 1px solid var(--border); border-radius: 12px;
                   background: none; }
  #topmenu .mseg button { justify-content: center; gap: 7px; min-width: 0; padding: 9px 8px;
                          border-radius: 8px; color: var(--dim); }
  #topmenu .mseg button span:not(.mck) { min-width: 0; white-space: nowrap; overflow: hidden;
                                         text-overflow: ellipsis; }
  #topmenu .mseg button .mck { margin-left: 0; min-width: 10px; font-weight: 700; }
  #topmenu .mseg button.sel { background: none; color: var(--text); }
  #topmenu .mseg button.sel svg, #topmenu .mseg button.sel .mck { color: var(--accent); }
  #topmenu hr { border: none; border-top: 1px solid var(--border); margin: 6px 8px; }

  /* 底部弹层（切换电脑 / 选择目录共用） */
  .sheet { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); }
  .sheet.open { display: block; }
  .sheetbox { position: absolute; left: 0; right: 0; bottom: 0; background: var(--raised);
              border-radius: 14px 14px 0 0; padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
              max-width: 760px; margin: 0 auto; max-height: 70vh; overflow-y: auto; }
  .sheethead { font-size: 13px; color: var(--dim); margin-bottom: 10px; letter-spacing: 1px; }
  .drow { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: var(--radius-md);
          cursor: pointer; }
  .drow:hover { background: var(--sunken); }
  .drow:active { background: var(--sunken); }
  /* 选中态一律走 accent；绿色只表示在线/运行中/成功 */
  .drow.active { background: var(--accent-bg); }
  .drow .dname { flex: 1; min-width: 0; }
  .drow .dico { flex: none; width: 22px; height: 22px; color: var(--dim); }
  .drow.active .dico { color: var(--text); }
  .drow .dico svg { width: 22px; height: 22px; display: block; }
  .drow .dsub { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
  .drow .dsub.wrap { white-space: normal; }
  .drow .ddot.ok { background: var(--ok); }
  .drow .ddot.warn { background: var(--warn); }
  .drow .ddot.down { background: var(--err); }
  .drow .dcur { font-size: 11px; color: var(--accent); }
  .drow .ddel { flex: none; border: none; background: none; color: var(--dim);
                font-size: 14px; padding: 6px 8px; cursor: pointer; }
  .sheetnote { font-size: 12px; color: var(--dim); padding: 10px 10px 0; line-height: 1.6; }
  .drow .ddot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
  .drow.active .ddot { background: var(--ok); }
  /* 快捷指令设置：底部 sheet 重做——分组卡片、iOS 拨动开关、粘底操作栏，中英成对编辑 */
  #quickcommandssheet.open { animation: qcfade .2s ease both; }
  #quickcommandssheet.open .sheetbox { animation: qcrise .3s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes qcfade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes qcrise { from { transform: translateY(16px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
  .quickbox { max-height: 84vh; padding-bottom: 0; }
  .sheetgrab { width: 36px; height: 4px; border-radius: 999px; background: var(--border);
               margin: 0 auto 14px; }
  .quickhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .quickheadtext { flex: 1; min-width: 0; }
  .quicktitle { font-size: 20px; font-weight: 700; color: var(--text); }
  .quicksub { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
  .quickclose { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%;
                background: var(--sunken); color: var(--dim); cursor: pointer; display: flex;
                align-items: center; justify-content: center; }
  .quickclose:active { background: var(--border); color: var(--text); }
  .quickclose svg { width: 18px; height: 18px; }
  /* 启用开关：卡片承载，右侧 iOS 拨动开关 */
  .quicktoggle { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 padding: 13px 14px; border-radius: 14px; background: var(--sunken);
                 color: var(--text); cursor: pointer; }
  .quicktoggletitle { font-size: 15px; font-weight: 600; }
  .qswitch { position: relative; flex: none; width: 46px; height: 28px; }
  .qswitch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
                   opacity: 0; cursor: pointer; }
  .qtrack { position: absolute; inset: 0; border-radius: 999px; background: var(--border);
            transition: background .2s ease; }
  .qthumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s ease; }
  .qswitch input:checked ~ .qtrack { background: var(--accent); }
  .qswitch input:checked ~ .qthumb { transform: translateX(18px); }
  .qswitch input:focus-visible ~ .qtrack { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* 列表小标题 + 计数 */
  .quicklisthead { display: flex; align-items: baseline; justify-content: space-between;
                   margin: 20px 2px 10px; font-size: 12px; letter-spacing: .6px; color: var(--dim); }
  .quickcount { font-variant-numeric: tabular-nums; }
  .quicklist { display: grid; gap: 10px; }
  .quickempty { padding: 20px 10px; text-align: center; font-size: 13px; color: var(--dim);
                border: 1px dashed var(--border); border-radius: 12px; }
  /* 指令卡：整行一个输入框（当前语言）+ 右侧删除图标 */
  .quickitem { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px;
               border: 1px solid var(--border); border-radius: 14px; padding: 4px 6px 4px 14px;
               background: var(--raised); cursor: text; }
  .quickitem:focus-within { border-color: var(--accent); }
  .quickfield { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .quickfield input { flex: 1; min-width: 0; box-sizing: border-box; border: none; background: none;
                      color: var(--text); padding: 12px 0; font: inherit; font-size: 15px; }
  .quickfield input:focus { outline: 2px solid transparent; outline-offset: 1px; }
  .quickfield input::placeholder { color: var(--dim); opacity: .55; }
  .qcount { flex: none; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums;
            opacity: 0; transition: opacity .15s; }
  .quickfield input:focus ~ .qcount { opacity: 1; }
  .qcount.warn { color: var(--warn); opacity: 1; }
  .quickdelete { flex: none; width: 38px; height: 38px; border: none; border-radius: var(--radius-sm);
                 background: none; color: var(--dim); cursor: pointer; display: flex;
                 align-items: center; justify-content: center; }
  .quickdelete:hover { background: var(--sunken); }
  .quickdelete:active { background: var(--sunken); color: var(--err); }
  .quickdelete svg { width: 18px; height: 18px; }
  /* 添加：虚线卡片 + 图标，达上限置灰 */
  .quickadd { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
              margin-top: 10px; padding: 11px 12px; border: 1px dashed var(--border);
              border-radius: 12px; background: none; color: var(--accent); font: inherit;
              font-size: 14px; font-weight: 500; cursor: pointer; }
  .quickadd:active { background: var(--accent-bg); }
  .quickadd:disabled { color: var(--dim); cursor: not-allowed; opacity: .55; }
  .quickadd svg { width: 17px; height: 17px; }
  .quickerror { min-height: 16px; margin: 10px 2px 0; color: var(--err); font-size: 12px;
                line-height: 1.5; }
  /* 粘底操作栏：内容在其下滚动，顶部渐隐过渡 */
  .quickactions { position: sticky; bottom: 0; z-index: 1; display: flex; gap: 10px; margin-top: 10px;
                  padding: 12px 0 calc(18px + env(safe-area-inset-bottom)); background: var(--raised); }
  .quickactions::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
                          background: var(--raised); opacity: .86;
                          pointer-events: none; }
  .quickactions button { flex: 1; border: none; border-radius: var(--radius-md); padding: 13px 15px;
                         min-height: 48px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
                         background: var(--sunken); color: var(--text); }
  .quickactions button:active { opacity: .8; }
  .quickactions .quicksave { background: var(--accent); color: #fff; }
  #diaglist { padding: 4px 2px 2px; }
  .diagchain { padding: 12px 4px 4px; }
  .diagsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
               align-items: center; margin: 4px 0 12px; }
  .diagstep { position: relative; display: flex; align-items: center; justify-content: center;
              min-height: 24px; }
  .diagstep:not(:last-child)::after { content: ""; position: absolute;
                                      left: calc(50% + 10px); right: calc(-50% + 10px);
                                      top: 50%; height: 2px; transform: translateY(-50%);
                                      border-radius: 999px; background: var(--border); z-index: 0; }
  .diagstep.link-ok::after { background: var(--ok); opacity: .55; }
  .diagstep.link-warn::after { background: var(--warn); opacity: .7; }
  .diagstep.link-down::after { background: var(--err); opacity: .75; }
  /* 两节点直连图：端点保持三节点时的左右位置（占第 1、3 列），连线跨过空出的中间列 */
  .diagsteps.two > .diagstep:last-child { grid-column: 3; }
  .diagsteps.two > .diagstep:first-child::after { right: calc(-150% + 10px); }
  .diaglabels.two > .diaglabel:last-child { grid-column: 3; }
  .diagdot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%;
             background: var(--dim); box-shadow: 0 0 0 4px var(--raised); }
  .diagdot.ok { background: var(--ok); }
  .diagdot.warn { background: var(--warn); }
  .diagdot.down { background: var(--err); }
  .diaglabels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .diaglabel { min-width: 0; text-align: center; }
  .diagtitle { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35;
               overflow-wrap: anywhere; }
  .diagsub { margin-top: 4px; color: var(--dim); font-size: 12px; line-height: 1.45;
             overflow-wrap: anywhere; }
  .forkbox { padding-top: 22px; }
  .forkhero { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .forkhero .forkicon { width: 66px; height: 66px; border-radius: 22px; background: var(--sunken);
                        color: var(--text); display: flex; align-items: center; justify-content: center; }
  .forkhero .forkicon svg { width: 34px; height: 34px; }
  .forktitle { font-size: 27px; line-height: 1.18; font-weight: 700; letter-spacing: 0; }
  .forkdesc { color: var(--dim); line-height: 1.55; }
  .forkchoice, .forkcancel { width: 100%; border: none; color: var(--text); cursor: pointer; }
  .forkchoice { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--sunken);
                border-radius: 14px; padding: 14px 16px; }
  .forkchoice:active, .forkcancel:active { opacity: .75; }
  .forkchoice svg { flex: none; width: 24px; height: 24px; color: var(--text); }
  .forkchoice .ftxt { min-width: 0; }
  .forkchoice .ftitle { display: block; font-weight: 650; line-height: 1.3; }
  .forkchoice .fsub { display: block; color: var(--dim); font-size: 13px; line-height: 1.35; margin-top: 3px; }
  .forkcancel { margin-top: 10px; background: none; border-radius: 12px; padding: 11px 16px; color: var(--dim); }
  .confirmbox { padding-top: 20px; }
  .confirmhero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .confirmicon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--sunken);
                 color: var(--text); display: flex; align-items: center; justify-content: center; }
  .confirmicon svg { width: 28px; height: 28px; }
  .confirmtitle { font-size: 22px; line-height: 1.24; font-weight: 700; letter-spacing: 0; }
  .confirmdesc { margin-top: 7px; color: var(--dim); line-height: 1.55; }
  .confirmactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .confirmbtn { border: none; border-radius: 12px; padding: 13px 15px; font: inherit;
                font-weight: 650; cursor: pointer; color: var(--text); }
  .confirmbtn:active { opacity: .75; }
  .confirmbtn.cancel { background: var(--sunken); }
  .confirmbtn.primary { background: var(--accent); color: #fff; }
  /* 入场动画：淡入 + 上滑，别再硬闪出来 */
  #confirmsheet.open { animation: qcfade .18s ease both; }
  #confirmsheet.open .sheetbox { animation: qcrise .26s cubic-bezier(.22,.61,.36,1) both; }
  /* 破坏性操作变体：红色主按钮 + 红调图标（结束终端 / 撤销 等） */
  .confirmicon.danger { background: rgba(217,106,106,.14); color: var(--err); }
  .confirmbtn.primary.danger { background: var(--err); color: #fff; }

  main { padding: 12px 20px 40px; max-width: 760px; margin: 0 auto; }
  .notice { text-align: center; color: var(--dim); padding: 30px 10px; }
  /* sticky：长会话滚到底部时报错（发送失败等）也要看得见 */
  #toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(6px);
           max-width: 80%; background: rgba(0,0,0,.82); color: #fff; padding: 8px 16px;
           border-radius: 20px; font-size: 13px; white-space: nowrap; z-index: 60;
           opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .banner { position: sticky; top: 53px; z-index: 19; background: var(--warn-bg);
            border: 1px solid var(--warn-border); color: var(--warn);
            padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 10px; display: none; }
  .banner.action { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  /* 未配对引导页 */
  .onboard { padding: 28px 6px; max-width: 480px; margin: 0 auto; }
  .onboard h2 { font-size: 22px; margin: 0 0 8px; }
  .onboard p { color: var(--dim); margin: 8px 0; }
  .onboard ol { margin: 16px 0; padding-left: 24px; }
  .onboard li { margin: 10px 0; }
  .onboard code { font-family: ui-monospace, monospace; font-size: 12px; background: var(--sunken);
                  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
  .obdim { font-size: 12.5px; }
  .obpaste { margin: 22px 0; padding: 16px; background: var(--raised); border: 1px solid var(--border);
             border-radius: var(--radius-md); }
  .obpaste label { display: block; font-weight: 600; }
  .obpaste p { margin: 3px 0 12px; font-size: 13px; }
  .obpaste form { display: flex; gap: 8px; }
  .obpaste input { min-width: 0; flex: 1; height: 42px; padding: 8px 11px; border: 1px solid var(--border-strong);
                   border-radius: var(--radius-sm); background: var(--sunken); color: var(--text); }
  .obpaste button { flex: none; height: 42px; padding: 0 17px; border: none; border-radius: var(--radius-sm);
                    background: var(--accent); color: var(--accent-fg); font-weight: 600; cursor: pointer; }
  .obpaste button:active { filter: brightness(.9); }
  .oberror { min-height: 1.4em; margin-top: 7px; color: var(--err); font-size: 12.5px; }
  @media (max-width: 420px) {
    .obpaste form { flex-direction: column; }
    .obpaste button { width: 100%; }
  }

  /* —— 列表页：状态看板 —— */
  #headline { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; margin: 10px 2px 20px; }
  #headline.warn { color: var(--warn); }
  #headline .sub { display: block; font-size: 14px; font-weight: 400; color: var(--dim); margin-top: 2px; }
  .secthead { font-size: 12.5px; color: var(--dim); margin: 18px 2px 8px; letter-spacing: 1px; text-transform: uppercase; }
  .row, .termrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 8px;
         background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-md);
         cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
  .row:hover, .termrow:hover { border-color: var(--border-strong); }
  .row:active, .termrow:active { background: var(--sunken); transform: scale(.995); }
  .row.appr { border-color: var(--warn-border); background: var(--warn-bg); }
  .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
  .dot.run { background: var(--ok); animation: pulse 1.2s ease-in-out infinite; }
  .dot.act { background: var(--ok); opacity: .45; } /* 桌面活动：只表示文件近期有写入，弱化且不脉冲 */
  .dot.appr { background: var(--warn); }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  .rowmain { flex: 1; min-width: 0; }
  .rowtitle { font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rowsub { font-size: 13px; color: var(--dim); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rowsub .st { font-weight: 600; }
  .rowsub .st.run { color: var(--ok); }
  .rowsub .st.act { color: var(--ok); opacity: .65; }
  .rowsub .st.appr { color: var(--warn); }
  /* 按项目分组（cwd 聚合）：项目头行可折叠，右侧只保留高频的新建会话 */
  .proj { display: flex; align-items: center; gap: 10px; padding: 12px 4px; cursor: pointer;
          user-select: none; }
  .proj svg { flex: none; color: var(--text); }
  .pname { min-width: 0; font-size: 18px; font-weight: 700;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pchev { flex: none; color: var(--dim); font-size: 15px; line-height: 1; transition: transform .15s; }
  /* 项目徽标：会话数 / 运行中 / 待审批（待审批时头行加浅底高亮，对齐会话行 .appr）*/
  .pmeta { flex: none; color: var(--dim); font-size: 12px; }
  .proj.appr { background: var(--warn-bg); border-radius: var(--radius-md); padding-left: 8px; padding-right: 8px; }
  .proj.appr .pmeta { color: var(--warn); font-weight: 600; }
  .pactions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 2px; }
  .pact { flex: none; border: none; background: none; color: var(--text);
          padding: 6px; cursor: pointer; line-height: 0; border-radius: var(--radius-sm); }
  .pact:active { opacity: .5; background: var(--sunken); }
  .projectaction { width: 100%; border: none; background: none; color: var(--text);
                   font: inherit; text-align: left; }
  .projectaction svg { width: 22px; height: 22px; display: block; }
  /* 「加载更多」行：可点，居中弱化 */
  .notice.loadmore { cursor: pointer; text-align: center; color: var(--accent); }
  .notice.loadmore:active { opacity: .5; }
  /* 可折叠分区头（如「对话」）：段标题 + 折叠箭头，整行可点 */
  .secthead.sect-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
  .secthead.sect-toggle:active { opacity: .6; }
  .row.inproj { background: none; border: none; margin-bottom: 0; padding: 10px 4px; }
  .row.inproj.appr { background: var(--warn-bg); border-radius: var(--radius-md); }

  /* —— 会话页：对话流 —— */
  #viewer { display: none; }
  #viewer.active { display: block; }
  /* 下拉/点击加载更早历史的提示条：默认高 0，顶部可用时露出为按钮，下拉时随手势撑高 */
  #pulltip { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px;
             color: var(--dim); font-size: 12px; transition: height .26s cubic-bezier(.22,.61,.36,1);
             user-select: none; }
  #pulltip.available { color: var(--accent); cursor: pointer; }
  #pulltip.available:hover { background: var(--accent-bg); }
  #pulltip.available:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  #pulltip.drag { transition: none; }
  #pulltip .arr { width: 15px; height: 15px; flex: none; opacity: .8;
                  transition: transform .2s ease; }
  #pulltip.ready .arr { transform: rotate(180deg); }
  #pulltip.end .arr { display: none; }
  #list.hidden { display: none; }
  .msg { margin: 18px 0; }
  .msg.user { display: flex; justify-content: flex-end; }
  .msg.user .bubble { background: var(--user-bubble); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
                      border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
                      padding: 10px 14px; max-width: 85%; white-space: pre-wrap; word-break: break-word; }
  .msg.pending { opacity: .55; }
  .msg.assistant { word-break: break-word; }
  /* harness 注入通知（后台任务完成等）：对齐桌面端 Claude Code 的 "● 事件文本" 左对齐行 */
  .msg.sysnote { display: flex; align-items: baseline; margin: 14px 2px; font-size: 12.5px;
                 color: var(--dim); word-break: break-word; }
  .msg.sysnote .pulse { animation: none; opacity: .7; flex: none; }
  .msg-actions { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 0; color: var(--dim); }
  .msg-actions button { width: 28px; height: 28px; border: none; border-radius: 50%;
                        background: none; color: inherit; padding: 0; cursor: pointer;
                        display: inline-flex; align-items: center; justify-content: center; }
  .msg-actions button:active { background: var(--sunken); color: var(--text); }
  .msg-actions svg { width: 17px; height: 17px; display: block; }

  /* markdown */
  .md > :first-child { margin-top: 0; }
  .md > :last-child { margin-bottom: 0; }
  .md p { margin: 10px 0; }
  /* 中文粗体 700 在深底上过于晃眼，600 半粗足够醒目（对标 ChatGPT） */
  .md strong { font-weight: 600; }
  .md h3, .md h4, .md h5, .md h6 { margin: 14px 0 6px; line-height: 1.4; font-weight: 600; }
  .md h3 { font-size: 19px; } .md h4 { font-size: 18px; } .md h5, .md h6 { font-size: 17px; }
  .md ul, .md ol { margin: 10px 0; padding-left: 22px; }
  .md li { margin: 3px 0; }
  /* 行内代码：无边框的灰色等宽（小方框会把中文句子切碎），字号随正文缩放 */
  .md code { font-family: ui-monospace, monospace; font-size: .92em; color: var(--code);
             background: var(--sunken); border-radius: var(--radius-sm); padding: 1px 4px; overflow-wrap: anywhere; }
  .md pre { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 10px 12px; overflow-x: auto; margin: 10px 0; }
  .md pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.55;
                 color: var(--text); white-space: pre; word-break: normal; }
  .md blockquote { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sunken); color: var(--dim); }
  .md a { color: var(--accent); }
  .md hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
  .morelink { display: block; background: none; border: none; color: var(--accent);
              font-size: 14px; padding: 6px 0; cursor: pointer; }
  .md table { border-collapse: collapse; margin: 10px 0; font-size: 14px;
              display: block; overflow-x: auto; max-width: 100%; }
  .md th, .md td { border: 1px solid var(--border); padding: 4px 9px; text-align: left; }
  .md th { background: var(--sunken); }
  /* 会话内图片（imageRef 分块拉取） */
  .imgbox { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--sunken);
            color: var(--dim); font-size: 12px; padding: 12px; margin: 10px 0;
            text-align: center; min-height: 44px; }
  .imgbox img { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; }
  .msg.user .imgbox { max-width: 85%; }
  /* 首页底栏：搜索胶囊 + 新会话按钮（对标官方 App 的 Search Chats / Chat） */
  #homebar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
             gap: 10px; max-width: 760px; margin: 0 auto;
             padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
             background: var(--bg); }
  body.paired:not(.insession) #homebar { display: flex; }
  #search { flex: 1; min-width: 0; background: var(--raised); border: 1px solid var(--border);
            border-radius: 24px; padding: 11px 18px; font: inherit; font-size: 16px;
            color: var(--text); }
  #search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  #newchat { flex: none; display: flex; align-items: center; gap: 7px; border: none;
             border-radius: 24px; padding: 0 18px; background: var(--text); color: var(--bg);
             font-size: 16px; font-weight: 600; cursor: pointer; }
  #newchat:active { opacity: .8; }
  body.paired:not(.insession) main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* 工具调用（命令 / MCP 工具 / 文件改动）：折叠行 */
  .tool { border: 1px solid var(--border); background: var(--raised); border-radius: var(--radius-md);
          margin: 10px 0; overflow: hidden; }
  .tool-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
               font: 13.5px/1.5 ui-monospace, monospace; color: var(--dim); cursor: pointer; }
  .tool-head .tchev { flex: none; font-size: 15px; line-height: 1; transition: transform .15s; }
  .tool.open .tchev { transform: rotate(90deg); }
  .tool-head .tcmd { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tool-head .tstat { flex: none; font-size: 11px; }
  .tool-head .tstat.ok { color: var(--ok); }
  .tool-head .tstat.err { color: var(--err); }
  .tool-body { display: none; border-top: 1px solid var(--border); padding: 10px 12px;
               font: 13px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all;
               max-height: 50vh; overflow-y: auto; background: var(--sunken); }
  .tool.open .tool-body { display: block; }
  .tool-body .tout { display: none; border-top: 1px dashed var(--border);
                     margin-top: 8px; padding-top: 8px; }
  /* Claude AskUserQuestion：不是工具详情，而是会暂停当前 turn 的真人交互卡。 */
  .question { border: 1px solid var(--accent); background: var(--raised); border-radius: 12px;
              margin: 10px 0; padding: 13px; }
  .question .qhead { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .35px; }
  .question .qitem { margin-top: 13px; }
  .question .qtitle { font-size: 15px; line-height: 1.45; font-weight: 600; }
  .question .qoptions { display: grid; gap: 7px; margin-top: 8px; }
  .question .qoption { width: 100%; display: block; text-align: left; border: 1px solid var(--border);
                       border-radius: var(--radius-sm); padding: 9px 10px; color: var(--text); background: var(--bg); cursor: pointer; }
  .question .qoption.sel { border-color: var(--accent); background: var(--accent-bg); }
  .question .qlabel { display: block; font-size: 14px; font-weight: 600; }
  .question .qdesc { display: block; margin-top: 2px; color: var(--dim); font-size: 12.5px; line-height: 1.35; }
  .question .qother { box-sizing: border-box; width: 100%; margin-top: 7px; border: 1px solid var(--border);
                      border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); background: var(--bg); font: inherit; font-size: 14px; }
  .question .qsend { width: 100%; margin-top: 13px; border: none; border-radius: 9px; padding: 10px;
                     color: var(--bg); background: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  .question .qsend:disabled, .question.answered .qoption, .question.answered .qother { opacity: .55; cursor: default; }
  .question .qresult { margin-top: 11px; color: var(--dim); font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
  /* 过程组：一轮任务的中间步骤（命令/工具/文件改动/过渡性回复）收纳容器。
     运行中摊开实时看，出最终回复后自动收拢成一行摘要（类似 ChatGPT 的 Worked for…） */
  .proc { margin: 10px 0; }
  .proc-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px;
               font-size: 14px; color: var(--dim); cursor: pointer; user-select: none;
               -webkit-tap-highlight-color: transparent; }
  .proc-head .pchev { flex: none; font-size: 15px; line-height: 1; transition: transform .15s; }
  .proc.open .pchev { transform: rotate(90deg); }
  .proc-body { display: none; padding-left: 10px; border-inline-start: 1px solid var(--border); }
  .proc.open .proc-body { display: block; }
  .proc-body .msg.assistant { opacity: .75; }
  /* 组内工具行扁平化：去掉卡片背景/边框、收紧行距（ChatGPT 式的清单感）；
     点开后的调用详情与输出仍保留卡片，维持可读性 */
  .proc-body .tool { border: none; background: none; border-radius: 0; margin: 0; }
  .proc-body .tool-head { padding: 5px 0; }
  .proc-body .tool-body { border: 1px solid var(--border); border-radius: var(--radius-sm);
                          margin: 2px 0 8px; }
  .tool.proc-live { border: none; background: none; border-radius: 0; margin: 0; overflow: visible; }
  .tool.proc-live .tool-head { padding: 5px 0; }
  .tool.proc-live .tool-body { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 2px 0 8px; }
  /* Claude 全程内联：工具行同样去掉卡片背景条（背景条会明显撑大行距），收紧成终端式清单行；
     点开的调用详情/输出仍保留卡片。#log.cl-inline 由 renderInto 按 agent 切换 */
  #log.cl-inline .tool { border: none; background: none; border-radius: 0; margin: 0; overflow: visible; }
  #log.cl-inline .tool-head { padding: 4px 0; }
  #log.cl-inline .tool-body { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 2px 0 8px; }
  /* Claude 计划/任务清单：TodoWrite/TaskCreate 就地渲染成勾选清单，钉在信息流末尾、就地更新；
     点标题折叠（对标终端 ctrl+t hide tasks——长清单在手机上会占满整屏） */
  .todos { border: 1px solid var(--border); background: var(--raised); border-radius: var(--radius-md);
           margin: 12px 0; padding: 10px 14px; }
  .todos .thd { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim);
                margin-bottom: 5px; letter-spacing: .4px; cursor: pointer;
                -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  .todos .thd .tchev { margin-left: auto; }
  .todos.collapsed .titem { display: none; }
  .todos.collapsed .thd { margin-bottom: 0; }
  .todos .titem { display: flex; gap: 8px; align-items: baseline; padding: 2px 0;
                  font-size: 14px; line-height: 1.5; }
  .todos .tmark { flex: none; width: 14px; text-align: center; color: var(--dim); }
  .todos .titem.done .tmark { color: var(--ok); }
  .todos .titem.done .ttxt { color: var(--dim); text-decoration: line-through; }
  .todos .titem.doing .tmark { color: var(--warn); }
  .todos .titem.doing .ttxt { color: var(--text); font-weight: 600; }
  .todos .titem.todo .ttxt { color: var(--text); }
  /* 活动行：跟随内容滚动、待在信息流末尾的一行实时状态 */
  #actline { display: flex; align-items: center; margin: 12px 2px 14px; font-size: 13.5px; color: var(--dim); }
  #actline .amid { color: var(--text); }
  #actline .acnt { color: var(--dim); font-variant-numeric: tabular-nums; }
  /* Claude 轮次收尾总结行：钉在该轮内容最下方，图标复用通用状态点 */
  .turnsum { display: flex; align-items: center; margin: 6px 2px 16px; font-size: 12.5px;
             color: var(--dim); opacity: .75; font-variant-numeric: tabular-nums; }
  .turnsum .pulse { animation: none; opacity: .7; }
  /* diff 着色 */
  .dfile { font-weight: 600; margin: 8px 0 3px; }
  .dfile:first-child { margin-top: 0; }
  .dl-add { color: var(--ok); }
  .dl-del { color: var(--err); }
  .dl-hunk { color: var(--dim); opacity: .8; }
  /* 流式草稿气泡：内容以 rollout tail 为准，delta 只做即时预览 */
  .msg.streaming .raw { white-space: pre-wrap; word-break: break-word; }
  .msg.streaming .cursor::after { content: "▍"; color: var(--accent);
                                  animation: pulse 1s ease-in-out infinite; }
  /* 回到底部 */
  #jump { display: none; position: fixed; right: 16px; bottom: calc(122px + env(safe-area-inset-bottom));
          width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong);
          background: var(--raised); color: var(--text); font-size: 16px; cursor: pointer;
          box-shadow: var(--shadow-float); z-index: 25; }
  #jump.show { display: block; }

  /* 会话页状态条 */
  #sstatus { display: none; position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 10; font-size: 13px; color: var(--ok);
             background: var(--ok-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
             padding: 8px 12px; margin-bottom: 10px; }
  #sstatus.appr { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
  .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
           margin-right: 6px; animation: pulse 1.2s ease-in-out infinite; vertical-align: 1px; }

  /* 审批卡片：对话流内嵌 + 全局置顶共用 */
  #approvals { position: sticky; top: calc(53px + env(safe-area-inset-top)); z-index: 20; max-width: 760px; margin: 0 auto;
               padding: 0 16px; max-height: 45vh; overflow-y: auto; }
  .trunc { text-align: center; color: var(--dim); font-size: 12px; margin: 12px 0; }
  .approval { background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-md);
              padding: 14px 16px; margin: 10px 0; box-shadow: var(--shadow-float); }
  .approval .asummary { display: flex; align-items: center; gap: 8px; width: 100%; border: none;
                       background: none; color: var(--text); padding: 0; text-align: left; cursor: pointer; }
  .approval .atitle { flex: none; color: var(--warn); font-weight: 600; font-size: 15px; }
  .approval .apreview { flex: 1; min-width: 0; color: var(--dim); font: 13px/1.4 ui-monospace, monospace;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .approval .achev { flex: none; color: var(--dim); transition: transform .15s; }
  .approval.open .achev { transform: rotate(90deg); }
  .approval .adetails { display: none; margin-top: 8px; }
  .approval.open .adetails { display: block; }
  .approval .acmd { font-family: ui-monospace, monospace; font-size: 14px; background: var(--sunken);
                    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
                    white-space: pre-wrap; word-break: break-all; max-height: 40vh; overflow-y: auto; }
  .approval .acmd.danger { border-color: var(--err); }
  .approval .acwd { font-size: 13px; color: var(--dim); margin-top: 6px;
                    font-family: ui-monospace, monospace; word-break: break-all; }
  .approval .adanger { font-size: 13px; color: var(--err); margin-top: 6px; }
  .approval .abtns { display: flex; gap: 10px; margin-top: 12px; }
  .approval .abtns button { flex: 1; min-height: 48px; border: none; border-radius: var(--radius-sm); padding: 10px; cursor: pointer; font-weight: 500; }
  .approval .ayes { background: var(--ok); color: #fff; }
  .approval .ano { background: none; border: 1px solid var(--border); color: var(--text); }
  .approval .aall { display: block; width: 100%; min-height: 48px; background: none; border: none; color: var(--ok);
                    font-size: 14px; margin-top: 8px; padding: 8px; cursor: pointer; }

  /* 底部输入区：一体化卡片（输入行在上，操作排在下） */
  /* 底部输入区不铺纯色挡板：让上方消息与快捷指令 chip 之间透出内容，视觉更开阔。
     仅在最底部用一小段渐变盖住安全区/滑动时贴边的文字，输入卡片本身仍是实色。 */
  #composer { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
              background: color-mix(in srgb, var(--bg) 92%, transparent);
              padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); }
  #composer.active { display: block; }
  /* 快捷指令：只在用户主动打开后，才在输入卡片上方露出一排可横滑的快捷发送项 */
  #quickcommandbar { display: none; gap: 8px; max-width: 760px; margin: 0 auto 6px;
                     padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
  #quickcommandbar.on { display: flex; }
  #quickcommandbar::-webkit-scrollbar { display: none; }
  .quickcommand { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; border: 1px solid var(--border); background: var(--raised);
                  color: var(--text); border-radius: 16px; padding: 6px 13px; font: inherit;
                  font-size: 14px; cursor: pointer; }
  .quickcommand:hover { background: var(--border); }
  .quickcommand:active { background: var(--border); }
  .chip { flex: none; border: 1px solid var(--border); background: var(--raised); color: var(--text);
          border-radius: 15px; padding: 5px 13px; font-size: 14px; cursor: pointer; }
  .chip:active { background: var(--border); }
  #card { position: relative; background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
          padding: 8px 10px; max-width: 760px; margin: 0 auto;
          box-shadow: var(--shadow-float); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
  #card:focus-within { border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
                       box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-float); }
  #attachrow { display: none; gap: 10px; padding: 2px 0 10px; overflow-x: auto;
               scrollbar-width: none; }
  #attachrow.on { display: flex; }
  .att { position: relative; flex: none; padding: 6px 6px 0 0; }
  .att img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
             border: 1px solid var(--border); display: block; }
  .att button { position: absolute; top: 0; right: 0; width: 20px; height: 20px;
                border-radius: 50%; border: none; background: var(--text); color: var(--bg);
                font-size: 11px; line-height: 20px; padding: 0; cursor: pointer; }
  #input { flex: 1; min-width: 0; resize: none; background: none; color: var(--text);
           border: none; padding: 5px 4px; font: inherit; font-size: 17px;
           line-height: 1.4; min-height: 34px; max-height: 144px; scrollbar-width: none; }
           /* 16px 起步：iOS 对更小的输入框字号会聚焦自动放大页面 */
  #input::-webkit-scrollbar { display: none; }
  #input:focus { outline: 2px solid transparent; outline-offset: 1px; }
  .crow { display: flex; gap: 8px; align-items: center; }
  #attach { flex: none; width: 36px; height: 36px; cursor: pointer; border: none;
            border-radius: 50%; background: none; color: var(--text); padding: 8px; }
  #attach svg { display: block; width: 20px; height: 20px; }
  #attach:active { background: var(--sunken); }
  /* ➕ 动作菜单：锚在输入卡片左上方的浮层（对标 Claude App 的加号菜单） */
  #plusmenu { display: none; position: absolute; left: 12px; bottom: calc(100% + 4px);
              z-index: 35; background: var(--raised); border: 1px solid var(--border);
              border-radius: var(--radius-lg); padding: 6px; min-width: 190px;
              box-shadow: var(--shadow-menu); }
  #plusmenu.open { display: block; }
  #plusmenu button { display: flex; align-items: center; gap: 12px; width: 100%; border: none;
                     background: none; color: var(--text); font-size: 15px; padding: 12px 14px;
                     min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
  #plusmenu button:hover { background: var(--sunken); }
  #plusmenu button:active { background: var(--sunken); }
  #plusmenu .mic { flex: none; width: 18px; height: 18px; color: var(--dim); }
  #plusmenu .mic svg { width: 18px; height: 18px; display: block; }
  #plusmenu .mck { margin-left: auto; color: var(--accent); }
  /* 输入建议（斜杠命令面板 / @ 文件补全共用）：内嵌在输入框上方的滚动列表 */
  #suggest { display: none; max-height: min(45vh, 320px); overflow-y: auto; margin: 2px 2px 4px;
             border-bottom: 1px solid var(--border); padding-bottom: 4px; overscroll-behavior: contain;
             touch-action: pan-y; }
  #suggest.open { display: block; }
  #suggest .srow { display: flex; align-items: baseline; gap: 10px; width: 100%; border: none;
                   background: none; color: var(--text); font-size: 14px; padding: 9px 10px;
                   border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
  #suggest .srow.hi, #suggest .srow:active { background: var(--sunken); }
  #suggest .sname { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #suggest .sdesc { margin-left: auto; flex: 0 1 auto; color: var(--dim); font-size: 12px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 操作排走官方 App 的裸排版：加号/图标/文字不带按钮圈，只有发送/停止是实心圆 */
  .obtn { flex: none; max-width: 148px; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; border: none; background: none; color: var(--dim);
          padding: 8px 3px; font-size: 13px; line-height: 1; cursor: pointer; }
  .obtn:active { opacity: .5; }
  .obtn.set { color: var(--text); }
  .obtn.warn { color: var(--err); }
  .obtn.ico { padding: 5px 3px; }
  .obtn.ico svg { width: 21px; height: 21px; display: block; }
  #planpill { color: var(--accent); }
  /* 模型移至顶栏；隐藏的兼容按钮只保留给既有状态更新逻辑。 */
  .chip.sel { border-color: var(--accent); color: var(--accent); }
  .effrow { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 10px 8px; }
  #runhint { display: none; font-size: 12px; color: var(--dim); min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp { flex: 1; }
  /* 状态工具行：权限 / 计划 / 运行提示靠左，模型 / 停止靠右 */
  .statusrow { display: flex; gap: 6px; align-items: center; padding: 4px 2px 0; min-height: 0; }
  .statusrow:empty { display: none; }
  .statusrow > #stop { margin-left: 2px; }
  #send, #stop { flex: none; width: 34px; height: 34px; border: none; border-radius: 50%;
                 cursor: pointer; font-size: 16px; line-height: 1; }
  /* 发送与首页「新会话」同一套反色单色，主操作只有一种颜色语言 */
  #send { background: var(--text); color: var(--bg); }
  #send:disabled { opacity: .35; cursor: default; }
  #stop { background: var(--err); color: #fff; font-size: 11px; display: none; }
  #stop:disabled { opacity: .5; }
  /* 乐观气泡的附图与排队标注 */
  .echocol { max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; }
  .echoimgs { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 4px; }
  .echoimgs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm);
                  border: 1px solid var(--border); }
  .userimgs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 4px; }
  .userimgs .imgbox { width: 72px; height: 72px; min-height: 0; margin: 0; padding: 0;
                      display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .userimgs .imgbox img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
  .qtag { font-size: 11px; color: var(--dim); margin-top: 3px; }
  .msg.queued { opacity: .8; cursor: pointer; }

  /* 字体两档：默认「常规」即上面的既有字号；data-font="large" 把阅读面（正文/列表/输入/审批）
     整体调大约一号，界面骨架（图标、按钮、间距）不动。上面新增显式 font-size 的阅读元素时记得同步。 */
  :root[data-font="large"] body { font-size: 19px; }
  :root[data-font="large"] header h1 { font-size: 16.5px; }
  :root[data-font="large"] #status { font-size: 13px; }
  :root[data-font="large"] #headline { font-size: 24px; }
  :root[data-font="large"] #headline .sub { font-size: 15.5px; }
  :root[data-font="large"] .secthead { font-size: 14px; }
  :root[data-font="large"] .pname { font-size: 20px; }
  :root[data-font="large"] .rowsub { font-size: 14.5px; }
  :root[data-font="large"] .md h3 { font-size: 21px; }
  :root[data-font="large"] .md h4 { font-size: 20px; }
  :root[data-font="large"] .md h5, :root[data-font="large"] .md h6 { font-size: 19px; }
  :root[data-font="large"] .md pre code { font-size: 15px; }
  :root[data-font="large"] .md table { font-size: 15.5px; }
  :root[data-font="large"] .morelink { font-size: 15.5px; }
  :root[data-font="large"] .tool-head { font-size: 15px; }
  :root[data-font="large"] .proc-head { font-size: 15.5px; }
  :root[data-font="large"] .approval .atitle { font-size: 16.5px; }
  :root[data-font="large"] .approval .acmd { font-size: 15.5px; }
  :root[data-font="large"] .approval .acwd, :root[data-font="large"] .approval .adanger { font-size: 14.5px; }
  :root[data-font="large"] .approval .aall { font-size: 15.5px; }
  :root[data-font="large"] #topmenu button, :root[data-font="large"] #plusmenu button { font-size: 17.5px; }
  :root[data-font="large"] #input { font-size: 19px; }
  :root[data-font="large"] #search { font-size: 17.5px; }
  :root[data-font="large"] #newchat { font-size: 17px; }
  :root[data-font="large"] #headmodel { font-size: 13px; }
  :root[data-font="large"] .chip { font-size: 15.5px; }

  /* —— 围观（只读观众态）——
     观众页 = 创作者页 − 一切触及会话的操作 + 一条身份栏：阅读本体（渲染管线）零改动，
     这里只按 body.viewer 收掉操作性镶边。daemon 端过滤是第一道防线，此处仅第二道保险。 */
  body.viewer #back, body.viewer #sharebtn, body.viewer #homebar,
  body.viewer #approvals, body.viewer #jump { display: none !important; }
  body.viewer #card { display: none; }
  /* 观众保留 ⋯ 菜单（外观/字体/连接状态），收掉组织方式与切换电脑等全权入口 */
  body.viewer.insession #menubtn { display: block; }
  body.viewer #topmenu .m-full { display: none; }
  /* 观众身份栏：沿用 composer 卡片的位置与设计语言 */
  #viewerbar { display: none; align-items: center; flex-wrap: wrap; gap: 8px 10px;
               max-width: 760px; margin: 0 auto;
               background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
               padding: 12px 16px; font-size: 13px; color: var(--dim);
               box-shadow: var(--shadow-float); }
  body.viewer #composer.active #viewerbar { display: flex; }
  #viewerbar .vbadge { flex: none; border: 1px solid var(--border); background: var(--sunken);
                       border-radius: var(--radius-sm); padding: 2px 10px; font-size: 12px; color: var(--text); }
  #vrun { display: none; flex: none; color: var(--ok); }
  #vcount { flex: none; }
  #viewerbar .sp { flex: 1; }
  /* 喝彩表情排（枚举五枚，匿名廉价的创作燃料） */
  #vreact { display: flex; gap: 2px; }
  #vreact button { border: none; background: none; font-size: 18px; padding: 3px 5px;
                   cursor: pointer; border-radius: var(--radius-sm); line-height: 1; }
  #vreact button:active { background: var(--sunken); transform: scale(1.25); }
  #vshare { flex: none; width: 30px; height: 30px; border: none; border-radius: 50%;
            background: var(--sunken); color: var(--text); cursor: pointer; padding: 0;
            display: flex; align-items: center; justify-content: center; }
  #vshare svg { width: 15px; height: 15px; }
  #vcta { flex-basis: 100%; text-align: center; color: var(--accent); text-decoration: none;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  /* 喝彩飘浮：锚在底栏上方，双端（创作者/观众）同款 */
  .vfloat { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 35; font-size: 26px; pointer-events: none;
            animation: vfloat 1.6s ease-out forwards; }
  .vfloat .vn { font-size: 13px; color: var(--dim); }
  @keyframes vfloat { 0% { opacity: 0; transform: translateY(10px) scale(.8); }
                      15% { opacity: 1; transform: translateY(0) scale(1.1); }
                      100% { opacity: 0; transform: translateY(-110px) scale(1); } }
  /* 观众态点创作者的 prompt 气泡即复制（视觉提示：轻微可点感） */
  body.viewer .msg.user .bubble { cursor: pointer; }
  /* 围观终态卡（被踢/过期）：中性文案，不渲染成报错 */
  .vend { text-align: center; padding: 48px 16px; color: var(--dim); }
  .vend .vtitle { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  /* 回放（从头读）：底部继续加载哨兵 */
  #replaymore { display: none; text-align: center; color: var(--dim); font-size: 13px; padding: 14px 0 20px; }
  #replaymore.show { display: block; }

  /* —— 分享围观（创作者侧）—— */
  /* 会话页顶栏分享入口（裸图标按钮） */
  #sharebtn { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%;
              background: none; color: var(--text); cursor: pointer; padding: 0;
              display: none; align-items: center; justify-content: center; }
  #sharebtn:active { color: var(--dim); }
  #sharebtn svg { width: 18px; height: 18px; }
  body.insession #sharebtn { display: flex; }
  .sharerow { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: var(--radius-sm);
              min-height: 44px; cursor: pointer; }
  .sharerow:hover { background: var(--sunken); }
  .sharerow:active { background: var(--sunken); }
  .sharerow .smain { flex: 1; min-width: 0; }
  .sharerow .sname { font-size: 14px; }
  .sharerow .ssub { font-size: 12px; color: var(--dim); margin-top: 2px; }
  .sharerow button { flex: none; border: 1px solid var(--border); background: none; color: var(--text);
                     border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
  .sharerow button.srevoke { color: var(--err); }
  .sharegen { display: flex; gap: 10px; margin: 12px 0 4px; }
  .sharegen button { flex: 1; border: 1px solid var(--border); background: var(--sunken);
                     color: var(--text); border-radius: 10px; padding: 12px; font-size: 14px; cursor: pointer; }
  .sharegen button:active { background: var(--border); }
  #shareqr { display: block; margin: 12px auto 4px; background: #fff; padding: 10px; border-radius: 10px; }

  /* —— Terminal Mode（internal/TERMINAL-MODE.md §4/§14）—— */
  /* 终端作为 agent 选择器的第三项（无独立切换条）；列表在 termtab 时替换会话列表 */
  #termlist { display: none; max-width: 760px; margin: 0 auto; padding: 8px 12px 96px; }
  body.hasterm.termtab:not(.insession):not(.interminal) #termlist { display: block; }
  body.termtab #list { display: none; }
  body.termtab #homebar { display: none !important; }
  .termhero { margin: 10px 2px 20px; }
  .termhero .htitle { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
  .termhero .hsub { display: block; color: var(--dim); font-size: 14px; margin-top: 2px; }
  .termrow { width: 100%; text-align: left; color: var(--text); font: inherit; }
  .termrow .tdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
  .termrow .tdot.run { background: var(--ok); animation: pulse 1.2s ease-in-out infinite; }
  .termrow .tdot.err { background: var(--err); }
  .termrow .tmain { flex: 1; min-width: 0; }
  .termrow .tname { font-size: 15px; font-weight: 500; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .termrow .tsub { font-size: 13px; color: var(--dim); margin-top: 2px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .termrow .tstate { font-size: inherit; color: var(--dim); font-weight: 600; }
  .termrow .tstate.run { color: var(--ok); }
  .termrow .tstate.err { color: var(--err); }
  .termrow .tpath::before { content: " · "; color: var(--dim); }
  .termrow .tpath:empty::before { content: none; }
  /* 终端首页底栏（对应 #homebar） */
  #termhome { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
              gap: 10px; max-width: 760px; margin: 0 auto;
              padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
              background: color-mix(in srgb, var(--bg) 94%, transparent); }
  body.paired.hasterm.termtab:not(.insession):not(.interminal) #termhome { display: flex; }
  #newterm { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none;
             border-radius: 24px; padding: 12px 18px; background: var(--text); color: var(--bg);
             font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-float); }
  #newterm:active { opacity: .8; transform: scale(.995); }
  /* 终端页：画布恒深色，不随 App 主题切换（§14.2），但容器层级与会话页一致。 */
  #termpage { display: none; }
  #termchrome { display: none; }
  /* 终端页用真实的 header/main 剩余高度布局，不再写死 53px。状态条出现时由 flex 自动扣除高度，
     避免 xterm 仍按被遮住的整屏高度 fit，导致底部若干行实际落在视口外。 */
  body.interminal { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
  body.interminal > header { flex: none; width: 100%; }
  body.interminal main { flex: 1 1 auto; min-height: 0; width: 100%; padding: 0 !important; max-width: none; }
  body.interminal #termpage { display: flex; flex-direction: column; min-height: 0;
                              height: 100%;
                              background: var(--bg); }
  /* iOS 软键盘只缩 visualViewport 而不缩 100dvh。键盘聚焦时直接用真实可视高度限定页面；
     支持 resizes-content 的浏览器上该值与布局视口相同，不会重复扣减。 */
  body.interminal:has(#termscreen textarea:focus) {
    height: var(--termviewportheight, 100dvh);
  }
  body.interminal #list, body.interminal #termlist { display: none !important; }
  /* 终端画布占满顶部信息行以下的真实剩余空间；软键盘弹起时页面缩到键盘上沿。 */
  /* touch-action:none —— 手势归 JS：手指拖动转发到 xterm 回滚区（screen 盖住 viewport，原生滚不到） */
  #termscreen { flex: 1 1 auto; min-height: 0; height: auto; background: var(--term-canvas-bg);
                padding: 0; touch-action: none; }
  /* xterm 按整字符列取整，余下像素原本全堆在右侧。收窄滚动条后把字符网格居中，
     让取整余量均分到两侧；纵向安全区放在 xterm 自身上，FitAddon 会一并扣除。 */
  #termscreen .xterm { height: 100%; padding: 8px 0 9px;
                       -webkit-font-smoothing: antialiased; font-variant-ligatures: none; }
  #termscreen .xterm-screen { margin-inline: auto; }
  #termscreen .xterm-viewport { scrollbar-width: thin; scrollbar-color: var(--term-scrollbar) transparent; }
  #termscreen .xterm-viewport::-webkit-scrollbar { width: 6px; }
  #termscreen .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
  #termscreen .xterm-viewport::-webkit-scrollbar-thumb { background: var(--term-scrollbar); border-radius: 999px; }
  #termnotice { display: none; position: relative; flex: none; z-index: 10; font-size: 13px; line-height: 1.35;
                margin: 8px 10px; padding: 8px 12px; background: var(--raised); color: var(--text);
                border: 1px solid var(--border); border-radius: var(--radius-sm); }
  #termnotice.show { display: flex; align-items: center; gap: 10px; }
  #termnotice .sp { flex: 1; }
  #termnotice button { border: 1px solid var(--border); background: var(--sunken); color: var(--text);
                       border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; cursor: pointer; }
  #termnotice button:active { background: var(--border); }
  /* 终端快捷键：右下锚点浮窗，不再用常驻输入栏侵占画布。 */
  #termtools { display: none; position: fixed; right: 14px;
               bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 31;
               width: 48px; height: 48px; pointer-events: none; }
  body.interminal #termtools { display: block; }
  #termkeystoggle { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
                    pointer-events: auto; border: 1px solid var(--border); background: var(--raised); color: var(--text);
                    border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-float);
                    transition: color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
  #termkeystoggle svg { width: 21px; height: 21px; }
  #termkeystoggle:active { transform: scale(.96); background: var(--sunken); }
  #termkeystoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  body.termkeysopen #termkeystoggle { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
  /* 面板锚定按钮向上展开；窄屏保持 14px 安全边距。 */
  #termkeys { display: flex; position: absolute; right: 0; bottom: 58px;
              width: min(302px, calc(100vw - 28px)); pointer-events: none;
              flex-wrap: wrap; gap: 7px; justify-content: center;
              padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-lg);
              background: var(--raised); box-shadow: var(--shadow-menu);
              opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: bottom right;
              transition: opacity var(--motion-fast), transform .18s cubic-bezier(.23,1,.32,1), visibility 0s linear .18s; }
  body.termkeysopen #termkeys { pointer-events: auto; opacity: 1; visibility: visible; transform: none;
                               transition: opacity .16s ease, transform .18s cubic-bezier(.23,1,.32,1); }
  #termkeys button { flex: none; min-width: 43px; min-height: 38px; border: 1px solid var(--border);
                     background: var(--sunken); color: var(--text); border-radius: var(--radius-sm);
                     padding: 7px 10px; font-size: 12px; cursor: pointer;
                     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  #termkeys button:active { background: var(--border); }
  #termkeys button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* 修饰键锁定态 */
  #termkeys button.latch { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
  #termkeys button.intr { color: var(--danger); }
  /* 菜单里可隐藏快捷键浮窗。 */
  body.hidetermkeys #termtools { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important;
                             animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }

  /* 渐进式宽屏布局：小于 480px 的既有手机布局不变。 */
  @media (min-width: 480px) {
    main { padding-inline: 24px; }
    #composer { padding-inline: 16px; }
    #card { padding-inline: 14px; }
  }
  @media (min-width: 768px) {
    main { max-width: 900px; padding-inline: 32px; }
    body.insession main { max-width: 860px; }
    #card, #quickcommandbar, #viewerbar, #approvals { max-width: 820px; }
    .msg.assistant { max-width: 760px; }
  }
  @media (min-width: 1024px) {
    main, body.insession main { max-width: 980px; }
    #card, #quickcommandbar, #viewerbar, #approvals { max-width: 900px; }
    .msg.assistant { max-width: 820px; }
  }
  /* PWA 使用 viewport-fit=cover：顶部避开状态栏/灵动岛，横向避开圆角或刘海。
     底部 fixed 控件和 sheet 已逐一使用 inset-bottom。 */
  @supports (padding: env(safe-area-inset-top)) {
    header {
      padding-top: calc(4px + env(safe-area-inset-top));
      padding-left: calc(10px + env(safe-area-inset-left));
      padding-right: calc(10px + env(safe-area-inset-right));
    }
    #topmenu, #agentpick .agentmenu { top: calc(48px + env(safe-area-inset-top)); }
    #topmenu { right: calc(10px + env(safe-area-inset-right)); }
    #agentpick .agentmenu { left: calc(10px + env(safe-area-inset-left)); }
    #homebar, #termhome {
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }
    #composer {
      padding-left: calc(10px + env(safe-area-inset-left));
      padding-right: calc(10px + env(safe-area-inset-right));
    }
  }

  /* 新建窗口 Sheet */
  .termsec { font-size: 12px; color: var(--dim); margin: 12px 2px 6px; letter-spacing: .04em; text-transform: uppercase; }
  .termopt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
             background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-md);
             padding: 12px 14px; margin-bottom: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 14px;
             transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
  .termopt:hover { border-color: var(--border-strong); }
  .termopt:active { transform: scale(.995); }
  .termopt.on { border-color: var(--accent); background: var(--accent-bg); }
  .termopt .sub { color: var(--dim); font-size: 12px; margin-left: auto; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
  /* 当前目录：下划线式输入框（无背景条），与下方候选卡片区分开 */
  #termcwd { width: 100%; background: var(--sunken); border: 1px solid var(--border);
             border-radius: var(--radius-md); padding: 10px 12px; color: var(--text); font-size: 14px;
             font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  #termcwd:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .termcwdhint { color: var(--dim); font-size: 12px; padding: 8px 4px 2px; }
  .termsechdr { display: flex; align-items: center; justify-content: space-between; }
  .termsechdr .termsec { margin-right: auto; }
  .termeditbtn { background: none; border: none; color: var(--accent); font: inherit; font-size: 13px;
                 cursor: pointer; padding: 8px 2px 4px; }
  /* 恒定最右：无命令副标题时靠 auto 顶到右侧；有副标题时副标题吃掉空档、删除仍在其右 */
  .termopt .termdel { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center;
                      color: var(--dim); padding: 4px; border-radius: 8px; }
  .termopt .termdel:active { color: var(--danger, #e5484d); background: var(--sunken); }
  .termopt.editing { cursor: pointer; }
  .termaddpreset { justify-content: center; color: var(--accent); border-style: dashed; background: transparent; }
  #termpname, #termpcmd { width: 100%; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-md);
             padding: 10px 12px; color: var(--text); font-size: 14px;
             font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  #termpname:focus, #termpcmd:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .termphint { color: var(--dim); font-size: 12px; padding: 8px 2px 2px; }
  #termpsave { width: 100%; min-height: 48px; margin-top: 14px; border: none; border-radius: var(--radius-md); padding: 13px;
               background: var(--text); color: var(--bg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  #termpdel { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px;
              background: transparent; color: var(--danger, #e5484d); font: inherit; font-size: 14px; cursor: pointer; }
  #termstart { width: 100%; min-height: 48px; margin-top: 14px; border: none; border-radius: var(--radius-md); padding: 13px;
               background: var(--text); color: var(--bg); font: inherit; font-size: 15px;
               font-weight: 600; cursor: pointer; }
  #termstart:disabled { opacity: .45; }
  .termlocked { text-align: center; color: var(--dim); padding: 60px 24px; font-size: 14px; line-height: 1.8; }

  /* --------------------------------------------------------------------------
     ZGoo 2026 compact redesign layer
     目标：同一套低噪音边界、紧凑间距、单色交互，覆盖 Web 端全部主要组件。
  -------------------------------------------------------------------------- */
  html { background: var(--bg); }
  body {
    font: 15px/1.62 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: -.006em;
    background: var(--bg);
  }
  button, input, textarea, select { color: inherit; }
  ::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--text); }
  button:focus-visible, input:focus-visible, textarea:focus-visible,
  a:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  header {
    min-height: 48px;
    padding: 5px 12px;
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.02);
  }
  header h1 { font-size: 14px; font-weight: 600; letter-spacing: -.015em; }
  #status { margin-top: 2px; font-size: 11px; color: var(--dim); }
  #titlesubline #status { margin-top: 0; }
  #status::before, .dot, .termrow .tdot, .pulse {
    width: 7px; height: 7px;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
  }
  #back, #menubtn, #sharebtn, #headmodel, #attach, #vshare,
  #termkeystoggle, .quickclose, .msg-actions button, .pact, .drow .ddel {
    transition: background var(--motion-fast) ease-out, color var(--motion-fast) ease-out,
                border-color var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out,
                transform var(--motion-fast) ease-out;
  }
  #back, #menubtn, #sharebtn, .quickclose, #vshare {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
  }
  #back:hover, #menubtn:hover, #sharebtn:hover, .quickclose:hover, #vshare:hover {
    background: var(--sunken);
    border-color: var(--border);
  }
  #menubtn { font-size: 17px; }
  #headmodel {
    min-height: 18px;
    max-width: 144px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--sunken);
    color: var(--dim);
    font-weight: 500;
  }
  #headmodel:hover { color: var(--text); border-color: var(--border-strong); }

  main { max-width: 760px; padding: 14px 18px 42px; }
  .notice { color: var(--dim); font-size: 13px; }
  .banner, #sstatus, #termnotice {
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  #toast {
    border: 1px solid var(--border-strong);
    background: color-mix(in srgb, var(--raised) 94%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-menu);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
  }

  #topmenu, #agentpick .agentmenu, #plusmenu, #termkeys {
    border-color: var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--raised) 94%, transparent);
    box-shadow: var(--shadow-menu);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
  #topmenu .mlabel, .sheethead, .termsec, .secthead, .quicklisthead,
  .question .qhead, .todos .thd {
    color: var(--dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  #topmenu button, #plusmenu button, #agentpick .agentopt {
    min-height: 40px;
    border-radius: 9px;
    padding: 10px 11px;
    font-size: 14px;
    transition: background var(--motion-fast) ease-out, color var(--motion-fast) ease-out;
  }
  #topmenu button:hover, #plusmenu button:hover, #agentpick .agentopt:hover,
  #topmenu button:active, #plusmenu button:active, #agentpick .agentopt:active {
    background: var(--sunken);
  }
  #topmenu .mseg {
    border-color: var(--border);
    border-radius: 10px;
    background: var(--sunken);
  }
  #topmenu .mseg button.sel {
    background: var(--raised);
    box-shadow: 0 0 0 1px var(--border);
  }
  #topmenu hr { border-top-color: var(--border); opacity: .8; }

  .sheet { background: rgba(0,0,0,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .sheetbox {
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    background: var(--raised);
    box-shadow: 0 -18px 60px rgba(0,0,0,.28);
  }
  .sheetgrab { background: var(--border-strong); }

  /* 模型选择器：高频工具型 sheet。跟随电脑是默认策略，具体模型是紧凑单选列表。 */
  #modelsheet.open { animation: modelfade 180ms cubic-bezier(.23,1,.32,1) both; }
  #modelsheet.open .modelbox { animation: modelrise 260ms cubic-bezier(.32,.72,0,1) both; }
  @keyframes modelfade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modelrise { from { transform: translateY(18px); opacity: .72; } to { transform: translateY(0); opacity: 1; } }
  .modelbox {
    display: flex;
    flex-direction: column;
    max-width: 620px;
    max-height: min(82dvh, 720px);
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 72px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
  }
  .modelbox .sheetgrab { flex: none; margin-bottom: 12px; }
  .modelhead { display: flex; flex: none; align-items: flex-start; gap: 16px; padding: 0 4px 14px; }
  .modelhead > div { flex: 1; min-width: 0; }
  .modeltitle { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
  .modelsub { margin-top: 3px; color: var(--dim); font-size: 12px; line-height: 1.5; }
  .modelclose {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--sunken);
    color: var(--dim);
    cursor: pointer;
    transition: color var(--motion-fast) cubic-bezier(.23,1,.32,1),
                background var(--motion-fast) cubic-bezier(.23,1,.32,1),
                transform 100ms cubic-bezier(.23,1,.32,1);
  }
  .modelclose svg { width: 17px; height: 17px; }
  .modelclose:active { transform: scale(.96); color: var(--text); }
  #modellist { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  #modellist::-webkit-scrollbar { width: 5px; }
  #modellist::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--border-strong); }
  .modelsection {
    padding: 15px 10px 6px;
    color: var(--dim);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .modelrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 52px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background var(--motion-fast) cubic-bezier(.23,1,.32,1),
                border-color var(--motion-fast) cubic-bezier(.23,1,.32,1),
                transform 100ms cubic-bezier(.23,1,.32,1);
  }
  .modelrow + .modelrow::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 10px;
    left: 43px;
    height: 1px;
    background: var(--border);
  }
  .modelrow.active { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--accent-bg); }
  .modelrow.active::before, .modelrow.active + .modelrow::before { opacity: 0; }
  .modelrow:active { transform: scale(.992); }
  .modelradio {
    display: grid;
    flex: none;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: var(--raised);
  }
  .modelrow.active .modelradio { border: 5px solid var(--accent); background: var(--accent-fg); }
  .modelmain { display: flex; flex: 1; min-width: 0; flex-direction: column; }
  .modelname { display: flex; min-width: 0; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; line-height: 1.35; }
  .modeldesc { margin-top: 2px; overflow: hidden; color: var(--dim); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
  .modelbadge, .modeloverride {
    flex: none;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--dim);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
  }
  .modeloverride { margin-left: auto; border-color: transparent; color: var(--accent); }
  .modeleffort { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; padding: 2px 4px 4px; }
  .modeleffort .chip { min-height: 38px; margin: 0; border-radius: 9px; font-size: 13px; }
  .modeleffort .chip.sel { background: var(--accent-bg); box-shadow: inset 0 1px rgba(255,255,255,.035); }
  @media (hover: hover) and (pointer: fine) {
    .modelclose:hover { background: var(--border); color: var(--text); }
    .modelrow:hover { background: var(--sunken); }
    .modelrow.active:hover { background: var(--accent-bg); }
  }
  @media (prefers-reduced-motion: reduce) {
    #modelsheet.open, #modelsheet.open .modelbox { animation: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    #modelsheet { backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  @media (max-width: 480px) {
    .modelbox { max-height: 78dvh; padding-right: 10px; padding-left: 10px; }
    .modelhead { padding-right: 2px; padding-left: 2px; }
    .modeldesc { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .modeloverride { display: none; }
  }
  .drow, .sharerow, .termopt, .forkchoice, .projectaction,
  .question .qoption, .quickitem {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--raised) 92%, var(--sunken));
    transition: background var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out,
                transform var(--motion-fast) ease-out;
  }
  .drow, .sharerow, .termopt { min-height: 48px; }
  .drow:hover, .sharerow:hover, .termopt:hover, .forkchoice:hover,
  .projectaction:hover, .question .qoption:hover, .quickitem:hover {
    background: var(--sunken);
    border-color: var(--border-strong);
  }
  .drow:active, .sharerow:active, .termopt:active, .forkchoice:active,
  .projectaction:active, .question .qoption:active, .quickitem:active {
    transform: translateY(1px);
  }
  .drow.active, .termopt.on, .question .qoption.sel, .row.appr, .row.inproj.appr,
  .proj.appr, #pulltip.available:hover {
    background: var(--accent-bg);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  }

  .onboard { max-width: 520px; padding-top: 36px; }
  .onboard h2, #headline, .termhero .htitle, .quicktitle,
  .forktitle, .confirmtitle, .vend .vtitle {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -.025em;
  }
  .onboard h2 { font-size: 24px; line-height: 1.22; }
  .onboard p, .onboard li { color: var(--dim); line-height: 1.65; }
  .obpaste, .confirmbox, .forkbox, .quicktoggle, #viewerbar,
  .todos, .tool, .question, .approval {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--raised) 94%, var(--bg));
    box-shadow: none;
  }
  .obpaste input, .question .qother, #termcwd, #termpname, #termpcmd,
  .quickfield input, #search {
    border-color: var(--border);
    border-radius: var(--radius-md);
    background: var(--sunken);
  }
  .obpaste input:focus, .question .qother:focus, #termcwd:focus,
  #termpname:focus, #termpcmd:focus, #search:focus, .quickfield input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
    outline-offset: 1px;
    border-color: var(--accent);
  }

  #headline { margin: 12px 2px 22px; font-size: 25px; line-height: 1.18; }
  #headline .sub, .termhero .hsub, .quicksub, .rowsub, .termrow .tsub,
  .sharerow .ssub, .question .qdesc, .termcwdhint, .termphint {
    color: var(--dim);
  }
  .row, .termrow {
    gap: 11px;
    margin-bottom: 7px;
    padding: 12px 13px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--raised) 92%, var(--bg));
    border-color: var(--border);
    box-shadow: none;
  }
  .row:hover, .termrow:hover { background: var(--raised); border-color: var(--border-strong); }
  .row:active, .termrow:active { transform: translateY(1px); background: var(--sunken); }
  .rowtitle, .termrow .tname { font-size: 14.5px; font-weight: 500; }
  .rowsub, .termrow .tsub { font-size: 12.5px; }
  .proj {
    margin-top: 10px;
    padding: 10px 4px 8px;
    border-bottom: 1px solid var(--border);
  }
  .pname { font-size: 16px; font-weight: 600; }
  .pmeta { font-variant-numeric: tabular-nums; }
  .row.inproj { padding: 9px 4px; border-radius: 9px; }

  .msg { margin: 16px 0; }
  .msg.user .bubble {
    max-width: min(85%, 680px);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 16px 16px 6px 16px;
    background: var(--user-bubble);
    box-shadow: none;
  }
  .msg.assistant { color: var(--text); }
  .msg.sysnote, #actline, .turnsum { color: var(--dim); }
  .md p { margin: 9px 0; }
  .md h3, .md h4, .md h5, .md h6 { margin: 16px 0 7px; font-weight: 600; letter-spacing: -.015em; }
  .md code {
    border: 1px solid var(--border);
    background: var(--sunken);
  }
  .md pre, .tool-body, .approval .acmd {
    border-color: var(--border);
    border-radius: var(--radius-md);
    background: var(--sunken);
  }
  .md blockquote {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--sunken);
    padding: 8px 12px;
  }
  .md th { background: var(--sunken); }
  .md th, .md td { border-color: var(--border); }
  .imgbox, .att img, .echoimgs img, .userimgs .imgbox img {
    border-color: var(--border);
    border-radius: var(--radius-md);
  }

  .tool { overflow: hidden; margin: 9px 0; }
  .tool-head, .proc-head {
    min-height: 36px;
    color: var(--dim);
  }
  .tool-head:hover, .proc-head:hover { color: var(--text); }
  .proc-body { border-inline-start: 1px solid var(--border); }
  #log.cl-inline .tool-body, .proc-body .tool-body, .tool.proc-live .tool-body {
    border-color: var(--border);
  }
  .todos { padding: 10px 12px; }
  .todos .titem { line-height: 1.55; }

  #approvals { max-width: 820px; }
  .approval {
    background: color-mix(in srgb, var(--warn-bg) 82%, var(--raised));
    border-color: var(--warn-border);
  }
  .approval .ayes, .confirmbtn.primary, .obpaste button,
  #newchat, #send, #termpsave, #termstart, .question .qsend, .quicksave {
    background: var(--text);
    color: var(--bg);
  }
  .approval .ano, #termpdel, .confirmbtn.cancel, #quickcommandcancel,
  .sharegen button, .sharerow button {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
  }
  .approval .aall { color: var(--accent); }
  .confirmicon, .forkicon {
    border: 1px solid var(--border);
    background: var(--sunken);
    color: var(--accent);
  }
  .confirmicon.danger { background: color-mix(in srgb, var(--danger) 13%, var(--raised)); color: var(--danger); }
  .confirmbtn.primary.danger { background: var(--danger); color: #fff; }

  #composer {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }
  #card {
    max-width: 820px;
    padding: 8px 9px;
    border-radius: 18px;
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--raised) 96%, transparent);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
  #card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-float);
  }
  #input { font-size: 16px; line-height: 1.45; padding: 7px 4px; }
  #input:focus { outline: 2px solid transparent; outline-offset: 1px; }
  #send, #stop {
    width: 34px;
    height: 34px;
    transition: transform var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out,
                background var(--motion-fast) ease-out;
  }
  #send:not(:disabled):active, #stop:not(:disabled):active, #newchat:active,
  #termpsave:active, #termstart:active, .question .qsend:active,
  .quicksave:active, .obpaste button:active { transform: translateY(1px); opacity: .82; }
  #stop { background: var(--danger); color: #fff; }
  .obtn, .chip, .quickcommand {
    border-radius: 999px;
    transition: background var(--motion-fast) ease-out, color var(--motion-fast) ease-out,
                border-color var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out;
  }
  .obtn:hover, .chip:hover, .quickcommand:hover { background: var(--sunken); border-color: var(--border-strong); }
  .chip.sel, #planpill { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
  #quickcommandbar, #viewerbar, #card, #approvals { max-width: 820px; }

  #homebar, #termhome {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
  #search { box-shadow: none; }
  #newchat, #newterm {
    min-height: 46px;
    border-radius: 999px;
    font-weight: 600;
  }
  #newterm {
    border: 1px solid var(--border-strong);
    background: var(--text);
    color: var(--bg);
  }

  #viewerbar { border-radius: 18px; }
  #viewerbar .vbadge, #termkeys button, .quickcommand, .chip {
    border-color: var(--border);
    background: var(--sunken);
  }
  #vreact button:hover { background: var(--sunken); }
  #vreact button:active { transform: translateY(-1px) scale(1.08); }
  #shareqr { border: 1px solid var(--border); box-shadow: none; }

  .quickbox { border-radius: 20px 20px 0 0; }
  .quicktoggle { background: var(--sunken); }
  .qtrack { background: var(--border-strong); transition: background .18s ease-out; }
  .qthumb { box-shadow: 0 1px 4px rgba(0,0,0,.26); transition: transform .18s ease-out; }
  .quickempty { border-color: var(--border); border-radius: var(--radius-md); }
  .quickadd {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent);
  }
  .quickactions { border-top-color: var(--border); background: var(--raised); }

  body.interminal { background: var(--bg); }
  body.interminal > header {
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
  }
  #termscreen {
    background: var(--term-canvas-bg);
  }
  #termscreen .xterm { padding-top: 10px; }
  #termkeystoggle {
    border-color: var(--border);
    background: color-mix(in srgb, var(--raised) 92%, transparent);
    box-shadow: var(--shadow-float);
  }
  #termkeystoggle:hover, #termkeys button:hover { border-color: var(--border-strong); background: var(--sunken); }
  body.termkeysopen #termkeystoggle,
  #termkeys button.latch { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
  #termkeys { gap: 6px; padding: 8px; }
  #termkeys button { border-radius: 9px; }

  /* 终端页统一化：不再是孤立黑屏，而是同一套 header / surface / toolbar 语言。 */
  body.interminal {
    background: var(--bg);
  }
  body.interminal > header {
    color: var(--text);
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    box-shadow: 0 1px 0 var(--border);
  }
  body.interminal > header h1,
  body.interminal #status,
  body.interminal #back,
  body.interminal #menubtn { color: var(--text); }
  body.interminal #status { color: var(--dim); }
  body.interminal #menubtn { background: var(--sunken); }
  body.interminal main {
    background: var(--bg);
  }
  body.interminal #termpage {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    background: var(--bg);
  }
  body.interminal #termchrome {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 3px 4px;
    background: transparent;
  }
  .termcmain { grid-area: main; min-width: 0; }
  .termctitle {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.016em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .termcpath {
    display: none;
    margin-top: 2px;
    color: var(--dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .termcbadge, .termcowner {
    display: inline-flex;
    flex: none;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--sunken);
    color: var(--dim);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .termcbadge { grid-area: meta; }
  .termcbadge.run { display: none; }
  .termcbadge.run {
    border-color: color-mix(in srgb, var(--ok) 38%, var(--border));
    background: var(--ok-bg);
    color: var(--ok);
  }
  .termcbadge.err {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--raised));
    color: var(--danger);
  }
  .termcowner {
    grid-area: meta;
    margin-left: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .termcowner.owner { display: none; }
  .termcowner.readonly {
    border-color: var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn);
  }
  .termcactions {
    grid-area: actions;
    display: flex;
    flex: none;
    align-items: center;
    gap: 7px;
  }
  .termcbtn {
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    padding: 7px 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out,
                color var(--motion-fast) ease-out, transform var(--motion-fast) ease-out;
  }
  .termcbtn:hover { background: var(--sunken); border-color: var(--border-strong); }
  .termcbtn:active { transform: translateY(1px); }
  .termcbtn.primary {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-bg);
    color: var(--accent);
  }
  .termcbtn.danger { color: var(--danger); }
  #termscreen {
    overflow: hidden;
    border: 1px solid var(--term-canvas-border);
    border-radius: 14px;
    background: var(--term-canvas-bg);
    color: var(--term-canvas-fg);
    box-shadow: none;
  }
  #termscreen .xterm {
    padding: 12px 0;
    background: var(--term-canvas-bg);
  }
  #termscreen .xterm-viewport,
  #termscreen .xterm-screen {
    background: var(--term-canvas-bg) !important;
  }
  #termnotice {
    margin: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--raised) 96%, transparent);
    box-shadow: none;
  }
  #termtools {
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
  }
  #termkeystoggle {
    border-radius: 14px;
    background: color-mix(in srgb, var(--raised) 94%, transparent);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
  #termkeys {
    border-radius: 16px;
    background: color-mix(in srgb, var(--raised) 96%, transparent);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }
  #termkeys button {
    min-height: 40px;
    border-color: var(--border);
    background: var(--sunken);
  }
  .termhero {
    margin: 6px 2px 14px;
    padding: 8px 2px 0;
  }
  .termhero .htitle {
    font-size: 21px;
    letter-spacing: -.028em;
  }
  #termlist {
    padding-inline: 12px;
  }
  .termrow {
    min-height: 62px;
    border-radius: 14px;
  }
  .termrow .tname {
    font-weight: 600;
  }
  .termrow .tdot {
    margin-top: 1px;
  }
  .termrow .tstate {
    font-variant-numeric: tabular-nums;
  }
  #termhome {
    border-top: 1px solid var(--border);
  }
  #newterm {
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-float);
  }
  @media (min-width: 768px) {
    body.interminal #termpage {
      padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    }
    body.interminal #termchrome { padding: 3px 4px; }
    #termscreen {
      border-radius: 18px;
    }
  }

  .forkcancel, #projectcancel, #quickcommandcancel {
    border-radius: var(--radius-md);
  }
  .danger, .sharerow button.srevoke, #termpdel, #termkeys button.intr { color: var(--danger); }

  @media (min-width: 680px) {
    main { max-width: 900px; }
    body.insession main { max-width: 860px; }
    .msg.assistant { max-width: 780px; }
  }
  @media (min-width: 1024px) {
    main, body.insession main { max-width: 1040px; }
    #card, #quickcommandbar, #viewerbar, #approvals { max-width: 920px; }
    .msg.assistant { max-width: 840px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }