/* CodePiper 控制台样式 —— 暗色、与终端协调、响应式。落款 Wintoo Limited。 */
:root {
  --bg: #15171c;
  --bg-side: #1c1f26;
  --bg-elev: #262a32;
  --border: #323641;
  --fg: #e7e9ee;
  --fg-dim: #969cab;
  --accent: #3b9eff;       /* CodePiper 主色：管道蓝 */
  --accent-dim: #2b6fbf;
  --ok: #29b765;
  --danger: #e5534b;
  --warn: #e0b341;
  --paused: #c0863a;
  --radius: 8px;
  --sb: #3a3d44;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--fg); font-size: 14px;
}
.hidden { display: none !important; }

#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---- SVG 图标 ---- */
.ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; pointer-events: none; }

/* ---- 暗色滚动条 ---- */
* { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #4a4e57; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.xterm-viewport { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
.xterm-viewport::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 6px; }

/* ============ 侧栏 ============ */
#sidebar { width: 280px; flex: 0 0 280px; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; transition: flex-basis .18s, width .18s; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.logo-mark { flex: 0 0 auto; display: block; border-radius: 9px; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.logo-word { font-weight: 700; letter-spacing: .3px; font-size: 16px; background: linear-gradient(90deg, var(--accent), #6cc0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.login-logo .logo-mark { border-radius: 15px; box-shadow: 0 4px 16px rgba(59,158,255,.28); }
.side-search { padding: 8px 10px 0; }
.side-search input { width: 100%; padding: 7px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.session-list { flex: 1; overflow-y: auto; padding: 8px; }
.side-foot { padding: 9px 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--fg-dim); font-size: 12px; }
.show-hidden { cursor: pointer; user-select: none; }
.foot-btns { display: flex; gap: 4px; }

/* 侧栏折叠（桌面）：收起为窄轨道 */
#app.sidebar-collapsed #sidebar { flex-basis: 0; width: 0; border-right: none; overflow: hidden; }

/* 窄轨道：默认隐藏，折叠时显示，竖排状态点可点击直达 */
#rail { display: none; flex: 0 0 50px; width: 50px; background: var(--bg-side); border-right: 1px solid var(--border); flex-direction: column; align-items: center; padding: 8px 0; gap: 6px; }
#app.sidebar-collapsed #rail { display: flex; }
.rail-btn { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rail-btn:hover { border-color: var(--fg-dim); }
.rail-btn.primary { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }
.rail-btn.primary:hover { background: var(--accent); }
.rail-btn .ic { width: 17px; height: 17px; }
.rail-sep { width: 26px; height: 1px; background: var(--border); margin: 2px 0; flex: 0 0 auto; }
.rail-list { flex: 1; width: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0; }
.rail-dot { width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent; background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; }
.rail-dot:hover { background: var(--bg-elev); border-color: var(--border); }
.rail-dot.open { border-color: var(--accent-dim); }
.rail-dot .dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }

/* 按钮图标化 */
.btn-icon { width: 34px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* 会话条目 */
.sess { padding: 9px 11px; border-radius: var(--radius); cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; }
.sess:hover { background: var(--bg-elev); }
.sess.open { background: var(--bg-elev); border-color: var(--accent-dim); }
.sess.is-hidden { opacity: .55; }
.sess .row1 { display: flex; align-items: center; gap: 6px; }
.sess .name { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess .meta { color: var(--fg-dim); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess .ops { margin-top: 7px; display: none; gap: 3px; flex-wrap: nowrap; }
.sess.open .ops, .sess:hover .ops { display: flex; }
.iop { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.iop:hover { color: var(--fg); border-color: var(--fg-dim); }
.iop.danger:hover { color: var(--danger); border-color: var(--danger); }
.iop .ic { width: 14px; height: 14px; }

/* 日期分组（全部 Tab）*/
.grp-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px 5px; color: var(--fg-dim); font-size: 12px; cursor: pointer; user-select: none; }
.grp-head:hover { color: var(--fg); }
.grp-chev { display: inline-flex; }
.grp-chev .ic { width: 13px; height: 13px; }
.grp-name { font-weight: 600; }
.grp-count { margin-left: auto; background: var(--border); color: var(--fg-dim); border-radius: 10px; padding: 0 7px; font-size: 11px; }

/* 状态点 */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--fg-dim); display: inline-block; }
.dot.st-idle { background: var(--ok); }
.dot.st-working { background: var(--warn); box-shadow: 0 0 0 0 rgba(224,179,65,.6); animation: pulse-w 1.6s infinite; }
.dot.st-waiting { background: var(--danger); box-shadow: 0 0 0 0 rgba(229,83,75,.6); animation: pulse-r 1.4s infinite; }
.dot.st-paused { background: var(--paused); }
.dot.st-closed { background: var(--fg-dim); }
@keyframes pulse-w { 0% { box-shadow: 0 0 0 0 rgba(224,179,65,.5); } 70% { box-shadow: 0 0 0 6px rgba(224,179,65,0); } 100% { box-shadow: 0 0 0 0 rgba(224,179,65,0); } }
@keyframes pulse-r { 0% { box-shadow: 0 0 0 0 rgba(229,83,75,.5); } 70% { box-shadow: 0 0 0 6px rgba(229,83,75,0); } 100% { box-shadow: 0 0 0 0 rgba(229,83,75,0); } }

/* 范围 Tab（我的/全部）*/
.tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.tab { flex: 1; padding: 6px; border: none; background: transparent; color: var(--fg-dim); border-radius: 6px 6px 0 0; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tab:hover { color: var(--fg); }
.tag { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--border); color: var(--fg-dim); flex: 0 0 auto; }
.tag.tag-web { background: var(--accent-dim); color: #fff; }
/* agent 文字/自定义徽章：claude=品牌橙、codex=OpenAI 青绿，一目了然区分。 */
.tag.tag-codex { background: #10a37f; color: #fff; }
.tag.tag-claude { background: #EDAA33; color: #3a2a00; }
#agent-seg .seg-btn[data-agent="codex"].active { background: #10a37f; color: #fff; }
/* agent 品牌 LOGO（标签页/会话栏）：小尺寸、垂直居中；OpenAI 用 currentColor，Claude 自带金色描边。 */
.set-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
/* API 密钥管理 */
.ak-new { display: flex; gap: 8px; margin: 10px 0; }
.ak-new input { flex: 1; }
.ak-reveal { background: var(--bg-elev); border: 1px solid var(--warn); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.ak-warn { color: var(--warn); font-size: 12px; margin-bottom: 6px; }
.ak-plain { display: flex; gap: 8px; align-items: center; }
.ak-plain code { flex: 1; word-break: break-all; font-size: 12px; background: var(--bg); padding: 6px 8px; border-radius: 6px; }
.ak-list { display: flex; flex-direction: column; gap: 6px; }
.ak-item { background: var(--bg-elev); border-radius: 8px; overflow: hidden; }
.ak-row { display: flex; align-items: center; gap: 8px; padding: 8px; }
.ak-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ak-prefix { font-size: 11px; color: var(--fg-dim); }
/* 每 key 操作历史 */
.ak-hist { border-top: 1px solid var(--border); padding: 6px 8px; max-height: 240px; overflow-y: auto; }
.ak-hist-head { font-size: 11px; color: var(--fg-dim); margin-bottom: 4px; }
.ak-hist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 4px; border-radius: 5px; }
.ak-hist-row:nth-child(even) { background: rgba(255,255,255,.03); }
.ak-hist-row.fail { background: rgba(229,83,75,.12); }
.ak-hist-m { font-weight: 700; font-size: 10px; min-width: 50px; color: var(--fg-dim); flex: 0 0 auto; }
.ak-hist-m.m-post { color: #4f8fe0; } .ak-hist-m.m-put { color: #d6a44a; } .ak-hist-m.m-patch { color: #a98be0; } .ak-hist-m.m-delete { color: #e5736b; }
.ak-hist-path { font-family: ui-monospace, monospace; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-hist-sess { color: var(--accent); font-size: 11px; flex: 0 0 auto; max-width: 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-hist-st { font-size: 11px; color: var(--ok); flex: 0 0 auto; }
.ak-hist-row.fail .ak-hist-st { color: var(--danger); }
.ak-hist-t { font-size: 11px; color: var(--fg-dim); flex: 0 0 auto; }
/* 活动 / 在线面板 */
.act-src { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; flex: 0 0 auto; }
.act-src.web { background: var(--accent-dim); color: #fff; }
.act-src.api { background: #8a5cd1; color: #fff; }
.conn-list, .act-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.conn-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg-elev); border-radius: 7px; }
.act-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; }
.act-row:nth-child(odd) { background: var(--bg-elev); }
.act-action { font-family: ui-monospace, monospace; font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-sess { font-size: 11px; color: var(--accent); flex: 0 0 auto; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-time { font-size: 11px; color: var(--fg-dim); flex: 0 0 auto; }
.act-follow-lbl { margin-left: auto; font-size: 12px; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.agent-logo { vertical-align: -1px; flex: 0 0 auto; margin-right: 3px; color: var(--fg); opacity: .92; }
.ptab-title .agent-logo { margin-right: 3px; }
.row1 .agent-logo { margin-right: 3px; }

/* ============ 主区工作台 ============ */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--bg-side); }
.tb-status { flex: 0 0 9px; }
.tb-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.tb-spacer { flex: 1; }
.tb-clock { font-family: Menlo, Consolas, monospace; font-size: 12px; color: var(--fg-dim); white-space: nowrap; user-select: none; }
.icon-btn.on { color: var(--accent); }

/* 通用图标按钮 */
.icon-btn { position: relative; background: none; border: 1px solid transparent; color: var(--fg); cursor: pointer; border-radius: 6px; width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
/* 图标角标（焦点会话有 N 项待处理，如定时/排队 Prompt）。通用、可复用。 */
.icon-badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--bg-side); pointer-events: none; }
.icon-btn:hover { background: var(--bg-elev); }
.icon-btn .ic { width: 17px; height: 17px; }
#tb-reconnect.conn-bad, .icon-btn.conn-bad { color: var(--danger); }

.layout-switch { display: flex; gap: 2px; background: var(--bg); padding: 2px; border-radius: 6px; }
.lbtn { border: none; background: transparent; color: var(--fg-dim); padding: 4px 8px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; }
.lbtn .ic { width: 16px; height: 16px; }
.lbtn.active { background: var(--bg-elev); color: var(--fg); }

.columns { flex: 1; display: grid; gap: 0; background: var(--border); min-height: 0; min-width: 0; overflow: hidden; }
.col { background: var(--bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.col.drag-over { outline: 2px dashed var(--accent-dim); outline-offset: -4px; }
/* 列间可拖拽分隔条 */
.col-resizer { background: var(--border); cursor: col-resize; position: relative; }
.col-resizer::after { content: ''; position: absolute; left: -3px; right: -3px; top: 0; bottom: 0; } /* 加宽命中区域 */
.col-resizer:hover, body.col-resizing .col-resizer { background: var(--accent-dim); }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing iframe, body.col-resizing .xterm { pointer-events: none; } /* 拖动时不被终端吞事件 */
.col-tabs { display: flex; gap: 2px; padding: 5px 6px 0; overflow-x: auto; background: var(--bg-side); border-bottom: 1px solid var(--border); min-height: 34px; }
.col-body { flex: 1; position: relative; min-height: 0; min-width: 0; overflow: hidden; }

/* 列内 Tab */
.ptab { display: flex; align-items: center; gap: 6px; padding: 5px 8px; max-width: 200px; background: var(--bg); color: var(--fg-dim);
  border: 1px solid var(--border); border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.ptab.active { background: var(--bg-elev); color: var(--fg); }
.ptab.focused { box-shadow: inset 0 2px 0 var(--accent); }
.ptab-title { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.ptab-close { border: none; background: none; color: var(--fg-dim); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; }
/* Chrome 式：标签条右侧「+」就地新建会话 */
.ptab-new { flex: 0 0 auto; width: 26px; height: 26px; margin-left: 2px; align-self: center; border: none; background: transparent; color: var(--fg-dim); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ptab-new:hover { background: var(--bg-elev); color: var(--fg); }
.ptab-new .ic { width: 14px; height: 14px; }
.ptab-close .ic { width: 12px; height: 12px; }
.ptab-close:hover { background: var(--border); color: var(--fg); }

/* 面板：列内层叠，仅活动可见。无独立标题栏（标题/控件在顶部工具条）。 */
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* background 跟随终端主题（石墨柔灰 #1a1c22），否则 4px 6px padding 边框露出纯黑与主题底不齐。
   contain：终端每帧重写行 span，把布局/绘制/样式失效限制在面板内（DOM 渲染器最实在的绘制隔离；勿加 size，FitAddon 需内在尺寸测量）。 */
.panel-term { flex: 1; min-height: 0; min-width: 0; overflow: hidden; padding: 4px 6px; background: #1a1c22; touch-action: none; contain: layout paint style; }
.panel-term .xterm { height: 100%; }
/* 暗底代码字体平滑 + 关等宽终端不需要的 kerning/整形/连字（WebGL 下 GPU 光栅化→这些自动 moot 且无害）。 */
.panel-term .xterm, .panel-term .xterm .xterm-rows { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; font-kerning: none; }
.panel-term .xterm .xterm-rows { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.panel-term .xterm-viewport { overscroll-behavior: contain; } /* 触摸滚动不链式冒泡到页面 */
.pb-live { position: absolute; right: 14px; bottom: 14px; z-index: 5; background: var(--accent-dim); color: #fff; border: none; border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* 终端搜索条（Ctrl+F） */
.term-find { position: absolute; top: 8px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.term-find.hidden { display: none; }
.term-find .tf-in { width: 170px; padding: 4px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }
.term-find .iop { width: 26px; height: 26px; }
.pb-live:hover { background: var(--accent); }
.pb-live .ic { width: 13px; height: 13px; }
/* 终端滚动按钮（默认隐藏，悬停终端时浮现；macOS 触控板滚不动 TUI 历史时的显式入口） */
.term-scroll { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.term-scroll.hidden { display: none; }
.panel:hover .term-scroll { opacity: .5; pointer-events: auto; }
.panel:hover .term-scroll:hover { opacity: 1; }
.ts-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--bg-elev, rgba(30,33,40,.9)); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ts-btn:hover { background: var(--accent-dim); color: #fff; border-color: var(--accent-dim); }
.ts-btn:active { background: var(--accent); }
.ts-btn .ic { width: 17px; height: 17px; }

/* 视图切换 */
.view-switch { display: flex; gap: 2px; background: var(--bg); padding: 2px; border-radius: 6px; }
.vbtn { border: none; background: transparent; color: var(--fg-dim); padding: 4px 9px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; }
.vbtn .ic { width: 16px; height: 16px; }
.vbtn.active { background: var(--bg-elev); color: var(--fg); }

.empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--fg-dim); }
.empty-card { text-align: center; }
.empty-title { font-size: 16px; color: var(--fg); margin: 0 0 6px; }
.empty-sub { margin: 0; font-size: 13px; }

/* ============ 对话视图 ============ */
.panel-chat { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.panel-chat.hidden { display: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 860px; width: 100%; align-self: center; min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); margin-bottom: 4px; }
.msg-body { border-radius: 10px; padding: 10px 14px; line-height: 1.6; overflow-wrap: anywhere; }
.msg-user .msg-body { background: #1e2a3a; border: 1px solid #2a3b50; }
.msg-assistant .msg-body { background: var(--bg-elev); border: 1px solid var(--border); }
.msg-meta { opacity: .6; }
.msg-side { border-left: 2px solid var(--accent-dim); padding-left: 8px; }
.blk-text { white-space: normal; word-break: break-word; }
.blk-text + .blk-text { margin-top: 6px; }
.msg-body .code { background: #0d0d0d; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; overflow-x: auto; font-family: Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre; margin: 6px 0; max-height: 360px; }
.msg-body code { background: #0d0d0d; padding: 1px 5px; border-radius: 4px; font-family: Menlo, Consolas, monospace; font-size: 12.5px; }
.msg-body .md-h { margin: 8px 0 4px; font-size: 15px; }
.msg-body a { color: #6cb6ff; }
.blk-think { margin: 6px 0; color: var(--fg-dim); font-size: 13px; }
.blk-think summary { cursor: pointer; }
.blk-tool { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tool-head { background: #1c2733; padding: 6px 10px; font-size: 13px; }
.tool-sum { color: var(--fg-dim); font-family: Menlo, Consolas, monospace; font-size: 12px; }
.tool-detail summary, .blk-result summary { cursor: pointer; padding: 6px 10px; font-size: 12.5px; color: var(--fg-dim); }
.blk-result { margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; }
.blk-result.err { border-color: var(--danger); }
.blk-result .code, .tool-detail .code { margin: 0 10px 10px; max-height: 300px; }
.chat-input { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-side); align-items: flex-end; }
.chat-input textarea { flex: 1; min-width: 0; resize: none; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; line-height: 1.4; max-height: 160px; }
.chat-input textarea:disabled { opacity: .5; }
.chat-note { padding: 6px 14px; color: var(--warn); font-size: 12px; background: var(--bg-side); }

/* ============ 按钮 ============ */
.btn { background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--fg-dim); }
.btn.primary { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }
.btn.primary:hover { background: var(--accent); }
.btn.mini { padding: 3px 10px; font-size: 12px; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ic { width: 15px; height: 15px; }

/* ============ 弹窗 ============ */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-box { background: var(--bg-side); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-box h3 { margin: 0 0 14px; }
.modal-box label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--fg-dim); }
.modal-box input, .modal-box select, .modal-box textarea { width: 100%; margin-top: 5px; padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; }
.modal-box textarea { resize: vertical; }
.confirm-box { width: 400px; }
.confirm-msg { line-height: 1.7; margin-bottom: 6px; }
.confirm-msg .meta, .del-info .meta { color: var(--fg-dim); font-size: 12px; }
.req { color: var(--danger); }
.row2 { display: flex; gap: 10px; }
.row2 label { flex: 1; }
.chk-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg); }
.chk-line input { width: auto; margin: 0; }
.hint { color: var(--fg-dim); font-size: 12px; margin: 6px 0 0; min-height: 16px; }
.err { color: var(--danger); font-size: 12px; min-height: 16px; margin: 4px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.seg { display: flex; gap: 4px; margin-bottom: 14px; background: var(--bg); padding: 3px; border-radius: 8px; }
.seg-btn, .set-seg-btn { flex: 1; padding: 6px; border: none; background: transparent; color: var(--fg-dim); border-radius: 6px; cursor: pointer; font-size: 13px; }
.seg-btn.active, .set-seg-btn.active { background: var(--bg-elev); color: var(--fg); }
.dir-browser { max-height: 160px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.dir-item { padding: 6px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-item:hover { background: var(--bg-elev); }
.del-info { margin-bottom: 14px; line-height: 1.6; }
.purge-line { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--danger); cursor: pointer; }
.purge-line input { width: auto; margin-top: 3px; }

/* 设置·关于 */
.about-body { font-size: 13px; }
.kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); }
.kv span { color: var(--fg-dim); }
.about-foot { margin-top: 14px; text-align: center; color: var(--fg-dim); font-size: 12px; }

/* ============ 登录页 ============ */
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { background: var(--bg-side); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 320px; max-width: 90vw; text-align: center; }
.login-box h2 { margin: 0 0 4px; background: linear-gradient(90deg, var(--accent), #6cc0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-sub { color: var(--fg-dim); font-size: 13px; margin: 0 0 20px; }
.login-box input { width: 100%; padding: 10px 12px; margin-bottom: 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 15px; }
.login-box .brand { display: block; margin-top: 16px; color: var(--fg-dim); font-size: 12px; }
.full { width: 100%; }

/* ============ 移动端按键工具条 ============ */
.keybar { display: none; gap: 4px; padding: 6px; background: var(--bg-side); border-top: 1px solid var(--border); overflow-x: auto; }
.kbtn { flex: 0 0 auto; min-width: 42px; padding: 8px 10px; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; cursor: pointer; }
.kbtn:active { background: var(--accent-dim); }
body.ed-focused .keybar { display: none; }  /* 聚焦文件编辑器时隐藏终端按键条（对文件无意义） */

/* ============ 通知冒泡 toast ============ */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.4); transform: translateY(8px); opacity: 0; transition: transform .25s, opacity .25s; max-width: 360px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.waiting { border-left-color: var(--danger); }
.toast-msg { flex: 1; font-size: 13px; }
.toast-act { background: var(--accent-dim); color: #fff; border: none; border-radius: 5px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.toast-x { background: none; border: none; color: var(--fg-dim); cursor: pointer; padding: 2px; display: inline-flex; }
.toast-x .ic { width: 13px; height: 13px; }
.toast.up-toast { flex-wrap: wrap; }
.up-prog { flex-basis: 100%; height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.up-prog-fill { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .15s linear; }

/* 新建文档到项目 */
.nf-box { width: 600px; max-width: 96vw; }
.nf-box textarea { font-family: Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; min-height: 220px; resize: vertical; }
.nf-box #nf-name { font-family: Menlo, Consolas, monospace; }
.nf-ow { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nf-ow input { width: auto; margin: 0; }

/* ============ 右键菜单 ============ */
.ctxmenu { position: fixed; z-index: 350; min-width: 168px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; background: none; border: none; color: var(--fg); cursor: pointer; border-radius: 6px; font-size: 13px; text-align: left; }
.ctx-item:hover { background: var(--bg-side); }
.ctx-item.danger { color: var(--danger); }
.ctx-item .ic { width: 15px; height: 15px; color: var(--fg-dim); }
.ctx-item.danger .ic { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ============ 快捷键 / 跳转面板 ============ */
.cmd-pop { position: fixed; z-index: 350; width: 300px; max-height: 70vh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.5); padding: 8px; }
.pop-head { font-weight: 600; padding: 4px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pop-sec { margin-bottom: 8px; }
.pop-label { color: var(--fg-dim); font-size: 11px; padding: 4px 8px; }
.pop-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; background: none; border: none; color: var(--fg); cursor: pointer; border-radius: 6px; font-size: 12.5px; text-align: left; }
.pop-item:hover { background: var(--bg-side); }
.pop-item .ic { width: 15px; height: 15px; color: var(--fg-dim); flex: 0 0 15px; }
.pop-key { font-weight: 600; flex: 0 0 auto; }
.pop-desc { color: var(--fg-dim); font-size: 11.5px; margin-left: auto; text-align: right; }

/* 上传弹层 + 拖拽高亮 */
.upload-pop { width: 320px; }
.pop-empty { color: var(--fg-dim); font-size: 12px; padding: 6px 9px; }
.upf-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; }
.upf-row:hover { background: var(--bg-side); }
.upf-row .ic { width: 14px; height: 14px; color: var(--fg-dim); flex: 0 0 14px; }
.upf-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.upf-size { color: var(--fg-dim); font-size: 11px; flex: 0 0 auto; }
.upf-row .iop { width: 24px; height: 24px; }
.panel.drag-over { outline: 2px dashed var(--accent-dim); outline-offset: -6px; }
.panel.drag-over::after { content: '松开以上传到 upload/'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--fg); background: rgba(0,0,0,.45); pointer-events: none; z-index: 20; }

/* ============ 侧栏：会话/文件 模式切换 ============ */
/* 会话/文件 切换：iOS 式分段控件（凹槽容器 + 凸起的活动段），与下方下划线 scope tab 协调不打架 */
.side-modes { display: flex; gap: 2px; margin: 9px 10px 3px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; }
.side-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; background: transparent; color: var(--fg-dim); border: none; border-radius: 6px; cursor: pointer; font-size: 12.5px; transition: background .15s, color .15s; }
.side-mode:hover { color: var(--fg); }
.side-mode.active { background: var(--bg-elev); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.side-mode .sm-ic { display: inline-flex; }
.side-mode .ic { width: 15px; height: 15px; }
.side-mode.active .ic { color: var(--accent); }
.side-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 文件树 */
.files-tree-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; }
.ft-project { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); cursor: pointer; padding: 6px 8px; font-size: 12.5px; }
.ft-project:hover { border-color: var(--fg-dim); }
.ft-project .ic { width: 14px; height: 14px; color: var(--accent); flex: 0 0 14px; }
.ft-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-tree-head .iop { width: 30px; height: 30px; flex: 0 0 auto; }
.files-tree { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 2px 4px 10px; }
.ft-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; cursor: pointer; user-select: none; font-size: 13px; line-height: 1.3; }
.ft-row:hover { background: var(--bg-side); }
.ft-row.active { background: var(--accent-dim); color: #fff; }
.ft-row.active .ft-ic .ic { color: #fff; }
.ft-chev { display: inline-flex; width: 14px; flex: 0 0 14px; color: var(--fg-dim); }
.ft-chev .ic { width: 14px; height: 14px; }
.ft-chev.ft-blank { visibility: hidden; }
.ft-ic { display: inline-flex; flex: 0 0 16px; }
.ft-ic .ic { width: 15px; height: 15px; }
.ft-dir .ft-ic .ic { color: var(--accent); }
.ft-file .ft-ic .ic { color: var(--fg-dim); }
.ft-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-time { flex: 0 0 auto; margin-left: 6px; color: var(--fg-dim); font-size: 11px; opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ft-row:hover .ft-time { opacity: 1; }
.ft-row.active .ft-time { color: rgba(255,255,255,.8); }
.ft-sort { flex: 0 0 auto; max-width: 108px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 11.5px; padding: 5px 4px; cursor: pointer; }
.ft-sort:hover { border-color: var(--fg-dim); }
.ft-disabled { opacity: .5; cursor: default; }
.ft-empty { color: var(--fg-dim); font-size: 12px; padding: 12px 10px; line-height: 1.5; }

/* ============ 文件编辑器面板（主区） ============ */
.panel-ed { background: var(--bg); }
.ed-head { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: var(--bg-side); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
/* 文件所属会话：左侧可点击的小胶囊（终端图标 + 会话名 + ›），点了跳到该终端 —— 体现文件↔进程归属 */
.ed-sess { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 40px; max-width: 38%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg-dim); cursor: pointer; padding: 3px 5px; font-size: 11.5px; }
.ed-sess:hover { color: var(--fg); border-color: var(--accent-dim); }
.ed-sess > .ic:first-child { width: 12px; height: 12px; flex: 0 0 auto; color: var(--accent); }
.ed-sess > .ic:last-child { width: 11px; height: 11px; flex: 0 0 auto; opacity: .55; }
.ed-sess-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ed-head .ed-ic { display: inline-flex; flex: 0 0 auto; }
.ed-head .ed-ic .ic { width: 15px; height: 15px; color: var(--fg-dim); }
.ed-path { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; font-family: Menlo, Consolas, monospace; font-size: 12.5px; }
.ed-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); }
.ed-fname { flex: 0 0 auto; color: var(--fg); }
.ed-dirty { color: var(--warn); font-size: 11px; flex: 0 0 auto; visibility: hidden; }
.panel-ed.is-dirty .ed-dirty { visibility: visible; }
.ed-status { color: var(--fg-dim); font-size: 11.5px; flex: 0 0 auto; white-space: nowrap; }
.ed-head .iop { width: 28px; height: 28px; flex: 0 0 auto; }
.ed-banner { flex: 0 0 auto; padding: 7px 10px; font-size: 12px; background: var(--bg-elev); color: var(--fg-dim); border-bottom: 1px solid var(--border); }
.ed-banner.err { color: var(--danger); }
.ed-body { flex: 1; min-height: 0; display: flex; overflow: hidden; background: var(--bg); }
.ed-gutter { flex: 0 0 auto; overflow: hidden; padding: 8px 6px 8px 10px; text-align: right; color: var(--fg-dim); background: var(--bg-side); border-right: 1px solid var(--border); font-family: Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre; user-select: none; }
.ed-text { flex: 1; min-width: 0; resize: none; border: none; outline: none; padding: 8px 12px; background: var(--bg); color: var(--fg); font-family: Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 2; -webkit-overflow-scrolling: touch; }
.ed-text:disabled { opacity: .6; }

/* 预览（图片/PDF/网页） */
.ed-preview { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; overflow: auto; background: var(--bg); }
.ed-preview.hidden { display: none; }
.pv-img { margin: auto; max-width: 96%; max-height: 96%; object-fit: contain; box-shadow: 0 2px 14px rgba(0,0,0,.4); border-radius: 4px; background: #fff; }
.pv-frame { flex: 1; border: none; background: #fff; }
/* Markdown 可视化阅读：限宽居中、舒适行距；代码块沿用对话视图风格 */
.pv-md { width: 100%; max-width: 860px; margin: 0 auto; padding: 22px 26px 48px; font-size: 14.5px; line-height: 1.75; color: var(--fg); overflow-wrap: break-word; }
.pv-md .md-h { margin: 18px 0 8px; line-height: 1.35; }
.pv-md h1.md-h { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.pv-md h2.md-h { font-size: 18px; }
.pv-md h3.md-h { font-size: 15.5px; }
.pv-md code { background: #0d0d0d; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: Menlo, Consolas, monospace; font-size: 13px; }
.pv-md .code { background: #0d0d0d; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre; margin: 10px 0; }
.pv-md a { color: var(--accent); }

/* 编辑器标签（列内 tab 变体） */
/* 会话标签：终端小图标，颜色随状态（绿=空闲/黄=进行中/红=待确认/灰=关闭），与文件标签的文件图标一眼区分 */
.ptab-tic { display: inline-flex; flex: 0 0 auto; color: var(--fg-dim); }
.ptab-tic .ic { width: 13px; height: 13px; }
.ptab-tic.st-idle { color: var(--ok); }
.ptab-tic.st-working { color: var(--warn); animation: tic-pulse 1.6s infinite; }
.ptab-tic.st-waiting { color: var(--danger); animation: tic-pulse 1.4s infinite; }
.ptab-tic.st-paused { color: var(--paused); }
.ptab-tic.st-closed { color: var(--fg-dim); }
@keyframes tic-pulse { 50% { opacity: .35; } }
/* 文件标签：文件图标(强调色) + 顶部强调线 */
.ptab-ed { border-top: 2px solid var(--accent-dim); }
.ptab-ed.active { border-top-color: var(--accent); }
.ptab-ed .ptab-edic { display: inline-flex; }
.ptab-ed .ptab-edic .ic { width: 13px; height: 13px; color: var(--accent); }
.ptab.dirty .ptab-title::after { content: ' ●'; color: var(--warn); }
.ptab.pip { border-top: 2px solid var(--ok); }   /* 画中画中的会话：顶部绿色强调线 */
.ptab.pip .ptab-tic .ic { color: var(--ok); }

@media (max-width: 820px) { .ed-status { display: none; } }

/* ============ Prompt 任务列表 ============ */
.job-list { margin: 10px 0; max-height: 200px; overflow-y: auto; }
.job-list-title { color: var(--fg-dim); font-size: 12px; margin: 6px 0; }
.job-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--bg); }
.job-info { flex: 1; min-width: 0; }
.job-prompt-prev { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-meta { color: var(--fg-dim); font-size: 11.5px; margin-top: 3px; }

/* ============ 移动端 ============ */
@media (max-width: 820px) {
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: 84vw; flex-basis: 84vw; transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 12px rgba(0,0,0,.4); }
  #app.menu-open #sidebar { transform: translateX(0); }
  #app.sidebar-collapsed #sidebar { width: 84vw; flex-basis: 84vw; border-right: 1px solid var(--border); } /* 移动端忽略桌面折叠 */
  .columns { grid-template-columns: 1fr !important; } /* 移动端强制单列 */
  .layout-switch { display: none; }
  .keybar { display: flex; }
  .ptab-title { max-width: 90px; }
  .tb-title { max-width: 26vw; }
  .tb-clock { display: none; } /* 移动端隐藏时钟省空间 */
  /* 移动端工具条更紧凑、可横向滚动兜底，避免按钮挤爆/被裁切 */
  .toolbar { gap: 3px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .icon-btn { width: 28px; height: 28px; }
  .icon-btn .ic { width: 16px; height: 16px; }
  .vbtn { padding: 4px 6px; }
  /* iOS：输入框字号 <16px 聚焦时会强制放大整页视口，统一提到 16px 防缩放跳动 */
  .modal-box input, .modal-box select, .modal-box textarea,
  .side-search input, .chat-text, .lc-title, .lc-body,
  .term-find .tf-in, .ed-text { font-size: 16px; }
}

/* ===== 开发日志 ===== */
.panel-log { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); }
.panel-log.hidden { display: none; }
.logs-host { min-height: 320px; }
.logs-box { width: 720px; max-width: 96vw; }
.log-composer { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-side); flex: 0 0 auto; }
.lc-row { display: flex; gap: 8px; margin-bottom: 8px; }
.lc-type { flex: 0 0 130px; padding: 7px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.lc-title { flex: 1; min-width: 0; padding: 7px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.lc-body { width: 100%; resize: vertical; padding: 8px 10px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; line-height: 1.5; }
.lc-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lc-cap { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-dim); cursor: pointer; }
.lc-cap input { width: auto; margin: 0; }
.lc-spacer { flex: 1; }
.lc-err { margin: 6px 0 0; }
.log-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.logentry { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-side); }
.logentry.type-plan { border-left: 3px solid var(--accent); }
.logentry.type-milestone { border-left: 3px solid var(--warn); }
.logentry.type-todo { border-left: 3px solid #b06cff; }
.logentry.type-note { border-left: 3px solid var(--fg-dim); }
.logentry.done { opacity: .6; }
.log-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); }
.log-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); }
.log-badge .ic { width: 14px; height: 14px; }
.log-time { margin-left: auto; font-family: Menlo, Consolas, monospace; font-size: 11.5px; }
.log-ops { display: flex; gap: 3px; }
.log-ops .iop { width: 24px; height: 24px; }
.log-ops .iop.on { color: var(--ok); border-color: var(--ok); }
.log-title { font-weight: 600; margin: 6px 0 2px; }
.log-title.done { text-decoration: line-through; }
.log-body { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.log-capture { margin-top: 8px; }
.log-capture summary { cursor: pointer; font-size: 12px; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; }
.log-capture summary .ic { width: 14px; height: 14px; }
.log-capture pre.code { background: #0d0d0d; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; overflow: auto; font-family: Menlo, Consolas, monospace; font-size: 12px; white-space: pre; margin: 6px 0 0; max-height: 320px; }

/* ===== 运行监控 ===== */
.monitor-box { width: 760px; max-width: 96vw; }
.mon-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.mon-head h3 { margin: 0; }
.mon-tabs { display: flex; gap: 4px; }
.mon-tab { background: var(--bg-elev); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.mon-tab:hover { color: var(--fg); }
.mon-tab.active { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }
.mon-body { min-height: 200px; max-height: 70vh; overflow-y: auto; }
.btn.sm { padding: 3px 9px; font-size: 12px; line-height: 1; }
.btn.sm .ic { width: 13px; height: 13px; }

.mon-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; margin-bottom: 10px; }
.mon-card.rmt.err { border-color: var(--danger); }
.mon-card-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mon-card-h .ic { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.mon-card-h b { font-size: 14px; }
.mon-host { font-family: Menlo, Consolas, monospace; font-size: 12px; color: var(--accent); }
.mon-sub { color: var(--fg-dim); font-size: 12px; }
.mon-sub2 { color: var(--fg-dim); font-size: 11.5px; margin-top: 6px; }
.mon-sub2.err { color: var(--danger); }
.mon-x { margin-left: auto; background: none; border: none; color: var(--fg-dim); cursor: pointer; padding: 2px; display: inline-flex; }
.mon-x:hover { color: var(--danger); }
.mon-x .ic { width: 15px; height: 15px; }

.mon-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 9px; }
.mon-metric { display: flex; align-items: center; gap: 8px; }
.mon-k { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-dim); min-width: 48px; flex: 0 0 auto; }
.mon-k .ic { width: 13px; height: 13px; }
.mbar { position: relative; flex: 1; height: 18px; background: var(--bg-elev); border-radius: 4px; overflow: hidden; min-width: 90px; }
.mbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width .4s; }
.mbar-fill.lo { background: var(--ok); } .mbar-fill.mid { background: var(--warn); } .mbar-fill.hi { background: var(--danger); }
.mbar-lab { position: absolute; left: 7px; top: 0; line-height: 18px; font-size: 11px; color: var(--fg); text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
.mon-disks, .mon-gpus { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mon-disk, .mon-gpu { display: flex; align-items: center; gap: 8px; }
.mon-disk-p, .mon-gpu-name { font-size: 12px; color: var(--fg-dim); min-width: 60px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 auto; }
.mon-gpu .ic { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.mon-gpu-m { flex: 1; display: flex; } .mon-gpu-t { font-size: 11px; color: var(--fg-dim); }

.rmt-add { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.rmt-add input { width: auto; flex: 1; margin: 0; }
.rmt-add #rmt-name { flex: 0 0 110px; } .rmt-add #rmt-note { flex: 0 0 120px; }

.ag-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; flex: 0 0 auto; }
.ag-badge.live { background: rgba(41,183,101,.18); color: var(--ok); border: 1px solid var(--ok); }
.ag-badge.old { background: var(--bg-elev); color: var(--fg-dim); border: 1px solid var(--border); }
.ag-intent { font-size: 13px; margin-top: 7px; }
.ag-detail { font-size: 12.5px; color: var(--fg-dim); margin-top: 4px; }
.ag-event { font-size: 12px; margin-top: 7px; background: var(--bg-elev); border-radius: 6px; padding: 6px 9px; line-height: 1.5; overflow-wrap: anywhere; }
.ag-at { color: var(--fg-dim); font-size: 11px; margin-left: 6px; }
.ag-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ag-foot .mon-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-family: Menlo, Consolas, monospace; }

.tk-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.tk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--fg-dim); }
.tk-completed .tk-dot { background: var(--ok); } .tk-in_progress .tk-dot { background: var(--warn); animation: pulse-w 1.6s infinite; } .tk-pending .tk-dot { background: var(--fg-dim); }
.tk-sub { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-completed .tk-sub { color: var(--fg-dim); text-decoration: line-through; }
.tk-st { font-size: 11px; color: var(--fg-dim); flex: 0 0 auto; }

.usg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin: 10px 0; }
.usg-grid > div { display: flex; flex-direction: column; }
.usg-grid b { font-size: 15px; }
.usg-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.usg-tbl th { text-align: right; color: var(--fg-dim); font-weight: 500; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.usg-tbl th:first-child, .usg-tbl td:first-child { text-align: left; }
.usg-tbl td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.usg-cost { color: var(--ok); font-weight: 600; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 6px 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.spark-bar { flex: 1; background: var(--accent-dim); border-radius: 2px 2px 0 0; min-height: 3px; }
.spark-bar:hover { background: var(--accent); }
.lim-card { border-color: var(--accent-dim); }
.lim-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lim-k { font-size: 12.5px; color: var(--fg-dim); flex: 0 0 86px; }
.lim-row .mbar { height: 20px; }
.lim-reset { font-size: 11px; color: var(--fg-dim); flex: 0 0 auto; white-space: nowrap; }

/* 角落电量指示器（订阅 5 小时剩余）：电池横排，剩余% 显示在电池内部(iPhone 风格)，重置倒计时在右侧 */
.tb-batt { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; cursor: pointer; user-select: none; line-height: 1; }
.batt-reset { font-size: 11px; color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-batt .batt { display: inline-flex; align-items: center; }
.batt-body { position: relative; width: 40px; height: 17px; border: 1.5px solid var(--fg-dim); border-radius: 3px; overflow: hidden; box-sizing: border-box; }
.batt-fill { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; border-radius: 1.5px; transition: width .5s, background .3s; }
.batt-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.75); z-index: 1; }
.batt-cap { width: 2.5px; height: 7px; background: var(--fg-dim); border-radius: 0 2px 2px 0; margin-left: 1px; }
.tb-batt.ok .batt-fill { background: var(--ok); }
.tb-batt.low .batt-fill { background: var(--warn); }
.tb-batt.crit .batt-fill { background: var(--danger); animation: pulse-r 1.4s infinite; }
.tb-batt.ok .batt-body { border-color: var(--ok); }
.tb-batt.low .batt-body { border-color: var(--warn); }
.tb-batt.crit .batt-body { border-color: var(--danger); }
.tb-batt.ok .batt-reset { color: var(--ok); } .tb-batt.low .batt-reset { color: var(--warn); } .tb-batt.crit .batt-reset { color: var(--danger); }
.tb-batt.off { opacity: .5; }
/* 缓存(stale)电量：中性灰填充、灰边框、灰倒计时——不套绿/黄/红，明确"非实时"。
   填充用浅灰而非纯白，以免与内部白色百分比文字撞色不可读。 */
.tb-batt.stale { opacity: .85; }
.tb-batt.stale .batt-fill { background: var(--fg-dim); animation: none; }
.tb-batt.stale .batt-body { border-color: var(--fg-dim); }
.tb-batt.stale .batt-reset { color: var(--fg-dim); }
.tb-batt:hover { filter: brightness(1.15); }
@media (max-width: 560px) { .batt-reset { display: none; } }

/* ---- dev 服务预览（分栏·右；iframe 走分享域，与控制台跨站隔离）---- */
.panel-split { flex: 1; display: flex; flex-direction: row; min-height: 0; min-width: 0; }
.panel-splitter { flex: 0 0 6px; width: 6px; cursor: col-resize; background: var(--border); }
.panel-splitter:hover { background: var(--accent-dim); }
.panel-splitter.hidden { display: none; }
.panel-preview { display: flex; flex-direction: column; width: 45%; min-width: 220px; background: var(--bg); border-left: 1px solid var(--border); }
.panel-preview.hidden { display: none; }
.pv-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--bg-side); border-bottom: 1px solid var(--border); }
.pv-bar .pv-sp { flex: 1; }
.pv-bar .iop { flex: 0 0 auto; }
.pv-bar .pv-share { width: auto; padding: 0 8px; font-size: 12px; color: var(--accent); }
.pv-port { flex: 0 1 auto; max-width: 150px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; padding: 3px 4px; }
.pv-body { flex: 1; position: relative; min-height: 0; background: #fff; }
.pv-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.pv-hint { position: absolute; left: 8px; right: 8px; bottom: 8px; background: var(--bg-side); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.pv-hint code { background: var(--bg); padding: 1px 4px; border-radius: 3px; }
.pv-hint.hidden { display: none; }
/* 拖分隔条期间禁用 iframe 指针事件，否则鼠标移进 iframe 会丢失 mousemove（卡住拖动）。 */
.col-resizing .pv-frame { pointer-events: none; }

/* dev 预览：移动端上下堆叠（U6）——窄屏左右分栏会把终端挤到不可用，改为终端在上、预览在下、全宽 */
.pv-link { width:100%; margin-top:6px; background:#0d0f13; color:#e6e6e6; border:1px solid #323641; border-radius:4px; font-size:12px; padding:4px; }
.pv-hint a { color:#3b9eff; }
@media (max-width: 640px) {
  .panel-split { flex-direction: column; }
  .panel-preview { width: 100% !important; height: 55%; min-width: 0; border-left: 0; border-top: 1px solid #323641; }
  .panel-splitter { width: 100%; height: 6px; cursor: row-resize; flex: 0 0 6px; }
}

/* ———— copartner：同屏分享 ———— */
.cop-box { width: 520px; }
.cop-live { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 12px;
  background: rgba(41,183,101,.1); border: 1px solid rgba(41,183,101,.35); border-radius: 8px; font-size: 13px; }
.cop-live .spacer { flex: 1; }
.cop-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: cop-blink 1.4s ease-in-out infinite; }
.cop-live.controlling { background: rgba(229,83,75,.1); border-color: rgba(229,83,75,.4); }
.cop-live.controlling .cop-dot { background: var(--danger); }
@keyframes cop-blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.cop-result { margin: 12px 0; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.cop-link-row { display: flex; gap: 8px; }
.cop-link-row input { flex: 1; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.cop-link-row .btn { flex: 0 0 auto; }
.cop-pin-row { margin-top: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.cop-pin-row b { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 3px; color: var(--accent); user-select: all; }
.cop-pin-row .btn { padding: 3px 10px; font-size: 12px; }
.cop-pin-row .hint { margin: 0; }
.cop-list { margin-top: 6px; max-height: 190px; overflow-y: auto; }
.cop-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-dim); }
.cop-item .cop-i-main { flex: 1; min-width: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cop-item .tag { padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; }
.cop-item .tag.ctl { color: var(--danger); border-color: rgba(229,83,75,.4); }
.cop-item .tag.view { color: var(--ok); border-color: rgba(41,183,101,.4); }
.cop-item .tag.on { color: var(--accent); border-color: rgba(59,158,255,.5); }

/* 工具栏「共享中」指示（点击直接打开面板） */
#tb-copartner.sharing { color: var(--ok); }
#tb-copartner.controlled { color: var(--danger); }

/* 被查看/被控制：整屏呼吸边框 + 外发光（不吃鼠标事件） */
.cop-frame { position: fixed; inset: 0; z-index: 9999; pointer-events: none; border: 3px solid transparent; border-radius: 4px; }
.cop-frame.watching { border-color: rgba(41,183,101,.85); animation: cop-glow-g 2s ease-in-out infinite; }
.cop-frame.controlling { border-color: rgba(229,83,75,.9); animation: cop-glow-r 1.1s ease-in-out infinite; }
@keyframes cop-glow-g {
  0%,100% { box-shadow: inset 0 0 12px rgba(41,183,101,.35), 0 0 10px rgba(41,183,101,.5); }
  50%     { box-shadow: inset 0 0 30px rgba(41,183,101,.75), 0 0 26px rgba(41,183,101,.9); }
}
@keyframes cop-glow-r {
  0%,100% { box-shadow: inset 0 0 14px rgba(229,83,75,.45), 0 0 12px rgba(229,83,75,.6); }
  50%     { box-shadow: inset 0 0 34px rgba(229,83,75,.9), 0 0 30px rgba(229,83,75,1); }
}

/* Copartner 弹窗：折叠的「更多安全选项」+ 当前标签页提示 */
.cop-more { margin: 4px 0 2px; }
.cop-more > summary { cursor: pointer; color: var(--fg-dim); font-size: 13px; padding: 4px 0; list-style: none; user-select: none; }
.cop-more > summary::before { content: '▸ '; }
.cop-more[open] > summary::before { content: '▾ '; }
.cop-more > summary:hover { color: var(--fg); }
.cop-more > label { margin-top: 8px; }
.cop-tabhint { border-left: 2px solid var(--accent-dim); padding-left: 8px; }