:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, "Courier New", monospace;
  --radius: 14px;
}
:root, [data-theme="dark"] {
  --bg: #0b0e14; --bg2: #0f131b; --panel: #151a24; --panel2: #1b2130; --border: #242b39; --border2: #2f3748;
  --text: #e6e9ef; --dim: #8b94a7; --faint: #5f687a;
  --accent: #7c8cff; --accent2: #a78bfa; --accent-soft: rgba(124, 140, 255, .14);
  --user: linear-gradient(135deg, #5b6cff, #8b5cf6); --user-text: #fff; --user-shadow: rgba(91, 108, 255, .28);
  --code-bg: #0d1117; --ok: #3fb950; --warn: #e3b341; --err: #f85149;
  --shadow: 0 10px 34px rgba(0, 0, 0, .38);
  --tk-kw: #ff7b72; --tk-str: #a5d6ff; --tk-num: #79c0ff; --tk-com: #8b949e; --tk-fn: #d2a8ff; --tk-type: #ffa657;
  --tk-attr: #79c0ff; --tk-var: #ffa657; --tk-tag: #7ee787; --tk-meta: #d2a8ff; --tk-ins: #7ee787; --tk-del: #ffa198;
  --hit: rgba(227, 179, 65, .32);
}
[data-theme="light"] {
  --bg: #f6f7fb; --bg2: #eef0f6; --panel: #ffffff; --panel2: #f2f4f8; --border: #e3e6ee; --border2: #d3d8e2;
  --text: #1f2430; --dim: #667085; --faint: #98a2b3;
  --accent: #4f5bd5; --accent2: #7c3aed; --accent-soft: rgba(79, 91, 213, .10);
  --user: linear-gradient(135deg, #4f5bd5, #7c3aed); --user-text: #fff; --user-shadow: rgba(79, 91, 213, .25);
  --code-bg: #f6f8fa; --ok: #1a7f37; --warn: #9a6700; --err: #cf222e;
  --shadow: 0 10px 30px rgba(16, 24, 40, .10);
  --tk-kw: #cf222e; --tk-str: #0a3069; --tk-num: #0550ae; --tk-com: #6e7781; --tk-fn: #8250df; --tk-type: #953800;
  --tk-attr: #0550ae; --tk-var: #953800; --tk-tag: #116329; --tk-meta: #8250df; --tk-ins: #116329; --tk-del: #82071e;
  --hit: rgba(212, 167, 44, .35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
[hidden] { display: none !important; }
svg { display: block; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

.app { display: grid; grid-template-columns: 276px 1fr; height: 100vh; height: 100dvh; }

/* ---------- 侧栏 ---------- */
.sidebar { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.brand { display: flex; gap: 11px; align-items: center; padding: 18px 16px 14px; }
.logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 18px var(--accent-soft); }
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: .2px; }
.conn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); margin-top: 3px; }
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.conn.ok i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.conn.err i, .conn.auth i { background: var(--err); }
.conn.connecting i { animation: pulse 1.2s infinite; }
.new-session { margin: 2px 12px 6px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--border2); color: var(--dim);
  display: flex; gap: 8px; align-items: center; transition: .15s; }
.new-session:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.new-session-form { margin: 0 12px 6px; }
.new-session-form input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--accent); background: var(--panel);
  color: var(--text); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.sess-label { font-size: 11px; letter-spacing: .08em; color: var(--faint); padding: 10px 18px 6px; }
.sessions { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.sess { width: 100%; text-align: left; padding: 10px; border-radius: 11px; display: block; margin-bottom: 2px; transition: background .12s; }
.sess:hover { background: var(--panel); }
.sess.active { background: var(--panel); box-shadow: inset 0 0 0 1px var(--border2); }
.sess-top { display: flex; align-items: center; gap: 8px; }
.sess-name { flex: 1; min-width: 0; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-time { font-size: 11px; color: var(--faint); flex-shrink: 0; }
.sess-prev { font-size: 12px; color: var(--dim); margin-top: 3px; padding-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--faint); margin-top: 4px; padding-left: 16px; white-space: nowrap; min-width: 0; }
.sess-meta .on { color: var(--ok); }
.sess-meta .busy { color: var(--warn); }
.sess-meta .sid { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sess-meta .tok { margin-left: auto; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sess-meta .tok.warn { color: var(--warn); }
.sess-meta .tok.err { color: var(--err); }
.sess-meta .tok.real { color: var(--accent); }
/* 心跳点：on 挂着等你（涟漪）/ busy 拿到回复在干活（闪）/ off 掉线（灰） */
.hb { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); flex-shrink: 0; position: relative; }
.hb.on { background: var(--ok); }
.hb.on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); animation: ripple 2.2s ease-out infinite; }
.hb.busy { background: var(--warn); animation: pulse 1.4s infinite; }
.hb.off { background: var(--faint); opacity: .55; }
@keyframes ripple { from { transform: scale(.45); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.views { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.view-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--dim); text-align: left; transition: background .12s, color .12s; }
.view-btn:hover { background: var(--panel); color: var(--text); }
.view-btn.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.view-btn .badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #111;
  font-size: 11px; font-weight: 700; display: grid; place-items: center; font-style: normal; }
.view-btn .newdot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.side-foot { display: flex; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--border); }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--dim); flex-shrink: 0; transition: .12s; }
.icon-btn:hover { background: var(--panel); color: var(--text); }
.icon-btn.on { color: var(--accent); }
.scrim { display: none; }

/* ---------- 主区 ---------- */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); z-index: 3; }
.menu-btn { display: none; }
.top-title { flex: 1; min-width: 0; }
.t1 { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2 { font-size: 12px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border); color: var(--dim); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.pill.waiting { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.pill.waiting i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.pill.busy { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.pill.busy i { background: var(--warn); animation: pulse 1.4s infinite; }
.pill.off { color: var(--faint); }
.pill small { font-size: 12px; opacity: .75; }
@keyframes pulse { 50% { opacity: .35; } }
.ctx { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
  font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; transition: .15s; }
.ctx:hover { border-color: var(--border2); color: var(--text); }
.ctx-bar { width: 44px; height: 5px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.ctx-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.ctx.warn { color: var(--warn); } .ctx.warn .ctx-bar i { background: var(--warn); }
.ctx.err { color: var(--err); } .ctx.err .ctx-bar i { background: var(--err); }
.ctx.real { color: var(--accent); } .ctx.real .ctx-bar i { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.mono { font-family: var(--mono); }

/* ---------- 视图：对话 / 指挥台 / 事件流 ---------- */
.chatview { flex: 1; min-height: 0; display: flex; }
.chatcol { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.deck, .events { flex: 1; min-height: 0; overflow-y: auto; }
.app:not([data-view="chat"]) .chat-only { display: none !important; }

/* 会话信息栏：宽屏靠右常驻，窄屏从右边抽出 */
.info { width: 316px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--bg2); display: none; flex-direction: column; min-height: 0; }
.info-head { display: flex; align-items: center; gap: 8px; height: 52px; flex-shrink: 0; padding: 0 10px 0 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.info-head span { flex: 1; }
.info-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.icard { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.icard h4 { font-size: 11px; letter-spacing: .08em; color: var(--faint); font-weight: 600; margin-bottom: 10px; }
.big-stat { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.big-num { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.big-num small { font-size: 12px; color: var(--faint); font-weight: 500; }
.big-num .pct { margin-left: auto; font-size: 13px; color: var(--accent); }
.big-num .pct.warn { color: var(--warn); } .big-num .pct.err { color: var(--err); }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; color: var(--dim); }
.kv b { color: var(--text); font-weight: 560; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter { height: 8px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--border); overflow: hidden; margin: 10px 0 8px; }
.meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.meter.warn i { background: var(--warn); } .meter.err i { background: var(--err); }
.fine { font-size: 11.5px; color: var(--faint); line-height: 1.7; margin-top: 8px; }
.fine code, .none code { font-family: var(--mono); font-size: 11px; background: var(--panel2); border: 1px solid var(--border); padding: 0 5px; border-radius: 5px; }
@media (min-width: 1180px) { .app.info-on .info { display: flex; } }
@media (max-width: 1179.98px) {
  .info { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88%); z-index: 41; box-shadow: var(--shadow);
    transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
  .app.info-drawer .info { transform: none; visibility: visible; }
  .app.info-drawer .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 35; }
}

/* 指挥台 / 事件流共用 */
.vinner { max-width: 1280px; margin: 0 auto; padding: 18px 22px 28px; }
.vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.vbar select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border2); background: var(--panel); color: var(--text); outline: none; font: inherit; font-size: 13px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); margin-left: auto; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 2s infinite; }
.live.err { color: var(--err); } .live.err i { background: var(--err); animation: none; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { text-align: left; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); transition: border-color .15s; }
.tile:hover { border-color: var(--border2); }
.tile b { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile span { font-size: 12px; color: var(--dim); }
.tile.hot { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.tile.hot b { color: var(--warn); }
/* 指挥台说明条 + 空面板收起 */
.deck-help { display: flex; gap: 16px; align-items: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.deck-help .dh-main { flex: 1; min-width: 0; }
.deck-help b { font-size: 13.5px; }
.deck-help p { font-size: 12.5px; color: var(--dim); line-height: 1.7; margin: 7px 0 9px; }
.deck-help strong { color: var(--text); font-weight: 600; }
.dh-flow { list-style: none; display: grid; gap: 4px; }
.dh-flow li { font-size: 12px; color: var(--dim); line-height: 1.6; padding-left: 13px; position: relative; }
.dh-flow li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.dh-close { flex-shrink: 0; align-self: flex-start; }
.help-btn { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border2); background: var(--panel); color: var(--dim); font-size: 12.5px; }
.help-btn:hover { color: var(--text); border-color: var(--accent); }
.panel.empty .pb { display: none; }
.panel.empty .ph { border-bottom: none; color: var(--faint); }
.panel.empty .ph::after { content: "暂无"; margin-left: auto; font-size: 11px; color: var(--faint); font-weight: 500; }
/* 面板头「+ 任务 / + 决策」快捷建 */
.ph-add { margin-left: auto; padding: 3px 10px; border-radius: 8px; font-size: 12px; color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.ph-add:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* 新建任务 / 决策弹窗 */
.deck-new-card { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.deck-new-card .seg { margin: 4px 0 18px; }
.dn-row { display: flex; gap: 14px; }
.dn-row .setting { flex: 1; min-width: 0; }
.deck-new-card input, .deck-new-card select, .deck-new-card textarea { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); outline: none; font: inherit; font-size: 13px; }
.deck-new-card input:focus, .deck-new-card select:focus, .deck-new-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.deck-new-card textarea { resize: vertical; min-height: 44px; line-height: 1.6; }
.deck-new-card .btn { width: 100%; margin-top: 4px; }
/* 空闲引导页 */
.deck-guide { max-width: 640px; margin: 6px auto 0; }
.dg-hero { text-align: center; padding: 8px 0 2px; }
.dg-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 12px; background: var(--accent-soft); color: var(--accent); }
.dg-icon svg { width: 24px; height: 24px; }
.dg-hero h2 { font-size: 18px; font-weight: 650; }
.dg-hero p { color: var(--dim); font-size: 13px; line-height: 1.75; margin: 8px 0 0; }
.dg-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.dg-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); transition: border-color .15s, transform .08s; }
.dg-act:hover { border-color: var(--accent); }
.dg-act-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.dg-act b { font-size: 13.5px; }
.dg-act small { color: var(--faint); font-size: 11.5px; }
.dg-flow { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px; }
.dg-flow > b { font-size: 13px; }
.dg-flow ol { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.dg-flow li { color: var(--dim); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 640px) { .dg-actions { grid-template-columns: 1fr; } }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; scroll-margin-top: 12px; }
.panel.span3 { grid-column: 1 / -1; }
.ph { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.ph .n { color: var(--faint); font-weight: 500; font-size: 12px; }
.pb { padding: 12px 14px; }
.none { color: var(--faint); font-size: 12.5px; padding: 4px 0; line-height: 1.75; }
.sub-h { font-size: 11px; letter-spacing: .08em; color: var(--faint); margin: 16px 0 6px; }
.tag { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); font-size: 11px; line-height: 17px; color: var(--dim); white-space: nowrap; }
.tag.p1, .tag.bad { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--border)); }
.tag.p2 { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.tag.acc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.mini-btn { padding: 6px 12px; border-radius: 9px; font-size: 12.5px; background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; }
.mini-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* 看板 */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; padding: 12px; overflow-x: auto; }
.kcol { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kcol-h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); padding: 2px 4px 4px; font-weight: 600; }
.kcol-h i { width: 8px; height: 8px; border-radius: 3px; }
.kcol-h .n { margin-left: auto; color: var(--faint); font-weight: 500; }
.tcard { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: border-color .12s; }
.tcard:hover { border-color: var(--border2); }
.tcard.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tt { font-size: 13px; line-height: 1.5; word-break: break-word; }
.tm { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 11.5px; color: var(--faint); align-items: center; }
.tm .warn-t { color: var(--warn); }
.td { margin-top: 9px; padding-top: 6px; border-top: 1px dashed var(--border2); font-size: 12.5px; color: var(--dim); line-height: 1.65; cursor: auto; }
.td dt { color: var(--faint); font-size: 11px; margin-top: 6px; }
.td dd { white-space: pre-wrap; word-break: break-word; color: var(--text); }
.st-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.st-btns button { padding: 3px 9px; border-radius: 8px; font-size: 12px; border: 1px solid var(--border2); color: var(--dim); }
.st-btns button:hover { border-color: var(--accent); color: var(--accent); }
.st-btns button.cur { background: var(--accent-soft); color: var(--accent); border-color: transparent; cursor: default; }
.st-btns button.armed, .opt.armed { background: var(--warn); color: #111; border-color: var(--warn); }
.more { font-size: 12px; color: var(--accent); padding: 4px; }
/* 决策 */
.dec { padding: 12px 0; border-bottom: 1px solid var(--border); }
.dec:first-child { padding-top: 0; }
.dec:last-child { border-bottom: 0; padding-bottom: 0; }
.dq { font-size: 13.5px; line-height: 1.6; word-break: break-word; font-weight: 560; white-space: pre-wrap; }
.dec.done .dq { color: var(--dim); font-weight: 500; }
.res { margin-top: 4px; font-size: 12.5px; color: var(--ok); word-break: break-word; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.opt { padding: 6px 11px; border-radius: 9px; border: 1px solid var(--border2); font-size: 12.5px; text-align: left; transition: .12s; }
.opt:hover { border-color: var(--accent); color: var(--accent); }
.dec-own { display: flex; gap: 6px; margin-top: 8px; }
.dec-own input, .board-form textarea { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border2); background: var(--bg2);
  color: var(--text); outline: none; font-size: 12.5px; }
.dec-own input:focus, .board-form textarea:focus { border-color: var(--accent); }
/* 流水线 / 团队 / 写锁 / 留言板 */
.pipe { margin-bottom: 12px; }
.pipe:last-child { margin-bottom: 0; }
.pipe-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 6px; }
.pipe-h span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-h span:last-child { color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.segbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--bg2); border: 1px solid var(--border); }
.segbar i { display: block; height: 100%; }
.ag { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ag:first-child { padding-top: 0; }
.ag:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--panel2); color: var(--dim); flex-shrink: 0; position: relative; }
.ag-av.cmd { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.ag-av i { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel); background: var(--faint); }
.ag-av i.idle { background: var(--ok); } .ag-av i.busy { background: var(--warn); }
.ag-main { flex: 1; min-width: 0; }
.ag-name { font-size: 13px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sub { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.lk:first-child { padding-top: 0; }
.lk:last-child { border-bottom: 0; padding-bottom: 0; }
.lk-name { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.lk-left { color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.lk-sub { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; }
.board-list { max-height: 380px; min-height: 120px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bm-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--faint); }
.bm-h b { color: var(--text); font-size: 12.5px; font-weight: 600; }
.bm-h b.me { color: var(--accent); }
.bm-t { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.board-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.board-form textarea { resize: none; max-height: 120px; line-height: 1.5; }
/* 事件流 */
.ev-list { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ev { display: grid; grid-template-columns: 92px 150px 150px minmax(0, 1fr) 18px; gap: 12px; align-items: baseline; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ev:last-child { border-bottom: 0; }
.ev.head { color: var(--faint); font-size: 11px; background: var(--panel2); }
.ev-time { color: var(--faint); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.ev-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-who small { color: var(--faint); margin-left: 5px; font-size: 11px; }
.ev-tool { font-family: var(--mono); font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-sum { color: var(--dim); word-break: break-word; }
.ev-sum .x { color: var(--text); font-weight: 600; }
.ev-sum small { color: var(--faint); }
.ev-ok { text-align: right; color: var(--ok); }
.ev.fail { background: color-mix(in srgb, var(--err) 7%, transparent); }
.ev.fail .ev-ok, .ev.fail .ev-sum { color: var(--err); }
.ev.fresh { animation: flash 1.8s ease; }
@keyframes flash { from { background: var(--accent-soft); } }
@media (max-width: 1180px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chat { flex: 1; overflow-y: auto; }
.chat-inner { max-width: 880px; margin: 0 auto; padding: 26px 22px 14px; display: flex; flex-direction: column; gap: 20px; min-height: 100%; }
.daysep { align-self: center; font-size: 12px; color: var(--faint); padding: 3px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); }
.row { display: flex; gap: 12px; align-items: flex-start; animation: fadein .18s ease; }
.row.user { justify-content: flex-end; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.avatar { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 4px 12px var(--accent-soft); }
.col { min-width: 0; max-width: min(720px, 86%); display: flex; flex-direction: column; }
.row.user .col { align-items: flex-end; }
.bubble { min-width: 0; max-width: 100%; }
.row.agent .bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 4px var(--radius) var(--radius) var(--radius); padding: 12px 16px; }
.row.user .bubble { background: var(--user); color: var(--user-text); border-radius: var(--radius) 4px var(--radius) var(--radius); padding: 10px 15px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.65; box-shadow: 0 6px 18px var(--user-shadow); }
.row.user .bubble.only-files { background: none; box-shadow: none; padding: 0; }
.meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--faint); padding: 0 4px; }
.meta .copy-msg { opacity: 0; transition: opacity .15s; font-size: 11px; padding: 1px 7px; border-radius: 6px; color: var(--dim); }
.row:hover .copy-msg, .copy-msg:focus { opacity: 1; }
.meta .copy-msg:hover { background: var(--panel2); color: var(--text); }

/* Markdown */
.md { line-height: 1.72; word-break: break-word; }
.md > :first-child { margin-top: 0 !important; }
.md > :last-child { margin-bottom: 0 !important; }
.md p { margin: 0 0 .65em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1em 0 .45em; line-height: 1.4; font-weight: 650; }
.md h1 { font-size: 1.3em; } .md h2 { font-size: 1.2em; } .md h3 { font-size: 1.08em; } .md h4, .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: .25em 0 .75em; padding-left: 1.45em; }
.md li { margin: .22em 0; }
.md li::marker { color: var(--faint); }
.md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.md a:hover { border-bottom-color: var(--accent); }
.md code { font-family: var(--mono); font-size: .87em; background: var(--panel2); border: 1px solid var(--border); padding: .08em .4em; border-radius: 6px; }
.md blockquote { margin: .5em 0 .85em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--accent); color: var(--dim); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.1em 0; }
.md strong { font-weight: 650; }
.md del { color: var(--dim); }
.task { color: var(--accent); font-weight: 700; }
.md li:has(> .task:first-child) { list-style: none; margin-left: -1.1em; }
.codeblock { margin: .55em 0 .85em; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--code-bg); }
.codehead { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; font-size: 11px; color: var(--faint);
  border-bottom: 1px solid var(--border); font-family: var(--mono); }
.codehead button { font-size: 11px; color: var(--dim); padding: 2px 8px; border-radius: 6px; font-family: var(--font); }
.codehead button:hover { background: var(--panel2); color: var(--text); }
.codeblock pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.codeblock code { background: none; border: 0; padding: 0; font-size: inherit; }
.tablewrap { overflow-x: auto; margin: .55em 0 .85em; border: 1px solid var(--border); border-radius: 11px; }
.md table { border-collapse: collapse; width: 100%; font-size: .93em; }
.md th, .md td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.md th { background: var(--panel2); font-weight: 600; white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }

/* 附件 */
.atts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.row.user .atts { justify-content: flex-end; }
.bubble.only-files .atts { margin-top: 0; }
.att-img { max-width: 280px; max-height: 240px; min-width: 90px; min-height: 70px; border-radius: 11px; border: 1px solid var(--border);
  cursor: zoom-in; display: block; background: var(--panel2); object-fit: cover; }
.att-file { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px; background: var(--panel2);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; max-width: 280px; }
.att-file:hover { border-color: var(--accent); }
.att-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-file small { color: var(--faint); flex-shrink: 0; }

/* 空状态 / 加载 */
.empty { margin: auto; text-align: center; color: var(--dim); padding: 40px 20px; max-width: 440px; }
.empty .big { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.empty h3 { color: var(--text); font-size: 16px; margin-bottom: 8px; font-weight: 600; }
.empty p { font-size: 13px; line-height: 1.75; }
.empty code, .card code { font-family: var(--mono); font-size: 12px; background: var(--panel2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border2); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 输入区 */
.composer { flex-shrink: 0; padding: 6px 22px 16px; position: relative; z-index: 2; }
.composer::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.composer-inner { max-width: 880px; margin: 0 auto; }
.hint { font-size: 12px; color: var(--accent); margin: 0 6px 8px; display: flex; align-items: center; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.chips:empty { display: none; }
.chip { padding: 7px 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border2); font-size: 13px; transition: .15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pending { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.pending:empty { display: none; }
.pfile { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 5px; border-radius: 11px; background: var(--panel); border: 1px solid var(--border);
  font-size: 12px; max-width: 230px; }
.pfile img, .pfile .fi { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pfile .fi { background: var(--panel2); display: grid; place-items: center; color: var(--dim); }
.pfile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pfile button { color: var(--faint); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.pfile button:hover { color: var(--err); background: var(--panel2); }
.inputbox { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border2);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.inputbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.inputbox textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14.5px; line-height: 1.55;
  padding: 7px 4px; max-height: 200px; min-height: 22px; }
.inputbox textarea::placeholder { color: var(--faint); }
.send-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0; transition: .15s;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 4px 12px var(--accent-soft); }
.send-btn:hover:not(:disabled) { transform: translateY(-1px); }
.send-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.foot-tip { font-size: 11px; color: var(--faint); text-align: center; margin-top: 9px; }
.jump { position: absolute; left: 50%; transform: translateX(-50%); padding: 7px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border2);
  box-shadow: var(--shadow); font-size: 12px; color: var(--accent); z-index: 4; display: flex; gap: 6px; align-items: center; }

/* 连接卡 / 设置 */
.connect { position: absolute; inset: 60px 0 0 0; display: grid; place-items: center; background: var(--bg); z-index: 5; padding: 20px; }
.card { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); position: relative; }
.card .logo { margin-bottom: 16px; }
.card h2 { font-size: 18px; margin-bottom: 8px; font-weight: 650; }
.card p { color: var(--dim); font-size: 13px; line-height: 1.75; margin-bottom: 18px; }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); outline: none; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn { padding: 10px 16px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 600; white-space: nowrap; }
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
.btn.danger { background: none; color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 40%, var(--border)); font-weight: 500; }
.err-text { color: var(--err); font-size: 12px; margin-top: 10px; min-height: 16px; }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: grid; place-items: center; z-index: 50; padding: 20px; animation: fadein .15s ease; }
.close-x { position: absolute; top: 14px; right: 14px; }
.setting { margin-bottom: 20px; }
.setting > label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 7px; }
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }
.seg button { padding: 6px 13px; border-radius: 8px; font-size: 13px; color: var(--dim); }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.server-info { font-size: 12px; color: var(--dim); line-height: 1.8; padding: 10px 12px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--border); }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .86); display: grid; place-items: center; z-index: 60; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.drop-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(10, 12, 20, .55); display: grid; place-items: center; pointer-events: none; }
.drop-overlay div { padding: 24px 34px; border: 2px dashed var(--accent); border-radius: 20px; color: #fff; font-size: 16px; background: rgba(0, 0, 0, .35); }
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 70; align-items: center; pointer-events: none; }
.toast { padding: 9px 16px; border-radius: 11px; background: var(--panel); border: 1px solid var(--border2); box-shadow: var(--shadow); font-size: 13px; animation: fadein .2s ease; }
.toast.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 84%; max-width: 310px; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow); }
  .app.drawer .sidebar { transform: none; }
  .app.drawer .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 35; }
  .menu-btn { display: grid; }
  .topbar { padding: 0 10px; gap: 8px; }
  .chat-inner { padding: 18px 12px 10px; gap: 16px; }
  .composer { padding: 6px 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .col { max-width: 90%; }
  .avatar { display: none; }
  .foot-tip { display: none; }
  .att-img { max-width: 220px; }
  .ctx { padding: 6px 9px; }
  .ctx-bar, .pill small { display: none; }
  .vinner { padding: 12px 10px 20px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dgrid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(5, minmax(220px, 80%)); }
  .ev { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time who ok" "tool tool tool" "sum sum sum"; gap: 2px 8px; }
  .ev.head { display: none; }
  .ev-time { grid-area: time; } .ev-who { grid-area: who; } .ev-ok { grid-area: ok; } .ev-tool { grid-area: tool; } .ev-sum { grid-area: sum; }
}

/* 云端 agent：新建 / 接管 + 每一轮的过程（思考 / 工具 / 回答片段） */
.new-session.cloud { margin-top: 0; }
.cloud-tag { font-size: 10.5px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.cloud-tag.run::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 4px; vertical-align: 1px; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.cloud-card { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.cloud-tabs { margin: 4px 0 18px; }
.cloud-card select, .cloud-card textarea { width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border2); background: var(--bg2); color: var(--text); outline: none; font: inherit; }
.cloud-card textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.cloud-card select:focus, .cloud-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cloud-card .field input.ref { flex: 0 0 34%; }
.cloud-note { font-size: 12px; color: var(--faint); line-height: 1.7; margin-top: 10px; }
.agent-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; max-height: 300px; overflow: auto; }
.agent-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg2); }
.agent-item .a-main { flex: 1; min-width: 0; }
.agent-item .a-name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-item .a-sub { font-size: 11.5px; color: var(--faint); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-item .a-st { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--panel2); color: var(--dim); }
.agent-item .a-st.ACTIVE { color: var(--warn); }
.agent-item .mini-btn { flex-shrink: 0; }

.proc { margin-bottom: 8px; font-size: 13px; }
.proc > summary, .live-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--dim); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); user-select: none; }
.proc > summary::-webkit-details-marker { display: none; }
.proc > summary::before, .live-row details.live-box > summary::before { content: "▸"; font-size: 11px; color: var(--faint); transition: transform .15s; }
.proc[open] > summary::before, .live-row details.live-box[open] > summary::before { transform: rotate(90deg); }
.proc-list, .live-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px 10px; margin-left: 6px; border-left: 2px solid var(--border); }
.live-row .col { width: 100%; }
.live-row details.live-box > summary { list-style: none; }
.live-row details.live-box > summary::-webkit-details-marker { display: none; }
.live-head .lh-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-head .lh-time { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.live-head .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--accent); animation: spin .8s linear infinite; flex-shrink: 0; }
.live-head.done .spin, .live-head.err .spin { display: none; }
.live-head.err { color: var(--err); }
.live-head .stop-btn { font-size: 12px; padding: 3px 10px; border-radius: 8px; color: var(--err); border: 1px solid color-mix(in srgb, var(--err) 40%, var(--border)); }
.live-head .stop-btn:hover { background: color-mix(in srgb, var(--err) 12%, transparent); }
.more-btn { align-self: flex-start; font-size: 12px; color: var(--accent); padding: 2px 4px; }
.st { font-size: 13px; min-width: 0; }
.st > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; color: var(--dim); min-width: 0; }
.st > summary::-webkit-details-marker { display: none; }
.st .st-ic { flex-shrink: 0; width: 16px; text-align: center; font-size: 12px; }
.st .st-name { flex-shrink: 0; color: var(--text); font-weight: 550; }
.st .st-arg { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--faint); font-family: var(--mono); font-size: 12px; }
.st.think .st-arg { font-family: inherit; font-style: italic; }
.st .st-body { margin: 6px 0 2px 23px; }
.st .st-lbl { font-size: 11px; color: var(--faint); margin: 6px 0 3px; }
.st pre { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-height: 320px; overflow: auto; }
.st.think .st-body { white-space: pre-wrap; color: var(--dim); font-style: italic; line-height: 1.7; }
.st.tool.running .st-ic { color: var(--warn); }
.st.tool.completed .st-ic { color: var(--ok); }
.st.tool.failed .st-ic, .st.tool.failed .st-name { color: var(--err); }
.st.text { padding: 2px 0 2px 23px; }

/* 代码高亮 */
.tk-kw { color: var(--tk-kw); }
.tk-str { color: var(--tk-str); }
.tk-num, .tk-lit { color: var(--tk-num); }
.tk-com { color: var(--tk-com); font-style: italic; }
.tk-fn { color: var(--tk-fn); }
.tk-type { color: var(--tk-type); }
.tk-attr { color: var(--tk-attr); }
.tk-var { color: var(--tk-var); }
.tk-tag { color: var(--tk-tag); }
.tk-meta { color: var(--tk-meta); }
.tk-ins { color: var(--tk-ins); }
.tk-del { color: var(--tk-del); }

/* 长消息折叠 */
.fold { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.fold-btn { display: inline-flex; align-items: center; margin-top: 8px; padding: 3px 10px; border-radius: 8px; font-size: 12px; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.fold-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.row.user .fold-btn { color: #fff; background: rgba(255, 255, 255, .18); }
.row.user .fold-btn:hover { background: rgba(255, 255, 255, .28); }

/* 往上翻页 */
.load-more { align-self: center; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border2); background: var(--panel); color: var(--accent); font-size: 12px; }
.load-more:hover:not(:disabled) { border-color: var(--accent); }
.load-more:disabled { color: var(--faint); cursor: default; }

/* 会话内搜索 */
.findbar { position: absolute; top: 10px; right: 18px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 13px;
  background: var(--panel); border: 1px solid var(--border2); box-shadow: var(--shadow); width: min(430px, calc(100% - 24px)); color: var(--faint); }
.findbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 5px 4px; }
.find-count { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
.find-count.none { color: var(--err); }
.findbar .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
mark.hit { background: var(--hit); color: inherit; border-radius: 3px; box-shadow: 0 0 0 1px var(--hit); }
mark.hit.cur { background: var(--warn); color: #111; box-shadow: 0 0 0 2px var(--warn); }

/* 侧栏：搜索入口 / 会话操作 */
.quick-btn { display: flex; align-items: center; gap: 9px; margin: 8px 12px 6px; padding: 8px 10px; border-radius: 10px; color: var(--faint);
  background: var(--panel); border: 1px solid var(--border); text-align: left; transition: border-color .12s, color .12s; }
.quick-btn:hover { border-color: var(--border2); color: var(--dim); }
.quick-btn span:nth-child(2) { flex: 1; font-size: 13px; }
kbd { font-family: var(--mono); font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border2); border-bottom-width: 2px;
  color: var(--faint); background: var(--bg2); white-space: nowrap; }
.sess { position: relative; }
.sess-more { position: absolute; top: 7px; right: 6px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: var(--dim); background: var(--panel2); opacity: 0; transition: opacity .12s; }
.sess:hover .sess-more, .sess:focus-visible .sess-more { opacity: 1; }
.sess:hover .sess-time { visibility: hidden; }
.sess-more:hover { color: var(--text); background: var(--border); }
@media (hover: none) { .sess-more { opacity: .7; background: none; } .sess-time { margin-right: 24px; } }
.pin-ic { color: var(--accent); flex-shrink: 0; margin-left: -2px; }
.sess-prev .draft { color: var(--warn); }

/* 弹出菜单 */
.menu { position: fixed; z-index: 66; min-width: 168px; padding: 5px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border2); box-shadow: var(--shadow); animation: fadein .12s ease; }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 13px; color: var(--text); }
.menu button:hover, .menu button:focus-visible { background: var(--panel2); outline: none; }
.menu button svg { color: var(--dim); }
.menu button.danger, .menu button.danger svg { color: var(--err); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* 对话框 */
.dialog-card { width: min(420px, 100%); }
.dialog-card p { white-space: pre-wrap; margin-bottom: 16px; }
.dialog-card .field { margin-bottom: 18px; }
.dialog-btns { display: flex; justify-content: flex-end; gap: 8px; }
.btn.danger-solid { background: var(--err); }

/* Ctrl+K 快速切换 */
.modal.quick { place-items: start center; padding-top: 12vh; }
.quick-card { width: min(580px, 100%); background: var(--panel); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.quick-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--faint); }
.quick-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.quick-list { max-height: min(440px, 62vh); overflow-y: auto; padding: 6px; }
.qi-sec { font-size: 11px; letter-spacing: .08em; color: var(--faint); padding: 8px 10px 4px; }
.qi { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-align: left; }
.qi.on { background: var(--accent-soft); }
.qi-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--panel2); color: var(--dim); }
.qi.on .qi-ic { color: var(--accent); }
.qi-main { flex: 1; min-width: 0; }
.qi-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 560; }
.qi-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-name .pin-ic { font-style: normal; margin: 0; }
.qi-sub { font-size: 12px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi mark { background: none; color: var(--accent); font-weight: 700; }
.qi .tag { flex-shrink: 0; }
.qi-empty { padding: 22px 12px; text-align: center; color: var(--faint); font-size: 13px; }
.quick-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--faint); }
.quick-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 820px) {
  .modal.quick { padding-top: 8vh; }
  .quick-foot, .quick-btn kbd { display: none; }
  .findbar { right: 10px; top: 8px; }
}

/* 本地网关（gateway view） */
.gw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .gw-grid { grid-template-columns: 1fr; } }
.gw-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.gw-row:last-child { border-bottom: 0; }
.gw-name { font-weight: 650; }
.gw-sp { flex: 1; }
.gw-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--border2); }
.gw-dot.ok { background: var(--ok); }
.gw-dot.idle { background: var(--warn); }
.gw-dot.off { background: var(--border2); }
.gw-add { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); }
.gw-add input { flex: 1; min-width: 92px; }
.gw-call { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.gw-call:last-child { border-bottom: 0; }
.gw-call.bad { border-left: 2px solid var(--err); }
.gw-actor { font-size: 12px; color: var(--faint); flex: none; }
.gw-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--faint); }
.gw-t { font-size: 12px; color: var(--faint); flex: none; }
.none.sm { font-size: 12px; padding: 8px 12px; }
.mini-btn.ghost { background: transparent; border: 1px solid var(--border2); }

/* 网关：文件浏览 / 终端 / 堆叠布局 */
.gw-stack { display: flex; flex-direction: column; gap: 14px; }
.gw-bar { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.gw-bar input { flex: 1; min-width: 100px; }
.gw-bar .gw-glob { flex: 0 1 130px; }
.gw-sub { padding: 8px 12px; font-size: 12px; color: var(--faint); }
.gw-frow { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; }
.gw-fi { width: 13px; height: 13px; flex: none; border-radius: 3px; background: var(--border2); }
.gw-fi.d { background: var(--accent); }
.gw-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-fsz { font-size: 12px; color: var(--faint); flex: none; }
.gw-fh { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.gw-fh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gw-pre { margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gw-sres { display: flex; gap: 8px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.gw-sl { flex: none; color: var(--accent); }
.gw-st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.gw-console { max-height: 420px; overflow: auto; }
.gw-ol { border-bottom: 1px solid var(--border); }
.gw-ol:last-child { border-bottom: 0; }
.gw-ol.bad .gw-ocmd { color: var(--err); }
.gw-ocmd { padding: 6px 12px 0; font-size: 12px; color: var(--accent); }
.gw-appr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.gw-appr:last-child { border-bottom: 0; }
.gw-ac { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.gw-tkm { font-size: 12px; color: var(--faint); }
.gw-tkexp { font-size: 12px; color: var(--faint); flex: none; }
.gw-tkx { font-size: 11px; color: var(--faint); }
.gw-bar select { flex: 0 0 auto; }
/* 服务信息面板 */
.gw-flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.gw-flag { font-size: 12px; padding: 2px 9px; border-radius: 11px; border: 1px solid var(--border2); color: var(--faint); }
.gw-flag.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.gw-kv { display: flex; gap: 10px; padding: 5px 12px; font-size: 12px; align-items: baseline; }
.gw-k { flex: 0 0 160px; color: var(--faint); }
.gw-v { flex: 1; min-width: 0; word-break: break-word; }
/* Git 面板 */
.gw-gittabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 2px; }

/* 动效（尊重 reduce-motion） */
@media (prefers-reduced-motion: no-preference) {
  section:not([hidden]) > .vinner { animation: gwin .22s ease both; }
  @keyframes gwin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .panel { transition: border-color .15s ease, box-shadow .15s ease; }
  .mini-btn, .btn, .view-btn, .icon-btn, .tile { transition: background .14s ease, color .14s ease, border-color .14s ease, transform .08s ease; }
  .mini-btn:active, .btn:active, .tile:active { transform: scale(.96); }
  .gw-row, .gw-frow, .gw-sres, .gw-call { transition: background .12s ease; }
  .gw-frow:hover, .gw-sres:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .gw-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .toast { animation: gwtoast .2s ease both; }
  @keyframes gwtoast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}