/* ═══════════════════════════════════════════════════════════════
   八仙对话舱 · chat-panel.css
   指挥台（command.html）内嵌的全局 Agent 对话舱，2026-10-15

   ★ 三条铁律（违反即整站变色，上线前必须 grep 校验）：
     1. 本文件**禁止出现 `:root`** —— :root 就是 <html>，与指挥台的
        :root[data-theme] 同 specificity，而本文件是 <link> 引入、在 <style>
        之后，**本文件的 :root 会赢过指挥台全部主题令牌**。
     2. 本文件**禁止裸 body{ / button{ / input{ / textarea{ }**。
     3. 所有变量一律挂 .cp-panel 作用域，值全部指向指挥台 A 体系令牌，
        自动跟随亮/暗主题，零额外工作量。
   校验命令（应全为 0）：
     grep -c "^:root" chat-panel.css
     grep -cE "^[[:space:]]*(body|button|input|textarea)[[:space:]]*[{,]" chat-panel.css

   ★ body.cp-narrow 只允许写**布局属性**（margin），不得写颜色/字号/边框。
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 容器与开关 ─────────────────────────────────────────── */
.cp-root{display:none;position:fixed;inset:0;z-index:60;pointer-events:none}
.cp-root.on{display:block}
.cp-scrim{display:none;position:absolute;inset:0;background:rgba(8,12,20,.5);
  backdrop-filter:blur(2px);pointer-events:auto}

/* ── 2. 变量映射（A 体系 → cp- 体系，唯一的改造点）───────── */
.cp-panel{
  --cp-bg:var(--surface);
  --cp-bg2:var(--surface-2);
  --cp-sunken:var(--sunken);
  --cp-line:var(--line);
  --cp-line2:var(--line-2);
  --cp-tx:var(--text);
  --cp-tx2:var(--text-2);
  --cp-tx3:var(--text-3);
  --cp-brand:var(--brand);
  --cp-brand-bg:var(--brand-bg);
  --cp-ok:var(--pos);
  --cp-warn:var(--warning);
  --cp-neg:var(--neg);
  --cp-r:var(--r-m);
  --cp-t1:var(--t1);
  --cp-w:420px;          /* 抽屉宽 */
  --cp-kb:0px;           /* 软键盘高度（JS 写入） */
  position:fixed;right:0;top:0;bottom:0;width:var(--cp-w);
  display:flex;flex-direction:column;
  background:var(--cp-bg);border-left:1px solid var(--cp-line);
  box-shadow:-8px 0 28px rgba(0,0,0,.16);
  pointer-events:auto;
  height:calc(100dvh - var(--cp-kb));
  transition:transform .2s var(--t1);
}
/* 收起态：滑出屏幕外，display 保持以免状态丢失 */
.cp-panel.off{transform:translateX(100%)}

/* ── 3b. 收窄模式：主区让出抽屉宽度（只写布局属性）────────── */
body.cp-narrow .main{margin-right:var(--cp-w)}

/* ── 4. 顶栏 ─────────────────────────────────────────────── */
.cp-head{display:flex;align-items:center;gap:8px;padding:0 12px;height:48px;
  border-bottom:1px solid var(--cp-line);flex:none;background:var(--cp-bg)}
.cp-title{font-size:13px;font-weight:600;letter-spacing:.02em}
.cp-dot{width:7px;height:7px;border-radius:99px;background:var(--cp-line2);flex:none;
  transition:background var(--t1)}
.cp-dot.run{background:var(--cp-ok);animation:cpPulse 1.1s ease-in-out infinite}
@keyframes cpPulse{0%,100%{opacity:1}50%{opacity:.25}}
.cp-usage{font-size:11px;color:var(--cp-tx3);white-space:nowrap;
  font-family:var(--mono)}
.cp-btn{border:1px solid var(--cp-line);background:var(--cp-bg2);color:var(--cp-tx);
  border-radius:8px;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color var(--t1),color var(--t1),background var(--t1)}
.cp-btn:hover{border-color:var(--cp-brand);color:var(--cp-brand)}
.cp-btn[disabled]{opacity:.5;cursor:not-allowed}
.cp-btn.pri{background:var(--cp-brand);border-color:var(--cp-brand);
  color:#fff;font-weight:600}
.cp-btn.xs{padding:4px 8px;font-size:11.5px;border-radius:7px}

/* ── 5. 侧栏（工作流 / 今日花费 + 能力清单折叠）───────────── */
.cp-side{flex:none;max-height:44%;overflow-y:auto;border-bottom:1px solid var(--cp-line);
  background:var(--cp-bg2)}
.cp-side[hidden]{display:none}
.cp-sc{border-bottom:1px solid var(--cp-line)}
.cp-sc:last-child{border-bottom:none}
.cp-sh{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--cp-tx2);letter-spacing:.03em;
  list-style:none;user-select:none}
.cp-sh::-webkit-details-marker{display:none}
.cp-sh::before{content:"▸";font-size:9px;transition:transform var(--t1)}
.cp-sc[open]>.cp-sh::before{transform:rotate(90deg)}
.cp-sb{padding:0 12px 10px;font-size:12px;color:var(--cp-tx2);line-height:1.7}
.cp-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.cp-row b{font-weight:500;color:var(--cp-tx);font-family:var(--mono);font-size:11.5px}
.cp-wf{display:flex;flex-wrap:wrap;gap:4px}
.cp-wfchip{font-size:11px;padding:3px 8px;border-radius:99px;
  border:1px solid var(--cp-line);color:var(--cp-tx2);cursor:pointer;
  transition:all var(--t1)}
.cp-wfchip:hover{border-color:var(--cp-brand);color:var(--cp-brand)}

/* ── 6. 消息区 ───────────────────────────────────────────── */
.cp-log{flex:1;min-height:0;overflow-y:auto;padding:14px 12px;
  display:flex;flex-direction:column;gap:9px}
.cp-msg{max-width:92%;padding:9px 12px;border-radius:11px;
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:13px}
.cp-msg.me{align-self:flex-end;background:var(--cp-brand-bg);
  border:1px solid var(--cp-line2)}
.cp-msg.ai{align-self:flex-start;background:var(--cp-bg2);
  border:1px solid var(--cp-line)}
.cp-msg.think{color:var(--cp-tx2);display:flex;align-items:center;gap:8px}
.cp-cursor{display:inline-block;width:2px;height:1em;vertical-align:-2px;
  margin-left:2px;background:var(--cp-brand);animation:cpBlink 1s steps(2) infinite}
@keyframes cpBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* 工具过程：窄屏折叠 */
.cp-ev{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--cp-tx3);
  overflow-wrap:anywhere;line-height:1.5}
.cp-ev.ok{color:var(--cp-tx2)}
.cp-ev.err{color:var(--cp-neg)}
.cp-spin{width:9px;height:9px;border:1.5px solid var(--cp-line2);
  border-top-color:var(--cp-brand);border-radius:99px;flex:none;
  animation:cpRot .7s linear infinite}
@keyframes cpRot{to{transform:rotate(360deg)}}
.cp-mini{font-size:10.5px;color:var(--cp-tx3);border:1px solid var(--cp-line);
  border-radius:99px;padding:2px 7px;cursor:pointer;flex:none}
.cp-mini:hover{border-color:var(--cp-brand);color:var(--cp-brand)}

/* 产物卡 */
.cp-art{align-self:flex-start;max-width:100%;border:1px solid var(--cp-line);
  border-radius:10px;padding:9px 11px;background:var(--cp-bg2);font-size:12px}
.cp-art a{color:var(--cp-brand);text-decoration:none;overflow-wrap:anywhere}
.cp-media{display:block;max-width:100%;max-height:40dvh;margin-top:7px;
  border-radius:8px;border:1px solid var(--cp-line)}

/* ── 7. 进度条 ───────────────────────────────────────────── */
.cp-prog{flex:none;display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-top:1px solid var(--cp-line);background:var(--cp-bg2);font-size:11.5px;
  color:var(--cp-tx2)}
.cp-prog[hidden]{display:none}
.cp-bar{flex:1;height:5px;border-radius:3px;background:var(--cp-sunken);overflow:hidden}
.cp-bar i{display:block;height:100%;border-radius:3px;width:0;
  background:linear-gradient(90deg,var(--cp-brand),var(--cp-ok));
  transition:width .3s var(--t1)}

/* ── 8. 输入区 ───────────────────────────────────────────── */
.cp-composer{flex:none;display:flex;align-items:center;gap:7px;padding:9px 12px;
  border-top:1px solid var(--cp-line);background:var(--cp-bg);
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.cp-inp{flex:1;min-width:0;border:1px solid var(--cp-line);background:var(--cp-bg2);
  color:var(--cp-tx);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px}
.cp-inp:focus{outline:none;border-color:var(--cp-brand)}
.cp-thumb{position:relative;align-self:flex-start;margin:0 12px 4px;
  max-width:120px;border-radius:8px;border:1px solid var(--cp-line)}
.cp-thumb img{display:block;width:100%;border-radius:7px}

/* ── 9. 移动端吸底 mini 入口 ─────────────────────────────── */
.cp-mini-wrap{display:none;position:fixed;left:0;right:0;bottom:0;z-index:59;
  padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--cp-bg);border-top:1px solid var(--cp-line);gap:8px;
  align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
.cp-mini-wrap.on{display:flex}
.cp-mini-row{display:flex;align-items:center;gap:8px;width:100%}
.cp-mini-inp{flex:1;min-width:0;border:1px solid var(--cp-line);
  background:var(--cp-bg2);color:var(--cp-tx);border-radius:99px;
  padding:10px 16px;font:inherit;font-size:13px}
.cp-mini-inp:focus{outline:none;border-color:var(--cp-brand)}
body.cp-mini-open{padding-bottom:62px}

/* ═══ 10. 三段断点 ═══════════════════════════════════════════
   ≥1024  收窄 / 覆盖 由用户选（默认收窄）
   768~1023  强制覆盖（收窄会把主区压到 300px 以下，违反 A14 无横向溢出）
   ≤767   强制全屏 sheet（420px 侧滑在手机上什么也看不见）
   ═══════════════════════════════════════════════════════ */

/* 中屏：收窄失效，退回覆盖 */
@media (max-width:1023px){
  body.cp-narrow .main{margin-right:0}
}

/* 手机：全屏 sheet */
@media (max-width:767px){
  .cp-panel{width:100%;border-left:none;height:calc(100dvh - var(--cp-kb))}
  .cp-panel.off{transform:translateX(100%)}
  .cp-scrim{display:block}
  .cp-log{padding:12px 10px}
  .cp-msg{max-width:96%}
  .cp-side{max-height:34%}
  .cp-composer{padding:8px 10px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}

/* 横屏矮屏 / 折叠屏展开 */
@media (max-width:767px), (max-height:460px){
  .cp-panel{inset:0;width:100%;height:calc(100dvh - var(--cp-kb))}
  .cp-scrim{display:block}
}

/* 触控热区 */
@media (pointer:coarse){
  .cp-panel .cp-btn{min-height:44px}
  .cp-wfchip{min-height:32px;display:inline-flex;align-items:center}
  .cp-mini-inp{min-height:40px}
}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  .cp-panel,.cp-bar i,.cp-dot{transition:none}
  .cp-cursor,.cp-spin,.cp-dot.run{animation:none}
}