@blade-hq/agent-react 2610.0.0-beta.7 → 2610.0.0-beta.71

package/dist/style.css

@@ -1,11 +1,107 @@
 /*
  * @blade-hq/agent-react 自包含样式。
  *
- * 组件同时携带 Tailwind class 与 blade-chat-* 前缀类：宿主项目装了 Tailwind 时
- * 由 Tailwind 提供完整视觉；没装时，本文件为核心布局与配色提供等效的普通 CSS，
- * 保证聊天界面开箱可用。所有颜色经由 CSS 变量，宿主可整体换肤。
+ * 这份文件只放 Tailwind 工具类表达不了的东西，其余视觉一律由组件上的 Tailwind
+ * class 定义一次（R1：一个视觉效果只在一处定义）：
+ *
+ * - CSS 变量（主题、圆角、gutter）与 `:host` 尺寸默认值；
+ * - 容器查询（`@container`）：按「容器宽度」而不是视口伸缩的内边距与断点；
+ * - Markdown 排版：正文是 streamdown 生成的 HTML，没有类名可挂，只能在这里写；
+ * - 无 Tailwind 预检时组件仍需要的少量 rest（按钮游标、textarea 去边框）；
+ * - 跨元素的形状约束，如 `.blade-chat-messages-content > div` 的轮次间距。
+ *
+ * 组件上的 Tailwind class 不再需要在这里重复一份。视觉规则的层序见下面
+ * `@layer` 声明：兜底在 components 层，Tailwind 工具类在 utilities 层，
+ * 接入方无层的普通 CSS 天然最高优先——所以 `.blade-chat-user-bubble { background: red }`
+ * 一定生效，不需要 `!important`。
  */
 
+/* ------------------------------------------------------------ 语义锚点清单
+ *
+ * 公开契约：每个可见区块的根元素固定带一个 blade-chat-* 类，接入方用普通 CSS
+ * 选它即可覆盖 SDK 默认样式（README「样式定制」第 4 层），不需要 !important，
+ * 也不需要跟着 SDK 的构建顺序走。
+ *
+ * 锚点只承担「可被选中」职责，不承载视觉规则。下面的兜底样式里出现的锚点，
+ * 只是恰好需要兜底的那几个；清单本身才是契约的一部分。
+ *
+ * scripts/gen-embed-styles.mjs 会校验这份清单的两件事：源码里出现的每个锚点都
+ * 必须在这里登记；清单里的每个锚点都必须出现在三份 CSS 产物中。新增可见区块时
+ * 先在这里登记锚点，再让元素带上它。
+ *
+ * @blade-chat-anchors
+ * blade-chat
+ * blade-chat-advanced
+ * blade-chat-agent-loop
+ * blade-chat-ask-card
+ * blade-chat-ask-option
+ * blade-chat-assistant-text
+ * blade-chat-assistant-turn
+ * blade-chat-banner
+ * blade-chat-codeblock
+ * blade-chat-codeblock-body
+ * blade-chat-codeblock-header
+ * blade-chat-context-card
+ * blade-chat-context-chevron
+ * blade-chat-context-copy
+ * blade-chat-context-detail
+ * blade-chat-context-group-items
+ * blade-chat-context-icon
+ * blade-chat-context-status
+ * blade-chat-context-summary
+ * blade-chat-context-title
+ * blade-chat-empty
+ * blade-chat-error-bar
+ * blade-chat-error-block
+ * blade-chat-error-row
+ * blade-chat-file-card
+ * blade-chat-file-card-icon
+ * blade-chat-file-card-name
+ * blade-chat-followup
+ * blade-chat-followup-action
+ * blade-chat-host
+ * blade-chat-input
+ * blade-chat-input-inner
+ * blade-chat-input-toolbar
+ * blade-chat-login
+ * blade-chat-markdown
+ * blade-chat-mcp-app
+ * blade-chat-memory-refs
+ * blade-chat-messages
+ * blade-chat-messages-content
+ * blade-chat-messages-scroll
+ * blade-chat-plan
+ * blade-chat-plan-block
+ * blade-chat-prose
+ * blade-chat-queue
+ * blade-chat-queue-item
+ * blade-chat-queue-notice
+ * blade-chat-render-error
+ * blade-chat-replay-bar
+ * blade-chat-scroll-bottom
+ * blade-chat-scroll-bottom-label
+ * blade-chat-textarea
+ * blade-chat-thinking
+ * blade-chat-tool-row
+ * blade-chat-user-bubble
+ * blade-chat-user-col
+ * blade-chat-user-row
+ */
+
+/* 层序先定死：兜底排在 Tailwind 工具类之前，换肤和覆盖才有稳定的先后。
+ * 三份产物都从这一行开始，Tailwind 自己那份声明用的是同一个顺序。
+ *
+ * properties 是 Tailwind 自己的 --tw-* 初始值层，必须排在最前：它的 `* { --tw-*: … }`
+ * 一旦排在 utilities 之后，就会把工具类设的 translate / ring / shadow 变量初始化掉。
+ *
+ * 最后一层 blade-chat-overrides 是给「必须压过组件自己 Tailwind 类」的规则用的：窄容器里
+ * 放宽用户消息宽度、iOS 聚焦不缩放、代码块与 Markdown 的排版——这些规则一旦
+ * 掉进 components 层就会被同元素的 utilities 盖掉，等于没写。接入方的普通
+ * CSS 不分层，仍然赢过这里所有层。 */
+@layer properties, theme, base, components, utilities, blade-chat-overrides;
+
+/* 变量不分层：它是主题契约，接入方在页面或祖先元素上重设同名变量即可换肤，
+ * 分层反而让"谁覆盖谁"取决于产物拼接顺序。 */
 :root,
 :host {
   --background: 0 0% 100%;
@@ -54,496 +150,486 @@
   --user-msg-border: 38 30% 19%;
 }
 
-/* ---------------------------------------------------------------- 布局骨架 */
-
-/* <blade-chat> 宿主默认块级 + 默认高度；页面对元素写的任何尺寸规则都会覆盖
- * :host 默认值。host 容器把高度传导给内部 flex 链，消息区撑满、输入框钉底。 */
-:host {
-  display: block;
-  height: 560px;
-}
+@layer components {
+  /* -------------------------------------------------------------- 布局骨架 */
 
-.blade-chat-host {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
+  /* <blade-chat> 宿主默认块级 + 默认高度；页面对元素写的任何尺寸规则都会覆盖
+   * :host 默认值。host 容器把高度传导给内部 flex 链，消息区撑满、输入框钉底。 */
+  :host {
+    display: block;
+    height: 560px;
+  }
 
-/* 聊天根容器。SDK 常被嵌进只有 300-400px 宽的侧栏，而宿主页面视口是全宽的，
- * 所以内边距一律按「容器宽度」伸缩，不能用视口断点——那会在窄容器里反向命中最大值。
- * container-type 建在这里（而不是消息区），是为了让消息区和输入区共享同一个 cqi
- * 基准，两者左右边缘才对得齐。代价是内部内容不再向外传递固有宽度，所以宿主需要给
- * 容器一个确定宽度（flex/grid 拉伸或显式宽度都可以）。 */
-.blade-chat {
-  /* 具名容器：宿主或以后的子组件万一在中间又建了个匿名 query container，
-   * 下面的 @container 查询不会悄悄改成以那个为基准。 */
-  container: blade-chat / inline-size;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-  --blade-chat-gutter: 1rem;
-  --blade-chat-turn-gap: 1.5rem;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "PingFang SC",
-    "Microsoft YaHei",
-    sans-serif;
-}
+  .blade-chat-host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 
-/* 上面两个变量的兜底值必须留在 @supports 外面。不能靠「同一个变量写两遍、让浏览器
- * 丢掉无效的那条」降级：自定义属性在声明处不做类型校验，带 cqi 的值在旧浏览器里同样是
- * 合法 token、照样覆盖兜底值，失效发生在 padding: var(...) 的使用处——结果是整条 padding
- * 作废变成 0，而不是回落到兜底值。 */
-@supports (container-type: inline-size) and (width: 1cqi) {
+  /* 聊天根容器。SDK 常被嵌进只有 300-400px 宽的侧栏，而宿主页面视口是全宽的，
+   * 所以内边距一律按「容器宽度」伸缩，不能用视口断点——那会在窄容器里反向命中最大值。
+   * container-type 建在这里（而不是消息区），是为了让消息区和输入区共享同一个 cqi
+   * 基准，两者左右边缘才对得齐。代价是内部内容不再向外传递固有宽度，所以宿主需要给
+   * 容器一个确定宽度（flex/grid 拉伸或显式宽度都可以）。
+   * 底色与文字色也从这里给：根节点上没有对应的 Tailwind class。 */
   .blade-chat {
-    --blade-chat-gutter: clamp(0.875rem, 4cqi, 2.5rem);
-    --blade-chat-turn-gap: clamp(1.25rem, 3cqi, 2.25rem);
+    /* 具名容器：宿主或以后的子组件万一在中间又建了个匿名 query container，
+     * 下面的 @container 查询不会悄悄改成以那个为基准。 */
+    container: blade-chat / inline-size;
+    min-width: 0;
+    --blade-chat-gutter: 1rem;
+    --blade-chat-turn-gap: 1.5rem;
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family:
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      Roboto,
+      "PingFang SC",
+      "Microsoft YaHei",
+      sans-serif;
   }
-}
-
-.blade-chat-messages {
-  position: relative;
-  flex: 1 1 0%;
-  min-height: 0;
-}
 
-/* 滚动内容的内边距。这一层过去只有 Tailwind class，宿主没装 Tailwind 时消息完全贴边。 */
-.blade-chat-messages-scroll {
-  padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
-    calc(var(--blade-chat-gutter) * 1.1);
-}
+  /* 上面两个变量的兜底值必须留在 @supports 外面。不能靠「同一个变量写两遍、让浏览器
+   * 丢掉无效的那条」降级：自定义属性在声明处不做类型校验，带 cqi 的值在旧浏览器里同样是
+   * 合法 token、照样覆盖兜底值，失效发生在 padding: var(...) 的使用处——结果是整条 padding
+   * 作废变成 0，而不是回落到兜底值。 */
+  @supports (container-type: inline-size) and (width: 1cqi) {
+    .blade-chat {
+      --blade-chat-gutter: clamp(0.875rem, 4cqi, 2.5rem);
+      --blade-chat-turn-gap: clamp(1.25rem, 3cqi, 2.25rem);
+    }
+  }
 
-.blade-chat-messages-content {
-  margin: 0 auto;
-  max-width: 748px;
-}
+  /* 滚动内容的内边距。左右按上面的 gutter 变量走，宿主没装 Tailwind 时消息也不会贴边；
+   * 底部那份补白是消息顶置功能的 spacer（--blade-chat-pin-spacer 由组件写行内变量）。 */
+  .blade-chat-messages-scroll {
+    padding: calc(var(--blade-chat-gutter) * 1.4) var(--blade-chat-gutter)
+      calc(var(--blade-chat-gutter) * 1.1 + var(--blade-chat-pin-spacer, 0px));
+  }
 
-.blade-chat-messages-content > div {
-  display: flex;
-  flex-direction: column;
-  gap: var(--blade-chat-turn-gap);
-  min-width: 0;
-}
+  /* 轮次之间的间距用容器宽度算（见 .blade-chat 的说明），挂在内层容器上。 */
+  .blade-chat-messages-content > div {
+    gap: var(--blade-chat-turn-gap);
+  }
 
-.blade-chat-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  /* 这里的双写是有效降级：cqi 出现在属性值里，旧浏览器会丢掉整条声明并回落到上一条。 */
-  padding: 4rem 0;
-  padding: clamp(2.5rem, 12cqi, 6rem) 0;
-  color: hsl(var(--muted-foreground));
-}
+  .blade-chat-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    /* 这里的双写是有效降级：cqi 出现在属性值里，旧浏览器会丢掉整条声明并回落到上一条。 */
+    padding: 4rem 0;
+    padding: clamp(2.5rem, 12cqi, 6rem) 0;
+    color: hsl(var(--muted-foreground));
+  }
 
-.blade-chat-login,
-.blade-chat-version-mismatch {
-  display: flex;
-  flex: 1 1 0%;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
+  /* -------------------------------------------------------------- 输入区 */
 
-/* ---------------------------------------------------------------- 消息气泡 */
+  /* 左右内边距和消息区共用同一个 gutter，否则输入框与消息文字左边缘对不齐。
+   * 上下留白由组件上的 py-3 / pt-0 给。 */
+  .blade-chat-input {
+    /* 队列面板占位时组件会加上 border-t-0 收起这条线，所以这里不能写死：写死会
+        盖过那个切换。用变量保留默认值，外层仍按原样渲染一条分隔线。 */
+    border-top: var(--blade-chat-input-top-border, 1px solid hsl(var(--border)));
+    padding-left: var(--blade-chat-gutter);
+    padding-right: var(--blade-chat-gutter);
+  }
 
-.blade-chat-user-row {
-  display: flex;
-  justify-content: flex-end;
-}
+  /* 队列面板的外层左右留白：必须跟下面输入框一致，两边各自居中才不会错位。
+   * 默认跟随本包输入框用的同一个 gutter 变量；宿主输入框用别的留白时（内置 Web
+   * 的输入框外层是 px-5），在自己的样式里覆盖 --blade-chat-queue-gutter 即可。 */
+  .blade-chat-queue {
+    --blade-chat-queue-gutter: var(--blade-chat-gutter, 1rem);
+    padding-left: var(--blade-chat-queue-gutter);
+    padding-right: var(--blade-chat-queue-gutter);
+  }
 
-.blade-chat-user-col {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.75rem;
-  max-width: 72%;
-}
+  /* ------------------------------------------------- 无 preflight 时的控件复位 */
 
-/* 窄容器里 72% 只剩 250px 左右，一句话就折三行，这里放宽。
- * 这类需要跳变而非连续伸缩的值才用 @container 查询。 */
-@container blade-chat (max-width: 480px) {
-  .blade-chat-user-col {
-    max-width: 88%;
+  /* 组件上的工具类不负责这些：宿主只用 style.css 且自己的 Tailwind 关了 preflight 时，
+     输入框和按钮会退回浏览器默认外观（原生边框、原生按钮底色）。 */
+  .blade-chat-textarea {
+    border: 0;
+    font: inherit;
   }
 
-  .blade-chat-scroll-bottom-label {
-    display: none;
+  .blade-chat-input-inner button,
+  .blade-chat-codeblock-header button,
+  .blade-chat-ask-card button {
+    cursor: pointer;
+    border: 0;
+    background-color: transparent;
   }
-}
-
-.blade-chat-user-bubble {
-  max-width: 100%;
-  border: 1px solid hsl(var(--user-msg-border));
-  background: hsl(var(--user-msg-bg));
-  color: hsl(var(--user-msg-fg));
-  border-radius: 20px;
-  border-bottom-right-radius: 6px;
-  padding: 13px 18px;
-  font-size: 0.875rem;
-  line-height: 1.65;
-}
 
-.blade-chat-assistant-turn {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
+  /* ------------------------------------------------------------ 出错条配色 */
 
-.blade-chat-assistant-text {
-  font-size: 15px;
-  line-height: 2;
-  color: hsl(var(--foreground));
+  /* 配色由 .blade-chat-error-bar 的 --destructive 变量给，别写死 red-*：
+   * Tailwind 的 dark: 变体跟的是系统偏好，会和 data-theme 主题打架。 */
+  .blade-chat-error-bar {
+    border-bottom-color: hsl(var(--destructive) / 0.3);
+    background: hsl(var(--destructive) / 0.08);
+    color: hsl(var(--destructive));
+  }
 }
 
-.blade-chat-error-row {
-  display: flex;
-  justify-content: center;
-}
+@layer blade-chat-overrides {
+  /* ------------------------------------------------- 窄容器与移动端的手感 */
+  /* 需要跳变而非连续伸缩的值才用 @container：窄容器里 72% 只剩 250px 左右，
+   * 一句话就折三行。这条必须压过组件上的 max-w-[72%]，所以归 blade-chat-overrides。 */
+  @container blade-chat (max-width: 480px) {
+    .blade-chat-user-col {
+      max-width: 88%;
+    }
 
-.blade-chat-error-block {
-  max-width: 85%;
-  border-left: 3px solid hsl(var(--border));
-  padding: 0.25rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.75rem;
-  color: hsl(var(--muted-foreground));
-}
+    .blade-chat-scroll-bottom-label {
+      display: none;
+    }
+  }
 
-.blade-chat-error-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-bottom: 1px solid hsl(var(--destructive) / 0.3);
-  background: hsl(var(--destructive) / 0.08);
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  color: hsl(var(--destructive));
-}
+  /* Keep embedded ChatView usable on iOS without forcing every host app to know
+   Safari's 16px focus-zoom threshold. Desktop sizing remains unchanged.
+   text-sm / text-xs 会让输入控件低于 16px，所以这条也归 blade-chat-overrides。 */
+  @media (hover: none) and (pointer: coarse) {
+    .blade-chat-textarea,
+    .blade-chat-ask-card input,
+    .blade-chat-ask-card textarea {
+      font-size: 1rem;
+    }
+
+    .blade-chat-input-inner button {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
 
-/* ---------------------------------------------------------------- 输入区 */
+  /* ------------------------------------------------------------- Markdown */
 
-/* 左右内边距和消息区共用同一个 gutter，否则输入框与消息文字左边缘对不齐。 */
-.blade-chat-input {
-  border-top: 1px solid hsl(var(--border));
-  padding: 0.75rem var(--blade-chat-gutter);
-}
+  /* 正文是 streamdown 生成的 HTML，元素上没有类名可挂，排版只能写在这里。
+   * 反过来，带 Tailwind class 的那几个外壳（codeblock、prose 容器）不在这里重复。 */
+  .blade-chat-markdown {
+    min-width: 0;
+  }
 
-.blade-chat-input-inner {
-  margin: 0 auto;
-  display: flex;
-  align-items: flex-end;
-  gap: 0.5rem;
-  max-width: 748px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  border-radius: 1rem;
-  padding: 0.5rem 0.75rem;
-}
+  /* 窄容器里真正把版面撑破的是内容而不是内边距：宽表格、大图、超长 URL 都会把整个
+   * 消息区顶宽，然后出现一条横向滚动条。表格自己滚，图片自己缩，长 token 强制断行。 */
+  .blade-chat-markdown [data-streamdown="table-wrapper"] {
+    max-width: 100%;
+    min-width: 0;
+  }
 
-.blade-chat-textarea {
-  flex: 1 1 0%;
-  resize: none;
-  border: 0;
-  background: transparent;
-  color: hsl(var(--foreground));
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  padding: 0.25rem 0;
-  min-height: 28px;
-  max-height: 12rem;
-  outline: none;
-}
+  /* 横向滚动发生在 table 的父层。streamdown 用 Tailwind 的 overflow-x-auto 实现它，
+   * 宿主没装 Tailwind 时那个类是空的，所以这里用普通 CSS 兜住。 */
+  .blade-chat-markdown [data-streamdown="table-wrapper"] > div:last-child {
+    overflow-x: auto;
+    max-width: 100%;
+  }
 
-/* Keep embedded ChatView usable on iOS without forcing every host app to know
-   Safari's 16px focus-zoom threshold. Desktop sizing remains unchanged. */
-@media (hover: none) and (pointer: coarse) {
-  .blade-chat-textarea,
-  .blade-chat-ask-card input {
-    font-size: 1rem;
+  .blade-chat-markdown img,
+  .blade-chat-markdown video {
+    max-width: 100%;
+    height: auto;
   }
 
-  .blade-chat-input-inner button {
-    min-width: 44px;
-    min-height: 44px;
+  /* 长 URL 和长内联代码是撑宽的另外两个常见肇事者。用 anywhere 而不是 break-word：
+   * 只有 anywhere 参与 min-content 计算，break-word 挡不住 flex item 被顶宽。 */
+  .blade-chat-markdown :not(pre) > code,
+  .blade-chat-markdown a {
+    overflow-wrap: anywhere;
   }
-}
 
-.blade-chat-input-inner button {
-  cursor: pointer;
-  border: 0;
-}
+  .blade-chat-prose p {
+    margin: 0.5em 0;
+  }
 
-/* ------------------------------------------------------------ 文件下载卡片 */
+  .blade-chat-prose > p:first-child,
+  .blade-chat-prose > ul:first-child,
+  .blade-chat-prose > ol:first-child {
+    margin-top: 0;
+  }
 
-.blade-chat-file-card {
-  display: inline-flex;
-  max-width: 100%;
-  margin: 0.25rem 0.5rem 0.25rem 0;
-  align-items: center;
-  gap: 0.5rem;
-  vertical-align: middle;
-}
+  .blade-chat-prose > p:last-child,
+  .blade-chat-prose > ul:last-child,
+  .blade-chat-prose > ol:last-child {
+    margin-bottom: 0;
+  }
 
-.blade-chat-file-card button {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.375rem;
-  cursor: pointer;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  background: hsl(var(--card));
-  color: hsl(var(--card-foreground));
-  padding: 0.375rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  text-align: left;
-}
+  .blade-chat-prose ul,
+  .blade-chat-prose ol {
+    margin: 0.5em 0;
+    padding-left: 1.4em;
+  }
 
-.blade-chat-file-card button:hover:not(:disabled) {
-  background: hsl(var(--accent) / 0.45);
-  border-color: hsl(var(--primary) / 0.45);
-}
+  .blade-chat-prose li {
+    margin: 0.25em 0;
+  }
 
-.blade-chat-file-card button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+  .blade-chat-prose h1 {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin: 1em 0 0.5em;
+  }
 
-.blade-chat-file-card-icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  color: hsl(var(--primary));
-}
+  .blade-chat-prose h2 {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 1em 0 0.5em;
+  }
 
-/* 窄容器里文件名不能写死上限，否则短名字留白、长名字仍然顶宽。 */
-.blade-chat-file-card-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 15rem;
-  max-width: min(15rem, 60cqi);
-}
+  .blade-chat-prose h3,
+  .blade-chat-prose h4 {
+    font-size: 1.05em;
+    font-weight: 600;
+    margin: 0.9em 0 0.4em;
+  }
 
-.blade-chat-file-card-action {
-  flex-shrink: 0;
-  color: hsl(var(--muted-foreground));
-}
+  .blade-chat-prose blockquote {
+    border-left: 3px solid hsl(var(--border));
+    margin: 0.5em 0;
+    padding-left: 0.9em;
+    color: hsl(var(--muted-foreground));
+  }
 
-.blade-chat-file-card-error {
-  font-size: 0.6875rem;
-  color: hsl(var(--destructive));
-}
+  .blade-chat-prose a {
+    color: hsl(var(--primary));
+    text-decoration: underline;
+  }
 
-/* ---------------------------------------------------------------- 工具块 */
+  .blade-chat-prose code {
+    background: hsl(var(--muted) / 0.6);
+    border-radius: 0.25rem;
+    padding: 0.1em 0.35em;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.9em;
+  }
 
-.blade-chat-tool,
-.blade-chat-agent-loop,
-.blade-chat-thinking {
-  margin-left: 1rem;
-  font-size: 0.75rem;
-}
+  .blade-chat-prose table {
+    border-collapse: collapse;
+    margin: 0.75em 0;
+    width: 100%;
+  }
 
-.blade-chat-tool-detail pre {
-  overflow: auto;
-  white-space: pre-wrap;
-  border-radius: 0.375rem;
-  background: hsl(var(--muted));
-  padding: 0.5rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 11px;
-  color: hsl(var(--foreground));
-}
+  .blade-chat-prose th,
+  .blade-chat-prose td {
+    border: 1px solid hsl(var(--border));
+    padding: 0.4em 0.7em;
+    text-align: left;
+  }
 
-/* ---------------------------------------------------------------- Markdown */
+  /* 代码块正文（<pre>）的排版：外层 codeblock 外壳与滚动由组件上的类给，
+   * 这里只补等宽字体和底色。 */
+  .blade-chat-codeblock-body {
+    background: hsl(var(--muted) / 0.25);
+    padding: 0.875rem 1rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 13.5px;
+    line-height: 1.7;
+  }
 
-.blade-chat-markdown {
-  overflow-wrap: break-word;
-  min-width: 0;
-}
+  /* 代码块里的内联 code 不再套一层底色和留白。 */
+  .blade-chat-codeblock-body code {
+    background: transparent;
+    padding: 0;
+  }
 
-/* 窄容器里真正把版面撑破的是内容而不是内边距：宽表格、大图、超长 URL 都会把整个
- * 消息区顶宽，然后出现一条横向滚动条。表格自己滚，图片自己缩，长 token 强制断行。 */
-.blade-chat-markdown [data-streamdown="table-wrapper"] {
-  max-width: 100%;
-  min-width: 0;
-}
+  /* ---------------------------------------------------------------- 动效 */
+
+  .blade-shimmer-text {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted-foreground)) 0%,
+      hsl(var(--foreground)) 50%,
+      hsl(var(--muted-foreground)) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    animation: blade-shimmer 2s linear infinite;
+  }
 
-/* 横向滚动发生在 table 的父层。streamdown 用 Tailwind 的 overflow-x-auto 实现它，
- * 宿主没装 Tailwind 时那个类是空的，所以这里用普通 CSS 兜住。 */
-.blade-chat-markdown [data-streamdown="table-wrapper"] > div:last-child {
-  overflow-x: auto;
-  max-width: 100%;
+  @keyframes blade-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
 }
 
-.blade-chat-markdown img,
-.blade-chat-markdown video {
-  max-width: 100%;
-  height: auto;
-}
+/* ------------------------------------------------------------ 消息导航轨 */
 
-/* 长 URL 和长内联代码是撑宽的另外两个常见肇事者。用 anywhere 而不是 break-word：
- * 只有 anywhere 参与 min-content 计算，break-word 挡不住 flex item 被顶宽。 */
-.blade-chat-markdown :not(pre) > code,
-.blade-chat-markdown a {
-  overflow-wrap: anywhere;
+/* 右侧的发言刻度轨。定位绝对：悬停才展开的目录不能占布局宽度，否则同一行的
+ * 内容会被挤窄，而不悬停时那块空间永远是空的。 */
+.blade-turn-nav {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 30;
 }
 
-.blade-chat-prose p {
-  margin: 0.5em 0;
+.blade-turn-nav-markers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-height: 20rem;
+  /* 条数超过可视高度时要能滚：固定 hidden 会让后面的刻度永远点不到。
+     滚动条本身藏掉，它只是给长会话兜底。 */
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding: 0.375rem 0.375rem 0.375rem 0;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 10%,
+    black 90%,
+    transparent
+  );
+  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
 }
 
-.blade-chat-prose > p:first-child,
-.blade-chat-prose > ul:first-child,
-.blade-chat-prose > ol:first-child {
-  margin-top: 0;
+.blade-turn-nav-markers::-webkit-scrollbar {
+  display: none;
 }
 
-.blade-chat-prose > p:last-child,
-.blade-chat-prose > ul:last-child,
-.blade-chat-prose > ol:last-child {
-  margin-bottom: 0;
+.blade-turn-nav-spacer-top {
+  margin-top: auto;
 }
-
-.blade-chat-prose ul,
-.blade-chat-prose ol {
-  margin: 0.5em 0;
-  padding-left: 1.4em;
+.blade-turn-nav-spacer-bottom {
+  margin-bottom: auto;
 }
 
-.blade-chat-prose li {
-  margin: 0.25em 0;
+.blade-turn-nav-tick {
+  display: flex;
+  align-items: center;
+  height: 0.875rem;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
 }
 
-.blade-chat-prose h1 {
-  font-size: 1.25em;
-  font-weight: 600;
-  margin: 1em 0 0.5em;
+.blade-turn-nav-tick > span {
+  display: block;
+  width: 0.75rem;
+  height: 0.125rem;
+  border-radius: 9999px;
+  background: hsl(var(--muted-foreground) / 0.35);
+  transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
 }
 
-.blade-chat-prose h2 {
-  font-size: 1.15em;
-  font-weight: 600;
-  margin: 1em 0 0.5em;
+.blade-turn-nav-tick[data-hovered="true"] > span {
+  width: 1.25rem;
+  height: 0.25rem;
+  background: hsl(var(--muted-foreground) / 0.7);
 }
 
-.blade-chat-prose h3,
-.blade-chat-prose h4 {
-  font-size: 1.05em;
-  font-weight: 600;
-  margin: 0.9em 0 0.4em;
+.blade-turn-nav-tick[data-active="true"] > span {
+  width: 1.25rem;
+  height: 0.25rem;
+  background: hsl(var(--foreground));
 }
 
-.blade-chat-prose blockquote {
-  border-left: 3px solid hsl(var(--border));
-  margin: 0.5em 0;
-  padding-left: 0.9em;
-  color: hsl(var(--muted-foreground));
+/* 定位的进度与失败提示：贴在刻度轨左侧，不随面板开合。 */
+.blade-turn-nav-status {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 9999px;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  font-size: 0.75rem;
+  white-space: nowrap;
+  box-shadow: 0 4px 14px hsl(var(--foreground) / 0.12);
 }
 
-.blade-chat-prose a {
+.blade-turn-nav-status button {
+  border: 0;
+  background: none;
+  padding: 0;
   color: hsl(var(--primary));
+  font-size: 0.75rem;
+  cursor: pointer;
   text-decoration: underline;
 }
 
-.blade-chat-prose code {
-  background: hsl(var(--muted) / 0.6);
-  border-radius: 0.25rem;
-  padding: 0.1em 0.35em;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.9em;
+.blade-turn-nav-panel {
+  position: absolute;
+  right: 100%;
+  /* 与刻度轨同心：顶对齐会让一个接近上限高度的面板整条往下长，聊天区是 overflow: hidden，
+     视口矮一点下面的条目就被裁掉、连滚都滚不到（滚动容器以为自己有完整高度）。 */
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5rem;
 }
 
-.blade-chat-prose table {
-  border-collapse: collapse;
-  margin: 0.75em 0;
-  width: 100%;
-}
-
-.blade-chat-prose th,
-.blade-chat-prose td {
+.blade-turn-nav-list {
+  display: flex;
+  flex-direction: column;
+  width: 20rem;
+  /* 高度上限同时受视口约束，短视口里面板整体缩进去而不是被裁掉。 */
+  max-height: min(28rem, 60vh);
+  overflow-y: auto;
+  padding: 0.25rem 0;
   border: 1px solid hsl(var(--border));
-  padding: 0.4em 0.7em;
-  text-align: left;
+  border-radius: 0.5rem;
+  background: hsl(var(--popover));
+  box-shadow: 0 10px 30px hsl(var(--foreground) / 0.18);
 }
 
-.blade-chat-codeblock {
-  margin: 0.75rem 0;
+.blade-turn-nav-item {
+  flex-shrink: 0;
+  padding: 0.375rem 0.75rem;
+  border: 0;
+  background: none;
+  text-align: left;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: hsl(var(--popover-foreground));
+  white-space: nowrap;
   overflow: hidden;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-}
-
-.blade-chat-codeblock-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 34px;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.5);
-  padding: 0 0.375rem 0 0.875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.blade-chat-codeblock-header button {
+  text-overflow: ellipsis;
   cursor: pointer;
-  border: 0;
-  background: transparent;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: inherit;
 }
 
-.blade-chat-codeblock-body {
-  margin: 0;
-  overflow-x: auto;
-  background: hsl(var(--muted) / 0.25);
-  padding: 0.875rem 1rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 13.5px;
-  line-height: 1.7;
+.blade-turn-nav-item[data-hovered="true"],
+.blade-turn-nav-item[data-active="true"] {
+  background: hsl(var(--accent));
 }
 
-.blade-chat-codeblock-body code {
-  background: transparent;
-  padding: 0;
+/* 定位到某条发言后的短暂高亮。加到消息行本身（data-entry-id 那一层），
+ * 到点由 hook 摘掉类名，不改变滚动位置。内置 Web 的 app.css 有同名镜像。 */
+.blade-turn-nav-flash {
+  animation: blade-turn-nav-flash 1.6s ease-out both;
+  border-radius: 0.5rem;
 }
 
-/* ---------------------------------------------------------------- 动效 */
-
-.blade-shimmer-text {
-  background: linear-gradient(
-    90deg,
-    hsl(var(--muted-foreground)) 0%,
-    hsl(var(--foreground)) 50%,
-    hsl(var(--muted-foreground)) 100%
-  );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  animation: blade-shimmer 2s linear infinite;
+/* 减少动效：保留高亮但不动画，用户仍然看得见"定位到哪一条"。 */
+@media (prefers-reduced-motion: reduce) {
+  .blade-turn-nav-flash {
+    animation: none;
+    background-color: hsl(var(--accent) / 0.75);
+  }
 }
 
-@keyframes blade-shimmer {
+@keyframes blade-turn-nav-flash {
   from {
-    background-position: 200% 0;
+    background-color: hsl(var(--accent) / 0.75);
   }
   to {
-    background-position: -200% 0;
+    background-color: transparent;
   }
 }