style: refine rectification scrollbar

docs/BUG_HISTORY.md

@@ -697,3 +697,19 @@
 - 相关记录：BUG-039、BUG-040
 - 复发自：无
 - 修复版本：本次自动滚动修复提交
+
+## BUG-042 | 生时校正沿用系统滚动条导致视觉割裂
+
+- 状态：resolved
+- 首次发现：2026-07-23
+- 最近更新：2026-07-23
+- 影响面：生时校正独立消息列表的桌面端滚动反馈
+- 用户现象：生时校正右侧直接显示浏览器或操作系统默认滚动条，与站内温和、低对比的编辑式界面不一致。
+- 触发条件：生时校正历史内容超过消息区高度，在桌面浏览器出现纵向滚动条。
+- 根因：`.rectification-message-list` 只声明了 `overflow-y: auto`，没有提供跨浏览器的产品内滚动条颜色、宽度和交互状态。
+- 修复：为生时校正消息区增加细宽、透明轨道、低对比圆角拇指，并在 hover 时适度加深；Firefox 使用标准 scrollbar 属性，Chromium / Safari 使用 WebKit 伪元素，颜色继续取现有设计 token。
+- 验证：CSS 契约锁定标准与 WebKit 两套样式，聚焦组件测试、目标 ESLint、production build 与生产浏览器 smoke。
+- 防复发：独立滚动容器必须复用产品 token，并同时覆盖标准 scrollbar 属性和 WebKit 伪元素；不得引入渐变、重阴影或高饱和装饰。
+- 相关记录：BUG-041
+- 复发自：无
+- 修复版本：本次简约滚动条修复提交

frontend/src/app/globals.css

@@ -782,7 +782,29 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
 /* Conversational rectification shell */
 .conversation.is-rectification { overflow: hidden; padding-bottom: 0; }
 .rectification-chat { height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--color-ink); }
-.rectification-message-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); }
+.rectification-message-list {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-bottom: var(--space-6);
+  scrollbar-color: color-mix(in srgb, var(--color-ink-tertiary) 46%, transparent) transparent;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+.rectification-message-list::-webkit-scrollbar { width: 10px; }
+.rectification-message-list::-webkit-scrollbar-track { background: transparent; }
+.rectification-message-list::-webkit-scrollbar-thumb {
+  min-height: 40px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-ink-tertiary) 42%, transparent);
+  background-clip: padding-box;
+}
+.rectification-message-list::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-ink-secondary) 62%, transparent);
+  background-clip: padding-box;
+}
 .rectification-message-details { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: var(--type-caption); }
 .rectification-message-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--type-body-sm); font-weight: 600; }
 .rectification-message-details p { margin: 0 0 var(--space-2); font-size: var(--type-caption); line-height: 1.6; }

frontend/tests/conversational-rectification-component.test.ts

@@ -287,6 +287,9 @@ test("pending markup and responsive CSS expose accessibility contracts", () => {
   assert.match(css, /\.conversation\.is-rectification[^}]*padding-bottom:\s*0/);
   assert.match(css, /\.rectification-chat[^}]*height:\s*100%[^}]*display:\s*flex/);
   assert.match(css, /\.rectification-message-list[^}]*flex:\s*1[^}]*overflow-y:\s*auto/);
+  assert.match(css, /\.rectification-message-list[^}]*scrollbar-width:\s*thin/);
+  assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb[^}]*background-clip:\s*padding-box/);
+  assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb:hover[^}]*color-mix/);
   assert.match(css, /\.rectification-message-details button[^}]*min-height:\s*44px/);
   assert.match(css, /\.composer:focus-within[^}]*border-color:/);
   assert.match(css, /\.composer textarea[^}]*border:\s*0/);