:root {
  color-scheme: dark;
  /* Codex 式中性底色：层级主要依靠明暗和分隔线，青色只用于焦点、链接和当前指示。 */
  --bg: #0b0d10;
  --panel: #111418;
  --panel-2: #171a1f;
  --surface: var(--panel);
  --border: #2b3038;
  --text: #f2f4f7;
  --text-2: #a7adb7;
  --text-3: #737a85;
  --primary: #67e8f9;
  --primary-2: #22d3ee;
  --accent: var(--primary);
  --success: #4ade80;
  --warn: #fbbf24;
  --error: #fb7185;
  --wechat: var(--success);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --input-bg: #0e1115;
  --btn-hover: #1b1f25;
  --term-bg: #080a0d;
  --surface-raised: color-mix(in srgb, var(--panel) 96%, transparent);
  --surface-tint: color-mix(in srgb, var(--text) 2.5%, transparent);
  --surface-tint-2: color-mix(in srgb, var(--text) 4.5%, transparent);
  --text-dim: var(--text-3);
  --primary-a-06: color-mix(in srgb, var(--primary) 6%, transparent);
  --primary-a-08: color-mix(in srgb, var(--primary) 8%, transparent);
  --primary-a-12: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-a-16: color-mix(in srgb, var(--primary) 16%, transparent);
  --primary-a-22: color-mix(in srgb, var(--primary) 22%, transparent);
  --primary-a-24: color-mix(in srgb, var(--primary) 24%, transparent);
  --primary-a-35: color-mix(in srgb, var(--primary) 35%, transparent);
  --primary-a-38: color-mix(in srgb, var(--primary) 38%, transparent);
  --primary-a-45: color-mix(in srgb, var(--primary) 45%, transparent);
  --primary-a-55: color-mix(in srgb, var(--primary) 55%, transparent);
  --accent-a-18: var(--primary-a-16);
  --accent-a-45: var(--primary-a-45);
  --success-a-06: color-mix(in srgb, var(--success) 6%, transparent);
  --success-a-08: color-mix(in srgb, var(--success) 8%, transparent);
  --success-a-12: color-mix(in srgb, var(--success) 12%, transparent);
  --success-a-22: color-mix(in srgb, var(--success) 22%, transparent);
  --success-a-35: color-mix(in srgb, var(--success) 35%, transparent);
  --success-a-42: color-mix(in srgb, var(--success) 42%, transparent);
  --success-a-45: color-mix(in srgb, var(--success) 45%, transparent);
  --error-a-06: color-mix(in srgb, var(--error) 6%, transparent);
  --error-a-08: color-mix(in srgb, var(--error) 8%, transparent);
  --error-a-12: color-mix(in srgb, var(--error) 12%, transparent);
  --error-a-16: color-mix(in srgb, var(--error) 16%, transparent);
  --error-a-22: color-mix(in srgb, var(--error) 22%, transparent);
  --error-a-28: color-mix(in srgb, var(--error) 28%, transparent);
  --error-a-35: color-mix(in srgb, var(--error) 35%, transparent);
  --error-a-45: color-mix(in srgb, var(--error) 45%, transparent);
  --warn-a-06: color-mix(in srgb, var(--warn) 6%, transparent);
  --warn-a-22: color-mix(in srgb, var(--warn) 22%, transparent);
  --warn-a-35: color-mix(in srgb, var(--warn) 35%, transparent);
  --wechat-a-06: var(--success-a-06);
  --wechat-a-08: var(--success-a-08);
  --wechat-a-12: var(--success-a-12);
  --wechat-a-15: color-mix(in srgb, var(--success) 15%, transparent);
  --wechat-a-18: color-mix(in srgb, var(--success) 18%, transparent);
  --wechat-a-35: var(--success-a-35);
  --wechat-a-38: color-mix(in srgb, var(--success) 38%, transparent);
  --wechat-a-45: var(--success-a-45);
  --overlay: color-mix(in srgb, var(--bg) 66%, transparent);
  --brand-gradient: var(--primary);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.32,.72,0,1);
  --dur-fast: .12s; --dur-base: .18s;
  --focus-ring: 0 0 0 3px var(--primary-a-22);
  --shadow-1: 0 1px 2px rgba(0,0,0,.12);
  --shadow-2: 0 8px 28px rgba(0,0,0,.22);
  --shadow-3: 0 20px 64px rgba(0,0,0,.34);
}

html.light {
  color-scheme: light;
  --bg: #f7f7f7;
  --panel: #ffffff;
  --panel-2: #f1f2f3;
  --surface: var(--panel);
  --border: #d9dce1;
  --text: #1f2328;
  --text-2: #59636f;
  --text-3: #6e7781;
  /* Codex 浅色强调色：深青色，确保在白底上有足够对比度。 */
  --primary: #005f87;
  --primary-2: #004c6d;
  --accent: var(--primary);
  --success: #1a7f37;
  --warn: #9a6700;
  --error: #cf222e;
  --wechat: var(--success);
  --input-bg: #ffffff;
  --btn-hover: #e9eaec;
  --term-bg: #f3f4f5;
  --surface-raised: color-mix(in srgb, var(--panel) 97%, transparent);
  --surface-tint: color-mix(in srgb, var(--text) 2.5%, transparent);
  --surface-tint-2: color-mix(in srgb, var(--text) 4.5%, transparent);
  --overlay: color-mix(in srgb, var(--text) 38%, transparent);
  --shadow-1: 0 1px 2px rgba(31,35,40,.06);
  --shadow-2: 0 8px 28px rgba(31,35,40,.10);
  --shadow-3: 0 20px 60px rgba(31,35,40,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; }
body.drawer-open { overflow: hidden; }
a { color: var(--primary); text-decoration: none; }
button { font: inherit; }
/* 统一线性图标：随父级 color 着色，垂直居中、像素对齐 */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: 0 0 auto; }
.icon svg { display: block; }
input, select, textarea {
  width: 100%; padding: 8px 10px; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--primary); }
textarea { font-family: var(--mono); resize: vertical; min-height: 80px; }
/* 复选框/单选框不应被全局 width:100% 撑满，否则会破坏行内排版 */
input[type="checkbox"], input[type="radio"] { width: auto; flex: none; margin: 0; }
label { display: block; margin: 8px 0 4px; color: var(--text-2); font-size: 12px; }

/* ===== 通用表单字段系统：标签 + 控件 + 说明，统一节奏与对齐 ===== */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack > p { color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { margin: 0; font-weight: 500; }
.field-hint { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.field-row { display: flex; gap: 12px; align-items: flex-start; }
.field-row > .field { flex: 1 1 0; }
.field-row > .field-shrink { flex: 0 0 110px; }
.field-check { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 13px; color: var(--text); }
.field-check span { line-height: 1; }
.upload-box { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--input-bg); border: 1px dashed var(--border); border-radius: 8px; }
.upload-status { min-width: 0; color: var(--text-2); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-status.success { color: var(--success); }
.upload-status.error { color: var(--error); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 6px 12px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.btn:hover { background: var(--btn-hover); }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.primary:hover { background: var(--text-2); border-color: var(--text-2); }
.btn.danger { background: transparent; border-color: var(--error); color: var(--error); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--text-2); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
.tag.queued { color: var(--text-2); }
.tag.running { color: var(--primary); border-color: var(--primary); }
.tag.reviewing { color: var(--warn); border-color: var(--warn); }
.tag.interacting { color: var(--accent); border-color: var(--accent); }
.tag.committing, .tag.starting { color: var(--primary); }
.tag.done { color: var(--success); border-color: var(--success); }
.tag.failed { color: var(--error); border-color: var(--error); }
.tag.blocked, .tag.paused, .tag.incomplete { color: var(--warn); border-color: var(--warn); }
.tag.canceled { color: var(--text-3); border-color: var(--border); }

/* layout */
.shell { display: grid; grid-template-rows: 1fr; height: 100vh; height: 100dvh; }
/* chat-mode：隐藏顶栏，会话标题已顶到最上方 */
.shell.chat-mode .topbar { display: none !important; }
.shell.chat-mode { grid-template-rows: 1fr; }
/* 品牌菜单按钮：默认隐藏，移动端可见（chat-header 和顶栏共用） */
.topbar {
  display: none; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.brand-mark {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  height: 32px; border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-a-24), var(--accent-a-18)); color: var(--text);
  flex-shrink: 0; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.brand-mark:hover { border-color: var(--primary-a-45); }
.brand-mark-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800;
  line-height: 1; flex-shrink: 0;
}
.brand-mark-icon { font-size: 16px; opacity: .6; }
.brand-mark-mobile { display: none; }
/* 抽屉顶部品牌栏 */
.drawer-brand {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.drawer-brand-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--primary-a-35);
}
.drawer-brand-text {
  display: flex; flex-direction: column; min-width: 0;
}
.drawer-brand-name {
  font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--text);
  line-height: 1.2;
}
.drawer-brand-tagline {
  font-size: 11px; color: var(--text-2); line-height: 1.3; margin-top: 1px;
}
/* 抽屉 head 内嵌品牌（栈底显示；进入子页时由 JS 隐藏，让位给「返回 + 标题」） */
.drawer-head-brand { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.drawer-head-brand .drawer-brand-name { font-size: 16px; }
.drawer-head-brand .drawer-brand-tagline { font-size: 10px; }
/* 主菜单品牌 logo 与 Agent 列表头像使用同一尺寸/圆角，形成垂直对齐的通讯录视觉。 */
.drawer-brand-logo.sm { width: 36px; height: 36px; border-radius: 8px; font-size: 15px; box-shadow: 0 2px 8px var(--primary-a-35); }
/* 主菜单内嵌品牌：左对齐，logo 与 Agent 头像对齐 */
.drawer-brand-inline { display: flex; align-items: center; gap: 10px; padding: 14px 4px 8px; }
.drawer-brand-inline .drawer-agent-avatar { box-shadow: 0 2px 8px var(--primary-a-35); }
.drawer-brand-inline-text { display: flex; flex-direction: column; min-width: 0; }
.drawer-brand-inline .drawer-brand-name { font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--text); line-height: 1.2; }
.drawer-brand-inline .drawer-brand-tagline { font-size: 11px; color: var(--text-2); line-height: 1.3; margin-top: 1px; }
.topbar .spacer { flex: 1; }
.topbar-agent-switcher {
  flex: 1; max-width: 200px; height: 32px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-tint); color: var(--text); font-size: 14px; padding: 0 8px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
/* 协同：协助标签 + 弱化卡片 + 权限勾选 */
.collab-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px; height: 16px; line-height: 16px;
  border-radius: 999px; font-size: 10px; font-weight: 600; vertical-align: middle;
  color: var(--accent); background: var(--accent-a-18); border: 1px solid var(--accent-a-45);
}
.collab-agent-card { border-left: 2px solid var(--accent-a-45); }
.collab-perms { display: grid; gap: 10px; margin-top: 10px; }
.collab-perm-group { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); }
.collab-perm-group.high-risk { border-color: var(--warn-a-35); background: var(--warn-a-06); }
.collab-perm-group-title { color: var(--text-2); font-size: 12px; font-weight: 650; }
.collab-perm { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.collab-member .btn.danger { flex: 0 0 auto; }
.friends-page { max-width: 1040px; }
.friends-page-card { display: grid; gap: 14px; }
.friends-card-head, .friends-hero, .friends-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.friends-card-head h3, .friends-card-head p, .friends-hero h3, .friends-hero p, .friends-section-head h3, .friends-section-head p { margin: 0; }
.friends-overview { display: grid; gap: 10px; }
/* 概览顶栏：一句话说明 + 通知铃 + 号码卡，压成一条纤细横栏，把纵向篇幅让给好友列表 */
.friends-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint);
}
.friends-topbar-sub { font-size: 12px; line-height: 1.5; min-width: 0; }
.friends-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.friends-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; color: var(--text-2);
  border: 1px solid var(--border); background: var(--panel);
}
.friends-bell.has { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.friends-bell-dot {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--mono); color: #fff; background: var(--warn); border-radius: 999px;
}
.friend-self-alias {
  display: grid; gap: 2px; justify-items: end; padding: 8px 12px;
  border: 1px solid var(--primary-a-35); border-radius: 12px; background: var(--primary-a-08);
  color: var(--text); cursor: pointer; min-width: 132px;
}
.friend-self-alias:hover { background: var(--primary-a-12); border-color: var(--primary-a-45); }
.friend-self-alias span { color: var(--text-2); font-size: 11px; line-height: 1.2; }
.friend-self-alias strong { color: var(--primary); font: 700 16px/1.2 var(--mono); letter-spacing: .02em; }
/* 顶栏内的号码卡收窄成一行胶囊，避免占两行高度 */
.friend-self-alias.compact {
  display: inline-flex; align-items: baseline; gap: 6px; justify-items: initial;
  padding: 6px 10px; border-radius: 999px; min-width: 0;
}
.friend-self-alias.compact span { font-size: 11px; }
.friend-self-alias.compact strong { font-size: 13px; }
.friends-network, .friends-card-list { display: grid; gap: 10px; }
.friends-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.friend-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-tint); }
.agent-friend-card { border-left: 3px solid var(--accent-a-45); }
.human-friend-card { border-left: 3px solid var(--success-a-35); }
.friend-card-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: flex-start; }
.friend-avatar { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 750; }
.friend-avatar.agent { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.friend-avatar.human { background: var(--success); }
.friend-card-body { min-width: 0; display: grid; gap: 4px; }
.friend-card-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.friend-card-meta, .friend-skill, .friend-source-note { font-size: 12px; }
.friend-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-tint); color: var(--text-2); font-size: 11px; line-height: 1.45; }
.friend-badge.agent, .friend-badge.stage, .friend-badge.manual { color: var(--primary); border-color: var(--primary-a-35); background: var(--primary-a-08); }
.friend-badge.human { color: var(--success); border-color: var(--success-a-35); background: var(--success-a-06); }
.friend-badge.auto { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.friend-badge.system { color: var(--accent); border-color: var(--accent-a-45); background: var(--accent-a-18); }
.friend-flow-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.friend-perm-block { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 12px; }
.friend-perm-block.risk { color: var(--warn); }
.friend-perm-label { color: var(--text-2); }
.friend-card-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.friend-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 6px; }
.friend-search { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px; }
.friend-search:focus { outline: none; border-color: var(--primary-a-45); box-shadow: 0 0 0 3px var(--primary-a-12); }
.friends-empty { padding: 22px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; background: var(--surface-tint); }
.friends-empty.compact { padding: 14px; color: var(--text-2); font-size: 13px; }
.friends-requests { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-tint); }
.friends-requests.has-incoming { border-color: var(--warn-a-35); background: var(--warn-a-06); }
.friends-request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.friends-request-head h3, .friends-request-head p { margin: 0; }
.friends-request-head.compact { align-items: center; }
.friends-request-head.compact strong { font-size: 13px; }
.friends-requests { padding: 10px 12px; }
.friends-request-body { display: grid; gap: 8px; }
.friends-request-title { color: var(--text-2); font-size: 12px; font-weight: 650; }
.friends-request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.friend-add-hint, .friend-resolve-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); font-size: 13px; line-height: 1.55; }
.friend-add-hint.compact { padding: 8px 10px; font-size: 12px; color: var(--text-2); }
.friend-config-form { display: grid; gap: 12px; }
.friend-config-section { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-tint); }
.friend-config-section-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.friend-config-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--primary-a-12); color: var(--primary); font-size: 11px; font-weight: 800; }
.friend-config-section-head strong { display: block; font-size: 13px; line-height: 1.3; }
.friend-config-section-head p { margin: 2px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.friend-config-extra { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); padding: 0 10px; }
.friend-config-extra summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px; color: var(--text); font-size: 13px; font-weight: 650; }
.friend-config-extra summary em { color: var(--text-2); font-size: 11px; font-style: normal; font-weight: 500; }
.friend-config-extra textarea { margin: 0 0 10px; }
.friend-config-advanced { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); padding: 0 10px; }
.friend-config-advanced > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px; color: var(--text); font-size: 13px; font-weight: 650; list-style: none; }
.friend-config-advanced > summary::-webkit-details-marker { display: none; }
.friend-config-advanced > summary::before { content: '›'; display: inline-block; width: 14px; color: var(--text-2); transform: rotate(0deg); transition: transform .15s; }
.friend-config-advanced[open] > summary::before { transform: rotate(90deg); }
.friend-config-advanced > summary em { color: var(--text-2); font-size: 11px; font-style: normal; font-weight: 500; }
.friend-config-advanced .friend-config-form { padding: 0 2px 10px; }
.friend-resolve-card.agent { border-color: var(--primary-a-35); background: var(--primary-a-08); }
.friend-resolve-card.human { border-color: var(--success-a-35); background: var(--success-a-06); }
.friend-resolve-card.warn { border-color: var(--warn-a-35); background: var(--warn-a-06); color: var(--warn); }
.main { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 1fr; min-height: 0; }
.side {
  background: var(--panel); border-right: 1px solid var(--border); padding: 12px 8px;
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.side-user-card { display: none; }
.side-user-avatar { display: none; }
.side-user-info { display: none; }
.side-user-name { display: none; }
.side-user-meta { display: none; }
.side-agent-list { display: none; }
.side-new-agent { display: none; }
.side-agent-item { display: none; }
.side-agent-info { display: none; }
.side-agent-info-head { display: none; }
.side-agent-info-meta { display: none; }
.side-agent-info-detail { display: none; }
.side-agent-info-row { display: none; }
.side-agent-info-actions { display: none; }
.side-agent-head {
  padding: 8px 12px; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-tint);
}
.side-agent-avatar {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
}
.side-agent-head:hover { background: var(--panel-2); border-color: var(--primary-a-45); }
.side-agent-head-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.side-agent-name {
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-agent-type {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 11px; color: var(--text-2); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-agent-id {
  display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 999px;
  background: var(--primary-a-08); color: var(--primary); border: 1px solid var(--primary-a-22);
  font-family: var(--mono); font-weight: 650; line-height: 1.25;
}
.side-agent-sep { opacity: .45; }
.side-agent-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; margin-top: 4px;
}
.side-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: transparent;
  color: var(--text-2); border-radius: 6px; cursor: pointer;
  text-align: left; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.side-nav-item:hover { background: var(--panel-2); color: var(--text); }
.side-nav-item.active {
  background: var(--primary-a-08); color: var(--primary); font-weight: 600;
}
.side-nav-icon { font-size: 14px; line-height: 1; }
.content { padding: 16px 20px; overflow: auto; min-width: 0; min-height: 0; contain: layout paint; scrollbar-gutter: stable; }
/* 切换栏目时新视图轻微淡入，配合双缓冲渲染消除生硬切换（聊天模式不加，避免每次进会话闪动）。 */
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.shell:not(.chat-mode) .content > * { animation: viewFadeIn .16s ease-out; }
/* 聊天模式：.content 必须【完全不设】containment。
   注意：contain 的 layout 与 paint 两者【都】会让元素成为 absolute/fixed 后代的「包含块」
   （不是只有 paint 才会）。此前误以为「只留 layout」就安全，实际 contain:layout 仍使 .content
   成为移动端工作区浮层（position:fixed）的包含块 → 浮层以 .content（带内边距/可滚动/在网格内）为参照，
   而遮罩挂在 body 上以视口为参照，二者错位、浮层被裁剪偏移。故这里置为 none，让 fixed 面板回到视口定位。 */
.shell.chat-mode .content { contain: none; }


/* ============ 登录页（简洁扁平 + 精致细节：居中单卡片，克制纵深与入场动效） ============ */
.login-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-card { width: 396px; max-width: 92vw; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 56px rgba(0,0,0,.10); animation: loginCardIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes loginCardIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
/* 品牌区：居中、mark 在上、名称+副题在下，更精致对称 */
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; }
.login-brand-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 21px; font-weight: 800; color: #fff; background: var(--primary); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 34%, transparent); }
.login-brand-text { display: flex; flex-direction: column; gap: 4px; }
.login-brand-text h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .08em; color: var(--text); }
.login-brand-sub { font-size: 12.5px; color: var(--text-2); letter-spacing: .04em; }
/* 口令：字距舒展、等宽、微内阴影，突出「一串可读的码」的精致感 */
.login-code { margin: 14px 0 2px; padding: 18px 16px; text-align: center; font: 32px/1 var(--mono); letter-spacing: .36em; text-indent: .36em; color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.05); }
.login-help { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; text-align: center; letter-spacing: .02em; line-height: 1.7; }
.login-help .btn { margin: 12px auto 0; width: 100%; }
.login-emergency { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.wechat-bind-modal { text-align: center; }
.wechat-qr-frame { display: inline-flex; padding: 12px; margin: 8px auto 10px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.wechat-qr { display: block; width: 240px; max-width: 100%; border-radius: 8px; background: white; padding: 0; object-fit: contain; }

/* 登录方式面板：切换时轻微淡入上浮，细节更顺滑 */
.login-method-panel { animation: loginPanelFade .28s ease both; }
@keyframes loginPanelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 登录方式分段切换（口令主，扫码/账号密码为辅）：扁平药丸，激活态单色实底 */
.login-method-tabs { display: flex; gap: 4px; margin: 6px 0 18px; padding: 4px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; }
.login-method-tab { flex: 1 1 0; min-width: 0; padding: 9px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 13px; letter-spacing: .02em; cursor: pointer; transition: background .18s ease, color .18s ease; }
.login-method-tab:hover { color: var(--text); }
.login-method-tab.active { color: #fff; font-weight: 600; background: var(--primary); }
/* 卡内输入与标签：统一精致间距 */
.login-card label { display: block; font-size: 12.5px; color: var(--text-2); letter-spacing: .02em; margin-bottom: 4px; }
.login-card input { border-radius: 10px; }
.login-qr-placeholder { display: grid; place-items: center; width: 204px; height: 204px; margin: 8px auto 6px; border-radius: 14px; border: 1px dashed var(--border); background: var(--panel-2); color: var(--text-2); font-size: 13px; }
.login-qr-img { display: block; width: 204px; height: 204px; margin: 8px auto 6px; border-radius: 14px; background: #fff; padding: 8px; object-fit: contain; box-shadow: 0 6px 22px rgba(0,0,0,.10); }
.login-qr-img[hidden], .login-qr-placeholder[hidden] { display: none; }
.login-aux-note { font-size: 12px; color: var(--text-2); text-align: center; margin: 10px 0 0; letter-spacing: .02em; line-height: 1.6; }

/* ============ 登录页星空主题：与首页同源的深空背景 + 玻璃卡（视觉连贯，不随明暗主题变浅） ============ */
.login-page.login-cosmos { background: #070b16; overflow: hidden; }
.login-cosmos::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 460px at 50% 34%, rgba(90,120,220,.16), transparent 70%); }
.login-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.login-cosmos .login-card { position: relative; z-index: 1; background: rgba(18,26,48,.55); border: 1px solid rgba(160,190,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.login-cosmos .login-brand-mark { box-shadow: 0 0 20px rgba(124,140,255,.5); }
.login-cosmos .login-brand-text h1 { color: #f2f5ff; }
.login-cosmos .login-brand-sub { color: rgba(220,226,245,.65); }
.login-cosmos .muted { color: rgba(220,226,245,.62); }
.login-cosmos .login-aux-note { color: rgba(210,218,240,.5); }
.login-cosmos .login-code { color: #eaf0ff; background: rgba(150,180,255,.06); border-color: rgba(160,190,255,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.login-cosmos .login-method-tabs { background: rgba(255,255,255,.04); border-color: rgba(160,190,255,.14); }
.login-cosmos .login-method-tab { color: rgba(220,226,245,.6); }
.login-cosmos .login-method-tab:hover { color: #eaf0ff; }
.login-cosmos .login-method-tab.active { color: #fff; background: var(--primary); }
.login-cosmos .login-card label { color: rgba(220,226,245,.7); }
.login-cosmos input { background: rgba(255,255,255,.05); border-color: rgba(160,190,255,.2); color: #eaf0ff; }
.login-cosmos input::placeholder { color: rgba(210,218,240,.4); }
.login-cosmos input:focus { border-color: rgba(150,180,255,.7); box-shadow: 0 0 0 3px rgba(120,150,255,.22); }
.login-cosmos .login-help { color: rgba(220,226,245,.6); border-top-color: rgba(160,190,255,.14); }
.login-cosmos .btn { background: rgba(150,180,255,.08); border: 1px solid rgba(160,190,255,.32); color: #eaf0ff; box-shadow: none; }
.login-cosmos .btn:hover { background: rgba(160,190,255,.14); border-color: rgba(185,208,255,.6); }
.login-cosmos .btn.primary { background: var(--primary); border-color: transparent; color: #fff; }
.login-cosmos .btn.primary:hover { background: var(--primary); filter: brightness(1.06); }
.login-cosmos .login-qr-placeholder { background: rgba(255,255,255,.04); border-color: rgba(160,190,255,.24); color: rgba(220,226,245,.6); }

/* ============ 未登录首页（slogan「数字微光，群星永恒」：深空星空 + 微光呼吸 + 指针视差） ============ */
/* 落地页是营销门面，独立于应用内扁平 UI：固定深空底色，让 canvas 群星与文字微光始终可见（不随主题变浅）。 */
.home-landing.home-cosmos { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; text-align: center; background: #070b16; color: #e8ecf8; }
/* 极轻的中心微光（“数字微光”）——单一柔光斑，非炫目渐变。 */
.home-cosmos::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 460px at 50% 38%, rgba(90,120,220,.16), transparent 70%); }
.home-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.home-cosmos .home-hero { position: relative; z-index: 1; max-width: 620px; animation: homeHeroIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes homeHeroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.home-cosmos .home-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.home-cosmos .home-brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); font-size: 16px; font-weight: 800; color: #fff; background: var(--primary); box-shadow: 0 0 18px rgba(124,140,255,.55); }
.home-cosmos .home-brand-name { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #e8ecf8; }
.home-title { margin: 0 0 18px; font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: .08em; color: #f2f5ff; }
.home-title-comma { opacity: .55; margin: 0 .04em; }
/* 微光呼吸：标题辉光缓慢明灭，呼应“数字微光”。 */
.home-title-a, .home-title-b { text-shadow: 0 0 22px rgba(150,180,255,.45); animation: homeGlow 4.2s ease-in-out infinite; }
.home-title-b { animation-delay: 1.4s; }
@keyframes homeGlow { 0%,100% { text-shadow: 0 0 14px rgba(150,180,255,.28); } 50% { text-shadow: 0 0 30px rgba(170,195,255,.6); } }
.home-sub { margin: 0 0 32px; font-size: 15px; line-height: 1.8; color: rgba(220,226,245,.72); letter-spacing: .02em; }
.home-actions { display: flex; justify-content: center; }
/* 轻盈「光丝胶囊」CTA：半透明、发丝级星蓝描边、微磨砂，去掉实心色块与重投影，追求艺术感的克制。 */
.home-cta.btn.primary { display: inline-flex; align-items: center; gap: .55em; min-width: 0; padding: 10px 24px; font-size: 14.5px; font-weight: 500; letter-spacing: .16em; text-indent: .16em; color: #e6ecff; background: rgba(150,180,255,.05); border: 1px solid rgba(160,190,255,.32); border-radius: 999px; box-shadow: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, letter-spacing .3s ease, color .3s ease; }
.home-cta.btn.primary:hover { transform: none; color: #fff; letter-spacing: .2em; background: rgba(160,190,255,.1); border-color: rgba(185,208,255,.62); box-shadow: 0 0 22px rgba(120,150,255,.25); }
.home-cta.btn.primary:active { transform: none; background: rgba(160,190,255,.14); }
.home-cta-arrow { display: inline-block; opacity: .65; transform: translateX(0); transition: transform .3s ease, opacity .3s ease; }
.home-cta.btn.primary:hover .home-cta-arrow { transform: translateX(4px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-cta-arrow { transition: none; } }
.home-cosmos .home-foot { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(200,208,235,.4); letter-spacing: .06em; }
@media (max-width: 560px) { .home-title { font-size: 28px; letter-spacing: .05em; } .home-sub { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .home-cosmos .home-hero { animation: none; }
  .home-title-a, .home-title-b { animation: none; text-shadow: 0 0 18px rgba(150,180,255,.4); }
}

.type-picker { display: grid; gap: 10px; margin: 12px 0 18px; }
/* 类型选择：图标选项卡网格与所选类型描述。 */
.type-picker-v2 { display: grid; gap: 10px; margin: 8px 0 12px; }
.type-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-option {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
}
.type-option:hover { border-color: var(--primary-a-35); background: var(--panel-2); }
.type-option:active { transform: scale(.99); }
.type-option.active { border-color: var(--primary); background: var(--primary-a-08); box-shadow: 0 0 0 1px var(--primary-a-35) inset; }
.type-option-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: var(--surface-tint); color: var(--text-2);
}
.type-option.active .type-option-icon { background: var(--primary-a-12); color: var(--primary); }
.type-option-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-option-check { display: inline-flex; flex-shrink: 0; color: var(--primary); }
.type-option-hint { margin: 0; font-size: 12px; line-height: 1.5; min-height: 18px; }
.type-search-input { width: 100%; }
.type-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.type-group-title { font-weight: 700; font-size: 13px; }
.type-picker-hint { font-size: 12px; text-align: right; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.type-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; background: var(--surface-tint); }
.type-card {
  position: relative; overflow: hidden;
  text-align: left; padding: 14px 42px 14px 14px; min-height: 104px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer;
  transition: background .16s var(--ease-standard), border-color .16s var(--ease-standard), box-shadow .2s var(--ease-standard), transform .2s var(--ease-spring);
}
.type-card-title {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px; min-height: 28px; margin-bottom: 6px;
}
.type-card-title-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.type-card-source { justify-self: end; font-style: normal; font-size: 10px; font-weight: 650; color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }
.type-card > span:not(.type-card-check):not(.type-card-title-text) { display: block; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.type-card:hover { background: var(--panel-2); transform: translateY(-1px); }
.type-card:active { transform: scale(.985); }
.type-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-a-35) inset, 0 10px 24px var(--primary-a-08); }
.type-card-check {
  position: absolute; top: 12px; right: 12px;
  display: flex !important; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: #fff; background: var(--primary);
  font-size: 13px; font-weight: 800; line-height: 1;
  opacity: 0; transform: scale(.72);
  transition: opacity .16s var(--ease-standard), transform .24s var(--ease-spring);
}
.type-card.active .type-card-check { opacity: 1; transform: scale(1); }
.manage-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.manage-tab-body { display: block; }
.form-section { border-top: 1px solid var(--border); padding-top: 8px; }
.works-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.git-operation-card { margin-top: 12px; overflow: hidden; }
.git-operation-card.publish-only { margin-top: 0; border: none; background: transparent; box-shadow: none; padding: 0; }
.git-operation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  gap: 14px;
  align-items: start;
  padding: 2px 0 12px;
}
.git-operation-title { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.git-operation-title h3 { margin: 0; }
.git-operation-kicker {
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid var(--primary-a-35);
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-a-06);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.git-status-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.git-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-tint);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.git-status-chip.ok { color: var(--success); border-color: var(--success-a-35); background: var(--success-a-06); }
.git-status-chip.warn { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.git-status-chip.bad { color: var(--error); border-color: var(--error-a-35); background: var(--error-a-06); }
.git-status-chip.running { color: var(--primary); border-color: var(--primary-a-45); background: var(--primary-a-08); }
.git-publish-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.git-publish-flow span { display: flex; align-items: center; gap: 6px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg, var(--surface-tint), transparent); color: var(--text-2); font-size: 12px; }
.git-publish-flow em { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--primary-a-12); color: var(--primary); font-style: normal; font-weight: 800; font-size: 11px; }
.git-publish-flow b { font-weight: 650; color: var(--text); }
.git-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.git-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-tint);
}
.git-action-card.publish { border-color: var(--primary-a-38); background: linear-gradient(135deg, var(--primary-a-12), var(--surface-tint)); }
.git-action-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--primary-a-35);
  color: var(--primary);
  background: var(--primary-a-08);
}
.git-action-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.git-action-body strong { color: var(--text); }
.git-action-body span { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.git-action-card .btn { grid-column: 1 / -1; justify-content: center; }
.git-status-terminal { margin-top: 8px; max-height: 260px; overflow: auto; }
/* 能力翻译卡：把抽象工具讲成"AI 现在能做什么 + 可以这样问" */
.capability-usage-hint {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--primary-a-35); border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-a-08), var(--surface-tint));
}
.cap-usage-title { font-weight: 650; color: var(--text); margin-bottom: 8px; }
.cap-usage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cap-chip {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--primary-a-35); background: var(--primary-a-08);
  color: var(--primary); font-size: 12px; font-weight: 600;
}
.cap-usage-eg { color: var(--text-2); font-size: 12px; line-height: 1.5; }
/* 工具清单"待配置/未生效"默认折叠，降低理解成本 */
.tool-section-collapsible > summary { list-style: none; cursor: pointer; }
.tool-section-collapsible > summary::-webkit-details-marker { display: none; }
.tool-fold-hint::after { content: '展开 ▾'; font-size: 12px; }
.tool-section-collapsible[open] > summary .tool-fold-hint::after { content: '收起 ▴'; }
.tool-sub-label { padding: 4px 0 2px; border-top: 1px dashed var(--border); margin-top: 10px; font-weight: 500; }
.works-empty { max-width: 760px; }
.works-empty h3 { margin-top: 0; }
.works-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.works-section-head h3, .works-section-head p { margin: 0; }
.works-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; margin: 12px 0; }
.works-recommended { margin: 10px 0 12px; padding: 10px; border: 1px solid var(--primary-a-24); border-radius: 12px; background: var(--primary-a-06); }
.works-file-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.works-file-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.works-file-row:last-child { border-bottom: none; }
.works-file-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.works-file-topline { min-width: 0; display: flex; align-items: center; gap: 7px; }
.works-file-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.file-kind-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-tint-2), transparent);
  color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.file-kind-icon svg { display: block; }
.file-kind-icon.dir,
.file-kind-icon.code,
.file-kind-icon.style,
.file-kind-icon.image,
.file-kind-icon.doc,
.file-kind-icon.data,
.file-kind-icon.shell,
.file-kind-icon.archive {
  color: var(--text-2); border-color: var(--border); background: transparent;
}
.works-file-name { min-width: 0; display: flex; align-items: center; gap: 8px; }
.works-file-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.works-file-meta { white-space: nowrap; text-align: right; font-size: 12px; justify-self: end; }
.works-file-actions { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.artifact-ext-badge {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-tint); color: var(--text-2);
  font: 10px/1.45 var(--mono);
}
.works-file-public-badge {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--success-a-45, var(--primary-a-38)); background: var(--success-a-08, var(--primary-a-08));
  color: var(--success, var(--primary)); font-size: 10px; line-height: 1.5; font-weight: 600;
}
.works-file-open,
.works-file-action {
  flex: 0 0 auto; min-height: 28px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--primary-a-38); background: var(--primary-a-08);
  color: var(--primary); font-size: 12px; line-height: 1.35; cursor: pointer;
}
.works-file-action { font-family: inherit; }
.works-file-open:hover,
.works-file-action:hover { background: var(--primary-a-16); }
.works-file-action.danger { color: var(--text-2); border-color: var(--border); background: var(--surface-tint); }
.works-file-action.danger:hover { color: var(--error); border-color: var(--error-a-45); background: var(--error-a-08); }
.model-picker-card { margin: 12px 0 18px; }
.model-policy-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.model-policy-row:first-of-type { border-top: none; }
.project-page, .settings-page, .friends-page { width: 100%; max-width: 1040px; margin: 0 auto; }
.settings-stack { display: flex; flex-direction: column; gap: 12px; }
.settings-card { display: flex; flex-direction: column; gap: 8px; }
.settings-card h3 { margin: 0; }
.settings-card p { margin: 0; }
.settings-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
/* 版本管理弹层：Git 配置默认折叠，把空间留给高频操作（保存并发布 / Pull / 全量更新） */
.version-config-details { border: 1px solid var(--border); border-radius: var(--r-lg, 10px); background: var(--panel-2, var(--bg)); }
.version-config-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 650; color: var(--text); }
.version-config-details > summary::-webkit-details-marker { display: none; }
.version-config-details > summary::after { content: '⌄'; font-size: 16px; color: var(--text-2); transition: transform .15s; }
.version-config-details[open] > summary::after { transform: rotate(180deg); }
.version-config-details > .muted { padding: 0 14px; }
.version-config-details .settings-card { border-top: 1px solid var(--border); border-radius: 0; }
.version-config-details .settings-card:first-of-type { margin-top: 4px; }
.version-config-summary-title { flex: 1; }
.setting-readonly { padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-tint); color: var(--text-2); font-family: var(--mono); font-size: 12px; }
.setting-copy { width: 100%; justify-content: flex-start; cursor: pointer; }
.settings-identity-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, var(--primary-a-08), var(--surface-tint)); margin-bottom: 12px; }
.settings-agent-avatar { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 18px; }
.settings-identity-main { min-width: 0; display: grid; gap: 4px; }
.settings-identity-main strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 号码收进身份卡：点击即复制，做成低调的可点胶囊 */
.settings-identity-no {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  padding: 2px 8px; border: 1px solid var(--primary-a-35); border-radius: 999px;
  background: var(--primary-a-08); color: var(--primary); cursor: pointer;
  font: 700 13px/1.3 var(--mono); transition: background .15s, border-color .15s;
}
.settings-identity-no:hover { background: var(--primary-a-12); border-color: var(--primary-a-45); }
.settings-identity-no-copy { opacity: .7; }
.settings-identity-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* 类型只读：图标 + 名称的胶囊，明显不是可编辑输入框 */
.setting-type-readonly { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; color: var(--text); }
.setting-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; background: var(--primary-a-12); color: var(--primary);
}
/* 设置页内的跳转入口行（如编程类的 Git 配置）：整行可点，右侧箭头 */
.settings-entry-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-tint); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.settings-entry-row:hover { border-color: var(--primary-a-35); background: var(--panel-2); }
.settings-entry-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--primary-a-12); color: var(--primary);
}
.settings-entry-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.settings-entry-main strong { font-size: 14px; }
.settings-entry-main .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-entry-arrow { flex-shrink: 0; color: var(--text-2); transform: rotate(-90deg); }
.settings-danger-details { gap: 0; }
.settings-danger-details summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; list-style: none; }
.settings-danger-details summary::-webkit-details-marker { display: none; }
.settings-danger-details summary em { color: var(--text-2); font-size: 12px; font-style: normal; font-weight: 500; }
.settings-danger-list { display: grid; gap: 10px; margin-top: 12px; }
.settings-danger-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); }
.settings-danger-row.warn { border-color: var(--warn-a-35); background: var(--warn-a-06); }
.settings-danger-row.danger { border-color: var(--error-a-35); background: var(--error-a-08); }
.settings-danger-row p { margin: 2px 0 0; font-size: 12px; }
.cap-page { max-width: 1040px; }
.cap-grid { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(360px,1.2fr); gap: 12px; align-items: start; }
.skill-template { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.skill-template:last-child { border-bottom: none; }
.skill-enabled-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.skill-enabled-row:last-child { border-bottom: none; }
.skill-enabled-row > div:first-child { min-width: 0; }
.skill-enabled-row strong { font-weight: 600; }
.skill-enabled-row .muted { margin-top: 2px; font-size: 12px; line-height: 1.5; word-break: break-word; }
.skill-enabled-row pre { grid-column: 1 / -1; margin: 6px 0 0; }

/* ── Agent 工具页：创作者视角的工具开关 + 设置 + 内置能力 ── */
.tool-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; }
.tool-guide-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--surface-tint), transparent); transition: border-color .18s ease, transform .18s ease; }
.tool-guide-card:hover { border-color: var(--primary-a-35, rgba(99,102,241,.35)); transform: translateY(-1px); }
.tool-guide-top { display: flex; align-items: center; gap: 8px; }
.tool-guide-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.tool-guide-card strong { font-size: 13px; font-weight: 650; }
.tool-guide-card span { color: var(--text-2); font-size: 12px; line-height: 1.55; }
.cap-card { padding-top: var(--sp-3, 10px); }
/* 筛选条：全部 / 已开启 / 需要处理 / 可开启 + 搜索 */
.cap-filterbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 4px; background: var(--surface, var(--bg)); border-bottom: 1px solid var(--border); }
.cap-filter-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
/* 分组（本 Agent 的工具 / 内置能力） */
.cap-group { margin-top: 14px; }
.cap-group-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px; }
.cap-group-head strong { font-size: 14px; font-weight: 650; }
.cap-count { font-size: 11px; color: var(--text-2); background: var(--surface-tint); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; line-height: 1.6; }
.cap-group-note { font-size: 12px; }
.cap-rows { margin-top: 4px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
/* Ownership 小节表头（平台提供 / 预置 / 我的） */
.cap-sub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 2px 2px; }
.cap-sub-label { font-size: 12px; font-weight: 650; color: var(--text); }
.cap-sub-note { font-size: 11px; line-height: 1.5; }
/* 行：主体（来源·名称·状态 / 描述 / 原因）+ 操作，三区对齐 */
.cap-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.cap-row:last-child { border-bottom: none; }
.cap-row:hover { background: var(--surface-tint); }
.cap-row-readonly:hover { background: var(--surface-tint); }
.cap-row-readonly { background: var(--surface-tint); border-left: 3px solid var(--primary-a-35, rgba(99,102,241,.35)); }
.cap-row-main { min-width: 0; }
.cap-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cap-name { font-weight: 600; font-size: 13px; }
.cap-desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-reason { margin-top: 4px; font-size: 12px; line-height: 1.45; color: #b45309; background: rgba(245,158,11,.1); border-radius: 6px; padding: 3px 8px; }
.cap-row-action { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.cap-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* 来源标签：中性描边，不承载状态语义 */
.cap-source { flex-shrink: 0; font-size: 11px; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-tint); color: var(--text-2); white-space: nowrap; }
/* 状态胶囊：色块 + 形状标记（色觉障碍冗余）+ 文案。一色一义 */
.cap-status { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.cap-status-mark { font-size: 9px; line-height: 1; }
/* 「需要设置」是唯一需要用户动手的状态，给状态点一个克制的呼吸提示引导注意；其余状态保持静止避免噪音。 */
.cap-status--pending .cap-status-mark { animation: capPendingPulse 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes capPendingPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .cap-status--pending .cap-status-mark { animation: none; }
  .tool-guide-card, .cap-row { transition: none; }
  .tool-guide-card:hover { transform: none; }
}
.cap-empty { padding: 28px 12px; text-align: center; font-size: 13px; }
/* 默认已具备（折叠，只读，普通用户视图） */
.cap-defaults { margin-top: 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-tint); }
.cap-defaults > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; color: var(--text-2); }
.cap-defaults > summary::-webkit-details-marker { display: none; }
.cap-defaults > summary::before { content: '▸'; color: var(--text-2); font-size: 11px; }
.cap-defaults[open] > summary::before { content: '▾'; }
.cap-defaults-title { font-weight: 600; color: var(--text); }
.cap-defaults-body { padding: 0 14px 12px; }
.cap-defaults-body .cap-rows { background: var(--surface, var(--bg)); }
/* 配置管理：按生效范围分组的工具条 */
.cfgmgr-bar { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.cfgmgr-scope { display: flex; flex-direction: column; gap: 5px; }
.cfgmgr-scope-label { font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.cfgmgr-scope-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* 配置中心：同一类型内纵向堆叠多张卡（对话/能力模型、我的默认/本 Agent） */
.cfg-stack { display: flex; flex-direction: column; gap: 14px; }
/* 「本 Agent · 专属」层级小标题：与「我的默认」卡物理隔离 */
.cfg-scope-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 2px 0; border-top: 1px dashed var(--border); margin-top: 2px; }
.cfg-scope-title { font-size: 13px; font-weight: 650; color: var(--text); }
.cfg-scope-note { font-size: 11px; line-height: 1.5; }
/* 「我的默认（跨所有 Agent）」警示头：提醒此处编辑会波及所有引用它的 Agent */
.cfg-scope-head.cfg-scope-warn { border-top-color: rgba(245,158,11,.45); background: rgba(245,158,11,.06); border-radius: 8px; padding: 6px 8px; }
.cfg-scope-head.cfg-scope-warn .cfg-scope-title { color: #b45309; }
@media (max-width: 640px) {
  .tool-guide { grid-template-columns: 1fr; }
  .cap-row { grid-template-columns: 1fr; align-items: flex-start; }
  .cap-row-action { justify-content: flex-start; }
  .cap-desc { white-space: normal; }
}

/* 钉一下（对话内）队列记录与状态标签的通用样式（status chip / 图标按钮等仍复用） */
.todo-panel { display: grid; gap: 10px; }
.todo-panel-intro { font-size: 12px; line-height: 1.6; margin: 0; }
.todo-add-wrap { display: grid; gap: 8px; }
.todo-add-input { width: 100%; resize: vertical; font-size: 13px; line-height: 1.5; min-height: 74px; }
.todo-add-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.todo-panel .todo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.todo-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.todo-summary-chip, .todo-status-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-tint); color: var(--text-2); font-size: 11px; line-height: 1.45; padding: 1px 7px; white-space: nowrap; }
.todo-summary-chip.queued, .todo-status-chip.queued { color: var(--primary); border-color: var(--primary-a-35); background: var(--primary-a-08); }
.todo-summary-chip.running, .todo-status-chip.running { color: var(--primary); border-color: var(--primary-a-45); background: var(--primary-a-12); }
.todo-summary-chip.error, .todo-status-chip.error { color: var(--error); border-color: var(--error-a-35); background: var(--error-a-08); }
.todo-summary-chip.done, .todo-status-chip.done { color: var(--text-2); opacity: .8; }
.todo-status-chip.new { color: var(--text); }
.todo-status-chip.queued-other { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.todo-list { display: flex; flex-direction: column; gap: 4px; }
.todo-group-title { margin: 8px 2px 2px; color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.todo-row { display: grid; grid-template-columns: auto 1fr auto; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); }
.todo-row.selected { background: var(--primary-a-08); border-color: var(--primary-a-35); }
.todo-row-error { border-color: var(--error-a-35); background: var(--error-a-06); }
.todo-row-queued, .todo-row-running { border-color: var(--primary-a-24); }
.todo-row .todo-check { display: flex; align-items: center; padding-top: 3px; cursor: pointer; }
.todo-row .todo-body { min-width: 0; }
.todo-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; }
.todo-row .todo-content { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.todo-row .todo-content.todo-st-in_progress { color: var(--primary); }
.todo-row .todo-content.todo-st-error { color: var(--error); }
.todo-row .todo-content.todo-st-completed { color: var(--text-2); opacity: .55; text-decoration: line-through; }
.todo-error-note { margin-top: 4px; color: var(--error); font-size: 11px; line-height: 1.45; }
.todo-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; max-width: 190px; }
.todo-action-text { min-height: 28px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; }
.todo-action-text:hover { color: var(--text); background: var(--surface-tint-2); }
.todo-action-text.primary { color: var(--primary); border-color: var(--primary-a-35); background: var(--primary-a-08); }
.todo-action-text.on { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.todo-icon-btn, .todo-pin { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--text-2); cursor: pointer; opacity: .65; transition: all .15s; flex-shrink: 0; }
.todo-icon-btn:hover, .todo-pin:hover { background: var(--surface-tint); opacity: .95; }
.todo-icon-btn.danger:hover { color: var(--error); background: var(--error-a-08); }
.todo-completed-toggle { align-self: flex-start; margin-top: 6px; }
.todo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0; color: var(--text-2); }

/* 「钉一下」面板：核心区（主）/ 队列记录（次）主次分明 */
.pin-panel { display: grid; gap: 16px; }
/* 核心区：撰写 + 单一主操作，用强调卡片突出为主区域 */
.pin-compose { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--primary-a-24); border-radius: 14px; background: var(--primary-a-08); }
.pin-compose-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-2); }
.pin-compose-input { width: 100%; resize: vertical; min-height: 74px; font-size: 13px; line-height: 1.55; }
.pin-compose-actions { display: flex; justify-content: flex-end; }
/* 队列记录：弱化为次级区域 */
.pin-records { display: grid; gap: 8px; }
.pin-records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 6px; border-bottom: 1px solid var(--border); }
.pin-records-title { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.pin-records-counts { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.pin-list { display: flex; flex-direction: column; gap: 6px; }
.pin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-tint); }
.pin-row-error { border-color: var(--error-a-35); background: var(--error-a-06); }
.pin-row-running, .pin-row-queued { border-color: var(--primary-a-24); }
.pin-row-body { min-width: 0; display: grid; gap: 5px; }
.pin-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pin-row-content { white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: 13px; }
.pin-row-content.is-completed { color: var(--text-2); opacity: .55; text-decoration: line-through; }
.pin-row-actions { display: inline-flex; align-items: center; gap: 2px; }
.pin-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 0; color: var(--text-2); }
.disk-mount-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.disk-mount-row:last-child { border-bottom: none; }
.danger-zone { margin-top: 28px; border-color: var(--error-a-45); }

/* tool page */
.tool-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; }
.tool-dot.ok { background: var(--success); }
.tool-dot.off { background: var(--border); }
.tool-dot.opt { background: var(--warn); }
.tool-dot.sys { background: var(--primary); }
.tool-dashboard-body { display: grid; gap: 14px; }
.tool-dashboard-intro { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint); color: var(--text-2); font-size: 13px; line-height: 1.55; }
.tool-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tool-metric { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.tool-metric span { color: var(--text-2); font-size: 11px; }
.tool-metric strong { color: var(--text); font-size: 20px; line-height: 1.1; }
.tool-metric em { color: var(--text-2); font-size: 11px; font-style: normal; }
.tool-metric.ok strong { color: var(--success); }
.tool-metric.warn strong { color: var(--warn); }
.tool-metric.risk strong { color: var(--error); }
.tool-section { display: grid; gap: 8px; }
.tool-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool-section-head strong { display: block; font-size: 14px; }
.tool-section-head p { margin: 2px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.tool-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.tool-card-strip { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.tool-card-main { min-width: 0; flex: 1; }
.tool-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tool-card-name { margin-top: 2px; color: var(--text-2); font-family: var(--mono); font-size: 11px; }
.tool-card-desc { margin-top: 4px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.tool-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.tool-empty { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-tint); font-size: 13px; }
.tool-governance-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-card-wrap { flex: 1; min-width: 0; }
.tool-sub { margin: 16px 0 6px; font-size: 13px; color: var(--text); }
.tool-sub:first-of-type { margin-top: 4px; }
.tool-mem-foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.tool-runstate { display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.tool-runstate-info { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.danger-zone h3 { margin-top: 0; color: var(--error); }
.danger-zone .btn { margin-top: 12px; }
.danger-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.delete-files-option { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; color: var(--text); font-size: 13px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.page-head > :first-child { min-width: 0; }
.page-head > .row { flex-wrap: wrap; justify-content: flex-end; }
.page-head h2 { margin: 0 0 4px; }
.page-head p { margin: 0; }
.account-page { max-width: 1120px; margin: 0 auto; }
.account-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
.account-wide { grid-column: 1 / -1; }
.account-hero { display: flex; gap: 16px; align-items: center; }
.account-avatar-lg {
  width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700;
}
.account-hero-main h3,
.account-panel h3 { margin: 0 0 8px; }
.account-tags { display: flex; gap: 8px; margin-bottom: 8px; }
.account-panel { min-height: 160px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.panel-head p { margin: 0; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; }
.kv span { color: var(--text-2); }
.account-overview-grid { display: grid; grid-template-columns: 1fr minmax(260px, .9fr); gap: 12px; align-items: stretch; }
.binding-status { border: 1px dashed var(--border); border-radius: 8px; padding: 12px; background: var(--surface-tint); }
.binding-status.ok { border-style: solid; border-color: var(--success-a-45); background: var(--success-a-08); }
.invite-box { min-height: 96px; }
.agent-invite-card {
  display: grid; gap: 14px; margin-bottom: 16px; padding: 16px;
  border: 1px solid var(--primary-a-35); border-radius: 18px;
  background: linear-gradient(145deg, var(--primary-a-08), var(--panel) 58%, var(--accent-a-18));
}
.agent-invite-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.agent-invite-head h3, .agent-invite-head p { margin: 0; }
.agent-invite-head p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
.agent-invite-badge { flex: 0 0 auto; }
.agent-invite-methods { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); gap: 12px; }
.agent-invite-method {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.agent-invite-method-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.agent-invite-method-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 10px; color: var(--primary); background: var(--primary-a-12);
}
.agent-invite-method-title { min-width: 0; display: grid; gap: 2px; }
.agent-invite-method-title strong { font-size: 14px; }
.agent-invite-method-title span { font-size: 12px; line-height: 1.45; }
.agent-invite-number-row { display: flex; align-items: center; gap: 8px; }
.agent-invite-number {
  min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--primary-a-35); border-radius: 10px;
  color: var(--primary); background: var(--primary-a-08); font: 750 17px/1.2 var(--mono); letter-spacing: .06em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-invite-result { min-height: 40px; margin-top: 10px; }
.agent-invite-loading { display: flex; align-items: center; min-height: 40px; color: var(--text-2); font-size: 13px; }
.invite-link-card { border: 1px solid var(--success-a-45); background: var(--success-a-08); border-radius: 12px; padding: 12px; }
.invite-link-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.invite-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 10px; }
.invite-link-input { width: 100%; min-width: 0; font-family: var(--mono); font-size: 12px; }
.invite-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.agent-invite-generated { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.agent-invite-qr-frame {
  display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 132px;
  padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.agent-invite-qr { display: block; width: 116px; height: 116px; object-fit: contain; border-radius: 6px; }
.agent-invite-status { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.agent-invite-status.success { color: var(--success); font-weight: 600; }
.agent-invite-status.error { color: var(--error); }
.success-box { border: 1px solid var(--success-a-45); background: var(--success-a-08); border-radius: 8px; padding: 12px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.model-summary { display: grid; grid-template-columns: 160px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.model-summary > div { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface-tint); }
.model-summary strong { display: block; }
.model-chip { min-width: 0; }
.model-chip strong,
.model-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-picker-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-tint); color: var(--text-2); cursor: pointer; font-size: 12px;
  transition: background .15s var(--ease-standard), border-color .15s var(--ease-standard), color .15s var(--ease-standard), transform .16s var(--ease-spring);
}
.tag-picker-chip:hover { color: var(--text); border-color: var(--primary-a-45); background: var(--primary-a-08); transform: translateY(-1px); }
.tag-picker-chip.active { color: var(--primary); border-color: var(--primary-a-45); background: var(--primary-a-12); }
.tag-picker-chip:disabled { opacity: .58; cursor: not-allowed; transform: none; }
.tag-picker-check { font-weight: 700; }
.model-library-modal { display: flex; flex-direction: column; gap: 14px; }
.model-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.model-library-layout { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr); gap: 12px; align-items: start; }
.model-library-pane { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface-tint); }
.model-library-pane h3,
.model-stats-wrap h3 { margin: 0 0 10px; }
.model-library-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.model-profile-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 10px; cursor: pointer;
}
.model-profile-row:hover,
.model-profile-row.active { background: var(--panel-2); border-color: var(--primary-a-55); }
.model-profile-main,
.model-profile-metrics { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-profile-main strong,
.model-profile-main span,
.model-profile-metrics span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-profile-metrics { text-align: right; }
.model-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.model-form-head h3 { margin: 0; }
.model-stats-wrap { border-top: 1px solid var(--border); padding-top: 12px; }
.model-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.model-stat-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-tint); min-width: 0; }
.model-stat-card strong,
.model-stat-card span,
.model-stat-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-stats-section { margin-top: 12px; overflow: auto; }
.model-stats-section table { min-width: 560px; }
.model-library-item {
  width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 10px; cursor: pointer;
}
.model-library-item:hover,
.model-library-item.active { background: var(--panel-2); border-color: var(--primary-a-55); }
.model-library-item.disabled { opacity: .55; }
.category-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 4px; }
.category-tool-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
@media (max-width: 900px) {
  .shell { grid-template-rows: 48px 1fr; }
  .shell.chat-mode { grid-template-rows: 1fr; }
  .topbar { display: flex; }
  .shell.chat-mode .topbar { display: none !important; }
  .brand-mark-mobile { display: inline-flex; border: none; background: transparent; border-radius: 8px; gap: 5px; }
  .brand-mark-mobile .brand-mark-glyph { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
  .account-grid, .account-overview-grid, .model-summary, .cap-grid, .model-library-layout, .model-stat-grid, .tool-metrics { grid-template-columns: 1fr; }
  .tool-card { flex-direction: column; }
  .tool-card-strip { width: 100%; height: 4px; }
  .tool-card-actions { justify-content: flex-start; }
  .settings-identity-card, .settings-danger-row { grid-template-columns: 1fr; }
  .settings-danger-row { flex-direction: column; align-items: stretch; }
  .account-wide { grid-column: auto; }
  .model-policy-row { grid-template-columns: 1fr; }
  .settings-card-head { flex-direction: column; }
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .side { display: none; }
  .content { padding: 12px; min-height: 0; overflow-y: auto; }
  .chat-shell { height: calc(100% + 24px); margin: -12px; }
  .chat-header { flex-wrap: nowrap; }
  .chat-header-actions { display: flex; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .mobile-hide { display: none !important; }
  .msg.user .msg-content { max-width: 88%; }
}

/* lists */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.list { display: flex; flex-direction: column; gap: 8px; }

/* task page */
.task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: calc(100vh - 120px); }
.timeline { overflow: auto; }
.event { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 6px; }
.event .ev-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-2); }
.event pre { margin: 6px 0 0; white-space: pre-wrap; font: 12px/1.5 var(--mono); }
.event.tool_use { border-left: 3px solid var(--primary); }
.event.tool_result.ok { border-left: 3px solid var(--success); }
.event.tool_result.bad { border-left: 3px solid var(--error); }
.event.text { border-left: 3px solid var(--text-dim); }
.event.status { background: var(--panel-2); }
.event.error { border-left: 3px solid var(--error); }
.event.pipeline.ok { border-left: 3px solid var(--success); }
.event.pipeline.bad { border-left: 3px solid var(--error); }
.event.commit { border-left: 3px solid var(--warn); }

.term { background: var(--term-bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; overflow: auto; font: 12px/1.5 var(--mono); white-space: pre-wrap; }

/* drawer */
.drawer-mask {
  position: fixed; inset: 0; z-index: 1100; display: flex;
  background: rgba(0,0,0,.46);
}
.drawer-mask.left { justify-content: flex-start; }
.drawer-mask.right { justify-content: flex-end; }
.drawer-panel {
  width: min(320px, 88vw); height: 100%; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,.42); display: flex; flex-direction: column; outline: none;
  overflow: hidden; /* 圆角裁剪内部矩形层（body/nav-page），杜绝左下圆角被直角背景"破角" */
}
.drawer-panel.left { border-left: 0; border-radius: 0; animation: drawerInLeft .16s ease-out; }
.drawer-panel.right { border-right: 0; border-radius: 16px 0 0 16px; animation: drawerInRight .16s ease-out; }
@keyframes drawerInLeft { from { transform: translateX(-18px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@keyframes drawerInRight { from { transform: translateX(18px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
.drawer-head,
.drawer-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
/* 固定 head 高度：栈底「品牌(两行)」与子页「返回+标题(一行)」内容高度不同，
   若 head 高度随内容变化，push/pop 时下方内容会整体竖向跳动。固定高度（仿 iOS 恒定导航栏）根治。 */
.drawer-head { min-height: 56px; box-sizing: border-box; }
/* 主菜单抽屉：head 左边距与列表头像左边缘对齐（body 12px + 行内 4px = 16px）。 */
.main-menu-drawer .drawer-head { padding-left: 16px; }
.drawer-footer { border-top: 1px solid var(--border); border-bottom: 0; justify-content: flex-end; flex-wrap: wrap; }
.drawer-head h3 { margin: 0; font-size: 16px; }
/* Header chrome 稳定层：品牌态 / 子页态重叠在同一固定槽位，只做 opacity/transform，
   不再切 display，避免进入「账号与设置」时 header 布局重排带来的视觉跳动。 */
.drawer-head-left { flex: 1 1 auto; min-width: 0; height: 32px; position: relative; }
.drawer-head-brand,
.drawer-subhead {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateZ(0);
  display: flex; align-items: center; min-width: 0;
  transition: opacity .16s var(--ease-standard), transform .22s var(--ease-spring);
}
.drawer-subhead { gap: 2px; max-width: 100%; }
.drawer-head-left.has-brand.at-root .drawer-head-brand,
.drawer-head-left:not(.has-brand) .drawer-subhead { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateZ(0); }
.drawer-head-left.has-brand.at-root .drawer-subhead,
.drawer-head-left.has-brand.in-subpage .drawer-head-brand { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px) translateZ(0); }
.drawer-head-left.has-brand.in-subpage .drawer-subhead { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateZ(0); }
.drawer-head-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-close {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 20px; line-height: 1;
}
.drawer-close:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; position: relative; }
/* 抽屉内 push 导航：固定视口 + 每页独立滚动 + 方向语义转场，模拟 iOS Navigation push/pop */
.drawer-nav-stack { position: relative; min-height: 100%; overflow: hidden; }
.drawer-nav-page {
  /* 根因A修复：外层只负责「位置/位移」，不带 padding/width 等参与 layout 的盒模型属性，
     确保动画起止帧几何尺寸完全一致（padding 下沉到内层 .drawer-nav-page-inner）。
     根因C修复：用 inset:0 锁定尺寸，不再叠加 width:100%，避免与 box-sizing 叠加产生亚像素差。 */
  position: absolute; inset: 0; overflow: auto;
  scrollbar-gutter: stable; /* 预留滚动条槽位：不同高度子页间切换时滚动条出现/消失不再引起横向位移跳动 */
  background: var(--panel); z-index: 1;
  overscroll-behavior: contain;
  /* 强制独立合成层并固定 3D 上下文：动画全程在 GPU 合成层完成，落帧不回流主文档。 */
  transform: translateZ(0); backface-visibility: hidden; will-change: transform, opacity;
  contain: layout paint; /* 把布局/绘制限制在本页内，子页内容变化不影响兄弟页与外层 */
}
/* padding 下沉到内层：动画作用于外层 transform，内层尺寸恒定，杜绝盒模型起止帧差异。
   底部留白加大并兼容安全区：最后一个分组不贴底/不被圆角裁剪，移动端不被手势条遮挡。 */
.drawer-nav-page-inner { padding: 4px 12px max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; min-height: 100%; }
.drawer-nav-page.active { z-index: 2; }
.drawer-nav-page:not(.active) { pointer-events: none; }
/* push：新页面从右侧滑入，带轻微投影；旧页面向左退让 */
.drawer-nav-page.slide-in-from-right { z-index: 3; animation: nativePushIn .32s var(--ease-spring) forwards; }
.drawer-nav-page.slide-out-to-left { z-index: 1; animation: nativePushUnder .32s var(--ease-standard) forwards; pointer-events: none; }
/* pop：当前页面向右滑出；前一页从左侧景深恢复 */
.drawer-nav-page.slide-out-to-right { z-index: 4; animation: nativePopOut .26s var(--ease-standard) forwards; pointer-events: none; }
.drawer-nav-page.slide-in-from-left { z-index: 2; animation: nativePopUnder .26s var(--ease-standard) forwards; }
/* 所有关键帧的 transform 都显式带 translateZ(0)：保证动画全程处于同一 GPU 合成层，
   落帧（移除 class）时不发生「合成层销毁 → 主文档回流重栅格化」的亚像素微跳（根因B）。 */
@keyframes nativePushIn { from { transform: translateX(100%) translateZ(0); box-shadow: -24px 0 36px rgba(0,0,0,.18); } to { transform: translateX(0) translateZ(0); box-shadow: 0 0 0 rgba(0,0,0,0); } }
@keyframes nativePushUnder { from { transform: translateX(0) translateZ(0) scale(1); opacity: 1; } to { transform: translateX(-22%) translateZ(0) scale(.985); opacity: .62; } }
@keyframes nativePopOut { from { transform: translateX(0) translateZ(0); box-shadow: -18px 0 30px rgba(0,0,0,.14); } to { transform: translateX(100%) translateZ(0); box-shadow: -18px 0 30px rgba(0,0,0,0); } }
@keyframes nativePopUnder { from { transform: translateX(-22%) translateZ(0) scale(.985); opacity: .62; } to { transform: translateX(0) translateZ(0) scale(1); opacity: 1; } }
.drawer-back {
  display: inline-flex; align-items: center; gap: 1px;
  min-width: 52px; margin: 0 2px 0 -5px; padding: 4px 6px 4px 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--text-2); cursor: pointer;
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateX(-4px) translateZ(0);
  transition: opacity .16s var(--ease-standard), transform .2s var(--ease-spring), background .15s var(--ease-standard), visibility 0s linear .16s;
}
.drawer-back.visible { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(0) translateZ(0); transition-delay: 0s; }
.drawer-back-chevron { font-size: 30px; line-height: 18px; font-weight: 300; margin-top: -1px; }
.drawer-back-label { font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: -.01em; }
.drawer-back:hover { background: var(--panel-2); }
.drawer-back:active { transform: translateX(-2px) scale(.98); }
.drawer-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.drawer-list { max-height: none; overflow: visible; }
.drawer-section { margin-top: 0; padding: 12px 0; border-bottom: 1px solid var(--border); }
.drawer-section:last-child { border-bottom: none; }
.drawer-section-title { margin: 0 0 6px; color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 0 4px; }
.drawer-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; border: none; border-radius: 8px; background: transparent;
  color: var(--text); cursor: pointer; text-align: left;
  padding: 8px 4px; font-size: 14px;
}
.drawer-nav-item:hover { background: var(--panel-2); }
.drawer-nav-item.active {
  background: var(--primary-a-08);
  color: var(--primary);
  font-weight: 650;
}
/* 微信入口的语义态：待恢复（warn）/ 断开（danger） */
.drawer-nav-item.warn { color: var(--warn); }
.drawer-nav-item.warn:hover { background: rgba(210,153,34,.12); }
.drawer-nav-item.danger { color: var(--text-2); }
.drawer-nav-item.danger:hover { color: var(--error); background: var(--error-a-08); }
.drawer-quick-actions { display: flex; gap: 8px; margin: 2px 0 8px; }
.drawer-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 2px; }
.drawer-stat-grid > div { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-tint); min-width: 0; }
.drawer-stat-grid strong,
.drawer-stat-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-drawer-hero { display: flex; gap: 10px; align-items: center; padding: 0 4px; }
.account-drawer-hero .account-avatar-lg { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; flex-shrink: 0; }
.account-drawer-hero .account-hero-main { min-width: 0; flex: 1; }
.account-drawer-hero .account-hero-main h3 { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-drawer-hero .account-hero-main h3 + div { margin-top: 2px; }
.account-drawer-hero .account-tags { gap: 4px; flex-wrap: wrap; }
.account-drawer-hero .account-tags .tag { font-size: 10px; padding: 1px 6px; }

/* ── 账号入口 footer（钉在抽屉底部：拇指可达区，常驻可达） ──
   主菜单抽屉主任务是浏览/切换 Agent，账号设置为低频入口，钉在抽屉视口底部形成 footer：
   长 Agent 列表滚动时它始终留在拇指可达的底部热区，无需滚到列表末尾。
   根页内层改为纵向 flex，account-section 用 margin-top:auto 在短列表时也贴底；
   position:sticky 让长列表滚动时它吸附在视口底部，上方列表从其下方滚过。 */
.main-menu-drawer .drawer-nav-page-inner { display: flex; flex-direction: column; }
/* 仅根页（栈底，drawer-body 的第一个 nav-page）改为纵向 flex，让 account-section 贴底；
   子页（账号与设置等）保持 block 流，避免 flex 不折叠 margin 带来的间距差异。 */
.main-menu-drawer .drawer-nav-page ~ .drawer-nav-page .drawer-nav-page-inner { display: block; }
.main-menu-drawer .account-section {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto;                    /* 短列表时把 footer 推到视口底部 */
  background: var(--panel);            /* 不透明底：上方列表从其下滚过时不穿帮 */
  padding: 8px 4px 4px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 10px -8px rgba(0,0,0,.18); /* 轻微抬起，与滚动列表分层 */
}

/* ── 账号入口行（静默行：低频入口，与 Agent 行同节奏的扁平透明行） ──
   抽屉主任务是浏览/切换 Agent，账号设置下沉到列表末尾并降级：去渐变/边框，
   头像缩到 28px 中性灰仅作识别锚点，主文案改为身份，ID 降为次要小字，
   积分右置默认 muted，仅在余额耗尽时整行 danger 高亮回收注意力。 */
.account-id-card {
  width: 100%; display: flex; align-items: center; gap: 10px;
  /* 与 .drawer-project-card 同一头像栅格：内层 page padding 12px + 行 padding 4px = 16px。 */
  padding: 8px 4px; border-radius: 8px; cursor: pointer; text-align: left;
  color: var(--text); /* button 默认不继承文字色，显式设置避免暗色下变黑 */
  background: transparent; border: none;
  transition: background .15s ease;
}
.account-id-card:hover { background: var(--panel-2); }
.account-id-card.danger { background: var(--error-a-08); }
.account-id-card.danger:hover { background: var(--error-a-16); }
.account-id-avatar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127,127,127,.32); color: #fff;
}
.account-id-main { min-width: 0; flex: 1; }
.account-id-value { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text); }
.account-id-sub { margin-top: 1px; font-size: 11px; color: var(--text-2); }
.account-id-credit { flex-shrink: 0; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.account-id-credit.danger { color: var(--error); font-weight: 600; }
.text-danger { color: var(--error) !important; }
.account-id-chevron { flex-shrink: 0; color: var(--text-2); font-size: 18px; line-height: 1; opacity: .5; }


/* 通讯录风格 Agent 行 */
.drawer-project-card,
.drawer-link-row {
  width: 100%; border: none; border-radius: 0; background: transparent;
  color: var(--text); cursor: pointer; text-align: left;
}
.drawer-project-card {
  display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 4px;
  border-radius: 8px;
}
.drawer-project-card:hover,
.drawer-link-row:hover { background: var(--surface-tint); }
.drawer-project-card.current { background: transparent; }
.drawer-project-card strong,
.drawer-project-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Agent 头像圆 */
.drawer-agent-avatar {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
}
.drawer-agent-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.drawer-agent-info strong { font-size: 14px; line-height: 1.3; }
.drawer-agent-info span { font-size: 11px; color: var(--text-2); line-height: 1.2; }
.drawer-agent-meta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.drawer-agent-id {
  display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 999px;
  background: var(--primary-a-08); color: var(--primary) !important; border: 1px solid var(--primary-a-22);
  font-family: var(--mono); font-weight: 650; line-height: 1.25;
}
.drawer-agent-sep { opacity: .45; flex: 0 0 auto; }
.drawer-agent-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; margin-top: 0; }
.drawer-link-row.active { color: var(--primary); }
.drawer-row-arrow { color: var(--text-2); font-size: 16px; flex-shrink: 0; margin-left: auto; line-height: 1; }

/* 抽屉内 push 子页面：表单与信息适配窄宽 */
.drawer-body .kv { grid-template-columns: 80px 1fr; gap: 6px 10px; font-size: 13px; }
.drawer-body .account-actions { gap: 6px; }
.drawer-body .admin-cat-item { padding: 8px 10px; gap: 8px; }
.drawer-body .admin-cat-main strong { font-size: 13px; }
.drawer-body .invite-box { min-height: 60px; }
.drawer-body .binding-status { padding: 10px; }
.drawer-body .wechat-qr { width: 200px; }

/* ===== 底部 Sheet（类 iOS Action Sheet / Bottom Sheet） ===== */
.sheet-mask {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5); animation: sheetFadeIn .15s ease-out;
}
@keyframes sheetFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
  width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh; background: var(--panel);
  border-radius: 16px 16px 0 0; border: 1px solid var(--border); border-bottom: 0;
  display: flex; flex-direction: column; animation: sheetSlideUp .25s cubic-bezier(.32,.72,0,1);
  padding-bottom: env(safe-area-inset-bottom);
  transition: max-height .2s ease-out;
}
@keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle {
  width: 36px; height: 5px; border-radius: 3px; background: var(--border);
  margin: 8px auto 0; flex: 0 0 auto;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 8px; flex: 0 0 auto;
}
.sheet-head h3 { margin: 0; font-size: 16px; }
.sheet-close {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 20px; line-height: 1;
}
.sheet-close:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 16px 16px; }
.sheet-footer { flex: 0 0 auto; padding: 8px 16px 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }

/* modal */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; z-index: 1300;
}
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  width: 480px; max-width: 90vw; max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column;
}
.modal.md { width: min(580px, 92vw); }
.modal.lg { width: min(1040px, 94vw); }
/* 文件编辑器：工具栏 + 编辑区（CodeMirror/textarea）+ 可选 markdown 分屏预览 */
.modal.editor-fullscreen { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
.modal.editor-fullscreen .body { flex: 1; }
.file-editor { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.file-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.file-editor-name { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-editor-tools { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.editor-share { display: inline-flex; align-items: center; gap: 8px; }
.editor-tool-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; font-size: 12px; }
.editor-tool-btn:hover { background: var(--panel-2); }
.editor-tool-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-a-08); }
.editor-share-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text-2); cursor: pointer; font-size: 12px; }
.editor-share-toggle .editor-share-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); }
.editor-share-toggle.on { border-color: var(--success-a-45, var(--primary)); color: var(--success, var(--primary)); background: var(--success-a-06, var(--primary-a-08)); }
.editor-share-toggle.on .editor-share-dot { background: var(--success, var(--primary)); }
.code-editor-wrap { display: grid; grid-template-columns: 1fr; gap: 10px; min-height: 0; }
.code-editor-wrap.show-preview { grid-template-columns: 1fr 1fr; }
.code-editor-host { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-height: 320px; max-height: 62vh; }
.modal.editor-fullscreen .code-editor-host { max-height: none; height: 100%; }
.modal.editor-fullscreen .code-editor-wrap { flex: 1; min-height: 0; height: 100%; }
.code-editor-host .cm-editor { height: 100%; max-height: inherit; font-size: 13px; }
.code-editor-host .cm-scroller { overflow: auto; }
.code-editor-fallback { width: 100%; min-height: 320px; max-height: 62vh; resize: vertical; border: 0; padding: 10px 12px; background: var(--panel); color: var(--text); font: 13px/1.55 var(--mono); }
.modal.editor-fullscreen .code-editor-fallback { max-height: none; height: 100%; }
.md-preview { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow: auto; min-height: 320px; max-height: 62vh; background: var(--panel); font-size: 14px; line-height: 1.65; }
.modal.editor-fullscreen .md-preview { max-height: none; }
.md-preview :is(h1,h2,h3) { margin: 12px 0 8px; }
.md-preview pre { background: var(--surface-tint); padding: 10px 12px; border-radius: 8px; overflow: auto; }
.md-preview code { font-family: var(--mono); font-size: 12px; }
.md-preview img { max-width: 100%; }
@media (max-width: 640px) { .code-editor-wrap.show-preview { grid-template-columns: 1fr; } }
.modal h3 { margin: 0; padding: 0; font-size: 16px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.modal-close {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 20px; line-height: 1;
}
.modal-close:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.modal .body { padding: 14px 16px; overflow: auto; }
.modal .footer { padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* toast */
#toast-root { position: fixed; right: 16px; top: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 8px 14px; background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 6px; min-width: 240px; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--error); }
.toast.warn { border-left-color: var(--warn); }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; }
.tab.active { color: var(--text); border-bottom-color: var(--primary); }

/* table */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--text-2); font-weight: 500; font-size: 12px; }
tr:hover td { background: var(--panel-2); }

/* ============================================================
 * Codex 风格对话页
 * ============================================================ */

/* 整个 chat shell：单列布局，撑满 .content 高度 */
.chat-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: calc(100% + 32px);            /* content padding 上下各 16px，负 margin 抵消 */
  margin: -16px -20px;                  /* 抵消 .content 的 padding 撑满 */
}
/* 三栏：中栏(chat-main) + 右栏(工作区面板)。收起=窄轨(只留展开把手)，展开=定宽。 */
.chat-shell.ws-collapsed { grid-template-columns: 1fr 44px; }
.chat-shell.ws-open { grid-template-columns: 1fr var(--ws-w, 340px); }
.workspace-panel {
  position: relative; min-width: 0; min-height: 0;
  /* 注意：--surface 变量在主题里【未定义】（只有 --surface-tint/-raised），裸 var(--surface) 会解析为透明，
     导致移动端浮层主体透明、透出遮罩（“下面透明一块”）。用 --bg 兜底保证不透明。 */
  border-left: 1px solid var(--border); background: var(--surface, var(--bg));
  display: flex; flex-direction: column; overflow: hidden;
}
.workspace-panel-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel); min-height: 44px;
}
.workspace-panel-head .ws-name { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; font-weight: 600; font-size: 13px; }
.ws-name .ws-name-icon { flex: 0 0 auto; }
.ws-name .ws-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 下拉小箭头 ⌄：暗示「点这里可切换/管理文件夹」，与收起面板的横向 ❯ 从形状上区分 */
.ws-name .ws-name-caret { flex: 0 0 auto; font-size: 11px; line-height: 1; color: var(--text-2); transform: translateY(-1px); }
/* 文件夹名可点击 = 进入文件夹管理（切换 / 新建 / 重命名 / 删除），做成明确的可点标签 */
.ws-name-btn { cursor: pointer; border-radius: 7px; padding: 3px 7px; margin: 0 -4px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.ws-name-btn:hover { background: var(--surface-tint, rgba(127,127,127,.12)); border-color: var(--border); }
.ws-name-btn:hover .ws-name-caret { color: var(--text); }
.ws-picker-section { font-size: 11px; color: var(--text-2); letter-spacing: .04em; margin: 4px 2px 6px; }
.workspace-panel-body { flex: 1; overflow-y: auto; min-height: 0; padding: 8px 10px; }
.workspace-panel .ws-collapse-btn, .workspace-panel .ws-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); cursor: pointer; flex-shrink: 0;
}
.workspace-panel .ws-collapse-btn:hover, .workspace-panel .ws-expand-btn:hover { color: var(--text); background: var(--surface-tint); }
/* 收起态：竖排窄轨，只显示展开把手 + 变更角标 */
.workspace-panel.collapsed { align-items: center; }
.workspace-panel.collapsed .workspace-panel-head { flex-direction: column; padding: 8px 6px; border-bottom: none; background: transparent; gap: 6px; }
.workspace-panel.collapsed .ws-name, .workspace-panel.collapsed .workspace-panel-body { display: none; }
.ws-change-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--primary, #6366f1); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.ws-file-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: 12px; cursor: default; }
.ws-file-row:hover { background: var(--surface-tint); }
.ws-file-row .ws-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ws-file-kind { width: 16px; flex-shrink: 0; text-align: center; }
.ws-row-actions { display: none; align-items: center; gap: 3px; flex-shrink: 0; }
.ws-file-row:hover .ws-row-actions { display: inline-flex; }
.ws-row-actions button {
  height: 24px; border: 0; background: transparent; color: var(--text-2);
  font-size: 11px; padding: 0 7px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.ws-row-actions button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.ws-row-actions button.danger:hover { color: #ef4444; }
.ws-row-actions .ws-row-more { width: 24px; padding: 0; }
.ws-entry-menu {
  position: fixed; z-index: 1600; min-width: 132px; padding: 5px;
  display: grid; gap: 2px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.ws-entry-menu button {
  border: 0; background: transparent; color: var(--text); border-radius: 7px;
  padding: 7px 9px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 12px; text-align: left;
}
.ws-entry-menu button:hover { background: var(--panel-2); }
.ws-entry-menu button.danger { color: #ef4444; }
.ws-preview-wrap { height: min(68vh, 720px); min-height: 420px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--surface-tint); }
.ws-preview-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--panel); }
.ws-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--panel-2); }
/* 语义对象卡：绑定业务语义模型时，对象作为一等视图置顶；文件树降为其下的存储载体。
   按对象协议（objectSchema）渲染——标题 + 有值的协议字段，模型无关，未来 AI 造的新模型自动生效。 */
.ws-object-card {
  display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ws-object-card:hover { border-color: var(--border); background: var(--surface-tint); }
.ws-object-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ws-object-icon { color: var(--primary, #6366f1); flex-shrink: 0; display: inline-flex; }
.ws-object-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-object-badge { flex-shrink: 0; font-size: 10px; line-height: 1; padding: 3px 7px; border-radius: 999px; color: var(--primary, #6366f1); background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent); }
.ws-object-fields { display: grid; gap: 3px; }
.ws-object-field { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.ws-object-field-k { flex-shrink: 0; width: 52px; color: var(--text-2); }
.ws-object-field-v { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ws-object-sub { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 提示词清单（视频提示词包对象卡）：每条提示词一行，点击弹出可编辑复制面板 */
.ws-prompt-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 2px; }
.ws-prompt-item { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-tint); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.ws-prompt-item:hover { border-color: color-mix(in srgb, var(--primary, #6366f1) 45%, var(--border)); background: color-mix(in srgb, var(--primary, #6366f1) 7%, var(--surface-tint)); }
.ws-prompt-item-icon { flex-shrink: 0; display: inline-flex; color: var(--text-2); }
.ws-prompt-item-title { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono, monospace); }
.ws-prompt-item-arrow { flex-shrink: 0; font-size: 15px; line-height: 1; }
.ws-prompt-empty { display: block; width: 100%; margin-top: 2px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--text-2); font-size: 11.5px; text-align: left; cursor: pointer; }
.ws-prompt-empty:hover { border-color: color-mix(in srgb, var(--primary, #6366f1) 45%, var(--border)); color: var(--text); }
/* 提示词编辑/复制面板 */
.ws-prompt-editor { display: grid; gap: 8px; }
.ws-prompt-editor-hint { font-size: 11.5px; }
.ws-prompt-editor-ta { width: 100%; min-height: min(52vh, 420px); resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--mono); box-sizing: border-box; }
.ws-prompt-editor-ta:focus { outline: none; border-color: color-mix(in srgb, var(--primary, #6366f1) 55%, var(--border)); }
.ws-prompt-editor-actions { justify-content: flex-end; }
.ws-change-mark { font-family: var(--mono, monospace); font-size: 11px; width: 12px; text-align: center; flex-shrink: 0; }
.ws-change-mark.add { color: var(--success); } .ws-change-mark.mod { color: var(--warn); } .ws-change-mark.del { color: var(--error); }
.ws-section-title { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 10px 4px 4px; }
/* 底部工具排：钉一下 / 微信 / 发布 —— 同款「图标+文字」小胶囊，尺寸/内距/间距一处统一，
   保证并排三颗完全等大。（.btn 基类已含 inline-flex 与 gap，故这里只收紧内距与字号。） */
.chat-input-left .chat-tool-btn { padding: 3px 10px; font-size: 12px; gap: 5px; line-height: 1.4; }
/* 微信按钮：状态仅用「颜色 + 文字」表达，不加实边框——与旁边两颗 ghost 保持同款外观，一眼可读。
   未连=默认灰；已连=绿；待恢复=橙。图标随 currentColor 一起变色。 */
.wechat-btn.on { color: var(--wechat, #07c160); }
.wechat-btn.on:hover { background: var(--wechat-a-38, rgba(7,193,96,.12)); }
.wechat-btn.stale { color: #f59e0b; }
.wechat-btn.stale:hover { background: rgba(245,158,11,.12); }

 /* ── 工作区头部「版本」按钮（替代原呼吸灯）── */
 .ws-version-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; line-height: 1.4; border-radius: 8px; flex-shrink: 0; }
 .ws-version-btn:hover { background: var(--surface-tint); color: var(--text); }
 .workspace-panel.collapsed .ws-version-btn { display: none; } /* 收起态窄轨不显示版本按钮 */
 /* ② 动作级：live 活动条，跟随最新工具事件（正在写 / 读 / 执行…） */
.ws-activity {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; color: var(--text-2);
  border-bottom: 1px dashed var(--border); background: var(--surface-tint, rgba(16,185,129,.05));
  white-space: nowrap; flex-shrink: 0;
}
.ws-activity .ws-activity-icon { color: var(--primary, #6366f1); }
.ws-activity .ws-activity-text { overflow: hidden; text-overflow: ellipsis; }
.workspace-panel.collapsed .ws-activity { display: none !important; } /* 收起态不显示活动条 */
/* ③ 产物级：本轮活动文件（进行中，尚未固化到 git） */
/* 置顶固定坞：封顶高度 + 内部滚动，行数增减只在坞内滚，绝不推动下方文件树（消除上下跳动） */
.ws-live {
  flex-shrink: 0; max-height: 168px; overflow-y: auto;
  padding: 2px 10px 6px; border-bottom: 1px dashed var(--border);
  background: color-mix(in srgb, var(--primary, #6366f1) 4%, transparent);
}
.ws-live .ws-section-title { margin-top: 6px; }
.workspace-panel.collapsed .ws-live { display: none !important; } /* 收起态不显示 */
.ws-live-row.write .ws-file-name { color: #b45309; font-weight: 500; }
.ws-live-row.read .ws-file-name, .ws-live-row.search .ws-file-name { color: var(--text-2); }
.ws-live-row.exec .ws-file-name { color: var(--text-2); font-style: italic; }
/* 直接反馈到文件树：本轮触碰且已在快照中的文件行即时点亮 + 图标轻脉冲 */
.file-tree-row.ws-live-hit { background: var(--surface-tint-2); }
.file-tree-row.ws-live-hit.live-write > .file-tree-name { color: #b45309; font-weight: 600; }
.file-tree-row.ws-live-hit > .file-tree-kind { animation: ws-live-pulse 1.4s ease-in-out infinite; }
@keyframes ws-live-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } }
/* 变更角标：数字变化时 pop 放大吸引注意 */
.ws-change-badge.pop { animation: ws-badge-pop .4s ease; }
@keyframes ws-badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* turn 结束固化：本轮写过的文件在 git 变更列表里闪一下（新旧衔接的收敛感） */
.ws-file-row.ws-flash { animation: ws-flash 1.6s ease; }
@keyframes ws-flash { 0% { background: rgba(16,185,129,.28); } 100% { background: transparent; } }
.file-tree {
  display: flex; flex-direction: column; gap: 1px; margin-top: 8px;
  /* 层级视觉基准：缩进步进 + 导引线颜色，供子行统一引用 */
  --tree-indent: 16px; --tree-gutter: 6px;
  --tree-guide: color-mix(in srgb, var(--text) 16%, transparent);
  --tree-guide-active: color-mix(in srgb, var(--text) 32%, transparent);
}
.file-tree-row {
  --depth: 0; position: relative;
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 6px 5px calc(var(--tree-gutter) + var(--depth) * var(--tree-indent));
  border-radius: 8px; font-size: 12px; cursor: default;
}
/* 层级导引线：为每个祖先层画一条竖直细线，即使缩进很浅也能一眼看清父子归属（VS Code 式 indent guides）。 */
.file-tree-row::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(var(--tree-gutter) + 9px);
  width: calc(var(--depth) * var(--tree-indent)); pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--tree-guide) 0 1px, transparent 1px var(--tree-indent));
}
.file-tree-row:hover { background: var(--surface-tint); }
.ws-file-tree .file-tree-row { padding-right: 82px; }
.file-tree-row.dir { cursor: pointer; }
/* 目录行 = “容器”：中等字重 + 主文本色；文件行弱化为次文本色，靠字重/明度差拉开层级，而非只靠缩进。 */
.file-tree-row.dir > .file-tree-name { font-weight: 600; color: var(--text); }
.file-tree-row.file > .file-tree-name { color: var(--text-2); }
/* 已展开目录：极淡底纹 + 左侧主色竖条，明确标记“这是一个已打开、其下内容归属于它”的父节点。 */
.file-tree-row.dir.is-open { background: color-mix(in srgb, var(--primary, #6366f1) 7%, transparent); }
.file-tree-row.dir.is-open::after {
  content: ''; position: absolute; top: 3px; bottom: 3px;
  left: calc(var(--tree-gutter) + var(--depth) * var(--tree-indent) - 2px);
  width: 2px; border-radius: 2px; background: var(--tree-guide-active); pointer-events: none;
}
.file-tree-toggle { width: 12px; flex: 0 0 12px; color: var(--text-2); font-size: 11px; text-align: center; transition: color .15s; }
.file-tree-row.dir.is-open .file-tree-toggle { color: var(--primary, #6366f1); }
.file-tree-kind { width: 16px; flex: 0 0 16px; text-align: center; }
.file-tree-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tree-count { flex-shrink: 0; font-size: 11px; }
/* 文件树行操作：只露出一个主操作 + 更多，不再整排「编辑/改名/删除」铺开。
   行右侧预留宽度，按钮绝对定位，不挤压文件名，也不需要夸张的白色渐变遮罩。 */
.file-tree-row .ws-row-actions {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  margin-left: 0; z-index: 1; padding: 1px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 9px; backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.works-file-tree { border-top: 1px solid var(--border); padding-top: 4px; }
.works-file-tree .file-tree-row { font-size: 13px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); border-radius: 0; }
.works-file-tree .file-tree-row:last-child { border-bottom: none; }
.ws-file-tree .file-tree-row:hover .ws-row-actions,
.ws-file-tree .file-tree-row:focus-within .ws-row-actions { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
   .ws-change-badge.pop, .ws-file-row.ws-flash, .file-tree-row.ws-live-hit > .file-tree-kind { animation: none; }
}
/* 移动端：工作区面板改为浮层（覆盖），不占列 */
@media (max-width: 980px) {
  .chat-shell.ws-collapsed, .chat-shell.ws-open { grid-template-columns: 1fr; }
  .workspace-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); z-index: 1200; box-shadow: -8px 0 24px rgba(0,0,0,.18); }
  .workspace-panel.collapsed { display: none; }
}
.chat-main {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;     /* 防 overflow */
  min-height: 0;    /* 允许中间消息区滚动，而不是把输入框顶出屏幕 */
  background: var(--bg);
  /* 隔离聊天内部层叠：消息流里大量 .stream-appear（will-change）会创建堆叠上下文，
     若不隔离，浮层（回到底部按钮 / 执行记录面板）的低 z-index 会与它们在同一祖先
     上下文里直接竞争，导致偶发被遮挡。isolate 把聊天整体收进独立堆叠上下文，
     外层（抽屉/弹窗 1100+）仍在其上，内部浮层只需高于消息流即可稳定置顶。 */
  isolation: isolate;
}
.chat-main.empty { align-items: center; justify-content: center; }
.chat-empty { text-align: center; color: var(--text-2); }
.chat-empty h2 { color: var(--text); margin-bottom: 8px; }

/* 微信连接按钮（在 chat-header 中） */
.conv-wechat-btn {
  padding: 3px 8px; font-size: 12px; line-height: 1.35;
  border-radius: 999px; background: transparent; color: var(--wechat); border-color: var(--wechat-a-38);
}
.conv-wechat-btn:hover { background: var(--wechat-a-08); }
.conv-wechat-btn.disconnect { color: var(--text-2); border-color: var(--border); background: var(--surface-tint); }
.conv-wechat-btn.disconnect:hover { color: var(--error); border-color: var(--error-a-45); background: var(--error-a-08); }

/* 右栏：header / 消息流 / 输入 */
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
/* 三栏顶栏：左右两侧等比 flex，让居中标题视觉居中；左品牌入口、右 ⋯ 工具栏入口 */
.chat-header-left { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; justify-content: flex-start; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
/* 居中标题：Agent 名（主）+ 当前会话名（副，作上下文锚点） */
.chat-header-title {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  line-height: 1.25; gap: 0;
}
.chat-header-title-main {
  font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.chat-header-title-sub {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.chat-header-title-sub-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.theme-toggle-btn { font-size: 16px; padding: 4px 8px !important; line-height: 1; }
.agent-toolbar-btn { font-size: 18px; padding: 4px 10px !important; line-height: 1; }
/* Agent 工具栏抽屉：单层结构无子页，隐藏「返回」按钮占位，让顶部 Agent 名左对齐到栏目名 */
.agent-toolbar-drawer .drawer-back { display: none; }
.agent-toolbar-drawer .drawer-head { padding-left: 16px; }
.agent-toolbar-drawer .drawer-head-title { font-weight: 600; }
.conv-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-height: 360px; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35); padding: 8px; z-index: 500;
}
.conv-dropdown-item {
  width: 100%; padding: 6px 10px; border: none; border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
  font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.conv-dropdown-item:hover { background: var(--panel-2); }
.conv-dropdown-item.current { color: var(--primary); background: var(--primary-a-08); }
.conv-dropdown-item-badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.conv-dropdown-item-text { display: flex; align-items: center; gap: 7px; overflow: hidden; min-width: 0; flex: 1; }
.conv-dropdown-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── 会话运行态状态点（会话清单名称前）：闲着/执行中/等待交互/出错 ── */
.conv-state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.conv-state-dot.idle { background: var(--text-2); opacity: .45; }
.conv-state-dot.running { background: var(--primary); box-shadow: 0 0 0 0 var(--primary-a-45); animation: conv-pulse 1.4s ease-out infinite; }
.conv-state-dot.waiting { background: var(--warn, #d29922); box-shadow: 0 0 5px rgba(210,153,34,.7); }
.conv-state-dot.error { background: var(--error, #f85149); box-shadow: 0 0 5px rgba(248,81,73,.6); }
@keyframes conv-pulse {
  0% { box-shadow: 0 0 0 0 var(--primary-a-45); }
  70% { box-shadow: 0 0 0 6px rgba(127,127,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,127,127,0); }
}
.conv-wechat-badge {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; line-height: 1.35; font-weight: 600;
  background: var(--wechat-a-18); color: var(--wechat); border: 1px solid var(--wechat-a-45);
  box-shadow: 0 0 4px var(--wechat-a-15);
  white-space: nowrap; flex-shrink: 0;
}
.conv-dropdown-wechat-action {
  width: 100%; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; cursor: pointer; text-align: left;
  border: 1px dashed var(--border); background: transparent; color: var(--text-2);
}
.conv-dropdown-wechat-action:hover { background: var(--panel-2); }
.conv-dropdown-wechat-action.connected {
  border-color: var(--wechat-a-35); color: var(--wechat); background: var(--wechat-a-06);
}
.conv-dropdown-wechat-action.connected:hover { background: var(--error-a-08); color: var(--error); border-color: var(--error-a-35); }
.conv-dropdown-archive {
  flex-shrink: 0; padding: 2px 6px;
  font-size: 11px; line-height: 1.3; color: var(--text-2); cursor: pointer;
  border-radius: 4px; border: 1px solid var(--border); background: transparent;
  white-space: nowrap;
}
.conv-dropdown-archive:hover { color: var(--error); border-color: var(--error-a-35); background: var(--error-a-08); }

/* ── 会话列表（在「⋯」Agent 工具栏抽屉的「会话」分组内）：每行 = 状态点 + 完整会话名 + 微信徽章 + 重命名/删除 ── */
.conv-list { display: flex; flex-direction: column; gap: 4px; }
.conv-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-bottom: 8px; padding: 7px 12px;
  background: transparent; color: var(--text-2);
  border: 1px dashed var(--border); border-radius: 8px;
  font-size: 13px; cursor: pointer;
  transition: background .15s var(--ease-standard), color .15s var(--ease-standard), border-color .15s var(--ease-standard);
}
.conv-new-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--text-2); }
.conv-list-row {
  display: flex; align-items: center; gap: 4px;
  border-radius: 8px; padding: 2px 4px 2px 2px;
}
.conv-list-row:hover { background: var(--panel-2); }
.conv-list-row.current { background: var(--primary-a-08); }
.conv-list-row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border: none; background: transparent; color: var(--text);
  cursor: pointer; text-align: left; font-size: 14px; border-radius: 6px;
}
.conv-list-row.current .conv-list-row-main { color: var(--primary); font-weight: 600; }
.conv-list-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.conv-list-row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.conv-list-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer;
}
.conv-list-action:hover { background: var(--panel); color: var(--text); }
.conv-list-action.delete:hover { color: var(--error); background: var(--error-a-08); }

/* 消息流 */
.chat-messages {
  flex: 1; min-height: 0; overflow: auto;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: auto;
}
.chat-bottom-sentinel { flex: 0 0 1px; height: 1px; pointer-events: none; }
.scroll-bottom-btn {
  position: absolute; right: 24px; bottom: 116px; z-index: 20;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--primary-a-45); background: var(--surface-raised); color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.32); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.scroll-bottom-btn.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-bottom-btn:hover { background: var(--panel-2); }
.scroll-bottom-btn.has-new { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-a-22), 0 10px 30px rgba(0,0,0,.32); }
/* 「查看本轮结果」态：用户在上方阅读时，结构化结果出现后用主色浮标引导直达，而不是只能回到底部。 */
.scroll-bottom-btn.has-result { border-color: var(--primary); background: var(--primary-a-08); box-shadow: 0 0 0 1px var(--primary-a-22), 0 10px 30px rgba(0,0,0,.32); }
.scroll-bottom-btn.has-result .scroll-bottom-text { color: var(--primary); font-weight: 600; }
.scroll-bottom-icon { font-size: 16px; line-height: 1; color: var(--primary); }
.scroll-bottom-text { font-size: 12px; }

/* 一组 turn = 用户气泡 + AI 气泡 */
.turn { display: flex; flex-direction: column; gap: 12px; }
.turn.optimistic { opacity: .78; }

.msg { display: flex; gap: 10px; max-width: 100%; }
.msg.user { justify-content: flex-end; }
.msg.user .msg-content {
  background: var(--primary); color: white;
  padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  max-width: 75%;
  white-space: pre-wrap; word-break: break-word;
}
.msg.ai { align-items: flex-start; }
.msg.ai .msg-avatar {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--primary);
  border: 1px solid var(--border);
}
.msg.ai .msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.msg.ai .msg-content {
  background: var(--panel); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 4px 14px 14px 14px;
  white-space: pre-wrap; word-break: break-word;
}
/* 活动指示器已就近 in-flow（不再覆盖正文），无需为其预留顶部空白 */
.ai-text {
  margin: 0 -6px; padding: 4px 6px; border-radius: 8px;
  line-height: 1.65;
  transition: background .9s ease-out, box-shadow .9s ease-out;
}
.ai-text.is-growing {
  background: linear-gradient(90deg, var(--primary-a-08), transparent 92%);
  box-shadow: inset 2px 0 0 var(--primary-a-24);
}
.ai-plain-text { white-space: pre-wrap; word-break: break-word; }
/* 取消正文内联光标：Agent 输出已是文本 + 组件 + 工具的混合形态，进度统一由消息级 turn-status 呼吸态表达。 */
.stream-appear {
  animation: streamAppear .42s ease-out both, streamGlow .9s ease-out;
}
@keyframes streamAppear {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes streamGlow {
  0% { filter: drop-shadow(0 0 0 var(--primary-a-24)); }
  18% { filter: drop-shadow(0 0 14px var(--primary-a-22)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
.structured-output {
  margin: 12px 0 2px; padding: 10px 0 0;
  border-top: 1px solid var(--border); background: transparent;
  white-space: normal;
}
.structured-output-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.structured-output-head strong { font-size: 13px; letter-spacing: .01em; }
.structured-output-list { display: grid; gap: 8px; }
.structured-card {
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 9px 11px; background: var(--surface-tint);
  box-shadow: none;
}
.structured-card.decision { border-left-color: var(--primary); }
.structured-card.implementation { border-left-color: var(--success); }
.structured-card.todo { border-left-color: var(--warn); }
.structured-card.issue,
.structured-card.warning { border-left-color: var(--error); }
.structured-card.constraint,
.structured-card.preference { border-left-color: var(--border); }
.structured-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.structured-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-a-08);
}
.structured-badge.implementation { color: var(--success); background: var(--success-a-08); }
.structured-badge.todo { color: var(--warn); background: var(--warn-a-06); }
.structured-badge.issue,
.structured-badge.warning { color: var(--error); background: var(--error-a-08); }
.structured-badge.constraint,
.structured-badge.preference { color: #7c3aed; background: rgba(139, 92, 246, .10); }
.structured-meta { color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.structured-card h4 { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.structured-card p { margin: 0; color: var(--text); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

/* ============ 通用渲染组件（in-flow） ============
 * 视觉融入原则：与散文同宽、左对齐；用「左侧 3px 语义色条 + 极浅底」表达层次，
 * 不用粗描边/大投影，避免把卡片做成「浮于文字之上的弹窗」而割裂阅读流。
 * 间距与段落节奏一致（margin 12px 0），让组件像「抬升一段的段落」自然嵌进正文。
 */
.render-component {
  margin: 12px 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  background: var(--surface-tint); white-space: normal;
  font-size: 13.5px; line-height: 1.6;
}
.render-component .rc-head { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--text); margin-bottom: 8px; }
.render-component .rc-text { margin: 0; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.render-component + .render-component { margin-top: 8px; }
/* 卡片紧贴前一段散文时收紧顶部，避免出现「段落空行 + 卡片」的断层 */
.ai-plain-text + .render-component { margin-top: 10px; }
.render-component + .ai-plain-text { margin-top: 2px; }

/* —— callout 提示框：覆盖风险/结论/注意等单点关键信息 —— */
.render-component.rc-callout { padding: 0; border: none; background: transparent; }
.render-component.rc-callout .rc-callout-body { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--primary); background: var(--primary-a-08); }
.render-component.rc-callout-info .rc-callout-body { border-left-color: var(--primary); background: var(--primary-a-08); }
.render-component.rc-callout-success .rc-callout-body { border-left-color: var(--success); background: var(--success-a-08); }
.render-component.rc-callout-warning .rc-callout-body { border-left-color: var(--warn); background: var(--warn-a-06); }
.render-component.rc-callout-danger .rc-callout-body { border-left-color: var(--error); background: var(--error-a-08); }
.render-component.rc-callout-neutral .rc-callout-body { border-left-color: var(--text-2); background: var(--surface-tint); }
.render-component .rc-callout-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: var(--text); }
.render-component.rc-callout-success .rc-callout-title { color: var(--success); }
.render-component.rc-callout-warning .rc-callout-title { color: var(--warn); }
.render-component.rc-callout-danger .rc-callout-title { color: var(--error); }
.render-component.rc-callout .rc-callout-body > p.rc-text:last-child { margin-bottom: 0; }

/* —— steps 步骤：替代「一长串 1. 2. 3. 散文」—— */
.render-component.rc-steps { border-left-color: var(--primary); }
.render-component.rc-steps .rc-steps { margin: 0; padding: 0; list-style: none; counter-reset: rcstep; display: grid; gap: 8px; }
.render-component.rc-steps .rc-step { position: relative; padding-left: 30px; }
.render-component.rc-steps .rc-step::before {
  counter-increment: rcstep; content: counter(rcstep);
  position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-a-08); border: 1px solid var(--primary-a-22);
}
.render-component.rc-steps .rc-step-title { font-weight: 600; color: var(--text); margin-bottom: 1px; }
.render-component.rc-steps .rc-step-body { color: var(--text-2); font-size: 13px; }

/* —— kv 键值清单：配置/参数/属性 —— */
.render-component.rc-kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.render-component.rc-kv dt { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.render-component.rc-kv dd { margin: 0; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* —— stat 指标：验证结果/性能数据 —— */
.render-component.rc-stat { border-left-color: var(--success); }
.render-component.rc-stat .rc-stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.render-component.rc-stat .rc-stat { min-width: 84px; padding: 8px 12px; border-radius: 8px; background: var(--surface-tint); border: 1px solid var(--border); }
.render-component.rc-stat .rc-stat-value { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; }
.render-component.rc-stat .rc-stat-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.render-component.rc-stat .rc-stat-hint { font-size: 11px; color: var(--text-2); margin-top: 1px; }

/* —— compare 对比表：方案/选型 —— */
.render-component.rc-compare { border-left-color: #8b5cf6; padding-right: 8px; }
.render-component.rc-compare .rc-compare-wrap { overflow-x: auto; }
.render-component.rc-compare table.rc-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.render-component.rc-compare .rc-compare th, .render-component.rc-compare .rc-compare td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; vertical-align: top; }
.render-component.rc-compare .rc-compare thead th { font-size: 12px; color: var(--text-2); font-weight: 700; border-bottom-color: var(--primary-a-22); }
.render-component.rc-compare .rc-compare-corner { width: auto; }
.render-component.rc-compare .rc-compare-label { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.render-component.rc-compare .rc-compare tbody tr:last-child td, .render-component.rc-compare .rc-compare tbody tr:last-child th { border-bottom: none; }

/* summary 复用既有 .structured-output，无需重复样式；rc-summary 仅占位 */
.render-component.rc-summary { border: none; background: transparent; padding: 0; margin: 0; }

/* —— copy_block 可复制内容块：代码 / 提示词 / 命令 / 配置 —— */
.render-component.rc-copy-block { padding: 0; overflow: hidden; border-left-color: var(--primary); background: var(--surface, var(--panel)); }
.render-component.rc-copy-block .rc-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-tint); }
.render-component.rc-copy-block .rc-copy-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--text); font-size: 12.5px; }
.render-component.rc-copy-block .rc-copy-lang { font: 11px/1.4 var(--mono); color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; background: var(--surface, var(--panel)); }
.render-component.rc-copy-block .rc-copy-btn { padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.render-component.rc-copy-block .rc-copy-code { margin: 0; padding: 12px; max-height: 420px; overflow: auto; background: var(--bg); color: var(--text); font: 12px/1.55 var(--mono); white-space: pre; tab-size: 2; }
.render-component.rc-copy-block .rc-copy-code code { font: inherit; color: inherit; }

/* —— 通用布局渲染器：tree / timeline / stat-checks / log-highlights / gallery —— */
.render-component.rc-tree-wrap { border-left-color: var(--primary); }
.render-component .rc-tree, .render-component .rc-tree ul { list-style: none; margin: 0; padding: 0; }
.render-component .rc-tree { display: grid; gap: 4px; }
.render-component .rc-tree-node { position: relative; padding-left: 16px; }
.render-component .rc-tree-node::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.render-component .rc-tree-node > .rc-tree { margin-top: 4px; }
.render-component .rc-tree-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.render-component .rc-badge { display: inline-flex; align-items: center; font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface-tint); }
.render-component .rc-badge-ok { color: var(--success); border-color: var(--success); background: var(--success-a-08); }
.render-component .rc-badge-err { color: var(--error); border-color: var(--error); background: var(--error-a-08); }
.render-component .rc-badge-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-a-06); }
.render-component .rc-badge-muted { color: var(--text-2); }

.render-component.rc-timeline { border-left-color: var(--primary); }
.render-component .rc-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.render-component .rc-tl-item { display: grid; grid-template-columns: max-content 1fr; gap: 10px; }
.render-component .rc-tl-dot { display: flex; align-items: flex-start; padding-top: 2px; }
.render-component .rc-tl-body { border-left: 2px solid var(--border); padding-left: 10px; }
.render-component .rc-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.render-component .rc-tl-time { font-size: 11px; font-weight: 700; color: var(--primary); font-family: var(--mono); }
.render-component .rc-tl-title { font-size: 13px; font-weight: 600; color: var(--text); }
.render-component .rc-tl-text { font-size: 13px; margin-top: 2px; }
.render-component .rc-tl-decision { font-size: 12px; margin-top: 2px; }

.render-component .rc-stat-checks { display: grid; gap: 4px; margin-top: 8px; }
.render-component .rc-stat-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.render-component .rc-log-highlights { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; max-height: 180px; overflow: auto; }
.render-component .rc-log-line { font: 12px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.render-component .rc-log-warn { color: var(--warn); }
.render-component .rc-log-error { color: var(--error); }
.render-component .rc-mono { font-family: var(--mono); }

.render-component.rc-gallery .rc-gallery-row { display: flex; flex-wrap: wrap; gap: 10px; }
.render-component.rc-gallery .rc-gallery-item { margin: 0; min-width: 120px; }
.render-component.rc-gallery .rc-gallery-item img { max-width: 200px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); }
.render-component.rc-gallery .rc-gallery-item figcaption { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 4px; }

html.light .render-component.rc-callout-neutral .rc-callout-body { border-left-color: var(--text-2); }
.ai-error {
  background: var(--error-a-08);
  border: 1px solid var(--error);
  color: var(--error);
  padding: 8px 12px; border-radius: 6px;
  font: 12px/1.5 var(--mono);
  white-space: pre-wrap; word-break: break-word;
}
.ai-pipeline {
  margin: 6px 0 0; padding: 8px 12px; border-radius: 6px;
  font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word;
  border: 1px solid var(--success-a-42); color: var(--text); background: var(--success-a-08);
}
.ai-pipeline.bad { border-color: var(--error); color: var(--error); background: var(--error-a-08); }
/* 分阶段会话正文：阶段到达时才出现，标题、进度和持续输出内容始终包在同一个块中。 */
.work-stages { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; }
.work-stage { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-tint); }
.work-stage-head { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px 11px; border-bottom: 1px solid var(--border); }
.work-stage-marker { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--text-3); opacity: .65; }
.work-stage-heading { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.work-stage-heading strong { font-size: 13px; line-height: 1.45; }
.work-stage-heading > span { color: var(--text-3); font-size: 11px; line-height: 1.4; }
.work-stage-status { padding: 1px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-3); font-size: 11px; white-space: nowrap; }
.work-stage-body { padding: 9px 11px 10px; }
.work-stage-updates { display: flex; flex-direction: column; gap: 4px; }
.work-stage-update { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.work-stage-update::before { content: '·'; margin-right: 6px; color: var(--text-3); }
.work-stage-model-output:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.work-stage-model-output .ai-text { margin: 0; }
.work-stage.status-analyzing .work-stage-marker,
.work-stage.status-in_progress .work-stage-marker { background: var(--primary); opacity: 1; animation: pulse 1.25s ease-in-out infinite; }
/* 等待确认、重连或超时时，全局胶囊接管注意力，阶段点静止，保证同屏只有一个动态焦点。 */
.turn.stage-progress-suppressed .work-stage.status-analyzing .work-stage-marker,
.turn.stage-progress-suppressed .work-stage.status-in_progress .work-stage-marker { animation: none; opacity: .7; transform: none; }
.work-stage.status-analyzing .work-stage-status,
.work-stage.status-in_progress .work-stage-status { color: var(--primary); background: var(--primary-a-08); }
.work-stage.status-completed .work-stage-marker { background: var(--success); opacity: 1; }
.work-stage.status-completed .work-stage-status { color: var(--success); background: var(--success-a-06); }
.work-stage.status-blocked .work-stage-marker { background: var(--warn); opacity: 1; }
.work-stage.status-blocked .work-stage-status { color: var(--warn); background: var(--warn-a-06); }
.work-stage.status-failed .work-stage-marker { background: var(--error); opacity: 1; }
.work-stage.status-failed .work-stage-status { color: var(--error); background: var(--error-a-08); }
.work-stage.status-skipped { opacity: .62; }

.turn-summary {
  margin: 12px 0 4px; padding: 10px 0 0;
  border-top: 1px solid var(--border); border-radius: 0;
  background: transparent; white-space: normal; word-break: normal; overflow-wrap: normal;
}
/* 本轮结果出现时的一次性高亮描边，告诉用户“这是这一轮的结果”，动画结束后由 JS 移除该类。 */
.turn-summary.result-focus { animation: resultFocus 1.4s ease-out; }
@keyframes resultFocus {
  0% { box-shadow: 0 0 0 0 var(--primary-a-38); border-color: var(--primary); }
  35% { box-shadow: 0 0 0 4px var(--primary-a-22); border-color: var(--primary); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.turn-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.turn-summary-head strong { font-size: 13px; }
.turn-summary-list { display: flex; flex-direction: column; gap: 4px; }
.turn-summary-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto min-content; gap: 8px; align-items: center; font: 12px/1.45 var(--mono); }
.turn-summary-symbol { font-weight: 700; text-align: center; }
.turn-summary-row.added .turn-summary-symbol { color: var(--success); }
.turn-summary-row.modified .turn-summary-symbol { color: var(--warn); }
.turn-summary-row.deleted .turn-summary-symbol { color: var(--error); }
.turn-summary-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-summary-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.turn-summary-open {
  min-height: 28px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--primary-a-38);
  background: var(--primary-a-08); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  font-size: 12px; line-height: 1.35; display: inline-flex; align-items: center;
}
.turn-summary-open:hover { background: var(--primary-a-16); }
.turn-summary-label { color: var(--text-2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-size: 11px; white-space: nowrap; word-break: keep-all; min-width: 28px; }
.turn-summary-all { display: inline-flex; align-self: flex-start; margin-top: 4px; font-size: 12px; }

/* 推荐下一步（豆包风格推荐气泡） */
.next-actions { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.next-actions-hint { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.next-actions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.next-action-btn {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); font-size: 13px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.next-action-btn:hover { background: var(--panel-2); border-color: var(--text-2); }
.next-action-btn.primary { background: var(--primary-a-08); border-color: var(--primary-a-38); color: var(--primary); }
.next-action-btn.primary:hover { background: var(--primary-a-16); }

/* ── 交互组件：AI 在对话流中向用户提问的内联卡片 ── */
.interaction-card {
  margin: 4px 0 8px;
  border: 1px solid var(--primary-a-24);
  border-radius: 12px;
  background: var(--primary-a-06);
  overflow: hidden;
  transition: border-color .2s var(--ease-standard), opacity .25s var(--ease-standard);
}
.interaction-card.answered {
  border-color: var(--primary-a-35);
  background: var(--primary-a-06);
}
/* 能力配置卡：作为「对话内嵌问询块」融入消息流，而非醒目告警弹层。
   弱化边框与底色，仅用细分隔线与轻量小标签；高风险再由 .capability-pill.risk-high 点缀。 */
.interaction-card.capability-action-card {
  border-color: var(--border);
  background: var(--surface-tint);
}
.interaction-capability-head {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.interaction-capability-kicker {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.interaction-capability-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.interaction-capability-desc {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.interaction-capability-meta,
.interaction-missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.capability-pill,
.interaction-missing-list span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface-tint);
}
.capability-pill.risk-low { color: var(--success); border-color: var(--success-a-35); background: var(--success-a-06); }
.capability-pill.risk-medium { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.capability-pill.risk-high { color: var(--error); border-color: var(--error-a-35); background: var(--error-a-06); }
.capability-return-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 30px 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--warn-a-35);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--warn-a-06), var(--primary-a-06));
  position: relative;
  transition: opacity .3s, transform .3s;
}
.capability-return-banner.dismissing {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.capability-return-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  opacity: .85;
}
.capability-return-dismiss:hover { opacity: 1; color: var(--text); background: var(--panel-2); }
.capability-return-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.capability-return-main strong { color: var(--warn); }
.capability-return-main span { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.capability-return-stale {
  border-color: var(--border);
  background: var(--panel-2);
}
.capability-return-stale .capability-return-main strong { color: var(--text-2); }
.interaction-option.action-only {
  border-style: dashed;
}
.interaction-card.cancelled {
  border-color: var(--border);
  opacity: .55;
}
.interaction-card.timed-out {
  border-color: var(--warn-a-35);
  background: var(--warn-a-06);
  opacity: .75;
}
.interaction-card.timed-out .interaction-option {
  opacity: .5;
  cursor: not-allowed;
}
.interaction-card.timed-out .interaction-status {
  border-top-color: var(--warn-a-22);
  color: var(--warn);
}
/* turn 终态（done/failed/canceled）时的交互卡样式：
   未完成交互卡 → 灰色禁用；已确认交互卡下游失败 → 红色警示 */
.interaction-card.turn-ended {
  border-color: var(--border);
  background: var(--surface-tint);
  opacity: .65;
}
.interaction-card.turn-ended .interaction-option {
  opacity: .5;
  cursor: not-allowed;
}
.interaction-card.turn-ended .interaction-custom textarea,
.interaction-card.turn-ended .interaction-custom .btn {
  opacity: .5;
  cursor: not-allowed;
}
.interaction-card.turn-ended .interaction-status {
  border-top-color: var(--border);
  color: var(--text-3);
}
/* 已回答卡片按后续任务真实终态着色；成功不再被统一误画成红色。 */
.interaction-card.turn-ended.answered.downstream-done {
  opacity: 1;
}
.interaction-card.turn-ended.answered.downstream-done .interaction-status {
  border-top-color: var(--success-a-22);
  color: var(--success);
}
.interaction-card.turn-ended.answered.downstream-canceled .interaction-status {
  border-top-color: var(--warn-a-22);
  color: var(--warn);
}
.interaction-card.turn-ended.answered.downstream-failed .interaction-status {
  border-top-color: var(--error-a-22);
  color: var(--error);
}
.interaction-question {
  padding: 12px 14px 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
}
.interaction-answer-summary {
  margin: 0 14px 10px;
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid var(--primary-a-18);
  border-radius: 8px;
  background: var(--surface-tint);
}
.interaction-answer-label {
  flex-shrink: 0;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}
.interaction-answer-value {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.interaction-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 14px 12px;
}
.interaction-option {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s var(--ease-standard);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
}
.interaction-option:hover {
  border-color: var(--primary-a-45);
  background: var(--panel-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.interaction-option:active {
  transform: scale(.97);
}
.interaction-option.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.interaction-option.primary:hover {
  background: var(--primary-2);
  border-color: var(--primary-2);
}
.interaction-option.danger {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-a-06);
}
.interaction-option.danger:hover {
  background: var(--error-a-12);
}
.interaction-option .opt-label {
  font-weight: 600;
}
.interaction-option .opt-desc {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 400;
}
.interaction-option.primary .opt-desc {
  color: rgba(255,255,255,.7);
}
.interaction-option:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important;
}
.interaction-option.selected {
  opacity: 1;
  border-color: var(--primary);
  background: var(--primary-a-12);
  color: var(--text);
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* 自定义输入区域 */
.interaction-custom {
  padding: 0 14px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.interaction-custom textarea {
  flex: 1;
  min-height: 36px;
  max-height: 80px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
}
.interaction-custom .btn {
  flex-shrink: 0;
  margin-top: 0;
}
.interaction-status {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-2);
  border-top: 1px solid var(--primary-a-12);
  display: flex;
  align-items: center;
  gap: 6px;
}
.interaction-card.answered .interaction-status {
  border-top-color: var(--primary-a-22);
  color: var(--primary);
}
.interaction-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 1.2s infinite;
}
.interaction-card.answered .interaction-status-dot {
  background: var(--primary);
  animation: none;
}

/* ===== 交互卡内嵌表单字段 ===== */
.interaction-fields {
  padding: 4px 14px 8px;
}
.interaction-fields .field label {
  font-size: 12px;
}
.interaction-fields .field input,
.interaction-fields .field select,
.interaction-fields .field textarea {
  font-size: 13px;
  padding: 7px 10px;
}
.interaction-fields .field-error input,
.interaction-fields .field-error select,
.interaction-fields .field-error textarea {
  border-color: var(--error);
}
.interaction-fields .field-error::after {
  content: '此项必填';
  color: var(--error);
  font-size: 11px;
}
.interaction-radio-group,
.interaction-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.interaction-card.answered .interaction-fields input,
.interaction-card.answered .interaction-fields select,
.interaction-card.answered .interaction-fields textarea {
  opacity: .7;
}
.interaction-card.timed-out .interaction-fields input,
.interaction-card.timed-out .interaction-fields select,
.interaction-card.timed-out .interaction-fields textarea {
  opacity: .5;
  pointer-events: none;
}

/* 活动指示器：合并「AI 正在思考」状态 + 「执行记录」进度，单枚胶囊原地刷新。
   借鉴旧版「思考中」放在 AI 气泡左下角（in-flow，避免纯思考无正文时塌陷）；面板向上浮层展开，默认折叠、仅点击展开。 */
.execution-record-dock {
  align-self: flex-start; position: relative; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
/* 展开面板时抬升整颗 dock 的层叠级，使其上的浮层面板覆盖相邻 turn 的 dock（同为 z-index:6）
   与回到底部按钮（z-index:20）；否则同 z-index 下后继 turn 的 dock 因 DOM 顺序在后会压住面板。 */
.execution-record-dock.open { z-index: 30; }
.execution-record-toggle {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px;
  height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--primary-a-24);
  background: var(--surface-raised); color: var(--text-2);
  font-size: 12px; cursor: pointer;
  box-sizing: border-box;
  /* 固定最小宽度消除动词切换时的横向晃动；步数单独放徽章区
     168px 兜底最长状态文案「AI 正在执行操作…」「AI 正在整理结果…」+ 圆点 + 间距 + 内边距 */
  min-width: 168px; max-width: 70vw;
  box-shadow: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.execution-record-toggle:hover { color: var(--text); border-color: var(--primary-a-45); background: var(--panel-2); }
/* 仅「可点击」的胶囊在 hover 时给极轻微抬升，作为可交互暗示（resting flat, hover lift）。 */
.execution-record-dock:not(.no-detail) .execution-record-toggle:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
/* 纯状态（无可展开的执行步骤）：是标签不是按钮，去掉点击态与悬停反馈 */
.execution-record-dock.no-detail .execution-record-toggle { cursor: default; }
.execution-record-dock.no-detail .execution-record-toggle:hover { color: var(--text-2); border-color: var(--primary-a-24); background: var(--surface-raised); }
.execution-record-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.execution-record-steps { flex: 0 0 auto; font-size: 11px; color: var(--text-3); white-space: nowrap; margin-left: 2px; }
.execution-record-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; flex: 0 0 auto; }
.execution-record-dock.is-running .execution-record-dot { animation: pulse 1.25s ease-in-out infinite; color: var(--primary); }
.execution-record-dock.is-running .execution-record-toggle { color: var(--primary); border-color: var(--primary-a-22); background: var(--primary-a-08); }
.execution-record-dock.is-waiting .execution-record-toggle { color: var(--accent); border-color: var(--accent); background: var(--accent-a-18); }
.execution-record-dock.is-waiting .execution-record-dot { color: var(--accent); }
.execution-record-dock.is-stale .execution-record-toggle { color: var(--warn, #e6a23c); border-color: color-mix(in srgb, var(--warn, #e6a23c) 35%, transparent); background: color-mix(in srgb, var(--warn, #e6a23c) 6%, transparent); }
.execution-record-dock.is-done .execution-record-dot { color: var(--success); opacity: .9; }
.execution-record-dock.is-done .execution-record-toggle { color: var(--success); border-color: var(--success-a-35); background: var(--success-a-06); }
.execution-record-dock.has-error .execution-record-toggle { color: var(--error); border-color: color-mix(in srgb, var(--error) 42%, transparent); background: color-mix(in srgb, var(--error) 7%, transparent); }
.execution-record-dock.has-error .execution-record-dot { color: var(--error); }
.execution-record-dock.has-warning .execution-record-toggle { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.execution-record-dock.has-warning .execution-record-dot { color: var(--warn); }
.exec-fail-count { color: var(--error); }
.exec-recovered-count { color: var(--warn, #e6a23c); }
/* done 终态胶囊保持绿色，「过程波折已恢复 N」作为黄色子徽章叠加而非染整颗胶囊 */
.exec-recovered-badge {
  display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; line-height: 1.5; color: var(--warn);
  background: var(--warn-a-12, var(--warn-a-06));
  border: 1px solid var(--warn-a-35);
}
.execution-record-panel {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  width: min(520px, calc(100vw - 88px)); max-height: min(56vh, 520px); overflow: auto;
  padding: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-raised); box-shadow: 0 18px 52px rgba(0,0,0,.38);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* 上方空间不足时改为向下展开 */
.execution-record-dock.open-below .execution-record-panel {
  bottom: auto; top: calc(100% + 6px);
}
.platform-wrap:empty,
.tools-wrap:empty { display: none; }
.platform-wrap, .tools-wrap { display: flex; flex-direction: column; gap: 6px; }
.platform-wrap:not(:empty) + .tools-wrap:not(:empty) { margin-top: 8px; }
.tool-group {
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  background: var(--surface-tint);
}
.tool-group-head {
  padding: 7px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
}
.tool-group-head:hover { background: var(--surface-tint-2); color: var(--text); }
.tool-group-body { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-top: 1px solid var(--border); }
.tool {
  border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  background: var(--panel-2);
}
.tool.tool-use { border-left: 3px solid var(--primary); }
.tool.tool-ok { border-left: 3px solid var(--success); }
.tool.tool-bad { border-left: 3px solid var(--error); }
.tool-head {
  padding: 6px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text);
}
.tool-head:hover { background: var(--surface-tint-2); }
.tool-head-icon { color: var(--primary); }
.tool-ok .tool-head-icon { color: var(--success); }
.tool-bad .tool-head-icon { color: var(--error); }
.tool-toggle { color: var(--text-2); font-size: 10px; }
.tool-body {
  margin: 0; padding: 8px 12px;
  background: var(--term-bg); border-top: 1px solid var(--border);
  font: 11px/1.5 var(--mono);
  white-space: pre-wrap; word-break: break-word;
  max-height: 360px; overflow: auto;
}
/* P1 工具 body 超长截断：容器复用 .tool-body 视觉，内部 pre 只放头部、尾部折叠为展开按钮 */
.tool-body-pre {
  margin: 0; font: inherit;
  white-space: pre-wrap; word-break: break-word;
}
.tool-body-more {
  display: block; margin-top: 8px; padding: 4px 10px;
  background: transparent; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-2); font-size: 11px; cursor: pointer; text-align: left;
}
.tool-body-more:hover { color: var(--text-1); border-color: var(--text-2); }
.recovery-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--error-a-28);
  background: var(--error-a-06);
}
.recovery-actions .muted { flex: 1 1 100%; font-size: 12px; }
.recovery-actions .btn { font-size: 12px; padding: 4px 9px; }
/* grounding 整轮重来后，上一轮（已作废）的工具/系统动作记录：灰显 + 右侧「已作废」徽章，保留审计。 */
.tool.tool-stale { opacity: .5; }
.tool.tool-stale .tool-head { text-decoration: line-through; text-decoration-color: var(--border); }
.tool.tool-stale .tool-head::after {
  content: '已作废'; margin-left: auto;
  font-size: 10px; line-height: 1; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--surface-tint);
  text-decoration: none; flex: none;
}
/* grounding 整轮重来提示条：解释正文为何被清空、正在基于代码重新作答。 */
.grounding-reset-notice {
  margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px dashed var(--warn, #e6a23c);
  background: color-mix(in srgb, var(--warn, #e6a23c) 6%, transparent);
  color: var(--text-2); font-size: 12px; line-height: 1.5;
}

/* turn 状态已合并进右上角「活动指示器」(.execution-record-dock)，底部状态行不再单独展示；
   .turn-status 仍保留为状态机内部驱动元素（dataset/className 供终态判定与看门狗使用），仅视觉隐藏。 */
.turn-status { display: none !important; }
.turn-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; border-radius: 999px; padding: 3px 8px;
  border: 1px solid var(--border); background: var(--surface-tint); color: var(--text-2);
}
.turn-status.queued, .turn-status.running, .turn-status.committing, .turn-status.starting, .turn-status.interacting {
  color: var(--primary); background: var(--primary-a-08); border-color: var(--primary-a-22);
}
.turn-status.running::before, .turn-status.queued::before, .turn-status.interacting::before, .turn-status.phase-writing::before, .turn-status.phase-tooling::before, .turn-status.phase-finalizing::before, .turn-status.phase-processing::before, .turn-status.phase-reconnecting::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.turn-status.queued::before, .turn-status.interacting::before, .turn-status.phase-thinking::before, .turn-status.phase-writing::before, .turn-status.phase-tooling::before, .turn-status.phase-finalizing::before, .turn-status.phase-processing::before, .turn-status.phase-reconnecting::before { animation: pulse 1.25s ease-in-out infinite; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.turn-status.phase-tooling { color: var(--accent); border-color: var(--accent); background: var(--accent-a-18); }
.turn-status.phase-finalizing { color: var(--primary); border-color: var(--primary-a-38); background: var(--primary-a-08); }
.turn-status.phase-processing { color: var(--warn, #e6a23c); border-color: color-mix(in srgb, var(--warn, #e6a23c) 30%, transparent); background: color-mix(in srgb, var(--warn, #e6a23c) 5%, transparent); }
.turn-status.phase-reconnecting { color: var(--warn, #e6a23c); border-color: color-mix(in srgb, var(--warn, #e6a23c) 35%, transparent); background: color-mix(in srgb, var(--warn, #e6a23c) 6%, transparent); }
.turn-status.running::before { opacity: .72; }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.turn-status.running, .turn-status.committing, .turn-status.starting { color: var(--primary); }
.turn-status.interacting { color: var(--accent); border-color: var(--accent); background: var(--accent-a-18); }
.turn-status.done { color: var(--success); border-color: var(--success-a-35); background: var(--success-a-06); }
.turn-status.failed { color: var(--error); border-color: var(--error-a-35); background: var(--error-a-06); }
.turn-status.blocked, .turn-status.paused, .turn-status.incomplete { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.turn-status.canceled { color: var(--text-3); border-color: var(--border); background: var(--surface-tint); }
/* 未知/异常状态：琥珀色警告样式（替代灰色默认），避免"灰色点"让用户困惑 */
.turn-status.undefined, .turn-status.null, .turn-status.unknown { color: var(--warn, #e6a23c); border-color: color-mix(in srgb, var(--warn, #e6a23c) 35%, transparent); background: color-mix(in srgb, var(--warn, #e6a23c) 6%, transparent); }
.turn-status.undefined::before, .turn-status.null::before, .turn-status.unknown::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; border-radius: 50%; background: currentColor; font-size: 5px; line-height: 1; font-weight: 700; }
/* 运行超时警告：SSE 仍有活动但 turn 已运行过久（turn.end 丢失） */
.turn-status.stale-warning { color: var(--warn, #e6a23c); border-color: color-mix(in srgb, var(--warn, #e6a23c) 35%, transparent); background: color-mix(in srgb, var(--warn, #e6a23c) 6%, transparent); }
.turn-status.stale-warning::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1s infinite; }

/* 终止按钮软超时提示：运行超过 SOFT_TIMEOUT 时变为琥珀色警告 */
.action-btn.action-slow { color: var(--warn, #e6a23c); border-color: var(--warn, #e6a23c); background: color-mix(in srgb, var(--warn, #e6a23c) 8%, transparent); }

/* 运行进度统一使用 turn-status 消息级呼吸态；正文不再显示内联光标，避免文本/组件混排时焦点错位。 */

/* 上下文压缩提示 */
.context-compressed-hint {
  border-style: solid; border-color: var(--primary-a-22);
  background: var(--primary-a-08);
}

/* 加载更早消息 */
.load-earlier-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.load-earlier-btn:hover { background: var(--panel-2); border-color: var(--primary-a-45); color: var(--text); }

/* 输入区 */
.chat-input {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 12px 16px;
}
.prompt-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.prompt-chips-label { color: var(--text-2); font-size: 12px; margin-right: 2px; }
.prompt-chip {
  max-width: 220px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-tint); color: var(--text-2); cursor: pointer;
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prompt-chip:hover { color: var(--text); border-color: var(--primary-a-45); background: var(--primary-a-08); }
.chat-input textarea {
  resize: none;
  min-height: 64px;
  max-height: 200px;
  font-size: 16px; /* ≥16px 防止 iOS Safari 自动放大输入框 */
}
.pending-interaction-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin-bottom: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--warn-a-35); background: var(--warn-a-06);
}
.pending-interaction-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pending-interaction-main strong { color: var(--warn); font-size: 12px; }
.pending-interaction-main span { color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-input-hint { font-size: 12px; }
/* Codex 风格附件条：以紧凑、可移除的上下文胶囊呈现，不打断编辑流。 */
.composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.composer-attachment, .message-attachment {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-tint);
  color: var(--text-2); font-size: 12px; line-height: 1; text-decoration: none;
}
.composer-attachment { max-width: min(100%, 360px); padding: 7px 7px 7px 9px; }
.composer-attachment.is-image { padding: 4px 7px 4px 4px; }
.composer-attachment-thumb-wrap, .message-attachment-thumb-wrap { position: relative; display: block; flex: 0 0 auto; }
.composer-attachment-thumb-wrap { width: 42px; height: 42px; }
.composer-attachment-thumb { width: 42px; height: 42px; display: block; border-radius: 7px; object-fit: cover; background: var(--panel-2); }
.composer-attachment-thumb-wrap video.composer-attachment-thumb { object-fit: cover; }
.attachment-reference-badge {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(8, 11, 20, .82); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28); font-size: 10px; font-weight: 700; line-height: 1;
}
.composer-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-attachment-state { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.composer-attachment-remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; color: var(--text-3); background: transparent; cursor: pointer; }
.composer-attachment-remove:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.composer-attachment-remove:disabled { cursor: wait; opacity: .45; }
.composer-attachment.failed { border-color: var(--danger-a-45); color: var(--danger); }
.composer-attachment.clickable { cursor: pointer; }
.composer-attachment.clickable:hover { background: var(--panel-2); }
.composer-attachment.clickable:focus-visible { outline: 2px solid var(--accent-a-45); outline-offset: 1px; }
.composer-attachment.failed .composer-attachment-state { text-decoration: underline; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachment { padding: 7px 9px; color: inherit; background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 28%, transparent); }
.message-attachment.is-image { width: 168px; padding: 5px; flex-direction: column; align-items: stretch; gap: 5px; cursor: zoom-in; font: inherit; text-align: left; }
.message-attachment-thumb-wrap { width: 100%; height: 112px; }
.message-attachment-thumb { width: 100%; height: 112px; display: block; border-radius: 7px; object-fit: cover; background: color-mix(in srgb, #fff 10%, transparent); }
.message-attachment-video-thumb { position: relative; display: block; width: 100%; height: 112px; border-radius: 7px; overflow: hidden; background: #000; }
.message-attachment-video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.message-attachment-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.18); pointer-events: none; }
.message-attachment-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 1px 3px; }
.message-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-attachment:hover { background: color-mix(in srgb, #fff 22%, transparent); }
.message-attachment small { opacity: .72; font-size: 10px; white-space: nowrap; }
/* 输入框 + 悬浮发送/终止按钮：按钮固定在输入框内右下角（现代对话输入范式） */
.composer { position: relative; display: block; }
.composer textarea { width: 100%; padding-right: 52px; box-sizing: border-box; }
.composer-actions {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.chat-input-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; gap: 12px;
}
.chat-input-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 底部三颗工具按钮的内距/字号统一由 .chat-tool-btn（见上方定义）负责，
   此处不再单独给 .btn 设内距，避免两条同特异性规则互相覆盖导致大小不一。 */
.chat-run-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 发送/终止 icon 按钮 */
.action-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, opacity .15s ease, transform .1s ease;
  flex-shrink: 0;
}
.action-btn:active { transform: scale(.92); }
.action-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.action-btn svg { display: block; }
/* 发送态：主色圆形按钮 + 白色 icon */
.action-send {
  background: var(--primary); color: #fff;
}
.action-send:hover:not(:disabled) { background: var(--primary-2); }
/* 终止态：浅底 + 红色 icon */
.action-stop {
  background: var(--error-a-08); color: var(--error); border: 1px solid var(--error-a-35);
}
.action-stop:hover:not(:disabled) { background: var(--error-a-16); }
/* 强制取消：超时后仍不可正常终止时的琥珀色警告按钮 */
.action-force-cancel {
  background: var(--warn-a-06); color: var(--warn); border-color: var(--warn-a-35);
}
.action-force-cancel:hover:not(:disabled) { background: color-mix(in srgb, var(--warn, #e6a23c) 16%, transparent); }
/* 等待态 */
.action-pending {
  background: var(--panel-2); color: var(--text-2);
}
.action-pending svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .side { display: none; }
  .content { padding: 12px; min-height: 0; overflow-y: auto; }
  .chat-shell { height: calc(100% + 24px); margin: -12px; }
  .chat-header { flex-wrap: nowrap; }
  .chat-header-actions { justify-content: flex-end; }
  .mobile-hide { display: none !important; }
  .msg.user .msg-content { max-width: 88%; }
}
@media (max-width: 640px) {
  html, body { overscroll-behavior: none; }
  .shell { grid-template-rows: 48px 1fr; }
  .shell.chat-mode { grid-template-rows: 1fr; }
  .topbar { display: flex; gap: 4px; padding: 0 6px; }
  .shell.chat-mode .topbar { display: none !important; }
  .brand-mark-mobile { display: inline-flex; border: none; background: transparent; border-radius: 8px; gap: 5px; padding: 0 4px; font-size: 13px; }
  .brand-mark-mobile:hover { background: var(--panel-2); }
  .brand-mark-mobile .brand-mark-glyph { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
  .chat-header .brand-mark-mobile > span:not(.brand-mark-glyph) { display: none; }
  /* 移动端 tab：只显示图标，去掉文字节省空间 */
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .side { display: none; }
  .content { padding: 12px; min-height: 0; overflow-y: auto; }
  .chat-header { flex-wrap: nowrap; padding: 6px 10px; gap: 6px; }
  .chat-header-left { flex: 1 1 0; min-width: 0; }
  .chat-header-actions { display: flex; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  /* 移动端仍保留右上角 ⋯ 工具栏入口 */
  .chat-header-actions .agent-toolbar-btn { display: inline-flex !important; }
  .chat-header-actions .muted { font-size: 11px; }
  /* 头部工作区按钮：紧凑图标+文字胶囊，与底部工具按钮风格一致 */
  .chat-header-actions .ws-mobile-btn { padding: 3px 8px; font-size: 12px; gap: 4px; line-height: 1.4; }
  .chat-header-actions .ws-mobile-btn .ws-change-badge { font-size: 10px; min-width: 14px; height: 14px; padding: 0 3px; }
  .mobile-hide { display: none !important; }
  .conv-wechat-btn { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 7px; padding-right: 7px; }
  .chat-shell { grid-template-columns: 1fr; height: calc(100% + 24px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: -12px; overflow: hidden; }
  .chat-messages { padding: 16px 10px; }
  .execution-record-toggle { min-width: 140px; max-width: 70vw; }
  .execution-record-panel { width: calc(100vw - 58px); max-height: 54vh; }
  .chat-input { padding: 8px 10px; }
  .chat-input-left .muted { display: none; }
  .pending-interaction-bar { grid-template-columns: 1fr; }
  /* 移动端输入交互：发送/终止按钮统一浮于输入框内右下角（.composer 内定位）；
     键盘换行键即发送（enterkeyhint=send + beforeinput 兜底） */
  .chat-input-bar { margin-top: 6px; min-height: 0; }
  .composer textarea { padding-right: 48px; }
  .composer-actions { right: 10px; bottom: 13px; }
  .scroll-bottom-btn { right: 14px; bottom: 116px; }
  .todo-row { grid-template-columns: auto minmax(0, 1fr); }
  .todo-actions { grid-column: 2; justify-content: flex-start; max-width: none; }
  .todo-add-actions { justify-content: stretch; }
  .todo-add-actions .btn { flex: 1; }
  .pin-compose-actions { justify-content: stretch; }
  .pin-compose-actions .btn { flex: 1; justify-content: center; }
  .git-operation-hero { grid-template-columns: 1fr; }
  .git-status-summary { justify-content: flex-start; }
  .git-publish-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-grid { grid-template-columns: 1fr; }
  .type-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-group-head { flex-direction: column; align-items: flex-start; }
  .type-picker-hint { text-align: left; }
  .agent-invite-card { padding: 13px; border-radius: 15px; }
  .agent-invite-head { flex-direction: column; gap: 8px; }
  .agent-invite-methods { grid-template-columns: 1fr; }
  .agent-invite-method { padding: 12px; }
  .agent-invite-method > .btn { width: 100%; min-height: 44px; }
  .agent-invite-number-row { align-items: stretch; }
  .agent-invite-number-row .btn { min-height: 44px; }
  .agent-invite-generated { grid-template-columns: 1fr; }
  .agent-invite-qr-frame { width: 100%; height: auto; min-height: 180px; }
  .agent-invite-qr { width: min(180px, 64vw); height: min(180px, 64vw); }
  .invite-link-row { grid-template-columns: 1fr; }
  .friends-card-head, .friends-section-head { flex-direction: column; }
  .friends-topbar { flex-direction: column; align-items: stretch; }
  .friends-topbar-right { justify-content: space-between; }
  .friend-self-alias:not(.compact) { justify-items: start; width: 100%; }
  .friends-request-head { flex-direction: column; }
  .friends-request-row { grid-template-columns: 1fr; }
  .invite-link-row .btn { width: 100%; }
  .works-tabs { flex-wrap: wrap; }
  .works-toolbar { grid-template-columns: 1fr; }
  .works-section-head { flex-direction: column; }
  .works-file-row { grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; }
  .works-file-actions { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
  /* 移动端：优先保证「文件名 + 操作按钮」同一行。窄屏空间不足时，类型徽标/状态下沉到第 2 行，
     避免把“预览”挤到下一行。 */
  .turn-summary-row { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 6px; }
  .turn-summary-symbol { grid-column: 1; grid-row: 1; }
  .turn-summary-path { grid-column: 2; grid-row: 1; min-width: 0; }
  .turn-summary-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; white-space: nowrap; }
  .turn-summary-actions:empty { display: none; }
  .turn-summary-row .artifact-ext-badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .turn-summary-label { grid-column: 3; grid-row: 2; justify-self: end; }
  .turn-summary-open { padding: 3px 8px; min-height: 26px; white-space: nowrap; flex: 0 0 auto; }
  /* 移动端：大模态框改为全屏推入（height 用 100dvh 跟随虚拟键盘动态缩放） */
  .modal { width: 100% !important; max-width: 100% !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; height: 100vh; height: 100dvh; }
  .modal .body { flex: 1; min-height: 0; }
  .model-library-layout { grid-template-columns: 1fr; }
  .model-library-pane { max-height: none; }
  .model-library-list { max-height: 200px; }
  .model-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .load-earlier-btn { font-size: 12px; padding: 8px 12px; }
  /* ── Apple HIG: 移动端保存按钮 ── */
  .btn-save { width: 100%; min-height: 44px; font-size: 16px; font-weight: 600; border-radius: 10px; padding: 10px 16px; }
  .settings-card-head .row { flex-wrap: wrap; }
  .settings-card-head .row .btn:not(.btn-save) { flex: 1; min-height: 44px; }
  .settings-card-head .row .btn-save { flex: 1; }
  .settings-card > .row:has(> .btn-save) { width: 100%; }
  .settings-page { padding-bottom: 16px; }

  /* —— 渲染组件移动端可读性 ——
   * 桌面端样式不动；此处只收紧密度、抬字号下限、消除嵌套滚动与横向滚动孤岛。 */
  .render-component { margin: 10px 0; padding: 9px 11px; font-size: 13px; border-radius: 9px; }
  .render-component .rc-head { font-size: 12.5px; margin-bottom: 6px; }
  .render-component + .render-component { margin-top: 7px; }
  .render-component.rc-callout .rc-callout-body { padding: 8px 11px; }
  .render-component .rc-callout-title { font-size: 12.5px; }
  .render-component.rc-steps .rc-steps { gap: 7px; }
  .render-component.rc-steps .rc-step { padding-left: 24px; }
  .render-component.rc-steps .rc-step::before { width: 18px; height: 18px; font-size: 10.5px; }
  .render-component.rc-steps .rc-step-body { font-size: 12.5px; }
  /* kv：标签/值上下堆叠，避免长标签挤压值列 */
  .render-component.rc-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .render-component.rc-kv dt { white-space: normal; font-size: 12px; }
  .render-component.rc-kv dd { font-size: 12.5px; }
  .render-component.rc-stat .rc-stat-row { gap: 8px; }
  .render-component.rc-stat .rc-stat { min-width: 76px; padding: 7px 10px; }
  .render-component.rc-stat .rc-stat-value { font-size: 16px; }
  .render-component.rc-stat .rc-stat-label { font-size: 11.5px; }
  .render-component.rc-stat .rc-stat-hint { font-size: 11.5px; }
  /* compare / code_change / command_plan：表格转堆叠卡片，消除横向滚动孤岛；
     td 借 data-label 在 ::before 内联列名，保留列归属上下文。 */
  .render-component.rc-compare { padding-right: 9px; }
  .render-component.rc-compare .rc-compare-wrap { overflow: visible; }
  .render-component.rc-compare table.rc-compare,
  .render-component.rc-compare .rc-compare thead,
  .render-component.rc-compare .rc-compare tbody,
  .render-component.rc-compare .rc-compare tr { display: block; }
  .render-component.rc-compare .rc-compare thead { display: none; }
  .render-component.rc-compare .rc-compare tbody tr { padding: 7px 0; border-bottom: 1px solid var(--border); }
  .render-component.rc-compare .rc-compare tbody tr:last-child { border-bottom: none; }
  .render-component.rc-compare .rc-compare th,
  .render-component.rc-compare .rc-compare td { display: block; padding: 2px 0; border-bottom: 0; text-align: left; }
  .render-component.rc-compare .rc-compare-label { font-weight: 700; color: var(--text); white-space: normal; margin-bottom: 3px; font-size: 12.5px; }
  .render-component.rc-compare .rc-compare td { font-size: 12.5px; }
  .render-component.rc-compare .rc-compare td::before { content: attr(data-label) "："; color: var(--text-2); font-size: 11.5px; margin-right: 6px; }
  .render-component .rc-tree-node { padding-left: 12px; }
  .render-component .rc-tree-label { font-size: 12.5px; }
  .render-component .rc-timeline { gap: 8px; }
  .render-component .rc-tl-body { padding-left: 8px; }
  .render-component .rc-tl-title { font-size: 12.5px; }
  .render-component .rc-tl-text { font-size: 12.5px; }
  .render-component .rc-tl-time { font-size: 11.5px; }
  /* log-highlights：取消嵌套滚动，避免与外层聊天竖滑打架 */
  .render-component .rc-log-highlights { max-height: none; overflow: visible; }
  .render-component .rc-log-line { font-size: 11.5px; }
  .render-component .rc-badge { font-size: 11px; }
  .render-component .rc-stat-check { font-size: 12px; }
}

/* ===== admin console ===== */
.form-grid { display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; align-items: center; }
.form-grid label { color: var(--text-2); }
.form-grid > div[class~="muted"] { grid-column: 1 / -1; }

.admin-layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-nav {
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0;
  padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-tint);
}
.admin-nav-item {
  text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px;
  transition: background .15s var(--ease-standard), color .15s var(--ease-standard), border-color .15s var(--ease-standard), transform .08s var(--ease-standard);
}
.admin-nav-item:hover { background: var(--panel-2); color: var(--text); }
.admin-nav-item:active { transform: scale(.985); }
.admin-nav-item.active { background: var(--primary-a-12); color: var(--text); border-color: var(--primary-a-55); }
.admin-panel-host { min-height: min(680px, calc(100vh - 160px)); max-width: 1120px; min-width: 0; }
.admin-composite-page { display: flex; flex-direction: column; gap: 12px; }
.admin-subtabs {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-tint);
}
.admin-subtab-host { min-width: 0; }
.admin-loading { padding: 28px 4px; }
.admin-page .kv { grid-template-columns: 120px 1fr; }
.admin-section-hero {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-a-08), var(--surface-tint));
}
.admin-section-hero h3 { margin: 0 0 4px; font-size: 18px; }
.admin-section-hero p { margin: 0; line-height: 1.5; }
.admin-empty-state {
  border: 1px dashed var(--border); border-radius: 14px; padding: 22px 16px;
  background: var(--surface-tint); text-align: center;
}
.admin-empty-state.compact { padding: 18px 12px; }
.admin-empty-state.error { border-color: var(--error-a-45); background: var(--error-a-06); }
.admin-empty-title { margin-bottom: 4px; color: var(--text); font-weight: 650; }
.admin-search-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end;
  padding: 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
}
.admin-search-main { min-width: 0; }

/* 列表条目：此前无样式，导致系统工具 / 系统设置等页是无边框无间距的裸 div 堆叠（排版散乱）。
   统一为带卡片边框、分隔与内距的清爽列表，桌面宽页与抽屉窄页通用。 */
.list-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.list-item + .list-item { margin-top: 8px; }
/* 在管理台/抽屉里成组出现时，drawer-section-title 与其下条目形成清晰分组节奏 */
.drawer-page .drawer-section-title,
.admin-panel-host .drawer-section-title { margin: 14px 2px 8px; }
.drawer-page .drawer-section-title:first-child,
.admin-panel-host .drawer-section-title:first-child { margin-top: 0; }

.admin-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.admin-table-head, .admin-table-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.admin-table-head { background: var(--panel-2); color: var(--text-2); font-size: 12px; }
.admin-table-row { border-top: 1px solid var(--border); }
.admin-cell { flex: 0 0 140px; }
/* 账号列：给一个下限宽度，避免在固定列已顶满 min-width:920px 时被 flex 压成 0 宽——
   否则长账号（含长 token 的邮箱）在 0 宽列里逐字竖排换行，把整行撑到几百 px 高，
   其余单元格因 align-items:center 居中，表现为表头与数据行之间出现超大空白行距。 */
.admin-cell.grow { flex: 1 1 220px; min-width: 180px; overflow: hidden; }
.admin-cell.grow strong { display: block; overflow-wrap: anywhere; word-break: break-word; }
.admin-cell select { width: auto; max-width: 100%; }
/* 用户管理列较多，窄面板内允许横向滚动，避免长账号把「角色/状态」列顶歪或覆盖。 */
.admin-users-table { overflow-x: auto; overflow-y: hidden; }
.admin-users-table .admin-table-head,
.admin-users-table .admin-table-row { min-width: 920px; }
.admin-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none; }
.admin-switch input { width: auto; margin: 0; cursor: pointer; }

.admin-cat-list { display: flex; flex-direction: column; gap: 8px; }
.admin-cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.admin-cat-item.disabled { opacity: .6; }
.admin-cat-main { min-width: 0; }
.admin-cat-actions { display: flex; gap: 6px; flex-shrink: 0; }

.usage-page { display: flex; flex-direction: column; gap: 12px; }
.usage-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.usage-metric {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.usage-metric.primary { background: linear-gradient(135deg, var(--primary-a-16), var(--panel)); border-color: var(--primary-a-45); }
.usage-metric.risk { background: linear-gradient(135deg, var(--error-a-08), var(--panel)); border-color: var(--error-a-35); }
.usage-metric.warn { background: linear-gradient(135deg, var(--warn-a-06), var(--panel)); border-color: var(--warn-a-35); }
.usage-metric-label { color: var(--text-2); font-size: 12px; }
.usage-metric-value { margin-top: 4px; color: var(--text); font-size: 24px; font-weight: 720; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-metric-hint { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.usage-insight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--warn-a-35); border-radius: 14px;
  background: var(--warn-a-06); color: var(--text); font-size: 13px; line-height: 1.6;
}
.usage-insight strong { color: var(--warn); white-space: nowrap; }
.usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.usage-panel {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); display: flex; flex-direction: column; gap: 10px;
}
.usage-panel-wide { grid-column: 1 / -1; }
.usage-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.usage-panel-head h4 { margin: 0 0 4px; font-size: 15px; }
.usage-panel-head p { margin: 0; font-size: 12px; line-height: 1.5; }
.usage-row { padding: 10px 0; border-top: 1px solid var(--border); }
.usage-row:first-of-type { border-top: none; }
.usage-row-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.usage-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; }
.usage-row-value { flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--text); }
.usage-row-meta { margin-top: 3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-bar { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--surface-tint); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.usage-trend { height: 150px; display: grid; grid-template-columns: repeat(14, minmax(18px, 1fr)); gap: 8px; align-items: end; padding-top: 6px; }
.usage-trend-day { min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 6px; align-items: end; }
.usage-trend-bar { height: 118px; display: flex; align-items: end; justify-content: center; border-radius: 999px; background: var(--surface-tint); overflow: hidden; }
.usage-trend-bar span { width: 100%; min-height: 6px; border-radius: inherit inherit 0 0; background: linear-gradient(180deg, var(--primary), var(--primary-a-35)); }
.usage-trend-label { text-align: center; font-size: 10px; white-space: nowrap; }

.identity-result { margin-top: 12px; }
.identity-card {
  overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
}
.identity-card-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 16px; background: linear-gradient(135deg, var(--surface-tint-2), transparent);
}
.identity-avatar {
  width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-a-16); color: var(--primary); font-weight: 750;
}
.identity-avatar.user { background: var(--success-a-12); color: var(--success); }
.identity-main { min-width: 0; }
.identity-number { font-family: var(--mono); font-size: 24px; font-weight: 760; letter-spacing: -.02em; }
.identity-meta { margin-top: 2px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-reassign { padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.identity-reassign p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.identity-reassign-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }

.sandbox-page { display: flex; flex-direction: column; gap: 12px; }
.sandbox-hero {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
}
.sandbox-hero.ok { border-color: var(--success-a-42); background: linear-gradient(135deg, var(--success-a-08), var(--panel)); }
.sandbox-hero.warn { border-color: var(--warn-a-35); background: linear-gradient(135deg, var(--warn-a-06), var(--panel)); }
.sandbox-hero.neutral { background: linear-gradient(135deg, var(--surface-tint-2), var(--panel)); }
.sandbox-hero h3 { margin: 0 0 4px; font-size: 18px; }
.sandbox-hero p { margin: 0; line-height: 1.5; }
.sandbox-hero-badge {
  flex-shrink: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 650; white-space: nowrap;
}
.sandbox-hero-badge.ok { color: var(--success); border-color: var(--success-a-45); background: var(--success-a-08); }
.sandbox-hero-badge.warn { color: var(--warn); border-color: var(--warn-a-35); background: var(--warn-a-06); }
.sandbox-hero-badge.neutral { color: var(--text-2); background: var(--surface-tint); }
.sandbox-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sandbox-status-card {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
}
.sandbox-status-card.ok { border-color: var(--success-a-35); background: var(--success-a-06); }
.sandbox-status-card.warn { border-color: var(--warn-a-35); background: var(--warn-a-06); }
.sandbox-status-label { color: var(--text-2); font-size: 12px; }
.sandbox-status-value { margin-top: 4px; color: var(--text); font-size: 18px; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-status-hint { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.sandbox-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; border: 1px solid var(--border); background: var(--surface-tint);
}
.sandbox-callout.ok { border-color: var(--success-a-35); background: var(--success-a-06); }
.sandbox-callout.ok strong { color: var(--success); }
.sandbox-callout.warn { border-color: var(--warn-a-35); background: var(--warn-a-06); }
.sandbox-callout.warn strong { color: var(--warn); }
.sandbox-callout.neutral strong { color: var(--text); }
.sandbox-panel {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
}
.sandbox-detail-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sandbox-detail-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 12px; border-top: 1px solid var(--border);
}
.sandbox-detail-row:first-child { border-top: none; }
.sandbox-detail-row span { color: var(--text-2); font-size: 12px; }
.sandbox-detail-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; font-family: var(--mono); font-size: 12px; }
.sandbox-note { margin-top: 10px; color: var(--text-2); font-size: 13px; line-height: 1.65; }

.system-agent-factory-page { display: flex; flex-direction: column; gap: 12px; }
.system-agent-compose {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--panel);
}
.system-agent-workbench { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; }
.system-agent-governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
/* 质量事件通常最长，独占左列并跨两行；右列上下叠放「代码诊断」与「AI 日报」，避免右列留白与视觉遮挡。 */
.system-agent-governance-grid > .governance-primary { grid-column: 1; grid-row: 1 / span 2; }
.system-agent-panel {
  min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); display: grid; gap: 10px;
}
.system-agent-panel.grow { min-height: 520px; }
.system-agent-panel h4 { margin: 0; }
.system-agent-list { display: grid; gap: 8px; }
.system-agent-blueprint-item {
  width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-tint); color: var(--text); cursor: pointer;
}
.system-agent-blueprint-item:hover { background: var(--surface-tint-2); }
.system-agent-blueprint-item.active { border-color: var(--primary-a-45); background: var(--primary-a-08); }
.system-agent-blueprint-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.system-agent-asset-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: flex-start;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint);
}
.system-agent-asset-row.compact { padding: 9px 10px; }
/* 主内容占满一行的基准宽度；窄栏（如治理网格左半栏）放不下操作按钮时，
   按钮组整体换到下一行，避免溢出被右侧面板遮挡导致点不到。 */
.system-agent-asset-main { min-width: 0; flex: 1 1 220px; }
/* 操作按钮组：允许自身换行兜底，并靠右对齐，配合外层换行不再横向溢出。 */
.system-agent-asset-row > .row:last-child { flex-wrap: wrap; justify-content: flex-end; }
.system-agent-ref-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.system-agent-preview-card { display: grid; gap: 14px; }
.system-agent-preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.system-agent-preview-head h3 { margin: 0 0 4px; }
.system-agent-preview-head p { margin: 0; }
.system-agent-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.system-agent-form-grid .field:nth-child(3),
.system-agent-form-grid .field:nth-child(4) { grid-column: 1 / -1; }
.system-agent-check-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-tint);
}
.system-agent-eval-box {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface-tint);
}
.system-agent-eval-row {
  display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); gap: 10px;
  padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px;
}
.system-agent-eval-row span { font-weight: 650; }
.system-agent-eval-row em { color: var(--text-2); font-style: normal; }

@media (max-width: 900px) {
  .usage-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-grid { grid-template-columns: 1fr; }
  .sandbox-status-grid { grid-template-columns: 1fr; }
  .system-agent-compose, .system-agent-workbench, .system-agent-governance-grid, .system-agent-form-grid { grid-template-columns: 1fr; }
  .system-agent-governance-grid > .governance-primary { grid-column: auto; grid-row: auto; }
  .system-agent-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; position: static; }
  .admin-nav-item { white-space: nowrap; flex: 0 0 auto; }
  .admin-search-card, .identity-reassign-row { grid-template-columns: 1fr; }
  .usage-metric-grid { grid-template-columns: 1fr; }
  .usage-insight, .sandbox-callout { grid-template-columns: 1fr; }
  .sandbox-hero { flex-direction: column; }
  .system-agent-check-grid, .system-agent-eval-row { grid-template-columns: 1fr; }
  .capability-return-banner { flex-direction: column; align-items: stretch; }
  .capability-return-dismiss { top: 4px; right: 4px; }
  .sandbox-detail-row { grid-template-columns: 1fr; gap: 4px; }
  .panel-head { flex-wrap: wrap; }
  .admin-table-head { display: none; }
  .admin-users-table .admin-table-head, .admin-users-table .admin-table-row { min-width: 0; }
  .admin-table-row { flex-direction: column; gap: 8px; padding: 14px 12px; }
  .admin-cell { flex: unset; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
  .admin-cell.grow { margin-bottom: 0; }
  .admin-cell::before { content: attr(data-label) '：'; display: inline-block; flex: 0 0 auto; font-size: 12px; color: var(--text-2); margin-right: 2px; white-space: nowrap; }
  .admin-cell select { max-width: 100%; }
}

/* ============================================================
 * 浅色主题专属覆写
 * —— 基础样式已通过 CSS 变量自动适配，此处仅保留仍需选择器级覆写的样式
 * ============================================================ */

/* 结构线 & 边框增强 */
html.light .side { border-right-color: var(--border); }
html.light .side-agent-head:hover { background: var(--surface-tint); border-color: var(--border); }
html.light .topbar { border-bottom-color: var(--border); }

/* 输入框浅色需重设 focus 态 */
html.light input:focus, html.light textarea:focus, html.light select:focus {
  border-color: var(--primary);
}

/* 按钮浅色特定态 */
html.light .btn.primary { color: #fff; }

/* 标签 —— 半透明背景由变量驱动，此处仅补结构 */
html.light .tag { border-color: var(--border); color: var(--text-2); }
html.light .tag.queued { background: var(--surface-tint); }

/* 卡片 —— 浅色加阴影提层级 */
html.light .card { background: var(--panel); border-color: var(--border); }

/* 对话页 */
html.light .chat-header { background: var(--panel); border-bottom-color: var(--border); }
html.light .chat-input { background: var(--panel); border-top-color: var(--border); }
html.light .chat-main { background: var(--bg); }
html.light .msg.ai .msg-avatar { background: var(--panel-2); border-color: var(--border); }
html.light .msg.ai .msg-content { background: var(--panel); border-color: var(--border); }
html.light .msg.user .msg-content { background: var(--primary); color: #fff; }

/* 工具输出 & 终端 —— 背景已由 --term-bg 变量驱动 */
html.light .tool { background: var(--panel-2); border-color: var(--border); }
html.light .tool.tool-use { border-left-color: var(--primary); }
html.light .tool.tool-ok { border-left-color: var(--success); }
html.light .tool.tool-bad { border-left-color: var(--error); }

/* 品牌 */
html.light .brand-mark {
  background: linear-gradient(135deg, var(--primary-a-12), var(--accent-a-18));
  border-color: var(--border); color: var(--text);
}
html.light .drawer-brand-logo {
  box-shadow: 0 2px 8px var(--primary-a-18);
}

/* 会话下拉 */
html.light .conv-dropdown { background: var(--panel); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* 浮层 —— 浅色下降透明度、加阴影 */
html.light .drawer-panel { background: var(--panel); border-color: var(--border); box-shadow: -8px 0 30px rgba(0,0,0,.08); }
html.light .drawer-head, html.light .drawer-footer { border-color: var(--border); }
html.light .modal { background: var(--panel); border-color: var(--border); }
html.light .modal-mask { background: rgba(0,0,0,.32); }
html.light .modal-head, html.light .modal .footer { border-color: var(--border); }
html.light .sheet-panel { background: var(--panel); border-color: var(--border); }

/* Toast & 登录 */
html.light .toast { background: var(--panel); border-color: var(--border); }
/* 登录页亮色适配已由 html.light .login-shell 统一接管（split 玻璃外壳）；login-card 自身保持透明。 */
html.light .binding-status { border-color: var(--border); }
html.light .binding-status.ok { border-color: var(--success-a-35); background: var(--success-a-06); }
html.light .success-box { border-color: var(--success-a-35); background: var(--success-a-06); }

/* 工具组 */
html.light .tool-group { border-color: var(--border); }

/* 微信指示器 —— 浅色下需深绿确保可读 */
html.light .conv-wechat-badge { color: var(--success); }
html.light .conv-wechat-btn { color: var(--success); }
html.light .conv-wechat-btn.disconnect { color: var(--text-2); border-color: var(--border); }
html.light .conv-wechat-btn.disconnect:hover { color: var(--error); }

/* 摘要 & 状态 */
html.light .turn-status.queued, html.light .turn-status.running, html.light .turn-status.committing, html.light .turn-status.starting, html.light .turn-status.interacting {
  color: var(--text-2); background: transparent; border-color: var(--border);
}
html.light .turn-status.interacting { color: var(--text); border-color: var(--border); }
html.light .turn-status.unknown, html.light .turn-status.stale-warning { color: var(--warn, #b8860b); background: rgba(230,162,60,.06); border-color: rgba(230,162,60,.3); }
html.light .action-force-cancel { background: rgba(230,162,60,.06); color: var(--warn, #b8860b); border-color: rgba(230,162,60,.3); }
html.light .action-force-cancel:hover:not(:disabled) { background: rgba(230,162,60,.12); }

/* 表格 & 管理 */
html.light .admin-table { border-color: var(--border); }
html.light .admin-table-head { background: var(--panel-2); }
html.light .wechat-qr,
html.light .wechat-qr-frame { background: #fff; }
html.light .wechat-qr-frame { border-color: var(--border); box-shadow: 0 12px 34px rgba(15,23,42,.10); }
html.light .context-compressed-hint { background: var(--primary-a-08); border-color: var(--primary-a-35); }
html.light .load-earlier-btn { background: var(--panel-2); border-color: var(--border); }
html.light .load-earlier-btn:hover { background: var(--surface-tint); }

/* 事件 */
html.light .event { background: var(--panel); border-color: var(--border); }
html.light .event.status { background: var(--panel-2); }

/* 浅色 hover 态 —— 变量驱动的 surface-tint 在浅色下即为 rgba(0,0,0,...)，
   但 hover 需稍深，此处统一补一层 */
html.light .side-nav-item:hover { background: rgba(0,0,0,.04); }
html.light .side-nav-item.active { background: var(--primary-a-08); }
html.light .drawer-project-card:hover, html.light .drawer-link-row:hover { background: rgba(0,0,0,.04); }
html.light .drawer-project-card.current { background: var(--primary-a-08); }
html.light .type-card { background: var(--panel); }
html.light .type-card:hover { background: var(--panel-2); }

/* 恢复 & 管线 */
html.light .recovery-actions { border-top-color: var(--error-a-28); }
html.light .ai-pipeline { border-color: var(--success-a-35); }
html.light .ai-pipeline.bad { border-color: var(--error); color: var(--error); }
html.light .ai-error { border-color: var(--error); color: var(--error); }

/* ── 浅色主题阴影增强 ──
 * 深色主题靠边框和微妙表面差异做层级；浅色主题用阴影提供深度感，
 * 遵循 Material Design 3 "Elevation" 原则 */
html.light .card { box-shadow: none; }
html.light .modal { box-shadow: 0 20px 60px rgba(0,0,0,.12); }
html.light .conv-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
html.light .scroll-bottom-btn { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
html.light .toast { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
html.light .chat-header { box-shadow: 0 1px 0 rgba(0,0,0,.06); }
html.light .chat-input { box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
html.light .action-stop { background: rgba(220,38,38,.06); }
html.light .side { box-shadow: 1px 0 0 rgba(0,0,0,.06); }
html.light .topbar { box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* ===== 主题切换分段控件 ===== */
.theme-switch-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; }
.theme-switch {
  position: relative; display: flex; gap: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 2px; min-width: 156px;
}
.theme-switch-option {
  position: relative; z-index: 1;
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 10px; border: none; background: transparent;
  color: var(--text-2); font-size: 12px; cursor: pointer;
  border-radius: 6px; transition: color .15s ease;
}
.theme-switch-option[aria-pressed="true"] { color: var(--text); }
.theme-switch-icon { font-size: 13px; line-height: 1; }
.theme-switch-indicator {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px); background: var(--panel);
  border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.theme-switch[data-active="dark"] .theme-switch-indicator {
  transform: translateX(calc(100% + 2px));
}

/* ===== 详情页 iOS 设置风格 ===== */
.detail-page { padding: 0; }
.detail-section { margin-bottom: 20px; }
.detail-section-title {
  margin: 0 0 6px; padding: 0 4px;
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.detail-card {
  background: var(--panel-2); border-radius: 12px;
  padding: 0; overflow: hidden;
  border: 1px solid var(--border);
}
.detail-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-row-label { color: var(--text-2); font-size: 13px; flex-shrink: 0; min-width: 64px; }
.detail-row-value { color: var(--text); font-size: 13px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-row-btn {
  width: 100%; border: none; background: transparent; cursor: pointer;
  color: var(--text); text-align: left;
}
.detail-row-btn:hover { background: rgba(128,128,128,.06); }

/* 头像大卡 */
.profile-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 4px; margin-bottom: 4px;
}
.profile-avatar-xl {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.profile-hero-info h3 { margin: 0 0 4px; font-size: 15px; }
.profile-hero-tags { display: flex; gap: 4px; }

/* 表单字段 */
.detail-field {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-field:last-child { border-bottom: none; }
.detail-field-label {
  display: block; margin-bottom: 4px;
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
}
.detail-input {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-size: 13px;
  transition: border-color .15s;
}
.detail-input:focus { outline: none; border-color: var(--primary); }

/* 提示、空态、提示框 */
.detail-hint {
  padding: 2px 4px; color: var(--text-2); font-size: 12px; line-height: 1.5;
}
.detail-empty {
  padding: 24px 14px; text-align: center; color: var(--text-2); font-size: 13px;
}
.detail-error {
  padding: 6px 14px 10px; color: var(--error); font-size: 12px; min-height: 20px;
}
.detail-callout {
  border-radius: 10px; padding: 12px 14px; margin-top: 8px;
  font-size: 13px; line-height: 1.5;
}
.detail-callout.ok {
  background: var(--success-a-08); border: 1px solid var(--success-a-45);
}
.detail-callout.warn {
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.4);
}
.detail-callout.error {
  background: var(--error-a-08); border: 1px solid var(--error-a-45);
}
.detail-action-btn {
  width: 100%; margin-top: 12px;
}
.detail-link {
  color: var(--primary); text-decoration: none; font-size: 13px;
}
.detail-link:hover { text-decoration: underline; }

/* 状态小圆点 */
.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
}
.status-dot::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--success);
}

/* 标签 */
.tag-green { background: var(--success-a-08); color: var(--success); border: 1px solid var(--success-a-45); }

/* 浅色模式适配 */
html.light .detail-card { background: var(--surface-tint); }
html.light .detail-row-btn:hover { background: var(--surface-tint-2); }
html.light .detail-input { background: var(--input-bg); }

/* 外观设置：品牌色固定，只保留深浅主题。 */
.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.appearance-row + .appearance-row { border-top: 1px solid var(--border); }
.appearance-label { font-size: 13px; }
.theme-switch[data-active="dark"] .theme-switch-indicator { transform: translateX(calc(100% + 2px)); }

/* —— 会话 token 超 24H 失效（无法主动推送，需用户在微信再发消息）—— */
/* 头部按钮：警示色 */
.conv-wechat-btn.stale { color: var(--warn); border-color: var(--warn); background: rgba(210,153,34,.08); }
.conv-wechat-btn.stale:hover { background: rgba(210,153,34,.16); }
/* 下拉徽章：待恢复态 */
.conv-wechat-badge.stale { background: rgba(210,153,34,.18); color: var(--warn); border-color: rgba(210,153,34,.45); box-shadow: none; }
.wechat-recover p { margin: 0 0 10px; line-height: 1.6; }
.wechat-recover-steps {
  display: grid; gap: 8px; margin: 10px 0 12px; padding: 10px 12px;
  border: 1px solid var(--warn-a-35); border-radius: 10px;
  background: var(--warn-a-06); color: var(--text);
  font-size: 13px;
}

/* ============================================================
 * Native Refinement Layer —— 让整体观感更接近优秀的苹果软件
 * 设计原则（Apple HIG）：Clarity 清晰 · Deference 克制 · Depth 纵深
 *  · 8pt 间距节奏、克制的层级、spring 动效与即时按压反馈
 * 本层为「叠加覆写」，放在文件末尾依靠层叠顺序生效，
 * 仅触碰安全属性，不改动既有结构，便于回退。
 * ============================================================ */
:root {
  /* 间距阶（8pt 基准） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  /* 圆角阶 */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  /* 动效曲线：standard 标准 / spring 带回弹 */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  /* 聚焦光环 */
  --focus-ring: 0 0 0 3px var(--primary-a-22);
}

/* —— 字体渲染：开启抗锯齿 + 微收紧字距，靠近 macOS / SF 文本观感 —— */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; }
/* 等宽内容不参与字距收紧，避免代码错位 */
pre, code, .term, textarea, .login-code, [class*="mono"] { letter-spacing: normal; }

/* —— 选区 & 细滚动条：苹果式克制视觉 —— */
::selection { background: var(--primary-a-24); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-2); background-clip: padding-box; }

/* —— 控件：更大的触控区 + 聚焦光环（替代生硬的描边变色）—— */
input, select, textarea {
  padding: 9px 12px; border-radius: var(--r-sm);
  transition: border-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard), background .15s var(--ease-standard);
}
input:not([type="checkbox"]):not([type="radio"]) { min-height: 38px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }

/* —— 按钮：即时按压反馈 + 平滑过渡（不动既有圆角/内距，避免回归）—— */
.btn { transition: background .15s var(--ease-standard), border-color .15s var(--ease-standard), color .15s var(--ease-standard), transform .08s var(--ease-standard), box-shadow .15s var(--ease-standard); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primary { box-shadow: 0 1px 2px var(--primary-a-35); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 1px var(--primary-a-22); }

/* —— 设置卡：Apple「分组」观感——更柔的圆角、更舒展的内距与组间节奏 —— */
.settings-card { gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); }
.settings-card > h3, .settings-card-head h3 { font-size: 16px; font-weight: 650; }
.settings-card-head { align-items: center; margin-bottom: 0; }
.settings-card-head > :first-child, .panel-head > :first-child { min-width: 0; flex: 1 1 auto; }
.settings-card-head > .row, .panel-head > .row { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.settings-card-head p { margin-top: 4px; line-height: 1.5; }

/* —— 字段标签：紧贴控件、字重略增，形成清晰的「标签—控件」组 —— */
.field > label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field-hint { line-height: 1.5; }

/* —— 侧栏导航：active 药丸高亮 + 轻按压反馈 —— */
.side-nav-item { transition: background .15s var(--ease-standard), color .15s var(--ease-standard), transform .08s var(--ease-standard); }
.side-nav-item:active { transform: scale(.98); }

/* —— 浮层：磨砂背景 + spring 入场，强化纵深层级 —— */
.modal-mask, .drawer-mask, .sheet-mask {
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}
.modal { animation: nativeModalPop .32s var(--ease-spring); transform-origin: center; }
@keyframes nativeModalPop {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* —— Toast：spring 滑入 + 更柔的阴影与圆角 —— */
.toast {
  border-radius: var(--r-md);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  animation: nativeToastIn .3s var(--ease-spring);
}
@keyframes nativeToastIn {
  from { opacity: 0; transform: translateX(16px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* —— Grouped Inset List：iOS 设置页最标志性的分组列表范式 ——
 * 整组一张大圆角卡片，组内多项靠「不到左边的发丝分隔线」区隔，
 * 而非每项都画边框；行有按压/悬停反馈。 */
.grouped-list {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.grouped-list .glist-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
  transition: background .15s var(--ease-standard);
}
.grouped-list .glist-row:hover { background: var(--primary-a-08, rgba(127,127,127,.05)); }
/* 发丝分隔线：左侧内缩，对齐标题文本，最后一行不画 */
.grouped-list .glist-row::after {
  content: '';
  position: absolute;
  left: var(--sp-4); right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
  transform: scaleY(.5);
  transform-origin: bottom;
}
.grouped-list .glist-row:last-child::after { display: none; }
.glist-main { flex: 1; min-width: 0; }
.glist-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.glist-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist-sub { margin-top: 2px; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glist-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
.glist-danger { color: var(--error, #f85149); }
/* 读写徽章：胶囊状、克制 */
.glist-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; line-height: 1.6; }
.glist-badge.ro { color: var(--text-2); background: rgba(127,127,127,.14); }
.glist-badge.rw { color: var(--warn, #d29922); background: rgba(210,153,34,.16); }

/* —— iOS 风格分段控件（Segmented Control）：替代短选项下拉框 —— */
.segmented-control {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(120,120,128,.16);
}
.segmented-option {
  border: 0; border-radius: 9px; padding: 7px 10px;
  background: transparent; color: var(--text-2);
  cursor: pointer; text-align: center;
  transition: background .18s var(--ease-standard), color .18s var(--ease-standard), box-shadow .18s var(--ease-standard), transform .2s var(--ease-spring);
}
.segmented-option:hover { color: var(--text); }
.segmented-option:active { transform: scale(.98); }
.segmented-option.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.segmented-option .seg-title { display: block; font-size: 13px; font-weight: 650; }
.segmented-option .seg-hint { display: block; margin-top: 2px; font-size: 11px; color: var(--text-2); }
.segmented-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Agent 好友协作方式：用解释型卡片替代三个专业下拉（stage/trigger/workMode），
   让用户选择“它怎么帮你”，而不是理解底层执行参数。 */
.friend-mode-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.friend-mode-card {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  color: var(--text); padding: 11px 38px 11px 12px;
  transition: background .16s var(--ease-standard), border-color .16s var(--ease-standard), box-shadow .18s var(--ease-standard), transform .18s var(--ease-spring);
}
.friend-mode-card:hover { background: var(--panel-2); transform: translateY(-1px); }
.friend-mode-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-a-35) inset, 0 8px 20px var(--primary-a-08); }
.friend-mode-card strong { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; }
.friend-mode-card > span:not(.friend-mode-check) { display: block; color: var(--text-2); font-size: 12px; line-height: 1.45; margin-top: 4px; }
.friend-mode-check {
  position: absolute; top: 11px; right: 12px; width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--primary); color: white;
  opacity: 0; transform: scale(.72); transition: opacity .16s var(--ease-standard), transform .2s var(--ease-spring);
}
.friend-mode-card.active .friend-mode-check { opacity: 1; transform: scale(1); }
.friend-mode-badge { font-size: 10px; font-weight: 700; color: var(--primary); background: var(--primary-a-08); border: 1px solid var(--primary-a-35); border-radius: 999px; padding: 0 6px; }
.friend-trust-segment { grid-auto-flow: column; }

/* —— iOS 风格拨动开关（toggle switch）：替代默认复选框 ——
 * 开关行：左侧标签/说明，右侧轨道；开态用主色，关态中性灰，
 * 旋钮带柔性投影与 spring 位移。 */
.switch-field { display: flex; align-items: center; gap: var(--sp-4); }
.switch-field-main { flex: 1; min-width: 0; }
.switch-field-label { font-weight: 500; color: var(--text); }
.switch {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center;
  width: 44px; height: 26px; cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch-slider {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: rgba(120,120,128,.32);
  transition: background .25s var(--ease-standard);
}
.switch-slider::before {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
  transition: transform .25s var(--ease-spring);
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-slider { box-shadow: var(--focus-ring); }
.switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; }

/* —— 尊重「减少动态效果」无障碍偏好 —— */
@media (prefers-reduced-motion: reduce) {
  .modal, .toast, .drawer-panel, .sheet-panel, .drawer-nav-page, .stream-appear, .turn-summary.result-focus { animation: none !important; }
  .btn:active, .side-nav-item:active, .type-card:active, .segmented-option:active, .tag-picker-chip:active { transform: none; }
  .type-card, .type-card-check, .segmented-option, .tag-picker-chip, .switch-slider, .switch-slider::before, .ai-text { transition: none !important; }
  .turn-status.queued::before, .turn-status.interacting::before, .turn-status.phase-thinking::before, .turn-status.phase-writing::before, .turn-status.phase-tooling::before, .turn-status.phase-finalizing::before, .turn-status.phase-processing::before, .turn-status.phase-reconnecting::before, .execution-record-dock.is-running .execution-record-dot, .work-stage.status-analyzing .work-stage-marker, .work-stage.status-in_progress .work-stage-marker { animation: none !important; opacity: .65; transform: none !important; }
}

/* 移动端工作区入口按钮：仅移动端可见，桌面端有右栏窄轨把手无需此按钮 */
.ws-mobile-btn { display: none !important; }
@media (max-width: 980px) {
  .ws-mobile-btn { display: inline-flex !important; align-items: center; }
}
/* 移动端工作区浮层展开时，点击面板外区域可关闭（遮罩层） */
.ws-mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1150;
  display: none;
}
.ws-mobile-overlay.show { display: block; }

/* ============================================================
 * Cosmic Studio —— 统一的 AI 创作平台视觉系统
 * 安静画布承载内容；微光只强调品牌、AI 状态与关键创作行动。
 * ============================================================ */
.tabnum, .metric, .usage, .credits, .token-usage,
[class*="count"], [class*="usage"], [class*="credit"] { font-variant-numeric: tabular-nums; }

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.drawer-panel:focus-visible,
.modal:focus-visible,
.sheet-panel:focus-visible { outline: none; }
.btn { min-height: 34px; border-radius: var(--r-sm); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: none; }
.btn.primary:hover { background: var(--text-2); border-color: var(--text-2); transform: none; box-shadow: none; }
.btn.primary:active:not(:disabled) { transform: scale(.98); filter: brightness(.97); }
.card, .settings-card { border-color: var(--border); border-radius: var(--r-lg); box-shadow: none; }

.brand-mark-glyph, .drawer-brand-logo, .drawer-brand-logo.sm {
  background: var(--brand-gradient) !important; color: #fff; box-shadow: 0 0 18px var(--primary-a-22);
}
.drawer-nav-item.active, .side-nav-item.active { background: transparent; box-shadow: none; }
.drawer-project-card.current { background: transparent; box-shadow: none; }
.segmented-option.active, .segmented-option[aria-selected="true"] { color: #fff; background: var(--primary); box-shadow: none; }

.content { background-image: radial-gradient(720px 420px at 54% -160px, var(--primary-a-08), transparent 72%); }
.side-section-label { padding: 0 8px 6px; color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.chat-header { min-height: 50px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px); }
.chat-header-title-sub { margin-top: 2px; color: var(--text-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.chat-input { background: color-mix(in srgb, var(--panel) 96%, transparent); }
.composer textarea { border-color: color-mix(in srgb, var(--border) 82%, transparent); background: var(--input-bg); border-radius: var(--r-lg); }
.msg.ai .msg-content { border-color: color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--panel) 96%, var(--primary-a-06)); }
.msg.user .msg-content { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, var(--accent))); }

.modal-mask, .sheet-mask, .drawer-mask { background: var(--overlay); }
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.sheet-panel { box-shadow: 0 -18px 60px rgba(0,0,0,.28); }
.drawer-panel { box-shadow: var(--shadow-3); }

#toast-root { width: min(380px, calc(100vw - 24px)); right: 12px; top: 12px; }
.toast {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 10px;
  min-width: 0; width: 100%; padding: 11px 13px; border-left-width: 1px;
  border-radius: var(--r-md); background: var(--surface-raised); box-shadow: var(--shadow-2);
}
.toast-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
.toast.success .toast-dot { background: var(--success); }
.toast.warn .toast-dot { background: var(--warn); }
.toast.error .toast-dot { background: var(--error); }
.toast-message { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.toast.leaving { opacity: 0; transform: translateX(10px); transition: opacity .18s, transform .18s; }

.page-state {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
  width: min(640px, 100%); margin: 24px auto; padding: 18px; border: 1px dashed var(--border);
  border-radius: var(--r-lg); background: var(--surface-tint);
}
.page-state-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: var(--primary-a-08); }
.page-state-copy { display: grid; gap: 3px; min-width: 0; }
.page-state-copy strong { font-size: 14px; }
.page-state-copy span { font-size: 12px; }
.page-state.error { border-color: var(--error-a-35); background: var(--error-a-06); }
.page-state.error .page-state-icon { color: var(--error); background: var(--error-a-08); }
.page-state.loading .page-state-icon { animation: studioBreathe 1.8s ease-in-out infinite; }
@keyframes studioBreathe { 50% { opacity: .55; transform: scale(.96); } }

.studio-home, .agents-page { width: min(1180px, 100%); margin: 0 auto; padding: 18px 8px 48px; }
.studio-hero {
  position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--border);
  border-radius: 24px; background: radial-gradient(620px 280px at 50% 0, var(--primary-a-16), transparent 72%), var(--panel);
  text-align: center;
}
.studio-hero::before { content: ''; position: absolute; width: 220px; height: 220px; top: -150px; right: 8%; border-radius: 50%; background: var(--accent-a-18); filter: blur(60px); pointer-events: none; }
.studio-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.studio-hero h1, .page-title-row h1 { margin: 10px 0 8px; font-size: clamp(28px, 4.5vw, 48px); line-height: 1.12; letter-spacing: -.035em; }
.studio-hero-sub { width: min(620px, 100%); margin: 0 auto 24px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.creation-composer { position: relative; width: min(760px, 100%); margin: 0 auto; padding: 8px; border: 1px solid var(--primary-a-35); border-radius: 20px; background: color-mix(in srgb, var(--input-bg) 88%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.16), 0 0 0 1px var(--primary-a-06) inset; text-align: left; }
.creation-prompt { min-height: 94px; max-height: 220px; padding: 14px 16px; border: 0; background: transparent; box-shadow: none !important; resize: vertical; font: 15px/1.65 inherit; }
.creation-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 4px 10px; border-top: 1px solid var(--border); }
.creation-agent { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); font-size: 12px; }
.creation-agent-select { width: auto; max-width: 220px; min-height: 32px; padding: 4px 28px 4px 8px; border: 0; background-color: transparent; color: var(--text); box-shadow: none !important; }
.creation-submit { min-height: 38px; padding: 8px 15px; border-radius: 12px; }
.creation-starters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.creation-starter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-tint); color: var(--text-2); cursor: pointer; font: inherit; }
.creation-starter:hover { color: var(--text); border-color: var(--primary-a-45); background: var(--primary-a-08); }
.studio-section { margin-top: 34px; }
.studio-section-head, .page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.studio-section-head h2, .page-title-row h1 { margin: 0; font-size: 22px; }
.studio-section-head p, .page-title-row p { margin: 3px 0 0; }
.studio-agent-grid, .agents-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.studio-agent-card, .agent-overview-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); transition: border-color .18s, background .18s, transform .18s; }
.studio-agent-card:hover, .agent-overview-card:hover { border-color: var(--primary-a-45); background: color-mix(in srgb, var(--panel) 96%, var(--primary)); transform: translateY(-1px); }
.studio-agent-main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 16px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.studio-agent-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--primary); background: var(--primary-a-08); }
.studio-agent-copy { display: grid; gap: 3px; min-width: 0; }
.studio-agent-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.studio-agent-copy small { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; }
.studio-agent-arrow { color: var(--text-3); }
.studio-agent-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }
.studio-agent-type, .agent-overview-meta { color: var(--text-3); font-size: 11px; }
.agent-overview-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 16px; }
.agent-overview-main { min-width: 0; }
.agent-overview-title { display: flex; align-items: center; gap: 6px; }
.agent-overview-title h3 { margin: 0; font-size: 15px; }
.agent-overview-main p { margin: 5px 0; display: -webkit-box; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agent-overview-meta { display: flex; gap: 8px; }
.agent-overview-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }

.ws-technical-files { margin-top: 12px; border-top: 1px solid var(--border); }
.ws-technical-files > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; cursor: pointer; list-style: none; }
.ws-technical-files > summary::-webkit-details-marker { display: none; }
.ws-technical-files > summary::after { content: '›'; font-size: 16px; transition: transform .16s; }
.ws-technical-files[open] > summary::after { transform: rotate(90deg); }
.ws-technical-files-body { padding-bottom: 8px; }
.ws-empty-note { padding: 10px 6px; font-size: 12px; }
.works-page { max-width: 1160px; }

@media (hover: none), (pointer: coarse) {
  .ws-row-actions { display: inline-flex !important; }
  .ws-file-tree .file-tree-row { padding-right: 42px; }
  .ws-row-primary { display: none !important; }
  .ws-row-actions button { min-width: 36px; min-height: 36px; }
}

@media (max-width: 900px) {
  .studio-home, .agents-page { padding: 8px 0 32px; }
  .studio-agent-grid, .agents-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .login-page { padding: 14px; }
  .login-card { width: 100%; max-width: 100%; padding: 28px 20px 22px; }
  .studio-hero { padding: 28px 14px 22px; border-radius: 18px; }
  .studio-hero h1 { font-size: 30px; }
  .studio-hero-sub { font-size: 13px; }
  .creation-composer { padding: 6px; border-radius: 16px; }
  .creation-composer-bar { align-items: stretch; flex-direction: column; padding: 8px 4px 4px; }
  .creation-agent { justify-content: space-between; padding: 0 5px; }
  .creation-agent-select { flex: 1; max-width: 72%; }
  .creation-submit { width: 100%; }
  .creation-starters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .creation-starter { justify-content: center; border-radius: 10px; }
  .studio-section-head, .page-title-row { align-items: stretch; flex-direction: column; }
  .studio-section-head > .row { width: 100%; }
  .studio-section-head > .row .btn { flex: 1; }
  .studio-agent-grid, .agents-grid { grid-template-columns: 1fr; }
  .page-state { grid-template-columns: auto minmax(0,1fr); margin: 12px auto; }
  .page-state > .btn { grid-column: 1 / -1; width: 100%; }
  #toast-root { left: 12px; right: 12px; width: auto; top: max(12px, env(safe-area-inset-top)); }
}

/* ============================================================
 * Agent Workspace —— 明确的左 / 中 / 右三栏
 * 左：当前 Agent 功能；中：会话；右：工作区。
 * ============================================================ */
.main { grid-template-columns: 232px minmax(0, 1fr); }
.side {
  gap: 0; padding: 12px 10px; overflow-y: auto;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  border-right-color: color-mix(in srgb, var(--border) 82%, transparent);
}
.side-agent-head {
  width: 100%; min-height: 58px; padding: 9px 8px 13px; margin: 0 0 14px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.side-agent-head:hover { background: var(--primary-a-06); border-color: var(--primary-a-22); }
.side-agent-head:active { background: var(--primary-a-08); }
.side-agent-avatar, .side-agent-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
}
.side-agent-placeholder { color: var(--primary); background: var(--primary-a-08); border: 1px dashed var(--primary-a-35); }
.side-agent-head-info { flex: 1; gap: 3px; }
.side-agent-name { font-size: 14px; font-weight: 680; }
.side-agent-type { font-size: 11px; color: var(--text-3); }
.side-agent-switch { flex: 0 0 auto; color: var(--text-3); font-size: 18px; transform: translateY(-1px); }
.side-section-label { padding: 0 10px 7px; font-size: 10px; letter-spacing: .11em; }
.side-nav {
  gap: 3px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent;
}
.side-nav-item {
  min-height: 38px; padding: 8px 10px; border-radius: 9px;
  color: var(--text-2); font-size: 13px; font-weight: 520;
}
.side-nav-item:hover { color: var(--text); background: var(--surface-tint-2); }
.side-nav-item.active {
  color: var(--primary); background: var(--primary-a-08); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--primary);
}
.side-nav-icon { width: 18px; color: currentColor; }

.main-menu-drawer { width: min(350px, 92vw); }
.main-menu-drawer .drawer-section { padding: 14px 0; }
.main-menu-drawer .drawer-section-title { margin-bottom: 8px; }
.main-menu-drawer .drawer-project-card { padding: 9px 6px; border-radius: 10px; }
.main-menu-drawer .drawer-project-card.current { background: transparent; box-shadow: none; }
.main-menu-drawer .drawer-project-card.current::after { content: '当前'; margin-left: auto; color: var(--primary); font-size: 10px; font-weight: 700; }
.main-menu-drawer .drawer-nav-item { min-height: 38px; padding: 8px 6px; }

.chat-shell.ws-open { grid-template-columns: minmax(520px, 1fr) var(--ws-w, 340px); }
.chat-shell.ws-collapsed { grid-template-columns: minmax(0, 1fr) 42px; }
.chat-main { background: var(--bg); }
.chat-header { min-height: 52px; padding: 8px 14px; }
.chat-messages { padding: 22px clamp(16px, 3vw, 36px); }
.chat-messages > .turn, .chat-messages > .load-earlier-btn, .chat-messages > .chat-bottom-sentinel { width: min(820px, 100%); margin-inline: auto; }
.chat-input { padding-inline: clamp(12px, 3vw, 32px); }
.chat-input > * { width: min(840px, 100%); margin-inline: auto; }
.workspace-panel { background: color-mix(in srgb, var(--panel) 97%, var(--bg)); }
.workspace-panel-head { min-height: 52px; padding: 9px 11px; background: transparent; }
.workspace-panel-body { padding: 10px 11px 18px; }
.workspace-panel .ws-name { font-size: 12px; }
.ws-object-card { padding: 11px 12px; border-radius: 12px; background: var(--surface-tint); }
.ws-technical-files { margin-top: 14px; }

.semantic-works { display: grid; gap: 16px; }
.semantic-works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.semantic-works-head h3 { margin: 0; font-size: 20px; }
.semantic-works-head p { margin: 4px 0 0; font-size: 13px; }
.semantic-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.semantic-work-card {
  min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 15px;
  background: var(--panel); transition: border-color .16s, transform .16s, background .16s;
}
.semantic-work-card:hover { border-color: var(--primary-a-35); background: color-mix(in srgb, var(--panel) 97%, var(--primary)); transform: translateY(-1px); }
.semantic-work-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.semantic-work-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--primary); background: var(--primary-a-08); }
.semantic-work-title { min-width: 0; display: grid; gap: 2px; }
.semantic-work-title h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.semantic-work-title span { color: var(--text-3); font-size: 10px; }
.semantic-work-open { padding: 5px 9px; border: 1px solid var(--primary-a-35); border-radius: 8px; color: var(--primary); font-size: 11px; }
.semantic-work-fields { display: grid; gap: 7px; margin: 0; padding: 13px 14px; }
.semantic-work-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; font-size: 12px; line-height: 1.5; }
.semantic-work-field dt { color: var(--text-3); }
.semantic-work-field dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.semantic-work-empty { margin: 0; padding: 14px; font-size: 12px; }
.semantic-work-assets { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 13px; border-top: 1px solid var(--border); }
.semantic-work-assets-label { width: 100%; margin-bottom: 2px; color: var(--text-3); font-size: 10px; }
.semantic-work-assets a { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border-radius: 7px; background: var(--surface-tint-2); color: var(--text-2); font-size: 11px; }
.semantic-work-assets a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semantic-work-assets a:hover { color: var(--primary); background: var(--primary-a-08); }

@media (max-width: 1180px) and (min-width: 901px) {
  .main { grid-template-columns: 210px minmax(0, 1fr); }
  .chat-shell.ws-open { grid-template-columns: minmax(460px, 1fr) 310px; }
  .semantic-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .semantic-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .semantic-works-head { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
 * Codex-inspired quiet UI —— 单一强调色、文字层级、低对比分隔线
 * 仅错误/警告保留语义色；普通信息不使用彩色边条、胶囊或渐变卡片。
 * ============================================================ */
.side-nav-item.active {
  color: var(--text); background: transparent; box-shadow: none; font-weight: 650;
}
.side-nav-item.active::before { content: '›'; width: 10px; margin-left: -2px; color: var(--primary); font-size: 17px; line-height: 1; }
.side-nav-item:not(.active)::before { content: ''; width: 10px; margin-left: -2px; }
.side-nav-item:hover { background: var(--surface-tint); }

.stream-appear { animation: none; filter: none; }
.msg.user .msg-content {
  color: var(--text); background: var(--surface-tint-2); border: 1px solid var(--border);
}
.msg.ai .msg-content { background: transparent; border-color: transparent; }
.turn-summary.result-focus { animation: none; }

.structured-output { margin: 14px 0 4px; padding-top: 10px; }
.structured-output-head { margin-bottom: 2px; }
.structured-output-list { gap: 0; }
.structured-card {
  padding: 11px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none;
}
.structured-card:last-child { border-bottom: 0; }
.structured-card-top { justify-content: flex-start; margin-bottom: 5px; }
.structured-badge,
.structured-badge.implementation,
.structured-badge.todo,
.structured-badge.issue,
.structured-badge.warning,
.structured-badge.constraint,
.structured-badge.preference {
  padding: 0; border-radius: 0; color: var(--text-2); background: transparent; font-weight: 650;
}
.structured-card.issue .structured-badge,
.structured-card.warning .structured-badge { color: var(--error); }
.structured-meta { margin-left: auto; }
.structured-card h4 { font-size: 14px; margin-bottom: 4px; }
.structured-card p { color: var(--text-2); }

.render-component {
  margin: 14px 0; padding: 10px 0; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; background: transparent; font-size: 13px; line-height: 1.6;
}
.render-component .rc-head { margin-bottom: 7px; font-size: 12px; color: var(--text-2); }
.render-component.rc-callout { padding: 0; border-top: 0; }
.render-component.rc-callout .rc-callout-body,
.render-component.rc-callout-info .rc-callout-body,
.render-component.rc-callout-success .rc-callout-body,
.render-component.rc-callout-warning .rc-callout-body,
.render-component.rc-callout-danger .rc-callout-body,
.render-component.rc-callout-neutral .rc-callout-body {
  padding: 10px 12px; border: 1px solid var(--border); border-left-width: 1px;
  border-radius: 8px; background: var(--surface-tint);
}
.render-component .rc-callout-title,
.render-component.rc-callout-success .rc-callout-title,
.render-component.rc-callout-warning .rc-callout-title { color: var(--text); }
.render-component.rc-callout-danger .rc-callout-title { color: var(--error); }
.render-component.rc-steps .rc-steps { gap: 10px; }
.render-component.rc-steps .rc-step { padding-left: 24px; }
.render-component.rc-steps .rc-step::before {
  width: 17px; height: 17px; border: 0; border-radius: 0; color: var(--text-2); background: transparent;
}
.render-component.rc-steps .rc-step-body { color: var(--text-2); }
.render-component.rc-kv { grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); gap: 6px 16px; }
.render-component.rc-stat .rc-stat-row { gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.render-component.rc-stat .rc-stat {
  min-width: 100px; padding: 10px 14px; border: 0; border-right: 1px solid var(--border);
  border-radius: 0; background: transparent;
}
.render-component.rc-stat .rc-stat:last-child { border-right: 0; }
.render-component.rc-stat .rc-stat-value { font-size: 17px; }
.render-component.rc-compare { padding-right: 0; }
.render-component.rc-compare .rc-compare thead th { border-bottom-color: var(--border); color: var(--text-2); }
.render-component.rc-copy-block { border: 1px solid var(--border); border-radius: 8px; }
.render-component.rc-copy-block .rc-copy-head { background: transparent; }
.render-component.rc-copy-block .rc-copy-lang { padding: 0; border: 0; background: transparent; }
.render-component.rc-copy-block .rc-copy-code { background: color-mix(in srgb, var(--bg) 94%, var(--panel)); }
.render-component .rc-badge,
.render-component .rc-badge-ok,
.render-component .rc-badge-err,
.render-component .rc-badge-warn,
.render-component .rc-badge-muted {
  padding: 0; border: 0; border-radius: 0; color: var(--text-2); background: transparent;
}
.render-component .rc-badge-err { color: var(--error); }
.render-component .rc-badge-warn { color: var(--warn); }
.render-component .rc-tl-time { color: var(--text-2); }
.render-component .rc-gallery-item img { border-radius: 6px; }

.interaction-card { border-color: var(--border); background: transparent; }
.interaction-card.answered { border-color: var(--border); background: var(--surface-tint); }
.capability-pill,
.interaction-missing-list span { color: var(--text-2); border-color: var(--border); background: transparent; }
.capability-pill.risk-low { color: var(--text-2); border-color: var(--border); background: transparent; }
.capability-pill.risk-medium { color: var(--warn); border-color: var(--border); background: transparent; }
.capability-pill.risk-high { color: var(--error); border-color: var(--border); background: transparent; }
.next-actions { padding: 8px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.next-action-btn,
.next-action-btn.primary { color: var(--text-2); background: transparent; border-color: var(--border); }
.next-action-btn:hover,
.next-action-btn.primary:hover { color: var(--text); background: var(--surface-tint); border-color: var(--text-3); }

.module-page { max-width: 1040px; }
.module-page > .page-head { margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.module-page > .page-head h2 { margin: 0; font-size: 21px; }
.module-page > .page-head p { margin: 4px 0 0; font-size: 13px; }
.module-tabs { gap: 18px; margin: -7px 0 18px; border-bottom: 1px solid var(--border); }
.module-tabs .btn {
  min-height: 36px; padding: 7px 1px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--text-2); background: transparent; box-shadow: none;
}
.module-tabs .btn.primary { color: var(--text); background: transparent; border-bottom-color: var(--text); }
.module-tabs .btn:hover { color: var(--text); background: transparent; }
.module-page .card,
.module-page .settings-card,
.module-page .friends-section,
.module-page .friend-card,
.module-page .tool-card,
.module-page .semantic-work-card,
.module-page .settings-identity-card {
  border-color: var(--border); background: transparent; box-shadow: none;
}
.module-page .tool-card-strip { display: none; }
.module-page .tool-card { border-radius: 8px; }
.module-page .tool-guide { display: flex; gap: 0; margin: 4px 0 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.module-page .tool-guide-card { display: flex; align-items: baseline; gap: 7px; flex: 1; padding: 9px 12px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; }
.module-page .tool-guide-card:last-child { border-right: 0; }
.module-page .tool-guide-card:hover { border-color: var(--border); transform: none; }
.module-page .tool-guide-top { gap: 5px; }
.module-page .tool-guide-num { display: inline; width: auto; height: auto; border-radius: 0; color: var(--text-2); background: transparent; }
.module-page .friend-card { border-left-width: 1px; border-radius: 8px; }
.module-page .friend-avatar.agent,
.module-page .friend-avatar.human { color: var(--text); background: var(--surface-tint-2); }
.module-page .friend-badge,
.module-page .friend-badge.agent,
.module-page .friend-badge.human,
.module-page .friend-badge.stage,
.module-page .friend-badge.manual,
.module-page .friend-badge.auto,
.module-page .friend-badge.system { color: var(--text-2); border-color: var(--border); background: transparent; }
.module-page .friends-topbar,
.module-page .friends-requests,
.module-page .friend-add-hint,
.module-page .friend-config-section { background: transparent; border-color: var(--border); }
.module-page .friends-bell.has { color: var(--text); border-color: var(--border); background: transparent; }
.module-page .friends-bell-dot { background: var(--text); }
.module-page .semantic-work-icon,
.module-page .settings-agent-avatar { color: var(--text); background: var(--surface-tint-2); }
.module-page .semantic-work-card:hover { border-color: var(--text-3); background: var(--surface-tint); transform: none; }
.module-page .semantic-work-open { color: var(--text); border-color: var(--border); }
.module-page .tag { color: var(--text-2); border-color: var(--border); background: transparent; }
.module-page .admin-section-hero,
.module-page .usage-metric,
.module-page .usage-metric.primary,
.module-page .usage-metric.warn,
.module-page .usage-metric.risk { background: transparent; border-color: var(--border); }

/* Agent 选择与按钮：沿用 Codex 的单色前景层级，不使用彩色头像或选中边框。 */
.main-menu-drawer .drawer-project-card.current,
.drawer-project-card.current {
  background: transparent; box-shadow: none; border: 0;
}
.main-menu-drawer .drawer-project-card.current:hover { background: var(--surface-tint); }
.drawer-agent-avatar,
.side-agent-avatar {
  color: var(--text) !important; background: var(--surface-tint-2) !important;
  box-shadow: none !important; border: 0;
}
.drawer-project-card.current .drawer-agent-avatar,
.side-agent-head:hover .side-agent-avatar { color: var(--primary) !important; }
.main-menu-drawer .drawer-project-card.current::after {
  content: '当前'; margin-left: auto; color: var(--text-3); font-size: 10px; font-weight: 600;
}
.side-agent-head { border-color: var(--border); }
.side-agent-head:hover { background: var(--surface-tint); border-color: var(--border); }

.btn.primary {
  color: var(--bg); background: var(--text); border-color: var(--text); box-shadow: none;
}
.btn.primary:hover {
  color: var(--bg); background: color-mix(in srgb, var(--text) 86%, var(--bg));
  border-color: color-mix(in srgb, var(--text) 86%, var(--bg)); box-shadow: none;
}
.btn.primary:active:not(:disabled) { background: var(--text-2); border-color: var(--text-2); }
.action-send { color: var(--bg); background: var(--text); border: 1px solid var(--text); }
.action-send:hover:not(:disabled) { background: var(--text-2); border-color: var(--text-2); }
.segmented-option.active,
.segmented-option[aria-selected="true"] { color: var(--bg); background: var(--text); box-shadow: none; }
.switch input:checked + .switch-slider { background: var(--text-2); }

/* 工作区：内容优先、弱边界，并支持桌面拖动调宽。 */
.workspace-resize-handle {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: -3px; width: 7px;
  cursor: col-resize; touch-action: none;
}
.workspace-resize-handle::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: transparent; transition: background .12s;
}
.workspace-resize-handle:hover::after,
.workspace-resize-handle:focus-visible::after,
.workspace-resizing .workspace-resize-handle::after { background: var(--text-3); }
body.workspace-resizing { cursor: col-resize; user-select: none; }
.workspace-panel .ws-collapse-btn,
.workspace-panel .ws-expand-btn { border-color: transparent; border-radius: 6px; }
.workspace-panel .ws-collapse-btn:hover,
.workspace-panel .ws-expand-btn:hover { background: var(--surface-tint); }
.workspace-panel .ws-object-card {
  margin-bottom: 0; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent;
}
.workspace-panel .ws-object-card:hover { border-color: var(--border); background: transparent; }
.workspace-panel .ws-object-icon { color: var(--text-2); }
.workspace-panel .ws-object-badge { color: var(--text-3); background: transparent; }
.workspace-panel .ws-prompt-item {
  padding: 7px 2px; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  background: transparent;
}
.workspace-panel .ws-prompt-item:hover { border-color: var(--border); background: var(--surface-tint); }
.workspace-panel .ws-change-badge { color: var(--bg); background: var(--text-2); }
.workspace-panel .ws-section-title { color: var(--text-3); }
.workspace-panel .file-tree-row:hover { background: var(--surface-tint); }
@media (max-width: 980px) {
  .workspace-resize-handle { display: none; }
  /* 末尾的桌面工作区规则不能覆盖移动端：面板改为 fixed 浮层后，聊天区始终只占一列。 */
  .chat-shell.ws-collapsed, .chat-shell.ws-open { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Agent Workspace 的桌面双栏定义位于早期移动端规则之后，这里做最终断点保护。 */
  .main { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .content { grid-column: 1; width: 100%; max-width: 100%; min-width: 0; }
}

/* 状态依靠符号 + 文案；仅“需处理/错误”使用语义色。 */
.cap-status {
  color: var(--text-2); background: transparent; border-color: var(--border);
}
.cap-status--active,
.cap-status--inactive,
.cap-status--waiting { color: var(--text-2); }
.cap-status--pending { color: var(--warn); }
.cap-status--disabled { color: var(--error); }
.module-page .tag,
.module-page .tool-pill {
  color: var(--text-2) !important; background: transparent !important; border-color: var(--border) !important;
}

/* 浅色最终保护层：避免高特异性历史规则把透明激活项重新变成白字。 */
html.light .module-tabs .btn.primary {
  color: var(--text); background: transparent; border-bottom-color: var(--text);
}
html.light .btn.primary {
  color: var(--bg); background: var(--text); border-color: var(--text);
}
html.light .segmented-option.active,
html.light .segmented-option[aria-selected="true"] {
  color: var(--bg); background: var(--text);
}
html.light .side-nav-item.active,
html.light .drawer-project-card.current { background: transparent; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .page-state.loading .page-state-icon, .studio-agent-card, .agent-overview-card, .semantic-work-card { animation: none !important; transition: none !important; transform: none !important; }
}