@pactor-app/chat 0.1.0

package/styles.css

@@ -0,0 +1,1704 @@
+/**
+ * pactor-chat 皮肤样式表（单文件）。
+ *
+ * 技术选型参考 DeepTutor web：语义 CSS 变量 + 语义 class，无 antd。
+ *
+ * 换肤契约（与 pactor-ui-radix 一致）：
+ * 1. 覆盖 CSS 变量（在本样式表之后注入 `--pactor-chat-primary: …;` 等）；
+ * 2. 内置暗色：`<html data-pactor-theme="dark">`（或挂在任意祖先容器上）；
+ * 3. 直接覆盖 `.pactor-chat-*` class。
+ *
+ * 使用：import 'pactor-chat/styles.css';
+ */
+
+/* ============================================================
+ * 1. 皮肤 token（light）
+ * ============================================================ */
+
+.pactor-chat-view,
+.pactor-chat-layout,
+.pactor-chat-shell,
+.pactor-chat-workspace,
+.pactor-chat-inspector,
+.pactor-chat-notice {
+  --pactor-chat-bg: #f7f6f4;
+  --pactor-chat-sidebar-bg: #efedea;
+  --pactor-chat-fg: #1a1d26;
+  --pactor-chat-muted: #f4f4f6;
+  --pactor-chat-muted-fg: #6b7180;
+  --pactor-chat-card: #ffffff;
+  --pactor-chat-border: #e6e7eb;
+  --pactor-chat-primary: #3c47dd;
+  --pactor-chat-primary-fg: #ffffff;
+  --pactor-chat-danger: #d4380d;
+  --pactor-chat-danger-bg: #fff2f0;
+  --pactor-chat-success: #389e0d;
+  --pactor-chat-user-bubble-bg: #eef0fe;
+  --pactor-chat-user-bubble-border: rgb(60 71 221 / 35%);
+  --pactor-chat-code-bg: #f6f7f9;
+  /* 旧通用圆角令牌（保留兼容）；新组件改用下方圆角阶梯 */
+  --pactor-chat-radius: 12px;
+  /* 圆角阶梯：sm 控件 / md 卡片 / lg 气泡 / xl composer */
+  --pactor-chat-radius-sm: 6px;
+  --pactor-chat-radius-md: 8px;
+  --pactor-chat-radius-lg: 16px;
+  --pactor-chat-radius-xl: 26px;
+  /* 投影：sm 气泡/卡片轻投影；composer 柔和分层投影 */
+  --pactor-chat-shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
+  --pactor-chat-shadow-composer:
+    0 1px 2px rgb(0 0 0 / 3%),
+    0 10px 28px -10px rgb(0 0 0 / 8%);
+  /* 衬线展示字体栈：空状态问候 / chat 布局标题 */
+  --pactor-chat-font-display: 'Songti SC', 'Noto Serif SC', Georgia,
+    'Times New Roman', serif;
+  /* AppShell：侧栏宽度 / 移动端顶栏高度 / 抽屉遮罩色 */
+  --pactor-chat-sidebar-width: 240px;
+  --pactor-chat-shell-topbar-height: 44px;
+  --pactor-chat-shell-scrim: rgb(0 0 0 / 40%);
+  /* 产出物面板（spec: chat-artifact-panel）：桌面固定宽右栏 */
+  --pactor-chat-inspector-width: 320px;
+  /* 对话列限宽居中（spec: chat-app-shell 嵌入契约）：置 none 关闭限宽 */
+  --pactor-chat-content-width: 768px;
+}
+
+.pactor-chat-view {
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 12px;
+  color: var(--pactor-chat-fg);
+  background: var(--pactor-chat-bg);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 暗色皮肤：data-pactor-theme="dark"（html 或任意祖先容器）。
+   只覆盖令牌（颜色/投影），组件规则不区分主题。 */
+[data-pactor-theme='dark'] .pactor-chat-view,
+[data-pactor-theme='dark'] .pactor-chat-layout,
+[data-pactor-theme='dark'] .pactor-chat-shell,
+[data-pactor-theme='dark'] .pactor-chat-workspace,
+[data-pactor-theme='dark'] .pactor-chat-notice,
+.pactor-chat-view[data-pactor-theme='dark'],
+.pactor-chat-layout[data-pactor-theme='dark'],
+.pactor-chat-shell[data-pactor-theme='dark'],
+.pactor-chat-workspace[data-pactor-theme='dark'],
+.pactor-chat-notice[data-pactor-theme='dark'] {
+  --pactor-chat-bg: #14161c;
+  --pactor-chat-sidebar-bg: #1b1e26;
+  --pactor-chat-fg: #e4e6ee;
+  --pactor-chat-muted: #1e2129;
+  --pactor-chat-muted-fg: #8b90a0;
+  --pactor-chat-card: #1a1d24;
+  --pactor-chat-border: #2c3038;
+  --pactor-chat-primary: #5b66f0;
+  --pactor-chat-primary-fg: #ffffff;
+  --pactor-chat-danger: #e8690c;
+  --pactor-chat-danger-bg: #2b1d16;
+  --pactor-chat-success: #49aa19;
+  --pactor-chat-user-bubble-bg: #262a45;
+  --pactor-chat-user-bubble-border: rgb(91 102 240 / 45%);
+  --pactor-chat-code-bg: #1e2129;
+  --pactor-chat-shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
+  --pactor-chat-shadow-composer:
+    0 1px 2px rgb(0 0 0 / 4%),
+    0 12px 32px -10px rgb(0 0 0 / 55%);
+  --pactor-chat-shell-scrim: rgb(0 0 0 / 55%);
+  --pactor-chat-font-display: 'Songti SC', 'Noto Serif SC', Georgia,
+    'Times New Roman', serif;
+}
+
+/* ============================================================
+ * 2. 布局（chat 布局 + 消息区）
+ * ============================================================ */
+
+.pactor-chat-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--pactor-chat-bg);
+  color: var(--pactor-chat-fg);
+}
+
+.pactor-chat-layout__header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--pactor-chat-border);
+  font-family: var(--pactor-chat-font-display);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.pactor-chat-layout__main {
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ------------------------------------------------------------
+ * ChatWorkspace（spec: chat-dsl-page）：createChatWorkspace 工厂
+ * 返回组件的外层容器 = 可选头部（title + headerExtra）+ ChatView。
+ * ------------------------------------------------------------ */
+
+.pactor-chat-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  /* 对话列缺省限宽居中（spec: chat-app-shell 嵌入契约）：
+   * shell content / 面板 host / 独立块级容器三场景统一生效 */
+  width: 100%;
+  max-width: var(--pactor-chat-content-width);
+  margin-inline: auto;
+  background: var(--pactor-chat-bg);
+  color: var(--pactor-chat-fg);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.pactor-chat-workspace__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--pactor-chat-border);
+  flex-shrink: 0;
+}
+
+.pactor-chat-workspace__title {
+  font-family: var(--pactor-chat-font-display);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.pactor-chat-workspace__header-extra {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pactor-chat-workspace > .pactor-chat-view {
+  flex: 1;
+  min-height: 0;
+}
+
+/* ------------------------------------------------------------
+ * AppShell（spec: chat-app-shell）：侧栏 + 主区外壳。
+ * 桌面（≥768px）flex 同行；移动端（<768px）侧栏退出文档流
+ * 变为覆盖抽屉，布局切换全部由媒体查询表达，JS 只管开合。
+/* AppShell（spec: chat-app-shell）：侧栏 + 主区外壳。
+ * 桌面（≥768px）flex 同行；移动端（<768px）侧栏退出文档流
+ * 变为覆盖抽屉，布局切换全部由媒体查询表达，JS 只管开合。
+ * 高度填满父容器（height: 100%）：嵌入任意定高容器即正确；
+ * 父级无定高时退化为内容高度。standalone 顶层挂载时宿主
+ * 容器定高（如 100dvh）属宿主职责（嵌入契约）。
+ * ------------------------------------------------------------ */
+
+.pactor-chat-shell {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  background: var(--pactor-chat-bg);
+  color: var(--pactor-chat-fg);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 桌面：侧栏为固定宽度 flex 列；背景独立令牌（决策 D5：比工作区
+ * 暖白灰深一档），暗色经令牌覆盖自动生效 */
+.pactor-chat-shell__sidebar {
+  width: var(--pactor-chat-sidebar-width);
+  flex-shrink: 0;
+  border-right: 1px solid var(--pactor-chat-border);
+  background: var(--pactor-chat-sidebar-bg);
+}
+
+/* 框架模式（提供 brand / sidebarFooter 时）：品牌行 + 滚动区 + 底部区
+ * 的 flex 列；未提供时侧栏直挂调用方内容（零渲染承诺） */
+.pactor-chat-shell__sidebar--framed {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 桌面品牌行（决策 D3）：brand 左对齐，折叠钮在右 */
+.pactor-chat-shell__sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 12px 12px 4px;
+}
+
+.pactor-chat-shell__brand {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 侧栏滚动区：菜单（height:100% + 自有 overflow）之外的任意内容
+ * 也可滚动；底部区固定不随滚动 */
+.pactor-chat-shell__sidebar-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.pactor-chat-shell__sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px;
+  border-top: 1px solid var(--pactor-chat-border);
+}
+
+/* 桌面折叠（icon rail，决策 D3）：收窄为图标栏——菜单只显图标，
+ * label / badge / dot / 分组标题 / 底部区 / 品牌文案隐藏（图标以
+ * title 属性兜底可访问名，见 ChatSidebarMenu）。仅桌面生效：移动端
+ * 抽屉语义不受影响 */
+@media (min-width: 768px) {
+  .pactor-chat-shell__sidebar--collapsed {
+    width: 64px;
+  }
+
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__sidebar-header {
+    justify-content: center;
+    padding-inline: 8px;
+  }
+
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__brand {
+    display: none;
+  }
+
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu {
+    padding-inline: 8px;
+  }
+
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__label,
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__badge,
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__dot,
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-menu__group,
+  .pactor-chat-shell__sidebar--collapsed .pactor-chat-shell__sidebar-footer {
+    display: none;
+  }
+}
+
+.pactor-chat-shell__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 移动端顶栏：菜单按钮 + brand 插槽；桌面隐藏 */
+.pactor-chat-shell__topbar {
+  display: none;
+  align-items: center;
+  gap: 4px;
+  height: var(--pactor-chat-shell-topbar-height);
+  flex-shrink: 0;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--pactor-chat-border);
+}
+
+.pactor-chat-shell__menu svg {
+  width: 18px;
+  height: 18px;
+}
+
+.pactor-chat-shell__content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 12px 16px 16px;
+}
+
+/* 对话列在 shell content 内的间距（content 区 padding 承担）与
+ * 面板打开时的贴右处理见下方 :has 规则 */
+
+/* 产出物面板打开（spec: chat-artifact-panel）：面板贴容器右缘——
+ * 内容区右/上/下 padding 归零，面板 border-left 作分隔线 */
+.pactor-chat-shell__content:has(> .pactor-chat-inspector-host) {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+/* 抽屉遮罩：仅打开时渲染；桌面隐藏 */
+.pactor-chat-shell__scrim {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: var(--pactor-chat-shell-scrim);
+}
+
+@media (max-width: 767px) {
+  .pactor-chat-shell__sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 50;
+    box-shadow: var(--pactor-chat-shadow-composer);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease-out;
+  }
+
+  /* 移动端品牌维持顶栏现状（决策 D3）：抽屉内不重复渲染品牌行 */
+  .pactor-chat-shell__sidebar-header {
+    display: none;
+  }
+
+  .pactor-chat-shell__sidebar[data-open='true'] {
+    transform: translateX(0);
+  }
+
+  .pactor-chat-shell__scrim {
+    display: block;
+  }
+
+  .pactor-chat-shell__topbar {
+    display: flex;
+  }
+}
+
+/* ------------------------------------------------------------
+ * ArtifactPanel（spec: chat-artifact-panel，设计决策 D2）：
+ * 产出物预览面板。桌面（≥768px）为工作区右侧固定宽栏（flex 同行，
+ * 宽度经 --pactor-chat-inspector-width 可调）；移动端（<768px）
+ * 退化为右侧覆盖抽屉（遮罩点击关闭），与 AppShell 同一断点。
+ * 面板关闭 / 未配置时不渲染 DOM（组合层保证）。
+ * ------------------------------------------------------------ */
+
+/* 面板打开时的同行容器：workspace（或 AppShell）与面板 flex 并排，
+ * host 在 shell content 内撑满剩余高度与宽度 */
+.pactor-chat-inspector-host {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 面板打开时 host 内的直子：AppShell 填满剩余空间；workspace 只缩不伸，
+ * 宽度受 --pactor-chat-content-width 限宽，margin auto 在剩余空间内居中 */
+.pactor-chat-inspector-host > .pactor-chat-shell {
+  flex: 1;
+  min-width: 0;
+}
+
+.pactor-chat-inspector-host > .pactor-chat-workspace {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.pactor-chat-inspector {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--pactor-chat-inspector-width);
+  flex-shrink: 0;
+  border-left: 1px solid var(--pactor-chat-border);
+  background: var(--pactor-chat-bg);
+  color: var(--pactor-chat-fg);
+  font-size: 14px;
+  line-height: 1.6;
+  overflow: hidden;
+}
+
+/* 拖拽调宽手柄（spec: chat-artifact-panel / 拖拽调宽）：
+ * 面板左缘内覆 8px 热区（overflow:hidden 会裁掉负偏移，故内覆而非外探） */
+.pactor-chat-inspector__resize {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  z-index: 1;
+  touch-action: none;
+}
+
+.pactor-chat-inspector__resize:hover,
+.pactor-chat-inspector__resize:active {
+  background: color-mix(
+    in oklab,
+    var(--pactor-chat-primary) 35%,
+    transparent
+  );
+}
+
+.pactor-chat-inspector__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--pactor-chat-border);
+  flex-shrink: 0;
+}
+
+.pactor-chat-inspector__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--pactor-chat-font-display);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* kind 角标（与产出物卡片角标同款） */
+.pactor-chat-inspector__kind,
+.pactor-chat-artifact-card__kind {
+  flex-shrink: 0;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.pactor-chat-inspector__close {
+  flex-shrink: 0;
+}
+
+.pactor-chat-inspector__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+/* code 产出物：只读代码块（language 右上角标，不引高亮依赖） */
+.pactor-chat-inspector__code {
+  position: relative;
+}
+
+.pactor-chat-inspector__code pre {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-code-bg);
+  overflow-x: auto;
+  font-size: 12.5px;
+}
+
+.pactor-chat-inspector__code-lang {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+/* text 产出物：预格式文本 */
+.pactor-chat-inspector__text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+}
+
+/* 窄屏覆盖抽屉遮罩：仅面板打开时渲染；桌面隐藏（同 AppShell scrim 模式） */
+.pactor-chat-inspector__scrim {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: var(--pactor-chat-shell-scrim);
+}
+
+@media (max-width: 767px) {
+  .pactor-chat-inspector {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 50;
+    box-shadow: var(--pactor-chat-shadow-composer);
+  }
+
+  /* 窄屏覆盖抽屉形态：不显示拖拽手柄（spec scenario: 窄屏无拖拽手柄） */
+  .pactor-chat-inspector__resize {
+    display: none;
+  }
+
+  .pactor-chat-inspector__scrim {
+    display: block;
+  }
+}
+
+/* ------------------------------------------------------------
+ * 产出物卡片（spec: chat-artifact-panel / artifact 消息 part）：
+ * 消息流内 artifact part 的内联呈现——标题 + kind 角标 + 打开按钮。
+ * ------------------------------------------------------------ */
+
+.pactor-chat-artifact-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-card);
+  box-shadow: var(--pactor-chat-shadow-sm);
+}
+
+.pactor-chat-artifact-card__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.pactor-chat-artifact-card__open {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-sm);
+  background: transparent;
+  color: var(--pactor-chat-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.pactor-chat-artifact-card__open:hover {
+  background: var(--pactor-chat-muted);
+}
+
+/* ------------------------------------------------------------
+ * Chat 组件内建侧栏菜单（spec: chat-dsl-component）：
+ * menu 数据驱动的导航项（图标 + 分组标题 + badge + disabled），
+ * 承载于 AppShell 侧栏；颜色全部经 --pactor-chat-* 令牌，
+ * 暗色由令牌覆盖自动生效。
+ * ------------------------------------------------------------ */
+
+.pactor-chat-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  height: 100%;
+  padding: 12px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.pactor-chat-menu__group {
+  padding: 10px 10px 4px;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+.pactor-chat-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--pactor-chat-radius);
+  background: transparent;
+  color: var(--pactor-chat-fg);
+  font-size: 14px;
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.pactor-chat-menu__item:hover {
+  background: var(--pactor-chat-muted);
+}
+
+.pactor-chat-menu__item--active,
+.pactor-chat-menu__item--active:hover {
+  background: var(--pactor-chat-user-bubble-bg);
+  color: var(--pactor-chat-primary);
+}
+
+.pactor-chat-menu__item:disabled,
+.pactor-chat-menu__item:disabled:hover {
+  background: transparent;
+  color: var(--pactor-chat-muted-fg);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.pactor-chat-menu__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+/* 未知图标名的占位圆点（不抛错的受控降级） */
+.pactor-chat-menu__icon-placeholder {
+  width: 6px;
+  height: 6px;
+  margin: 0 4px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--pactor-chat-muted-fg);
+  opacity: 0.5;
+}
+
+.pactor-chat-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pactor-chat-menu__badge {
+  flex-shrink: 0;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.pactor-chat-menu__item--active .pactor-chat-menu__badge {
+  background: var(--pactor-chat-user-bubble-bg);
+  color: var(--pactor-chat-primary);
+}
+
+/* 菜单项状态圆点（spec: chat-dsl-component / 菜单项状态点，决策 D4）：
+ * label 右侧的 danger 系小圆点（参考图红点），与 badge 可共存 */
+.pactor-chat-menu__dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--pactor-chat-danger);
+}
+
+/* Chat 服务缺失的受控提示块（未配置 ChatServicesProvider 时渲染） */
+.pactor-chat-notice {
+  padding: 24px 16px;
+  border: 1px dashed var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-bg);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+
+/* 消息滚动区：overflow-anchor none 配合 useChatAutoScroll（防浏览器
+   滚动锚定与贴底跟随互相拉扯）；上下 mask 渐隐 + 6px 细滚动条 */
+.pactor-chat-messages {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-anchor: none;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 4px 2px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pactor-chat-border) transparent;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 24px,
+    #000 calc(100% - 24px),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 24px,
+    #000 calc(100% - 24px),
+    transparent
+  );
+}
+
+.pactor-chat-messages::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.pactor-chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.pactor-chat-messages::-webkit-scrollbar-thumb {
+  background: var(--pactor-chat-border);
+  border-radius: 3px;
+}
+
+.pactor-chat-messages::-webkit-scrollbar-thumb:hover {
+  background: var(--pactor-chat-muted-fg);
+}
+
+/* ============================================================
+ * 3. 空状态（spec: chat-empty-state）
+ * ============================================================ */
+
+/* 空态居中组（决策 D1）：EmptyState 与 Composer 同一垂直居中列。
+ * margin auto 在消息区（flex 列容器）内双向居中；内容高于视口时
+ * auto 边距归零，配合消息区 overflow-y auto 从顶部自然滚动
+ * （极矮视口不裁切） */
+.pactor-chat-view__empty-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: var(--pactor-chat-content-width);
+  margin: auto;
+  padding: 16px 0;
+}
+
+.pactor-chat-view__empty-stack .pactor-chat-empty {
+  flex: none;
+}
+
+.pactor-chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+.pactor-chat-empty__greeting {
+  font-family: var(--pactor-chat-font-display);
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.pactor-chat-empty__subtitle {
+  color: var(--pactor-chat-muted-fg);
+  font-size: 13px;
+}
+
+.pactor-chat-empty__suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.pactor-chat-empty__suggestion {
+  padding: 6px 14px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: 999px;
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-fg);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.pactor-chat-empty__suggestion:hover {
+  border-color: var(--pactor-chat-primary);
+  background: var(--pactor-chat-muted);
+}
+
+/* ============================================================
+ * 4. 消息气泡
+ * ============================================================ */
+
+.pactor-chat-message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}
+
+.pactor-chat-message__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+/* user：右侧圆角气泡（16px 圆角 + 轻投影） */
+.pactor-chat-message--user {
+  align-items: flex-end;
+}
+
+.pactor-chat-message--user .pactor-chat-message__body {
+  max-width: 75%;
+  padding: 10px 16px;
+  border-radius: var(--pactor-chat-radius-lg);
+  border: 1px solid var(--pactor-chat-user-bubble-border);
+  background: var(--pactor-chat-user-bubble-bg);
+  box-shadow: var(--pactor-chat-shadow-sm);
+}
+
+/* assistant：左侧通栏排版（无气泡底色） */
+.pactor-chat-message--assistant {
+  align-items: stretch;
+}
+
+/* system：居中弱提示 */
+.pactor-chat-message--system {
+  align-items: center;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+/* 待响应占位 */
+.pactor-chat-message__pending {
+  color: var(--pactor-chat-muted-fg);
+}
+
+/* hover 操作条（assistant） */
+.pactor-chat-message__actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.pactor-chat-message:hover .pactor-chat-message__actions,
+.pactor-chat-message__actions:focus-within {
+  opacity: 1;
+}
+
+/* error 消息的重试入口常显（不依赖 hover） */
+.pactor-chat-message__actions--visible {
+  opacity: 1;
+}
+
+/* user 消息内联编辑框（编辑重发） */
+.pactor-chat-message__edit {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 75%;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--pactor-chat-user-bubble-border);
+  border-radius: var(--pactor-chat-radius-lg);
+  background: var(--pactor-chat-user-bubble-bg);
+}
+
+.pactor-chat-message__edit-input {
+  border: none;
+  outline: none;
+  resize: vertical;
+  background: transparent;
+  color: var(--pactor-chat-fg);
+  font: inherit;
+  line-height: 1.6;
+}
+
+.pactor-chat-message__edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.pactor-chat-message__edit-button {
+  padding: 4px 12px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-sm);
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-fg);
+  font-size: 12.5px;
+  cursor: pointer;
+}
+
+.pactor-chat-message__edit-button--confirm {
+  border-color: var(--pactor-chat-primary);
+  background: var(--pactor-chat-primary);
+  color: var(--pactor-chat-primary-fg);
+}
+
+/* ============================================================
+ * 5. 图标按钮 / 浮动按钮
+ * ============================================================ */
+
+/* quiet 图标按钮：透明底，hover 增亮；图标统一 15px */
+.pactor-chat-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  border-radius: var(--pactor-chat-radius-md);
+  background: transparent;
+  color: var(--pactor-chat-muted-fg);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    transform 0.1s ease;
+}
+
+.pactor-chat-icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pactor-chat-icon-button:hover {
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-fg);
+}
+
+.pactor-chat-icon-button:active {
+  transform: scale(0.92);
+}
+
+/* "回到底部"浮动按钮（bottom 避开滚动区底部 mask 渐隐带） */
+.pactor-chat-scroll-bottom {
+  position: sticky;
+  bottom: 28px;
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: 999px;
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+  cursor: pointer;
+  box-shadow: var(--pactor-chat-shadow-composer);
+}
+
+.pactor-chat-scroll-bottom:hover {
+  color: var(--pactor-chat-fg);
+}
+
+/* ============================================================
+ * 6. 活动轨迹（spec: chat-activity-trace）：状态头 + 轨迹条目 + thinking
+ * ============================================================ */
+
+.pactor-chat-trace {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12.5px;
+}
+
+/* 状态头 / 条目头 / thinking 头共用的单行按钮形态 */
+.pactor-chat-trace__header,
+.pactor-chat-trace__entry-header,
+.pactor-chat-thinking__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 3px 0;
+  border: none;
+  background: transparent;
+  color: var(--pactor-chat-muted-fg);
+  font-size: inherit;
+  text-align: left;
+}
+
+button.pactor-chat-trace__header,
+.pactor-chat-trace__entry-header,
+.pactor-chat-thinking__header {
+  cursor: pointer;
+}
+
+button.pactor-chat-trace__header:hover,
+.pactor-chat-trace__entry-header:hover,
+.pactor-chat-thinking__header:hover {
+  color: var(--pactor-chat-fg);
+}
+
+/* 头部内图标/文字统一 flex 对齐（svg 默认按基线对齐会下沉） */
+.pactor-chat-trace__header > span,
+.pactor-chat-trace__entry-header > span,
+.pactor-chat-thinking__header > span {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  min-width: 0;
+}
+
+/* 状态文案：流式期间呼吸动画（纯 CSS） */
+.pactor-chat-trace__status-text--breathing {
+  animation: pactor-chat-breathing 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pactor-chat-breathing {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+/* 状态图标脉冲：流式期间（图标为 spinner 时）轻微缩放逐帧"呼吸"，
+   与文案呼吸不同周期，避免机械同步感 */
+.pactor-chat-trace__status-icon:has(.pactor-chat-spin),
+.pactor-chat-thinking[data-streaming='true'] .pactor-chat-thinking__icon {
+  animation: pactor-chat-mark-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transform-origin: center;
+}
+
+@keyframes pactor-chat-mark-pulse {
+  0%,
+  100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+.pactor-chat-trace__elapsed {
+  color: var(--pactor-chat-muted-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+/* chevron 展开旋转（状态头 / 条目 / thinking 共用） */
+.pactor-chat-trace__chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.pactor-chat-trace[data-open='true'] > .pactor-chat-trace__header
+  .pactor-chat-trace__chevron,
+.pactor-chat-trace__entry[data-open='true'] .pactor-chat-trace__chevron,
+.pactor-chat-thinking[data-open='true'] .pactor-chat-trace__chevron {
+  transform: rotate(90deg);
+}
+
+/* 轨迹条目列表：缩进对齐状态头文本 */
+.pactor-chat-trace__entries {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-left: 4px;
+}
+
+.pactor-chat-trace__entry-title {
+  flex-shrink: 0;
+}
+
+/* 参数摘要：单行省略 */
+.pactor-chat-trace__entry-args {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--pactor-chat-muted-fg);
+  opacity: 0.8;
+}
+
+/* 条目状态色 */
+.pactor-chat-trace__entry[data-status='running'] .pactor-chat-trace__entry-icon {
+  color: var(--pactor-chat-primary);
+}
+
+.pactor-chat-trace__entry[data-status='success'] .pactor-chat-trace__entry-icon {
+  color: var(--pactor-chat-success);
+}
+
+.pactor-chat-trace__entry[data-status='failed'] .pactor-chat-trace__entry-icon {
+  color: var(--pactor-chat-danger);
+}
+
+/* 展开详情：参数与结果/错误 */
+.pactor-chat-trace__entry-body {
+  padding: 2px 0 6px 24px;
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-trace__entry-detail {
+  margin: 0;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* thinking 折叠卡：进行中指示（图标旋转沿用 .pactor-chat-spin） */
+.pactor-chat-thinking__icon {
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-thinking[data-streaming='true'] .pactor-chat-thinking__icon {
+  color: var(--pactor-chat-primary);
+}
+
+.pactor-chat-thinking__body {
+  padding: 2px 0 6px 24px;
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-thinking__body .pactor-markdown > :first-child {
+  margin-top: 0;
+}
+
+.pactor-chat-thinking__body .pactor-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+/* running 旋转 */
+.pactor-chat-spin {
+  animation: pactor-chat-spin 1s linear infinite;
+}
+
+@keyframes pactor-chat-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================
+ * 7. 其他 part
+ * ============================================================ */
+
+.pactor-chat-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.pactor-chat-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--pactor-chat-danger);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-danger-bg);
+  color: var(--pactor-chat-danger);
+  font-size: 12.5px;
+}
+
+/* 图标与首行文字对齐（svg 默认按基线对齐会下沉） */
+.pactor-chat-error > svg {
+  flex-shrink: 0;
+  margin-top: 3px;
+  display: block;
+}
+
+.pactor-chat-status {
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+.pactor-chat-dsl-pending {
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+.pactor-chat-denied {
+  border: 1px dashed var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-sm);
+  padding: 8px;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+/* ============================================================
+ * 8. Markdown 排版（chat 作为 pactor-markdown 的宿主主题）
+ * ============================================================ */
+
+.pactor-chat-view .pactor-markdown > :first-child {
+  margin-top: 0;
+}
+
+.pactor-chat-view .pactor-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.pactor-chat-view .pactor-markdown pre {
+  margin: 8px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-code-bg);
+  overflow-x: auto;
+  font-size: 12.5px;
+}
+
+.pactor-chat-view .pactor-markdown :not(pre) > code {
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: var(--pactor-chat-code-bg);
+  font-size: 0.9em;
+}
+
+.pactor-chat-view .pactor-markdown table {
+  border-collapse: collapse;
+  margin: 8px 0;
+}
+
+.pactor-chat-view .pactor-markdown th,
+.pactor-chat-view .pactor-markdown td {
+  padding: 6px 12px;
+  border: 1px solid var(--pactor-chat-border);
+}
+
+.pactor-chat-view .pactor-markdown th {
+  background: var(--pactor-chat-muted);
+}
+
+.pactor-chat-view .pactor-markdown a {
+  color: var(--pactor-chat-primary);
+}
+
+.pactor-chat-view .pactor-markdown blockquote {
+  margin: 8px 0;
+  padding: 2px 12px;
+  border-left: 3px solid var(--pactor-chat-border);
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-view .pactor-markdown img {
+  max-width: 100%;
+}
+
+/* ============================================================
+ * 9. Composer
+ * ============================================================ */
+
+.pactor-chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-xl);
+  background: var(--pactor-chat-card);
+  box-shadow: var(--pactor-chat-shadow-composer);
+  transition: border-color 0.15s ease;
+}
+
+.pactor-chat-composer:focus-within {
+  border-color: var(--pactor-chat-primary);
+}
+
+/* 拖拽悬停视觉态（附件拖入时） */
+.pactor-chat-composer--dragover {
+  border-color: var(--pactor-chat-primary);
+  background: var(--pactor-chat-muted);
+}
+
+/* 输入行：textarea + 发送/停止按钮 */
+.pactor-chat-composer__row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.pactor-chat-composer__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--pactor-chat-fg);
+  font: inherit;
+  line-height: 22px;
+  /* 单行时与 32px 发送按钮等高，文字（含 placeholder）垂直居中 */
+  min-height: 32px;
+  padding: 5px 0;
+  max-height: 200px;
+}
+
+.pactor-chat-composer__input::placeholder {
+  color: var(--pactor-chat-muted-fg);
+}
+
+/* 发送 / 停止按钮：圆形主按钮 */
+.pactor-chat-composer__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--pactor-chat-primary);
+  color: var(--pactor-chat-primary-fg);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.pactor-chat-composer__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pactor-chat-composer__button--stop {
+  background: var(--pactor-chat-danger);
+}
+
+/* 停止态进行中光环（纯 CSS keyframes，随按钮圆形） */
+.pactor-chat-composer__button--stop::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border: 2px solid var(--pactor-chat-danger);
+  border-radius: 999px;
+  pointer-events: none;
+  animation: pactor-chat-ring 1.4s ease-out infinite;
+}
+
+@keyframes pactor-chat-ring {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+
+/* 附件卡片区 */
+.pactor-chat-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pactor-chat-composer__attachment {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-muted);
+  cursor: pointer;
+}
+
+.pactor-chat-composer__attachment-thumb img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 7px;
+}
+
+.pactor-chat-composer__attachment-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  font-size: 12.5px;
+  color: var(--pactor-chat-fg);
+}
+
+.pactor-chat-composer__attachment-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pactor-chat-composer__attachment-size {
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-composer__attachment-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  padding: 2px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: 50%;
+  background: var(--pactor-chat-card);
+}
+
+/* 移除按钮是微型圆形按钮，保持 12px 小图标 */
+.pactor-chat-composer__attachment-remove svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* 工具栏：渲染槽 + "+" / 附件入口 */
+.pactor-chat-composer__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pactor-chat-composer__toolbar-spacer {
+  flex: 1;
+}
+
+/* ------------------------------------------------------------
+ * 内建锚定弹层 AnchoredPopover（chat-builtin-features 设计决策 D3）：
+ * position: fixed，top/bottom/left 由 JS 按锚点计算（上方优先、
+ * 空间不足翻转为 --below）；首帧 visibility:hidden 量高后显示。
+ * 浮于 chat 内其它浮层之上（侧栏抽屉 50 / 遮罩 40 之上）。
+ * ------------------------------------------------------------ */
+
+.pactor-chat-popover {
+  position: fixed;
+  z-index: 60;
+  padding: 4px;
+  max-height: 280px;
+  overflow-y: auto;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-md);
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-fg);
+  box-shadow: var(--pactor-chat-shadow-composer);
+  font-size: 14px;
+  line-height: 1.5;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pactor-chat-border) transparent;
+}
+
+/* ------------------------------------------------------------
+ * 内建特性（chat-builtin-features）：模型 chip / 上下文 chips /
+ * 弹层候选列表 / header 操作组与可编辑标题。全部只用既有
+ * --pactor-chat-* 语义令牌，暗色经令牌覆盖自动生效。
+ * ------------------------------------------------------------ */
+
+/* 弹层候选行（模型列表 / 上下文候选共用） */
+.pactor-chat-popover__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 160px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: var(--pactor-chat-radius-sm);
+  background: transparent;
+  color: var(--pactor-chat-fg);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.pactor-chat-popover__item:hover {
+  background: var(--pactor-chat-muted);
+}
+
+.pactor-chat-popover__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 选中项勾选标记 */
+.pactor-chat-popover__item-check {
+  flex-shrink: 0;
+  color: var(--pactor-chat-primary);
+}
+
+/* 上下文候选列表：分组头 / loading 与空态提示 / 内联错误 */
+.pactor-chat-source-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 180px;
+}
+
+.pactor-chat-source-list__group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pactor-chat-source-list__group-label {
+  padding: 6px 10px 2px;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+}
+
+.pactor-chat-source-list__hint {
+  padding: 6px 10px;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12.5px;
+}
+
+.pactor-chat-source-list__error {
+  padding: 6px 10px;
+  color: var(--pactor-chat-danger);
+  font-size: 12.5px;
+}
+
+/* 内建模型 chip（Composer 工具栏右端，toolbarEnd 槽内容之前） */
+.pactor-chat-model-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: 999px;
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12.5px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.pactor-chat-model-chip:hover {
+  border-color: var(--pactor-chat-primary);
+  color: var(--pactor-chat-fg);
+}
+
+.pactor-chat-model-chip__label {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 上下文 chips 区（输入区上方） */
+.pactor-chat-composer__contexts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pactor-chat-context-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px 4px 3px 10px;
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: 999px;
+  background: var(--pactor-chat-muted);
+  color: var(--pactor-chat-fg);
+  font-size: 12.5px;
+}
+
+.pactor-chat-context-chip__label {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pactor-chat-context-chip__remove {
+  padding: 2px;
+}
+
+.pactor-chat-context-chip__remove svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* 内建 header 操作组 + 可编辑标题（spec: chat-dsl-component / Header 配置） */
+/* header 位模型 chip（spec: chat-model-selector，决策 D2）：chip + title
+ * 组成左端组（chip 在 title 之前）；未配置 headerStart 槽时不渲染本容器 */
+.pactor-chat-workspace__header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.pactor-chat-workspace__header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pactor-chat-workspace__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 可编辑标题：按钮形态继承标题排版，hover 提示可点击 */
+.pactor-chat-workspace__title--editable {
+  border: none;
+  border-radius: var(--pactor-chat-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+
+.pactor-chat-workspace__title--editable:hover {
+  background: var(--pactor-chat-muted);
+}
+
+.pactor-chat-workspace__title-input {
+  border: 1px solid var(--pactor-chat-border);
+  border-radius: var(--pactor-chat-radius-sm);
+  background: var(--pactor-chat-card);
+  color: var(--pactor-chat-fg);
+  font: inherit;
+  font-size: 14px;
+  padding: 2px 8px;
+  outline: none;
+}
+
+.pactor-chat-workspace__title-input:focus {
+  border-color: var(--pactor-chat-primary);
+}
+
+/* ============================================================
+ * 10. 动效降级（prefers-reduced-motion）
+ * ============================================================ */
+
+/* 遵循系统级减弱动效设置：过渡缩短到近乎即时；循环动画（呼吸文案、
+   停止光环、状态图标脉冲、spinner 旋转）整体移除，保留静态色态指示 */
+@media (prefers-reduced-motion: reduce) {
+  .pactor-chat-view *,
+  .pactor-chat-view *::before,
+  .pactor-chat-view *::after,
+  .pactor-chat-layout *,
+  .pactor-chat-layout *::before,
+  .pactor-chat-layout *::after,
+  .pactor-chat-shell *,
+  .pactor-chat-shell *::before,
+  .pactor-chat-shell *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+
+  .pactor-chat-trace__status-text--breathing,
+  .pactor-chat-trace__status-icon:has(.pactor-chat-spin),
+  .pactor-chat-thinking[data-streaming='true'] .pactor-chat-thinking__icon,
+  .pactor-chat-spin,
+  .pactor-chat-composer__button--stop::after {
+    animation: none !important;
+  }
+}