/* 由 tools/sync-kimpoai-ui.mjs 生成，勿手改。来源：Kimpo c05b7fc55 apps/web-next/src/features/kimpoai/panel
 *   workbench/tokens.css  sha256:be3c60098d91
 *   workbench/MessageStream.vue  sha256:a962623e86a3
 *   workbench/Composer.vue  sha256:a318ec10f509
 *   workbench/HomeHero.vue  sha256:814b5bddb39b
 *   workbench/EmptyConversation.vue  sha256:f8bbc4eda3e4
 *   workbench/TurnProgressCard.vue  sha256:83042121a491
 *   workbench/CreateSidebar.vue  sha256:012cb7195a4c
 *   workbench/ToastHost.vue  sha256:21bce0d89866
 *   workbench/cards/CardShell.vue  sha256:1e4cb9e38188
 *   workbench/cards/ErrorCardView.vue  sha256:fc779bf327ff
 *   workbench/cards/QuestionGroupCardView.vue  sha256:6261090415b6
 */
/* ==== workbench/tokens.css ==== */
/* KimpoAI 工作台设计令牌 v5（I-1127 HDL-35 token 迁移，Figma node 3445:68235/3449:71997）：
 * 插件自带的 --kai-primary 紫色主色系及其派生已退役，改为映射宿主 CSS 变量（见
 * docs/design/teyvat-ui-spec.md §九「变量清单」），写法统一 `rgb(var(--host-var, R G B))`——
 * 宿主环境跟随主题色（明/暗），插件独立预览（脱离宿主单独跑）时用括号里的缺省值兜底。
 *
 * 【硬约束】变量名（--kai-xxx）本身不改——26 个文件在消费，只改这份文件里赋的值；
 * 本次迁移之后，插件前端不得再新增任何 --kai-* 变量，新样式一律直接换算宿主变量或复用本文件
 * 已有的名字。
 *
 * 映射表（左=本文件旧值语义，右=宿主变量）：
 *   primary/-soft/-ink   → --primary-color / --primary-50-color / --primary-600-color
 *   ink                  → --base-text-color；ink-2/muted 均 → --text-secondary-color
 *   （宿主只有「主/次/提示」三档文字色，原四档 ink-2 与 muted 合并映射到同一档，见下方注）
 *   muted-2              → --text-hint-color
 *   line                 → --border-lighter-color；line-2 → --border-light-color
 *   surface-2            → --fill-lightest-color；bg → --layout-bg-color；surface 不变（容器白底）
 *   warn/ok/err          → --warning-color/--success-color/--error-color（各自 -soft 取同色系
 *                          更浅一阶，-ink/-border 取更深/更浅一阶，宿主每个功能色都带 11 阶 ramp）
 *   info                 → --info-color（本卡按任务书要求取提示灰 #909399 语义，不是品牌蓝）
 *
 * 上下文用量分段色（--kai-ctx-*，仅 TechStats 悬停浮层用）与圆角/间距/阴影/消息列宽度类令牌
 * 不在本次迁移范围内，原样保留（其语义是"分类区分度"而非"跟随主题"，见 TechStats.vue 头注）。
 *
 * 深色模式：宿主变量本身自带明暗两套值（见 teyvat-ui-spec.md），插件跟随宿主自动切换，
 * 不需要本文件再写 @media (prefers-color-scheme) 分支。 */
:root {
  /* 基础色 */
  --kai-bg: rgb(var(--layout-bg-color, 247 250 252));
  --kai-surface: rgb(var(--container-bg-color, 255 255 255));
  --kai-surface-2: rgb(var(--fill-lightest-color, 250 252 255));
  --kai-line: rgb(var(--border-lighter-color, 235 238 245));
  --kai-line-2: rgb(var(--border-light-color, 228 231 237));
  --kai-ink: rgb(var(--base-text-color, 31 31 31));
  --kai-ink-2: rgb(var(--text-secondary-color, 102 102 102));
  --kai-muted: rgb(var(--text-secondary-color, 102 102 102));
  --kai-muted-2: rgb(var(--text-hint-color, 153 153 153));

  /* 主色：品牌蓝，取代退役的插件自有紫色主色（HDL-35） */
  --kai-primary: rgb(var(--primary-color, 8 119 244));
  --kai-primary-soft: rgb(var(--primary-50-color, 230 246 255));
  --kai-primary-ink: rgb(var(--primary-600-color, 7 85 209));

  /* 卡片语义色：橙=确认/等你决定，绿=结果/报告，蓝=进度/取数/表格，紫=蓝图/交接（用主色），红=错误，灰=提示 */
  --kai-warn: rgb(var(--warning-color, 230 162 60));
  --kai-warn-soft: rgb(var(--warning-50-color, 252 243 231));
  --kai-warn-ink: rgb(var(--warning-600-color, 154 91 0));
  --kai-warn-border: rgb(var(--warning-200-color, 240 201 138));

  --kai-ok: rgb(var(--success-color, 103 194 58));
  --kai-ok-soft: rgb(var(--success-50-color, 240 249 235));

  --kai-info: rgb(var(--info-color, 144 147 153));
  --kai-info-soft: rgb(var(--info-50-color, 244 244 245));

  --kai-err: rgb(var(--error-color, 232 79 79));
  --kai-err-soft: rgb(var(--error-50-color, 253 235 235));
  --kai-err-border: rgb(var(--error-200-color, 239 184 184));

  --kai-notice: rgb(var(--text-secondary-color, 102 102 102));
  --kai-notice-soft: rgb(var(--fill-lightest-color, 250 252 255));

  /* 圆角与间距 */
  --kai-radius-card: 10px;
  --kai-radius-control: 6px;
  --kai-radius-pill: 999px;
  --kai-gap-xs: 4px;
  --kai-gap-sm: 8px;
  --kai-gap-md: 12px;
  --kai-gap-lg: 16px;

  /* 消息流宽度约束：消息列与输入框在宽屏下居中并封顶宽度；气泡按内容自适应、卡片随列宽流式伸缩，
   * 均以最小/最大宽度约束，不写死固定宽度（特定场景如抽屉、缩略图除外）。 */
  --kai-chat-column-max: 880px; /* 消息列 + 输入框的最大宽度 */
  --kai-bubble-min: 48px;       /* 气泡最小宽度：极短文本（如"好"）不缩成一个点 */
  --kai-bubble-max: 85%;        /* 气泡最大宽度：相对消息列，给对侧留出呼吸空间 */
  --kai-card-min: 320px;        /* 卡片最小宽度：窄于此时退回列宽（见 min() 用法） */
  --kai-card-max: 760px;        /* 卡片最大宽度：避免宽屏下卡片被拉成长条 */

  /* 阴影 */
  --kai-shadow-card: 0 1px 2px rgba(28,33,48,0.04);
  --kai-shadow-emphasis: 0 0 0 3px; /* 用法：box-shadow: var(--kai-shadow-emphasis) var(--kai-warn-soft) 这类，emphasis 色随 kind 变 */

  /* 上下文用量分段色（CTX-WP5，契约 WBH-69）：技术统计顶部分段条 + 悬停浮层的五个分类色点，
   * 挑选彼此区分度高、且与上面卡片语义色（warn/ok/info/err/notice）不撞色的一套，避免用户把
   * "系统提示占比"误读成"确认/结果/错误"这类卡片状态语义。输出预留/安全余量不在这张表里，
   * 走灰色斜纹（复用 --kai-muted-2，见 TechStats.vue .wb-tech-stats__context-seg--hatch）。 */
  --kai-ctx-system: #94a3b8;   /* 系统提示 L0～L2（含 L7，见 TechStats.vue segments 头注）：石板灰蓝 */
  --kai-ctx-skill: #38bdf8;    /* 技能指令 L3～L4：天蓝 */
  --kai-ctx-tool: #a78bfa;     /* 工具声明 L5：紫罗兰 */
  --kai-ctx-data: #34d399;     /* 背景数据 L6：翠绿 */
  --kai-ctx-history: #fb7185;  /* 对话历史：玫瑰红（避开与 --kai-warn 相近的琥珀色，防止跟用量
                                  ≥70% 时的琥珀色警示文字混淆） */
}

/* ==== workbench/MessageStream.vue ==== */

/* 目标 1：外层壳只负责定位（position:relative 供浮动按钮 absolute 锚定），真正滚动的是内层
   .wb-stream；.wb-root__stream（WorkbenchRoot.vue 传入的 class，flex:1;min-height:0）落在本组件
   根节点（即这层壳）上，这里补上等价的 flex 布局属性，让内层滚动容器继续撑满可用高度。 */
.wb-stream-shell { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* 2026-10-02 真机样式审查：① 首页（full）消息流左右内边距 12→24，与输入框
   （WorkbenchRoot.vue .wb-root__composer：两侧各留 24）同一条左边线——原先消息/卡片比输入框
   往左凸出 12px；浮层（compact）维持 12（输入框那边同步改成两侧各 12，见 WorkbenchRoot.vue）。
   ② 滚动条改细条浅色（同 ConversationList.vue .wb-left__list 口径）。 */
.wb-stream {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 主区间距口径：消息流内边距 12px，与输入框同一条边线 */
  padding: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.16) transparent;
}
:where([data-layout='compact']) .wb-stream { padding: 12px; }
/* wb-stream__empty 容器本身不再定义间距/配色——具体呈现全部交给 EmptyConversation.vue
   （v4 新增的空会话欢迎态），这里只保留这个类名给既有单测按 class 断言"是否处于空态"用。 */
/* 宽度约束（令牌见 tokens.css「消息流宽度约束」）：每条消息行封顶到消息列宽并在宽屏居中；行内用
   flex 列布局 + align-items:flex-start，气泡按内容收缩（不再是块级元素撑满 max-width 的"固定宽"），
   用户气泡整行靠右。卡片/工具折叠行随列宽流式伸缩，夹在 card-min～card-max 之间；列宽小于
   card-min 时由 min() 退回 100%，不横向溢出。 */
.wb-stream__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* HDL-44：消息列最大宽度收到 920px（本组件自己的字面量，不复用 tokens.css 的
     --kai-chat-column-max——那是首页视觉改造收口的令牌，本卡按任务书给定值直接写死）。 */
  max-width: 920px;
  margin: 0 auto;
  min-width: 0;
}
.wb-stream__item[data-role='user'] { align-items: flex-end; }
/* I-1155（DQ-62）：回答呈现里并入的数据块（.wb-answer）与卡片同宽口径。原工具折叠行 .wb-fold 随 CNV-94 删除。 */
.wb-stream__card,
.wb-answer {
  width: 100%;
  min-width: min(var(--kai-card-min), 100%);
  max-width: var(--kai-card-max);
  box-sizing: border-box;
}
/* HDL-44：compact 布局下卡片与消息列同宽 100%，不再封顶固定像素值。 */
:where([data-layout='compact']) .wb-stream__item,
:where([data-layout='compact']) .wb-stream__card,
:where([data-layout='compact']) .wb-answer {
  max-width: 100%;
}
/* I-1155（DQ-62）回答呈现：气泡下面依次是数据呈现与口径灰字行；左边与气泡正文对齐（气泡内边距 12 + 标志 20 + 间距 8）。 */
.wb-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-left: 40px;
}
:where([data-layout='compact']) .wb-answer { padding-left: 0; }
.wb-answer__data { width: 100%; min-width: 0; }
.wb-answer__large { margin: 0; font-size: 13px; line-height: 20px; color: var(--kai-ink-2); }
/* 字号标准 14/12（用户 2026-10-02 拍板）：用户/助手气泡正文 14px，行高 22；compact 态
 * 降一档 13/20（见下方 :where([data-layout='compact']) 覆盖，同 CardShell 卡体正文的既有
 * compact 降档口径）。 */
.wb-bubble {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: var(--kai-bubble-min);
  max-width: var(--kai-bubble-max);
  overflow-wrap: anywhere;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 22px;
}
:where([data-layout='compact']) .wb-bubble { font-size: 13px; line-height: 20px; }
.wb-bubble__content { min-width: 0; flex: 1 1 auto; }
/* HDL-44：助手气泡左侧 20×14 标志（inline 复用 logo-mark.svg），user/system 不渲染这个 span。 */
.wb-bubble__logo { flex: none; width: 20px; height: 14px; margin-top: 2px; }
.wb-bubble__logo svg { width: 100%; height: 100%; display: block; }
/* HDL-44：用户气泡品牌蓝底白字，靠右显示；助手/系统气泡浅灰底深字。颜色优先引用宿主变量。 */
.wb-bubble--user { align-self: flex-end; margin-left: auto; background: rgb(var(--primary-color, 8 119 244)); color: #ffffff; }
.wb-bubble--assistant,
.wb-bubble--system { background: #f5f7fa; color: #1f1f1f; }
.wb-bubble--streaming { position: relative; }
/* 台账 I-1301（PCX-17）：用户气泡下的页签芯片留痕——弱化小字（提示色），靠右随气泡对齐；颜色取宿主主题变量（明暗自动切换）。 */
.wb-bubble-trace {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: var(--kai-bubble-max);
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--kai-muted-2);
}
.wb-bubble-trace__icon { display: inline-flex; flex: none; }
.wb-bubble-trace__icon svg { display: block; width: 12px; height: 12px; }
.wb-bubble-trace__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 目标 2/3：Markdown 渲染出的 HTML 用  消费（v-html 注入的内容不在本组件模板里，
   scoped 选择器默认够不到，需要显式穿透）；white-space 改回 normal——块级标签（p/ul/li/…）
   自己管理换行，继续套用外层 .wb-bubble 的 pre-wrap 会在标签之间的换行处多出空行。 */
.wb-bubble__md { white-space: normal; }
.wb-bubble__md p { margin: 0 0 8px; }
.wb-bubble__md p:last-child { margin-bottom: 0; }
/* 真机复测返工目标 1：有序/无序列表的序号/项目符号丢了——宿主全局样式给 ul/ol 做了
   `list-style: none` 重置（常见的 CSS reset 基线），这里在气泡作用域内显式恢复，不依赖浏览器
   默认值被外层样式覆盖与否。 */
.wb-bubble__md ul,
.wb-bubble__md ol { margin: 0 0 8px; padding-left: 20px; }
.wb-bubble__md ul { list-style: disc; }
.wb-bubble__md ol { list-style: decimal; }
.wb-bubble__md li { line-height: 1.6; }
/* 真机复测返工目标 2：GFM 表格——markdown.ts 输出 `<div class="wb-md-table-wrap"><table>...`，
   外层 div 负责横向滚动（宽表格不撑破气泡/不挤爆布局），表格本身只管边框/底色/内边距。 */
.wb-bubble__md .wb-md-table-wrap { margin: 0 0 8px; overflow-x: auto; }
.wb-bubble__md table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.wb-bubble__md th,
.wb-bubble__md td { border: 1px solid var(--kai-line, #e5e7eb); padding: 4px 8px; text-align: left; }
.wb-bubble__md th { background: rgba(0, 0, 0, 0.04); font-weight: 600; }
/* 2026-10-02 真机样式审查：引用块（markdown.ts 新增 `>` 支持）——左侧 3px 浅色竖线 + 次级文字色。 */
.wb-bubble__md blockquote {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid rgb(var(--border-light-color, 228 231 237));
  color: rgb(var(--text-secondary-color, 102 102 102));
}
.wb-bubble__md blockquote:last-child { margin-bottom: 0; }
.wb-bubble__md h1,
.wb-bubble__md h2,
.wb-bubble__md h3 { margin: 10px 0 6px; font-weight: 700; line-height: 1.3; }
.wb-bubble__md h1 { font-size: 16px; }
.wb-bubble__md h2 { font-size: 15px; }
.wb-bubble__md h3 { font-size: 14px; }
.wb-bubble__md code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
}
.wb-bubble__md pre {
  margin: 6px 0;
  padding: 8px;
  border-radius: var(--kai-radius-control);
  background: var(--kai-ink);
  color: var(--kai-surface-2);
  font-size: 12px;
  overflow-x: auto;
}
.wb-bubble__md pre code { background: none; padding: 0; color: inherit; }
/* 目标 3：围栏 JSON 折叠——原生 <details>/<summary>，默认不带 open 即折叠态，浏览器自带
   展开/收起交互，不需要额外写 JS 事件绑定。 */
.wb-bubble__md details.wb-md-fold { margin: 6px 0; }
.wb-bubble__md details.wb-md-fold summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--kai-muted);
  list-style: none;
}
.wb-bubble__md details.wb-md-fold summary::-webkit-details-marker { display: none; }
.wb-bubble__md details.wb-md-fold pre { margin-top: 6px; max-height: 320px; overflow: auto; }
.wb-bubble__attachments { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.wb-bubble__attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  max-width: 260px;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wb-bubble--assistant .wb-bubble__attachment,
.wb-bubble--system .wb-bubble__attachment { background: #ffffff; border: 1px solid #e5e7eb; }
.wb-bubble__attachment-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex: none; }
.wb-bubble__attachment-icon { font-size: 16px; flex: none; }
.wb-bubble__attachment-meta { display: flex; flex-direction: column; min-width: 0; }
.wb-bubble__attachment-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.wb-bubble__attachment-size { font-size: 11px; opacity: 0.75; }
.wb-stream__cursor {
  display: inline-block;
  width: 6px;
  height: 14px;
  margin-left: 2px;
  background: #6b7280;
  vertical-align: text-bottom;
  animation: wb-blink 1s step-start infinite;
}
@keyframes wb-blink {
  50% { opacity: 0; }
}
/* I-1133 1d-F（规格 §8.4 补第四条；用户 2026-10-08 拍板）：技能提示三形态（任务仍在进行 / 启动确认 / 已选用技能「换一个」）与日常
 * 对话回合末尾「换个技能处理」下拉都不再进消息流，原 .wb-hint* 与 .wb-chat-correction* 两组样式随之删除；启动确认的「开始 / 不用」
 * 改在输入框能力条（Composer.vue .wb-composer__suggest-btn）。 */
/* 3g：折叠被重跑的旧回合——一行文字 + 展开/收起入口，展开后原内容整体置灰不抢视觉焦点。 */
.wb-rerun-collapsed {
  padding: 6px 10px;
  border-radius: var(--kai-radius-control, 6px);
  background: var(--kai-notice-soft, #f3f4f6);
}
.wb-rerun-collapsed__toggle {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  color: var(--kai-muted, #9ca3af);
}
.wb-rerun-collapsed__toggle--inline { margin-bottom: 4px; }
.wb-stream__item--rerun-expanded { opacity: 0.55; }
/* 撤销（I-1311 / V5-A-16）：回合尾巴的「撤销」小按钮——轻量文字按钮，颜色全取 tokens.css 主题变量（暗色随主题切换），禁用态降不透明度。 */
.wb-undo-turn {
  margin-top: 2px;
  padding: 2px 10px;
  border: 1px solid var(--kai-line);
  border-radius: var(--kai-radius-pill);
  background: var(--kai-surface);
  color: var(--kai-muted);
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
}
.wb-undo-turn:hover:not(:disabled) {
  background: var(--kai-surface-2);
  color: var(--kai-ink);
}
.wb-undo-turn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* I-1155（CNV-94）：工具调用行样式（.wb-fold / __toggle / __chevron / __body / __pending / __incomplete）随工具行不再渲染删除。 */

/* 目标 1：回到底部浮动按钮——圆形，锚定消息流右下角。 */
.wb-stream__back-to-bottom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--kai-line);
  background: var(--kai-surface);
  box-shadow: var(--kai-shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kai-ink-2);
  cursor: pointer;
}
.wb-stream__back-to-bottom:hover { background: var(--kai-surface-2); }

/* ==== workbench/Composer.vue ==== */

/* 【I-1127 HDL-60】外观：白底 + 品牌色描边 + 外发光，圆角 16；.wb-root--compact 祖先（浮层）下
   收成 12（浮层几何见 WorkbenchRoot.vue layout='compact' 分支，本组件不读 layout prop，靠这个
   既有的祖先 class 选择器适配——Vue scoped CSS 下 ".wb-root--compact .wb-composer" 这种祖先
   组合选择器只会给最右侧的 .wb-composer 加 data-v 属性，祖先部分不受作用域限制，可以正常匹配
   到外层 WorkbenchRoot 渲染出的 class，这是 Vue 官方支持的写法，不是 hack）。宽度由父层决定
   （首页 920 / 浮层撑满），本组件固定 width:100%；高度不写死，由内容（是否有能力条/拖入层/
   随文本自动增高的 textarea）撑开，默认两行高是空状态下的主要高度来源。 */
.wb-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* I-1127 真机截图返工第 4 条：首页空态最小高度 160（Figma 920×160，见下方
   * .wb-root__composer--home 覆盖；基类 112 是会话态与浮层的口径，2026-10-02 真机样式审查改），
   * 原先没写 min-height，高度完全由内容撑开，实测只有 110；textarea 用 flex:1 1 auto 填满这段
   * 最小高度（见下方 .wb-composer__textarea 头注，真机 R2 改为配合 autoGrow 的写法），能力条/
   * 工具栏（含真机 R2 并入的附件芯片）仍按各自内容高度不参与挤压。 */
  min-height: 112px;
  /* 深色模式：底色取宿主容器色（原写死 #ffffff 在深色下是一块白板）。 */
  background: var(--kai-surface);
  border: 1px solid rgb(var(--primary-color, 8 119 244));
  border-radius: 16px;
  box-shadow: 0 0 12.8px rgba(8, 119, 244, 0.1);
  overflow: hidden;
}
/* 2026-10-02 真机样式审查：160 是 Figma 首页空态（Logo 下方那只大输入框）的定值；进入会话后
 * 仍按 160（带能力条时接近 200）会吃掉消息流近三成高度。改成只有首页空态保持 160——该状态下
 * WorkbenchRoot.vue 会给本组件根节点挂 .wb-root__composer--home（同一元素双类，scoped 选择器
 * 可直接命中）；会话态与浮层统一 112，内容多时仍由 autoGrow 撑高到 240 封顶。 */
.wb-composer.wb-root__composer--home { min-height: 184px; } /* 2026-10-16 Figma 3525:69171 对话框 184 高 */
/* 第 9 条：浮层（compact）同样套用第 4 条的最小高度口径，浮层定值 112（Figma 394×112）。 */
.wb-root--compact .wb-composer { border-radius: 12px; min-height: 112px; }

/* 能力条（HDL-61）：34px 高，浅蓝底 + 下描边。 */
.wb-composer__ability-bar { background: #eff7ff; border-bottom: 1px solid #d4e7ff; }
.wb-composer__ability-row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; }
.wb-composer__ability-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d4e7ff;
}
.wb-composer__ability-icon svg { width: 12px; height: 12px; display: block; }
/* 字号标准 14/12（用户 2026-10-02 拍板）：能力条技能名 12→14px。 */
.wb-composer__ability-name { flex: none; font-size: 14px; font-weight: 500; color: #1f1f1f; white-space: nowrap; }
/* I-1133 1c（§8.4）：「使用中」后面的进度一句（样式稿「第 1 稿 · 等你定 1 件」：12px 灰字，放不下时省略号截断）。 */
.wb-composer__ability-progress {
  min-width: 0;
  font-size: 12px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-composer__ability-spacer { flex: 1; min-width: 4px; }
.wb-composer__ability-badge {
  flex: none;
  height: 18px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: rgba(8, 119, 244, 0.1);
  color: rgb(var(--primary-color, 8 119 244));
  /* 字号标准 14/12（用户 2026-10-02 拍板）：胶囊统一 10→11px。 */
  font-size: 11px;
}
.wb-composer__ability-cancel { flex: none; width: 20px; height: 20px; border: none; background: none; cursor: pointer; color: #999999; font-size: 14px; line-height: 1; }
.wb-composer__ability-cancel:hover { color: #1f1f1f; }
/* I-1133 1d-F：能力条里的启动提示（原消息流启动卡）——名字一行放不下时省略号，右侧「开始」（品牌蓝实底）/「不用」（描边）两个 24 高小按钮。 */
/* 能力条同一行内的阶段进度（非 compact）；compact 折行第二行由下面 .wb-composer__ability-phase-row
   接管，两者互斥显示（祖先 class 决定，不是同时渲染两份再各自 display:none——为了让「有没有
   phase」这一判断留在模板 v-if 里，两个 PhaseDots 实例按 compact/非 compact 各自渲染，CSS 只
   负责在对应布局下隐藏不该出现的那一个）。 */
.wb-composer__ability-phase { margin-left: 4px; flex: none; }
.wb-root--compact .wb-composer__ability-phase { display: none; }
/* compact 折行第二行：默认（非 compact）不出现；.wb-root--compact 祖先下才展示，同底色。 */
.wb-composer__ability-phase-row { display: none; padding: 6px 12px; background: #eff7ff; }
.wb-root--compact .wb-composer__ability-phase-row { display: flex; }

/* 拖入高亮层（HDL-63）：覆盖整框，pointer-events:none 保证 drop 事件能冒泡到根节点。 */
.wb-composer__drop-overlay {
  position: absolute;
  inset: 6px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed rgb(var(--primary-color, 8 119 244));
  border-radius: 12px;
  background: rgba(230, 246, 255, 0.85);
  pointer-events: none;
}
.wb-root--compact .wb-composer__drop-overlay { border-radius: 8px; }
.wb-composer__drop-title { margin: 0; font-size: 14px; font-weight: 500; color: rgb(var(--primary-color, 8 119 244)); }
.wb-composer__drop-sub { margin: 0; font-size: 12px; color: #666666; text-align: center; padding: 0 16px; }

/* 台账 I-1301（PCX-14）：页签芯片——沿用附件芯片骨架（28 高、8 圆角、图标 + 单行文本 + ×），颜色一律取宿主主题变量（经 tokens.css 的
 * --kai-*，明暗两套随宿主切换）：主色浅底 + 主色描边与文字，与灰底的附件芯片区分「这是页面上下文」。 */
.wb-composer__page-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 4px 0 8px;
  border: 1px solid var(--kai-primary);
  border-radius: 8px;
  background: var(--kai-primary-soft);
  color: var(--kai-primary);
  max-width: 240px;
  min-width: 0;
  flex: 0 1 auto;
}
.wb-composer__page-chip-icon { display: inline-flex; flex: none; }
.wb-composer__page-chip-icon svg { display: block; }
.wb-composer__page-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 20px; }
.wb-composer__page-chip-remove {
  flex: none;
  border: none;
  background: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--kai-muted-2);
  font-size: 14px;
  line-height: 20px;
}
.wb-composer__page-chip-remove:hover { color: var(--kai-ink); }

.wb-composer__textarea {
  /* 真机 R2 用户反馈：flex-basis 从 flex:1（即 "1 1 0%"）改成 flex:1 1 auto——0% 的 basis 会让
   * flex-grow 的分配算法完全不看元素自身的高度（包括下面 autoGrow() 写进来的 inline style
   * height），永远把剩余空间硬摊给它，JS 设的高度形同虚设；改成 basis:auto 后，若设置了 inline
   * height，浏览器会把它当 basis 使用——内容少时 basis 小于 .wb-composer 的 min-height（160/
   * compact 112），flex-grow 仍会把多出来的空间分给它（效果同返工第 4 条的"自动填满"诉求不变）；
   * 内容变多、JS 算出的高度本身就超过那个阈值时，flex-grow 已经没有多余空间可分，直接按
   * inline height 渲染——这样"自动填满最小高度"与"随内容增高"这两件事不再互相打架。 */
  flex: 1 1 auto;
  /* 去掉右下角拖拽柄，改由下方 autoGrow() 按内容自动增高；240px 封顶（约 12 行）后交给
   * overflow-y 内部滚动，不再继续撑高外框。 */
  resize: none;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.16) transparent;
  padding: 12px 16px 6px;
  border: none;
  outline: none;
  /* 通体纯白诉求：文本区自身不设底色，直接透出 .wb-composer 的白底，与工具栏之间不产生色差。 */
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  font-family: inherit;
  color: var(--kai-ink);
}
.wb-composer__textarea::placeholder { color: var(--kai-muted-2); }

/* 真机 R2 用户反馈：芯片尺寸收紧（28 高、20px 缩略图/图标），并入工具栏左侧后与录音中/回合进行中
   提示共用 .wb-composer__toolbar-left 的 flex-wrap 容器，这里不再需要单独一层包裹 div/样式。 */
.wb-composer__attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 6px 0 3px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #f5f7fa;
  max-width: 220px;
  flex: none;
}
.wb-composer__attachment-chip--error { border-color: #fab5b5; background: #fef0f0; }
.wb-composer__attachment-thumb { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; flex: none; }
.wb-composer__attachment-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
/* 真机 R2 用户反馈：文件名与状态文案改到同一行（原先 flex-direction:column 两行），用「·」分隔。 */
.wb-composer__attachment-meta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
/* 字号标准 14/12（用户 2026-10-02 拍板）：附件芯片文件名 12→13px。 */
.wb-composer__attachment-name { font-size: 13px; color: #1f1f1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.wb-composer__attachment-sep { font-size: 11px; color: #c8ccd6; flex: none; }
.wb-composer__attachment-status { font-size: 11px; color: #999999; white-space: nowrap; flex: none; }
.wb-composer__attachment-status--error { color: #e84f4f; }
.wb-composer__attachment-remove { border: none; background: none; cursor: pointer; color: #999999; font-size: 14px; flex: none; }
.wb-composer__attachment-remove:hover { color: #1f1f1f; }

/* 真机故障 2026-09-23 新增：兜底超时提示——不是错误（服务端很可能仍在处理），用中性提示色，
   避免让用户误以为出了明确的失败。真机 R4 A 项：原 .wb-composer__client-error（校验错误行内
   文案）已改走 WorkbenchRoot 的 ToastHost 浮动提示，这里不再保留该选择器。 */
.wb-composer__timeout-notice { font-size: 12px; color: #6b7280; padding: 0 16px 6px; }

/* 工具栏（HDL-60/64/65/66）：左侧状态区 + 右侧三键，底部 padding 0 15 15 16。 */
.wb-composer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 15px 15px 16px; }
/* 真机 R2 用户反馈：附件芯片并入左侧后，内容可能超过一行宽度——flex-wrap 让芯片/状态提示按需
   换行，整条工具栏随之增高，不挤压右侧三个按钮（右侧见下方 align-self:flex-end）。 */
.wb-composer__toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.wb-composer__toolbar-hint { font-size: 12px; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 【I-1133 UI-AB 甲-1】左下角「能力」胶囊按钮：28 高、全圆角、细描边白底；选了能力时品牌蓝描边 + 浅蓝底 + 品牌蓝字（样式稿
 * .chipk.p）。名称过长时省略，不把右侧三键挤走（工具栏左侧本就 flex:1 + min-width:0）。 */
.wb-composer__skill-picker {
  flex: none;
  max-width: 100%;
  height: 28px;
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--kai-line-2);
  border-radius: var(--kai-radius-pill);
  background: var(--kai-surface);
  color: var(--kai-ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wb-composer__skill-picker:hover { border-color: rgb(var(--primary-color, 8 119 244)); }
.wb-composer__skill-picker:focus-visible { outline: 2px solid rgb(var(--primary-color, 8 119 244)); outline-offset: 1px; }
.wb-composer__skill-picker--selected {
  border-color: rgb(var(--primary-color, 8 119 244));
  background: rgb(var(--primary-50-color, 230 246 255));
  color: rgb(var(--primary-color, 8 119 244));
}
.wb-composer__skill-picker-bolt,
.wb-composer__skill-picker-caret { flex: none; display: block; }
.wb-composer__skill-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* align-self:flex-end：左侧换行增高时，右侧三键固定贴住工具栏底边，不跟着被拉伸居中。 */
.wb-composer__toolbar-right { display: flex; align-items: center; flex: none; align-self: flex-end; }

/* ---- 语音条（I-1275，契约 I-1127 HDL-65 修订注记；Figma 3692:69434）----
 * 录音期间整块替换文本区与工具栏。外框改为品牌浅蓝描边（vi 色 20% #ABDDFF），内容一行：麦克风方块 + 标题/状态 · 声波 · 分隔线 + 三个按钮。
 * 颜色走下面这组令牌：亮色取设计稿定值，暗色（html.dark）按提瓦特规范第八节推导。 */
.wb-composer {
  --voice-border: #abddff;
  --voice-tile: #edf5ff;
  --voice-title: #26354d;
  --voice-sub: #6e819c;
  --voice-w1: rgb(var(--primary-color, 8 119 244));
  --voice-w2: #78b4fc;
  --voice-w3: #c9dbf2;
  --voice-btn-bg: #f6f8fb;
  --voice-btn-line: rgb(var(--border-light-color, 228 231 237));
  --voice-btn-ink: #74869e;
  --voice-warn: rgb(var(--warning-color, 230 162 60));
}
html.dark .wb-composer {
  --voice-border: #2b4f78;
  --voice-tile: #1a2a40;
  --voice-title: #e6ebf2;
  --voice-sub: #9aa8bb;
  --voice-w2: #2f6db3;
  --voice-w3: #2c3e55;
  --voice-btn-bg: #2a2e35;
  --voice-btn-ink: #a3afc0;
}
.wb-composer.wb-composer--voice { border-color: var(--voice-border); }
/* 首页空态的 184 最小高在录音时不需要，语音条按自身内容高度（24 + 44 + 24）。 */
.wb-composer.wb-composer--voice.wb-root__composer--home { min-height: 0; }
.wb-composer--voice { min-height: 0; }
/* 浮层基类 .wb-root--compact .wb-composer 的 112 最小高同样在录音时取消。 */
.wb-root--compact .wb-composer.wb-composer--voice { min-height: 0; }
.wb-composer__voice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 20px;
  min-width: 0;
}
.wb-composer__voice-who { display: flex; align-items: flex-start; gap: 12px; flex: none; }
.wb-composer__voice-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--voice-tile);
  color: rgb(var(--primary-color, 8 119 244));
  display: grid;
  place-items: center;
  flex: none;
}
.wb-composer__voice-tile svg { width: 32px; height: 32px; display: block; }
.wb-composer__voice-text { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
.wb-composer__voice-title { font-size: 15px; line-height: 20px; color: var(--voice-title); }
.wb-composer__voice-status { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--voice-sub); white-space: nowrap; }
.wb-composer__voice-time { font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; }
.wb-composer__voice-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--primary-color, 8 119 244)); flex: none; }
.wb-composer__voice--recording .wb-composer__voice-dot { animation: wb-composer-voice-blink 1.2s ease-in-out infinite; }
.wb-composer__voice--paused .wb-composer__voice-dot { background: rgb(var(--text-hint-color, 153 153 153)); }
.wb-composer__voice[data-near-limit] .wb-composer__voice-status { color: var(--voice-warn); }
.wb-composer__voice[data-near-limit] .wb-composer__voice-dot { background: var(--voice-warn); }
@keyframes wb-composer-voice-blink { 50% { opacity: 0.25; } }
/* 声波：54 根 3px 竖条、间距 2（总宽 268，窄时整体收缩），中段深蓝 / 两侧中蓝 / 最外浅蓝。 */
.wb-composer__voice-wave {
  flex: 0 1 268px;
  min-width: 60px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  overflow: hidden;
}
.wb-composer__voice-wave i { flex: 0 0 3px; width: 3px; min-height: 4px; border-radius: 2px; background: var(--voice-w3); transition: height 0.12s ease; }
.wb-composer__voice-wave i.c1 { background: var(--voice-w1); }
.wb-composer__voice-wave i.c2 { background: var(--voice-w2); }
.wb-composer__voice--paused .wb-composer__voice-wave i,
.wb-composer__voice--transcribing .wb-composer__voice-wave i { background: var(--voice-w3); }
.wb-composer__voice--transcribing .wb-composer__voice-wave i { animation: wb-composer-voice-shimmer 1.4s ease-in-out infinite; }
@keyframes wb-composer-voice-shimmer { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.wb-composer__voice-acts { display: flex; align-items: center; gap: 16px; flex: none; }
.wb-composer__voice-divider { width: 1px; height: 44px; margin-right: 8px; background: rgb(var(--border-light-color, 228 231 237)); }
.wb-composer__voice-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--voice-btn-line);
  background: var(--voice-btn-bg);
  color: var(--voice-btn-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.wb-composer__voice-btn svg { width: 24px; height: 24px; display: block; }
.wb-composer__voice-btn:focus-visible { outline: 2px solid rgb(var(--primary-color, 8 119 244)); outline-offset: 2px; }
.wb-composer__voice-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* 暂停后「继续」按钮高亮成品牌色，提示现在点它就接着录。 */
.wb-composer__voice-btn--on { border-color: rgb(var(--primary-color, 8 119 244)); background: var(--voice-tile); color: rgb(var(--primary-color, 8 119 244)); }
.wb-composer__voice-btn--done { border-color: rgb(var(--primary-color, 8 119 244)); background: rgb(var(--primary-color, 8 119 244)); color: #ffffff; }
/* 转写中完成按钮保持品牌蓝实底（只是转圈），不跟随 disabled 变浅。 */
.wb-composer__voice-btn--done:disabled { opacity: 1; }
.wb-composer__voice-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: wb-composer-spin 0.9s linear infinite;
}
/* 浮层（compact，394 宽）窄版：去掉「语音输入」标题只留状态，按钮缩到 36、声波自适应、间距收紧。 */
.wb-root--compact .wb-composer__voice { gap: 10px; padding: 14px 12px; }
.wb-root--compact .wb-composer__voice-title { display: none; }
.wb-root--compact .wb-composer__voice-who { align-items: center; gap: 8px; }
.wb-root--compact .wb-composer__voice-tile { width: 36px; height: 36px; border-radius: 10px; }
.wb-root--compact .wb-composer__voice-tile svg { width: 24px; height: 24px; }
.wb-root--compact .wb-composer__voice-text { min-width: 0; }
.wb-root--compact .wb-composer__voice-acts { gap: 8px; }
.wb-root--compact .wb-composer__voice-divider { height: 28px; margin-right: 2px; }
.wb-root--compact .wb-composer__voice-btn { width: 36px; height: 36px; border-radius: 10px; }
.wb-root--compact .wb-composer__voice-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .wb-composer__voice--recording .wb-composer__voice-dot,
  .wb-composer__voice--transcribing .wb-composer__voice-wave i,
  .wb-composer__voice-spin { animation: none; }
  .wb-composer__voice-wave i { transition: none; }
}
/* 转写结果填回后整框淡蓝底闪一下（1.2 秒，见 flashFilled）。 */
.wb-composer--filled .wb-composer__textarea { background: color-mix(in srgb, rgb(var(--primary-color, 8 119 244)) 8%, transparent); transition: background 0.3s ease; }

/* 回合进行中状态行（HDL-66）：14px 品牌蓝 spinner + 提示语。 */
.wb-composer__turn-running { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wb-composer__spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(8, 119, 244, 0.2);
  border-top-color: rgb(var(--primary-color, 8 119 244));
  animation: wb-composer-spin 0.8s linear infinite;
}
@keyframes wb-composer-spin {
  to { transform: rotate(360deg); }
}

/* 附件/语音图标按钮：24px，无边框底色（HDL-60「右下附件/语音/发送」的字面量尺寸）。 */
.wb-composer__icon-btn {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.wb-composer__icon-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.wb-composer__icon { width: 24px; height: 24px; display: block; }
.wb-composer__icon svg { width: 100%; height: 100%; display: block; }
/* 语音按钮与附件按钮间隔 16px；发送按钮与语音（或无语音时与附件）间隔 20px（HDL-60 字面量间距）。 */
.wb-composer__mic-btn { margin-left: 16px; }
.wb-composer__file-input { display: none; }

/* 发送按钮：36px 圆，品牌蓝实底，compact 下 32px；disabled 浅品牌蓝（HDL-66）。 */
.wb-composer__send {
  flex: none;
  margin-left: 20px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgb(var(--primary-color, 8 119 244));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 真机 R4 E 项：原生 :disabled（空输入/上传中/回合进行中都会命中）不再单独改背景——否则空
 * 输入时按钮也会被判定「禁用视觉」，与 Figma「空输入同样实心品牌蓝」不符。光标仍统一在
 * disabled 态给 not-allowed（不可点就不该是手型指针，这条与"是否变暗"是两件事）；真正的
 * "变暗"视觉只在回合进行中（.wb-composer__send--turn-disabled，由 props.disabled 驱动）出现。 */
.wb-composer__send:disabled { cursor: not-allowed; }
.wb-composer__send--turn-disabled { opacity: 0.6; }
.wb-root--compact .wb-composer__send { width: 32px; height: 32px; }

/* ==== workbench/HomeHero.vue ==== */

.wb-home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo：横排底对齐，mark/word 间距 15，ai 再左移 8（margin-left 叠加同一个 gap，等效整体间距
 * 15-8=7）、底部抬高 4.5。【2026-10-16 Figma 3525:69171】Logo→标题块间距 28（原 58 是直接接输入框）。 */
.wb-home-hero__logo {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin-bottom: 28px;
}
.wb-home-hero__logo-mark svg { display: block; width: 66px; height: 45px; }
.wb-home-hero__logo-word svg { display: block; width: 133.5px; height: 42px; }
.wb-home-hero__logo-ai {
  margin-left: -8px;
  margin-bottom: 4.5px;
}
.wb-home-hero__logo-ai svg { display: block; width: 42.75px; height: 31.5px; }

/* 主标题 + 副标题（Figma 32/44 Medium + 16/26 Regular，间距 10，居中）；标题块→输入框 28。
 * 颜色走宿主文字色变量，深色模式自动跟随。 */
.wb-home-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}
.wb-home-hero__headline { margin: 0; font-size: 32px; line-height: 44px; font-weight: 500; color: var(--kai-ink); }
.wb-home-hero__subtitle { margin: 0; font-size: 16px; line-height: 26px; color: var(--kai-muted-2); }

/* 「你可以试试」区：整块宽 820（与输入框同宽），标题行/卡片行左对齐；输入框底到标题顶 36（Figma），
 * 标题行到卡片 20。窄宽度兜底沿用 min(…, 100% - 8px)，并开 inline-size 容器供卡片网格切列数。 */
.wb-home-hero__try {
  margin-top: 36px;
  width: min(820px, calc(100% - 8px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  container-type: inline-size;
  container-name: kai-try;
}
.wb-home-hero__try-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kai-ink);
  margin-bottom: 20px;
}
.wb-home-hero__try-icon { display: inline-flex; width: 24px; height: 24px; }
.wb-home-hero__try-icon svg { display: block; width: 100%; height: 100%; }

/* 卡片网格：固定两列（Figma 402×114，行列间距 16）；可见卡不足两张时仍占半行靠左。
 * 容器 < 560 时退为单列。 */
.wb-home-hero__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
@container kai-try (max-width: 560px) {
  .wb-home-hero__cards { grid-template-columns: minmax(0, 1fr); }
}

/* 卡片：圆角 16、内边距 20、图标在左（36 圆）文字在右、最小高 114。配色走 --card-bg /
 * --card-icon-bg（由模板内联注入的亮色值），深色模式下改用同色相低透明度叠加，避免大块浅色。 */
.wb-home-hero__card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 114px;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-align: left;
  background: var(--card-bg);
}
.wb-home-hero__card--disabled,
.wb-home-hero__card:disabled { cursor: not-allowed; }
.wb-home-hero__card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-icon-bg);
}
.wb-home-hero__card-icon svg { display: block; width: 24px; height: 24px; }
.wb-home-hero__card-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-home-hero__card-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--kai-ink); }
.wb-home-hero__card-desc { font-size: 13px; line-height: 22px; color: var(--kai-muted); }
/* 暂不可用 / 未开通胶囊：Figma 浅灰底 + 提示灰字 10px，右上角（距顶 16 距右 16）。 */
.wb-home-hero__card-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 10px;
  line-height: 22px;
  background: rgb(var(--fill-light-color, 240 242 245));
  color: var(--kai-muted-2);
}
/* 不可点卡片整体弱化，深浅主题通用（原先靠胶囊提示，保持文字可读不再叠加透明度）。 */

/* 深色模式：卡片底 / 图标底用卡片主题色的低透明度叠加到深色容器上，文字沿用宿主文字变量。 */
html.dark .wb-home-hero__card { background: color-mix(in srgb, var(--card-icon-bg) 14%, transparent); }
html.dark .wb-home-hero__card-icon { background: color-mix(in srgb, var(--card-icon-bg) 30%, transparent); }

/* 创建应用 V4 制式提示语模板行（I-1130 V4-S1-01）：卡片组下方单独一行，引导语（12，次要色）在前、
 * 模板句按钮（14，描边小圆角）在后；宽度不够时引导语与模板句自动折成两行（浮层 compact 也走这套）。
 * 模板句里的空位是全角空格（U+3000）或半角空格，white-space: pre-wrap 保证它们按原样占位、不被折叠。 */
.wb-home-hero__template {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  margin-top: 16px; /* 与卡片网格的行距同值（gap: 16px） */
}
.wb-home-hero__template-label { font-size: 12px; color: var(--kai-muted); }
.wb-home-hero__template-btn {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--kai-line);
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--kai-surface);
  color: var(--kai-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.wb-home-hero__template-btn:hover,
.wb-home-hero__template-btn:focus-visible {
  border-color: var(--kai-primary);
  background: var(--kai-primary-soft);
}

/* ==== workbench/EmptyConversation.vue ==== */

/* 本组件本身不再承担布局职责（纵向居中/间距全部由 HomeHero + WorkbenchRoot.vue 的「首页默认态
 * 交错排布」样式负责，见该文件头注）——只在 layout='full' 且落入这套交错排布 CSS 时，本节点与
 * HomeHero 根节点会被 WorkbenchRoot.vue 用 display:contents 打平，这里保留的布局声明只作为
 * "未打平场景"（如 layout='compact' 浮层、或单测直接挂载本组件）下的兜底展示，不依赖打平也能
 * 看得过去。 */
.wb-empty-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
}

/* ==== workbench/TurnProgressCard.vue ==== */

/* 进行中卡（I-1274，Figma 3415:75207）：与 CardShell 同骨架的蓝色卡，宽度随消息列、最宽 760。 */
.wb-tpc {
  --tpc-tone: #2356c2;
  --tpc-band: #e8effe;
  box-sizing: border-box;
  width: 760px;
  max-width: 100%;
  border: 1px solid var(--tpc-tone);
  border-radius: 8px;
  overflow: hidden;
  background: rgb(var(--container-bg-color, 255 255 255));
  color: rgb(var(--base-text-color, 31 31 31));
  font-size: 12px;
  line-height: 20px;
}
html.dark .wb-tpc { --tpc-tone: #6e9bf0; --tpc-band: #182640; }
.wb-tpc__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  background: var(--tpc-band);
}
.wb-tpc__spinner {
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tpc-tone) 25%, transparent);
  border-top-color: var(--tpc-tone);
  animation: wb-tpc-spin 0.9s linear infinite;
}
.wb-tpc__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.wb-tpc__elapsed {
  flex: none;
  color: rgb(var(--text-hint-color, 153 153 153));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wb-tpc__body {
  padding: 10px 12px 12px;
  color: #495163;
}
html.dark .wb-tpc__body { color: #c3c9d4; }
/* 动作行（WBH-88 / DQ-64）：正文第一行提示色小字。 */
.wb-tpc__action {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 18px;
  color: rgb(var(--text-secondary-color, 102 102 102));
  overflow-wrap: anywhere;
}
.wb-tpc__progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 进度条：6 高胶囊，浅蓝轨道 + 蓝色填充；不确定时一段来回流动，不代表完成比例（规格 §8.2「不按估算推进」）。 */
.wb-tpc__bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 99px;
  background: var(--tpc-band);
  overflow: hidden;
}
.wb-tpc__pct {
  flex: none;
  font-size: 12px;
  color: rgb(var(--text-hint-color, 153 153 153));
  font-variant-numeric: tabular-nums;
}
.wb-tpc__bar-flow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  border-radius: 99px;
  background: var(--tpc-tone);
  animation: wb-tpc-flow 1.6s ease-in-out infinite;
}
.wb-tpc__bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 99px;
  background: var(--tpc-tone);
  transition: width 0.6s ease;
}
.wb-tpc__bar-fill--finish {
  width: 100%;
  transition: none;
  animation: wb-tpc-finish 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes wb-tpc-finish {
  from { width: var(--tpc-from, 10%); }
  to { width: 100%; }
}
.wb-tpc__note {
  margin: 8px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wb-tpc__note strong { font-weight: 600; color: rgb(var(--base-text-color, 31 31 31)); }
.wb-tpc__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgb(var(--text-hint-color, 153 153 153));
  overflow-wrap: anywhere;
}
/* 台账 I-1334（WBH-110）：头部百分比、步骤胶囊、「现在」一句、实况标签、并发工具行、估算斜纹、停滞转橙。 */
.wb-tpc__head-pct {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--tpc-tone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wb-tpc__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.wb-tpc__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 12px;
  line-height: 20px;
  background: rgb(var(--fill-lightest-color, 245 247 250));
  color: rgb(var(--text-hint-color, 153 153 153));
}
.wb-tpc__chip[data-state='done'] {
  background: rgb(var(--success-50-color, 240 249 235));
  color: rgb(var(--success-color, 103 194 58));
}
.wb-tpc__chip[data-state='done']::before { content: '✓'; font-size: 11px; }
.wb-tpc__chip[data-state='now'] {
  background: var(--tpc-band);
  color: var(--tpc-tone);
  font-weight: 600;
}
.wb-tpc__chip[data-state='now']::before,
.wb-tpc__chip[data-state='redo']::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: wb-tpc-breathe 1.4s ease-in-out infinite;
}
.wb-tpc__chip[data-state='redo'] {
  background: rgb(var(--warning-50-color, 252 243 231));
  color: rgb(var(--warning-600-color, 154 91 0));
  font-weight: 600;
}
.wb-tpc__bar-fill--est {
  background: linear-gradient(90deg, var(--tpc-tone) calc(100% - 24px), color-mix(in srgb, var(--tpc-tone) 35%, transparent));
}
.wb-tpc__bar-fill--est::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 24px;
  background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--tpc-tone) 45%, transparent) 4px 8px);
  background-size: 11px 11px;
  animation: wb-tpc-stripe 1s linear infinite;
}
.wb-tpc__now {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  color: rgb(var(--base-text-color, 31 31 31));
  overflow-wrap: anywhere;
}
.wb-tpc__now-label { flex: none; color: rgb(var(--text-hint-color, 153 153 153)); }
.wb-tpc__tools {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.wb-tpc__tools li { display: flex; gap: 6px; align-items: center; }
.wb-tpc__tool-mark { width: 12px; text-align: center; color: var(--tpc-tone); }
.wb-tpc__tools li[data-state='done'] .wb-tpc__tool-mark { color: rgb(var(--success-color, 103 194 58)); }
.wb-tpc__tools li[data-state='failed'] .wb-tpc__tool-mark { color: rgb(var(--warning-color, 230 162 60)); }
.wb-tpc__live {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}
.wb-tpc__node,
.wb-tpc__chip-more {
  font-size: 12px;
  line-height: 20px;
  padding: 0 7px;
  border: 1px solid rgb(var(--border-light-color, 228 231 237));
  border-radius: 4px;
  color: rgb(var(--text-secondary-color, 102 102 102));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-tpc__chip-more { border-style: dashed; }
.wb-tpc__node[data-kind='decision'] { border-style: dashed; }
/* 修改应用批量的改动摘要（kind change）：一行放不下就省略，不撑宽卡片（台账 I-1334 真机）。 */
.wb-tpc__node[data-kind='change'] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tpc__node[data-kind='line'],
.wb-tpc__node[data-kind='lane'] { font-weight: 600; color: rgb(var(--base-text-color, 31 31 31)); }
.wb-tpc__node[data-state='running'] { border-color: var(--tpc-tone); color: var(--tpc-tone); }
.wb-tpc__node[data-state='done'] {
  border-color: transparent;
  background: rgb(var(--success-50-color, 240 249 235));
  color: rgb(var(--success-color, 103 194 58));
}
.wb-tpc__node[data-state='redo'] {
  border-color: transparent;
  background: rgb(var(--warning-50-color, 252 243 231));
  color: rgb(var(--warning-600-color, 154 91 0));
}
.wb-tpc__node[data-state='failed'] {
  border-color: transparent;
  background: rgb(var(--error-50-color, 253 235 235));
  color: rgb(var(--error-color, 232 79 79));
}
.wb-tpc__node[data-fresh='true'] {
  border-color: var(--tpc-tone);
  color: var(--tpc-tone);
  animation: wb-tpc-pop 0.6s ease;
}
.wb-tpc__stalled {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgb(var(--warning-600-color, 154 91 0));
}
.wb-tpc--slow { --tpc-tone: #c27c12; --tpc-band: #fdf3e2; }
html.dark .wb-tpc--slow { --tpc-tone: #e8ad55; --tpc-band: #3a2c17; }
@keyframes wb-tpc-breathe {
  50% { opacity: 0.3; }
}
@keyframes wb-tpc-stripe {
  to { background-position: 11px 0; }
}
@keyframes wb-tpc-pop {
  from { transform: translateY(3px); opacity: 0; }
}
/* 已结束一行（样式稿「完成后这张卡收成一行」）：灰色小字，不抢回复的视觉权重。 */
.wb-tpc-done {
  margin: 0;
  padding-left: 4px;
  font-size: 12px;
  line-height: 18px;
  color: rgb(var(--text-hint-color, 153 153 153));
  font-variant-numeric: tabular-nums;
}
@keyframes wb-tpc-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wb-tpc-flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(280%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb-tpc__spinner { animation-duration: 2.5s; }
  .wb-tpc__bar-flow { animation-duration: 4s; }
  .wb-tpc__chip::before,
  .wb-tpc__bar-fill--est::after,
  .wb-tpc__node[data-fresh='true'] { animation: none; }
}

/* ==== workbench/CreateSidebar.vue ==== */

.cs {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--kai-surface);
  color: var(--kai-ink);
  font-size: 14px;
}
.cs__head {
  flex: none;
  box-sizing: border-box;
  height: 68px;
  padding: 0 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--kai-line);
}
.cs__head-main { flex: 1 1 auto; min-width: 0; }
.cs__app { margin: 0; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs__sub { margin: 0; font-size: 12px; line-height: 18px; color: var(--kai-muted-2); }
.cs__icon-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--kai-radius-control);
  background: transparent;
  color: var(--kai-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cs__icon-btn:hover { background: var(--kai-surface-2); color: var(--kai-ink); }
.cs__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 主区间距口径 12；底部 44 给吸底页脚让位 */
  padding: 12px 12px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}
/* 三段步骤条。 */
.cs__track { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cs__seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs__seg-bar { height: 4px; border-radius: 2px; background: var(--kai-line); transition: background-color 0.3s ease; }
.cs__seg-label { font-size: 12px; line-height: 16px; color: var(--kai-muted-2); }
.cs__seg[data-state='done'] .cs__seg-bar { background: var(--kai-ok); }
.cs__seg[data-state='done'] .cs__seg-label { color: var(--kai-muted); }
.cs__seg[data-state='active'] .cs__seg-bar { background: var(--kai-primary); }
.cs__seg[data-state='active'] .cs__seg-label { color: var(--kai-ink); font-weight: 500; }
.cs__seg[data-state='fail'] .cs__seg-bar { background: var(--kai-err); }
.cs__seg[data-state='fail'] .cs__seg-label { color: var(--kai-err); font-weight: 500; }
/* 「现在」卡。 */
.cs__now {
  padding: 12px;
  border-radius: var(--kai-radius-card);
  background: var(--kai-primary-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: cs-fade 0.32s ease-out both;
}
.cs__now[data-tone='orange'] { background: var(--kai-warn-soft); }
.cs__now[data-tone='green'] { background: var(--kai-ok-soft); }
.cs__now[data-tone='red'] { background: var(--kai-err-soft); }
.cs__now-title { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; line-height: 22px; color: var(--kai-primary-ink); }
.cs__now[data-tone='orange'] .cs__now-title { color: var(--kai-warn-ink); }
.cs__now[data-tone='green'] .cs__now-title { color: color-mix(in srgb, var(--kai-ok) 60%, var(--kai-ink)); }
.cs__now[data-tone='red'] .cs__now-title { color: var(--kai-err); }
.cs__now-text { margin: 0; font-size: 13px; line-height: 20px; color: var(--kai-ink-2); }
.cs__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cs__btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--kai-primary);
  border-radius: var(--kai-radius-control);
  background: var(--kai-primary);
  color: var(--kai-surface);
  font-size: 13px;
  cursor: pointer;
}
.cs__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cs__btn--secondary { background: var(--kai-surface); color: var(--kai-ink); border-color: var(--kai-line-2); }
.cs__spin,
.cs__chip-spin {
  box-sizing: border-box;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: cs-spin 0.9s linear infinite;
}
.cs__spin { width: 14px; height: 14px; }
.cs__chip-spin { width: 10px; height: 10px; border-width: 1.5px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cs__spin, .cs__chip-spin { animation-duration: 2.4s; }
  .cs__now { animation: none; }
}
/* 逐项建造。 */
.cs__build { display: flex; flex-direction: column; gap: 10px; }
.cs__build-top { font-size: 12px; color: var(--kai-muted); }
.cs__bar { height: 6px; border-radius: 3px; background: var(--kai-line); overflow: hidden; }
.cs__bar-fill { height: 100%; border-radius: 3px; background: var(--kai-primary); transition: width 0.5s ease; }
.cs__bar[data-slow='true'] .cs__bar-fill { background: var(--kai-warn); }
.cs__bar[data-failed='true'] .cs__bar-fill { background: var(--kai-err); }
.cs__build-line { margin: -2px 0 0; font-size: 13px; line-height: 20px; color: var(--kai-ink); }
.cs__build-line[data-failed='true'] { color: var(--kai-err); }
.cs__group { display: flex; flex-direction: column; gap: 6px; }
.cs__group-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kai-muted-2); }
.cs__group-head > span:first-child { flex: 1; }
.cs__group-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--kai-primary-ink);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.cs__chev { display: inline-block; transition: transform 0.2s ease; }
.cs__chev[data-open='true'] { transform: rotate(180deg); }
.cs__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 26px; overflow: hidden; transition: max-height 0.25s ease; }
.cs__chips[data-open='true'] { max-height: 600px; }
.cs__chip {
  box-sizing: border-box;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--kai-radius-control);
  border: 1px dashed var(--kai-line-2);
  color: var(--kai-muted-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cs__chip[data-state='doing'] { border-style: solid; border-color: var(--kai-primary); background: var(--kai-primary-soft); color: var(--kai-primary-ink); }
.cs__chip[data-state='done'] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--kai-ok) 35%, var(--kai-surface));
  background: var(--kai-ok-soft);
  color: color-mix(in srgb, var(--kai-ok) 60%, var(--kai-ink));
}
.cs__chip[data-state='filling'] {
  border-style: solid;
  border-color: var(--kai-primary);
  background: var(--kai-ok-soft);
  color: color-mix(in srgb, var(--kai-ok) 60%, var(--kai-ink));
}
.cs__chip[data-state='slow'] { border-style: solid; border-color: var(--kai-warn); background: var(--kai-warn-soft); color: var(--kai-warn-ink); }
.cs__chip[data-state='failed'] { border-style: solid; border-color: var(--kai-err-border); background: var(--kai-err-soft); color: var(--kai-err); }
.cs__chip-rows { opacity: 0.75; }
.cs__legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--kai-muted-2); }
.cs__legend > span { display: inline-flex; align-items: center; gap: 4px; }
.cs__lg { width: 10px; height: 10px; border-radius: 3px; box-sizing: border-box; display: inline-block; }
.cs__lg--wait { border: 1px dashed var(--kai-line-2); }
.cs__lg--doing { border: 1px solid var(--kai-primary); background: var(--kai-primary-soft); }
.cs__lg--done { border: 1px solid color-mix(in srgb, var(--kai-ok) 35%, var(--kai-surface)); background: var(--kai-ok-soft); }
/* 试用版卡。 */
.cs__trial { border: 1px solid var(--kai-line); border-radius: var(--kai-radius-card); overflow: hidden; }
.cs__trial-head { padding: 12px; display: flex; align-items: center; gap: 10px; background: var(--kai-surface-2); }
.cs__trial-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--kai-primary);
  color: var(--kai-surface);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs__trial-main { flex: 1; min-width: 0; }
.cs__trial-name { margin: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs__trial-meta { margin: 0; font-size: 12px; color: var(--kai-muted-2); }
.cs__tag { flex: none; height: 20px; padding: 0 8px; border-radius: var(--kai-radius-pill); font-size: 12px; display: inline-flex; align-items: center; background: var(--kai-primary-soft); color: var(--kai-primary-ink); }
.cs__tag[data-formal='true'] { background: var(--kai-ok-soft); color: color-mix(in srgb, var(--kai-ok) 60%, var(--kai-ink)); }
/* 小步行（试用版卡与旧宿主兜底共用）。 */
.cs__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cs__rows--trial { padding: 10px 12px; border-top: 1px solid var(--kai-line); }
.cs__row { display: flex; gap: 8px; font-size: 13px; line-height: 20px; color: var(--kai-ink-2); }
.cs__row-mark { width: 16px; flex: none; text-align: center; color: var(--kai-muted-2); }
.cs__row[data-state='done'] .cs__row-mark { color: var(--kai-ok); }
.cs__row[data-state='doing'] .cs__row-mark { color: var(--kai-primary); }
.cs__row[data-state='warn'] { color: var(--kai-warn-ink); }
.cs__row[data-state='warn'] .cs__row-mark { color: var(--kai-warn); }
.cs__row[data-state='fail'] { color: var(--kai-err); }
.cs__row-label { flex: 1; min-width: 0; }
/* 各内容块。 */
.cs__section { display: flex; flex-direction: column; gap: 8px; }
.cs__section-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--kai-muted-2); }
.cs__link { border: 0; padding: 0; background: transparent; color: var(--kai-primary-ink); font-size: 12px; cursor: pointer; white-space: nowrap; }
.cs__link:hover { color: var(--kai-primary); }
.cs__app-row { display: flex; gap: 10px; font-size: 13px; line-height: 20px; }
.cs__app-label { width: 56px; flex: none; color: var(--kai-muted); }
.cs__app-label b { color: var(--kai-ink); font-weight: 600; }
.cs__app-names { flex: 1; min-width: 0; color: var(--kai-ink); }
.cs__new { margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--kai-warn-soft); color: var(--kai-warn-ink); font-size: 12px; }
.cs__lane { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cs__lane-name { width: 72px; flex: none; color: var(--kai-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs__lane-steps { flex: 1; display: flex; gap: 3px; }
.cs__lane-step { flex: 1; max-width: 28px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--kai-primary) 28%, var(--kai-surface)); }
.cs__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--kai-muted); }
.cs__note-item { margin: 0; display: flex; gap: 8px; font-size: 13px; line-height: 20px; }
.cs__ok { color: var(--kai-ok); flex: none; }
.cs__next { display: flex; gap: 10px; align-items: flex-start; }
.cs__next-no {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kai-surface-2);
  border: 1px solid var(--kai-line);
  color: var(--kai-muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs__next-title { margin: 0; font-size: 13px; font-weight: 500; }
.cs__next-desc { margin: 0; font-size: 12px; line-height: 18px; color: var(--kai-muted-2); }
.cs__foot {
  flex: none;
  margin: 0;
  padding: 10px 48px 10px 12px;
  border-top: 1px solid var(--kai-line);
  font-size: 12px;
  line-height: 18px;
  color: var(--kai-muted-2);
}

/* ==== workbench/ToastHost.vue ==== */

/* 挂在 .wb-root 根节点内（该容器 position:relative，见 WorkbenchRoot.vue 既有规则），顶部水平
 * 居中；硬约束不用 position:fixed，改 absolute 相对这个已定位祖先；z-index 高于业务地图/抽屉等
 * 常见弹层（它们多在 10 左右），这里不拦截底下元素的点击——除了 toast 条目本身。 */
.wb-toast-host {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.wb-toast-host__item {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 1px 4px 8.35px rgba(26, 37, 49, 0.15);
  font-size: 12px;
  color: #1f1f1f;
}
.wb-toast-host__icon { flex: none; width: 16px; height: 16px; display: flex; }
.wb-toast-host__icon svg { width: 100%; height: 100%; display: block; }
.wb-toast-host__text { flex: 1; min-width: 0; word-break: break-word; }

/* ==== workbench/cards/CardShell.vue ==== */

/* 【2026-10-16 I-1274】卡片骨架按 Figma 六张卡片稿统一：1px 语义色描边、圆角 8，头尾 36 高同色浅色带，正文 12px。
 * 颜色全部走下面这组令牌：中性色取宿主变量（深色自动跟随），语义色亮 / 暗两套字面量（暗色按提瓦特规范第八节推导：
 * 色带约为语义色 16% 叠在深色容器上、描边降一档饱和）。具体卡片的子样式可直接引用 --shell-* 令牌。 */
.wb-shell {
  --shell-bg: rgb(var(--container-bg-color, 255 255 255));
  --shell-ink: rgb(var(--base-text-color, 31 31 31));
  --shell-body: #495163;
  --shell-hint: rgb(var(--text-hint-color, 153 153 153));
  --shell-tone: #8a91a0;
  --shell-line: rgb(var(--border-color, 220 223 230));
  --shell-band: rgb(var(--fill-light-color, 245 247 250));
  --shell-meta: rgb(var(--text-secondary-color, 102 102 102));
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--shell-line);
  background: var(--shell-bg);
  overflow: hidden;
  box-sizing: border-box;
}
.wb-shell--amber { --shell-tone: #f59e0b; --shell-line: #f59e0b; --shell-band: #fff4e0; --shell-meta: #bd6930; }
.wb-shell--indigo { --shell-tone: #636cff; --shell-line: #636cff; --shell-band: #ececff; --shell-meta: #636cff; }
.wb-shell--green { --shell-tone: #16a349; --shell-line: #16a349; --shell-band: #e8f6ed; --shell-meta: #16a349; }
.wb-shell--blue { --shell-tone: #2356c2; --shell-line: #2356c2; --shell-band: #e8effe; --shell-meta: #2356c2; }
.wb-shell--red { --shell-tone: #e84f4f; --shell-line: #e84f4f; --shell-band: #fdeeee; --shell-meta: #e84f4f; }
/* 中性族的「主按钮」仍用品牌蓝（灰色主按钮在色带上辨识度不够）。 */
.wb-shell--neutral { --shell-tone: rgb(var(--primary-color, 8 119 244)); }
html.dark .wb-shell { --shell-body: #c3c9d4; }
html.dark .wb-shell--amber { --shell-tone: #e9a23b; --shell-line: #a8721f; --shell-band: #3a2c14; --shell-meta: #e3a76a; }
html.dark .wb-shell--indigo { --shell-tone: #8a90ff; --shell-line: #5a60c8; --shell-band: #262848; --shell-meta: #9da3ff; }
html.dark .wb-shell--green { --shell-tone: #3fbf6d; --shell-line: #2a8a4c; --shell-band: #16301f; --shell-meta: #4cc97a; }
html.dark .wb-shell--blue { --shell-tone: #6e9bf0; --shell-line: #3f66b8; --shell-band: #182640; --shell-meta: #7ea6ff; }
html.dark .wb-shell--red { --shell-tone: #f07070; --shell-line: #a84040; --shell-band: #3a1c1c; --shell-meta: #ff8a8a; }
.wb-shell--emphasize { box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-tone) 14%, transparent); }

.wb-shell__head {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0 12px;
  background: var(--shell-band);
}
/* 卡种名：8×8 圆角 1 的语义色方块 + 12/500 语义色文字。 */
.wb-shell__kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--shell-tone);
  white-space: nowrap;
}
.wb-shell--neutral .wb-shell__kind { color: var(--shell-meta); }
.wb-shell__mark {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: currentColor;
}
.wb-shell__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--shell-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-shell__spacer {
  flex: 0 0 auto;
  width: 0;
}
.wb-shell__countdown {
  flex: none;
  font-size: 12px;
  color: var(--shell-hint);
  white-space: nowrap;
}
/* 状态文字：12/500 纯文字，颜色按档位（默认跟卡片语义色）。 */
.wb-shell__status {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--shell-meta);
}
.wb-shell__status--ok { color: rgb(var(--success-color, 22 163 73)); }
.wb-shell__status--err { color: rgb(var(--error-color, 232 79 79)); }
.wb-shell__status--primary { color: rgb(var(--primary-color, 8 119 244)); }
.wb-shell__status--warn { color: #bd6930; }
html.dark .wb-shell__status--warn { color: #e3a76a; }

.wb-shell__body {
  padding: 11px 12px 12px;
  font-size: 12px;
  line-height: 20px;
  color: var(--shell-body);
  background: var(--shell-bg);
}
.wb-shell__foot {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--shell-band);
}
:where([data-layout='compact']) .wb-shell__foot {
  flex-wrap: wrap;
}
.wb-shell__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.wb-shell__footnote {
  flex: 1 1 auto;
  text-align: right;
  font-size: 11px;
  color: var(--shell-hint);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 主按钮跟卡片语义色（Figma：确认卡琥珀、结果卡绿、蓝图卡靛蓝）。Naive 把颜色变量写在按钮内联样式上，
 * 这里用 !important 覆盖其主按钮配色变量；次按钮保持 Naive 默认的白底常用描边。 */
.wb-shell__actions .kai-btn--primary.n-button {
  --n-color: var(--shell-tone) !important;
  --n-color-hover: color-mix(in srgb, var(--shell-tone) 85%, white) !important;
  --n-color-pressed: color-mix(in srgb, var(--shell-tone) 85%, black) !important;
  --n-color-focus: var(--shell-tone) !important;
  --n-color-disabled: color-mix(in srgb, var(--shell-tone) 45%, var(--shell-bg)) !important;
  --n-border: 1px solid var(--shell-tone) !important;
  --n-border-hover: 1px solid var(--shell-tone) !important;
  --n-border-pressed: 1px solid var(--shell-tone) !important;
  --n-border-focus: 1px solid var(--shell-tone) !important;
  --n-border-disabled: 1px solid transparent !important;
}

/* ==== workbench/cards/ErrorCardView.vue ==== */

.wb-card__text {
  margin: 0;
  color: var(--kai-ink-2);
}
.wb-card__raw-details {
  margin-top: 8px;
}
/* HDL-43：details 统一样式——summary 12px #999 带 › 图标，内容 pre/raw 块底 #F5F7FA 描边圆角 4
   11px 等宽，compact 下最高 120px。 */
.wb-card__raw-summary {
  cursor: pointer;
  font-size: 12px;
  color: rgb(var(--text-hint-color, 153 153 153));
  user-select: none;
  list-style: none;
}
.wb-card__raw-summary::before {
  content: '›';
  display: inline-block;
  margin-right: 4px;
}
.wb-card__raw-message {
  margin: 6px 0 0;
  padding: 8px;
  border: 1px solid var(--kai-line);
  border-radius: 4px;
  background: rgb(var(--fill-light-color, 245 247 250));
  color: var(--kai-muted-2);
  font-size: 11px;
  font-family: var(--kai-font-mono, monospace);
  white-space: pre-wrap;
  word-break: break-word;
}
:where([data-layout='compact']) .wb-card__raw-message {
  max-height: 120px;
  overflow: auto;
}

/* ==== workbench/cards/QuestionGroupCardView.vue ==== */

/* 卡（画布 Questions 板：1px #D9DEE5、圆角 8、内边距 12 14、白底；收清单态内边距 10 14）。只做明亮模式。 */
.qg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--border-color, 220 223 230));
  border-radius: 8px;
  background: rgb(var(--container-bg-color, 255 255 255));
  color: rgb(var(--base-text-color, 31 31 31));
  font-size: 14px;
  line-height: 20px;
}
.qg--done { gap: 6px; padding: 10px 14px; }
.qg__head { display: flex; align-items: center; gap: 8px; }
.qg__title { min-width: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.qg__count { margin-left: auto; flex: none; font-size: 12px; color: rgb(var(--text-secondary-color, 102 102 102)); }
.qg__badge-ok { margin-left: auto; flex: none; font-size: 12px; color: rgb(var(--success-color, 103 194 58)); }

.qg__q { display: flex; flex-direction: column; gap: 6px; }
.qg__q-head { display: flex; align-items: baseline; gap: 8px; }
.qg__q-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 19px; font-weight: 500; overflow-wrap: anywhere; }
/* 「图上：<元素名>」：11px 灰字链接样式，点了去图上找它。 */
.qg__where {
  flex: none;
  max-width: 45%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--text-secondary-color, 102 102 102));
  font: inherit;
  font-size: 11px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.qg__where:hover { color: rgb(var(--primary-color, 8 119 244)); }
.qg__options { display: flex; flex-wrap: wrap; gap: 6px; }
/* 应用题三档小标（I-1224）：跟在选项文字后，沿用胶囊当前文字色（选中 / 未选中、明暗主题都跟随）再淡一档，不另取颜色。 */
.qg__pill-hint { margin-left: 6px; font-size: 11px; color: inherit; opacity: 0.72; }
/* 选项胶囊（32px、圆角 16、1px #D9DEE5、12px）；选中主色描边 + 淡蓝底；「我来说」虚线灰字；「先跳过，按惯例」无框淡灰字。 */
.qg__pill {
  height: 32px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgb(var(--border-color, 220 223 230));
  border-radius: 16px;
  background: rgb(var(--container-bg-color, 255 255 255));
  color: rgb(var(--base-text-color, 31 31 31));
  font: inherit;
  font-size: 12px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.qg__pill:hover { border-color: rgb(var(--primary-300-color, 131 187 249)); }
.qg__pill--say { border-style: dashed; border-color: rgb(var(--border-color, 220 223 230)); color: rgb(var(--text-secondary-color, 102 102 102)); }
.qg__pill--skip { border: 0; background: transparent; color: rgb(var(--text-hint-color, 153 153 153)); }
.qg__pill--on,
.qg__pill--on:hover { border: 1px solid rgb(var(--primary-color, 8 119 244)); background: rgb(var(--primary-50-color, 230 246 255)); color: rgb(var(--primary-600-color, 7 85 209)); }
.qg__pill--skip-on { color: rgb(var(--primary-600-color, 7 85 209)); background: rgb(var(--primary-50-color, 230 246 255)); }
/* 多选题（V5-W-18）：勾上的胶囊前面带一个 ✓（选中色同单选）；题干后的「可多选」11px 灰字。 */
.qg__pill-check { margin-right: 4px; font-size: 11px; }
.qg__multi { flex: none; font-size: 11px; line-height: 16px; color: rgb(var(--text-hint-color, 153 153 153)); }
.qg__pill:focus-visible,
.qg__where:focus-visible,
.qg__link:focus-visible { outline: 2px solid rgb(var(--primary-300-color, 131 187 249)); outline-offset: 1px; }
/* 「我来说」展开的一行输入框（34 高 / 13px 由 KControlSize 钉定，见 SAY_INPUT_TIERS），撑满卡内容区宽。 */
.qg__input { width: 100%; }
.qg__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 收起的一行（✓ 序号. 题干 — 答案 ／ 改）与收清单的每一条。 */
.qg__row,
.qg__done-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 18px; color: rgb(var(--text-secondary-color, 102 102 102)); }
.qg__done-row { justify-content: space-between; }
.qg__check { flex: none; color: rgb(var(--success-color, 103 194 58)); }
.qg__row-text,
.qg__done-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qg__link { flex: none; padding: 0; border: 0; background: transparent; color: rgb(var(--primary-color, 8 119 244)); font: inherit; font-size: 12px; cursor: pointer; }
.qg__link:hover { color: rgb(var(--primary-600-color, 7 85 209)); }

/* 底行：「按这些画图 / 改图」+「还有 n 件没答」。 */
.qg__foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgb(var(--border-lighter-color, 235 238 245)); }
.qg__remaining { font-size: 12px; color: rgb(var(--text-hint-color, 153 153 153)); }