/*
 * 设计 token —— 所有颜色/间距/圆角均走语义变量，支撑明/暗主题与跟随系统。
 * 见 docs/modules/ui-theming-i18n.md #5 主题系统。
 * 明暗切换只改语义层映射，组件层不改。
 */

:root {
  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei',
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, SFMono-Regular,
    Consolas, 'Courier New', monospace;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* 尺寸 */
  --titlebar-h: 40px;
  --activitybar-w: 52px;
  --statusbar-h: 26px;
  --sidepanel-w: 264px;
  --control-h: 34px; /* 表单单行控件统一高度（input/select/date/time 一致对齐） */

  /* 层级 */
  --z-panel: 10;
  --z-overlay: 100;
  --z-toast: 1000;

  /* ---- 明色主题（默认） ---- */
  --bg: #ffffff;
  --bg-panel: #f7f7f8;
  --bg-elevated: #ffffff;
  --bg-inset: #f0f0f2;
  --bg-hover: rgba(0, 0, 0, 0.045);
  --bg-active: rgba(0, 0, 0, 0.08);
  --bg-selected: rgba(91, 91, 214, 0.12);

  --fg: #1f1f24;
  --fg-muted: #5c5c66;
  --fg-subtle: #8a8a94;

  --border: #e6e6ea;
  --border-strong: #d5d5db;

  --accent: #5b5bd6;
  --accent-hover: #4c4cc4;
  --accent-fg: #ffffff;
  --accent-tint: rgba(91, 91, 214, 0.1);

  /* 对话：用户消息气泡（助手消息无气泡） */
  --chat-user-bubble: #edeffb;

  --success: #2f9e44;
  --warning: #d9860b;
  --danger: #e5484d;
  --info: #3a7bd5;

  --titlebar-bg: #f2f2f4;
  --activitybar-bg: #efeff1;
  --scrollbar: rgba(0, 0, 0, 0.18);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  --diff-add-bg: rgba(47, 158, 68, 0.12);
  --diff-del-bg: rgba(229, 72, 77, 0.1);
  --diff-add-fg: #1a7a30;
  --diff-del-fg: #c23a3f;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #1e1e20;
  --bg-panel: #252528;
  --bg-elevated: #2a2a2e;
  --bg-inset: #191919;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-selected: rgba(124, 124, 240, 0.2);

  --fg: #e4e4e7;
  --fg-muted: #a1a1aa;
  --fg-subtle: #71717a;

  --border: #2f2f33;
  --border-strong: #3d3d42;

  --accent: #7c7cf0;
  --accent-hover: #9090f5;
  --accent-fg: #14141a;
  --accent-tint: rgba(124, 124, 240, 0.16);

  /* 对话：用户消息气泡（助手消息无气泡） */
  --chat-user-bubble: #303043;

  --success: #51cf66;
  --warning: #fcc419;
  --danger: #ff6b6b;
  --info: #74b3ff;

  --titlebar-bg: #1b1b1d;
  --activitybar-bg: #171718;
  --scrollbar: rgba(255, 255, 255, 0.16);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  --diff-add-bg: rgba(81, 207, 102, 0.14);
  --diff-del-bg: rgba(255, 107, 107, 0.14);
  --diff-add-fg: #7ee094;
  --diff-del-fg: #ff9d9d;

  color-scheme: dark;
}
/*
 * 全局样式：reset + 应用骨架布局 + 通用组件类。
 * 布局参考 docs/modules/ui-theming-i18n.md 与 Codex/IDEA 混合方案：
 * 顶部 TitleBar / 左侧 ActivityBar / 可折叠 SidePanel / 中央工作区 / 底部 Panel / 状态栏。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  user-select: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
  font-size: inherit;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-subtle);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============ 应用骨架 ============ */
.app-shell {
  display: grid;
  grid-template-rows: var(--titlebar-h) 1fr var(--statusbar-h);
  /* 单列锁 minmax(0,1fr)：列宽恒等于视口，不被某行内容（如项目多时的 tab 条）撑宽 */
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.app-body {
  display: grid;
  grid-template-columns: var(--activitybar-w) auto 1fr;
  min-height: 0;
  overflow: hidden;
}

/* ---------- TitleBar ---------- */
/* 左右分区：brand + 项目 tab 条（可收缩·内部滚动）占左，spacer 撑开（保留拖拽），
 * actions 固定在右永不被挤。min-width:0 让本行作为 grid 项能缩到列宽而非被内容撑爆。
 * 注意：不能给 .titlebar 加 overflow:hidden——会裁掉 `⌄` 落在标题栏下方的溢出菜单。 */
.titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 0 var(--space-3);
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}
.titlebar__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.titlebar__logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.titlebar__workspace {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  -webkit-app-region: no-drag;
}
.titlebar__workspace:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.titlebar__spacer {
  flex: 1;
}
.titlebar__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-1);
  -webkit-app-region: no-drag;
}

/* ---------- 通用图标按钮 ---------- */
.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.icon-btn.is-active {
  background: var(--accent-tint);
  color: var(--accent);
}
.icon-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* ---------- ActivityBar ---------- */
.activitybar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  background: var(--activitybar-bg);
  border-right: 1px solid var(--border);
}
.activitybar__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-muted);
}
.activitybar__item:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.activitybar__item.is-active {
  color: var(--accent);
  background: var(--accent-tint);
}
.activitybar__item.is-active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.activitybar__spacer {
  flex: 1;
}

/* ---------- SidePanel ---------- */
.sidepanel {
  display: flex;
  flex-direction: column;
  width: var(--sidepanel-w);
  min-width: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sidepanel.is-collapsed {
  width: 0;
  border-right: none;
}
.sidepanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 var(--space-2) 0 var(--space-4);
  flex-shrink: 0;
}
.sidepanel__head-left {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sidepanel__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.sidepanel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-2) var(--space-3);
}

/* 列表项（文件树 / git / 通用） */
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  white-space: nowrap;
}
.list-row:hover {
  background: var(--bg-hover);
}
.list-row.is-selected {
  background: var(--bg-selected);
}
.list-row__icon {
  flex-shrink: 0;
  color: var(--fg-subtle);
  display: grid;
  place-items: center;
}
.list-row__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 会话活动态角标：生成中=脉冲点，待处理=醒目「!」。位于标题与时间之间，不随悬停隐藏。 */
.list-row__status {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.list-row__status.is-streaming {
  border-radius: 50%;
  /* 用 box-shadow 画一个 7px 实心圆点，避免额外的伪元素/子节点。 */
  box-shadow: inset 0 0 0 3.5px var(--accent);
  animation: deva-pulse 1.2s ease-in-out infinite;
}
.list-row__status.is-attention {
  color: var(--warning);
}
.list-row__meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--fg-subtle);
}
/* 行内操作（删除等），悬停浮现，覆盖 meta 位置避免抖动 */
.list-row__action {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.list-row:hover .list-row__action {
  opacity: 1;
}
.list-row:hover .list-row__meta {
  opacity: 0;
}
.list-row__action:hover {
  color: var(--danger);
  background: var(--bg-hover);
}
.list-row__action:disabled {
  opacity: 0;
  pointer-events: none;
}
/* 侧栏空态提示 */
.sidepanel__empty {
  padding: var(--space-3) var(--space-2);
  color: var(--fg-subtle);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

/* ---------- 中央工作区 ---------- */
.workarea {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.workarea__main {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- BottomPanel ---------- */
.bottompanel {
  display: flex;
  flex-direction: column;
  height: 240px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
}
.bottompanel.is-collapsed {
  height: 0;
  border-top: none;
}
.bottompanel__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 34px;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bottompanel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---------- 集成终端：多页签头部 ---------- */
/* 页签条：横向滚动、隐藏滚动条，避免多开时挤压右侧操作区。 */
.termtabs {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.termtabs::-webkit-scrollbar {
  display: none;
}
.termtab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  max-width: 180px;
  padding: 0 var(--space-1) 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.termtab:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.termtab.is-active {
  background: var(--bg-active);
  color: var(--fg);
}
.termtab__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.termtab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0;
  cursor: pointer;
}
.termtab:hover .termtab__close,
.termtab.is-active .termtab__close {
  opacity: 0.75;
}
.termtab__close:hover {
  background: var(--bg-hover);
  opacity: 1;
}
.term-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.term-newmenu {
  position: relative;
  display: inline-flex;
}
.term-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated, var(--bg-panel));
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.35));
}
.term-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 28px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.term-menu__item:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* ---------- 集成终端：实例容器（去黑边） ---------- */
/* 每个页签一个实例：绝对铺满 body；背景由组件按主题内联为 xterm 底色，
   FitAddon 取整后的残余空隙与 xterm 同色，不再露出异色黑边。 */
.term-instance {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding-left: 6px;
}
.term-instance.is-hidden {
  display: none;
}
.term-instance .xterm {
  height: 100%;
}
/* xterm.css 硬编码 .xterm-viewport { background:#000 }，会在 FitAddon 取整后的
   底部残余行处透出黑边。强制透明，让 .term-instance 的内联 xterm 底色透上来。 */
.term-instance .xterm-viewport {
  overflow-y: auto;
  background-color: transparent !important;
}
.term-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: transparent;
  border: none;
}
.tab:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.tab.is-active {
  background: var(--bg-active);
  color: var(--fg);
}

/* ---------- StatusBar ---------- */
.statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-3);
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}
.statusbar__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  height: 100%;
}
.statusbar__item.is-clickable:hover {
  color: var(--fg);
  cursor: pointer;
}
.statusbar__item.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.statusbar__spacer {
  flex: 1;
}
.statusbar__accent {
  color: var(--accent);
}

/* ============ Chat（Codex 风格中心区） ============ */
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.chat__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.chat__thread {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* 底部工作状态指示器：随对话流滚动，仅流式期间出现 */
.chat__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: calc(var(--space-2) * -1);
  font-size: 13px;
  color: var(--fg-muted);
  user-select: none;
}
.chat__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: deva-pulse 1.2s ease-in-out infinite;
}
.chat__status-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.chat__status.is-waiting {
  color: var(--fg-muted);
}
.chat__status.is-reconnecting {
  color: var(--warning);
}
.chat__status-stop {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chat__status-stop:hover {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}
@keyframes deva-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
/* DeepSeek 风：无头像、无名称；用户消息靠右且带底色气泡，助手消息靠左通栏无气泡 */
.msg {
  display: flex;
  flex-direction: column;
}
.msg--user {
  align-items: flex-end;
}
.msg--agent {
  align-items: stretch;
}
/* 用户气泡 */
.bubble--user {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-sm);
  background: var(--chat-user-bubble);
  color: var(--fg);
}
/* 助手内容（通栏） */
.msg__content {
  width: 100%;
  min-width: 0;
}
.msg__text {
  user-select: text;
  color: var(--fg);
}
.msg__text p {
  margin: 0 0 var(--space-2);
}
.msg__text p:last-child {
  margin-bottom: 0;
}
/* ===== 助手 Markdown 正文（GFM）===== */
.md {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.md > :first-child {
  margin-top: 0;
}
.md > :last-child {
  margin-bottom: 0;
}
.md p {
  margin: 0 0 var(--space-3);
}
.md ul,
.md ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.5em;
}
.md li {
  margin: 2px 0;
}
.md li > ul,
.md li > ol {
  margin: 2px 0;
}
.md li::marker {
  color: var(--fg-subtle);
}
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 650;
  line-height: 1.3;
}
.md h1 {
  font-size: 1.5em;
}
.md h2 {
  font-size: 1.3em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--border);
}
.md h3 {
  font-size: 1.15em;
}
.md h4 {
  font-size: 1em;
}
.md h5,
.md h6 {
  font-size: 0.9em;
  color: var(--fg-muted);
}
.md a {
  color: var(--accent);
  text-decoration: none;
}
.md a:hover {
  text-decoration: underline;
}
.md strong {
  font-weight: 650;
}
.md blockquote {
  margin: 0 0 var(--space-3);
  padding: 2px 0 2px var(--space-3);
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
}
.md blockquote > :last-child {
  margin-bottom: 0;
}
.md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}
.md img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
/* GFM 表格：横向可滚，不撑破通栏 */
.md table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: 13px;
}
.md th,
.md td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.md th {
  background: var(--bg-panel);
  font-weight: 600;
}
.md tbody tr:nth-child(even) td {
  background: var(--bg-hover);
}
/* GFM 任务列表 */
.md input[type='checkbox'] {
  margin-right: 6px;
  vertical-align: middle;
}
.md li:has(> input[type='checkbox']) {
  list-style: none;
  margin-left: -1.2em;
}
/* 行内代码 */
.md-inline {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  word-break: break-all;
}
/* 思考块弱化配色 */
.md--muted,
.md--muted .md-inline {
  color: var(--fg-subtle);
}

/* ===== 代码块：DeepSeek 式「语言名 + 复制」头部 ===== */
.md-code {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
  overflow: hidden;
}
.md-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px var(--space-3);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.md-code__lang {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.md-code__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.md-code__copy:hover {
  color: var(--fg);
  background: var(--bg-hover);
}
.md-code__body {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
}
.md-code__body code {
  font-family: inherit;
  background: none;
  padding: 0;
  border: none;
  white-space: pre;
}

/* ===== highlight.js 语法着色（VS Code 调色板；明/暗随主题）===== */
/* 明色（Light+） */
.md-code .hljs-comment,
.md-code .hljs-quote {
  color: #008000;
  font-style: italic;
}
.md-code .hljs-keyword,
.md-code .hljs-selector-tag,
.md-code .hljs-doctag,
.md-code .hljs-section,
.md-code .hljs-meta .hljs-keyword {
  color: #0000ff;
}
.md-code .hljs-string,
.md-code .hljs-regexp,
.md-code .hljs-char,
.md-code .hljs-meta .hljs-string {
  color: #a31515;
}
.md-code .hljs-number,
.md-code .hljs-literal {
  color: #098658;
}
.md-code .hljs-title,
.md-code .hljs-title.function_,
.md-code .hljs-function .hljs-title {
  color: #795e26;
}
.md-code .hljs-title.class_,
.md-code .hljs-class .hljs-title,
.md-code .hljs-type,
.md-code .hljs-built_in {
  color: #267f99;
}
.md-code .hljs-attr,
.md-code .hljs-attribute,
.md-code .hljs-variable,
.md-code .hljs-template-variable,
.md-code .hljs-property {
  color: #001080;
}
.md-code .hljs-selector-id,
.md-code .hljs-selector-class,
.md-code .hljs-selector-attr,
.md-code .hljs-selector-pseudo,
.md-code .hljs-tag,
.md-code .hljs-name {
  color: #800000;
}
.md-code .hljs-symbol,
.md-code .hljs-bullet,
.md-code .hljs-link,
.md-code .hljs-meta {
  color: #0070c1;
}
.md-code .hljs-deletion {
  color: #a31515;
}
.md-code .hljs-addition {
  color: #098658;
}
.md-code .hljs-emphasis {
  font-style: italic;
}
.md-code .hljs-strong {
  font-weight: 600;
}
/* 暗色（Dark+）：覆盖上面明色 */
:root[data-theme='dark'] .md-code .hljs-comment,
:root[data-theme='dark'] .md-code .hljs-quote {
  color: #6a9955;
}
:root[data-theme='dark'] .md-code .hljs-keyword,
:root[data-theme='dark'] .md-code .hljs-selector-tag,
:root[data-theme='dark'] .md-code .hljs-doctag,
:root[data-theme='dark'] .md-code .hljs-section,
:root[data-theme='dark'] .md-code .hljs-meta .hljs-keyword {
  color: #569cd6;
}
:root[data-theme='dark'] .md-code .hljs-string,
:root[data-theme='dark'] .md-code .hljs-regexp,
:root[data-theme='dark'] .md-code .hljs-char,
:root[data-theme='dark'] .md-code .hljs-meta .hljs-string {
  color: #ce9178;
}
:root[data-theme='dark'] .md-code .hljs-number,
:root[data-theme='dark'] .md-code .hljs-literal {
  color: #b5cea8;
}
:root[data-theme='dark'] .md-code .hljs-title,
:root[data-theme='dark'] .md-code .hljs-title.function_,
:root[data-theme='dark'] .md-code .hljs-function .hljs-title {
  color: #dcdcaa;
}
:root[data-theme='dark'] .md-code .hljs-title.class_,
:root[data-theme='dark'] .md-code .hljs-class .hljs-title,
:root[data-theme='dark'] .md-code .hljs-type,
:root[data-theme='dark'] .md-code .hljs-built_in {
  color: #4ec9b0;
}
:root[data-theme='dark'] .md-code .hljs-attr,
:root[data-theme='dark'] .md-code .hljs-attribute,
:root[data-theme='dark'] .md-code .hljs-variable,
:root[data-theme='dark'] .md-code .hljs-template-variable,
:root[data-theme='dark'] .md-code .hljs-property {
  color: #9cdcfe;
}
:root[data-theme='dark'] .md-code .hljs-selector-id,
:root[data-theme='dark'] .md-code .hljs-selector-class,
:root[data-theme='dark'] .md-code .hljs-selector-attr,
:root[data-theme='dark'] .md-code .hljs-selector-pseudo,
:root[data-theme='dark'] .md-code .hljs-tag,
:root[data-theme='dark'] .md-code .hljs-name {
  color: #569cd6;
}
:root[data-theme='dark'] .md-code .hljs-symbol,
:root[data-theme='dark'] .md-code .hljs-bullet,
:root[data-theme='dark'] .md-code .hljs-link,
:root[data-theme='dark'] .md-code .hljs-meta {
  color: #d7ba7d;
}
:root[data-theme='dark'] .md-code .hljs-deletion {
  color: #ce9178;
}
:root[data-theme='dark'] .md-code .hljs-addition {
  color: #b5cea8;
}

/* 工具调用卡片 */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  margin-top: var(--space-2);
}
.card__head {
  display: flex;
  /* 标题恒为单行（见 .card__title），图标 / 标题 / 徽标居中对齐即可 */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.card__head-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
  height: 1.5em;
}
.card__title {
  font-weight: 600;
  /* 单行不换行，超出以省略号截断（完整参数见悬停 title）；min-width:0 令其可收缩、不挤走徽标 */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__title code {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  font-weight: 400;
}
.card__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  /* 徽标不被压缩、"退出码 N" 不换行，稳定停在首行右上角 */
  flex-shrink: 0;
  white-space: nowrap;
}
.badge--ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.badge--pending {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.card__body {
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  user-select: text;
  overflow-x: auto;
}

/* 子智能体折叠 Task 卡：整段收成一张可展开卡，默认只显结论，内部工具序列纳于其中 */
.subagent {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  margin-top: var(--space-2);
}
.subagent__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-panel);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--fg);
}
.subagent.is-open .subagent__head {
  border-bottom-color: var(--border);
}
/* 卡头一行：折叠按钮占满，后台运行中的子智能体右侧另有停止键（不能嵌在折叠按钮里）。 */
.subagent__headrow {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
}
.subagent__headrow .subagent__head {
  flex: 1;
  min-width: 0;
}
.subagent.is-open .subagent__headrow {
  border-bottom: 1px solid var(--border);
}
.subagent.is-open .subagent__headrow .subagent__head {
  border-bottom-color: transparent;
}
.subagent__bg {
  flex: none;
  font-weight: 500;
  font-size: 11px;
  color: var(--accent);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-inset);
}
.subagent__stop {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: var(--space-2);
  padding: 2px var(--space-2);
  font-size: 12px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.subagent__stop:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
}
.subagent__stop:disabled {
  opacity: 0.5;
  cursor: default;
}
.subagent__head:hover {
  background: var(--bg-hover);
}
.subagent__caret {
  flex: none;
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}
.subagent.is-open .subagent__caret {
  transform: rotate(90deg);
}
.subagent__head-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  flex: none;
}
.subagent__title {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  /* 单行不换行：描述过长时省略号截断，步数徽标不收缩 */
  overflow: hidden;
  white-space: nowrap;
}
.subagent__title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subagent__count {
  flex: none;
}
.subagent__title strong {
  font-weight: 600;
}
.subagent__count {
  font-weight: 500;
  font-size: 11px;
  color: var(--fg-subtle);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-inset);
}
.subagent__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.subagent__task {
  display: flex;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.subagent__task-label {
  flex: none;
  font-weight: 600;
  color: var(--fg-subtle);
}
.subagent__task-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.subagent__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.subagent__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  font-size: 12px;
}
.subagent__step-icon {
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  flex: none;
}
.subagent__step-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subagent__step-title code {
  font-family: var(--font-mono);
  color: var(--fg-muted);
}
/* 连续工具调用折叠卡：外壳复用 .subagent（边框 / 头部悬停 / 箭头旋转 / 步骤行），只补单行标题 */
.toolgroup__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.toolgroup__title code {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  font-weight: 400;
}
.toolgroup__sep {
  margin: 0 var(--space-1);
  color: var(--fg-subtle);
}
.subagent__empty {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* 待办清单条目（「已完成清单」卡与输入框上方的清单面板共用）：已完成打勾划线、进行中高亮、待办空心圈。 */
.todo-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg);
}
.todo-item__mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
}
.todo-item.is-in_progress .todo-item__mark {
  color: var(--accent);
}
.todo-item.is-completed .todo-item__mark {
  width: 13px;
  height: 13px;
  margin: 3px 1px 0;
  border-radius: var(--radius-full);
  background: var(--success);
  color: #fff;
}
.todo-item__text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.todo-item.is-in_progress .todo-item__text {
  font-weight: 600;
}
.todo-item.is-completed .todo-item__text {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--fg-muted) 60%, transparent);
}
/* 已完成清单卡：复用子智能体折叠卡的骨架，标题图标改用完成色。 */
.todocard .subagent__head-icon {
  color: var(--success);
}

/* 交付卡（present_files）：成品文件逐行列出——缩略图 + 文件名 / 大小·目录 + 打开 / 在文件夹中显示 / 复制路径。
   点标题收起整张卡（默认展开），收起时标题后带「首个文件名 等 N 个文件」。 */
.deliv__head {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  font: inherit;
  font-size: 12px;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.deliv.is-open .deliv__head {
  border-bottom-color: var(--border);
}
.deliv__caret {
  flex: none;
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}
.deliv.is-open .deliv__caret {
  transform: rotate(90deg);
}
.deliv__summary {
  font-weight: 400;
  color: var(--fg-muted);
}
.deliv__count {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--fg-muted);
  font-size: 11px;
}
.deliv__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.deliv__item + .deliv__item {
  border-top: 1px solid var(--border);
}
.deliv__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.deliv__main:disabled {
  cursor: default;
}
.deliv__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.deliv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.deliv__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.deliv__name,
.deliv__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deliv__name {
  font-size: 13px;
  font-weight: 600;
}
.deliv__main:not(:disabled):hover .deliv__name {
  color: var(--accent);
}
.deliv__sub {
  font-size: 11.5px;
  color: var(--fg-muted);
}
.deliv__item.is-missing .deliv__name {
  color: var(--fg-muted);
}
.deliv__item.is-missing .deliv__thumb {
  opacity: 0.5;
}
.deliv__actions {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
}
.deliv__act {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.deliv__act:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.deliv__act:disabled {
  opacity: 0.4;
  cursor: default;
}
.deliv__more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.deliv__more:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

/* 角色名片（propose_agent 提议）：微信名片式紧凑卡。pending 可点，accepted/rejected 终态弱化。 */
.agentcard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-top: var(--space-2);
  max-width: 360px;
}
.agentcard.is-clickable {
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.agentcard.is-clickable:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.agentcard.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.agentcard--accepted,
.agentcard--rejected {
  opacity: 0.7;
}
/* 名片头像：圆形裁剪 Humation SVG，::after 补一圈身份主题色描边环。 */
.agentcard__avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-inset, rgba(0, 0, 0, 0.04));
}
.agentcard__avatar > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.agentcard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.agentcard__title {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
}
.agentcard__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentcard__desc {
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentcard__hint {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
}
.agentcard__hint.is-accepted {
  color: var(--success);
}
.agentcard__hint.is-rejected {
  color: var(--fg-subtle);
}

/* diff 卡片 */
.diff__line {
  display: flex;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 0 var(--space-2);
}
.diff__line.add {
  background: var(--diff-add-bg);
  color: var(--diff-add-fg);
}
.diff__line.del {
  background: var(--diff-del-bg);
  color: var(--diff-del-fg);
}
.diff__gutter {
  width: 22px;
  flex-shrink: 0;
  color: var(--fg-subtle);
  user-select: none;
}

/* 权限确认卡片 */
.permission {
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.permission__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.permission__head-icon {
  color: var(--warning);
  display: grid;
  place-items: center;
}
/* 权限请求来自子智能体时的来源标签（照常浮出确认，仅附标签） */
.permission__from {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-subtle);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-inset);
}
.permission__desc {
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
.permission__desc code {
  font-family: var(--font-mono);
  color: var(--fg);
}
.permission__actions {
  display: flex;
  gap: var(--space-2);
}
/* 项目外访问：加重告警观感，并让完整绝对路径可换行、不撑破卡片。 */
.permission--outside {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-elevated));
}
.permission__warn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--warning);
  font-size: 12px;
  margin-bottom: var(--space-2);
}
.permission--outside .permission__desc code {
  word-break: break-all;
}

/* 决策/澄清问答卡（ask_user）：以 accent 观感区别于权限卡的 warning。 */
.ask {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.ask__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.ask__head-icon {
  color: var(--accent);
  display: grid;
  place-items: center;
}
/* 多问：每题一组，题间加分隔线。 */
.ask__q + .ask__q {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.ask__question {
  color: var(--fg);
  margin-bottom: var(--space-3);
  white-space: pre-wrap;
}
.ask__q-num {
  color: var(--accent);
  font-weight: 700;
  margin-right: var(--space-1);
}
/* 分步向导：右上角进度、顶部步骤圆点、底部前后导航。 */
.ask__progress {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}
.ask__steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ask__step-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
}
.ask__step-dot:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.ask__step-dot.is-done {
  border-color: var(--accent);
  color: var(--accent);
}
.ask__step-dot.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.ask__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ask__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
}
.ask__option:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.ask__option.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}
.ask__option-mark {
  flex: none;
  margin-top: 1px;
  color: var(--fg-muted);
}
.ask__option.is-on .ask__option-mark {
  color: var(--accent);
}
.ask__option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ask__option-label {
  font-weight: 500;
}
/* 「推荐」徽标：紧跟在推荐项标签后，弱强调不喧宾夺主。 */
.ask__reco {
  margin-left: var(--space-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  vertical-align: middle;
}
.ask__option-desc {
  font-size: 12px;
  color: var(--fg-muted);
}
/* 可跳过题的说明：告知用户可留空。 */
.ask__optional {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.ask__custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ask__custom-icon {
  flex: none;
  color: var(--fg-muted);
}
.ask__custom-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
}
.ask__custom-input:focus {
  outline: none;
  border-color: var(--accent);
}
.ask__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}
/* 分步向导：上一步靠左、下一步/提交靠右（单题仍用基类的右对齐）。 */
.ask__actions--nav {
  justify-content: space-between;
}
.ask__resolved {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
/* 已答回述的勾：真有答案 → 成功绿（用户确认色）；跳过/未作答 → 灰。 */
.ask__resolved svg {
  color: var(--fg-subtle);
  flex: none;
}
.ask__resolved.is-ok svg {
  color: var(--success);
}
.ask.is-answered {
  background: var(--bg-elevated);
  border-color: var(--border);
}
/* 已答态标题行：可点展开/收起（与计划卡同构）；收起时标题行即末元素，去掉下边距。 */
.ask__head.is-toggle {
  cursor: pointer;
  user-select: none;
}
.ask__head:last-child {
  margin-bottom: 0;
}
.ask.is-answered .ask__head-icon {
  color: var(--fg-muted);
}
.ask__caret {
  flex: none;
  color: var(--fg-muted);
  transition: transform 0.15s ease;
}
.ask__caret.is-open {
  transform: rotate(90deg);
}
.ask__title {
  flex-shrink: 0;
}
.ask__summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 13px;
  color: var(--fg-muted);
}
/* 状态徽标：有实答 → 成功绿（用户确认色）；全部未作答 → 灰。 */
.ask__badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--fg-muted) 12%, transparent);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
}
.ask__badge--ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}

/* 「接入模型」引导卡（无可用模型时显示在对话区）：与问答卡同一套 accent 观感，三步向导。 */
.setup {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
  text-align: left;
}
.setup__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.setup__head-icon {
  color: var(--accent);
  display: grid;
  place-items: center;
}
.setup__progress {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}
.setup__hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
/* 服务商平铺：按可用宽度自动排列。 */
.setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.setup__tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  text-align: left;
}
.setup__tile:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.setup__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}
.setup__tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setup__tile-name {
  font-size: 13px;
  font-weight: 500;
}
.setup__tile-desc {
  font-size: 12px;
  color: var(--fg-muted);
}
.setup__chosen {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.setup__chosen .setup__dot {
  margin-top: 0;
}
.setup__steps {
  margin: 0 0 var(--space-2);
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg);
}
.setup__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.setup__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.setup__field .input {
  flex: none;
  width: 100%;
}
.setup__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}
.setup__err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.6;
}
.setup__err svg {
  flex: none;
  margin-top: 3px;
}
.setup__textbtn {
  padding: 0;
  margin-left: var(--space-2);
  border: none;
  background: none;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.setup__models + .setup__textbtn {
  margin: var(--space-2) 0 0;
}
.setup__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg-muted);
}
.setup__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
}
.setup__models {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.setup__model {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  text-align: left;
  font-size: 13px;
}
.setup__model:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.setup__model svg {
  flex: none;
  color: var(--fg-muted);
}
.setup__model.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}
.setup__model.is-on svg {
  color: var(--accent);
}
.setup__model-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
}
.setup__model .ask__reco {
  margin-left: auto;
}
.setup__empty {
  padding: var(--space-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.setup__manual {
  width: 100%;
}
.setup__actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-weight: 500;
}
.btn:not(:disabled):hover {
  background: var(--bg-hover);
}
/* 禁用态：明显区分（变淡 + 禁用光标 + 关掉悬停反馈），如问答卡未答完时的「提交」。 */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn--primary:not(:disabled):hover {
  background: var(--accent-hover);
}
.btn--sm {
  height: 26px;
  padding: 0 var(--space-2);
  font-size: 12px;
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:not(:disabled):hover {
  background: var(--bg-hover);
}
.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn--danger:not(:disabled):hover {
  background: var(--danger);
  filter: brightness(1.07);
}

/* ---------- 全局对话框（Modal / Confirm / Prompt） ---------- */
@keyframes deva-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes deva-modal-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ---------- 全局 Toast（右上角浮层，知会性反馈，自动消失，非阻断） ----------
   原在右下角会压住对话输入框（发送钮一侧），故移到右上角；top 让到原生窗口控件叠加区
   （Windows titleBarOverlay，min/max/close，高 40px，见 main/index.ts）下方，绝不盖住窗口按钮。
   titlebar-area-height 是 Window Controls Overlay 提供的 env；无叠加区（macOS 红绿灯在左）时回落 --titlebar-h。
   新条目往下堆叠。 */
.toast-layer {
  position: fixed;
  right: var(--space-4);
  top: calc(env(titlebar-area-height, var(--titlebar-h)) + var(--space-2));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 11px 11px 13px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: deva-toast-in 0.18s ease;
}
.toast--default {
  border-left-color: var(--border-strong);
}
.toast--success {
  border-left-color: var(--success, #2f9e44);
}
.toast--warning {
  border-left-color: var(--warning);
}
.toast--error {
  border-left-color: var(--danger);
}
.toast__icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
  color: var(--fg-muted);
}
.toast--success .toast__icon {
  color: var(--success, #2f9e44);
}
.toast--warning .toast__icon {
  color: var(--warning);
}
.toast--error .toast__icon {
  color: var(--danger);
}
.toast__body {
  flex: 1;
  min-width: 0;
}
.toast__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.toast__msg {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  word-break: break-word;
}
.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.toast__close:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
/* 行内操作（如「撤销」）：文字按钮，与关闭钮同高 */
.toast__action {
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.toast__action:hover {
  background: var(--accent-tint);
}
@keyframes deva-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  /* 高于下拉菜单/浮层（--z-overlay=100），低于 toast（--z-toast=1000） */
  z-index: calc(var(--z-overlay) + 200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.42);
  animation: deva-modal-fade 0.12s ease;
}
.modal__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: deva-modal-pop 0.14s ease;
}
.modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.modal__body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
  white-space: pre-wrap;
}
.modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.modal__label {
  font-size: 12px;
  color: var(--fg-muted);
}
/* 覆盖 .input 的 flex:1（其为横向布局设计），使其在纵向卡片里占满宽度 */
.modal__field .input {
  flex: none;
  width: 100%;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* ---------- Chat 输入区 ---------- */
.composer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg);
}
/* 「回到最新」浮标：锚在输入框顶边正上方居中，不受输入框高度变化影响 */
.chat__jump {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--fg-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 5;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.chat__jump:hover {
  color: var(--fg);
  background: var(--bg-hover);
  border-color: var(--accent);
}
.composer__box {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  transition: border-color 0.15s;
}
.composer__box:focus-within {
  border-color: var(--accent);
}
.composer__input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  max-height: 160px;
  min-height: 24px;
  user-select: text;
  padding: var(--space-1) 0;
}
.composer__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.composer__spacer {
  flex: 1;
  min-width: var(--space-2);
}
/* 组合器底部控件（附件 / 权限 / 模型）：Codex 式「幽灵」按钮——默认无边框透明，
 * hover 显浅底，菜单展开时高亮，尾部箭头随开合翻转。视觉更轻、更聚焦发送按钮。 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--fg-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.chip:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.chip.is-open {
  background: var(--bg-active);
  color: var(--fg);
}
.chip:disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* 贴片内需要截断的文本（如过长的模型名）：单行 + 省略号，避免撑破工具条换行。 */
.chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 168px;
}
/* 模型贴片内的服务商品牌色点，呼应当前所选模型的服务商。 */
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* 贴片尾部的下拉箭头恒显、不随文本挤压；展开时翻转 180°。 */
.chip__caret {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.chip.is-open .chip__caret {
  transform: rotate(180deg);
}

/* 附件贴片：输入区待发行 + 用户气泡已发行 */
.composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  height: 24px;
  padding: 0 4px 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 12px;
}
.attach-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-full);
}
.attach-chip__x:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.attach-chip.is-bad {
  border-color: var(--danger);
  color: var(--danger);
}
.attach-chip--sent {
  padding: 0 8px;
  background: transparent;
}
.msg__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.msg__attachments:last-child {
  margin-bottom: 0;
}

/* ---------- Chat：空态 / 思考 / 错误 / 徽标 ---------- */
.chat__empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--fg-subtle);
  padding: var(--space-6);
  text-align: center;
}
.chat__empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin-top: var(--space-2);
}
.chat__empty-hint {
  max-width: 420px;
  color: var(--fg-muted);
}
.msg__think {
  margin-top: var(--space-2);
  border-left: 2px solid var(--border-strong);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.msg__think-head {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  text-align: left;
}
.msg__think-head:hover {
  color: var(--fg);
}
.msg__think-caret {
  flex: none;
  transition: transform 0.15s ease;
}
.msg__think.is-open .msg__think-caret {
  transform: rotate(90deg);
}
.msg__think-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.msg__think-body {
  padding: 0 var(--space-3) var(--space-2);
}
.msg__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--danger, #e5484d) 40%, var(--border));
  background: color-mix(in srgb, var(--danger, #e5484d) 8%, transparent);
  color: var(--danger, #e5484d);
  border-radius: var(--radius);
  font-size: 13px;
}
.badge--err {
  color: var(--danger, #e5484d);
  background: color-mix(in srgb, var(--danger, #e5484d) 14%, transparent);
}
/* 回合终止说明（截断/空回合）：弱化的警示提示，比红色错误更轻。 */
.msg__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--warning, #f5a623) 35%, var(--border));
  background: color-mix(in srgb, var(--warning, #f5a623) 8%, transparent);
  color: var(--fg-muted);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.msg__notice svg {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--warning, #f5a623);
}
/* 待批准计划卡（exit_plan）：以 accent 观感呼应问答卡（.ask），区别于 warning 权限卡。
 * 已决态（is-decided）淡化边框与底色、隐藏操作按钮，仅留计划正文与状态徽标。 */
.msg__plan {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.msg__plan.is-decided {
  border-color: var(--border);
  background: var(--bg-elevated);
}
.msg__plan-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.msg__plan-head svg {
  color: var(--accent);
  flex-shrink: 0;
}
.msg__plan.is-decided .msg__plan-head svg {
  color: var(--fg-muted);
}
/* 已批准：卡片图标随徽标转成功绿（展开箭头不跟着变）。 */
.msg__plan.is-ok .msg__plan-icon {
  color: var(--success);
}
.msg__plan-title {
  color: var(--fg);
  flex-shrink: 0;
}
/* 已决态标题行可点：展开 / 收起计划正文；收起时标题行即卡片末元素，去掉下边距。 */
.msg__plan-head.is-toggle {
  cursor: pointer;
  user-select: none;
}
.msg__plan-head:last-child {
  margin-bottom: 0;
}
.msg__plan-caret {
  transition: transform 0.15s ease;
}
.msg__plan-caret.is-open {
  transform: rotate(90deg);
}
.msg__plan-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 13px;
  color: var(--fg-muted);
}
/* 状态徽标（已批准 / 继续完善）：右对齐、弱化观感。 */
.msg__plan-badge {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
}
/* 已批准：成功绿，与继续完善 / 已取消的灰色区分开。 */
.msg__plan-badge--approved {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
/* 计划正文复用 Markdown 渲染；限制首末元素外边距避免撑高卡片。 */
.msg__plan-body {
  color: var(--fg);
}
.msg__plan-body > :first-child {
  margin-top: 0;
}
.msg__plan-body > :last-child {
  margin-bottom: 0;
}
.msg__plan-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
/* 挂载工作区请求卡：与计划卡同构（accent 观感、is-decided 淡化），正文是纯文本说明而非 Markdown。 */
.msg__mount {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.msg__mount.is-decided {
  border-color: var(--border);
  background: var(--bg-elevated);
}
.msg__mount-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.msg__mount-head svg {
  color: var(--accent);
  flex-shrink: 0;
}
.msg__mount.is-decided .msg__mount-head svg {
  color: var(--fg-muted);
}
/* 已挂载：图标与徽标转成功绿（与计划卡「已批准」同一套用户确认色）；暂不挂载保持灰。 */
.msg__mount.is-ok .msg__mount-head svg {
  color: var(--success);
}
.msg__mount-title {
  color: var(--fg);
}
.msg__mount-badge {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
}
.msg__mount-badge--ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}
.msg__mount-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.6;
}
.msg__mount-body code {
  word-break: break-all;
}
.msg__mount-tool {
  color: var(--fg-muted);
  font-size: 12px;
}
.msg__mount-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.permission__resolved {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.spin {
  animation: deva-spin 0.9s linear infinite;
}
@keyframes deva-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 下拉浮层的入场动画（自触发角缩放淡入）：Codex 式轻快弹出。 */
@keyframes deva-pick-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 模型下拉的浮层外观：圆角卡片 + 细描边 + 柔和投影 + 入场动画。 */
.model-pick__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: 50;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: deva-pick-pop 0.14s ease;
}

/* ---------- Chat：模型选择下拉 ---------- */
.model-pick {
  position: relative;
}
.model-pick__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.model-pick__menu {
  right: 0;
  transform-origin: bottom right;
  /* 菜单宽度按内容自适应（min~max 之间），使最长模型名单行铺开、短名不留空。 */
  min-width: 248px;
  max-width: 360px;
  width: max-content;
  max-height: 340px;
  overflow-y: auto;
}
/* 按服务商分组：组间以细分隔线区隔。 */
.model-pick__group + .model-pick__group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.model-pick__group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 3px;
}
.model-pick__group-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-pick__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--fg);
  background: transparent;
  text-align: left;
  font-size: 13px;
  transition: background 0.1s ease;
}
.model-pick__item:hover {
  background: var(--bg-hover);
}
.model-pick__item.is-active {
  color: var(--accent);
  font-weight: 600;
}
.model-pick__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.model-pick__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-pick__check {
  flex-shrink: 0;
  color: var(--accent);
}
.model-pick__empty {
  padding: 10px 8px;
  color: var(--fg-subtle);
  font-size: 12px;
  text-align: center;
}

/* 尊重系统「减少动态效果」：关闭浮层入场动画。 */
@media (prefers-reduced-motion: reduce) {
  .model-pick__menu {
    animation: none;
  }
}

/* ---------- 设置：密钥状态 / 警告 ---------- */
.key-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
}
.field__warn {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--warning);
}

/* ---------- 空态 / 占位面板 ---------- */
.placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--fg-subtle);
  padding: var(--space-6);
  text-align: center;
}
.placeholder__icon {
  color: var(--fg-subtle);
  opacity: 0.6;
}
.placeholder__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}
.placeholder__hint {
  max-width: 320px;
}

/* ---------- 设置面板 ---------- */
.settings {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  height: 100%;
  user-select: text;
}
.settings__section {
  margin-bottom: var(--space-6);
}
.settings__section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--space-3);
}
.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.settings__row-label {
  font-weight: 500;
}
.settings__row-desc {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* 分段选择器 */
.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  border: 1px solid var(--border);
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-muted);
  font-weight: 500;
}
.segmented__item:hover {
  color: var(--fg);
}
.segmented__item.is-active {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* 下拉（原生 select 皮肤） */
.select {
  height: 30px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
}

/* ============ 顶部项目 tab 条（嵌在标题栏一行内，浏览器式） ============ */
.projtabs {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  -webkit-app-region: no-drag;
}
.projtabs__strip {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.projtabs__strip::-webkit-scrollbar {
  display: none;
}
.projtab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  max-width: 220px;
  height: 100%;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-right: 1px solid var(--border);
  color: var(--fg-muted);
  white-space: nowrap;
}
.projtab:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.projtab.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.projtab__icon {
  flex-shrink: 0;
  color: var(--fg-subtle);
}
.projtab.is-active .projtab__icon {
  color: var(--accent);
}
.projtab__name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.projtab__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-subtle);
  opacity: 0;
}
.projtab:hover .projtab__close,
.projtab.is-active .projtab__close {
  opacity: 1;
}
.projtab__close:hover {
  background: var(--bg-active);
  color: var(--fg);
}
.projtabs__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  padding: 0 var(--space-2);
}
.projtabs__more-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
/* 溢出菜单右对齐并落在标题栏行下方（锚在 tab 条右端的 ⌄ 按钮下）。 */
.projmenu--right {
  top: calc(100% + 4px);
  left: auto;
  right: 0;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
}
.projmenu {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: var(--z-overlay);
  min-width: 280px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
.projmenu__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.projmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
}
.projmenu__item:hover {
  background: var(--bg-hover);
}
.projmenu__item.is-active {
  background: var(--bg-selected);
}
.projmenu__check {
  flex-shrink: 0;
  width: 16px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.projmenu__name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projmenu__branch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--fg-subtle);
}
.projmenu__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-subtle);
  opacity: 0;
}
.projmenu__item:hover .projmenu__close {
  opacity: 1;
}
.projmenu__close:hover {
  background: var(--bg-active);
  color: var(--fg);
}
.projmenu__divider {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--border);
}

/* ============ 中央内容视图通用外壳 ============ */
.contentview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.contentview__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  color: var(--fg-muted);
}
.contentview__path {
  font-size: 12px;
  color: var(--fg-muted);
}
.contentview__path b {
  color: var(--fg);
  font-weight: 600;
}
.contentview__spacer {
  flex: 1;
}
.contentview__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* 段签（Data/Structure 等） */
.subtabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.subtab {
  height: 26px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-weight: 500;
}
.subtab:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.subtab.is-active {
  background: var(--bg-active);
  color: var(--fg);
}

/* ---------- 编辑器（文件内容查看） ---------- */
.editor__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.editor__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: transparent;
  border: none;
}
.editor__tab.is-active {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  user-select: text;
  padding: var(--space-2) 0;
}
.code__line {
  display: flex;
  white-space: pre;
}
.code__line:hover {
  background: var(--bg-hover);
}
.code__num {
  flex-shrink: 0;
  width: 48px;
  padding-right: var(--space-3);
  text-align: right;
  color: var(--fg-subtle);
  user-select: none;
}
.code__text {
  flex: 1;
  padding-right: var(--space-4);
  color: var(--fg);
}

/* ---------- Diff 视图（统一视图） ---------- */
.diffview {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  user-select: text;
  padding: var(--space-2) 0;
}
.diffview__line {
  display: flex;
  white-space: pre;
}
.diffview__line.add {
  background: var(--diff-add-bg);
}
.diffview__line.del {
  background: var(--diff-del-bg);
}
.diffview__no {
  flex-shrink: 0;
  width: 42px;
  padding-right: var(--space-2);
  text-align: right;
  color: var(--fg-subtle);
  user-select: none;
}
.diffview__sign {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  user-select: none;
}
.diffview__line.add .diffview__sign,
.diffview__line.add .diffview__text {
  color: var(--diff-add-fg);
}
.diffview__line.del .diffview__sign,
.diffview__line.del .diffview__text {
  color: var(--diff-del-fg);
}
.diffview__text {
  flex: 1;
  padding-right: var(--space-4);
  color: var(--fg);
}
/* hunk 头（@@ -a,b +c,d @@），弱化底色 + 强调色文本 */
.diffview__line.hunk {
  background: var(--bg-active);
}
.diffview__line.hunk .diffview__sign,
.diffview__line.hunk .diffview__text {
  color: var(--accent);
}

/* ---------- 数据表 ---------- */
.querybar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.querybar__input {
  flex: 1;
  height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  user-select: text;
}
.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  user-select: text;
}
.grid th,
.grid td {
  text-align: left;
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.grid th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  color: var(--fg-muted);
  font-weight: 600;
  z-index: 1;
}
.grid td {
  font-family: var(--font-mono);
  color: var(--fg);
}
.grid tbody tr:hover td,
.grid tbody tr:hover td {
  background: var(--bg-hover);
}
.grid .num {
  color: var(--fg-subtle);
  width: 40px;
}
.tag-key {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-tint);
  color: var(--accent);
}

/* ---------- 终端工作区（整屏，多标签） ---------- */
.termws {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-inset);
}
.termws__tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.termws__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--fg-muted);
}
.termws__tab.is-active {
  background: var(--bg-active);
  color: var(--fg);
}
.termws__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ============ 作用域徽标（全局） ============ */
.scope-badge {
  margin-left: var(--space-2);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--fg-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
}

/* ============ 开关 Switch ============ */
.switch {
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--bg-active);
  position: relative;
  transition: background 0.15s;
}
.switch.is-on {
  background: var(--accent);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch.is-on .switch__knob {
  transform: translateX(16px);
}

/* ============ 输入框 ============ */
.input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input--sm {
  height: 28px;
  font-size: 12px;
}
/* 输入框内嵌右侧图标按钮（如密钥显隐眼睛） */
.input-affix {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.input-affix .input {
  width: 100%;
}
.input--affix-r {
  padding-right: 34px;
}
.input-affix__btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.input-affix__btn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.input-affix__btn:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* ============ Git 源代码管理 ============ */
/* projmenu__item 在 TitleBar 用于 <div>，此处 git 菜单用于 <button>：补按钮复位 */
button.projmenu__item {
  border: none;
  background: transparent;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.projmenu__item:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 更多操作 / 分支菜单：锚定在头部更多按钮下方、右对齐 */
.gitmenu {
  position: absolute;
  top: 28px;
  right: 0;
  z-index: var(--z-overlay);
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

/* 文件行：名后灰路径 + hover 浮现的行内操作 + 常态状态字母 */
.gitrow__dir {
  margin-left: var(--space-2);
  font-size: 11px;
  color: var(--fg-subtle);
}
.gitrow__letter {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  /* 纯装饰标签：hover 时它 opacity:0 会形成层叠上下文并盖在操作按钮上，
     opacity:0 仍会截获点击 → 遮住「+」中心（只剩边缘可点）。故禁用其指针事件。 */
  pointer-events: none;
}
.gitrow__actions {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--space-2);
  opacity: 0;
  background: var(--bg-hover);
  transition: opacity 0.12s;
}
.list-row.is-selected .gitrow__actions {
  background: var(--bg-selected);
}
.list-row:hover .gitrow__actions {
  opacity: 1;
}
.list-row:hover .gitrow__letter {
  opacity: 0;
}
.gitrow__btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
}
.gitrow__btn:hover {
  color: var(--fg);
  background: var(--bg-active);
}
.gitrow__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 更改分组：标题 + 计数徽标 + hover 浮现的组级操作 */
.gitgroup {
  margin-top: var(--space-2);
}
.gitgroup__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 24px;
  padding: 0 var(--space-2);
}
.gitgroup__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.gitgroup__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}
.gitgroup__header:hover .gitgroup__actions {
  opacity: 1;
}
.gitgroup__btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
}
.gitgroup__btn:hover {
  color: var(--fg);
  background: var(--bg-active);
}
.gitgroup__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.gitgroup__count {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bg-active);
  color: var(--fg-subtle);
  font-size: 11px;
}

/* ahead / behind 同步指示 */
.gitsync {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
}
.gitsync__item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--fg-subtle);
}

/* 提交身份内联填写（identity-needed 时出现） */
.gitidentity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.gitidentity__hint {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* 操作结果 / 错误提示（点击可关闭） */
/* 提交输入框 + 悬浮层（进度条 / 错误提示）的定位上下文：让悬浮层脱离文档流、不推动输入框。 */
.gitcommit {
  position: relative;
}

/* AI 生成提交信息：悬浮在提交框右下角的小图标按钮（对标 VS Code 的"生成提交信息"）。 */
.gitgen__btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
}
.gitgen__btn:hover:not(:disabled) {
  color: var(--accent);
  background: var(--bg-active);
}
.gitgen__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 错误提示：绝对悬浮在输入框上（动画下方），遮住输入框；不占布局。数秒后自动消失，点击可立即关闭。 */
.gitnotice {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 6;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.35));
}
.gitnotice--error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, var(--bg-elevated, var(--bg-panel)));
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}

/* 操作进行中的进度条（对标 VS Code 源代码管理）：绝对悬浮在输入框正上方的一条流动细条。
   绝对定位 → 不占布局、不推动输入框，故动画出现/消失时输入框不上下抖动。 */
.gitprogress {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  pointer-events: none;
  z-index: 5;
}
.gitprogress__bit {
  width: 30%;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  will-change: transform;
  animation: deva-git-progress 1.2s ease-in-out infinite;
}
@keyframes deva-git-progress {
  0% {
    transform: translateX(-100%) scaleX(1);
  }
  50% {
    transform: translateX(120%) scaleX(1.6);
  }
  100% {
    transform: translateX(333%) scaleX(1);
  }
}

/* ============ 设置：类别两栏 ============ */
.settings2 {
  display: grid;
  grid-template-columns: 208px 1fr;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.settings2__nav {
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  padding: var(--space-3);
  overflow-y: auto;
}
.settings2__nav-title {
  padding: var(--space-2) var(--space-2) var(--space-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.settings2__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 34px;
  padding: 0 var(--space-3);
  margin-bottom: 2px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
}
.settings2__nav-item:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.settings2__nav-item.is-active {
  background: var(--bg-selected);
  color: var(--accent);
}
.settings2__content {
  min-width: 0;
  overflow-y: auto;
}

/* 普通设置内容页 */
.pane {
  max-width: 720px;
  padding: var(--space-6) var(--space-6);
  user-select: text;
}
.pane__title {
  font-size: 20px;
  margin: 0 0 var(--space-5);
}

/* ============ 模型设置 ============ */
/* 钻取式（主从抽屉）：同一时刻只显示列表或详情，随父容器（.cf-pane / .settings2__content）滚动。
   刻意保持扁平——与通用/扩展页同构，不做「面板套面板」的内嵌背景与侧栏标题。 */
.models {
  display: block;
  min-height: 0;
}

/* —— 列表态 —— */
.models__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.models__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
/* 右上角「添加模型」——图标按钮 + 浮动菜单锚点（对话/决策二选一） */
.models__addwrap {
  position: relative;
  margin-left: auto;
  display: inline-flex;
}
.models__add-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  cursor: pointer;
}
.models__add-btn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
/* 扁平行列表：外框 + 分隔线（对齐扩展页 .cf-rows 观感） */
.models__rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.provider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.provider-row + .provider-row {
  border-top: 1px solid var(--border);
}
.provider-row:hover {
  background: var(--bg-hover);
}
/* 启用状态点：默认灰（未启用），启用后转绿 */
.provider-row__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-subtle);
}
.provider-row__dot.is-on {
  background: var(--success);
}
/* 名称行（名 + 类型徽标）+ 模型数副标题两行堆叠 */
.provider-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.provider-row__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}
.provider-row__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row__sub {
  font-size: 11.5px;
  color: var(--fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row__aside {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-subtle);
}
.provider-row__warn {
  color: var(--warning, #d68a00);
}

/* —— 详情态 —— 内边距/滚动交给父容器（.cf-pane / .settings2__content），避免「面板套面板」 */
.provider-detail {
  min-width: 0;
  user-select: text;
}
/* 详情态顶部工具条：左「返回」，右「删除 + 启用」同一行 */
.provider-detail__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* 详情态顶部「返回」，回到服务商列表 */
.provider-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.provider-detail__back:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.provider-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.provider-detail__name {
  font-size: 18px;
  margin: 0;
}
.provider-detail__spacer {
  flex: 1;
}
.provider-detail__enable {
  font-size: 12px;
  color: var(--fg-muted);
}

.tag {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 600;
}
.tag--official {
  background: var(--accent-tint);
  border-color: transparent;
  color: var(--accent);
}
/* 决策模型标签：紫色调，区别于对话模型（中性）与官方（品牌色） */
.tag--decision {
  background: rgba(109, 94, 252, 0.14);
  border-color: transparent;
  color: #6d5efc;
}

.field {
  max-width: 620px;
  margin-bottom: var(--space-5);
}
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.field__row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.field__hint-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}
.field__hint-link:hover {
  text-decoration: underline;
}
.field__note {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--fg-subtle);
}
.field__kbd {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--fg);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.model-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.model-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.model-list__empty {
  padding: var(--space-4);
  color: var(--fg-subtle);
  font-size: 13px;
  text-align: center;
}
.model-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}
.model-row:last-child {
  border-bottom: none;
}
.model-row__name {
  font-size: 13px;
  font-weight: 500;
}
.model-row__spacer {
  flex: 1;
}
.model-row__act {
  width: 28px;
  height: 28px;
  color: var(--fg-subtle);
}
.model-row__act:hover {
  color: var(--fg);
}
.model-tag {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 10px;
}

/* 服务商详情：可编辑名称 / 删除 / 无钥提醒 */
.provider-detail__name-input {
  /* 随内容自适应宽度（Electron/Chromium 支持 field-sizing），
     使「自定义」标签像官方 h2 一样紧贴名称，两种服务商布局一致 */
  field-sizing: content;
  min-width: 3ch;
  max-width: 260px;
  margin-left: -6px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
}
.provider-detail__name-input:hover {
  border-color: var(--border);
}
/* 名称 + 常驻铅笔：让「可改名」一眼可见；悬停名称区时铅笔转 accent。 */
.provider-detail__name-edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.provider-detail__name-pen {
  color: var(--fg-subtle);
}
.provider-detail__name-edit:hover .provider-detail__name-pen,
.provider-detail__name-input:focus + .provider-detail__name-pen {
  color: var(--accent);
}
.provider-detail__name-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-inset);
}
.provider-detail__del {
  color: var(--fg-subtle);
}
.provider-detail__del:hover {
  color: var(--danger);
}
.provider-row__warn {
  flex-shrink: 0;
  color: var(--warning);
}
.provider-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 620px;
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--warning);
  font-size: 12px;
}

/* 协议下拉 */
.select-input {
  cursor: pointer;
}

/* 添加模型：拉取清单下拉（可搜索 / 手动输入） */
.model-combo {
  margin-bottom: var(--space-3);
}
.model-combo .model-add {
  margin-bottom: var(--space-2);
}
.model-combo__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  color: var(--fg-subtle);
  font-size: 12px;
}
.model-combo__panel {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.model-combo__opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px var(--space-3);
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  text-align: left;
}
.model-combo__opt:last-child {
  border-bottom: none;
}
.model-combo__opt:hover {
  background: var(--bg-hover);
}
.model-combo__opt.is-selected {
  background: var(--accent-tint);
  color: var(--fg);
}
/* 勾选位：固定宽度占位，未选中时保留空位使 id 左缘对齐 */
.model-combo__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  color: var(--accent);
}
.model-combo__opt-id {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 全选 / 已选计数条 */
.model-combo__bar {
  display: flex;
  align-items: center;
  padding: 4px 2px 6px;
}
.model-combo__count {
  color: var(--fg-subtle);
  font-size: 12px;
}
.model-combo__spacer {
  flex: 1 1 auto;
}
.model-combo__link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.model-combo__link:hover {
  text-decoration: underline;
}

/* 图标旋转（测试 / 拉取中） */
.icon-spin {
  animation: deva-spin 0.8s linear infinite;
}
@keyframes deva-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============ 扩展面板 / 详情 ============ */
.ext-section {
  margin-bottom: var(--space-3);
}
.ext-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-2) 4px var(--space-4);
}
.icon-btn--sm {
  width: 24px;
  height: 24px;
}
@keyframes ext-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* 详情头图标：去掉着色底盒，改扁平强调色描线（Codex 味：低装饰） */
.ext-detail__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.textarea {
  width: 100%;
  max-width: 620px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.6;
  resize: vertical;
}
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ext-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ext-tools--empty {
  color: var(--fg-subtle);
  font-size: 13px;
}

/* ---------- 技能：只读结构化详情（去表单后） ---------- */
.ext-detail__text {
  max-width: 620px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.ext-detail__muted {
  color: var(--fg-subtle);
  font-size: 13px;
  font-style: italic;
}
.ext-detail__md {
  max-width: 720px;
  max-height: 420px;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
/* ---------- 子智能体：工具多选筹码 ---------- */
.tool-pick {
  margin-top: var(--space-2);
}
.tool-pick__title {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tool-pick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tool-chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.tool-chip:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}
.tool-chip.is-on {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- MCP 详情：状态行 / 键值编辑 / 工具清单 ---------- */
.mcp-error {
  max-width: 620px;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
}
/* 待处理（待填密钥 / 待完善配置）：警示色弱化，区别于连接失败的红。 */
.mcp-error--warn {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--fg);
}
.field__note--warn {
  color: var(--warning);
}

.kv-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 620px;
}
.kv-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kv-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kv-row__status {
  display: flex;
  padding-left: calc(34% + var(--space-2));
}
.kv-row__status .key-status {
  margin-left: 0;
}
.kv-row__key {
  flex: 0 0 34%;
}
.kv-row__val {
  flex: 1 1 auto;
}
.kv-row__lock.is-on {
  color: var(--accent);
}
.kv-add {
  align-self: flex-start;
}

.mcp-tools {
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 已发现工具：等宽机器名（左）+ 散文描述（右），行间细线，去卡片盒 */
.mcp-tools__item {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.mcp-tools__item:last-child {
  border-bottom: none;
}
.mcp-tools__name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-word;
}
.mcp-tools__desc {
  font-size: 12px;
  color: var(--fg-subtle);
  line-height: 1.5;
}

/* ============ 扩展：Codex 味去表单化排版 ============ */

/* ---------- 侧栏：分组标题 + 安静单行（名字 + 可选 mono 小标 + 克制字形） ---------- */
.ext-section__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ext-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-4);
  cursor: pointer;
  user-select: none;
}
.ext-row:hover {
  background: var(--bg-inset);
}
.ext-row.is-selected {
  background: var(--bg-selected);
}
.ext-row__main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}
.ext-row__name {
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ext-row.is-off .ext-row__name {
  color: var(--fg-subtle);
}
.ext-row__tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.ext-row__glyph {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}
.ext-glyph--on {
  color: var(--accent);
}
.ext-glyph--off {
  color: var(--border-strong);
}
.ext-glyph--error {
  color: var(--danger);
  font-weight: 700;
}
.ext-glyph--connecting {
  color: var(--accent);
  animation: ext-pulse 1.1s ease-in-out infinite;
}

/* ---------- 详情：容器 + 头部（无底线，低装饰） ---------- */
.ext-detail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  user-select: text;
}
/* 提示词字段：吃满详情剩余高度，让文本域随窗口拉高、消除下方留白 */
.ext-field--grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ext-field--grow .ext-area,
.ext-field--grow .ext-detail__md {
  flex: 1 1 auto;
  min-height: 160px;
}
/* 技能指令（只读 Markdown）撑满时解除固定高度上限，改由容器高度约束 + 内部滚动 */
.ext-field--grow .ext-detail__md {
  max-height: none;
}
.ext-detail--empty {
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
  font-size: 13px;
}
.ext-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.ext-detail__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
/* id 型名字（技能 / MCP / 子智能体）走等宽；人名型（提示词）保持无衬线 */
.ext-detail__name--mono {
  font-family: var(--font-mono);
  font-size: 14px;
}
.ext-detail__scope {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ext-detail__spacer {
  flex: 1 1 auto;
}
.ext-detail__enable {
  font-size: 12px;
  color: var(--fg-muted);
}

/* ---------- 字段：小灰标签 + 盒式输入（与模型页 .input 同风格） ---------- */
.ext-field {
  max-width: 620px;
  margin-bottom: var(--space-4);
}
.ext-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ext-field__note {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-subtle);
}
.ext-field__note--warn {
  color: var(--warning);
}

.ext-input {
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-family: var(--font-sans);
}
.ext-input::placeholder {
  color: var(--fg-subtle);
}
.ext-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
/* 机器字段（命令 / 参数 / env / url / headers）走等宽 */
.ext-input--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.ext-area {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.6;
  resize: vertical;
}
.ext-area:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ext-area--mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.ext-select {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
}
.ext-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ext-select--mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- MCP 状态行：单行 mono，动作走文字按钮 ---------- */
.ext-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 620px;
  margin-bottom: var(--space-4);
}
.ext-status__live {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
.ext-status__live--connected {
  color: var(--success);
}
.ext-status__live--connecting {
  color: var(--accent);
}
.ext-status__live--error {
  color: var(--danger);
}
.ext-status__live--disconnected {
  color: var(--fg-subtle);
}
.ext-status__live--needs_config,
.ext-status__live--needs_secret {
  color: var(--warning);
}
.ext-linkbtn {
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.ext-linkbtn:hover {
  text-decoration: underline;
}

/* ---------- 只读工具标签（技能 allowedTools 回显） ---------- */
.ext-tag {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- 资源管理器：空状态 ---------- */
.side-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.side-empty__hint {
  color: var(--fg-subtle);
  font-size: 12px;
}
.btn--soft {
  background: var(--bg-elevated);
}

/* ---------- 编辑器：可编辑文本域 + 标签增强 ---------- */
.editor__area {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  padding: var(--space-3) var(--space-4);
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.editor__dirty {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
  flex-shrink: 0;
}
.editor__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0.55;
}
.editor__tab-close:hover {
  opacity: 1;
  background: var(--bg-hover);
}

/* ---------- 定时任务确认名片（autotaskcard） ---------- */
/* pending：可编辑授权信封（accent 描边，仿 .ask 但更长的表单）。 */
.autotaskcard {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.autotaskcard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.autotaskcard__head-icon {
  color: var(--accent);
  display: grid;
  place-items: center;
}
.autotaskcard__hint {
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.5;
  margin: var(--space-1) 0 var(--space-3);
}
.autotaskcard__field {
  display: block;
  margin-top: var(--space-3);
}
.autotaskcard__field:first-of-type {
  margin-top: 0;
}
.autotaskcard__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
}
/* 单行控件统一：固定高度 + box-sizing 让 input/select/date/time 像素对齐。 */
.autotaskcard__input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: inherit; /* select 默认不继承 body 字体 */
  font-size: 13px;
  line-height: normal; /* 高度已固定，避免 line-height 叠加撑变形 */
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.autotaskcard__textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
/* 下拉：去原生外观，自绘 chevron（中性灰在明/暗主题都可读）。 */
select.autotaskcard__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-3) + 14px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  cursor: pointer;
}
/* 日期/时间：保留原生选择器，仅让内置图标随主题着色、可点。 */
.autotaskcard__input[type='date'],
.autotaskcard__input[type='time'] {
  cursor: pointer;
}
.autotaskcard__input[type='date']::-webkit-calendar-picker-indicator,
.autotaskcard__input[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.autotaskcard__input[type='date']:hover::-webkit-calendar-picker-indicator,
.autotaskcard__input[type='time']:hover::-webkit-calendar-picker-indicator {
  opacity: 0.9;
}
:root[data-theme='dark'] .autotaskcard__input[type='date']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] .autotaskcard__input[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(1); /* 原生图标本是深色，暗色主题下反相以可见 */
}
.autotaskcard__input:hover,
.autotaskcard__textarea:hover {
  border-color: var(--fg-subtle);
}
.autotaskcard__input:focus,
.autotaskcard__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.autotaskcard__input + .autotaskcard__input,
.autotaskcard select.autotaskcard__input {
  margin-top: var(--space-2);
}
/* ── 日程编辑器（ScheduleEditor：创建名片 + 任务编辑弹窗共用，形态对齐 1.png）──
   一行「模式下拉 + 随模式变化的控件（数字/分钟/第几天/日期/时间/cron）」；
   「每周」另起一行给七枚可多选星期药丸。控件自绘一套，两处宿主观感一致。 */
.sched {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.sched__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sched__ctl {
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: inherit; /* select 默认不继承 body 字体 */
  font-size: 13px;
  line-height: normal; /* 高度已固定，避免 line-height 叠加撑变形 */
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.sched__ctl:hover {
  border-color: var(--fg-subtle);
}
.sched__ctl:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
/* 下拉：去原生外观，自绘 chevron（中性灰在明/暗主题都可读）。 */
select.sched__ctl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-3) + 14px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  cursor: pointer;
}
/* 日期/时间：保留原生选择器，仅让内置图标随主题着色、可点。 */
.sched__ctl[type='date'],
.sched__ctl[type='time'] {
  cursor: pointer;
}
.sched__ctl[type='date']::-webkit-calendar-picker-indicator,
.sched__ctl[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.sched__ctl[type='date']:hover::-webkit-calendar-picker-indicator,
.sched__ctl[type='time']:hover::-webkit-calendar-picker-indicator {
  opacity: 0.9;
}
:root[data-theme='dark'] .sched__ctl[type='date']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] .sched__ctl[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(1); /* 原生图标本是深色，暗色主题下反相以可见 */
}
.sched__mode {
  min-width: 104px;
}
.sched__pick {
  min-width: 76px;
}
.sched__pick--dom {
  min-width: 116px;
}
.sched__num {
  width: 128px;
}
.sched__date {
  min-width: 148px;
}
.sched__time {
  min-width: 118px;
}
.sched__cron {
  flex: 1 1 160px;
  min-width: 160px;
  font-family: var(--font-mono);
}
.sched__unit {
  font-size: 12px;
  color: var(--fg-muted);
}
/* 星期药丸：多选（组件侧恒保留至少一天），选中填主色。 */
.sched__days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sched__day {
  min-width: 54px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.sched__day:hover {
  border-color: var(--fg-subtle);
}
.sched__day.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
/* 日程实时预览条。 */
.autotaskcard__preview {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12px;
  min-height: 28px;
}
.autotaskcard__preview.is-invalid {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}
.autotaskcard__preview-dim {
  color: var(--fg-subtle);
}
.autotaskcard__err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 12px;
}
.autotaskcard__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
/* pending 摘要态：图标 + 三行（标题 / 日程·下次·角色·模型 / 指令单行省略）+ 右侧操作。 */
.autotaskcard--summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.autotaskcard--summary .autotaskcard__head-icon {
  margin-top: 2px;
  flex-shrink: 0;
}
.autotaskcard__sum-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.autotaskcard__sum-title {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autotaskcard__sum-meta {
  color: var(--accent);
  font-size: 12px;
}
.autotaskcard__sum-prompt {
  color: var(--fg-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.autotaskcard__sum-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.autotaskcard__sum-side .autotaskcard__actions {
  margin-top: 0;
}
.autotaskcard__collapse {
  margin-left: auto;
  font-weight: 400;
}
/* created / dismissed：紧凑终态行（编辑器已卸载）。 */
.autotaskcard--created,
.autotaskcard--dismissed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.autotaskcard--dismissed {
  border-color: var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
}
.autotaskcard__icon {
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.autotaskcard--dismissed .autotaskcard__icon {
  color: var(--fg-subtle);
}
/* 已创建（用户批准）：与其它已决卡一样淡化底框，图标与「已创建」勾转成功绿。 */
.autotaskcard--created {
  border-color: var(--border);
  background: var(--bg-elevated);
}
.autotaskcard--created .autotaskcard__icon,
.autotaskcard--created .autotaskcard__done-title svg {
  color: var(--success);
}
.autotaskcard__done-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.autotaskcard__done-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
}
.autotaskcard__done-sub {
  color: var(--fg-muted);
  font-size: 12px;
}
.autotaskcard__done-text {
  font-size: 13px;
}
/*
 * 「对话优先」外壳原型样式（IM 式单人对话版）。
 * 全部复用 tokens.css 的语义变量，自动跟随明/暗主题。
 * 类名统一 cf- 前缀（conversation-first），与 app.css 完全隔离。
 */

.cf-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  overflow: hidden;
  /* 右侧主界面统一内容宽度：对话（消息流 + 输入区）与角色（资料卡）/ 快速开启 / 空态共用同一居中
     列宽，切「消息 ↔ 角色」两个 tab 时内容不再变宽变窄。 */
  --cf-main: 780px;
}

.cf-spacer {
  flex: 1;
}

/* ============================ 主体两列 ============================ */
.cf-body {
  position: relative; /* 侧栏拖拽手柄的定位锚 */
  display: grid;
  /* 首列图标栏宽由 --cf-rail-w 驱动（macOS 红绿灯可见时加宽，见 resizable.tsx ICONRAIL_W_MAC）；
     第二列（对话面板）宽由 --cf-side 驱动：可拖动，JS 侧已按上下限与窗口宽夹取。 */
  grid-template-columns: var(--cf-rail-w, 56px) var(--cf-side, 300px) minmax(0, 1fr);
  min-height: 0;
}

/* ---------------------------- 拖拽调整尺寸手柄 ---------------------------- */
/* 透明热区压在分隔线上（比线宽，好抓）；悬停/拖动时显一条强调色细线作反馈。 */
.cf-resizer {
  position: absolute;
  z-index: 20;
  -webkit-app-region: no-drag; /* 图标栏/头部是窗口拖拽区，手柄必须排除，否则按下即拖窗口 */
  touch-action: none;
}
.cf-resizer::after {
  content: '';
  position: absolute;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.12s;
}
.cf-resizer:hover::after,
.cf-resizer.is-active::after {
  opacity: 1;
}
/* 侧栏：竖向热区，中心对齐面板右边框（left 由内联样式给出面板右缘）。 */
.cf-resizer--x {
  top: 0;
  bottom: 0;
  width: 6px;
  margin-left: -3px;
  cursor: col-resize;
}
.cf-resizer--x::after {
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
}
/* 输入框：横向热区，压在输入框（.cf-box）上边框上。 */
.cf-resizer--y {
  left: 0;
  right: 0;
  top: -3px;
  height: 6px;
  cursor: row-resize;
}
.cf-resizer--y::after {
  left: 0;
  right: 0;
  top: 2px;
  height: 2px;
}
/* 输入框上边框：热区以 1px 边框为中线；左右让开圆角，提示线只落在边框的直线段上。 */
.cf-resizer--y.cf-resizer--box {
  top: -4px;
  left: var(--radius-lg);
  right: var(--radius-lg);
}
.cf-resizer--box::after {
  top: 3px;
}
/* 拖动中：全局光标保持、禁止选中文字（指针移出手柄也不闪回箭头、不误选消息）。 */
body.cf-resizing-x,
body.cf-resizing-x * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.cf-resizing-y,
body.cf-resizing-y * {
  cursor: row-resize !important;
  user-select: none !important;
}

/* ---------------------------- 最左：图标导航栏 ---------------------------- */
.cf-iconrail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  /* 顶部留出更多空隙作窗口拖拽把手（微信式左栏可拖动） */
  padding: var(--space-5) 0 var(--space-3);
  min-height: 0;
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
  -webkit-app-region: drag;
}
/* macOS 红绿灯在左上角：栏顶空出 40px 给它（仍是拖拽区），头像与导航从下方开始排。
   全屏时红绿灯隐藏，不挂 .has-traffic-lights，回到常规间距。 */
.has-traffic-lights .cf-iconrail {
  padding-top: calc(40px + var(--space-1));
}
/* 图标按钮本身不参与拖拽，保证可点击 */
.cf-navbtn {
  -webkit-app-region: no-drag;
}
/* 顶部用户头像：可点，打开个人资料面板；与下方导航之间留白 */
.cf-iconrail__me {
  -webkit-app-region: no-drag;
  margin-bottom: var(--space-2);
  padding: 2px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: box-shadow 0.12s ease;
}
.cf-iconrail__me:hover,
.cf-iconrail__me:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.cf-navbtn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.cf-navbtn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-navbtn.is-active {
  background: var(--bg-active);
  color: var(--accent);
}
/* 选中态左侧强调条 */
.cf-navbtn.is-active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ---------------------------- 左栏：消息 / 角色 ---------------------------- */
.cf-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
}
/* 角色列表：搜索行右侧的「添加角色」图标 */
.cf-rail__addbtn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.cf-rail__addbtn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
/* 「添加角色」悬停弹层：+ 按钮 hover/点击弹出二选一（手动添加 / 通过对话添加）。 */
.cf-addmenu {
  position: relative;
  flex-shrink: 0;
  /* 搜索行整体可拖拽，但「添加角色」入口需保留点击/悬停，故排除出拖拽区。 */
  -webkit-app-region: no-drag;
}
.cf-addmenu__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 172px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: cf-addmenu-pop 0.14s ease;
}
/* 「新建对话」角色列表变体：定宽（长名字 / 专长不撑宽浮层），角色多时限高内滚。 */
.cf-addmenu__pop--scroll {
  width: 248px;
  max-height: min(360px, 60vh);
  overflow-y: auto;
}
/* 角色项：头像 | 名字 / 专长两行，各自单行省略（同花名册行 .cf-prow）。 */
.cf-addmenu__item--persona {
  gap: 10px;
  padding: 6px 8px;
}
.cf-addmenu__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cf-addmenu__name,
.cf-addmenu__desc {
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-addmenu__name {
  font-weight: 600;
}
.cf-addmenu__desc {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--fg-muted);
}
/* 宽度自适应变体：贴合内容宽度（配合项 white-space:nowrap），不再固定最小宽度。 */
.cf-addmenu__pop--fit {
  min-width: 0;
  width: max-content;
}
@keyframes cf-addmenu-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cf-addmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 9px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.cf-addmenu__item:hover {
  background: var(--bg-hover);
}
.cf-addmenu__icon {
  flex-shrink: 0;
  color: var(--fg-muted);
}
.cf-addmenu__item:hover .cf-addmenu__icon {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .cf-addmenu__pop {
    animation: none;
  }
}

/* 列表行右键菜单：光标处浮出的小菜单 + 全屏透明背板（点击/右键空白关闭）；破坏项红色。 */
.cf-ctx__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.cf-ctx {
  position: fixed;
  z-index: 71;
  min-width: 148px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: cf-addmenu-pop 0.14s ease;
}
.cf-ctx__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 9px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.cf-ctx__item:not(:disabled):hover {
  background: var(--bg-hover);
}
.cf-ctx__item.is-danger {
  color: var(--danger);
}
.cf-ctx__item.is-danger:not(:disabled):hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
/* 分支多时面板限高可滚；长分支名省略。 */
.cf-ctx {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.cf-ctx__item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.cf-ctx__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
.cf-ctx__section {
  padding: 6px 9px 3px;
  color: var(--fg-subtle);
  font-size: 11px;
  cursor: default;
  user-select: none;
}
.cf-ctx__filter {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  outline: none;
}
.cf-ctx__filter:focus {
  border-color: var(--accent);
}
/* 禁用项（如系统默认角色的删除）：明显变淡 + 禁用光标 + 关掉悬停反馈。 */
.cf-ctx__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .cf-ctx {
    animation: none;
  }
}
/* 顶部：搜索占满一行，消息 / 角色 tab 再并排「新建对话」/「添加」图标。
   整行兼作左栏的窗口拖拽把手（补上非对话界面缺失的顶部拖拽区）；其中的交互控件另置 no-drag。 */
.cf-rail__top {
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  -webkit-app-region: drag;
}
.cf-search {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 顶栏是窗口拖拽区，输入框须显式取消拖拽，否则无法聚焦/选词。 */
  -webkit-app-region: no-drag;
}
.cf-search:focus-within {
  border-color: var(--border-strong);
}
.cf-search__icon {
  flex-shrink: 0;
  color: var(--fg-subtle);
}
.cf-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  outline: none;
}
.cf-search__input::placeholder {
  color: var(--fg-subtle);
}
.cf-search__clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
}
.cf-search__clear:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* 列表区（消息或角色共用滚动容器） */
.cf-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-2) var(--space-2);
}

/* 对话行 */
.cf-thread {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.cf-thread:hover {
  background: var(--bg-hover);
}
.cf-thread.is-active {
  background: var(--bg-selected);
}
.cf-thread__main {
  min-width: 0;
}
.cf-thread__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* 上行：对话标题。主色号 + 加粗，作为主视觉（醒目显示对话内容）；过长省略，时间不被挤走。 */
.cf-thread__title {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-thread__time {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--fg-subtle);
}
/* 下行：角色名。副色号 + 常规字重，作为次要行。 */
.cf-thread__owner {
  margin-top: 2px;
  font-size: 11px;
  color: var(--fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 角色行（与对话行同构：头像 | 名称/专长/标签） */
.cf-prow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.cf-prow:hover {
  background: var(--bg-hover);
}
.cf-prow.is-active {
  background: var(--bg-selected);
}
/* 花名册手动排序：整行可拖动重排（主操作仍是点击打开资料，故静息光标不变）；拖动中淡化并转抓握光标；
   落点行按插入边（上/下半区）画一条指示线。 */
.cf-prow.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.cf-prow.drop-before {
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.cf-prow.drop-after {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.cf-prow__main {
  min-width: 0;
}
/* 角色名过长单行省略（同下方专长），否则长串会撑出左栏横向滚动条。 */
.cf-prow__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-prow__spec {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 头像 —— 外层 .cf-ava 作定位框，内层 .cf-ava__face 圆形裁剪头像本体。
   刻意无描边：头像即一枚圆形图，不再有身份色环。 */
.cf-ava {
  --sz: 28px;
  position: relative;
  width: var(--sz);
  height: var(--sz);
  flex: none;
  user-select: none;
}
.cf-ava__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-inset);
}
.cf-ava__face > svg,
.cf-ava__face > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 忙碌（对话生成中）：一道高光斜带自左向右扫过头像，作就地「思考/生成中」指示。
   遮层与 .cf-ava__face 同框（inset:0）且自行圆形裁剪，故光带只在头像圆内可见、不会漏到行上。 */
.cf-ava__sweep {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  pointer-events: none;
}
/* 光带本体：一条 40% 宽、倾斜 25° 的渐变竖条，靠 left 位移扫过（不用 transform 是为了让
   rotate 保持静态、位移单独走动画，二者互不干扰）。
   亮芯两侧各压一道极淡暗边：生成头像的底色（BG_TONES）现在整池是深色、白亮芯足够，但自定义照片
   什么底都有，浅底照片上单靠白亮芯几乎看不见。暗边就是给那种情况兜底——深底白亮一闪、
   浅底「暗—亮—暗」一道波纹，两种都读得出。别当多余删掉。 */
.cf-ava__sweep::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 28%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(0, 0, 0, 0.12) 72%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: cf-sweep 2.2s ease-in-out infinite;
}
/* 扫到头后留一段停顿（65%→100%），读起来是「一闪一闪」而非连续频闪。 */
@keyframes cf-sweep {
  0% {
    left: -60%;
  }
  65% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

/* 待你处理 / 有新消息：头像右上角一枚静态红点。 */
.cf-ava__dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-panel);
  pointer-events: none;
}

/* 图标栏「对话」按钮上的提示点：其他对话有待处理 / 新消息时显示红点。 */
.cf-navbtn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-inset);
  pointer-events: none;
}

/* 减动效：停动画，但把光带停在头像中间当静态高光——否则它停在 left:-60% 整个看不见，
   忙碌状态就彻底没了指示。 */
@media (prefers-reduced-motion: reduce) {
  .cf-ava__sweep::after {
    animation: none;
    left: 30%;
  }
}

/* ---------------------------- 中列：单人对话 ---------------------------- */
.cf-conv {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.cf-conv__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 右侧留出系统原生窗口控件（min/max/close 叠加区，约 138px）的位置；整条头部作为拖拽区 */
  padding: var(--space-2) 140px var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}
/* macOS 窗口控件在左上角，右侧无需让位 */
.is-mac .cf-conv__head {
  padding-right: var(--space-4);
}
.cf-conv__head .cf-idbtn {
  -webkit-app-region: no-drag;
}
/* 无对话头的中列界面（快速开启 / 角色空态 / 资料卡）顶部拖拽把手：透明、与原生标题栏（40px）等高，
   补齐这些界面缺失的窗口拖拽区（对话视图由 .cf-conv__head 承担）。 */
.cf-dragbar {
  flex: none;
  height: 40px;
  -webkit-app-region: drag;
}
.cf-idbtn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  min-width: 0;
}
.cf-idbtn:hover {
  background: var(--bg-hover);
}
/* 角色名过长单行省略，不压到右侧窗口控件区。 */
.cf-idbtn__name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-wschip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-subtle);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.cf-wschip:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-wschip.is-on {
  color: var(--accent);
}
.cf-wschip.is-on:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
/* 已挂载态：容器托管「文件夹名」菜单按钮与「卸载」✕ 两个内联按钮，各自独立 hover。
   min-width:0 让整块在窄窗里可被压缩（文件夹名 / 分支名省略），而不是把模型选择器与发送键挤出输入框。 */
.cf-wschip--mounted {
  min-width: 0;
  padding: 0;
  gap: 0;
  cursor: default;
}
.cf-wschip__main,
.cf-wschip__x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.cf-wschip__main {
  min-width: 0;
  padding: 0 6px 0 8px;
  border-radius: var(--radius) 0 0 var(--radius);
}
/* 文件夹名过长只显示前一段（完整路径见按钮 title）。图标不参与压缩。 */
.cf-wschip__name {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-wschip__main > svg,
.cf-gitchip > svg {
  flex-shrink: 0;
}
.cf-wschip__main:hover {
  background: var(--bg-hover);
}
.cf-wschip__x {
  padding: 0 7px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg-subtle);
  /* 默认隐藏卸载 ✕，鼠标移到挂载 chip 上才浮现（避免误触、保持整洁）。
     用 opacity 而非 display 保留占位，避免出现/消失时的宽度跳动。 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.cf-wschip--mounted:hover .cf-wschip__x,
.cf-wschip--mounted:focus-within .cf-wschip__x {
  opacity: 1;
  pointer-events: auto;
}
.cf-wschip__x:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

/* ── Git 快捷 pill（挂载 chip 内、名字与 ✕ 之间；仅 git 仓库渲染） ── */
.cf-gitchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.cf-gitchip:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-gitchip:disabled,
.cf-gitchip.is-busy {
  opacity: 0.6;
  cursor: default;
}
.cf-gitchip__branch {
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-gitchip__merge {
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
  font-size: 11px;
  line-height: 1.4;
}
.cf-gitchip__ab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.cf-gitchip__up,
.cf-gitchip__down {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  line-height: 1;
}
.cf-gitchip__up {
  color: var(--success);
}
.cf-gitchip__down {
  color: var(--warning);
}

/* ── 提交框（复用 Modal + .modal__title / .btn / .input） ── */
.cf-commit__meta {
  margin: 4px 0 10px;
  color: var(--fg-muted);
  font-size: 12px;
}
.cf-commit__msg {
  display: block;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.cf-commit__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.cf-commit__bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-commit__actions {
  display: flex;
  gap: 8px;
}

/* ── 检查点回滚面板（复用 Modal + .modal__title / .modal__actions / .btn）；+/− 配色同 git 徽标 ── */
.cf-rewind__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-rewind__hint {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
}
.cf-rewind__empty {
  margin: 4px 0;
  color: var(--fg-subtle);
  font-size: 12px;
}
.cf-rewind__undo {
  align-self: flex-start;
}
.cf-rewind__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0 calc(var(--space-2) * -1);
}
.cf-rewind__turn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.cf-rewind__turn:hover {
  background: var(--bg-hover);
}
.cf-rewind__idx {
  flex: none;
  min-width: 18px;
  color: var(--fg-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cf-rewind__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.cf-rewind__meta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  font-size: 11px;
}
.cf-rewind__exec {
  display: inline-flex;
  color: var(--warning);
}
.cf-rewind__chev {
  flex: none;
  color: var(--fg-subtle);
}
.cf-rewind__stat {
  display: inline-flex;
  gap: 6px;
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cf-rewind__add {
  color: var(--success);
}
.cf-rewind__del {
  color: var(--danger);
}
.cf-rewind__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: calc(var(--space-2) * -1);
}
.cf-rewind__head .btn {
  gap: 2px;
}
.cf-rewind__quote {
  margin: 0;
  padding: 6px 10px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-inset);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-rewind__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-rewind__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
}
.cf-rewind__label--warn {
  color: var(--warning);
}
.cf-rewind__files {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(34vh, 260px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cf-rewind__file {
  padding: 4px 0;
}
.cf-rewind__file.is-dim .cf-rewind__path,
.cf-rewind__file.is-dim .cf-rewind__stat {
  opacity: 0.55;
}
.cf-rewind__fileline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cf-rewind__badge {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 16px;
}
.cf-rewind__badge.is-restore {
  background: var(--accent-tint);
  color: var(--accent);
}
.cf-rewind__badge.is-delete {
  color: var(--danger);
}
.cf-rewind__badge.is-create {
  color: var(--success);
}
.cf-rewind__badge.is-skip {
  color: var(--warning);
}
.cf-rewind__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
  font-size: 12px;
}
.cf-rewind__changed {
  flex: none;
  color: var(--fg-muted);
  font-size: 11px;
}
.cf-rewind__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 2px;
  padding-left: 2px;
  color: var(--warning);
  font-size: 11px;
}
.cf-rewind__force {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg);
  cursor: pointer;
}
.cf-rewind__actions {
  flex-wrap: wrap;
}

/* git 失败 toast 正文：原样呈现命令输出（保留换行、自动折行、等宽），便于读出真实原因。
   最多 5 行，超出部分裁掉并以 … 收尾，不出滚动条（line-clamp 依赖 -webkit-box，Chromium 原生支持）。 */
.cf-giterr {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  margin-top: 2px;
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', Consolas, monospace);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  opacity: 0.92;
}

/* 选择态（按轮删除）：入口改由聊天区右键菜单唤起（复用 .cf-ctx），不再有头部按钮。 */

/* 选择态：每一轮包成可勾选卡片（前言不入卡，原样呈现） */
.cf-turn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.cf-turn:hover {
  background: var(--bg-hover);
}
.cf-turn.is-selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.cf-turn__check {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
}
.cf-turn.is-selected .cf-turn__check {
  background: var(--accent);
  border-color: var(--accent);
}
.cf-turn__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* 选择态底栏（选择模式下替代输入区） */
.cf-selbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
}
.cf-selbar__count {
  font-size: 13px;
  color: var(--fg-muted);
}
.cf-selbar__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
}
.cf-selbar__btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}
.cf-selbar__btn:hover {
  background: var(--bg-hover);
}
.cf-selbar__btn--danger {
  border-color: transparent;
  background: var(--danger);
  color: #fff;
}
.cf-selbar__btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 88%, #000);
}
.cf-selbar__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 消息流。外层 .cf-convmid 只做定位容器：.cf-msgs 自身滚动，右侧轮次索引面板不能放它里面，
   否则会跟着内容滚走。 */
.cf-convmid {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.cf-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) 0;
}

/* ---- 对话轮次索引（右侧导航） ---- */
/* 默认只显刻度短横线，悬停整条面板（.is-open）才展开成浮层文字列表，不挤压正文。
   垂直居中用 top/bottom + flex：right 须大于 .cf-msgs 的 10px 滚动条宽度，才不会压在滚动条上。 */
.cf-toc {
  position: absolute;
  right: var(--space-4);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 40;
}
.cf-toc__list {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 26px;
  max-height: 100%;
  padding: var(--space-2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: var(--radius);
  transition:
    width 0.14s ease,
    background 0.14s ease;
}
.cf-toc__list::-webkit-scrollbar {
  display: none;
}
.cf-toc__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
  padding: 3px var(--space-2);
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.cf-toc__item:hover {
  background: var(--bg-hover);
  color: var(--fg-muted);
}
.cf-toc__item.is-active {
  color: var(--fg);
}
/* 刻度短横线：收起时唯一可见部分，当前轮加长加粗并染 accent。 */
.cf-toc__dash {
  flex: none;
  width: 10px;
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: var(--border-strong);
  transition:
    width 0.14s ease,
    background 0.14s ease;
}
.cf-toc__item:hover .cf-toc__dash {
  background: var(--fg-subtle);
}
.cf-toc__item.is-active .cf-toc__dash {
  width: 14px;
  height: 3px;
  background: var(--accent);
}
/* 文字仅在悬停浮层里出现。 */
.cf-toc__label {
  display: none;
}
.cf-toc__item.is-active .cf-toc__label {
  font-weight: 600;
}

/* 悬停展开浮层 */
.cf-toc.is-open .cf-toc__list {
  width: 200px;
  align-items: stretch;
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.cf-toc.is-open .cf-toc__item {
  justify-content: flex-start;
  padding: 4px var(--space-2);
}
/* 浮层里每条只占一行：浮层盖在正文上，越矮越不挡；完整文本走原生 title 悬停提示。 */
.cf-toc.is-open .cf-toc__label {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  word-break: break-word;
}
.cf-msgs__inner {
  max-width: var(--cf-main);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cf-msg {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
}
.cf-msg__body {
  min-width: 0;
  /* 全局 body 为 user-select:none（应用外壳观感）；对话内容须可选中才能右键复制，故在消息体上放开。
     头像 .cf-ava 自带 user-select:none，不受影响。 */
  user-select: text;
}
.cf-msg__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 3px;
}
.cf-msg__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.cf-msg__text {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 用户消息正文折叠：默认最多 3 行，超出由 .cf-msg__more 手动展开。
   clamp 必须落在「无内边距」的内层盒子上：-webkit-line-clamp 只负责截断行并补省略号，
   多余的行照样布局绘制、全靠 overflow 裁掉，而 overflow 裁的是 padding box——
   气泡自带 10px 下内边距时，第 4 行会漏进内边距里显出「半个字」。 */
.cf-msg__clamp.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 3);
  line-clamp: var(--clamp-lines, 3);
  overflow: hidden;
}
.cf-msg__more {
  display: flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  /* 用户气泡靠右，按钮跟随右对齐 */
  margin: 4px 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-muted);
  cursor: pointer;
}
.cf-msg__more:hover {
  color: var(--accent);
}
.cf-msg__more .is-up {
  transform: rotate(180deg);
}

/* 用户消息：右侧气泡 */
.cf-msg.is-user {
  grid-template-columns: minmax(0, 1fr) 32px;
}
.cf-msg.is-user .cf-msg__body {
  justify-self: end;
  max-width: 80%;
}
.cf-msg.is-user .cf-msg__head {
  justify-content: flex-end;
}
.cf-msg.is-user .cf-msg__text {
  background: var(--chat-user-bubble);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-sm);
}
.cf-msg.is-user .cf-ava {
  order: 2;
}

/* 后台任务通知：后台子智能体结束后自动起的那一轮的起点，居中一行系统通知（不是用户说的话） */
.cf-msg.is-notify {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.cf-notify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  font-size: 12px;
  color: var(--fg-muted);
}
.cf-notify svg {
  flex: none;
  color: var(--accent);
}
.cf-notify span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部工作状态指示器（思考中/生成回答/等待作答…）：跳过头像列，与消息正文左缘对齐（同 .cf-msg 的 32px 头像 + 列间距） */
.cf-msgs__inner > .chat__status {
  margin-left: calc(32px + var(--space-3));
}

/* 工具调用条（内联、默认收起） */
.cf-tools {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-tool {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.cf-tool__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.cf-tool__row:hover {
  background: var(--bg-hover);
}
.cf-tool__label {
  font-weight: 500;
  color: var(--fg);
}
.cf-tool__chev {
  margin-left: auto;
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}
.cf-tool.is-open .cf-tool__chev {
  transform: rotate(90deg);
}
.cf-tool__detail {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-muted);
  background: var(--bg-inset);
  white-space: pre-wrap;
}

/* 输入区。上方分隔线已去掉，但保留 1px 透明边框：边距与有分隔线时逐像素一致（有无待办胶囊都不变）。 */
.cf-composer {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid transparent;
}
/* 回到最新浮标：锚在输入区顶边正上方居中（bottom:100% 相对 .cf-composer）。 */
.cf-jump {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-2);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cf-jump:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-composer__inner {
  position: relative; /* 「/ 指令」联想面板的定位锚 */
  width: 100%;
  max-width: var(--cf-main);
  margin: 0 auto;
}
/* 「/ 指令」联想：浮在输入盒正上方、与其同宽；仅在输入直接以 / 开头且尚未带参数时出现。 */
.cf-slash {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cf-slash__list {
  max-height: 264px;
  overflow-y: auto;
  padding: var(--space-1);
}
.cf-slash__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.cf-slash__item svg {
  flex-shrink: 0;
  color: var(--fg-subtle);
}
/* 键盘高亮与鼠标悬停同一态（悬停即把高亮移过去），故只有 .is-on 一种选中外观。 */
.cf-slash__item.is-on {
  background: var(--bg-hover);
}
.cf-slash__item.is-on svg {
  color: var(--accent);
}
.cf-slash__name {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}
.cf-slash__desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--fg-muted);
}
.cf-slash__hint {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-inset);
  font-size: 11px;
  color: var(--fg-subtle);
}
/* 待办清单进度胶囊：输入盒正上方、左对齐、随内容宽，最多一个（进行中的清单）；点开向上展开其条目（与输入盒同宽）。 */
.cf-todo {
  margin-bottom: var(--space-2);
}
.cf-todo__pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  height: 30px;
  padding: 0 10px 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  color: var(--fg-muted);
  font-size: 12.5px;
  cursor: pointer;
}
.cf-todo__pill:hover,
.cf-todo.is-open .cf-todo__pill {
  border-color: var(--border-strong);
  color: var(--fg);
}
.cf-todo__now {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-todo__now.is-doing {
  color: var(--fg);
}
.cf-todo__count {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--fg-subtle);
}
.cf-todo__caret {
  flex: none;
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}
.cf-todo.is-open .cf-todo__caret {
  transform: rotate(180deg);
}
.cf-todo__ring {
  flex: none;
}
.cf-todo__ring circle {
  fill: none;
  stroke-width: 2.2;
}
.cf-todo__ring-track {
  stroke: var(--border-strong);
}
.cf-todo__ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}
.cf-todo__panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  max-height: min(420px, 55vh);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cf-todo__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.cf-todo__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.cf-todo__cancel {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: 11.5px;
  cursor: pointer;
}
.cf-todo__cancel:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-todo__cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cf-todo__scroll {
  overflow-y: auto;
  padding: var(--space-3);
}
.cf-box {
  position: relative; /* 上边框拖拽手柄的定位锚 */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.cf-box:focus-within {
  border-color: var(--accent);
}
.cf-box textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 44px;
  overflow-y: auto; /* 对话输入框固定高（内联 height），内容多了框内滚动 */
}
.cf-box__bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
/* 任务表单：指令输入采用与对话输入框同款内嵌盒（.cf-box），但更高、不可拖拽
   （.cf-box textarea 已 resize:none）、去阴影；底部工具条内嵌人格 / 模型 chip 选择器（靠右对齐）。 */
.cf-box--task {
  box-shadow: none;
}
.cf-box--task textarea {
  min-height: 200px;
}
.cf-box--task .cf-box__bar {
  justify-content: flex-end;
}
.cf-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
}
.cf-iconbtn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
/* 模型选择器吸右：占尽左侧空白，把「模型选择器 + 发送键」一并推到工具条右端，
   模型切换恰落在发送键之前（📎 / 工作区 chip 仍留在左侧）。仅作用于对话输入框，
   不影响任务表单的同款选择器。 */
.cf-composer .model-pick {
  margin-left: auto;
}
/* 思考等级选择器紧贴模型选择器：只让第一个吃掉左侧空白；再抵掉工具条的 gap、收窄两枚贴片
   相邻一侧的内边距，二者读作一组（贴片无底色，否则中间会空出一截比到发送键还宽的距离）。 */
.cf-composer .model-pick + .model-pick {
  margin-left: calc(-1 * var(--space-1));
}
.cf-composer .model-pick:has(+ .model-pick) .chip {
  padding-right: 4px;
}
.cf-composer .model-pick + .model-pick .chip {
  padding-left: 4px;
}
/* 思考等级菜单项：档位名 + 一行说明。 */
.cf-effort__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cf-effort__hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--fg-subtle);
}
.cf-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  /* 固定最小宽度：发送（文字）与停止（仅图标）两态同宽，切换时按钮尺寸不跳动。 */
  min-width: 68px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.cf-send:hover {
  background: var(--accent-hover);
}
.cf-send:disabled {
  opacity: 0.45;
  cursor: default;
}
/* 停止态：中性底色，与醒目的发送键区分开。 */
.cf-send.is-stop {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-send.is-stop:hover {
  background: var(--border);
}
.cf-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-subtle);
  text-align: center;
}
.cf-hint kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
}

/* ---------------------------- 中列：角色资料卡 ---------------------------- */
/* 与对话面板（.cf-msgs / .cf-msgs__inner）同构：滚动容器 .cf-profile 满宽，滚动条落在主区最右边缘；
   实际内容 .cf-profile__inner 居中并限宽（var(--cf-main)），不被拉伸铺满。 */
.cf-profile {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}
.cf-profile__inner {
  width: 100%;
  /* 角色资料卡较对话/快速开启更窄，作独立收窄的信息卡列宽（不跟随 --cf-main）。 */
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 超长无断点的专长 / 任务标题（如一长串数字）在卡内任意处折行，不撑出横向滚动条。 */
  overflow-wrap: anywhere;
}
.cf-profile__ava {
  --sz: 76px;
  position: relative;
  width: var(--sz);
  height: var(--sz);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-inset);
  user-select: none;
}
.cf-profile__ava > svg,
.cf-profile__ava > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 专长过长折行居中；角色名单行省略见 .cf-profile__clip（任务详情复用本类作标题，仍折行）。 */
.cf-profile__name {
  margin-top: var(--space-3);
  font-size: 20px;
  font-weight: 750;
  color: var(--fg);
  text-align: center;
}
.cf-profile__spec {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}
/* 角色资料卡单行省略：角色名 /「与 xxx 的对话」/ 空态提示过长不换行，超出显示…（悬停 title 看全文）。 */
.cf-profile__clip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-profile__meta {
  width: 100%;
  margin-top: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  overflow: hidden;
}
.cf-profile__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
}
.cf-profile__row + .cf-profile__row {
  border-top: 1px solid var(--border);
}
.cf-profile__k {
  flex: none;
  width: 64px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.cf-profile__v {
  font-size: 13px;
  color: var(--fg);
  font-weight: 600;
}
.cf-profile__new {
  width: 100%;
  height: 40px;
  margin-top: var(--space-4);
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cf-profile__new:hover {
  background: var(--accent-hover);
}
.cf-profile__convs {
  width: 100%;
  margin-top: var(--space-5);
}
.cf-profile__convs-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-subtle);
  margin-bottom: var(--space-2);
}
.cf-convrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: 9px var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.cf-convrow:hover {
  background: var(--bg-hover);
}
.cf-convrow__title {
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-convrow__proj {
  flex: none;
  font-size: 11px;
  color: var(--fg-muted);
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.cf-convrow__time {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--fg-subtle);
}

/* 空态 */
.cf-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--fg-subtle);
  font-size: 12px;
  line-height: 1.8;
}

/* ---------------------------- 中列：快速开启（无任何对话时） ---------------------------- */
/* 同 .cf-profile：滚动容器满宽（滚动条落最右），内容居中限宽垂直居中。 */
.cf-quick {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}
.cf-quick__inner {
  width: 100%;
  max-width: var(--cf-main);
  min-height: 100%;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cf-quick__title {
  font-size: 20px;
  font-weight: 750;
  color: var(--fg);
}
.cf-quick__hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg-muted);
}
.cf-quick__grid {
  margin-top: var(--space-6);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  gap: var(--space-4);
}
.cf-qcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  gap: 8px;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    transform 0.06s ease;
}
.cf-qcard:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.cf-qcard:active {
  transform: translateY(1px);
}
.cf-qcard__name {
  font-size: 13px;
  font-weight: 650;
  color: var(--fg);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cf-qcard__desc {
  font-size: 11px;
  color: var(--fg-subtle);
  text-align: center;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------- 设置弹层 ---------------------------- */
.cf-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.42);
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.cf-modal {
  width: 100%;
  max-width: 720px;
  height: min(560px, 82vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cf-modal__head {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.cf-modal__title {
  font-size: 14px;
  font-weight: 700;
}
.cf-modal__close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cf-modal__close:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-modal__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
}

/* 设置左侧导航 */
.cf-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-right: 1px solid var(--border);
  background: var(--bg-inset);
}
.cf-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
}
.cf-nav__item:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.cf-nav__item.is-active {
  background: var(--bg-active);
  color: var(--fg);
  font-weight: 600;
}
.cf-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg-subtle);
}
.cf-nav__item.is-active .cf-nav__icon {
  color: var(--fg);
}

/* 设置右侧内容 */
.cf-pane {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}
.cf-pane__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.cf-pane__desc {
  margin: 6px 0 var(--space-4);
  font-size: 12px;
  color: var(--fg-subtle);
}

/* 设置项：语言/主题/发送键 */
.cf-set {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cf-set__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
}
.cf-set__row + .cf-set__row {
  border-top: 1px solid var(--border);
}
.cf-set__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.cf-set__hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
}

/* 分段选择器 */
.cf-seg {
  margin-left: auto;
  display: inline-flex;
  padding: 2px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 2px;
}
.cf-seg__opt {
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.cf-seg__opt:hover {
  color: var(--fg);
}
.cf-seg__opt.is-on {
  background: var(--bg-elevated);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* 模型/扩展行 */
.cf-rows {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cf-setrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 14px;
}
.cf-setrow + .cf-setrow {
  border-top: 1px solid var(--border);
}
.cf-setrow__main {
  min-width: 0;
}
/* 可点开编辑的行（MCP）：主区做透明按钮，铺满行宽，右侧陈列 chevron 暗示可钻取 */
.cf-setrow__open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cf-setrow__open .cf-setrow__name {
  flex: 1 1 auto;
  min-width: 0;
}
.cf-setrow__chevron {
  flex: none;
  color: var(--fg-subtle);
}
.cf-setrow__open:hover .cf-setrow__name {
  color: var(--accent);
}
.cf-setrow__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.cf-setrow__sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.cf-setrow__note {
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
}
.cf-setrow__note--warn {
  color: var(--warning);
}
.cf-badge {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-inset);
}
.cf-badge.is-accent {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* 开关 */
.cf-switch {
  flex: none;
  margin-left: auto;
  width: 38px;
  height: 22px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--bg-active);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cf-switch.is-on {
  background: var(--accent);
}
/* 锁定（如内置技能恒启用）：悬停显示禁用手势，不可切换 */
.cf-switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cf-switch__dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.cf-switch.is-on .cf-switch__dot {
  transform: translateX(16px);
}

/* 关于 */
.cf-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) 0;
}
.cf-about__icon {
  width: 56px;
  height: 56px;
}
.cf-about__name {
  margin-top: var(--space-3);
  font-size: 20px;
  font-weight: 750;
}
.cf-about__ver {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.cf-about__desc {
  margin-top: var(--space-4);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-muted);
}
/* 关于页「检查更新」（UpdateSection.tsx） */
.cf-update {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-width: 380px;
}
.cf-update__status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg);
}
.cf-update__status.is-ok {
  color: var(--success);
}
.cf-update__status.is-error {
  color: var(--danger);
}
.cf-update__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--accent);
}
.cf-update__link:hover {
  text-decoration: underline;
}
.cf-update__hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-subtle);
}
.cf-update__hint--mono {
  font-family: var(--font-mono);
  word-break: break-all;
}
.cf-update__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cf-update__bar {
  width: 240px;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
}
.cf-update__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* ---------------------------- Composer 附件贴片行 ---------------------------- */
.cf-composer__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}

/* ---------------------------- 资料卡：操作按钮组 ---------------------------- */
.cf-profile__actions {
  width: 100%;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
/* 组内的「发起对话」不再单独顶边距，改为等宽主按钮。 */
.cf-profile__actions .cf-profile__new {
  flex: 1;
  margin-top: 0;
}
.cf-profile__edit {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cf-profile__edit:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* ---------------------------- 弹层尺寸修饰 ---------------------------- */
/* 模型页：更宽，容纳服务商 + 密钥表单。 */
/* 角色编辑器：更窄、高度随内容（表单不足则不拉伸）。 */
.cf-modal.is-editor {
  max-width: 560px;
  height: auto;
  max-height: 82vh;
}

/* ---------------------------- 角色编辑器表单（Part G） ---------------------------- */
.cf-editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cf-field--row {
  flex-direction: row;
  gap: var(--space-4);
}
.cf-field--row > .cf-field {
  flex: 1;
}
.cf-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.cf-field__hint {
  font-size: 11px;
  color: var(--fg-subtle);
}

/* 表单控件通用外观 */
.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
}
.cf-input,
.cf-select {
  height: 34px;
  padding: 0 10px;
}
.cf-textarea {
  padding: 8px 10px;
  line-height: 1.55;
  resize: vertical;
  min-height: 96px;
}
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--accent);
}

/* 任务编辑弹窗：日程行控件走共享 .sched（见 styles/app.css），此处仅留其下的人读预览行。 */
.cf-schedprev {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--fg-muted);
}
.cf-schedprev.is-invalid {
  color: var(--danger);
}
/* ---- 头像收成一枚可点缩略图（信息表单里）；点击切到头像编辑面板 ---- */
.cf-avapick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--bg-inset);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cf-avapick:hover {
  border-color: var(--accent);
  background: var(--bg-elevated, var(--bg-inset));
}
.cf-avapick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* 缩略图：圆形裁剪 SVG + ::after 主题色描边环（与列表头像同构）。 */
.cf-avapick__face {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-base, #fff);
}
.cf-avapick__face > svg,
.cf-avapick__face > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-avapick__hint {
  color: var(--text-muted);
  font-size: var(--font-sm, 13px);
}
/* ---------------------------- 个人资料面板（头像 + 全局记忆标签墙） ---------------------------- */
/* 头像横向居中，本身就是编辑入口：悬停浮出遮层（与角色头像编辑的上传遮层同款）。 */
.cf-me__head {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2);
}
.cf-me__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-base, #fff);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow 0.12s ease;
}
.cf-me__avatar > svg,
.cf-me__avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cf-me__avatar:hover,
.cf-me__avatar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.cf-me__avatarov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cf-me__avatar:hover .cf-me__avatarov,
.cf-me__avatar:focus-visible .cf-me__avatarov {
  opacity: 1;
}
.cf-me__mem {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* 记忆区通栏：用负外边距抵消 .cf-editor 的上 / 左右内边距与到底部操作栏的列间距，
   上贴标题栏分隔线、下贴操作栏、左右铺满资料面板（错误提示再补回内边距）。 */
.cf-me__board {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) calc(-1 * var(--space-4));
}
.cf-me__board .cf-me__err {
  padding-inline: var(--space-5);
}
.cf-me__hint {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
}
/* 记忆标签墙：自动换行铺开；悬停时文字后浮现编辑 / 删除，双击也可原地编辑。 */
.cf-me__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-inset);
}
.cf-me__tag {
  position: relative;
  display: flex;
  align-items: center;
  max-width: min(24em, 100%);
  height: 26px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-base, #fff);
  color: var(--fg);
  font-size: 12.5px;
  cursor: default;
  user-select: none;
  transition: border-color 0.12s ease;
}
/* 文字行高 = 标签内高（26 − 上下边框），与编辑态输入框同高同行高：两态文字行盒都从内沿起排、基线一致，
   进入编辑时不再上下跳（原先 span 行盒偏移 3.625px、输入框 3px，小数坐标下各自取整会差出 1 个物理像素）。 */
.cf-me__tagtext {
  min-width: 0;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-me__tag:hover,
.cf-me__tag:focus-visible {
  outline: none;
  border-color: var(--accent);
}
/* 悬停工具条：portal 到 body、fixed 定位在标签正上方（贴近窗口顶部时改下方），不占标签本身的位置。
   层级高于模态背景；单钮悬停再染色（编辑蓝、删除红）。 */
.cf-me__tag.is-hot {
  border-color: var(--accent);
}
.cf-me__tagpop {
  position: fixed;
  z-index: 70;
  translate: -50% -100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  animation: cf-me-pop 0.12s ease;
}
.cf-me__tagpop.is-below {
  translate: -50% 0;
}
@keyframes cf-me-pop {
  from {
    opacity: 0;
  }
}
.cf-me__tagbtn {
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cf-me__tagbtn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info);
}
.cf-me__tagbtn.is-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}
.cf-me__tagbtn:disabled {
  cursor: default;
  opacity: 0.5;
}
.cf-me__tag.is-editing {
  padding: 0 4px;
  border-color: var(--accent);
}
.cf-me__tagsempty {
  align-self: center;
  color: var(--fg-subtle);
  font-size: 12.5px;
}
/* 输入框填满标签（标签宽度由 JS 按内容算，见 editBoxWidth），可被标签上限压缩（min-width:0），
   超长文字在框内横向滚动而非撑开标签。 */
.cf-me__tagedit {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: 24px;
}
/* 环形布局：头像居中，每页 12 条沿椭圆环绕（槽位坐标由 JS 算，这里只负责居中锚点）。
   居中用独立的 translate 属性而非 transform —— 翻页动画经 WAAPI 改 transform，两者叠加互不覆盖。 */
.cf-me__orbit {
  position: relative;
  height: 300px;
  background: var(--bg-inset);
  overflow: hidden;
}
.cf-me__orbit > .cf-me__tag,
.cf-me__orbitout > .cf-me__tag {
  position: absolute;
  translate: -50% -50%;
  max-width: 10em;
  z-index: 1;
}
.cf-me__orbit > .cf-me__tag:hover,
.cf-me__orbit > .cf-me__tag:focus-within {
  z-index: 3;
}
/* 编辑中的宽度与位置由 JS 算并夹紧在舞台内（见 MemoryOrbit slotStyle）。 */
.cf-me__orbit > .cf-me__tag.is-editing {
  z-index: 4;
}
.cf-me__orbitout {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cf-me__core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
}
.cf-me__orbitempty {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  translate: -50% 0;
  width: max-content;
  max-width: 90%;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: center;
}
/* 页码圆点：竖排，贴舞台右侧垂直居中。 */
.cf-me__pager {
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cf-me__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--border-strong, var(--border));
  cursor: pointer;
  transition: background 0.12s ease, height 0.12s ease;
}
.cf-me__dot.is-active {
  height: 16px;
  background: var(--accent);
}
.cf-me__err {
  color: var(--danger);
  font-size: 12px;
}
.cf-me__actions {
  align-items: center;
  margin-top: 0;
  padding-top: var(--space-3); /* 操作栏自身内边距：按钮不贴记忆区底色 */
}
.cf-me__clear {
  margin-right: auto;
  color: var(--danger);
}
/* ---- 头像编辑面板：占满编辑区，底部「完成」返回信息表单 ---- */
.cf-avapanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* ---- 头像编辑器：左侧实时大预览 + 随机；右侧部件与配色选择 ---- */
.cf-avaedit {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.cf-avaedit__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
/* 大预览：圆形裁剪头像本体（与列表头像同构，无描边），同时是上传图片的点击入口。 */
.cf-avaedit__preview {
  padding: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-inset);
}
.cf-avaedit__preview > svg,
.cf-avaedit__preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 悬停遮层：盖住整张头像，浮出上传图标；不悬停时 opacity:0 但仍可点（整块都是入口）。 */
.cf-avaedit__upload {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cf-avaedit__preview:hover .cf-avaedit__upload,
.cf-avaedit__preview:focus-visible .cf-avaedit__upload {
  opacity: 1;
}
.cf-avaedit__rand {
  height: 30px;
  padding: 0 14px;
}
.cf-avaedit__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cf-avaedit__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-avaedit__glabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
/* 部件缩略图：横向可滚动一行 */
.cf-avaedit__parts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cf-avaedit__part {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.cf-avaedit__part:hover {
  border-color: var(--border-strong);
}
.cf-avaedit__part.is-selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.cf-avaedit__part > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cf-avaedit__none {
  font-size: 11px;
  color: var(--fg-muted);
}
/* 配色选择器：自适应网格，每格一枚色板 + 文字 */
.cf-avaedit__colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.cf-avaedit__swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.cf-avaedit__swatch > input {
  flex: none;
  width: 34px;
  height: 26px;
  padding: 1px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
}

/* 编辑器底部按钮组 */
.cf-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.cf-btn {
  height: 34px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cf-btn:hover {
  background: var(--bg-hover);
}
.cf-btn.is-primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-fg);
}
.cf-btn.is-primary:hover {
  background: var(--accent-hover);
}
.cf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 滚动条 */
.cf-list::-webkit-scrollbar,
.cf-msgs::-webkit-scrollbar,
.cf-profile::-webkit-scrollbar,
.cf-tasks::-webkit-scrollbar,
.cf-editor::-webkit-scrollbar,
.cf-pane::-webkit-scrollbar {
  width: 10px;
}
.cf-list::-webkit-scrollbar-thumb,
.cf-msgs::-webkit-scrollbar-thumb,
.cf-profile::-webkit-scrollbar-thumb,
.cf-tasks::-webkit-scrollbar-thumb,
.cf-editor::-webkit-scrollbar-thumb,
.cf-pane::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* ---------------------------- 对话行「⏰ 定时」徽标（任务独占会话） ---------------------------- */
.cf-thread__badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--accent);
}

/* ---------------------------- 定时任务标签页（左列表 + 右详情） ---------------------------- */
/* 左列表分组：组标题（复用 .cf-tasks__grouphd）+ 组内任务行；组间留白。 */
.cf-trailgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
}
.cf-tasks__grouphd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  padding: var(--space-2) var(--space-3) 4px;
}
.cf-tasks__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 700;
}

/* 左列表任务行（与角色行 .cf-prow 同构：图标 | 标题/日程） */
.cf-trow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.cf-trow:hover {
  background: var(--bg-hover);
}
.cf-trow.is-active {
  background: var(--bg-selected);
}
.cf-trow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.cf-trow__icon.is-active {
  color: var(--accent);
}
.cf-trow__icon.is-error {
  color: var(--danger);
}
.cf-trow__icon.is-completed {
  color: var(--success, #2e7d32);
}
.cf-trow__main {
  min-width: 0;
}
.cf-trow__title {
  font-size: 13px;
  font-weight: 650;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-trow__sched {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--fg-muted);
}
.cf-trow__sched > svg {
  flex: none;
}
.cf-trow__schedtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右详情面：复用 .cf-profile 滚动容器 + .cf-profile__inner 居中限宽（叠加 .cf-tdetail 微调）。 */
.cf-tdetail {
  gap: 0;
}
.cf-tdetail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.cf-tdetail__icon.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cf-tdetail__icon.is-error {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.cf-tdetail__icon.is-completed {
  color: var(--success, #2e7d32);
  background: color-mix(in srgb, var(--success, #2e7d32) 12%, transparent);
}
.cf-tdetail .cf-profile__name {
  margin-top: var(--space-3);
  text-align: center;
}
.cf-tdetail__tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 6px;
}
.cf-tdetail__status {
  padding: 1px 9px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.cf-tdetail__status.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.cf-tdetail__status.is-error {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.cf-tdetail__status.is-completed {
  background: color-mix(in srgb, var(--success, #2e7d32) 16%, transparent);
  color: var(--success, #2e7d32);
}
/* 详情信息卡：拉开与标签的间距；键列略加宽以容英文键名，值可含内联图标并自动换行。 */
.cf-tdetail .cf-profile__meta {
  margin-top: var(--space-5);
}
.cf-tdetail .cf-profile__k {
  width: 88px;
}
.cf-tdetail .cf-profile__v {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.cf-tdetail .cf-profile__v > svg {
  flex: none;
  color: var(--fg-muted);
}
/* 通用运行状态徽标（右详情「上次」值 + 运行历史行共用）。 */
.cf-runbadge {
  flex: none;
  padding: 0 6px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.cf-runbadge.is-ok {
  background: color-mix(in srgb, var(--success, #2e7d32) 16%, transparent);
  color: var(--success, #2e7d32);
}
.cf-runbadge.is-error {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.cf-runbadge.is-skipped {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

/* 详情分节（任务指令 / 运行历史）：复用 .cf-profile__convs-label 作小标题。 */
.cf-tdetail__section {
  width: 100%;
  margin-top: var(--space-5);
}
.cf-tdetail__prompt {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 指令折叠面板：小标题行作展开/收起开关（左侧披露箭头 + 复用 .cf-profile__convs-label 文本），
   按钮外观归零、整行可点、悬停给底色；展开时才渲染指令体（.cf-tdetail__prompt）。 */
.cf-tdetail__prompthead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  width: calc(100% + var(--space-2) * 2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.cf-tdetail__prompthead:hover {
  background: var(--bg-hover);
}
.cf-tdetail__prompthead .cf-profile__convs-label {
  margin-bottom: 0;
}
.cf-tdetail__chev {
  color: var(--fg-subtle);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.cf-tdetail__chev.is-open {
  transform: rotate(90deg);
}
.cf-tdetail__prompthead + .cf-tdetail__prompt {
  margin-top: var(--space-2);
}

/* 操作按钮行（对齐 .cf-profile__actions，但可容纳 4 个动作、自动换行）。 */
.cf-tdetail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-4);
}
.cf-tdetail__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.cf-tdetail__act:hover {
  background: var(--bg-hover);
}
.cf-tdetail__act--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-fg);
}
.cf-tdetail__act--primary:hover {
  background: var(--accent-hover);
}
.cf-tdetail__act--danger {
  margin-left: auto;
  color: var(--danger);
}
.cf-tdetail__act--danger:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

/* 运行历史行：时间 | 状态徽标 | 摘要/错误。 */
.cf-trun {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius);
}
.cf-trun:hover {
  background: var(--bg-hover);
}
.cf-trun__time {
  flex: none;
  font-size: 12px;
  color: var(--fg);
}
.cf-trun__msg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 运行历史「展开全部 / 收起」开关：纯文字按钮。 */
.cf-trun__more {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 6px var(--space-3);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.cf-trun__more:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* ============================ 机器人 tab（IM 远程通道） ============================ */
/* 左列表行：复用 .cf-trow，图标位换成平台标识；副行为状态点 + 平台 + 区域。 */
.bots-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.bots-addmenu__item:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.bots-addmenu__item:disabled:hover {
  background: transparent;
}

.bots-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
/* 内置品牌图标：原图自带配色，不加底色、不裁圆角。 */
.bots-logo--img {
  border-radius: 0;
  object-fit: contain;
}
.bots-tag {
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  color: var(--fg-subtle);
}
.bots-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-subtle);
}
.bots-dot--connected {
  background: var(--success);
}
.bots-dot--connecting {
  background: var(--accent);
}
.bots-dot--error {
  background: var(--danger);
}

/* 右详情：与任务 / 角色详情同宽的居中信息列。 */
.bots-detail {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6);
}
.bots-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.bots-detail__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bots-detail__name {
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bots-detail__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.bots-detail__state.is-connected {
  color: var(--success);
}
.bots-detail__state.is-error {
  color: var(--danger);
}
.bots-detail__sep {
  color: var(--fg-subtle);
}

.bots-card {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}
.bots-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bots-card__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
}
.bots-card__hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-subtle);
}
.bots-card__empty {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--fg-subtle);
}
.bots-usage {
  margin: 6px 0 0;
}
.bots-hint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.bots-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 12px;
  cursor: pointer;
}
.bots-btn:hover {
  background: var(--bg-hover);
}

/* 扫码弹框 */
.cf-modal.bots-scanmodal {
  max-width: 520px;
  height: auto;
}
.bots-scanmodal__body {
  padding: 4px 18px 18px;
}
.bots-scan {
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
}
.bots-scan__qr {
  flex: none;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.bots-scan__qr img {
  width: 156px;
  height: 156px;
  image-rendering: pixelated;
}
.bots-scan__placeholder {
  color: #bbb;
}
.bots-scan__side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.bots-scan__lead {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
}
.bots-scan__code {
  align-self: stretch;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.bots-scan__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.bots-scan__status.is-error {
  color: var(--danger);
}

/* Telegram 第一步：扫码打开 BotFather + 粘贴 Token（沿用扫码弹框的左码右栏布局） */
.bots-token__row {
  align-self: stretch;
  display: flex;
  gap: 8px;
}
.bots-token__input.cf-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  font-family: var(--font-mono);
}
.bots-token__row .bots-btn {
  flex: none;
}
.bots-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
a.bots-btn {
  text-decoration: none;
}
.bots-spin {
  animation: bots-spin 1s linear infinite;
}
@keyframes bots-spin {
  to {
    transform: rotate(360deg);
  }
}

.bots-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}
.bots-pair__code {
  padding: 6px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-inset);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  user-select: all;
}
.bots-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}
.bots-user + .bots-user {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.bots-user__id {
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bots-user__at {
  flex: 1;
  color: var(--fg-subtle);
}
.bots-warn {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  font-size: 12px;
  line-height: 1.6;
}
.bots-pair__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 回复范围 */
.bots-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cf-modal.bots-pickmodal {
  max-width: 460px;
  height: min(560px, 82vh);
}
.bots-pick__search {
  display: flex;
  padding: 12px 16px 8px;
}
.bots-pick__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.bots-pick__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.bots-pick__row:hover {
  background: var(--bg-hover);
}
.bots-pick__row input {
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}
.bots-pick__ava {
  flex: none;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-inset);
}
.bots-pick__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bots-pick__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bots-pick__title,
.bots-pick__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bots-pick__title {
  font-size: 13px;
}
.bots-pick__sub {
  font-size: 12px;
  color: var(--fg-subtle);
}
.bots-pick__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}