/* ═══════════════════════════════════════════════════════════════════════
   1. 基础色 —— 唯一允许出现具体色值的区域
   命名：--agnes-color-{族}-{阶}[-a{透明}]
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --agnes-color-transparent: transparent;
  --agnes-color-white: #ffffff;
  --agnes-color-black-a06: rgb(0 0 0 / 6%);
  --agnes-color-black-a85: rgb(0 0 0 / 85%);

  --agnes-color-neutral-025: #fdfeff;
  --agnes-color-neutral-050: #fbfbfb;
  --agnes-color-neutral-075: #fafafa;
  --agnes-color-neutral-100: #e2e2e2;
  --agnes-color-neutral-150: #d9d9d9;
  --agnes-color-neutral-200: #d2dfe3;
  --agnes-color-neutral-250: #c6cfd6;
  --agnes-color-neutral-275: #c5c7d1;
  --agnes-color-neutral-300: #c4cbd7;
  --agnes-color-neutral-325: #b9c1ce;
  --agnes-color-neutral-350: #b3b9c3;
  --agnes-color-neutral-360: #b1b1b1;
  --agnes-color-neutral-375: #b2bcd0;
  --agnes-color-neutral-400: #aec1c7;
  --agnes-color-neutral-425: #a1a6bd;
  --agnes-color-neutral-450: #a0acb1;
  --agnes-color-neutral-475: #909aa4;
  --agnes-color-neutral-500: #8d98b3;
  --agnes-color-neutral-550: #6b7280;
  --agnes-color-neutral-575: #676d83;
  --agnes-color-neutral-600: #667188;
  --agnes-color-neutral-625: #4e586a;
  --agnes-color-neutral-650: #4a556b;
  --agnes-color-neutral-675: #485054;
  --agnes-color-neutral-700: #464e5c;
  --agnes-color-neutral-725: #424656;
  --agnes-color-neutral-750: #2c303b;
  --agnes-color-neutral-775: #2b313c;
  --agnes-color-neutral-790: #2a2e35;
  --agnes-color-neutral-800: #22252c;
  --agnes-color-neutral-850: #1c2026;
  --agnes-color-neutral-900: #191c1d;
  --agnes-color-neutral-950: #161b21;

  --agnes-color-brand-indigo-300: #849aff;
  --agnes-color-brand-indigo-400: #6983fc;
  --agnes-color-brand-indigo-450: #3c57d5;
  --agnes-color-brand-indigo-500: #3248af;
  --agnes-color-brand-blue-400: #5c9eff;
  --agnes-color-brand-blue-500: #0066ff;
  --agnes-color-brand-cyan-100: #cff2ff;
  --agnes-color-brand-cyan-200: #baeafb;
  --agnes-color-brand-cyan-300: #b5e5ff;
  --agnes-color-brand-cyan-400: #98dbff;

  --agnes-color-green-400: #4ade80;
  --agnes-color-green-600: #15803d;
  --agnes-color-green-bg-light: #dcfce7;
  --agnes-color-green-bg-dark: #1f3b2b;
  --agnes-color-yellow-400: #ffb547;
  --agnes-color-yellow-600: #ff8e12;
  /* 步骤 3 把浅色警告文字换成 yellow-600 后，落在 #f8f1df 上只有 2.04:1。
     补一档足够深的黄（沿用步骤 3 之前的语义值 #805e21）用于浅色文字：5.26:1。 */
  --agnes-color-yellow-700: #805e21;
  --agnes-color-red-400: #ff5c5c;
  --agnes-color-red-600: #e52626;
  /* 同上：red-600 落在 #f5cdcd 上只有 3.13:1，补一档深红用于浅色危险文字：5.54:1。 */
  --agnes-color-red-700: #8f2f2f;
  --agnes-color-red-bg-light: #f5cdcd;
  /* 原 #4a2323 配 red-400 文字只有 4.46:1，压深一档到 4.79:1。 */
  --agnes-color-red-bg-dark: #421f1f;

  /* 透明变体必须定义为完整颜色值，不得用整体 opacity 模拟 */
  --agnes-color-white-a70: rgb(255 255 255 / 70%);
  --agnes-color-white-a50: rgb(255 255 255 / 50%);
  --agnes-color-white-a30: rgb(255 255 255 / 30%);
  --agnes-color-white-a04: rgb(255 255 255 / 4%);
  --agnes-color-neutral-725-a60: rgb(66 70 86 / 60%);
  --agnes-color-neutral-300-a60: rgb(196 203 215 / 60%);
  --agnes-color-neutral-575-a12: rgb(103 109 131 / 12%);
  --agnes-color-neutral-150-a40: rgb(217 217 217 / 40%);
  --agnes-color-neutral-100-a70: rgb(226 226 226 / 70%);
  --agnes-color-neutral-850-a70: rgb(28 32 38 / 70%);
  --agnes-color-brand-indigo-500-a30: rgb(50 72 175 / 30%);
  --agnes-color-brand-indigo-400-a30: rgb(105 131 252 / 30%);
  --agnes-color-brand-indigo-500-a10: rgb(50 72 175 / 10%);
  --agnes-color-brand-indigo-400-a10: rgb(105 131 252 / 10%);
  --agnes-color-brand-blue-500-a05: rgb(0 102 255 / 5%);
  --agnes-color-brand-blue-400-a05: rgb(92 158 255 / 5%);
  --agnes-color-line-light-a80: rgb(194 198 216 / 80%);
  --agnes-color-line-light-a30: rgb(194 198 216 / 30%);
  --agnes-color-line-light-a20: rgb(194 198 216 / 20%);
  --agnes-color-line-dark-primary: #393f49;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. 语义 token —— 浅色（组件只允许引用这一层）
   组件禁止直接引用 --agnes-color-*；命名描述用途不描述色值。
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Brand */
  --agnes-brand-primary: var(--agnes-color-brand-indigo-500);
  --agnes-brand-focus-ring: var(--agnes-color-brand-indigo-500-a30);
  --agnes-brand-emphasis-soft: var(--agnes-color-brand-indigo-500-a10);

  /* Text */
  --agnes-text-primary: var(--agnes-color-neutral-900);
  --agnes-text-secondary: var(--agnes-color-neutral-725);
  --agnes-text-tertiary: var(--agnes-color-neutral-550);
  --agnes-text-disabled: var(--agnes-color-neutral-350);
  --agnes-text-inverse: var(--agnes-color-white);
  /* 强调文字：桌面端 token 集无此角色，本次补齐（设计 §5.4） */
  --agnes-text-emphasis: var(--agnes-color-brand-indigo-500);

  /* Icon —— 只有 secondary 有"非继承"消费点（连接状态灯）；
     其余图标一律走 .icon 的 stroke: currentColor 继承按钮文字色。 */
  --agnes-icon-secondary: var(--agnes-color-neutral-360);

  /* Background */
  --agnes-bg-page: var(--agnes-color-white);
  --agnes-bg-surface: var(--agnes-color-neutral-025);
  --agnes-bg-popover: var(--agnes-color-white);
  --agnes-bg-card: var(--agnes-color-neutral-150-a40);
  --agnes-bg-code: var(--agnes-color-neutral-150-a40);
  --agnes-bg-selected: var(--agnes-color-neutral-575-a12);
  --agnes-bg-hover: var(--agnes-color-neutral-150-a40);
  --agnes-bg-scrim: var(--agnes-color-white-a50);
  --agnes-bg-lightbox: var(--agnes-color-black-a85);
  /* 头部和设置表头不使用磨砂底；-soft / -hover 仍有消费点。 */
  --agnes-surface-glass-soft: rgb(255 255 255 / 72%);
  --agnes-surface-glass-hover: rgb(255 255 255 / 54%);

  /* Input */
  --agnes-input-surface: var(--agnes-color-neutral-100-a70);
  --agnes-input-content-strong: var(--agnes-color-neutral-900);
  --agnes-input-placeholder: var(--agnes-color-neutral-725-a60);
  --agnes-input-border: var(--agnes-color-line-light-a30);
  --agnes-input-border-emphasis: var(--agnes-color-line-light-a80);
  --agnes-input-border-focus: var(--agnes-color-brand-indigo-500);

  /* Line */
  --agnes-line-emphasis: var(--agnes-color-line-light-a80);
  --agnes-line-primary: var(--agnes-color-line-light-a30);
  /* --agnes-line-secondary 已无消费点；最浅发丝由 --agnes-line-primary 承担。 */

  /* Button —— secondary 在 .secondary-button 里是描边按钮，不需要填充角色；
     disabled 沿用 --agnes-text-tertiary + --agnes-bg-card（单独配 disabled 底色会掉到 1.43:1）。 */
  --agnes-button-primary-bg: var(--agnes-color-brand-indigo-500);
  --agnes-button-primary-bg-hover: var(--agnes-color-brand-indigo-450);
  --agnes-button-primary-content: var(--agnes-color-white);
  --agnes-button-outline-content: var(--agnes-color-neutral-675);

  /* Status */
  --agnes-status-success-text: var(--agnes-color-green-600);
  --agnes-status-success-bg: var(--agnes-color-green-bg-light);
  --agnes-status-warning-text: var(--agnes-color-yellow-700);
  /* 警告背景：桌面端只有 warning 文字色，本次补齐（设计 §5.4） */
  --agnes-status-warning-bg: #f8f1df;
  --agnes-status-danger-text: var(--agnes-color-red-700);
  --agnes-status-danger-bg: var(--agnes-color-red-bg-light);
  --agnes-status-info-text: var(--agnes-color-brand-blue-500);

  /* Shadow —— 阴影内含颜色，必须随主题切换，故归语义层而不是尺度层：
     尺度层的 :root 在文件更后方，与 .dark 特异性相同，会把深色值覆盖回浅色。 */
  --shadow-elevation: 0 4px 20px -12px rgb(0 0 0 / 12%);
  --shadow-hairline: 0 0 0 1px rgb(0 0 0 / 5%);
  --shadow-dialog: 0 28px 80px rgb(22 30 25 / 20%);
  --shadow-elevation-soft:
    0 0 0 0.5px var(--agnes-line-primary), 0 4px 16px rgb(0 0 0 / 3%), 0 0 24px rgb(0 0 0 / 3%);
  --shadow-elevation-prominent:
    0 0 0 0.5px var(--agnes-line-primary), 0 3px 8px rgb(0 0 0 / 4%), 0 0 20px rgb(0 0 0 / 5%);

  /* 品牌填充不使用内高光，--agnes-highlight-inset 已删除。 */

  /* Product-specific */
  /* 内容面保持纯白，侧栏使用浅灰，避免相邻表面只差一个色阶而难以区分。 */
  --agnes-bg-app-sidebar: var(--agnes-color-neutral-075);
  --agnes-bg-app-content: var(--agnes-bg-page);

  /* Trace 时序图和类型标记的语义色；组件层只消费这些角色，不保留具体色值。 */
  --agnes-trace-track: rgb(127 127 127 / 8%);
  --agnes-trace-row-current: rgb(127 127 127 / 10%);
  --agnes-trace-row-hover: rgb(127 127 127 / 7%);
  --agnes-trace-lane-input: #9aa8b5;
  --agnes-trace-lane-user: #4d7ec8;
  --agnes-trace-lane-context: #3fa37a;
  --agnes-trace-lane-model: #6f62c4;
  --agnes-trace-lane-tool: #d4843a;
  --agnes-trace-badge-user-text: #3b6fb6;
  --agnes-trace-badge-user-bg: rgb(59 111 182 / 14%);
  --agnes-trace-badge-context-text: #2f8f6a;
  --agnes-trace-badge-context-bg: rgb(47 143 106 / 14%);
  --agnes-trace-badge-assistant-text: #5c52a8;
  --agnes-trace-badge-assistant-bg: rgb(92 82 168 / 14%);
  --agnes-trace-badge-tool-text: #c36b22;
  --agnes-trace-badge-tool-bg: rgb(195 107 34 / 14%);
  --agnes-trace-badge-approval-text: #8a5a12;
  --agnes-trace-badge-approval-bg: rgb(138 90 18 / 12%);
  --agnes-trace-badge-compaction-text: #4e586a;
  --agnes-trace-badge-compaction-bg: rgb(78 88 106 / 12%);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. 语义 token —— 深色（与浅色分类同序、名字成对）
   必须出现在浅色 :root 之后，同名 token 才能覆盖。
   ═══════════════════════════════════════════════════════════════════════ */
.dark {
  color-scheme: dark;

  /* Brand */
  --agnes-brand-primary: var(--agnes-color-brand-indigo-400);
  --agnes-brand-focus-ring: var(--agnes-color-brand-indigo-400-a30);
  --agnes-brand-emphasis-soft: var(--agnes-color-brand-indigo-400-a10);

  /* Text */
  --agnes-text-primary: var(--agnes-color-neutral-050);
  --agnes-text-secondary: var(--agnes-color-neutral-300);
  /* 三级文字：原为 neutral-700，在 #161b21 上只有 2.07:1，几乎不可读。
     neutral-500 给到 6.0:1，仍明显低于 secondary，保持三级次序。 */
  --agnes-text-tertiary: var(--agnes-color-neutral-500);
  --agnes-text-disabled: var(--agnes-color-neutral-625);
  /* 深色品牌色是亮靛蓝，反色内容必须是近黑：白字只有 3.36:1，近黑 5.16:1。 */
  --agnes-text-inverse: var(--agnes-color-neutral-950);
  --agnes-text-emphasis: var(--agnes-color-brand-indigo-400);

  /* Icon —— 同浅色：只有 secondary 有非继承消费点（连接状态灯） */
  --agnes-icon-secondary: var(--agnes-color-neutral-575);

  /* Background */
  /* 深色下三级表面必须拉开：页面底 ≠ 弹窗/输入框底 ≠ 面板底。
     原先三者都是 neutral-950，弹窗与页面同色，只剩 1px 边框可分。 */
  --agnes-bg-page: var(--agnes-color-neutral-850);
  --agnes-bg-surface: var(--agnes-color-neutral-800);
  --agnes-bg-popover: var(--agnes-color-neutral-800);
  --agnes-bg-card: var(--agnes-color-white-a04);
  --agnes-bg-code: var(--agnes-color-neutral-850);
  --agnes-bg-selected: var(--agnes-color-neutral-750);
  --agnes-bg-hover: var(--agnes-color-white-a04);
  --agnes-bg-scrim: var(--agnes-color-neutral-850-a70);
  --agnes-surface-glass-soft: rgb(255 255 255 / 8%);
  --agnes-surface-glass-hover: rgb(255 255 255 / 12%);

  /* Input */
  --agnes-input-surface: var(--agnes-color-neutral-775);
  --agnes-input-content-strong: var(--agnes-color-neutral-050);
  --agnes-input-placeholder: var(--agnes-color-neutral-300-a60);
  --agnes-input-border: var(--agnes-color-line-dark-primary);
  --agnes-input-border-emphasis: var(--agnes-color-line-dark-primary);
  --agnes-input-border-focus: var(--agnes-color-brand-indigo-400);

  /* Line */
  --agnes-line-emphasis: var(--agnes-color-neutral-790);
  --agnes-line-primary: var(--agnes-color-line-dark-primary);

  /* Button —— 同浅色：secondary 是描边按钮，disabled 沿用 tertiary + bg-card */
  --agnes-button-primary-bg: var(--agnes-color-brand-indigo-400);
  --agnes-button-primary-bg-hover: var(--agnes-color-brand-indigo-300);
  --agnes-button-primary-content: var(--agnes-color-neutral-950);
  --agnes-button-outline-content: var(--agnes-color-white);

  /* Status */
  --agnes-status-success-text: var(--agnes-color-green-400);
  --agnes-status-success-bg: var(--agnes-color-green-bg-dark);
  --agnes-status-warning-text: var(--agnes-color-yellow-400);
  --agnes-status-warning-bg: #3a2f18;
  --agnes-status-danger-text: var(--agnes-color-red-400);
  --agnes-status-danger-bg: var(--agnes-color-red-bg-dark);
  --agnes-status-info-text: var(--agnes-color-brand-blue-400);

  /* Shadow —— 深色底上浅色阴影看不见，改用更强的黑；hairline 反过来用浅环 */
  --shadow-elevation: 0 4px 20px -12px rgb(0 0 0 / 55%);
  --shadow-hairline: 0 0 0 1px rgb(255 255 255 / 8%);
  --shadow-dialog: 0 28px 80px rgb(0 0 0 / 55%);
  --shadow-elevation-soft:
    0 0 0 0.5px var(--agnes-line-primary), 0 4px 16px rgb(0 0 0 / 3%), 0 0 24px rgb(0 0 0 / 3%);
  --shadow-elevation-prominent:
    0 0 0 0.5px var(--agnes-line-primary), 0 3px 8px rgb(0 0 0 / 4%), 0 0 20px rgb(0 0 0 / 5%);

  /* 与浅色同值：品牌填充仍是靛蓝，顶部高光的角色不变 */

  /* Product-specific */
  --agnes-bg-app-sidebar: var(--agnes-color-neutral-850);
  --agnes-bg-app-content: var(--agnes-color-neutral-950);

  /* 保留 Trace 类型的稳定识别色；透明背景自然与深色表面合成。 */
  --agnes-trace-track: rgb(127 127 127 / 8%);
  --agnes-trace-row-current: rgb(127 127 127 / 10%);
  --agnes-trace-row-hover: rgb(127 127 127 / 7%);
  --agnes-trace-lane-input: #9aa8b5;
  --agnes-trace-lane-user: #4d7ec8;
  --agnes-trace-lane-context: #3fa37a;
  --agnes-trace-lane-model: #6f62c4;
  --agnes-trace-lane-tool: #d4843a;
  --agnes-trace-badge-user-text: #3b6fb6;
  --agnes-trace-badge-user-bg: rgb(59 111 182 / 14%);
  --agnes-trace-badge-context-text: #2f8f6a;
  --agnes-trace-badge-context-bg: rgb(47 143 106 / 14%);
  --agnes-trace-badge-assistant-text: #5c52a8;
  --agnes-trace-badge-assistant-bg: rgb(92 82 168 / 14%);
  --agnes-trace-badge-tool-text: #c36b22;
  --agnes-trace-badge-tool-bg: rgb(195 107 34 / 14%);
  --agnes-trace-badge-approval-text: #8a5a12;
  --agnes-trace-badge-approval-bg: rgb(138 90 18 / 12%);
  --agnes-trace-badge-compaction-text: #4e586a;
  --agnes-trace-badge-compaction-bg: rgb(78 88 106 / 12%);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. 尺度 —— 无深浅维度，不参与别名映射
   --radius-card / --radius-panel 是既有名字原样提升进本层：
   圆角是纯尺度，既无深浅维度也无"基础/语义"分层，故不新建 token、
   不做别名（同名别名会构成 var 自引用）。
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --font-sans:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-body: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --line-xs: 1rem;
  --line-sm: 1.25rem;
  --line-md: 1.5rem;
  --line-lg: 1.75rem;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-main-page: 32px;
  --radius-modal: 28px;
  --radius-full: 9999px;
  --radius-card: 1.125rem;
  --radius-panel: 1.375rem;
  --s2: 2px;
  --s4: 4px;
  --s8: 8px;
  --s10: 10px;
  --s12: 12px;
  --s16: 16px;
  --s20: 20px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --chat-content-width: 57.5rem;
  --composer-card-max-width: calc(var(--chat-content-width) + 2rem);
  --admin-content-width: 70rem;
  --control-height: 2.25rem;
  --control-height-form: 2.75rem;
  --control-height-touch: 44px;
  --dialog-max-height: min(46rem, calc(100dvh - 3rem));
  /* 阴影已上移到语义层（第 2 节 Shadow 组）：内含颜色，需要 .dark 覆盖。
     三档仍是极简口径，只是不再属于"无深浅维度"的尺度层。 */
  --transition-fast: 140ms ease-out;
  --transition: 170ms ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. 组件层 —— 一代化：每个选择器只声明一次，零具体色值
   原 181 个硬编码色值已按规则映射到语义 token；重复块已合并（后声明者胜）。
   ═══════════════════════════════════════════════════════════════════════ */
* {
  box-sizing: border-box;
  /* 隐藏滚动条外观，保留各容器原有的滚动行为。 */
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
:where([hidden]) {
  display: none !important;
}
html,
body {
  min-width: 0;
  min-height: 100%;
}
body {
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  overflow: hidden;
}
/* 区域表面钩子（不变量 R1，设计 §20）：可换肤表面属性必须声明在 data-agnes-region 选择器 (0,1,0) 上，
   不能声明在元素的 #id (1,0,0) 上。皮肤样式表靠 adoptedStyleSheets 排在文档样式表之后取胜，
   同特异性下皮肤必胜；但只要基础样式把同一属性声明在 #id 上，皮肤就永远赢不了。
   布局、尺寸、交互态（:hover / :focus*）仍留在各自的 id/class 规则上。其余区域规则见各自元素附近。 */
[data-agnes-region="app"] {
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-app-content);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.5;
}
::selection {
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-selected);
}
button,
input,
select,
textarea {
  font: inherit;
  border: 1px solid var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-page);
}
/* 输入类控件用自己的语义角色（底色/文字/边框），button 不吃这一组。
   此前输入框与页面同底、占位符与真实值同色，控件不"像"控件。 */
input,
select,
textarea {
  border-color: var(--agnes-input-border);
  color: var(--agnes-input-content-strong);
  background: var(--agnes-input-surface);
}
button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
button:hover:not(:disabled) {
  border-color: var(--agnes-line-emphasis);
  background: var(--agnes-bg-hover);
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}

/* 表单控件吃 outline 会和自身边框叠成双层，看着又粗又脏。
   改成「边框变色 + 一圈柔和品牌环」，既克制又仍然醒目。 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--agnes-input-border-focus);
  box-shadow: 0 0 0 3px var(--agnes-brand-focus-ring);
}
button:disabled,
button.ant-btn:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: var(--agnes-text-tertiary);
  border-color: var(--agnes-line-primary);
  background: var(--agnes-bg-card);
}
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
input,
select {
  min-height: var(--control-height);
  width: 100%;
  padding: 0.5rem 0.625rem;
}
textarea {
  min-height: 2.875rem;
  max-height: 11.25rem;
  padding: 0.25rem 0;
  resize: none;
}
::placeholder {
  color: var(--agnes-input-placeholder);
  opacity: 1;
}
.icon {
  width: 1rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
/* ── 客户端（agnes-code）图标的绘制约定 ──────────────────────────────────────
   这些字形直接取自客户端 `ui/desktop/src/components/icons/*` 与
   `images/projectIcon_*.svg`。客户端各图标的 fill/stroke 口径不同（自定义图标基本是
   纯 fill；Settings 是 16 网格上的 stroke 1.2；projectIcon 是"填充 + 0.144 极细描边"），
   而 SVG 上的 stroke-width 属性会被上面 .icon 的 CSS 覆盖，故按图标再声明一次。 */
.icon-fill {
  fill: currentColor;
  stroke: none;
}
.icon-settings {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.icon-folder {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.144;
}
.icon-folder-open {
  stroke-width: 0.1953;
  display: none;
}
/* 工作区分组标题的展开/收起两态，对应客户端 AgnesProjectFolderIcon 的 expanded 属性。 */
.workspace-heading[aria-expanded="true"] .icon-folder-open {
  display: block;
}
.workspace-heading[aria-expanded="true"] .icon-folder-closed {
  display: none;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-lg);
  color: var(--agnes-text-inverse);
  background: var(--agnes-button-primary-bg);
  transform: translateY(-180%);
  transition: transform var(--transition-fast);
}
.skip-link:focus {
  transform: translateY(0);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.primary-button {
  border-color: var(--agnes-button-primary-bg);
  color: var(--agnes-button-primary-content);
  background: var(--agnes-button-primary-bg);
}
.primary-button:hover:not(:disabled) {
  border-color: var(--agnes-button-primary-bg-hover);
  background: var(--agnes-button-primary-bg-hover);
  box-shadow: var(--shadow-elevation);
}
.secondary-button {
  color: var(--agnes-button-outline-content);
  background: transparent;
}
.secondary-button.compact {
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
}
.icon-button {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  color: var(--agnes-text-secondary);
  background: transparent;
}
.icon-button:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-hover);
}
.sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.375rem 0.75rem;
  /* 侧栏自己**不滚动**：滚动职责只归 `#sessions`。此前这里是 `auto`，
     一旦内容总高超出视口（窗口拉矮，或 `sidebar.panellist` 插槽有内容），
     整个侧栏变成滚动容器，底部的「设置」行会随列表一起滚出视野。
     裁掉溢出即可 —— 列表在剩余空间里自己滚，底部行始终留在原位。 */
  overflow: hidden;
  border-right: 1px solid var(--agnes-line-primary);
  background: var(--agnes-bg-app-sidebar);
  border-right-color: var(--agnes-line-primary);
}
/* 插槽只承载组件生命周期；会话列表和底部操作仍参与侧栏的纵向 flex 布局。
   必须覆盖到**最内层**的 slot 包装：侧栏实际有 `ui:sidebar` → `sidebar` 两组各两层包装，
   只让外层透明时，内层 `[data-slot="sidebar"]` / `[data-slot-entry]` 仍是普通 block 盒子，
   `#sessions` 的 flex:1 与 `.sidebar-footer` 的 flex:none 全部失效 ——
   列表不再自己滚动，底部「设置」也不会钉在侧栏底部。这里按后代泛化，避免写死嵌套深度。 */
.sidebar :where([data-slot], [data-slot-entry]) {
  display: contents;
}
.sidebar-head,
.topbar,
.connection-group,
.dialog-heading,
.dialog-heading-actions {
  display: flex;
  align-items: center;
}
.sidebar-head {
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0 0.5rem 0.25rem;
  margin: 0 0 0.5rem;
  min-height: 3.75rem;
}
.brand-lockup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* 品牌锁定组合沿用原 AgnesMark，图形标和字标共用主题品牌色。 */
.brand-lockup {
  color: var(--agnes-brand-primary);
}
/* 原 AgnesMark 以 alpha 蒙版着色，侧栏、空态与过程行头像复用同一资产。 */
.agnes-mark {
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("/brand-mark.png") center / contain no-repeat;
  mask: url("/brand-mark.png") center / contain no-repeat;
}
.brand-mark-image {
  width: 1.375rem;
  height: 1.375rem;
}
.brand-wordmark-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.eyebrow,
.section-label,
.task-heading h1,
.task-heading span,
#composer-hint,
.field-hint,
.dialog-intro {
  margin: 0;
}
.eyebrow {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}
.section-label {
  color: var(--agnes-text-tertiary);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25rem;
  text-transform: none;
}
.sidebar-actions {
  display: grid;
}
.sidebar-actions .primary-button {
  height: 2.375rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-width: 0.5px;
  border-color: var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-page);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375rem;
}
.section-label {
  margin: 0;
}
#sessions {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  /* flex:1 + min-height:0 会把列表压进剩余空间；不裁 overflow 时多出来的行
     直接画到下面的「设置」行上。列表自己滚动，footer 才能钉在底部。 */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.session-row {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  border-radius: var(--radius-md);
}
.session-row > :where(.session) {
  flex: 1;
  min-width: 0;
}
/* 行状态统一在这里上色：悬停、当前会话（`data-active` 由 navigation 打在行上）、
   菜单打开期间钉住（面板已脱离文档流，指针离开行就丢了 `:hover`）。 */
.session-row:hover,
.session-row[data-active="true"],
.session-row[data-menu-open="true"] {
  background: var(--agnes-bg-hover);
}
.session-menu {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  /* 右缘留 8px（+12px 侧栏内边距 =「⋯」离窗口右缘 24px）：标题距左缘 42px，
     动作位贴死右缘（16px）会让整行观感左重右轻。 */
  margin-right: 0.5rem;
  opacity: 0;
  pointer-events: none;
}
.session-row:hover .session-menu,
.session-row:focus-within .session-menu,
.session-row[data-menu-open="true"] .session-menu {
  opacity: 1;
  pointer-events: auto;
}
/* Touch has no durable hover target.  Keeping the session action hit area inert on a narrow
   sidebar made the menu unreachable by an ordinary tap; expose the already-reserved action slot
   there while retaining the compact hover treatment for pointer desktops. */
@media (max-width: 720px) {
  .session-menu {
    opacity: 1;
    pointer-events: auto;
  }
}
.session-menu-trigger {
  /* 行内动作使用 16px 裸图标、三级文字色；显式设置 min-height，避免悬停时行高跳动。 */
  width: 1rem;
  min-height: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--agnes-text-tertiary);
  background: transparent;
}
.session-menu-trigger:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-primary);
  background: transparent;
}
/* 菜单卡使用 4px 内边距和 20px 圆角；宽度与落点由 positionPopover 设置。
   面板挂在 body 上，必须用 fixed 避开侧栏的 overflow 裁剪。 */
.session-menu-actions {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 1.25rem;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-popover);
  box-shadow: var(--shadow-elevation-prominent), var(--shadow-hairline);
}
/* 菜单单元显式左对齐；全局 button 使用 inline-flex 居中，text-align 不会覆盖它。 */
.session-menu-actions button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.625rem;
  color: var(--agnes-text-primary);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  text-align: left;
}
.session-menu-actions button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--agnes-bg-hover);
}
.session-menu-actions .icon {
  color: var(--agnes-text-tertiary);
}
.session-rename-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.session-rename-dialog form {
  display: grid;
  gap: 16px;
}
.session-rename-dialog input {
  width: 100%;
  min-width: 0;
}
.session-rename-error {
  margin: 0;
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.session-rename-error:empty {
  display: none;
}
/* 报告问题弹窗：照重命名弹窗的尺寸；四个步骤用 [hidden] 切换。 */
.diagnostics-dialog {
  width: min(480px, calc(100vw - 32px));
}
/* 内边距与滚动放在内层：落在 <dialog> 自身的点击才算点遮罩（bindDismissibleDialog）。 */
.diagnostics-body {
  max-height: var(--dialog-max-height);
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.diagnostics-dialog section {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.diagnostics-badge {
  justify-self: start;
  margin: 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--agnes-status-success-bg);
  color: var(--agnes-status-success-text);
  font-size: var(--font-size-sm);
}
.diagnostics-include {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.diagnostics-include label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--agnes-text-primary);
}
/* 全局 input 规则把 checkbox 撑成 width:100%，把标签文字挤成竖排换行；
   缩到原生勾选框大小，复用 #config-form .appearance-option input 的方案。 */
.diagnostics-include input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--agnes-brand-primary);
}
.diagnostics-file {
  margin: 0;
  color: var(--agnes-text-primary);
  overflow-wrap: anywhere;
}
.diagnostics-dialog .dialog-error {
  margin: 12px 0 0;
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.diagnostics-dialog .dialog-error:empty {
  display: none;
}
.archived-heading {
  align-items: flex-start;
}
/* #config-close 绝对定位在面板右上（right:14px、宽 28px），横幅右侧的
   「刷新列表」按钮按常规 1.5rem 内边距会伸进 ×底下被压住；右缘让出
   42px + 10px 缝。选择器带 ID 压过 ≤900px 媒体查询里的 padding-inline 覆盖。 */
#config-form .config-heading.archived-heading {
  padding-right: 3.25rem;
}
.archived-heading > div {
  min-width: 0;
}
.archived-pane-body {
  min-width: 0;
  min-height: 0;
  flex: 1;
  padding: 2rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.archived-heading p {
  margin: 0.35rem 0 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.375rem;
}
.archived-toolbar {
  display: flex;
  align-items: flex-end;
  width: auto;
  margin-top: 0;
}
.archived-search-field {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
}
.archived-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--agnes-input-border);
  border-radius: var(--radius-md);
  color: var(--agnes-input-content-strong);
  background: var(--agnes-input-surface);
  font-size: var(--font-size-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}
.archived-search-field input::placeholder {
  color: var(--agnes-text-tertiary);
}
.archived-search-field input:hover:not(:disabled) {
  border-color: var(--agnes-input-border-emphasis);
  background: var(--agnes-input-surface);
}
.archived-search-field input:focus {
  border-color: var(--agnes-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--agnes-brand-focus-ring);
}
.archived-message {
  min-height: 0;
  margin: 1rem 0 0;
  color: var(--agnes-status-danger-text);
  overflow-wrap: anywhere;
}
.archived-message:empty {
  display: none;
}
.archived-list-shell {
  margin-top: 1.25rem;
  margin-bottom: 0;
  min-height: 12rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  background: var(--agnes-bg-surface);
  overflow: hidden;
}
.archived-empty {
  margin: 0;
  padding: 3rem 1.5rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}
.archived-empty:empty {
  display: none;
}
.archived-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archived-sessions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--agnes-line-primary);
  transition: background 120ms ease;
}
.archived-sessions li:last-child {
  border-bottom: 0;
}
.archived-sessions li:hover {
  background: var(--agnes-bg-hover);
}
.archived-sessions li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.archived-sessions strong {
  display: block;
  overflow: hidden;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archived-sessions p {
  margin: 0.2rem 0 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.25rem;
}
.archived-sessions button {
  flex: none;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-md);
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-surface);
  font-size: var(--font-size-xs);
}
.archived-sessions button:hover:not(:disabled) {
  border-color: var(--agnes-text-emphasis);
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-selected);
}

.session {
  width: 100%;
  min-height: 2.125rem;
  justify-content: flex-start;
  overflow: hidden;
  /* 左侧 30px = 工作区标题的文字 x（行内 8 + 文件夹图标 16 + 间距 6）：
     会话标题与工作区名落在同一条竖线上，"会话嵌在工作区下"的层级靠这条缩进表达。
     行高与 .workspace-heading 同为 34px，分组内外的纵向节奏一致。 */
  padding: 0 0.5rem 0 1.875rem;
  border-color: transparent;
  border-radius: var(--radius-md);
  color: var(--agnes-text-primary);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
/* 底色由上方的 `.session-row` 承担。这里仍要显式声明，是为了压掉通用
   `button:hover:not(:disabled)`：不清的话按钮悬停时会多出一圈 `--agnes-line-emphasis` 描边，
   并在动作槽左侧补一块断开的底色。 */
.session:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}
.session.active {
  color: var(--agnes-text-primary);
  font-weight: 400;
}
.sidebar-footer {
  /* 底部操作行不参与压缩：侧栏是 flex column，空间紧张时若不显式 flex:none，
     这一行会被 `#sessions` 挤扁。配合 `.sidebar` 的 overflow:hidden，
     「设置」始终完整留在侧栏底部。 */
  flex: none;
  margin-top: 0.5rem;
}
.sidebar-footer button {
  width: 100%;
  justify-content: flex-start;
  min-height: 2.625rem;
  padding: 0 0.625rem 0 0.5rem;
  border-color: transparent;
  border-radius: var(--radius-lg);
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
}
main {
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--agnes-bg-app-content);
}
.topbar {
  min-height: 4.75rem;
  align-items: center;
  gap: 0;
  padding: 0.625rem 1.75rem;
  border-bottom: 0.5px solid var(--agnes-line-primary);
  background: var(--agnes-bg-app-content);
  backdrop-filter: none;
}
.sidebar-toggle {
  flex: 0 0 auto;
}
.task-heading {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.task-heading h1 {
  max-width: 220px;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-heading span {
  min-width: 0;
  overflow: hidden;
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#status[data-state="running"] {
  color: var(--agnes-text-emphasis);
}
#status[data-state="error"] {
  color: var(--agnes-status-danger-text);
}
.connection-group {
  flex: 0 0 auto;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  white-space: nowrap;
}
.connection-group::before {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: 0 0 auto;
  margin-inline: 0.1875rem;
  content: "";
  border-radius: 50%;
  background: var(--agnes-icon-secondary);
}
.connection-group:has(#connection[data-state="connecting"]) {
  border-color: color-mix(in srgb, var(--agnes-status-warning-text) 20%, transparent);
  color: var(--agnes-status-warning-text);
  background: var(--agnes-status-warning-bg);
}
.connection-group:has(#connection[data-state="reconnecting"]) {
  border-color: color-mix(in srgb, var(--agnes-status-warning-text) 20%, transparent);
  color: var(--agnes-status-warning-text);
  background: var(--agnes-status-warning-bg);
}
.connection-group:has(#connection[data-state="connected"]) {
  border-color: color-mix(in srgb, var(--agnes-status-success-text) 20%, transparent);
  color: var(--agnes-status-success-text);
  background: var(--agnes-status-success-bg);
}
.connection-group:has(#connection[data-state="closed"]) {
  border-color: color-mix(in srgb, var(--agnes-status-danger-text) 20%, transparent);
  color: var(--agnes-status-danger-text);
  background: var(--agnes-status-danger-bg);
}
.connection-group:has(#connection[data-state="connected"])::before,
.connection-group:has(#connection[data-state="reconnecting"])::before,
.connection-group:has(#connection[data-state="closed"])::before {
  background: currentcolor;
}
/* 连接正常是默认态，常驻一行「已连接」没有信息量；只有中断和已关闭才值得占位置。
   恢复路径本来就在 #reconnect-notice 里，顶栏只负责把状态本身说清楚。 */
body:not([data-connection="reconnecting"]):not([data-connection="closed"]) .connection-group {
  display: none;
}
#notice,
#reconnect-notice,
#stored-history-notice {
  width: min(50rem, calc(100% - 3rem));
  min-height: 0;
  margin: 0 auto;
  padding-top: var(--s8);
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
#notice:empty {
  display: none;
}
#notice[data-kind="error"] {
  color: var(--agnes-status-danger-text);
}
.workbench-split {
  position: relative;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
/* 页签行：tablist 与「报告问题」按钮同级，按钮不进 tablist，以免破坏 tab 语义。 */
.session-tabs-bar {
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--agnes-line-primary);
}
.session-tabs {
  display: flex;
  gap: 1rem;
}
#report-problem {
  margin-left: auto;
}
.session-tabs button {
  min-height: 2.25rem;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: var(--font-size-sm);
}
.session-tabs button[aria-selected="true"] {
  border-bottom-color: var(--agnes-text-emphasis);
  color: var(--agnes-text-emphasis);
}
.conversation-shell {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--agnes-bg-app-content);
}
.conversation-region-root {
  position: absolute;
  inset: 0;
  min-height: 0;
}
[data-agnes-region="trace"] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--agnes-bg-app-content);
  color: var(--agnes-text-secondary);
}
/* 轨迹区渲染在内置插槽包装里：区域 → [data-slot] → [data-slot-entry] → #trace-content。
   两层包装默认是普通 block，区域网格只看到一个按内容高度铺开的子项，三条轨道被第一行
   全吃掉，`.trace-body` 拿到的不是剩余高度而是内容高度，`.trace-list` 的 overflow:auto
   永不触发——列表被区域的 overflow:hidden 裁掉又滚不动。包装透明后 toolbar / 甘特图 /
   trace-body 才真正落到各自轨道上。 */
[data-agnes-region="trace"] > [data-slot],
[data-agnes-region="trace"] > [data-slot] > [data-slot-entry] {
  display: contents;
}
[data-agnes-region="rightbar"] {
  position: fixed;
  z-index: 5;
  inset: 4.75rem 1rem 1rem auto;
  width: min(26rem, calc(100vw - 2rem));
  overflow: auto;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 1rem;
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation-prominent);
}
[data-agnes-region="rightbar"] > [data-slot="rightbar"] {
  min-height: 100%;
}
#rightbar-content,
#rightbar-session {
  min-height: 100%;
}
#rightbar-session {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
.rightbar-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}
.rightbar-tab-content {
  min-width: 0;
}
.rightbar-document-preview {
  min-width: 0;
  overflow: auto;
}
.rightbar-document-preview > img,
.rightbar-document-preview > [data-document-preview] > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.rightbar-document-preview > iframe,
.rightbar-document-preview > [data-document-preview] > iframe {
  display: block;
  width: 100%;
  min-height: 24rem;
  border: 0;
}
.rightbar-document-preview > pre,
.rightbar-document-preview > [data-document-preview] > pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rightbar-document-preview .document-preview-unavailable {
  color: var(--agnes-text-secondary);
}
.trace-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--agnes-line-primary);
}
.trace-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 400;
}
.trace-search {
  width: min(14rem, 100%);
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 999px;
  background: var(--agnes-bg-app-content);
  color: var(--agnes-text-primary);
  font-size: var(--font-size-xs);
  font-weight: 400;
}
.trace-fold-all {
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border-color: var(--agnes-line-primary);
  border-radius: 4px;
  background: transparent;
  font-size: var(--font-size-xs);
  font-weight: 400;
}
.trace-gantt {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.55rem 1rem 0.7rem;
  border-bottom: 1px solid var(--agnes-line-primary);
}
.trace-gantt-note {
  margin: 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}
.trace-gantt-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
  font-size: var(--font-size-xs);
}
.trace-gantt-controls select,
.trace-gantt-clear {
  min-height: 1.5rem;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 4px;
  background: var(--agnes-bg-app-content);
  color: var(--agnes-text-primary);
  font-size: var(--font-size-xs);
}
.trace-gantt-clear {
  margin-left: auto;
}
.trace-gantt-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}
.trace-gantt-label {
  font-size: 0.7rem;
  color: var(--agnes-text-secondary);
}
.trace-gantt-track {
  position: relative;
  height: 0.85rem;
  overflow: hidden;
  background: var(--agnes-trace-track);
  border-radius: 2px;
  touch-action: none;
  cursor: crosshair;
}
.trace-gantt-track:focus-visible {
  outline: 2px solid var(--agnes-text-emphasis);
  outline-offset: 2px;
}
.trace-gantt-selection {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  min-width: 2px;
  border-inline: 1px solid var(--agnes-text-emphasis);
  background: var(--agnes-trace-row-current);
  pointer-events: none;
}
.trace-gantt-bar {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
}
button.trace-gantt-bar:hover:not(:disabled) {
  filter: brightness(1.15);
}
button.trace-gantt-bar:focus-visible {
  outline: 2px solid var(--agnes-text-emphasis);
  outline-offset: -2px;
}
.trace-gantt-bar[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--agnes-text-primary);
}
.trace-gantt-bar[data-in-range="false"] {
  opacity: 0.45;
}
.trace-gantt-bar.cluster {
  box-shadow: inset 0 0 0 1px var(--agnes-line-primary);
}
.trace-gantt-bar.marker.tone-user {
  height: 50%;
}
.trace-gantt-bar.marker.tone-context {
  top: 50%;
  height: 50%;
}
.trace-gantt-bar.lane-input {
  background: var(--agnes-trace-lane-input);
}
.trace-gantt-bar.lane-input.tone-user {
  background: var(--agnes-trace-lane-user);
}
.trace-gantt-bar.lane-input.tone-context {
  background: var(--agnes-trace-lane-context);
}
.trace-gantt-bar.lane-model {
  background: var(--agnes-trace-lane-model);
}
.trace-gantt-bar.lane-tool {
  background: var(--agnes-trace-lane-tool);
}
.trace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  min-height: 0;
}
.trace-list {
  min-width: 0;
  overflow: auto;
}
.trace-list-spacer {
  width: 100%;
  pointer-events: none;
}
.trace-no-results {
  margin: 1rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
}
.trace-load-earlier {
  display: block;
  width: 100%;
  height: 33px;
  padding: 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--agnes-line-primary);
  border-radius: 0;
  background: var(--agnes-trace-track);
  color: var(--agnes-text-emphasis);
  text-align: left;
  font-size: var(--font-size-xs);
}
.trace-turn-header {
  height: 33px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--agnes-line-primary);
  background: var(--agnes-trace-track);
}
.trace-turn-toggle {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 0 0.3rem;
  border: 0;
  background: transparent;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.trace-row {
  display: grid;
  grid-template-columns: 3.4rem 3.4rem minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 0.55rem;
  width: 100%;
  height: 32px;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  color: var(--agnes-text-primary);
  background: transparent;
  text-align: start;
  font-size: var(--font-size-sm);
  font-weight: 400;
}
.trace-row-entry,
.trace-tool-entry {
  position: relative;
  height: 32px;
}
.trace-tool-toggle {
  position: absolute;
  z-index: 1;
  top: 2px;
  width: 20px;
  min-width: 20px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
}
.trace-tool-toggle:focus-visible {
  outline: 2px solid var(--agnes-text-emphasis);
  outline-offset: -2px;
}
.trace-row[aria-current="true"] {
  background: var(--agnes-trace-row-current);
}
.trace-row:hover {
  background: var(--agnes-trace-row-hover);
}
.trace-step-mark {
  min-width: 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-badge {
  justify-self: start;
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.trace-badge.kind-user {
  color: var(--agnes-trace-badge-user-text);
  background: var(--agnes-trace-badge-user-bg);
}
.trace-badge.kind-context {
  color: var(--agnes-trace-badge-context-text);
  background: var(--agnes-trace-badge-context-bg);
}
.trace-badge.kind-assistant {
  color: var(--agnes-trace-badge-assistant-text);
  background: var(--agnes-trace-badge-assistant-bg);
}
.trace-badge.kind-tool {
  color: var(--agnes-trace-badge-tool-text);
  background: var(--agnes-trace-badge-tool-bg);
}
.trace-badge.kind-approval {
  color: var(--agnes-trace-badge-approval-text);
  background: var(--agnes-trace-badge-approval-bg);
}
.trace-badge.kind-compaction {
  color: var(--agnes-trace-badge-compaction-text);
  background: var(--agnes-trace-badge-compaction-bg);
}
.trace-row-preview {
  min-width: 0;
  overflow: hidden;
  color: var(--agnes-text-secondary);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-inspector {
  min-width: 0;
  overflow: auto;
  padding: 0.75rem 1rem 1.25rem;
  border-left: 1px solid var(--agnes-line-primary);
}
.trace-inspector-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.trace-inspector-title {
  flex: 1;
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.trace-inspector-close {
  display: inline-flex;
  width: 1.75rem;
  min-width: 1.75rem;
  min-height: 0;
  height: 1.75rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-weight: 400;
}
.trace-tab {
  min-height: 0;
  justify-content: flex-start;
  font-weight: 400;
}
.trace-inspector-tabs {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
  border-bottom: 1px solid var(--agnes-line-primary);
  overflow-x: auto;
}
.trace-tab {
  flex: 0 0 auto;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: var(--font-size-sm);
}
.trace-tab[aria-selected="true"] {
  border-bottom-color: var(--agnes-text-emphasis);
  color: var(--agnes-text-emphasis);
}
.trace-field {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: var(--font-size-sm);
}
.trace-field-label {
  color: var(--agnes-text-secondary);
}
.trace-field-value {
  color: var(--agnes-text-primary);
  overflow-wrap: anywhere;
}
.trace-pre {
  margin: 0.5rem 0 0;
  overflow: auto;
  color: var(--agnes-text-primary);
  font-size: 0.8rem;
  white-space: pre-wrap;
}
.trace-raw-note {
  margin: 0.5rem 0 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}
.trace-detail-status,
.trace-detail-resource {
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.trace-detail-copy {
  min-height: 1.6rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 4px;
  background: transparent;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-xs);
}
.trace-detail-heading {
  margin: 0.8rem 0 0;
  font-size: var(--font-size-sm);
}
.trace-detail-content {
  max-height: 60vh;
  overflow: auto;
  overflow-wrap: anywhere;
}
.trace-detail-media {
  margin: 0.5rem 0;
}
.trace-image-omitted {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.trace-image-thumb {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--agnes-line-primary);
  background: transparent;
}
.trace-image-thumb img {
  display: block;
  max-width: min(100%, 14rem);
  max-height: 10rem;
  object-fit: contain;
}
.trace-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--agnes-bg-lightbox);
}
.trace-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.trace-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-width: 2rem;
  min-height: 2rem;
}
.trace-empty {
  margin: 1.5rem 1.25rem;
}
@media (max-width: 900px) {
  .trace-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .trace-inspector {
    border-left: 0;
    border-top: 1px solid var(--agnes-line-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trace-gantt-bar {
    transition: none;
  }
}
#transcript {
  height: 100%;
  /* 切换会话时旧画面降不透明度提示「正在准备」（body.session-switching），
     新投影就绪后平滑恢复。 */
  transition: opacity var(--transition);
  /* 对话不需要横向滚动条。此前 overflow: auto 会让任何一根超宽的行内元素
     （长代码串、长路径）把整条会话推出横向滚动。 */
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  width: 100%;
}
/* 滚动容器占满整个中列，内容列自己限宽居中。限宽若落回 #transcript，两侧留白就属于
   不可滚动的祖先（.conversation-region-root / .conversation-shell / body 都是
   overflow: hidden），鼠标停在留白上时找不到可滚动祖先，滚轮会毫无反应。 */
#transcript-content {
  margin-inline: auto;
  padding: 1rem 2rem;
  width: min(100%, var(--chat-content-width));
}
#empty-state {
  position: absolute;
  inset: 0;
  width: min(100%, var(--composer-card-max-width));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem 2rem;
  text-align: center;
  /* hidden → 显示（新建草稿进入空态）时淡入，压平布局切换的生硬感。 */
  transition: opacity var(--transition);
}
@starting-style {
  #empty-state:not([hidden]) {
    opacity: 0;
  }
}
[data-agnes-region="empty-state"] {
  color: var(--agnes-text-secondary);
}
#empty-state .eyebrow {
  color: var(--agnes-text-emphasis);
}
.empty-state-heading {
  max-width: 30rem;
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.5rem;
}
.empty-state-copy {
  max-width: 30rem;
  margin: 0.75rem 0 0;
  color: var(--agnes-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5rem;
}
/* 仅新收到的文字淡入；尾段重建时沿用已开始的进度，已读正文与布局保持稳定。
   时长和负延时由 text-reveal 提供，历史快照与选区释放后的积压内容直接显示。 */
@keyframes message-text-reveal {
  from {
    opacity: 0.08;
  }
  to {
    opacity: 1;
  }
}
.message-reveal-fragment {
  animation-name: message-text-reveal;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.timeline-node {
  width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.node-label,
.tool-head,
.approval-head {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.node-label {
  margin: 0;
}
.node-body,
.approval-summary {
  overflow-wrap: anywhere;
}
.node-body:not(.markdown),
.approval-summary {
  white-space: pre-wrap;
}
.node-body {
  margin-top: 0.5rem;
}
/* `.user` 原有一条卡片样式（padding/border/radius/background）。.user 只会以
   "timeline-node user" 出现，那 4 条全被 .timeline-node.user 与 .user .node-body
   覆盖，属死值，已删除。 */
.assistant {
  padding: 0;
}
.assistant .node-body {
  margin-top: 0;
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.assistant .node-body:empty {
  display: none;
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown > :last-child {
  margin-bottom: 0;
}
.code-block {
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-code);
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-card);
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown .table-scroll,
.markdown .code-block {
  margin: 0 0 1rem;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  margin: 2rem 0 1rem;
  color: var(--agnes-text-primary);
  font-weight: 700;
}
.markdown h1 {
  font-size: 1.3125rem;
  line-height: 1.875rem;
}
.markdown h2 {
  font-size: 1.1875rem;
  line-height: 1.75rem;
}
.markdown h3 {
  font-size: 1.125rem;
  line-height: 1.625rem;
}
.markdown h4 {
  margin: 1rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.markdown ul,
.markdown ol {
  padding-inline-start: 18px;
}
.markdown li {
  line-height: 1.5rem;
}
.markdown li + li {
  margin-top: 6px;
}
.markdown li > p {
  margin: 8px 0;
}
.markdown li:first-child > p {
  margin-top: 0;
}
.markdown li:last-child > p {
  margin-bottom: 0;
}
.markdown li > ul,
.markdown li > ol {
  margin: 0.25em 0 0.35em;
}
.markdown blockquote {
  padding: 0 0 0 14px;
  border-inline-start: 2px solid var(--agnes-text-tertiary);
  color: var(--agnes-text-secondary);
}
.markdown a {
  color: var(--agnes-text-emphasis);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.markdown a:hover {
  color: var(--agnes-brand-primary);
}
.markdown code,
.tool-name,
.tool-summary,
#approval p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.markdown :where(:not(pre)) > code {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border: 0.5px solid var(--agnes-line-primary);
  border-radius: 6px;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-code);
  font-size: 0.875em;
}
.code-toolbar {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5625rem 0.875rem;
  border-bottom: 0;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-code);
  font-size: 0.6875rem;
  line-height: 1.125rem;
}
.code-language {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.125rem;
  letter-spacing: 0;
  color: var(--agnes-text-primary);
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.code-copy {
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  border-color: var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-surface);
  font-size: var(--font-size-xs);
}
.code-block pre {
  max-width: 100%;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  font-size: 0.6875rem;
  line-height: 1.1875rem;
  tab-size: 2;
}
.resource-admin-page code {
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--agnes-bg-card);
  color: var(--agnes-text-primary);
}
.code-block pre code {
  display: block;
  width: max-content;
  min-width: 100%;
}
.markdown table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  color: var(--agnes-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.375rem;
  font-variant-numeric: tabular-nums;
}
.markdown th,
.markdown td {
  padding: 0.625rem 1rem;
  border-bottom: 0.5px solid var(--agnes-line-primary);
  text-align: start;
  vertical-align: top;
}
.markdown th {
  color: var(--agnes-text-primary);
  font-weight: 500;
  background: transparent;
}
.markdown th:first-child,
.markdown td:first-child {
  padding-left: 0;
}
.markdown th:last-child,
.markdown td:last-child {
  padding-right: 0;
}
.markdown tr:last-child td {
  border-bottom: 0;
}
/* 思考标题保留轻量折叠入口；正文用独立细线和 12px 缩进，避免与过程外壳叠出双导轨。 */
.thinking {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--agnes-text-tertiary);
  background: transparent;
  font-size: var(--font-size-sm);
}
.thinking > summary {
  width: fit-content;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border-radius: 0;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5rem;
  cursor: pointer;
}
.thinking-content {
  margin-top: 0.25rem;
  padding: 0.125rem 0 0.125rem var(--s12);
  border-left: 1px solid var(--agnes-line-primary);
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: var(--font-size-sm);
  line-height: 1.375rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.tool {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.tool:hover {
  box-shadow: none;
}
.tool-head,
.approval-head {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tool-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tool-name {
  overflow: hidden;
  color: var(--agnes-text-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-status {
  flex: 0 0 auto;
  color: var(--agnes-text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.5rem;
}
.tool-summary {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--agnes-text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-detail {
  min-height: 1.75rem;
  flex: 0 0 auto;
  padding: 0.375rem;
  border-color: transparent;
  color: var(--agnes-text-tertiary);
  background: transparent;
  font-size: 0.8125rem;
  line-height: 1.5rem;
}
.tool-detail:hover:not(:disabled) {
  border-color: transparent;
  background: var(--agnes-bg-selected);
}
.approval-summary {
  margin: 0.5rem 0 0;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
}
.timeline-node.cost {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--agnes-text-tertiary);
  padding: 0;
  border: 0;
  background: transparent;
}
.cost .node-label,
.cost .node-body {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.cost .node-body {
  color: var(--agnes-text-tertiary);
  font-weight: 600;
}
.timeline-node.approval {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label summary status";
  align-items: baseline;
  column-gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--agnes-text-tertiary);
}
.approval .approval-head {
  display: contents;
}
.approval .node-label {
  grid-area: label;
}
.approval .tool-status {
  grid-area: status;
}
.approval .approval-summary {
  grid-area: summary;
  min-width: 0;
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.tool[data-status="running"] .tool-status,
.tool[data-status="completed"] .tool-status {
  color: var(--agnes-text-emphasis);
}
.tool[data-status="failed"] {
  border-color: var(--agnes-status-danger-text);
  background: var(--agnes-status-danger-bg);
}
.tool[data-status="failed"] .tool-status {
  color: var(--agnes-status-danger-text);
}
.new-content {
  position: absolute;
  right: max(1.5rem, calc((100% - 50rem) / 2));
  bottom: 1rem;
  min-height: 2.25rem;
  border-color: var(--agnes-button-primary-bg);
  border-radius: var(--radius-full);
  color: var(--agnes-button-primary-content);
  background: var(--agnes-button-primary-bg);
  box-shadow: var(--shadow-elevation-prominent);
}
/* 浮在正文上方，走主按钮语言才有足够的"跳到底部"号召力；hover 加深一档，
   两档都是不透明主题 token，底下的正文不会透出。 */
.new-content:hover:not(:disabled) {
  border-color: var(--agnes-button-primary-bg-hover);
  background: var(--agnes-button-primary-bg-hover);
  box-shadow: var(--shadow-elevation-prominent);
}
#approval {
  width: min(calc(100% - 2rem), var(--chat-content-width));
  margin: 0 auto 0.75rem;
  padding: 0.75rem 1rem;
}
[data-agnes-region="approval"] {
  overflow: hidden;
  border: 1px solid var(--agnes-status-warning-text);
  border-radius: 1.25rem;
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation);
  /* 审批卡出现时从下方 4px 淡入；收回是瞬时的（不做离散 display 过渡）。
     切换会话的半透明（body.session-switching）与这条共用 opacity 轴，方向一致。 */
  transition:
    opacity var(--transition),
    translate var(--transition);
}
@starting-style {
  [data-agnes-region="approval"]:not([hidden]) {
    opacity: 0;
    translate: 0 4px;
  }
}
#approval h2 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5rem;
}
#approval p {
  margin: 0.375rem 0 0;
  color: var(--agnes-text-tertiary);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  overflow-wrap: anywhere;
}
#approval .approval-impact {
  font-family: inherit;
}
#approval .approval-warning {
  color: var(--agnes-status-warning-text);
  font-family: inherit;
}
/* The arguments can be long: they scroll inside the card instead of pushing the choices off screen. */
#approval pre {
  max-height: 14rem;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  overflow: auto;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 0.5rem;
  background: var(--agnes-bg-code);
  color: var(--agnes-text-primary);
  font-size: 0.75rem;
  line-height: 1.125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
/* 空态判据取 `#empty-state` 的 hidden，与 app 的 shouldShowEmptyState 同一个信号。
   此前用的 `#transcript:empty` 永远不成立：React 树恒定渲染一个 `#transcript-content`
   子节点，`:empty` 不匹配，下面这一组规则全是死规则，实际效果一直是"输入卡贴底"。 */
body:has(#empty-state:not([hidden])) #prompt {
  min-height: 3.25rem;
}
/* 新会话（空态）：hero 与输入卡作为**一组**在剩余空间里垂直居中。两级绝对定位
   （.conversation-region-root 与 #empty-state）必须在空态下放开，hero 才撑得出真实
   高度；否则 shell 高度为 0，后面两份 auto 外边距无处可吃。顶栏在空态是绝对定位的
   悬浮开关，不占流，所以不再需要补偿它的高度。 */
body:has(#empty-state:not([hidden])) .workbench-split {
  flex: 0 1 auto;
  margin-top: auto;
}
body:has(#empty-state:not([hidden])) .conversation-region-root,
body:has(#empty-state:not([hidden])) #empty-state {
  position: static;
  inset: auto;
}
body:has(#empty-state:not([hidden])) .conversation-shell {
  overflow: visible;
}
/* 空态下会话清单里没有内容，但它带着 16px 上下内边距会占位、把 hero 顶下去，
   于是 hero 跑出 shell 而整体偏离居中。空态时直接让位。 */
body:has(#empty-state:not([hidden])) #transcript {
  display: none;
}
/* 下边那份 auto 必须挂在 main 的 flex 子项上：挂到 #composer 上会被 #composer-mount
   挡住，块级上下文里的纵向 auto 外边距会算成 0，居中就只剩上面那一份。 */
body:has(#empty-state:not([hidden])) #composer-mount {
  margin-bottom: auto;
}
/* 新会话时顶栏不成立：标题、状态都没有内容，页签也没有会话可切。容器降为不占流的
   透明浮层，只留下左上角的侧栏开关——窄屏和折叠态下它是唤出导航的唯一入口，不能
   跟着一起消失。连接异常那一行仍然保留（见 connection-group 的可见性规则）。 */
body:has(#empty-state:not([hidden])) main {
  position: relative;
}
body:has(#empty-state:not([hidden])) .topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  min-height: 0;
  padding: 0.625rem 1.75rem;
  border-bottom: 0;
  background: transparent;
}
body:has(#empty-state:not([hidden])) .topbar .task-heading,
body:has(#empty-state:not([hidden])) .session-tabs-bar {
  display: none;
}
/* .task-heading 平时靠 flex:1 把连接组顶到右边；它退场后这份推力要显式补回来。 */
body:has(#empty-state:not([hidden])) .connection-group {
  margin-left: auto;
}
/* 切换会话的加载态：上一会话画面降不透明度（含会话区外的审批卡），提示内容
   正在被替换；新投影就绪后由 body.session-switching 移除而平滑恢复。
   空态时 #transcript 不显示，这条自然落空，不影响新建草稿的 hero。 */
body.session-switching #transcript,
body.session-switching #approval {
  opacity: 0.55;
}
#composer {
  width: min(calc(100% - 2rem), var(--composer-card-max-width));
  margin: 0 auto 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0 0;
  transition: box-shadow var(--transition);
  position: relative;
  z-index: 7;
}
[data-agnes-region="composer"] {
  /* 输入卡的 backdrop-filter 必须声明在区域钩子上，供皮肤覆盖（R1 不变量）。 */
  border: 0;
  border-radius: 1.375rem;
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation-soft);
  backdrop-filter: none;
}
/* 队列是输入卡上方的一张独立卡片。排队的消息和正在写的草稿是两件事，早先把它塞在输入卡
   内部，两者读起来是一件事。现在它是 form 的前一个兄弟节点：宽度和居中与输入卡对齐，
   圆角取同一个值，成为一组而不是一体。 */
.composer-queue {
  width: min(calc(100% - 2rem), var(--composer-card-max-width));
  margin: 0 auto 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-panel);
  background: var(--agnes-bg-card);
  box-shadow: var(--shadow-elevation-soft);
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
}
.composer-queue-count {
  margin: 0 0 0.25rem;
  padding: 0 0.375rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* 列表标记换成自绘序号：默认的 ol 数字是浏览器给的字形，跟卡片其余部分不是一套。
   仍用 ol，读屏时的"第 N 项"语义不变。 */
.composer-queue ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: composer-queue-item;
  max-height: 10rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 第 6 节开头把全局滚动条外观藏了。队列这里破例恢复细滚动条：超过 max-height 时若只靠
     计数行提示还有内容，用户不会想到这块能滚。 */
  scrollbar-width: thin;
  scrollbar-color: var(--agnes-line-emphasis) transparent;
}
.composer-queue li {
  counter-increment: composer-queue-item;
}
/* 行间距沿用侧栏的 2px 组内节奏。 */
.composer-queue li + li {
  margin-top: 0.125rem;
}
.composer-queue-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-md);
}
/* 行本身不可点，所以底色只在指针或焦点落到这一行的动作上时出现，用来说明你正要操作哪一条。 */
.composer-queue-row:hover,
.composer-queue-row:focus-within {
  background: var(--agnes-bg-hover);
}
/* 序号跟按钮的 aria-label「立即发送第 N 条待执行消息」指的是同一件事，右对齐让个位对齐。 */
.composer-queue-row::before {
  content: counter(composer-queue-item);
  flex: none;
  min-width: 1rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.composer-queue-preview {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 全局 button 是带边框的 36px 控件，放这里既和右下角的主发送键抢视线，又把每行撑高。
   退成无边框文字按钮，只留品牌色。底色/边框/字色必须显式写：全局的 button:disabled 与本块
   同为 (0,1,1)，靠本块更靠后生效，漏掉哪一条都会让禁用态变回一块灰底方块。 */
.composer-queue button {
  flex: none;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border-color: transparent;
  border-radius: var(--radius-full);
  color: var(--agnes-brand-primary);
  background: transparent;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}
.composer-queue button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--agnes-brand-emphasis-soft);
}
.composer-queue button:active:not(:disabled) {
  transform: none;
}
.composer-queue button:disabled {
  color: var(--agnes-text-tertiary);
  border-color: transparent;
  background: transparent;
}
/* 正在发送或删除的按钮给个转圈。必须排在 :disabled 之后：进行中的
   那一行两条同时命中，靠后的一条决定它显示为进行中，而不是跟着整列一起灰掉。 */
.composer-queue button[aria-busy="true"] {
  gap: 0.375rem;
  color: var(--agnes-text-tertiary);
}
.composer-queue button[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 1.5px solid var(--agnes-line-emphasis);
  border-top-color: var(--agnes-brand-primary);
  border-radius: var(--radius-full);
  animation: composer-queue-spin 700ms linear infinite;
}
@keyframes composer-queue-spin {
  to {
    transform: rotate(360deg);
  }
}
.composer-queue-error {
  margin: 0.5rem 0 0;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  color: var(--agnes-status-danger-text);
  background: var(--agnes-status-danger-bg);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
/* 全局那份 reduced-motion 只清 transition，转圈是 animation，得单独关。 */
@media (prefers-reduced-motion: reduce) {
  .composer-queue button[aria-busy="true"]::before {
    animation: none;
  }
}
.composer-writing {
  min-height: 0;
  /* 卡片圆角 22px 而卡片本身没有水平内边距：writing 区全宽铺到卡缘时，
     textarea 首行和 hint 行的字体正好落进左上圆角的裁切区、hint 甚至贴着卡缘。
     两侧各留 14px，加上 textarea 自身的 14px 左内边距，字形离卡缘 28px，稳出圆角。 */
  padding: 0 0.875rem;
}
#prompt {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  line-height: 1.5rem;
  padding: 0.25rem 0.5rem 0 0.875rem;
  font-size: 0.875rem;
}
[data-agnes-region="composer-input"] {
  border: 0;
  border-radius: 0;
  color: var(--agnes-text-primary);
  background: transparent;
}
#prompt:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
#composer-hint {
  margin-top: 0.25rem;
  /* 与 textarea 的字形左缘对齐（writing 区 14px + 自身 14px），否则 hint 贴着卡片边。 */
  padding: 0 0.875rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.125rem;
}
#composer-hint:empty,
#composer-hint:not([data-kind="state"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
/* 附件在输入文字之上，所以顶边距归它：0.25rem 加上表单的 0.5rem，与 textarea 首行齐平。 */
.composer-image-attachments {
  display: grid;
  gap: 0.5rem;
  padding: 0.25rem 0.875rem 0;
}
/* 没有待发图片（也没有正在读取的）时整块不占位：容器常驻 DOM，靠这条把空态收掉，
   否则这段上边距会把输入框整体顶下去。 */
.composer-image-attachments:not(
  :has(.composer-image-preview, .composer-file-preview, .composer-image-pending)
) {
  display: none;
}
.composer-image-preview-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.composer-image-preview {
  position: relative;
  width: 4.5rem;
  height: 3.5rem;
  margin: 0;
}
.composer-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 0.5rem;
  object-fit: cover;
}
.composer-file-preview {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  max-width: min(16rem, 100%);
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 0.5rem;
}
.composer-file-preview span {
  overflow-wrap: anywhere;
}
.composer-file-preview small {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}
.composer-image-preview [data-remove-image],
.composer-file-preview [data-remove-image] {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: grid;
  width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 50%;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-page);
  line-height: 1;
}
.composer-image-pending {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.composer-upload-progress {
  display: block;
  width: 100%;
  height: 0.375rem;
}
.composer-upload-waiting {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.composer-image-preview .composer-upload-progress {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: auto;
}
.composer-upload-retry {
  min-height: 0;
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-xs);
}
.composer-image-preview .composer-upload-retry {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
}
.composer-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.125rem 0.5rem 0.375rem;
  container-type: inline-size;
}
.model-field {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 0.25rem;
  margin-left: auto;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
/* #model 的完整样式只在这里声明一次。此前 .composer-workspace, #model 那一组
   又声明了一遍 max-width/color/padding/min-height，因后声明而生效，
   使这里的 max-width: min(12rem,100%) 与 color 变成死值。 */
#model {
  min-width: 0;
  width: auto;
  max-width: min(360px, 45cqw);
  min-height: 1.75rem;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.25rem 0 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: 1.5rem;
  color: var(--agnes-text-secondary);
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 500;
}
.model-field [data-model-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 下拉箭头改用与全站一致的 .icon SVG。此前是 "⌄" 字符：字形上下留白随字体与字号变化，
   同一个按钮里的文字按行盒居中、字符按基线摆放，两者永远对不齐。 */
.model-chevron {
  color: var(--agnes-text-tertiary);
  transition: transform var(--transition-fast);
}
#model[aria-expanded="true"] .model-chevron {
  transform: rotate(180deg);
}
#model:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}
.model-picker {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 首层入口菜单按内容定宽（positionPopover 的 width: 'content'），所以下界放得很低：
     菜单项就「名称 + 当前值 + 箭头」，钉死宽只会在右侧留一片空白。 */
  width: max-content;
  /* 宽度跟着内容走，但别塌到只剩两行字的宽度：低于 16rem 时右侧没有留白，看着憋。 */
  min-width: min(16rem, calc(100vw - 32px));
  max-width: min(420px, calc(100vw - 32px));
  max-height: min(360px, calc(100vh - 96px));
  padding: 0.25rem;
  /* 面板同时装着模型列表、思考强度和上下文预算三段，滚动归面板自己：
     只让列表滚的话，flex:1 的列表会把下面两段挤出可见区。 */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 0;
  border-radius: 1.25rem;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-popover);
  box-shadow: var(--shadow-elevation-prominent);
}
.model-picker[data-placement="above"] {
  transform-origin: bottom left;
}
.model-picker[data-placement="below"] {
  transform-origin: top left;
}
/* 子菜单从入口行的方向长出来。 */
.model-picker[data-placement="right"] {
  transform-origin: top left;
}
.model-picker[data-placement="left"] {
  transform-origin: top right;
}
.model-picker-help {
  margin: 0;
  padding: 0.5rem 0.5rem 0.25rem;
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.125rem;
}
.model-picker-list {
  flex: 0 0 auto;
  outline: 0;
}
.model-picker-option {
  position: relative;
  display: grid;
  gap: 0.125rem;
  min-height: 2.375rem;
  padding: 0.375rem 0.5rem 0.375rem 2rem;
  border-radius: 0.625rem;
  cursor: pointer;
  outline: 0;
  overflow-wrap: anywhere;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.model-picker-option::before {
  position: absolute;
  top: 0.55rem;
  left: 0.5rem;
  color: var(--agnes-text-primary);
  content: "";
  font-size: 0.875rem;
  font-weight: 500;
}
.model-picker-option[aria-selected="true"] {
  background: transparent;
}
.model-picker-option[aria-selected="true"]::before {
  content: "✓";
}
.model-picker-option[data-active="true"] {
  box-shadow: none;
  background: var(--agnes-bg-hover);
}
/* 详情子菜单开着的那一行保持高亮，一眼能看出旁边那块是从哪来的。 */
.model-picker-option[data-open="true"] {
  background: var(--agnes-bg-hover);
}
.model-picker-option:hover:not([aria-disabled="true"]) {
  background: var(--agnes-bg-hover);
}
.model-picker-option[aria-selected="true"][data-active="true"],
.model-picker-option:hover[aria-selected="true"] {
  background: var(--agnes-bg-hover);
}
.model-picker-option[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.6;
}
.model-picker-model {
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  overflow-wrap: anywhere;
}
.model-picker-route {
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.125rem;
  overflow-wrap: anywhere;
}
/* 模型行之间留出真正的空隙，不是靠行内边距撑高。 */
.model-picker-models {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* 空隙正中放一条细分隔线：线两侧各有 4px，行与行不会贴在一起。 */
.model-picker-option + .model-picker-option::after {
  position: absolute;
  top: -0.25rem;
  right: 0.5rem;
  left: 0.5rem;
  height: 1px;
  background: var(--agnes-line-primary);
  content: "";
}
/* 第三级面板：第一个元素就是列表，顶部多留一点；高度上限放宽到只受视口约束。
   面板自带的 max-height 是 360px，比「全部预算档位 + 自定义输入 + 说明」还矮，
   定位时量到的是被它截过的值，算出来的位置就压不住底部，底下几行落到视口外。 */
.model-picker-submenu {
  max-height: calc(100vh - 24px);
  padding-top: 0.5rem;
}
/* 详情子菜单（第二级）：模型名 + 只读的容量行 + 「名称 —— 当前值 ›」两行。
   和模型列表共用同一层皮肤，靠子菜单的定位和父面板拉开关系。 */
.model-picker-detail-title {
  margin: 0;
  padding: 0.5rem 0.625rem 0.25rem;
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  overflow-wrap: anywhere;
}
.model-picker-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.model-picker-detail-row[data-nested="true"] {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.model-picker-detail-row[data-nested="true"][data-active="true"],
.model-picker-detail-row[data-nested="true"]:hover {
  background: var(--agnes-bg-hover);
}
.model-picker-detail-row:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: -2px;
}
.model-picker-detail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-picker-detail-value {
  color: var(--agnes-text-tertiary);
  text-align: right;
  white-space: nowrap;
}
.model-picker-level {
  padding: 0.375rem 0.5rem;
  border-radius: 0.625rem;
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.model-picker-level[data-active="true"],
.model-picker-level:hover {
  background: var(--agnes-bg-hover);
}
.model-picker-level[aria-selected="true"] {
  font-weight: 600;
}
.model-picker-level[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.6;
}
/* 第三级里的自定义预算：占一整行，其他候选也是行式列表。 */
.model-picker-budget {
  width: calc(100% - 1rem);
  min-height: 2rem;
  margin: 0.25rem 0.5rem 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
}
.model-picker-budget[aria-invalid="true"] {
  border-color: var(--agnes-status-danger-text);
}
.model-picker-hint,
.model-picker-error,
.model-picker-notice {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
}
.model-picker-hint {
  padding: 0.25rem 0.625rem 0.5rem;
  color: var(--agnes-text-tertiary);
}
.model-picker-error,
.model-picker-notice {
  padding: 0 0.625rem 0.5rem;
}
.model-picker-error {
  color: var(--agnes-status-danger-text);
}
/* 已保存的档位当前不可用时只做告知，不拦提交。 */
.model-picker-notice {
  color: var(--agnes-status-warning-text);
}
.model-picker-error:empty {
  display: none;
}
/* 首层入口行：「名称 —— 当前值 ›」。选中态由右侧的当前值表达，不再用左侧对勾，
   所以要撤掉 .model-picker-option 的对勾占位和左内边距。 */
.model-picker-entry {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
}
.model-picker-entry::before {
  content: none;
}
/* 子菜单开着的那一行保持高亮，这样「右边这块列表是从哪来的」一眼能看出来。 */
.model-picker-entry[data-open="true"] {
  background: var(--agnes-bg-hover);
}
.model-picker-entry-label {
  color: var(--agnes-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.model-picker-entry-value {
  overflow: hidden;
  color: var(--agnes-text-tertiary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-picker-chevron {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--agnes-icon-secondary);
}
#cancel,
#send {
  flex: 0 0 auto;
  white-space: nowrap;
}
#send[data-mode="idle"] {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  min-height: 2.125rem;
  padding: 0;
  border-radius: 999px;
  transform: translateY(-2px);
}
dialog {
  inset: 0;
  margin: auto;
  width: min(23.75rem, calc(100vw - 3rem));
  max-height: var(--dialog-max-height);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-2xl);
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation-prominent);
  /* showModal 打开时从下方 8px 淡入；遮罩同步淡入。关闭仍瞬时。 */
  transition:
    opacity var(--transition),
    translate var(--transition),
    overlay var(--transition) allow-discrete;
}
@starting-style {
  dialog[open] {
    opacity: 0;
    translate: 0 8px;
  }
  dialog[open]::backdrop {
    opacity: 0;
  }
}
/* 关闭态必须隐藏。作者样式里的 `display` 会覆盖浏览器对关闭态 dialog 的 `display: none`，
   于是空盒子（带边框/圆角/阴影）会在页面上渲染成一条"灰线"——插件详情与资源详情此前正是如此。
   这条兜底与下面把 `.plugin-detail` 的 display 限定到 `[open]` 一起用：治本 + 防复发。 */
dialog:not([open]) {
  display: none;
}
dialog::backdrop {
  background: var(--agnes-bg-scrim);
  backdrop-filter: blur(2px);
  transition:
    opacity var(--transition),
    overlay var(--transition) allow-discrete;
}
#new-session {
  width: min(30rem, calc(100% - 2rem));
}
#new-session-error {
  margin: 0;
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-sm);
}
#new-session-error:empty {
  display: none;
}
/* 工具详情默认就是宽版：此前有个"展开阅读/收起阅读"切换按钮，属于多余的一次点击。 */
.dialog-heading {
  justify-content: space-between;
  gap: 1rem;
}
.dialog-heading-actions {
  flex: 0 0 auto;
  gap: 0.5rem;
}
.dialog-heading h2,
#config-form h2,
#new-session-form h2 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.dialog-intro {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
/* 共享确认弹窗的说明是多行文本（操作摘要 + 后台复核提示），必须保留换行。 */
#admin-confirm-description {
  white-space: pre-line;
}
.config-heading {
  display: grid;
  gap: var(--s8);
}
#new-session-form .eyebrow {
  color: var(--agnes-text-emphasis);
}
#config-form .config-heading .eyebrow {
  color: var(--agnes-brand-primary);
  font-size: var(--font-size-xs);
}
#config-form .config-heading p {
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
.config-section {
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.config-section + .config-section {
  padding-top: 1rem;
}
.config-section legend {
  padding: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: var(--control-height-form);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-sm);
}
/* 即时校验的红边（aria-invalid 由 mcp-form-validation 反馈写入）：只换边框色，
   不动 box-shadow，聚焦时的品牌焦点环仍然生效。 */
.form-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--agnes-status-danger-text);
}
.field-hint {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
#config-key-hint:empty {
  display: none;
}
#config-form #config-test {
  justify-self: start;
  flex: 0 0 auto;
  min-height: 2.5rem;
  border-color: var(--agnes-line-emphasis);
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-surface);
}
#config-state,
#config-form #config-error {
  min-height: 1.3rem;
  margin: 0;
  font-size: var(--font-size-sm);
}
#config-state {
  color: var(--agnes-text-tertiary);
}
#config-form #config-error {
  color: var(--agnes-status-danger-text);
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.sidebar-backdrop,
.sidebar-close {
  display: none;
}
body.sidebar-collapsed {
  grid-template-columns: 3.5rem minmax(0, 1fr);
}
body {
  transition: grid-template-columns var(--transition);
}
.sidebar {
  transition:
    width var(--transition),
    padding var(--transition),
    opacity var(--transition);
}
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar {
    align-items: center;
    padding: 1.125rem 0.625rem 0.375rem;
    overflow: hidden;
    border-right: 1px solid var(--agnes-line-primary);
  }
  body.sidebar-collapsed .brand-wordmark-text {
    display: none;
  }
  body.sidebar-collapsed .brand-lockup {
    gap: 0;
  }
  body.sidebar-collapsed .sidebar-head {
    justify-content: center;
    padding: 0;
    min-height: 2.25rem;
    margin: 0 0 0.75rem;
  }
  body.sidebar-collapsed .sidebar-actions .primary-button {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    gap: 0;
    margin: 0 0 0.75rem;
    border-color: transparent;
    background: transparent;
  }
  body.sidebar-collapsed .sidebar-actions .primary-button span {
    display: none;
  }
  body.sidebar-collapsed .sidebar-section-heading,
  body.sidebar-collapsed #sessions {
    display: none;
  }
  body.sidebar-collapsed .sidebar-footer {
    margin-top: auto;
  }
  body.sidebar-collapsed .sidebar-footer button {
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-footer button span {
    display: none;
  }
}

@media (max-width: 900px) {
  body,
  body.sidebar-collapsed {
    display: block;
  }
  .sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    width: min(17rem, calc(100vw - 3.25rem));
    transform: translateX(-105%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-dialog);
  }
  body:not(.sidebar-open) .sidebar {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  body.sidebar-collapsed .sidebar {
    display: flex;
    width: min(17rem, calc(100vw - 3.25rem));
    padding: 1.25rem 0.75rem 0.75rem;
    /* 与宽屏同口径：覆盖层也不做滚动容器，底部行不随列表滚走。 */
    overflow: hidden;
    border-right: 1px solid var(--agnes-line-primary);
  }
  .sidebar-close,
  .sidebar-toggle {
    display: inline-flex;
  }
  .sidebar-backdrop {
    position: fixed;
    z-index: 10;
    inset: 0;
    width: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--agnes-bg-scrim);
  }
  body:not(.sidebar-open) .sidebar-backdrop {
    display: none;
  }
  main {
    height: 100dvh;
    min-height: 0;
  }
  #notice,
  #reconnect-notice,
  #stored-history-notice,
  #approval,
  #composer,
  #empty-state {
    width: calc(100% - 2rem);
  }
  #transcript-content {
    padding-inline: 1rem;
  }
  .new-content {
    right: 1rem;
  }
}

@media (max-width: 540px) {
  /* Touch targets stay usable even where the desktop skin intentionally uses compact controls. */
  button,
  input,
  select {
    min-height: 44px;
  }
  .topbar {
    min-height: 3.75rem;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }
  .connection-group {
    gap: var(--s8);
  }
  /* 窄屏只留一个状态点：文字仍对屏幕阅读器可见，视觉上的原因说明交给
     #reconnect-notice。「断开连接」按钮已移除，不再需要为它单独放宽触控尺寸。 */
  #connection {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }
  button,
  input,
  select {
    min-height: 2.75rem;
  }
  .icon-button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  /* 页签行里的按钮与页签同高，不把 2.25rem 的页签行撑高。 */
  #report-problem {
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
  }
  .secondary-button.compact {
    min-height: 2.75rem;
  }
  .sidebar-actions .primary-button,
  .session,
  .code-copy,
  .tool-detail,
  .new-content {
    min-height: 2.75rem;
  }
  #composer {
    margin-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  #prompt {
    min-height: 3rem;
  }
  #model {
    min-height: 2.75rem;
  }
  #send[data-mode="idle"] {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  #config-form,
  #new-session-form {
    padding: 1rem;
  }
  .dialog-heading-actions {
    gap: 0.25rem;
  }
}

@media (max-width: 380px) {
  #notice,
  #reconnect-notice,
  #stored-history-notice,
  #approval,
  #composer,
  #empty-state {
    width: calc(100% - 1.5rem);
  }
  #transcript-content {
    padding-inline: 0.75rem;
  }
  .composer-controls {
    gap: var(--s8);
  }
  .model-field {
    min-width: 0;
    max-width: none;
    flex: 1 1 3.5rem;
  }
  #model {
    max-width: 100%;
  }
  #cancel,
  #send:not([data-mode="idle"]) {
    padding-inline: 0.625rem;
  }
  .dialog-heading {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
    --transition-fast: 0ms;
  }
  .sidebar,
  .skip-link,
  button,
  #composer,
  #transcript,
  #approval,
  #empty-state,
  [data-agnes-region="approval"],
  dialog,
  dialog::backdrop,
  .tool,
  .model-chevron,
  .model-picker-option {
    transition: none;
  }
  .message-reveal-fragment {
    animation: none;
  }
  #transcript {
    scroll-behavior: auto;
  }
}
.empty-brand-mark {
  display: inline-grid;
  place-items: center;
  border: 0;
  color: var(--agnes-text-primary);
  background: transparent;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0;
}
.sidebar-actions .primary-button:hover:not(:disabled) {
  border-color: var(--agnes-line-emphasis);
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-surface);
  box-shadow: var(--shadow-elevation);
}
.sidebar-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding-left: 0.25rem;
  margin: 0.5rem 0 0.25rem;
  border-radius: var(--radius-lg);
}
.sidebar-section-heading .section-label {
  margin: 0;
  letter-spacing: 0.045em;
  text-transform: none;
}
.icon-button.subtle {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
}
.workspace-group {
  /* 组与组之间比组内行距（2px）大一档：工作区分组靠这条 6px 的缝表达，
     每个组内是同一条 2px 节奏。首组不吃这条缝（上方是「新会话」按钮，已有间距）。 */
  margin-top: 0.375rem;
}
.workspace-group:first-child {
  margin-top: 0;
}
.workspace-heading-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.workspace-heading {
  flex: 1;
  min-width: 0;
  min-height: 2.125rem;
  gap: 0.375rem;
  justify-content: flex-start;
  padding: 0 0.5rem;
  border-color: transparent;
  /* 与 .session:hover 完全一致：通用 button:hover 会把描边刷成 --agnes-line-emphasis，
     悬停时多出一圈灰边，观感与下方会话行不统一。 */
  border-radius: var(--radius-md);
  color: var(--agnes-text-primary);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.workspace-heading:hover:not(:disabled) {
  border-color: transparent;
  background: var(--agnes-bg-hover);
}
.workspace-heading-row .workspace-new-session {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  opacity: 0;
  pointer-events: none;
}
.workspace-heading-row:hover .workspace-new-session,
.workspace-new-session:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.workspace-heading .workspace-name,
.session .session-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 会话行与工作区行同宽：此前这里多 10px 左内缩，导致文件夹的悬停底色比会话宽一截。
   层级由文件夹图标与标题缩进表达，不靠底色宽度。 */
.workspace-sessions {
  display: grid;
  gap: 0.125rem;
}

/* hero 品牌标：用客户端 AgnesMark 位图（与侧栏品牌位同一资源）代替原来的 "AGH" 文字占位。
   mask 靠 background 显色，所以这里必须显式给 currentColor —— 上面那条基础规则里的
   background: transparent 是在"文字标"时代写的，会盖掉 .agnes-mark 的着色。 */
.empty-brand-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 0;
  color: var(--agnes-brand-primary);
  background: currentColor;
}
.conversation-turn {
  margin: 0 0 1rem;
}
.turn-user:empty,
.turn-final:empty,
.turn-process-body:empty,
.turn-attention:empty {
  display: none;
}
.turn-response {
  min-width: 0;
}
/* 身份行独立于过程折叠；摘要只承载真实状态、耗时和计数，箭头紧随文字。 */
.turn-process {
  min-width: 0;
  margin: 0 0 0.5rem;
  color: var(--agnes-text-tertiary);
}
.turn-process > summary {
  width: fit-content;
  max-width: 100%;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: var(--font-size-sm);
  line-height: 1.5rem;
  white-space: nowrap;
  cursor: pointer;
}
/* 身份行：圆形描边头像 + 助手名字。 */
.process-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 1rem 0 0.5rem;
}
.turn-status {
  margin: 0 0 0.5rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
  overflow-wrap: anywhere;
}
.turn-error {
  margin: 0 0 0.5rem;
  color: var(--agnes-status-danger-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.process-avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--agnes-line-primary);
  border-radius: 50%;
  background: var(--agnes-bg-surface);
}
/* mask 会把元素自身的描边一起裁掉，所以圆框在外层、图形标在内层。 */
.process-avatar-mark {
  width: 1rem;
  height: 1rem;
  background: var(--agnes-brand-primary);
}
.process-name {
  min-width: 0;
  overflow: hidden;
  color: var(--agnes-text-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-row {
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.process-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--agnes-text-tertiary);
  transform: rotate(-90deg);
  transition:
    transform var(--transition),
    color var(--transition-fast);
}
.turn-process[open] .process-chevron {
  transform: rotate(0deg);
}
.turn-process > summary:hover,
.turn-process > summary:focus-visible {
  color: var(--agnes-text-primary);
}
.turn-process > summary:hover .process-chevron,
.turn-process > summary:focus-visible .process-chevron {
  color: var(--agnes-text-secondary);
}
/* 过程成员沿内容轴排列；只由思考正文绘制竖线，工具行和元信息保留自身层级。 */
.turn-process-body {
  margin-top: 0.5rem;
  padding-left: 0;
  border-left: 0;
}
.turn-process-body > * {
  margin: 0;
  padding: 0.5rem 0;
}
.turn-process-body > :first-child {
  padding-top: 0;
}
.turn-process-body > :last-child {
  padding-bottom: 0;
}
.turn-process-body > * + * {
  border-top: 0.5px solid var(--agnes-line-primary);
}
/* 工具行前缀图标：24 网格描边字形，与名称同族。 */
.tool-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--agnes-text-tertiary);
}
/* 步骤标题 */
.turn-process-body .node-label,
.turn-process-body .tool-name {
  color: var(--agnes-text-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5rem;
  text-transform: none;
}
.turn-process-body .tool-status {
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.turn-process-body .tool-summary {
  margin: 0.25rem 0 0;
  padding: 0.375rem 0.5rem;
  overflow: visible;
  border: 0.5px solid var(--agnes-line-primary);
  border-radius: 0.5rem;
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-code);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.1875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* 元信息（用量这类）：更小、更弱，与步骤正文区分开。 */
.turn-process-body .timeline-node.cost {
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.125rem;
}
/* 标签不参与收缩：否则长数值会把「用量」挤成一列两个字。 */
.turn-process-body .cost .node-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.turn-process-body .cost .node-label,
.turn-process-body .cost .node-body {
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.125rem;
}
.turn-process-body .cost .node-body {
  color: var(--agnes-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* 「查看详情」是步骤里的次级动作 */
.turn-process-body .tool-detail {
  padding: 0.125rem 0.375rem;
  border-radius: 0.5rem;
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.125rem;
}
/* 行内详情：0fr → 1fr 的栅格行过渡，展开与收起两个方向都有动画；
   内容层 overflow: hidden 才有收缩效果。 */
.tool-detail-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}
.tool-detail-body > .tool-detail-inner {
  min-height: 0;
  overflow: hidden;
}
.tool[data-expanded="true"] .tool-detail-body,
[data-agnes-tool-card][data-expanded="true"] .tool-detail-body {
  grid-template-rows: 1fr;
}
.tool-detail-text {
  max-height: 16.25rem;
  overflow-y: auto;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 0.5px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-code);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  line-height: 1.1875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turn-process-body .tool-detail:hover:not(:disabled) {
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-hover);
}
.turn-response .turn-process-body .timeline-node {
  margin-left: 0;
}
.turn-process-body > .timeline-node.assistant {
  padding-left: 0;
}
.turn-attention {
  margin: 1rem 0 0;
}
.turn-final .assistant {
  margin-top: 0;
}
.turn-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  row-gap: 0.5rem;
  min-height: 1.75rem;
  margin: 1rem 0 0 -0.375rem;
  color: var(--agnes-text-tertiary);
}
.turn-action,
.turn-meta {
  min-width: 1.75rem;
  min-height: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-color: transparent;
  border-radius: 28px;
  color: var(--agnes-text-tertiary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5rem;
  cursor: pointer;
}
.turn-action {
  width: 1.75rem;
  padding: 0.375rem;
}
.turn-action .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.turn-action:hover:not(:disabled),
.turn-meta:hover:not(:disabled),
.turn-meta:focus-visible {
  border-color: transparent;
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-hover);
}
.turn-meta {
  min-width: 0;
  margin-left: -0.375rem;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.turn-usage {
  position: relative;
}
.turn-usage > summary {
  list-style: none;
}
.turn-usage > summary::-webkit-details-marker {
  display: none;
}
.turn-usage-grid {
  position: fixed;
  z-index: 60;
  display: none;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  padding: 1rem;
  max-height: min(22rem, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0.75rem;
  color: var(--agnes-text-tertiary);
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation-prominent);
  font-size: 0.75rem;
  line-height: 1.125rem;
}
.turn-usage-grid dt,
.turn-usage-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.turn-usage-grid dd {
  color: var(--agnes-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.turn-usage[open] .turn-usage-grid {
  display: grid;
}

@media (max-width: 420px) {
  .turn-usage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .turn-usage-grid dd {
    margin-bottom: 0.5rem;
    text-align: left;
  }
}
.turn-feedback {
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-xs);
}
.timeline-unassigned:not(:empty) {
  margin: 0 0 1rem;
  padding: 0.625rem;
  border-left: 1px solid var(--agnes-line-primary);
}
.timeline-node.user {
  width: fit-content;
  max-width: min(calc(var(--chat-content-width) * 0.702), 82%);
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.user .node-label {
  display: none;
}
.user .node-body {
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-card);
  font-size: 0.875rem;
  line-height: 1.375rem;
  white-space: pre-wrap;
}
.timeline-node.assistant {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.assistant .node-label {
  display: none;
}
.timeline-node.tool,
.timeline-node.cost,
.timeline-node.artifact,
.timeline-node.compaction {
  margin: 0;
  border-radius: var(--radius-lg);
}
.timeline-node.tool {
  padding: 0;
  border: 0;
  background: transparent;
}
.call-usage > summary {
  width: fit-content;
  padding: 0.25rem 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.composer-workspace {
  align-items: center;
  min-height: 1.75rem;
  max-width: min(360px, 45cqw);
  justify-content: flex-start;
  padding: 0 0.25rem 0 0.5rem;
  overflow: hidden;
  border-color: transparent;
  border-radius: 1.5rem;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
}
.composer-workspace:hover:not(:disabled),
#model:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-hover);
}
.composer-workspace [data-workspace-label],
#model [data-model-label],
.composer-permission [data-permission-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-permission {
  align-items: center;
  min-height: 1.75rem;
  max-width: min(360px, 45cqw);
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0 0.25rem 0 0.5rem;
  overflow: hidden;
  border-color: transparent;
  border-radius: 1.5rem;
  color: var(--agnes-text-secondary);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
}
.composer-permission:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-hover);
}
.composer-permission[aria-expanded="true"] .model-chevron {
  transform: rotate(180deg);
}
.permission-picker {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  min-width: min(240px, calc(100vw - 32px));
  max-width: min(360px, calc(100vw - 32px));
  padding: 0.25rem;
  border: 0;
  border-radius: 1.25rem;
  /* 此前是未定义的 --agnes-bg-elevated：声明失效 → background 退到 initial（全透明），
     面板下的正文直接透出来。对齐另外两个浮层（session-menu / model-picker）用 popover。 */
  background: var(--agnes-bg-popover);
  box-shadow: var(--shadow-elevation-prominent);
}
.permission-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.permission-picker-option {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0.75rem;
  border-radius: 0.85rem;
  cursor: pointer;
}
.permission-picker-option[data-active="true"],
.permission-picker-option:hover {
  background: var(--agnes-bg-hover);
}
.permission-picker-check {
  color: var(--agnes-text-emphasis);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.permission-picker-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}
.permission-picker-label {
  color: var(--agnes-text-emphasis);
  font-size: 0.875rem;
  font-weight: 600;
}
.permission-picker-hint {
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  line-height: 1.3;
}
#cancel {
  min-height: 2.125rem;
  padding: 0 0.75rem;
  border-color: transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
}
#session-usage {
  width: auto;

  z-index: 15;
}
.session-usage {
  position: relative;
}
.session-usage > summary {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  border-radius: 999px;
  color: var(--agnes-text-secondary);
  /* 圆环本身就是指示器，底下再垫一块灰底会脏。只在悬停时给一点反馈。 */
  background: transparent;
  list-style: none;
  transition: background var(--transition-fast);
}
.session-usage > summary:hover {
  background: var(--agnes-bg-hover);
}
.session-usage > summary::-webkit-details-marker {
  display: none;
}
.usage-ring {
  width: 1rem;
  height: 1rem;
  display: block;
  border-radius: 50%;
  background: conic-gradient(var(--agnes-brand-primary) var(--usage-pct, 0%), var(--agnes-line-primary) 0);
  /* 豁免：mask 的不透明停靠点必须是纯黑，它不是主题色（见设计 §5.1）。 */
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 50%);
  mask: radial-gradient(circle, transparent 48%, #000 50%);
}
.usage-summary-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.session-usage > .usage-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  width: min(20rem, calc(100vw - 2rem));
  /* 合并 Token 用量分区后内容变长（上下文 4 行 + Token 10 行），面板上限放到
     36rem 并让视口兜底；真放不下时在面板内滚动。 */
  max-height: min(36rem, calc(100vh - 6rem));
  padding: 0.75rem;
  overflow: auto;
  border: 0;
  border-radius: 0.75rem;
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation-prominent);
  font-size: 0.75rem;
  line-height: 1.25rem;
  cursor: default;
}
.usage-popover-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.usage-popover-title {
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}
.usage-context-value {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.usage-context-caption {
  margin: 0 0 0 auto;
  overflow: hidden;
  color: var(--agnes-text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-bar {
  display: flex;
  gap: 1px;
  height: 0.25rem;
  margin: 0.625rem 0 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--agnes-bg-hover);
}
.usage-bar > span {
  flex: none;
  min-width: 2px;
  height: 100%;
  display: block;
  border-radius: 1px;
  background: var(--agnes-brand-primary);
}
:where(.usage-popover) .usage-grid {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.125rem 0.75rem;
  margin: 0;
  padding: 0;
  border-top: 0;
}
:where(.usage-popover) .usage-grid dt,
:where(.usage-popover) .usage-grid dd {
  min-width: 0;
  margin: 0;
}
:where(.usage-popover) .usage-grid dt {
  overflow: hidden;
  color: var(--agnes-text-secondary);
  text-overflow: ellipsis;
}
:where(.usage-popover) .usage-grid dd {
  color: var(--agnes-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
#new-session-form {
  max-height: var(--dialog-max-height);
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.workspace-options {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  margin: 1rem 0;
}
.workspace-picker-action {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-card);
  background: var(--agnes-bg-surface);
}
#workspace-pick {
  width: 100%;
  min-height: 2.75rem;
}
#workspace-picker-state {
  margin: 0;
  text-align: center;
}
.workspace-manual {
  margin-top: 0.75rem;
  color: var(--agnes-text-tertiary);
}
.workspace-manual > summary {
  width: fit-content;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.workspace-manual > .form-field {
  margin-top: 0.625rem;
}
.workspace-option-items {
  display: grid;
  gap: var(--s8);
}
.workspace-option {
  width: 100%;
  min-height: 3.25rem;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  border-color: var(--agnes-line-primary);
  text-align: left;
  background: var(--agnes-bg-surface);
}
.workspace-option-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
}
.workspace-option-name {
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
}
.workspace-option-path {
  max-width: 100%;
  overflow: hidden;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-option[data-available="false"] {
  opacity: 0.62;
}
.dialog-kicker {
  margin: 0 0 0.25rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
#config {
  position: relative;
  width: 800px;
  max-width: calc(100vw - 48px);
  height: min(800px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  border: 0;
  border-radius: var(--radius-main-page);
  background: var(--agnes-bg-surface);
  box-shadow: var(--shadow-elevation-prominent);
}
/* 设置拆成独立插槽后，透过宿主包装保留表单到当前面板的高度链。
   隐藏面板仍由 [hidden] 排除，不为未选中的插槽留下空网格行。 */
#config > div:has(> div > #config-form),
#config > div > div:has(> #config-form),
#settings-dsh-shell-slots,
#settings-dsh-shell-slots > [id^="settings-dsh-slot-"],
#settings-dsh-shell-slots > [id^="settings-dsh-slot-"] > [data-slot],
#settings-dsh-shell-slots > [id^="settings-dsh-slot-"] > [data-slot] > [data-slot-entry],
#settings-pane-slots,
#settings-pane-slots > [data-agnes-settings-pane-slot],
#settings-pane-slots > [data-agnes-settings-pane-slot] > [data-slot],
#settings-pane-slots > [data-agnes-settings-pane-slot] > [data-slot] > [data-slot-entry],
#settings-pane-slots [data-agnes-region-owner="builtin"][data-agnes-region-unit^="settings-"] {
  display: contents;
}
#config-form {
  grid-template-columns: 13rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: inherit;
  height: 100%;
  max-height: none;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
#settings-content-slots {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Admin 面板有两个宿主：设置弹窗里的 .admin-pane（本组规则）与独立页的 .admin-page /
   .admin-main。两者共用同一套滚动模型——文档不滚动、列表是唯一纵向滚动容器、详情只有中段
   滚动——这样"内容超出就被裁掉"结构上不会再发生。 */
.admin-pane {
  min-height: 0;
}
.admin-pane-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.5rem 1.5rem 1.5rem;
}
.admin-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.settings-rail {
  background: transparent;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.375rem 0.75rem 0;
  border-right: 0;
}
.config-card {
  min-width: 0;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-xl);
  background: var(--agnes-bg-page);
  box-shadow: var(--shadow-elevation);
}

@media (max-width: 720px) {
  body {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidebar {
    width: min(19rem, calc(100vw - 2.5rem));
  }
  .topbar {
    min-height: 3.4rem;
    padding-inline: 0.75rem;
  }
  #transcript-content {
    padding: 1.5rem 1rem 5rem;
  }
  .timeline-node.user {
    max-width: 92%;
  }
  .timeline-node.assistant {
    padding-left: 2rem;
  }
  .timeline-node.tool,
  .timeline-node.cost,
  .timeline-node.artifact,
  .timeline-node.compaction {
    margin-left: 2rem;
  }
  #composer {
    width: calc(100% - 1rem);
    min-height: 6.75rem;
  }
  /* 区域规则紧跟在同一媒体查询内、同一层叠位置：挪到文件末尾会反过来压掉这条响应式覆盖。 */
  [data-agnes-region="composer"] {
    border-radius: var(--radius-xl);
  }
  #session-usage {
    margin-left: auto;
  }
  .composer-workspace {
    max-width: 9rem;
  }
  #config {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}
body.admin-page {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 独立页此前从工作台外壳继承了 overflow: hidden 却没有自己的滚动模型，内容一高就被裁掉。
     现在与设置面板共用"文档不滚、列表滚"的模型，这里显式声明。 */
  overflow: hidden;
}
/* 独立页的文字色故意比工作台低一档。用 (0,1,0) 的类选择器而不是 (0,1,1) 的 `body.admin-page`：
   高于 (0,1,0) 的基础声明会让皮肤的区域规则永远赢不了（设计 §20）。 */
.admin-page {
  color: var(--agnes-text-secondary);
}
.admin-header {
  width: min(var(--admin-content-width), calc(100% - 3rem));
  min-height: 7.5rem;
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) minmax(9rem, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  flex: 0 0 auto;
}
.admin-header > :last-child {
  justify-self: end;
}
.admin-header > :first-child {
  justify-self: start;
  width: auto;
}
.admin-heading {
  min-width: 0;
  text-align: center;
}
.admin-heading .eyebrow {
  margin: 0 0 0.125rem;
  color: var(--agnes-text-emphasis);
}
.admin-heading h1 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.admin-main {
  width: min(var(--admin-content-width), calc(100% - 3rem));
  margin: 0 auto;
  padding: 0 0 1.5rem;
  /* 与 .admin-pane-body 同构：吃掉剩余高度，把滚动交给列表与详情。 */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-notice {
  min-height: 1.35rem;
  margin: 0 0 0.75rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
.admin-notice[data-kind="error"] {
  color: var(--agnes-status-danger-text);
}
/* resource-control-web 会写 kind=success/warning，admin 会写 kind=state；
   此前只有 error 有样式，成功与警告态和普通提示同色。 */
.admin-notice[data-kind="success"] {
  color: var(--agnes-status-success-text);
}
.admin-notice[data-kind="warning"] {
  color: var(--agnes-status-warning-text);
}
.admin-notice[data-kind="state"] {
  color: var(--agnes-status-info-text);
}
.recovery-notice {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--agnes-status-warning-text);
  border-inline-start: 3px solid var(--agnes-status-warning-text);
  border-radius: var(--radius-card);
  background: var(--agnes-status-warning-bg);
}
.recovery-notice strong {
  color: var(--agnes-status-warning-text);
  font-size: var(--font-size-sm);
}
.recovery-notice p {
  margin: 0;
  color: var(--agnes-status-warning-text);
  font-size: var(--font-size-sm);
}
.orphan-pins {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-inline-start: 3px solid var(--agnes-status-warning-text);
  border-radius: var(--radius-card);
  background: var(--agnes-status-warning-bg);
}
.orphan-pins-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.orphan-pins-heading strong {
  color: var(--agnes-status-warning-text);
  font-size: var(--font-size-sm);
}
.orphan-pins-status {
  margin: 0;
  color: var(--agnes-status-warning-text);
  font-size: var(--font-size-sm);
}
.orphan-pins-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orphan-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--agnes-status-warning-text);
  border-radius: var(--radius-md);
  background: var(--agnes-status-warning-bg);
}
.orphan-pin-content p {
  margin: 0;
  font-size: var(--font-size-sm);
}
.orphan-pin-content .orphan-pin-meta {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.orphan-pin-content .orphan-pin-error {
  color: var(--agnes-status-danger-text);
}
.plugin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 不再自带边框与阴影：它与搜索框/按钮会叠成双层描边。边框留给控件自己。 */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.plugin-tabs {
  display: flex;
  align-items: flex-end;
  gap: 1.375rem;
  padding: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}
.plugin-tabs button {
  position: relative;
  min-height: var(--control-height);
  padding: 0.4375rem 0.0625rem 0.5625rem;
  border: 0;
  border-radius: 0;
  color: var(--agnes-text-tertiary);
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-sm);
  font-weight: 400;
  transition: color var(--transition-fast) ease;
}
.plugin-tabs button:hover:not(:disabled),
.plugin-tabs button[aria-selected="true"] {
  border-color: transparent;
  color: var(--agnes-text-primary);
  background: transparent;
}
.plugin-search-field {
  min-width: min(19rem, 45%);
}
.plugin-search-field input {
  width: 100%;
  min-height: var(--control-height);
  padding-inline: 0.75rem;
  /* 之前边框被显式置为透明、且 :focus 只改底色，导致常态与焦点态都没有边框；
     字号也没声明，落到 body 的 16px，比工具条里其他 13px 控件明显偏大。 */
  font-size: var(--font-size-sm);
  border-color: var(--agnes-input-border);
  background: var(--agnes-input-surface);
}
.plugin-search-field input:hover {
  border-color: var(--agnes-line-emphasis);
}
/* 焦点态沿用全站 input:focus-visible（文件顶部表单控件规则）：边框变
   --agnes-input-border-focus 并带一圈 --agnes-brand-focus-ring，此处不再覆盖。 */
.plugin-layout {
  /* 详情搬进独立模态框后，布局里只剩列表一列。这里仍需建立纵向 flex 高度链，
     否则列表会按内容高度撑开，再被 .admin-pane-body 的 overflow: hidden 裁掉。 */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 1rem;
}
.resource-admin-page .admin-main {
  max-width: 1240px;
}
.resource-admin-header {
  align-items: center;
}
.resource-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 与 .plugin-toolbar 一致：间距交给 .plugin-layout 的 margin-top。 */
  margin: 0;
}
.resource-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.resource-layout {
  min-height: 0;
}
/* 技能与 MCP 列表与插件页同构：标题 / Switch 两段固定轨道，
   同一列表内各行因此严格对齐（状态灯移除后不再是三段，留着空轨道会把 Switch 挤离右边缘）。 */
.resource-row {
  grid-template-columns: minmax(0, 1fr) 2.375rem;
}
.resource-empty {
  padding: 1.25rem 0.75rem;
  color: var(--agnes-text-secondary);
  white-space: pre-line;
}
#resource-list[data-state="loading"]::before {
  display: block;
  padding: 1.25rem 0.75rem;
  color: var(--agnes-text-secondary);
  content: "正在读取资源目录…";
}
#resource-list[data-state="error"] {
  border-color: var(--agnes-status-danger-text);
}
#resource-notice [data-resource-retry] {
  margin-left: 0.75rem;
}
.resource-roots {
  margin: 0 0.75rem 0.75rem;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--agnes-text-secondary);
}
.resource-facts {
  display: grid;
  grid-template-columns: minmax(104px, 0.75fr) minmax(0, 1.25fr);
  gap: 0.5rem 1rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  background: var(--agnes-bg-page);
}
.resource-facts dt {
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}
.resource-facts dd {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.625rem;
}
.resource-safe-error {
  margin: 0.75rem 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--agnes-status-danger-text);
  background: var(--agnes-status-danger-bg);
  font-size: var(--font-size-sm);
}
.resource-operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-secondary);
  background: var(--agnes-bg-surface);
  font-size: var(--font-size-sm);
}

@media (max-width: 760px) {
  .resource-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .resource-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .resource-toolbar-actions > button {
    width: 100%;
  }
  .resource-toolbar-actions:has(> #mcp-create[hidden]) > #skill-refresh,
  .resource-toolbar-actions:has(> #skill-refresh[hidden]) > #mcp-create {
    grid-column: 1 / -1;
  }
  .resource-facts {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .resource-facts dt {
    margin-top: 0.5rem;
  }
}
.plugin-list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* 列表是两个宿主的唯一纵向滚动容器。 */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.plugin-inventory-status {
  margin: 0 0 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--agnes-status-warning-text);
  border-radius: var(--radius-lg);
  color: var(--agnes-status-warning-text);
  background: var(--agnes-status-warning-bg);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.plugin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.375rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  background: var(--agnes-bg-page);
  cursor: pointer;
  outline: 0;
  text-align: left;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.plugin-row:last-of-type {
  margin-bottom: 0;
}
/* 目录页第三列是动作按钮而不是 Switch，宽度随文案变，所以在基础轨上单独覆盖。 */
.plugin-row[data-tab="discover"] {
  grid-template-columns: minmax(0, 1fr) 8.5rem auto;
}
.plugin-row[data-tab="installed"]:has(.plugin-row-retry) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.plugin-row:hover,
.plugin-row:focus-visible {
  border-color: var(--agnes-line-emphasis);
  background: var(--agnes-bg-hover);
  box-shadow: none;
}
.plugin-row:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: -2px;
}
.plugin-row-content {
  min-width: 0;
}
.plugin-row h2 {
  margin: 0;
  /* 行标题单行截断 + title 全文（见渲染代码）：长插件名/长 MCP 名不得撑破行。 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.35;
}
.plugin-detail h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
.plugin-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.plugin-detail-close {
  flex: 0 0 auto;
}
.plugin-row-content p {
  margin: 0.125rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.plugin-row-content .plugin-source {
  color: var(--agnes-text-tertiary);
}
.plugin-row-content .resource-safe-error {
  margin-top: 0.5rem;
  color: var(--agnes-status-danger-text);
  white-space: normal;
}
.plugin-surface-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.plugin-surface-link {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-button-outline-content);
  background: transparent;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.plugin-surface-link:hover {
  background: var(--agnes-bg-hover);
}
.plugin-surface-link:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}
/* 状态指示灯：信任 / 期望 / 实际 / 浏览器 UI 四格纵向排开。此前是一排文字 chip，
   长短随取值变化，扫读要逐字读。改用色点后一眼能看出"哪一格不对劲"。
   颜色不进 JS，只由这里的 data-tone 决定。 */
.state-lights {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.state-light {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  font-size: var(--font-size-xs);
  line-height: 1.3;
}
.state-light-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--agnes-text-tertiary);
}
.state-light-copy {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
}
.state-light-name {
  flex: 0 0 auto;
  color: var(--agnes-text-tertiary);
}
.state-light-value {
  overflow: hidden;
  color: var(--agnes-text-secondary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-light[data-tone="ok"] .state-light-dot {
  background: var(--agnes-status-success-text);
}
.state-light[data-tone="ok"] .state-light-value {
  color: var(--agnes-status-success-text);
}
.state-light[data-tone="warn"] .state-light-dot {
  background: var(--agnes-status-warning-text);
}
.state-light[data-tone="warn"] .state-light-value {
  color: var(--agnes-status-warning-text);
}
.state-light[data-tone="bad"] .state-light-dot {
  background: var(--agnes-status-danger-text);
}
.state-light[data-tone="bad"] .state-light-value {
  color: var(--agnes-status-danger-text);
}
.state-light[data-tone="off"] .state-light-dot {
  background: var(--agnes-line-emphasis);
}
.state-light[data-tone="off"] .state-light-value {
  color: var(--agnes-text-tertiary);
}

/* Switch：行内第三列，拨的是"期望状态"。真实生效结果由本地后台回报，
   所以它只表达意图，不代表已经生效（那一格由"实际"灯负责）。
   button 本身就是轨道，内部 span 只负责圆钮定位。 */
.switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 2.375rem;
  min-width: 2.375rem;
  height: 1.375rem;
  min-height: 1.375rem;
  padding: 0;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-full);
  background: var(--agnes-bg-card);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}
.switch-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.switch-knob {
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--agnes-text-tertiary);
  transform: translateY(-50%);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}
.switch[aria-checked="true"] {
  border-color: var(--agnes-brand-primary);
  background: var(--agnes-brand-primary);
}
.switch[aria-checked="true"] .switch-knob {
  /* 轨道是品牌填充色，圆钮沿用"品牌填充上的内容色"这个既有语义 token，
     深浅色各自取到正确的前景（浅色白、深色近黑）。 */
  background: var(--agnes-button-primary-content);
  transform: translate(1rem, -50%);
}
.switch:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}
.switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.plugin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}
.plugin-row-actions .secondary-button {
  min-width: 5.75rem;
}
.plugin-empty {
  display: grid;
  place-content: center;
  min-height: 18rem;
  padding: 2rem;
  text-align: center;
}
.admin-empty-state {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 18rem;
  padding: 2rem;
  text-align: center;
}
.admin-empty-state-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.875rem;
  color: var(--agnes-brand-primary);
  opacity: 0.86;
}
.admin-empty-state h2 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-md);
}
.admin-empty-state p {
  max-width: 21rem;
  margin: 0.5rem 0 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
.admin-empty-state-hints {
  display: grid;
  gap: 0.375rem;
  width: min(100%, 30rem);
  margin: 0.875rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-tertiary);
  background: var(--agnes-bg-surface);
  font-size: var(--font-size-xs);
  line-height: 1.45;
  list-style: none;
  overflow-wrap: anywhere;
  text-align: left;
}
.plugin-more {
  width: calc(100% - 2rem);
  justify-content: center;
  margin: 0.75rem 1rem 1rem;
}
.plugin-detail[open] {
  /* 三段式容器：头部固定 / 中段滚动 / 动作固定。内部结构见 .admin-detail-scroll 与
     .admin-detail-actions；操作按钮因此永远不会被内容推出可视区。
     选择器限定 `[open]`：否则 `display: flex` 会覆盖浏览器对关闭态 dialog 的 `display: none`，
     空盒子就会在页面正中渲染成一条灰线。 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: var(--dialog-max-height);
  padding: 0;
  overflow: hidden;
}
/* 详情是模态框（不再是面板右侧的固定抽屉），宽度自己定，不再由 .plugin-layout 的列宽决定。
   三段式的三段里，头部与动作是 flex: 0 0 auto，只有中段 flex:1 + overflow-y:auto，
   因此"描述太长 → 底部按钮够不到"结构上不可能发生。 */
#plugin-detail,
#resource-detail {
  width: min(42rem, calc(100vw - 2rem));
}
.admin-detail-head {
  flex: 0 0 auto;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--agnes-line-primary);
}
.admin-detail-scroll {
  flex: 1;
  min-height: 0;
  padding: 0 1rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.admin-detail-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--agnes-line-primary);
  background: var(--agnes-bg-page);
}
.plugin-detail > p:not(.plugin-detail-version):not(.plugin-detail-state) {
  margin: 0.5rem 0 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
.plugin-detail-version,
.plugin-detail-state {
  margin: var(--s8) 0 0;
  overflow-wrap: anywhere;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-sm);
}
.plugin-detail-state {
  color: var(--agnes-text-emphasis);
  font-weight: 600;
}
.plugin-facts {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0.75rem;
  border-radius: var(--radius-card);
  background: var(--agnes-bg-card);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.plugin-facts dt {
  color: var(--agnes-text-tertiary);
}
.plugin-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--agnes-text-secondary);
}
.plugin-blockers,
.plugin-operations {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--agnes-status-danger-text);
  border-radius: var(--radius-card);
  background: var(--agnes-status-danger-bg);
}
.plugin-operations {
  border-color: var(--agnes-line-primary);
  background: var(--agnes-bg-surface);
}
.plugin-blockers h3,
.plugin-operations h3 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
}
.plugin-blockers ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.625rem 0 0;
  padding-left: 1rem;
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-xs);
}
.plugin-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.danger-button {
  min-height: 2.25rem;
  padding: var(--s8) 0.75rem;
  border: 1px solid var(--agnes-status-danger-text);
  border-radius: var(--radius-lg);
  color: var(--agnes-status-danger-text);
  background: var(--agnes-status-danger-bg);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
/* 此前 hover 与常态声明完全相同，悬停零反馈。
   改为反色填充：文字用 --agnes-text-inverse，浅 4.53:1 / 深 5.72:1。 */
.danger-button:hover:not(:disabled) {
  border-color: var(--agnes-status-danger-text);
  color: var(--agnes-text-inverse);
  background: var(--agnes-status-danger-text);
}
.operation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.operation-row p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}
.plugin-dialog-form {
  display: grid;
  gap: 1rem;
  max-height: inherit;
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.confirm-facts {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
}
.confirm-facts-lead {
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.confirm-facts-list {
  display: grid;
  grid-template-columns: minmax(5.75rem, 7rem) minmax(0, 1fr);
  gap: 0.25rem 0.625rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-card);
  background: var(--agnes-bg-surface);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.confirm-facts-list dt {
  color: var(--agnes-text-tertiary);
}
.confirm-facts-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--agnes-text-secondary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--font-size-xs);
}
.confirm-review-section {
  min-width: 0;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-card);
  background: var(--agnes-bg-page);
}
.confirm-review-section > summary {
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  list-style-position: inside;
}
.confirm-review-content {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.75rem;
}
.confirm-review-content ul {
  display: grid;
  gap: var(--s8);
  margin: 0;
  padding-left: 1rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.confirm-review-content li {
  overflow-wrap: anywhere;
}
.confirm-contributions {
  padding-left: 1rem;
}
.confirm-contributions li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--agnes-line-primary);
}
.confirm-contributions li:last-child {
  border-bottom: 0;
}
.confirm-contributions p,
.confirm-empty-fact {
  margin: 0;
  overflow-wrap: anywhere;
}
.confirm-contributions p + p {
  margin-top: 0.25rem;
  color: var(--agnes-text-tertiary);
}
.confirm-empty-fact {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.plugin-form-error {
  min-height: 1.25rem;
  margin: 0;
  color: var(--agnes-status-danger-text);
  font-size: var(--font-size-sm);
}

/* 窄屏（窗口 ≤900px）。iframe 时代这里必须靠容器查询或宿主特例覆盖，因为 @media 量的是
   iframe 自己的宽度（≈922px）而不是窗口，于是"窄屏规则"在嵌入态恒为真——那正是详情掉到
   列表下方、详情同时失去自身滚动的根因。去掉 iframe 后 @media 重新量窗口，这套补丁不再需要。
   窄屏由 .admin-pane-body / .admin-main 滚，列表按自然高度排列；模态详情保留自己的正文滚动。 */
@media (max-width: 900px) {
  .plugin-layout {
    grid-template-columns: 1fr;
    flex: none;
  }
  .plugin-list {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
  .admin-pane-body,
  .admin-main {
    overflow-y: auto;
  }
}

@media (max-width: 900px) {
  .admin-header,
  .admin-main {
    width: min(100% - 2rem, 44rem);
  }
}

@media (max-width: 540px) {
  .admin-header {
    min-height: 6.5rem;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
  }
  .admin-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .admin-header > :first-child {
    grid-row: 2;
  }
  .admin-header > :last-child {
    grid-row: 2;
  }
  .plugin-toolbar {
    display: grid;
    gap: 0.5rem;
  }
  .plugin-search-field {
    min-width: 0;
  }
  .plugin-tabs {
    width: 100%;
  }
  .plugin-tabs button {
    flex: 1 1 50%;
    min-height: 2.75rem;
  }
  .plugin-search-field input {
    min-height: 2.75rem;
  }
  .plugin-row {
    grid-template-columns: minmax(0, 1fr) 2.375rem;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  .plugin-row[data-tab="discover"] {
    grid-template-columns: minmax(0, 1fr) 6rem auto;
  }
  .plugin-row > :last-child.secondary-button,
  .plugin-row > :last-child .secondary-button,
  .plugin-detail-actions button,
  .danger-button {
    min-height: 2.75rem;
  }
  .plugin-detail-actions > * {
    flex: 1 1 10rem;
  }
  .plugin-dialog-form {
    padding: 1rem;
  }
  .confirm-facts-list {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .confirm-facts-list dd {
    margin-bottom: var(--s8);
  }
}

@media (max-width: 360px) {
  .admin-header,
  .admin-main {
    width: calc(100% - 1.5rem);
  }
  .admin-header > :last-child,
  .admin-header > :first-child {
    padding-inline: 0.625rem;
    font-size: var(--font-size-xs);
  }
  .plugin-row > :last-child.secondary-button,
  .plugin-row > :last-child .secondary-button {
    min-width: 0;
    padding-inline: 0.5rem;
  }
}
#config::backdrop {
  background: var(--agnes-bg-scrim);
  backdrop-filter: blur(2px);
}
#config-form .settings-rail-heading .eyebrow,
.settings-nav-label,
.settings-rail-title,
.config-accounts-heading h3,
.config-detail-heading h3,
.config-list-note,
#config-account-guard {
  margin: 0;
}
#config-form .config-accounts-heading > div > p,
#config-form .config-detail-heading > div > p,
#config-form #config-account-context {
  margin: 0;
}
#config-form .settings-rail-heading .eyebrow {
  display: none;
  color: var(--agnes-text-disabled);
  font-size: var(--font-size-xs);
}
.settings-rail-title {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
#config-close {
  position: absolute;
  top: 20px;
  right: 14px;
  z-index: 1;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border-radius: 28px;
  color: var(--agnes-text-primary);
}
#config-close .icon {
  width: 0.875rem;
  height: 0.875rem;
}
.settings-rail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.75rem;
}
.settings-nav-group {
  display: grid;
  gap: 0.25rem;
}
.settings-nav-label {
  display: none;
}
.settings-nav-item {
  width: 100%;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5625rem 1rem 0.5625rem 0.75rem;
  border: 0;
  border-radius: 0.75rem;
  color: var(--agnes-text-primary);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  text-align: start;
}
.settings-nav-item.active,
.settings-nav-item[aria-current="page"] {
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-selected);
  box-shadow: none;
}
.settings-nav-item:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-primary);
  background: var(--agnes-bg-hover);
}
#config-form .settings-nav-item .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.settings-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}
#config-form .config-heading {
  min-height: 3.375rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--agnes-line-primary);
  background: transparent;
}
#config-form .config-heading .eyebrow {
  display: none;
}
#config-form .config-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
#config-form .config-heading > div > p {
  max-width: 38rem;
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: 0.875rem;
  line-height: 1.375rem;
}
/* 模型账户页：账户列表在上、账户详情在下（用户要求改成上下结构）。
   外观页仍沿用两栏，未动。 */
#model-settings-pane .config-workspace {
  width: min(100%, 45rem);
  flex: 0 1 auto;
  display: block;
  padding-bottom: 1.5rem;
  overflow: visible;
}
.config-workspace {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(17rem, 0.86fr) minmax(26rem, 1.5fr);
  gap: 1.25rem;
  padding: 0.5rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#computer-use-settings-pane .config-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  overflow-x: hidden;
}
#computer-use-settings-pane .config-card {
  flex: 0 0 auto;
  padding: 1rem;
  overflow-wrap: anywhere;
  box-shadow: none;
}
#computer-use-settings-pane .config-card p {
  margin: 0.5rem 0;
  text-wrap: pretty;
}
#computer-use-settings-pane .config-card .eyebrow {
  margin-top: 0;
  color: var(--agnes-text-tertiary);
}
#computer-use-settings-pane .config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#computer-use-settings-pane .config-heading {
  padding-right: 3rem;
  flex-wrap: wrap;
}
#computer-use-blockers:empty,
#computer-use-runtime:empty {
  display: none;
}
.config-accounts-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: visible;
}
#model-settings-pane .config-accounts-section {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.config-accounts-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0;
  padding: 1rem 0 0.75rem;
  border-top: 0;
}
#model-settings-pane .config-accounts-heading h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
}
.config-accounts-heading h3,
.config-detail-heading h3 {
  color: var(--agnes-text-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.015em;
}
#config-form .config-accounts-heading > div > p,
#config-form #config-account-context {
  margin-top: 0.25rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
#config-add-account {
  flex: 0 0 auto;
  border-color: var(--agnes-line-emphasis);
  color: var(--agnes-text-emphasis);
  background: var(--agnes-bg-surface);
}
#config-accounts {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
  overflow: visible;
}
#config-accounts[data-state="empty"]::before {
  padding: 1.5rem 0.75rem;
  border: 1px dashed var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-tertiary);
  content: "还没有已保存的模型账户";
  font-size: var(--font-size-xs);
  text-align: center;
}
#config-accounts[data-state="loading"]::before {
  padding: 1.5rem 0.75rem;
  border: 1px dashed var(--agnes-line-emphasis);
  border-radius: var(--radius-lg);
  color: var(--agnes-text-tertiary);
  content: "正在读取配置…";
  font-size: var(--font-size-xs);
  text-align: center;
}
.config-account {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "identity actions"
    "meta actions";
  align-items: center;
  justify-items: stretch;
  gap: 0.125rem 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  background: var(--agnes-bg-page);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.config-account::before {
  display: none;
}
.config-account:hover,
.config-account:focus-visible {
  border-color: var(--agnes-line-emphasis);
  background: var(--agnes-bg-hover);
  box-shadow: none;
}
.config-account[data-selected="true"] {
  border-color: var(--agnes-line-emphasis);
}
.config-account-select {
  min-width: 0;
  min-height: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-area: identity;
  gap: 0.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--agnes-text-primary);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-account-select::before {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--agnes-text-tertiary);
  content: "";
}
.config-account[data-status="ready"] .config-account-select::before {
  background: var(--agnes-status-success-text);
}
.config-account[data-status="missing"] .config-account-select::before {
  background: var(--agnes-status-danger-text);
}
.config-account-select:hover:not(:disabled) {
  border-color: transparent;
  color: var(--agnes-text-primary);
  background: transparent;
  box-shadow: none;
}
.config-account-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  padding-left: 1rem;
  overflow: hidden;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.125rem;
}
.config-account-meta > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-account-status {
  flex: 0 0 auto;
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-sm);
  color: var(--agnes-text-secondary);
  font-size: 0.6875rem;
  line-height: 1rem;
}
.config-account-status[data-tone="success"] {
  color: var(--agnes-status-success-text);
}
.config-account-status[data-tone="brand"] {
  color: var(--agnes-text-emphasis);
}
.config-account-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
}
.config-account-actions button {
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  border-color: var(--agnes-line-emphasis);
  border-radius: var(--radius-md);
  color: var(--agnes-text-tertiary);
  background: var(--agnes-surface-glass-soft);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.config-account-actions button:hover:not(:disabled) {
  color: var(--agnes-text-emphasis);
  background: var(--agnes-surface-glass-hover);
}
.config-account button:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}
.config-list-note {
  margin-top: auto;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--agnes-line-primary);
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.config-detail-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.config-detail-heading {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--agnes-line-primary);
}
#config-form .config-detail-heading .eyebrow {
  margin-bottom: 0.25rem;
  color: var(--agnes-text-disabled);
  font-size: var(--font-size-xs);
}
#config-form #config-account-context {
  flex: 0 1 auto;
  max-width: 13rem;
  color: var(--agnes-text-tertiary);
  text-align: end;
}
.config-detail-grid {
  min-height: 0;
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
}
/* 账户详情 / 新增弹窗：外壳沿用全局 dialog 口径（宽度 / 圆角 / 阴影 / 遮罩），
   这里只补内部排版 —— 内容可滚动、关闭按钮浮在右上、页脚保留原分隔线样式。 */
#account-dialog {
  width: min(30rem, calc(100vw - 3rem));
}
.select-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: max(44px, var(--control-height-form));
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--agnes-input-border);
  border-radius: var(--radius-md);
  color: var(--agnes-input-content-strong);
  background: var(--agnes-input-surface);
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-align: start;
  box-shadow: none;
}
.select-picker-trigger:hover:not(:disabled) {
  border-color: var(--agnes-input-border-emphasis);
  background: var(--agnes-bg-hover);
}
.select-picker-trigger:active:not(:disabled),
.select-picker-trigger[aria-expanded="true"] {
  border-color: var(--agnes-input-border-focus);
  background: var(--agnes-brand-emphasis-soft);
  transform: none;
}
.select-picker-trigger:focus-visible {
  outline: 2px solid var(--agnes-brand-primary);
  outline-offset: 2px;
}
.select-picker-trigger:disabled {
  color: var(--agnes-text-tertiary);
  background: var(--agnes-bg-card);
  cursor: not-allowed;
}
.select-picker-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-picker-chevron {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  margin: 0 0.125rem 0.1875rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.select-picker-trigger[aria-expanded="true"] .select-picker-chevron {
  transform: rotate(225deg);
  margin-bottom: 0;
}
.select-picker-panel {
  position: fixed;
  inset: auto;
  z-index: 40;
  box-sizing: border-box;
  margin: 0;
  padding: 0.375rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--agnes-line-emphasis) transparent;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  background: var(--agnes-bg-popover);
  color: var(--agnes-text-primary);
  box-shadow: var(--shadow-elevation-prominent);
  font-size: var(--font-size-sm);
}
.select-picker-group + .select-picker-group {
  margin-top: 0.5rem;
}
.select-picker-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.625rem 0.5rem;
  color: var(--agnes-text-tertiary);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.25rem;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}
.select-picker-heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--agnes-line-primary);
}
.select-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.select-picker-option:hover,
.select-picker-panel[data-keyboard="true"] .select-picker-option[data-active="true"] {
  background: var(--agnes-bg-hover);
}
.select-picker-option[aria-selected="true"] {
  background: var(--agnes-brand-emphasis-soft);
  font-weight: 500;
}
.select-picker-panel[data-keyboard="true"] .select-picker-option[data-active="true"] {
  outline: 1px solid var(--agnes-brand-primary);
  outline-offset: -1px;
}
.select-picker-option:active {
  background: var(--agnes-bg-selected);
}
.select-picker-check {
  flex: 0 0 1rem;
  color: var(--agnes-brand-primary);
  text-align: center;
}
#account-dialog .account-dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}
.account-dialog-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-height: var(--dialog-max-height);
  overflow: hidden;
}
/* 只有表单内容滚动，标题与操作区始终保留在弹窗可视范围内。 */
#account-dialog .config-detail-grid {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0.875rem 1.25rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#account-dialog .config-detail-heading {
  min-height: auto;
  display: grid;
  gap: 0.125rem;
  padding: 1.25rem 3rem 0.875rem 1.25rem;
}
#account-dialog .config-detail-heading .eyebrow {
  display: none;
}
#account-dialog .config-detail-heading h3 {
  margin: 0;
  color: var(--agnes-text-primary);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
#account-dialog #config-account-context {
  max-width: none;
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.125rem;
  text-align: start;
}
#account-dialog .config-detail-footer {
  position: static;
  flex: 0 0 auto;
}
/* 模型账户页的字段整行铺开（用户要求改成上下结构）；
   设置弹窗整体在 #config-form 内，故用面板 id 收窄作用范围。 */
#config-form #model-settings-pane .config-section {
  grid-template-columns: minmax(0, 1fr);
}
:is(#config-form, #account-dialog) .config-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}
:is(#config-form, #account-dialog) .config-section + .config-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--agnes-line-primary);
}
:is(#config-form, #account-dialog) .config-section legend {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
}
:is(#config-form, #account-dialog) .form-field {
  gap: 0.375rem;
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}
:is(#config-form, #account-dialog) .form-field-wide,
:is(#config-form, #account-dialog) .config-validation-section .config-validation-controls,
:is(#config-form, #account-dialog) .config-validation-section #config-state,
:is(#config-form, #account-dialog) .config-validation-section #config-error {
  grid-column: 1 / -1;
}
:is(#config-form, #account-dialog) input,
:is(#config-form, #account-dialog) select,
:is(#config-form, #account-dialog) .select-picker-trigger {
  height: var(--control-height-form);
  min-height: var(--control-height-form);
  padding: 0.625rem 0.75rem;
  border-color: var(--agnes-input-border);
  border-radius: var(--radius-md);
  color: var(--agnes-input-content-strong);
  background: var(--agnes-input-surface);
  font-size: var(--font-size-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}
:is(#config-form, #account-dialog) input:hover:not(:disabled),
:is(#config-form, #account-dialog) select:hover:not(:disabled) {
  border-color: var(--agnes-input-border-emphasis);
  background: var(--agnes-input-surface);
}
:is(#config-form, #account-dialog) input:focus-visible,
:is(#config-form, #account-dialog) select:focus-visible {
  background: var(--agnes-input-surface);
}
:is(#config-form, #account-dialog) input:disabled,
:is(#config-form, #account-dialog) select:disabled {
  color: var(--agnes-text-tertiary);
  border-color: var(--agnes-line-primary);
  background: var(--agnes-bg-card);
}
:is(#config-form, #account-dialog) #config-key-hint {
  min-height: 1.1rem;
  margin-top: 0.125rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
#account-dialog .oauth-controls {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-md);
  background: var(--agnes-bg-card);
}
#account-dialog .oauth-controls[hidden] {
  display: none;
}
#account-dialog .oauth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#account-dialog .oauth-actions button {
  flex: 1 1 8rem;
}
#account-dialog .oauth-status {
  min-height: 1.125rem;
  margin: 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
#account-dialog :is(.oauth-status, .oauth-links):empty {
  display: none;
}
#account-dialog .oauth-links a {
  color: var(--agnes-text-emphasis);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
#account-dialog .oauth-prompt[hidden] {
  display: none;
}
:is(#config-form, #account-dialog) .config-validation-section .config-validation-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}
:is(#config-form, #account-dialog) .config-validation-controls > #config-test {
  height: var(--control-height-form);
  min-height: var(--control-height-form);
}
:is(#config-form, #account-dialog) .config-validation-section #config-state,
:is(#config-form, #account-dialog) .config-validation-section #config-error {
  min-height: 0;
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
:is(#config-form, #account-dialog) .config-validation-section #config-state {
  color: var(--agnes-text-tertiary);
}
:is(#config-form, #account-dialog) .config-validation-section #config-error {
  color: var(--agnes-status-danger-text);
}
:is(#config-form, #account-dialog) .config-validation-section #config-error:empty {
  display: none;
}
.config-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--agnes-line-primary);
  background: var(--agnes-bg-surface);
}
#config-account-guard {
  max-width: 27rem;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
#config-save {
  min-width: 7rem;
  min-height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  #config {
    width: calc(100vw - 1.25rem);
    height: calc(100dvh - 1.25rem);
    max-height: calc(100dvh - 1.25rem);
  }
  #config-form {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
  #config-form .config-heading,
  .config-workspace {
    padding-inline: 1.25rem;
  }
  .config-workspace {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(21rem, 1.2fr);
    gap: 0.75rem;
  }
  #config-form .config-section {
    grid-template-columns: 1fr;
  }
  #config-form .form-field-wide,
  #config-form .config-validation-section .config-validation-controls,
  #config-form .config-validation-section #config-state,
  #config-form .config-validation-section #config-error,
  #config-form .config-section legend {
    grid-column: 1;
  }
}

@media (max-width: 840px) {
  #config {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  #config-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #settings-content-slots {
    grid-column: 1;
    grid-row: 2;
  }
  .settings-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--agnes-line-primary);
  }
  .settings-rail-heading {
    padding: 0;
  }
  .settings-nav-group {
    grid-template-columns: auto auto;
    align-items: center;
  }
  .settings-nav-label {
    display: none;
  }
  .settings-nav-item {
    min-height: 2.25rem;
    width: auto;
    padding: 0.5rem 0.625rem;
  }
  .settings-content {
    overflow-y: auto;
  }
  #config-form .config-heading {
    min-height: auto;
    align-items: flex-start;
    padding: 1.25rem 1rem;
  }
  #config-form .config-heading h2 {
    font-size: var(--font-size-xl);
  }
  .config-workspace {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    flex: none;
    padding: 1rem;
    overflow: visible;
  }
  #config-accounts {
    max-height: 15rem;
  }
  .config-detail-grid {
    overflow: visible;
  }
}

@media (max-width: 480px) {
  .settings-rail {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .settings-nav-group {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .settings-rail-heading .eyebrow,
  #config-form #config-account-context {
    display: none;
  }
  .settings-nav-item {
    flex: 1 1 50%;
    justify-content: center;
  }
  #config-form .config-heading {
    padding-block: 1rem;
  }
  .config-accounts-heading,
  .config-detail-heading,
  .config-detail-grid,
  .config-detail-footer {
    padding: 1rem;
  }
  .config-accounts-heading {
    align-items: center;
  }
  .config-accounts-heading p,
  #config-add-account span {
    display: none;
  }
  #config-add-account {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
  }
  .config-account-select {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  #config-form .config-validation-section .config-validation-controls,
  .config-detail-footer {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  #config-form #config-test,
  #config-save {
    width: 100%;
  }
  #account-dialog .config-detail-footer {
    flex-direction: column;
  }
}
.usage-disclosure {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
.usage-disclosure summary {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.usage-disclosure summary:focus-visible {
  outline: 2px solid var(--agnes-input-border-focus);
  outline-offset: 2px;
}
.usage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8) 1rem;
  margin: 0.75rem 0 0.25rem;
}
.usage-grid dt,
.usage-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.usage-grid dd {
  color: var(--agnes-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.usage-note {
  margin: 0.625rem 0 0;
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
#send[data-mode="idle"] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.turn-process-body .assistant .node-label {
  display: none;
}
.confirm-review-section[open] > summary {
  border-bottom: 1px solid var(--agnes-line-primary);
}
.appearance-options {
  margin: 0;
  padding: 1rem 1rem;
  border: 0;
}
.appearance-card {
  padding-top: 0.75rem;
}
.appearance-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--agnes-line-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.appearance-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.appearance-option-name {
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.appearance-option-hint {
  color: var(--agnes-text-tertiary);
  font-size: var(--font-size-xs);
}
.appearance-option + .appearance-option {
  margin-top: 0.5rem;
}
.appearance-option:hover {
  background: var(--agnes-bg-hover);
}
.appearance-option:has(input:checked) {
  border-color: var(--agnes-input-border-focus);
  background: var(--agnes-brand-emphasis-soft);
}
#config-form /* fieldset 的 legend 默认画在边框区，会顶到卡片上沿。
   display:block 让它回到正常流里，fieldset 的 padding-top 才起作用。 */
.appearance-options legend {
  display: block;
  padding: 0 0 var(--s12);
  color: var(--agnes-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
#config-form .appearance-option input {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0.125rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--agnes-brand-primary);
}

#appearance-settings-pane .config-workspace {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* 原生 select 太丑：去掉系统外观，自绘箭头。
   必须带 #config-form——文件前部已有 #config-form select 的 padding 简写 (1,0,1)，
   裸 .form-field select 只有 (0,1,1)，padding-right 会被压掉，箭头压住文字。 */
.plugin-dialog-form select,
#config-form select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position:
    right 1rem center,
    right 0.72rem center;
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* Keep the final mobile cascade authoritative: several legacy component blocks below the first
   responsive section intentionally set compact desktop heights. */
@media (max-width: 540px) {
  button,
  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: var(--control-height-touch) !important;
  }
}

#composer-attach {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 50%;
}
#composer-attach[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-agnes-conversation-messages] .node-body,
[data-agnes-conversation-messages] .thinking-content,
[data-agnes-conversation-messages] .tool-detail-text {
  white-space: pre-wrap;
}

[data-agnes-conversation-messages]
  [data-agnes-assistant-ui-target][data-agnes-assistant-ui-ready="true"]
  + [data-agnes-assistant-ui-fallback] {
  display: none;
}

[data-agnes-conversation-messages] .tool-detail-body[hidden] {
  display: none;
}

/* 图片自成一块排在正文之上，横排换行，和输入框里的待发图片同一种排法。 */
[data-agnes-conversation-messages] .user-message-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 4px 8px;
}

/* 宽高由 antd Image 的行内尺寸给定（72×56），这里只管裁切与描边；
   object-fit 必须显式写：antd 只声明了 width/height，默认的 fill 会把图压变形。 */
[data-agnes-conversation-messages] .user-message-image {
  display: block;
  border: 1px solid var(--color-border-secondary, #e5e5e5);
  border-radius: 8px;
  object-fit: cover;
  cursor: zoom-in;
}

[data-agnes-conversation-messages] .user-message-image-unavailable {
  display: inline-block;
  color: var(--color-text-tertiary, #777);
  font-size: 12px;
}

[data-agnes-conversation-messages] .user-message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-block: 4px 8px;
  list-style: none;
}

[data-agnes-conversation-messages] .user-message-files li {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border-secondary, #e5e5e5);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

[data-agnes-conversation-messages] .user-message-files small {
  color: var(--color-text-tertiary, #777);
  font-size: 12px;
}

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial}}}@layer theme{:root,:host{--aui-spacing:.25rem;--aui-text-sm:.875rem;--aui-text-sm--line-height:calc(1.25 / .875);--aui-leading-relaxed:1.625;--aui-radius-3xl:1.5rem}}@layer base,components;@layer utilities{.aui\:relative{position:relative!important}.aui\:col-start-2{grid-column-start:2!important}.aui\:mx-2{margin-inline:calc(var(--aui-spacing) * 2)!important}.aui\:mx-auto{margin-inline:auto!important}.aui\:mt-0{margin-top:0!important}.aui\:flex{display:flex!important}.aui\:grid{display:grid!important}.aui\:min-h-\[4\.25rem\]{min-height:4.25rem!important}.aui\:w-full{width:100%!important}.aui\:min-w-0{min-width:0!important}.aui\:auto-rows-auto{grid-auto-rows:auto!important}.aui\:grid-cols-\[minmax\(72px\,1fr\)_auto\]{grid-template-columns:minmax(72px,1fr) auto!important}.aui\:flex-col{flex-direction:column!important}.aui\:items-start{align-items:flex-start!important}.aui\:gap-y-2{row-gap:calc(var(--aui-spacing) * 2)!important}.aui\:self-stretch{align-self:stretch!important}.aui\:rounded-3xl{border-radius:var(--aui-radius-3xl)!important}.aui\:rounded-none{border-radius:0!important}.aui\:border{border-style:var(--tw-border-style)!important;border-width:1px!important}.aui\:border-0{border-style:var(--tw-border-style)!important;border-width:0!important}.aui\:border-\[var\(--agnes-line-primary\)\]{border-color:var(--agnes-line-primary)!important}.aui\:bg-\[var\(--agnes-bg-card\)\]{background-color:var(--agnes-bg-card)!important}.aui\:bg-transparent{background-color:#0000!important}.aui\:p-0{padding:0!important}.aui\:px-2{padding-inline:calc(var(--aui-spacing) * 2)!important}.aui\:px-5{padding-inline:calc(var(--aui-spacing) * 5)!important}.aui\:py-2\.5{padding-block:calc(var(--aui-spacing) * 2.5)!important}.aui\:text-sm{font-size:var(--aui-text-sm)!important;line-height:var(--tw-leading,var(--aui-text-sm--line-height))!important}.aui\:leading-5{--tw-leading:calc(var(--aui-spacing) * 5)!important;line-height:calc(var(--aui-spacing) * 5)!important}.aui\:leading-relaxed{--tw-leading:var(--aui-leading-relaxed)!important;line-height:var(--aui-leading-relaxed)!important}.aui\:text-\[var\(--agnes-text-primary\)\]{color:var(--agnes-text-primary)!important}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}
/* ../../node_modules/.pnpm/@ant-design+x-markdown@2.9.0_@types+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@ant-design/x-markdown/es/XMarkdown/DebugPanel/DebugPanel.css */
.x-markdown-debug-panel {
  position: fixed;
  z-index: 9999;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  padding: 12px;
  font-family:
    "SF Mono",
    "Monaco",
    "Inconsolata",
    "Fira Mono",
    "Droid Sans Mono",
    "Source Code Pro",
    monospace;
  font-size: 12px;
  color: #fff;
  width: 180px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  user-select: none;
  transition: box-shadow 0.2s;
}
.x-markdown-debug-panel:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.x-markdown-debug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.x-markdown-debug-row:last-child {
  margin-bottom: 0;
}
.x-markdown-debug-label {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  min-width: 60px;
}
.x-markdown-debug-value {
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}
.x-markdown-debug-chart {
  margin-left: auto;
}
.x-markdown-debug-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.x-markdown-debug-action {
  flex: 1;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.x-markdown-debug-action:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.x-markdown-debug-action:active {
  transform: scale(0.98);
}
.x-markdown-debug-record-btn.recording {
  background: rgba(255, 77, 79, 0.2);
  border-color: #ff4d4f;
  animation: recording-pulse 1.5s ease-in-out infinite;
}
@keyframes recording-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 77, 79, 0);
  }
}
.x-markdown-debug-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.x-markdown-debug-modal {
  background: rgba(30, 30, 30, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  animation: slideIn 0.3s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.x-markdown-debug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.x-markdown-debug-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.x-markdown-debug-close-btn:hover {
  background: rgba(255, 77, 79, 0.3);
}
.x-markdown-debug-modal-content {
  padding: 24px;
}
.x-markdown-debug-stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.x-markdown-debug-stat-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.x-markdown-debug-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.x-markdown-debug-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.x-markdown-debug-chart-full {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.x-markdown-debug-chart-full .fps-line,
.x-markdown-debug-chart-full .memory-line {
  filter: drop-shadow(0 0 4px currentColor);
}
.x-markdown-debug-legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 16px;
}
.x-markdown-debug-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.x-markdown-debug-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .x-markdown-debug-stats-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ../../node_modules/.pnpm/@ant-design+x-markdown@2.9.0_@types+react@18.3.12_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@ant-design/x-markdown/es/XMarkdown/index.css */
@keyframes x-markdown-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.x-markdown {
  --text-color: inherit;
  --font-size: inherit;
  --margin-block: 0 0 1em 0;
  --td-th-padding: 0.85em 1em;
  --pre-th-td-padding: 2px 0;
  --border-font-weight: 600;
  --padding-ul-ol: 0 0 0 1em;
  --margin-ul-ol: 0 0 1em 1.8em;
  --margin-li: 0.25em 0;
  --margin-pre: 1em 0;
  --padding-code-inline: 0.2em 0.4em;
  --margin-code-inline: 0 0.2em;
  --code-inline-text: 0.85em;
  --small-border-radius: 2px;
  --image-margin: 0.5em 0;
  --hr-margin: 1.5em 0;
  --table-margin: 1em 0;
  font-size: var(--font-size);
  line-height: 1.5714285714285714;
  width: 100%;
  color: var(--text-color);
}
xmd-tail {
  display: inline;
}
.xmd-tail {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.x-markdown p,
.x-markdown div,
.x-markdown span,
.x-markdown li {
  word-break: break-word;
  overflow-wrap: break-word;
}
.x-markdown pre,
.x-markdown code {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-th) th,
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-td) td {
  padding: var(--td-th-padding);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-th) th {
  font-weight: var(--border-font-weight);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-table) pre table {
  box-shadow: none;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-td) pre td,
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-th) pre th {
  padding: var(--pre-th-td-padding);
  border: none;
  text-align: left;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-p) p {
  margin: var(--margin-block);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-p) p:first-child {
  margin-top: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-p) p:last-child {
  margin-bottom: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ul) ul,
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ol) ol {
  margin: var(--margin-ul-ol);
  padding: var(--padding-ul-ol);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ul) ul:first-child,
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ol) ol:first-child {
  margin-top: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ul) ul:last-child,
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ol) ol:last-child {
  margin-bottom: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ol):not(.x-md-disable-li) ol > li {
  list-style: decimal;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-ul):not(.x-md-disable-li) ul > li {
  list-style: disc;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-li) li {
  margin: var(--margin-li);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-li) li:first-child {
  margin-top: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-li) li:last-child {
  margin-bottom: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-pre) pre {
  margin: var(--margin-pre);
  overflow-x: auto;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-pre) pre:first-child {
  margin-top: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-pre) pre:last-child {
  margin-bottom: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-code) code {
  padding: var(--padding-code-inline);
  margin: var(--margin-code-inline);
  font-size: var(--code-inline-text);
  border-radius: var(--small-border-radius);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-code) pre code {
  padding: 0;
  margin: 0;
  font-size: inherit;
  border-radius: 0;
  line-height: 2;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-img) img {
  max-width: 100%;
  height: auto;
  margin: var(--image-margin);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-hr) hr {
  margin: var(--hr-margin);
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-table) table:not(pre) {
  margin: var(--table-margin);
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-table) table:not(pre):first-child {
  margin-top: 0;
}
.x-markdown:not(.x-md-disable-all):not(.x-md-disable-table) table:not(pre):last-child {
  margin-bottom: 0;
}
.x-markdown .inline-katex .katex-display {
  display: inline-block;
  margin: 0;
  text-align: initial;
  vertical-align: middle;
}
.x-markdown .inline-katex .katex-display > .katex {
  display: inline-block;
  text-align: initial;
  white-space: normal;
}
.x-markdown .inline-katex .katex-display > .katex > .katex-html {
  display: inline-block;
  position: static;
}
.x-markdown .inline-katex .katex-display > .katex > .katex-html > .tag {
  position: static;
}
.x-markdown .block-katex {
  display: block;
  margin: 1em 0;
}

.x-markdown-light {
  --font-size: 14px;
  --primary-color: #1677ff;
  --primary-color-hover: #4096ff;
  --heading-color: #000000;
  --text-color: rgba(0, 0, 0, 0.85);
  --border-color: rgba(240, 240, 240, 1);
  --line-color: rgba(5, 5, 5, 0.06);
  --light-bg: rgba(0, 0, 0, 0.04);
  --table-head-bg: rgba(250, 250, 250, 1);
  --table-body-bg: rgba(255, 255, 255, 1);
  --cite-bg: rgba(0, 0, 0, 0.1);
  --cite-hover-bg: rgba(0, 0, 0, 0.2);
  --border-radius-middle: 6px;
  --border-radius-small: 4px;
  --td-th-padding: 10px 12px;
  --border-font-weight: 600;
  --margin-block: 0 0 16px 0;
  --padding-ul-ol: 0 0 0 16px;
  --margin-ul-ol: 0 0 16px 28px;
  --margin-li: 0 0 14px 0;
  --hr-margin: 24px 0;
  --table-margin: 0 0 24px 0;
  --margin-pre: 0 0 16px 0;
  --padding-code: 16px;
  --xmd-tail-color: var(--text-color);
}

.x-markdown-light h1,
.x-markdown-light h2,
.x-markdown-light h3,
.x-markdown-light h4 {
  color: var(--heading-color);
  font-weight: var(--border-font-weight);
  margin: var(--margin-block);
}

.x-markdown-light h1 {
  font-size: 24px;
  line-height: 36px;
}

.x-markdown-light h2 {
  font-size: 20px;
  line-height: 32px;
}

.x-markdown-light h3 {
  font-size: 18px;
  /* 18px */
  line-height: 30px;
}

.x-markdown-light h4 {
  font-size: 16px;
}

.x-markdown-light p,
.x-markdown-light li {
  color: var(--text-color);
  margin: var(--margin-block);
}

/* 列表项通用样式 */
.x-markdown-light li {
  position: relative;
}

.x-markdown-light li::marker {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--heading-color);
}

.x-markdown-light ul > li ul > li,
.x-markdown-light ul > li ol > li {
  list-style: circle;
}

.x-markdown-light ul > li ul > li ul > li,
.x-markdown-light ul > li ul > li ol > li,
.x-markdown-light ul > li ol > li ul > li,
.x-markdown-light ul > li ol > li ol > li {
  list-style: square;
}

.x-markdown-light ol > li ol > li,
.x-markdown-light ol > li ul > li {
  list-style: lower-alpha;
}

.x-markdown-light ol > li ol > li ol > li,
.x-markdown-light ol > li ol > li ul > li,
.x-markdown-light ol > li ul > li ol > li,
.x-markdown-light ol > li ul > li ul > li {
  list-style: lower-roman;
}

.x-markdown-light hr {
  border: 0;
  border-top: 1px solid var(--line-color);
  margin: var(--hr-margin);
}

.x-markdown-light table {
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin: var(--table-margin);
}

.x-markdown-light thead {
  background-color: var(--table-head-bg);
}

.x-markdown-light tbody {
  background-color: var(--table-body-bg);
}

.x-markdown-light tbody tr {
  background-color: var(--table-body-bg);
  transition: background-color 200ms linear;

  &:hover {
    background-color: var(--table-head-bg);
  }
}

.x-markdown-light th,
.x-markdown-light td {
  padding: var(--td-th-padding);
  border: 1px solid var(--border-color);
}

.x-markdown-light th {
  color: var(--heading-color);
}

.x-markdown-light td {
  color: var(--text-color);
}

.x-markdown-light blockquote {
  border-left: 4px solid var(--border-color);
  padding: 4px 12px;
  margin: 16px 0;
  background-color: var(--cite-bg);
  border-radius: 0 var(--border-radius-middle) var(--border-radius-middle) 0;
  transition: background-color 0.2s ease;
}

.x-markdown-light blockquote:hover {
  background-color: var(--cite-hover-bg);
}

.x-markdown-light pre code:not([class$="-highlightCode-code"] pre code) {
  display: block;
  background: var(--light-bg) !important;
  padding: var(--padding-code);
  color: var(--text-color) !important;
  line-height: 1.3;
  font-size: var(--font-size);
  border-radius: var(--border-radius-middle);
  margin: var(--margin-pre);
}

.x-markdown-light code:not([class$="-highlightCode-code"] code):not(pre code) {
  background-color: var(--light-bg) !important;
  color: var(--text-color) !important;
  border-radius: var(--border-radius-small);
  padding: 2px 6px;
  margin-inline: 3px;
  font-size: var(--font-size);
  border: 1px solid var(--border-color);
}

.x-markdown-light img {
  max-width: 100%;
}

.x-markdown-light a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.x-markdown-light a:hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
}

.x-markdown-light a::after {
  content: "↗";
  margin-left: 4px;
  vertical-align: super;
  opacity: 0.7;
}

.x-markdown-dark {
  --font-size: 14px;
  --primary-color: #1677ff;
  --primary-color-hover: #4096ff;
  --heading-color: #ffffff;
  --text-color: rgba(255, 255, 255, 0.85);
  --border-color: rgba(48, 48, 48, 1);
  --line-color: rgba(253, 253, 253, 0.12);
  --dark-bg: rgba(255, 255, 255, 0.1);
  --table-head-bg: rgba(29, 29, 29, 1);
  --table-body-bg: rgba(20, 20, 20, 1);
  --cite-bg: rgba(255, 255, 255, 0.1);
  --cite-hover-bg: rgba(255, 255, 255, 0.2);
  --border-radius-middle: 6px;
  --border-radius-small: 4px;
  --td-th-padding: 10px 12px;
  --border-font-weight: 600;
  --margin-block: 0 0 16px 0;
  --padding-ul-ol: 0 0 0 16px;
  --margin-ul-ol: 0 0 16px 28px;
  --margin-li: 0 0 14px 0;
  --hr-margin: 24px 0;
  --table-margin: 0 0 24px 0;
  --padding-code: 16px;
  --xmd-tail-color: var(--text-color);
}

.x-markdown-dark h1,
.x-markdown-dark h2,
.x-markdown-dark h3,
.x-markdown-dark h4 {
  color: var(--heading-color);
  font-weight: var(--border-font-weight);
  margin: var(--margin-block);
}

.x-markdown-dark h1 {
  font-size: 24px;
  line-height: 36px;
}

.x-markdown-dark h2 {
  font-size: 20px;
  line-height: 32px;
}

.x-markdown-dark h3 {
  font-size: 18px;
  /* 18px */
  line-height: 30px;
}

.x-markdown-dark h4 {
  font-size: 16px;
}

.x-markdown-dark p,
.x-markdown-dark li {
  color: var(--text-color);
  margin: var(--margin-block);
}

/* 列表项通用样式 */
.x-markdown-dark li {
  position: relative;
}

.x-markdown-dark li::marker {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--heading-color);
}

.x-markdown-dark ul > li ul > li,
.x-markdown-dark ul > li ol > li {
  list-style: circle;
}

.x-markdown-dark ul > li ul > li ul > li,
.x-markdown-dark ul > li ul > li ol > li,
.x-markdown-dark ul > li ol > li ul > li,
.x-markdown-dark ul > li ol > li ol > li {
  list-style: square;
}

.x-markdown-dark ol > li ol > li,
.x-markdown-dark ol > li ul > li {
  list-style: lower-alpha;
}

.x-markdown-dark ol > li ol > li ol > li,
.x-markdown-dark ol > li ol > li ul > li,
.x-markdown-dark ol > li ul > li ol > li,
.x-markdown-dark ol > li ul > li ul > li {
  list-style: lower-roman;
}

.x-markdown-dark hr {
  border: 0;
  border-top: 1px solid var(--line-color);
}

.x-markdown-dark table {
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
}

.x-markdown-dark thead {
  background-color: var(--table-head-bg);
}

.x-markdown-dark tbody {
  background-color: var(--table-body-bg);
}

.x-markdown-dark tbody tr {
  background-color: var(--table-body-bg);
  transition: background-color 200ms linear;

  &:hover {
    background-color: var(--table-head-bg);
  }
}

.x-markdown-dark th,
.x-markdown-dark td {
  padding: var(--td-th-padding);
  border: 1px solid var(--border-color);
}

.x-markdown-dark th {
  color: var(--heading-color);
}

.x-markdown-dark td {
  color: var(--text-color);
}

.x-markdown-dark blockquote {
  border-left: 4px solid var(--border-color);
  padding: 4px 12px;
  margin: 16px 0;
  background-color: var(--cite-bg);
  border-radius: 0 var(--border-radius-middle) var(--border-radius-middle) 0;
  transition: background-color 0.2s ease;
}

.x-markdown-dark blockquote:hover {
  background-color: var(--cite-hover-bg);
}

.x-markdown-dark pre code:not([class$="-codeHighlighter-code"] pre code) {
  display: block;
  background: var(--dark-bg) !important;
  padding: var(--padding-code);
  color: var(--text-color) !important;
  line-height: 1.3;
  font-size: var(--font-size);
  border-radius: var(--border-radius-middle);
  margin: var(--margin-pre);
}

.x-markdown-dark code:not([class$="-codeHighlighter-code"] code):not(pre code) {
  background-color: var(--dark-bg) !important;
  color: var(--text-color) !important;
  border-radius: var(--border-radius-small);
  padding: 2px 6px;
  margin-inline: 3px;
  font-size: var(--font-size);
  border: 1px solid var(--border-color);
}

.x-markdown-dark img {
  max-width: 100%;
}

.x-markdown-dark a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.x-markdown-dark a:hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
}

.x-markdown-dark a::after {
  content: "↗";
  margin-left: 4px;
  vertical-align: super;
  opacity: 0.7;
}

/* Appended after the pinned XMarkdown core and both themes. All rules stay within this root. */
.conversation-markdown.x-markdown-light,
.conversation-markdown.x-markdown-dark {
  --font-size: var(--font-size-body);
  --primary-color: var(--agnes-brand-primary);
  --primary-color-hover: var(--agnes-brand-primary);
  --heading-color: var(--agnes-text-primary);
  --text-color: var(--agnes-text-primary);
  --border-color: var(--agnes-line-primary);
  --line-color: var(--agnes-line-primary);
  --light-bg: var(--agnes-bg-code);
  --dark-bg: var(--agnes-bg-code);
  --table-head-bg: var(--agnes-bg-card);
  --table-body-bg: var(--agnes-bg-surface);
  --cite-bg: var(--agnes-bg-card);
  --cite-hover-bg: var(--agnes-bg-hover);
  --border-radius-middle: var(--radius-md);
  --border-radius-small: var(--radius-sm);
  --td-th-padding: 0.625rem 0.75rem;
  --margin-block: 0 0 1rem 0;
  --padding-ul-ol: 0 0 0 1.125rem;
  --margin-ul-ol: 0 0 1rem 0;
  --margin-li: 0.375rem 0;
  --table-margin: 0 0 1rem 0;
  --margin-pre: 0 0 1rem 0;
  color: var(--agnes-text-primary);
  font-size: var(--font-size-body);
  line-height: 1.5rem;
  white-space: normal;
}

.conversation-markdown.x-markdown-light a::after,
.conversation-markdown.x-markdown-dark a::after {
  content: none;
}

.conversation-markdown.x-markdown-light a:focus-visible,
.conversation-markdown.x-markdown-dark a:focus-visible,
.conversation-markdown .code-copy:focus-visible {
  outline: 2px solid var(--agnes-brand-primary);
  outline-offset: 2px;
}

/* Match the pinned core selector's specificity: the focusable .table-scroll owns overflow
   and the border; the table must use native column layout inside it. */
.conversation-markdown.x-markdown:not(.x-md-disable-all):not(.x-md-disable-table) table:not(pre) {
  display: table;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: visible;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.conversation-markdown .code-block {
  border-radius: var(--radius-md);
  background: var(--agnes-bg-code);
  color: var(--agnes-text-primary);
}

.conversation-markdown .code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--agnes-line-primary);
  color: var(--agnes-text-secondary);
  font-size: var(--font-size-xs);
}

.conversation-markdown .code-copy {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--agnes-brand-primary);
  cursor: pointer;
  font: inherit;
  padding: 0.25rem 0.375rem;
}

.conversation-markdown .code-copy:hover {
  background: var(--agnes-bg-hover);
}

.conversation-markdown pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
}

.conversation-markdown.x-markdown-light pre code,
.conversation-markdown.x-markdown-dark pre code {
  display: block;
  margin: 0;
  /* biome-ignore lint/complexity/noImportantStyles: the pinned theme marks this declaration important. */
  background: transparent !important;
  /* biome-ignore lint/complexity/noImportantStyles: the pinned theme marks this declaration important. */
  color: var(--agnes-text-primary) !important;
  font-size: var(--font-size-sm);
  line-height: 1.5rem;
  white-space: pre;
}

/* React owns fragment lifetimes; the shared skin hook/keyframes remain available to skins. */
.conversation-markdown .message-reveal-fragment {
  animation-duration: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-markdown .message-reveal-fragment {
    animation: none;
  }
}

.conversation-markdown [data-align="left"] {
  text-align: left;
}

.conversation-markdown [data-align="center"] {
  text-align: center;
}

.conversation-markdown [data-align="right"] {
  text-align: right;
}