/* ============================================================
   lilliv3 · 幻依会客厅 —— Agent 对话控制台
   设计语言：「云朵上的陪伴」（见 lilly_design.html 设计规范）
   色板：奶油 #FFF9F0 · 薄荷 #7EC8B8 · 柔粉 #FFB6C1 · 暖黄 #FFE4B5
        深棕 #5D4E37 · 中棕 #9B8B7A · 米灰 #F0E6D6
   签名元素：可见的思维流 —— 推理以「悄悄话」的形态实时涌入
   云端，结束后装订成可收起的私语；工具调用以终端日志落款。
   ============================================================ */

/* ---------- 0. 本地字体（自托管，离线可用） ----------
   happy.ttf —— 站酷快乐体（ZCOOL KuaiLe）：调皮可爱，用于大标题展示
   xyzk.ttf  —— 霞鹜臻楷（LXGW ZhenKai）：轻柔浪漫工整，用于正文
   路径相对本 CSS（css/ → ../fonts/），避免部署子路径失效。
   单字重字体：声明 400，加粗由浏览器合成；font-display: swap 保证文字先出。 */
@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("../fonts/happy.woff2") format("woff2"),
       url("../fonts/happy.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LXGW ZhenKai";
  src: url("../fonts/xyzk.woff2") format("woff2"),
       url("../fonts/xyzk.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  --cream-50: #fffcf7;
  --cream-100: #fff9f0;
  --cream-200: #fff5e6;
  --cream-300: #f0e6d6;

  --mint-50: #f0faf7;
  --mint-100: #e8f5f0;
  --mint-200: #b8e4d8;
  --mint-300: #7ec8b8;
  --mint-400: #5ba898;
  --mint-500: #3d8a7a;

  --pink-50: #fff0f3;
  --pink-100: #ffe4e9;
  --pink-200: #ffb6c1;
  --pink-300: #ff8fa3;

  --yellow-50: #fff8e7;
  --yellow-100: #ffe4b5;
  --yellow-200: #ffd699;

  --brown-300: #d4c4b0;
  --brown-400: #b8a99a;
  --brown-500: #9b8b7a;
  --brown-600: #7a6b5a;
  --brown-700: #5d4e37;
  --brown-800: #3d3225;

  --coral: #d96a63;
  --coral-soft: rgba(217, 106, 99, 0.1);

  /* 思考强度五档色：飘絮(灰) · 流云(浅绿) · 浮光(浅蓝) · 星野(淡紫) · 星穹(彩虹)
     星穹彩虹带 120° 斜向倾角：流动时呈斜掠感，区别于水平刻度轨道 */
  --effort-gray: #a8a29e;
  --effort-green: #7fd6a4;
  --effort-blue: #7ec8ef;
  --effort-purple: #b3a1e8;
  --effort-rainbow: linear-gradient(120deg, #ff5f6d, #ffc371, #ffeb3b, #4ade80, #38bdf8, #a78bfa, #f472b6, #ff5f6d);

  --white: #ffffff;

  /* 全局卡片底色：暖米替代纯白（所有卡片/面板/输入区共用，避免纯白刺眼） */
  --card-bg: #fef8f1;

  /* 状态卡子区块（todo 及未来 affinity / game_state 等）统一底色：
     比卡片底色更浅的暖白，子区块浮起层次 */
  --state-block-bg: #fdfbf7;

  --shadow-soft: 0 4px 20px rgba(93, 78, 55, 0.06);
  --shadow-medium: 0 2px 12px rgba(93, 78, 55, 0.08);
  --shadow-strong: 0 8px 32px rgba(93, 78, 55, 0.12);

  /* 「云朵上的陪伴」：圆角整体上调一档，卡片更显蓬松圆润 */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  --font-display: "ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "LXGW ZhenKai", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --thread-w: min(860px, 100% - 2.5rem);
}

/* ---------- 2. Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background:
    radial-gradient(900px 420px at 85% -8%, rgba(255, 182, 193, 0.14), transparent 60%),
    radial-gradient(1000px 480px at 8% 108%, rgba(184, 228, 216, 0.22), transparent 60%),
    var(--cream-100);
  color: var(--brown-700);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* 漂浮的云：纯装饰，低透明度，不挡交互（规范：每屏 3-4 个）
   注：薄荷绿云朵（右上）已按客户要求移除，仅保留粉色一朵 */
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
  width: 12rem;
  height: 6.5rem;
  left: -2.5rem;
  bottom: 4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cg fill='%23FFE4E9' fill-opacity='.55'%3E%3Cellipse cx='40' cy='54' rx='24' ry='15'/%3E%3Cellipse cx='66' cy='44' rx='30' ry='19'/%3E%3Cellipse cx='98' cy='52' rx='24' ry='15'/%3E%3C/g%3E%3C/svg%3E");
}

button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* hidden 属性优先于任何显式 display（防止按钮的 inline-flex 等覆盖导致隐藏失效） */
[hidden] {
  display: none !important;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--mint-200);
  color: var(--brown-800);
}

:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--mint-300);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

.hidden {
  display: none !important;
}

/* ---------- 3. App shell ---------- */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ---------- 4. Topbar ---------- */
/* 层叠上下文：backdrop-filter 已使 topbar 成为层叠上下文（z-index auto≈0），
   会被 DOM 顺序靠后的 .agent-card（同为 0 级）覆盖，导致 effort-pop 弹出层被遮挡；
   显式提升 z-index，让顶栏（含悬浮弹层）始终浮于 shell 内容之上 */
.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  /* iOS standalone 全屏：顶部让出刘海安全区（桌面 env()=0 无副作用）
     注意：必须用 padding-top 单独覆盖，不可写进 2 值 shorthand（会同时作用 bottom） */
  padding: 1rem 2rem;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  background: rgba(255, 252, 247, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-300);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  color: var(--brown-800);
  text-decoration: none;
  line-height: 1.25;
}

.brand:hover {
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--brown-400);
}

/* 模型设置 */
.controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ctl-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--brown-400);
}

.ctl select {
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  color: var(--brown-600);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.28rem 0.5rem;
  transition: border-color 0.18s ease;
}

.ctl select:focus {
  border-color: var(--mint-300);
}

/* 思考强度：按钮 + 悬浮滑杆（替代原生下拉） */
.effort-ctl {
  position: relative;
}

.effort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  color: var(--brown-600);
  /* 正文无衬线栈：中文渲染平滑（等宽字体小字号下易发虚/锯齿） */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  padding: 0.28rem 0.72rem 0.28rem 0.55rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.effort-btn:hover {
  border-color: var(--mint-300);
}

.effort-btn:active {
  transform: translateY(1px);
}

.effort-btn[aria-expanded="true"] {
  border-color: var(--mint-300);
  box-shadow: var(--shadow-medium);
}

.effort-dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--effort-gray);
  transition: background 0.2s ease;
}

.effort-btn[data-step="2"] .effort-dot { background: var(--effort-green); }
.effort-btn[data-step="3"] .effort-dot { background: var(--effort-blue); }
.effort-btn[data-step="4"] .effort-dot { background: var(--effort-purple); }

.effort-btn[data-step="5"] .effort-dot {
  background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #ffeb3b, #4ade80, #38bdf8, #a78bfa, #f472b6, #ff5f6d);
  animation: effort-spin 1.2s linear infinite;
}

.effort-chev {
  color: var(--brown-400);
  transition: transform 0.18s ease;
}

.effort-btn[aria-expanded="true"] .effort-chev {
  transform: rotate(180deg);
}

/* 星穹：按钮本身彩虹流动（实时变化的彩色）
   用 hue-rotate 0→360° 循环：色相旋转一整圈后颜色物理性还原，
   不存在 background-position 循环回 0% 时的画面跳变 */
.effort-btn[data-step="5"] {
  background: var(--effort-rainbow);
  animation: effort-hue 2.4s linear infinite;
  border-color: transparent;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 14px rgba(255, 120, 180, 0.5), 0 0 30px rgba(130, 160, 255, 0.34);
}

@keyframes effort-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

@keyframes effort-spin {
  to { transform: rotate(360deg); }
}

/* 悬浮弹层：按钮下方右对齐的白色卡片。
   入场/出场对称过渡（.show 状态类驱动，参照 .jump-bottom / .todo-tip 模式）：
   默认态即出场终态（淡出 + 上移消失），.show 时淡入 + 归位；
   visibility 延迟到过渡结束后再真正隐藏，出场期间保持可读屏不可聚焦 */
.effort-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(340px, calc(100vw - 2rem));
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  padding: 1rem 1.1rem 0.85rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s;
}

.effort-pop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}

.effort-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.effort-pop-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brown-700);
}

.effort-pop-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--brown-400);
}

/* 滑杆轨道：灰 → 绿 → 蓝 → 紫 → 彩虹 五段
   色标用 calc(百分比 + 固定px) 精确对齐拇指中心：
   拇指中心 = (i-1)/4 × (轨道宽 - 20px) + 10px（thumb 20px，border-box）
   各段中心 = 0%+10px / 25%+5px / 50% / 75%-5px / 100%-10px */
.effort-slider {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1; /* 覆盖层 z-index 0，拇指保持在覆盖层之上 */
  width: 100%;
  height: 20px; /* 保证点击/拖动区域舒适，轨道由伪元素绘制 */
  background: transparent;
  outline: none;
  cursor: pointer;
}

.effort-slider::-webkit-slider-runnable-track {
  height: 8px;
  margin: 0; /* 覆盖默认 margin，保证轨道垂直居中位置 = (20-8)/2 = 6px */
  border-radius: var(--radius-full);
  background: linear-gradient(90deg,
    var(--effort-gray) calc(-12.5% + 12.5px), var(--effort-gray) calc(12.5% + 7.5px),
    var(--effort-green) calc(12.5% + 7.5px), var(--effort-green) calc(37.5% + 2.5px),
    var(--effort-blue) calc(37.5% + 2.5px), var(--effort-blue) calc(62.5% - 2.5px),
    var(--effort-purple) calc(62.5% - 2.5px), var(--effort-purple) calc(87.5% - 7.5px),
    #ff5f6d calc(87.5% - 7.5px), #a78bfa calc(112.5% - 12.5px));
}

.effort-slider::-moz-range-track {
  height: 8px;
  margin: 0; /* 同上：消除 Firefox 默认 track margin */
  border-radius: var(--radius-full);
  background: linear-gradient(90deg,
    var(--effort-gray) calc(-12.5% + 12.5px), var(--effort-gray) calc(12.5% + 7.5px),
    var(--effort-green) calc(12.5% + 7.5px), var(--effort-green) calc(37.5% + 2.5px),
    var(--effort-blue) calc(37.5% + 2.5px), var(--effort-blue) calc(62.5% - 2.5px),
    var(--effort-purple) calc(62.5% - 2.5px), var(--effort-purple) calc(87.5% - 7.5px),
    #ff5f6d calc(87.5% - 7.5px), #a78bfa calc(112.5% - 12.5px));
}

.effort-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box; /* 总宽固定 20px（含 3px 边框），保证位置公式成立 */
  width: 20px;
  height: 20px;
  margin-top: -6px; /* (20 - 8) / 2：拇指在轨道上垂直居中 */
  border-radius: 50%;
  background: var(--effort-gray);
  border: 3px solid var(--white);
  box-shadow: 0 1px 6px rgba(93, 78, 55, 0.25);
  opacity: 0; /* 原生拇指透明：保留点击/拖动区域，视觉由 .effort-thumb-vis 平滑层承担 */
  transition: background 0.15s ease, transform 0.12s ease;
}

.effort-slider::-moz-range-thumb {
  box-sizing: border-box; /* 同上 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--effort-gray);
  border: 3px solid var(--white);
  box-shadow: 0 1px 6px rgba(93, 78, 55, 0.25);
  opacity: 0; /* 同上：原生拇指透明，视觉由平滑层承担 */
  transition: background 0.15s ease, transform 0.12s ease;
}

.effort-pop[data-step="2"] .effort-thumb-vis { background: var(--effort-green); }
.effort-pop[data-step="3"] .effort-thumb-vis { background: var(--effort-blue); }
.effort-pop[data-step="4"] .effort-thumb-vis { background: var(--effort-purple); }

/* 星穹：轨道底色为静态彩虹；
   流动由覆盖层 .effort-track-rainbow 承担——transform 平移
   斜条纹的水平周期（112px = 56px / sin30°），GPU 合成、循环无缝 */
.effort-pop[data-step="5"] .effort-slider::-webkit-slider-runnable-track {
  background: var(--effort-rainbow);
}

.effort-pop[data-step="5"] .effort-slider::-moz-range-track {
  background: var(--effort-rainbow);
}

/* 彩虹流动覆盖层：与轨道同尺寸同位置，不拦截交互 */
.effort-track-rainbow {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px; /* input 高 20px，轨道 8px 垂直居中 */
  height: 8px;
  z-index: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  pointer-events: none;
  display: none; /* 仅星穹态显示 */
}

.effort-track-rainbow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(100% + 112px); /* 平移一个水平周期后仍有内容覆盖 */
  background: repeating-linear-gradient(120deg, #ff5f6d 0, #ffc371 8px, #ffeb3b 16px, #4ade80 24px, #38bdf8 32px, #a78bfa 40px, #f472b6 48px, #ff5f6d 56px);
  animation: effort-track-slide 1.1s linear infinite;
}

@keyframes effort-track-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-112px); }
}

.effort-pop[data-step="5"] .effort-track-rainbow {
  display: block;
}

/* 轨道定位容器：视觉层（光带/拇指）相对滑块自身定位，
   而非弹层卡片——否则绝对定位会画到弹层顶部的 padding 区域 */
.effort-track-wrap {
  position: relative;
}

/* 已选范围高亮层：宽度由 data-step 五档驱动，transition 平滑伸缩。
   拖动滑杆掠过各档位时，「光带」跟随拇指平滑移动，形成档位切换的流动感 */
.effort-track-fill {
  position: absolute;
  left: 0;
  top: 6px; /* wrap 高 = input 20px，轨道 8px 垂直居中 */
  height: 8px;
  z-index: 2; /* slider z-index 1，光带须在轨道之上；视觉拇指(3)在最上 */
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: width 0.25s ease; /* 与视觉拇指 left 同步，光带与拇指并肩滑动 */
}

/* 各档位光带终点 = 拇指中心：(i-1)/4 × (轨道宽 - 20px) + 10px，
   展开为 calc((i-1)*25% - (i-1)*5px + 10px) */
.effort-pop[data-step="1"] .effort-track-fill { width: 10px; }
.effort-pop[data-step="2"] .effort-track-fill { width: calc(25% + 5px); }
.effort-pop[data-step="3"] .effort-track-fill { width: 50%; }
.effort-pop[data-step="4"] .effort-track-fill { width: calc(75% - 5px); }
.effort-pop[data-step="5"] .effort-track-fill { width: calc(100% - 10px); }

/* 视觉拇指：原生 thumb 透明化后由本层负责显示。
   位置由 data-step 五档驱动 + transition: left，档位切换时以 ease 平滑滑过轨道，
   不再是原生控件的瞬间跳变；交互（点击/拖动/键盘）仍由原生 input 承担 */
.effort-thumb-vis {
  position: absolute;
  top: 0; /* wrap 高 = input 20px，垂直中心对齐轨道（中心 = 10px） */
  left: 10px; /* 第 1 档中心 */
  width: 20px;
  height: 20px;
  margin-left: -10px; /* 中心对齐 left（不用 transform，避免与星穹旋转动画冲突） */
  border-radius: 50%;
  background: var(--effort-gray);
  border: 3px solid var(--white);
  box-shadow: 0 1px 6px rgba(93, 78, 55, 0.25);
  pointer-events: none; /* 不拦截事件：点击/拖动穿透到原生 thumb */
  z-index: 3; /* 层级：slider(1) < 光带(2) < 视觉拇指(3) */
  transition: left 0.25s ease, transform 0.12s ease;
}

/* 各档位视觉拇指中心：与光带终点同一公式 */
.effort-pop[data-step="1"] .effort-thumb-vis { left: 10px; }
.effort-pop[data-step="2"] .effort-thumb-vis { left: calc(25% + 5px); }
.effort-pop[data-step="3"] .effort-thumb-vis { left: 50%; }
.effort-pop[data-step="4"] .effort-thumb-vis { left: calc(75% - 5px); }
.effort-pop[data-step="5"] .effort-thumb-vis { left: calc(100% - 10px); }

/* 键盘聚焦：视觉拇指呼应滑杆的 mint 焦点光晕 */
.effort-slider:focus-visible ~ .effort-thumb-vis {
  box-shadow: 0 0 0 4px rgba(126, 200, 184, 0.45);
}

.effort-pop[data-step="5"] .effort-thumb-vis {
  background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #ffeb3b, #4ade80, #38bdf8, #a78bfa, #f472b6, #ff5f6d);
  animation: effort-spin 1.2s linear infinite;
}

.effort-pop[data-step="5"] .effort-pop-name {
  background: var(--effort-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: effort-hue 2.4s linear infinite;
}

.effort-slider:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 4px;
}

/* 拖动中：视觉拇指轻微放大，给出「正在调节」的触感反馈 */
.effort-slider:active ~ .effort-thumb-vis {
  transform: scale(1.15);
}

/* 星穹态拇指有旋转动画（animation 覆盖 transform），改用亮度做拖动反馈 */
.effort-pop[data-step="5"] .effort-slider:active ~ .effort-thumb-vis {
  filter: brightness(1.25);
}

/* 五档刻度标签 */
.effort-stops {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--brown-400);
}

.effort-stops span:nth-child(5) {
  background: var(--effort-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: effort-hue 2.4s linear infinite;
  font-weight: 600;
}

/* 星穹警示：仅滑到第 5 档时出现的低调小字提示
   （data-step 由 render() 实时同步，纯 CSS 控制显隐） */
.effort-warn {
  display: none;
  margin: 0.7rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--yellow-50);
  border: 1px solid var(--yellow-100);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--brown-600);
}

.effort-pop[data-step="5"] .effort-warn {
  display: block;
}

/* 星穹爆发：一次性粒子特效（全屏覆盖，不拦截点击） */
.effort-burst {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
}

.effort-flash {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: radial-gradient(circle at var(--bx) var(--by),
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 235, 59, 0.5) 20%,
    rgba(255, 95, 109, 0.32) 40%,
    rgba(167, 139, 250, 0.26) 60%,
    transparent 76%);
  animation: effort-flash-fade 1.15s ease-out forwards;
}

@keyframes effort-flash-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 星穹余晖：爆发点扩散的全屏彩虹光晕，呼吸 2.4s 后消退 */
.effort-aura {
  position: fixed;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  background: radial-gradient(circle at var(--bx) var(--by),
    rgba(255, 95, 109, 0.3) 0%,
    rgba(255, 195, 113, 0.24) 18%,
    rgba(255, 235, 59, 0.2) 34%,
    rgba(74, 222, 128, 0.17) 50%,
    rgba(56, 189, 248, 0.19) 66%,
    rgba(167, 139, 250, 0.24) 82%,
    rgba(244, 114, 182, 0.18) 100%);
  animation: effort-aura-breathe 2.4s ease-out forwards;
}

@keyframes effort-aura-breathe {
  0% { opacity: 0; }
  12% { opacity: 1; }
  55% { opacity: 0.72; }
  100% { opacity: 0; }
}

.effort-burst-ring {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: burst-ring 1.15s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

@keyframes burst-ring {
  from { transform: scale(0.4); opacity: 0.95; }
  to { transform: scale(18); opacity: 0; }
}

.effort-burst-p,
.effort-burst-star,
.effort-burst-comet {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--ps);
  height: var(--ps);
  margin: calc(var(--ps) / -2) 0 0 calc(var(--ps) / -2);
  background: var(--pc);
  animation: burst-fly 1.4s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

.effort-burst-p {
  border-radius: var(--pr);
}

.effort-burst-star {
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

@keyframes burst-fly {
  0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.15) rotate(240deg); opacity: 0; }
}

/* 彗星：拖尾朝向飞行方向的反向（--rot = 飞行方向角），带辉光 */
.effort-burst-comet {
  width: 36px;
  height: 6px;
  margin: -3px 0 0 -18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 8%, var(--pc) 68%, #ffffff 100%);
  filter: drop-shadow(0 0 5px var(--pc));
  animation-name: burst-comet;
}

@keyframes burst-comet {
  0% { transform: translate(0, 0) rotate(var(--rot)) scale(0.4); opacity: 0; }
  8% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.7); opacity: 0; }
}

/* 星尘雨：爆发后的余晖，星尘自屏幕顶端错落飘落 */
.effort-stardust {
  position: fixed;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  overflow: hidden;
}

.effort-stardust i {
  position: absolute;
  left: var(--sx);
  top: -28px;
  width: var(--ss);
  height: var(--ss);
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 8px var(--sc);
  opacity: 0;
  animation: stardust-fall var(--sd) ease-in var(--sdel) forwards;
}

@keyframes stardust-fall {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  12% { opacity: 1; }
  30% { opacity: 0.55; }
  48% { opacity: 1; }
  66% { opacity: 0.6; }
  82% { opacity: 0.9; }
  100% { transform: translateY(var(--sy)) scale(1.15); opacity: 0; }
}

/* ---------- 5. Shell / Rail ---------- */
.shell {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  grid-template-areas: "rail main agent";
  column-gap: 1rem;
  padding: 0.9rem 1rem 0 0.9rem;
  flex: 1;
  min-height: 0;
}

.rail {
  grid-area: rail;
}

.main {
  grid-area: main;
}

.agent-rail {
  grid-area: agent;
}

/* 悬浮圆角卡片：白底 + 大圆角 + 柔和阴影，在奶油底色上如云朵般浮起
   滚动只发生在列表区（.rail-convs），新建按钮与搜索框始终置顶 */
.rail {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* 仅真正的会话列表滚动：独占剩余高度，按钮与搜索框固定在上方
   滚动条隐藏（保留滚动能力）：Firefox scrollbar-width + WebKit ::-webkit-scrollbar */
.rail-convs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail-convs::-webkit-scrollbar {
  display: none;
}

.rail-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--brown-400);
  padding: 0 0.35rem;
  margin-bottom: 0.55rem;
}

/* 新建对话：贴图按钮（new_conv.png 为皮肤，happy 快乐体文字）
   图片 223×86 等比缩放：aspect-ratio 锁定比例，background 全铺；
   阴影用 filter: drop-shadow 跟随图片 alpha 边缘（四角透明），
   且只挂在 ::before 上 —— 文字不参与投影，避免白色文字带脏影 */
.btn-new {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 60%;
  flex-shrink: 0;
  aspect-ratio: 223 / 86;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--white);
  font-family: "ZCOOL KuaiLe", var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  padding: 0;
  padding-left: -2rem;
  transition: transform 0.18s ease;
}

.btn-new::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/btn/new_conv.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 14px rgba(61, 138, 122, 0.28));
  transition: filter 0.18s ease;
}

.btn-new-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  transform: translateY(8px);
}

.btn-new:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-new:hover:not(:disabled)::before {
  filter: drop-shadow(0 6px 18px rgba(61, 138, 122, 0.34)) brightness(1.05);
}

.btn-new:active:not(:disabled)::before {
  filter: drop-shadow(0 2px 8px rgba(61, 138, 122, 0.3)) brightness(0.96);
}

.btn-new:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-new-icon {
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-3px);
}

/* 历史会话搜索框：位于新建对话按钮与列表之间 */
.conv-search {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.conv-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brown-400);
  pointer-events: none;
}

.conv-search input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  color: var(--brown-700);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.45rem 0.7rem 0.45rem 1.85rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.conv-search input::placeholder {
  color: var(--brown-400);
  opacity: 0.6;
}

.conv-search input:focus {
  outline: none;
  background: var(--card-bg);
  border-color: var(--mint-300);
  box-shadow: 0 0 0 3px rgba(126, 200, 184, 0.16);
}

/* 历史会话列表 */
.conv-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* 分页加载占位：列表尾部提示滚动加载更多 */
.conv-load-more {
  font-size: 0.72rem;
  color: var(--brown-400);
  text-align: center;
  padding: 0.5rem 0 0.2rem;
  letter-spacing: 0.05em;
}

/* 会话分组：组与组之间留间距，分组文本靠左 */
.conv-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.conv-group + .conv-group {
  margin-top: 0.9rem;
}

.conv-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brown-400);
  padding: 0 0.2rem;
}

.conv-empty {
  font-size: 0.76rem;
  color: var(--brown-400);
  text-align: center;
  padding: 0.6rem 0.3rem;
  line-height: 1.6;
  white-space: pre-line;
}

.conv-item {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  background: #fef8f1; /* 卡片底色上移至容器 */
}

/* 会话卡主体：背景透明（由 .conv-item 提供），默认无边框无阴影
   （透明边框占位，选中时不跳动）；z-index 1 使内容浮于星图装饰之上
   flex 布局：头像在整卡左侧垂直居中，右侧为文本块（好友列表式） */
.conv-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.conv-main:hover:not(:disabled) {
  background: var(--mint-50);
}

.conv-main:disabled {
  opacity: 0.7;
  cursor: default;
}

/* 选中：暖米背景 #fff4e3 + 柔和边框 #efe0d0（背景在容器层，内容保持透明） */
.conv-item.active {
  background: #fff4e3;
}

.conv-item.active .conv-main {
  background: transparent;
  border-color: #efe0d0;
}

/* 激活卡装饰：右上角星点（cloud_star_dot.png 26×29）+ 右下角云星（cloud_star.png 68×45）
   参数为开发者微调版：探出卡片边缘、浮于内容之上（z-index 2） */
.conv-item.active::before,
.conv-item.active::after {
  content: "";
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.conv-item.active::before {
  top: -0.15rem;
  right: -0.25rem;
  width: 1.35rem;
  height: 1.5rem;
  background-image: url("../img/deco/cloud_star_dot.png");
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(180, 180, 177, 0.2));
}

.conv-item.active::after {
  right: -0.2rem;
  bottom: -0.5rem;
  width: 2.3625rem;
  height: 1.56375rem;
  background-image: url("../img/deco/cloud_star.png");
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(180, 180, 177, 0.2));
}

/* 会话卡简要装饰：头像下方一枚小云星点（cloud_star_dot.png），
   逆时针轻倾 + 低透明度，与选中态右上/右下装饰错位不重叠 */
.conv-main::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  bottom: 0.32rem;
  width: 0.95rem;
  height: 1.05rem;
  background: url("../img/deco/cloud_star_dot.png") no-repeat center / 100% 100%;
  transform: rotate(-25deg);
  opacity: 0.4;
  pointer-events: none;
}

/* 标题行：标题左对齐可截断，时间在右上角与标题基线平齐 */
.conv-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* 会话卡小头像：与右栏 agent-avatar 同源设计的缩小版（圆形 + 首字符 glyph）
   位于整卡左侧、垂直居中；多选模式下隐藏，勾选圈占据其位置 */
.conv-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--mint-100), var(--cream-200));
  border: 1px solid var(--cream-300);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--mint-400);
  user-select: none;
}

.conv-item.selectable .conv-avatar {
  display: none;
}

/* 文本块：标题行 + 预览纵向排列，占据头像右侧剩余宽度 */
.conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.conv-title {
  flex: 1;
  min-width: 0;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-item.active .conv-title {
  color: var(--brown-800);
}

.conv-time {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--brown-400);
  white-space: nowrap;
}

.conv-preview {
  display: block;
  font-size: 0.76rem;
  color: var(--brown-500);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多选模式：占据会话卡左侧（原头像位置）的圆形勾选指示，间距由 .conv-main 的 gap 承担 */
.conv-pick {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--cream-300);
  border-radius: 50%;
  background: var(--white);
}

.conv-item.selected .conv-pick {
  background: var(--mint-300);
  border-color: var(--mint-300);
}

.conv-item.selected .conv-pick::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 5px;
  height: 8px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.conv-item.selectable.selected .conv-main {
  background: var(--mint-50);
  border-color: var(--mint-300);
}

/* ---------- 底部工具栏：设置 / 多选 ---------- */
/* 背景从下到上奶油色渐变为纯透明，与云朵卡片底缘融为一体
   固定两列槽位：右侧 = 多选 ↔ 取消多选（同位切换不跳动），左侧 = 设置 ↔ 删除 */
.rail-tools {
  display: grid;
  grid-template-areas: "left right";
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  /* margin-top 抵消 rail 的 flex gap(1.1rem)，左右/底部抵消 rail 内边距；
     与上方列表之间的视觉间距由自身 padding-top（渐变区）承接 */
  margin: -1.1rem -1rem -1.1rem;
  padding: 1rem 1rem 0.85rem;
  background: linear-gradient(to top, var(--cream-200), var(--cream-100) 45%, transparent);
}

#settingsBtn { grid-area: left; }
#multiBtn { grid-area: right; }
#cancelMultiBtn { grid-area: right; }
#deleteMultiBtn { grid-area: left; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--brown-500);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tool-btn svg {
  width: 1.5rem; /* 约 24px：图标占按钮面积约六成，主操作区不至于小家子气 */
  height: 1.5rem;
}

.tool-btn:hover:not(:disabled) {
  background: var(--mint-50);
  color: var(--mint-400);
  transform: translateY(-1px);
}

.tool-btn:focus-visible {
  outline: 2px solid var(--mint-300);
  outline-offset: 2px;
}

.tool-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.tool-btn-danger:hover:not(:disabled) {
  background: var(--coral-soft);
  color: var(--coral);
}

/* ---------- 6. Buttons ---------- */
/* 发送：贴图按钮（btn_send.png 含纸飞机图标，102×63 等比缩放）
   阴影用 drop-shadow 挂在 ::before 上，跟随纸飞机 alpha 边缘 */
.btn-send {
  position: relative;
  width: 4.4rem;
  aspect-ratio: 102 / 63;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: transform 0.15s ease;
}

.btn-send::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/btn/btn_send.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 8px rgba(126, 200, 184, 0.35));
  transition: filter 0.15s ease;
}

.btn-send:hover {
  transform: translateY(-1px);
}

.btn-send:hover::before {
  filter: drop-shadow(0 4px 12px rgba(126, 200, 184, 0.45)) brightness(1.06);
}

.btn-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-stop {
  background: transparent;
  border: 1px solid rgba(217, 106, 99, 0.55);
  border-radius: 999px;
  color: var(--coral);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.62em 1.5em;
  transition: background-color 0.18s ease;
}

.btn-stop:hover {
  background: var(--coral-soft);
}

/* ---------- 6.5 Agent rail（右栏） ----------
   与左栏同款悬浮卡片语言：白底 + 大圆角 + 柔和阴影。
   顶部区（简介 / 进度）可滚动；模型与上下文卡固定在底部始终可见。 */
.agent-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  align-self: stretch; /* 显式：grid 区域内拉满整行高度 */
  margin-bottom: 0.9rem;
}

/* 顶部区独占剩余高度：简介卡固定在上，状态卡（.agent-progress-card）占满
   剩余空间并内部滚动；本容器自身不滚动（滚动条只出现在状态卡内部） */
.agent-rail-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.agent-model-card {
  flex-shrink: 0;
}

.agent-card {
  position: relative; /* 卡片角落装饰（deco/star 伪元素）定位基准 */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem 1.05rem;
}

/* ---- Agent 卡装饰（deco / star 贴图，纯装饰不挡交互） ----
   同一批资源用旋转 + 微小位移错开，使三张卡各具姿态：
   简介卡 · 云星点（右上，逆时针轻倾）
   状态卡 · 云星（右下，顺时针微倾 + 右移）
   模型卡 · 荧光星（右上探出，顺时针倾角更大） */
.agent-rail-top > .agent-card:first-child::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  width: 1.3rem;
  height: 1.45rem;
  background: url("../img/deco/cloud_star_dot.png") no-repeat center / 100% 100%;
  transform: rotate(-18deg);
  opacity: 0.8;
  filter: drop-shadow(0 1px 2px rgba(180, 180, 177, 0.2));
  pointer-events: none;
}

.agent-progress-card::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  width: 2.1rem;
  height: 1.39rem; /* 68×45 等比 */
  background: url("../img/deco/cloud_star.png") no-repeat center / 100% 100%;
  transform: rotate(8deg) translateX(0.1rem);
  opacity: 0.5;
  filter: drop-shadow(0 1px 2px rgba(180, 180, 177, 0.2));
  pointer-events: none;
}

.agent-model-card::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0.8rem;
  width: 1.5rem;
  aspect-ratio: 37 / 36;
  background: url("../img/star/shaded.png") no-repeat center / 100% 100%;
  transform: rotate(15deg);
  filter: drop-shadow(0 0 4px rgba(224, 200, 130, 0.3));
  pointer-events: none;
}

/* ---- Agent 简介 ---- */
.agent-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

/* 头像占位：图片待客户绘制，替换为 <img> 时去掉 glyph 与 note 即可 */
.agent-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  flex-shrink: 0;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, var(--mint-100), var(--cream-200));
  border: 1px solid var(--cream-300);
  overflow: hidden;
}

.agent-avatar-glyph {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mint-400);
}

.agent-avatar-note {
  font-size: 0.58rem;
  color: var(--brown-400);
  white-space: nowrap;
}

.agent-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.agent-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--brown-800);
  letter-spacing: 0.02em;
  word-break: break-word;
}

.agent-desc {
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--brown-500);
  word-break: break-word;
}

/* ---- 可用工具 tokens ---- */
.agent-tools {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-top: 1px dashed var(--cream-300);
  padding-top: 0.75rem;
}

.agent-tools-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--brown-400);
}

.agent-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 5.4rem;
  overflow-y: auto;
  /* 滚动条与正文/侧栏同款语言（见 .thread/.rail）：奶油圆角细条，悬停加深 */
  scrollbar-width: thin;
  scrollbar-color: var(--cream-300) transparent;
}

.agent-tools-list::-webkit-scrollbar {
  width: 6px;
}

.agent-tools-list::-webkit-scrollbar-thumb {
  background: var(--cream-300);
  border-radius: 5px;
}

.agent-tools-list::-webkit-scrollbar-thumb:hover {
  background: var(--brown-300);
}

.tool-token {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  white-space: nowrap;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  color: var(--mint-500);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

/* ---- 状态卡（永远显示的容器；内部按 namespace 渲染子区块） ---- */
.agent-card-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--brown-400);
}

/* 进度卡纵向拉满：简介卡在上、模型卡在下，进度卡占据二者之间的全部空间；
   min-height: 0 允许收缩（内容超高时不被撑大），滚动条在内部 .agent-progress */
.agent-progress-card {
  flex: 1 1 0;
  min-height: 0;
}

/* 子区块容器：纵向堆叠、超高时容器内滚动（占位文案居中铺满）。
   overflow-y: auto 时 overflow-x 会按规范计算为 auto，任何横向溢出（如
   .todo-list 的 width:100% + margin）都会冒出水平滚动条，故显式锁死 x 轴 */
.agent-progress {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.agent-progress-empty {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--brown-400);
  text-align: center;
  border: 1px dashed var(--cream-300);
  border-radius: var(--radius-sm);
  padding: 0.9rem 0.6rem;
}

/* namespace 子区块：标题 + 内容，多个子区块间细线分隔；
   统一底色 var(--state-block-bg)（未来子区块共用），柔和阴影浮起于状态卡之上。
   入场/出场动画：淡入（创建时）与淡出（数据清空时，配合 JS fadeOutBlock） */
.state-block {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.15rem 0.1rem 0.35rem;
  background: var(--state-block-bg);
  box-shadow: var(--shadow-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream-300);
  animation: state-block-in 0.32s ease both;
}

/* 淡出中（JS 加 .out 类，animationend 后移除元素） */
.state-block.out {
  animation: state-block-out 0.32s ease both;
}

@keyframes state-block-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes state-block-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* 多个状态区块以明确留白分隔：todo 与计划任务并存时不再拥挤。 */
.state-block + .state-block {
  margin-top: 0.8rem;
  border-top: 0;
  padding-top: 0.15rem;
}

.state-block-title {
  font-family: var(--font-body); /* xyzk 霞鹜臻楷 */
  font-size: 0.8rem;             /* 较正文略放大 */
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brown-400);
  margin: 0.5rem 1rem 0rem;
  /* 标题行内嵌收起按钮 + 任务进度条（x=completed+cancelled，y=总数） */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* 海龟汤揭晓状态卡：由 turtle_soup_reveal namespace 只读渲染。 */
.turtle-soup-card {
  margin: 0.25rem 0.65rem 0.55rem;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--cream-50), var(--mint-50));
  box-shadow: var(--shadow-soft);
}

.turtle-soup-meta {
  display: flex;
  justify-content: flex-end;
}

.turtle-soup-id {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-full);
  color: var(--mint-500);
  background: var(--mint-50);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.turtle-soup-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.turtle-soup-answer {
  padding-top: 0.65rem;
  border-top: 1px dashed var(--cream-300);
}

.turtle-soup-label {
  margin: 0;
  color: var(--brown-400);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.turtle-soup-text {
  margin: 0;
  color: var(--brown-600);
  font-size: 0.78rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 收起 / 展开按钮：无边框纯箭头，hover 薄荷变色 */
.todo-toggle {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--brown-500);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.todo-toggle:hover {
  color: var(--mint-400);
  opacity: 0.9;
}

/* 右上角任务进度：细进度条 + x/y 计数（x=completed+cancelled 之和，y=总数），靠右对齐 */
.todo-summary {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.todo-progress-track {
  flex: none;
  width: 3.2rem;
  height: 0.35rem;
  border-radius: var(--radius-full);
  background: var(--cream-300);
  overflow: hidden;
}

.todo-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--mint-300);
  transition: width 0.25s ease;
}

.todo-progress-text {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--brown-400);
  white-space: nowrap;
}

/* 列表收起动画容器：grid-template-rows 0fr↔1fr 平滑过渡高度 + 淡出。
   收起时仅保留标题行的任务进度条，列表整体收起 */
.todo-collapse {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.todo-collapse > * {
  min-height: 0;
  overflow: hidden;
}

.state-block.collapsed .todo-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
}

.state-block-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- 状态卡：待办子区块（agent 单向维护，只读展示） ---- */

/* 待办列表：单一列表（非子卡片堆叠），条目间细分割线，超高时随容器滚动。
   width 用 auto（flex column 下自动拉伸到可用宽度）而非 100%：
   100% + margin 0.3rem 会横向溢出，触发 .agent-progress 的水平滚动条 */
.todo-list {
  width: auto;
  list-style: none;
  margin: 0 0.3rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 条目：浅米色条带（--cream-50 略浅于卡片背景 --card-bg），
   小圆角保持列表条带感（非独立子卡片）；配色参考 agent-meta：
   标题用深棕（--brown-700 档）、正文基础色 --brown-600，弃用过浅的 --brown-300 */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  background: var(--cream-50);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--brown-600);
}

/* 状态圆点：纯色表达（无符号），pending 空心 / in_progress 呼吸 / cancelled 灰 / completed 绿填充 */
.todo-mark {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.21rem;
  border-radius: 50%;
  border: 1.5px solid var(--brown-400);
  background: transparent;
}

.todo-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.todo-title {
  word-break: break-word;
}

/* todo detail 悬浮卡片：hover 条目时在左侧弹出临时查看（移开即消失）。
   position: fixed 挂在 body 上，translateX(-100%) 向左展开不遮挡右侧列表；
   入场：从右向左滑入（-94% → -100%），出场：从左向右滑回并淡出 */
.todo-tip {
  position: fixed;
  z-index: 100;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--brown-600);
  opacity: 0;
  visibility: hidden;
  transform: translate(-94%, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}

.todo-tip.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-100%, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* 进行中：薄荷填充 + 呼吸闪烁（opacity 明暗 + 光晕脉动） */
.todo-in_progress .todo-mark {
  border-color: var(--mint-400);
  background: var(--mint-300);
  animation: todo-breathe 1.6s ease-in-out infinite;
}

@keyframes todo-breathe {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(126, 200, 184, 0.5);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 0 4px rgba(126, 200, 184, 0);
  }
}

.todo-in_progress .todo-title {
  font-weight: 600;
  color: var(--brown-800);
}

/* 已完成：薄荷绿填充（清晰可辨）；删除线只留给 cancelled，避免混淆 */
.todo-completed .todo-mark {
  border-color: var(--mint-300);
  background: var(--mint-300);
}

.todo-completed .todo-title {
  color: var(--brown-400);
}

/* 已抛弃（cancelled）：灰色填充 + 标题删除线，与薄荷完成态区分 */
.todo-cancelled .todo-mark {
  border-color: var(--brown-400);
  background: var(--brown-400);
}

.todo-cancelled .todo-title {
  text-decoration: line-through;
  color: var(--brown-400);
}

/* ---- 模型与上下文 ---- */
.model-ctl {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* 模型选择按钮（替代原生下拉；点击弹出 alert 式模型明细弹窗） */
.model-picker-btn {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  color: var(--brown-600);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.model-picker-btn:hover {
  border-color: var(--mint-300);
  background: var(--card-bg);
}

.model-picker-btn:active {
  transform: translateY(1px);
}

.model-picker-btn:focus-visible,
.model-picker-btn[aria-expanded="true"] {
  outline: none;
  background: var(--card-bg);
  border-color: var(--mint-300);
  box-shadow: 0 0 0 3px rgba(126, 200, 184, 0.16);
}

.model-picker-btn.is-missing {
  border-color: rgba(217, 106, 99, 0.55);
  background: var(--coral-soft);
}
.model-picker-btn.is-missing .model-picker-name { color: var(--coral); }

.model-picker-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--brown-700);
  /* 切换模型时文字淡入归位 */
  animation: model-name-in 0.24s ease;
}

@keyframes model-name-in {
  from { opacity: 0.4; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.model-picker-id {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--brown-400);
}

.model-picker-caret {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--brown-400);
  border-bottom: 1.5px solid var(--brown-400);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.18s ease;
}

.model-picker-btn[aria-expanded="true"] .model-picker-caret {
  transform: rotate(225deg) translateY(-1px);
}

/* ---- 模型选择弹窗（alert 式居中窗口） ---- */
.model-dialog {
  position: fixed;
  inset: 0;
  z-index: 120; /* 高于 cwd-picker-overlay(100) 与 effort-pop(60) */
  display: grid;
  place-items: center;
  padding: 1rem;
}

.model-dialog[hidden] {
  display: none;
}

.model-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(61, 50, 37, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.model-dialog.show .model-dialog-backdrop {
  opacity: 1;
}

.model-dialog-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(80vh, 640px);
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.model-dialog.show .model-dialog-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.model-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem 0.85rem;
  border-bottom: 1px dashed var(--cream-300);
}

.model-dialog-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--brown-800);
}

.model-dialog-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--brown-400);
  margin-top: 0.25rem;
}

.model-dialog-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--brown-500);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.model-dialog-close:hover {
  border-color: var(--mint-300);
  color: var(--brown-700);
  transform: rotate(90deg);
}

.model-dialog-body {
  overflow-y: auto;
  padding: 0.9rem 1.3rem;
}

/* 弹窗滚动区沿用 Token 明细的薄荷主题细条；Firefox 与 WebKit 分别适配。 */
.model-dialog-body,
.source-dialog-content,
.source-list,
.source-form {
  scrollbar-width: thin;
  scrollbar-color: var(--mint-200) transparent;
}

.model-dialog-body::-webkit-scrollbar,
.source-dialog-content::-webkit-scrollbar,
.source-list::-webkit-scrollbar,
.source-form::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.model-dialog-body::-webkit-scrollbar-thumb,
.source-dialog-content::-webkit-scrollbar-thumb,
.source-list::-webkit-scrollbar-thumb,
.source-form::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--mint-200);
}

.model-dialog-body::-webkit-scrollbar-thumb:hover,
.source-dialog-content::-webkit-scrollbar-thumb:hover,
.source-list::-webkit-scrollbar-thumb:hover,
.source-form::-webkit-scrollbar-thumb:hover {
  background: var(--mint-300);
}

.model-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.model-table th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brown-400);
  text-align: right;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--cream-300);
  white-space: nowrap;
}

.model-table th:first-child {
  text-align: left;
}

.model-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--cream-100);
  vertical-align: middle;
}

.model-table tbody tr {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.model-table tbody tr:hover {
  background: var(--mint-50);
}

.model-table tbody tr:focus-visible {
  outline: none;
  background: var(--mint-100);
}

.model-table tbody tr.is-current {
  background: var(--mint-100);
  box-shadow: inset 3px 0 0 var(--mint-300);
}

.model-cell-name {
  text-align: left !important;
}

.model-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--brown-800);
}

.model-row.is-free .model-name {
  color: var(--mint-500);
}

.model-reg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.22rem;
}

.model-reg-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brown-400);
}

.model-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}

.model-badge-prov {
  background: var(--cream-200);
  color: var(--brown-500);
}

.model-badge-vision {
  background: rgba(126, 200, 184, 0.18);
  color: var(--mint-500);
}

.model-badge-no-vision {
  background: var(--cream-200);
  color: var(--brown-400);
}

.model-badge-free {
  background: var(--mint-100);
  color: var(--mint-500);
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

.model-cell-num {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--brown-600);
  white-space: nowrap;
}

.model-row.is-free .model-cell-num {
  color: var(--mint-500);
}

.model-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.3rem 1.1rem;
  border-top: 1px dashed var(--cream-300);
}

.model-dialog-foot-hint {
  font-size: 0.72rem;
  color: var(--brown-400);
}

.model-dialog-cancel {
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  color: var(--brown-600);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}

.model-dialog-cancel:hover {
  border-color: var(--mint-300);
  background: var(--mint-50);
}

.model-dialog-cancel:active {
  transform: translateY(1px);
}

.ctx-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px dashed var(--cream-300);
  padding-top: 0.8rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.ctx-block:hover {
  background: rgba(232, 245, 240, 0.46);
  box-shadow: 0 0 0 0.5rem rgba(232, 245, 240, 0.46);
}

.ctx-block:active {
  transform: scale(0.992);
}

.ctx-block:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 0.45rem;
}

.ctx-block[aria-expanded="true"] {
  background: rgba(232, 245, 240, 0.58);
}

.ctx-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ctx-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--brown-400);
}

.ctx-used {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brown-700);
  white-space: nowrap;
}

.ctx-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--cream-200);
  overflow: hidden;
}

.ctx-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-300), var(--mint-400));
  transition: width 0.45s ease;
}

/* 上下文接近上限：进度条转暖色提醒 */
.ctx-bar-fill.warn {
  background: linear-gradient(90deg, var(--yellow-100), var(--coral));
}

.ctx-detail {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--brown-400);
  text-align: right;
  word-break: break-all; /* 超长数字等式折行，不溢出卡片 */
}

.ctx-cost {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ctx-cost-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown-800);
  white-space: nowrap;
}

.ctx-open-hint {
  align-self: flex-end;
  margin-top: -0.2rem;
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  opacity: 0.62;
  transition: opacity 160ms ease, transform 160ms ease;
}

.ctx-block:hover .ctx-open-hint,
.ctx-block:focus-visible .ctx-open-hint {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* 开销金额变动：短暂上浮 + 薄荷高亮的呼吸提示（由 JS 在金额变化时挂 .bump） */
.ctx-cost-value.bump {
  animation: cost-bump 0.8s ease-out;
}

@keyframes cost-bump {
  0%   { color: var(--brown-800); transform: translateY(0) scale(1); }
  30%  { color: var(--mint-400); transform: translateY(-2px) scale(1.08); }
  100% { color: var(--brown-800); transform: translateY(0) scale(1); }
}

/* ---------- 7. Main / Thread ---------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.thread {
  flex: 1;
  overflow-y: auto;
  padding: 1.6rem 1.25rem 1rem;
  scroll-behavior: smooth;
}

/* 回到底部：悬浮于聊天框上缘右侧，离开底部时出现（淡入上浮）。
   按钮是 .composer（不滚动）的子元素，因此不随消息内容滚动。
   默认不可见（opacity + visibility + transform 过渡）：显示时淡入上浮，
   隐藏时下沉淡出；visibility 由过渡自动延迟（隐藏在动画结束后才真正不可见，
   同时阻止隐藏态被聚焦/点击）。 */
.jump-bottom {
  position: absolute;
  right: 0.9rem;
  bottom: calc(100% + 0.55rem);
  z-index: 5;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--mint-200);
  color: var(--mint-500);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.jump-bottom.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.jump-bottom:hover {
  border-color: var(--mint-300);
  color: var(--mint-400);
  background: var(--mint-50);
}

.jump-bottom:active {
  transform: translateY(1px) scale(0.94);
}

/* 滚动条观感：正文与侧栏共用一套（奶油圆角细条，悬停加深） */
.thread,
.rail {
  scrollbar-width: thin;
  scrollbar-color: var(--cream-300) transparent;
}

.thread::-webkit-scrollbar,
.rail::-webkit-scrollbar {
  width: 10px;
}

.thread::-webkit-scrollbar-thumb,
.rail::-webkit-scrollbar-thumb {
  background: var(--cream-300);
  border-radius: 5px;
}

.thread::-webkit-scrollbar-thumb:hover,
.rail::-webkit-scrollbar-thumb:hover {
  background: var(--brown-300);
}

/* 空状态：请坐 */
.empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem 0;
}

.empty-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  color: var(--brown-800);
  letter-spacing: 0.02em;
}

.empty-sub {
  color: var(--brown-500);
  font-size: 0.95rem;
}

.empty-host {
  margin-top: 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.5rem;
  max-width: 30rem;
  box-shadow: var(--shadow-soft);
}

.empty-host .host-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown-800);
}

.empty-host .host-desc {
  font-size: 0.88rem;
  color: var(--brown-600);
  margin-top: 0.25rem;
}

.empty-host .host-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brown-400);
  margin-top: 0.5rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--cream-300);
  border-radius: 999px;
  background: var(--cream-50);
}

.sug {
  margin-top: 0.8rem;
}

.sug-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--brown-400);
  margin-bottom: 0.6rem;
}

.sug-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.sug-chip {
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: 999px;
  color: var(--brown-600);
  font-size: 0.82rem;
  padding: 0.4em 1em;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.sug-chip:hover {
  border-color: var(--mint-300);
  color: var(--mint-500);
  background: var(--mint-50);
}

/* 场景（ScenarioPrompt）选择卡片：只有新建对话时才出现 */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.8rem;
  max-width: 660px;
  margin: 1.3rem auto 0;
  text-align: left;
}

.pick-card {
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.pick-card:hover {
  border-color: var(--mint-300);
  background: var(--mint-50);
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.pick-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown-700);
}

.pick-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--brown-500);
  line-height: 1.55;
  margin-top: 0.25rem;
}

.pick-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brown-400);
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}

/* ---------- 8. Messages ---------- */
.msg {
  margin-bottom: 1.3rem;
}

.msg-inner {
  width: var(--thread-w);
  margin-inline: auto;
}

/* 用户：右侧气泡。msg-user 复用正文的 --thread-w 居中容器，
   气泡在容器内靠右 → 气泡右缘与正文右缘精确对齐，不再贴 thread 边缘 */
.msg-user {
  display: flex;
  justify-content: flex-end;
  width: var(--thread-w);
  margin-inline: auto;
}

.msg-user .msg-inner {
  margin-inline: 0;
  width: fit-content;
  max-width: min(62%, var(--thread-w));
  /* 纵向堆叠：气泡在上、操作条在下，整体靠右与气泡右缘对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.msg-bubble {
  background: var(--mint-100);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  padding: 0.7rem 1rem;
  color: var(--brown-700);
  font-size: 0.96rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 助手：直接在奶油底色上排版（无气泡），思维流是它的名片 */
.msg-assistant .msg-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Agent 回复操作：透明 SVG 图标；悬停 / 按下时只出现轻量半透明底色。 */
.response-actions {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin-top: 0.08rem;
}

.response-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  box-shadow: none;
  color: rgba(93, 78, 55, 0.56);
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.1s ease;
}

.response-action:hover,
.response-action:focus-visible {
  color: var(--brown-700);
  background: rgba(126, 200, 184, 0.16);
}

.response-action:active {
  background: rgba(126, 200, 184, 0.28);
  transform: scale(0.94);
}

.response-action:focus-visible {
  outline: 2px solid rgba(126, 200, 184, 0.42);
  outline-offset: 1px;
}

.response-action.copied {
  color: var(--mint-500);
  background: rgba(126, 200, 184, 0.2);
}

.response-action:disabled {
  opacity: 0.34;
  cursor: default;
  transform: none;
  background: transparent;
}

.response-action::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 0.38rem);
  transform: translate(-50%, 0.18rem);
  padding: 0.22rem 0.48rem;
  border-radius: 0.42rem;
  background: rgba(93, 78, 55, 0.9);
  color: var(--cream-50);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.response-action:hover::after,
.response-action:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.response-action:disabled::after {
  display: none;
}

/* 用户气泡操作条：默认隐身，悬停该条消息或键盘聚焦时才显现，
   避免每条用户消息下方常驻两个图标干扰对话阅读节奏。 */
.user-actions {
  align-self: flex-end;
  margin-top: 0.1rem;
}

.msg-user .user-actions {
  opacity: 0;
  transition: opacity 0.16s ease;
}

.msg-user:hover .user-actions,
.msg-user .user-actions:focus-within {
  opacity: 1;
}

/* 触屏无 hover：常驻显示，否则按钮无法触达 */
@media (hover: none) {
  .msg-user .user-actions {
    opacity: 1;
  }
}

/* 降低动效偏好：去掉淡入过渡，直接切换 */
@media (prefers-reduced-motion: reduce) {
  .msg-user .user-actions {
    transition: none;
  }
}

.clipboard-fallback {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* 轮次分隔线：模型每完成一次「思考→回应/工具」即分一轮 */
.round-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 0.1rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.round-divider::before,
.round-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cream-300);
}

.round-divider-label {
  white-space: nowrap;
}

.content {
  font-size: 0.98rem;
  line-height: 1.72;
  /* 流式期间正文是裸文本节点（textContent 追加），必须 pre-wrap 才能实时
     显示换行。幽灵行盒（marked 块级元素之间的换行文本节点）由 JS 的
     stripWhitespaceNodes() 在最终渲染时移除，不再依赖 white-space 规避 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--brown-700);
}

.content:empty {
  display: none;
}

/* NDJSON 实时文本：每个可见 Unicode 字素独立淡入；动画结束后 JS 会把
   span 还原为普通文本节点，最终 Markdown 装订不会残留逐字包装。 */
.stream-char {
  display: inline-block;
  animation: stream-char-in 180ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
  will-change: opacity, transform, filter;
}

@keyframes stream-char-in {
  from {
    opacity: 0;
    transform: translateY(0.18em);
    filter: blur(1.4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.image-generation-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brown-500);
  font-size: 0.78rem;
}

.image-generation-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mint-400);
  box-shadow: 0 0 0 0 rgba(126, 200, 184, 0.42);
  animation: generated-image-pulse 1.25s ease-out infinite;
}

.image-generation-status.done .image-generation-dot {
  animation: none;
  background: var(--mint-500);
}

@keyframes generated-image-pulse {
  70% { box-shadow: 0 0 0 0.42rem rgba(126, 200, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 200, 184, 0); }
}

.generated-image {
  align-self: flex-start;
  max-width: min(100%, 42rem);
  margin: 0;
}

.generated-image-link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  background: var(--cream-100);
  box-shadow: var(--shadow-soft);
}

.generated-image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.generated-image-caption {
  margin-top: 0.32rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

.generated-image.error .generated-image-link {
  min-width: 15rem;
  min-height: 7rem;
  border-style: dashed;
}

/* Markdown 排版（marked 输出） */
.content p {
  margin: 0.25rem 0;
  white-space: normal;
}

.content p:first-child {
  margin-top: 0;
}

.content ul,
.content ol {
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}

/* marked 对条目间带空行的列表会输出多个独立 <ul>（每个条目一个容器），
   相邻列表之间不再叠加外边距，条目间距统一由 li 控制（与嵌套条目一致） */
.content ul + ul,
.content ol + ol {
  margin-top: 0;
}

/* 列表项：只保留项与项之间的单侧间距，行高随正文走，条目紧凑成行 */
.content li {
  margin-top: 0.14rem;
  white-space: normal;
}

.content li:first-child {
  margin-top: 0;
}

/* 松散列表：li 内含嵌套列表时，marked 会把外层文本包进 <p>。
   p 不贡献纵向 margin，条目间距统一由 li 控制 → 外层（实心圆点）条目
   与嵌套（空心圆圈）条目的行距保持一致 */
.content li > p {
  margin: 0;
}

.content li > p + p {
  margin-top: 0.25rem;
}

/* 嵌套子列表：与父条目文本保留小间距，但不向条目之间额外撑开行距 */
.content li > ul,
.content li > ol {
  margin: 0.2rem 0 0;
}

.content .hd {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
  color: var(--brown-800);
  white-space: normal;
}

.content blockquote {
  margin: 0.5rem 0;
  padding: 0.1rem 0.9rem;
  border-left: 3px solid var(--mint-200);
  color: var(--brown-500);
}

/* 水平线（markdown ---）：与「第n轮」分隔线同款浅色，替代浏览器默认深色粗线 */
.content hr {
  border: 0;
  border-top: 1px solid var(--cream-300);
  margin: 0.9rem 0;
}

.content table {
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.content th,
.content td {
  border: 1px solid var(--cream-300);
  padding: 0.3rem 0.6rem;
  text-align: left;
}

.content th {
  background: var(--cream-100);
}

.content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--mint-100);
  border: 1px solid var(--mint-200);
  border-radius: 6px;
  padding: 0.06em 0.35em;
  color: var(--mint-500);
}

.content pre {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.65;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--brown-600);
  box-shadow: var(--shadow-soft);
}

.content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* 隐式 CoT 摘要：紧凑思考轨迹。
   不使用大卡片、不提供展开入口，避免将简短动作标题误呈现为详细思维链。 */
.reasoning-summary {
  align-self: flex-start;
  max-width: min(100%, 44rem);
  padding: 0.08rem 0.2rem 0.12rem;
  color: var(--brown-400);
}

.reasoning-summary-head {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-bottom: 0.22rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--brown-400);
}

.reasoning-summary-spark {
  color: var(--mint-400);
  font-size: 0.78rem;
  line-height: 1;
}

.reasoning-summary.live .reasoning-summary-spark {
  color: var(--pink-300);
  animation: pulse 1.4s ease-in-out infinite;
}

.reasoning-summary-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-left: 0.3rem;
  padding-left: 0.72rem;
  border-left: 1px solid rgba(126, 200, 184, 0.42);
}

.reasoning-summary-item {
  position: relative;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(93, 78, 55, 0.68);
}

.reasoning-summary-dot {
  position: absolute;
  left: -0.9rem;
  top: 0.48em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--mint-300);
  box-shadow: 0 0 0 2px var(--cream-50);
}

.reasoning-summary-text {
  overflow-wrap: anywhere;
}

.reasoning-summary-text p {
  margin: 0;
}

.reasoning-summary-text strong {
  font-weight: 600;
  color: rgba(93, 78, 55, 0.82);
}

/* 思维流：悄悄话卡片（仅用于可见的详细 CoT） */
.thought {
  position: relative;
  border: 1px solid var(--mint-200);
  background: linear-gradient(90deg, rgba(184, 228, 216, 0.24), rgba(255, 252, 247, 0.72));
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
}

.thought.live {
  border-color: var(--mint-300);
  background: linear-gradient(90deg, rgba(126, 200, 184, 0.18), rgba(255, 252, 247, 0.66));
}

.thought-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--brown-400);
  margin-bottom: 0.25rem;
  /* 收起时头栏下边距随内容一起归零（与 grid 0fr 同节奏），避免下缘留白 > 上缘 */
  transition: margin-bottom 0.32s ease;
}

.thought-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--mint-300);
  flex-shrink: 0;
}

.thought.live .thought-dot {
  background: var(--pink-300);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 思维内容：grid 0fr↔1fr 动画收拢/展开（需要内部包装层撑高度）
   字体用正文（霞鹜臻楷）：轻柔浪漫 */
.thought-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s ease, opacity 0.32s ease;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.75;
  color: rgba(93, 78, 55, 0.72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.thought-body-inner {
  min-height: 0;
  overflow: hidden;
}

.thought.closed .thought-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* 收起态：头栏下边距归零，卡片上下留白重新对称（顶 0.5rem = 底 0.5rem） */
.thought.closed .thought-head {
  margin-bottom: 0;
}

/* 收放按钮：与「悄悄话」标题同一行，靠右对齐，带真实图标 */
.thought-foot {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: var(--white);
  border: 1px solid var(--mint-200);
  border-radius: 999px;
  color: var(--mint-500);
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.14em 0.7em;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.thought-foot:hover {
  border-color: var(--mint-300);
  color: var(--mint-400);
  background: var(--mint-50);
}

/* 工具调用：可展开的终端日志胶囊 */
.tool-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  row-gap: 0.15rem;
  max-width: 100%;
  margin: 0.16rem 0;
  padding: 0.26rem 0.6rem;
  border: 1px solid rgba(126, 200, 184, 0.48);
  border-radius: var(--radius-full);
  background: rgba(184, 228, 216, 0.35);
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 0 0 rgba(126, 200, 184, 0);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tool-chip.is-live {
  animation: tool-chip-in 260ms cubic-bezier(0.2, 0.78, 0.24, 1) backwards;
}

.tool-chip.is-status-updated {
  animation: tool-chip-status 460ms ease-out;
}

@keyframes tool-chip-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.97);
    filter: blur(1.6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes tool-chip-status {
  0% { box-shadow: 0 0 0 rgba(126, 200, 184, 0); }
  42% {
    box-shadow:
      0 0 0 3px rgba(126, 200, 184, 0.16),
      0 0 18px rgba(126, 200, 184, 0.42);
  }
  100% { box-shadow: 0 0 0 rgba(126, 200, 184, 0); }
}

.tool-chip:hover {
  color: var(--mint-500);
  background: rgba(232, 245, 240, 0.6);
  border-color: rgba(126, 200, 184, 0.68);
  box-shadow:
    0 0 0 2px rgba(126, 200, 184, 0.08),
    0 0 10px rgba(126, 200, 184, 0.28),
    0 0 20px rgba(126, 200, 239, 0.1);
  transform: translateY(-0.5px);
}

.tool-chip:active {
  transform: translateY(0) scale(0.985);
}

.tool-chip:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 3px;
  box-shadow:
    0 0 0 5px rgba(126, 200, 184, 0.16),
    0 0 22px rgba(126, 200, 184, 0.62);
}

.tool-chip[aria-expanded="true"] {
  color: var(--brown-800);
  border-color: var(--mint-300);
  background: var(--mint-50);
  box-shadow: 0 0 20px rgba(126, 200, 184, 0.5);
}

.tool-name {
  font-weight: 600;
  white-space: nowrap;
}

/* 工具结果：合并进卡片内，紧随工具名；长结果省略号截断（正文字体，平滑） */
.tool-result {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--brown-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
  min-width: 0;
}

.tool-result.is-entering {
  animation: tool-result-in 280ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

@keyframes tool-result-in {
  from {
    opacity: 0;
    transform: translateY(0.28rem);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.tool-result-mark {
  color: var(--mint-500);
  font-weight: 700;
}

.tool-result.fail .tool-result-mark {
  color: var(--coral);
}

.tool-result.fail {
  color: rgba(217, 106, 99, 0.85);
}

.tool-result.fallback {
  color: var(--brown-400);
}

/* App Blocks：宿主只有透明流式排版层；每个 iframe 本身就是一张内容卡片。 */
.app-block-flow {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.72rem;
  width: 100%;
  min-width: 0;
  margin: 0.2rem 0 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.app-block-card {
  display: block;
  flex: 1 1 19rem;
  align-self: flex-start;
  min-width: min(100%, 16rem);
  max-width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color-scheme: light;
  opacity: 1;
  transition: opacity 120ms ease;
}

.app-block-card:only-child {
  flex-basis: 100%;
  width: 100%;
}

.app-block-card.is-loading {
  opacity: 0;
  pointer-events: none;
}

.app-block-card:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
}

.subagent-body .app-block-flow {
  gap: 0.58rem;
  margin-block: 0.16rem 0.3rem;
}

@media (max-width: 640px) {
  .app-block-flow {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.58rem;
    margin-top: 0.14rem;
  }

  .app-block-card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-block-card {
    transition: none;
  }
}

/* ---------- Token 组分 Alert：ctx-block → 屏幕中心的上下文切片账本 ---------- */
.token-dialog {
  --token-origin-x: 0px;
  --token-origin-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  isolation: isolate;
}

.token-dialog[hidden] {
  display: none;
}

.token-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(61, 50, 37, 0.2);
  opacity: 0;
  backdrop-filter: blur(10px) saturate(0.88);
  -webkit-backdrop-filter: blur(10px) saturate(0.88);
  transition: opacity 280ms ease;
}

.token-dialog.show .token-dialog-backdrop {
  opacity: 1;
}

.token-dialog-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: min(84vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(126, 200, 184, 0.58);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 190px at 12% -10%, rgba(126, 200, 184, 0.18), transparent 68%),
    var(--card-bg);
  box-shadow:
    0 32px 86px rgba(61, 50, 37, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    0 0 46px rgba(126, 200, 184, 0.2);
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(var(--token-origin-x), var(--token-origin-y), 0) scale(0.12);
  transform-origin: center;
  will-change: transform, opacity, filter;
  transition:
    transform 360ms cubic-bezier(0.18, 0.84, 0.24, 1),
    opacity 240ms ease,
    filter 300ms ease;
}

.token-dialog.show .token-dialog-panel {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.token-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem 0.9rem;
  border-bottom: 1px solid rgba(240, 230, 214, 0.9);
}

.token-dialog-heading {
  min-width: 0;
}

.token-dialog-title {
  color: var(--brown-800);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
}

.token-dialog-sub {
  margin-top: 0.22rem;
  color: var(--brown-500);
  font-size: 0.72rem;
  line-height: 1.55;
}

.token-dialog-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--cream-300);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
  color: var(--brown-500);
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.token-dialog-close:hover {
  color: var(--mint-500);
  border-color: var(--mint-300);
  box-shadow: 0 0 14px rgba(126, 200, 184, 0.34);
  transform: rotate(90deg);
}

.token-dialog-close:focus-visible,
.token-dialog-body:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: -3px;
}

.token-ledger-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  padding: 0.65rem 1.2rem;
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  border-bottom: 1px dashed rgba(212, 196, 176, 0.62);
}

.token-ledger-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.token-ledger-legend i {
  width: 0.8rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(126, 200, 184, 0.18);
}

.token-ledger-legend .is-hit,
.token-ledger-bars .is-hit {
  background: rgba(203, 235, 225, 0.84);
}

.token-ledger-legend .is-miss,
.token-ledger-bars .is-miss {
  background: rgba(171, 221, 206, 0.72);
}

.token-ledger-legend .is-out,
.token-ledger-bars .is-out {
  background: rgba(126, 200, 184, 0.58);
}

.token-ledger-legend .is-free {
  background: rgba(254, 248, 241, 0.92);
  border-color: var(--cream-300);
}

.token-dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.8rem 1rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mint-200) transparent;
}

.token-dialog-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.token-dialog-body::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--mint-200);
}

.token-ledger {
  min-width: 860px;
}

.token-ledger-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) repeat(4, minmax(84px, 0.4fr)) minmax(88px, 0.44fr);
  align-items: center;
  gap: 0.55rem;
}

.token-ledger-columns {
  position: sticky;
  top: -0.8rem;
  z-index: 4;
  padding: 0.45rem 0.75rem 0.5rem;
  background: rgba(254, 248, 241, 0.95);
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.token-ledger-columns span:not(:first-child) {
  text-align: right;
}

.token-ledger-row {
  position: relative;
  z-index: 0;
  min-height: 4.5rem;
  margin-top: 0.45rem;
  padding: 0.7rem 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(212, 196, 176, 0.66);
  border-radius: var(--radius-sm);
  background: rgba(254, 248, 241, 0.84);
  box-shadow: 0 4px 14px rgba(93, 78, 55, 0.045);
  isolation: isolate;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.token-ledger-row:hover {
  border-color: rgba(126, 200, 184, 0.62);
  box-shadow: 0 8px 20px rgba(93, 78, 55, 0.08);
  transform: translateY(-1px);
}

.token-ledger-row.is-legacy {
  border-style: dashed;
}

.token-ledger-bars {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}

.token-ledger-bars span {
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.38) inset;
}

.token-ledger-copy,
.token-ledger-metric {
  min-width: 0;
}

.token-ledger-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.token-ledger-copy strong {
  overflow: hidden;
  color: var(--brown-800);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-ledger-copy small {
  overflow: hidden;
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-ledger-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.16rem;
  text-align: right;
}

.token-ledger-metric strong {
  color: var(--brown-800);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.token-ledger-metric small {
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

.token-ledger-empty {
  display: grid;
  place-items: center;
  min-height: 14rem;
  padding: 2rem;
  color: var(--brown-500);
  text-align: center;
}

.token-ledger-empty-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.65rem;
  border: 1px solid var(--mint-200);
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--mint-500);
  font-family: var(--font-mono);
}

.token-ledger-empty strong {
  color: var(--brown-700);
  font-size: 0.88rem;
}

.token-ledger-empty p {
  max-width: 34rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.6;
}

.token-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem 0.85rem;
  border-top: 1px solid rgba(240, 230, 214, 0.9);
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

@media (max-width: 640px) {
  .token-dialog {
    padding: 0.65rem;
  }

  .token-dialog-panel {
    max-height: min(90dvh, 760px);
    border-radius: var(--radius-md);
  }

  .token-dialog-head {
    padding: 0.85rem;
  }

  .token-ledger-legend {
    padding-inline: 0.85rem;
  }

  .token-dialog-body {
    padding-inline: 0.65rem;
  }

  .token-dialog-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
    padding-inline: 0.85rem;
  }
}

/* ---------- 工具调用详情 Alert：从胶囊光迹投影到屏幕中心 ---------- */
.tool-detail-dialog {
  --tool-origin-x: 0px;
  --tool-origin-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  isolation: isolate;
}

.tool-detail-dialog[hidden] {
  display: none;
}

.tool-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(61, 50, 37, 0.22);
  opacity: 0;
  backdrop-filter: blur(9px) saturate(0.9);
  -webkit-backdrop-filter: blur(9px) saturate(0.9);
  transition: opacity 280ms ease;
}

.tool-detail-dialog.show .tool-detail-backdrop {
  opacity: 1;
}

.tool-detail-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(780px, 100%);
  max-height: min(82vh, 720px);
  overflow: hidden;
  border: 1px solid rgba(126, 200, 184, 0.62);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 180px at 8% -12%, rgba(126, 200, 239, 0.18), transparent 66%),
    radial-gradient(360px 160px at 96% 0%, rgba(179, 161, 232, 0.13), transparent 64%),
    var(--card-bg);
  box-shadow:
    0 30px 80px rgba(61, 50, 37, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.68) inset,
    0 0 42px rgba(126, 200, 184, 0.24);
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(var(--tool-origin-x), var(--tool-origin-y), 0) scale(0.16);
  transform-origin: center;
  will-change: transform, opacity, filter;
  transition:
    transform 360ms cubic-bezier(0.18, 0.84, 0.24, 1),
    opacity 240ms ease,
    filter 300ms ease;
}

.tool-detail-dialog.show .tool-detail-panel {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.tool-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.15rem 0.9rem;
  border-bottom: 1px solid rgba(240, 230, 214, 0.92);
}

.tool-detail-glyph {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(126, 200, 184, 0.66);
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(126, 200, 184, 0.3);
}

.tool-detail-heading {
  min-width: 0;
}

.tool-detail-title {
  overflow: hidden;
  color: var(--brown-800);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-detail-meta {
  overflow: hidden;
  margin-top: 0.15rem;
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-detail-status {
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--yellow-200);
  border-radius: var(--radius-full);
  background: var(--yellow-50);
  color: var(--brown-600);
  font-size: 0.7rem;
  line-height: 1.45;
  white-space: nowrap;
}

.tool-detail-status[data-state="success"] {
  border-color: var(--mint-200);
  background: var(--mint-50);
  color: var(--mint-500);
}

.tool-detail-status[data-state="fail"] {
  border-color: rgba(217, 106, 99, 0.35);
  background: var(--coral-soft);
  color: var(--coral);
}

.tool-detail-status.is-updating {
  animation: tool-detail-status-in 320ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

@keyframes tool-detail-status-in {
  from {
    opacity: 0;
    transform: translateY(0.22rem) scale(0.96);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.tool-detail-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--cream-300);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: var(--brown-500);
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.tool-detail-close:hover {
  color: var(--mint-500);
  border-color: var(--mint-300);
  box-shadow: 0 0 14px rgba(126, 200, 184, 0.34);
  transform: rotate(90deg);
}

.tool-detail-close:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
}

.tool-detail-body {
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.18fr);
  flex: 1;
  min-height: 0;
  padding: 1rem;
  gap: 0.9rem;
  overflow: hidden;
}

.tool-detail-section {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 230, 214, 0.95);
  border-radius: var(--radius-sm);
  background: rgba(253, 251, 247, 0.8);
}

.tool-detail-input {
  display: flex;
  flex-direction: column;
}

.tool-detail-output {
  display: grid;
  grid-template-rows: minmax(92px, 0.42fr) minmax(160px, 1fr);
  min-height: 0;
  gap: 0.9rem;
  overflow: hidden;
}

.tool-detail-summary-section,
.tool-detail-json-section {
  display: flex;
  flex-direction: column;
}

.tool-detail-section-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 0.65rem 0.75rem 0.55rem;
  border-bottom: 1px solid rgba(240, 230, 214, 0.72);
}

.tool-detail-section-head h4 {
  color: var(--brown-600);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.tool-detail-json-size {
  margin-left: auto;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

.tool-detail-section-mark {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--mint-300);
  box-shadow: 0 0 8px rgba(126, 200, 184, 0.75);
}

.tool-detail-summary-section .tool-detail-section-mark {
  background: #7ec8ef;
  box-shadow: 0 0 8px rgba(126, 200, 239, 0.68);
}

.tool-detail-json-section .tool-detail-section-mark {
  background: var(--effort-purple);
  box-shadow: 0 0 8px rgba(179, 161, 232, 0.68);
}

.tool-detail-params {
  min-height: 0;
  overflow: auto;
  padding: 0.3rem 0.75rem 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mint-200) transparent;
}

.tool-detail-param {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.38fr) minmax(0, 0.62fr);
  gap: 0.7rem;
  padding: 0.62rem 0;
  border-bottom: 1px dashed rgba(212, 196, 176, 0.62);
}

.tool-detail-param:last-child {
  border-bottom: 0;
}

.tool-detail-param dt,
.tool-detail-param dd {
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tool-detail-param dt {
  color: var(--mint-500);
  font-weight: 600;
}

.tool-detail-param dd {
  color: var(--brown-700);
  white-space: pre-wrap;
}

.tool-detail-empty {
  padding: 0.8rem 0;
  color: var(--brown-400);
  font-size: 0.76rem;
}

.tool-detail-summary {
  min-height: 0;
  overflow: auto;
  padding: 0.7rem 0.8rem 0.8rem;
  color: var(--brown-700);
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--mint-200) transparent;
}

.tool-detail-json {
  min-height: 0;
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0.75rem 0.8rem 0.9rem;
  background: rgba(240, 250, 247, 0.42);
  color: var(--brown-800);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: var(--effort-purple) transparent;
}

.tool-detail-json:focus-visible {
  outline: 2px solid var(--effort-purple);
  outline-offset: -3px;
}

.tool-detail-params::-webkit-scrollbar,
.tool-detail-summary::-webkit-scrollbar,
.tool-detail-json::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.tool-detail-params::-webkit-scrollbar-thumb,
.tool-detail-summary::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--mint-200);
}

.tool-detail-json::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--effort-purple);
}

@media (max-width: 640px) {
  .tool-detail-dialog {
    padding: 0.65rem;
  }

  .tool-detail-panel {
    max-height: min(88dvh, 760px);
    border-radius: var(--radius-md);
  }

  .tool-detail-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.85rem;
  }

  .tool-detail-status {
    display: none;
  }

  .tool-detail-close {
    grid-column: 3;
  }

  .tool-detail-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 0.8fr) minmax(230px, 1.2fr);
    padding: 0.75rem;
    gap: 0.7rem;
    overflow: hidden;
  }

  .tool-detail-output {
    gap: 0.7rem;
  }
}

/* Web 挂起式提问（simple_question）：等待用户回答的问题卡片 */
.question-card {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 100%;
  background: var(--yellow-50);
  border: 1px solid var(--yellow-200);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  margin-top: 0.2rem;
}

.question-header {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #9a7626;
  opacity: 0.9;
  border-bottom: 1px dashed rgba(176, 137, 46, 0.35);
  padding-bottom: 0.35rem;
}

.question-text {
  font-size: 0.9rem;
  color: var(--brown-700);
  line-height: 1.55;
}

.question-text p {
  margin: 0.3rem 0;
}

.question-text p:first-child {
  margin-top: 0;
}

.question-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.question-choice-card {
  width: min(100%, 34rem);
}

.question-options {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.question-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.55);
  color: var(--brown-700);
  font-size: 0.84rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.question-option:hover,
.question-option:focus-within {
  border-color: var(--yellow-200);
  background: var(--card-bg);
  box-shadow: 0 0 0 2px rgba(255, 214, 153, 0.24);
}

.question-option-control {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--mint-500);
  cursor: pointer;
}

.question-option-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.question-custom-option {
  flex-wrap: wrap;
  cursor: default;
}

.question-custom-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.question-custom-input {
  flex: 1 1 13rem;
  margin-left: auto;
}

.question-input[aria-invalid="true"] {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(217, 106, 99, 0.14);
}

.question-choice-actions {
  justify-content: flex-end;
}

.question-options:disabled,
.question-option-control:disabled,
.question-option-control:disabled + .question-option-text {
  cursor: default;
}

.question-input {
  flex: 1;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  color: var(--brown-700);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.42rem 0.65rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.question-input:focus {
  border-color: var(--yellow-200);
  box-shadow: 0 0 0 3px rgba(255, 214, 153, 0.4);
}

.question-input:disabled {
  opacity: 0.55;
}

.question-btn {
  background: var(--yellow-100);
  border: 1px solid var(--yellow-200);
  border-radius: var(--radius-sm);
  color: #8a6420;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.42rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.question-btn:hover {
  background: var(--yellow-200);
  color: var(--brown-800);
}

.question-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 允许 / 拒绝确认卡片（confirm_interactive 工具，如高危命令确认）：
   与问题卡片共用基础布局，视觉上用警示色（珊瑚红）区分「等待确认」状态，
   按钮固定为「允许（薄荷绿）/ 拒绝（珊瑚红）」，无自由输入框。 */
.confirm-card {
  border-color: rgba(217, 106, 99, 0.45);
  background: var(--cream-50);
}

.confirm-card .question-header {
  color: var(--coral);
  border-bottom-color: rgba(217, 106, 99, 0.35);
}

/* 危险确认卡片（confirm 段携带 danger=True，如命中黑名单的高危命令）：
   加深红色警示，标题更醒目，配合危险横幅让用户一眼识别高风险操作。 */
.confirm-card.confirm-danger {
  border-color: var(--coral);
  border-width: 2px;
  background: rgba(217, 106, 99, 0.08);
}

.confirm-card.confirm-danger .question-header {
  color: var(--coral);
  font-weight: 700;
}

/* 危险提示横幅（confirm-danger-banner）：
   红色实底 + 白字，强对比强调不可逆风险，置于问题文本与命令代码框之间。 */
.confirm-danger-banner {
  margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.confirm-danger-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.confirm-danger-reason {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.95;
  overflow-wrap: anywhere;
}

/* 原始命令代码框（confirm 卡片内展示待确认命令）：
   等宽字体 + 浅色底 + 细边框，与正文区分开，便于核对后放行 */
.confirm-cmd {
  margin-top: 0.15rem;
}

.confirm-cmd-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--brown-400);
  margin-bottom: 0.25rem;
}

.confirm-cmd-box {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  background: var(--card-bg);
  border: 1px solid rgba(217, 106, 99, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--brown-700);
  box-shadow: var(--shadow-soft);
}

/* 确认卡片 header：method 徽章（左）+ 标题（flex 布局） */
.confirm-card .question-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* method 徽章（http_request 卡片左上角）：薄荷绿实底白字，小号等宽 */
.confirm-method-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--mint-500);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  line-height: 1.5;
}

/* 请求体代码框（http_request 卡片第三块）：大 JSON / hexdump 等高内容限高滚动 */
.confirm-body-box {
  max-height: 240px;
  overflow-y: auto;
}

.confirm-actions {
  flex-wrap: wrap;
}

.confirm-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 允许：薄荷绿主色（肯定操作） */
.confirm-btn.allow {
  background: var(--mint-100);
  border: 1px solid var(--mint-300);
  color: var(--mint-500);
}

.confirm-btn.allow:hover {
  background: var(--mint-200);
  border-color: var(--mint-400);
  color: var(--mint-500);
}

/* 拒绝：珊瑚红（风险操作） */
.confirm-btn.deny {
  background: var(--coral-soft);
  border: 1px solid rgba(217, 106, 99, 0.5);
  color: var(--coral);
}

.confirm-btn.deny:hover {
  background: rgba(217, 106, 99, 0.18);
  border-color: var(--coral);
  color: #b8534d;
}

/* 已自动授权的只读确认卡片（confirm 段携带 auto）：
   后端按全局权限策略（完全放行 / 审批模型自动批准）已就地给出结论，
   卡片只做审计留痕——按钮禁用、被采纳的一侧高亮，不再等待用户点击。 */
.confirm-card.confirm-auto {
  border-style: dashed;
}

.confirm-card.confirm-auto-allow {
  border-color: rgba(126, 200, 184, 0.55);
  background: var(--cream-50);
}

.confirm-card.confirm-auto-allow .question-header { color: var(--mint-500); }

.confirm-card.confirm-auto-deny {
  border-color: rgba(217, 106, 99, 0.5);
}

/* 完全放行：无人工确认即执行，始终以红色实线强警示 */
.confirm-card.confirm-auto-danger {
  border-style: solid;
  border-color: var(--coral);
  background: rgba(217, 106, 99, 0.06);
}

/* 决策横幅：谁批的 + 为什么，置于标题与命令详情之间 */
.confirm-auto-banner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(126, 200, 184, 0.14);
  border: 1px solid rgba(126, 200, 184, 0.4);
}

.confirm-auto-deny .confirm-auto-banner,
.confirm-auto-danger .confirm-auto-banner {
  background: rgba(217, 106, 99, 0.12);
  border-color: rgba(217, 106, 99, 0.45);
}

.confirm-auto-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mint-500);
}

.confirm-auto-deny .confirm-auto-badge,
.confirm-auto-danger .confirm-auto-badge { color: var(--coral); }

.confirm-auto-reason {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--brown-500, var(--brown-700));
  overflow-wrap: anywhere;
}

/* 被采纳的一侧：虽禁用但保留实色，让结论一眼可辨 */
.confirm-btn.is-chosen:disabled { opacity: 1; }

.confirm-btn.allow.is-chosen:disabled {
  background: var(--mint-200);
  border-color: var(--mint-400);
}

.confirm-btn.deny.is-chosen:disabled {
  background: rgba(217, 106, 99, 0.18);
  border-color: var(--coral);
}

.question-answer {
  font-size: 0.82rem;
  color: var(--mint-500);
  font-family: var(--font-mono);
  padding-top: 0.25rem;
  border-top: 1px dashed rgba(126, 200, 184, 0.4);
}

.question-card.answered {
  border-color: rgba(126, 200, 184, 0.45);
  background: var(--mint-50);
}

.question-card.cancelled {
  opacity: 0.6;
  border-color: var(--cream-300);
}



/* 系统便签（停止、新对话等） */
.note {
  width: var(--thread-w);
  margin: 0 auto 1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--brown-400);
  text-align: center;
}

/* 错误卡 */
.err {
  width: var(--thread-w);
  margin: 0 auto 1.3rem;
  border: 1px solid rgba(217, 106, 99, 0.45);
  background: var(--coral-soft);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
}

/* ---------- 工作目录选择器 / 网页文件夹浏览器 ---------- */
.cwd-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 2vw, 1.5rem);
  background: rgba(61, 50, 37, 0.42);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cwd-picker-overlay.visible { opacity: 1; }

.cwd-picker {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(980px, 100%);
  height: min(76vh, 680px);
  height: min(76dvh, 680px);
  min-height: 520px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid rgba(212, 196, 176, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(61, 50, 37, 0.2), var(--shadow-strong);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cwd-picker-overlay.visible .cwd-picker {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cwd-picker-close {
  position: absolute;
  z-index: 4;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--brown-500);
  background: rgba(255, 252, 247, 0.82);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.cwd-picker-close:hover {
  color: var(--brown-800);
  border-color: var(--mint-300);
  transform: rotate(5deg);
}

.cwd-picker-view {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  min-height: 0;
}

.cwd-picker-view[hidden],
.cwd-browser[hidden] { display: none; }

.cwd-picker-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2.2rem 1.65rem 1.45rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 8%, rgba(184, 228, 216, 0.5), transparent 34%),
    linear-gradient(155deg, var(--mint-50), #f8f4eb 68%);
  border-right: 1px solid var(--cream-300);
}

/* 左栏的竖向路径线是本组件的识别元素：默认位置像三个沿途停靠点。 */
.cwd-picker-sidebar::after {
  content: "";
  position: absolute;
  left: 2.65rem;
  top: 12.8rem;
  bottom: 9.2rem;
  width: 1px;
  background: linear-gradient(var(--mint-200), rgba(184, 228, 216, 0));
  pointer-events: none;
}

.cwd-picker-kicker {
  display: block;
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.cwd-picker-title {
  max-width: 13ch;
  margin-top: 0.5rem;
  color: var(--brown-800);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
}

.cwd-picker-sub {
  margin-top: 0.7rem;
  color: var(--brown-600);
  font-size: 0.8rem;
  line-height: 1.65;
}

.cwd-picker-section-title {
  margin: 1.55rem 0 0.55rem;
  color: var(--brown-500);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cwd-picker-quick-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cwd-picker-location,
.cwd-picker-open,
.cwd-picker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cwd-picker-location,
.cwd-picker-open {
  min-height: 3.4rem;
  padding: 0.52rem 0.62rem;
  background: rgba(255, 252, 247, 0.6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.cwd-picker-location:hover:not(:disabled),
.cwd-picker-open:hover {
  background: var(--cream-50);
  border-color: var(--mint-200);
  transform: translateX(2px);
}

.cwd-picker-location.active {
  background: var(--cream-50);
  border-color: var(--mint-300);
  box-shadow: 0 5px 16px rgba(91, 168, 152, 0.08);
}

.cwd-picker-location:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.cwd-picker-location-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  color: var(--mint-500);
  background: var(--mint-100);
  border: 1px solid var(--mint-200);
  border-radius: 11px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
}

.cwd-picker-open .cwd-picker-location-icon {
  color: #fff;
  background: var(--mint-400);
  border-color: var(--mint-400);
}

.cwd-picker-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.cwd-picker-label {
  overflow: hidden;
  color: var(--brown-700);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-picker-path {
  max-width: 100%;
  overflow: hidden;
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-picker-badge {
  flex: 0 0 auto;
  color: var(--brown-400);
  font-size: 0.64rem;
}

.cwd-picker-open-arrow,
.cwd-picker-item-arrow {
  flex: 0 0 auto;
  color: var(--mint-400);
  font-family: var(--font-mono);
}

.cwd-picker-selection {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  margin-top: auto;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 252, 247, 0.78);
  border: 1px solid rgba(184, 228, 216, 0.9);
  border-radius: var(--radius-sm);
}

.cwd-picker-selection-label {
  color: var(--brown-500);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.cwd-picker-selection-name {
  overflow: hidden;
  color: var(--brown-800);
  font-size: 0.9rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-picker-selection-path {
  overflow: hidden;
  color: var(--brown-500);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-picker-recents {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 2.2rem 1.45rem 1.2rem;
  background: var(--card-bg);
}

.cwd-picker-recents-head {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2.25rem 1rem 0.3rem;
  border-bottom: 1px solid var(--cream-300);
}

.cwd-picker-recents-title {
  margin-top: 0.25rem;
  color: var(--brown-800);
  font-size: 1rem;
  font-weight: 600;
}

.cwd-picker-count {
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.cwd-picker-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0.55rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 0.35rem 0.3rem 0.3rem;
  scrollbar-color: var(--mint-200) transparent;
  scrollbar-width: thin;
}

.cwd-picker-list::-webkit-scrollbar,
.cwd-browser-folders::-webkit-scrollbar { width: 8px; }

.cwd-picker-list::-webkit-scrollbar-thumb,
.cwd-browser-folders::-webkit-scrollbar-thumb {
  background: var(--mint-200);
  border-radius: var(--radius-full);
}

.cwd-picker-item {
  flex: 0 0 auto;
  min-height: 4.4rem;
  padding: 0.72rem 0.85rem;
  background: var(--state-block-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.cwd-picker-item .cwd-picker-location-icon {
  width: 0.55rem;
  height: 2.35rem;
  background: var(--cream-300);
  border: 0;
  border-radius: var(--radius-full);
}

.cwd-picker-item:hover,
.cwd-picker-item.active {
  background: var(--mint-50);
  border-color: var(--mint-300);
  transform: translateX(2px);
}

.cwd-picker-item.active .cwd-picker-location-icon { background: var(--mint-400); }

.cwd-picker-empty,
.cwd-browser-empty {
  display: grid;
  flex: 1 1 auto;
  place-content: center;
  place-items: center;
  min-height: 12rem;
  padding: 2rem;
  color: var(--brown-500);
  text-align: center;
}

.cwd-picker-empty-mark {
  color: var(--mint-300);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
}

.cwd-picker-empty strong,
.cwd-browser-empty strong {
  color: var(--brown-700);
  font-size: 0.9rem;
}

.cwd-picker-empty p,
.cwd-browser-empty p {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* 网页文件夹浏览器 */
.cwd-browser {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 0;
}

.cwd-browser-places {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 2.2rem 1.15rem 1.2rem;
  background: linear-gradient(165deg, var(--mint-50), #f7f1e7);
  border-right: 1px solid var(--cream-300);
}

.cwd-browser-places-title {
  margin: 0.4rem 0 1.1rem;
  color: var(--brown-800);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}

.cwd-browser-place-list,
.cwd-browser-root-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cwd-browser-roots-title {
  margin: 1.4rem 0 0.45rem;
  padding-left: 0.65rem;
  color: var(--brown-500);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.cwd-browser-root-list {
  min-height: 0;
  overflow-y: auto;
}

.cwd-browser-place {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  color: var(--brown-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.cwd-browser-place:hover:not(:disabled) {
  background: rgba(255, 252, 247, 0.85);
  border-color: var(--mint-200);
}

.cwd-browser-place:disabled { opacity: 0.42; cursor: not-allowed; }

.cwd-browser-place-glyph {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  color: var(--mint-500);
  background: var(--mint-100);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.cwd-browser-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 2.2rem 1.45rem 1rem;
}

.cwd-browser-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2.3rem 0.9rem 0.2rem;
}

.cwd-browser-title {
  max-width: 30ch;
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--brown-800);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-browser-meta {
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  white-space: nowrap;
}

.cwd-browser-address {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  padding: 0.75rem 0.2rem;
  border-top: 1px solid var(--cream-300);
  border-bottom: 1px solid var(--cream-300);
}

.cwd-browser-up,
.cwd-browser-go {
  color: var(--brown-600);
  background: var(--state-block-bg);
  border: 1px solid var(--cream-300);
  border-radius: 11px;
  cursor: pointer;
}

.cwd-browser-up:disabled { opacity: 0.4; cursor: not-allowed; }
.cwd-browser-up:hover:not(:disabled),
.cwd-browser-go:hover { color: var(--mint-500); border-color: var(--mint-300); }

.cwd-browser-go {
  padding: 0.4rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.cwd-browser-address-input {
  min-width: 0;
  padding: 0.48rem 0.72rem;
  color: var(--brown-700);
  background: var(--cream-50);
  border: 1px solid var(--cream-300);
  border-radius: 11px;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.73rem;
}

.cwd-browser-address-input:focus { border-color: var(--mint-300); }

.cwd-browser-status {
  align-self: start;
  margin: 1rem 0.2rem;
  padding: 0.8rem 1rem;
  color: var(--brown-500);
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: 12px;
  font-size: 0.78rem;
}

.cwd-browser-status[hidden] { display: none; }
.cwd-browser-status.is-error { color: #a64f49; background: var(--coral-soft); border-color: rgba(217, 106, 99, 0.35); }

.cwd-browser-folders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.55rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 0.3rem 0.3rem 0.2rem;
  scrollbar-color: var(--mint-200) transparent;
  scrollbar-width: thin;
}

.cwd-browser-folder {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  min-height: 4.2rem;
  padding: 0.65rem 0.75rem;
  color: inherit;
  text-align: left;
  background: var(--state-block-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.cwd-browser-folder:hover {
  background: var(--mint-50);
  border-color: var(--mint-300);
  transform: translateY(-1px);
}

.cwd-browser-folder-glyph {
  position: relative;
  width: 2rem;
  height: 1.45rem;
  background: var(--mint-200);
  border-radius: 5px 7px 7px 7px;
}

.cwd-browser-folder-glyph::before {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: -0.3rem;
  width: 0.85rem;
  height: 0.42rem;
  background: var(--mint-200);
  border-radius: 5px 5px 0 0;
}

.cwd-browser-folder-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cwd-browser-folder-name,
.cwd-browser-folder-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cwd-browser-folder-name { color: var(--brown-700); font-size: 0.84rem; font-weight: 600; }
.cwd-browser-folder-path { color: var(--brown-500); font-family: var(--font-mono); font-size: 0.62rem; }
.cwd-browser-folder-arrow { color: var(--mint-400); font-family: var(--font-mono); }

.cwd-browser-folders > .cwd-browser-empty { grid-column: 1 / -1; }

.cwd-picker-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 4.4rem;
  padding: 0.75rem 1.35rem;
  background: rgba(255, 252, 247, 0.92);
  border-top: 1px solid var(--cream-300);
}

.cwd-picker-btn {
  min-width: 5.5rem;
  padding: 0.48rem 1.1rem;
  color: var(--brown-600);
  background: var(--state-block-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.cwd-picker-btn:hover:not(:disabled) { color: var(--mint-500); border-color: var(--mint-300); }
.cwd-picker-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cwd-picker-btn-primary {
  color: #fff;
  background: var(--mint-400);
  border-color: var(--mint-400);
}

.cwd-picker-btn-primary:hover:not(:disabled) {
  color: #fff;
  background: var(--mint-500);
  border-color: var(--mint-500);
}

.cwd-picker button:focus-visible,
.cwd-picker input:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .cwd-picker-overlay { padding: 0; }
  .cwd-picker {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .cwd-picker-view,
  .cwd-browser { grid-template-columns: 1fr; overflow-y: auto; }
  .cwd-picker-sidebar,
  .cwd-browser-places {
    min-height: auto;
    padding: 1.5rem 1rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--cream-300);
  }
  .cwd-picker-sidebar::after { display: none; }
  .cwd-picker-title { max-width: none; padding-right: 2rem; }
  .cwd-picker-selection { margin-top: 1rem; }
  .cwd-picker-recents { min-height: 330px; padding: 1.1rem 0.8rem 0.8rem; }
  .cwd-picker-recents-head { padding-right: 2.3rem; }
  .cwd-browser-places { display: block; }
  .cwd-browser-place-list,
  .cwd-browser-root-list { flex-flow: row wrap; }
  .cwd-browser-place { width: auto; }
  .cwd-browser-roots-title { margin-top: 0.8rem; }
  .cwd-browser-main { min-height: 430px; padding: 1.1rem 0.8rem 0.8rem; }
  .cwd-browser-head { padding-right: 2.3rem; }
  .cwd-browser-folders { grid-template-columns: 1fr; }
  .cwd-picker-foot { min-height: 4rem; padding: 0.65rem 0.8rem; }
  .cwd-picker-btn { min-width: 0; padding-inline: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cwd-picker-overlay,
  .cwd-picker,
  .cwd-picker-location,
  .cwd-picker-open,
  .cwd-picker-item,
  .cwd-browser-folder { transition: none; }
}

.err-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #c45b55;
}

.err-detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(196, 91, 85, 0.8);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 0.3rem;
}

.err-retry {
  margin-top: 0.6rem;
  background: transparent;
  border: 1px solid rgba(217, 106, 99, 0.55);
  border-radius: 999px;
  color: var(--coral);
  font-size: 0.8rem;
  padding: 0.3em 1.1em;
}

.err-retry:hover {
  background: var(--coral-soft);
}

/* ---------- 9. Composer ---------- */
/* 整卡即输入框：textarea.png 为贴图皮肤（957×174 等比固定，永不形变），
   textarea 铺满贴图内部滚动；发送按钮悬浮在右下角。
   阴影用 filter: drop-shadow 跟随贴图 alpha 边缘，挂在 ::before 上避免文字带影 */
.composer {
  position: relative;
  width: var(--thread-w); /* 与正文宽度平齐（thread-w 由消息区与卡片共用） */
  margin-inline: auto;
  margin-bottom: 1.25rem;
  aspect-ratio: 957 / 174;
  background: none;
  border: none;
  border-radius: 0;
  transition: transform 0.18s ease; 
  padding: 1.5rem 1rem;
}

.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/btn/textarea.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 20px rgba(93, 78, 55, 0.12));
  transition: filter 0.18s ease;
  pointer-events: none;
}

.composer:focus-within::before {
  filter: drop-shadow(0 6px 24px rgba(113, 129, 126, 0.22)) brightness(1.02);
}

.composer textarea {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  overflow-y: auto;
  background: transparent; /* 卡片即输入框：textarea 无独立底色，点击卡片即聚焦 */
  border: none;
  outline: none;
  color: var(--brown-700);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.95rem 4.2rem 0.95rem 1.05rem; /* 右侧留出悬浮按钮的空间 */
}

.composer textarea::placeholder {
  color: var(--brown-400);
}

/* 发送 / 停止：悬浮在卡片右下角 */
.btn-send,
.btn-stop {
  position: absolute;
  right: 1.8rem;
  bottom: 1.25rem;
  z-index: 1;
}

.btn-send {
  width: 4.4rem;
  padding: 0;
}

.btn-stop {
  font-size: 0.85rem;
  padding: 0.55em 1.15em;
}

/* 发送按钮左侧下方的小星星（shaded.png 37×36 等比，纯装饰）
   荧光：多层 drop-shadow 光晕，颜色取自星星自身米黄调（#C0C080 系） */
.composer-star {
  position: absolute;
  right: 6.2rem;   /* 发送按钮（right 0.75rem + 宽 4.4rem）左侧留 ~0.75rem 间距 */
  bottom: 1.5rem;  /* 略低于发送按钮底缘（0.75rem），呈「左下方」位 */
  width: 1.55rem;
  aspect-ratio: 37 / 36;
  background-image: url("../img/star/shaded.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(224, 200, 130, 0.3))
          drop-shadow(0 0 12px rgba(224, 200, 130, 0.1));
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .topbar {
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
  }

  .controls {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--cream-300);
    padding-top: 0.5rem;
  }

  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "rail" "main" "agent";
    padding: 0;
  }

  /* 移动端：悬浮卡片转为顶部横条，保持圆角与阴影 */
  .rail {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0.9rem 0;
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .rail-block:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .rail-title {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .btn-new {
    width: 9.5rem;
    padding: 0;
    border-radius: 0;
  }

  .conv-list {
    flex-direction: row;
    gap: 0.4rem;
  }

  /* 移动端：列表横向滚动，不套用桌面端「列表独占滚动」规则 */
  .rail-convs {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* 移动端：底部工具条随 rail 内边距收窄 */
  .rail-tools {
    margin: 0 -0.9rem -0.6rem;
    padding: 0.6rem 0.9rem 0.55rem;
  }

  /* 移动端横向滚动：分组保持整组滚动，组间用左侧间距分隔 */
  .conv-group {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  .conv-group + .conv-group {
    margin-top: 0;
    margin-left: 0.6rem;
  }

  .conv-group-label {
    flex-shrink: 0;
  }

  .conv-item {
    min-width: 12rem;
    max-width: 16rem;
  }

  .conv-main {
    padding-right: 0.75rem;
  }

  .conv-preview {
    display: none;
  }

  .thread {
    padding: 1.1rem 0.9rem 0.8rem;
  }

  /* 移动端：右栏转为底部横条（与左栏同语言），卡片横向滚动；
     状态卡在移动端强制隐藏（横条布局空间有限），避免挤占对话区 */
  .agent-rail {
    flex-direction: row;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0 0.9rem 0.7rem;
    scrollbar-width: thin;
  }

  .agent-rail::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .agent-rail-top {
    flex-direction: row;
    flex: 0 0 auto;
    gap: 0.6rem;
    overflow: visible;
  }

  .agent-card {
    min-width: 235px;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-md);
  }

  .agent-progress-card {
    display: none; /* 状态卡：移动端隐藏 */
  }

  .agent-avatar {
    width: 3.4rem;
    height: 3.4rem;
  }

  .agent-tools-list {
    max-height: 3.6rem;
  }

  .ctx-bar-fill {
    transition: none; /* 横条场景不做宽度动画 */
  }

  .msg-user .msg-inner {
    max-width: 84%;
  }

  .composer {
    width: auto;
    margin: 0 0.9rem 0.6rem;
    border-radius: 0;
    box-shadow: none;
  }

  .composer textarea {
    /* 高度由贴图比例（aspect-ratio）决定，textarea 铺满内部滚动 */
  }

  .btn-send {
    width: 3.6rem;
  }

  .composer-star {
    right: 5.1rem; /* 跟随缩小后的发送按钮 */
  }

  .btn-stop {
    padding: 0.62em 1em;
  }
}

/* 中等屏（窄桌面 / 平板横屏）：对话区优先，右栏下沉为底部横条
   （左栏保持竖栏并收窄，三栏仅在大屏保留） */
@media (min-width: 761px) and (max-width: 1200px) {
  .shell {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "rail main"
      "agent agent";
  }

  .agent-rail {
    flex-direction: row;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 0.9rem;
  }

  .agent-rail-top {
    flex-direction: row;
    flex: 0 0 auto;
    gap: 0.6rem;
    overflow: visible;
  }

  .agent-card {
    min-width: 240px;
    padding: 0.9rem 1rem;
  }

  .agent-progress-card {
    display: none; /* 状态卡：中等屏隐藏 */
  }

  .agent-tools-list {
    max-height: 3.6rem;
  }
}

/* 尊重减少动态偏好：停止脉冲，缩短过渡 */
@media (prefers-reduced-motion: reduce) {
  .thought.live .thought-dot,
  .reasoning-summary.live .reasoning-summary-spark {
    animation: none;
  }

  .stream-char,
  .tool-chip.is-live,
  .tool-chip.is-status-updated,
  .tool-result.is-entering,
  .tool-detail-status.is-updating {
    animation: none !important;
    filter: none !important;
  }

  /* 星穹：彩虹流动降级为静态渐变，粒子特效不飞散 */
  .effort-btn[data-step="5"],
  .effort-pop[data-step="5"] .effort-pop-name,
  .effort-stops span:nth-child(5) {
    animation: none;
  }

  /* 覆盖层隐藏，露出静态彩虹轨道 */
  .effort-track-rainbow {
    display: none !important;
  }

  .effort-btn[data-step="5"] .effort-dot,
  .effort-pop[data-step="5"] .effort-thumb-vis {
    animation: none;
  }

  /* 开销金额动画：减少动态偏好时禁用 */
  .ctx-cost-value.bump {
    animation: none;
  }

  /* 模型弹窗：免费徽章脉冲 / 切换文字淡入禁用 */
  .model-badge-free,
  .model-name {
    animation: none;
  }

  .effort-burst,
  .effort-burst-ring,
  .effort-burst-p,
  .effort-burst-star,
  .effort-burst-comet,
  .effort-stardust,
  .effort-flash,
  .effort-aura {
    display: none;
  }

  * {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 子代理卡片（subagent 流段）：独立对话循环的工作过程实时展示 */
.subagent-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid rgba(126, 200, 184, 0.35);
  border-left: 3px solid var(--mint-500);
  border-radius: var(--radius-sm);
  background: rgba(184, 228, 216, 0.12);
  padding: 0.55rem 0.7rem;
  margin: 0.35rem 0;
  min-width: 0;
}

.subagent-card.error {
  border-left-color: var(--coral);
}

.subagent-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.subagent-badge {
  color: var(--mint-500);
  font-size: 0.8rem;
  line-height: 1;
}

.subagent-title {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--mint-500);
  letter-spacing: 0.04em;
}

.subagent-task {
  font-size: 0.78rem;
  color: var(--brown-500);
  white-space: pre-wrap;
  word-break: break-word;
}

.subagent-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.subagent-result {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--brown-500);
  border-top: 1px dashed rgba(126, 200, 184, 0.35);
  padding-top: 0.4rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.subagent-result-mark {
  color: var(--mint-500);
  font-weight: 700;
}

/* 收起 / 展开按钮：无边框纯箭头，hover 薄荷变色（与 todo-toggle 同视觉语言） */
.subagent-toggle {
  flex: none;
  margin-left: auto;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--brown-500);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.subagent-toggle:hover {
  color: var(--mint-400);
  opacity: 0.9;
}

/* 收起态：隐藏工作过程，仅保留标题行 / 任务描述 / 结果摘要 */
.subagent-card.collapsed .subagent-body {
  display: none;
}

/* ---- 状态卡：计划任务 ----
   任务以柔和阴影的独立卡片呈现；不再用左侧高饱和绿边、状态角标或内部编号。 */
.schedule-toggle {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brown-500);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
}

.schedule-toggle:hover { color: var(--mint-400); }

.schedule-collapse {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.schedule-collapse > * {
  min-height: 0;
  overflow: hidden;
}

.state-block.collapsed .schedule-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.15rem 0.3rem 0.35rem;
  padding: 0;
  list-style: none;
}

.schedule-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(212, 196, 176, 0.82);
  border-radius: var(--radius-sm);
  background: var(--cream-50);
  box-shadow: 0 5px 16px rgba(93, 78, 55, 0.075);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.schedule-card:hover,
.schedule-card:focus-within {
  border-color: rgba(126, 200, 184, 0.72);
  box-shadow: 0 8px 20px rgba(93, 78, 55, 0.11);
  transform: translateY(-1px);
}

.schedule-card-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.75rem 0.65rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.schedule-card-main:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: -3px;
}

.schedule-prompt {
  overflow-wrap: anywhere;
  color: var(--brown-800);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.schedule-meta,
.schedule-next-time {
  margin-top: 0.2rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.schedule-next-time { color: var(--brown-500); }

.schedule-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.52rem;
}

.schedule-countdown {
  min-width: 0;
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: nowrap;
}

.schedule-progress-track {
  height: 0.34rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--cream-300);
}

.schedule-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint-200), var(--mint-400));
  transition: width 0.55s linear;
}

.schedule-error {
  margin-top: 0.38rem;
  color: var(--coral);
  font-size: 0.68rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.schedule-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  grid-template-rows: 0fr;
  padding: 0 0.75rem;
  border-top: 1px solid transparent;
  opacity: 0;
  transition: grid-template-rows 0.22s ease, padding 0.22s ease, border-color 0.22s ease, opacity 0.16s ease;
}

.schedule-actions > * {
  min-height: 0;
  overflow: hidden;
}

.schedule-card.is-open .schedule-actions {
  grid-template-rows: 1fr;
  padding: 0.58rem 0.75rem 0.68rem;
  border-top-color: var(--cream-300);
  opacity: 1;
}

.schedule-action {
  min-width: 0;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.schedule-action:active { transform: translateY(1px); }
.schedule-action:disabled { cursor: wait; opacity: 0.55; }

.schedule-action-trigger {
  border: 1px solid var(--mint-300);
  background: var(--mint-50);
  color: var(--mint-500);
}

.schedule-action-trigger:hover:not(:disabled) { background: var(--mint-100); }

.schedule-action-cancel {
  border: 1px solid rgba(217, 106, 99, 0.4);
  background: var(--coral-soft);
  color: var(--coral);
}

.schedule-action-cancel:hover:not(:disabled) { background: rgba(217, 106, 99, 0.16); }

.schedule-action-hint {
  grid-column: 1 / -1;
  color: var(--brown-400);
  font-size: 0.68rem;
  line-height: 1.5;
}

/* ---------- 模型连接源管理（设置） ---------- */
.source-dialog {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.source-dialog[hidden],
.source-shared-fields[hidden],
.source-append-summary[hidden],
.source-mode-back[hidden] {
  display: none;
}

.source-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(61, 50, 37, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.source-dialog.show .source-dialog-backdrop { opacity: 1; }

.source-dialog-panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.source-dialog.show .source-dialog-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.source-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1rem;
  border-bottom: 1px dashed var(--cream-300);
}

.source-dialog-kicker {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.source-dialog-head h3 {
  color: var(--brown-800);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
}

.source-dialog-head p {
  margin-top: 0.25rem;
  color: var(--brown-400);
  font-size: 0.76rem;
}

.source-dialog-content {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(470px, 1.45fr);
  overflow: hidden;
}

.source-list-section,
.source-form {
  min-height: 0;
  padding: 1.1rem 1.25rem 1.25rem;
}

.source-list-section {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, var(--cream-50), rgba(255, 255, 255, 0.7));
  border-right: 1px dashed var(--cream-300);
}

.source-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.source-section-title h4 {
  color: var(--brown-700);
  font-size: 0.9rem;
  font-weight: 600;
}

.source-section-title > span,
.source-section-title > div > span {
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.source-form-heading { align-items: flex-start; }

.source-mode-back,
.source-add-model,
.source-group-add,
.source-card-action {
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-full);
  background: var(--mint-50);
  color: var(--mint-500);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.source-mode-back {
  flex: none;
  padding: 0.38rem 0.68rem;
  font-size: 0.68rem;
}

.source-mode-back:hover,
.source-add-model:hover:not(:disabled),
.source-group-add:hover,
.source-card-action:hover:not(:disabled) {
  border-color: var(--mint-300);
  background: var(--mint-100);
}

.source-list {
  flex: 1 1 auto;
  min-height: 100px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-right: 0.3rem;
}

.source-list-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 1rem;
  border: 1px dashed var(--cream-300);
  border-radius: var(--radius-sm);
  color: var(--brown-400);
  font-size: 0.76rem;
  line-height: 1.7;
  text-align: center;
  white-space: pre-line;
}

.source-list-empty.is-loading { color: var(--mint-500); }
.source-list-empty.is-error { color: #a84e43; }

.source-group {
  overflow: hidden;
  flex: none;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 16px rgba(92, 73, 49, 0.05);
}

.source-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.72rem 0.75rem 0.42rem;
}

.source-group-heading { min-width: 0; }

.source-group-name {
  display: block;
  overflow: hidden;
  color: var(--brown-800);
  font-size: 0.82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-group-endpoint {
  display: block;
  overflow: hidden;
  margin-top: 0.18rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  padding: 0 0.75rem 0.58rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.source-group-meta > span {
  padding: 0.16rem 0.38rem;
  border-radius: var(--radius-full);
  background: var(--cream-100);
}

.source-group-meta .source-item-key {
  background: var(--mint-50);
  color: var(--mint-500);
}

.source-delete,
.source-model-delete,
.source-edit,
.source-model-edit {
  flex: none;
  border: 1px solid var(--cream-300);
  background: transparent;
  color: var(--brown-400);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

/* 编辑入口：与删除同族形状，用品牌绿区分语义（中性 → 绿，删除 → 红） */
.source-group-actions,
.source-model-row-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
}

.source-edit-group,
.source-model-edit {
  min-height: 27px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.62rem;
}

.source-edit:hover:not(:disabled),
.source-model-edit:hover:not(:disabled) {
  border-color: var(--mint-300);
  background: var(--mint-50);
  color: var(--mint-500);
}

.source-edit:disabled,
.source-model-edit:disabled {
  cursor: wait;
  opacity: 0.45;
}

.source-edit:focus-visible,
.source-model-edit:focus-visible {
  outline: 2px solid var(--mint-300);
  outline-offset: 2px;
}

/* 编辑模型时本地 ID 只读：弱化底色，提示不可改 */
.source-model-grid input.is-readonly {
  background: var(--cream-100);
  color: var(--brown-400);
  cursor: not-allowed;
}

.source-clear-key {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  color: var(--brown-500);
  font-size: 0.66rem;
}

.source-clear-key input { accent-color: #c9776a; }

.source-delete-group {
  min-height: 27px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.62rem;
}

.source-model-delete {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

.source-delete:hover:not(:disabled),
.source-model-delete:hover:not(:disabled),
.source-remove-model:hover:not(:disabled) {
  border-color: #e7aaa0;
  background: #fff2ef;
  color: #a84e43;
}

.source-delete:disabled,
.source-model-delete:disabled {
  cursor: wait;
  opacity: 0.45;
}

.source-group-models {
  display: flex;
  flex-direction: column;
  border-top: 1px dashed var(--cream-300);
  border-bottom: 1px dashed var(--cream-300);
}

.source-model-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 0.7rem;
}

.source-model-row + .source-model-row { border-top: 1px solid var(--cream-200); }
.source-model-row-info { min-width: 0; }

.source-model-row-info strong,
.source-model-row-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-model-row-info strong {
  color: var(--brown-700);
  font-size: 0.72rem;
  font-weight: 600;
}

.source-model-row-info span {
  margin-top: 0.16rem;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.57rem;
}

.source-group-no-model {
  padding: 0.65rem 0.75rem;
  color: var(--brown-400);
  font-size: 0.68rem;
}

.source-group-add {
  width: calc(100% - 1.4rem);
  margin: 0.58rem 0.7rem 0.65rem;
  padding: 0.38rem 0.6rem;
  font-size: 0.68rem;
}

.source-form {
  overflow-y: auto;
  background: rgba(255, 253, 249, 0.45);
}

.source-form-grid,
.source-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem 0.85rem;
}

.source-vision-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 0.72rem;
  color: var(--brown-600);
  font-size: 0.75rem;
  cursor: pointer;
}

.source-vision-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--mint-500);
}

.source-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--brown-600);
  font-size: 0.72rem;
}

.source-field-wide { grid-column: 1 / -1; }
.source-field small { color: var(--brown-400); font-weight: 400; }

.source-field input,
.source-field select {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0.48rem 0.62rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--white);
  color: var(--brown-700);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.source-field input:focus,
.source-field select:focus,
.source-card-action:focus-visible,
.source-add-model:focus-visible,
.source-group-add:focus-visible,
.source-delete:focus-visible,
.source-model-delete:focus-visible,
.source-mode-back:focus-visible {
  border-color: var(--mint-300);
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 200, 184, 0.15);
}

.source-field input.is-duplicate {
  border-color: #d96a63;
  background: #fff8f6;
}

.source-append-summary {
  display: grid;
  gap: 0.22rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--mint-200);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--mint-50), rgba(255, 255, 255, 0.8));
}

.source-append-summary strong {
  color: var(--brown-800);
  font-size: 0.8rem;
}

.source-append-summary > span {
  overflow: hidden;
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-append-summary .source-append-meta { color: var(--mint-500); }

.source-model-editor {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--cream-300);
}

.source-models-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}

.source-models-head > div {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.source-models-head h5 {
  color: var(--brown-700);
  font-size: 0.82rem;
}

.source-models-head span {
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.source-add-model {
  padding: 0.4rem 0.7rem;
  font-size: 0.68rem;
}

.source-add-model:disabled,
.source-card-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.source-model-cards {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.source-model-card {
  padding: 0.72rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 4px 14px rgba(92, 73, 49, 0.04);
}

.source-model-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.62rem;
}

.source-model-card-title {
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.source-model-card-actions { display: flex; gap: 0.35rem; }

.source-card-action {
  min-width: 48px;
  padding: 0.3rem 0.55rem;
  font-size: 0.64rem;
}

.source-remove-model {
  border-color: var(--cream-300);
  background: transparent;
  color: var(--brown-400);
}

.source-price {
  margin-top: 0.68rem;
  border: 1px dashed var(--cream-300);
  border-radius: var(--radius-sm);
  background: var(--cream-50);
}

.source-price summary {
  padding: 0.52rem 0.65rem;
  color: var(--brown-500);
  font-size: 0.68rem;
  cursor: pointer;
  user-select: none;
}

.source-price summary:focus-visible {
  outline: 2px solid var(--mint-300);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.source-price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0.1rem 0.65rem 0.68rem;
}

.source-form-status {
  min-height: 1.3rem;
  padding-top: 0.55rem;
  color: #a84e43;
  font-size: 0.72rem;
}

.source-form-status.is-ok { color: var(--mint-500); }
.source-form-status.is-loading { color: var(--brown-400); }

.source-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.35rem;
}

.source-form-foot p {
  max-width: 340px;
  color: var(--brown-400);
  font-size: 0.66rem;
  line-height: 1.5;
}

.source-submit {
  flex: none;
  min-width: 132px;
  padding: 0.52rem 1rem;
  border: 1px solid var(--mint-300);
  border-radius: var(--radius-full);
  background: var(--mint-100);
  color: var(--mint-500);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.16s ease;
}

.source-submit:hover:not(:disabled) {
  background: var(--mint-50);
  transform: translateY(-1px);
}

.source-submit:focus-visible {
  outline: 2px solid var(--mint-300);
  outline-offset: 2px;
}

.source-submit:disabled {
  cursor: wait;
  opacity: 0.55;
}

.source-list,
.source-form,
.source-model-cards {
  scrollbar-width: thin;
  scrollbar-color: var(--mint-200) transparent;
}

.source-list::-webkit-scrollbar,
.source-form::-webkit-scrollbar,
.source-model-cards::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.source-list::-webkit-scrollbar-thumb,
.source-form::-webkit-scrollbar-thumb,
.source-model-cards::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--mint-200);
}

.source-list::-webkit-scrollbar-thumb:hover,
.source-form::-webkit-scrollbar-thumb:hover,
.source-model-cards::-webkit-scrollbar-thumb:hover {
  background: var(--mint-300);
}

@media (max-width: 840px) {
  .source-dialog { padding: 0.6rem; }
  .source-dialog-panel { max-height: 94vh; }
  .source-dialog-content { display: block; overflow-y: auto; }
  .source-list-section { border-right: 0; border-bottom: 1px dashed var(--cream-300); }
  .source-list { max-height: 310px; }
  .source-form { overflow: visible; }
}

@media (max-width: 560px) {
  .source-dialog { padding: 0; }
  .source-dialog-panel { width: 100%; max-height: 100dvh; border-radius: 0; }
  .source-dialog-head { padding: 0.9rem 1rem 0.8rem; }
  .source-dialog-head p { max-width: 260px; }
  .source-list-section,
  .source-form { padding: 0.9rem 0.85rem 1rem; }
  .source-section-title,
  .source-models-head { align-items: stretch; flex-direction: column; }
  .source-mode-back,
  .source-add-model { width: 100%; }
  .source-form-grid,
  .source-model-grid { grid-template-columns: 1fr; }
  .source-field-wide { grid-column: auto; }
  .source-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-form-foot { align-items: stretch; flex-direction: column; }
  .source-submit { width: 100%; }
}

/* ---------- 设置 Tabs / Skill 管理 ---------- */
.settings-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.65rem 1.25rem 0;
  border-bottom: 1px dashed var(--cream-300);
}

.settings-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.7rem;
  background: transparent;
  color: var(--brown-400);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
}

.settings-tab:hover,
.settings-tab.is-active {
  color: var(--mint-500);
}

.settings-tab.is-active { border-bottom-color: var(--mint-400); }
.settings-tab:focus-visible { outline: 2px solid var(--mint-300); outline-offset: -2px; }
.settings-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.settings-panel > .source-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
}
.settings-panel[hidden] { display: none; }

.skill-settings-panel {
  overflow-y: auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

/* ---------- 权限管理面板（设置 → 权限管理） ---------- */

.perm-settings-panel {
  overflow-y: auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.perm-settings-panel .skill-settings-head > span.is-danger { color: var(--coral); font-weight: 700; }

.perm-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.perm-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.perm-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.perm-option:hover { border-color: var(--mint-300); }

.perm-option:has(input:checked) {
  border-color: var(--mint-400);
  background: rgba(126, 200, 184, 0.08);
}

.perm-option input { margin-top: 0.25rem; flex: 0 0 auto; }

.perm-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.perm-option-title { color: var(--brown-700); font-size: 0.82rem; font-weight: 600; }
.perm-option-desc { color: var(--brown-400); font-size: 0.72rem; line-height: 1.6; }

/* ⚠ 完全放行：整块红字警示，选中时红色高亮，避免误开 */
.perm-danger-text { color: var(--coral) !important; }
.perm-option-danger { border-color: rgba(217, 106, 99, 0.4); }
.perm-option-danger:hover { border-color: var(--coral); }
.perm-option-danger:has(input:checked) {
  border-color: var(--coral);
  border-width: 2px;
  background: rgba(217, 106, 99, 0.08);
}

.perm-model-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  opacity: 0.5;
  transition: opacity 0.18s ease;
}

.perm-model-field.is-active { opacity: 1; }
.perm-model-field > span { color: var(--brown-700); font-size: 0.78rem; font-weight: 600; }
.perm-model-field small { color: var(--brown-400); font-size: 0.68rem; line-height: 1.55; }

.perm-model-field select {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--brown-700);
  background: var(--card-bg);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  max-width: 460px;
}

.perm-model-field select:disabled { cursor: not-allowed; }

.skill-settings-head,
.skill-install-foot,
.skill-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.skill-settings-head { margin-bottom: 0.8rem; }
.skill-settings-head h4 { color: var(--brown-700); font-size: 0.9rem; }
.skill-settings-head p { max-width: 680px; margin-top: 0.22rem; color: var(--brown-400); font-size: 0.72rem; line-height: 1.55; }
.skill-settings-head code,
.skill-install-foot code { font-family: var(--font-mono); font-size: 0.68rem; }
.skill-settings-head > span { color: var(--brown-400); font-family: var(--font-mono); font-size: 0.64rem; }

.skill-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.7rem;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.skill-item {
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.82);
}
.skill-item-info { min-width: 0; }
.skill-item-name { display: block; color: var(--brown-800); font-family: var(--font-mono); font-size: 0.76rem; }
.skill-item-description { display: block; overflow: hidden; margin-top: 0.25rem; color: var(--brown-500); font-size: 0.72rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.skill-item-meta { overflow: hidden; margin-top: 0.55rem; color: var(--brown-400); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }

.skill-install-form {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px dashed var(--cream-300);
}
.skill-file-field { display: grid; gap: 0.35rem; color: var(--brown-600); font-size: 0.76rem; }
.skill-file-field input { max-width: 100%; color: var(--brown-500); font-size: 0.72rem; }
.skill-install-foot { align-items: center; margin-top: 0.7rem; }
.skill-install-foot p { color: var(--brown-400); font-size: 0.68rem; line-height: 1.45; }

/* ---------- 输入框 / Skill 选择器 ---------- */
/* 「/」唤出的 Skill 抽屉：锚在输入框左缘（贴合 `/` 的落点），像一片云从
   左下角舒展开——奶油渐变底 + 薄荷极细边 + 柔影，与贴图输入框同一套语言，
   不再是硬描边的下拉面板。 */
.skill-slash-menu {
  position: absolute;
  z-index: 8;
  left: 1.6rem;
  bottom: calc(100% + 0.4rem);
  width: min(432px, calc(100% - 3rem));
  max-height: 272px;
  overflow-y: auto;
  padding: 0.36rem 0.4rem 0.42rem;
  border: 1px solid rgba(184, 228, 216, 0.55);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(254, 248, 241, 0.97)),
    var(--card-bg);
  box-shadow:
    0 10px 32px rgba(93, 78, 55, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-300) transparent;
  animation: skill-slash-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.skill-slash-menu::-webkit-scrollbar { width: 6px; }
.skill-slash-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cream-300); }
.skill-slash-menu::-webkit-scrollbar-track { background: transparent; }

@keyframes skill-slash-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* 抽屉抬头：左标题 + 右键盘提示（把 ↑↓ / Enter / Esc 这些隐藏操作显性化） */
.skill-slash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  padding: 0.3rem 0.55rem 0.4rem;
  border-bottom: 1px dashed rgba(240, 230, 214, 0.95);
}
.skill-slash-title {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--brown-600);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.skill-slash-title::before {
  content: "✦";
  color: var(--mint-300);
  font-size: 0.72rem;
  line-height: 1;
}
.skill-slash-hint {
  color: var(--brown-400);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  white-space: nowrap;
}

.skill-slash-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--brown-600);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
/* 选项星标：纯 CSS 圆形徽标，跨两行占据左列 */
.skill-slash-option::before {
  content: "✦";
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.06rem;
  border-radius: 50%;
  background: var(--mint-100);
  color: var(--mint-400);
  font-size: 0.68rem;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
/* 选中指示：左侧薄荷竖条（高度过渡，不做位移闪动） */
.skill-slash-option::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.16rem;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mint-300), var(--mint-200));
  transform: translateY(-50%);
  transition: height 0.18s ease;
}
.skill-slash-option strong {
  color: var(--brown-800);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.35;
  transition: color 0.16s ease;
}
.skill-slash-option span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.16rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--brown-400);
  font-size: 0.67rem;
  line-height: 1.5;
}
.skill-slash-option:hover { background: rgba(232, 245, 240, 0.6); }
.skill-slash-option.is-active {
  background: linear-gradient(100deg, var(--mint-50), rgba(255, 249, 240, 0.72));
  transform: translateX(2px);
}
.skill-slash-option.is-active::after { height: 56%; }
.skill-slash-option.is-active::before {
  background: var(--mint-200);
  color: var(--mint-500);
  transform: scale(1.05);
}
.skill-slash-option.is-active strong { color: var(--mint-500); }
.skill-slash-option:focus-visible { outline: 2px solid var(--mint-300); outline-offset: -2px; }

.skill-slash-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.7rem;
  color: var(--brown-400);
  font-size: 0.72rem;
  text-align: center;
}
.skill-slash-empty::before {
  content: "✦";
  color: var(--brown-300);
  font-size: 0.7rem;
  line-height: 1;
}
.skill-slash-empty.is-loading::before {
  color: var(--mint-300);
  animation: skill-slash-pulse 1.1s ease-in-out infinite;
}
.skill-slash-empty.is-error { color: var(--coral); }
.skill-slash-empty.is-error::before { content: "!"; color: var(--coral); font-family: var(--font-mono); }

@keyframes skill-slash-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* 选中挂牌：贴在输入框左上角的一枚薄荷小牌，柔和渐变 + 星标，
   出现时淡入微缩放；textarea 的上内边距做过渡，避免正文瞬移。 */
.composer-skill-chip {
  position: absolute;
  z-index: 2;
  top: 0.58rem;
  left: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  max-width: calc(100% - 6.5rem);
  padding: 0.2rem 0.32rem 0.2rem 0.52rem;
  border: 1px solid rgba(184, 228, 216, 0.7);
  border-radius: var(--radius-full);
  background: linear-gradient(120deg, var(--mint-50), var(--cream-200));
  box-shadow: 0 2px 8px rgba(126, 200, 184, 0.18);
  color: var(--mint-500);
  font-size: 0.64rem;
  animation: composer-chip-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.composer-skill-chip::before {
  content: "✦";
  color: var(--mint-300);
  font-size: 0.66rem;
  line-height: 1;
}
.composer-skill-chip-label {
  color: var(--brown-400);
  font-size: 0.6rem;
  white-space: nowrap;
}
.composer-skill-chip-name {
  overflow: hidden;
  max-width: 15rem;
  color: var(--mint-500);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-skill-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: var(--brown-400);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.composer-skill-chip button:hover { background: var(--coral-soft); color: var(--coral); }
.composer-skill-chip button:focus-visible { outline: 2px solid var(--mint-300); outline-offset: 1px; }

@keyframes composer-chip-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.composer textarea { transition: padding-top 0.2s ease; }
.composer.has-manual-skill textarea { padding-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .skill-slash-menu,
  .composer-skill-chip { animation: none; }
  .skill-slash-option,
  .skill-slash-option::before,
  .skill-slash-option::after,
  .composer textarea { transition: none; }
  .skill-slash-option.is-active { transform: none; }
  .skill-slash-empty.is-loading::before { animation: none; opacity: 1; }
}

@media (max-width: 560px) {
  .settings-tabs { padding-inline: 0.85rem; }
  .skill-settings-panel { padding: 0.9rem 0.85rem 1rem; }
  .skill-list { grid-template-columns: 1fr; max-height: 250px; }
  .skill-install-foot { align-items: stretch; flex-direction: column; }
  /* 窄屏：抽屉贴齐输入框两侧，键盘提示让位 */
  .skill-slash-menu { left: 0.85rem; width: calc(100% - 1.7rem); max-height: 232px; }
  .skill-slash-hint { display: none; }
  .composer-skill-chip { max-width: calc(100% - 5.4rem); }
  .composer-skill-chip-name { max-width: 9.5rem; }
}