From 3bc6f718eb4f8426c6749166a30449d304a3def4 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Thu, 28 May 2026 03:53:49 +0800
Subject: [PATCH] feat(ui): refine sidebar workspace and code blocks

---
 agentskills/ui-aesthetic-design/SKILL.md      |  150 +
 docs/code_block_demo.html                     |  200 +
 docs/sidebar_overlay_demo.html                |  581 ++
 docs/sidebar_workspace_demo.html              |  556 ++
 static/src/components/panels/LeftPanel.vue    |    9 +-
 .../sidebar/ConversationSidebar.vue           |  379 +-
 .../styles/components/chat/_chat-area.scss    | 1646 ++---
 .../styles/components/overlays/_overlays.scss | 5468 ++++++++---------
 .../styles/components/panels/_left-panel.scss | 1101 ++--
 .../components/sidebar/_conversation.scss     | 1117 ++--
 static/src/styles/utilities/_responsive.scss  |   56 +-
 static/src/utils/icons.ts                     |    1 +
 12 files changed, 6280 insertions(+), 4984 deletions(-)
 create mode 100644 agentskills/ui-aesthetic-design/SKILL.md
 create mode 100644 docs/code_block_demo.html
 create mode 100644 docs/sidebar_overlay_demo.html
 create mode 100644 docs/sidebar_workspace_demo.html

diff --git a/agentskills/ui-aesthetic-design/SKILL.md b/agentskills/ui-aesthetic-design/SKILL.md
new file mode 100644
index 0000000..c4ac63c
--- /dev/null
+++ b/agentskills/ui-aesthetic-design/SKILL.md
@@ -0,0 +1,150 @@
+---
+name: ui-aesthetic-design
+description: 用于进行高质量 UI 美学设计、界面精致化、组件视觉评审与前端 demo 设计的通用设计规范。当任务涉及现代系统界面、侧边栏、资源面板、消息流、代码展示、按钮、hover/active 状态、二级菜单、展示项/可选项区分、内容对齐、图标视觉体积对齐、浅色/深色主题等 UI 美学问题时使用。
+---
+
+# UI Aesthetic Design
+
+当设计、评审或实现 UI 改动时使用此 skill。目标不是做通用 SaaS 模板，而是形成克制、现代、精致、像成熟 AI 系统产品的界面。
+
+## 核心审美方向
+
+整体风格参考 ChatGPT / Claude / Linear 一类现代 AI 系统的克制感：
+
+- 使用干净的浅色/深色表面、细边框、轻量阴影和安静的 hover 状态。
+- 避免过度发光、重阴影、毛玻璃、强模糊、圆角矩形套圆角矩形、霓虹渐变和无意义装饰。
+- 优先使用细线图标、浅灰 hover 底色、短而稳定的动效。
+- 布局要紧凑但不拥挤，信息密度可以高，但不能乱。
+- 精致感来自准确的间距、对齐、命中区域、状态反馈和微交互，而不是视觉噪音。
+
+## 颜色与字体层级
+
+使用少量语义化颜色：
+
+- 背景/表面：浅色模式使用白色或近白；深色模式使用近黑或炭黑。
+- 主文字：高对比，用于主要内容。
+- 次文字：浅灰，用于路径、状态、元信息、辅助说明。
+- 边框：中性 1px 细边框。
+- Hover：低透明度灰色填充。
+- Active/当前项：略强的低透明度灰色，或明确但克制的选择标记。
+- Danger：只用于删除等破坏性操作。
+
+字体层级：
+
+- 主内容文字应更深、更大或更有字重。
+- 次内容文字应更浅、更小。
+- 不要为了“丰富界面”凭空添加解释性次级文本；只有真实数据结构里存在时才显示。
+- 紧凑面板里的行默认单行显示，长文本截断；不要因为某条内容更长就撑高行高，除非产品信息结构明确需要多行。
+
+## 对齐原则
+
+追求**内容对齐**，不是容器对齐，也不是机械文字左对齐。
+
+- 对齐有意义的视觉内容，而不是外层矩形框。
+- 如果某一行由 SVG + 文字组成，标题或相关内容应根据 SVG 的视觉位置做对齐，而不是盲目对齐文字边缘。
+- 如果下方具体内容本身没有图标，不要为了凑齐文字起点而乱加假图标。
+- 按实际视觉体积对齐：不同 SVG 的 viewBox 和形状不同，真实尺寸可以不同，只要视觉大小一致。
+- 不要强行把所有 SVG 设成同样宽高。
+- 可以统一按钮命中区域，但图标本身大小要按视觉体积校准。
+
+## 组件状态原则
+
+状态设计必须反映真实语义：
+
+- Hover：只用于可交互项。
+- Active/当前：只用于当前选择、当前模式或当前项。
+- Disabled：降低对比度，并移除点击暗示。
+- 展示内容：不要看起来像按钮；避免 hover 底色、阴影、指针光标。
+- 可点击内容：可以使用轻量 hover 底色、指针光标和当前项标记。
+
+不要把“有没有阴影”当成唯一状态区别。状态语义应该通过结构、标记、间距和交互暗示共同表达。
+
+## 可选项 vs 展示项
+
+设计前必须先判断内容类型。
+
+### 可选项
+
+用于用户从多个选项中选择一个，例如环境切换、资源位置切换、账号/空间切换、筛选条件切换。
+
+- 必须有明确的“可选择”视觉语义，例如 radio 圆点、check 标记或清晰的选中行。
+- 当前项必须一眼能看出来。
+- 可以有浅灰 hover 底色。
+- 行本身可以是可点击的。
+- `默认`、`当前` 这类 badge 只是元信息，不能单独承担“这是可选项”的职责。
+
+### 展示项
+
+用于展示状态或列表数据，例如任务条目、命令摘要、进程摘要、通知摘要，除非真实组件会打开详情。
+
+- 保持安静，不要做成按钮或卡片。
+- 不要乱加假图标。
+- 不要加卡片阴影或嵌套圆角容器。
+- 如果真实产品里不是可点击项，就不要加 hover 效果。
+- 紧凑面板中使用统一行高和单行截断。
+- 只显示真实数据模型里存在的字段。
+
+## 二级菜单与更多操作
+
+二级菜单要一致、克制、可读：
+
+- 使用紧凑浮层，带轻量边框、适中圆角和轻阴影。
+- 菜单选项无论文字长短，hover 背景宽度必须一样长。
+- 菜单宽度由最长内容决定，所有选项填满同一宽度。
+- 不要让每个选项的阴影/hover 背景长度随文字变短变长。
+- 文案要短。
+- 删除等破坏性项只用 danger 色区分，不要用更大尺寸或更重阴影。
+- 列表行右侧 `...` 使用简单圆点视觉；hover 可以只变色，不一定加背景。
+
+## 侧边栏展开原则
+
+消息类/导航类侧边栏可使用“遮罩露出”模型，而不是新建一个展开浮层：
+
+- 把侧边栏理解为一张完整面板，被一个移动边界遮住。
+- 收起态只露出固定图标列。
+- 展开时右侧竖线向右移动，内容被裁切后逐渐露出。
+- 每个动作从始至终只有一个图标，不要展开后再出现第二个图标。
+- 图标右侧文字和新出现的列表内容同时执行两种效果：淡入 + 随移动边界逐渐露出。
+- 展开时不应挤压主内容布局；如设计目标是覆盖/露出，就保持主布局稳定。
+- 收起态 hover 只作用在图标的圆角正方形上，不要露出被裁切的大圆角整行背景。
+- 展开态 hover 才可以作用于整行。
+
+## 资源面板原则
+
+资源面板、管理面板、辅助面板应避免旧式“圆角矩形套圆角矩形套圆角矩形”的低级感。
+
+- 优先做窄而扁平的面板；如果它位于主导航旁边，可以让展开后的侧边栏完整覆盖它。
+- 顶部标题显示当前内容类型，例如资源、环境、任务、命令、通知、日志等。不要把所有模式标题硬塞到同一种视觉层级里。
+- 标题下方可放一个“模式切换按钮”，点击展开二级菜单；旁边按需放紧凑管理图标按钮。
+- 不要把浅色小号“管理”文字按钮放在大标题同一行，容易层级违和；优先使用图标按钮。
+- 不要无意义增加搜索框；只有真实工作流需要搜索或过滤时才加。
+- 层级资源树可以使用文件/文件夹/类别图标，因为这类图标本身承载结构语义。
+- 环境/空间/资源位置切换属于可选项 UI，不是普通展示文本。
+- 任务、命令、进程、通知等区域按真实数据字段显示：
+  - 任务/进程：标识、摘要、状态、可选当前步骤。
+  - 命令/作业：命令或作业预览、状态、返回码/结果码。
+  - 清单/待办：序号、标题、状态；如果存在总说明，可单独显示。
+- 内容行默认统一高度，除非真实信息结构明确需要展开。
+
+## 代码展示原则
+
+代码块、日志块或等宽文本展示精致化时：
+
+- 做成现代 artifact/card 感：1px 细边框、较大圆角、清晰 header/body 分区。
+- 避免粗边框和重嵌套面板。
+- 复制/运行按钮要遵循同一套按钮系统。
+- Header 里的语言名称是次级信息；代码内容才是主内容。
+- padding、等宽字体、行高要统一；流式输出时避免视觉抖动。
+
+## 实现前检查清单
+
+修改 UI 前必须：
+
+1. 先读取真实组件、状态或数据结构，不准凭印象设计假数据。
+2. 判断每个内容是可选项、可点击动作，还是展示内容。
+3. 按视觉内容对齐，而不是按容器边缘或文字边缘机械对齐。
+4. 复用产品已有图标资源或统一图标库，不要自己编造 SVG。
+5. 统一图标命中区域，但按视觉体积调整真实图标大小。
+6. 避免嵌套卡片、大阴影和假的 hover 暗示。
+7. 同时检查浅色和深色模式。
+8. 写 demo 时也要贴近真实产品结构和真实字段；如必须使用示例数据，要保持字段语义真实，不要写臆想说明。
diff --git a/docs/code_block_demo.html b/docs/code_block_demo.html
new file mode 100644
index 0000000..21c78a4
--- /dev/null
+++ b/docs/code_block_demo.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Code Block Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #ffffff;
+      --text: #111111;
+      --muted: #6f6f6f;
+      --surface: #ffffff;
+      --border: rgba(0, 0, 0, 0.105);
+      --hover: rgba(0, 0, 0, 0.055);
+      --radius: 20px;
+      --mono: "SF Mono", "JetBrains Mono", "Menlo", "Monaco", "Consolas", monospace;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      --bg: #1a1a1a;
+      --text: #f3f3f3;
+      --muted: #9b9b9b;
+      --surface: #1a1a1a;
+      --border: rgba(255, 255, 255, 0.13);
+      --hover: rgba(255, 255, 255, 0.08);
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      display: flex;
+      justify-content: center;
+      padding: 48px 24px;
+    }
+    button { font: inherit; }
+    .page { width: min(960px, 100%); }
+    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
+    .title { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.045em; font-weight: 680; }
+    .subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
+    .theme-toggle { height: 36px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); padding: 0 13px; cursor: pointer; }
+    .theme-toggle:hover { background: var(--hover); }
+    .message { max-width: 860px; font-size: 16px; line-height: 1.65; }
+    .message p { margin: 0 0 14px; }
+
+    .code-block {
+      margin: 16px 0 28px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      background: var(--surface);
+      overflow: hidden;
+    }
+
+    .code-top {
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 0 12px 0 18px;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+    }
+
+    .code-lang {
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1;
+      letter-spacing: -0.01em;
+      font-weight: 500;
+    }
+
+    .copy-btn {
+      width: 32px;
+      height: 32px;
+      border: 0;
+      border-radius: 10px;
+      background: transparent;
+      color: var(--muted);
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      transition: background 140ms ease, color 140ms ease;
+    }
+    .copy-btn:hover {
+      background: var(--hover);
+      color: var(--text);
+    }
+
+    .icon {
+      width: 18px;
+      height: 18px;
+      display: inline-block;
+      background: currentColor;
+      mask: var(--icon-url) center / contain no-repeat;
+      -webkit-mask: var(--icon-url) center / contain no-repeat;
+    }
+    .icon-copy { --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2248%22%20height=%2248%22%20fill=%22none%22%20stroke=%22%23000000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20style=%22opacity:1;%22%3E%3Crect%20width=%2214%22%20height=%2214%22%20x=%228%22%20y=%228%22%20rx=%222%22%20ry=%222%22/%3E%3Cpath%20d=%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22/%3E%3C/svg%3E"); }
+    .icon-check { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M20%206%209%2017l-5-5%22%20/%3E%0A%3C/svg%3E"); }
+
+    pre {
+      margin: 0;
+      padding: 24px 28px 28px;
+      background: var(--surface);
+      overflow: auto;
+      font-family: var(--mono);
+      font-size: 15px;
+      line-height: 1.64;
+      tab-size: 4;
+    }
+    code { font-family: inherit; color: var(--text); white-space: pre; }
+
+    .kw { color: #c13f7a; }
+    .fn { color: #6a45c2; }
+    .str { color: #08863f; }
+    .num { color: #8b5e00; }
+    .op { color: #c13f7a; }
+    :root[data-theme="dark"] .kw { color: #ff7ab2; }
+    :root[data-theme="dark"] .fn { color: #b69cff; }
+    :root[data-theme="dark"] .str { color: #5fd38d; }
+    :root[data-theme="dark"] .num { color: #e4b86a; }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <header class="topbar">
+      <div>
+        <h1 class="title">代码块 Demo</h1>
+        <p class="subtitle">顶部更矮；顶部和代码区同色；只用一条细线分割；不添加不存在的功能。</p>
+      </div>
+      <button class="theme-toggle" id="themeToggle" type="button">深色模式</button>
+    </header>
+
+    <section class="message">
+      <p>示例代码块：</p>
+
+      <div class="code-block">
+        <div class="code-top">
+          <span class="code-lang">Python</span>
+          <button class="copy-btn" type="button" title="复制代码" aria-label="复制代码" data-copy="pythonCode">
+            <span class="icon icon-copy" aria-hidden="true"></span>
+          </button>
+        </div>
+<pre><code id="pythonCode"><span class="kw">import</span> random
+<span class="kw">from</span> datetime <span class="kw">import</span> datetime
+
+quotes <span class="op">=</span> [
+    <span class="str">"Stay curious."</span>,
+    <span class="str">"Code is poetry."</span>,
+    <span class="str">"Small steps every day."</span>,
+    <span class="str">"Debugging is detective work."</span>,
+]
+
+<span class="kw">def</span> <span class="fn">random_quote</span>():
+    now <span class="op">=</span> datetime.now().strftime(<span class="str">"%Y-%m-%d %H:%M:%S"</span>)
+    quote <span class="op">=</span> random.choice(quotes)
+    <span class="kw">return</span> <span class="str">f"[{now}] {quote}"</span>
+
+<span class="kw">if</span> __name__ <span class="op">==</span> <span class="str">"__main__"</span>:
+    <span class="kw">for</span> i <span class="kw">in</span> range(<span class="num">3</span>):
+        print(random_quote())</code></pre>
+      </div>
+
+      <div class="code-block">
+        <div class="code-top">
+          <span class="code-lang">powershell</span>
+          <button class="copy-btn" type="button" title="复制代码" aria-label="复制代码" data-copy="psCode">
+            <span class="icon icon-copy" aria-hidden="true"></span>
+          </button>
+        </div>
+<pre><code id="psCode">Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force</code></pre>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    const root = document.documentElement;
+    const themeToggle = document.getElementById('themeToggle');
+    themeToggle.addEventListener('click', () => {
+      const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+      root.dataset.theme = next;
+      themeToggle.textContent = next === 'dark' ? '浅色模式' : '深色模式';
+    });
+
+    document.querySelectorAll('.copy-btn').forEach((button) => {
+      button.addEventListener('click', () => {
+        // file:// 预览下不调用剪贴板 API，避免浏览器安全报错；这里只演示点击后的视觉反馈。
+        const icon = button.querySelector('.icon');
+        icon.className = 'icon icon-check';
+        setTimeout(() => { icon.className = 'icon icon-copy'; }, 1000);
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/docs/sidebar_overlay_demo.html b/docs/sidebar_overlay_demo.html
new file mode 100644
index 0000000..88fbbfd
--- /dev/null
+++ b/docs/sidebar_overlay_demo.html
@@ -0,0 +1,581 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Sidebar Reveal Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #ffffff;
+      --sidebar-bg: #fbfbfb;
+      --text: #111111;
+      --muted: #8f8f8f;
+      --border: rgba(0, 0, 0, 0.09);
+      --hover: rgba(0, 0, 0, 0.055);
+      --hover-strong: rgba(0, 0, 0, 0.095);
+      --active: rgba(0, 0, 0, 0.078);
+      --menu-bg: #ffffff;
+      --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+      --collapsed-width: 52px;
+      --expanded-width: 306px;
+      --icon-cell: 40px;
+      --row-height: 40px;
+      --row-radius: 12px;
+      --anim: 320ms cubic-bezier(0.22, 1, 0.36, 1);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      --bg: #1a1a1a;
+      --sidebar-bg: #0f0f0f;
+      --text: #f4f4f4;
+      --muted: #8f8f8f;
+      --border: rgba(255, 255, 255, 0.105);
+      --hover: rgba(255, 255, 255, 0.078);
+      --hover-strong: rgba(255, 255, 255, 0.13);
+      --active: rgba(255, 255, 255, 0.105);
+      --menu-bg: #202020;
+      --menu-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      overflow: hidden;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    .app {
+      position: relative;
+      height: 100vh;
+      background: var(--bg);
+    }
+
+    .main {
+      min-width: 0;
+      height: 100vh;
+      margin-left: var(--collapsed-width);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 28px 32px;
+    }
+
+    .main-title {
+      margin: 0;
+      font-size: 34px;
+      line-height: 1.1;
+      font-weight: 620;
+      letter-spacing: -0.04em;
+    }
+
+    .main-title span {
+      color: var(--muted);
+      font-weight: 430;
+    }
+
+    .sidebar-frame {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 50;
+      width: var(--collapsed-width);
+      height: 100vh;
+      overflow: hidden;
+      background: var(--sidebar-bg);
+      border-right: 1px solid var(--border);
+      transition: width var(--anim), background 160ms ease, border-color 160ms ease;
+      will-change: width;
+    }
+
+    .sidebar-frame.open {
+      width: var(--expanded-width);
+    }
+
+    .sidebar-content {
+      width: var(--expanded-width);
+      height: 100%;
+      background: var(--sidebar-bg);
+      display: flex;
+      flex-direction: column;
+      padding: 18px 8px 14px 6px;
+      transition: background 160ms ease;
+    }
+
+    .sidebar-top {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 0 0 auto;
+    }
+
+    .sidebar-bottom {
+      margin-top: 8px;
+      flex: 0 0 auto;
+    }
+
+    .side-row,
+    .search-shell,
+    .conversation-row {
+      width: 100%;
+      min-height: var(--row-height);
+      border: 0;
+      border-radius: var(--row-radius);
+      background: transparent;
+      color: var(--text);
+      display: grid;
+      grid-template-columns: var(--icon-cell) minmax(0, 1fr);
+      align-items: center;
+      padding: 0;
+      text-align: left;
+    }
+
+    .side-row,
+    .conversation-row {
+      cursor: pointer;
+      transition: background 140ms ease, color 140ms ease;
+    }
+
+    .side-row:hover,
+    .conversation-row:hover {
+      background: transparent;
+    }
+
+    .side-icon {
+      width: var(--icon-cell);
+      height: var(--row-height);
+      border-radius: var(--row-radius);
+      display: grid;
+      place-items: center;
+      color: currentColor;
+      flex: 0 0 auto;
+      transition: background 140ms ease;
+    }
+
+    .sidebar-frame:not(.open) .side-row:hover .side-icon,
+    .sidebar-frame:not(.open) .theme-toggle:hover .side-icon,
+    .sidebar-frame:not(.open) .conversation-row:hover .side-icon {
+      background: var(--hover);
+    }
+
+    .sidebar-frame.open .side-row:hover,
+    .sidebar-frame.open .side-row.active,
+    .sidebar-frame.open .conversation-row:hover,
+    .sidebar-frame.open .conversation-row.menu-open {
+      background: var(--hover);
+    }
+
+    .side-icon svg {
+      display: block;
+      stroke: currentColor;
+      flex: 0 0 auto;
+    }
+
+    /* 保留视觉校准：按钮容器统一，图标真实尺寸不机械统一 */
+    .side-icon--chat svg { width: 29px; height: 29px; }
+    .side-icon--pencil svg { width: 22px; height: 22px; }
+    .side-icon--workspace svg { width: 23px; height: 23px; }
+    .side-icon--monitor svg { width: 23px; height: 23px; }
+    .side-icon--theme svg { width: 22px; height: 22px; }
+    .side-icon--user svg { width: 22px; height: 22px; }
+
+    .side-label,
+    .search-area,
+    .conversation-list,
+    .conversation-title,
+    .conversation-more {
+      opacity: 0;
+      transition: opacity 220ms ease;
+      transition-delay: 0ms;
+    }
+
+    .sidebar-frame.open .side-label,
+    .sidebar-frame.open .search-area,
+    .sidebar-frame.open .conversation-list,
+    .sidebar-frame.open .conversation-title,
+    .sidebar-frame.open .conversation-more {
+      opacity: 1;
+      transition-delay: 80ms;
+    }
+
+    .side-label {
+      min-width: 0;
+      padding-left: 8px;
+      padding-right: 12px;
+      font-size: 15px;
+      line-height: 1;
+      letter-spacing: -0.015em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .search-area {
+      flex: 0 0 auto;
+      margin-top: 10px;
+    }
+
+    .search-shell {
+      height: var(--row-height);
+      overflow: hidden;
+      transition: background 140ms ease;
+    }
+
+    .search-shell:focus-within,
+    .search-shell:hover {
+      background: var(--hover);
+    }
+
+    .search-input {
+      min-width: 0;
+      width: calc(var(--expanded-width) - var(--icon-cell) - 22px);
+      height: var(--row-height);
+      border: 0;
+      outline: 0;
+      padding: 0 12px 0 8px;
+      background: transparent;
+      color: var(--text);
+      font-size: 14px;
+      letter-spacing: -0.01em;
+    }
+
+    .search-input::placeholder {
+      color: var(--muted);
+    }
+
+    .conversation-list {
+      min-height: 0;
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding-top: 12px;
+      padding-right: 0;
+      scrollbar-width: thin;
+    }
+
+    .conversation-row {
+      position: relative;
+      grid-template-columns: minmax(0, 1fr) 40px;
+      min-height: var(--row-height);
+      margin: 0;
+    }
+
+    .conversation-title {
+      min-width: 0;
+      padding-left: 12px;
+      padding-right: 4px;
+      color: var(--text);
+      font-size: 14px;
+      line-height: 1.25;
+      letter-spacing: -0.01em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .conversation-more {
+      width: 30px;
+      height: 30px;
+      border: 0;
+      border-radius: 9px;
+      background: transparent;
+      color: var(--muted);
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      justify-self: start;
+      visibility: hidden;
+      transition: background 140ms ease, color 140ms ease, opacity 160ms ease;
+    }
+
+    .conversation-row:hover .conversation-more,
+    .conversation-row.menu-open .conversation-more {
+      visibility: visible;
+    }
+
+    .conversation-more:hover,
+    .conversation-row.menu-open .conversation-more {
+      background: transparent;
+      color: var(--text);
+    }
+
+    .conversation-more svg {
+      width: 22px;
+      height: 22px;
+      stroke: currentColor;
+    }
+
+    .context-menu {
+      position: fixed;
+      z-index: 80;
+      width: max-content;
+      min-width: 92px;
+      padding: 6px;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      background: var(--menu-bg);
+      box-shadow: var(--menu-shadow);
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+      pointer-events: none;
+      transition:
+        opacity 120ms ease,
+        transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
+        background 160ms ease,
+        border-color 160ms ease;
+    }
+
+    .context-menu.open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    .menu-button {
+      width: max-content;
+      min-width: 80px;
+      height: 36px;
+      border: 0;
+      border-radius: 10px;
+      background: transparent;
+      color: var(--text);
+      display: grid;
+      grid-template-columns: 24px auto;
+      align-items: center;
+      padding: 0 10px 0 8px;
+      text-align: left;
+      cursor: pointer;
+      font-size: 14px;
+      letter-spacing: -0.01em;
+      transition: background 140ms ease;
+    }
+
+    .menu-button:hover {
+      background: var(--hover);
+    }
+
+    .menu-button.danger {
+      color: #d6483b;
+    }
+
+    :root[data-theme="dark"] .menu-button.danger {
+      color: #ff7b72;
+    }
+
+    .menu-button svg {
+      width: 18px;
+      height: 18px;
+      stroke: currentColor;
+    }
+
+    .demo-hint {
+      position: fixed;
+      left: calc(var(--collapsed-width) + 20px);
+      bottom: 18px;
+      color: var(--muted);
+      font-size: 13px;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar-frame" id="sidebar" aria-label="对话侧边栏">
+      <div class="sidebar-content">
+        <div class="sidebar-top">
+          <button class="side-row" id="toggleSidebar" type="button" aria-label="展开对话记录" aria-expanded="false">
+            <span class="side-icon side-icon--chat" aria-hidden="true">
+              <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5 6.5c0-1.38 1.12-2.5 2.5-2.5h13c1.38 0 2.5 1.12 2.5 2.5v8.5c0 1.38-1.12 2.5-2.5 2.5h-5.6l-3.4 3.2.6-3.2H7.5c-1.38 0-2.5-1.12-2.5-2.5V6.5z" stroke-width="1.45" stroke-linejoin="round" />
+                <path d="M9 9.5h10" stroke-width="1.45" stroke-linecap="round" />
+                <path d="M9 13h6" stroke-width="1.45" stroke-linecap="round" />
+              </svg>
+            </span>
+            <span class="side-label">对话记录</span>
+          </button>
+
+          <button class="side-row" type="button" aria-label="新建对话">
+            <span class="side-icon side-icon--pencil" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="m15 5 4 4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </span>
+            <span class="side-label">新建对话</span>
+          </button>
+
+          <button class="side-row" type="button" aria-label="工作区">
+            <span class="side-icon side-icon--workspace" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 3 4.5 7.15v9.7L12 21l7.5-4.15v-9.7L12 3Z" stroke-width="1.55" stroke-linejoin="round" />
+                <path d="M4.8 7.35 12 11.5l7.2-4.15M12 11.5V21" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </span>
+            <span class="side-label">工作区</span>
+          </button>
+
+          <button class="side-row" type="button" aria-label="虚拟显示器">
+            <span class="side-icon side-icon--monitor" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="3.5" y="5" width="17" height="12" rx="2" stroke-width="1.55" />
+                <path d="M9 21h6M12 17v4" stroke-width="1.55" stroke-linecap="round" />
+              </svg>
+            </span>
+            <span class="side-label">虚拟显示器</span>
+          </button>
+        </div>
+
+        <div class="search-area" aria-label="搜索对话">
+          <label class="search-shell">
+            <span class="side-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:22px;height:22px;stroke:currentColor">
+                <circle cx="11" cy="11" r="7" stroke-width="1.55" />
+                <path d="m20 20-3.4-3.4" stroke-width="1.55" stroke-linecap="round" />
+              </svg>
+            </span>
+            <input class="search-input" type="search" placeholder="搜索对话" />
+          </label>
+        </div>
+
+        <div class="conversation-list" aria-label="对话记录">
+          <div class="conversation-row" data-title="随意的 py 代码块">
+            <span class="conversation-title">随意的 py 代码块</span>
+            <button class="conversation-more" type="button" aria-label="更多操作">
+              <svg viewBox="0 0 24 24" fill="none"><path d="M6 12h.01M12 12h.01M18 12h.01" stroke-width="3" stroke-linecap="round" /></svg>
+            </button>
+          </div>
+          <div class="conversation-row" data-title="前端现代化设计讨论">
+            <span class="conversation-title">前端现代化设计讨论</span>
+            <button class="conversation-more" type="button" aria-label="更多操作">
+              <svg viewBox="0 0 24 24" fill="none"><path d="M6 12h.01M12 12h.01M18 12h.01" stroke-width="3" stroke-linecap="round" /></svg>
+            </button>
+          </div>
+          <div class="conversation-row" data-title="审批面板覆盖窗口方案">
+            <span class="conversation-title">审批面板覆盖窗口方案</span>
+            <button class="conversation-more" type="button" aria-label="更多操作">
+              <svg viewBox="0 0 24 24" fill="none"><path d="M6 12h.01M12 12h.01M18 12h.01" stroke-width="3" stroke-linecap="round" /></svg>
+            </button>
+          </div>
+          <div class="conversation-row" data-title="CLI 显示层细节修复">
+            <span class="conversation-title">CLI 显示层细节修复</span>
+            <button class="conversation-more" type="button" aria-label="更多操作">
+              <svg viewBox="0 0 24 24" fill="none"><path d="M6 12h.01M12 12h.01M18 12h.01" stroke-width="3" stroke-linecap="round" /></svg>
+            </button>
+          </div>
+          <div class="conversation-row" data-title="个人空间设置页重设计">
+            <span class="conversation-title">个人空间设置页重设计</span>
+            <button class="conversation-more" type="button" aria-label="更多操作">
+              <svg viewBox="0 0 24 24" fill="none"><path d="M6 12h.01M12 12h.01M18 12h.01" stroke-width="3" stroke-linecap="round" /></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="sidebar-bottom">
+          <button class="side-row theme-toggle" id="themeToggle" type="button" aria-label="切换深色模式">
+            <span class="side-icon side-icon--theme" aria-hidden="true">
+              <svg class="theme-icon theme-icon-light" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="12" cy="12" r="4" stroke-width="1.55" />
+                <path d="M12 2.8v2.3M12 18.9v2.3M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2.8 12h2.3M18.9 12h2.3M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6" stroke-width="1.55" stroke-linecap="round" />
+              </svg>
+            </span>
+            <span class="side-label">浅色模式</span>
+          </button>
+
+          <button class="side-row" type="button" aria-label="个人空间">
+            <span class="side-icon side-icon--user" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="12" cy="8" r="4" stroke-width="1.6" />
+                <path d="M4.5 21a7.5 7.5 0 0 1 15 0" stroke-width="1.6" stroke-linecap="round" />
+              </svg>
+            </span>
+            <span class="side-label">个人空间</span>
+          </button>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <h1 class="main-title">AI Agent <span>Auto</span></h1>
+    </main>
+
+    <div class="context-menu" id="contextMenu" role="menu" aria-hidden="true">
+      <button class="menu-button" type="button" role="menuitem">
+        <svg viewBox="0 0 24 24" fill="none"><rect x="8" y="8" width="11" height="11" rx="2" stroke-width="1.55"/><path d="M5 15V7a2 2 0 0 1 2-2h8" stroke-width="1.55" stroke-linecap="round"/></svg>
+        <span>复制</span>
+      </button>
+      <button class="menu-button danger" type="button" role="menuitem">
+        <svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        <span>删除</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="demo-hint">点击第一个按钮折叠/露出；对话行 hover 后显示 ...；点击 ... 打开二级菜单。</div>
+
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggle = document.getElementById('toggleSidebar');
+    const themeToggle = document.getElementById('themeToggle');
+    const contextMenu = document.getElementById('contextMenu');
+    let menuOwner = null;
+
+    toggle.addEventListener('click', () => {
+      const isOpen = sidebar.classList.toggle('open');
+      toggle.setAttribute('aria-expanded', String(isOpen));
+      toggle.setAttribute('aria-label', isOpen ? '收起对话记录' : '展开对话记录');
+      if (!isOpen) closeMenu();
+    });
+
+    themeToggle.addEventListener('click', () => {
+      const root = document.documentElement;
+      const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+      root.dataset.theme = next;
+      themeToggle.querySelector('.side-label').textContent = next === 'dark' ? '深色模式' : '浅色模式';
+      themeToggle.setAttribute('aria-label', next === 'dark' ? '切换浅色模式' : '切换深色模式');
+    });
+
+    function closeMenu() {
+      contextMenu.classList.remove('open');
+      contextMenu.setAttribute('aria-hidden', 'true');
+      if (menuOwner) menuOwner.classList.remove('menu-open');
+      menuOwner = null;
+    }
+
+    document.querySelectorAll('.conversation-more').forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const row = button.closest('.conversation-row');
+        if (menuOwner === row && contextMenu.classList.contains('open')) {
+          closeMenu();
+          return;
+        }
+        closeMenu();
+        menuOwner = row;
+        row.classList.add('menu-open');
+        const rect = button.getBoundingClientRect();
+        contextMenu.style.left = '0px';
+        contextMenu.style.top = `${rect.bottom + 6}px`;
+        contextMenu.classList.add('open');
+        contextMenu.setAttribute('aria-hidden', 'false');
+        const menuWidth = contextMenu.offsetWidth;
+        contextMenu.style.left = `${Math.min(rect.right - menuWidth, window.innerWidth - menuWidth - 12)}px`;
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!contextMenu.contains(event.target)) closeMenu();
+    });
+
+    window.addEventListener('resize', closeMenu);
+  </script>
+</body>
+</html>
diff --git a/docs/sidebar_workspace_demo.html b/docs/sidebar_workspace_demo.html
new file mode 100644
index 0000000..c4b99c4
--- /dev/null
+++ b/docs/sidebar_workspace_demo.html
@@ -0,0 +1,556 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Sidebar + Workspace Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #ffffff;
+      --panel-bg: #fbfbfb;
+      --text: #111111;
+      --muted: #8f8f8f;
+      --border: rgba(0, 0, 0, 0.09);
+      --hover: rgba(0, 0, 0, 0.055);
+      --hover-strong: rgba(0, 0, 0, 0.095);
+      --menu-bg: #ffffff;
+      --menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+      --collapsed-width: 52px;
+      --expanded-width: 306px;
+      --workspace-width: calc(var(--expanded-width) - var(--collapsed-width));
+      --icon-cell: 40px;
+      --row-height: 40px;
+      --row-radius: 12px;
+      --anim: 320ms cubic-bezier(0.22, 1, 0.36, 1);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      --bg: #1a1a1a;
+      --panel-bg: #0f0f0f;
+      --text: #f4f4f4;
+      --muted: #8f8f8f;
+      --border: rgba(255, 255, 255, 0.105);
+      --hover: rgba(255, 255, 255, 0.078);
+      --hover-strong: rgba(255, 255, 255, 0.13);
+      --menu-bg: #202020;
+      --menu-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
+    }
+
+    * { box-sizing: border-box; }
+    body { margin: 0; height: 100vh; background: var(--bg); color: var(--text); overflow: hidden; }
+    button, input { font: inherit; }
+    button { -webkit-tap-highlight-color: transparent; }
+
+    .icon {
+      display: inline-block;
+      width: var(--icon-size, 20px);
+      height: var(--icon-size, 20px);
+      background: currentColor;
+      mask: var(--icon-url) center / contain no-repeat;
+      -webkit-mask: var(--icon-url) center / contain no-repeat;
+      flex: 0 0 auto;
+    }
+
+    .icon-chat { --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2032%2032%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%0A%20%20%3Cpath%20d=%22M6%207c0-2%201.6-3.6%203.6-3.6h13c2%200%203.6%201.6%203.6%203.6v10c0%202-1.6%203.6-3.6%203.6h-6.2L12.4%2025l0.7-4.4H9.6c-2%200-3.6-1.6-3.6-3.6V7Z%22%20/%3E%0A%20%20%3Cpath%20d=%22M10.4%2011h11.2%22%20/%3E%0A%20%20%3Cpath%20d=%22M10.4%2015h7.2%22%20/%3E%0A%3C/svg%3E"); --icon-size: 29px; }
+    .icon-pencil { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%20/%3E%0A%20%20%3Cpath%20d=%22m15%205%204%204%22%20/%3E%0A%3C/svg%3E"); --icon-size: 22px; }
+    .icon-layers { --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2248%22%20height=%2248%22%20fill=%22none%22%20stroke=%22#000000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20style=%22opacity:1;%22%3E%3Cpath%20d=%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22/%3E%3Cpath%20d=%22M2%2012a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2012%22/%3E%3Cpath%20d=%22M2%2017a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2017%22/%3E%3C/svg%3E"); --icon-size: 23px; }
+    .icon-monitor { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Crect%20width=%2220%22%20height=%2214%22%20x=%222%22%20y=%223%22%20rx=%222%22%20/%3E%0A%20%20%3Cline%20x1=%228%22%20x2=%2216%22%20y1=%2221%22%20y2=%2221%22%20/%3E%0A%20%20%3Cline%20x1=%2212%22%20x2=%2212%22%20y1=%2217%22%20y2=%2221%22%20/%3E%0A%3C/svg%3E"); --icon-size: 23px; }
+    .icon-search { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22m21%2021-4.34-4.34%22%20/%3E%0A%20%20%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%228%22%20/%3E%0A%3C/svg%3E"); --icon-size: 22px; }
+    .icon-user { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%20/%3E%0A%20%20%3Ccircle%20cx=%2212%22%20cy=%227%22%20r=%224%22%20/%3E%0A%3C/svg%3E"); --icon-size: 22px; }
+    .icon-folder { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-folder-open { --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20width=%2248%22%20height=%2248%22%20fill=%22none%22%20stroke=%22#000000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20style=%22opacity:1;%22%3E%3Cpath%20%20%20%20%20%20d=%22m6%2014l1.5-2.9A2%202%200%200%201%209.24%2010H20a2%202%200%200%201%201.94%202.5l-1.54%206a2%202%200%200%201-1.95%201.5H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h3.9a2%202%200%200%201%201.69.9l.81%201.2a2%202%200%200%200%201.67.9H18a2%202%200%200%201%202%202v2%22/%3E%3C/svg%3E"); --icon-size: 18px; }
+    .icon-file { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%22%20/%3E%0A%20%20%3Cpath%20d=%22M14%202v5a1%201%200%200%200%201%201h5%22%20/%3E%0A%3C/svg%3E"); --icon-size: 17px; }
+    .icon-bot { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M12%208V4H8%22%20/%3E%0A%20%20%3Crect%20width=%2216%22%20height=%2212%22%20x=%224%22%20y=%228%22%20rx=%222%22%20/%3E%0A%20%20%3Cpath%20d=%22M2%2014h2%22%20/%3E%0A%20%20%3Cpath%20d=%22M20%2014h2%22%20/%3E%0A%20%20%3Cpath%20d=%22M15%2013v2%22%20/%3E%0A%20%20%3Cpath%20d=%22M9%2013v2%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-terminal { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M12%2019h8%22%20/%3E%0A%20%20%3Cpath%20d=%22m4%2017%206-6-6-6%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-sticky { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M21%209a2.4%202.4%200%200%200-.706-1.706l-3.588-3.588A2.4%202.4%200%200%200%2015%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2z%22%20/%3E%0A%20%20%3Cpath%20d=%22M15%203v5a1%201%200%200%200%201%201h5%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-check { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M20%206%209%2017l-5-5%22%20/%3E%0A%3C/svg%3E"); --icon-size: 17px; }
+    .icon-clock { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22%20/%3E%0A%20%20%3Cpath%20d=%22M12%207v5l3%203%22%20/%3E%0A%3C/svg%3E"); --icon-size: 17px; }
+    .icon-laptop { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M18%205a2%202%200%200%201%202%202v8.526a2%202%200%200%200%20.212.897l1.068%202.127a1%201%200%200%201-.9%201.45H3.62a1%201%200%200%201-.9-1.45l1.068-2.127A2%202%200%200%200%204%2015.526V7a2%202%200%200%201%202-2z%22%20/%3E%0A%20%20%3Cpath%20d=%22M20.054%2015.987H3.946%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-settings { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M9.671%204.136a2.34%202.34%200%200%201%204.659%200%202.34%202.34%200%200%200%203.319%201.915%202.34%202.34%200%200%201%202.33%204.033%202.34%202.34%200%200%200%200%203.831%202.34%202.34%200%200%201-2.33%204.033%202.34%202.34%200%200%200-3.319%201.915%202.34%202.34%200%200%201-4.659%200%202.34%202.34%200%200%200-3.32-1.915%202.34%202.34%200%200%201-2.33-4.033%202.34%202.34%200%200%200%200-3.831A2.34%202.34%200%200%201%206.35%206.051a2.34%202.34%200%200%200%203.319-1.915%22%20/%3E%0A%20%20%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-trash { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%20/%3E%0A%20%20%3Cpath%20d=%22M3%206h18%22%20/%3E%0A%20%20%3Cpath%20d=%22M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-copy { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Crect%20width=%228%22%20height=%224%22%20x=%228%22%20y=%222%22%20rx=%221%22%20ry=%221%22%20/%3E%0A%20%20%3Cpath%20d=%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%20/%3E%0A%3C/svg%3E"); --icon-size: 18px; }
+    .icon-sun { --icon-url: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns=%22http://www.w3.org/2000/svg%22%0A%20%20width=%2224%22%0A%20%20height=%2224%22%0A%20%20viewBox=%220%200%2024%2024%22%0A%20%20fill=%22none%22%0A%20%20stroke=%22currentColor%22%0A%20%20stroke-width=%222%22%0A%20%20stroke-linecap=%22round%22%0A%20%20stroke-linejoin=%22round%22%0A%3E%0A%20%20%3Cpath%20d=%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20/%3E%0A%20%20%3Cpath%20d=%22M20%202v4%22%20/%3E%0A%20%20%3Cpath%20d=%22M22%204h-4%22%20/%3E%0A%20%20%3Ccircle%20cx=%224%22%20cy=%2220%22%20r=%222%22%20/%3E%0A%3C/svg%3E"); --icon-size: 22px; }
+
+    .app { position: relative; height: 100vh; background: var(--bg); }
+    .main { min-width: 0; height: 100vh; margin-left: var(--expanded-width); display: flex; align-items: flex-start; justify-content: center; padding: 28px 32px; }
+    .main-title { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 620; letter-spacing: -0.04em; }
+    .main-title span { color: var(--muted); font-weight: 430; }
+
+    /* 工作区：窄、扁平、无大卡片嵌套。展开的对话栏会完整盖住它。 */
+    .workspace-panel {
+      position: fixed;
+      left: var(--collapsed-width);
+      top: 0;
+      z-index: 20;
+      width: var(--workspace-width);
+      height: 100vh;
+      background: var(--panel-bg);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      padding: 18px 10px 14px;
+      overflow: hidden;
+      transition: background 160ms ease, border-color 160ms ease;
+    }
+
+    .workspace-title {
+      height: 40px;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      padding: 0 0 0 16px;
+      font-size: 18px;
+      font-weight: 660;
+      letter-spacing: -0.035em;
+      white-space: nowrap;
+    }
+
+    .workspace-controls {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 40px;
+      gap: 4px;
+      margin: 4px 0 10px;
+    }
+
+    .workspace-switch,
+    .workspace-manage {
+      height: 40px;
+      border: 0;
+      border-radius: 12px;
+      background: transparent;
+      color: var(--text);
+      cursor: pointer;
+      transition: background 140ms ease, color 140ms ease;
+    }
+
+    .workspace-switch:hover,
+    .workspace-manage:hover { background: var(--hover); }
+
+    .workspace-switch {
+      min-width: 0;
+      display: grid;
+      grid-template-columns: 32px minmax(0, 1fr) 18px;
+      align-items: center;
+      padding: 0 10px 0 8px;
+      text-align: left;
+      font-size: 14px;
+      letter-spacing: -0.012em;
+    }
+
+    .workspace-switch .icon { justify-self: center; color: var(--text); }
+    .workspace-switch-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; justify-self: center; }
+
+    .workspace-manage { display: grid; place-items: center; color: var(--text); }
+
+    .workspace-body { min-height: 0; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; }
+    .workspace-view { display: none; min-height: 0; flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; padding-top: 2px; }
+    .workspace-view.active { display: block; }
+
+    .content-row {
+      width: 100%;
+      height: 36px;
+      border-radius: 10px;
+      display: grid;
+      align-items: center;
+      color: var(--text);
+      font-size: 13px;
+      letter-spacing: -0.01em;
+      overflow: hidden;
+    }
+
+    .content-row + .content-row { margin-top: 1px; }
+    .content-main { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .content-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
+
+    /* 文件树是真实可操作树：保留文件/文件夹图标和 hover，其他内容区不做按钮感。 */
+    .file-row {
+      grid-template-columns: 20px 20px minmax(0, 1fr) auto;
+      gap: 4px;
+      padding: 0 8px 0 2px;
+      cursor: pointer;
+      transition: background 140ms ease;
+    }
+    .file-row:hover { background: var(--hover); }
+    .file-row .icon { color: var(--muted); justify-self: center; }
+    .file-arrow { width: 16px; text-align: center; color: var(--muted); font-size: 11px; }
+    .file-row.depth-1 { padding-left: 16px; }
+    .file-row.depth-2 { padding-left: 30px; }
+
+    .plain-row {
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 8px;
+      padding: 0 10px;
+      cursor: default;
+    }
+
+    .option-row {
+      height: 44px;
+      grid-template-columns: 20px minmax(0, 1fr) auto;
+      gap: 8px;
+      padding: 0 10px 0 8px;
+      cursor: pointer;
+      transition: background 140ms ease, color 140ms ease;
+    }
+    .option-row:hover { background: var(--hover); }
+    .option-row.selected { background: var(--hover); }
+    .option-marker {
+      width: 13px;
+      height: 13px;
+      border-radius: 999px;
+      border: 1.5px solid var(--muted);
+      justify-self: center;
+      position: relative;
+      opacity: .85;
+    }
+    .option-row.selected .option-marker {
+      border-color: var(--text);
+      opacity: 1;
+    }
+    .option-row.selected .option-marker::after {
+      content: '';
+      position: absolute;
+      inset: 3px;
+      border-radius: inherit;
+      background: var(--text);
+    }
+    .host-copy { min-width: 0; display: grid; grid-template-rows: 18px 16px; }
+    .host-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 560; }
+    .host-path { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
+    .host-badges { display: inline-flex; gap: 4px; align-items: center; }
+    .host-badge { color: var(--muted); font-size: 11px; }
+
+    .todo-instruction {
+      margin-top: 8px;
+      padding: 0 10px;
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.35;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .empty-row {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    /* 侧边栏：同一张完整侧边栏被裁切暴露。 */
+    .sidebar-frame {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 50;
+      width: var(--collapsed-width);
+      height: 100vh;
+      overflow: hidden;
+      background: var(--panel-bg);
+      border-right: 1px solid var(--border);
+      transition: width var(--anim), background 160ms ease, border-color 160ms ease;
+      will-change: width;
+    }
+    .sidebar-frame.open { width: var(--expanded-width); }
+    .sidebar-content { width: var(--expanded-width); height: 100%; background: var(--panel-bg); display: flex; flex-direction: column; padding: 18px 8px 14px 6px; transition: background 160ms ease; }
+    .sidebar-top { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
+    .sidebar-bottom { margin-top: 8px; flex: 0 0 auto; }
+
+    .side-row,
+    .search-shell,
+    .conversation-row { width: 100%; min-height: var(--row-height); border: 0; border-radius: var(--row-radius); background: transparent; color: var(--text); display: grid; grid-template-columns: var(--icon-cell) minmax(0, 1fr); align-items: center; padding: 0; text-align: left; }
+    .side-row,
+    .conversation-row { cursor: pointer; transition: background 140ms ease, color 140ms ease; }
+    .side-row:hover,
+    .conversation-row:hover { background: transparent; }
+    .side-icon { width: var(--icon-cell); height: var(--row-height); border-radius: var(--row-radius); display: grid; place-items: center; color: currentColor; flex: 0 0 auto; transition: background 140ms ease; }
+    .sidebar-frame:not(.open) .side-row:hover .side-icon,
+    .sidebar-frame:not(.open) .theme-toggle:hover .side-icon { background: var(--hover); }
+    .sidebar-frame.open .side-row:hover,
+    .sidebar-frame.open .side-row.active,
+    .sidebar-frame.open .conversation-row:hover,
+    .sidebar-frame.open .conversation-row.menu-open { background: var(--hover); }
+
+    .side-label,
+    .search-area,
+    .conversation-list,
+    .conversation-title,
+    .conversation-more { opacity: 0; transition: opacity 220ms ease; transition-delay: 0ms; }
+    .sidebar-frame.open .side-label,
+    .sidebar-frame.open .search-area,
+    .sidebar-frame.open .conversation-list,
+    .sidebar-frame.open .conversation-title,
+    .sidebar-frame.open .conversation-more { opacity: 1; transition-delay: 80ms; }
+    .side-label { min-width: 0; padding-left: 8px; padding-right: 12px; font-size: 15px; line-height: 1; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+    .search-area { flex: 0 0 auto; margin-top: 10px; }
+    .search-shell { height: var(--row-height); overflow: hidden; transition: background 140ms ease; }
+    .search-shell:focus-within,
+    .search-shell:hover { background: var(--hover); }
+    .search-input { min-width: 0; width: calc(var(--expanded-width) - var(--icon-cell) - 22px); height: var(--row-height); border: 0; outline: 0; padding: 0 12px 0 8px; background: transparent; color: var(--text); font-size: 14px; letter-spacing: -0.01em; }
+    .search-input::placeholder { color: var(--muted); }
+
+    .conversation-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding-top: 12px; padding-right: 0; scrollbar-width: thin; }
+    .conversation-row { position: relative; grid-template-columns: minmax(0, 1fr) 40px; min-height: var(--row-height); margin: 0; }
+    .conversation-title { min-width: 0; padding-left: 12px; padding-right: 4px; color: var(--text); font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .conversation-more { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; justify-self: start; visibility: hidden; transition: color 140ms ease, opacity 160ms ease; }
+    .conversation-row:hover .conversation-more,
+    .conversation-row.menu-open .conversation-more { visibility: visible; }
+    .conversation-more:hover,
+    .conversation-row.menu-open .conversation-more { background: transparent; color: var(--text); }
+    .more-dots {
+      position: relative;
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+    }
+    .more-dots::before {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 10px;
+      width: 3.5px;
+      height: 3.5px;
+      border-radius: 999px;
+      background: currentColor;
+      box-shadow: 5.5px 0 0 currentColor, 11px 0 0 currentColor;
+    }
+
+    .floating-menu {
+      position: fixed;
+      z-index: 80;
+      width: max-content;
+      min-width: 92px;
+      padding: 6px;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      background: var(--menu-bg);
+      box-shadow: var(--menu-shadow);
+      opacity: 0;
+      transform: translateY(-4px) scale(0.98);
+      pointer-events: none;
+      transition: opacity 120ms ease, transform 150ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, border-color 160ms ease;
+    }
+    .floating-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+    .menu-button { width: max-content; min-width: 80px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--text); display: grid; grid-template-columns: 24px auto; gap: 4px; align-items: center; padding: 0 10px 0 8px; text-align: left; cursor: pointer; font-size: 14px; letter-spacing: -0.01em; transition: background 140ms ease; }
+    .menu-button:hover { background: var(--hover); }
+    .menu-button.danger { color: #d6483b; }
+    :root[data-theme="dark"] .menu-button.danger { color: #ff7b72; }
+
+    .demo-hint { position: fixed; left: calc(var(--expanded-width) + 20px); bottom: 18px; color: var(--muted); font-size: 13px; pointer-events: none; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="workspace-panel" aria-label="工作区">
+      <h2 class="workspace-title" id="workspaceTitle">工作区</h2>
+      <div class="workspace-controls">
+        <button class="workspace-switch" id="workspaceSwitch" type="button" aria-haspopup="menu" aria-expanded="false">
+          <span class="icon icon-folder-open" id="workspaceSwitchIcon" aria-hidden="true"></span>
+          <span class="workspace-switch-label" id="workspaceSwitchLabel">工作区文件</span>
+          <span class="chevron" aria-hidden="true"></span>
+        </button>
+        <button class="workspace-manage" type="button" aria-label="管理工作区">
+          <span class="icon icon-folder" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div class="workspace-body">
+        <div class="workspace-view active" data-view="files">
+          <div class="content-row file-row"><span class="file-arrow">▾</span><span class="icon icon-folder-open"></span><span class="content-main">static</span><span class="content-meta"></span></div>
+          <div class="content-row file-row depth-1"><span class="file-arrow"></span><span class="icon icon-file"></span><span class="content-main">App.vue</span><span class="content-meta"></span></div>
+          <div class="content-row file-row depth-1"><span class="file-arrow">▾</span><span class="icon icon-folder-open"></span><span class="content-main">components</span><span class="content-meta"></span></div>
+          <div class="content-row file-row depth-2"><span class="file-arrow"></span><span class="icon icon-file"></span><span class="content-main">ConversationSidebar.vue</span><span class="content-meta"></span></div>
+          <div class="content-row file-row depth-2"><span class="file-arrow"></span><span class="icon icon-file"></span><span class="content-main">LeftPanel.vue</span><span class="content-meta"></span></div>
+          <div class="content-row file-row"><span class="file-arrow">▸</span><span class="icon icon-folder"></span><span class="content-main">server</span><span class="content-meta"></span></div>
+          <div class="content-row file-row"><span class="file-arrow"></span><span class="icon icon-file"></span><span class="content-main">main.py</span><span class="content-meta"></span></div>
+        </div>
+
+        <div class="workspace-view" data-view="host">
+          <div class="content-row option-row selected"><span class="option-marker" aria-hidden="true"></span><span class="host-copy"><span class="host-label">agents</span><span class="host-path">/Users/jojo/Desktop/agents/正在修复中/agents</span></span><span class="host-badges"><span class="host-badge">默认</span><span class="host-badge">当前</span></span></div>
+          <div class="content-row option-row"><span class="option-marker" aria-hidden="true"></span><span class="host-copy"><span class="host-label">前端工作区</span><span class="host-path">/Users/jojo/Desktop/frontend</span></span><span class="host-badges"></span></div>
+          <div class="content-row option-row"><span class="option-marker" aria-hidden="true"></span><span class="host-copy"><span class="host-label">未配置路径</span><span class="host-path">（未配置路径）</span></span><span class="host-badges"></span></div>
+        </div>
+
+        <div class="workspace-view" data-view="agents">
+          <div class="content-row plain-row"><span class="content-main">#1 正在整理侧边栏与工作区样式</span><span class="content-meta">running</span></div>
+          <div class="content-row plain-row"><span class="content-main">#2 等待下一轮验证</span><span class="content-meta">idle</span></div>
+          <div class="content-row plain-row"><span class="content-main">当前：read_file</span><span class="content-meta"></span></div>
+        </div>
+
+        <div class="workspace-view" data-view="commands">
+          <div class="content-row plain-row"><span class="content-main">npm --prefix cli run typecheck</span><span class="content-meta">completed</span></div>
+          <div class="content-row plain-row"><span class="content-main">python -m unittest test.test_server_refactor_smoke</span><span class="content-meta">running</span></div>
+          <div class="content-row plain-row"><span class="content-main">状态码：--</span><span class="content-meta"></span></div>
+        </div>
+
+        <div class="workspace-view" data-view="todos">
+          <div class="content-row plain-row"><span class="content-main">task1：确定侧边栏动画模型</span><span class="content-meta">完成</span></div>
+          <div class="content-row plain-row"><span class="content-main">task2：工作区视觉改造</span><span class="content-meta">未完成</span></div>
+          <div class="content-row plain-row"><span class="content-main">task3：代码块精致化</span><span class="content-meta">未完成</span></div>
+          <div class="todo-instruction">指令：按真实数据结构设计显示区域，不添加额外说明卡片。</div>
+        </div>
+      </div>
+    </aside>
+
+    <aside class="sidebar-frame" id="sidebar" aria-label="对话侧边栏">
+      <div class="sidebar-content">
+        <div class="sidebar-top">
+          <button class="side-row" id="toggleSidebar" type="button" aria-label="展开对话记录" aria-expanded="false">
+            <span class="side-icon"><span class="icon icon-chat" aria-hidden="true"></span></span>
+            <span class="side-label">对话记录</span>
+          </button>
+          <button class="side-row" type="button" aria-label="新建对话"><span class="side-icon"><span class="icon icon-pencil"></span></span><span class="side-label">新建对话</span></button>
+          <button class="side-row" type="button" aria-label="工作区"><span class="side-icon"><span class="icon icon-layers"></span></span><span class="side-label">工作区</span></button>
+          <button class="side-row" type="button" aria-label="虚拟显示器"><span class="side-icon"><span class="icon icon-monitor"></span></span><span class="side-label">虚拟显示器</span></button>
+        </div>
+
+        <div class="search-area" aria-label="搜索对话"><label class="search-shell"><span class="side-icon"><span class="icon icon-search"></span></span><input class="search-input" type="search" placeholder="搜索对话" /></label></div>
+
+        <div class="conversation-list" aria-label="对话记录">
+          <div class="conversation-row"><span class="conversation-title">随意的 py 代码块</span><button class="conversation-more" type="button" aria-label="更多操作"><span class="more-dots" aria-hidden="true"></span></button></div>
+          <div class="conversation-row"><span class="conversation-title">前端现代化设计讨论</span><button class="conversation-more" type="button" aria-label="更多操作"><span class="more-dots" aria-hidden="true"></span></button></div>
+          <div class="conversation-row"><span class="conversation-title">审批面板覆盖窗口方案</span><button class="conversation-more" type="button" aria-label="更多操作"><span class="more-dots" aria-hidden="true"></span></button></div>
+          <div class="conversation-row"><span class="conversation-title">CLI 显示层细节修复</span><button class="conversation-more" type="button" aria-label="更多操作"><span class="more-dots" aria-hidden="true"></span></button></div>
+          <div class="conversation-row"><span class="conversation-title">个人空间设置页重设计</span><button class="conversation-more" type="button" aria-label="更多操作"><span class="more-dots" aria-hidden="true"></span></button></div>
+        </div>
+
+        <div class="sidebar-bottom">
+          <button class="side-row theme-toggle" id="themeToggle" type="button" aria-label="切换深色模式"><span class="side-icon"><span class="icon icon-sun"></span></span><span class="side-label">浅色模式</span></button>
+          <button class="side-row" type="button" aria-label="个人空间"><span class="side-icon"><span class="icon icon-user"></span></span><span class="side-label">个人空间</span></button>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main"><h1 class="main-title">AI Agent <span>Auto</span></h1></main>
+
+    <div class="floating-menu" id="conversationMenu" role="menu" aria-hidden="true">
+      <button class="menu-button" type="button" role="menuitem"><span class="icon icon-copy"></span><span>复制</span></button>
+      <button class="menu-button danger" type="button" role="menuitem"><span class="icon icon-trash"></span><span>删除</span></button>
+    </div>
+
+    <div class="floating-menu" id="workspaceMenu" role="menu" aria-hidden="true">
+      <button class="menu-button" type="button" data-view-target="files"><span class="icon icon-folder-open"></span><span>工作区文件</span></button>
+      <button class="menu-button" type="button" data-view-target="host"><span class="icon icon-laptop"></span><span>宿主机工作区</span></button>
+      <button class="menu-button" type="button" data-view-target="agents"><span class="icon icon-bot"></span><span>子智能体</span></button>
+      <button class="menu-button" type="button" data-view-target="commands"><span class="icon icon-terminal"></span><span>后台指令</span></button>
+      <button class="menu-button" type="button" data-view-target="todos"><span class="icon icon-sticky"></span><span>待办事项</span></button>
+    </div>
+  </div>
+
+  <div class="demo-hint">工作区为扁平窄面板；展开侧边栏会完整盖住工作区。</div>
+
+  <script>
+    const sidebar = document.getElementById('sidebar');
+    const toggle = document.getElementById('toggleSidebar');
+    const themeToggle = document.getElementById('themeToggle');
+    const conversationMenu = document.getElementById('conversationMenu');
+    const workspaceMenu = document.getElementById('workspaceMenu');
+    const workspaceSwitch = document.getElementById('workspaceSwitch');
+    const workspaceTitle = document.getElementById('workspaceTitle');
+    const workspaceSwitchLabel = document.getElementById('workspaceSwitchLabel');
+    const workspaceSwitchIcon = document.getElementById('workspaceSwitchIcon');
+    let conversationOwner = null;
+
+    const viewMeta = {
+      files: { title: '工作区', label: '工作区文件', icon: 'icon-folder-open' },
+      host: { title: '宿主机工作区', label: '宿主机工作区', icon: 'icon-laptop' },
+      agents: { title: '子智能体', label: '子智能体', icon: 'icon-bot' },
+      commands: { title: '后台指令', label: '后台指令', icon: 'icon-terminal' },
+      todos: { title: '待办事项', label: '待办事项', icon: 'icon-sticky' }
+    };
+
+    toggle.addEventListener('click', () => {
+      const isOpen = sidebar.classList.toggle('open');
+      toggle.setAttribute('aria-expanded', String(isOpen));
+      toggle.setAttribute('aria-label', isOpen ? '收起对话记录' : '展开对话记录');
+      if (!isOpen) closeConversationMenu();
+    });
+
+    themeToggle.addEventListener('click', () => {
+      const root = document.documentElement;
+      const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+      root.dataset.theme = next;
+      themeToggle.querySelector('.side-label').textContent = next === 'dark' ? '深色模式' : '浅色模式';
+    });
+
+    function positionMenu(menu, anchor) {
+      const rect = anchor.getBoundingClientRect();
+      menu.style.left = '0px';
+      menu.style.top = `${rect.bottom + 6}px`;
+      menu.classList.add('open');
+      menu.setAttribute('aria-hidden', 'false');
+      const width = menu.offsetWidth;
+      menu.style.left = `${Math.min(rect.right - width, window.innerWidth - width - 12)}px`;
+    }
+
+    function closeConversationMenu() {
+      conversationMenu.classList.remove('open');
+      conversationMenu.setAttribute('aria-hidden', 'true');
+      if (conversationOwner) conversationOwner.classList.remove('menu-open');
+      conversationOwner = null;
+    }
+
+    function closeWorkspaceMenu() {
+      workspaceMenu.classList.remove('open');
+      workspaceMenu.setAttribute('aria-hidden', 'true');
+      workspaceSwitch.setAttribute('aria-expanded', 'false');
+    }
+
+    document.querySelectorAll('.conversation-more').forEach((button) => {
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        closeWorkspaceMenu();
+        const row = button.closest('.conversation-row');
+        if (conversationOwner === row && conversationMenu.classList.contains('open')) {
+          closeConversationMenu();
+          return;
+        }
+        closeConversationMenu();
+        conversationOwner = row;
+        row.classList.add('menu-open');
+        positionMenu(conversationMenu, button);
+      });
+    });
+
+    workspaceSwitch.addEventListener('click', (event) => {
+      event.stopPropagation();
+      closeConversationMenu();
+      if (workspaceMenu.classList.contains('open')) {
+        closeWorkspaceMenu();
+      } else {
+        workspaceSwitch.setAttribute('aria-expanded', 'true');
+        positionMenu(workspaceMenu, workspaceSwitch);
+      }
+    });
+
+    workspaceMenu.querySelectorAll('[data-view-target]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const view = button.dataset.viewTarget;
+        document.querySelectorAll('.workspace-view').forEach((node) => node.classList.toggle('active', node.dataset.view === view));
+        const meta = viewMeta[view];
+        workspaceTitle.textContent = meta.title;
+        workspaceSwitchLabel.textContent = meta.label;
+        workspaceSwitchIcon.className = `icon ${meta.icon}`;
+        closeWorkspaceMenu();
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!conversationMenu.contains(event.target)) closeConversationMenu();
+      if (!workspaceMenu.contains(event.target) && !workspaceSwitch.contains(event.target)) closeWorkspaceMenu();
+    });
+
+    window.addEventListener('resize', () => {
+      closeConversationMenu();
+      closeWorkspaceMenu();
+    });
+  </script>
+</body>
+</html>
diff --git a/static/src/components/panels/LeftPanel.vue b/static/src/components/panels/LeftPanel.vue
index 07d9c23..16a8f95 100644
--- a/static/src/components/panels/LeftPanel.vue
+++ b/static/src/components/panels/LeftPanel.vue
@@ -226,7 +226,10 @@
                         >
                           默认工作区
                         </span>
-                        <span v-if="item.workspace_id === hostWorkspaceId" class="host-workspace-badge current">
+                        <span
+                          v-if="item.workspace_id === hostWorkspaceId"
+                          class="host-workspace-badge current"
+                        >
                           当前
                         </span>
                       </span>
@@ -237,7 +240,9 @@
                   </button>
                 </div>
                 <div v-else class="file-tree-empty">暂无工作区，点击右侧 + 新建</div>
-                <div class="host-workspace-hint" v-if="hostWorkspaceSwitching">正在切换，请稍候…</div>
+                <div class="host-workspace-hint" v-if="hostWorkspaceSwitching">
+                  正在切换，请稍候…
+                </div>
               </div>
               <div v-else class="file-tree-empty">{{ fileTreeMessage }}</div>
             </template>
diff --git a/static/src/components/sidebar/ConversationSidebar.vue b/static/src/components/sidebar/ConversationSidebar.vue
index bb52637..f06dda3 100644
--- a/static/src/components/sidebar/ConversationSidebar.vue
+++ b/static/src/components/sidebar/ConversationSidebar.vue
@@ -1,181 +1,106 @@
 <template>
   <aside class="conversation-sidebar" :class="{ collapsed, 'monitor-mode': monitorModeActive }">
-    <div class="conversation-header" :class="{ 'collapsed-layout': collapsed }">
-      <template v-if="collapsed">
-        <div class="collapsed-header-buttons">
-          <button
-            type="button"
-            class="collapsed-control-btn conversation-menu-btn"
-            title="展开对话记录"
-            @click="$emit('toggle')"
-          >
-            <span class="sr-only">展开对话记录</span>
-            <span class="chat-icon" data-tutorial="conversation-menu" aria-hidden="true">
-              <slot name="collapsed-chat-icon">
-                <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M5 6.5c0-1.38 1.12-2.5 2.5-2.5h13c1.38 0 2.5 1.12 2.5 2.5v8.5c0 1.38-1.12 2.5-2.5 2.5h-5.6l-3.4 3.2.6-3.2H7.5c-1.38 0-2.5-1.12-2.5-2.5V6.5z"
-                    stroke="currentColor"
-                    stroke-width="1.7"
-                    stroke-linejoin="round"
-                  />
-                  <path
-                    d="M9 9.5h10"
-                    stroke="currentColor"
-                    stroke-width="1.7"
-                    stroke-linecap="round"
-                  />
-                  <path
-                    d="M9 13h6"
-                    stroke="currentColor"
-                    stroke-width="1.7"
-                    stroke-linecap="round"
-                  />
-                </svg>
-              </slot>
-            </span>
-          </button>
-          <button
-            type="button"
-            class="collapsed-control-btn quick-plus-btn"
-            title="快捷新建对话"
-            @click="$emit('create')"
-          >
-            <span class="sr-only">新建对话</span>
-            <span class="pencil-icon" data-tutorial="quick-new-conversation" aria-hidden="true">
-              <slot name="collapsed-create-icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.8"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path
-                    d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
-                    fill="none"
-                  />
-                  <path d="m15 5 4 4" fill="none" />
-                </svg>
-              </slot>
-            </span>
-          </button>
-          <button
-            type="button"
-            class="collapsed-control-btn workspace-control-btn"
-            :class="{ active: workspaceCollapsed }"
-            :title="workspaceCollapsed ? '显示工作区' : '隐藏工作区'"
-            @click="$emit('toggle-workspace')"
-          >
-            <span class="sr-only">{{ workspaceCollapsed ? '显示工作区' : '隐藏工作区' }}</span>
-            <span
-              class="icon icon-md"
-              data-tutorial="workspace-toggle"
-              aria-hidden="true"
-              :style="iconStyle('layers')"
-            ></span>
-          </button>
-          <button
-            type="button"
-            class="collapsed-control-btn monitor-mode-btn"
-            :class="{ active: displayMode === 'monitor', blocked: displayModeDisabled }"
-            @click="$emit('toggle-display-mode')"
-            :aria-disabled="displayModeDisabled"
-            :title="displayMode === 'monitor' ? '退出显示器' : '虚拟显示器'"
-          >
-            <span class="sr-only">{{
-              displayMode === 'monitor' ? '退出显示器' : '虚拟显示器'
-            }}</span>
-            <span
-              class="icon icon-md"
-              data-tutorial="monitor-toggle"
-              aria-hidden="true"
-              :style="iconStyle('monitor')"
-            ></span>
-          </button>
-        </div>
-      </template>
-      <template v-else>
+    <div class="conversation-sidebar-inner">
+      <div class="conversation-primary-actions">
         <button
-          class="new-conversation-btn"
-          :class="{ 'icon-only': monitorModeActive }"
-          :title="monitorModeActive ? '新建对话' : undefined"
-          @click="$emit('create')"
-        >
-          <template v-if="monitorModeActive">
-            <span
-              class="monitor-icon-slot icon icon-md"
-              :style="iconStyle('pencil')"
-              aria-hidden="true"
-            ></span>
-            <span class="sr-only">新建对话</span>
-          </template>
-          <template v-else>
-            <span class="btn-icon">+</span>
-            <span class="btn-text">新建对话</span>
-          </template>
-        </button>
-        <button
-          v-if="resolvedShowCollapseButton"
-          class="toggle-sidebar-btn"
-          data-tutorial="conversation-collapse"
-          :class="{ 'icon-only': monitorModeActive }"
-          :title="monitorModeActive ? (collapsed ? '展开对话记录' : '折叠对话记录') : undefined"
+          type="button"
+          class="sidebar-nav-row conversation-menu-btn"
+          :title="collapsed ? '展开对话记录' : '收起对话记录'"
           @click="$emit('toggle')"
         >
-          <template v-if="resolvedCollapseButtonVariant === 'toggle'">
-            <template v-if="monitorModeActive">
-              <span
-                class="monitor-icon-slot icon icon-md"
-                :style="iconStyle(collapsed ? 'menu' : 'x')"
-                aria-hidden="true"
-              ></span>
-              <span class="sr-only">{{ collapsed ? '展开对话记录' : '折叠对话记录' }}</span>
-            </template>
-            <template v-else>
-              <span
-                v-if="collapsed"
-                class="icon icon-md"
-                :style="iconStyle('menu')"
-                aria-hidden="true"
-              ></span>
-              <span v-else class="toggle-arrow" aria-hidden="true">←</span>
-            </template>
-          </template>
-          <template v-else>
-            <template v-if="monitorModeActive">
-              <span
-                class="monitor-icon-slot icon icon-md"
-                :style="iconStyle('x')"
-                aria-hidden="true"
-              ></span>
-              <span class="sr-only">关闭侧边栏</span>
-            </template>
-            <template v-else>
-              <span class="toggle-close" aria-hidden="true">×</span>
-            </template>
-          </template>
+          <span
+            class="sidebar-nav-icon chat-icon"
+            data-tutorial="conversation-menu"
+            aria-hidden="true"
+          >
+            <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M5 6.5c0-1.38 1.12-2.5 2.5-2.5h13c1.38 0 2.5 1.12 2.5 2.5v8.5c0 1.38-1.12 2.5-2.5 2.5h-5.6l-3.4 3.2.6-3.2H7.5c-1.38 0-2.5-1.12-2.5-2.5V6.5z"
+                stroke="currentColor"
+                stroke-width="1.45"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M9 9.5h10"
+                stroke="currentColor"
+                stroke-width="1.45"
+                stroke-linecap="round"
+              />
+              <path d="M9 13h6" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" />
+            </svg>
+          </span>
+          <span class="sidebar-nav-label">对话记录</span>
         </button>
-      </template>
-    </div>
 
-    <template v-if="!collapsed">
+        <button type="button" class="sidebar-nav-row" title="新建对话" @click="$emit('create')">
+          <span
+            class="sidebar-nav-icon pencil-icon"
+            data-tutorial="quick-new-conversation"
+            aria-hidden="true"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+              />
+              <path d="m15 5 4 4" />
+            </svg>
+          </span>
+          <span class="sidebar-nav-label">新建对话</span>
+        </button>
+
+        <button
+          type="button"
+          class="sidebar-nav-row workspace-control-btn"
+          :class="{ active: workspaceCollapsed }"
+          :title="workspaceCollapsed ? '显示工作区' : '隐藏工作区'"
+          @click="$emit('toggle-workspace')"
+        >
+          <span class="sidebar-nav-icon" data-tutorial="workspace-toggle" aria-hidden="true">
+            <span class="icon icon-md" :style="iconStyle('layers')"></span>
+          </span>
+          <span class="sidebar-nav-label">工作区</span>
+        </button>
+
+        <button
+          type="button"
+          class="sidebar-nav-row monitor-mode-btn"
+          :class="{ active: displayMode === 'monitor', blocked: displayModeDisabled }"
+          :aria-disabled="displayModeDisabled"
+          :title="displayMode === 'monitor' ? '退出显示器' : '虚拟显示器'"
+          @click="$emit('toggle-display-mode')"
+        >
+          <span class="sidebar-nav-icon" data-tutorial="monitor-toggle" aria-hidden="true">
+            <span class="icon icon-md" :style="iconStyle('monitor')"></span>
+          </span>
+          <span class="sidebar-nav-label">虚拟显示器</span>
+        </button>
+      </div>
+
       <div class="conversation-search">
-        <div class="search-input-wrap">
+        <label class="search-input-wrap">
+          <span class="sidebar-nav-icon search-inline-icon" aria-hidden="true">
+            <span class="icon icon-sm" :style="iconStyle('search')"></span>
+          </span>
           <input
             class="search-input"
             :value="searchQuery"
-            placeholder="搜索对话..."
+            placeholder="搜索对话"
             @input="$emit('search', ($event.target as HTMLInputElement).value)"
             @keydown.enter.prevent="
               $emit('search-submit', ($event.target as HTMLInputElement).value)
             "
           />
-        </div>
+        </label>
       </div>
 
       <div class="conversation-list">
@@ -194,33 +119,53 @@
             :key="conv.id"
             class="conversation-item"
             :class="{ active: conv.id === currentConversationId }"
-            @click="$emit('select', conv.id)"
+            @click="
+              openActionMenuId = null;
+              $emit('select', conv.id);
+            "
           >
             <div class="conversation-title">{{ conv.title }}</div>
-            <div class="conversation-meta">
-              <span class="conversation-time">{{ formatTime(conv.updated_at) }}</span>
-              <span class="conversation-counts">
-                {{ conv.total_messages || 0 }}条消息
-                <span v-if="(conv.total_tools || 0) > 0"> · {{ conv.total_tools }}工具</span>
-              </span>
-            </div>
-            <div class="conversation-actions" @click.stop>
+            <div
+              class="conversation-action-wrap"
+              :class="{ 'menu-open': openActionMenuId === conv.id }"
+              @click.stop
+            >
               <button
                 type="button"
-                class="conversation-action-btn delete-btn"
-                title="删除对话"
-                @click="$emit('delete', conv.id)"
+                class="conversation-more-btn"
+                title="更多操作"
+                aria-label="更多操作"
+                :aria-expanded="openActionMenuId === conv.id"
+                @click="toggleActionMenu(conv.id)"
               >
-                ×
+                <span aria-hidden="true"></span>
               </button>
-              <button
-                type="button"
-                class="conversation-action-btn copy-btn"
-                title="复制对话"
-                @click="$emit('duplicate', conv.id)"
+              <div
+                class="conversation-actions-menu"
+                :class="{ open: openActionMenuId === conv.id }"
               >
-                ⧉
-              </button>
+                <button
+                  type="button"
+                  @click="
+                    openActionMenuId = null;
+                    $emit('duplicate', conv.id);
+                  "
+                >
+                  <span class="icon icon-sm" :style="iconStyle('copy')" aria-hidden="true"></span>
+                  <span>复制</span>
+                </button>
+                <button
+                  type="button"
+                  class="danger"
+                  @click="
+                    openActionMenuId = null;
+                    $emit('delete', conv.id);
+                  "
+                >
+                  <span class="icon icon-sm" :style="iconStyle('trash')" aria-hidden="true"></span>
+                  <span>删除</span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -254,35 +199,27 @@
           <div v-else-if="displayConversations.length" class="search-done">已全部搜索</div>
         </div>
       </div>
-    </template>
-    <template v-else>
-      <div class="conversation-collapsed-spacer"></div>
-    </template>
 
-    <div class="conversation-personal-entry" :class="{ collapsed, active: personalPageVisible }">
-      <button
-        type="button"
-        class="personal-page-btn"
-        data-tutorial="open-personal-space"
-        :class="{ 'icon-only': collapsed }"
-        title="个人页面"
-        @click="$emit('personal')"
-      >
-        <span class="sr-only">个人页面</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+      <div class="conversation-personal-entry" :class="{ active: personalPageVisible }">
+        <button
+          type="button"
+          class="sidebar-nav-row personal-page-btn"
+          data-tutorial="open-personal-space"
+          title="个人空间"
+          @click="$emit('personal')"
         >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-          ></path>
-        </svg>
-        <span class="personal-label" v-if="!collapsed">个人空间</span>
-      </button>
+          <span class="sidebar-nav-icon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+              ></path>
+            </svg>
+          </span>
+          <span class="sidebar-nav-label personal-label">个人空间</span>
+        </button>
+      </div>
     </div>
   </aside>
 </template>
@@ -290,7 +227,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ConversationSidebar' });
 
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useUiStore } from '@/stores/ui';
 import { useConversationStore } from '@/stores/conversation';
@@ -325,6 +262,7 @@ defineEmits<{
   (event: 'delete', id: string): void;
   (event: 'duplicate', id: string): void;
   (event: 'toggle-workspace'): void;
+  (event: 'toggle-display-mode'): void;
 }>();
 
 const uiStore = useUiStore();
@@ -350,15 +288,30 @@ const {
 } = storeToRefs(conversationStore);
 const { visible: personalPageVisible } = storeToRefs(personalizationStore);
 
-const formatTime = (value: unknown) => (props.formatTime ? props.formatTime(value) : String(value));
 const iconStyle = (key: string) => (props.iconStyle ? props.iconStyle(key) : {});
-const resolvedShowCollapseButton = computed(() => props.showCollapseButton);
-const resolvedCollapseButtonVariant = computed(() => props.collapseButtonVariant);
 const displayMode = computed(() => props.displayMode);
 const monitorModeActive = computed(
   () => displayMode.value === 'monitor' || uiChatDisplayMode.value === 'monitor'
 );
 const displayModeDisabled = computed(() => props.displayModeDisabled);
+const openActionMenuId = ref<string | null>(null);
+
+const toggleActionMenu = (conversationId: string) => {
+  openActionMenuId.value = openActionMenuId.value === conversationId ? null : conversationId;
+};
+
+const closeActionMenu = () => {
+  openActionMenuId.value = null;
+};
+
+onMounted(() => {
+  document.addEventListener('click', closeActionMenu);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeActionMenu);
+});
+
 const displayConversations = computed(() =>
   searchActive.value ? searchResults.value : conversations.value
 );
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 502d52c..f2f2ac8 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -1,1331 +1,1401 @@
 /* 聊天容器整体布局，保证聊天区可见并支持上下滚动 */
 .chat-container {
-    --chat-surface-color: var(--theme-surface-strong, #ffffff);
-    --composer-base-height: calc(80px + var(--app-bottom-inset, 0px));
-    --composer-reserved-height: var(--composer-base-height);
-    --composer-growth-height: 0px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    background: var(--chat-surface-color);
-    min-width: 0;
-    height: var(--app-viewport, 100vh);
-    overflow: hidden;
-    position: relative;
-    backdrop-filter: blur(6px);
+  --chat-surface-color: var(--theme-surface-strong, #ffffff);
+  --composer-base-height: calc(80px + var(--app-bottom-inset, 0px));
+  --composer-reserved-height: var(--composer-base-height);
+  --composer-growth-height: 0px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-surface-color);
+  min-width: 0;
+  height: var(--app-viewport, 100vh);
+  overflow: hidden;
+  position: relative;
+  backdrop-filter: blur(6px);
 }
 
 .conversation-ribbon {
-    position: absolute;
-    inset: 0 0 auto 0;
-    height: 44px;
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: #0f172a;
-    background: var(--chat-surface-color); /* 与对话区域保持一致且不透明 */
-    box-shadow: none;
-    pointer-events: auto;
-    user-select: none;
-    backdrop-filter: none;
-    z-index: 40;
-    gap: 12px;
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 44px;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0f172a;
+  background: var(--chat-surface-color); /* 与对话区域保持一致且不透明 */
+  box-shadow: none;
+  pointer-events: auto;
+  user-select: none;
+  backdrop-filter: none;
+  z-index: 40;
+  gap: 12px;
 }
 
 .conversation-ribbon::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -8px;
-    height: 16px;
-    background: var(--chat-surface-color);
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
-    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(14px);
-    pointer-events: none;
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -8px;
+  height: 16px;
+  background: var(--chat-surface-color);
+  mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.6) 55%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.6) 55%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
 }
 
 .conversation-ribbon__text {
-    font-weight: 700;
-    font-size: 15px;
-    line-height: 1.4;
-    letter-spacing: 0.02em;
-    font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    max-width: 60%;
-    color: #0f172a;
-    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  max-width: 60%;
+  color: #0f172a;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .chat-container.has-title-ribbon .messages-area {
-    padding-top: 54px;
+  padding-top: 54px;
 }
 
 .chat-container--monitor .virtual-monitor-surface {
-    flex: 1;
+  flex: 1;
 }
 
 /* 核心聊天区样式，确保对话内容在主面板中可见 */
 .messages-area {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    overflow-anchor: none;
-    padding: 24px;
-    padding-top: 30px;
-    padding-bottom: calc(20px + var(--composer-growth-height, 0px));
-    min-height: 0;
-    position: relative;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-anchor: none;
+  padding: 24px;
+  padding-top: 30px;
+  padding-bottom: calc(20px + var(--composer-growth-height, 0px));
+  min-height: 0;
+  position: relative;
 }
 
 .messages-area.messages-area--stick {
-    overflow-anchor: none;
+  overflow-anchor: none;
 }
 
 .messages-flow {
-    width: min(960px, 100%);
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
+  width: min(960px, 100%);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .chat-container .input-area {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 32px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 32px;
 }
 
 .messages-area::-webkit-scrollbar,
 .sidebar::-webkit-scrollbar,
 .conversation-list::-webkit-scrollbar {
-    width: 8px;
+  width: 8px;
 }
 
 .messages-area::-webkit-scrollbar-track,
 .sidebar::-webkit-scrollbar-track,
 .conversation-list::-webkit-scrollbar-track {
-    background: transparent;
+  background: transparent;
 }
 
 .messages-area::-webkit-scrollbar-thumb,
 .sidebar::-webkit-scrollbar-thumb,
 .conversation-list::-webkit-scrollbar-thumb {
-    background: rgba(121, 109, 94, 0.4);
-    border-radius: 8px;
+  background: rgba(121, 109, 94, 0.4);
+  border-radius: 8px;
 }
 
 .scroll-lock-toggle {
-    position: fixed;
-    right: 8px;
-    bottom: 100px;
-    z-index: 25;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+  position: fixed;
+  right: 8px;
+  bottom: 100px;
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 .scroll-to-bottom-fade-enter-active,
 .scroll-to-bottom-fade-leave-active {
-    transition: opacity 0.2s ease, transform 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
 .scroll-to-bottom-fade-enter-from,
 .scroll-to-bottom-fade-leave-to {
-    opacity: 0;
-    transform: translateY(8px);
+  opacity: 0;
+  transform: translateY(8px);
 }
 
 .chat-container--immersive .messages-flow {
-    width: min(900px, 100%);
+  width: min(900px, 100%);
 }
 
 .chat-container--immersive .scroll-lock-toggle {
-    right: 8px;
+  right: 8px;
 }
 
 .chat-container--mobile {
-    padding-top: 52px;
+  padding-top: 52px;
 }
 
 @media (max-width: 768px) {
-    .chat-container {
-        --composer-base-height: calc(80px + var(--app-bottom-inset, 0px));
-        --composer-reserved-height: var(--composer-base-height);
-    }
+  .chat-container {
+    --composer-base-height: calc(80px + var(--app-bottom-inset, 0px));
+    --composer-reserved-height: var(--composer-base-height);
+  }
 
-    .chat-container--mobile {
-        padding-top: 44px;
-    }
+  .chat-container--mobile {
+    padding-top: 44px;
+  }
 
-    .messages-area {
-        padding-top: 8px;
-        padding-left: 12px !important;
-        padding-right: 12px !important;
-    }
+  .messages-area {
+    padding-top: 8px;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
 
-    .message-block:first-child {
-        margin-top: 0;
-    }
+  .message-block:first-child {
+    margin-top: 0;
+  }
 
-    .user-message .message-text {
-        max-width: 80% !important;
-    }
-
-    .assistant-message .message-text {
-        padding: 16px 8px !important;
-    }
+  .user-message .message-text {
+    max-width: 80% !important;
+  }
 
+  .assistant-message .message-text {
+    padding: 16px 8px !important;
+  }
 }
 
 /* 额外的手机端样式，不依赖 mobile 类 */
 @media (max-width: 768px) {
-    .messages-flow {
-        padding-left: 0;
-        padding-right: 0;
-    }
+  .messages-flow {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .conversation-ribbon__selector {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0;
-    border-radius: 0;
-    border: none;
-    background: transparent;
-    box-shadow: none;
-    color: #0f172a;
-    font-weight: 600;
-    font-size: 15px;
-    line-height: 1.35;
-    font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    cursor: pointer;
-    transition: color 0.15s ease;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: #0f172a;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.35;
+  font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  cursor: pointer;
+  transition: color 0.15s ease;
 }
 
 .conversation-ribbon__selector:hover {
-    color: #111827;
+  color: #111827;
 }
 
 .conversation-ribbon__selector:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .conversation-ribbon__selector.open {
-    color: #111827;
+  color: #111827;
 }
 
 .selector-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .selector-model {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .selector-sep {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 .selector-mode {
-    font-weight: 500;
-    color: rgba(15, 23, 42, 0.8);
+  font-weight: 500;
+  color: rgba(15, 23, 42, 0.8);
 }
 
 .selector-caret {
-    width: 14px;
-    height: 14px;
-    stroke: currentColor;
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
 }
 
 .model-mode-dropdown {
-    position: absolute;
-    top: 48px;
-    left: 16px;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 12px;
-    padding: 12px;
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
-    backdrop-filter: blur(8px);
-    pointer-events: auto;
-    min-width: 480px;
-    z-index: 50;
+  position: absolute;
+  top: 48px;
+  left: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(8px);
+  pointer-events: auto;
+  min-width: 480px;
+  z-index: 50;
 }
 
 .model-mode-dropdown--mobile {
-    position: fixed;
-    top: 52px;
-    left: 12px;
-    right: auto;
-    min-width: 0;
-    max-width: min(480px, calc(100vw - 24px));
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    z-index: 1600;
+  position: fixed;
+  top: 52px;
+  left: 12px;
+  right: auto;
+  min-width: 0;
+  max-width: min(480px, calc(100vw - 24px));
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  z-index: 1600;
 }
 
 .model-mode-dropdown--mobile .dropdown-item {
-    grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr auto;
 }
 
 .model-mode-dropdown--mobile .item-desc {
-    display: none;
+  display: none;
 }
 
 .dropdown-column {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .dropdown-list {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .dropdown-list--models {
-    max-height: 320px; /* 最多显示约 5 个模型 */
-    overflow-y: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  max-height: 320px; /* 最多显示约 5 个模型 */
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .dropdown-list--models::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  width: 0;
+  height: 0;
 }
 
 .model-mode-dropdown--mobile .dropdown-list--models {
-    max-height: 260px;
+  max-height: 260px;
 }
 
 .dropdown-title {
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: rgba(15, 23, 42, 0.65);
-    padding: 2px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.65);
+  padding: 2px 12px;
 }
 
 .dropdown-item {
-    text-align: left;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    padding: 10px 12px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 6px;
-    cursor: pointer;
-    transition: all 0.18s ease;
-    color: #0f172a;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 10px 12px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 6px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  color: #0f172a;
 }
 
 .dropdown-item:hover:not(.disabled) {
-    background: #f6f7fb;
+  background: #f6f7fb;
 }
 
 .dropdown-item.disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
 .item-label {
-    font-weight: 700;
-    font-size: 14px;
+  font-weight: 700;
+  font-size: 14px;
 }
 
 .item-desc {
-    grid-column: 1 / 2;
-    font-size: 12px;
-    color: rgba(15, 23, 42, 0.65);
+  grid-column: 1 / 2;
+  font-size: 12px;
+  color: rgba(15, 23, 42, 0.65);
 }
 
 .item-check {
-    align-self: center;
-    font-weight: 800;
-    color: #0f172a;
+  align-self: center;
+  font-weight: 800;
+  color: #0f172a;
 }
 
 .header-menu-enter-active,
 .header-menu-leave-active {
-    transition: all 0.16s ease, opacity 0.16s ease;
-    transform-origin: top left;
+  transition:
+    all 0.16s ease,
+    opacity 0.16s ease;
+  transform-origin: top left;
 }
 
 .header-menu-enter-from,
 .header-menu-leave-to {
-    opacity: 0;
-    transform: translateY(-6px) scale(0.98);
+  opacity: 0;
+  transform: translateY(-6px) scale(0.98);
 }
 
 .scroll-lock-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 1px solid var(--claude-border);
-    background: rgba(255, 255, 255, 0.92);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 6px 16px rgba(61, 57, 41, 0.08);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--claude-border);
+  background: rgba(255, 255, 255, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 16px rgba(61, 57, 41, 0.08);
 }
 
 .scroll-lock-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 9px 20px rgba(61, 57, 41, 0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 9px 20px rgba(61, 57, 41, 0.12);
 }
 
 .scroll-lock-toggle.locked .scroll-lock-btn {
-    border-color: var(--claude-accent);
-    box-shadow: 0 0 10px var(--claude-highlight);
+  border-color: var(--claude-accent);
+  box-shadow: 0 0 10px var(--claude-highlight);
 }
 
 .scroll-lock-btn svg {
-    width: 18px;
-    height: 18px;
-    stroke: var(--claude-text);
-    stroke-width: 1.8;
-    fill: none;
-    transition: stroke 0.2s ease;
+  width: 18px;
+  height: 18px;
+  stroke: var(--claude-text);
+  stroke-width: 1.8;
+  fill: none;
+  transition: stroke 0.2s ease;
 }
 
 .scroll-lock-toggle.locked .scroll-lock-btn svg {
-    stroke: var(--claude-accent);
+  stroke: var(--claude-accent);
 }
 
 .message-block {
-    margin-bottom: 24px;
-    min-width: 0;
+  margin-bottom: 24px;
+  min-width: 0;
 }
 
 .message-block.message-block--sub-agent-notice {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .message-block.message-block--before-sub-agent-notice {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .message-block.message-block--before-sub-agent-notice .minimal-blocks-container {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .message-block.message-block--before-sub-agent-notice .minimal-blocks-container > :last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .message-block.message-block--sub-agent-notice .minimal-blocks-container {
-    margin: 0;
+  margin: 0;
 }
 
 .user-message {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end; /* 靠右对齐 */
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end; /* 靠右对齐 */
 }
 
 .user-message .message-header,
 .assistant-message .message-header {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--claude-text);
-    margin-bottom: 10px;
-    letter-spacing: 0.02em;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--claude-text);
+  margin-bottom: 10px;
+  letter-spacing: 0.02em;
 }
 
 .assistant-work-status {
-    margin-left: 8px;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--claude-text-secondary);
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--claude-text-secondary);
 }
 
 .user-message .message-text,
 .assistant-message .message-text {
-    padding: 16px 20px;
-    border-radius: 18px;
-    font-size: 15px;
-    line-height: 1.6;
-    box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
-    color: var(--claude-text);
-    white-space: pre-wrap;
-    word-break: break-all;
-    overflow-wrap: normal;
+  padding: 16px 20px;
+  border-radius: 18px;
+  font-size: 15px;
+  line-height: 1.6;
+  box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
+  color: var(--claude-text);
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: normal;
 }
 
 .user-message .message-text {
-    background: rgba(255, 255, 255, 0.88);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-width: 60%; /* 最大宽度 60% */
-    width: fit-content; /* 根据内容自适应宽度 */
-    align-self: flex-end; /* 确保靠右 */
+  background: rgba(255, 255, 255, 0.88);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 60%; /* 最大宽度 60% */
+  width: fit-content; /* 根据内容自适应宽度 */
+  align-self: flex-end; /* 确保靠右 */
 }
 
 .assistant-message .message-text {
-    background: var(--claude-highlight);
-    border-left: 4px solid var(--claude-accent);
+  background: var(--claude-highlight);
+  border-left: 4px solid var(--claude-accent);
 }
 
 .user-message .message-text.user-bubble-text .image-inline-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    line-height: 1.4;
-    padding-bottom: 2px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  line-height: 1.4;
+  padding-bottom: 2px;
 }
 
 .user-message .message-text.user-bubble-text .image-thumbnail-wrapper {
-    position: relative;
-    width: 60px;
-    height: 60px;
-    border-radius: 6px;
-    overflow: hidden;
-    cursor: pointer;
-    border: 1px solid var(--border-color, #2a2f3a);
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--border-color, #2a2f3a);
 }
 
 .user-message .message-text.user-bubble-text .image-thumbnail {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
 .assistant-generating-block {
-    width: 100%;
+  width: 100%;
 }
 
 .text-content.assistant-generating-placeholder {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: 0.08em;
-    padding: 8px 0 16px;
-    margin: 0;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--claude-text);
-    letter-spacing: 0.08em;
-    background: transparent;
-    border: none;
-    box-shadow: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.08em;
+  padding: 8px 0 16px;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--claude-text);
+  letter-spacing: 0.08em;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 .assistant-generating-letter {
-    display: inline-block;
-    opacity: 0.35;
-    transform: translateY(0);
-    animation: assistant-generating-wave 1.6s ease-in-out infinite;
+  display: inline-block;
+  opacity: 0.35;
+  transform: translateY(0);
+  animation: assistant-generating-wave 1.6s ease-in-out infinite;
 }
 
 @keyframes assistant-generating-wave {
-    0%,
-    100% {
-        opacity: 0.35;
-        transform: translateY(0);
-    }
-    20% {
-        opacity: 1;
-        transform: translateY(-3px) scale(1.05);
-    }
-    40% {
-        opacity: 0.65;
-        transform: translateY(0);
-    }
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-3px) scale(1.05);
+  }
+  40% {
+    opacity: 0.65;
+    transform: translateY(0);
+  }
 }
 
 .thinking-content {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--claude-text-secondary);
-    scrollbar-width: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--claude-text-secondary);
+  scrollbar-width: none;
 }
 
 .thinking-content::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .collapsible-block {
-    background: rgba(255, 255, 255, 0.78);
-    border-radius: 12px;
-    margin-bottom: 12px;
-    overflow: hidden;
-    border: 1px solid var(--claude-border);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
+  background: rgba(255, 255, 255, 0.78);
+  border-radius: 12px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  border: 1px solid var(--claude-border);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
 }
 
 .collapsible-header {
-    padding: 9px 13px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    user-select: none;
-    background: rgba(255, 255, 255, 0.72);
-    transition: background-color 0.2s ease;
-    position: relative;
-    min-height: 36px;
-    max-height: 36px;
-    overflow: hidden;
+  padding: 9px 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+  background: rgba(255, 255, 255, 0.72);
+  transition: background-color 0.2s ease;
+  position: relative;
+  min-height: 36px;
+  max-height: 36px;
+  overflow: hidden;
 }
 
 .collapsible-header:hover {
-    background: var(--claude-highlight);
+  background: var(--claude-highlight);
 }
 
 .arrow {
-    width: 16px;
-    min-width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 16px;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--claude-text-secondary);
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 16px;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--claude-text-secondary);
 }
 
 .arrow::before {
-    content: '›';
-    font-size: 18px;
+  content: '›';
+  font-size: 18px;
 }
 
 .collapsible-block.expanded .arrow {
-    transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
 .status-icon {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 20px;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 20px;
 }
 
 .captured-status {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 14px;
-    color: var(--claude-text);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--claude-text);
 }
 
 .collapsible-content {
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-    transition:
-        max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
-    /* 始终隐藏滚动条，避免堆叠模式展开时闪现 */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    will-change: max-height, opacity;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* 始终隐藏滚动条，避免堆叠模式展开时闪现 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  will-change: max-height, opacity;
 }
 
 .collapsible-content::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .collapsible-block.expanded .collapsible-content {
-    max-height: var(--collapse-max, 600px);
-    overflow-y: auto;
-    opacity: 1;
+  max-height: var(--collapse-max, 600px);
+  overflow-y: auto;
+  opacity: 1;
 }
 
 .content-inner {
-    padding: 13px 13px 13px 37px;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--claude-text-secondary);
-    scrollbar-width: none;
+  padding: 13px 13px 13px 37px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--claude-text-secondary);
+  scrollbar-width: none;
 }
 
 .content-inner::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .action-item {
-    animation: slideInFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
+  animation: slideInFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 
 .action-item.streaming-content,
 .action-item.immediate-show {
-    animation: quickFadeIn 0.2s ease-out both;
+  animation: quickFadeIn 0.2s ease-out both;
 }
 
 .action-item.completed-tool {
-    animation: slideInFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
-    animation-delay: 100ms;
+  animation: slideInFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
+  animation-delay: 100ms;
 }
 
 .action-item.thinking-finished {
-    animation: none;
+  animation: none;
 }
 
 .stacked-blocks-wrapper {
-    margin: 12px 0 8px;
+  margin: 12px 0 8px;
 }
 
 .stacked-shell {
-    position: relative;
-    border: 1px solid var(--claude-border);
-    border-radius: 16px;
-    background: var(--claude-card);
-    box-shadow: var(--claude-shadow);
-    overflow: hidden;
-    min-height: 0;
+  position: relative;
+  border: 1px solid var(--claude-border);
+  border-radius: 16px;
+  background: var(--claude-card);
+  box-shadow: var(--claude-shadow);
+  overflow: hidden;
+  min-height: 0;
 }
 
 .stacked-inner {
-    position: relative;
-    width: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .stacked-viewport {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
 }
 
 .stacked-item {
-    border-bottom: 1px solid var(--claude-border);
+  border-bottom: 1px solid var(--claude-border);
 }
 
 .stacked-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .stacked-block {
-    margin: 0;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-    background: transparent;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 
 .stacked-more-block {
-    position: absolute;
-    inset: 0 0 auto 0;
-    background: var(--claude-card);
-    border-bottom: 0 solid var(--claude-border);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 22px;
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 2;
-    transition:
-        height 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
-        padding 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
-        border-bottom-width 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
-        opacity 160ms ease;
+  position: absolute;
+  inset: 0 0 auto 0;
+  background: var(--claude-card);
+  border-bottom: 0 solid var(--claude-border);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 22px;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 2;
+  transition:
+    height 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
+    padding 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
+    border-bottom-width 280ms cubic-bezier(0.25, 0.9, 0.3, 1),
+    opacity 160ms ease;
 }
 
 .stacked-more-block.visible {
-    opacity: 1;
-    padding: 14px 22px;
-    border-bottom-width: 1px;
+  opacity: 1;
+  padding: 14px 22px;
+  border-bottom-width: 1px;
 }
 
 .more-icon {
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    object-fit: contain;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  object-fit: contain;
 }
 
 body[data-theme='dark'] .more-icon {
-    filter: brightness(0) invert(1);
+  filter: brightness(0) invert(1);
 }
 
 .more-copy {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    user-select: none;
-    -webkit-user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .more-title {
-    font-weight: 700;
-    color: var(--claude-text);
+  font-weight: 700;
+  color: var(--claude-text);
 }
 
 .more-desc {
-    color: var(--claude-text-secondary);
-    font-size: 12px;
+  color: var(--claude-text-secondary);
+  font-size: 12px;
 }
 
 .stacked-enter-from {
-    opacity: 0;
-    transform: translateY(14px);
+  opacity: 0;
+  transform: translateY(14px);
 }
 
 .stacked-enter-active,
 .stacked-appear-active {
-    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
-    transition-delay: 120ms;
+  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 120ms;
 }
 
 .stacked-leave-active {
-    position: absolute;
-    width: 100%;
-    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  width: 100%;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .stacked-leave-to {
-    opacity: 0;
-    transform: translateY(-12px);
+  opacity: 0;
+  transform: translateY(-12px);
 }
 
 .stacked-appear-from {
-    opacity: 0;
-    transform: translateY(14px);
+  opacity: 0;
+  transform: translateY(14px);
 }
 
 .stacked-move {
-    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .stacked-block .collapsible-content {
-    transition:
-        max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    max-height 260ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .progress-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    background: var(--claude-accent);
-    animation: progress-bar 2s ease-in-out infinite;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--claude-accent);
+  animation: progress-bar 2s ease-in-out infinite;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
 }
 
 .collapsible-block.processing .progress-indicator {
-    opacity: 1;
+  opacity: 1;
 }
 
 @keyframes progress-bar {
-    0% {
-        width: 0%;
-        left: 0%;
-    }
-    50% {
-        width: 40%;
-        left: 30%;
-    }
-    100% {
-        width: 0%;
-        left: 100%;
-    }
+  0% {
+    width: 0%;
+    left: 0%;
+  }
+  50% {
+    width: 40%;
+    left: 30%;
+  }
+  100% {
+    width: 0%;
+    left: 100%;
+  }
 }
 
 .status-text {
-    font-size: 14px;
-    color: var(--claude-text);
-    font-weight: 500;
-    white-space: nowrap;
-    flex-shrink: 0;
+  font-size: 14px;
+  color: var(--claude-text);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .collapsible-block.processing .status-text {
-    color: var(--claude-text-secondary);
+  color: var(--claude-text-secondary);
 }
 
 .tool-desc {
-    color: var(--claude-text-secondary);
-    font-size: 12px;
-    margin-left: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
-    min-width: 0;
+  color: var(--claude-text-secondary);
+  font-size: 12px;
+  margin-left: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
 }
 
 @keyframes slideInFade {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes quickFadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(5px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .text-output {
-    margin: 16px 0;
-    color: var(--claude-text);
-    font-size: 15px;
-    line-height: 1.7;
+  margin: 16px 0;
+  color: var(--claude-text);
+  font-size: 15px;
+  line-height: 1.7;
 }
 
 .chat-inline-card {
-    display: block;
-    max-width: 100%;
-    margin: 14px auto;
-    border: 1px solid var(--claude-border);
-    border-radius: 12px;
-    overflow: hidden;
-    background: transparent;
-    box-shadow: var(--claude-shadow);
+  display: block;
+  max-width: 100%;
+  margin: 14px auto;
+  border: 1px solid var(--claude-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: transparent;
+  box-shadow: var(--claude-shadow);
 }
 
 .chat-inline-card__body {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-    border: 0;
-    background: transparent;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
 }
 
 .chat-inline-card--pending {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .chat-inline-card__pending-tip {
-    font-size: 13px;
-    color: var(--claude-text-secondary);
+  font-size: 13px;
+  color: var(--claude-text-secondary);
 }
 
 .chat-inline-card__error {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
-    text-align: center;
+  font-size: 12px;
+  color: var(--claude-text-secondary);
+  text-align: center;
 }
 
 .chat-inline-card__caption {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
-    text-align: center;
-    line-height: 1.4;
-    padding: 0 8px;
+  font-size: 12px;
+  color: var(--claude-text-secondary);
+  text-align: center;
+  line-height: 1.4;
+  padding: 0 8px;
 }
 
 .chat-inline-card--image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    margin: 14px 0;
-    border: 0;
-    box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin: 14px 0;
+  border: 0;
+  box-shadow: none;
 }
 
 .chat-inline-card--image img {
-    display: block;
-    width: auto;
-    min-width: 160px;
-    max-width: 80%;
-    max-height: 720px;
-    object-fit: contain;
-    border-radius: 12px;
-    border: 1px solid var(--claude-border);
-    box-shadow: var(--claude-shadow);
-    background: var(--claude-card);
+  display: block;
+  width: auto;
+  min-width: 160px;
+  max-width: 80%;
+  max-height: 720px;
+  object-fit: contain;
+  border-radius: 12px;
+  border: 1px solid var(--claude-border);
+  box-shadow: var(--claude-shadow);
+  background: var(--claude-card);
 }
 
 .chat-inline-card--error {
-    border: 1px dashed var(--claude-accent);
-    padding: 6px 10px;
-    border-radius: 12px;
-    background: var(--claude-highlight);
+  border: 1px dashed var(--claude-accent);
+  padding: 6px 10px;
+  border-radius: 12px;
+  background: var(--claude-highlight);
 }
 
 .chat-inline-card--html {
-    display: block;
-    position: relative;
+  display: block;
+  position: relative;
 }
 
 .chat-inline-card__toolbar {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 4;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    pointer-events: none;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  pointer-events: none;
 }
 
 .chat-inline-card__refresh-btn {
-    pointer-events: auto;
-    width: 26px;
-    height: 26px;
-    border-radius: 999px;
-    border: 1px solid var(--claude-border);
-    background: color-mix(in srgb, var(--claude-card) 78%, transparent);
-    color: var(--claude-text-secondary);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 15px;
-    line-height: 1;
-    cursor: pointer;
-    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+  pointer-events: auto;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  border: 1px solid var(--claude-border);
+  background: color-mix(in srgb, var(--claude-card) 78%, transparent);
+  color: var(--claude-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color 0.18s ease,
+    border-color 0.18s ease,
+    background 0.18s ease;
 }
 
 .chat-inline-card__refresh-btn:hover {
-    color: var(--claude-text);
-    border-color: var(--claude-accent);
-    background: color-mix(in srgb, var(--claude-highlight) 72%, transparent);
+  color: var(--claude-text);
+  border-color: var(--claude-accent);
+  background: color-mix(in srgb, var(--claude-highlight) 72%, transparent);
 }
 
 .chat-inline-card__refresh-btn.is-refreshing {
-    animation: chat-inline-refresh-spin 0.6s linear 1;
+  animation: chat-inline-refresh-spin 0.6s linear 1;
 }
 
 @keyframes chat-inline-refresh-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .chat-inline-html__host--pending {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100%;
-    padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 12px 14px;
 }
 
 .chat-inline-html__pending-tip {
-    font-size: 13px;
-    color: var(--claude-text-secondary);
+  font-size: 13px;
+  color: var(--claude-text-secondary);
 }
 
 .chat-inline-html__iframe {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    background: transparent;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
 }
 
 /* 兼容旧类名（可逐步移除） */
-.chat-inline-image__error { @extend .chat-inline-card__error; }
-.chat-inline-image figcaption { @extend .chat-inline-card__caption; }
-
-/* show_html 在 streaming 重建期间会短暂回到原始标签，需提供稳定占位避免 scrollHeight 抖动 */
-show_html:not([data-rendered="1"]),
-show-html:not([data-rendered="1"]) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    min-height: 220px;
-    margin: 14px auto;
-    box-sizing: border-box;
-    overflow: hidden;
-    border: 1px solid var(--claude-border);
-    border-radius: 12px;
-    background: transparent;
-    box-shadow: var(--claude-shadow);
+.chat-inline-image__error {
+  @extend .chat-inline-card__error;
+}
+.chat-inline-image figcaption {
+  @extend .chat-inline-card__caption;
 }
 
-show_html:not([data-rendered="1"])[ratio="1:1"],
-show-html:not([data-rendered="1"])[ratio="1:1"] { aspect-ratio: 1 / 1; }
-show_html:not([data-rendered="1"])[ratio="16:9"],
-show-html:not([data-rendered="1"])[ratio="16:9"] { aspect-ratio: 16 / 9; }
-show_html:not([data-rendered="1"])[ratio="9:16"],
-show-html:not([data-rendered="1"])[ratio="9:16"] { aspect-ratio: 9 / 16; }
-show_html:not([data-rendered="1"])[ratio="4:3"],
-show-html:not([data-rendered="1"])[ratio="4:3"] { aspect-ratio: 4 / 3; }
-show_html:not([data-rendered="1"])[ratio="3:4"],
-show-html:not([data-rendered="1"])[ratio="3:4"] { aspect-ratio: 3 / 4; }
+/* show_html 在 streaming 重建期间会短暂回到原始标签，需提供稳定占位避免 scrollHeight 抖动 */
+show_html:not([data-rendered='1']),
+show-html:not([data-rendered='1']) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: 220px;
+  margin: 14px auto;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--claude-border);
+  border-radius: 12px;
+  background: transparent;
+  box-shadow: var(--claude-shadow);
+}
+
+show_html:not([data-rendered='1'])[ratio='1:1'],
+show-html:not([data-rendered='1'])[ratio='1:1'] {
+  aspect-ratio: 1 / 1;
+}
+show_html:not([data-rendered='1'])[ratio='16:9'],
+show-html:not([data-rendered='1'])[ratio='16:9'] {
+  aspect-ratio: 16 / 9;
+}
+show_html:not([data-rendered='1'])[ratio='9:16'],
+show-html:not([data-rendered='1'])[ratio='9:16'] {
+  aspect-ratio: 9 / 16;
+}
+show_html:not([data-rendered='1'])[ratio='4:3'],
+show-html:not([data-rendered='1'])[ratio='4:3'] {
+  aspect-ratio: 4 / 3;
+}
+show_html:not([data-rendered='1'])[ratio='3:4'],
+show-html:not([data-rendered='1'])[ratio='3:4'] {
+  aspect-ratio: 3 / 4;
+}
 
 .text-output .text-content {
-    padding: 0 20px 0 15px;
-    max-width: 100%;
-    min-width: 0;
-    overflow-x: hidden;
+  padding: 0 20px 0 15px;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
 }
 
 .text-output pre {
-    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace !important;
-    font-variant-ligatures: none;
-    font-feature-settings: 'liga' 0, 'calt' 0;
-    line-height: 1.55;
-    overflow-x: auto;
-    max-width: 100%;
-    scrollbar-gutter: stable;
-    box-sizing: border-box;
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace !important;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
+  line-height: 1.55;
+  overflow-x: auto;
+  max-width: 100%;
+  scrollbar-gutter: stable;
+  box-sizing: border-box;
 }
 
 .text-output pre code {
-    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace !important;
-    font-variant-ligatures: none;
-    font-feature-settings: 'liga' 0, 'calt' 0;
-    line-height: 1.55;
-    text-shadow: none;
-    animation: none !important; /* 防止外部动画样式影响代码块，导致视觉抖动 */
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace !important;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
+  line-height: 1.55;
+  text-shadow: none;
+  animation: none !important; /* 防止外部动画样式影响代码块，导致视觉抖动 */
 }
 
 .text-output .text-content table {
-    width: max-content;
-    min-width: 100%;
-    border-collapse: collapse;
-    margin: 0;
-    background: var(--theme-surface-soft);
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  margin: 0;
+  background: var(--theme-surface-soft);
 }
 
 .text-output .text-content .md-table-scroll,
 .text-output .text-content [data-md-table-scroll='1'] {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 16px 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    border: 1px solid var(--claude-border);
-    border-radius: 12px;
-    background: var(--theme-surface-soft);
-    box-shadow: var(--theme-shadow-soft);
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 16px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--claude-border);
+  border-radius: 12px;
+  background: var(--theme-surface-soft);
+  box-shadow: var(--theme-shadow-soft);
 }
 
 .text-output .text-content .md-table-scroll > table,
 .text-output .text-content [data-md-table-scroll='1'] > table {
-    margin: 0;
+  margin: 0;
 }
 
 .text-output .text-content .md-table-scroll::-webkit-scrollbar,
 .text-output .text-content [data-md-table-scroll='1']::-webkit-scrollbar {
-    height: 10px;
+  height: 10px;
 }
 
 .text-output .text-content .md-table-scroll::-webkit-scrollbar-track,
 .text-output .text-content [data-md-table-scroll='1']::-webkit-scrollbar-track {
-    background: color-mix(in srgb, var(--theme-surface-muted, #d1d5db) 70%, transparent);
-    border-radius: 999px;
-    margin: 0 8px 6px;
+  background: color-mix(in srgb, var(--theme-surface-muted, #d1d5db) 70%, transparent);
+  border-radius: 999px;
+  margin: 0 8px 6px;
 }
 
 .text-output .text-content .md-table-scroll::-webkit-scrollbar-thumb,
 .text-output .text-content [data-md-table-scroll='1']::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent);
-    border-radius: 999px;
+  background: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent);
+  border-radius: 999px;
 }
 
 .text-output .text-content .md-table-scroll,
 .text-output .text-content [data-md-table-scroll='1'] {
-    scrollbar-color: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent)
-        color-mix(in srgb, var(--theme-surface-muted, #d1d5db) 70%, transparent);
-    scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent)
+    color-mix(in srgb, var(--theme-surface-muted, #d1d5db) 70%, transparent);
+  scrollbar-width: thin;
 }
 
 .text-output .text-content thead {
-    background: var(--theme-chip-bg);
+  background: var(--theme-chip-bg);
 }
 
 .text-output .text-content th,
 .text-output .text-content td {
-    border: 1px solid var(--claude-border);
-    padding: 10px 14px;
-    text-align: left;
-    vertical-align: middle;
-    font-size: 14px;
+  border: 1px solid var(--claude-border);
+  padding: 10px 14px;
+  text-align: left;
+  vertical-align: middle;
+  font-size: 14px;
 }
 
 .text-output .text-content th {
-    font-weight: 600;
-    color: var(--claude-text);
+  font-weight: 600;
+  color: var(--claude-text);
 }
 
 .text-output .text-content hr {
-    margin: 32px 0;
-    border: none;
-    border-top: 1px solid var(--claude-border);
+  margin: 32px 0;
+  border: none;
+  border-top: 1px solid var(--claude-border);
 }
 
 .system-action {
-    margin: 12px 0;
-    padding: 10px 14px;
-    border-radius: 8px;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.08));
-    border-left: 4px solid rgba(79, 70, 229, 0.6);
-    color: var(--claude-text);
-    font-size: 14px;
-    line-height: 1.5;
+  margin: 12px 0;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.08));
+  border-left: 4px solid rgba(79, 70, 229, 0.6);
+  color: var(--claude-text);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .system-action-content {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .sub-agent-system-summary-line {
-    padding: 0 20px 0 15px;
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.7;
-    color: var(--claude-text-secondary);
+  padding: 0 20px 0 15px;
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--claude-text-secondary);
 }
 
 .append-block,
 .append-placeholder {
-    margin: 12px 0;
-    padding: 12px 16px;
-    border-radius: 10px;
-    background: var(--theme-surface-soft);
-    border-left: 4px solid var(--claude-accent);
-    box-shadow: inset 0 0 0 1px var(--claude-border);
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    color: var(--claude-text);
+  margin: 12px 0;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: var(--theme-surface-soft);
+  border-left: 4px solid var(--claude-accent);
+  box-shadow: inset 0 0 0 1px var(--claude-border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--claude-text);
 }
 
 .append-block.append-error,
 .append-placeholder.append-error {
-    background: rgba(255, 244, 242, 0.85);
-    border-left-color: rgba(216, 90, 66, 0.38);
+  background: rgba(255, 244, 242, 0.85);
+  border-left-color: rgba(216, 90, 66, 0.38);
 }
 
 .append-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
 }
 
 .code-block-wrapper {
-    border: 2px solid var(--claude-border);
-    border-radius: 12px;
-    overflow: hidden;
-    margin: 16px 0;
-    background: var(--theme-surface-soft);
-    min-height: 80px;
+  border: 1px solid var(--claude-border);
+  border-radius: 20px;
+  overflow: hidden;
+  margin: 16px 0;
+  background: var(--theme-surface-strong, #ffffff);
+  min-height: 80px;
+  box-shadow: none;
 }
 
 .code-block-header {
-    background: var(--theme-chip-bg);
-    padding: 10px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--claude-border);
+  min-height: 44px;
+  background: var(--theme-surface-strong, #ffffff);
+  padding: 0 12px 0 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--claude-border);
 }
 
 .code-language {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
-    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-    font-weight: 500;
+  color: var(--claude-text-secondary);
+  font-size: 14px;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  font-family: inherit;
+  font-weight: 500;
 }
 
 .copy-code-btn {
-    width: 32px;
-    height: 32px;
-    border: none;
-    padding: 0;
-    border-radius: 50%;
-    background-color: transparent;
-    background-image: url('/static/icons/copy.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 20px;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  width: 32px;
+  height: 32px;
+  border: none;
+  padding: 0;
+  border-radius: 10px;
+  background-color: transparent;
+  color: var(--claude-text-secondary);
+  cursor: pointer;
+  opacity: 0.9;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease;
+  position: relative;
+}
+
+.copy-code-btn::before {
+  content: '';
+  width: 18px;
+  height: 18px;
+  display: block;
+  margin: auto;
+  background: currentColor;
+  mask: url('/static/icons/copy.svg') center / contain no-repeat;
+  -webkit-mask: url('/static/icons/copy.svg') center / contain no-repeat;
 }
 
 .copy-code-btn:hover {
-    opacity: 0.7;
+  background-color: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+  color: var(--claude-text);
 }
 
-.copy-code-btn.copied {
-    background-image: url('/static/icons/check.svg');
+.copy-code-btn.copied::before {
+  mask-image: url('/static/icons/check.svg');
+  -webkit-mask-image: url('/static/icons/check.svg');
 }
 
 .code-block-wrapper pre {
-    background: #ffffff !important;
-    padding: 16px !important;
-    margin: 0 !important;
-    border-radius: 0 !important;
-    border: none !important;
-    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace !important;
-    font-variant-ligatures: none;
-    font-feature-settings: 'liga' 0, 'calt' 0;
-    line-height: 1.55;
-    overflow-x: auto;
-    max-width: 100%;
-    scrollbar-gutter: stable;
-    box-sizing: border-box;
+  background: var(--theme-surface-strong, #ffffff) !important;
+  padding: 24px 28px 28px !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  border: none !important;
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace !important;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
+  font-size: 15px;
+  line-height: 1.64;
+  overflow-x: auto;
+  max-width: 100%;
+  scrollbar-gutter: stable;
+  box-sizing: border-box;
 }
 
 .code-block-wrapper pre code {
-    background: transparent !important;
-    padding: 0 !important;
-    color: #000000;
-    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace !important;
-    font-variant-ligatures: none;
-    font-feature-settings: 'liga' 0, 'calt' 0;
-    line-height: 1.55;
-    text-shadow: none;
-    animation: none !important; /* 避免被其他动画样式污染导致行距抖动 */
+  background: transparent !important;
+  padding: 0 !important;
+  color: var(--claude-text);
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace !important;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
+  line-height: 1.64;
+  text-shadow: none;
+  animation: none !important; /* 避免被其他动画样式污染导致行距抖动 */
 }
 
 .streaming-text {
-    display: block;
+  display: block;
 }
 
 .cursor-blink {
-    animation: blink 1s steps(1) infinite;
-    color: var(--claude-accent);
+  animation: blink 1s steps(1) infinite;
+  color: var(--claude-accent);
 }
 
 @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
 }
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index e3c7f5d..ac01f31 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/static/src/styles/components/overlays/_overlays.scss
@@ -1,1298 +1,1325 @@
 .personal-page-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--theme-overlay-scrim);
-    backdrop-filter: blur(12px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 400;
-    padding: 20px;
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
-    will-change: opacity, backdrop-filter;
+  position: fixed;
+  inset: 0;
+  background: var(--theme-overlay-scrim);
+  backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 400;
+  padding: 20px;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
+  will-change: opacity, backdrop-filter;
 }
 
 .personal-page-card {
-    width: min(96vw, 1020px);
-    height: calc(100vh - 40px);
-    max-height: 760px;
-    background: var(--theme-surface-card);
-    border-radius: 24px;
-    border: 1px solid var(--theme-control-border);
-    box-shadow: var(--theme-shadow-strong);
-    padding: 40px;
-    text-align: left;
-    color: var(--claude-text);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  width: min(96vw, 1020px);
+  height: calc(100vh - 40px);
+  max-height: 760px;
+  background: var(--theme-surface-card);
+  border-radius: 24px;
+  border: 1px solid var(--theme-control-border);
+  box-shadow: var(--theme-shadow-strong);
+  padding: 40px;
+  text-align: left;
+  color: var(--claude-text);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .personal-page-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
 .personal-page-actions {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
 }
 
 .personal-page-header h2 {
-    font-size: 24px;
-    margin: 0;
+  font-size: 24px;
+  margin: 0;
 }
 
 .personal-page-header p {
-    margin: 6px 0 0;
-    color: var(--claude-text-secondary);
-    font-size: 14px;
+  margin: 6px 0 0;
+  color: var(--claude-text-secondary);
+  font-size: 14px;
 }
 
 .personal-page-close {
-    align-self: flex-start;
-    padding: 8px 18px;
-    border-radius: 999px;
-    border: none;
-    background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
-    color: #fffdf8;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    box-shadow: 0 14px 28px rgba(189, 93, 58, 0.2);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  align-self: flex-start;
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: none;
+  background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
+  color: #fffdf8;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 14px 28px rgba(189, 93, 58, 0.2);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .personal-page-close:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 18px 34px rgba(189, 93, 58, 0.3);
+  transform: translateY(-1px);
+  box-shadow: 0 18px 34px rgba(189, 93, 58, 0.3);
 }
 
 .personal-page-logout {
-    align-self: flex-start;
-    padding: 8px 16px;
-    border-radius: 999px;
-    border: 1px solid var(--theme-control-border-strong);
-    background: var(--theme-surface-soft);
-    color: var(--claude-text);
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.2s ease, box-shadow 0.2s ease;
+  align-self: flex-start;
+  padding: 8px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-control-border-strong);
+  background: var(--theme-surface-soft);
+  color: var(--claude-text);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .personal-page-logout:hover {
-    background: var(--theme-surface-strong);
-    box-shadow: var(--theme-shadow-soft);
+  background: var(--theme-surface-strong);
+  box-shadow: var(--theme-shadow-soft);
 }
 
 .personalization-body {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    flex: 1 1 auto;
-    min-height: 0;
-    height: 100%;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
 }
 
 .personal-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 16px 18px;
-    border-radius: 16px;
-    background: var(--theme-surface-muted);
-    border: 1px solid var(--theme-control-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  background: var(--theme-surface-muted);
+  border: 1px solid var(--theme-control-border);
 }
 
 .toggle-text {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .toggle-title {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .toggle-desc {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 .toggle-switch {
-    position: relative;
-    width: 46px;
-    height: 26px;
+  position: relative;
+  width: 46px;
+  height: 26px;
 }
 
 .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
 .switch-slider {
-    position: absolute;
-    inset: 0;
-    background-color: var(--theme-switch-track);
-    border-radius: 30px;
-    transition: background-color 0.2s ease;
+  position: absolute;
+  inset: 0;
+  background-color: var(--theme-switch-track);
+  border-radius: 30px;
+  transition: background-color 0.2s ease;
 }
 
 .switch-slider::before {
-    content: "";
-    position: absolute;
-    left: 4px;
-    top: 4px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #fff;
-    transition: transform 0.2s ease;
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.2s ease;
 }
 
 .toggle-switch input:checked + .switch-slider {
-    background: var(--claude-accent);
+  background: var(--claude-accent);
 }
 
 .toggle-switch input:checked + .switch-slider::before {
-    transform: translateX(20px);
+  transform: translateX(20px);
 }
 
 .personal-toggle-row {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 
 .toggle-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    border-radius: 14px;
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-muted);
-    cursor: pointer;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
-    position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-muted);
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+  position: relative;
 }
 
 .toggle-row:hover {
-    border-color: var(--theme-control-border);
-    box-shadow: none;
-    background: var(--theme-surface-muted);
+  border-color: var(--theme-control-border);
+  box-shadow: none;
+  background: var(--theme-surface-muted);
 }
 
 .toggle-row:focus-within {
-    border-color: var(--theme-control-border);
-    box-shadow: none;
+  border-color: var(--theme-control-border);
+  box-shadow: none;
 }
 
 .toggle-row input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .toggle-row .fancy-check {
-    width: 28px;
-    height: 28px;
-    border-radius: 6px;
-    background: transparent;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: none;
-    transition: opacity 0.2s ease;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  transition: opacity 0.2s ease;
 }
 
 .toggle-row .fancy-check svg {
-    width: 22px;
-    height: 22px;
-    overflow: visible;
+  width: 22px;
+  height: 22px;
+  overflow: visible;
 }
 
 .fancy-path {
-    fill: none;
-    stroke: var(--claude-text-secondary);
-    stroke-width: 5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease, stroke 0.2s ease;
-    stroke-dasharray: 241 9999999;
-    stroke-dashoffset: 0;
+  fill: none;
+  stroke: var(--claude-text-secondary);
+  stroke-width: 5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition:
+    stroke-dasharray 0.5s ease,
+    stroke-dashoffset 0.5s ease,
+    stroke 0.2s ease;
+  stroke-dasharray: 241 9999999;
+  stroke-dashoffset: 0;
 }
 
 .toggle-row input:checked + .fancy-check {
-    background: transparent;
-    box-shadow: none;
+  background: transparent;
+  box-shadow: none;
 }
 
 .toggle-row input:checked + .fancy-check .fancy-path {
-    stroke: var(--claude-accent);
-    stroke-dasharray: 70.5096664428711 9999999;
-    stroke-dashoffset: -262.2723388671875;
+  stroke: var(--claude-accent);
+  stroke-dasharray: 70.5096664428711 9999999;
+  stroke-dashoffset: -262.2723388671875;
 }
 
 .toggle-row span {
-    color: var(--claude-text);
-    font-weight: 500;
+  color: var(--claude-text);
+  font-weight: 500;
 }
 
 .personalization-layout {
-    display: grid;
-    grid-template-columns: 200px minmax(0, 1fr);
-    gap: 20px;
-    align-items: stretch;
-    min-height: 0;
-    flex: 1 1 auto;
-    height: 100%;
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 100%;
 }
 
 .personal-page-tabs {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 20px;
-    border-radius: 20px;
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-soft);
-    align-self: flex-start;
-    height: auto;
-    max-height: 72vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex-wrap: nowrap;
-    -ms-overflow-style: none; /* IE/Edge */
-    scrollbar-width: none; /* Firefox */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  border-radius: 20px;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-soft);
+  align-self: flex-start;
+  height: auto;
+  max-height: 72vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-wrap: nowrap;
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
 }
 .personal-page-tabs::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  width: 0;
+  height: 0;
 }
 
 .personal-tab-button {
-    border: none;
-    border-radius: 16px;
-    padding: 14px 18px;
-    text-align: left;
-    font-weight: 600;
-    background: transparent;
-    color: var(--claude-text-secondary);
-    cursor: pointer;
-    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  border: none;
+  border-radius: 16px;
+  padding: 14px 18px;
+  text-align: left;
+  font-weight: 600;
+  background: transparent;
+  color: var(--claude-text-secondary);
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .personal-tab-desc {
-    display: block;
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--claude-text-tertiary);
-    margin-top: 2px;
-    letter-spacing: 0.4px;
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--claude-text-tertiary);
+  margin-top: 2px;
+  letter-spacing: 0.4px;
 }
 
 .personal-tab-button.active {
-    background: var(--theme-tab-active);
-    color: var(--claude-accent);
-    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  background: var(--theme-tab-active);
+  color: var(--claude-accent);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
 .personal-tab-button:focus-visible {
-    outline: 2px solid rgba(189, 93, 58, 0.4);
-    outline-offset: 2px;
+  outline: 2px solid rgba(189, 93, 58, 0.4);
+  outline-offset: 2px;
 }
 
 .personalization-content-shell {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    flex: 1 1 auto;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 100%;
 }
 
 .personalization-content {
-    position: relative;
-    overflow-y: auto;
-    border-radius: 24px;
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-soft);
-    min-height: 0;
-    flex: 1 1 auto;
-    height: 100%;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  position: relative;
+  overflow-y: auto;
+  border-radius: 24px;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-soft);
+  min-height: 0;
+  flex: 1 1 auto;
+  height: 100%;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .personalization-content::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .personalization-content .personal-page {
-    width: 100%;
-    padding: 16px 26px 26px;
+  width: 100%;
+  padding: 16px 26px 26px;
 }
 
 @media (max-width: 1024px) {
-    .personalization-layout {
-        grid-template-columns: 1fr;
-    }
+  .personalization-layout {
+    grid-template-columns: 1fr;
+  }
 
-    .personal-page-tabs {
-        flex-direction: row;
-        padding: 14px;
-        height: auto;
-        flex-wrap: wrap;
-    }
+  .personal-page-tabs {
+    flex-direction: row;
+    padding: 14px;
+    height: auto;
+    flex-wrap: wrap;
+  }
 
-    .personal-tab-button {
-        flex: 1;
-        text-align: center;
-    }
+  .personal-tab-button {
+    flex: 1;
+    text-align: center;
+  }
 }
 
 /* 手机端完整适配 */
 @media (max-width: 768px) {
-    .personal-page-overlay {
-        padding: 0;
-        align-items: stretch;
-    }
-
-    .personal-page-card {
-        width: 100%;
-        height: 100%;
-        max-height: none;
-        border-radius: 0;
-        padding: 16px;
-        padding-top: 60px;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .personal-page-header {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 12px;
-        margin-bottom: 16px;
-    }
-
-    .personal-page-header h2 {
-        font-size: 20px;
-    }
-
-    .personal-page-header p {
-        font-size: 13px;
-    }
-
-    .personal-page-actions {
-        flex-direction: row;
-        width: 100%;
-        gap: 8px;
-    }
-
-    .personal-page-logout,
-    .personal-page-close {
-        flex: 1;
-        padding: 10px 16px;
-        font-size: 13px;
-        text-align: center;
-    }
-
-    .personalization-body {
-        flex: 1;
-        min-height: 0;
-        overflow: hidden;
-    }
-
-    .personal-form {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .personalization-layout {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        flex: 1;
-        min-height: 0;
-    }
-
-    .personal-page-tabs {
-        flex-direction: row;
-        padding: 8px;
-        height: auto;
-        max-height: none;
-        width: 100%;
-        max-width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-        flex-wrap: nowrap;
-        gap: 8px;
-        border-radius: 12px;
-        flex-shrink: 0;
-        -webkit-overflow-scrolling: touch;
-        scroll-behavior: smooth;
-        touch-action: pan-x;
-        overscroll-behavior-x: contain;
-    }
-
-    .personal-tab-button {
-        flex: 0 0 auto;
-        min-width: 100px;
-        padding: 10px 14px;
-        text-align: center;
-        white-space: nowrap;
-        font-size: 13px;
-        touch-action: pan-x;
-    }
-
-    .personal-tab-desc {
-        display: none;
-    }
-
-    .personalization-content-shell {
-        flex: 1;
-        min-height: 0;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .personalization-content {
-        flex: 1;
-        min-height: 0;
-        border-radius: 12px;
-        padding: 0;
-        /* 允许内部横向滚动 */
-        touch-action: pan-y pan-x;
-    }
-
-    .personalization-content .personal-page {
-        padding: 12px;
-        height: 100%;
-        overflow-y: auto;
-        /* 允许内部横向滚动 */
-        touch-action: pan-y pan-x;
-    }
-
-    .personalization-sections {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-    }
-
-    .personal-left-column,
-    .personal-right-column {
-        width: 100%;
-        max-width: none;
-    }
-
-    .personal-section {
-        padding: 14px;
-        border-radius: 12px;
-    }
-
-    .personal-field {
-        font-size: 13px;
-    }
-
-    .personal-field input {
-        padding: 10px 12px;
-        font-size: 14px;
-    }
-
-    .personal-toggle {
-        padding: 14px;
-        border-radius: 12px;
-    }
-
-    .toggle-title {
-        font-size: 14px;
-    }
-
-    .toggle-desc {
-        font-size: 12px;
-    }
-
-    .consideration-list {
-        max-height: 200px;
-    }
-
-    .consideration-item {
-        padding: 10px;
-        font-size: 13px;
-    }
-
-    .tone-preset-row {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-    }
-
-    .tone-preset-buttons {
-        width: 100%;
-    }
-
-    .tone-preset-buttons button {
-        font-size: 12px;
-        padding: 6px 12px;
-    }
-
-    .behavior-section {
-        padding: 0;
-        border-radius: 0;
-        overflow: visible;
-    }
-
-    .behavior-field {
-        gap: 12px;
-        overflow: visible;
-    }
-
-    .field-title {
-        font-size: 15px;
-    }
-
-    .field-desc,
-    .behavior-desc {
-        font-size: 13px;
-    }
-
-    .run-mode-options {
-        display: flex !important;
-        grid-template-columns: none;
-        flex-direction: row;
-        overflow-x: auto;
-        overflow-y: hidden;
-        gap: 10px;
-        padding-bottom: 8px;
-        scroll-snap-type: x mandatory;
-        -webkit-overflow-scrolling: touch;
-        /* 确保容器可以滚动 */
-        width: 100%;
-        max-width: 100%;
-        /* 关键：允许触摸滚动 */
-        touch-action: pan-x;
-        overscroll-behavior-x: contain;
-    }
-
-    .run-mode-options::-webkit-scrollbar {
-        height: 4px;
-    }
-
-    .run-mode-options::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .run-mode-options::-webkit-scrollbar-thumb {
-        background: rgba(121, 109, 94, 0.3);
-        border-radius: 4px;
-    }
-
-    .run-mode-card {
-        flex: 0 0 280px;
-        min-width: 280px;
-        max-width: 280px;
-        padding: 12px;
-        border-radius: 12px;
-        scroll-snap-align: start;
-        /* 防止卡片内的触摸事件干扰滚动 */
-        touch-action: pan-x;
-    }
-
-    .run-mode-title {
-        font-size: 14px;
-    }
-
-    .run-mode-desc {
-        font-size: 12px;
-    }
-
-    .run-mode-badge {
-        font-size: 11px;
-        padding: 2px 6px;
-    }
-
-    .thinking-presets {
-        display: flex;
-        flex-direction: row;
-        overflow-x: auto;
-        overflow-y: hidden;
-        gap: 8px;
-        padding-bottom: 8px;
-        scroll-snap-type: x mandatory;
-        -webkit-overflow-scrolling: touch;
-        width: 100%;
-        max-width: 100%;
-        touch-action: pan-x;
-        overscroll-behavior-x: contain;
-    }
-
-    .thinking-presets::-webkit-scrollbar {
-        height: 4px;
-    }
-
-    .thinking-presets::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .thinking-presets::-webkit-scrollbar-thumb {
-        background: rgba(121, 109, 94, 0.3);
-        border-radius: 4px;
-    }
-
-    .thinking-presets button {
-        flex: 0 0 auto;
-        min-width: 100px;
-        max-width: 150px;
-        padding: 10px;
-        scroll-snap-align: start;
-        touch-action: pan-x;
-    }
-
-    .thinking-input-row {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 10px;
-    }
-
-    .thinking-input-row label {
-        width: 100%;
-    }
-
-    .thinking-input-row input {
-        width: 100%;
-    }
-
-    .tool-category-grid {
-        gap: 8px;
-    }
-
-    .tool-category-chip {
-        padding: 8px 10px;
-        font-size: 12px;
-    }
-
-    .personal-form-actions {
-        flex-direction: column;
-        gap: 10px;
-        padding: 12px 0 0;
-    }
-
-    .personal-form-actions .primary {
-        width: 100%;
-        padding: 12px 20px;
-    }
-
-    .personal-status-group {
-        width: 100%;
-        justify-content: center;
-    }
-
-    .personal-actions-row {
-        margin-top: 12px;
-    }
-
-    .personal-actions-row .personal-form-actions {
-        max-width: none;
-        width: 100%;
-    }
-
-    .theme-grid {
-        display: flex;
-        flex-direction: row;
-        overflow-x: auto;
-        overflow-y: hidden;
-        gap: 12px;
-        padding-bottom: 8px;
-        scroll-snap-type: x mandatory;
-        -webkit-overflow-scrolling: touch;
-        width: 100%;
-        max-width: 100%;
-        touch-action: pan-x;
-        overscroll-behavior-x: contain;
-    }
-
-    .theme-grid::-webkit-scrollbar {
-        height: 4px;
-    }
-
-    .theme-grid::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .theme-grid::-webkit-scrollbar-thumb {
-        background: rgba(121, 109, 94, 0.3);
-        border-radius: 4px;
-    }
-
-    .theme-card {
-        flex: 0 0 260px;
-        min-width: 260px;
-        max-width: 260px;
-        padding: 14px;
-        scroll-snap-align: start;
-        touch-action: pan-x;
-    }
-
-    .experiment-hero {
-        grid-template-columns: 1fr;
-        gap: 16px;
-    }
-
-    .experiment-visual {
-        min-height: 160px;
-        border-radius: 20px;
-    }
-
-    .experiment-copy h3 {
-        font-size: 20px;
-    }
-
-    .experiment-toggle-card {
-        padding: 16px;
-        border-radius: 16px;
-    }
-
-    .experiment-toggle-info h4 {
-        font-size: 16px;
-    }
-
-    .experiment-note {
-        padding: 14px 16px;
-        border-radius: 14px;
-    }
-
-    .admin-monitor-panel {
-        padding: 16px;
-        border-radius: 16px;
-    }
-
-    .admin-monitor-title-row h3 {
-        font-size: 18px;
-    }
-
-    .admin-monitor-desc {
-        font-size: 13px;
-    }
-
-    .admin-monitor-actions {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .admin-monitor-button {
-        width: 100%;
-        justify-content: center;
-        padding: 12px 20px;
-    }
-
-    .section-note {
-        font-size: 11px;
-    }
-}
-
-.behavior-section {
+  .personal-page-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .personal-page-card {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+    padding: 16px;
+    padding-top: 60px;
     display: flex;
     flex-direction: column;
-    gap: 24px;
-    background: transparent;
-    border-radius: 0;
-    padding: 0;
-    border: none;
-}
+  }
 
-.behavior-field {
+  .personal-page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .personal-page-header h2 {
+    font-size: 20px;
+  }
+
+  .personal-page-header p {
+    font-size: 13px;
+  }
+
+  .personal-page-actions {
+    flex-direction: row;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .personal-page-logout,
+  .personal-page-close {
+    flex: 1;
+    padding: 10px 16px;
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .personalization-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .personal-form {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .personalization-layout {
     display: flex;
     flex-direction: column;
     gap: 12px;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .personal-page-tabs {
+    flex-direction: row;
+    padding: 8px;
+    height: auto;
+    max-height: none;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    gap: 8px;
+    border-radius: 12px;
+    flex-shrink: 0;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+  }
+
+  .personal-tab-button {
+    flex: 0 0 auto;
+    min-width: 100px;
+    padding: 10px 14px;
+    text-align: center;
+    white-space: nowrap;
+    font-size: 13px;
+    touch-action: pan-x;
+  }
+
+  .personal-tab-desc {
+    display: none;
+  }
+
+  .personalization-content-shell {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .personalization-content {
+    flex: 1;
+    min-height: 0;
+    border-radius: 12px;
+    padding: 0;
+    /* 允许内部横向滚动 */
+    touch-action: pan-y pan-x;
+  }
+
+  .personalization-content .personal-page {
+    padding: 12px;
+    height: 100%;
+    overflow-y: auto;
+    /* 允许内部横向滚动 */
+    touch-action: pan-y pan-x;
+  }
+
+  .personalization-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .personal-left-column,
+  .personal-right-column {
+    width: 100%;
+    max-width: none;
+  }
+
+  .personal-section {
+    padding: 14px;
+    border-radius: 12px;
+  }
+
+  .personal-field {
+    font-size: 13px;
+  }
+
+  .personal-field input {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+
+  .personal-toggle {
+    padding: 14px;
+    border-radius: 12px;
+  }
+
+  .toggle-title {
+    font-size: 14px;
+  }
+
+  .toggle-desc {
+    font-size: 12px;
+  }
+
+  .consideration-list {
+    max-height: 200px;
+  }
+
+  .consideration-item {
+    padding: 10px;
+    font-size: 13px;
+  }
+
+  .tone-preset-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .tone-preset-buttons {
+    width: 100%;
+  }
+
+  .tone-preset-buttons button {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  .behavior-section {
+    padding: 0;
+    border-radius: 0;
+    overflow: visible;
+  }
+
+  .behavior-field {
+    gap: 12px;
+    overflow: visible;
+  }
+
+  .field-title {
+    font-size: 15px;
+  }
+
+  .field-desc,
+  .behavior-desc {
+    font-size: 13px;
+  }
+
+  .run-mode-options {
+    display: flex !important;
+    grid-template-columns: none;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 10px;
+    padding-bottom: 8px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    /* 确保容器可以滚动 */
+    width: 100%;
+    max-width: 100%;
+    /* 关键：允许触摸滚动 */
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+  }
+
+  .run-mode-options::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .run-mode-options::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .run-mode-options::-webkit-scrollbar-thumb {
+    background: rgba(121, 109, 94, 0.3);
+    border-radius: 4px;
+  }
+
+  .run-mode-card {
+    flex: 0 0 280px;
+    min-width: 280px;
+    max-width: 280px;
+    padding: 12px;
+    border-radius: 12px;
+    scroll-snap-align: start;
+    /* 防止卡片内的触摸事件干扰滚动 */
+    touch-action: pan-x;
+  }
+
+  .run-mode-title {
+    font-size: 14px;
+  }
+
+  .run-mode-desc {
+    font-size: 12px;
+  }
+
+  .run-mode-badge {
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+
+  .thinking-presets {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 8px;
+    padding-bottom: 8px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    width: 100%;
+    max-width: 100%;
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+  }
+
+  .thinking-presets::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .thinking-presets::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .thinking-presets::-webkit-scrollbar-thumb {
+    background: rgba(121, 109, 94, 0.3);
+    border-radius: 4px;
+  }
+
+  .thinking-presets button {
+    flex: 0 0 auto;
+    min-width: 100px;
+    max-width: 150px;
+    padding: 10px;
+    scroll-snap-align: start;
+    touch-action: pan-x;
+  }
+
+  .thinking-input-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .thinking-input-row label {
+    width: 100%;
+  }
+
+  .thinking-input-row input {
+    width: 100%;
+  }
+
+  .tool-category-grid {
+    gap: 8px;
+  }
+
+  .tool-category-chip {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .personal-form-actions {
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px 0 0;
+  }
+
+  .personal-form-actions .primary {
+    width: 100%;
+    padding: 12px 20px;
+  }
+
+  .personal-status-group {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .personal-actions-row {
+    margin-top: 12px;
+  }
+
+  .personal-actions-row .personal-form-actions {
+    max-width: none;
+    width: 100%;
+  }
+
+  .theme-grid {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 12px;
+    padding-bottom: 8px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    width: 100%;
+    max-width: 100%;
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+  }
+
+  .theme-grid::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .theme-grid::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .theme-grid::-webkit-scrollbar-thumb {
+    background: rgba(121, 109, 94, 0.3);
+    border-radius: 4px;
+  }
+
+  .theme-card {
+    flex: 0 0 260px;
+    min-width: 260px;
+    max-width: 260px;
+    padding: 14px;
+    scroll-snap-align: start;
+    touch-action: pan-x;
+  }
+
+  .experiment-hero {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .experiment-visual {
+    min-height: 160px;
+    border-radius: 20px;
+  }
+
+  .experiment-copy h3 {
+    font-size: 20px;
+  }
+
+  .experiment-toggle-card {
+    padding: 16px;
+    border-radius: 16px;
+  }
+
+  .experiment-toggle-info h4 {
+    font-size: 16px;
+  }
+
+  .experiment-note {
+    padding: 14px 16px;
+    border-radius: 14px;
+  }
+
+  .admin-monitor-panel {
+    padding: 16px;
+    border-radius: 16px;
+  }
+
+  .admin-monitor-title-row h3 {
+    font-size: 18px;
+  }
+
+  .admin-monitor-desc {
+    font-size: 13px;
+  }
+
+  .admin-monitor-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .admin-monitor-button {
+    width: 100%;
+    justify-content: center;
+    padding: 12px 20px;
+  }
+
+  .section-note {
+    font-size: 11px;
+  }
+}
+
+.behavior-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background: transparent;
+  border-radius: 0;
+  padding: 0;
+  border: none;
+}
+
+.behavior-field {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .behavior-field-header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .behavior-field-header .field-title {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .behavior-field-header .field-desc {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 .experiment-page {
-    display: flex;
-    flex-direction: column;
-    gap: 28px;
-    background: var(--theme-surface-soft);
-    border-radius: 24px;
-    border: 1px solid var(--theme-control-border);
-    padding: 28px 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  background: var(--theme-surface-soft);
+  border-radius: 24px;
+  border: 1px solid var(--theme-control-border);
+  padding: 28px 30px;
 }
 
 .experiment-hero {
-    display: grid;
-    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
-    gap: 28px;
-    align-items: center;
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
+  gap: 28px;
+  align-items: center;
 }
 
 .experiment-visual {
-    position: relative;
-    border-radius: 32px;
-    min-height: 220px;
-    overflow: hidden;
-    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.65), rgba(104, 147, 255, 0.2))
-        rgba(28, 27, 41, 0.95);
-    box-shadow: 0 25px 60px rgba(24, 20, 37, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  position: relative;
+  border-radius: 32px;
+  min-height: 220px;
+  overflow: hidden;
+  background: radial-gradient(
+      circle at 20% 20%,
+      rgba(255, 255, 255, 0.65),
+      rgba(104, 147, 255, 0.2)
+    )
+    rgba(28, 27, 41, 0.95);
+  box-shadow:
+    0 25px 60px rgba(24, 20, 37, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
 }
 
 .experiment-visual::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
-    mix-blend-mode: screen;
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
+  mix-blend-mode: screen;
 }
 
 .experiment-visual-glow {
-    position: absolute;
-    width: 140%;
-    height: 140%;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%);
-    filter: blur(50px);
-    transform: translate(-15%, -20%);
-    opacity: 0.8;
-    animation: experimentDrift 8s ease-in-out infinite alternate;
+  position: absolute;
+  width: 140%;
+  height: 140%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%);
+  filter: blur(50px);
+  transform: translate(-15%, -20%);
+  opacity: 0.8;
+  animation: experimentDrift 8s ease-in-out infinite alternate;
 }
 
 .experiment-grid {
-    position: absolute;
-    inset: 0;
-    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
-    background-size: 32px 32px;
-    opacity: 0.4;
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+  opacity: 0.4;
 }
 
 .experiment-orb {
-    position: absolute;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    filter: blur(1px);
-    background: radial-gradient(circle, rgba(98, 178, 255, 0.8), rgba(255, 255, 255, 0));
-    animation: experimentDrift 10s ease-in-out infinite alternate;
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  filter: blur(1px);
+  background: radial-gradient(circle, rgba(98, 178, 255, 0.8), rgba(255, 255, 255, 0));
+  animation: experimentDrift 10s ease-in-out infinite alternate;
 }
 
 .experiment-orb.orb-one {
-    top: 20%;
-    left: 14%;
+  top: 20%;
+  left: 14%;
 }
 
 .experiment-orb.orb-two {
-    bottom: 10%;
-    right: 8%;
-    background: radial-gradient(circle, rgba(255, 166, 122, 0.85), rgba(255, 255, 255, 0));
+  bottom: 10%;
+  right: 8%;
+  background: radial-gradient(circle, rgba(255, 166, 122, 0.85), rgba(255, 255, 255, 0));
 }
 
 .experiment-copy h3 {
-    font-size: 24px;
-    margin-bottom: 12px;
+  font-size: 24px;
+  margin-bottom: 12px;
 }
 
 .experiment-copy p {
-    color: var(--claude-text-secondary);
-    line-height: 1.6;
+  color: var(--claude-text-secondary);
+  line-height: 1.6;
 }
 
 .experiment-subtitle {
-    text-transform: uppercase;
-    font-size: 12px;
-    letter-spacing: 0.4em;
-    color: var(--claude-accent);
-    margin-bottom: 6px;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.4em;
+  color: var(--claude-accent);
+  margin-bottom: 6px;
 }
 
 .experiment-toggle-card {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 22px;
-    border: 1px solid var(--theme-control-border);
-    padding: 20px 24px;
-    background: var(--theme-surface-muted);
-    box-shadow: var(--theme-shadow-mid);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 22px;
+  border: 1px solid var(--theme-control-border);
+  padding: 20px 24px;
+  background: var(--theme-surface-muted);
+  box-shadow: var(--theme-shadow-mid);
 }
 
 .experiment-toggle-info h4 {
-    margin: 0 0 6px;
-    font-size: 18px;
+  margin: 0 0 6px;
+  font-size: 18px;
 }
 
 .experiment-toggle-info p {
-    margin: 0;
-    color: var(--claude-text-secondary);
+  margin: 0;
+  color: var(--claude-text-secondary);
 }
 
 .experiment-toggle .toggle-text {
-    max-width: 320px;
+  max-width: 320px;
 }
 
 .experiment-note {
-    border-radius: 18px;
-    padding: 18px 22px;
-    background: var(--theme-surface-muted);
-    border: 1px dashed var(--theme-control-border-strong);
+  border-radius: 18px;
+  padding: 18px 22px;
+  background: var(--theme-surface-muted);
+  border: 1px dashed var(--theme-control-border-strong);
 }
 
 .experiment-note p {
-    margin-bottom: 10px;
-    font-weight: 600;
+  margin-bottom: 10px;
+  font-weight: 600;
 }
 
 .experiment-hint-list {
-    margin: 0;
-    padding-left: 20px;
-    line-height: 1.6;
-    color: var(--claude-text-secondary);
+  margin: 0;
+  padding-left: 20px;
+  line-height: 1.6;
+  color: var(--claude-text-secondary);
 }
 
 /* Liquid glass overlay */
 .liquid-glass-stage {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 1200;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1200;
 }
 
 .liquid-glass-panel {
-    position: absolute;
-    pointer-events: auto;
-    border-radius: 150px;
-    overflow: hidden;
-    box-shadow:
-        0 4px 8px rgba(0, 0, 0, 0.25),
-        0 -10px 25px inset rgba(0, 0, 0, 0.15),
-        0 -1px 4px 1px inset rgba(255, 255, 255, 0.74);
-    cursor: grab;
-    background: rgba(3, 6, 14, 0.22);
-    touch-action: none;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+  position: absolute;
+  pointer-events: auto;
+  border-radius: 150px;
+  overflow: hidden;
+  box-shadow:
+    0 4px 8px rgba(0, 0, 0, 0.25),
+    0 -10px 25px inset rgba(0, 0, 0, 0.15),
+    0 -1px 4px 1px inset rgba(255, 255, 255, 0.74);
+  cursor: grab;
+  background: rgba(3, 6, 14, 0.22);
+  touch-action: none;
+  border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .liquid-glass-panel:active {
-    cursor: grabbing;
+  cursor: grabbing;
 }
 
 .liquid-glass-panel::before {
-    content: "";
-    position: absolute;
-    inset: -15%;
-    background:
-        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%),
-        radial-gradient(circle at 80% 5%, rgba(128, 183, 255, 0.18), transparent 60%);
-    opacity: 0.6;
-    pointer-events: none;
-    z-index: 1;
+  content: '';
+  position: absolute;
+  inset: -15%;
+  background:
+    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%),
+    radial-gradient(circle at 80% 5%, rgba(128, 183, 255, 0.18), transparent 60%);
+  opacity: 0.6;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .liquid-glass-panel::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
-        repeating-linear-gradient(140deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px);
-    mix-blend-mode: screen;
-    opacity: 0.4;
-    pointer-events: none;
-    z-index: 1;
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
+    repeating-linear-gradient(140deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px);
+  mix-blend-mode: screen;
+  opacity: 0.4;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .liquid-glass-panel > * {
-    position: relative;
-    z-index: 2;
+  position: relative;
+  z-index: 2;
 }
 
 .liquid-glass-svg {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 .liquid-glass-specular {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    background:
-        radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.4), transparent 58%),
-        radial-gradient(circle at 70% 8%, rgba(255, 200, 150, 0.22), transparent 55%),
-        radial-gradient(circle at 45% 120%, rgba(140, 180, 255, 0.35), transparent 45%);
-    mix-blend-mode: screen;
-    opacity: 0.85;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.4), transparent 58%),
+    radial-gradient(circle at 70% 8%, rgba(255, 200, 150, 0.22), transparent 55%),
+    radial-gradient(circle at 45% 120%, rgba(140, 180, 255, 0.35), transparent 45%);
+  mix-blend-mode: screen;
+  opacity: 0.85;
 }
 
 .liquid-glass-empty {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.65);
-    text-align: center;
-    padding: 0 24px;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.65);
+  text-align: center;
+  padding: 0 24px;
 }
 
 .liquid-glass-toolbar {
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    display: flex;
-    gap: 10px;
-    pointer-events: auto;
-    z-index: 1210;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  gap: 10px;
+  pointer-events: auto;
+  z-index: 1210;
 }
 
 .liquid-glass-btn {
-    border: none;
-    border-radius: 999px;
-    padding: 9px 18px;
-    font-size: 13px;
-    color: white;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
-    backdrop-filter: blur(18px);
-    cursor: pointer;
-    transition: transform 0.15s ease, background 0.2s ease;
+  border: none;
+  border-radius: 999px;
+  padding: 9px 18px;
+  font-size: 13px;
+  color: white;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
+  backdrop-filter: blur(18px);
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    background 0.2s ease;
 }
 
 .liquid-glass-btn:hover:not(:disabled) {
-    transform: translateY(-1px);
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
+  transform: translateY(-1px);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
 }
 
 .liquid-glass-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .liquid-glass-btn.ghost {
-    background: rgba(15, 15, 25, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(15, 15, 25, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .liquid-glass-btn.ghost:hover {
-    background: rgba(15, 15, 25, 0.75);
+  background: rgba(15, 15, 25, 0.75);
 }
 
 @keyframes experimentDrift {
-    from {
-        transform: translate(-5%, -5%) scale(1);
-    }
-    to {
-        transform: translate(5%, 5%) scale(1.05);
-    }
+  from {
+    transform: translate(-5%, -5%) scale(1);
+  }
+  to {
+    transform: translate(5%, 5%) scale(1.05);
+  }
 }
 
 @media (max-width: 960px) {
-    .experiment-hero {
-        grid-template-columns: 1fr;
-    }
+  .experiment-hero {
+    grid-template-columns: 1fr;
+  }
 }
 
 .run-mode-options {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-    gap: 12px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
 }
 
 @media (max-width: 768px) {
-    .run-mode-options {
-        display: flex !important;
-        grid-template-columns: none;
-    }
+  .run-mode-options {
+    display: flex !important;
+    grid-template-columns: none;
+  }
 }
 
 .run-mode-card {
-    border: 1px solid var(--theme-control-border);
-    border-radius: 16px;
-    background: var(--theme-surface-soft);
-    padding: 16px;
-    text-align: left;
-    cursor: pointer;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
+  border: 1px solid var(--theme-control-border);
+  border-radius: 16px;
+  background: var(--theme-surface-soft);
+  padding: 16px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
 }
 
 .run-mode-card:hover {
-    border-color: var(--claude-accent);
-    transform: translateY(-1px);
+  border-color: var(--claude-accent);
+  transform: translateY(-1px);
 }
 
 .run-mode-card.active {
-    border-color: var(--claude-accent);
-    background: var(--theme-tab-active);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  border-color: var(--claude-accent);
+  background: var(--theme-tab-active);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
 .run-mode-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .run-mode-title {
-    font-weight: 600;
-    font-size: 15px;
-    color: var(--claude-text);
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--claude-text);
 }
 
 .run-mode-badge {
-    font-size: 12px;
-    color: var(--claude-accent);
-    font-weight: 600;
-    background: var(--theme-badge-bg);
-    border-radius: 999px;
-    padding: 2px 8px;
+  font-size: 12px;
+  color: var(--claude-accent);
+  font-weight: 600;
+  background: var(--theme-badge-bg);
+  border-radius: 999px;
+  padding: 2px 8px;
 }
 
 .run-mode-desc {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
-    line-height: 1.4;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
+  line-height: 1.4;
 }
 
 .thinking-presets {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
 .thinking-presets button {
-    flex: 1;
-    min-width: 100px;
-    border: 1px solid var(--theme-control-border);
-    border-radius: 12px;
-    padding: 10px 12px;
-    background: var(--theme-surface-strong);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    font-weight: 600;
-    color: var(--claude-text-secondary);
+  flex: 1;
+  min-width: 100px;
+  border: 1px solid var(--theme-control-border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: var(--theme-surface-strong);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  color: var(--claude-text-secondary);
 }
 
 .thinking-presets button.active {
-    border-color: var(--claude-accent);
-    color: var(--claude-accent);
-    background: var(--theme-tab-active);
+  border-color: var(--claude-accent);
+  color: var(--claude-accent);
+  background: var(--theme-tab-active);
 }
 
 .thinking-presets button small {
-    font-size: 12px;
-    font-weight: 500;
+  font-size: 12px;
+  font-weight: 500;
 }
 
 .thinking-input-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
 }
 
 .thinking-input-row label {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-weight: 600;
 }
 
 .thinking-input-row input {
-    width: 120px;
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: 1px solid var(--theme-control-border-strong);
+  width: 120px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-control-border-strong);
 }
 
 .thinking-hint {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 .behavior-hint {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 .strict-skill-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(220px, 1fr));
-    gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
+  gap: 10px;
 }
 
 @media (max-width: 900px) {
-    .strict-skill-grid {
-        grid-template-columns: 1fr;
-    }
+  .strict-skill-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .link-button {
-    border: none;
-    background: none;
-    color: var(--claude-accent);
-    font-weight: 600;
-    cursor: pointer;
+  border: none;
+  background: none;
+  color: var(--claude-accent);
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .tool-category-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .tool-category-chip {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border-radius: 12px;
-    background: var(--theme-chip-bg);
-    border: 1px solid var(--theme-chip-border);
-    font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: var(--theme-chip-bg);
+  border: 1px solid var(--theme-chip-border);
+  font-size: 13px;
 }
 
 .tool-category-chip input {
-    accent-color: var(--claude-accent);
+  accent-color: var(--claude-accent);
 }
 
 .global-actions {
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
 }
 
 /* ========================================= */
@@ -1300,121 +1327,124 @@
 /* ========================================= */
 
 .theme-page {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-    padding: 0;
-    box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  background: transparent;
+  border-radius: 0;
+  border: none;
+  padding: 0;
+  box-shadow: none;
 }
 
 .theme-section {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .theme-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .theme-header h3 {
-    margin: 0 0 6px;
+  margin: 0 0 6px;
 }
 
 .theme-header p {
-    margin: 0;
-    color: var(--claude-text-secondary);
+  margin: 0;
+  color: var(--claude-text-secondary);
 }
 
 .theme-badge {
-    padding: 6px 12px;
-    border-radius: 12px;
-    background: var(--theme-badge-bg);
-    color: var(--claude-accent);
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+  padding: 6px 12px;
+  border-radius: 12px;
+  background: var(--theme-badge-bg);
+  color: var(--claude-accent);
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .theme-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 14px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
 }
 
 .theme-card {
-    border: 1px solid var(--theme-control-border);
-    border-radius: 16px;
-    padding: 14px 16px;
-    background: var(--theme-surface-strong);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    text-align: left;
-    cursor: pointer;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  border: 1px solid var(--theme-control-border);
+  border-radius: 16px;
+  padding: 14px 16px;
+  background: var(--theme-surface-strong);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .theme-card:hover {
-    border-color: var(--claude-accent);
-    box-shadow: var(--theme-shadow-soft);
-    transform: translateY(-1px);
+  border-color: var(--claude-accent);
+  box-shadow: var(--theme-shadow-soft);
+  transform: translateY(-1px);
 }
 
 .theme-card.active {
-    border-color: var(--claude-accent);
-    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
-    background: var(--theme-tab-active);
+  border-color: var(--claude-accent);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+  background: var(--theme-tab-active);
 }
 
 .theme-card-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .theme-dot-row {
-    display: inline-flex;
-    gap: 6px;
-    align-items: center;
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
 }
 
 .theme-dot {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 
 .theme-check {
-    font-weight: 700;
-    color: var(--claude-accent);
-    font-size: 16px;
+  font-weight: 700;
+  color: var(--claude-accent);
+  font-size: 16px;
 }
 
 .theme-card-body h4 {
-    margin: 0 0 4px;
-    font-size: 16px;
+  margin: 0 0 4px;
+  font-size: 16px;
 }
 
 .theme-card-body p {
-    margin: 0;
-    color: var(--claude-text-secondary);
-    line-height: 1.5;
+  margin: 0;
+  color: var(--claude-text-secondary);
+  line-height: 1.5;
 }
 
 .theme-note {
-    margin: 0;
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  margin: 0;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 /* ========================================= */
@@ -1422,290 +1452,302 @@
 /* ========================================= */
 
 .mobile-panel-trigger {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1500;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-    pointer-events: none;
-    opacity: 1;
-    transition: opacity 0.2s ease;
-    padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1500;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+  padding: 0;
 }
 
 .mobile-panel-trigger.is-hidden {
-    opacity: 0;
+  opacity: 0;
 }
 
 .mobile-panel-topbar {
-    background: var(--chat-surface-color, #ffffff);
-    padding: 6px 12px;
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    box-shadow: none;
-    pointer-events: auto;
-    position: relative;
-    height: 44px;
+  background: var(--chat-surface-color, #ffffff);
+  padding: 6px 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  box-shadow: none;
+  pointer-events: auto;
+  position: relative;
+  height: 44px;
 }
 
 .mobile-panel-topbar::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -8px;
-    height: 16px;
-    background: var(--chat-surface-color, #ffffff);
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0) 100%);
-    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(14px);
-    pointer-events: none;
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -8px;
+  height: 16px;
+  background: var(--chat-surface-color, #ffffff);
+  mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.6) 55%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.6) 55%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  pointer-events: none;
 }
 
 @media (max-width: 768px) {
-    .mobile-panel-topbar {
-        height: 36px;
-        padding: 3px 10px;
-        gap: 6px;
-    }
+  .mobile-panel-topbar {
+    height: 36px;
+    padding: 3px 10px;
+    gap: 6px;
+  }
 
-    .mobile-panel-topbar::after {
-        bottom: -8px;
-        height: 16px;
-    }
+  .mobile-panel-topbar::after {
+    bottom: -8px;
+    height: 16px;
+  }
 }
 
 .mobile-panel-fab {
-    width: 32px;
-    height: 32px;
-    border: none;
-    padding: 0;
-    border-radius: 8px;
-    background: transparent;
-    color: var(--claude-text);
-    cursor: pointer;
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: none;
-    flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border: none;
+  padding: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--claude-text);
+  cursor: pointer;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  flex-shrink: 0;
 }
 
 .mobile-panel-fab img {
-    width: 22px;
-    height: 22px;
+  width: 22px;
+  height: 22px;
 }
 
 @media (max-width: 768px) {
-    .mobile-panel-fab {
-        width: 30px;
-        height: 30px;
-    }
+  .mobile-panel-fab {
+    width: 30px;
+    height: 30px;
+  }
 
-    .mobile-panel-fab img {
-        width: 22px;
-        height: 22px;
-    }
+  .mobile-panel-fab img {
+    width: 22px;
+    height: 22px;
+  }
 }
 
 .mobile-panel-menu {
-    pointer-events: auto;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 999px;
-    background: var(--theme-mobile-menu);
-    backdrop-filter: blur(10px);
-    box-shadow: var(--theme-mobile-menu-shadow);
-    align-self: flex-start;
+  pointer-events: auto;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 999px;
+  background: var(--theme-mobile-menu);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--theme-mobile-menu-shadow);
+  align-self: flex-start;
 }
 
 /* 新的下拉菜单样式 */
 .mobile-panel-menu--dropdown {
-    position: fixed;
-    top: 52px;
-    left: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 12px;
-    border-radius: 14px;
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
-    backdrop-filter: blur(8px);
-    min-width: 200px;
-    z-index: 1600;
+  position: fixed;
+  top: 52px;
+  left: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(8px);
+  min-width: 200px;
+  z-index: 1600;
 }
 
 .mobile-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    border-radius: 12px;
-    background: transparent;
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: all 0.18s ease;
-    color: #0f172a;
-    text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  color: #0f172a;
+  text-align: left;
 }
 
 .mobile-menu-item:hover {
-    background: #f6f7fb;
+  background: #f6f7fb;
 }
 
 .mobile-menu-item .item-label {
-    font-size: 14px;
-    font-weight: 500;
-    flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  flex: 1;
 }
 
 /* 统一所有图标容器宽度为 30px，确保文字左对齐 */
 .mobile-menu-icon {
-    width: 24px !important;
-    height: 24px !important;
-    min-width: 30px;
-    max-width: 30px;
-    flex-shrink: 0;
-    display: block;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 30px;
+  max-width: 30px;
+  flex-shrink: 0;
+  display: block;
 }
 
 /* 对话记录图标特殊尺寸，但容器宽度保持 30px */
 .mobile-menu-item:nth-child(1) svg.mobile-menu-icon {
-    width: 30px !important;
-    height: 30px !important;
-    margin-top: 2px;
+  width: 30px !important;
+  height: 30px !important;
+  margin-top: 2px;
 }
 
 /* 个人空间图标稍大一点 */
 .mobile-menu-item--personal img.mobile-menu-icon {
-    width: 26px !important;
-    height: 26px !important;
+  width: 26px !important;
+  height: 26px !important;
 }
 
 .mobile-topbar-title {
-    flex: 1;
-    font-size: 14px;
-    font-weight: 700;
-    color: #0f172a;
-    font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
-    text-align: right;
-    margin-left: auto;
-    padding-top: 4px;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+  text-align: right;
+  margin-left: auto;
+  padding-top: 4px;
 }
 
 @media (max-width: 768px) {
-    .mobile-topbar-title {
-        padding-top: 3px;
-    }
+  .mobile-topbar-title {
+    padding-top: 3px;
+  }
 }
 
 .mobile-topbar-selector {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 0 0 0;
-    border-radius: 0;
-    border: none;
-    background: transparent;
-    box-shadow: none;
-    color: #0f172a;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1.35;
-    font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    cursor: pointer;
-    transition: color 0.15s ease;
-    flex-shrink: 0;
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0 0 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: #0f172a;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.35;
+  font-family: 'Iowan Old Style', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  cursor: pointer;
+  transition: color 0.15s ease;
+  flex-shrink: 0;
 }
 
 @media (max-width: 768px) {
-    .mobile-topbar-selector {
-        padding: 3px 0 0 0;
-    }
+  .mobile-topbar-selector {
+    padding: 3px 0 0 0;
+  }
 }
 
 .mobile-topbar-selector:hover {
-    color: #111827;
+  color: #111827;
 }
 
 .mobile-topbar-selector:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .mobile-topbar-selector.open {
-    color: #111827;
+  color: #111827;
 }
 
 .mobile-selector-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .mobile-selector-model {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 .mobile-selector-sep {
-    opacity: 0.6;
+  opacity: 0.6;
 }
 
 .mobile-selector-mode {
-    font-weight: 500;
-    color: rgba(15, 23, 42, 0.8);
+  font-weight: 500;
+  color: rgba(15, 23, 42, 0.8);
 }
 
 .mobile-menu-btn {
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    border: none;
-    background: transparent;
-    color: var(--claude-text);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--claude-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .mobile-menu-btn img,
 .mobile-menu-svg {
-    width: 26px;
-    height: 26px;
-    display: block;
+  width: 26px;
+  height: 26px;
+  display: block;
 }
 
 .mobile-menu-btn--conversation .mobile-menu-svg {
-    width: 30px;
-    height: 30px;
-    transition: color 0.2s ease;
+  width: 30px;
+  height: 30px;
+  transition: color 0.2s ease;
 }
 
 .mobile-panel-menu-enter-active,
 .mobile-panel-menu-leave-active {
-    transition: opacity 0.2s ease, transform 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
 .mobile-panel-menu-enter-from,
 .mobile-panel-menu-leave-to {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
 }
 
 /* ========================================= */
@@ -1713,2185 +1755,2053 @@
 /* ========================================= */
 
 .mobile-panel-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--theme-overlay-scrim);
-    backdrop-filter: blur(6px);
-    z-index: 2000;
-    display: flex;
-    align-items: stretch;
-    padding: 0;
+  position: fixed;
+  inset: 0;
+  background: var(--theme-overlay-scrim);
+  backdrop-filter: blur(6px);
+  z-index: 2000;
+  display: flex;
+  align-items: stretch;
+  padding: 0;
 }
 
 .mobile-panel-overlay--left {
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .mobile-panel-overlay--right {
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .mobile-panel-sheet {
-    width: 100%;
-    height: 100%;
-    background: var(--claude-left-rail);
-    border-radius: 0;
-    box-shadow: none;
-    padding: 0;
-    padding-top: 44px;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: var(--claude-left-rail);
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  padding-top: 44px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .mobile-panel-sheet--conversation,
 .mobile-panel-sheet--workspace {
-    background: var(--claude-left-rail);
+  background: var(--claude-left-rail);
 }
 
 .mobile-panel-sheet--conversation {
-    background: var(--claude-left-rail);
-    width: min(420px, 65vw);
-    max-width: 65vw;
+  background: var(--claude-left-rail);
+  width: min(420px, 65vw);
+  max-width: 65vw;
 }
 
 .mobile-panel-sheet--workspace {
-    width: fit-content;
-    min-width: min(420px, 60vw);
-    max-width: 100vw;
+  width: fit-content;
+  min-width: min(420px, 60vw);
+  max-width: 100vw;
 }
 
 .mobile-panel-sheet--approval {
-    background: var(--claude-panel);
-    width: min(460px, 92vw);
-    max-width: 92vw;
-    padding-top: 0;
+  background: var(--claude-panel);
+  width: min(460px, 92vw);
+  max-width: 92vw;
+  padding-top: 0;
 }
 
 .mobile-panel-sheet--focus {
-    background: var(--claude-panel);
+  background: var(--claude-panel);
 }
 
 .mobile-overlay-close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 32px;
-    height: 32px;
-    border-radius: 16px;
-    border: none;
-    background: rgba(0, 0, 0, 0.08);
-    color: var(--claude-text);
-    font-size: 18px;
-    cursor: pointer;
-    z-index: 5;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  border: none;
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--claude-text);
+  font-size: 18px;
+  cursor: pointer;
+  z-index: 5;
 }
 
 .mobile-overlay-content {
-    margin-top: 0;
-    flex: 1;
-    width: 100%;
-    height: calc(100% - 44px);
-    overflow: hidden;
+  margin-top: 0;
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 44px);
+  overflow: hidden;
 }
 
 .mobile-panel-sheet .conversation-sidebar,
 .mobile-panel-sheet .sidebar,
 .mobile-panel-sheet .right-sidebar {
-    width: 100% !important;
-    max-width: 100%;
-    min-width: 0;
-    height: 100%;
-    border: none;
-    border-radius: 0;
+  width: 100% !important;
+  max-width: 100%;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  border-radius: 0;
 }
 
 .mobile-panel-sheet .conversation-sidebar {
-    height: 100%;
+  height: 100%;
 }
 
 @media (max-width: 768px) {
-    .mobile-panel-sheet .left-sidebar,
-    .mobile-panel-sheet .right-sidebar {
-        display: flex !important;
-        flex-direction: column;
-    }
-    
-    .mobile-panel-sheet .conversation-sidebar {
-        position: relative;
-        transform: none !important;
-        box-shadow: none;
-    }
-    
-    .mobile-panel-sheet .conversation-sidebar.collapsed {
-        transform: none !important;
-    }
-    
-    .mobile-panel-sheet .sidebar-header {
-        position: static;
-        border: none;
-        padding: 12px 16px 0;
-    }
-    
-    .mobile-panel-sheet .focused-files,
-    .mobile-panel-sheet .approval-panel-body {
-        padding-top: 8px;
-    }
+  .mobile-panel-sheet .left-sidebar,
+  .mobile-panel-sheet .right-sidebar {
+    display: flex !important;
+    flex-direction: column;
+  }
+
+  .mobile-panel-sheet .conversation-sidebar {
+    position: relative;
+    transform: none !important;
+    box-shadow: none;
+  }
+
+  .mobile-panel-sheet .conversation-sidebar.collapsed {
+    transform: none !important;
+  }
+
+  .mobile-panel-sheet .sidebar-header {
+    position: static;
+    border: none;
+    padding: 12px 16px 0;
+  }
+
+  .mobile-panel-sheet .focused-files,
+  .mobile-panel-sheet .approval-panel-body {
+    padding-top: 8px;
+  }
 }
 
 .mobile-panel-overlay-enter-active,
 .mobile-panel-overlay-leave-active {
-    transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
 }
 
 .mobile-panel-overlay-enter-from,
 .mobile-panel-overlay-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .mobile-panel-overlay .mobile-panel-sheet {
-    transform: translateX(0);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* 桌面端审批：覆盖弹窗，不挤压主布局 */
 .desktop-approval-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 2100;
-    background: var(--theme-overlay-scrim);
-    backdrop-filter: blur(6px);
-    display: flex;
-    justify-content: flex-end;
-    align-items: stretch;
+  position: fixed;
+  inset: 0;
+  z-index: 2100;
+  background: var(--theme-overlay-scrim);
+  backdrop-filter: blur(6px);
+  display: flex;
+  justify-content: flex-end;
+  align-items: stretch;
 }
 
 .desktop-approval-sheet {
-    height: 100%;
-    max-width: 92vw;
-    background: var(--claude-panel);
-    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.22);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  max-width: 92vw;
+  background: var(--claude-panel);
+  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.22);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .desktop-approval-sheet .sidebar.right-sidebar {
-    width: 100% !important;
-    min-width: 0;
-    height: 100%;
-    transition: none !important;
-    transform: none !important;
+  width: 100% !important;
+  min-width: 0;
+  height: 100%;
+  transition: none !important;
+  transform: none !important;
 }
 
 .desktop-approval-fade-enter-active,
 .desktop-approval-fade-leave-active {
-    transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .desktop-approval-fade-enter-from,
 .desktop-approval-fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .desktop-approval-fade-enter-active .desktop-approval-sheet,
 .desktop-approval-fade-leave-active .desktop-approval-sheet {
-    transition: transform 0.22s ease, opacity 0.22s ease;
+  transition:
+    transform 0.22s ease,
+    opacity 0.22s ease;
 }
 
 .desktop-approval-fade-enter-from .desktop-approval-sheet,
 .desktop-approval-fade-leave-to .desktop-approval-sheet {
-    transform: translateX(14px);
-    opacity: 0.96;
+  transform: translateX(14px);
+  opacity: 0.96;
 }
 
 .mobile-panel-overlay--left.mobile-panel-overlay-enter-from .mobile-panel-sheet,
 .mobile-panel-overlay--left.mobile-panel-overlay-leave-to .mobile-panel-sheet {
-    transform: translateX(-28px);
+  transform: translateX(-28px);
 }
 
 .mobile-panel-overlay--right.mobile-panel-overlay-enter-from .mobile-panel-sheet,
 .mobile-panel-overlay--right.mobile-panel-overlay-leave-to .mobile-panel-sheet {
-    transform: translateX(28px);
+  transform: translateX(28px);
 }
 .confirm-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--theme-overlay-scrim);
-    backdrop-filter: blur(12px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    z-index: 2200;
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
-    will-change: opacity, backdrop-filter;
+  position: fixed;
+  inset: 0;
+  background: var(--theme-overlay-scrim);
+  backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 2200;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
+  will-change: opacity, backdrop-filter;
 }
 
 .confirm-modal {
-    width: min(360px, 100%);
-    background: var(--theme-surface-card);
-    border: 1px solid var(--theme-control-border-strong);
-    border-radius: 18px;
-    padding: 24px;
-    box-shadow: var(--theme-shadow-soft);
-    transition: transform 0.25s ease, opacity 0.25s ease;
+  width: min(360px, 100%);
+  background: var(--theme-surface-card);
+  border: 1px solid var(--theme-control-border-strong);
+  border-radius: 18px;
+  padding: 24px;
+  box-shadow: var(--theme-shadow-soft);
+  transition:
+    transform 0.25s ease,
+    opacity 0.25s ease;
 }
 
 .confirm-title {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
 }
 
 .confirm-message {
-    font-size: 14px;
-    color: var(--claude-text-secondary);
+  font-size: 14px;
+  color: var(--claude-text-secondary);
 }
 
 .confirm-warning {
-    margin-top: 10px;
-    font-size: 13px;
-    font-weight: 600;
-    color: #ef4444;
-    line-height: 1.5;
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #ef4444;
+  line-height: 1.5;
 }
 
 .confirm-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
 }
 
 .confirm-actions--confirm-left .confirm-button--confirm {
-    order: 1;
+  order: 1;
 }
 
 .confirm-actions--confirm-left .confirm-button--cancel {
-    order: 2;
+  order: 2;
 }
 
 .confirm-button {
-    border: 1px solid var(--theme-control-border-strong);
-    background: transparent;
-    color: var(--claude-text);
-    border-radius: 10px;
-    padding: 8px 20px;
-    font-weight: 500;
-    cursor: pointer;
+  border: 1px solid var(--theme-control-border-strong);
+  background: transparent;
+  color: var(--claude-text);
+  border-radius: 10px;
+  padding: 8px 20px;
+  font-weight: 500;
+  cursor: pointer;
 }
 
 .confirm-button--primary {
-    background: var(--claude-accent);
-    border-color: var(--claude-accent-strong);
-    color: #fff;
+  background: var(--claude-accent);
+  border-color: var(--claude-accent-strong);
+  color: #fff;
 }
 
 .confirm-button--danger {
-    background: #dc2626;
-    border-color: #b91c1c;
-    color: #fff;
+  background: #dc2626;
+  border-color: #b91c1c;
+  color: #fff;
 }
 
 .subagent-activity-overlay {
-    position: fixed;
-    inset: 0;
-    background: var(--theme-overlay-scrim);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    z-index: 2200;
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
+  position: fixed;
+  inset: 0;
+  background: var(--theme-overlay-scrim);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 2200;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
 }
 
 .subagent-activity-modal {
-    width: 720px;
-    height: 70vh;
-    background: var(--theme-surface-card);
-    border: 1px solid var(--theme-control-border-strong);
-    border-radius: 18px;
-    padding: 20px 22px;
-    box-shadow: var(--theme-shadow-soft);
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+  width: 720px;
+  height: 70vh;
+  background: var(--theme-surface-card);
+  border: 1px solid var(--theme-control-border-strong);
+  border-radius: 18px;
+  padding: 20px 22px;
+  box-shadow: var(--theme-shadow-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .subagent-activity-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .subagent-activity-title {
-    font-size: 16px;
-    font-weight: 600;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .subagent-activity-close {
-    border: none;
-    background: transparent;
-    color: var(--claude-text);
-    font-size: 20px;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: var(--claude-text);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
 }
 
 .subagent-activity-close:hover {
-    background: var(--theme-control-bg);
+  background: var(--theme-control-bg);
 }
 
 .subagent-activity-meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: 13px;
-    color: var(--claude-text-secondary);
-    flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--claude-text-secondary);
+  flex-wrap: wrap;
 }
 
 .subagent-activity-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .subagent-stop-btn {
-    border: 1px solid rgba(239, 68, 68, 0.4);
-    background: rgba(239, 68, 68, 0.12);
-    color: #ef4444;
-    border-radius: 10px;
-    font-size: 12px;
-    padding: 4px 10px;
-    cursor: pointer;
-    transition: background 0.2s ease, border-color 0.2s ease;
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  background: rgba(239, 68, 68, 0.12);
+  color: #ef4444;
+  border-radius: 10px;
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
 }
 
 .subagent-stop-btn:hover:not(:disabled) {
-    background: rgba(239, 68, 68, 0.18);
-    border-color: rgba(239, 68, 68, 0.55);
+  background: rgba(239, 68, 68, 0.18);
+  border-color: rgba(239, 68, 68, 0.55);
 }
 
 .subagent-stop-btn:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
 .subagent-activity-status {
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: rgba(59, 130, 246, 0.15);
-    color: #3b82f6;
-    text-transform: uppercase;
-    font-size: 11px;
-    letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.15);
+  color: #3b82f6;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.04em;
 }
 
 .subagent-activity-status.completed {
-    background: rgba(16, 185, 129, 0.15);
-    color: #10b981;
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
 }
 
 .subagent-activity-status.failed,
 .subagent-activity-status.timeout,
 .subagent-activity-status.terminated,
 .subagent-activity-status.cancelled {
-    background: rgba(239, 68, 68, 0.15);
-    color: #ef4444;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
 }
 
 .subagent-activity-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
 }
 
 .subagent-activity-empty,
 .subagent-activity-error {
-    color: var(--claude-text-secondary);
-    font-size: 13px;
+  color: var(--claude-text-secondary);
+  font-size: 13px;
 }
 
 .subagent-activity-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .subagent-activity-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 6px 0;
-    font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  font-size: 13px;
 }
 
 .subagent-activity-text {
-    color: var(--claude-text);
-    line-height: 1.4;
-    word-break: break-all;
+  color: var(--claude-text);
+  line-height: 1.4;
+  word-break: break-all;
 }
 
 .subagent-activity-state {
-    flex-shrink: 0;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 999px;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    background: rgba(59, 130, 246, 0.12);
-    color: #3b82f6;
+  flex-shrink: 0;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  background: rgba(59, 130, 246, 0.12);
+  color: #3b82f6;
 }
 
 .subagent-activity-state.completed {
-    background: rgba(16, 185, 129, 0.15);
-    color: #10b981;
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
 }
 
 .subagent-activity-state.failed {
-    background: rgba(239, 68, 68, 0.15);
-    color: #ef4444;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
 }
 
 .bg-command-modal {
-    width: min(980px, 92vw);
+  width: min(980px, 92vw);
 }
 
 .bg-command-output {
-    margin: 0;
-    width: 100%;
-    min-height: 100%;
-    border: 1px solid var(--theme-control-border);
-    border-radius: 12px;
-    background: var(--theme-surface-soft);
-    color: var(--claude-text);
-    padding: 14px;
-    font-size: 12px;
-    line-height: 1.5;
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow: auto;
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  border: 1px solid var(--theme-control-border);
+  border-radius: 12px;
+  background: var(--theme-surface-soft);
+  color: var(--claude-text);
+  padding: 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
 }
 
-
 .confirm-dialog-fade-enter-active,
 .confirm-dialog-fade-leave-active {
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
 }
 
 .confirm-dialog-fade-enter-from,
 .confirm-dialog-fade-leave-to {
-    opacity: 0;
-    backdrop-filter: blur(0px);
+  opacity: 0;
+  backdrop-filter: blur(0px);
 }
 
 .confirm-dialog-fade-enter-active .confirm-modal,
 .confirm-dialog-fade-leave-active .confirm-modal {
-    transition: transform 0.25s ease, opacity 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    opacity 0.25s ease;
 }
 
 .confirm-dialog-fade-enter-from .confirm-modal,
 .confirm-dialog-fade-leave-to .confirm-modal {
-    transform: translateY(18px) scale(0.97);
-    opacity: 0;
+  transform: translateY(18px) scale(0.97);
+  opacity: 0;
 }
 
 .personal-form {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-    flex: 1;
-    min-height: 0;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
 }
 
 .personalization-sections {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
-    gap: 18px;
-    align-items: stretch;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+  gap: 18px;
+  align-items: stretch;
 }
 
 .personal-left-column {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .personal-left-column .personal-section {
-    height: 100%;
+  height: 100%;
 }
 
 .personal-section {
-    flex: 1 1 0;
-    min-width: 240px;
-    background: var(--theme-surface-soft);
-    border: 1px solid var(--theme-control-border);
-    border-radius: 18px;
-    padding: 16px 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  flex: 1 1 0;
+  min-width: 240px;
+  background: var(--theme-surface-soft);
+  border: 1px solid var(--theme-control-border);
+  border-radius: 18px;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .personal-right-column {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    min-width: 0;
-    align-self: stretch;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  align-self: stretch;
+  height: 100%;
 }
 
 .personal-right-column > .personal-form-actions {
-    margin-top: auto;
+  margin-top: auto;
 }
 
 .personal-section.personal-considerations .personal-field {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .personal-section.personal-considerations .consideration-list {
-    max-height: 260px;
-    min-height: 220px;
-    flex: 1;
-    overflow-y: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+  max-height: 260px;
+  min-height: 220px;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .personal-section.personal-considerations .consideration-list::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .personal-section.personal-considerations .consideration-item {
-    background: var(--theme-surface-strong);
+  background: var(--theme-surface-strong);
 }
 
 @media (max-width: 1024px) {
-    .personalization-sections {
-        display: flex;
-        flex-direction: column;
-        gap: 18px;
-    }
+  .personalization-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
 
-    .personal-right-column,
-    .personal-left-column {
-        width: 100%;
-        max-width: none;
-    }
+  .personal-right-column,
+  .personal-left-column {
+    width: 100%;
+    max-width: none;
+  }
 }
 
 .personal-field {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 14px;
 }
 
 .personal-field input {
-    width: 100%;
-    padding: 10px 14px;
-    border-radius: 12px;
-    border: 1px solid var(--theme-control-border-strong);
-    background: var(--theme-surface-soft);
-    font-size: 14px;
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--theme-control-border-strong);
+  background: var(--theme-surface-soft);
+  font-size: 14px;
 }
 
 .personal-field input:focus {
-    outline: 2px solid rgba(189, 93, 58, 0.35);
-    border-color: rgba(189, 93, 58, 0.6);
+  outline: 2px solid rgba(189, 93, 58, 0.35);
+  border-color: rgba(189, 93, 58, 0.6);
 }
 
 .tone-preset-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 10px;
-    font-size: 13px;
-    color: var(--claude-text-secondary);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--claude-text-secondary);
 }
 
 .tone-preset-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
 
 .tone-preset-buttons button {
-    padding: 4px 10px;
-    border-radius: 999px;
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-strong);
-    font-size: 13px;
-    cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-strong);
+  font-size: 13px;
+  cursor: pointer;
 }
 
 .tone-preset-buttons button:hover {
-    border-color: var(--claude-accent);
-    color: var(--claude-accent);
+  border-color: var(--claude-accent);
+  color: var(--claude-accent);
 }
 
 .consideration-input {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 }
 
 .consideration-input input {
-    flex: 1;
+  flex: 1;
 }
 
 .consideration-add {
-    width: 38px;
-    height: 38px;
-    border-radius: 12px;
-    border: none;
-    background: var(--claude-accent);
-    color: #fffdf8;
-    font-size: 20px;
-    font-weight: 600;
-    cursor: pointer;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  border: none;
+  background: var(--claude-accent);
+  color: #fffdf8;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .consideration-add:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .consideration-list {
-    list-style: none;
-    margin: 6px 0 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .consideration-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    border-radius: 12px;
-    border: 1px dashed var(--theme-control-border-strong);
-    background: var(--theme-surface-soft);
-    cursor: grab;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px dashed var(--theme-control-border-strong);
+  background: var(--theme-surface-soft);
+  cursor: grab;
 }
 
 .drag-handle {
-    font-size: 16px;
-    color: var(--claude-text-secondary);
+  font-size: 16px;
+  color: var(--claude-text-secondary);
 }
 
 .consideration-text {
-    flex: 1;
-    font-size: 14px;
-    color: var(--claude-text);
+  flex: 1;
+  font-size: 14px;
+  color: var(--claude-text);
 }
 
 .consideration-remove {
-    border: none;
-    background: none;
-    font-size: 18px;
-    line-height: 1;
-    cursor: pointer;
-    color: #d64545;
-    padding: 0 4px;
+  border: none;
+  background: none;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  color: #d64545;
+  padding: 0 4px;
 }
 
 .consideration-hint,
 .consideration-limit {
-    font-size: 13px;
-    color: var(--claude-text-secondary);
+  font-size: 13px;
+  color: var(--claude-text-secondary);
 }
 
 .personal-form-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: auto;
-    padding: 12px 0 0;
-    justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  padding: 12px 0 0;
+  justify-content: flex-end;
 }
 
 .personal-form-actions.card-aligned {
-    padding: 0;
-    margin-top: auto;
-    justify-content: flex-end;
+  padding: 0;
+  margin-top: auto;
+  justify-content: flex-end;
 }
 
 @media (max-width: 1024px) {
-    .personal-form-actions.card-aligned {
-        margin-top: 12px;
-    }
+  .personal-form-actions.card-aligned {
+    margin-top: 12px;
+  }
 }
 
 .personal-actions-row {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 18px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
 }
 
 .personal-actions-row .personal-form-actions {
-    width: 100%;
-    max-width: 420px;
-    padding: 0;
+  width: 100%;
+  max-width: 420px;
+  padding: 0;
 }
 
 @media (min-width: 1025px) {
-    .personal-actions-row .personal-form-actions {
-        max-width: calc(50% - 9px);
-    }
+  .personal-actions-row .personal-form-actions {
+    max-width: calc(50% - 9px);
+  }
 }
 
 .personal-status-group {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    min-height: 22px;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 22px;
 }
 
 .personal-form-actions .primary {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 999px;
-    background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
-    color: #fff;
-    font-weight: 600;
-    cursor: pointer;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .personal-form-actions .primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .personal-form-actions .status {
-    font-size: 13px;
+  font-size: 13px;
 }
 
 .personal-form-actions .status.success {
-    color: #0f9d58;
+  color: #0f9d58;
 }
 
 .personal-form-actions .status.error {
-    color: #d64545;
+  color: #d64545;
 }
 
 .personal-status-fade-enter-active,
 .personal-status-fade-leave-active {
-    transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
 }
 
 .personal-status-fade-enter-from,
 .personal-status-fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .personalization-loading {
-    padding: 32px 0;
-    text-align: center;
-    color: var(--claude-text-secondary);
-    font-size: 14px;
+  padding: 32px 0;
+  text-align: center;
+  color: var(--claude-text-secondary);
+  font-size: 14px;
 }
 
 .personal-page-vertical-enter-active,
 .personal-page-vertical-leave-active {
-    transition: opacity 0.35s ease, transform 0.35s ease;
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
 }
 
 .personal-page-vertical-enter-from {
-    opacity: 0;
-    transform: translateY(26px);
+  opacity: 0;
+  transform: translateY(26px);
 }
 
 .personal-page-vertical-leave-to {
-    opacity: 0;
-    transform: translateY(-26px);
+  opacity: 0;
+  transform: translateY(-26px);
 }
 
 .personal-page-fade-enter-active,
 .personal-page-fade-leave-active {
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
 }
 
 .personal-page-fade-enter-from,
 .personal-page-fade-leave-to {
-    opacity: 0;
-    backdrop-filter: blur(0);
+  opacity: 0;
+  backdrop-filter: blur(0);
 }
 
 .personal-page-overlay.personal-page-fade-enter-active .personal-page-card,
 .personal-page-overlay.personal-page-fade-leave-active .personal-page-card {
-    transition: transform 0.25s ease, opacity 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    opacity 0.25s ease;
 }
 
 .personal-page-overlay.personal-page-fade-enter-from .personal-page-card,
 .personal-page-overlay.personal-page-fade-leave-to .personal-page-card {
-    transform: translateY(18px) scale(0.985);
-    opacity: 0;
+  transform: translateY(18px) scale(0.985);
+  opacity: 0;
 }
 
 /* 通用覆盖层淡入动画（复用个人空间动效） */
 .overlay-fade-enter-active,
 .overlay-fade-leave-active {
-    transition: opacity 0.25s ease, backdrop-filter 0.25s ease;
+  transition:
+    opacity 0.25s ease,
+    backdrop-filter 0.25s ease;
 }
 .overlay-fade-enter-from,
 .overlay-fade-leave-to {
-    opacity: 0;
-    backdrop-filter: blur(0);
+  opacity: 0;
+  backdrop-filter: blur(0);
 }
 .overlay-fade-enter-active > *:first-child,
 .overlay-fade-leave-active > *:first-child {
-    transition: transform 0.25s ease, opacity 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    opacity 0.25s ease;
 }
 .overlay-fade-enter-from > *:first-child,
 .overlay-fade-leave-to > *:first-child {
-    transform: translateY(18px) scale(0.985);
-    opacity: 0;
+  transform: translateY(18px) scale(0.985);
+  opacity: 0;
 }
 
 /* 彩蛋灌水特效 */
 .easter-egg-overlay {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.6s ease;
-    z-index: 80;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  z-index: 80;
 }
 
 .easter-egg-overlay.active {
-    opacity: 1;
+  opacity: 1;
 }
 .panel-card {
-    border-left: 1px solid var(--claude-border);
-    padding: 0 0 0 0;
+  border-left: 1px solid var(--claude-border);
+  padding: 0 0 0 0;
 }
 .app-loading-state {
-    min-height: calc(var(--app-viewport, 100vh) - 160px);
-    padding: 60px 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 28px;
-    text-align: center;
-    color: var(--claude-text);
+  min-height: calc(var(--app-viewport, 100vh) - 160px);
+  padding: 60px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  text-align: center;
+  color: var(--claude-text);
 }
 
 .loading-animation {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .loading-copy {
-    margin-top: 48px;
+  margin-top: 48px;
 }
 .loading-copy h2 {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 600;
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
 }
 
 .loading-copy p {
-    margin: 6px 0 0;
-    color: var(--claude-text-secondary);
+  margin: 6px 0 0;
+  color: var(--claude-text-secondary);
 }
 
 .loading-refresh-btn {
-    margin-top: 14px;
-    border: 1px solid var(--claude-border);
-    border-radius: 10px;
-    background: var(--claude-panel);
-    color: var(--claude-text);
-    padding: 8px 14px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: transform 0.18s ease, box-shadow 0.18s ease;
+  margin-top: 14px;
+  border: 1px solid var(--claude-border);
+  border-radius: 10px;
+  background: var(--claude-panel);
+  color: var(--claude-text);
+  padding: 8px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .loading-refresh-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 8px 20px rgba(61, 57, 41, 0.14);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(61, 57, 41, 0.14);
 }
 
 .boxes {
-    --size: 34px;
-    --duration: 900ms;
-    --box-primary: var(--claude-accent);
-    --box-secondary: var(--claude-accent-strong, #d07b4c);
-    --box-tertiary: #f8d7c0;
-    height: calc(var(--size) * 2);
-    width: calc(var(--size) * 3);
-    position: relative;
-    transform-style: preserve-3d;
-    transform-origin: 50% 50%;
-    margin-top: calc(var(--size) * -1.5);
-    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
+  --size: 34px;
+  --duration: 900ms;
+  --box-primary: var(--claude-accent);
+  --box-secondary: var(--claude-accent-strong, #d07b4c);
+  --box-tertiary: #f8d7c0;
+  height: calc(var(--size) * 2);
+  width: calc(var(--size) * 3);
+  position: relative;
+  transform-style: preserve-3d;
+  transform-origin: 50% 50%;
+  margin-top: calc(var(--size) * -1.5);
+  transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
 }
 
 .boxes .box {
-    width: var(--size);
-    height: var(--size);
-    top: 0;
-    left: 0;
-    position: absolute;
-    transform-style: preserve-3d;
+  width: var(--size);
+  height: var(--size);
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform-style: preserve-3d;
 }
 
 .boxes .box:nth-child(1) {
-    transform: translate(100%, 0);
-    animation: box1 var(--duration) linear infinite;
+  transform: translate(100%, 0);
+  animation: box1 var(--duration) linear infinite;
 }
 
 .boxes .box:nth-child(2) {
-    transform: translate(0, 100%);
-    animation: box2 var(--duration) linear infinite;
+  transform: translate(0, 100%);
+  animation: box2 var(--duration) linear infinite;
 }
 
 .boxes .box:nth-child(3) {
-    transform: translate(100%, 100%);
-    animation: box3 var(--duration) linear infinite;
+  transform: translate(100%, 100%);
+  animation: box3 var(--duration) linear infinite;
 }
 
 .boxes .box:nth-child(4) {
-    transform: translate(200%, 0);
-    animation: box4 var(--duration) linear infinite;
+  transform: translate(200%, 0);
+  animation: box4 var(--duration) linear infinite;
 }
 
 .boxes .box > div {
-    --background: var(--box-primary);
-    --top: auto;
-    --right: auto;
-    --bottom: auto;
-    --left: auto;
-    --translateZ: calc(var(--size) / 2);
-    --rotateY: 0deg;
-    --rotateX: 0deg;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    top: var(--top);
-    right: var(--right);
-    bottom: var(--bottom);
-    left: var(--left);
-    border-radius: 6px;
-    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
+  --background: var(--box-primary);
+  --top: auto;
+  --right: auto;
+  --bottom: auto;
+  --left: auto;
+  --translateZ: calc(var(--size) / 2);
+  --rotateY: 0deg;
+  --rotateX: 0deg;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--background);
+  top: var(--top);
+  right: var(--right);
+  bottom: var(--bottom);
+  left: var(--left);
+  border-radius: 6px;
+  transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
 }
 
 .boxes .box > div:nth-child(1) {
-    --top: 0;
-    --left: 0;
+  --top: 0;
+  --left: 0;
 }
 
 .boxes .box > div:nth-child(2) {
-    --background: var(--box-secondary);
-    --right: 0;
-    --rotateY: 90deg;
+  --background: var(--box-secondary);
+  --right: 0;
+  --rotateY: 90deg;
 }
 
 .boxes .box > div:nth-child(3) {
-    --background: var(--box-tertiary);
-    --rotateX: -90deg;
+  --background: var(--box-tertiary);
+  --rotateX: -90deg;
 }
 
 .boxes .box > div:nth-child(4) {
-    --background: rgba(255, 255, 255, 0.95);
-    --top: 0;
-    --left: 0;
-    --translateZ: calc(var(--size) * 3 * -1);
+  --background: rgba(255, 255, 255, 0.95);
+  --top: 0;
+  --left: 0;
+  --translateZ: calc(var(--size) * 3 * -1);
 }
 
 @keyframes box1 {
-    0%, 50% {
-        transform: translate(100%, 0);
-    }
+  0%,
+  50% {
+    transform: translate(100%, 0);
+  }
 
-    100% {
-        transform: translate(200%, 0);
-    }
+  100% {
+    transform: translate(200%, 0);
+  }
 }
 
 @keyframes box2 {
-    0% {
-        transform: translate(0, 100%);
-    }
+  0% {
+    transform: translate(0, 100%);
+  }
 
-    50% {
-        transform: translate(0, 0);
-    }
+  50% {
+    transform: translate(0, 0);
+  }
 
-    100% {
-        transform: translate(100%, 0);
-    }
+  100% {
+    transform: translate(100%, 0);
+  }
 }
 
 @keyframes box3 {
-    0%, 50% {
-        transform: translate(100%, 100%);
-    }
+  0%,
+  50% {
+    transform: translate(100%, 100%);
+  }
 
-    100% {
-        transform: translate(0, 100%);
-    }
+  100% {
+    transform: translate(0, 100%);
+  }
 }
 
 @keyframes box4 {
-    0% {
-        transform: translate(200%, 0);
-    }
+  0% {
+    transform: translate(200%, 0);
+  }
 
-    50% {
-        transform: translate(200%, 100%);
-    }
+  50% {
+    transform: translate(200%, 100%);
+  }
 
-    100% {
-        transform: translate(100%, 100%);
-    }
+  100% {
+    transform: translate(100%, 100%);
+  }
 }
 
 /* 明亮主题：移除光晕效果 */
 body[data-theme='light'] {
-    .experiment-visual-glow,
-    .experiment-orb {
-        display: none;
-    }
+  .experiment-visual-glow,
+  .experiment-orb {
+    display: none;
+  }
 
-    .experiment-visual {
-        background: var(--theme-surface-card);
-        box-shadow: var(--theme-shadow-soft);
-    }
+  .experiment-visual {
+    background: var(--theme-surface-card);
+    box-shadow: var(--theme-shadow-soft);
+  }
 
-    .stadium-shell.is-focused,
-    .stadium-shell.has-text,
-    .stadium-shell.is-multiline.is-focused,
-    .stadium-shell.is-multiline.has-text {
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    }
+  .stadium-shell.is-focused,
+  .stadium-shell.has-text,
+  .stadium-shell.is-multiline.is-focused,
+  .stadium-shell.is-multiline.has-text {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
 
-    /* 按钮背景色 - 使用浅灰色 */
-    .stadium-btn.send-btn {
-        background: #ececec;
-        color: #0d0d0d;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    }
+  /* 按钮背景色 - 使用浅灰色 */
+  .stadium-btn.send-btn {
+    background: #ececec;
+    color: #0d0d0d;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
 
-    .stadium-btn.send-btn:hover:not(:disabled) {
-        background: #e0e0e0;
-    }
+  .stadium-btn.send-btn:hover:not(:disabled) {
+    background: #e0e0e0;
+  }
 
-    .stadium-btn.send-btn .send-icon {
-        border-left-color: #0d0d0d;
-    }
+  .stadium-btn.send-btn .send-icon {
+    border-left-color: #0d0d0d;
+  }
 
-    .stadium-btn.send-btn .stop-icon {
-        background-color: #0d0d0d;
-    }
+  .stadium-btn.send-btn .stop-icon {
+    background-color: #0d0d0d;
+  }
 
-    .menu-entry:hover:not(:disabled) {
-        background: #f5f5f5;
-    }
+  .menu-entry:hover:not(:disabled) {
+    background: #f5f5f5;
+  }
 
-    .menu-entry.active {
-        background: #ececec;
-    }
+  .menu-entry.active {
+    background: #ececec;
+  }
 
-    .personal-page-btn {
-        background: #f5f5f5;
-    }
+  /* 机器人图标保持黑色 */
+  .status-logo {
+    color: #0d0d0d;
+  }
 
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn {
-        background: #f5f5f5;
-    }
+  /* 思考模式切换按钮 - 统一浅灰色背景，只有图标变化 */
+  .mode-indicator {
+    background: #ececec !important;
+    color: #0d0d0d;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
 
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:hover,
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:focus-visible {
-        background: #ececec;
-    }
+  .mode-indicator:hover {
+    background: #e0e0e0 !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  }
 
-    .code-block-header {
-        background: #f5f5f5;
-    }
+  .mode-indicator:focus-visible {
+    box-shadow:
+      0 0 0 2px rgba(0, 0, 0, 0.1),
+      0 2px 4px rgba(0, 0, 0, 0.12);
+  }
 
-    /* 机器人图标保持黑色 */
-    .status-logo {
-        color: #0d0d0d;
-    }
+  .mode-indicator .icon {
+    color: #0d0d0d;
+  }
 
-    /* 思考模式切换按钮 - 统一浅灰色背景，只有图标变化 */
-    .mode-indicator {
-        background: #ececec !important;
-        color: #0d0d0d;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
+  /* 返回工作区按钮 - 移除光晕 */
+  .personal-page-close {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
 
-    .mode-indicator:hover {
-        background: #e0e0e0 !important;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
-    }
+  .personal-page-close:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  }
 
-    .mode-indicator:focus-visible {
-        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.12);
-    }
+  /* 个人空间选择栏 - 文字颜色 */
+  .run-mode-title {
+    color: #0d0d0d !important;
+  }
 
-    .mode-indicator .icon {
-        color: #0d0d0d;
-    }
+  .run-mode-desc {
+    color: #676767 !important;
+  }
 
-    /* 返回工作区按钮 - 移除光晕 */
-    .personal-page-close {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    }
+  /* 去掉选中后的文字变色 */
+  .run-mode-card.active .run-mode-title {
+    color: #0d0d0d !important;
+  }
 
-    .personal-page-close:hover {
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
-    }
+  .run-mode-card.active .run-mode-desc {
+    color: #676767 !important;
+  }
 
-    /* 个人空间选择栏 - 文字颜色 */
-    .run-mode-title {
-        color: #0d0d0d !important;
-    }
+  .run-mode-card:hover .run-mode-title {
+    color: #0d0d0d !important;
+  }
 
-    .run-mode-desc {
-        color: #676767 !important;
-    }
+  .run-mode-card:hover .run-mode-desc {
+    color: #676767 !important;
+  }
 
-    /* 去掉选中后的文字变色 */
-    .run-mode-card.active .run-mode-title {
-        color: #0d0d0d !important;
-    }
+  /* 个人空间左侧选项卡 - 文字颜色保持灰色，不随选中状态变化 */
+  .personal-tab-button {
+    color: #676767 !important;
+  }
 
-    .run-mode-card.active .run-mode-desc {
-        color: #676767 !important;
-    }
+  .personal-tab-button.active {
+    color: #676767 !important;
+  }
 
-    .run-mode-card:hover .run-mode-title {
-        color: #0d0d0d !important;
-    }
+  /* 删除按钮 - 使用深灰色 */
+  .conversation-action-btn.delete-btn {
+    background: #6b6b6b !important;
+  }
 
-    .run-mode-card:hover .run-mode-desc {
-        color: #676767 !important;
-    }
+  .conversation-action-btn.delete-btn:hover {
+    background: #5a5a5a !important;
+  }
 
-    /* 个人空间左侧选项卡 - 文字颜色保持灰色，不随选中状态变化 */
-    .personal-tab-button {
-        color: #676767 !important;
-    }
+  /* 个人空间 - consideration 删除按钮 */
+  .consideration-remove {
+    color: #6b6b6b !important;
+  }
 
-    .personal-tab-button.active {
-        color: #676767 !important;
-    }
+  .consideration-remove:hover {
+    color: #0d0d0d !important;
+  }
 
-    /* 对话记录栏 - 统一使用浅灰色背景 */
-    .new-conversation-btn {
-        background: #ececec !important;
-        color: #0d0d0d !important;
-        border-color: rgba(0, 0, 0, 0.1) !important;
-        box-shadow: none !important;
-    }
+  /* 个人空间 - 整体背景色为侧边栏颜色，选项卡和卡片为白色 */
+  .personal-page-card {
+    background: #f9f9f9 !important;
+  }
 
-    .new-conversation-btn:hover {
-        background: #e0e0e0 !important;
-        box-shadow: none !important;
-    }
+  .personal-section {
+    background: #ffffff !important;
+  }
 
-    .conversation-item {
-        background: #ffffff !important;
-        box-shadow: none !important;
-    }
+  .personal-tab-button {
+    background: #ffffff !important;
+  }
 
-    .conversation-item:hover {
-        background: #f5f5f5 !important;
-        box-shadow: none !important;
-    }
+  .personal-tab-button:hover {
+    background: #f5f5f5 !important;
+  }
 
-    .conversation-item.active {
-        background: #f5f5f5 !important;
-        box-shadow: none !important;
-    }
-
-    .toggle-sidebar-btn {
-        background: #ececec !important;
-        border-color: rgba(0, 0, 0, 0.1) !important;
-    }
-
-    .toggle-sidebar-btn:hover {
-        background: #e0e0e0 !important;
-    }
-
-    .search-input {
-        background: #ececec !important;
-    }
-
-    .search-input:focus {
-        background: #e0e0e0 !important;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn {
-        background: #ececec !important;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:hover,
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:focus-visible {
-        background: #e0e0e0 !important;
-    }
-
-    /* 删除按钮 - 使用深灰色 */
-    .conversation-action-btn.delete-btn {
-        background: #6b6b6b !important;
-    }
-
-    .conversation-action-btn.delete-btn:hover {
-        background: #5a5a5a !important;
-    }
-
-    /* 个人空间 - consideration 删除按钮 */
-    .consideration-remove {
-        color: #6b6b6b !important;
-    }
-
-    .consideration-remove:hover {
-        color: #0d0d0d !important;
-    }
-
-    /* 个人空间 - 整体背景色为侧边栏颜色，选项卡和卡片为白色 */
-    .personal-page-card {
-        background: #f9f9f9 !important;
-    }
-
-    .personal-section {
-        background: #ffffff !important;
-    }
-
-    .personal-tab-button {
-        background: #ffffff !important;
-    }
-
-    .personal-tab-button:hover {
-        background: #f5f5f5 !important;
-    }
-
-    .personal-tab-button.active {
-        background: #ffffff !important;
-    }
+  .personal-tab-button.active {
+    background: #ffffff !important;
+  }
 }
 
 /* 暗色主题：移除光晕效果和彩色 */
 body[data-theme='dark'] {
-    .experiment-visual-glow,
-    .experiment-orb {
-        display: none;
-    }
-
-    .experiment-visual {
-        background: var(--theme-surface-card);
-        box-shadow: var(--theme-shadow-soft);
-    }
-
-    .stadium-shell.is-focused,
-    .stadium-shell.has-text,
-    .stadium-shell.is-multiline.is-focused,
-    .stadium-shell.is-multiline.has-text {
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-    }
-
-    /* 输入栏 - 改为灰黑色 */
-    .stadium-shell {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .stadium-shell.is-focused,
-    .stadium-shell.has-text {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.15);
-    }
-
-    /* 输入框文字颜色 */
-    .stadium-input {
-        color: #ffffff;
-    }
-
-    .stadium-input::placeholder {
-        color: #707070;
-    }
-
-    /* 按钮背景色 - 使用浅一些的灰色 */
-    .stadium-btn.send-btn {
-        background: #3a3a3a;
-        color: #ffffff;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .stadium-btn.send-btn:hover:not(:disabled) {
-        background: #454545;
-    }
-
-    .stadium-btn.send-btn .send-icon {
-        border-left-color: #ffffff;
-    }
-
-    .stadium-btn.send-btn .stop-icon {
-        background-color: #ffffff;
-    }
-
-    /* 快捷菜单 - 改为灰黑色 */
-    .quick-menu {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .quick-submenu {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .menu-entry:hover:not(:disabled) {
-        background: #353535;
-    }
-
-    .menu-entry.active {
-        background: #353535;
-    }
-
-    .personal-page-btn {
-        background: #2a2a2a;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn {
-        background: #2a2a2a;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:hover,
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:focus-visible {
-        background: #353535;
-    }
-
-    .code-block-header {
-        background: #2a2a2a;
-    }
-
-    .copy-code-btn {
-        filter: brightness(0) invert(1);
-    }
-
-    /* 机器人图标保持白色 */
-    .status-logo {
-        color: #ffffff;
-    }
-
-    /* 思考模式切换按钮 - 统一深灰色背景，只有图标变化 */
-    .mode-indicator {
-        background: #2a2a2a !important;
-        color: #ffffff;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .mode-indicator:hover {
-        background: #353535 !important;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
-    }
-
-    .mode-indicator:focus-visible {
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 3px 6px rgba(0, 0, 0, 0.4);
-    }
-
-    .mode-indicator .icon {
-        color: #ffffff;
-    }
-
-    /* 返回工作区按钮 - 移除光晕 */
-    .personal-page-close {
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    }
-
-    .personal-page-close:hover {
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
-    }
-
-    /* 对话侧边栏图标颜色 */
-    .conversation-header button,
-    .workspace-immersive-btn {
-        color: #ffffff;
-    }
-
-    .conversation-header button svg,
-    .workspace-immersive-btn svg {
-        stroke: #ffffff;
-        fill: none;
-    }
-
-    /* 个人空间按钮 - 移除圆形外框 */
-    .personal-page-btn.icon-only {
-        background: transparent;
-        border: none;
-    }
-
-    .personal-page-btn.icon-only:hover {
-        background: transparent;
-        border: none;
-    }
-
-    /* 个人空间选择栏 - 文字颜色 */
-    .run-mode-title {
-        color: #ffffff !important;
-    }
-
-    .run-mode-desc {
-        color: #a0a0a0 !important;
-    }
-
-    /* 去掉选中后的文字变色 */
-    .run-mode-card.active .run-mode-title {
-        color: #ffffff !important;
-    }
-
-    .run-mode-card.active .run-mode-desc {
-        color: #a0a0a0 !important;
-    }
-
-    .run-mode-card:hover .run-mode-title {
-        color: #ffffff !important;
-    }
-
-    .run-mode-card:hover .run-mode-desc {
-        color: #a0a0a0 !important;
-    }
-
-    /* 个人空间左侧选项卡 - 暗色模式下文字白色，不随选中状态变化 */
-    .personal-tab-button {
-        color: #ffffff !important;
-    }
-
-    .personal-tab-button.active {
-        color: #ffffff !important;
-    }
-
-    /* 个人空间左侧选项卡描述文字 */
-    .personal-tab-desc {
-        color: #a0a0a0 !important;
-    }
-
-    /* 空对话欢迎语 - 白色 */
-    .blank-hero-text {
-        color: #ffffff !important;
-    }
-
-    /* 对话记录栏 - 统一使用深灰色背景 */
-    .new-conversation-btn {
-        background: #2a2a2a !important;
-        color: #ffffff !important;
-        border-color: rgba(255, 255, 255, 0.1) !important;
-        box-shadow: none !important;
-    }
-
-    .new-conversation-btn:hover {
-        background: #3a3a3a !important;
-        box-shadow: none !important;
-    }
-
-    .conversation-item {
-        background: #2a2a2a !important;
-        box-shadow: none !important;
-    }
-
-    .conversation-item:hover {
-        background: #3a3a3a !important;
-        box-shadow: none !important;
-    }
-
-    .conversation-item.active {
-        background: #3a3a3a !important;
-        box-shadow: none !important;
-    }
-
-    .toggle-sidebar-btn {
-        background: #2a2a2a !important;
-        border-color: rgba(255, 255, 255, 0.1) !important;
-    }
-
-    .toggle-sidebar-btn:hover {
-        background: #3a3a3a !important;
-    }
-
-    .search-input {
-        background: #2a2a2a !important;
-    }
-
-    .search-input:focus {
-        background: #3a3a3a !important;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn {
-        background: #2a2a2a !important;
-    }
-
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:hover,
-    .conversation-personal-entry:not(.collapsed) .personal-page-btn:focus-visible {
-        background: #3a3a3a !important;
-    }
-
-    /* 删除按钮 - 使用浅灰色 */
-    .conversation-action-btn.delete-btn {
-        background: #6b6b6b !important;
-    }
-
-    .conversation-action-btn.delete-btn:hover {
-        background: #7a7a7a !important;
-    }
-
-    /* 顶部栏 - 黑色背景，白色字体 */
-    .conversation-ribbon {
-        background: #1a1a1a !important;
-    }
-
-    .conversation-ribbon::after {
-        background: #1a1a1a !important;
-    }
-
-    .mobile-topbar-title {
-        color: #ffffff !important;
-        text-shadow: none !important;
-    }
-
-    .mobile-topbar-selector {
-        color: #ffffff !important;
-    }
-
-    .mobile-topbar-selector:hover {
-        color: #ffffff !important;
-    }
-
-    .mobile-topbar-selector.open {
-        color: #ffffff !important;
-    }
-
-    .mobile-selector-model {
-        color: #ffffff !important;
-    }
-
-    .mobile-selector-mode {
-        color: #a0a0a0 !important;
-    }
-
-    /* 手机端顶部栏 - 黑色背景 */
-    .mobile-panel-topbar {
-        background: #1a1a1a !important;
-    }
-
-    .mobile-panel-topbar::after {
-        background: #1a1a1a !important;
-    }
-
-    /* 手机端顶部栏菜单按钮 - 白色图标 */
-    .mobile-panel-fab {
-        color: #ffffff !important;
-    }
-
-    .mobile-panel-fab img {
-        filter: brightness(0) invert(1) !important;
-    }
-
-    /* 手机端展开菜单 - 黑色背景 */
-    .mobile-panel-menu {
-        background: #000000 !important;
-    }
-
-    /* 新的下拉菜单样式 - 暗色主题 */
-    .mobile-panel-menu--dropdown {
-        background: #2a2a2a !important;
-        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
-    }
-
-    .mobile-menu-item {
-        color: #ffffff !important;
-    }
-
-    .mobile-menu-item:hover {
-        background: #3a3a3a !important;
-    }
-
-    /* 图标颜色反转为白色 */
-    .mobile-menu-icon {
-        filter: brightness(0) invert(1) !important;
-    }
-
-    /* 手机端菜单按钮 - SVG 白色 */
-    .mobile-menu-btn {
-        color: #ffffff !important;
-    }
-
-    .mobile-menu-svg {
-        filter: brightness(0) invert(1) !important;
-    }
-
-    .mobile-menu-btn img {
-        filter: brightness(0) invert(1) !important;
-    }
-
-    /* 用量统计 - 数字白色 */
-    .stat-value {
-        color: #ffffff !important;
-    }
-
-    /* 对话区域顶部的模型选择器 - 白色字体 */
-    .conversation-ribbon__selector {
-        color: #ffffff !important;
-    }
-
-    .conversation-ribbon__selector:hover {
-        color: #ffffff !important;
-    }
-
-    .conversation-ribbon__selector.open {
-        color: #ffffff !important;
-    }
-
-    .selector-model {
-        color: #ffffff !important;
-    }
-
-    .selector-mode {
-        color: #a0a0a0 !important;
-    }
-
-    .conversation-ribbon__text {
-        color: #ffffff !important;
-    }
-
-    /* 模型选择下拉菜单 - 和输入栏一样的底色 */
-    .model-mode-dropdown {
-        background: #2a2a2a !important;
-        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
-    }
-
-    .dropdown-title {
-        color: #a0a0a0 !important;
-    }
-
-    .dropdown-item {
-        color: #ffffff !important;
-    }
-
-    .dropdown-item:hover:not(.disabled) {
-        background: #3a3a3a !important;
-    }
-
-    .item-label {
-        color: #ffffff !important;
-    }
-
-    .item-desc {
-        color: #a0a0a0 !important;
-    }
-
-    /* 个人空间 - consideration 列表项的虚线边框 */
-    .consideration-item {
-        border-color: #6b6b6b !important;
-    }
-
-    /* 个人空间 - consideration 删除按钮 */
-    .consideration-remove {
-        color: #a0a0a0 !important;
-    }
-
-    .consideration-remove:hover {
-        color: #ffffff !important;
-    }
-
-    /* 个人空间 - 整体背景色为对话区域颜色，选项卡和卡片为纯黑色 */
-    .personal-page-card {
-        background: #1a1a1a !important;
-    }
-
-    .personal-section {
-        background: #000000 !important;
-    }
-
-    .personal-tab-button {
-        background: #000000 !important;
-    }
-
-    .personal-tab-button:hover {
-        background: #1a1a1a !important;
-    }
-
-    .personal-tab-button.active {
-        background: #1a1a1a !important;
-    }
-
-    /* 快捷菜单 - 和输入栏一样的底色 */
-    .quick-menu {
-        background: #2a2a2a !important;
-        border-color: rgba(255, 255, 255, 0.1) !important;
-    }
-
-    .quick-submenu {
-        background: #2a2a2a !important;
-        border-color: rgba(255, 255, 255, 0.1) !important;
-    }
-
-    .menu-entry {
-        color: #ffffff !important;
-    }
-
-    .menu-entry:hover:not(:disabled) {
-        background: #3a3a3a !important;
-    }
-
-    .menu-entry.active {
-        background: #3a3a3a !important;
-    }
-
-    .menu-entry .entry-arrow {
-        color: #a0a0a0 !important;
-    }
-
-    .submenu-label {
-        color: #ffffff !important;
-    }
-
-    /* 用户消息块 - 使用浅灰色 */
-    .user-message .message-text {
-        background: #2a2a2a;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    /* AI 消息块 - 使用浅灰色 */
-    .assistant-message .message-text {
-        background: #2a2a2a;
-        border-left-color: #505050;
-    }
-
-    /* 思考块和工具块 - 使用更深的颜色（类似选中状态） */
-    .thinking-block,
-    .tool-block,
-    .collapsible-block {
-        background: #1a1a1a;
-    }
-
-    .collapsible-header {
-        background: #1a1a1a;
-    }
-
-    .collapsible-header:hover {
-        background: #202020;
-    }
-
-    /* 代码块 - 代码区域纯黑底+白字 */
-    .code-block-wrapper {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .text-output pre {
-        background: #0a0a0a !important;
-        color: #ffffff;
-    }
-
-    .text-output pre code {
-        background: transparent !important;
-        color: #ffffff;
-    }
-
-    /* 滚动锁定按钮 */
-    .scroll-lock-btn {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    .scroll-lock-btn:hover {
-        background: #353535;
-        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
-    }
-
-    .scroll-lock-toggle.locked .scroll-lock-btn {
-        border-color: rgba(255, 255, 255, 0.2);
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    }
-
-    .scroll-lock-toggle.locked .scroll-lock-btn img {
-        filter: brightness(0) invert(1);
-    }
-
-    .scroll-lock-toggle.locked .scroll-lock-btn svg {
-        stroke: #ffffff;
-    }
-
-    /* 左侧面板头部（文件/待办事项/子智能体标签栏） */
-    .sidebar-header {
-        background: #1a1a1a;
-    }
-
-    /* 移动端审批面板 - 移除所有背景让内容顶头 */
-    .mobile-panel-sheet--approval .sidebar.right-sidebar {
-        background: transparent !important;
-    }
-
-    .mobile-panel-sheet--approval .sidebar-header,
-    .mobile-panel-sheet--approval .sidebar .sidebar-header {
-        background: transparent !important;
-        padding: 0 16px !important;
-    }
-
-    .sidebar-manage-btn {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .sidebar-manage-btn:hover {
-        background: #353535;
-        border-color: rgba(255, 255, 255, 0.15);
-    }
-
-    .sidebar-view-toggle {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .sidebar-view-toggle:hover {
-        background: #353535;
-    }
-
-    .panel-menu {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .panel-menu button.active {
-        background: rgba(255, 255, 255, 0.1);
-    }
-
-    .todo-empty,
-    .sub-agent-empty,
-    .file-tree-empty {
-        background: #1a1a1a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .todo-task {
-        background: #2a2a2a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .folder-header,
-    .file-node {
-        background: transparent;
-    }
-
-    .folder-header:hover {
-        background: #2a2a2a;
-    }
-
-    .file-node.file-leaf:hover {
-        background: #2a2a2a;
-    }
-
-    /* 聚焦文件面板 */
-    .file-tab {
-        background: #1a1a1a;
-        border-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .tab-header {
-        background: #2a2a2a;
-    }
-
-    .file-content {
-        background: #0a0a0a;
-    }
-
-    .file-content code {
-        color: #ffffff;
-    }
-
-    .focus-close-btn {
-        background: #2a2a2a;
-    }
-
-    .focus-close-btn:hover {
-        background: #353535;
-    }
-
-    .approval-close-btn {
-        background: #2a2a2a;
-    }
-
-    .approval-close-btn:hover {
-        background: #353535;
-    }
-
-    /* 表格 */
-    .text-output .text-content table {
-        background: #2a2a2a;
-    }
-
-    .text-output .text-content thead {
-        background: #1a1a1a;
-    }
+  .experiment-visual-glow,
+  .experiment-orb {
+    display: none;
+  }
+
+  .experiment-visual {
+    background: var(--theme-surface-card);
+    box-shadow: var(--theme-shadow-soft);
+  }
+
+  .stadium-shell.is-focused,
+  .stadium-shell.has-text,
+  .stadium-shell.is-multiline.is-focused,
+  .stadium-shell.is-multiline.has-text {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  /* 输入栏 - 改为灰黑色 */
+  .stadium-shell {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .stadium-shell.is-focused,
+  .stadium-shell.has-text {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  /* 输入框文字颜色 */
+  .stadium-input {
+    color: #ffffff;
+  }
+
+  .stadium-input::placeholder {
+    color: #707070;
+  }
+
+  /* 按钮背景色 - 使用浅一些的灰色 */
+  .stadium-btn.send-btn {
+    background: #3a3a3a;
+    color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .stadium-btn.send-btn:hover:not(:disabled) {
+    background: #454545;
+  }
+
+  .stadium-btn.send-btn .send-icon {
+    border-left-color: #ffffff;
+  }
+
+  .stadium-btn.send-btn .stop-icon {
+    background-color: #ffffff;
+  }
+
+  /* 快捷菜单 - 改为灰黑色 */
+  .quick-menu {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .quick-submenu {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .menu-entry:hover:not(:disabled) {
+    background: #353535;
+  }
+
+  .menu-entry.active {
+    background: #353535;
+  }
+
+  /* 机器人图标保持白色 */
+  .status-logo {
+    color: #ffffff;
+  }
+
+  /* 思考模式切换按钮 - 统一深灰色背景，只有图标变化 */
+  .mode-indicator {
+    background: #2a2a2a !important;
+    color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .mode-indicator:hover {
+    background: #353535 !important;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .mode-indicator:focus-visible {
+    box-shadow:
+      0 0 0 2px rgba(255, 255, 255, 0.1),
+      0 3px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .mode-indicator .icon {
+    color: #ffffff;
+  }
+
+  /* 返回工作区按钮 - 移除光晕 */
+  .personal-page-close {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .personal-page-close:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  /* 个人空间选择栏 - 文字颜色 */
+  .run-mode-title {
+    color: #ffffff !important;
+  }
+
+  .run-mode-desc {
+    color: #a0a0a0 !important;
+  }
+
+  /* 去掉选中后的文字变色 */
+  .run-mode-card.active .run-mode-title {
+    color: #ffffff !important;
+  }
+
+  .run-mode-card.active .run-mode-desc {
+    color: #a0a0a0 !important;
+  }
+
+  .run-mode-card:hover .run-mode-title {
+    color: #ffffff !important;
+  }
+
+  .run-mode-card:hover .run-mode-desc {
+    color: #a0a0a0 !important;
+  }
+
+  /* 个人空间左侧选项卡 - 暗色模式下文字白色，不随选中状态变化 */
+  .personal-tab-button {
+    color: #ffffff !important;
+  }
+
+  .personal-tab-button.active {
+    color: #ffffff !important;
+  }
+
+  /* 个人空间左侧选项卡描述文字 */
+  .personal-tab-desc {
+    color: #a0a0a0 !important;
+  }
+
+  /* 空对话欢迎语 - 白色 */
+  .blank-hero-text {
+    color: #ffffff !important;
+  }
+
+  /* 删除按钮 - 使用浅灰色 */
+  .conversation-action-btn.delete-btn {
+    background: #6b6b6b !important;
+  }
+
+  .conversation-action-btn.delete-btn:hover {
+    background: #7a7a7a !important;
+  }
+
+  /* 顶部栏 - 黑色背景，白色字体 */
+  .conversation-ribbon {
+    background: #1a1a1a !important;
+  }
+
+  .conversation-ribbon::after {
+    background: #1a1a1a !important;
+  }
+
+  .mobile-topbar-title {
+    color: #ffffff !important;
+    text-shadow: none !important;
+  }
+
+  .mobile-topbar-selector {
+    color: #ffffff !important;
+  }
+
+  .mobile-topbar-selector:hover {
+    color: #ffffff !important;
+  }
+
+  .mobile-topbar-selector.open {
+    color: #ffffff !important;
+  }
+
+  .mobile-selector-model {
+    color: #ffffff !important;
+  }
+
+  .mobile-selector-mode {
+    color: #a0a0a0 !important;
+  }
+
+  /* 手机端顶部栏 - 黑色背景 */
+  .mobile-panel-topbar {
+    background: #1a1a1a !important;
+  }
+
+  .mobile-panel-topbar::after {
+    background: #1a1a1a !important;
+  }
+
+  /* 手机端顶部栏菜单按钮 - 白色图标 */
+  .mobile-panel-fab {
+    color: #ffffff !important;
+  }
+
+  .mobile-panel-fab img {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  /* 手机端展开菜单 - 黑色背景 */
+  .mobile-panel-menu {
+    background: #000000 !important;
+  }
+
+  /* 新的下拉菜单样式 - 暗色主题 */
+  .mobile-panel-menu--dropdown {
+    background: #2a2a2a !important;
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
+  }
+
+  .mobile-menu-item {
+    color: #ffffff !important;
+  }
+
+  .mobile-menu-item:hover {
+    background: #3a3a3a !important;
+  }
+
+  /* 图标颜色反转为白色 */
+  .mobile-menu-icon {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  /* 手机端菜单按钮 - SVG 白色 */
+  .mobile-menu-btn {
+    color: #ffffff !important;
+  }
+
+  .mobile-menu-svg {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  .mobile-menu-btn img {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  /* 用量统计 - 数字白色 */
+  .stat-value {
+    color: #ffffff !important;
+  }
+
+  /* 对话区域顶部的模型选择器 - 白色字体 */
+  .conversation-ribbon__selector {
+    color: #ffffff !important;
+  }
+
+  .conversation-ribbon__selector:hover {
+    color: #ffffff !important;
+  }
+
+  .conversation-ribbon__selector.open {
+    color: #ffffff !important;
+  }
+
+  .selector-model {
+    color: #ffffff !important;
+  }
+
+  .selector-mode {
+    color: #a0a0a0 !important;
+  }
+
+  .conversation-ribbon__text {
+    color: #ffffff !important;
+  }
+
+  /* 模型选择下拉菜单 - 和输入栏一样的底色 */
+  .model-mode-dropdown {
+    background: #2a2a2a !important;
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
+  }
+
+  .dropdown-title {
+    color: #a0a0a0 !important;
+  }
+
+  .dropdown-item {
+    color: #ffffff !important;
+  }
+
+  .dropdown-item:hover:not(.disabled) {
+    background: #3a3a3a !important;
+  }
+
+  .item-label {
+    color: #ffffff !important;
+  }
+
+  .item-desc {
+    color: #a0a0a0 !important;
+  }
+
+  /* 个人空间 - consideration 列表项的虚线边框 */
+  .consideration-item {
+    border-color: #6b6b6b !important;
+  }
+
+  /* 个人空间 - consideration 删除按钮 */
+  .consideration-remove {
+    color: #a0a0a0 !important;
+  }
+
+  .consideration-remove:hover {
+    color: #ffffff !important;
+  }
+
+  /* 个人空间 - 整体背景色为对话区域颜色，选项卡和卡片为纯黑色 */
+  .personal-page-card {
+    background: #1a1a1a !important;
+  }
+
+  .personal-section {
+    background: #000000 !important;
+  }
+
+  .personal-tab-button {
+    background: #000000 !important;
+  }
+
+  .personal-tab-button:hover {
+    background: #1a1a1a !important;
+  }
+
+  .personal-tab-button.active {
+    background: #1a1a1a !important;
+  }
+
+  /* 快捷菜单 - 和输入栏一样的底色 */
+  .quick-menu {
+    background: #2a2a2a !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+
+  .quick-submenu {
+    background: #2a2a2a !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+
+  .menu-entry {
+    color: #ffffff !important;
+  }
+
+  .menu-entry:hover:not(:disabled) {
+    background: #3a3a3a !important;
+  }
+
+  .menu-entry.active {
+    background: #3a3a3a !important;
+  }
+
+  .menu-entry .entry-arrow {
+    color: #a0a0a0 !important;
+  }
+
+  .submenu-label {
+    color: #ffffff !important;
+  }
+
+  /* 用户消息块 - 使用浅灰色 */
+  .user-message .message-text {
+    background: #2a2a2a;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  }
+
+  /* AI 消息块 - 使用浅灰色 */
+  .assistant-message .message-text {
+    background: #2a2a2a;
+    border-left-color: #505050;
+  }
+
+  /* 思考块和工具块 - 使用更深的颜色（类似选中状态） */
+  .thinking-block,
+  .tool-block,
+  .collapsible-block {
+    background: #1a1a1a;
+  }
+
+  .collapsible-header {
+    background: #1a1a1a;
+  }
+
+  .collapsible-header:hover {
+    background: #202020;
+  }
+
+  /* 代码块 - 代码区域纯黑底+白字 */
+  .code-block-wrapper {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .text-output pre {
+    background: #0a0a0a !important;
+    color: #ffffff;
+  }
+
+  .text-output pre code {
+    background: transparent !important;
+    color: #ffffff;
+  }
+
+  /* 滚动锁定按钮 */
+  .scroll-lock-btn {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  }
+
+  .scroll-lock-btn:hover {
+    background: #353535;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
+  }
+
+  .scroll-lock-toggle.locked .scroll-lock-btn {
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  }
+
+  .scroll-lock-toggle.locked .scroll-lock-btn img {
+    filter: brightness(0) invert(1);
+  }
+
+  .scroll-lock-toggle.locked .scroll-lock-btn svg {
+    stroke: #ffffff;
+  }
+
+  /* 左侧面板头部（文件/待办事项/子智能体标签栏） */
+  .sidebar-header {
+    background: #1a1a1a;
+  }
+
+  /* 移动端审批面板 - 移除所有背景让内容顶头 */
+  .mobile-panel-sheet--approval .sidebar.right-sidebar {
+    background: transparent !important;
+  }
+
+  .mobile-panel-sheet--approval .sidebar-header,
+  .mobile-panel-sheet--approval .sidebar .sidebar-header {
+    background: transparent !important;
+    padding: 0 16px !important;
+  }
+
+  .sidebar-manage-btn {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .sidebar-manage-btn:hover {
+    background: #353535;
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .sidebar-view-toggle {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .sidebar-view-toggle:hover {
+    background: #353535;
+  }
+
+  .panel-menu {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .panel-menu button.active {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .todo-empty,
+  .sub-agent-empty,
+  .file-tree-empty {
+    background: #1a1a1a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .todo-task {
+    background: #2a2a2a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .folder-header,
+  .file-node {
+    background: transparent;
+  }
+
+  .folder-header:hover {
+    background: #2a2a2a;
+  }
+
+  .file-node.file-leaf:hover {
+    background: #2a2a2a;
+  }
+
+  /* 聚焦文件面板 */
+  .file-tab {
+    background: #1a1a1a;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .tab-header {
+    background: #2a2a2a;
+  }
+
+  .file-content {
+    background: #0a0a0a;
+  }
+
+  .file-content code {
+    color: #ffffff;
+  }
+
+  .focus-close-btn {
+    background: #2a2a2a;
+  }
+
+  .focus-close-btn:hover {
+    background: #353535;
+  }
+
+  .approval-close-btn {
+    background: #2a2a2a;
+  }
+
+  .approval-close-btn:hover {
+    background: #353535;
+  }
+
+  /* 表格 */
+  .text-output .text-content table {
+    background: #2a2a2a;
+  }
+
+  .text-output .text-content thead {
+    background: #1a1a1a;
+  }
 }
 
 .tutorial-page {
-    display: flex;
-    align-items: stretch;
+  display: flex;
+  align-items: stretch;
 }
 
 .tutorial-intro-content {
-    width: 100%;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  width: 100%;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .tutorial-intro-eyebrow {
-    margin: 0;
-    font-size: 12px;
-    color: var(--claude-text-tertiary);
-    letter-spacing: 0.06em;
+  margin: 0;
+  font-size: 12px;
+  color: var(--claude-text-tertiary);
+  letter-spacing: 0.06em;
 }
 
 .tutorial-intro-header h3 {
-    margin: 6px 0 8px;
-    font-size: 24px;
+  margin: 6px 0 8px;
+  font-size: 24px;
 }
 
 .tutorial-intro-desc,
 .tutorial-intro-hint,
 .tutorial-status-text,
 .tutorial-feature-item p {
-    margin: 0;
-    color: var(--claude-text-secondary);
-    line-height: 1.55;
+  margin: 0;
+  color: var(--claude-text-secondary);
+  line-height: 1.55;
 }
 
 .tutorial-intro-features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-    gap: 12px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 12px;
 }
 
 .tutorial-feature-item {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
-    padding: 12px;
-    border: 1px solid var(--theme-control-border);
-    border-radius: 14px;
-    background: var(--theme-surface-strong);
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px;
+  border: 1px solid var(--theme-control-border);
+  border-radius: 14px;
+  background: var(--theme-surface-strong);
 }
 
 .tutorial-feature-item h4 {
-    margin: 0 0 4px;
-    font-size: 14px;
+  margin: 0 0 4px;
+  font-size: 14px;
 }
 
 .tutorial-feature-icon {
-    font-size: 18px;
+  font-size: 18px;
 }
 
 .tutorial-status-badge {
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-    border-radius: 999px;
-    padding: 6px 12px;
-    font-size: 13px;
-    font-weight: 600;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .tutorial-status-badge.success {
-    color: #fff;
-    background: linear-gradient(135deg, var(--claude-success), #4c8f5f);
+  color: #fff;
+  background: linear-gradient(135deg, var(--claude-success), #4c8f5f);
 }
 
 .tutorial-intro-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
 }
 
 .tutorial-start-button {
-    align-self: flex-start;
-    border: none;
-    border-radius: 999px;
-    padding: 10px 20px;
-    font-size: 14px;
-    font-weight: 700;
-    color: #fff;
-    background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
-    cursor: pointer;
+  align-self: flex-start;
+  border: none;
+  border-radius: 999px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
+  cursor: pointer;
 }
 
 .tutorial-start-button:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--theme-shadow-soft);
+  transform: translateY(-1px);
+  box-shadow: var(--theme-shadow-soft);
 }
 
 .tutorial-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 3200;
-    pointer-events: auto;
-    touch-action: none;
+  position: fixed;
+  inset: 0;
+  z-index: 3200;
+  pointer-events: auto;
+  touch-action: none;
 }
 
 .tutorial-click-blocker {
-    position: fixed;
-    inset: 0;
-    pointer-events: auto;
-    background: transparent;
-    z-index: 0;
+  position: fixed;
+  inset: 0;
+  pointer-events: auto;
+  background: transparent;
+  z-index: 0;
 }
 
 .tutorial-mask {
-    position: fixed;
-    background: transparent;
-    pointer-events: auto;
-    z-index: 1;
+  position: fixed;
+  background: transparent;
+  pointer-events: auto;
+  z-index: 1;
 }
 
 .tutorial-highlight {
-    position: fixed;
-    border-radius: 12px;
-    border: 2px solid rgba(255, 255, 255, 0.98);
-    box-shadow:
-        0 0 0 1px rgba(0, 0, 0, 0.5),
-        0 10px 34px rgba(0, 0, 0, 0.35);
-    pointer-events: none;
-    z-index: 2;
+  position: fixed;
+  border-radius: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.5),
+    0 10px 34px rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+  z-index: 2;
 }
 
 .tutorial-click-effect {
-    position: fixed;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    border: 2px solid rgba(47, 129, 247, 0.9);
-    pointer-events: none;
-    z-index: 3;
-    animation: tutorialClickPulse 0.45s ease;
+  position: fixed;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(47, 129, 247, 0.9);
+  pointer-events: none;
+  z-index: 3;
+  animation: tutorialClickPulse 0.45s ease;
 }
 
 @keyframes tutorialClickPulse {
-    0% { opacity: 1; transform: scale(0.6); }
-    100% { opacity: 0; transform: scale(1.8); }
+  0% {
+    opacity: 1;
+    transform: scale(0.6);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.8);
+  }
 }
 
 .tutorial-popover {
-    position: fixed;
-    width: min(360px, calc(100vw - 24px));
-    border-radius: 14px;
-    border: 1px solid var(--theme-control-border-strong);
-    background: var(--theme-surface-card);
-    color: var(--claude-text);
-    box-shadow: var(--theme-shadow-strong);
-    padding: 14px 14px 12px;
-    pointer-events: auto;
-    z-index: 4;
+  position: fixed;
+  width: min(360px, calc(100vw - 24px));
+  border-radius: 14px;
+  border: 1px solid var(--theme-control-border-strong);
+  background: var(--theme-surface-card);
+  color: var(--claude-text);
+  box-shadow: var(--theme-shadow-strong);
+  padding: 14px 14px 12px;
+  pointer-events: auto;
+  z-index: 4;
 }
 
 .tutorial-popover.is-hidden {
-    opacity: 0;
-    pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .tutorial-popover__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
 }
 
 .tutorial-popover__step {
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--claude-text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--claude-text-secondary);
 }
 
 .tutorial-popover__close {
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-soft);
-    color: var(--claude-text);
-    border-radius: 999px;
-    padding: 4px 10px;
-    font-size: 12px;
-    cursor: pointer;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-soft);
+  color: var(--claude-text);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
 }
 
 .tutorial-popover__title {
-    margin: 0;
-    font-size: 16px;
+  margin: 0;
+  font-size: 16px;
 }
 
 .tutorial-popover__desc {
-    margin: 8px 0 0;
-    font-size: 13px;
-    line-height: 1.58;
-    color: var(--claude-text-secondary);
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.58;
+  color: var(--claude-text-secondary);
 }
 
 .tutorial-popover__hint,
 .tutorial-popover__warn {
-    margin: 10px 0 0;
-    font-size: 12px;
+  margin: 10px 0 0;
+  font-size: 12px;
 }
 
 .tutorial-popover__hint {
-    color: var(--claude-accent-strong);
+  color: var(--claude-accent-strong);
 }
 
 .tutorial-popover__warn {
-    color: #dc6a53;
+  color: #dc6a53;
 }
 
 .tutorial-popover__actions {
-    margin-top: 12px;
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    flex-wrap: wrap;
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .tutorial-btn {
-    border: none;
-    border-radius: 10px;
-    padding: 7px 12px;
-    font-size: 12px;
-    font-weight: 700;
-    color: #fff;
-    background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
-    cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
+  cursor: pointer;
 }
 
 .tutorial-btn:disabled {
-    opacity: 0.65;
-    cursor: not-allowed;
+  opacity: 0.65;
+  cursor: not-allowed;
 }
 
 .tutorial-btn--ghost {
-    color: var(--claude-text);
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-soft);
+  color: var(--claude-text);
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-soft);
 }
diff --git a/static/src/styles/components/panels/_left-panel.scss b/static/src/styles/components/panels/_left-panel.scss
index ddf2e50..0e42b61 100644
--- a/static/src/styles/components/panels/_left-panel.scss
+++ b/static/src/styles/components/panels/_left-panel.scss
@@ -1,845 +1,938 @@
 /* 拖拽手柄 */
 .resize-handle {
-    width: 4px;
-    background: var(--claude-left-rail);
-    cursor: col-resize;
-    position: relative;
-    transition: background 0.2s;
-    flex-shrink: 0;
+  width: 4px;
+  background: var(--claude-left-rail);
+  cursor: col-resize;
+  position: relative;
+  transition: background 0.2s;
+  flex-shrink: 0;
 }
 
 .resize-handle:hover {
-    background: var(--claude-highlight);
+  background: var(--claude-highlight);
 }
 
 .workspace-region {
-    display: flex;
-    align-items: stretch;
-    flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  margin-left: 52px;
 }
 
 /* 侧边栏 */
 .sidebar {
-    background: var(--claude-left-rail);
-    overflow-y: auto;
-    flex-shrink: 0;
-    border-left: none;
+  background: var(--claude-left-rail);
+  overflow-y: auto;
+  flex-shrink: 0;
+  border-left: none;
 }
 
 .sidebar.left-sidebar {
-    display: flex;
-    flex-direction: column;
-    transition:
-        width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
-        min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.35s ease,
-        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  transition:
+    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.35s ease,
+    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .workspace-panel {
-    flex: 0 0 auto;
-    will-change: width, transform, opacity;
-    transition:
-        width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
-        min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.35s ease,
-        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 0 0 auto;
+  will-change: width, transform, opacity;
+  transition:
+    width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.35s ease,
+    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .workspace-panel--collapsed {
-    flex: 0 0 0 !important;
-    width: 0 !important;
-    min-width: 0 !important;
-    max-width: 0 !important;
-    opacity: 0;
-    transform: translateY(-70px);
-    overflow: hidden;
-    pointer-events: none;
+  flex: 0 0 0 !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  max-width: 0 !important;
+  opacity: 0;
+  transform: translateY(-70px);
+  overflow: hidden;
+  pointer-events: none;
 }
 
 .sidebar-status {
-    padding: 18px 18px 8px;
+  padding: 18px 18px 8px;
 }
 
 .compact-status-card {
-    background: var(--claude-panel);
-    border: 1px solid var(--claude-border);
-    border-radius: 18px;
-    padding: 14px 16px;
-    box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
-    display: flex;
-    align-items: center;
+  background: var(--claude-panel);
+  border: 1px solid var(--claude-border);
+  border-radius: 18px;
+  padding: 14px 16px;
+  box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
+  display: flex;
+  align-items: center;
 }
 
 .status-line {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    gap: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 18px;
 }
 
- .status-brand {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+.status-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .status-logo {
-    color: var(--claude-accent);
+  color: var(--claude-accent);
 }
 
 .status-logo-image {
-    width: 28px;
-    height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .status-logo-inline svg {
-    width: 100%;
-    height: 100%;
-    display: block;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .status-logo-inline {
-    color: var(--claude-text);
+  color: var(--claude-text);
 }
 
 .brand-text {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    font-weight: 600;
-    color: var(--claude-text);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--claude-text);
 }
 
 .brand-name {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .status-indicators {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .mode-indicator {
-    --mode-indicator-color-1: var(--claude-accent);
-    --mode-indicator-color-2: var(--claude-accent-strong);
-    --mode-indicator-shadow: rgba(189, 93, 58, 0.25);
-    border: none;
-    cursor: pointer;
-    outline: none;
-    padding: 0;
-    width: 36px;
-    height: 36px;
-    border-radius: 18px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2));
-    color: #fffef8;
-    box-shadow: 0 8px 20px var(--mode-indicator-shadow);
-    transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease;
+  --mode-indicator-color-1: var(--claude-accent);
+  --mode-indicator-color-2: var(--claude-accent-strong);
+  --mode-indicator-shadow: rgba(189, 93, 58, 0.25);
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2));
+  color: #fffef8;
+  box-shadow: 0 8px 20px var(--mode-indicator-shadow);
+  transition:
+    background 0.35s ease,
+    box-shadow 0.35s ease,
+    transform 0.25s ease;
 }
 
 .mode-indicator:hover {
-    transform: translateY(-1px);
+  transform: translateY(-1px);
 }
 
 .mode-indicator:focus-visible {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 8px 20px var(--mode-indicator-shadow);
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.8),
+    0 8px 20px var(--mode-indicator-shadow);
 }
 
 .mode-indicator.fast {
-    --mode-indicator-color-1: #ffe08c;
-    --mode-indicator-color-2: #f7b23c;
-    --mode-indicator-shadow: rgba(247, 178, 60, 0.35);
+  --mode-indicator-color-1: #ffe08c;
+  --mode-indicator-color-2: #f7b23c;
+  --mode-indicator-shadow: rgba(247, 178, 60, 0.35);
 }
 
 .mode-indicator.thinking {
-    --mode-indicator-color-1: var(--claude-accent);
-    --mode-indicator-color-2: var(--claude-accent-strong);
-    --mode-indicator-shadow: rgba(189, 93, 58, 0.3);
+  --mode-indicator-color-1: var(--claude-accent);
+  --mode-indicator-color-2: var(--claude-accent-strong);
+  --mode-indicator-shadow: rgba(189, 93, 58, 0.3);
 }
 
 .mode-indicator.deep {
-    --mode-indicator-color-1: var(--claude-deep);
-    --mode-indicator-color-2: var(--claude-deep-strong);
-    --mode-indicator-shadow: rgba(208, 122, 20, 0.35);
+  --mode-indicator-color-1: var(--claude-deep);
+  --mode-indicator-color-2: var(--claude-deep-strong);
+  --mode-indicator-shadow: rgba(208, 122, 20, 0.35);
 }
 
 .mode-indicator .icon {
-    --icon-size: 18px;
-    color: inherit;
+  --icon-size: 18px;
+  color: inherit;
 }
 
 .connection-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 6px;
-    background: #e34d4d;
-    transition: background 0.2s ease, box-shadow 0.2s ease;
-    position: relative;
-    overflow: visible;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background: #e34d4d;
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease;
+  position: relative;
+  overflow: visible;
 }
 
 .connection-dot::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: #e34d4d;
-    animation: statusPulse 2.4s ease-out infinite;
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: #e34d4d;
+  animation: statusPulse 2.4s ease-out infinite;
 }
 
 .connection-dot.active {
-    background: var(--claude-success);
+  background: var(--claude-success);
 }
 
 .connection-dot.active::after {
-    background: var(--claude-success);
+  background: var(--claude-success);
 }
 
 .mode-icon-enter-active,
 .mode-icon-leave-active {
-    transition: opacity 0.2s ease, transform 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
 }
 
 .mode-icon-enter-from,
 .mode-icon-leave-to {
-    opacity: 0;
-    transform: scale(0.5) rotate(8deg);
+  opacity: 0;
+  transform: scale(0.5) rotate(8deg);
 }
 
 @keyframes statusPulse {
-    0% {
-        transform: scale(1);
-        opacity: 0.35;
-    }
-    70% {
-        transform: scale(2.2);
-        opacity: 0;
-    }
-    100% {
-        transform: scale(2.2);
-        opacity: 0;
-    }
+  0% {
+    transform: scale(1);
+    opacity: 0.35;
+  }
+  70% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
 }
 
 .sidebar-header {
-    padding: 23px;
-    border-bottom: 1px solid var(--claude-border);
-    position: sticky;
-    top: 0;
-    background: rgba(255, 255, 255, 0.85);
-    z-index: 10;
-    backdrop-filter: blur(16px);
-    display: flex;
-    align-items: center;
-    gap: 10px;
+  padding: 23px;
+  border-bottom: 1px solid var(--claude-border);
+  position: sticky;
+  top: 0;
+  background: rgba(255, 255, 255, 0.85);
+  z-index: 10;
+  backdrop-filter: blur(16px);
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .sidebar-header h3 {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--claude-text);
-    margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--claude-text);
+  margin: 0;
 }
 
 .sidebar-manage-btn {
-    border: 1px solid rgba(118, 103, 84, 0.25);
-    background: rgba(255, 255, 255, 0.75);
-    color: var(--claude-text);
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background 0.2s, border-color 0.2s;
+  border: 1px solid rgba(118, 103, 84, 0.25);
+  background: rgba(255, 255, 255, 0.75);
+  color: var(--claude-text);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
 }
 
 .sidebar-manage-btn:hover {
-    background: rgba(255, 255, 255, 0.95);
-    border-color: rgba(118, 103, 84, 0.45);
+  background: rgba(255, 255, 255, 0.95);
+  border-color: rgba(118, 103, 84, 0.45);
 }
 
 .sidebar-view-toggle {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    border: 1px solid rgba(118, 103, 84, 0.3);
-    background: rgba(255, 255, 255, 0.85);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    transition: all 0.2s ease;
-    color: var(--claude-text);
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid rgba(118, 103, 84, 0.3);
+  background: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  transition: all 0.2s ease;
+  color: var(--claude-text);
 }
 
 .sidebar-view-toggle:hover {
-    background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .sidebar-panel-card-wrapper {
-    padding: 0 18px 24px;
-    flex: 1 1 auto;
-    display: flex;
-    min-height: 0;
+  padding: 0 18px 24px;
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
 }
 
 .sidebar-panel-card {
-    background: var(--claude-panel);
-    border: 1px solid var(--claude-border);
-    border-radius: 18px;
-    box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
+  background: var(--claude-panel);
+  border: 1px solid var(--claude-border);
+  border-radius: 18px;
+  box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 .sidebar-panel-card .sidebar-header {
-    border-radius: 18px 18px 0 0;
+  border-radius: 18px 18px 0 0;
 }
 
 .sidebar-panel-content {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    overflow: hidden;
-    background: var(--claude-sidebar);
-    padding: 6px 12px 24px;
-    border-radius: 0 0 18px 18px;
-    border-top: 1px solid rgba(118, 103, 84, 0.12);
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--claude-sidebar);
+  padding: 6px 12px 24px;
+  border-radius: 0 0 18px 18px;
+  border-top: 1px solid rgba(118, 103, 84, 0.12);
 }
 
 .panel-menu-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
 }
 
 .panel-menu {
-    position: absolute;
-    left: calc(100% + 8px);
-    top: 0;
-    display: flex;
-    gap: 6px;
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgba(118, 103, 84, 0.2);
-    border-radius: 8px;
-    padding: 6px 8px;
-    box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12);
-    z-index: 20;
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 0;
+  display: flex;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(118, 103, 84, 0.2);
+  border-radius: 8px;
+  padding: 6px 8px;
+  box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12);
+  z-index: 20;
 }
 
 .panel-menu button {
-    border: none;
-    background: transparent;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 4px 6px;
-    border-radius: 6px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 6px;
 }
 
 .panel-menu button.active {
-    background: rgba(108, 92, 231, 0.1);
+  background: rgba(108, 92, 231, 0.1);
 }
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-    opacity: 0;
+  opacity: 0;
 }
 
 .sidebar.right-sidebar.collapsed {
-    width: 0 !important;
-    min-width: 0 !important;
-    border-left: none;
-    overflow: hidden;
-    opacity: 0;
-    transform: translateX(8px);
+  width: 0 !important;
+  min-width: 0 !important;
+  border-left: none;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(8px);
 }
 
 .sidebar.right-sidebar.collapsed .sidebar-header,
 .sidebar.right-sidebar.collapsed .focused-files,
 .sidebar.right-sidebar.collapsed .approval-panel-body {
-    opacity: 0;
-    pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* 文件树 */
 .file-tree {
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 16px 20px 24px;
-    color: var(--claude-text);
-    overflow-y: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 16px 20px 24px;
+  color: var(--claude-text);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .file-tree::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  width: 0;
+  height: 0;
 }
 
 .todo-panel {
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 16px 20px 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 16px 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
 }
 
 .sub-agent-panel {
-    padding: 16px 20px 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
+  padding: 16px 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 /* 左侧四个工作面板统一支持纵向滚动 */
 .file-tree,
 .todo-panel,
 .sub-agent-panel {
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .file-tree::-webkit-scrollbar,
 .todo-panel::-webkit-scrollbar,
 .sub-agent-panel::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  width: 0;
+  height: 0;
 }
 
 .sub-agent-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .sub-agent-card {
-    border: 1px solid rgba(118, 103, 84, 0.2);
-    border-radius: 10px;
-    padding: 12px 14px;
-    background: rgba(255, 255, 255, 0.92);
-    cursor: pointer;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  border: 1px solid rgba(118, 103, 84, 0.2);
+  border-radius: 10px;
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.92);
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 
-    [data-theme="dark"] & {
-        background: rgba(30, 30, 30, 0.6);
-        border-color: rgba(255, 255, 255, 0.1);
-    }
+  [data-theme='dark'] & {
+    background: rgba(30, 30, 30, 0.6);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
 }
 
 .sub-agent-card:hover {
-    border-color: #6c5ce7;
-    box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15);
+  border-color: #6c5ce7;
+  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15);
 
-    [data-theme="dark"] & {
-        border-color: #8b7ce7;
-        box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25);
-    }
+  [data-theme='dark'] & {
+    border-color: #8b7ce7;
+    box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25);
+  }
 }
 
 .sub-agent-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 600;
-    margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+  margin-bottom: 6px;
 }
 
 .sub-agent-status {
-    text-transform: capitalize;
-    font-size: 12px;
+  text-transform: capitalize;
+  font-size: 12px;
 }
 
 .sub-agent-status.running {
-    color: #0984e3;
+  color: #0984e3;
 }
 
 .sub-agent-status.completed {
-    color: #00b894;
+  color: #00b894;
 }
 
 .sub-agent-status.failed,
 .sub-agent-status.timeout,
 .sub-agent-status.terminated,
 .sub-agent-status.cancelled {
-    color: #d63031;
+  color: #d63031;
 }
 
 .sub-agent-summary {
-    font-size: 13px;
-    color: var(--claude-text);
-    margin-bottom: 4px;
+  font-size: 13px;
+  color: var(--claude-text);
+  margin-bottom: 4px;
 }
 
 .background-command-summary {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sub-agent-tool {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
+  font-size: 12px;
+  color: var(--claude-text-secondary);
 }
 
 .todo-empty,
 .sub-agent-empty,
 .file-tree-empty {
-    font-size: 14px;
-    color: var(--claude-text-secondary);
-    padding: 10px 14px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.8);
-    border: 1px dashed var(--claude-border);
-    text-align: center;
+  font-size: 14px;
+  color: var(--claude-text-secondary);
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px dashed var(--claude-border);
+  text-align: center;
 
-    [data-theme="dark"] & {
-        background: rgba(20, 20, 20, 0.9);
-        border-color: rgba(255, 255, 255, 0.12);
-    }
+  [data-theme='dark'] & {
+    background: rgba(20, 20, 20, 0.9);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
 }
 
 .file-tree-empty--host {
-    text-align: left;
+  text-align: left;
 }
 
 .host-workspace-section {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .host-workspace-switcher {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .host-workspace-header-box {
-    width: min(100%, 360px);
-    margin: 0 auto;
-    border-radius: 12px;
-    border: 1px dashed var(--claude-border-strong);
-    background: var(--theme-surface-muted);
-    padding: 10px 12px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: min(100%, 360px);
+  margin: 0 auto;
+  border-radius: 12px;
+  border: 1px dashed var(--claude-border-strong);
+  background: var(--theme-surface-muted);
+  padding: 10px 12px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .host-workspace-add-btn {
-    position: absolute;
-    right: 10px;
-    width: 22px;
-    height: 22px;
-    appearance: none;
-    -webkit-appearance: none;
-    border: none;
-    background: transparent;
-    padding: 0;
-    color: var(--claude-text);
-    font-size: 22px;
-    font-weight: 500;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: none;
+  position: absolute;
+  right: 10px;
+  width: 22px;
+  height: 22px;
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--claude-text);
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: none;
 
-    &:hover:not(:disabled) {
-        color: var(--claude-accent);
-    }
+  &:hover:not(:disabled) {
+    color: var(--claude-accent);
+  }
 
-    &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 }
 
 .host-workspace-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--claude-text);
-    text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--claude-text);
+  text-align: center;
 }
 
 .host-workspace-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .host-workspace-card {
-    width: 100%;
-    border: 1px solid var(--theme-control-border);
-    background: var(--theme-surface-soft);
-    border-radius: 10px;
-    padding: 10px 12px;
-    text-align: left;
-    color: var(--claude-text);
-    cursor: pointer;
-    transition: border-color 0.2s ease, transform 0.2s ease;
+  width: 100%;
+  border: 1px solid var(--theme-control-border);
+  background: var(--theme-surface-soft);
+  border-radius: 10px;
+  padding: 10px 12px;
+  text-align: left;
+  color: var(--claude-text);
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
 
-    &:hover:not(:disabled) {
-        border-color: var(--claude-accent);
-        transform: translateY(-1px);
-    }
+  &:hover:not(:disabled) {
+    border-color: var(--claude-accent);
+    transform: translateY(-1px);
+  }
 
-    &:disabled {
-        cursor: default;
-        opacity: 0.95;
-    }
+  &:disabled {
+    cursor: default;
+    opacity: 0.95;
+  }
 
-    &.active {
-        border-color: var(--claude-accent);
-        background: var(--claude-highlight);
-    }
+  &.active {
+    border-color: var(--claude-accent);
+    background: var(--claude-highlight);
+  }
 }
 
 .host-workspace-card-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .host-workspace-label {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--claude-text);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--claude-text);
 }
 
 .host-workspace-badges {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .host-workspace-badge {
-    border-radius: 999px;
-    padding: 2px 8px;
-    font-size: 11px;
-    line-height: 1.2;
-    border: 1px solid var(--theme-control-border);
-    color: var(--claude-text-secondary);
-    background: var(--theme-surface-muted);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.2;
+  border: 1px solid var(--theme-control-border);
+  color: var(--claude-text-secondary);
+  background: var(--theme-surface-muted);
 
-    &.default {
-        color: var(--claude-deep-strong);
-        border-color: rgba(208, 122, 20, 0.35);
-        background: rgba(242, 169, 59, 0.14);
-    }
+  &.default {
+    color: var(--claude-deep-strong);
+    border-color: rgba(208, 122, 20, 0.35);
+    background: rgba(242, 169, 59, 0.14);
+  }
 
-    &.current {
-        color: #2f6f4e;
-        border-color: rgba(47, 111, 78, 0.35);
-        background: rgba(118, 176, 134, 0.18);
-    }
+  &.current {
+    color: #2f6f4e;
+    border-color: rgba(47, 111, 78, 0.35);
+    background: rgba(118, 176, 134, 0.18);
+  }
 }
 
-[data-theme="dark"] .host-workspace-header-box {
-    background: rgba(30, 30, 30, 0.78);
-    border-color: rgba(160, 160, 160, 0.45);
+[data-theme='dark'] .host-workspace-header-box {
+  background: rgba(30, 30, 30, 0.78);
+  border-color: rgba(160, 160, 160, 0.45);
 }
 
-[data-theme="dark"] .host-workspace-card {
-    &.active {
-        background: rgba(255, 255, 255, 0.08);
-    }
+[data-theme='dark'] .host-workspace-card {
+  &.active {
+    background: rgba(255, 255, 255, 0.08);
+  }
 }
 
-[data-theme="dark"] .host-workspace-badge {
-    &.default {
-        color: #f7c56f;
-        border-color: rgba(247, 197, 111, 0.35);
-        background: rgba(247, 197, 111, 0.16);
-    }
+[data-theme='dark'] .host-workspace-badge {
+  &.default {
+    color: #f7c56f;
+    border-color: rgba(247, 197, 111, 0.35);
+    background: rgba(247, 197, 111, 0.16);
+  }
 
-    &.current {
-        color: #8edbb4;
-        border-color: rgba(142, 219, 180, 0.34);
-        background: rgba(16, 185, 129, 0.2);
-    }
+  &.current {
+    color: #8edbb4;
+    border-color: rgba(142, 219, 180, 0.34);
+    background: rgba(16, 185, 129, 0.2);
+  }
 }
 
 .host-workspace-path {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
-    word-break: break-all;
+  font-size: 12px;
+  color: var(--claude-text-secondary);
+  word-break: break-all;
 }
 
 .host-workspace-hint {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
+  font-size: 12px;
+  color: var(--claude-text-secondary);
 }
 
 .todo-task {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 14px;
-    border: 1px solid rgba(118, 103, 84, 0.18);
-    border-radius: 10px;
-    font-size: 13px;
-    color: var(--claude-text);
-    background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border: 1px solid rgba(118, 103, 84, 0.18);
+  border-radius: 10px;
+  font-size: 13px;
+  color: var(--claude-text);
+  background: rgba(255, 255, 255, 0.9);
 }
 
 .todo-task.done {
-    background: rgba(92, 190, 125, 0.08);
-    border-color: rgba(92, 190, 125, 0.3);
+  background: rgba(92, 190, 125, 0.08);
+  border-color: rgba(92, 190, 125, 0.3);
 }
 
 .todo-task-title {
-    flex: 1;
+  flex: 1;
 }
 
 .todo-task-status {
-    font-weight: 600;
-    font-size: 12px;
-    margin-left: 12px;
+  font-weight: 600;
+  font-size: 12px;
+  margin-left: 12px;
 }
 
 .todo-instruction {
-    font-size: 12px;
-    color: var(--claude-text-secondary);
-    margin-top: 8px;
+  font-size: 12px;
+  color: var(--claude-text-secondary);
+  margin-top: 8px;
 }
 
 .file-node-wrapper {
-    font-size: 14px;
-    color: var(--claude-text);
-    font-family: inherit;
+  font-size: 14px;
+  color: var(--claude-text);
+  font-family: inherit;
 }
 
 .folder-header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 12px;
-    border: none;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    border-radius: 8px;
-    transition: background 0.2s ease, transform 0.2s ease;
-    text-align: left;
-    font-family: inherit;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 8px;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
+  text-align: left;
+  font-family: inherit;
 }
 
 .folder-header:hover {
-    background: var(--claude-highlight);
-    transform: translateX(2px);
+  background: var(--claude-highlight);
+  transform: translateX(2px);
 }
 
 .folder-arrow {
-    width: 12px;
-    text-align: center;
-    color: var(--claude-text-secondary);
-    font-size: 12px;
+  width: 12px;
+  text-align: center;
+  color: var(--claude-text-secondary);
+  font-size: 12px;
 }
 
 .folder-icon,
 .file-icon {
-    width: 18px;
-    text-align: center;
+  width: 18px;
+  text-align: center;
 }
 
 .folder-name,
 .file-name {
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: inherit;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: inherit;
 }
 .folder-children {
-    margin-left: 14px;
-    padding-left: 6px;
-    border-left: 1px dashed rgba(0, 0, 0, 0.08);
+  margin-left: 14px;
+  padding-left: 6px;
+  border-left: 1px dashed rgba(0, 0, 0, 0.08);
 }
 
 .folder-children .file-node-wrapper {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .file-node.file-leaf {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 12px;
-    border-radius: 8px;
-    font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-family: inherit;
 }
 
 .file-node.file-leaf:hover {
-    background: var(--claude-highlight);
+  background: var(--claude-highlight);
 }
 
 .file-node .annotation {
-    color: var(--claude-text-secondary);
-    font-size: 12px;
-    margin-left: 8px;
+  color: var(--claude-text-secondary);
+  font-size: 12px;
+  margin-left: 8px;
 }
 
 .context-menu {
-    position: fixed;
-    background: #ffffff;
-    border: 1px solid rgba(15, 23, 42, 0.08);
-    border-radius: 8px;
-    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
-    z-index: 3000;
-    min-width: 180px;
-    padding: 6px 0;
-    backdrop-filter: blur(8px);
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
+  z-index: 3000;
+  min-width: 180px;
+  padding: 6px 0;
+  backdrop-filter: blur(8px);
 }
 
 .context-menu button {
-    width: 100%;
-    padding: 8px 18px;
-    background: transparent;
-    border: none;
-    text-align: left;
-    font-size: 13px;
-    color: #1f2933;
-    cursor: pointer;
-    transition: background 0.15s ease;
+  width: 100%;
+  padding: 8px 18px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-size: 13px;
+  color: #1f2933;
+  cursor: pointer;
+  transition: background 0.15s ease;
 }
 
 .context-menu button:hover {
-    background: rgba(59, 130, 246, 0.12);
+  background: rgba(59, 130, 246, 0.12);
 }
 
 .context-menu button:disabled {
-    color: #9ca3af;
-    cursor: not-allowed;
-    background: transparent;
+  color: #9ca3af;
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* Targeted refinement: keep workspace content/layout, only polish switcher/menu/manage controls. */
+.sidebar-manage-btn {
+  height: 32px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--claude-text);
+  padding: 0 11px;
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.sidebar-manage-btn:hover {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+  border-color: transparent;
+}
+
+.sidebar-view-toggle {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  border: 0;
+  background: transparent;
+  color: var(--claude-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.sidebar-view-toggle:hover {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+}
+
+.panel-menu {
+  left: calc(100% + 8px);
+  top: 0;
+  display: flex;
+  gap: 4px;
+  background: var(--theme-surface-strong, #ffffff);
+  border: 1px solid var(--claude-border);
+  border-radius: 14px;
+  padding: 6px;
+  box-shadow: var(--theme-shadow-soft);
+  z-index: 20;
+}
+
+.panel-menu button {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 10px;
+  color: var(--claude-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.panel-menu button:hover,
+.panel-menu button.active {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
 }
diff --git a/static/src/styles/components/sidebar/_conversation.scss b/static/src/styles/components/sidebar/_conversation.scss
index 3388a07..fdf3e42 100644
--- a/static/src/styles/components/sidebar/_conversation.scss
+++ b/static/src/styles/components/sidebar/_conversation.scss
@@ -1,731 +1,512 @@
-/* ========================================= */
-/* 新增：对话历史侧边栏样式 */
-/* ========================================= */
-
+/* Modern reveal conversation sidebar */
 .conversation-sidebar {
-    width: 280px;
-    background-color: var(--claude-left-rail);
-    border-right: none;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 50;
-    height: var(--app-viewport, 100vh) !important;
-    min-height: var(--app-viewport, 100vh) !important;
-    border-bottom: 1px solid var(--claude-border);
-}
-
-.conversation-sidebar,
-.conversation-sidebar .conversation-header,
-.conversation-sidebar .conversation-search,
-.conversation-sidebar .conversation-list,
-.conversation-sidebar .conversation-personal-entry,
-.conversation-sidebar .conversation-collapsed-spacer {
-    background-color: var(--claude-left-rail);
-}
-
-.conversation-collapsed-spacer {
-    flex: 1 1 auto;
-    background-color: inherit;
+  --conversation-collapsed-width: 52px;
+  --conversation-expanded-width: 306px;
+  --conversation-icon-cell: 40px;
+  --conversation-row-height: 40px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 120;
+  width: var(--conversation-expanded-width);
+  height: var(--app-viewport, 100vh) !important;
+  min-height: var(--app-viewport, 100vh) !important;
+  overflow: hidden;
+  background: var(--claude-left-rail);
+  border-right: 1px solid var(--claude-border);
+  color: var(--claude-text);
+  transition:
+    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 160ms ease;
 }
 
 .conversation-sidebar.collapsed {
-    width: 50px;
-    overflow: hidden;
-    height: var(--app-viewport, 100vh) !important;
-    min-height: var(--app-viewport, 100vh) !important;
-    background-color: var(--claude-left-rail);
+  width: var(--conversation-collapsed-width);
 }
 
-.conversation-header {
-    padding: 12px 16px;
-    border-bottom: 1px solid rgba(118, 103, 84, 0.12);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    background-color: inherit;
-    color: var(--claude-text);
-    position: sticky;
-    top: 0;
-    z-index: 60;
-    min-height: 62px;
+.conversation-sidebar-inner {
+  width: var(--conversation-expanded-width);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 18px 8px 14px 6px;
+  background: inherit;
 }
 
-.conversation-header.collapsed-layout {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 16px 6px 12px;
-    gap: 14px;
-    border-bottom: none;
+.conversation-primary-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 0 0 auto;
 }
 
-.workspace-immersive-toggle {
-    padding: 12px 16px 8px;
-    background-color: inherit;
+.sidebar-nav-row,
+.search-input-wrap,
+.conversation-sidebar .conversation-item {
+  width: 100%;
+  min-height: var(--conversation-row-height);
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--claude-text);
+  display: grid;
+  align-items: center;
 }
 
-.workspace-immersive-toggle.collapsed {
-    padding: 12px 0 8px;
-    display: flex;
-    justify-content: center;
+.sidebar-nav-row {
+  grid-template-columns: var(--conversation-icon-cell) minmax(0, 1fr);
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
 }
 
-.workspace-immersive-btn {
-    width: 100%;
-    border: none;
-    border-radius: 12px;
-    background: transparent;
-    color: var(--claude-text);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 10px 14px;
-    cursor: pointer;
-    font-size: 13px;
-    transition:
-        color 0.2s ease,
-        transform 0.2s ease;
+.sidebar-nav-icon {
+  width: var(--conversation-icon-cell);
+  height: var(--conversation-row-height);
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: currentColor;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
 }
 
-.workspace-immersive-btn .workspace-immersive-icon {
-    width: 22px;
-    height: 22px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+.conversation-sidebar.collapsed .sidebar-nav-row:hover,
+.conversation-sidebar.collapsed .sidebar-nav-row:focus-visible {
+  background: transparent;
 }
 
-.workspace-immersive-btn .workspace-immersive-label {
-    font-size: 13px;
-    font-weight: 500;
+.conversation-sidebar.collapsed .sidebar-nav-row:hover .sidebar-nav-icon,
+.conversation-sidebar.collapsed .sidebar-nav-row:focus-visible .sidebar-nav-icon {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
 }
 
-.workspace-immersive-btn:hover,
-.workspace-immersive-btn:focus-visible {
-    color: var(--claude-accent);
-    outline: none;
-    transform: translateY(-1px);
+.conversation-sidebar:not(.collapsed) .sidebar-nav-row:hover,
+.conversation-sidebar:not(.collapsed) .sidebar-nav-row:focus-visible,
+.conversation-sidebar:not(.collapsed) .sidebar-nav-row.active {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+  outline: none;
 }
 
-.workspace-immersive-btn.active {
-    color: var(--claude-accent);
+.sidebar-nav-label,
+.conversation-search,
+.conversation-list,
+.personal-label {
+  opacity: 1;
+  transition: opacity 220ms ease;
+  transition-delay: 80ms;
 }
 
-.workspace-immersive-toggle.collapsed .workspace-immersive-btn {
-    width: 100%;
-    height: auto;
-    border-radius: 10px;
-    padding: 8px;
+.conversation-sidebar.collapsed .sidebar-nav-label,
+.conversation-sidebar.collapsed .conversation-search,
+.conversation-sidebar.collapsed .conversation-list,
+.conversation-sidebar.collapsed .personal-label {
+  opacity: 0;
+  transition-delay: 0ms;
 }
 
-.workspace-immersive-toggle.collapsed .workspace-immersive-btn .workspace-immersive-label {
-    display: none;
+.sidebar-nav-label {
+  min-width: 0;
+  padding-left: 8px;
+  padding-right: 12px;
+  font-size: 15px;
+  line-height: 1;
+  letter-spacing: -0.015em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.collapsed-header-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    width: 100%;
-    align-items: center;
-}
-
-.collapsed-control-btn {
-    width: 56px;
-    height: 56px;
-    border-radius: 28px;
-    border: none;
-    background: transparent;
-    color: var(--claude-text);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    padding: 0;
-    box-shadow: none;
-    transition: transform 0.2s ease, color 0.2s ease;
-}
-
-.collapsed-control-btn:hover {
-    transform: translateY(-1px);
-    color: var(--claude-accent);
-}
-
-.monitor-mode-btn.blocked {
-    color: var(--claude-text-tertiary);
-    opacity: 0.55;
-    cursor: pointer;
-}
-
-.monitor-mode-btn.blocked:hover {
-    color: var(--claude-accent);
-    opacity: 0.75;
-}
-
-.conversation-menu-btn {
-    color: #31271d;
-}
-
-.conversation-menu-btn:hover {
-    color: var(--claude-accent);
-}
-
-.chat-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.conversation-menu-btn svg {
-    width: 30px;
-    height: 30px;
-}
-
-.quick-plus-btn {
-    width: 48px;
-    height: 48px;
-    border-radius: 24px;
-    border: none;
-    background: transparent;
-    color: #2f251b;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: color 0.25s ease, transform 0.2s ease;
-}
-
-.quick-plus-btn:hover,
-.quick-plus-btn:focus-visible {
-    color: var(--claude-accent);
-    transform: translateY(-1px);
+.chat-icon svg {
+  width: 29px;
+  height: 29px;
 }
 
 .pencil-icon svg {
-    width: 22px;
-    height: 22px;
+  width: 22px;
+  height: 22px;
 }
 
-.display-mode-btn {
-    border: none;
-    border-radius: 12px;
-    padding: 10px 14px;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(255, 255, 255, 0.4);
-    color: var(--claude-text);
-    cursor: pointer;
-    transition: background 0.2s ease, transform 0.2s ease;
-}
-
-.display-mode-btn .btn-text {
-    font-size: 13px;
-}
-
-.display-mode-btn.active {
-    background: var(--claude-highlight);
-    color: var(--claude-accent);
-}
-
-.display-mode-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.monitor-mode-btn {
-    background: transparent;
-    color: inherit;
-}
-
-.monitor-mode-btn.active {
-    color: var(--claude-accent);
-}
-
-.monitor-mode-btn:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-}
-
-.conversation-sidebar.monitor-mode {
-    --monitor-sidebar-icon: #0f141a;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .conversation-header {
-    gap: 10px;
-    padding: 16px 18px;
-    justify-content: flex-start;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .conversation-header button {
-    width: 48px;
-    height: 48px;
-    min-width: 48px;
-    min-height: 48px;
-    border-radius: 24px;
-    border: none;
-    background: transparent;
-    box-shadow: none;
-    padding: 0;
-    color: var(--monitor-sidebar-icon);
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: color 0.2s ease;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .conversation-header button:hover,
-.conversation-sidebar.monitor-mode:not(.collapsed) .conversation-header button:focus-visible {
-    color: var(--claude-accent);
-    background: transparent;
-    outline: none;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .new-conversation-btn,
-.conversation-sidebar.monitor-mode:not(.collapsed) .display-mode-btn,
-.conversation-sidebar.monitor-mode:not(.collapsed) .toggle-sidebar-btn {
-    gap: 0;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .display-mode-btn.active {
-    background: transparent;
-    color: var(--monitor-sidebar-icon);
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .icon-only .btn-icon,
-.conversation-sidebar.monitor-mode:not(.collapsed) .icon-only .btn-text,
-.conversation-sidebar.monitor-mode:not(.collapsed) .icon-only .toggle-arrow,
-.conversation-sidebar.monitor-mode:not(.collapsed) .icon-only .toggle-close {
-    display: none;
-}
-
-.conversation-sidebar.monitor-mode:not(.collapsed) .monitor-icon-slot {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    --icon-size: 22px;
-    color: inherit;
-}
-
-.conversation-sidebar.monitor-mode .collapsed-control-btn,
-.conversation-sidebar.monitor-mode .monitor-mode-btn,
-.conversation-sidebar.monitor-mode .new-conversation-btn,
-.conversation-sidebar.monitor-mode .display-mode-btn,
-.conversation-sidebar.monitor-mode .toggle-sidebar-btn {
-    background: transparent;
-    border: none;
-    box-shadow: none;
-    color: var(--monitor-sidebar-icon);
-    transition: color 0.2s ease, transform 0.2s ease;
-}
-
-.conversation-sidebar.monitor-mode .collapsed-control-btn:hover,
-.conversation-sidebar.monitor-mode .monitor-mode-btn:hover,
-.conversation-sidebar.monitor-mode .new-conversation-btn:hover,
-.conversation-sidebar.monitor-mode .display-mode-btn:hover,
-.conversation-sidebar.monitor-mode .toggle-sidebar-btn:hover,
-.conversation-sidebar.monitor-mode .collapsed-control-btn:focus-visible,
-.conversation-sidebar.monitor-mode .monitor-mode-btn:focus-visible,
-.conversation-sidebar.monitor-mode .new-conversation-btn:focus-visible,
-.conversation-sidebar.monitor-mode .display-mode-btn:focus-visible,
-.conversation-sidebar.monitor-mode .toggle-sidebar-btn:focus-visible {
-    background: transparent;
-    color: var(--claude-accent);
-    outline: none;
-}
-
-.workspace-control-btn.active {
-    color: var(--claude-accent);
-}
-
-.pencil-icon path {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.new-conversation-btn {
-    flex: 1;
-    background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
-    color: #fff8f2;
-    border: 1px solid rgba(189, 93, 58, 0.4);
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    box-shadow: 0 6px 14px rgba(189, 93, 58, 0.18);
-}
-
-.new-conversation-btn:hover {
-    background: linear-gradient(135deg, var(--claude-button-hover) 0%, var(--claude-button-active) 100%);
-    transform: translateY(-1px);
-}
-
-.btn-icon {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.btn-text {
-    white-space: nowrap;
-}
-
-.toggle-sidebar-btn {
-    background: rgba(255, 255, 255, 0.7);
-    color: var(--claude-text);
-    border: 1px solid rgba(118, 103, 84, 0.18);
-    padding: 6px 8px;
-    border-radius: 4px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    min-width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.toggle-sidebar-btn:hover {
-    background: rgba(255, 255, 255, 0.9);
-}
-
-.conversation-personal-entry {
-    margin-top: auto;
-    padding: 4px 16px 12px;
-    display: flex;
-    justify-content: center;
-    background-color: inherit;
-}
-
-.conversation-personal-entry.collapsed {
-    padding: 4px 0 10px;
-}
-
-.personal-page-btn {
-    border: none;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--claude-text);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    padding: 10px 18px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: color 0.2s ease, transform 0.2s ease;
-}
-
-.conversation-personal-entry:not(.collapsed) .personal-page-btn {
-    width: 100%;
-    justify-content: flex-start;
-    padding: 8px 12px;
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.4);
-}
-
-.personal-page-btn svg {
-    width: 20px;
-    height: 20px;
-}
-
-.personal-page-btn:hover,
-.personal-page-btn:focus-visible {
-    color: var(--claude-accent);
-    transform: translateY(-1px);
-}
-
-.personal-page-btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--claude-highlight);
-}
-
-.personal-page-btn.icon-only {
-    width: 54px;
-    height: 54px;
-    padding: 0;
-    border-radius: 27px;
-    color: var(--claude-text);
-}
-
-.personal-page-btn.icon-only svg {
-    width: 26px;
-    height: 26px;
-}
-
-.personal-page-btn.icon-only:hover,
-.personal-page-btn.icon-only:focus-visible {
-    color: var(--claude-accent);
-    transform: translateY(-1px);
-}
-
-.conversation-personal-entry:not(.collapsed) .personal-page-btn:hover,
-.conversation-personal-entry:not(.collapsed) .personal-page-btn:focus-visible {
-    background: var(--claude-highlight);
-}
-
-.personal-label {
-    letter-spacing: 0.02em;
-}
-
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
+.monitor-mode-btn.blocked {
+  color: var(--claude-text-tertiary);
+  opacity: 0.6;
 }
 
 .conversation-search {
-    padding: 12px;
-    background-color: inherit;
-    border-bottom: 1px solid var(--claude-border);
+  flex: 0 0 auto;
+  margin-top: 10px;
 }
 
 .search-input-wrap {
-    position: relative;
-    width: 100%;
+  grid-template-columns: var(--conversation-icon-cell) minmax(0, 1fr);
+  height: var(--conversation-row-height);
+  overflow: hidden;
+  transition: background 140ms ease;
+}
+
+.search-input-wrap:hover,
+.search-input-wrap:focus-within {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+}
+
+.search-inline-icon {
+  color: var(--claude-text-secondary);
 }
 
 .search-input {
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--claude-border);
-    border-radius: 6px;
-    font-size: 13px;
-    background: rgba(255, 255, 255, 0.55);
-    color: var(--claude-text);
-    transition: all 0.2s ease;
+  min-width: 0;
+  width: calc(var(--conversation-expanded-width) - var(--conversation-icon-cell) - 22px);
+  height: var(--conversation-row-height);
+  border: 0;
+  outline: 0;
+  padding: 0 12px 0 8px;
+  background: transparent;
+  color: var(--claude-text);
+  font-size: 14px;
+  letter-spacing: -0.01em;
 }
 
-.search-input:focus {
-    outline: none;
-    border-color: var(--claude-accent);
-    background: rgba(255, 255, 255, 0.85);
-    box-shadow: 0 0 0 3px var(--claude-highlight);
+.search-input::placeholder {
+  color: var(--claude-text-secondary);
 }
 
-.conversation-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px 0;
-    background-color: inherit;
+.conversation-sidebar .conversation-list {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding-top: 12px;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none;
+}
+
+.conversation-sidebar .conversation-list::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.conversation-sidebar .conversation-item {
+  position: relative;
+  grid-template-columns: minmax(0, 1fr) 40px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.conversation-sidebar .conversation-item:hover,
+.conversation-sidebar .conversation-item:focus-within,
+.conversation-sidebar .conversation-item.active:hover,
+.conversation-sidebar .conversation-item.active:focus-within {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055)) !important;
+  box-shadow: none !important;
+}
+
+.conversation-sidebar .conversation-item.active {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+:root[data-theme='dark'] .conversation-sidebar .conversation-item:hover,
+:root[data-theme='dark'] .conversation-sidebar .conversation-item:focus-within,
+:root[data-theme='dark'] .conversation-sidebar .conversation-item.active:hover,
+:root[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-within,
+body[data-theme='dark'] .conversation-sidebar .conversation-item:hover,
+body[data-theme='dark'] .conversation-sidebar .conversation-item:focus-within,
+body[data-theme='dark'] .conversation-sidebar .conversation-item.active:hover,
+body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-within {
+  background: rgba(255, 255, 255, 0.078) !important;
+  box-shadow: none !important;
+}
+
+.conversation-sidebar .conversation-title {
+  min-width: 0;
+  padding-left: 12px;
+  padding-right: 4px;
+  color: var(--claude-text);
+  font-size: 14px;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.conversation-sidebar .conversation-action-wrap {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  justify-self: start;
+}
+
+.conversation-sidebar .conversation-more-btn {
+  width: 30px;
+  height: 30px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--claude-text-secondary);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 160ms ease,
+    color 140ms ease;
+}
+
+.conversation-sidebar .conversation-item:hover .conversation-more-btn,
+.conversation-sidebar .conversation-action-wrap.menu-open .conversation-more-btn {
+  opacity: 1;
+}
+
+.conversation-sidebar .conversation-more-btn:hover,
+.conversation-sidebar .conversation-action-wrap.menu-open .conversation-more-btn {
+  color: var(--claude-text);
+}
+
+.conversation-sidebar .conversation-more-btn span {
+  position: relative;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+}
+
+.conversation-sidebar .conversation-more-btn span::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  width: 3.5px;
+  height: 3.5px;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow:
+    5.5px 0 0 currentColor,
+    11px 0 0 currentColor;
+}
+
+.conversation-sidebar .conversation-actions-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 140;
+  width: max-content;
+  min-width: 92px;
+  padding: 6px;
+  border: 1px solid var(--claude-border);
+  border-radius: 14px;
+  background: var(--theme-surface-strong, #fff);
+  box-shadow: var(--theme-shadow-soft);
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+  pointer-events: none;
+  transition:
+    opacity 120ms ease,
+    transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.conversation-sidebar .conversation-actions-menu.open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.conversation-sidebar .conversation-actions-menu button {
+  width: 100%;
+  min-width: 80px;
+  height: 36px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--claude-text);
+  display: grid;
+  grid-template-columns: 24px auto;
+  align-items: center;
+  gap: 4px;
+  padding: 0 10px 0 8px;
+  text-align: left;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 140ms ease;
+}
+
+.conversation-sidebar .conversation-actions-menu button:hover {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+}
+
+.conversation-sidebar .conversation-actions-menu button.danger {
+  color: #d6483b;
+}
+
+.conversation-personal-entry {
+  margin-top: 8px;
+  flex: 0 0 auto;
+}
+
+.personal-page-btn svg {
+  width: 22px;
+  height: 22px;
 }
 
 .loading-conversations,
-o-conversations {
-    text-align: center;
-    color: var(--claude-text-secondary);
-    padding: 30px 15px;
-    font-size: 13px;
-}
-
-.no-conversations {
-    text-align: center;
-    color: var(--claude-text-secondary);
-    padding: 30px 15px;
-    font-size: 13px;
-}
-
-.search-more {
-    padding: 8px 12px 16px;
-}
-
+.no-conversations,
+.search-done,
 .search-progress {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    color: var(--claude-text-secondary);
-    font-size: 12px;
-}
-
-.search-spinner {
-    width: 16px;
-    height: 16px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-}
-
-.search-spinner-orbit {
-    position: absolute;
-    inset: 0;
-}
-
-.search-spinner-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation: search-wobble 0.9s ease-in-out infinite;
-}
-
-.search-done {
-    text-align: center;
-    color: var(--claude-text-secondary);
-    font-size: 12px;
-}
-
-@keyframes search-wobble {
-    from {
-        transform: translate(-50%, -50%) translateX(-1px);
-    }
-    50% {
-        transform: translate(-50%, -50%) translateX(1px);
-    }
-    to {
-        transform: translate(-50%, -50%) translateX(-1px);
-    }
-}
-
-.conversation-item {
-    padding: 12px 16px;
-    margin: 2px 8px;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 1px solid transparent;
-    position: relative;
-    background: rgba(255, 255, 255, 0.7);
-    box-shadow: 0 6px 16px rgba(61, 57, 41, 0.04);
-}
-
-.conversation-item:hover {
-    background: rgba(255, 255, 255, 0.85);
-    border-color: var(--claude-accent);
-    box-shadow: var(--theme-shadow-soft);
-}
-
-.conversation-item.active {
-    background: var(--claude-highlight);
-    border-color: var(--claude-accent);
-    box-shadow: var(--theme-shadow-soft);
-}
-
-.conversation-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--claude-text);
-    margin-bottom: 6px;
-    word-wrap: break-word;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    line-height: 1.3;
-}
-
-.conversation-meta {
-    font-size: 11px;
-    color: var(--claude-text-secondary);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2px;
-}
-
-.conversation-time {
-    flex-shrink: 0;
-}
-
-.conversation-counts {
-    text-align: right;
-    white-space: nowrap;
-    font-size: 10px;
-}
-
-.conversation-actions {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 6px;
-}
-
-.conversation-item:hover .conversation-actions {
-    opacity: 1;
-}
-
-.conversation-action-btn {
-    border: none;
-    border-radius: 4px;
-    font-size: 13px;
-    width: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    padding: 0;
-    color: white;
-}
-
-.conversation-action-btn.copy-btn {
-    background: var(--claude-accent);
-}
-
-.conversation-action-btn.copy-btn:hover {
-    background: var(--claude-button-hover);
-    transform: translateY(-1px);
-}
-
-.conversation-action-btn.delete-btn {
-    background: #d85a42;
-}
-
-.conversation-action-btn.delete-btn:hover {
-    background: #bf422b;
-    transform: translateY(-1px);
+  color: var(--claude-text-secondary);
+  font-size: 13px;
+  padding: 10px 12px;
+  white-space: nowrap;
 }
 
 .load-more {
-    padding: 12px 16px;
-    text-align: center;
+  padding: 10px 0;
 }
 
 .load-more-btn {
-    background: var(--claude-highlight);
-    color: var(--claude-accent);
-    border: 1px solid var(--claude-accent);
-    padding: 6px 14px;
-    border-radius: 6px;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  width: 100%;
+  height: 34px;
+  border: 0;
+  border-radius: 10px;
+  padding: 0 12px;
+  background: transparent;
+  color: var(--claude-text-secondary);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
 }
 
 .load-more-btn:hover:not(:disabled) {
-    background: var(--claude-accent);
-    color: #fffdf8;
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055));
+  color: var(--claude-text);
 }
 
 .load-more-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.search-spinner {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.search-spinner-orbit {
+  position: absolute;
+  inset: 0;
+}
+
+.search-spinner-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: search-wobble 0.9s ease-in-out infinite;
+}
+
+@keyframes search-wobble {
+  from {
+    transform: translate(-50%, -50%) translateX(-1px);
+  }
+  50% {
+    transform: translate(-50%, -50%) translateX(1px);
+  }
+  to {
+    transform: translate(-50%, -50%) translateX(-1px);
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* Final sidebar-specific guards against broad legacy rules. */
+.conversation-sidebar .search-input {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: 0 !important;
+}
+
+.conversation-sidebar .search-input:focus {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.conversation-sidebar .conversation-list {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none;
+}
+
+.conversation-sidebar .conversation-list::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.conversation-sidebar .personal-page-btn,
+.conversation-sidebar .conversation-personal-entry:not(.collapsed) .personal-page-btn {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.conversation-sidebar.collapsed .personal-page-btn:hover,
+.conversation-sidebar.collapsed .personal-page-btn:focus-visible {
+  background: transparent !important;
+}
+
+.conversation-sidebar.collapsed .personal-page-btn:hover .sidebar-nav-icon,
+.conversation-sidebar.collapsed .personal-page-btn:focus-visible .sidebar-nav-icon {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055)) !important;
+}
+
+.conversation-sidebar:not(.collapsed) .personal-page-btn:hover,
+.conversation-sidebar:not(.collapsed) .personal-page-btn:focus-visible {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055)) !important;
+}
+
+:root[data-theme='dark'] .conversation-sidebar:not(.collapsed) .personal-page-btn:hover,
+:root[data-theme='dark'] .conversation-sidebar:not(.collapsed) .personal-page-btn:focus-visible,
+body[data-theme='dark'] .conversation-sidebar:not(.collapsed) .personal-page-btn:hover,
+body[data-theme='dark'] .conversation-sidebar:not(.collapsed) .personal-page-btn:focus-visible {
+  background: rgba(255, 255, 255, 0.078) !important;
+}
+
+.conversation-sidebar .load-more-btn {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  text-align: left !important;
+}
+
+.conversation-sidebar .load-more-btn:hover:not(:disabled) {
+  background: var(--theme-tab-active, rgba(0, 0, 0, 0.055)) !important;
+}
+
+:root[data-theme='dark'] .conversation-sidebar .load-more-btn:hover:not(:disabled),
+body[data-theme='dark'] .conversation-sidebar .load-more-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.078) !important;
 }
diff --git a/static/src/styles/utilities/_responsive.scss b/static/src/styles/utilities/_responsive.scss
index 2987c03..4376bb8 100644
--- a/static/src/styles/utilities/_responsive.scss
+++ b/static/src/styles/utilities/_responsive.scss
@@ -3,37 +3,33 @@
 /* ========================================= */
 
 @media (max-width: 1200px) {
-    .conversation-sidebar {
-        width: 260px;
-    }
-    
-    .left-sidebar,
-    .right-sidebar {
-        width: 300px !important;
-    }
+  .left-sidebar,
+  .right-sidebar {
+    width: 300px !important;
+  }
 }
 
 @media (max-width: 768px) {
-    .conversation-sidebar {
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100%;
-        z-index: 1000;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transform: translateX(-100%);
-    }
-    
-    .conversation-sidebar:not(.collapsed) {
-        transform: translateX(0);
-    }
-    
-    .left-sidebar,
-    .right-sidebar {
-        display: none;
-    }
-    
-    .resize-handle {
-        display: none;
-    }
+  .conversation-sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    z-index: 1000;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    transform: translateX(-100%);
+  }
+
+  .conversation-sidebar:not(.collapsed) {
+    transform: translateX(0);
+  }
+
+  .left-sidebar,
+  .right-sidebar {
+    display: none;
+  }
+
+  .resize-handle {
+    display: none;
+  }
 }
diff --git a/static/src/utils/icons.ts b/static/src/utils/icons.ts
index c9f69df..5298a06 100644
--- a/static/src/utils/icons.ts
+++ b/static/src/utils/icons.ts
@@ -10,6 +10,7 @@ export const ICONS = Object.freeze({
   checkbox: '/static/icons/checkbox.svg',
   circleAlert: '/static/icons/circle-alert.svg',
   clipboard: '/static/icons/clipboard.svg',
+  copy: '/static/icons/copy.svg',
   clock: '/static/icons/clock.svg',
   eye: '/static/icons/eye.svg',
   file: '/static/icons/file.svg',