@icen.ai/ui 0.5.0 → 0.8.0

package/dist/components/ai-chat.css

@@ -0,0 +1,1037 @@
+/*
+ * @icen.ai/ui — Component: ai-chat（AI 原生组件族：ai-chat / ai-message / ai-reasoning / ai-composer）
+ *
+ * 完整契约：
+ *   <div class="ai-chat" data-density="normal">                  ← verbose|normal|summary 三档
+ *     <div class="ai-chat-scroll">
+ *       <div class="ai-msg ai-msg--user|ai-msg--assistant|ai-msg--system|ai-msg--tool">
+ *         <span class="ai-msg-avatar"></span>
+ *         <div class="ai-msg-body">…消费方自行渲染 markdown…</div>
+ *         <div class="ai-msg-actions"><button data-ai-msg-action="copy|retry">…</button></div>
+ *         <div class="ai-msg-meta">12:04 · 1.2k tok</div>
+ *       </div>
+ *     </div>
+ *     <button class="ai-chat-jump" hidden>回到底部 · N 条新消息</button>
+ *   </div>
+ *
+ *   <div class="ai-reasoning [.is-streaming|.is-done]">
+ *     <button class="ai-reasoning-head" aria-expanded="false">
+ *       <span class="ai-reasoning-label">思考过程</span><span class="ai-reasoning-time">3s</span>
+ *     </button>
+ *     <div class="ai-reasoning-body" hidden>…</div>
+ *   </div>
+ *
+ *   <div class="ai-composer" data-ai-composer [.is-running]>
+ *     <div class="ai-composer-queue" hidden><span class="ai-composer-chip">
+ *       <span class="ai-composer-chip-text">…</span>
+ *       <button class="ai-composer-chip-remove" aria-label="移除">×</button>
+ *     </span></div>
+ *     <div class="ai-composer-refs" hidden><!-- @ 引用 chips，结构同上（v2 setComposerRefs） --></div>
+ *     <div class="ai-composer-attach" hidden><!-- 附件 chips，结构同上 --></div>
+ *     <div class="ai-composer-box control">
+ *       <textarea class="ai-composer-input" rows="1" placeholder="…"></textarea>
+ *       <div class="ai-composer-actions"><!-- v1 旧结构（无 toolbar 配置时保留）： -->
+ *         <button class="ai-composer-btn" data-ai-attach aria-label="附件"></button>
+ *         <button class="ai-composer-send" data-ai-send aria-label="发送"></button>  ← 运行态 .is-stop
+ *       </div>
+ *       <div class="ai-composer-toolbar"><!-- v2 工具条（setComposerModels/Usage 配置时 JS 装配）：
+ *         <button class="ai-composer-model" data-ai-model-open>provider 图标/首字母章 + 模型名 + chevron</button>
+ *         <span class="ai-composer-spacer"></span>
+ *         <span class="ai-composer-usage" data-ai-usage></span>   ← 用量环挂载点（renderAiUsageRing）
+ *         <button class="ai-composer-btn" data-ai-attach></button>
+ *         <button class="ai-composer-send" data-ai-send></button>  ← 运行态 .is-stop
+ *       </div>
+ *     </div>
+ *   </div>
+ *   弹层 .ai-composer-popup（portal body，JS 动态创建）：模型切换 / 斜杠命令 / @ 引用
+ *     三模式共用基座——.ai-composer-popup-search 搜索框、.ai-composer-popup-list(listbox)
+ *     > .ai-composer-popup-group > .ai-composer-popup-group-label + .ai-composer-popup-option(role=option)，
+ *     .ai-composer-popup-empty 空态、.ai-composer-popup-foot 底部提示。
+ *
+ * 配套 behaviors：behaviors/ai-chat.ts（initAiChat / createAiStream）
+ *               + behaviors/ai-composer.ts（initAiComposer / setComposerRunning
+ *                 + v2：setComposerModels / setComposerCommands / setComposerRefs / setComposerUsage）。
+ * 状态机 7 态 .is-* 中的 streaming/done 在本文件消费；running 脉冲点等条目态见 ai-tool.css（.ai-item 基元）。
+ * data-density：summary 档隐藏 meta、默认折叠 reasoning（纯 CSS）；
+ *               tool/system 类次要消息在 summary 档压淡。verbose 与 normal 目前同视觉（透明度两档生效）。
+ * 流式光标复用 tokens 的 blink keyframes（.animate-blink 同款）；reasoning shimmer 时长走
+ * --ai-shimmer-duration 局部变量（默认值 1.6s）。
+ */
+
+/* ══════════════ ai-chat（滚动容器 + 钉底） ══════════════ */
+
+/* 输出容器宽度自稳定契约：即使宿主是 flex/grid 居中上下文（shrink-wrap 陷阱），
+   也不随内容多少改变宽度——流式内容只允许纵向生长。
+   （用 align-self 而非 width:100%——width 在 shrink-wrap 父级下会塌成 min-content） */
+.ai-chat,
+.ai-reasoning,
+.ai-composer {
+  align-self: stretch;
+}
+
+.ai-chat {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: var(--density-space-sm);
+}
+
+.ai-chat-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-md);
+  padding: var(--density-space-xs) var(--density-space-2xs, 2px);
+  scroll-behavior: smooth;
+}
+
+/* 「回到底部 · N 条新消息」浮动钮（用户上滚暂停跟随时出现，initAiChat 驱动） */
+.ai-chat-jump {
+  position: absolute;
+  left: 50%;
+  bottom: var(--density-space-md);
+  transform: translateX(-50%);
+  z-index: var(--z-raised);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-xs) var(--density-space-md);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  box-shadow: var(--token-shadow-card);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  cursor: pointer;
+  animation: icen-pop-in var(--ai-jump-enter-duration, var(--duration-normal)) var(--ease-out);
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.ai-chat-jump:hover {
+  color: var(--token-accent);
+  border-color: var(--icen-hover-border);
+}
+.ai-chat-jump:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-chat-jump[hidden] {
+  display: none;
+}
+
+/* ══════════════ ai-message ══════════════ */
+
+.ai-msg {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
+  border-radius: var(--radius-md);
+  animation: icen-pop-in var(--ai-msg-enter-duration, var(--duration-normal)) var(--ease-out);
+}
+
+.ai-msg-avatar {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--token-fill-2);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  letter-spacing: 0.04em;
+  user-select: none;
+}
+.ai-msg--user .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-accent) 14%, transparent);
+  color: var(--token-accent);
+}
+.ai-msg--assistant .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-success) 12%, transparent);
+  color: var(--token-success);
+}
+.ai-msg--system .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-warning) 12%, transparent);
+  color: var(--token-warning);
+}
+.ai-msg--tool .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-info) 12%, transparent);
+  color: var(--token-info);
+}
+
+.ai-msg-body {
+  min-width: 0;
+  min-height: 1.6em; /* 流式从空开始时占住一行高度，不塌 */
+  font-size: var(--density-font-size-md);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 流式光标（▍闪烁，复用 tokens 的 blink keyframes，同 .animate-blink） */
+.ai-msg-body.is-streaming::after,
+.ai-reasoning-body.is-streaming::after {
+  content: '▍';
+  margin-left: 1px;
+  color: var(--token-accent);
+  animation: blink 1s step-end infinite;
+}
+
+/* 消息操作：hover / focus-within 才出现（键盘可达等价） */
+.ai-msg-actions {
+  position: absolute;
+  top: var(--density-space-xs);
+  right: var(--density-space-xs);
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  background: var(--token-surface);
+  border: 1px solid var(--token-line-soft);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition:
+    opacity var(--icen-tx-fast),
+    transform var(--icen-tx-fast),
+    visibility var(--icen-tx-fast);
+}
+.ai-msg:hover .ai-msg-actions,
+.ai-msg:focus-within .ai-msg-actions {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.ai-msg-actions [data-ai-msg-action] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-msg-actions [data-ai-msg-action]:hover {
+  color: var(--token-accent);
+  background: var(--token-fill-2);
+}
+.ai-msg-actions [data-ai-msg-action]:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-msg-actions [data-ai-msg-action] svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* meta：时间 · token 数（summary 档隐藏） */
+.ai-msg-meta {
+  margin-top: 2px;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 多模态消息部件（renderAiMessage，spec §10）── */
+
+.ai-msg-text {
+  display: block;
+}
+
+/* 图片 / 音频 / 视频：宽度自稳定（不超正文列），纵向生长 */
+.ai-msg-media {
+  display: block;
+  max-width: min(100%, 360px);
+  margin: var(--density-space-xs) 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+.ai-msg-media--image {
+  max-height: 320px;
+  object-fit: contain;
+}
+.ai-msg-media--audio {
+  width: min(100%, 300px);
+  height: 40px;
+}
+.ai-msg-media--video {
+  max-width: min(100%, 480px);
+  max-height: 300px;
+}
+
+/* 文件 chip（含可选下载链接） */
+.ai-msg-file {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  margin: 2px var(--density-space-xs) 2px 0;
+  padding: 2px var(--density-space-sm);
+  border: 1px solid var(--token-line);
+  border-radius: var(--radius-sm);
+  background: var(--token-surface);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+}
+.ai-msg-file-link {
+  color: var(--token-accent);
+  text-decoration: none;
+}
+.ai-msg-file-link:hover {
+  text-decoration: underline;
+}
+
+/* MCP ResourceLink 等资源引用 */
+.ai-msg-link {
+  color: var(--token-accent);
+}
+
+/* assistant 消息的模型名标签 */
+.ai-msg-model {
+  display: inline-block;
+  margin-left: var(--density-space-xs);
+  padding: 0 6px;
+  border-radius: var(--radius-xs);
+  background: var(--token-fill-1);
+  color: var(--token-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  vertical-align: middle;
+}
+
+/* ── 错误变体（renderAiMessage.setError / createAiStream.fail）── */
+
+.ai-msg--error .ai-msg-body {
+  border-left: 2px solid var(--token-error);
+  padding-left: var(--density-space-sm);
+}
+.ai-msg-error-text {
+  display: block;
+  margin-top: var(--density-space-xs);
+  color: var(--token-error);
+  font-size: var(--density-font-size-xs);
+}
+
+/* ══════════════ ai-reasoning ══════════════ */
+
+.ai-reasoning {
+  margin: var(--density-space-xs) 0;
+  padding-left: var(--density-space-md);
+  border-left: 2px solid var(--token-line-soft);
+}
+
+.ai-reasoning-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: var(--density-space-xs) 0;
+  border: 0;
+  background: none;
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-sm);
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-align: left;
+}
+.ai-reasoning-head:hover {
+  color: var(--token-text);
+}
+.ai-reasoning-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+  border-radius: var(--radius-xs);
+}
+
+/* 折叠指示 chevron（CSS 三角，展开时旋转） */
+.ai-reasoning-head::before {
+  content: '';
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--icen-tx-fast);
+}
+.ai-reasoning:has(.ai-reasoning-head[aria-expanded='true']) .ai-reasoning-head::before {
+  transform: rotate(45deg);
+}
+
+.ai-reasoning-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai-reasoning-time {
+  margin-left: auto;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 流式中：耗时位换成 shimmer「正在思考…」（时长走局部变量） */
+.ai-reasoning.is-streaming .ai-reasoning-time {
+  display: none;
+}
+.ai-reasoning.is-streaming .ai-reasoning-head::after {
+  content: '正在思考…';
+  margin-left: auto;
+  font-size: var(--density-font-size-2xs);
+  background: linear-gradient(
+    90deg,
+    var(--token-text-faint) 25%,
+    var(--token-text) 50%,
+    var(--token-text-faint) 75%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ai-shimmer var(--ai-shimmer-duration, 1.6s) linear infinite;
+}
+
+.ai-reasoning-body {
+  padding: var(--density-space-xs) 0 var(--density-space-sm);
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ai-reasoning-body[hidden] {
+  display: none;
+}
+
+/* ══════════════ ai-composer ══════════════ */
+
+.ai-composer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-sm);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-lg);
+  background: var(--token-surface);
+  box-shadow: var(--token-shadow-card);
+}
+.ai-composer:focus-within {
+  border-color: var(--icen-hover-border);
+}
+
+/* 排队 / 引用 / 附件 chips 行 */
+.ai-composer-queue,
+.ai-composer-refs,
+.ai-composer-attach {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs);
+}
+.ai-composer-queue[hidden],
+.ai-composer-refs[hidden],
+.ai-composer-attach[hidden] {
+  display: none;
+}
+
+.ai-composer-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 240px;
+  padding: 2px var(--density-space-xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface-strong);
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.4;
+}
+.ai-composer-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text-faint);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-chip-remove:hover {
+  color: var(--token-error);
+  background: var(--token-error-muted);
+}
+.ai-composer-chip-remove:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+/* 输入框（.control 基元提供 hover/focus 边框与光晕）；flex-wrap 让工具条独占下一行 */
+.ai-composer-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-panel);
+  box-shadow: var(--token-shadow-inset);
+}
+
+.ai-composer-input {
+  flex: 1;
+  min-width: 0;
+  padding: var(--density-space-xs) 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  resize: none;
+  font-family: inherit;
+  font-size: var(--density-font-size-md);
+  line-height: 1.5;
+  max-height: 12em;
+  overflow-y: auto;
+}
+
+/* v1 旧结构按钮行（无 toolbar 配置时保留）；v2 中按钮被移入工具条后此容器由 JS 移除 */
+.ai-composer-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  flex-shrink: 0;
+}
+
+/* ── v2 工具条（composer-box 内底部，业界主流形态）── */
+
+.ai-composer-toolbar {
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding-top: var(--density-space-xs);
+  border-top: 1px solid var(--token-line-soft);
+}
+.ai-composer-toolbar[hidden] {
+  display: none;
+}
+
+.ai-composer-spacer {
+  flex: 1;
+}
+
+/* 模型切换钮：provider 图标/首字母章 + 模型名 + chevron */
+.ai-composer-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 180px;
+  height: 28px;
+  padding: 0 var(--density-space-xs);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-model:hover {
+  color: var(--token-text);
+  background: var(--token-fill-2);
+}
+.ai-composer-model:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-model-icon,
+.ai-composer-model-provider-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ai-composer-model-provider-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-model-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-model-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--icen-tx-fast);
+}
+.ai-composer-model-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-model[aria-expanded='true'] .ai-composer-model-chevron {
+  transform: rotate(180deg);
+}
+
+/* provider 图标缺失时的首字母圆形章（token 色） */
+.ai-composer-model-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-accent) 15%, transparent);
+  color: var(--token-accent);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+.ai-composer-model-icon .ai-composer-model-badge {
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+}
+
+/* 用量环挂载点（环本体 .ai-usage-ring 在 ai-panel.css） */
+.ai-composer-usage {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.ai-composer-usage:empty {
+  display: none;
+}
+
+/* ── v2 弹层（portal body，模型/命令/引用三模式共用基座；定位 inline 由 behavior 写入）── */
+
+.ai-composer-popup {
+  position: fixed;
+  z-index: var(--z-popover);
+  display: flex;
+  flex-direction: column;
+  padding: var(--density-space-2xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-card-strong);
+  box-shadow: var(--token-shadow-popover, var(--token-shadow-card));
+  overflow: hidden;
+  animation: icen-pop-in var(--ai-composer-popup-enter-duration, var(--duration-normal)) var(--ease-out);
+}
+
+/* 搜索框（模型/引用过滤） */
+.ai-composer-popup-search {
+  flex-shrink: 0;
+  padding: var(--density-space-2xs);
+  border-bottom: 1px solid var(--token-line-soft);
+}
+.ai-composer-popup-search-input {
+  width: 100%;
+  padding: var(--density-space-2xs) var(--density-space-xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  background: var(--token-panel);
+  color: var(--token-text);
+  font-size: var(--density-font-size-sm);
+  outline: none;
+  transition: border-color var(--icen-tx-fast);
+}
+.ai-composer-popup-search-input:focus {
+  border-color: var(--token-accent);
+}
+.ai-composer-popup-search-input::placeholder {
+  color: var(--token-text-faint);
+}
+
+/* 列表（max-height inline 由 behavior 按 computePopoverLayout 写入） */
+.ai-composer-popup-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--density-space-2xs);
+}
+
+/* 分组（provider / ref kind） */
+.ai-composer-popup-group[hidden] {
+  display: none;
+}
+.ai-composer-popup-group-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--density-space-xs) var(--density-space-xs) var(--density-space-2xs);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  letter-spacing: 0.02em;
+}
+.ai-composer-popup-group-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-muted);
+}
+.ai-composer-popup-group-icon svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-popup-group-icon .ai-composer-model-badge {
+  width: 12px;
+  height: 12px;
+  font-size: 8px;
+}
+
+/* 选项行（label + meta + check） */
+.ai-composer-popup-option {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  width: 100%;
+  padding: var(--density-space-xs);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text);
+  font-size: var(--density-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-composer-popup-option:hover {
+  background: var(--token-fill-2);
+}
+.ai-composer-popup-option.is-focused {
+  background: var(--token-fill-2);
+}
+.ai-composer-popup-option:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-popup-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-muted);
+}
+.ai-composer-popup-option-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-popup-option-icon .ai-composer-model-badge {
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+}
+.ai-composer-popup-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-popup-option-sub {
+  margin-left: 6px;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-option-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ai-composer-popup-option-check {
+  display: none;
+  flex-shrink: 0;
+  color: var(--token-accent);
+}
+.ai-composer-popup-option-check svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-popup-option[aria-selected='true'] .ai-composer-popup-option-check {
+  display: inline-flex;
+}
+
+/* 命令行：/name <argsHint> + 描述 */
+.ai-composer-popup-cmd {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+.ai-composer-popup-cmd-line {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  max-width: 100%;
+}
+.ai-composer-popup-cmd-name {
+  font-family: var(--font-mono);
+  color: var(--token-accent);
+}
+.ai-composer-popup-cmd-args {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-cmd-desc {
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-muted);
+}
+
+/* 空态 */
+.ai-composer-popup-empty {
+  flex-shrink: 0;
+  padding: var(--density-space-md);
+  text-align: center;
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-empty[hidden] {
+  display: none;
+}
+
+/* 底部提示（模型弹层：切换模型会使 prompt 缓存失效；cacheRead 占比高时 warning 色） */
+.ai-composer-popup-foot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--density-space-xs);
+  border-top: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-foot svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.ai-composer-popup-foot.is-warn {
+  color: var(--token-warning);
+}
+
+/* ── 工具条按钮统一 28px 方形、svg 14px 居中（v1 旧结构按钮同样收敛）── */
+
+.ai-composer-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-btn:hover {
+  color: var(--token-text);
+  background: var(--token-fill-2);
+}
+.ai-composer-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 发送钮：accent 实底；运行态 .is-stop 变停止钮（中性底 + error 色方标，停语气但不整钮铺红） */
+.ai-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--token-accent);
+  color: var(--token-on-accent);
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.ai-composer-send:hover {
+  background: var(--token-accent-deep, var(--token-accent));
+}
+.ai-composer-send:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-send svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-send .ai-composer-send-icon[hidden] {
+  display: none;
+}
+.ai-composer-send.is-stop {
+  background: var(--token-surface-strong);
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
+}
+.ai-composer-send.is-stop:hover {
+  background: var(--token-error-muted);
+}
+
+/* 运行态：输入台整体 busy 标记（aria-busy 等价，状态机语言） */
+.ai-composer.is-running .ai-composer-box {
+  border-color: color-mix(in srgb, var(--token-accent) 30%, var(--token-line-soft));
+}
+
+/* 拖放文件高亮（粘贴/拖放附件入口，spec §11） */
+.ai-composer-box.is-dragover {
+  border-color: var(--token-accent);
+  box-shadow: var(--icen-ring);
+}
+
+/* ══════════════ data-density 三档（summary 纯 CSS 降噪） ══════════════ */
+
+/* summary：隐藏 meta、默认折叠 reasoning（head 展开仍可看）、次要消息压淡 */
+.ai-chat[data-density='summary'] .ai-msg-meta {
+  display: none;
+}
+.ai-chat[data-density='summary'] .ai-reasoning-body {
+  display: none;
+}
+.ai-chat[data-density='summary'] .ai-reasoning:has(.ai-reasoning-head[aria-expanded='true']) .ai-reasoning-body {
+  display: block;
+}
+.ai-chat[data-density='summary'] .ai-msg--tool,
+.ai-chat[data-density='summary'] .ai-msg--system {
+  opacity: 0.72;
+}
+
+/* verbose：当前与 normal 同视觉（透明度三档中两档生效；verbose 预留全显档位） */
+
+/* ══════════════ keyframes（本文件局部） ══════════════ */
+
+@keyframes ai-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* ══════════════ 动效守卫 ══════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-msg,
+  .ai-chat-jump,
+  .ai-composer-popup {
+    animation: none;
+  }
+  .ai-chat-jump,
+  .ai-msg-actions,
+  .ai-composer-chip-remove,
+  .ai-composer-btn,
+  .ai-composer-send,
+  .ai-composer-model,
+  .ai-composer-model-chevron,
+  .ai-composer-popup-option,
+  .ai-composer-popup-search-input,
+  .ai-reasoning-head,
+  .ai-reasoning-head::before {
+    transition: none;
+  }
+  .ai-reasoning.is-streaming .ai-reasoning-head::after {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+    color: var(--token-text-faint);
+  }
+  .ai-msg-body.is-streaming::after,
+  .ai-reasoning-body.is-streaming::after {
+    animation: none;
+  }
+}
+
+/* 触屏无 hover：消息操作常显（否则不可达） */
+@media (pointer: coarse) {
+  .ai-msg-actions {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}
+
+/* 实时待办 chip（setComposerTodo：业界模式——plan 状态挂输入区，不进对话流） */
+.ai-composer-todo {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.ai-composer-todo svg { width: 13px; height: 13px; color: var(--token-accent); }
+.ai-composer-todo:hover { border-color: var(--icen-hover-border, var(--token-line)); color: var(--token-text); }
+.ai-composer-todo:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.ai-composer-todo.is-done svg { color: var(--token-success); }
+.ai-composer-todo.is-error svg { color: var(--token-warning); }
+.ai-composer-todo-pop { min-width: 240px; max-width: 320px; }
+.ai-composer-todo-pop .ai-todo { padding: 0; }