/* 文件用途：工作台页面（View 制品）的版式 —— 顶部身份与端点灯、Tab 条、内容帧 / 源码编辑器、右侧对话弹窗。
   设计意图：与旧视图共用 `tokens.css` 的配色与字体（不另立一套视觉），只加工作台自己的骨架：
   竖向三段（顶栏 / Tab 条 / 舞台）+ 舞台左右分栏（内容 + 对话），窄屏下对话变成整屏覆盖层
   —— 版式抄平台旧工作台的形态（多 Tab + 右侧对话窗），但这里是自包含的一页，不依赖平台任何样式。
   尺寸上有一条硬约束：**整页高度按视口有界**（`height:100vh`），会话区在**自己那块**里滚动
   —— 真机踩过 `min-height:100vh` + 无上限的会话区：60 条消息把整页撑到 4351px，配置卡片跟着掉到屏幕外。 */

.wb {
  display: flex;
  flex-direction: column;
  /* 有界（不是 min-height）：`min-height` 只保证"至少一屏"，内容一多整页照样无限变长，
     而"整页在长"意味着会话区永远滚不到顶、贴底的入口也永远在屏幕外。 */
  height: 100vh;
  overflow: hidden;
}

/* —— 顶栏 —— */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--outline);
}
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-light); color: var(--primary-dark); font-weight: 600;
}
.who-text { display: flex; flex-direction: column; min-width: 0; }
.who-text strong { font-size: 14px; }
.who-meta { color: var(--text2); font-size: 12px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--outline); background: var(--paper); color: var(--text);
}
.btn:hover { background: var(--hover); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { color: var(--error); border-color: var(--error); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.lamp {
  font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--outline); background: var(--container); color: var(--text2);
}
.lamp.ok { color: var(--success); border-color: var(--success); background: var(--success-l); }
.lamp.warn { color: var(--warn-d); border-color: var(--warn); background: var(--warn-l); }
/* 已配置、当前没有连接：**不是错**（下次对话会自动连），所以不跟失败同色。 */
.lamp.idle { color: var(--text2); border-color: var(--outline); background: var(--container); }
.lamp.bad { color: var(--error); border-color: var(--error); background: var(--error-l); }

.notice, .banner { margin: 8px 16px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.notice { background: var(--info-l); color: #1b4b73; }
.notice.error { background: var(--error-l); color: var(--error); }
.banner { background: var(--warn-l); color: var(--warn-d); }

/* —— 页面自己的"问一句" ——
   宿主把这一页放进 iframe 时给的沙箱是 `allow-scripts allow-same-origin allow-forms`
   —— **没有 `allow-modals`** ⇒ 浏览器原生 `prompt`/`confirm` 在这里只会被丢弃
   （`prompt` 返回 null、`confirm` 返回 false），调用点看起来就是"点了没反应"。
   所以"问一句"由页面自己出：sticky 让它紧贴顶栏下方，点完按钮就看得见。 */
.ask {
  position: sticky; top: 0; z-index: 4;
  margin: 8px 16px 0; padding: 10px 12px; border: 1px solid var(--primary); background: var(--paper); border-radius: 8px;
}
.ask[hidden] { display: none; }
.ask-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ask-note { margin: 0 0 6px; font-size: 12px; color: var(--text2); }
.ask-note[hidden] { display: none; }
.ask-input {
  width: 100%; max-width: 480px; padding: 7px 9px; border: 1px solid var(--outline);
  border-radius: 8px; font: inherit; font-size: 13px; color: var(--text);
}
.ask-input[hidden] { display: none; }
.ask-actions { margin-top: 8px; display: flex; gap: 8px; justify-content: flex-end; }

/* —— Tab 条 —— */
.tabs {
  display: flex; align-items: stretch; gap: 4px; overflow-x: auto;
  padding: 8px 16px 0; border-bottom: 1px solid var(--outline); background: var(--surface);
}
.tab {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 10px; border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; background: transparent; color: var(--text2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.tab[aria-selected='true'] { background: var(--paper); border-color: var(--outline); color: var(--text); font-weight: 600; }
.tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.tab[data-status='active'] .tab-dot { background: var(--success); }
.tab[data-status='thinking'] .tab-dot { background: var(--warn); }
.tab[data-status='lost'] .tab-dot { background: var(--error); }
.tab .tab-x { border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 13px; padding: 0 2px; }
.tab .tab-x:hover { color: var(--error); }
/* 拖拽反馈：被拖的那颗半透明（它还在原位，松手才真的动），落点用左边一道竖线示意插在哪。 */
.tab[data-dragging='1'] { opacity: .45; }
.tab[data-dragging='1']:active { cursor: grabbing; }
.tab[data-drop-before='1'] { box-shadow: inset 2px 0 0 var(--primary); }
/* 就地改名的输入框：尺寸贴着页签本身，替掉那行标题而不改变条高。 */
.tab .tab-rename {
  min-width: 60px; width: 8em; padding: 1px 4px;
  border: 1px solid var(--primary); border-radius: 4px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--paper);
}
.tabs-empty { color: var(--text2); font-size: 13px; padding: 6px 2px 10px; }

/* —— 舞台 —— */
.stage { flex: 1; display: flex; min-height: 0; background: var(--bg); }
.stage-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stage-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--outline); background: var(--paper);
}
.stage-hint { color: var(--text2); font-size: 12px; }
.stage-actions { margin-left: auto; display: flex; gap: 6px; }
.frame { flex: 1; width: 100%; border: 0; background: #fff; }
.frame[hidden] { display: none; }
.empty { padding: 32px 16px; color: var(--text2); }
.empty h2 { margin: 0 0 6px; font-size: 16px; color: var(--text); }

.split { width: 6px; cursor: col-resize; background: var(--container); }
.split:hover { background: var(--primary-light); }
/* `hidden` 属性对 `display:flex` 的元素不生效（作者样式压过 UA 的 `[hidden]`）⇒ 收起时必须显式关掉，
   否则"收起了"只是看不见右边那一栏、而它仍然占着宽度。 */
.split[hidden] { display: none; }

/* —— 对话 —— */
.chat { display: flex; flex-direction: column; width: 380px; min-width: 260px; background: var(--paper); border-left: 1px solid var(--outline); }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--outline); }
.chat-title { font-weight: 600; font-size: 13px; }
.chat-session { color: var(--text3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 对话窗自己的状态行：已连接 / 未连接 / agent 正在处理这一轮…（与顶栏那盏灯分工不同 ——
   灯说的是端点，这条说的是"这个对话窗现在能不能发"）。 */
.chat-state { flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--container); color: var(--text2); }
.chat-state[data-state="ok"] { color: var(--success); background: var(--success-l); }
.chat-state[data-state="busy"] { color: var(--warn-d); background: var(--warn-l); }
/* 两个按钮一组靠右（「加载更早」与「停止」）：分组之后 `margin-left:auto` 只作用在组上，不互相顶开 */
.chat-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 会话区：**有界 + 内滚**（形态照 DSH 讨论会话面板 `.tcs-log`：min-height 保证空会话不塌成一条线，
   max-height 保证长会话不去撑页面，超了在这一块里滚）。 */
.chat-log { flex: 1; min-height: 180px; max-height: 52vh; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }

/* —— 消息行：形状与 DSH 的讨论会话面板逐条一致 ——
   agent 左对齐、前面一枚圆形首字头像（面板是"我 vs 对面一个 agent"的一对一空间，没有头像就看不出
   谁在说话）；用户右对齐、只有气泡。两侧都带时间（面板是异步的，没有时间就分不清"什么时候说的"）。 */
.msg-row { display: flex; gap: 8px; align-items: flex-start; }
.msg-row.me { justify-content: flex-end; }
.msg-avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--primary-light); color: var(--primary-dark);
}
.msg-col { min-width: 0; max-width: 88%; display: flex; flex-direction: column; gap: 2px; }
.msg-row.me .msg-col { align-items: flex-end; }
.msg-meta { font-size: 11px; color: var(--text3); }
.msg-bubble { font-size: 13px; line-height: 1.6; word-break: break-word; }
/* 用户自己的话走纯文本气泡：底色 + 圆角（`pre-wrap` 保留他自己打的换行）。 */
.msg-me {
  background: var(--primary-light); color: var(--primary-dark);
  padding: 6px 10px; border-radius: 12px; white-space: pre-wrap;
}
/* agent 的正文**不要气泡底色**（与 codearts 的 `.rt-out` 同一个判断）：正文里会有表格与代码块，
   套一层底色只会让阅读排版变脏。 */
.msg-agent { color: var(--text); }

/* —— 正文渲染（markdown + 公式）：刻度照抄 codearts 的 `.rt-rich` 一族 ——
   **必须关掉 `pre-wrap`**：块级元素（段落/表格/列表）之间本来就靠 CSS 留白，再保留换行符会多出一堆空行。
   表格要能横向滚动（窄视口不撑破布局）；代码块里的 `code` 不再重复留白与底色（外层 `pre` 已经给了）。 */
.msg-agent { white-space: normal; }
.msg-agent > :first-child { margin-top: 0; }
.msg-agent > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 10px; }
.md-h { margin: 18px 0 8px; font-size: 1.02em; line-height: 1.45; font-weight: 600; }
.md-list { margin: 0 0 10px; padding-left: 22px; }
.md-quote { margin: 0 0 10px; padding: 4px 15px; border-left: 3px solid var(--outline); color: var(--text2); }
.msg-agent code {
  padding: 1px 5px; border-radius: 4px; background: var(--container);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em;
}
.md-code {
  margin: 0 0 10px; padding: 16px; border: 1px solid var(--outline); border-radius: var(--radius, 8px);
  background: var(--container); overflow-x: auto; max-width: 100%;
}
.md-code code { padding: 0; background: none; font-size: 0.9em; white-space: pre; }
/* 表格：外面套一层可横滚的壳，窄视口不把页面撑破（与 codearts 的 `.rt-table-wrap` 同形）。 */
.md-table-wrap { margin: 0 0 10px; overflow-x: auto; max-width: 100%; }
.md-table { border-collapse: collapse; font-size: 0.95em; min-width: 100%; }
.md-table th, .md-table td { padding: 6px 10px; border: 1px solid var(--outline); text-align: left; vertical-align: top; }
.md-table th { background: var(--container); font-weight: 600; }
.md-table [data-align="right"] { text-align: right; }
.md-table [data-align="center"] { text-align: center; }
/* 公式：真公式（MathML 自己排版）与降级源码用不同的 class —— 等宽字体不能挂在共同容器上，
   否则会把真公式的数学字体顶成等宽、整体塌成一小撮。 */
.md-math { display: inline-block; }
.md-math-block { display: block; margin: 0 0 10px; overflow-x: auto; }
.md-math-src {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em; color: var(--text2);
}

/* —— 思考块：**默认收起**（原生 `<details>`，不设 `open`）——
   形状照 DSH 的讨论会话面板：`<summary>` 头（标签 + 一行摘要）+ 展开后的正文块。展开/收起是浏览器
   行为，页面零脚本；它只活在**这一轮的流**里（服务端不落盘）：刷新后不再显示。 */
.step { font-size: 12px; line-height: 1.6; color: var(--text2); }
.step-head {
  display: flex; align-items: center; gap: 6px; min-height: 28px;
  cursor: pointer; list-style: none;
}
.step-head::-webkit-details-marker { display: none; }
.step-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.step-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 6px; background: var(--container); color: var(--text2); }
.step-text { min-width: 0; overflow-wrap: anywhere; }
/* 展开后的正文：多行原样显示；高了只在**这一块**里滚动，不把对话窗拉长。 */
.step-body { max-height: 40vh; overflow: auto; padding-bottom: 4px; }
.step-body .step-text { display: block; white-space: pre-wrap; }
/* 系统提示：**常显**的一行灰字（不占消息位、不可展开）—— 与思考/工具那种可收起的块区分开。 */
.step-notice { display: flex; align-items: baseline; gap: 6px; }
/* 工具调用行：与思考块同形（可展开看参数），但正文是 `pre` 里的 JSON。 */
.step-args {
  margin: 0; padding: 6px 8px; max-height: 32vh; overflow: auto; border-radius: 6px;
  background: rgba(0, 0, 0, .05); font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all;
}
.chat-hint { margin: 0; padding: 6px 12px; border-top: 1px solid var(--outline); color: var(--text2); font-size: 12px; background: var(--surface); }
.chat-input { display: flex; gap: 6px; align-items: flex-end; padding: 8px 12px; border-top: 1px solid var(--outline); }
.chat-input textarea {
  /* `min-width: 0` 是必须的：flex 子项的 `min-width` 默认是 `auto`（取内容宽度），
     长句会把输入框顶宽、把旁边那颗圆钮挤出面板。 */
  flex: 1; min-width: 0; resize: none; min-height: 34px; max-height: 160px; padding: 7px 9px;
  border: 1px solid var(--outline); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text);
  overflow-y: auto;
}
.chat-input textarea:disabled { background: var(--container); color: var(--text3); }

/* 发送 / 停止是**同一颗圆钮**（照 DSH 讨论面板）：圆形、无文字、图标由脚本内联 SVG 画进来。
   `flex: none` 让它不被输入框的 `flex: 1` 压扁；尺寸固定 34px 与输入框最小高度对齐。 */
.chat-input .send {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--primary); background: var(--primary); color: #fff;
  cursor: pointer;
}
.chat-input .send:disabled { border-color: var(--outline); background: var(--container); color: var(--text3); cursor: not-allowed; }
/* 停止态用描边而不是实心：它是**打断**，视觉上不该比发送更"该按"。 */
.chat-input .send[data-mode='stop'] { background: var(--surface); border-color: var(--error); color: var(--error); }
.chat-input .send:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-input .send .send-icon { width: 18px; height: 18px; display: block; }

/* 权限确认条在**页面级**（不在可收起的对话窗里）：sticky 让它在滚到下面时也仍然看得见 ——
   它是这一轮唯一的人闸，够不着就等于整轮永久挂住。 */
.perm {
  position: sticky; top: 0; z-index: 3;
  margin: 8px 16px 0; padding: 10px; border: 1px solid var(--warn); background: var(--warn-l); border-radius: 8px;
}
.perm[hidden] { display: none; }
.perm-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--warn-d); }
.perm-tool { margin: 0; font-size: 13px; }
.perm-args {
  margin: 6px 0; max-height: 120px; overflow: auto; padding: 6px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .05); font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all;
}
.perm-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* —— 端点配置卡片 ——
   与 `.ask` 同一套"页面内就地卡片"：sticky 贴在第一屏、`hidden` 显式兜底（CSP 是 style-src self，
   所以是外链样式表里的一条规则，页面零内联样式）。它必须**在 Tab 条之前**：位置在页面最底下时，
   会话区一长（真机实测整页 4351px）点灯就是"在屏幕外打开"，用户看到的是"点了没反应"。 */
.drawer {
  position: sticky; top: 0; z-index: 3;
  margin: 8px 16px 0; border: 1px solid var(--primary); border-radius: 8px;
  background: var(--surface); padding: 12px 16px 16px;
}
.drawer[hidden] { display: none; }
.drawer h2 { margin: 0 0 4px; font-size: 14px; }
.drawer-note { margin: 0 0 10px; color: var(--text2); font-size: 12px; }
.drawer-note code { background: var(--container); padding: 1px 4px; border-radius: 4px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 12px; color: var(--text2); max-width: 640px; }
.field input { padding: 7px 9px; border: 1px solid var(--outline); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); }
.drawer-actions { display: flex; gap: 8px; }
.drawer-out { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--container); font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
.drawer-out[hidden] { display: none; }

/* —— 窄屏：对话变成整屏覆盖层，Tab 条横向滚动 —— */
@media (max-width: 720px) {
  .stage { flex-direction: column; overflow-y: auto; }
  .split { display: none; }
  .chat { width: 100%; min-width: 0; border-left: 0; border-top: 1px solid var(--outline); max-height: 60vh; }
  .chat-log { max-height: 40vh; }
  .top { flex-wrap: wrap; gap: 8px; }
  .who-meta { display: none; }
}