agentworkshop 0.2.1

package/app/assets/css/main.css

@@ -0,0 +1,1257 @@
+/* ============================================================
+ * AgentWorkShop 设计系统 — 「Warm Editorial」
+ * ------------------------------------------------------------
+ * 移植自 open-tag(Fancyboi999)的 warm-editorial 设计语言:
+ * 暖纸白画布(off-white canvas)承载暖近黑油墨(ink);
+ * 视觉能量来自柔和粉彩渐变光斑(mint / peach / lavender / sky)
+ * —— 全页唯一刻意出现的"颜色时刻"。
+ *
+ * 色彩锁(Color Consistency Lock):
+ *   全局唯一主动作 = 墨色药丸(ink pill);无霓虹、无高饱和 CTA。
+ *   灰阶单一族系 = 暖石色(stone),亮/暗两模式同族,禁混冷灰。
+ *   粉彩光斑仅作氛围装饰(radial-gradient orbs),永不作按钮/文字色。
+ *   聊天声部(Slack 规范):彩色只表语义状态(错误/需关注/终态),
+ *   身份色 = 按 agentId 哈希的稳定色相(一处定义,头像/提及/泳道同源),
+ *   过程性内容(工具/思考/状态)一律中性墨,不与产出内容争抢注意力。
+ * 形状锁(Shape Consistency Lock):
+ *   CTAs 药丸(pill) · 卡片 14-16(xl) · 消息气泡 12 · 控件 8(md) · 小件 6(sm)。
+ * 排版(编辑杂志声部):
+ *   EB Garamond(衬线 display,weight 400,-0.01em)+
+ *   Inter(正文/导航/按钮,+0.01em 微松字距)+
+ *   IBM Plex Mono(数据,tabular-nums)。
+ *   衬线仅作展示/标题/空态/品牌时刻;正文/按钮/表格一律 Inter。
+ * 动效:transform/opacity only,120-320ms ease-out-quint;
+ *   图标微交互走 --im-spring(charter 例外);prefers-reduced-motion 全局收敛。
+ * ============================================================ */
+
+:root {
+  /* 唯一主动作:墨色药丸(ink pill) */
+  --accent: #292524;
+  --accent-strong: #0c0a09;
+  --accent-soft: rgb(41 37 36 / 8%);
+  --on-accent: #ffffff;
+
+  /* 油墨与纸张(亮:暖石色 stone —— editorial light) */
+  --ink: #0c0a09;
+  --ink-soft: #4e4e4e;
+  --ink-faint: #777169;
+  --ink-fainter: #a8a29e;
+  --paper: #f5f5f5;
+  --paper-raised: #ffffff;
+  --paper-deep: #f0efed;
+  --paper-tint: #e7e5e4;
+  --line: #e7e5e4;
+  --line-strong: #d6d3d1;
+  --divider-hair: rgb(12 10 9 / 6%);
+  --hover-tint: rgb(12 10 9 / 4%);
+
+  /* 氛围粉彩光斑(签名令牌:仅作 radial 渐变装饰,永不作前景色) */
+  --g-mint: #a7e5d3;
+  --g-peach: #f4c5a8;
+  --g-lav: #c8b8e0;
+  --g-sky: #a8c8e8;
+  /* 高亮底(mark/选中):蜜桃纸;暗色换深蜜桃并翻转前景 */
+  --mention: #fdf2d6;
+  --mention-ink: var(--ink);
+  --scrim: rgb(12 10 9 / 40%);
+
+  /* 兼容别名:旧变量名统一收敛到 accent / tone 系统 */
+  --color-primary: var(--accent);
+  --accent-cobalt: var(--tone-info-dot);
+  --accent-vermilion: var(--tone-danger-dot);
+  --accent-moss: var(--tone-success-dot);
+  --accent-amber: var(--tone-warning-dot);
+  --accent-violet: var(--tone-retry-dot);
+
+  /* tone 语义状态系统(仅表真实状态,不做装饰;open-tag 状态声部) */
+  --tone-neutral-dot: #a8a29e;
+  --tone-neutral-bg: #efeeec;
+  --tone-success-bg: #eaf7ef;
+  --tone-success-dot: #4c8f63;
+  --tone-info-bg: #eef3fb;
+  --tone-info-dot: #3f6094;
+  --tone-warning-bg: #faf1df;
+  --tone-warning-dot: #b9770e;
+  --tone-danger-bg: #fdecea;
+  --tone-danger-dot: #c25a4e;
+  --tone-retry-bg: #f1eef9;
+  --tone-retry-dot: #6b5aa0;
+  /* 运行中信号(busy 呼吸点/运行指示;比 warning-dot 更亮的琥珀,仅作指示点) */
+  --tone-live-dot: hsl(46 66% 50%);
+
+  /* 聊天气泡(Slack 声部:灰画布上的白卡片 + 发丝线;暗色换 raised surface) */
+  --bubble-bg: #ffffff;
+  --bubble-line: var(--line);
+  --bubble-shadow: 0 1px 2px rgb(12 10 9 / 4%);
+
+  /* 身份色(agentId 哈希 → 稳定色相;组件以 --av 注入,白字首字母可达 AA) */
+  --av-fallback: #57534e;
+  --on-av: #ffffff;
+
+  /* 圆角体系(形状锁:pill CTAs > 16/14 卡片 > 12 消息气泡 > 8 控件 > 6 小件) */
+  --radius-shell: 16px;
+  --radius-panel: 14px;
+  --radius-bubble: 12px;
+  --radius-panel-sm: 8px;
+  --radius-chip: 6px;
+  --radius-pill: 9999px;
+
+  /* 动效(transform/opacity only) */
+  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-base: 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  /* 图标微交互专用回弹(仅 hover/focus 反馈) */
+  --im-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* 字体:serif 展示 + Geist 正文 + mono 数据(Geist 替换 Inter:design-taste 技术字体规范) */
+  --font-display: 'EB Garamond', 'Songti SC', 'SimSun', 'Times New Roman', serif;
+  --font-body: 'Geist Variable', 'Geist', -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono Variable', 'Geist Mono', 'IBM Plex Mono', 'Cascadia Mono', ui-monospace, consolas, monospace;
+
+  /* 分层:深度靠 surface 阶梯 + hairline;悬浮件用同色系淡投影 */
+  --shadow-offset: none;
+  --shadow-card: none;
+  --shadow-float: 0 8px 28px rgb(12 10 9 / 12%);
+
+  /* ── 轻量毛玻璃(点到为止:只用于浮层/抽屉/输入卡这类"悬浮在画布上"的元素,
+   *    不做满屏玻璃 —— 避免过重 AI 味)。半透纸面 + backdrop-blur + 内侧 1px 折射边。 */
+  --glass-bg: color-mix(in srgb, var(--paper-raised) 72%, transparent);
+  --glass-line: color-mix(in srgb, var(--ink) 10%, transparent);
+  --glass-highlight: inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
+  --glass-blur: blur(14px) saturate(1.06);
+  /* 磨砂面板:浮层下的次级面板(抽屉 footer/命令面板头部),透出画布但更收敛 */
+  --frost-bg: color-mix(in srgb, var(--paper-raised) 58%, transparent);
+  --frost-blur: blur(18px) saturate(1.04);
+
+  /* ── Aurora Glass:应用壳层玻璃(数据卡/侧栏/顶栏)。
+   *    半透 surface + 深模糊 + 内缘折射;背后是 body 的极光氛围层。 */
+  --surface-glass: color-mix(in srgb, var(--paper-raised) 78%, transparent);
+  --surface-glass-strong: color-mix(in srgb, var(--paper-raised) 88%, transparent);
+  --glass-edge: inset 0 1px 0 color-mix(in srgb, white 45%, transparent);
+  --aurora-blur: blur(22px) saturate(1.1);
+  /* 极光辉光(品牌色低饱和;只作氛围源,永不作前景) */
+  --aurora-a: rgb(53 224 160 / 9%);
+  --aurora-b: rgb(65 200 244 / 8%);
+  --aurora-c: rgb(200 184 224 / 12%);
+  --aurora-veil: transparent;
+
+  /* 全局噪点(抵消数字平面的冷感;固定 pointer-events-none 覆盖,不进滚动容器) */
+  --noise-opacity: 0.028;
+
+  --sider-bg: #fafafa;
+  --sider-ink: #4e4e4e;
+  --sider-ink-faint: #777169;
+}
+
+html.dark {
+  /* ── Agent Harness · Digital Twin 控制室暗阶(与 TownView.vue --hud-* 同源)──
+   * 深海军蓝 surface 阶梯 + 绿主交互 + 数据青信息;品牌令牌单一来源,勿混入旧暖石黑阶 */
+  --accent: #3fe4ab;
+  --accent-strong: #63ebbc;
+  --accent-soft: rgb(53, 224, 160 / 12%);
+  --on-accent: #08130d;
+
+  --ink: #e8eef8;
+  --ink-soft: #b9c6d8;
+  --ink-faint: #8fa0b5;
+  --ink-fainter: #5f6e84;
+  --paper: #070b13;
+  --paper-raised: #0d1420;
+  --paper-deep: #0a111d;
+  --paper-tint: #152034;
+  --line: #1d2a42;
+  --line-strong: #2c4568;
+  --divider-hair: rgb(232 238 248 / 7%);
+  --hover-tint: rgb(232 238 248 / 4%);
+  --mention: rgb(246 196 83 / 18%);
+  --mention-ink: #f3e2b8;
+  --scrim: rgb(2 5 10 / 62%);
+
+  /* tone 语义状态:绿=运行/成功 · 青=数据/信息 · 琥珀=需关注 · 红=告警 */
+  --tone-neutral-dot: #64778f;
+  --tone-neutral-bg: rgb(100 119 143 / 16%);
+  --tone-success-bg: rgb(53 224 160 / 12%);
+  --tone-success-dot: #45e2a8;
+  --tone-info-bg: rgb(65 200 244 / 12%);
+  --tone-info-dot: #41c8f4;
+  --tone-warning-bg: rgb(246 196 83 / 13%);
+  --tone-warning-dot: #f6c453;
+  --tone-danger-bg: rgb(255 107 107 / 14%);
+  --tone-danger-dot: #ff8080;
+  --tone-retry-bg: rgb(157 140 255 / 15%);
+  --tone-retry-dot: #a795ff;
+  --tone-live-dot: hsl(46 70% 58%);
+
+  --bubble-bg: var(--paper-raised);
+  --bubble-line: var(--line);
+  --bubble-shadow: 0 1px 2px rgb(0 0 0 / 32%);
+
+  /* 氛围光斑(暗色收敛为低亮度深色 glow:有纵深、无粉彩 AI 味) */
+  --g-mint: #14352c;
+  --g-peach: #38301f;
+  --g-lav: #262b47;
+  --g-sky: #122c40;
+
+  --glass-bg: color-mix(in srgb, var(--paper-raised) 64%, transparent);
+  --glass-line: rgb(44 69 104 / 55%);
+  --glass-highlight: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
+  --frost-bg: color-mix(in srgb, var(--paper-raised) 52%, transparent);
+  --noise-opacity: 0.03;
+
+  /* Aurora Glass 暗阶:玻璃透出深海军蓝画布上的极光 glow */
+  --surface-glass: color-mix(in srgb, var(--paper-raised) 62%, transparent);
+  --surface-glass-strong: color-mix(in srgb, var(--paper-raised) 76%, transparent);
+  --glass-edge: inset 0 1px 0 rgb(255 255 255 / 10%);
+  --aurora-a: rgb(53 224 160 / 14%);
+  --aurora-b: rgb(65 200 244 / 12%);
+  --aurora-c: rgb(24 46 78 / 50%);
+  --aurora-veil: rgb(2 6 12 / 22%);
+
+  --av-fallback: #3d4f68;
+  --on-av: #e8eef8;
+
+  --shadow-float: 0 12px 32px rgb(0 0 0 / 50%);
+
+  --sider-bg: #0a101a;
+  --sider-ink: #b9c6d8;
+  --sider-ink-faint: #64778f;
+}
+
+/* 暗色选区:数据青底 + 墨字(替换亮色蜜桃纸;同一控制室语言) */
+html.dark ::selection {
+  color: var(--ink);
+  background: rgb(65 200 244 / 30%);
+}
+
+/* 暗色光斑进一步收敛(装饰是负资产:仅留可感知的纵深) */
+html.dark .aw-orbs::before {
+  opacity: 0.34;
+}
+
+html.dark .aw-orbs::after {
+  opacity: 0.28;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#__nuxt {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  /* 中文/混排段落断行优化(skill 规范) */
+  text-wrap: pretty;
+  /* Inter 编辑部式微松字距(open-tag body +0.15px 等比) */
+  letter-spacing: 0.01em;
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  /* 纯净 canvas:层次交给 surface 阶梯与 hairline */
+  background-color: var(--paper);
+  background-attachment: fixed;
+}
+
+/* ── Aurora 氛围层(fixed,双主题):玻璃表面的折射源。
+ *    暗色 = 深海军蓝画布上品牌绿/数据青 glow;亮色 = 暖纸上的柔和粉彩。
+ *    装饰是负资产:低饱和、大半径、零动画(除极慢漂移),reduced-motion 全收敛。 */
+body::before {
+  position: fixed;
+  z-index: -2;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    radial-gradient(1100px 640px at 12% -8%, var(--aurora-a), transparent 62%),
+    radial-gradient(1000px 720px at 108% 32%, var(--aurora-b), transparent 60%),
+    radial-gradient(900px 600px at 50% 118%, var(--aurora-c), transparent 66%),
+    var(--aurora-veil);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  body::before {
+    animation: aurora-drift 46s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes aurora-drift {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(-2.2%, 1.6%, 0) scale(1.045); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body::before { animation: none; }
+}
+
+/* ---------- 标题层级:serif display(衬线编辑部声部,weight 400) ---------- */
+h1,
+h2,
+h3,
+.ant-card .ant-card-head-title,
+.ant-modal-title,
+.ant-drawer .ant-drawer-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+
+h1,
+h2 {
+  color: var(--ink);
+}
+
+/* ---------- 滚动条(中性细轨) ---------- */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--line-strong);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: var(--radius-pill);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ink-fainter);
+  background-clip: content-box;
+}
+
+/* 高亮选区:蜜桃纸 + 墨字(open-tag mark 声部) */
+::selection {
+  color: var(--ink);
+  background: var(--g-peach);
+}
+
+/* @提及 pill(open-tag Slack 声部:蜜桃底 + 墨字,可点击跳转成员) */
+.md-mention {
+  padding: 0 3px;
+  font-weight: 600;
+  color: var(--mention-ink);
+  cursor: pointer;
+  background: var(--mention);
+  border-radius: var(--radius-chip);
+  transition: background var(--transition-fast);
+}
+
+.md-mention:hover {
+  background: color-mix(in srgb, var(--mention) 70%, var(--g-peach));
+}
+
+/* ── GitHub 风格提示框(open-tag github-alert 移植;`> [!NOTE]` 等)── */
+.gh-alert {
+  margin: 6px 0;
+  padding: 5px 12px 6px;
+  background: color-mix(in srgb, var(--gh-c) 9%, transparent);
+  border-left: 3px solid var(--gh-c);
+  border-radius: 0 var(--radius-panel-sm) var(--radius-panel-sm) 0;
+}
+
+.gh-alert .gh-title {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 1px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--gh-c);
+}
+
+.gh-alert .gh-title .i-tabler-info-circle,
+.gh-alert .gh-title .i-tabler-bulb,
+.gh-alert .gh-title .i-tabler-flag,
+.gh-alert .gh-title .i-tabler-alert-triangle,
+.gh-alert .gh-title .i-tabler-shield-half {
+  font-size: 13px;
+}
+
+.gh-alert p { margin: 0; }
+.gh-note { --gh-c: #5a8fd6; }
+.gh-tip { --gh-c: #4c9a70; }
+.gh-important { --gh-c: #8f76c9; }
+.gh-warning { --gh-c: #b98f2c; }
+.gh-caution { --gh-c: #c25a4e; }
+
+html.dark .gh-note { --gh-c: #92b6ff; }
+html.dark .gh-tip { --gh-c: #7fc98f; }
+html.dark .gh-important { --gh-c: #ab8bd8; }
+html.dark .gh-warning { --gh-c: #dcae4e; }
+html.dark .gh-caution { --gh-c: #e08893; }
+
+/* ── 任务列表勾选(open-tag task-list 移植;`- [ ]` / `- [x]`)── */
+ul.task-list {
+  margin: 4px 0 6px;
+  padding-left: 2px;
+  list-style: none;
+}
+
+.task-item {
+  display: flex;
+  gap: 7px;
+  align-items: baseline;
+  margin: 2px 0;
+}
+
+.task-check {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  font-size: 9px;
+  line-height: 1;
+  color: var(--on-accent);
+  vertical-align: baseline;
+  background: var(--paper-raised);
+  border: 1.5px solid var(--line-strong);
+  border-radius: var(--radius-chip);
+  transform: translateY(1.5px);
+}
+
+.task-check.on {
+  background: var(--tone-success-dot);
+  border-color: var(--tone-success-dot);
+}
+
+.task-item.done .task-text {
+  color: var(--ink-fainter);
+  text-decoration: line-through;
+}
+
+/* ── 加载骨架(open-tag skel 声部:hairline 占位 + 柔光扫过;reduced-motion 收敛)── */
+.aw-skel {
+  position: relative;
+  overflow: hidden;
+  background: var(--line);
+  border-radius: var(--radius-chip);
+}
+
+.aw-skel::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper-raised) 65%, transparent), transparent);
+  animation: aw-skel-shimmer 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes aw-skel-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aw-skel::after { display: none; }
+}
+
+/* ── @提及悬停信息卡(open-tag agent-hovercard 移植;纯信息浮层,不挡点击)── */
+.mh-card {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  gap: 11px;
+  align-items: flex-start;
+  min-width: 200px;
+  max-width: 260px;
+  padding: 12px 14px;
+  pointer-events: none;
+  background: var(--paper-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-panel);
+  box-shadow: var(--shadow-float);
+  animation: mh-in var(--transition-fast) cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes mh-in {
+  from { opacity: 0; transform: translateY(3px); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mh-card { animation: none; }
+}
+
+/* ============================================================
+ * 通用工具类
+ * ============================================================ */
+
+/* 等宽小标(数据/元信息;克制使用:每 3 个区块至多 1 处) */
+.aw-kicker {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+/* 展示字(serif 编辑部声部:标题/大数字/空态) */
+.aw-display {
+  font-family: var(--font-display);
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+
+/* 衬线内强调:Inter 语境内的一次衬线时刻(每组件至多一处) */
+.aw-serif-accent {
+  font-family: var(--font-display);
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+
+.aw-serif-accent-italic {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  /* 斜体降部预留:y/g/j/p/q 等降部字符不被紧行高裁切 */
+  line-height: 1.15;
+  padding-bottom: 0.06em;
+}
+
+/* 等宽数据:数字一律 tabular,列对齐不跳动 */
+.aw-mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 页面标题组 */
+.aw-page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.aw-page-head h1 {
+  margin: 2px 0 0;
+  font-size: 30px;
+  font-weight: 400;
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+}
+
+/* 版本铭牌:hairline 小片 */
+.aw-stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--ink-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-chip);
+}
+
+/* 分节小标(caption-uppercase:12px/600/0.08em) */
+.aw-sec {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+/* ── 药丸按钮(ink pill 主 CTA / outline 次级)── */
+.aw-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 18px;
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--on-accent);
+  cursor: pointer;
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-pill);
+  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
+}
+
+.aw-pill:hover {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.aw-pill:active {
+  transform: scale(0.97);
+}
+
+.aw-pill:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.aw-pill.outline {
+  color: var(--ink);
+  background: var(--paper-raised);
+  border-color: var(--line-strong);
+}
+
+.aw-pill.outline:hover {
+  background: var(--paper-deep);
+  border-color: var(--line-strong);
+}
+
+/* 幽灵图标钮(28px 方,hover 浮 surface;按压缩放反馈) */
+.aw-ghost {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 15px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-panel-sm);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.aw-ghost:not(:disabled):active {
+  transform: scale(0.94);
+}
+
+/* ── 玻璃浮层(点到为止:浮层/抽屉/输入卡的统一质感;内缘折射边替代外发光) ── */
+.aw-glass {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-line);
+  box-shadow: var(--glass-highlight), var(--shadow-float);
+  border-radius: var(--radius-panel);
+}
+
+/* 磨砂面板(玻璃之下的次级层:更收敛,透出画布但不喧宾) */
+.aw-frost {
+  background: var(--frost-bg);
+  backdrop-filter: var(--frost-blur);
+  -webkit-backdrop-filter: var(--frost-blur);
+  border: 1px solid var(--glass-line);
+  border-radius: var(--radius-panel-sm);
+}
+
+/* ── 全局噪点(抵消数字平面冷感;固定 pointer-events-none,不进滚动容器) ── */
+.aw-noise {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  pointer-events: none;
+  opacity: var(--noise-opacity);
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .aw-glass,
+  .aw-frost {
+    background: var(--paper-raised);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+/* ── 交互卡基座(Aurora Glass):半透 surface + backdrop 深模糊 + 内缘折射高光;
+ *    悬停物理浮起 + hairline 提亮。极光在卡片后透出,玻璃质感成立。 ── */
+.aw-tile {
+  position: relative;
+  background: var(--surface-glass);
+  backdrop-filter: var(--aurora-blur);
+  -webkit-backdrop-filter: var(--aurora-blur);
+  border: 1px solid var(--glass-line);
+  border-radius: var(--radius-panel-sm);
+  box-shadow: var(--glass-edge);
+  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
+}
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .aw-tile:hover {
+    border-color: color-mix(in srgb, var(--line-strong) 70%, var(--accent) 30%);
+    transform: translateY(-1px);
+    box-shadow: var(--glass-edge), var(--shadow-float);
+  }
+  .aw-tile:active {
+    transform: translateY(0) scale(0.99);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .aw-tile {
+    background: var(--paper-raised);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+.aw-ghost:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+
+.aw-ghost:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* 分段控件(open-tag .seg:hairline 描边矩形段) */
+.aw-seg {
+  display: inline-flex;
+  overflow: hidden;
+  font-size: 13px;
+  background: var(--paper-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-panel-sm);
+}
+
+.aw-seg button {
+  padding: 5px 13px;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.aw-seg button:not(.on):active {
+  transform: scale(0.96);
+}
+
+.aw-seg button + button {
+  box-shadow: -1px 0 0 var(--line-strong);
+}
+
+.aw-seg button.on {
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+
+.aw-seg button:not(.on):hover {
+  color: var(--ink);
+}
+
+/* 头像:agent = 身份色(agentId 哈希色相,组件以 --av 注入;Slack 式确定性
+ * 身份色,替代粉彩渐变),human/system = surface-strong */
+.aw-avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  overflow: hidden;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink);
+  background: var(--paper-deep);
+  border-radius: 50%;
+}
+
+.aw-avatar.is-agent {
+  color: var(--on-av);
+  background: var(--av, var(--av-fallback));
+}
+
+/* ── 氛围光斑(签名装饰:hero/空态/侧栏底的柔和粉彩 orbs)── */
+.aw-orbs {
+  position: relative;
+  overflow: hidden;
+}
+
+.aw-orbs::before,
+.aw-orbs::after {
+  position: absolute;
+  width: 340px;
+  height: 340px;
+  pointer-events: none;
+  content: "";
+  border-radius: 50%;
+  filter: blur(10px);
+  opacity: 0.55;
+}
+
+.aw-orbs::before {
+  top: -160px;
+  right: -120px;
+  background: radial-gradient(circle, var(--g-peach), transparent 68%);
+}
+
+.aw-orbs::after {
+  bottom: -190px;
+  left: -140px;
+  background: radial-gradient(circle, var(--g-sky), transparent 68%);
+  opacity: 0.4;
+}
+
+/* ── 编辑部式空状态(serif 标题 + 副行 + 可选 CTA)── */
+.pane-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  min-height: 46vh;
+  padding: 48px 24px;
+  color: var(--ink-faint);
+  text-align: center;
+}
+
+.pane-empty .pe-icon {
+  font-size: 28px;
+  color: var(--ink-fainter);
+}
+
+.pane-empty .pe-title {
+  max-width: 34ch;
+  font-family: var(--font-display);
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--ink-soft);
+}
+
+.pane-empty .pe-sub {
+  max-width: 44ch;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink-faint);
+}
+
+.pane-empty .pe-action {
+  margin-top: 4px;
+}
+
+/* ── 日期分隔线(时间线日界:hairline 贯穿 + 居中胶囊标签)── */
+.date-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 860px;
+  margin: 16px auto;
+}
+
+.date-divider::before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  content: "";
+  border-top: 1px solid var(--line-strong);
+}
+
+.date-divider-label {
+  position: relative;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-fainter);
+  background: var(--paper-raised);
+}
+
+/* 载入时的阶梯显现(首屏节奏) */
+@media (prefers-reduced-motion: no-preference) {
+  .aw-stagger > * {
+    animation: aw-rise 0.45s cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
+  }
+
+  .aw-stagger > :nth-child(2) { animation-delay: 0.05s; }
+  .aw-stagger > :nth-child(3) { animation-delay: 0.1s; }
+  .aw-stagger > :nth-child(4) { animation-delay: 0.15s; }
+  .aw-stagger > :nth-child(5) { animation-delay: 0.2s; }
+  .aw-stagger > :nth-child(6) { animation-delay: 0.25s; }
+
+  @keyframes aw-rise {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}
+
+/* ── 路由级过渡(page-fade):内容区轻淡入淡出,桥接路由切换的硬切。
+ *    导航为 tens/day 频次 → 只做近不可察的 opacity 桥(140ms 进 / 90ms 出),
+ *    无位移;reduced-motion 收敛为更缓的纯淡入(不归零,保可理解性)。 ── */
+.page-fade-enter-active {
+  transition: opacity 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.page-fade-leave-active {
+  transition: opacity 90ms ease;
+}
+
+.page-fade-enter-from,
+.page-fade-leave-to {
+  opacity: 0;
+}
+
+/* ============================================================
+ * 图标微交互(iconMotion,自 open-tag 移植;纯 CSS,零依赖)
+ * API:`im` 挂在交互元素上,图标挂效果类:
+ *   im-pop(缩放弹)/ im-rotate(旋转)/ im-shake(警示晃)/ im-pulse(心跳)
+ *   / im-tilt(俏皮倾)/ im-nudge-up(发送上推)/ im-bounce-down(下落弹)
+ * 仅 hover(可悬停设备)+ :focus-visible;prefers-reduced-motion 收敛。
+ * ============================================================ */
+
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .im .im-pop,
+  .im .im-rotate,
+  .im .im-tilt,
+  .im .im-nudge-up,
+  .im .im-fill {
+    transition: transform var(--transition-slow) var(--im-spring), fill 0.25s ease;
+  }
+
+  .im:hover:not(:disabled) .im-pop,
+  .im:focus-visible .im-pop { transform: scale(1.15); }
+
+  .im:hover:not(:disabled) .im-rotate,
+  .im:focus-visible .im-rotate { transform: rotate(180deg); }
+
+  .im:hover:not(:disabled) .im-tilt,
+  .im:focus-visible .im-tilt { transform: rotate(-12deg) scale(1.08); }
+
+  .im:hover:not(:disabled) .im-nudge-up,
+  .im:focus-visible .im-nudge-up { transform: translate(1.5px, -1.5px) scale(1.06); }
+
+  .im:hover:not(:disabled) .im-fill,
+  .im:focus-visible .im-fill { fill: currentColor; }
+
+  .im:hover:not(:disabled) .im-shake,
+  .im:focus-visible .im-shake { animation: im-shake 0.4s ease-in-out; }
+
+  .im:hover:not(:disabled) .im-pulse,
+  .im:focus-visible .im-pulse { animation: im-pulse 0.4s ease-in-out; }
+
+  .im:hover:not(:disabled) .im-bounce-down,
+  .im:focus-visible .im-bounce-down { animation: im-bounce-down 0.5s ease-in-out; }
+
+  .im:active:not(:disabled) .im-pop,
+  .im:active:not(:disabled) .im-nudge-up {
+    transform: scale(0.9);
+    transition-duration: var(--transition-fast);
+  }
+}
+
+@keyframes im-shake {
+  0% { transform: translateY(0) rotate(0); }
+  25% { transform: translateY(-2px) rotate(-10deg); }
+  50% { transform: translateY(0) rotate(10deg); }
+  75% { transform: translateY(-2px) rotate(-10deg); }
+  100% { transform: translateY(0) rotate(0); }
+}
+
+@keyframes im-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.25); }
+}
+
+@keyframes im-bounce-down {
+  0%, 100% { transform: translateY(0); }
+  40% { transform: translateY(3px); }
+  70% { transform: translateY(-1px); }
+}
+
+/* ============================================================
+ * Ant Design Vue 全局覆盖:warm editorial + 墨色药丸
+ * ============================================================ */
+
+.ant-layout {
+  background: transparent;
+}
+
+/* 卡片:玻璃 surface + hairline + panel 圆角(与 aw-tile 同族) */
+.ant-card {
+  background: var(--surface-glass);
+  backdrop-filter: var(--aurora-blur);
+  -webkit-backdrop-filter: var(--aurora-blur);
+  border-color: var(--glass-line) !important;
+  border-radius: var(--radius-panel) !important;
+  box-shadow: var(--glass-edge);
+  transition: border-color var(--transition-base);
+}
+
+.ant-card:hover {
+  border-color: var(--line-strong) !important;
+}
+
+/* 按钮:药丸形(ink pill 主 / outline 次);按压物理反馈(缩放,非位移) */
+.ant-btn {
+  border-radius: var(--radius-pill) !important;
+  font-weight: 500;
+  box-shadow: none;
+  transition:
+    color var(--transition-fast),
+    background-color var(--transition-fast),
+    border-color var(--transition-fast),
+    opacity var(--transition-fast),
+    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.ant-btn:not(:disabled):active {
+  transform: scale(0.97);
+}
+
+.ant-btn-default:not(:disabled):hover {
+  border-color: var(--line-strong);
+  color: var(--ink);
+}
+
+.ant-btn-sm {
+  border-radius: var(--radius-pill) !important;
+}
+
+.ant-radio-button-wrapper {
+  border-radius: var(--radius-chip) !important;
+}
+
+/* 表单控件:8px 圆角 + 墨色聚焦 */
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-input-number,
+.ant-select-selector,
+.ant-picker,
+.ant-input-search .ant-input,
+.ant-input-group-addon {
+  border-radius: var(--radius-panel-sm) !important;
+}
+
+.ant-select-dropdown,
+.ant-picker-dropdown,
+.ant-dropdown-menu {
+  border-radius: var(--radius-panel-sm) !important;
+}
+
+/* 标签:chip 小标签 */
+.ant-tag {
+  font-family: var(--font-body);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  border-radius: var(--radius-chip);
+}
+
+/* 表格:表头 Inter 小标(caption-uppercase),行线 hairline */
+.ant-table {
+  background: transparent;
+}
+
+.ant-table .ant-table-thead > tr > th {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  background: var(--paper-deep) !important;
+  border-bottom: 1px solid var(--line-strong) !important;
+}
+
+.ant-table .ant-table-tbody > tr > td {
+  border-bottom-color: var(--divider-hair);
+}
+
+.ant-table .ant-table-tbody > tr:hover > td {
+  background: var(--hover-tint) !important;
+}
+
+/* 描述列表:标签 Inter 小标、值等宽 */
+.ant-descriptions .ant-descriptions-item-label {
+  font-family: var(--font-body);
+  font-size: 11.5px;
+  letter-spacing: 0.05em;
+  background: var(--paper-deep) !important;
+}
+
+.ant-descriptions.ant-descriptions-bordered .ant-descriptions-item-content {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 页签:下划线式 */
+.ant-tabs .ant-tabs-tab {
+  font-family: var(--font-body);
+  font-size: 12.5px;
+}
+
+.ant-tabs .ant-tabs-ink-bar {
+  height: 2px;
+}
+
+/* 弹层(弹窗/抽屉):轻量玻璃 + panel 圆角,serif 标题(见顶部 h 覆盖) */
+.ant-modal-content,
+.ant-drawer-content {
+  border-radius: var(--radius-panel) !important;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-line);
+}
+
+/* 可调宽抽屉:panel 定位上下文(drawer-resizer 锚定左缘;content 不滚动,手柄不随 body 滚动) */
+.aw-resizable-drawer .ant-drawer-content {
+  position: relative;
+}
+
+.ant-modal-header,
+.ant-drawer-header {
+  border-bottom: 1px solid var(--line) !important;
+}
+
+/* 工具提示与消息 */
+.ant-tooltip .ant-tooltip-inner,
+.ant-message-notice-content {
+  border-radius: var(--radius-chip) !important;
+}
+
+/* 徽标:pill 计数 */
+.ant-badge-count,
+.ant-badge .ant-badge-count {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  border-radius: var(--radius-pill);
+  box-shadow: none;
+}
+
+/* 折叠面板 / 空态 / 骨架 */
+.ant-collapse {
+  background: transparent;
+  border-color: var(--line);
+  border-radius: var(--radius-panel-sm);
+}
+
+.ant-empty .ant-empty-description {
+  font-family: var(--font-body);
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.ant-skeleton {
+  opacity: 0.7;
+}
+
+/* 进度条:圆角轨道 + tone 信息色(替换 antd 默认饱和蓝,色彩锁) */
+.ant-progress-bg {
+  background: var(--tone-info-dot) !important;
+  border-radius: var(--radius-pill) !important;
+}
+
+.ant-progress-inner {
+  border-radius: var(--radius-pill) !important;
+  background: var(--paper-deep);
+}
+
+/* 菜单(抽屉/下拉内的非侧栏菜单) */
+.ant-menu-light {
+  background: transparent;
+}
+
+/* 分割线 */
+.ant-divider {
+  border-block-start-color: var(--line);
+}
+
+/* 上传 / 列表等次要组件 */
+.ant-list {
+  background: transparent;
+}
+
+/* 分段器(a-segmented):贴近 aw-seg 的选中墨块 */
+.ant-segmented {
+  border-radius: var(--radius-panel-sm) !important;
+}
+
+.ant-segmented .ant-segmented-item-selected {
+  font-weight: 600;
+}
+
+/* ============================================================
+ * 交互基线:focus-visible / 动效收敛
+ * ============================================================ */
+
+/* 键盘焦点:墨色描边(仅键盘导航时出现) */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+  border-radius: 1px;
+}
+
+/* 面板拖拽调宽进行中(PaneSplitter 挂载):禁文本选中/统一列宽光标,防拖动误触 */
+.aw-pane-dragging {
+  cursor: col-resize;
+  user-select: none;
+}
+.aw-pane-dragging * {
+  cursor: col-resize !important;
+}
+
+/* 动效敏感用户:全局收敛(进场/流式动画退化为即时呈现) */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  /* 例外:antd 组件的运动状态机(抽屉/弹窗/下拉)靠 transitionend·animationend
+     事件清理 motion 类;0.01ms 突变在部分环境丢事件 → 抽屉卡死在
+     enter-start/leave-active(面板停在屏外不可见)。这些是位置过场而非装饰动效,
+     恢复正常时长保证功能可用(reduced-motion 语义不被破坏:无循环/无弹跳)。 */
+  .ant-drawer-content-wrapper,
+  .ant-drawer-mask,
+  .ant-modal,
+  .ant-modal-mask,
+  .ant-select-dropdown,
+  .ant-picker-dropdown,
+  .ant-popover,
+  .ant-tooltip,
+  .page-fade-enter-active,
+  .page-fade-leave-active {
+    transition-duration: 200ms !important;
+    animation-duration: 200ms !important;
+  }
+}