@turingflow/agent-kit 0.0.0-stage → 0.1.1

package/dist/styles.css

@@ -0,0 +1,3354 @@
+:root {
+  --bg: #f4f6fb;
+  --panel: #ffffff;
+  --ink: #1f2733;
+  --ink-soft: #5b6573;
+  /* Shimmer 扫光：亮色模式用「骨架式」——静止文字=浅灰(--shine-base)，扫过高光(--shine)=深墨，
+     高对比、一眼可见；深色调见下方 [data-theme=dark] 仍用白光。 */
+  --shine-base: #c2c9d4;
+  --shine: #1f2733;
+  --line: #e3e8f0;
+  --brand: #2f6bff;
+  --brand-dark: #1f4fd6;
+  --brand-soft: #eaf1ff;
+  --user-bubble: #2f6bff;
+  --bot-bubble: #f1f4fa;
+  --danger: #e5484d;
+  --ok: #1f9d55;
+  --radius: 14px;
+  --shadow: 0 10px 30px rgba(31, 39, 51, 0.08);
+  /* 中栏（聊天消息区）最小宽度：移动端视口小于该值时中栏不再压缩（保持此宽度，超出部分
+     被壳层裁切 = 放弃适配，不显示提示页）。改这里即可整体调宽/调窄 */
+  --chat-min-w: 360px;
+  /* 输入框（单行态）卡片高度：textarea 最小高 60px（见 ChatWindow MIN_TEXTAREA_HEIGHT）
+     + composer 上下内边距 24px。思考直播小窗最大高度 = 该值 ×2，超出在框内滚动。 */
+  --chat-input-h: 84px;
+  --chat-thinking-max-h: calc(var(--chat-input-h) * 2);
+  /* 语义化扩展色（浅色默认值 = 原硬编码色，深色主题在下方 :root[data-theme="dark"] 整体换肤） */
+  --shell-bg: #ffffff;
+  --sidebar-bg: #f7f8fa;
+  --right-bg: #ffffff;
+  --hover: rgba(0,0,0,.05);
+  --hover-strong: #f0f1f4;
+  --active: #e8eaee;
+  --field-bg: #ffffff;
+  --field-soft: #fafbfc;
+  --overlay-bg: #ffffff;
+  --toast-bg: #ffffff;
+  --modal-mask: rgba(20, 28, 40, .45);
+  --fade-stop: rgba(255,255,255,.94);
+  --danger-soft: #fff0f0;
+  --ok-soft: #e9f8f0;
+  --warn-soft: #fef3e2;
+  --mark-bg: rgba(0, 0, 0, .1);
+  --user-bubble-soft: #f0f0f0;
+  --send-bg: #1f2733;
+  --send-bg-hover: #2f3b4a;
+  --send-ink: #ffffff;
+  --quote-bg: #f0f0f0;
+  --quote-line: #e0e0e0;
+  --brand-line: #cfe0ff;
+  --brand-line-strong: #b7d2ff;
+  --table-stripe: rgba(0,0,0,.02);
+  --scrollbar: rgba(31,39,51,.18);
+  --scrollbar-hover: rgba(31,39,51,.32);
+  --copied-bg: #e6f4ea;
+  --copied-ink: #1a7f37;
+  --drawer-shadow: -12px 0 40px rgba(31, 39, 51, .18);
+  --mobile-drawer-shadow: 0 8px 40px rgba(31, 39, 51, .22);
+  --spin-edge: rgba(0,0,0,.12);
+  --spin-top: rgba(0,0,0,.42);
+  /* 侧边消息滑块：亮色主题 —— 视口内可见=深墨（亮），滚出视口=浅灰 */
+  --slider-on: rgba(31, 39, 51, .52);
+  --slider-off: rgba(31, 39, 51, .16);
+  --slider-hover: #1f2733;
+}
+
+/* ============ 深色主题（参考 WorkBuddy 桌面端深色配色） ============
+   通过 <html data-theme="dark"> 切换（用户菜单「外观」segment / 系统偏好）。
+   核心语义变量换肤：炭黑底 + 白字 + 灰阶边框 + 品牌蓝点缀；组件硬编码色已收敛到上方变量。 */
+:root[data-theme="dark"] {
+  /* 中性灰阶对齐 WorkBuddy 桌面端深色（去蓝绿偏色）：页面 #1a1a1a / 主面 #1f1f1f / 卡片 #252525 / 描边 #333（白低透） */
+  --bg: #1a1a1a;
+  --panel: #252525;
+  --ink: #ededed;
+  --ink-soft: #9a9a9a;
+  /* Shimmer 扫光：暗色模式静止文字=浅灰(--shine-base)，高光=白（深底上亮闪）。 */
+  --shine-base: #9a9a9a;
+  --shine: #ffffff;
+  --line: #333333;
+  --brand: #2f6bff;
+  --brand-dark: #7fa5ff;
+  --brand-soft: rgba(47, 107, 255, .16);
+  --user-bubble: #2f6bff;
+  --bot-bubble: #252525;
+  --danger: #f0616d;
+  --ok: #34b36b;
+  --radius: 14px;
+  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
+  --chat-min-w: 360px;
+  --shell-bg: #1a1a1a;
+  --sidebar-bg: #1f1f1f;
+  --right-bg: #252525;
+  --hover: rgba(255,255,255,.07);
+  --hover-strong: #2a2a2a;
+  --active: #333333;
+  --field-bg: #1f1f1f;
+  --field-soft: #262626;
+  --overlay-bg: #252525;
+  --toast-bg: #252525;
+  --modal-mask: rgba(0, 0, 0, .55);
+  --fade-stop: rgba(26, 26, 26, .94);
+  --danger-soft: rgba(240, 97, 109, .14);
+  --ok-soft: rgba(52, 179, 107, .14);
+  --warn-soft: rgba(245, 166, 35, .16);
+  --user-bubble-soft: #2e2e2e;
+  --send-bg: #ededed;
+  --send-bg-hover: #ffffff;
+  --send-ink: #1a1a1a;
+  --quote-bg: #1f1f1f;
+  --quote-line: #333333;
+  --mark-bg: rgba(255, 255, 255, .18);
+  --brand-line: rgba(47, 107, 255, .4);
+  --brand-line-strong: rgba(47, 107, 255, .55);
+  --table-stripe: rgba(255,255,255,.03);
+  --scrollbar: rgba(255,255,255,.16);
+  --scrollbar-hover: rgba(255,255,255,.3);
+  --copied-bg: rgba(52, 179, 107, .16);
+  --copied-ink: #5fd693;
+  --drawer-shadow: -12px 0 40px rgba(0, 0, 0, .5);
+  --mobile-drawer-shadow: 0 8px 40px rgba(0, 0, 0, .55);
+  --spin-edge: rgba(255,255,255,.2);
+  --spin-top: rgba(255,255,255,.5);
+  /* 侧边消息滑块：暗色主题 —— 视口内可见=亮白，滚出视口=暗灰 */
+  --slider-on: rgba(255, 255, 255, .82);
+  --slider-off: rgba(255, 255, 255, .17);
+  --slider-hover: #ffffff;
+}
+
+* { box-sizing: border-box; }
+
+/* 细滚动条：与 WorkBuddy 一致（4px 圆角浅灰） */
+* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
+*::-webkit-scrollbar { width: 4px; height: 4px; }
+*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; }
+*::-webkit-scrollbar-track { background: transparent; }
+/* 聊天消息区 + 右栏滚动条：自动隐藏（平时透明，滚动/悬停时显现，1.5s 无操作渐隐）。
+   webkit 的 ::-webkit-scrollbar 伪元素不支持 CSS 动画，由 JS（.sb-active）切换显示；
+   Firefox 用 scrollbar-color 同样随 .sb-active 切换（默认透明，滚动时显现） */
+.chat-body, .chat-right-section-body { scrollbar-width: thin; scrollbar-color: rgba(31,39,51,0) transparent; }
+.chat-body.sb-active, .chat-right-section-body.sb-active { scrollbar-color: var(--scrollbar) transparent; }
+.chat-body::-webkit-scrollbar-thumb,
+.chat-right-section-body::-webkit-scrollbar-thumb { background: rgba(31,39,51,0); }
+.chat-body.sb-active::-webkit-scrollbar-thumb,
+.chat-right-section-body.sb-active::-webkit-scrollbar-thumb { background: var(--scrollbar); }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow-x: hidden;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; }
+
+/* ============ 登录页（黑白灰色系） ============ */
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(1200px 600px at 50% -10%, #eef0f4 0%, var(--bg) 55%);
+  padding: 24px;
+}
+.login-shell { width: 100%; max-width: 420px; }
+.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
+.login-brand-logo { height: 32px; width: auto; display: block; }
+.login-brand-title h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
+.login-brand-title span { font-size: 13px; color: var(--ink-soft); }
+
+.login-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 28px 26px 24px;
+  box-shadow: var(--shadow);
+  position: relative;
+  overflow: hidden;
+}
+.login-card-line {
+  position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  background: linear-gradient(90deg, #2a3140, #8b93a3);
+}
+.login-dingtalk-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
+.login-dingtalk-heading strong { font-size: 17px; }
+.login-dingtalk-heading span { font-size: 13px; color: var(--ink-soft); }
+
+/* 登录方式选择器（AUTH_PROVIDER 多个时渲染）：黑白灰 */
+.login-provider-list { display: flex; flex-direction: column; gap: 10px; }
+.login-provider-button {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  width: 100%; padding: 13px 16px; border-radius: 10px;
+  background: var(--panel);
+  border: 1px solid var(--ink);
+  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
+  transition: background .15s ease, color .15s ease;
+}
+.login-provider-button svg { width: 22px; height: 22px; fill: currentColor; }
+
+/* 兼容旧用法：单个登录按钮（同样黑白灰） */
+.login-dingtalk-button {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  width: 100%; padding: 13px 16px; border-radius: 10px;
+  background: var(--panel);
+  border: 1px solid var(--ink);
+  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
+  transition: background .15s ease, color .15s ease;
+}
+.login-dingtalk-button svg { width: 22px; height: 22px; fill: currentColor; }
+
+.login-auto-status {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: var(--ink-soft); margin: 12px 0 14px;
+}
+.login-auto-status i {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft);
+  animation: pulse 1s infinite ease-in-out;
+}
+@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
+
+.login-dev-wrap { margin-top: 16px; }
+.login-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 12px; margin: 8px 0; }
+.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
+.login-dev-button {
+  width: 100%; padding: 11px 16px; border-radius: 10px;
+  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
+  font-size: 14px; font-weight: 600; cursor: pointer;
+  text-decoration: none; display: block; text-align: center;
+  transition: background .15s ease, color .15s ease;
+}
+.login-dev-button:disabled { opacity: .6; cursor: default; }
+
+.login-error { color: var(--danger); font-size: 13px; margin-top: 14px; min-height: 18px; }
+.login-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0; }
+.login-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); }
+.login-copyright { color: var(--ink-soft); font-size: 12px; margin-top: 6px; }
+
+/* ============ 聊天页 ============ */
+/* 三栏布局壳：左栏 / 中栏 / 右栏 横向铺满；左右默认收起（flex-basis 0），中栏全屏。
+   应用窗口宽度由用户缩放控制：禁止窗口级水平滚动，右栏打开时压缩中栏而非横向溢出 */
+.chat-shell { height: 100vh; display: flex; flex-direction: row; align-items: stretch; background: var(--shell-bg); overflow-x: hidden; overflow-y: hidden; }
+.chat-topbar {
+  position: relative;
+  display: flex; align-items: center; gap: 12px;
+  flex: 0 0 auto;
+  height: 46px; padding: 0 16px;
+  border-bottom: 1px solid var(--line); background: var(--panel);
+}
+.chat-brand { display: flex; align-items: center; gap: 10px; }
+.chat-logo { height: 26px; width: auto; display: block; flex: 0 0 auto; }
+/* 顶栏左侧：侧边栏展开按钮 + 品牌 Logo + 会话标题。
+   flex:1 + min-width:0 → 空间不足时由它承担收缩（挤压标题），右侧按钮组始终完整。
+   overflow:hidden 防止长标题把 flex 项最小宽度撑死、把右侧按钮推出顶栏。 */
+.chat-topbar-left { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; }
+/* 按钮组固定不收缩：从右往左占据空间，空间不够时挤压左侧标题而不是被裁切 */
+.chat-topbar-right { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
+.chat-sidebar-toggle {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; border-radius: 8px;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-sidebar-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+/* 中栏：全屏主体。真正的最小宽度 = 正常手机宽度（375px，与 JS 侧 CHAT_MIN_W 保持一致）：
+   即使 PC 上拖宽右侧边栏、或窗口收窄，中间 chat 区域也不会被挤压到 375px 以下。
+   min(375px, 100%) 保证窗口比手机还窄（如 360px 小屏）时回退为全宽，不产生水平溢出。 */
+.chat-main { flex: 1 1 auto; min-width: min(375px, 100%); display: flex; flex-direction: column; height: 100vh; position: relative; }
+.chat-main-inner {
+  flex: 0 1 auto;
+  min-height: 0;
+  display: flex; flex-direction: column;
+  justify-content: flex-end;
+  /* 输入区宽度 = min(中栏可用宽度的 80%, 1200px) 居中：
+     - 中栏 < 1200px/0.8 = 1500px 时，按 80% 缩放（随窗口/右栏自适应，两侧留白 10%）；
+     - 中栏 ≥ 1500px（超大屏）时封顶 1200px，不再随百分比继续变宽。
+     中栏 = 窗口 − 左栏 − 右栏；中栏最小宽度由 .chat-main 的 min-width 保证（375px）。 */
+  width: 100%; max-width: min(80%, 1200px); margin: 0 auto;
+  position: relative;
+}
+/* 新建任务空态（无消息）：输入区与欢迎/提示一起垂直居中，参考 WB 新建任务界面；
+   用户输入第一条消息后 is-empty 移除，chat-main-inner 自动回到底部常规布局 */
+.chat-main.is-empty .chat-main-inner {
+  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  width: min(680px, calc(100% - 32px)); max-width: none; margin: 0;
+  gap: 14px;
+  justify-content: center;
+}
+.chat-main.is-empty .chat-empty { margin: 0 auto 4px; max-width: 520px; }
+.chat-main.is-empty .chat-suggestions { flex-wrap: wrap; justify-content: center; gap: 8px; }
+.chat-main.is-empty .chat-composer-stack { margin: 0; width: 100%; box-sizing: border-box; }
+/* 离开底部时：消息区与输入区交界的浮层（锚定输入区容器顶部 bottom:100%，滚动时不动）。
+   overlay 自身高度 0，fade 向上延伸进消息区、按钮浮在其上 */
+.chat-body-overlay {
+  position: absolute; left: 0; right: 0; bottom: 100%; height: 0;
+  pointer-events: none; z-index: 5;
+}
+/* 消息底部渐隐 + 毛玻璃模糊 */
+.chat-body-fade {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--fade-stop) 100%);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+/* Electron：backdrop-filter 合成会把覆盖区文字一起糊掉，仅保留渐变渐隐（浏览器保持毛玻璃） */
+.env-electron .chat-body-fade {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+/* 居中「回到底部」按钮：一直悬浮在输入框上方 */
+.chat-bottom-btn {
+  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
+  width: 34px; height: 34px; border-radius: 50%; z-index: 6;
+  border: 1px solid var(--line); background: var(--field-bg); color: var(--ink-soft);
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; pointer-events: auto;
+  box-shadow: 0 2px 8px rgba(31,39,51,.14);
+  transition: background .15s ease, color .15s ease, border-color .15s ease;
+}
+.chat-bottom-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+/* 大模型输出中（busy）且用户离开底部：按钮细环转圈动画（subtle）。
+   单段弧：起点最亮，沿圆周到尾端淡出为 0（conic 渐变），旋转产生流动感；
+   环形 mask 保留 1px 细环。颜色用主题变量 --spin-edge（深色下为柔和的亮灰、
+   浅色下为浅灰）：对比足够但不过亮。 */
+.chat-bottom-btn.is-live { border-color: transparent; }
+.chat-bottom-btn.is-live::before {
+  content: ""; position: absolute; inset: 0; border-radius: 50%;
+  background: conic-gradient(from 0deg,
+    transparent 0deg,
+    var(--spin-edge) 60deg,
+    var(--spin-edge) 300deg,
+    transparent 360deg);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
+          mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
+  animation: chatBottomLive 1.1s linear infinite;
+}
+@keyframes chatBottomLive { to { transform: rotate(360deg); } }
+/* 左栏：会话列表 + 底部用户信息；默认收起（flex-basis 0 + overflow hidden + 内容 visibility hidden） */
+.chat-pane-left { flex: 0 0 0; overflow: hidden; transition: flex-basis .18s ease; border-right: 1px solid var(--line); }
+.chat-pane-left.is-open { flex-basis: 280px; }
+.chat-pane-left:not(.is-open) .chat-sidebar-inner { visibility: hidden; }
+.chat-sidebar-inner {
+  width: 280px; height: 100%;
+  display: flex; flex-direction: column;
+  background: var(--sidebar-bg);
+}
+/* 右栏：上半输入文件 / 下半输出产物；默认收起。拖动改宽时用 --right-w 覆盖基础宽度。
+   展开默认与中间消息区平分剩余水平宽度（50%） */
+.chat-pane-right { flex: 0 0 0; overflow: hidden; transition: flex-basis .18s ease; border-left: 1px solid var(--line); position: relative; }
+/* 右栏宽上限 = 容器宽 − 左栏实际占用(var(--left-used)：开 280px / 关 0px) − 中栏最小宽(375)：
+   拖宽右栏可以把中间 chat 一直压到 375px 最小宽；与 JS 拖拽侧（LEFT_PANE_W / CHAT_MIN_W）同源，双保险。
+   窗口极窄时 calc 为负 → flex-basis 按 0 处理。 */
+.chat-pane-right.is-open { flex-basis: min(var(--right-w, 50%), calc(100% - var(--left-used, 280px) - 375px)); }
+.chat-pane-right.is-dragging { transition: none; }
+.chat-pane-right:not(.is-open) .chat-right-inner { visibility: hidden; }
+/* 产物预览全屏（toggle）：右栏占满 app 整个宽度，左栏与中栏让位隐藏；再点还原。
+   仅在右栏可见时生效（chat-shell 的 has-preview-full 类已带 rightShown 条件）。 */
+.chat-shell.has-preview-full .chat-pane-left,
+.chat-shell.has-preview-full .chat-main { display: none; }
+.chat-shell.has-preview-full .chat-pane-right {
+  flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important;
+}
+.chat-shell.has-preview-full .chat-resizer { display: none; }
+/* 中/右栏之间的拖拽 resizer：hover 时 2px 竖条 dim-in 渐显；拖动中常显 */
+.chat-resizer {
+  position: absolute; left: -5px; top: 0; bottom: 0; width: 10px;
+  cursor: col-resize; z-index: 40;
+}
+.chat-resizer::after {
+  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
+  transform: translateX(-50%);
+  background: rgba(31,39,51,.28);
+  opacity: 0; transition: opacity .18s ease;
+}
+.chat-pane-right:not(.is-open) .chat-right-inner { visibility: hidden; }
+.chat-right-inner {
+  width: 100%; height: 100%;
+  display: flex; flex-direction: column;
+  background: var(--right-bg);
+}
+.chat-right-section { display: flex; flex-direction: column; min-height: 0; }
+/* 输入区：排在输出区下方（视觉顺序：输出在上 / 输入在下）；高度自适应内容（不强制 50%），
+   上限 50%；文件项单列占满整行，长文件名允许换行，避免两列布局/省略号造成"被截断"的观感 */
+.chat-right-section--inputs { flex: 0 1 auto; max-height: 50%; order: 2; border-top: 1px solid var(--line); }
+.chat-right-section--inputs .chat-right-section-body { display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow-y: auto; }
+.chat-right-section--inputs .chat-right-file { flex: 0 0 auto; width: 100%; }
+/* 输出区：排在输入区上方（视觉顺序：输出在上 / 输入在下）；默认占满剩余高度（上限 50%）；
+   无输入文件时 is-full 占满 100% */
+.chat-right-section--outputs { flex: 1 1 auto; max-height: 50%; order: 1; }
+.chat-right-section--outputs.is-full { flex: 1 1 auto; max-height: 100%; }
+.chat-right-section-head {
+  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
+  height: 46px; padding: 0 12px; border-bottom: 1px solid var(--line);
+  font-size: 13px; font-weight: 700; color: var(--ink);
+}
+.chat-right-count {
+  font-size: 11px; color: var(--ink-soft); background: var(--line);
+  border-radius: 999px; padding: 1px 7px; font-weight: 600;
+}
+/* 标题 + 计数紧贴一行（计数在"输出产物"文字右边）；"打开文件夹"按钮仍靠右 */
+.chat-right-section-title {
+  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
+}
+/* 打开产物文件夹（本地 app）：section-head 内的小按钮，图标+文字，hover 仅变色不位移、不变边框 */
+.chat-right-folder-btn {
+  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
+  height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
+  background: transparent; color: var(--ink-soft); font-size: 11.5px; font-weight: 600;
+  cursor: pointer; transition: color .15s ease, background .15s ease;
+}
+.chat-right-folder-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.chat-right-folder-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
+.chat-right-folder-btn:active { color: var(--ink); }
+.chat-right-section-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
+/* 输出区：列表项垂直排列并拉开间距 */
+.chat-right-section--outputs .chat-right-section-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
+.chat-right-empty { padding: 18px 10px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
+.chat-right-file {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 8px; border-radius: 8px;
+}
+.chat-right-file-main {
+  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
+  text-decoration: none; color: inherit;
+}
+.chat-right-file-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
+.chat-right-file-name {
+  font-size: 12.5px; color: var(--ink);
+  white-space: normal; word-break: break-all; line-height: 1.35;
+}
+.chat-right-file-meta { font-size: 11px; color: var(--ink-soft); }
+.chat-right-file-dl {
+  flex: none; width: 26px; height: 26px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 6px; color: var(--ink-soft); text-decoration: none;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-right-file-dl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+/* 左栏底部用户信息（WorkBuddy 风格）：用户区域朴素无边框无背景、点击也不改变外观；
+   点击后用户菜单 popup（外观 segment + 退出登录）出现在 profile 上方；点菜单外任意处关闭 */
+.chat-sidebar-user {
+  position: relative;
+  flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--line);
+  display: flex; flex-direction: column; gap: 8px;
+}
+.chat-sidebar-user-trigger {
+  display: block; width: 100%; border: none; background: none; padding: 6px 4px;
+  cursor: pointer; text-align: left; border-radius: 8px;
+}
+.chat-sidebar-user-row { display: flex; align-items: center; gap: 10px; }
+.chat-sidebar-user-name {
+  font-size: 13.5px; font-weight: 600; color: var(--ink);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* 用户菜单 popup：悬浮于用户块上方。不再使用全屏 backdrop（透明 fixed 层会拦截消息区滚轮，
+   造成"菜单开着时悬停消息区无法滚动"）；关闭改由 ChatWindow 的 document pointerdown 监听处理，
+   滚轮事件穿透到消息区，悬停即可滚动（WorkBuddy 同款行为）。 */
+.chat-user-menu {
+  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: 232px; z-index: 60;
+  background: var(--overlay-bg); border: 1px solid var(--line);
+  border-radius: 12px; box-shadow: var(--shadow);
+  padding: 6px; display: flex; flex-direction: column; gap: 2px;
+  animation: chatUserMenuIn .14s ease;
+}
+@keyframes chatUserMenuIn {
+  from { opacity: 0; transform: translate(-50%, 4px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
+.chat-user-menu-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  padding: 8px 10px;
+}
+.chat-user-menu-label { font-size: 13px; color: var(--ink); }
+/* segment：浅色 / 深色（外观切换） */
+.chat-user-menu-segment {
+  display: inline-flex; background: var(--hover-strong); border-radius: 8px; padding: 2px; gap: 2px;
+}
+.chat-user-menu-seg {
+  border: none; background: transparent; cursor: pointer;
+  padding: 4px 12px; border-radius: 6px;
+  font-size: 12.5px; color: var(--ink-soft);
+  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
+}
+.chat-user-menu-seg.is-on {
+  background: var(--overlay-bg); color: var(--ink); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
+}
+.chat-user-menu-sep { height: 1px; background: var(--line); margin: 2px 0; }
+/* 开关（显示上下文使用量 / 显示模型）：track + knob 的两态滑块 */
+.chat-user-menu-switch {
+  flex: 0 0 auto; position: relative; cursor: pointer;
+  width: 34px; height: 20px; padding: 0;
+  border: none; border-radius: 999px;
+  background: var(--hover-strong);
+  transition: background .16s ease;
+}
+.chat-user-menu-switch.is-on { background: var(--brand); }
+.chat-user-menu-switch-knob {
+  position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
+  transition: transform .16s ease;
+}
+.chat-user-menu-switch.is-on .chat-user-menu-switch-knob { transform: translateX(14px); }
+.chat-user-menu-item {
+  display: block; width: 100%; text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
+  transition: background .15s ease, color .15s ease;
+}
+.chat-user-menu-item--danger { color: var(--danger); }
+.chat-sidebar-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  flex: 0 0 auto;
+  height: 46px; padding: 0 14px;
+}
+/* 头部右上角应用名：logo 在左、应用名靠右（space-between 下 flex:1 推右） */
+.chat-sidebar-appname {
+  margin-left: auto; flex: 0 1 auto; min-width: 0;
+  font-size: 12.5px; color: var(--ink-soft);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-sidebar-title { font-weight: 700; font-size: 15px; color: var(--ink); }
+/* 左栏顶部 Logo（宿主传入）：固定高度、保持比例，与「+新对话」按钮同行 */
+.chat-sidebar-logo { height: 24px; width: auto; display: block; }
+/* 「新建任务」独立固定行（不随会话列表滚动）：头部下方一行，⊕ 圆圈加号 + 文字；
+   与下方会话列表只留间距、不画分隔线 */
+.chat-sidebar-newrow {
+  flex: 0 0 auto;
+  padding: 8px 8px 6px;
+}
+.chat-sidebar-new {
+  display: flex; align-items: center; gap: 7px; width: 100%;
+  border: none; background: transparent; color: var(--ink);
+  padding: 7px 10px; border-radius: 8px;
+  font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
+  transition: background .15s ease;
+}
+/* ⊕ 圆圈加号：整体外径约 14px，略小于 13.5px 文字高度（描边同步加粗以免缩小后发虚） */
+.chat-sidebar-new-icon {
+  width: 8px; height: 8px; flex: 0 0 auto;
+  border: 1.2px solid currentColor; border-radius: 50%;
+  padding: 1.5px; box-sizing: content-box;
+  fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round;
+}
+.chat-sidebar-list { flex: 1; overflow-y: auto; padding: 10px 8px 8px; }
+.chat-sidebar-empty { padding: 24px 12px; font-size: 13px; color: var(--ink-soft); text-align: center; }
+.chat-sidebar-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px; border-radius: 9px; cursor: pointer;
+  transition: background .15s ease;
+}
+.chat-sidebar-item.is-active { background: var(--active); }
+/* 会话项主体：标题 + 时间（hover 时时间隐藏、位置让给编辑/删除按钮）同行，标题单行。
+   main 固定 22px 行高、按钮与文字同高 → hover 前后 item 高度恒定、不抖动 */
+.chat-sidebar-item-main {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; flex-direction: row; align-items: center; gap: 6px;
+  height: 26px;
+}
+.chat-sidebar-item-title {
+  flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
+  font-size: 13px; color: var(--ink);
+}
+.chat-sidebar-item-title:not(.is-marquee) .chat-sidebar-item-title-text {
+  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-sidebar-item-title-text { display: inline-block; white-space: nowrap; width: max-content; min-width: 100%; line-height: 26px; }
+/* 超长标题走马灯：默认不播放（transform 归零 = 标题开头），hover 播放；
+   鼠标移走后 animation 移除 → 立即回到标题开始处 */
+.chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-text {
+  animation: none;
+  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis;
+}
+/* 非 hover：只显示单份 t1 并省略，避免双份文本在裁切窗口里拼接成重复 */
+.chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-t2 { display: none; }
+.chat-sidebar-item-title-t1, .chat-sidebar-item-title-t2 { display: inline-block; }
+@keyframes chatTitleMarquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+.chat-sidebar-item-time { flex: 0 0 auto; font-size: 11px; color: #9aa1ab; line-height: 26px; }
+/* 会话运行中：时间位显示黑白灰转圈动画（颜色随主题变量 --spin-edge/--spin-top 明暗变化） */
+.chat-sidebar-item-spinner {
+  display: inline-block; width: 12px; height: 12px; box-sizing: border-box;
+  border: 2px solid var(--spin-edge); border-top-color: var(--spin-top);
+  border-radius: 50%; animation: chatSpin .7s linear infinite;
+  vertical-align: -2px;
+}
+/* 后台跑完、当前未查看的会话：时间位显示小绿圈（点进该会话即消失）。
+   实心绿点 + 轻微脉冲，在明暗主题下均醒目，但不喧宾夺主。 */
+.chat-sidebar-item-done {
+  display: inline-block; width: 8px; height: 8px; box-sizing: border-box;
+  border-radius: 50%; background: #21b573; vertical-align: 0;
+  box-shadow: 0 0 0 0 rgba(33, 181, 115, .5);
+  animation: chatSidebarDonePulse 1.6s ease-out infinite;
+}
+@keyframes chatSidebarDonePulse {
+  0% { box-shadow: 0 0 0 0 rgba(33, 181, 115, .5); }
+  70% { box-shadow: 0 0 0 5px rgba(33, 181, 115, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(33, 181, 115, 0); }
+}
+/* hover 时时间隐藏，⋯ 按钮原位出现（点开重命名/删除菜单）。actions 不被标题挤压 */
+.chat-sidebar-item-actions { display: none; align-items: center; gap: 0; flex: 0 0 auto; }
+.chat-sidebar-item-act {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; border-radius: 50%;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+  transition: color .15s ease;
+}
+.chat-sidebar-item-act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+/* 会话条目 ⋯ 按钮：复用 msg-footer「更多」图标——实心圆点（fill 当前色、无描边），菜单打开时高亮 */
+.chat-sidebar-item-act.chat-sidebar-item-more svg { width: 17px; height: 17px; }
+.chat-sidebar-item-act.chat-sidebar-item-more svg circle { fill: currentColor; stroke: none; }
+.chat-sidebar-item-act.chat-sidebar-item-more.is-open { color: var(--ink); background: var(--line); }
+/* 侧栏分组 ⋯ 与条目 ⋯ 视觉统一：同为实心圆点（与 msg-footer「更多」一致） */
+.chat-sidebar-group-more svg circle,
+.chat-sidebar-item-more svg circle { fill: currentColor; stroke: none; }
+.chat-sidebar-rename-input {
+  flex: 1 1 auto; min-width: 0;
+  border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
+  font-size: 13px; background: var(--field-bg); color: var(--ink); outline: none;
+}
+.chat-sidebar-rename-input:focus { border-color: var(--brand); }
+/* 结构化提问卡片（AskUserQuestion）：模型需要用户确认/选择时，正文下方渲染的交互卡片 */
+.chat-question-area { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; margin-bottom: 4px; }
+.chat-question-wrap { display: flex; flex-direction: column; gap: 10px; }
+.chat-question-card {
+  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
+  background: var(--panel); display: flex; flex-direction: column; gap: 8px;
+}
+.chat-question-header {
+  align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ink-soft);
+  background: var(--hover); border-radius: 999px; padding: 2px 10px;
+}
+.chat-question-text { font-size: 15px; color: var(--ink); line-height: 1.5; }
+.chat-question-options { display: flex; flex-wrap: wrap; gap: 8px; }
+.chat-question-opt {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  border: 1px solid var(--line); background: var(--field-bg); border-radius: 9px;
+  padding: 8px 12px; cursor: pointer; font-size: 12.5px; color: var(--ink);
+  transition: border-color .15s ease, background .15s ease;
+}
+.chat-question-opt-label { font-weight: 600; }
+.chat-question-opt-desc { color: var(--ink-soft); font-size: 12px; }
+.chat-question-opt.is-selected {
+  border-color: var(--ink); background: var(--hover);
+  box-shadow: 0 0 0 1px var(--ink) inset;
+}
+.chat-question-opt.is-selected .chat-question-opt-label::after {
+  content: " ✓"; color: var(--ink); font-weight: 700;
+}
+.chat-question-multi {
+  margin-left: 6px; font-size: 11px; color: var(--ink-soft); font-weight: 400;
+}
+.chat-question-other { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
+.chat-question-other-label { font-size: 11px; color: var(--ink-soft); }
+.chat-question-other-input {
+  width: 100%; box-sizing: border-box;
+  border: 1px solid var(--line); border-radius: 8px;
+  background: var(--field-bg); color: var(--ink);
+  padding: 7px 10px; font-size: 13px;
+}
+.chat-question-other-input::placeholder { color: var(--ink-soft); opacity: .8; }
+.chat-question-other-input:focus { outline: none; border-color: var(--ink); }
+.chat-question-submit-row { display: flex; justify-content: flex-end; margin-top: 2px; }
+.chat-question-submit {
+  border: none; border-radius: 999px; padding: 7px 18px; cursor: pointer;
+  font-size: 13px; font-weight: 600; color: var(--panel); background: var(--ink);
+  transition: opacity .15s ease, transform .1s ease;
+}
+.chat-question-submit:active:not(:disabled) { transform: scale(.98); }
+.chat-question-submit:disabled {
+  background: var(--line); color: var(--ink-soft); cursor: not-allowed; font-weight: 500;
+}
+.chat-question-card--done { background: var(--hover); border-style: dashed; }
+.chat-question-answered-badge {
+  align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink);
+}
+.chat-question-answered-text {
+  font-size: 13px; color: var(--ink); line-height: 1.6; white-space: pre-wrap;
+}
+.chat-title { font-weight: 700; font-size: 15px; letter-spacing: .3px; }
+.chat-title--center {
+  position: absolute; left: 50%; transform: translateX(-50%);
+  white-space: nowrap;
+}
+/* 顶栏左侧会话标题：单行省略，给右侧四个按钮让位。
+   上限用 min(100%, 420px) 相对父容器而非 vw——vw 以视口计，右侧面板打开
+   挤窄中栏时 32vw 仍按整窗计算，会把按钮组推出顶栏右缘（历史 bug）。 */
+.chat-title--left {
+  flex: 0 1 auto; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: min(100%, 420px);
+}
+/* 顶栏图标按钮（search / 分享 / 历史）：视觉与 .chat-sidebar-toggle 一致 */
+.chat-topbar-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; border-radius: 8px;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-topbar-btn.is-active { background: rgba(31,79,214,.10); color: var(--brand); }
+.chat-topbar-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+/* 分享图标：采用 Ionicons arrow-redo-outline（闭合轮廓的空心曲线箭头，箭头有身体、内部空心） */
+/* 描边宽度跟随顶栏通用值 1.8，与 search/history 等图标保持一致（不再单独加粗） */
+.chat-topbar-btn[aria-label="分享"] svg { stroke-width: 1.8; }
+.chat-topbar-right { gap: 6px; }
+
+/* 面板打开时顶栏保持在遮罩之上（点其它顶栏按钮可切换面板） */
+.chat-topbar { z-index: 220; }
+/* 面板点击关闭遮罩：盖住中栏内容区（顶栏 z 更高不受影响） */
+.chat-panel-backdrop {
+  position: fixed; inset: 0; z-index: 200;
+  background: transparent;
+}
+/* ---- 对话内搜索条（顶栏下方） ---- */
+.chat-search-bar {
+  flex: 0 0 auto;
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--line); background: var(--panel);
+  z-index: 210;
+}
+.chat-search-bar-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }
+.chat-search-bar-input {
+  flex: 1 1 auto; min-width: 0; height: 30px;
+  border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg);
+  padding: 0 10px; font-size: 13px; color: var(--ink); outline: none;
+}
+.chat-search-bar-input:focus { border-color: var(--brand); }
+.chat-search-bar-count {
+  flex: 0 0 auto; font-size: 12px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; min-width: 34px; text-align: center;
+}
+.chat-search-bar-btn {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: 7px;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+}
+.chat-search-bar-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.chat-search-bar-close { color: var(--ink-soft); }
+
+/* ---- 历史提问下拉 ---- */
+.chat-history-pop,
+.chat-share-pop {
+  position: absolute; top: 66px; right: 12px; z-index: 230;
+  width: min(360px, calc(100vw - 24px));
+  background: var(--overlay-bg); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(20, 27, 38, .16);
+  overflow: hidden;
+}
+.chat-history-head {
+  padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
+  border-bottom: 1px solid var(--line);
+}
+.chat-history-list { max-height: min(56vh, 420px); overflow-y: auto; padding: 6px; }
+.chat-history-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--ink-soft); }
+.chat-history-item {
+  display: flex; align-items: flex-start; width: 100%; text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
+  line-height: 1.5;
+}
+.chat-history-item + .chat-history-item { margin-top: 2px; }
+.chat-history-text {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; word-break: break-word;
+}
+
+/* ---- 分享面板：三选项（复制链接 / 浏览器打开 / 发送到 OA 聊天） ---- */
+.chat-share-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
+  border-bottom: 1px solid var(--line);
+}
+.chat-share-close {
+  flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
+  border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--ink-soft);
+}
+.chat-share-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+.chat-share-loading,
+.chat-share-error { padding: 16px 14px; font-size: 13px; color: var(--ink-soft); }
+.chat-share-error { color: var(--danger); }
+.chat-share-opt {
+  display: flex; align-items: center; gap: 11px; width: 100%;
+  padding: 11px 14px; border: none; background: transparent; cursor: pointer; text-align: left;
+}
+.chat-share-opt + .chat-share-opt { border-top: 1px solid var(--line); }
+.chat-share-opt:disabled { opacity: .55; cursor: default; }
+.chat-share-opt-icon {
+  flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
+  background: var(--field-soft); border-radius: 9px; color: var(--ink);
+}
+.chat-share-opt-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.chat-share-opt-body { display: flex; flex-direction: column; min-width: 0; }
+.chat-share-opt-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
+.chat-share-opt-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
+.chat-share-opt-state { flex: 0 0 auto; margin-left: auto; font-size: 12px; color: #1f9d55; font-weight: 600; }
+.chat-share-oa-msg { margin: 4px 14px 12px; font-size: 12px; color: #1f9d55; }
+.chat-share-oa-msg.is-error { color: var(--danger); }
+/* 飞书分享成功后的轻提示条：与上方操作项区分，作为"已分享"反馈，整条可点击跳转会话 */
+.chat-share-oa-link {
+  display: flex; align-items: center; gap: 6px;
+  margin: 2px 14px 12px; padding: 7px 10px;
+  width: calc(100% - 28px); box-sizing: border-box;
+  border: 1px solid var(--line); border-radius: 8px;
+  background: var(--hover); cursor: pointer;
+  font-size: 12px; color: #1f9d55; font-weight: 600;
+  text-align: left; transition: background 0.15s ease;
+}
+.chat-share-oa-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
+/* 分享直达发送（未打开面板）的结果反馈：顶部居中 toast，黑白灰系 */
+.chat-share-toast {
+  position: fixed;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  padding: 7px 16px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--toast-bg);
+  color: var(--ink);
+  font-size: 13px;
+  box-shadow: 0 6px 24px rgba(31, 39, 51, 0.12);
+  animation: chatShareToastIn 0.18s ease-out;
+}
+.chat-share-toast.is-error { color: var(--danger); border-color: #f1d6d6; }
+@keyframes chatShareToastIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+/* 搜索命中高亮（黑白灰系，参考 wb）：淡灰边框 + 内边距让边框与内容留出呼吸感；
+   命中关键字由正文里的 <mark> 背景高亮（见 Markdown.tsx / UserBubble 的 highlight） */
+.msg.is-search-hit {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 8px 10px;
+  background: var(--field-soft);
+}
+/* 当前定位的命中：边框加深一档 + 背景更实 */
+.msg.is-search-current {
+  border-color: var(--line);
+  background: var(--hover-strong);
+}
+mark {
+  background: var(--mark-bg);
+  color: inherit;
+  border-radius: 3px;
+  padding: 0 2px;
+}
+.chat-user-avatar {
+  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
+  border: 1px solid var(--line); display: block;
+}
+.chat-user-avatar--fallback {
+  background: linear-gradient(135deg, var(--brand), #6b8bff); color: #fff;
+  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
+}
+
+/* 聊天滚动容器：全宽（滚动条贴最右缘，与 wb/豆包 work 一致），
+   消息内容在内部 .chat-body-inner 限宽中栏 80% 居中。
+   scrollbar-gutter: stable：滚动条出现/消失（展开收起思考框导致溢出变化）时始终预留
+   等宽 gutter，内容区宽度恒定——否则滚动条出现瞬间消息列表会整体左移抖动。 */
+.chat-body {
+  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; display: block; scrollbar-gutter: stable;
+  /* 滚动容器全宽：滚动条贴聊天区最右缘（右栏打开时 = 右栏左侧），
+     消息内容限宽由 .chat-body-inner 承担（min(80%, 1200px) 居中） */
+  width: 100%; max-width: none; margin: 0;
+}
+.chat-body-inner {
+  width: 100%; max-width: min(80%, 1200px); margin: 0 auto;
+  box-sizing: border-box;
+  /* 底部留白（WorkBuddy 同款）：消息区垂直高度略大于内容，滚动到底后还能再滚一段，
+     让最后一条回复上方的「更多」菜单向上弹出时有足够空间，不会顶出视口 */
+  padding: 20px 26px 120px 18px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+/* 流式置顶 reserve：消息列表底部的动态 spacer（纯占位，无内容、无背景）。
+   高度由 useChatScroll 的 syncStreamScroll() 计算并实时写入：
+     reserve = max(0, 用户消息偏移 + 一屏 V − 真实内容高)
+   设历史消息高 x、新发消息高 h、回复高 r、视口高 V：
+   - 置顶：reserve 补足「把用户消息顶到视口顶部」所需的滚动范围（否则 scrollTop 被浏览器 clamp）。
+   - 回复未填满（h+r ≤ V）：reserve = V − h − r，总高度 = x + V 恒定 → scrollTop 纹丝不动，
+     不抖动；此时「新消息下方到输入区之间的空白」= V − h，满足「空白 + h = 可见高度 V」。
+   - 回复写长：reserve 自动归零，内容自撑，一次性平滑切到底部跟随。
+
+   ★ 实现硬约束（踩坑记录，勿改）：测「真实内容高」绝不能把 spacer 临时置 0 再读 scrollHeight。
+     scrollHeight 瞬间变短 → 浏览器立即 clamp scrollTop → spacer 恢复后 scrollTop 不回来，
+     表现为「LLM 一开始输出，整条消息列表瞬间掉到下面」。必须用 scrollHeight − spacer 实际高度 反推。 */
+.chat-stream-spacer { flex: 0 0 auto; width: 100%; }
+.chat-empty { margin: auto; text-align: center; color: var(--ink-soft); max-width: 360px; }
+.chat-empty h2 { color: var(--ink); font-size: 18px; margin: 0 0 8px; }
+.chat-empty p { font-size: 14px; line-height: 1.6; }
+.chat-loading-state { padding: 18px 12px; color: var(--ink-soft); font-size: 12.5px; }
+.chat-loading-caption { display: flex; align-items: center; gap: 8px; justify-content: center; line-height: 20px; }
+.chat-loading-spinner {
+  display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; box-sizing: border-box;
+  border: 2px solid var(--spin-edge); border-top-color: var(--spin-top);
+  border-radius: 50%; animation: chatSpin .75s linear infinite;
+}
+.chat-loading-state--session { display: flex; align-items: center; justify-content: center; min-height: 160px; flex: 1; }
+.chat-body.is-loading .chat-body-inner { min-height: 100%; padding-bottom: 20px; }
+.chat-loading-state--sidebar { padding: 12px 8px; }
+.chat-loading-state--sidebar .chat-loading-caption { justify-content: flex-start; padding: 0 4px 10px; }
+.chat-loading-state--artifacts { padding: 16px 12px; }
+.chat-loading-skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
+.chat-loading-skeleton-row { display: flex; align-items: center; gap: 10px; min-height: 25px; }
+.chat-loading-state--artifacts .chat-loading-skeleton-row { min-height: 48px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
+.chat-loading-skeleton-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.chat-loading-skeleton-line, .chat-loading-skeleton-icon {
+  display: block; border-radius: 5px;
+  background: linear-gradient(90deg, var(--hover-strong) 20%, var(--line) 50%, var(--hover-strong) 80%);
+  background-size: 240% 100%; animation: chatSkeletonShine 1.6s ease-in-out infinite;
+}
+.chat-loading-skeleton-line { height: 11px; width: 86%; }
+.chat-loading-skeleton-row:nth-child(2n) .chat-loading-skeleton-line { width: 67%; }
+.chat-loading-skeleton-line.is-short { height: 8px; width: 36%; }
+.chat-loading-skeleton-icon { flex: 0 0 28px; width: 28px; height: 32px; }
+.chat-loading-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 12px; color: var(--ink-soft); font-size: 12.5px; }
+.chat-loading-error button { border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; padding: 4px 9px; }
+@keyframes chatSkeletonShine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .chat-loading-spinner, .chat-loading-skeleton-line, .chat-loading-skeleton-icon { animation: none; }
+}
+.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
+.chat-suggestions button {
+  border: 1px solid var(--line); background: var(--hover-strong); color: var(--ink);
+  border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer;
+}
+
+.msg { display: flex; max-width: 100%; min-width: 0; }
+/* 用户消息：整体右对齐（消息块靠右），气泡内部文字左对齐。
+   宽屏时限制 860px 最大宽度（对标豆包 Work 不占满、右侧留白）；中栏被挤压变窄时
+   min(100%, 860px) 自动取小 → 逐渐占满全部宽度（连续无断点）。答复保持全宽左对齐。 */
+.msg.user {
+  align-self: flex-end; flex-direction: column; align-items: flex-end;
+  max-width: min(100%, 860px);
+}
+.msg.bot { align-self: flex-start; flex-direction: column; width: 100%; }
+.msg.user .bubble { text-align: left; }
+.msg.bot .bubble { text-align: left; }
+.msg .bubble {
+  padding: 11px 14px; border-radius: 14px; font-size: 15.5px; line-height: 1.65;
+  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0;
+  max-width: 100%;
+}
+/* 用户消息里的文件部分：带背景的圆角矩形条，与输入文字明确区分。
+   .msg-attachment = 有附件元数据的消息（气泡上方可点链接）；
+   .msg-inline-file = 恢复的历史消息里残留 "[附件] 文件名" 文本时解析出的文件条 */
+.msg-attachment,
+.msg-inline-file {
+  display: inline-flex; align-items: center; gap: 5px;
+  max-width: 100%; overflow-wrap: anywhere;
+  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 8px;
+  padding: 2px 8px; font-size: 12.5px; color: var(--brand-dark);
+}
+/* vertical-align: middle：附件条与同行正文垂直居中（缺省基线对齐会因 flex 盒/小字号
+   文件名的合成基线不同而错位）；上下对称 margin，避免不对称 margin 盒把居中点顶偏 */
+.msg-attachment { text-decoration: none; margin: 2px 8px 2px 0; vertical-align: middle; }
+.msg-inline-file { margin: 2px 8px 2px 0; vertical-align: middle; }
+/* 附件条内图标：与文件名之间用 CSS gap 控制，替代 emoji 字符间距不可控的问题 */
+.msg-attachment-icon,
+.msg-inline-file-icon {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  color: currentColor;
+}
+.msg-attachment-icon svg,
+.msg-inline-file-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.msg-attachment-name,
+.msg-inline-file-name {
+  min-width: 0;
+}
+.msg.bot .bubble { align-self: flex-start; background: transparent; color: var(--ink); padding: 2px 0; border-bottom-left-radius: 4px; }
+.msg.user .bubble { background: var(--user-bubble-soft); color: var(--ink); border-bottom-right-radius: 4px; }
+.msg .typing { display: inline-flex; gap: 4px; align-items: center; }
+.msg .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa6b8; animation: blink 1.2s infinite; }
+.msg .typing i:nth-child(2){ animation-delay: .2s } .msg .typing i:nth-child(3){ animation-delay: .4s }
+@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }
+
+/* ===== 负责人名片卡片（每条 AI 回答末尾，独占一行、左对齐）===== */
+.chat-owner-wrap { display: block; width: 100%; margin-top: 12px; clear: both; }
+/* 答案与「转人工」之间的过渡分隔：左线—文字—右线 */
+.chat-owner-divider {
+  display: flex; align-items: center; gap: 10px;
+  margin: 2px 0 10px;
+  color: var(--ink-soft); font-size: 12px; letter-spacing: .3px; opacity: .85;
+}
+.chat-owner-divider::before,
+.chat-owner-divider::after {
+  content: ""; flex: 1; height: 1px; background: var(--line);
+}
+.chat-owner-card {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px 10px 8px;
+  border: 1px solid var(--line); border-radius: 12px;
+  background: var(--panel); cursor: pointer; text-align: left;
+  box-shadow: 0 1px 4px rgba(31, 39, 51, .06);
+  transition: border-color .15s, box-shadow .15s;
+  flex: none;
+}
+/* 责任人卡片 + 评分卡片：同一行、两端对齐（责任人靠左 / 评分靠右）；
+   宽度不足时自动换行（小手机评分卡片落到下一行）。
+   align-items: stretch 让两张卡片等高（以较高者为准），内容各自垂直居中。 */
+.chat-owner-cards {
+  display: flex; align-items: stretch; justify-content: space-between;
+  gap: 12px; flex-wrap: wrap;
+}
+.chat-owner-avatar {
+  width: 36px; height: 36px; border-radius: 50%; flex: none;
+  display: grid; place-items: center; overflow: hidden;
+  background: linear-gradient(135deg, var(--brand), #6b8bff); color: #fff;
+  font-weight: 700; font-size: 15px;
+}
+.chat-owner-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.chat-owner-meta { display: flex; flex-direction: column; line-height: 1.25; }
+.chat-owner-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
+.chat-owner-dept { font-size: 12px; color: var(--ink-soft); }
+.chat-owner-action { margin-left: 6px; font-size: 12.5px; color: var(--brand); white-space: nowrap; }
+
+/* ===== Markdown 渲染（react-markdown + remark-gfm + rehype-highlight）===== */
+/* ═══ 流式正文揭示：块级渐入（fade-in，对标 WorkBuddy）═══
+   流式期间每个新到达的块级子元素（p / li / heading…）淡入一次，
+   文字全程全实心可读；末尾保留闪烁光标 ▍ 作为"正在输出"信号。
+   不再使用扫光（shimmer / mask-image），避免"前暗后亮"错位。 */
+
+/* 流式「渐入」关键帧：每个新到达的文本块（p / li / heading…）淡入一次，
+   对标 WorkBuddy 的流式渐入观感；文字全程全实心，不会出现扫光那种前暗后亮的错位。 */
+@keyframes mdFadeIn {
+  from { opacity: 0; transform: translateY(3px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes mdCaretBlink {
+  50% { opacity: 0; }
+}
+/* 流式正文容器：定位上下文 + 逐块渐入。
+   只作用于「块级子元素」，已稳定显示的块不会重播动画，只有流式中新追加的块会淡入。
+   .md-table-wrap 豁免：表格在流式期间频繁更新，重播渐入会造成持续闪烁。 */
+.md--streaming { position: relative; }
+.md--streaming > *:not(.md-table-wrap) {
+  animation: mdFadeIn .32s ease-out both;
+}
+/* 尾部光标：流式期间正文末尾闪烁 ▍，强化"正在输出" */
+.md--streaming::after {
+  content: "▍";
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--ink-soft);
+  animation: mdCaretBlink 1s steps(1) infinite;
+}
+/* 无障碍：减少动效时停掉渐入与光标闪烁（文字保持全实心，语义不丢） */
+@media (prefers-reduced-motion: reduce) {
+  .md--streaming > * { animation: none; transform: none; }
+  .md--streaming::after { animation: none; opacity: 1; }
+}
+.bubble .md, .artifact-md .md{ font-size: 15.5px; line-height: 1.7; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
+.bubble .md > *:first-child, .artifact-md .md > *:first-child{ margin-top: 0; }
+.bubble .md > *:last-child, .artifact-md .md > *:last-child{ margin-bottom: 0; }
+.bubble .md p, .artifact-md .md p{ margin: 0 0 8px; }
+.bubble .md h1, .bubble .md h2, .bubble .md h3,
+.bubble .md h4, .bubble .md h5, .bubble .md h6, .artifact-md .md h1, .artifact-md .md h2, .artifact-md .md h3,
+.artifact-md .md h4, .artifact-md .md h5, .artifact-md .md h6{ margin: 12px 0 6px; line-height: 1.35; font-weight: 700; }
+.bubble .md h1, .artifact-md .md h1{ font-size: 20px; }
+.bubble .md h2, .artifact-md .md h2{ font-size: 18px; }
+.bubble .md h3, .artifact-md .md h3{ font-size: 16.5px; }
+.bubble .md h4, .bubble .md h5, .bubble .md h6, .artifact-md .md h4, .artifact-md .md h5, .artifact-md .md h6{ font-size: 15.5px; }
+.bubble .md ul, .bubble .md ol, .artifact-md .md ul, .artifact-md .md ol{ margin: 0 0 8px; padding-left: 22px; }
+.bubble .md li, .artifact-md .md li{ margin: 2px 0; }
+.bubble .md li.task-list-item, .artifact-md .md li.task-list-item{ list-style: none; margin-left: -22px; }
+.bubble .md li.task-list-item input[type="checkbox"], .artifact-md .md li.task-list-item input[type="checkbox"]{ margin-right: 6px; }
+.bubble .md a, .artifact-md .md a{ color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(47,107,255,.35); }
+.bubble .md strong, .artifact-md .md strong{ font-weight: 700; }
+.bubble .md em, .artifact-md .md em{ font-style: italic; }
+.bubble .md del, .artifact-md .md del{ color: var(--ink-soft); }
+/* 行内代码：非 pre 内 code */
+.bubble .md :not(pre) > code, .artifact-md .md :not(pre) > code{
+  background: var(--quote-bg); border: 1px solid var(--quote-line); border-radius: 5px;
+  padding: 1px 5px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--ink);
+}
+/* 围栏代码块（react-markdown 输出 pre > code，rehype-highlight 加 hljs 类） */
+.bubble .md pre, .artifact-md .md pre{
+  background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 12px 14px;
+  overflow-x: auto; margin: 0 0 10px; font-size: 12.5px; line-height: 1.55;
+}
+.bubble .md pre code, .artifact-md .md pre code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; background: none; border: none; padding: 0; color: inherit; }
+/* GFM 表格 */
+.bubble .md .md-table-wrap, .artifact-md .md .md-table-wrap{
+  margin: 12px 0 16px; max-width: 100%; overflow-x: auto;
+  border: 1px solid var(--line); border-radius: 10px;
+  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
+}
+.md-table-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
+.bubble .md table, .artifact-md .md table{
+  border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14px; width: 100%;
+}
+.bubble .md th, .bubble .md td, .artifact-md .md th, .artifact-md .md td{
+  border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px;
+  text-align: left; vertical-align: top; line-height: 1.6; min-width: 96px; max-width: 440px;
+  overflow-wrap: break-word;
+}
+.bubble .md th, .artifact-md .md th{ background: var(--field-soft); font-weight: 600; }
+.bubble .md tbody tr:last-child td, .artifact-md .md tbody tr:last-child td{ border-bottom: 0; }
+.bubble .md td > :last-child, .artifact-md .md td > :last-child{ margin-bottom: 0; }
+@media (hover: hover) and (pointer: fine) {
+  .bubble .md tbody tr:hover td, .artifact-md .md tbody tr:hover td{ background: var(--table-stripe); }
+}
+/* 引用 */
+.bubble .md blockquote, .artifact-md .md blockquote{
+  margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--brand);
+  background: var(--brand-soft); border-radius: 0 8px 8px 0; color: var(--ink-soft);
+}
+.bubble .md blockquote > *:last-child, .artifact-md .md blockquote > *:last-child{ margin-bottom: 0; }
+.bubble .md hr, .artifact-md .md hr{ border: none; border-top: 1px solid var(--line); margin: 12px 0; }
+.bubble .md img, .artifact-md .md img{ max-width: 100%; border-radius: 8px; }
+/* rehype-highlight（highlight.js）代码高亮配色：GitHub Dark 精简版 */
+.bubble .md .hljs-comment, .bubble .md .hljs-quote, .artifact-md .md .hljs-comment, .artifact-md .md .hljs-quote{ color: #8b949e; font-style: italic; }
+.bubble .md .hljs-keyword, .bubble .md .hljs-selector-tag, .bubble .md .hljs-literal,
+.bubble .md .hljs-doctag, .bubble .md .hljs-type, .artifact-md .md .hljs-keyword, .artifact-md .md .hljs-selector-tag, .artifact-md .md .hljs-literal,
+.artifact-md .md .hljs-doctag, .artifact-md .md .hljs-type{ color: #ff7b72; }
+.bubble .md .hljs-string, .bubble .md .hljs-regexp, .bubble .md .hljs-addition,
+.bubble .md .hljs-attribute, .bubble .md .hljs-meta .hljs-string, .artifact-md .md .hljs-string, .artifact-md .md .hljs-regexp, .artifact-md .md .hljs-addition,
+.artifact-md .md .hljs-attribute, .artifact-md .md .hljs-meta .hljs-string{ color: #a5d6ff; }
+.bubble .md .hljs-number, .bubble .md .hljs-symbol, .bubble .md .hljs-bullet,
+.bubble .md .hljs-variable, .bubble .md .hljs-template-variable, .artifact-md .md .hljs-number, .artifact-md .md .hljs-symbol, .artifact-md .md .hljs-bullet,
+.artifact-md .md .hljs-variable, .artifact-md .md .hljs-template-variable{ color: #79c0ff; }
+.bubble .md .hljs-title, .bubble .md .hljs-section, .bubble .md .hljs-name, .artifact-md .md .hljs-title, .artifact-md .md .hljs-section, .artifact-md .md .hljs-name{ color: #d2a8ff; }
+.bubble .md .hljs-built_in, .bubble .md .hljs-builtin-name, .bubble .md .hljs-params, .artifact-md .md .hljs-built_in, .artifact-md .md .hljs-builtin-name, .artifact-md .md .hljs-params{ color: #ffa657; }
+.bubble .md .hljs-function .hljs-title, .artifact-md .md .hljs-function .hljs-title{ color: #d2a8ff; }
+.bubble .md .hljs-emphasis, .artifact-md .md .hljs-emphasis{ font-style: italic; }
+.bubble .md .hljs-strong, .artifact-md .md .hljs-strong{ font-weight: 700; }
+
+/* ===== 思考过程（thinking）区：思考中 = 小窗滚动直播；思考结束 = 收起为「已思考 X 秒」可再展开 ===== */
+.chat-thinking { margin: 0 0 8px; }
+.chat-thinking-head {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 0;
+  background: transparent; border: none;
+  color: var(--ink-soft);
+}
+.chat-thinking-label { font-size: 12.5px; }
+/* 实时计时（活动步「已用时 X 秒」）：与胶囊文字同字号同色，数字等宽避免每秒跳动宽度抖动 */
+.chat-thinking-timer {
+  font-size: 12.5px; color: inherit;
+  font-variant-numeric: tabular-nums;
+}
+.chat-thinking-spinner {
+  width: 12px; height: 12px; border-radius: 50%;
+  border: 2px solid var(--line); border-top-color: var(--brand);
+  animation: chatVoiceSpin .7s linear infinite;
+}
+/* 思考直播（WorkBuddy 同款）：无边框无背景，仅左侧一根竖条。
+   最大高度 = 输入框高度 ×2（--chat-thinking-max-h）；超出在框内滚动，不再无限撑高消息流。
+   组件内 useEffect（ThinkingLiveBox）每次文本更新把 scrollTop 拉到底，持续显示最新思考。 */
+.chat-thinking-live {
+  margin: 6px 0 0;
+  padding: 2px 12px 2px 12px;
+  background: transparent; border: none; border-radius: 0;
+  border-left: 2px solid #c9cdd4;
+  max-height: var(--chat-thinking-max-h);
+  overflow-y: auto;
+  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
+  white-space: pre-wrap; word-break: break-word;
+  scrollbar-width: thin; scrollbar-color: #c9cdd4 transparent;
+}
+.chat-thinking-live::-webkit-scrollbar { width: 6px; }
+.chat-thinking-live::-webkit-scrollbar-track { background: transparent; }
+.chat-thinking-live::-webkit-scrollbar-thumb { background: #c9cdd4; border-radius: 3px; }
+/* 思考结束胶囊：无背景无边框纯文字，「思考 N · 用时 X 秒 · 工具名」，点击展开/收起完整思考过程 */
+.chat-thinking--done { margin: 0 0 8px; }
+.chat-thinking-done-toggle {
+  display: inline-flex; align-items: center; gap: 7px;
+  max-width: 100%; min-width: 0;
+  padding: 2px 0;
+  background: transparent; border: none;
+  color: var(--ink-soft); font-size: 12.5px; cursor: pointer;
+  transition: color .15s ease;
+}
+/* hover：仅字体颜色变化（含箭头，箭头颜色继承字体），边框不变 */
+/* 胶囊文字：继承按钮字体与颜色（与箭头一致，无 opacity 削弱）；
+   inline-flex + align-items:center 让工具 icon 与工具名垂直居中对齐（icon 复用 .chat-thinking-tool-icon） */
+.chat-thinking-done-label {
+  display: inline-flex; align-items: center; gap: 6px;
+  flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
+  font-size: 12.5px; color: inherit;
+}
+.chat-thinking-done-toggle .chat-thinking-tool-name,
+.chat-thinking-done-toggle .chat-thinking-browser-label {
+  flex: 0 1 auto; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.chat-thinking-activity { display: block; }
+.chat-thinking-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: 0 0 16px;
+  width: 16px; height: 16px;
+  background: transparent; color: inherit;
+}
+/* 展开/收起箭头：收起态向右（chevron-right）、展开态向下（chevron-down） */
+.chat-thinking-icon svg {
+  width: 13px; height: 13px;
+  fill: none; stroke: currentColor; stroke-width: 2.4;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+/* 展开后的完整思考正文（与直播小窗同款：左侧竖条、无边框、超高滚动） */
+.chat-thinking-body {
+  margin: 6px 0 0; padding: 2px 12px 2px 12px;
+  max-height: 320px; overflow-y: auto;
+  background: transparent; border: none; border-radius: 0;
+  border-left: 2px solid #c9cdd4;
+  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
+  white-space: pre-wrap; word-break: break-word;
+  scrollbar-width: thin; scrollbar-color: #c9cdd4 transparent;
+}
+.chat-thinking-body::-webkit-scrollbar { width: 6px; }
+.chat-thinking-body::-webkit-scrollbar-track { background: transparent; }
+.chat-thinking-body::-webkit-scrollbar-thumb { background: #c9cdd4; border-radius: 3px; }
+/* 展开详情顶部的该步用时（折叠胶囊不显示用时，展开后在此展示） */
+.chat-thinking-secs {
+  margin: 0 0 6px;
+  font-size: 14px; color: var(--ink-soft); line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+}
+/* WorkBuddy 式「动作 → 结果」：完成步胶囊下方常驻的结果摘要（2 行省略；展开时前端隐藏避免重复）。
+   每一步都保留（含工具步）：取思考末段，line-clamp 2 控制消息流长度，长任务多步时也不会堆满。
+   颜色用正文色 --ink（而非灰 --ink-soft）：摘要与过程白字同色，保持「一直可见」的连续性。
+   字号层级：正式答复 15.5 > 结果摘要 14.5 > 动作胶囊 14 > 状态徽标 12.5 */
+.chat-thinking-summary {
+  margin: 3px 0 0 0;
+  font-size: 14.5px; line-height: 1.6; color: var(--ink);
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; overflow-wrap: anywhere;
+}
+/* 正文为空时的兜底回复（模型以 thinking/工具收尾、无最终 result）：步骤折叠后
+   用最后一步思考尾段顶上，避免「已完成」卡片下只剩空气泡。展示为正式答复样式
+   （非摘要的 2 行省略），仅在折叠态渲染；步骤未折叠时由胶囊摘要承担，不重复出现 */
+.msg-fallback-result {
+  margin: 0;
+  font-size: 15.5px; line-height: 1.65; color: var(--ink);
+  overflow-wrap: anywhere;
+}
+/* 思考步内的工具调用行（WorkBuddy 同款清爽风格）：无卡片无背景，语义图标 + 中文短词 +
+   入参摘要单行显示（超长省略），与左侧竖条形成统一的时间线观感 */
+.chat-thinking-tool {
+  display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap;
+  margin: 3px 0; padding: 0;
+  background: transparent; border: none; border-radius: 0;
+  max-width: 100%;
+}
+.chat-thinking-tool-icon {
+  flex: 0 0 auto; align-self: center;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 14px; height: 14px;
+  color: var(--ink-soft); opacity: .85;
+}
+.chat-thinking-tool-name {
+  flex: 0 0 auto; color: var(--ink-soft);
+  font-size: 14px; white-space: nowrap;
+}
+.chat-thinking-tool-input {
+  flex: 1 1 auto; min-width: 0;
+  font-size: 14px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* 工具执行状态徽标（豆包 Work 式就地更新）：✓ 成功 / ✗ 失败（保持全链最小层级） */
+.chat-thinking-tool-status {
+  flex: 0 0 auto; font-size: 12.5px; font-weight: 500; color: var(--ok);
+}
+.chat-thinking-tool-status--error { color: var(--danger); }
+/* 工具结果预览（仅展开详情内显示，受限 3 行省略；超长完整内容放 title）：
+   成功=灰、失败=红。收起态不再展示工具执行结果（SDK 无工具摘要字段） */
+.chat-thinking-tool-result {
+  flex-basis: 100%; min-width: 0;
+  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
+  overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.chat-thinking-tool-result.is-error { color: var(--danger); }
+/* 失败工具胶囊：整行文字标红（is-error 与 is-running 互斥） */
+.chat-thinking-done-toggle.is-error .chat-thinking-tool-name,
+.chat-thinking-done-toggle.is-error .chat-thinking-tool-file,
+.chat-thinking-done-toggle.is-error .chat-thinking-tool-status { color: var(--danger); }
+/* 文件编辑增删徽标（Claude Code 风格「已编辑文件 xxx +N -M」）：+N 绿 / -M 红，
+   文件路径超长省略（完整路径放 title），徽标右对齐 */
+.chat-thinking-tool-file {
+  flex: 0 1 auto; min-width: 0;
+  font-size: 14px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.chat-edit-badges {
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
+  font-size: 14px; font-weight: 500; line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.chat-edit-add { color: var(--ok); }
+.chat-edit-del { color: #e5484d; }
+/* 思考步内的中间小结文本（工具调用前模型输出的该步小结）：同样去掉卡片，纯文本行
+   （内容层级，与结果摘要同级） */
+.chat-thinking-step-text {
+  margin: 3px 0; padding: 0;
+  background: transparent; border: none; border-radius: 0;
+  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+/* control_browser 过程面板（动作/思考实时进 thinking；截图仅在右侧边栏预览，不再渲染进消息列表） */
+.chat-browser {
+  margin: 0 0 8px; padding: 8px;
+  background: var(--table-stripe); border: 1px solid var(--line); border-radius: 8px;
+}
+.chat-browser-head {
+  display: flex; align-items: center; justify-content: flex-end;
+  margin-bottom: 6px;
+}
+.chat-browser-status {
+  padding: 2px 8px; border-radius: 999px;
+  font-size: 12px; line-height: 1.5; color: #fff;
+  background: rgba(31,39,51,.72);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.chat-browser-status--running { background: rgba(31,39,51,.72); }
+.chat-browser-status--done { background: rgba(23,126,63,.85); }
+.chat-browser-status--error { background: rgba(172,43,43,.85); }
+.chat-browser-status--ask { background: rgba(176,108,15,.9); }
+/* 模型决策思考文本（browser thinking 事件；hy3 默认不输出，有则显示） */
+.chat-browser-think {
+  margin: 0 0 8px; padding: 6px 9px;
+  background: var(--field-bg); border: 1px solid var(--line); border-radius: 6px;
+  font-size: 12px; color: var(--ink); line-height: 1.6;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.chat-browser-actions {
+  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
+}
+.chat-browser-action {
+  padding: 1px 7px; border-radius: 4px;
+  background: var(--field-soft); border: 1px solid var(--line);
+  font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
+}
+/* 运行中的实时动作流（活跃步直播，只列最近 4 条） */
+.chat-browser-live {
+  display: flex; flex-direction: column; gap: 3px;
+}
+.chat-browser-live-item {
+  display: flex; align-items: baseline; gap: 7px;
+  font-size: 12px; line-height: 1.6; color: var(--ink);
+}
+.chat-browser-live-step {
+  flex: 0 0 auto; min-width: 24px; text-align: right;
+  font-variant-numeric: tabular-nums; color: var(--ink-soft);
+  font-size: 12px;
+}
+.chat-browser-live-action { min-width: 0; overflow-wrap: anywhere; }
+.chat-browser-live-empty {
+  padding: 6px 0; font-size: 12px; color: var(--ink-soft);
+}
+.chat-browser-ask {
+  margin-bottom: 8px; padding: 8px;
+  background: var(--field-bg); border: 1px solid var(--line); border-radius: 6px;
+}
+.chat-browser-ask-q {
+  margin-bottom: 6px; font-size: 12px; color: var(--ink); line-height: 1.6;
+}
+.chat-browser-ask-row { display: flex; gap: 6px; }
+.chat-browser-ask-input {
+  flex: 1 1 auto; min-width: 0;
+  padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px;
+  font-size: 12px; color: var(--ink); background: var(--field-bg);
+  outline: none;
+}
+.chat-browser-ask-input:focus { border-color: var(--line); }
+.chat-browser-ask-btn {
+  flex: 0 0 auto; padding: 4px 12px; border-radius: 6px;
+  background: var(--hover-strong); border: 1px solid var(--line);
+  font-size: 12px; color: var(--ink); cursor: pointer;
+}
+.chat-browser-ask-btn:disabled { opacity: .45; cursor: default; }
+.chat-browser-summary {
+  padding: 6px 9px; border-radius: 6px;
+  background: var(--field-soft); border: 1px solid var(--line);
+  font-size: 12px; color: var(--ink); line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+/* 底部输入区：与 WorkBuddy 一致的圆角卡片，和聊天内容用浅背景区分。
+   外层 stack 统管背景/边框/圆角/阴影；内部 composer 与 queue 只负责内容排布。
+   stack 自身可收缩，queue 超出时内部滚动；composer 永远贴底，不会被 queue 顶出视口。 */
+.chat-composer-stack {
+  margin: 0 14px 14px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  box-shadow: 0 2px 12px rgba(31, 39, 51, .04);
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  min-height: 0;
+  /* 作为容器：工具条按输入卡片自身宽度自适应（中栏随拖拽/右栏开合实时变化，
+     视口媒体查询感知不到，故用容器查询）。见下方 @container composer。 */
+  container-type: inline-size;
+  container-name: composer;
+}
+.chat-composer {
+  flex: 0 0 auto;
+  padding: 14px 16px 10px;
+}
+.chat-composer textarea {
+  width: 100%; display: block; resize: none; border: 0; background: transparent;
+  padding: 6px 2px; font-size: 15px; font-family: inherit; color: var(--ink);
+  line-height: 1.55; overflow-y: hidden; min-height: 48px;
+}
+.chat-composer textarea:focus { outline: none; }
+.chat-composer textarea::placeholder { color: var(--ink-soft); opacity: .75; }
+
+/* 输入区容器：内聚 composer + queue 的 stack，以及可选的 notify banner。
+   整体锚定在 chat-main-inner 底部：queue 向上生长时输入框不会被顶出视口，
+   消息列表（.chat-body）的可用高度会相应缩小。 */
+.chat-input-zone {
+  position: relative;
+  display: flex; flex-direction: column;
+  justify-content: flex-end;
+  flex: 0 1 auto;
+  min-height: 0;
+}
+
+/* ---- 选择工作空间（WB 风格，仅新建任务空态显示；进入对话后隐藏）---- */
+/* 定位上下文：按钮 + 向上弹出的项目菜单 */
+.chat-ws-anchor { position: relative; display: inline-flex; flex: 0 0 auto; }
+/* 下拉按钮：文件图标 + 当前项目名/提示 + 下拉箭头（与 WB 输入区左下角工具一致） */
+.chat-ws-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  border: 1px solid var(--line); background: transparent;
+  color: var(--ink-soft); border-radius: 8px;
+  font-size: 12.5px; line-height: 1; padding: 6px 10px;
+  cursor: pointer; transition: all .15s ease;
+}
+.chat-ws-btn:hover, .chat-ws-btn.is-open {
+  color: var(--ink); background: var(--hover);
+}
+.chat-ws-btn:disabled { opacity: .55; cursor: default; }
+.chat-ws-btn-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.chat-ws-btn-label {
+  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-weight: 500;
+}
+.chat-ws-btn-caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
+
+/* 项目菜单 popup：从按钮向上弹出；backdrop 承接外部点击关闭 */
+.chat-ws-pop {
+  position: absolute; left: 0; bottom: calc(100% + 8px);
+  z-index: 80;
+}
+.chat-ws-pop-backdrop { position: fixed; inset: 0; z-index: -1; }
+.chat-ws-pop-inner {
+  width: 300px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: var(--shadow);
+  padding: 8px; display: flex; flex-direction: column;
+}
+/* 当前项目（顶部）：路径 + 移除 */
+.chat-ws-current {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px; margin-bottom: 4px;
+  border: 1px dashed var(--line); border-radius: 8px; background: var(--field-soft, transparent);
+}
+.chat-ws-current-path {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 12px; color: var(--ink);
+  font-family: ui-monospace, Consolas, "Courier New", monospace;
+}
+.chat-ws-act {
+  flex: 0 0 auto;
+  border: 1px solid var(--line); background: transparent;
+  color: var(--ink-soft); border-radius: 7px;
+  font-size: 12px; padding: 3px 10px; cursor: pointer;
+  transition: all .15s ease;
+}
+.chat-ws-act:hover { color: var(--ink); background: var(--hover); }
+.chat-ws-act:disabled { opacity: .55; cursor: default; }
+.chat-ws-act--clear:hover { color: #d23f4c; border-color: rgba(210, 63, 76, .4); background: rgba(210, 63, 76, .08); }
+/* 分组标题 */
+.chat-ws-pop-label {
+  padding: 6px 10px 4px; font-size: 11px; font-weight: 600;
+  color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase;
+}
+.chat-ws-pop-empty { padding: 10px; font-size: 12.5px; color: var(--ink-soft); }
+/* 已有项目条目 */
+.chat-ws-pop-item {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; border: none; background: transparent;
+  color: var(--ink); font-size: 13px; text-align: left;
+  padding: 8px 10px; border-radius: 8px; cursor: pointer;
+  transition: background .12s ease;
+}
+.chat-ws-pop-item:hover { background: var(--hover); }
+.chat-ws-pop-item.is-active { background: var(--brand-soft); color: var(--brand-dark); }
+.chat-ws-pop-item-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
+.chat-ws-pop-item-name {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-ws-pop-item-check { flex: 0 0 auto; color: var(--brand); font-size: 13px; font-weight: 700; }
+.chat-ws-pop-divider { height: 1px; background: var(--line); margin: 6px 2px; }
+/* 底部操作：新建项目 / 打开本地文件夹 */
+.chat-ws-pop-act {
+  display: flex; align-items: center; gap: 9px;
+  width: 100%; border: none; background: transparent;
+  color: var(--ink); font-size: 13px; text-align: left;
+  padding: 8px 10px; border-radius: 8px; cursor: pointer;
+  transition: background .12s ease;
+}
+.chat-ws-pop-act:hover { background: var(--hover); }
+.chat-ws-pop-act:disabled { opacity: .55; cursor: default; }
+.chat-ws-pop-act-icon {
+  width: 17px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--ink-soft);
+}
+.chat-ws-pop-act-icon svg {
+  width: 15px; height: 15px;
+  fill: none; stroke: currentColor; stroke-width: 1.7;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+
+/* ---- 侧边栏：会话按项目分组（WB 列表样式）---- */
+.chat-sidebar-group { margin-top: 2px; }
+.chat-sidebar-group + .chat-sidebar-group { margin-top: 10px; }
+/* 项目组标题：高度与会话 item 一致（padding 6px + 行高 26px + 6px = 38px），
+   左侧可折叠箭头，hover 时右侧出现「+ 新建会话」「⋯ 项目菜单」 */
+.chat-sidebar-group-title {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 10px; box-sizing: border-box; height: 38px;
+  font-size: 13px; font-weight: 600; color: var(--ink-soft);
+  letter-spacing: .03em;
+  border-radius: 9px; cursor: context-menu; user-select: none;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-sidebar-group-title:hover { background: var(--hover); color: var(--ink); }
+/* 折叠箭头：展开默认 ▼（可收起），折叠 is-collapsed 旋转回 ▶（可展开） */
+.chat-sidebar-group-chevron {
+  flex: 0 0 auto; width: 18px; height: 18px;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: none; border-radius: 5px; cursor: pointer;
+  background: transparent; color: var(--ink-soft);
+  transition: transform .15s ease, color .15s ease;
+}
+.chat-sidebar-group-chevron svg {
+  width: 13px; height: 13px;
+  fill: none; stroke: currentColor; stroke-width: 2;
+  stroke-linecap: round; stroke-linejoin: round;
+  transform: rotate(90deg);
+}
+.chat-sidebar-group-title.is-collapsed .chat-sidebar-group-chevron svg { transform: rotate(0deg); }
+.chat-sidebar-group-title:hover .chat-sidebar-group-chevron { color: var(--ink); }
+.chat-sidebar-group-chevron:hover { color: var(--ink); }
+/* 目录分组前的文件夹图标（WorkBuddy 同款：描边线性图标，与组标题文字同色） */
+.chat-sidebar-group-icon {
+  flex: 0 0 auto; width: 14px; height: 14px;
+  fill: none; stroke: currentColor; stroke-width: 1.8;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+/* 组内会话缩进对齐图标右侧（图标 14px + gap 6px + 标题 padding-left 10px ≈ 26px） */
+.chat-sidebar-group .chat-sidebar-item { padding-left: 26px; }
+.chat-sidebar-group-name {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-sidebar-group-count {
+  flex: 0 0 auto;
+  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
+  background: var(--hover, rgba(128, 128, 128, .15));
+  border-radius: 99px; padding: 1px 7px;
+}
+/* hover 时计数隐藏、位置让给右侧操作区（+ / ⋯），避免挤压标题 */
+.chat-sidebar-group-title:hover .chat-sidebar-group-count { display: none; }
+.chat-sidebar-group-actions { display: none; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
+.chat-sidebar-group-title:hover .chat-sidebar-group-actions { display: inline-flex; }
+.chat-sidebar-group-act {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 50%;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+  transition: color .15s ease, background .15s ease;
+}
+.chat-sidebar-group-act svg {
+  width: 15px; height: 15px;
+  fill: none; stroke: currentColor; stroke-width: 1.8;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.chat-sidebar-group-act:hover { color: var(--ink); }
+.chat-sidebar-group-act.chat-sidebar-group-add {
+  width: 26px; height: 26px;
+}
+.chat-sidebar-group-act.chat-sidebar-group-add svg {
+  width: 17px; height: 17px;
+}
+.chat-sidebar-group-more.is-open { color: var(--ink); background: var(--line); }
+/* 项目分组菜单：固定定位浮层，锚定右键位置或 ⋯ 按钮下方；浅/深色主题自适应 */
+.chat-sidebar-project-menu {
+  position: fixed; z-index: 300;
+  min-width: 150px; padding: 5px;
+  border: 1px solid var(--line); border-radius: 10px;
+  background: var(--panel, var(--bg)); box-shadow: 0 8px 24px rgba(0,0,0,.22);
+  display: flex; flex-direction: column; gap: 2px;
+}
+.chat-sidebar-project-menu button {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  padding: 7px 9px; border: none; border-radius: 7px;
+  background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left;
+}
+.chat-sidebar-project-menu button:hover { background: var(--hover); }
+.chat-sidebar-project-menu button svg {
+  width: 15px; height: 15px; flex: 0 0 auto;
+  fill: none; stroke: var(--ink-soft); stroke-width: 1.8;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.chat-sidebar-project-menu button:hover svg { stroke: var(--ink); }
+/* 「删除全部会话」危险项：文字/图标转危险色 */
+.chat-sidebar-project-menu button.is-danger,
+.chat-sidebar-project-menu button.is-danger:hover { color: var(--danger, #e5484d); }
+.chat-sidebar-project-menu button.is-danger svg,
+.chat-sidebar-project-menu button.is-danger:hover svg { stroke: var(--danger, #e5484d); }
+
+/* 会话条目长按/⋯ 菜单：portal 到 body 渲染（脱离侧栏抽屉 overflow/层叠上下文）；
+   z-index 抬到 1100+，确保盖住移动端抽屉(200)、遮罩(150)、topbar(220) 与各类浮层 */
+.chat-sidebar-session-menu { z-index: 1100; }
+
+
+
+/* Shimmer 扫光：核心规则 = 最后一个展示给用户的提示持续播放，表明 Agent 仍在干活、没有卡死。
+   命中两处（均由 ChatWindow 流式判定触发）：
+   ① 活动步「正在思考…」文字（.chat-thinking-head .chat-thinking-label）；
+   ② 正在运行的工具行：状态与命令在同一个文本元素中，共用一条扫光带，覆盖可见整行。
+   一条高光带沿文字从左往右循环掠过；基础色=--shine-base、高光=--shine（见 :root 与 [data-theme=dark]）。
+   亮色模式：静止浅灰 → 扫过填深墨（高对比、明显）；暗色模式：静止浅灰 → 扫过填白（深底亮闪）。 */
+/* 节奏对标 WorkBuddy：快速扫过 → 稍作停留 → 再重复（干脆利落、有顿挫）。
+   高光带收窄(占文字~0.6倍宽) + background-size:300% + no-repeat，使扫描能「彻底扫出文字」。
+   方向：左→右。0% 高光带在左侧外（文字零光）；前 ~40% 线性匀速扫到右侧外（快速掠过整段文字）；
+   40%~100% 定格（高光已完全离开文字，只显示纯文字=停留）；循环回 0% 时两端文字均零光，无缝衔接。 */
+@keyframes chatTextShine {
+  0%   { background-position: 90% 0; }
+  40%  { background-position: 10% 0; }
+  100% { background-position: 10% 0; }
+}
+.chat-thinking-head .chat-thinking-label,
+.chat-thinking-done-toggle.is-running .chat-thinking-tool-name,
+.chat-thinking-done-toggle.is-running .chat-thinking-tool-file,
+.chat-thinking-done-toggle.is-running .chat-thinking-browser-label {
+  position: relative;
+  /* 收窄高光带(40%→60%，占文字~0.6倍宽)，两侧留足余量，保证带子能完全扫出文字。
+     基础色用 --shine-base（浅色=浅灰、深色=浅灰），高光用 --shine（浅色=深墨、深色=白）。 */
+  background: linear-gradient(
+    90deg,
+    var(--shine-base) 0%,
+    var(--shine-base) 40%,
+    var(--shine) 50%,
+    var(--shine-base) 60%,
+    var(--shine-base) 100%
+  );
+  background-size: 300% 100%;
+  background-repeat: no-repeat;
+  background-position: 90% 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  /* linear = 匀速干脆不拖泥带水；2.1s 内前 40%(~0.84s) 快速扫过、后 60%(~1.26s) 停留。
+     停点时高光已完全离开文字（文字零光），解决「停留发生在半途、文字还带光」的怪感。 */
+  animation: chatTextShine 2.1s linear infinite;
+}
+/* 工具调用/浏览器胶囊文字：基础色与思考提示统一 --shine-base（见 :root 与 [data-theme=dark]）。
+   注意：必须用 background-image（longhand）而非 background 简写——
+   简写会把 background-clip 重置为 border-box，导致上方规则的 background-clip:text 失效，
+   文字透明后渐变铺满元素矩形 → 变成「灰色渐变条」而非文字扫光。 */
+.chat-thinking-done-toggle.is-running .chat-thinking-tool-name,
+.chat-thinking-done-toggle.is-running .chat-thinking-tool-file,
+.chat-thinking-done-toggle.is-running .chat-thinking-browser-label {
+  background-image: linear-gradient(
+    90deg,
+    var(--shine-base) 0%,
+    var(--shine-base) 40%,
+    var(--shine) 50%,
+    var(--shine-base) 60%,
+    var(--shine-base) 100%
+  );
+}
+
+/* 通知权限引导条（仅 Web 且通知被浏览器拒绝时出现；悬浮于输入卡片上方） */
+.chat-notify-banner {
+  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px);
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-radius: 10px;
+  background: var(--panel); border: 1px solid var(--line);
+  box-shadow: 0 4px 16px rgba(20, 27, 38, .10);
+  z-index: 31;
+}
+.chat-notify-banner-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.chat-notify-banner-text { flex: 1 1 auto; font-size: 12px; color: var(--ink); line-height: 1.5; }
+.chat-notify-banner-link {
+  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--brand);
+  text-decoration: none; white-space: nowrap;
+}
+.chat-notify-banner-close {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 6px;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+}
+.chat-notify-banner-close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+
+/* 待发消息队列（steer）：与输入卡片共用 stack 面板，视觉上连成一体。
+   队列只保留顶部圆角（与外层 stack 一致），内部条目之间用 1px 分隔线
+   （最后一条无线），条目本身不再带独立背景/边框/圆角。
+   overflow 用于裁剪 item hover 背景，避免超出 stack 圆角。 */
+.chat-queue {
+  flex: 0 1 auto;
+  min-height: 0;
+  display: flex; flex-direction: column; gap: 0;
+  max-height: 42vh; overflow: hidden auto;
+  border-radius: 20px 20px 0 0;
+  /* 与 composer 同处一个 stack 面板，但用极微弱的深色叠加让 queue 区可辨识，
+     提示用户“上方是待插队消息，下方是主输入区”，对比度刻意保持克制 */
+  background: rgba(0, 0, 0, 0.06);
+}
+.chat-queue-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; min-width: 0;
+  border-bottom: 1px solid var(--line);
+  cursor: grab;
+}
+.chat-queue-item:last-child { border-bottom: none; }
+.chat-queue-item:hover { background: var(--hover); }
+.chat-queue-item:active { cursor: grabbing; }
+.chat-queue-grip {
+  flex: none; display: grid; place-items: center;
+  width: 16px; height: 20px; color: var(--ink-soft);
+}
+.chat-queue-grip svg { width: 12px; height: 16px; fill: currentColor; }
+.chat-queue-text {
+  flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-queue-act {
+  flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
+  border: none; border-radius: 7px; background: transparent; color: var(--ink-soft); cursor: pointer;
+}
+.chat-queue-act svg {
+  width: 16px; height: 16px;
+  fill: none; stroke: currentColor; stroke-width: 1.7;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.chat-queue-notice { font-size: 12px; color: var(--ink-soft); padding: 7px 12px 9px; }
+
+/* 有附件时：附件条在卡片内 textarea 上方；textarea 压缩为一行、卡片上内边距收窄，
+   合计与无附件时的总高度一致，聊天区高度与页面均不抖动。 */
+.chat-composer.has-attachment { padding-top: 8px; }
+.chat-composer.has-attachment textarea { min-height: 20px; }
+.chat-composer.has-attachment .chat-attachment-wrap { margin-bottom: 4px; }
+
+/* 场景分类选择按钮组：输入卡片外部的上一行，按场景路由到不同钉钉文档 */
+.chat-scene-bar { padding: 10px 14px 4px; }
+.chat-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
+.chat-scene {
+  height: 30px; padding: 0 14px; border-radius: 999px;
+  border: 1px solid var(--line); background: var(--field-bg); color: var(--ink-soft);
+  font-size: 13px; cursor: pointer; line-height: 1; white-space: nowrap;
+  transition: all .12s ease;
+}
+.chat-scene.is-active {
+  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark);
+  font-weight: 600;
+}
+
+.chat-toolbar { display: flex; align-items: center; gap: 4px; padding-top: 4px; }
+
+/* 上传附件：仅 + 图标。hover 背景为圆形 */
+.chat-tool {
+  width: 36px; height: 36px; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+  border: none; border-radius: 50%; background: transparent;
+  color: var(--ink-soft); cursor: pointer;
+}
+.chat-tool:disabled { opacity: .45; cursor: default; }
+.chat-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+/* AgentApp 首屏加载占位：全屏居中黑白灰 spinner */
+.agent-kit-loading {
+  position: fixed; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg);
+}
+.agent-kit-loading::after {
+  content: "";
+  width: 22px; height: 22px; border-radius: 50%;
+  border: 2px solid var(--spin-edge); border-top-color: var(--spin-top);
+  animation: agentKitLoadingSpin .7s linear infinite;
+}
+@keyframes agentKitLoadingSpin { to { transform: rotate(360deg); } }
+
+/* 语音输入：图标按钮，放在发送按钮旁边；录音时仅变为红色停止图标。hover 背景为圆形 */
+.chat-voice {
+  width: 36px; height: 36px; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+  border: none; border-radius: 50%; background: transparent;
+  color: var(--ink-soft); cursor: pointer;
+}
+.chat-voice-icon { width: 22px; height: 22px; display: grid; place-items: center; color: inherit; }
+.chat-voice-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.chat-voice-icon--stop svg { fill: currentColor; stroke: none; }
+.chat-voice:disabled { opacity: .45; cursor: default; }
+/* 录音进行中：按钮变红（停止态），时长提示在按钮左边 */
+.chat-voice.recording { background: var(--danger-soft); color: var(--danger); }
+.chat-voice.connecting { justify-content: center; }
+.chat-voice-spinner { width: 17px; height: 17px; box-sizing: border-box; border: 2px solid #c7d7ea; border-top-color: #2563eb; border-radius: 50%; animation: chatVoiceSpin .75s linear infinite; }
+/* 录音时长 / 10 分钟上限提示：位于语音按钮左侧 */
+.chat-voice-hint {
+  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px;
+  font-size: 12px; font-weight: 500; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; letter-spacing: .3px;
+}
+.chat-voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: chatVoicePulse 1s ease-in-out infinite; }
+@keyframes chatVoicePulse { 50% { opacity: .25; } }
+@keyframes chatVoiceSpin { to { transform: rotate(360deg); } }
+
+.chat-tool-spacer { flex: 1; }
+/* 上下文容量环形指示（输入框右侧、模型名左侧，对标 WorkBuddy）：圆环 + 百分比，三档状态色 */
+.ctx-meter {
+  display: inline-flex; align-items: center; gap: 5px;
+  flex: 0 0 auto; padding: 4px 8px;
+  border-radius: 8px; cursor: default;
+  font-size: 12px; line-height: 1; color: var(--ink-soft);
+  position: relative;
+}
+.ctx-meter svg { width: 16px; height: 16px; display: block; }
+.ctx-meter-track { fill: none; stroke: color-mix(in srgb, var(--line) 40%, transparent); stroke-width: 1.5; }
+.ctx-meter-bar {
+  fill: none; stroke-width: 1.5; stroke-linecap: round;
+  transform: rotate(-90deg); transform-origin: 50% 50%;
+  transition: stroke-dashoffset .3s ease, stroke .3s ease;
+}
+/* 圆环只作容量提示：未用部分浅、已用部分深，但整体刻意降饱和，不抢主线视线 */
+.ctx-meter--ok .ctx-meter-bar { stroke: color-mix(in srgb, var(--ink-soft) 40%, transparent); }
+.ctx-meter--warn .ctx-meter-bar { stroke: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
+.ctx-meter--danger .ctx-meter-bar { stroke: var(--ink-soft); }
+.ctx-meter--neutral .ctx-meter-bar { stroke: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
+.ctx-meter.is-compacting { animation: ctx-meter-pulse 1s ease infinite; }
+@keyframes ctx-meter-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
+/* hover 详情浮层（对标 WorkBuddy）：已用百分比 · 已用/上限 tokens；深色浮层向上弹出 */
+.ctx-meter::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 5px 9px;
+  border-radius: 7px;
+  background: var(--bg-float, #fdfdfd);
+  color: var(--ink, #1a1a1a);
+  border: 1px solid var(--line, #e3e8f0);
+  font-size: 12px;
+  line-height: 1.5;
+  box-shadow: 0 4px 14px rgb(0 0 0 / .15);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease;
+  z-index: 40;
+}
+:root[data-theme="dark"] .ctx-meter::after {
+  background: var(--bg-float, #212121);
+  color: #f0f0f0;
+  border-color: #3a3a3a;
+}
+.ctx-meter:hover::after { opacity: 1; }
+/* 中栏很窄时（窗口收窄 / 右栏拖宽挤压中栏）：工具条放不下模型选择按钮，
+   隐藏它避免挤压导致输入卡片内容溢出、显示错乱。
+   用容器查询（容器 = .chat-composer-stack）而非视口媒体查询：
+   中栏宽度随右栏拖拽实时变化，视口宽度不变，媒体查询无法跟随。 */
+@container composer (max-width: 360px) {
+  .chat-model-picker { display: none; }
+}
+/* 模型选择下拉（现代风格，向上弹出）：触发按钮与 + 号/语音按钮一致——无背景无边框，
+   hover 才出现浅灰胶囊圆角背景；菜单为圆角浮层，黑白灰系 */
+.chat-model-picker { position: relative; flex: 0 0 auto; }
+.chat-model-picker-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  height: 36px; padding: 0 12px;
+  border: none; background: transparent; border-radius: 999px;
+  color: var(--ink); font-size: 13px; font-family: inherit; cursor: pointer;
+  transition: background .15s ease;
+}
+.chat-model-picker-btn.open { background: var(--hover); }
+.chat-model-picker-name {
+  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chat-model-picker-chev {
+  width: 14px; height: 14px; flex: 0 0 auto;
+  fill: none; stroke: var(--ink-soft); stroke-width: 1.6;
+  stroke-linecap: round; stroke-linejoin: round;
+  transition: transform .15s ease;
+}
+.chat-model-picker-btn.open .chat-model-picker-chev { transform: rotate(180deg); }
+.chat-model-picker-menu {
+  position: absolute; right: 0; bottom: calc(100% + 6px);
+  min-width: 200px; margin: 0; padding: 4px; list-style: none;
+  background: var(--overlay-bg); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
+  z-index: 30;
+  max-height: 240px; overflow-y: auto;
+}
+.chat-model-picker-item {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 9px 12px; border-radius: 8px;
+  font-size: 13px; line-height: 1.3; color: var(--ink);
+  cursor: pointer; white-space: nowrap;
+  transition: background .12s ease;
+}
+.chat-model-picker-item.selected { color: var(--ink); font-weight: 600; }
+/* 下拉项：名称（主）+ id（副，models.json 自定义模型时附显示） */
+.chat-model-picker-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.chat-model-picker-item-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-model-picker-item-id {
+  font-size: 11px; line-height: 1.2; color: var(--ink-soft);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* 悬停信息卡：展示当前模型详情（provider/上下文窗口/能力），不展示 apiKey */
+.chat-model-picker-detail {
+  position: absolute; right: 0; bottom: calc(100% + 8px);
+  min-width: 260px; max-width: 340px; padding: 12px 14px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,.20);
+  pointer-events: none; z-index: 30;
+  font-size: 12.5px; line-height: 1.4; color: var(--ink);
+}
+.chat-model-picker-detail-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
+.chat-model-picker-detail-name { font-weight: 600; font-size: 13.5px; }
+.chat-model-picker-detail-id {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px; color: var(--ink-soft); word-break: break-all;
+}
+.chat-model-picker-detail-rows { display: flex; flex-direction: column; gap: 7px; }
+.chat-model-picker-detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
+.chat-model-picker-detail-label { color: var(--ink-soft); flex: 0 0 auto; }
+.chat-model-picker-detail-value { text-align: right; word-break: break-all; }
+.chat-model-picker-check {
+  width: 14px; height: 14px; flex: 0 0 auto;
+  fill: none; stroke: currentColor; stroke-width: 2;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+/* 语音/附件报错：底部工具栏内、靠近右侧图标组 */
+.chat-hint--error {
+  display: inline-flex; align-items: center;
+  color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(240, 97, 109, .35);
+  border-radius: 8px; padding: 5px 8px; font-size: 11.5px; line-height: 1.3;
+  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.chat-send {
+  width: 36px; height: 36px; border: none; border-radius: 50%;
+  background: var(--send-bg); color: var(--send-ink); cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 4px 10px rgba(0,0,0,.15);
+}
+/* 无输入时发送按钮禁用：禁止光标；hover 不改变外观（避免与可发送态混淆） */
+.chat-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
+.chat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
+/* 图片附件 + 疑似不支持图片的模型：输入卡片内的黄色提醒条（仅提示，不拦截发送） */
+.chat-vision-warning {
+  margin-top: 6px; font-size: 12px; line-height: 1.55; color: #92400e;
+  background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px;
+  padding: 6px 10px; max-width: 100%;
+}
+/* 附件条（输入卡片内、textarea 上方）：默认显示类型图标（图片/文件），
+   hover 时移除按钮替换图标位（与 WorkBuddy 一致） */
+.chat-attachment-wrap { position: relative; display: inline-block; max-width: fit-content; }
+.chat-attachment {
+  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink);
+  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 8px;
+  padding: 4px 8px; max-width: fit-content;
+}
+/* 附件图标位：默认显示类型图标（图片/文件），hover 时被移除按钮替换（与 WorkBuddy 一致） */
+.chat-attachment-icon-wrap { position: relative; width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
+.chat-attachment-icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--brand-dark); transition: opacity .12s ease; }
+.chat-attachment-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.chat-attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-attachment-remove {
+  position: absolute; inset: 0; display: grid; place-items: center;
+  border: none; background: transparent; color: var(--danger); cursor: pointer;
+  font-size: 17px; line-height: 1; padding: 0; border-radius: 50%;
+  opacity: 0; transform: scale(.6); transition: opacity .12s ease, transform .12s ease;
+}
+/* 附件 hover 图片预览：浮层出现在附件条上方（仅图片附件渲染，纯 CSS 控制显隐） */
+.chat-attachment-preview {
+  position: absolute; left: 0; bottom: calc(100% + 6px);
+  padding: 8px; background: var(--overlay-bg); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
+  opacity: 0; visibility: hidden; transform: translateY(4px);
+  transition: opacity .12s ease, transform .12s ease, visibility .12s;
+  z-index: 30; pointer-events: none; max-width: 436px;
+}
+.chat-attachment-preview img {
+  display: block; max-width: 420px; max-height: 320px;
+  border-radius: 6px; object-fit: contain;
+}
+
+/* 拖拽添加附件：文件拖入页面时的全屏蒙版（pointer-events 穿透，drop 仍落在 window 上）。
+   不使用 backdrop-filter：渲染开销会在大面积拖拽时造成界面抖动。 */
+.chat-drop-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(47, 107, 255, .10);
+  pointer-events: none;
+}
+.chat-drop-box {
+  padding: 18px 34px; border-radius: 14px;
+  background: var(--fade-stop); border: 2px dashed var(--brand);
+  color: var(--brand-dark); font-size: 16px; font-weight: 600;
+  box-shadow: 0 8px 30px rgba(31, 39, 51, .14);
+}
+
+/* ============ 运营后台 admin ============ */
+.admin-page {
+  min-height: 100vh;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 18px 22px 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.admin-topbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 2px 2px;
+}
+.admin-brand { display: flex; align-items: center; gap: 11px; }
+.admin-logo { height: 28px; width: auto; display: block; }
+.admin-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .3px; }
+.admin-range {
+  display: flex; gap: 2px;
+  margin-left: auto;
+  background: var(--field-soft); border: 1px solid var(--line); border-radius: 10px;
+  padding: 3px;
+}
+.admin-range button {
+  border: none; background: transparent; padding: 5px 12px; border-radius: 8px;
+  font-size: 12.5px; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
+  transition: all .12s ease;
+}
+.admin-range button.on {
+  background: var(--overlay-bg); color: var(--brand-dark); font-weight: 600;
+  box-shadow: 0 1px 4px rgba(31, 39, 51, .14);
+}
+.admin-clock {
+  font-size: 13px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums; letter-spacing: .4px;
+}
+
+.admin-kpis {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 14px;
+}
+.admin-kpi {
+  display: flex; align-items: flex-start; gap: 12px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 16px 16px 14px; box-shadow: 0 2px 10px rgba(31, 39, 51, .04);
+}
+.admin-kpi-icon {
+  flex: none; width: 40px; height: 40px; border-radius: 11px;
+  display: grid; place-items: center; color: var(--brand); background: var(--brand-soft);
+}
+.admin-kpi--orange .admin-kpi-icon { color: #b45309; background: var(--warn-soft); }
+.admin-kpi--ok .admin-kpi-icon { color: var(--ok); background: var(--ok-soft); }
+.admin-kpi-body { min-width: 0; }
+.admin-kpi-label { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
+.admin-kpi-value {
+  font-size: 25px; font-weight: 800; line-height: 1.25; margin: 2px 0 1px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.admin-kpi-unit { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
+.admin-kpi-sub {
+  font-size: 11.5px; color: var(--ink-soft); line-height: 1.45;
+  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+
+.admin-grid--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.admin-card {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 16px 18px 12px; box-shadow: 0 2px 10px rgba(31, 39, 51, .04);
+  min-width: 0;
+}
+.admin-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
+.admin-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
+.admin-card-hint { font-size: 11.5px; color: var(--ink-soft); }
+
+.admin-chart-svg { width: 100%; height: auto; display: block; }
+.admin-gridline { stroke: var(--line); stroke-width: 1; }
+.admin-area { fill: rgba(47, 107, 255, .08); }
+.admin-line--ai { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; }
+.admin-bar { fill: #c9dcff; }
+.admin-dot { fill: var(--panel); stroke: var(--brand); stroke-width: 2; }
+.admin-dot--today { fill: var(--brand); stroke: var(--panel); stroke-width: 2.4; }
+.admin-axis-x { font-size: 11px; fill: #8a94a6; }
+.admin-axis-y { font-size: 11px; fill: #8a94a6; }
+
+.admin-pctbars { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 6px; }
+.admin-pct-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
+.admin-pct-label { width: 64px; flex: none; color: var(--ink); }
+.admin-star { font-style: normal; color: #f5a623; }
+.admin-pct-track { flex: 1; height: 8px; border-radius: 999px; background: var(--field-soft); overflow: hidden; }
+.admin-pct-fill { display: block; height: 100%; border-radius: 999px; }
+.admin-pct-num { width: 40px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
+
+.admin-table-wrap { overflow-x: auto; }
+.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.admin-table th {
+  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-soft);
+  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
+}
+.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
+.admin-table tbody tr:last-child td { border-bottom: none; }
+.admin-name { font-weight: 600; }
+.admin-dept { margin-left: 8px; font-size: 11.5px; color: var(--ink-soft); }
+.admin-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.admin-time { color: var(--ink-soft); }
+.admin-issue { max-width: 240px; }
+.admin-agent { font-size: 12.5px; color: var(--brand-dark); }
+
+.admin-badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
+  white-space: nowrap;
+}
+.admin-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.admin-badge--ai { color: var(--brand-dark); background: var(--brand-soft); }
+.admin-badge--done { color: var(--ok); background: var(--ok-soft); }
+.admin-badge--active { color: var(--brand-dark); background: var(--brand-soft); }
+.admin-badge--escalated { color: #b45309; background: var(--warn-soft); }
+.admin-badge--queued { color: #a16207; background: var(--warn-soft); }
+
+.admin-footer {
+  text-align: center; font-size: 11.5px; color: var(--ink-soft);
+  padding: 8px 0 2px;
+}
+
+@media (max-width: 1100px) {
+  .admin-kpis { grid-template-columns: repeat(3, 1fr); }
+  .admin-grid--pair { grid-template-columns: 1fr; }
+}
+@media (max-width: 720px) {
+  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
+  .admin-topbar { flex-wrap: wrap; }
+  .admin-range { margin-left: 0; flex-wrap: wrap; }
+  .admin-clock { margin-left: auto; }
+}
+
+/* ============ 满意度评价（每条 AI 答复末尾） ============ */
+.chat-sat {
+  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
+  flex: none;
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel);
+}
+.chat-sat-title { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink); }
+.chat-sat-row { display: flex; align-items: center; gap: 10px; }
+.chat-sat-stars { display: inline-flex; gap: 2px; }
+.chat-sat-star {
+  border: none; background: none; padding: 0; cursor: pointer;
+  font-size: 18px; line-height: 1; color: var(--ink-soft);
+  transition: transform .1s ease, color .1s ease;
+}
+.chat-sat-star.on { color: #f5a623; }
+.chat-sat-hint { font-size: 11.5px; color: var(--ink-soft); min-width: 68px; }
+.chat-sat-submit {
+  margin-left: auto;
+  border: none; border-radius: 8px; padding: 4px 14px;
+  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
+  font-size: 12px; font-weight: 600; cursor: pointer;
+}
+.chat-sat-submit:disabled { opacity: .45; cursor: default; }
+.chat-sat--done {
+  flex-direction: row; align-items: center; gap: 8px;
+  background: var(--ok-soft); border-color: rgba(52, 179, 107, .35);
+}
+.chat-sat--done .chat-sat-stars i { font-style: normal; font-size: 15px; color: var(--ink-soft); }
+.chat-sat--done .chat-sat-stars i.on { color: #f5a623; }
+.chat-sat-done-text { font-size: 12px; color: var(--ok); }
+
+/* ============ 反馈操作条（点赞 / 点踩，描边图标按钮，仿 WorkBuddy 工具栏） ============ */
+.chat-fb {
+  display: flex; align-items: center; gap: 4px;
+  /* margin-top 由 .msg-footer 统一控制 */
+}
+.chat-fb-btn {
+  width: 21px; height: 21px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; border-radius: 6px;
+  background: transparent; cursor: pointer; padding: 0;
+  color: var(--ink-soft);
+  transition: color .15s, background .15s, transform .1s;
+}
+.chat-fb-btn:active { transform: scale(.92); }
+.chat-fb-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.chat-fb-btn:hover, .chat-fb-vote.on { color: var(--ink); background: var(--hover); }
+.chat-fb-btn.is-copied { color: var(--ok); }
+.chat-fb-vote svg { width: 16px; height: 16px; }
+.chat-fb-menu-item svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.chat-fb-btn svg.chat-fb-icon-selected, .chat-fb-menu-item svg.chat-fb-icon-selected { fill: currentColor; stroke: none; }
+.chat-fb-menu-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
+.chat-fb-check { margin-left: auto; }
+.chat-fb-status { font-size: 11px; color: var(--ink-soft); }
+.chat-fb-status:empty { display: none; }
+.chat-fb-btn.on.up { color: var(--ok); border-color: var(--ok); background: rgba(35,162,111,.08); }
+.chat-fb-btn.on.down { color: #e5484d; border-color: #e5484d; background: rgba(229,72,77,.08); }
+/* 「更多」菜单（复制会话ID）：WorkBuddy 风格悬浮小菜单，竖排选项；浮层用 CSS 变量随明暗主题 */
+.chat-fb-more-wrap { position: relative; display: inline-flex; }
+.chat-fb-more svg circle { fill: currentColor; stroke: none; }
+.chat-fb-more.on { color: var(--ink); border-color: var(--ink-soft); background: var(--line); }
+/* 「…」按钮作为菜单触发器，按下时不缩放，避免点击时的抖动；其 transform 过渡一并关闭 */
+.chat-fb-more:active { transform: none; }
+.chat-fb-more { transition: border-color .15s, color .15s, background .15s; }
+.chat-fb-menu-backdrop { position: fixed; inset: 0; z-index: 240; background: transparent; }
+.chat-fb-menu {
+  /* z 高于聊天区所有浮层（输入区/待发队列 30、顶栏 220、历史/分享下拉 230）：
+     菜单即使弹到输入卡片上方，也始终在输入区之上，用户总能点到菜单项。
+     定位由组件按按钮视口坐标 + 实测菜单高度计算（fixed，并在视口内 clamp）：
+     保证在屏幕任何位置点「…」菜单都不会被滚动容器裁剪或顶出屏幕 */
+  z-index: 241;
+  min-width: 158px; padding: 5px;
+  background: var(--overlay-bg); border: 1px solid var(--line);
+  border-radius: 10px; box-shadow: var(--shadow);
+}
+.chat-fb-menu-item {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; padding: 8px 10px; border: none; background: none; cursor: pointer;
+  font-size: 13px; color: var(--ink); border-radius: 7px; text-align: left;
+  white-space: nowrap;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-fb-menu-item.is-copied { color: var(--ok); }
+/* hover 仅对可悬停设备生效（移动端点击不会粘滞） */
+@media (hover: hover) and (pointer: fine) {
+  .chat-fb-menu-item:hover { background: var(--line); }
+}
+
+/* ============ 产物（Artifact）卡片 ============ */
+.artifact-grid {
+  display: flex; flex-wrap: wrap; gap: 10px;
+  margin: 10px 0 2px;
+}
+.artifact-card {
+  display: inline-flex; align-items: center; gap: 12px;
+  width: min(340px, 100%);
+  padding: 11px 14px;
+  border: 1px solid var(--line); border-radius: 12px;
+  background: var(--panel); color: var(--ink);
+  cursor: pointer; text-align: left;
+  transition: border-color .15s, box-shadow .15s, transform .1s;
+}
+.artifact-card:active { transform: scale(.98); }
+.artifact-card-icon { flex: 0 0 auto; display: inline-flex; }
+.artifact-card-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+/* PDF 图标：SVG Repo 标准图标（白底文档页 + 粗体 PDF），填充灰（与其它文件 icon 颜色统一）、无描边 */
+.artifact-card-icon svg.artifact-icon-pdf { fill: var(--ink-soft); stroke: none; }
+.artifact-card-main {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; flex-direction: column; gap: 3px;
+}
+.artifact-card-name {
+  font-size: 14px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.artifact-card-meta {
+  display: inline-flex; align-items: center; gap: 8px;
+  min-height: 18px;
+}
+.artifact-card-size {
+  flex: 0 0 auto; font-size: 11.5px; color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+/* 右侧「打开预览」箭头：无背景，中性色，hover 不强调 */
+.artifact-card-open {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; background: transparent; color: var(--ink-soft);
+}
+.artifact-card-open svg {
+  width: 14px; height: 14px;
+  fill: none; stroke: currentColor; stroke-width: 2.2;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+
+/* ============ 产物预览抽屉（右侧） ============ */
+.artifact-drawer-backdrop {
+  position: fixed; inset: 0; z-index: 40;
+  background: var(--modal-mask);
+}
+.artifact-drawer {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
+  width: min(64vw, 880px); max-width: 100vw;
+  display: flex; flex-direction: column;
+  background: var(--panel);
+  box-shadow: var(--drawer-shadow);
+  border-left: 1px solid var(--line);
+  animation: artifact-drawer-in .18s ease-out;
+}
+@keyframes artifact-drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
+
+/* ============ 非免费模型（积分）提示 ============ */
+/* 位于回复底部「点赞/点踩」上方：本次对话走了 fallback 积分模型时的提示。
+   仅显示感叹号图标（黑白灰系），hover 出 tooltip 说明文字（data-tip，与 ctx-meter 同款）。 */
+.chat-model-hint {
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px; margin: 0;
+  border-radius: 50%;
+  color: var(--ink-soft);
+  cursor: help;
+  transition: background .15s ease, color .15s ease;
+}
+.chat-model-hint:hover { background: var(--hover); color: var(--ink); }
+.chat-model-hint-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 13px; height: 13px;
+}
+.chat-model-hint-icon svg {
+  width: 13px; height: 13px;
+  fill: none; stroke: currentColor; stroke-width: 1.8;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.chat-model-hint::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 5px 9px;
+  border-radius: 7px;
+  background: var(--bg-float, #fdfdfd);
+  color: var(--ink, #1a1a1a);
+  border: 1px solid var(--line, #e3e8f0);
+  font-size: 12px; line-height: 1.5;
+  box-shadow: 0 4px 14px rgb(0 0 0 / .15);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease;
+  z-index: 40;
+}
+:root[data-theme="dark"] .chat-model-hint::after {
+  background: var(--bg-float, #212121);
+  color: #f0f0f0;
+  border-color: #3a3a3a;
+}
+.chat-model-hint:hover::after { opacity: 1; }
+.artifact-drawer-head {
+  flex: 0 0 auto;
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; padding: 14px 18px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+/* 预览窗口顶部菜单栏：标题 + 右侧操作区（下载图标 / 关闭）同行 */
+.artifact-menu-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.artifact-menu-bar .artifact-drawer-title { flex: 1 1 auto; min-width: 0; }
+/* 预览菜单操作按钮容器：右侧两个按钮并排 */
+.artifact-menu-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
+/* 预览菜单操作按钮（下载 / 全屏 / 关闭）：与输入区 +号、语音按钮一致——
+   无边框圆形，hover 仅黑白灰背景，自身颜色不变（不出现蓝色） */
+.artifact-menu-dl, .artifact-drawer-close, .artifact-drawer-full {
+  flex: 0 0 auto; width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; border-radius: 50%; background: transparent;
+  color: var(--ink-soft); text-decoration: none; cursor: pointer;
+  transition: background .15s ease;
+}
+.artifact-menu-dl svg, .artifact-drawer-close svg, .artifact-drawer-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.artifact-drawer-title { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.artifact-drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--bg); }
+.artifact-frame { width: 100%; height: 100%; border: 0; background: var(--panel); display: block; }
+.artifact-img { display: block; max-width: 100%; margin: 0 auto; }
+.artifact-md { padding: 18px 22px; }
+.artifact-pre {
+  margin: 0;
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace);
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre;
+  overflow: auto;
+  color: var(--ink-soft);
+}
+/* Word(.docx) 内嵌预览（mammoth 转换的 HTML）：文档流样式，随主题变量 */
+.artifact-word {
+  padding: 14px 18px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--ink);
+  overflow: auto;
+}
+.artifact-word h1, .artifact-word h2, .artifact-word h3, .artifact-word h4 {
+  margin: .7em 0 .35em;
+  line-height: 1.35;
+  color: var(--ink);
+}
+.artifact-word h1 { font-size: 20px; }
+.artifact-word h2 { font-size: 17px; }
+.artifact-word h3 { font-size: 15px; }
+.artifact-word h4 { font-size: 14px; }
+.artifact-word p { margin: .45em 0; }
+.artifact-word ul, .artifact-word ol { margin: .4em 0; padding-left: 22px; }
+.artifact-word table { border-collapse: collapse; margin: .6em 0; }
+.artifact-word td, .artifact-word th { border: 1px solid var(--line); padding: 4px 9px; }
+.artifact-word img { max-width: 100%; }
+/* Prism 语法高亮 token 色（浅色默认 + 深色覆盖）：柔和、不抢视线 */
+.artifact-pre {
+  --syn-comment: #8a919c;
+  --syn-keyword: #8250df;
+  --syn-string: #1a7f37;
+  --syn-number: #0550ae;
+  --syn-function: #6639ba;
+  --syn-class: #953800;
+  --syn-operator: #57606a;
+  --syn-property: #0a3069;
+  --syn-tag: #116329;
+  --syn-regex: #cf222e;
+}
+:root[data-theme="dark"] .artifact-pre {
+  --syn-comment: #8b949e;
+  --syn-keyword: #ff7b72;
+  --syn-string: #a5d6ff;
+  --syn-number: #79c0ff;
+  --syn-function: #d2a8ff;
+  --syn-class: #ffa657;
+  --syn-operator: #c9d1d9;
+  --syn-property: #79c0ff;
+  --syn-tag: #7ee787;
+  --syn-regex: #ffa198;
+}
+.artifact-pre .token.comment, .artifact-pre .token.prolog, .artifact-pre .token.doctype, .artifact-pre .token.cdata { color: var(--syn-comment); font-style: italic; }
+.artifact-pre .token.keyword, .artifact-pre .token.atrule, .artifact-pre .token.rule, .artifact-pre .token.important { color: var(--syn-keyword); }
+.artifact-pre .token.string, .artifact-pre .token.char, .artifact-pre .token.attr-value { color: var(--syn-string); }
+.artifact-pre .token.number, .artifact-pre .token.boolean, .artifact-pre .token.constant { color: var(--syn-number); }
+.artifact-pre .token.function, .artifact-pre .token.method { color: var(--syn-function); }
+.artifact-pre .token.class-name, .artifact-pre .token.builtin, .artifact-pre .token.type { color: var(--syn-class); }
+.artifact-pre .token.operator, .artifact-pre .token.punctuation { color: var(--syn-operator); }
+.artifact-pre .token.property, .artifact-pre .token.attr-name, .artifact-pre .token.parameter { color: var(--syn-property); }
+.artifact-pre .token.variable, .artifact-pre .token.selector, .artifact-pre .token.tag { color: var(--syn-tag); }
+.artifact-pre .token.regex, .artifact-pre .token.deleted { color: var(--syn-regex); }
+.artifact-pre .token.inserted { color: var(--syn-string); }
+.artifact-other-hint { padding: 18px 22px; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
+.artifact-loading {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; min-height: 120px;
+}
+.artifact-loading::after {
+  content: "";
+  width: 24px; height: 24px; border-radius: 50%;
+  border: 2.5px solid var(--spin-edge); border-top-color: var(--spin-top);
+  animation: chatSpin .7s linear infinite;
+}
+.artifact-err {
+  margin: 18px 22px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.6;
+  color: var(--danger); background: var(--panel); border: 1px solid var(--line);
+}
+/* 右栏内嵌预览：菜单栏 + 内容区（替换产物列表显示，不再悬浮） */
+.chat-right-preview { display: flex; flex-direction: column; height: 100%; }
+.chat-right-preview-head { flex: 0 0 auto; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
+.chat-right-preview-head .artifact-drawer-title { font-size: 13px; }
+.chat-right-preview-frame { flex: 1 1 auto; min-height: 0; background: var(--panel); overflow: auto; }
+.chat-right-preview-frame .artifact-img { max-height: 100%; object-fit: contain; }
+.chat-right-preview-frame .artifact-frame { height: 100%; }
+.chat-right-preview-frame .artifact-md { height: 100%; overflow: auto; box-sizing: border-box; }
+.chat-right-preview-frame .artifact-other-hint { height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; }
+/* 右侧浏览器实时预览：截图可点击（坐标转发 AI 操作的同一浏览器），底部提示条 */
+.artifact-browser-live {
+  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
+}
+.artifact-img--clickable { cursor: crosshair; flex: 1 1 auto; min-height: 0; max-height: none; object-fit: contain; }
+.artifact-browser-tip {
+  flex: 0 0 auto; padding: 4px 10px; text-align: center;
+  font-size: 11.5px; color: var(--ink-soft); background: var(--field-soft);
+  border-top: 1px solid var(--line);
+}
+
+/* ============ 「查看所有产物」按钮 + 右侧产物列表面板（WorkBuddy 风格） ============ */
+.artifact-viewall-row { margin: 8px 0 2px; display: flex; gap: 8px; flex-wrap: wrap; }
+.artifact-viewall {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--line); border-radius: 999px;
+  background: var(--field-bg); color: var(--ink-soft);
+  font-size: 12.5px; font-weight: 600; line-height: 1.5;
+  cursor: pointer; text-align: left;
+  transition: border-color .15s, background .15s, box-shadow .15s;
+}
+
+/* ============ 变更 diff 视图（对标 WorkBuddy「查看所有变更」） ============
+   右栏：顶部文件 tabs（+新增 / ~修改 / −删除），下方左右并排 diff（左=旧内容红底、右=新内容绿底） */
+.diff-panel {
+  --diff-add-ink: #167346; --diff-del-ink: #b52b37; --diff-mod-ink: #2563c5;
+  --diff-add-bg: rgba(40, 167, 92, .13); --diff-del-bg: rgba(220, 53, 69, .12);
+  --diff-add-strong: rgba(40, 167, 92, .27); --diff-del-strong: rgba(220, 53, 69, .25);
+  display: flex; flex-direction: column; height: 100%; min-height: 0;
+}
+:root[data-theme="dark"] .diff-panel {
+  --diff-add-ink: #72dba0; --diff-del-ink: #ff959d; --diff-mod-ink: #89b8ff;
+  --diff-add-bg: rgba(46, 160, 87, .19); --diff-del-bg: rgba(248, 81, 73, .17);
+  --diff-add-strong: rgba(46, 160, 87, .37); --diff-del-strong: rgba(248, 81, 73, .34);
+}
+.diff-tabs {
+  display: flex; align-items: center; gap: 4px;
+  padding: 8px 10px 6px;
+  border-bottom: 1px solid var(--line);
+  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
+}
+.diff-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  flex: 0 0 auto; max-width: 200px;
+  padding: 4px 9px; border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent; color: var(--ink-soft);
+  font-size: 12px; line-height: 1.4; cursor: pointer;
+  transition: background .15s, border-color .15s;
+}
+.diff-tab:hover { background: var(--hover); }
+.diff-tab.is-active {
+  background: var(--hover-strong); border-color: var(--line);
+  color: var(--ink); font-weight: 600;
+}
+.diff-tab-mark { font-weight: 700; font-size: 12px; line-height: 1; }
+.diff-tab-mark--added { color: var(--diff-add-ink); }
+.diff-tab-mark--modified { color: var(--diff-mod-ink); }
+.diff-tab-mark--deleted { color: var(--diff-del-ink); }
+.diff-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.diff-tabs-spacer { flex: 1; min-width: 6px; }
+.diff-close {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; padding: 0; border-radius: 8px;
+  border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
+  transition: background .15s, color .15s;
+}
+.diff-close:hover { background: var(--hover); color: var(--ink); }
+.diff-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+.diff-file-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--line);
+  background: var(--field-bg);
+}
+.diff-file-name { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.diff-file-size { font-size: 11.5px; color: var(--ink-soft); }
+.diff-change-tag {
+  flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
+  font-size: 11px; font-weight: 600; line-height: 1.5;
+  background: var(--hover-strong); color: var(--ink-soft);
+}
+.diff-change-tag--added { color: var(--diff-add-ink); }
+.diff-change-tag--modified { color: var(--diff-mod-ink); }
+.diff-change-tag--deleted { color: var(--diff-del-ink); }
+.diff-stat { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
+.diff-view-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
+.diff-view-controls button { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 5px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
+.diff-view-controls button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
+.diff-view-controls > span { font-size: 11px; color: var(--ink-soft); }
+.diff-gap td { padding: 0; text-align: center; background: var(--hover); }
+.diff-gap button { display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 12px; }
+.diff-gap button:hover { color: var(--brand); background: var(--brand-soft); }
+.diff-stat-add { color: var(--diff-add-ink); }
+.diff-stat-del { color: var(--diff-del-ink); }
+.diff-stat-modified { color: var(--diff-mod-ink); }
+.diff-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 12px; font-size: 11px; border-bottom: 1px solid var(--line); }
+.diff-notice { padding: 8px 12px; color: var(--ink-soft); font-size: 12px; background: var(--field-bg); }
+.diff-body { flex: 1; min-height: 0; overflow: auto; font-size: 12.5px; line-height: 1.5; }
+.diff-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.diff-lineno-col { width: 58px; }
+.diff-table th { position: sticky; top: 0; z-index: 1; padding: 7px 12px; text-align: left; font-weight: 600; font-size: 11px; color: var(--ink-soft); background: var(--field-bg); border-bottom: 1px solid var(--line); }
+.diff-table th + th, .diff-cell--left { border-right: 1px solid var(--line); }
+.diff-row td {
+  padding: 0 8px; vertical-align: top;
+  font-family: var(--mono, ui-monospace, "Cascadia Code", Consolas, monospace);
+  font-size: 12px; white-space: pre-wrap; word-break: break-all;
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
+}
+.diff-lineno {
+  width: 58px; min-width: 58px; text-align: right;
+  color: var(--ink-soft);
+  user-select: none; -webkit-user-select: none;
+  background: color-mix(in srgb, var(--hover-strong) 40%, transparent);
+}
+.diff-cell { color: var(--ink); }
+.diff-cell--left.is-del, .diff-lineno.is-del { background: var(--diff-del-bg); }
+.diff-cell--right.is-add, .diff-lineno.is-add { background: var(--diff-add-bg); }
+.diff-lineno.is-del { color: var(--diff-del-ink); }
+.diff-lineno.is-add { color: var(--diff-add-ink); }
+.diff-line-mark { float: left; font-weight: 700; }
+.diff-row.is-modified .diff-line-mark { color: var(--diff-mod-ink); }
+.diff-row.is-modified .diff-lineno { box-shadow: inset 3px 0 0 var(--diff-mod-ink); }
+.diff-cell.is-empty { background: color-mix(in srgb, var(--hover-strong) 35%, transparent); }
+.diff-inline { color: inherit; border-radius: 2px; font-weight: 600; }
+.diff-inline--del { background: var(--diff-del-strong); }
+.diff-inline--add { background: var(--diff-add-strong); }
+.diff-no-newline { display: block; font: 10px/1.5 var(--mono, monospace); color: var(--ink-soft); user-select: none; }
+.diff-nocontent {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
+  padding: 24px 16px; color: var(--ink-soft); font-size: 12.5px;
+}
+.diff-nocontent-name { font-weight: 600; color: var(--ink); }
+
+/* 右侧产物列表 */
+.artifact-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
+/* 每行是一个圆角边框容器；⋯ 菜单展开时菜单成为行内第三行，
+   被行自身的圆角边框包住（不弹出到行外） */
+.artifact-list-item {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  width: 100%;
+  position: relative;
+  padding: 2px;
+  border: 1px solid transparent; border-radius: 12px;
+  background: transparent;
+  transition: border-color .12s, background .12s;
+}
+.artifact-list-item.menu-open {
+  border-color: var(--line);
+  background: var(--panel);
+}
+.artifact-list-item-mainbtn {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 10px;
+  border: none; border-radius: 9px;
+  background: transparent; color: var(--ink);
+  cursor: pointer; text-align: left;
+  transition: background .12s, transform .1s;
+}
+.artifact-list-item-mainbtn:active { transform: scale(.99); }
+/* 条目右侧「⋯」操作按钮（WorkBuddy 式菜单入口）；点击在行内展开「打开所在文件夹 / 另存为」 */
+.artifact-list-actions { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
+.artifact-list-more {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border: none; border-radius: 8px;
+  background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0;
+  transition: background .12s, color .12s;
+}
+.artifact-list-more:hover, .artifact-list-more.is-open { background: var(--hover); color: var(--ink); }
+.artifact-list-more svg {
+  width: 16px; height: 16px; fill: var(--ink-soft); stroke: none;
+}
+.artifact-list-more:hover svg, .artifact-list-more.is-open svg { fill: var(--ink); }
+/* 「⋯」菜单：行内展开（作为行容器的第三行，占满行宽，被行圆角边框包住） */
+.artifact-list-menu {
+  flex: 1 1 100%; /* 换行到第二行，占满行宽 */
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 4px 6px 6px;
+  border: none; border-radius: 0; background: transparent; box-shadow: none;
+}
+.artifact-list-menu button {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  padding: 7px 9px; border: none; border-radius: 7px;
+  background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left;
+}
+.artifact-list-menu button:hover { background: var(--hover); }
+.artifact-list-menu button svg {
+  width: 15px; height: 15px; flex: 0 0 auto;
+  fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
+}
+.artifact-list-menu button:hover svg { stroke: var(--ink); }
+.artifact-list-item-main {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; flex-direction: column; gap: 3px;
+}
+.artifact-list-item-name {
+  font-size: 13.5px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.artifact-list-item-meta { font-size: 11.5px; color: var(--ink-soft); }
+
+/* ============ 优雅提示与错误框 ============ */
+.chat-hint { margin: 6px auto 2px; max-width: 92%; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
+.chat-hint--slow {
+  background: var(--brand-soft, rgba(31, 39, 51, .05));
+  color: var(--ink-soft); border: 1px solid var(--line);
+}
+.chat-error {
+  display: flex; align-items: center; gap: 10px; margin: 8px auto 2px; max-width: 92%;
+  padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
+  background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .35); color: var(--danger);
+}
+.chat-error-icon {
+  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
+  background: var(--danger); color: #fff; font-weight: 700; font-size: 13px; line-height: 18px; text-align: center;
+}
+.chat-error-text { flex: 1 1 auto; word-break: break-word; }
+
+/* 发送区：停止按钮（生成中显示）。灰色系。外部保持圆形（继承 .chat-send），
+   仅阴影收敛（区别于发送按钮的大阴影）；中间的方形图标比发送图标略大 */
+.chat-send--stop {
+  /* 参考截图：白色圆形 + 内部黑色实心方块（深色背景上高亮；浅色主题靠细边框区分） */
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .08);
+  color: #111;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
+}
+.chat-send--stop svg {
+  width: 20px; height: 20px;
+  fill: currentColor; stroke: none; /* 实心方块（覆盖 .chat-send svg 的描边模式） */
+  animation: chatStopBreathe 2.2s ease-in-out infinite;
+}
+@keyframes chatStopBreathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(.88); }
+}
+
+/* 助手消息最上方的共用时提示：从用户发送消息开始计时，到全部答复完成/用户停止 */
+.msg-elapsed {
+  margin: 0 0 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--ink-soft, #5b6573);
+  opacity: .8;
+  user-select: none;
+}
+
+/* 豆包 Work 式「已完成」折叠卡：代替 msg-elapsed 纯文本。流式中不显示（过程由下方思考/工具步直播）；
+   完成后显示「已完成 X · ▸」，点击卡片展开/收起该消息的全部思考与工具调用。
+   纯文本行样式：无背景无边框，与下方内容天然左对齐 */
+.msg-process-card {
+  display: inline-flex; align-items: center; gap: 7px;
+  margin: 0 0 8px; padding: 0;
+  border: none; background: transparent;
+  font-size: 14px; line-height: 1.4; color: var(--ink-soft);
+  cursor: pointer; user-select: none;
+  transition: color .15s ease;
+}
+.msg-process-card:hover { color: var(--ink); }
+.msg-process-label { font-variant-numeric: tabular-nums; }
+.msg-process-chevron {
+  flex: 0 0 auto;
+  transition: transform .15s ease;
+}
+/* 与 tools 胶囊同款 SVG 描边 chevron：收起向右、展开向下（rotate 90deg） */
+.msg-process-chevron svg {
+  width: 12px; height: 12px;
+  fill: none; stroke: currentColor; stroke-width: 2;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.msg-process-card.is-open .msg-process-chevron { transform: rotate(90deg); }
+
+/* 助手消息底部操作行 */
+.msg-footer {
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  margin-top: 10px;
+}
+/* 非最后一条助手消息：footer 默认隐藏，hover 该消息时才显示（保留占位，避免布局抖动） */
+@media (hover: hover) and (pointer: fine) {
+  .msg-footer:not(.msg-footer--last) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .15s;
+  }
+  .msg:hover .msg-footer:not(.msg-footer--last) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* 助手消息底部费用提示（与点赞点踩同一行） */
+.msg-cost {
+  margin: 0;
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: var(--ink-soft, #5b6573);
+  opacity: .75;
+  user-select: none;
+}
+
+/* 助手消息底部时间：最后一条始终显示，其他消息默认隐藏、hover 时显示 */
+.msg-footer-time {
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  opacity: .75;
+  user-select: none;
+}
+.msg-footer-time-hover {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.msg-footer:hover .msg-footer-time-hover {
+  opacity: .75;
+}
+
+/* 删除确认对话框 + 全局 loading 遮罩 */
+.chat-modal-backdrop {
+  position: fixed; inset: 0; background: var(--modal-mask);
+  display: flex; align-items: center; justify-content: center; z-index: 1000;
+  backdrop-filter: blur(2px);
+}
+/* Electron：关闭遮罩 blur（合成异常），保留半透明暗色 */
+.env-electron .chat-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
+.chat-modal-backdrop--busy { pointer-events: none; }
+.chat-modal {
+  background: var(--panel); border-radius: 14px; padding: 22px 24px; width: 320px;
+  box-shadow: 0 12px 40px rgba(0,0,0,.18); text-align: center;
+}
+.chat-modal--loading { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 200px; }
+.chat-modal-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
+.chat-modal-desc { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
+.chat-modal-actions { display: flex; gap: 10px; justify-content: center; }
+.chat-modal-btn {
+  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--field-bg);
+  font-size: 13px; cursor: pointer; color: var(--ink);
+}
+.chat-modal-btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
+.chat-spinner {
+  width: 28px; height: 28px; border: 3px solid #e2e8f0; border-top-color: #2563eb;
+  border-radius: 50%; animation: chatSpin .8s linear infinite;
+}
+@keyframes chatSpin { to { transform: rotate(360deg); } }
+
+/* 输入图片全屏预览（应用大小浮层）：点击右栏输入文件图片打开；深色底、顶栏文件名+下载/关闭，图片居中 contain */
+.chat-img-preview {
+  position: fixed; inset: 0; z-index: 1100;
+  background: rgba(12, 14, 18, .94);
+  display: flex; flex-direction: column;
+}
+.chat-img-preview-head {
+  flex: 0 0 auto; height: 52px; padding: 0 14px;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--line);
+}
+.chat-img-preview-name {
+  font-size: 13px; font-weight: 600; color: var(--ink);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
+}
+.chat-img-preview-actions { display: flex; gap: 8px; flex: 0 0 auto; }
+.chat-img-preview-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 8px;
+  border: 1px solid var(--line); background: var(--field-bg); color: var(--ink);
+  cursor: pointer; text-decoration: none;
+}
+.chat-img-preview-btn:hover { background: var(--hover-strong); }
+.chat-img-preview-btn svg {
+  width: 16px; height: 16px; fill: none; stroke: currentColor;
+  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+}
+.chat-img-preview-body {
+  flex: 1 1 auto; min-height: 0;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.chat-img-preview-img {
+  max-width: 100%; max-height: 100%; object-fit: contain;
+  border-radius: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
+}
+
+/* 用户长输入折叠：折叠尾部渐隐罩 + 居中的"展开全部"按钮，与消息同属一个气泡 */
+/* 渐隐罩：盖在被截断文字最后几行上，从透明渐变到气泡背景色，配合极轻 blur 形成小毛玻璃过渡 */
+.chat-expand-fade {
+  height: 26px;
+  margin: -26px -14px 0 -14px; /* 覆盖气泡左右 padding（11px 14px），让渐变横跨内容宽度 */
+  background: linear-gradient(180deg, rgba(240, 240, 240, 0), rgba(240, 240, 240, .96));
+  pointer-events: none;
+}
+@supports (backdrop-filter: blur(1px)) {
+  .chat-expand-fade { backdrop-filter: blur(1.2px); }
+}
+/* Electron 内核的 backdrop-filter 合成会把下方内容一起糊掉（历史问题），仅保留渐变 */
+.env-electron .chat-expand-fade { backdrop-filter: none; }
+
+.chat-expand-toggle {
+  margin-top: 8px;
+  font-size: 12.5px;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  transition: color .15s ease;
+}
+
+/* hover 用户消息时显示操作栏（消息底部，图标） */
+.msg.user .msg-hover-actions {
+  opacity: 0;
+  transition: opacity .15s;
+  margin-top: 4px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: flex-end;
+}
+.msg-hover-actions .msg-time {
+  font-size: 12px;
+  color: var(--ink-soft);
+  margin-right: 4px;
+}
+.msg-hover-actions button {
+  width: 26px; height: 26px;
+  display: flex; align-items: center; justify-content: center;
+  border: none; background: transparent;
+  color: var(--ink-soft);
+  cursor: pointer;
+  border-radius: 6px;
+}
+/* 复制成功反馈：绿色对勾 + 浅绿底，1.8s 后由组件恢复为普通态 */
+.msg-hover-actions button.is-copied { background: var(--copied-bg); color: var(--copied-ink); }
+.msg-hover-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+/* 原地编辑用户消息（workbuddy 浅色风格） */
+/* 编辑态：原地右对齐（与已发送用户消息一致）。宽度由组件在进入编辑时量取「原气泡宽度」后
+   以行内样式写到 .msg.user 上——编辑框与编辑前的消息框同宽，而非撑满用户消息最大宽度。
+   ★ .msg.user 必须保留 align-self: flex-end（不能对整个消息行 stretch）——否则消息行占满整行、
+     编辑框从最左起排，视觉上"闪到中间"。
+   ★★ min-width 是必需的兜底：短消息（如"Hi"）的原气泡本身很窄，量出来的宽度装不下
+     底部「提示语 + 取消/发送」按钮，flex-wrap 会把它们压成竖排一字一行（见 issue：编辑框被改坏）。
+     因此宽度取 max(原气泡宽, EDIT_MIN_WIDTH)——长消息仍与原消息同宽，短消息至少能放下底部元素。*/
+.msg.user.is-editing { align-self: flex-end; width: max-content; min-width: min(100%, 420px); max-width: min(100%, 860px); }
+/* .msg.user 编辑态已带确定的量取宽度，气泡撑满它即可复用自身底色/圆角/内边距，
+   使可见编辑框与已发送用户消息同宽同形，右缘原地不动、向左铺开（不换行、不跳位）。 */
+.msg.user.is-editing .bubble { width: 100%; max-width: 100%; }
+/* 编辑框仅作透明容器：底色/内边距由外层 .bubble 提供，避免双层背景与内边距叠加导致右缘内缩 */
+.msg-edit-box { width: 100%; box-sizing: border-box; }
+.msg-edit-textarea {
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--ink);
+  /* 与 .msg .bubble 完全一致：字号/行高随已发送用户消息，避免编辑时字体"变小" */
+  font-size: 15.5px;
+  line-height: 1.65;
+  resize: none;
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: inherit;
+}
+.msg-edit-footer {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+  flex-wrap: wrap; /* 窄消息框内提示语与按钮换行，避免溢出编辑框 */
+}
+/* 提示语允许压缩并省略，优先保住「取消/发送」按钮不被压行 */
+.msg-edit-hint { font-size: 12px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* 按钮组不参与收缩：任何宽度下都保持「取消」「发送」并排、不换行、不竖排 */
+.msg-edit-btns { display: flex; gap: 8px; flex: none; white-space: nowrap; }
+.msg-edit-btns .chat-modal-btn { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); padding: 4px 12px; }
+.chat-modal-btn--primary { background: var(--send-bg) !important; border-color: var(--send-bg) !important; color: var(--send-ink) !important; }
+
+/* ============ 移动端适配 ============
+   断点策略：
+   1. > 767.98px  —— 桌面三栏（左右栏 flex 占位，挤压中栏），维持原布局；
+   2. ≤ 767.98px —— 移动端：左右栏改为「悬浮抽屉」（fixed 覆盖在中栏之上，
+      不再占 flex 空间、不挤压中栏），中栏占满整宽；
+   3. 中栏最小宽度 --chat-min-w（360px）：视口小于该值时中栏保持最小宽度不再压缩，
+      超出部分被壳层裁切（放弃适配，不显示提示）。 */
+
+/* 移动端抽屉遮罩：默认隐藏（桌面无此元素语义）；JS 在左/右抽屉打开时渲染，
+   点击关闭抽屉。仅在移动端媒体查询下可见 */
+.chat-mobile-backdrop { display: none; }
+
+@media (max-width: 767.98px) {
+  /* 移动端浏览器地址栏伸缩：用 dvh 兜底（不支持时回退 100vh） */
+  .chat-shell, .chat-main { height: 100dvh; }
+  /* 中栏最小宽度：视口 < --chat-min-w 时中栏保持最小宽度不再压缩，
+     超出部分由 .chat-shell 的 overflow-x:hidden 裁切（放弃适配，无提示） */
+  .chat-main { min-width: var(--chat-min-w); }
+
+  /* ---- 左/右栏 → 悬浮抽屉 ---- */
+  .chat-pane-left, .chat-pane-right {
+    position: fixed; top: 0; bottom: 0; z-index: 200;
+    flex: none; overflow: hidden;
+    transition: transform .2s ease;
+    box-shadow: var(--mobile-drawer-shadow);
+  }
+  .chat-pane-left {
+    left: 0; width: 280px;
+    transform: translateX(-100%);
+  }
+  .chat-pane-left.is-open { transform: translateX(0); }
+  .chat-pane-right {
+    right: 0;
+    /* 默认 340px，但不超过视口 88%：窄屏下避免抽屉占满整屏 */
+    width: min(var(--right-w, 340px), 88vw);
+    transform: translateX(100%);
+  }
+  .chat-pane-right.is-open { transform: translateX(0); }
+  .chat-pane-right.is-dragging { transition: none; }
+
+  /* 移动端抽屉无拖拽改宽语义，隐藏 resizer */
+  .chat-resizer { display: none; }
+
+  /* 抽屉遮罩：盖住中栏，点击（JS onClick）关闭抽屉 */
+  .chat-mobile-backdrop {
+    display: block;
+    position: fixed; inset: 0; z-index: 150;
+    background: rgba(20, 27, 38, .32);
+  }
+
+  /* ---- 中栏细节 ---- */
+  .chat-topbar { height: 48px; padding: 0 10px; gap: 8px; }
+  .chat-sidebar-toggle { width: 32px; height: 32px; }
+  .chat-topbar-btn { width: 32px; height: 32px; }
+  .chat-topbar-right { gap: 2px; }
+  .chat-title--center {
+    max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
+  }
+  .chat-title--left { max-width: 34vw; }
+  .chat-search-bar { padding: 6px 10px; gap: 6px; }
+  .chat-search-bar-count { min-width: 28px; }
+  .chat-history-pop,
+  .chat-share-pop { top: 62px; right: 8px; width: min(340px, calc(100vw - 16px)); }
+  .chat-history-list { max-height: 48vh; }
+  .chat-body-inner { max-width: 100%; margin: 0; padding: 14px 14px; gap: 12px; }
+  /* 移动端取消桌面端「内容区按中栏 80% 居中」的约束（否则窄屏左右各留 10% 大留白）。
+     空态 .is-empty .chat-main-inner 优先级更高，保持自身 32px 内边距不变。 */
+  .chat-main-inner { max-width: 100%; margin: 0; }
+  .msg { max-width: 100%; }
+  .chat-scene-bar { padding: 8px 10px 2px; }
+  .chat-composer-stack { margin: 0 10px 10px; border-radius: 16px; }
+  .chat-composer { padding: 12px 12px 8px; }
+  .chat-workspace { margin: 0 10px 10px; }
+  /* ≥16px 防止 iOS Safari 聚焦输入框时自动放大页面 */
+  .chat-composer textarea { font-size: 16px; }
+  .chat-queue { border-radius: 16px 16px 0 0; }
+
+  /* ---- 右栏抽屉内部 ---- */
+  .chat-right-section--inputs { max-height: 40%; }
+  .chat-right-section--outputs { max-height: 60%; }
+  .chat-right-section--outputs.is-full { max-height: 100%; }
+
+  /* 全局产物预览抽屉：窄屏下全屏铺开，便于阅读 */
+  .artifact-drawer { width: 100vw; border-left: none; }
+}
+
+/* ============ 深色主题定向覆盖（变量覆盖不到、需按 data-theme 单独写的几处） ============ */
+:root[data-theme="dark"] .login-page {
+  background: radial-gradient(1200px 600px at 50% -10%, #2a2d34 0%, var(--bg) 55%);
+}
+/* 用户消息长输入折叠渐隐：深色下从气泡深灰渐变 */
+:root[data-theme="dark"] .chat-expand-fade {
+  background: linear-gradient(180deg, rgba(58, 62, 70, 0), rgba(58, 62, 70, .96));
+}
+/* 移动端抽屉遮罩：深色下用更重的黑幕 */
+:root[data-theme="dark"] .chat-mobile-backdrop { background: rgba(0, 0, 0, .5); }
+/* 右栏拖拽分隔条：深色下黑条不可见，换白条 */
+:root[data-theme="dark"] .chat-resizer::after { background: rgba(255, 255, 255, .28); }
+/* 行内代码（暗色）：对齐 WorkBuddy —— 灰色背景 + 近白文字，不用红色 */
+:root[data-theme="dark"] .bubble .md :not(pre) > code, :root[data-theme="dark"] .artifact-md .md :not(pre) > code{
+  background: rgba(255, 255, 255, .08);
+  border-color: rgba(255, 255, 255, .1);
+  color: #e6e6e6;
+}
+/* 引用块文字：深色下浅色 #334155 看不清，提亮 */
+:root[data-theme="dark"] .bubble .md blockquote, :root[data-theme="dark"] .artifact-md .md blockquote{ color: #c3cfdf; }
+
+
+/* ============ 移动端 hover 粘滞修复 ============
+ * 触摸设备（hover: none）点击后 :hover 状态会“粘住”，
+ * 全部 :hover 视觉规则统一收敛到 (hover: hover) 设备才生效。
+ * 注：移动端功能性 hover（如侧栏操作按钮、消息操作浮层）由 JS 以点击方式替代。 */
+@media (hover: hover) and (pointer: fine) {
+  *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
+  .chat-body.sb-active::-webkit-scrollbar-thumb:hover,
+  .chat-right-section-body.sb-active::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
+  .login-provider-button:hover { background: var(--hover-strong); }
+  .login-dingtalk-button:hover { background: var(--hover-strong); }
+  .login-dev-button:hover { background: var(--hover-strong); }
+  .chat-sidebar-toggle:hover { background: var(--hover); color: var(--ink); }
+  .chat-bottom-btn:hover { background: var(--hover-strong); color: var(--ink); border-color: var(--line); }
+  .chat-resizer:hover::after, .chat-resizer.is-dragging::after { opacity: 1; }
+  .chat-right-file:hover { background: var(--hover); }
+  .chat-right-file-dl:hover { background: var(--hover); color: var(--ink); }
+  .chat-user-menu-item:hover { background: var(--hover); }
+  .chat-user-menu-item--danger:hover { background: var(--danger-soft); color: var(--danger); }
+  .chat-sidebar-new:hover { background: var(--hover-strong); }
+  .chat-sidebar-item:hover { background: var(--hover-strong); }
+  .chat-sidebar-item:hover .chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-text,
+  .chat-sidebar-item.is-active:hover .chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-text {
+    animation: chatTitleMarquee var(--marquee-dur, 4s) linear infinite;
+    overflow: visible;
+  }
+  .chat-sidebar-item:hover .chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-t2,
+  .chat-sidebar-item.is-active:hover .chat-sidebar-item-title.is-marquee .chat-sidebar-item-title-t2 {
+    display: inline-block;
+  }
+  .chat-sidebar-item:hover .chat-sidebar-item-actions { display: flex; }
+  .chat-sidebar-item:hover .chat-sidebar-item-time { display: none; }
+  .chat-sidebar-item-act:hover { color: var(--ink); }
+  .chat-question-opt:hover { background: var(--hover); }
+  .chat-question-submit:hover:not(:disabled) { opacity: .9; }
+  .chat-topbar-btn:hover { background: var(--hover); color: var(--ink); }
+  .chat-search-bar-btn:hover { background: var(--hover); color: var(--ink); }
+  .chat-history-item:hover { background: var(--brand-soft); }
+  .chat-share-close:hover { background: var(--hover-strong); color: var(--ink); }
+  .chat-share-opt:hover:not(:disabled) { background: var(--hover-strong); }
+  .chat-share-oa-link:hover { background: var(--hover-strong); }
+  .chat-suggestions button:hover { background: var(--brand-soft); }
+  .msg-attachment:hover { background: var(--brand-soft); border-color: var(--brand-line-strong); }
+  .chat-owner-card:hover { border-color: #2563eb; box-shadow: 0 2px 10px rgba(47, 107, 255, .12); }
+  .bubble .md a:hover, .artifact-md .md a:hover{ border-bottom-color: var(--brand); }
+  .chat-thinking-done-toggle:hover { color: var(--ink); }
+  .chat-browser-ask-btn:hover:not(:disabled) { background: var(--active); }
+  .chat-notify-banner-link:hover { text-decoration: underline; }
+  .chat-notify-banner-close:hover { background: var(--hover); color: var(--ink); }
+  .chat-queue-act:hover { background: var(--hover); color: var(--ink); }
+  .chat-queue-act--danger:hover { background: var(--danger-soft); color: var(--danger); }
+  .chat-scene:hover { border-color: var(--brand); color: var(--brand-dark); }
+  .chat-tool:hover { background: var(--hover); }
+  .chat-voice:hover:not(:disabled) { background: var(--hover); }
+  .chat-voice.recording:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
+  .chat-model-picker-btn:hover { background: var(--hover); }
+  .chat-model-picker-item:hover { background: var(--hover); }
+  .chat-send:hover { background: var(--send-bg-hover); }
+  .chat-send:disabled:hover { background: var(--send-bg); transform: none; }
+  .chat-attachment:hover .chat-attachment-icon { opacity: 0; }
+  .chat-attachment:hover .chat-attachment-remove { opacity: 1; transform: scale(1); }
+  .chat-attachment-wrap:hover .chat-attachment-preview { opacity: 1; visibility: visible; transform: translateY(0); }
+  .admin-range button:hover { color: var(--brand-dark); }
+  .admin-table tbody tr:hover { background: var(--hover); }
+  .chat-sat-star:hover { transform: scale(1.15); }
+  .chat-fb-btn:hover { background: var(--hover); color: var(--ink); }
+  .artifact-card:hover {
+    border-color: var(--line);
+    box-shadow: var(--shadow);
+    background: var(--field-soft);
+  }
+  .artifact-menu-dl:hover, .artifact-drawer-close:hover { background: var(--hover); }
+  .artifact-viewall:hover {
+    border-color: var(--line); background: var(--hover);
+    box-shadow: var(--shadow);
+  }
+  .artifact-list-item:hover .artifact-list-item-mainbtn {
+    background: var(--hover);
+    border-color: transparent;
+  }
+  .artifact-list-item:hover .artifact-list-item-name { color: var(--ink); }
+  .artifact-list-item:hover .artifact-list-item-meta { color: var(--ink); }
+  .chat-send--stop:hover { background: #f2f2f2; color: #111; transform: none; }
+  .chat-modal-btn:hover { background: var(--hover-strong); }
+  .chat-modal-btn--danger:hover { background: #d13438; }
+  .chat-expand-toggle:hover { color: var(--ink); }
+  .msg.user:hover .msg-hover-actions { opacity: 1; }
+  .msg-hover-actions button:hover { background: var(--hover-strong); color: var(--ink); }
+  .msg-hover-actions button.is-copied:hover { background: var(--copied-bg); color: var(--copied-ink); }
+  .msg-edit-btns .chat-modal-btn:hover { background: var(--hover-strong); color: var(--ink); }
+  .chat-modal-btn--primary:hover { background: var(--send-bg-hover) !important; }
+}
+
+/* ============ 移动端交互体验补强 ============ */
+/* 触摸设备：点击闪动高亮去掉（黑白灰系） */
+* { -webkit-tap-highlight-color: transparent; }
+/* 按钮/链接：touch-action manipulation 消除双击缩放与点击延迟 */
+button, a, [role="button"], input, textarea, select {
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
+}
+/* 滚动容器：overscroll contain 阻止移动端滚动链穿透（下拉刷新/回弹带动页面） */
+.chat-body, .chat-sidebar-list, .chat-history-list,
+.chat-right-section-body { overscroll-behavior: contain; }
+
+/* 触摸设备（hover: none）：会话条目不再常显操作按钮——改用长按/右键弹出操作菜单；
+   时间位恢复正常显示，并禁用长按选中文本 */
+@media (hover: none) {
+  .chat-sidebar-item .chat-sidebar-item-actions { display: none; }
+  .chat-sidebar-item { user-select: none; -webkit-user-select: none; }
+  /* 用户消息操作浮层（复制/编辑等）常显 */
+  .msg.user .msg-hover-actions { opacity: 1; }
+  /* 附件移除按钮常显（图标隐藏让位） */
+  .chat-attachment .chat-attachment-icon { opacity: 0; }
+  .chat-attachment .chat-attachment-remove { opacity: 1; transform: scale(1); }
+}
+/* 触屏（含混合设备，即便被系统识别为可悬停）：会话 ⋯ 按钮同样隐藏，长按弹菜单 */
+@media (pointer: coarse) {
+  .chat-sidebar-item .chat-sidebar-item-actions { display: none; }
+}
+
+/* ============ Admin 用量分析页（黑白灰系，无依赖 SVG 图表） ============ */
+.au-page {
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--ink);
+  padding: 0 24px 48px;
+  font-size: 13.5px;
+}
+.au-topbar {
+  display: flex; align-items: center; gap: 14px;
+  padding: 16px 0 14px; margin-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+.au-back {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 6px 12px; border-radius: 8px;
+  border: 1px solid var(--line); background: var(--field-bg); color: var(--ink);
+  cursor: pointer; font-size: 13px;
+}
+.au-back:hover { background: var(--hover-strong); }
+.au-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.au-title { margin: 0; font-size: 18px; font-weight: 700; }
+.au-topbar-note { color: var(--ink-soft); font-size: 12px; margin-left: auto; }
+.au-error {
+  padding: 12px 16px; border-radius: 10px;
+  background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .35);
+  color: var(--danger); font-size: 13px;
+}
+.au-loading {
+  display: flex; align-items: center; gap: 10px;
+  color: var(--ink-soft); font-size: 14px; padding: 40px 0;
+}
+/* admin 登录表单（黑白灰系）：仅管理员可访问用量页 */
+.au-login-wrap { display: flex; justify-content: center; padding: 64px 0; }
+.au-login-card {
+  width: 100%; max-width: 340px;
+  display: flex; flex-direction: column; gap: 12px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  padding: 24px 22px;
+}
+.au-login-title { font-size: 17px; font-weight: 700; }
+.au-login-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
+.au-login-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-soft); }
+.au-login-field input {
+  border: 1px solid var(--line); border-radius: 8px; background: var(--field-bg);
+  color: var(--ink); padding: 8px 10px; font-size: 13.5px;
+}
+.au-login-field input:focus { outline: none; border-color: var(--ink); }
+.au-login-err { font-size: 12.5px; color: var(--danger); }
+.au-login-submit {
+  margin-top: 6px; border: none; border-radius: 999px; padding: 9px 0;
+  cursor: pointer; font-size: 13.5px; font-weight: 600;
+  color: var(--panel); background: var(--ink);
+  transition: opacity .15s ease, transform .1s ease;
+}
+.au-login-submit:hover:not(:disabled) { opacity: .9; }
+.au-login-submit:active:not(:disabled) { transform: scale(.98); }
+.au-login-submit:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
+.au-logout { margin-left: 0; }
+/* 无 cost_info 数据的空态：整页展示「暂无用量数据」，不报错 */
+.au-empty-page {
+  padding: 64px 24px; text-align: center;
+  background: var(--panel); border: 1px dashed var(--line); border-radius: 12px;
+}
+.au-empty-page-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
+.au-empty-page-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
+.au-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
+.au-card {
+  flex: 1 1 150px; min-width: 140px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  padding: 16px 18px;
+}
+.au-card-num { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
+.au-card-cap { font-size: 12px; color: var(--ink-soft); }
+.au-sec { margin-bottom: 28px; }
+.au-sec-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
+.au-empty { color: var(--ink-soft); font-size: 13px; }
+.au-hbar { width: 100%; max-width: 720px; height: auto; display: block; }
+.au-bar-label { fill: var(--ink-soft); }
+.au-bar-rect { fill: var(--ink); opacity: .82; }
+.au-bar-val { fill: var(--ink); font-weight: 600; }
+.au-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
+.au-table { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 12.5px; }
+.au-table th, .au-table td {
+  padding: 8px 12px; text-align: left;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+.au-table th { background: var(--hover-strong); color: var(--ink-soft); font-weight: 600; position: sticky; top: 0; }
+.au-table tbody tr:hover { background: var(--hover); }
+.au-num { text-align: right; font-variant-numeric: tabular-nums; }
+.au-strong { font-weight: 700; }
+.au-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
+.au-preview { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
+/* 按会话分组合并单元格：第一列合并（Excel 合并样式），单元格内为会话名 + 该会话合计 */
+.au-col-session { min-width: 150px; }
+.au-group-cell {
+  background: var(--hover); vertical-align: middle; min-width: 150px;
+  border-top: 1px solid var(--line);
+}
+.au-group-title { font-weight: 700; color: var(--ink); font-size: 12.5px; line-height: 1.4; }
+.au-group-total { font-size: 11px; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.4; }
+/* 会话组之间的分隔：组首行上方一条更明显的线 */
+.au-table tbody tr.au-row-first td { border-top: 1px solid var(--ink-soft); }
+.au-foot { color: var(--ink-soft); font-size: 12px; margin-top: 8px; }
+
+/* ============ 侧边消息滑块（ChatGPT/豆包式 minimap，组件 MessageSlider.tsx） ============
+   挂在 .chat-main（position:relative）内、聊天区右缘；显隐由 JS 控制（宽度/可滚动判定）。
+   横线颜色：视口内=--slider-on（亮），滚出视口=--slider-off（灰）；hover 加宽+高亮。 */
+.chat-slider {
+  position: absolute; left: 10px; top: 90px; bottom: 190px; z-index: 30;
+  display: flex; align-items: center;
+  pointer-events: none; /* 容器不拦截，滚轮/点击穿透到聊天区；仅轨道可交互 */
+  opacity: 0; visibility: hidden;
+  transition: opacity .18s ease, visibility .18s;
+}
+.chat-slider.is-show { opacity: 1; visibility: visible; }
+.chat-slider-track { position: relative; width: 64px; pointer-events: auto; }
+/* 横线：宽度全部由 JS 经 --w 变量给出（非 hover 统一 10px；hover 时按与悬停横线的
+   距离指数衰减渐变——hover 最宽、相邻次之、远处钳回 10px，友商同款「波峰」过渡）。
+   3px 视觉高度 + 14px 命中区（background-clip: content-box 只画中间 3px） */
+.chat-slider-dash {
+  position: absolute; left: 0; height: 14px; padding: 5.5px 0; box-sizing: border-box;
+  border: none; border-radius: 2px; cursor: pointer;
+  background: var(--slider-off); background-clip: content-box;
+  width: var(--w, 10px);
+  transition: width .14s ease, background-color .18s ease;
+}
+.chat-slider-dash.is-on { background-color: var(--slider-on); }
+.chat-slider-dash.is-hover { background-color: var(--slider-hover); }
+.chat-slider-dash:focus-visible { outline: 1px solid var(--brand); outline-offset: 1px; }
+/* 提问 tooltip：hover 横线右侧弹出，显示该消息所属轮次的用户提问（点击横线即跳到那个提问）。
+   定位模型：position: fixed（包含块=视口），left/top 由 JS 从横线按钮 getBoundingClientRect 算出。
+   这是竖条塌陷的根治方案——absolute + 64px track 包含块会把 shrink-to-fit 可用宽度压到 64px，
+   中文逐字断行一字一行；fixed 下可用宽度=视口，width:max-content 自然取内容真实宽度，
+   max-width:340px 只在超宽时折行 → 短文字窄气泡、长文字 340px 换行。
+   最多 5 行：max-height 裁切 + JS 侧 120 字截断加「…」。 */
+.chat-slider-tip {
+  position: fixed; transform: translateY(-50%);
+  width: max-content; max-width: 340px;
+  max-height: calc(5 * 1.5em + 16px); overflow: hidden;
+  padding: 8px 12px; border-radius: 10px;
+  background: var(--toast-bg); color: var(--ink);
+  border: 1px solid var(--line); box-shadow: var(--shadow);
+  font-size: 12.5px; line-height: 1.5;
+  pointer-events: none; z-index: 31;
+}
+.chat-slider-tip-text {
+  display: block;
+  white-space: normal; word-break: break-word;
+  max-width: 340px;
+}