/* ================================================================
   Layout — Grid structure: sidebar + main area.
   ================================================================ */

body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto;   /* 文档可超高，滚动由窗口承担 */
}

/* ═══ Sidebar ═══ */
#sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  border-right: 1px solid var(--rule);
  min-height: 0;
  overflow: hidden;
  /* 文档滚动时侧栏吸附视口顶部 */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
}

/* 桌面端侧栏收起/展开动画：列宽与位移同速（200ms），侧栏左滑出窗 / 右滑入窗，
   主区边缘始终贴着侧栏右缘（justify-self:start + 定宽，列收缩时盒不缩、配合 translateX(-100%) 精确滑出）。
   收起态保留 visibility:hidden 延迟翻转变换结束后生效，避免离屏按钮仍可被 Tab 聚焦。 */
@media (min-width: 769px) {
  body {
    transition: grid-template-columns var(--transition-normal);
  }

  /* 拖拽宽度手柄期间不得补间，否则宽度跟随会橡皮筋滞后 */
  body.sidebar-resizing {
    transition: none;
  }

  body.sidebar-collapsed {
    grid-template-columns: 0 1fr;
  }

  #sidebar {
    justify-self: start;
    width: var(--sidebar-width);
    transition: transform var(--transition-normal);
  }

  body.sidebar-collapsed #sidebar {
    transform: translateX(-100%);
    /* 与移动端抽屉一致：离屏即视为隐藏，不叠加 visibility（避免收起/展开两条规则不同吞掉补间）。
       注意：boot-intro 入场动画 fill:both 会压制 transform 补间，启动首秒内收起为瞬切（可接受）。 */
  }
}

#conversation-list {
  flex: 1;
  overflow-y: auto;
}

#sidebar-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
}

/* ═══ Main Area ═══ */
#main-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;   /* grid 子项默认 min-width:auto 会被内容撑宽导致横向溢出 */
  background: transparent;
  overflow: visible;   /* 文档滚动：内容自然流，不裁剪 */
  position: relative;
}

/* ═══ Chat Header（兼作窗口拖拽区；caption 按钮为原生 titleBarOverlay） ═══ */
#chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  /* 右侧为原生 caption 按钮（最小化/最大化/关闭 ≈ 138px）预留空间 */
  padding-right: calc(var(--space-xl) + 138px);
  min-height: 52px;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
  /* 文档滚动时吸附顶部 */
  position: sticky;
  top: 0;
  z-index: 8;
  /* 背景透明：模糊由镜像层（.blur-mirror）承担——透明材质窗口下
     backdrop-filter 静默失效（探针实证），改由克隆层 + filter:blur 实现真模糊。
     无分隔线等一切分层样式：标题栏经渐变模糊与正文融合（260812 用户方向） */
  background: transparent;
}

/* 可交互元素不响应拖拽 */
#chat-header button {
  -webkit-app-region: no-drag;
}

#header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  flex: 1;
}

/* ═══ Context Capacity Indicator ═══ */
.context-capacity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface-secondary);
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.context-capacity-indicator:hover {
  background: var(--surface-hover);
}
.context-capacity-indicator .capacity-label {
  font-weight: var(--fw-l4);
  pointer-events: none;
}
.context-capacity-indicator .capacity-value {
  font-weight: var(--fw-l4);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.context-capacity-indicator[data-level="medium"] .capacity-value {
  color: var(--accent);
}
.context-capacity-indicator[data-level="high"] {
  border-color: var(--error);
}
.context-capacity-indicator[data-level="high"] .capacity-value {
  color: var(--error);
}
.context-capacity-indicator[data-level="error"] {
  border-color: var(--error);
  /* 预混 token，不用 color-mix() 等新颜色函数（历史 html2canvas 兼容约束，风格沿用） */
  background: var(--error-bg);
}
.context-capacity-indicator[data-level="error"] .capacity-value {
  color: var(--error);
}

/* ── Capacity Popup ───────────────────────────────────────────── */
.capacity-popup {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md) var(--space-lg);
  animation: fade-in 0.12s ease;
}
.capacity-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: 4px 0;
  font-size: var(--fs-l3);
}
.capacity-popup-row + .capacity-popup-row {
  border-top: 1px solid var(--rule);
}
.capacity-popup-row .popup-label {
  color: var(--text-secondary);
}
.capacity-popup-row .popup-value {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.popup-error {
  color: var(--error) !important;
}
.capacity-popup-hint {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  padding: 4px 0 0;
  text-align: center;
}
.capacity-popup-live-hint {
  font-size: var(--fs-l4);
  color: var(--accent);
  padding: 4px 0 0;
  text-align: center;
}
.capacity-popup-bar {
  height: 4px;
  background: var(--surface-secondary);
  border-radius: 2px;
  margin-top: var(--space-sm);
  overflow: hidden;
}
.capacity-popup-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s ease;
}
.capacity-popup-bar-fill[style*="100%"] {
  background: var(--error);
}

.capacity-popup-compress-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 6px 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--fs-l5);
  font-weight: var(--fw-l4);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.capacity-popup-compress-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.capacity-popup-compress-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

#btn-toggle-sidebar {
  flex-shrink: 0;
}

/* ═══ Message Area (messages + floating bar) ═══ */
#message-area {
  flex: 1;
  display: flex;
  overflow: visible;   /* 文档滚动：内容自然流，不裁剪 */
  min-height: 0;
  position: relative;   /* 报告栏 sticky 定位基准 */
}

#message-list {
  flex: 1;
  min-width: 0;   /* flex 子项防内容撑宽 */
  overflow: visible;   /* 滚动由文档承担 */
  /* 只留顶部留白：底部 padding 会在 sticky 输入区（bottom:0）的约束边界处
     造成 12px 跳动——滚到底时 sticky 元素被 padding 盒底缘顶起 12px，回滚时又
     落回吸附位（260812 探针实证，幅度恰为 padding 值）。底部间隙由
     #input-area 自身 padding-top 承担。首页不滚动，另行补回底部留白。 */
  padding: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
}

/* ═══ Input Area ═══ */
#input-area {
  position: sticky;
  bottom: 0;
  margin-top: auto;   /* 内容不足一屏时把输入区压到底部 */
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  background: transparent;
  z-index: 10;
}

/* Unified card wrapping input row + mode bar */
/* 65% 卡片玻璃衬底（--surface-card-glass）：压住镜像模糊云提升打字可读性（260813
   用户方向），仍透 35% 保留模糊观感；衬底下方的模糊由镜像层（.blur-mirror）承担，
   卡片真身下方消息由 JS mask 隐藏防叠印 */
#input-card {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--surface-card-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: visible;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-md);
}

/* 跨页面输入卡 FLIP：真实卡与旧卡 ghost 都由 Web Animations 驱动；这里只
   提供合成层提示和 ghost 的稳定承载，不改变原卡的最终布局。 */
body.input-card-transitioning #input-card,
body.input-card-transitioning #project-input-card,
.input-card-transition-ghost {
  will-change: transform, opacity;
  transform-origin: top left;
}

.input-card-transition-ghost {
  z-index: 999;
  pointer-events: none;
  user-select: none;
  -webkit-app-region: no-drag;
}

@media (prefers-reduced-motion: reduce) {
  .input-card-transition-ghost { display: none !important; }
}

/* 输入卡镜像调色（仅输入卡；标题栏保持纯 blur）：作用于 65% --surface-card-glass
   衬底之下，亮白磨砂 / 暗黑磨砂；只影响克隆有内容的像素，消息间隙色调不变 */
#input-card .blur-mirror,
#project-input-card .blur-mirror {
  filter: var(--input-card-blur-filter);
}

/* 镜像模糊层：克隆消息内容 + filter:blur，裁剪为目标元素大小垫在最底。
   无衬底、无罩纱（标题栏为纯粹模糊；输入卡 260813 起加 65% --surface-card-glass
   玻璃衬底提升打字可读性，镜像层本身仍无衬底）：锐利真身由 JS 在覆盖区内
   mask 隐藏（blur-mirror.js _syncContentFade），克隆透明区下方不存在锐利
   内容，物理上杜绝双层叠印，因此衬底/罩纱可以整体删除，模糊云直接垫在
   窗口材质（mica/acrylic）上 */
.blur-mirror {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

.blur-mirror-inner {
  position: absolute;
  top: 0;
  filter: blur(16px);
  will-change: transform;
}

/* 标题栏渐变模糊：9 条克隆带，非线性半径曲线 blur = 1.2 + 22.8·t²（t=带位置
   1→0：24/18.7/14/10.1/6.9/4.4/2.6/1.6/1.2，260823 用户要求——相邻半径增量
   自底部 0.4px 到顶部 5.3px 逐步增加，替代原 ~1.5x 等比 24/16/11/7/4.5/3/
   2.2/1.6/1.2），顶部最糊、底部近清晰，与下方滚动内容自然衔接（progressive blur）。
   关键结构——阶梯打底而非互补三角窗（260813 波纹治理）：
   互补三角窗（α₁+α₂=1）在 Chromium source-over 合成下实际覆盖率是
   1-(1-α₁)(1-α₂)，交叉区中心（0.5/0.5）覆盖率仅 0.75，深色材质从缺口透出
   形成周期性暗带（纯白平板实验实证：振荡周期=三角窗周期，振幅 ±10%）——
   坡道形状（线性/smoothstep）无法修复。改为：每带在自身淡化区以下全不透明
   （给更锐利一带当基底，最底带 1px 全不透明垫底），覆盖率恒 1，
   淡化区退化为干净的 α·blurᵢ + (1-α)·blurᵢ₊₁ 两档 lerp，无暗带。
   层数 9：交叉淡化是两档模糊同时显影，宽带信号（文字/照片）
   上会显出双影轮廓；层越密、相邻档差异越小，双影越不可辨
   （PS 模糊画廊/模糊金字塔靠密集 mip 层 + 连续 LOD 插值达到同样效果）。 */
.blur-mirror-band {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* band-i：0→a 全不透明（上一带淡化区的基底），a→b smoothstep 坡出，b 以下透明。
   锚点（跟踪 260812 五带版的感知模糊剖面：栏腰保持足够模糊，近清晰只留
   最后 ~4%）：a/b = 0/15, 15/30, 30/45, 45/58, 58/70, 70/80, 80/88, 88/96——
   淡化区宽度随相邻半径差递减（顶部差 5.3px 用 15%，底部差 0.4px 用 6-8%） */
.blur-mirror-band--1 {
  mask-image: linear-gradient(to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.844) 3.75%, rgba(0, 0, 0, 0.5) 7.5%, rgba(0, 0, 0, 0.156) 11.25%,
    transparent 15%);
}

.blur-mirror-band--1 .blur-mirror-inner {
  filter: blur(24px);
}

.blur-mirror-band--2 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 15%,
    rgba(0, 0, 0, 0.844) 18.75%, rgba(0, 0, 0, 0.5) 22.5%, rgba(0, 0, 0, 0.156) 26.25%,
    transparent 30%);
}

.blur-mirror-band--2 .blur-mirror-inner {
  filter: blur(16px);
}

.blur-mirror-band--3 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 30%,
    rgba(0, 0, 0, 0.844) 33.75%, rgba(0, 0, 0, 0.5) 37.5%, rgba(0, 0, 0, 0.156) 41.25%,
    transparent 45%);
}

.blur-mirror-band--3 .blur-mirror-inner {
  filter: blur(11px);
}

.blur-mirror-band--4 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 45%,
    rgba(0, 0, 0, 0.844) 48.25%, rgba(0, 0, 0, 0.5) 51.5%, rgba(0, 0, 0, 0.156) 54.75%,
    transparent 58%);
}

.blur-mirror-band--4 .blur-mirror-inner {
  filter: blur(7px);
}

.blur-mirror-band--5 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 58%,
    rgba(0, 0, 0, 0.844) 61%, rgba(0, 0, 0, 0.5) 64%, rgba(0, 0, 0, 0.156) 67%,
    transparent 70%);
}

.blur-mirror-band--5 .blur-mirror-inner {
  filter: blur(4.5px);
}

.blur-mirror-band--6 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 64%,
    rgba(0, 0, 0, 0.844) 67.5%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.156) 74.5%,
    transparent 78%);
}

.blur-mirror-band--6 .blur-mirror-inner {
  filter: blur(3px);
}

.blur-mirror-band--7 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 78%,
    rgba(0, 0, 0, 0.844) 81%, rgba(0, 0, 0, 0.5) 84%, rgba(0, 0, 0, 0.156) 87%,
    transparent 90%);
}

.blur-mirror-band--7 .blur-mirror-inner {
  filter: blur(2.2px);
}

.blur-mirror-band--8 {
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 90%,
    rgba(0, 0, 0, 0.844) 92.5%, rgba(0, 0, 0, 0.5) 95%, rgba(0, 0, 0, 0.156) 97.5%,
    transparent 100%);
}

.blur-mirror-band--8 .blur-mirror-inner {
  filter: blur(1.6px);
}

/* 最底带：无 mask 全不透明垫底（栏底近清晰，与栏外内容连续），无淡化区 */
.blur-mirror-band--9 .blur-mirror-inner {
  filter: blur(1.2px);
}

/* 标题栏纯粹渐变模糊：9 条克隆带直接垫在窗口材质（mica/acrylic）上，
   .blur-mirror-fade 组做顶部 alpha 渐出（内容溶入材质），
   底部 blur(1.2px) 带与栏外清晰内容自然衔接。
   渐出为 smoothstep 形状、0→60% 长坡道（260813 用户反馈：旧 0→20% 短坡道
   只有 ~10px，20% 以下图像即全对比度显示，照片一路清晰可见到窗体边缘；
   加长后内容自下而上逐渐溶出，接近窗体边缘时基本溶进材质）。
   锐利真身由 JS 在覆盖区内逐 px mask 隐藏（blur-mirror.js _syncContentFade，
   与镜像滚动同步同一帧 rAF）——克隆透明区下方不存在任何锐利内容，物理上杜绝
   双层叠印，因此衬底/罩纱可以整体删除（260812 用户方向：纯粹模糊度+透明度变化）。
   历史教训：① 只对衬底/罩纱做 alpha 渐变会让锐利文字从克隆透明区直透（双层叠印）；
   ② 均匀 72% 罩纱会把模糊梯度压平到不可见。 */
.blur-mirror-fade {
  position: absolute;
  inset: 0;
  /* smoothstep 形状长坡道（与带内坡道同款 0.156/0.5/0.844 三 stop 近似），
     坡道【px 锚定】在栏顶 0→31.2px 完成、以下全不透明（= 原 52px 栏高 0→60%
     的绝对长度）——260823 镜像向下延伸 56px 做底缘梯度尾巴后，百分比 60%
     会被拉长成 65px（栏底 alpha 被压到 ~0.87，栏底出现变暗淡化带，用户实测
     仍有边界感）；px 锚定后延伸区不再受顶部渐出影响，栏底模糊梯度全强度呈现。
     历史教训（260813）：全高线性坡道会把栏底 alpha 压到 <1，材质从下半栏透出
     形成雾化带，且 alpha 急拉 + blur 降档 + 镜像硬裁剪三种突变叠在栏底窄带。 */
  mask-image: linear-gradient(to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.156) 7.8px, rgba(0, 0, 0, 0.5) 15.6px, rgba(0, 0, 0, 0.844) 23.4px,
    #000 31.2px, #000 100%);
}

/* 目标元素真实内容在镜像层之上（不参与克隆，无鬼影） */
#input-card > :not(.blur-mirror),
#chat-header > :not(.blur-mirror) {
  position: relative;
  z-index: 1;
}

/* 记忆/知识库视图无消息内容可镜像：回退纯色表面（镜像层同步隐藏）。
   首页保持透明：主页钉住视口无滚动内容、镜像克隆为空，透明后直接透出窗体
   材质（mica/acrylic），与会话视图「模糊云垫在材质上」的观感一致（260812 用户
   反馈：主页 --glass 灰卡 / 不透明顶栏与会话视图材质观感割裂）。 */
.memory-view-open #chat-header,
.kb-view-open #chat-header,
.mcp-skill-view-open #chat-header {
  background: var(--surface-primary);
}

#input-card:focus-within {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--accent-subtle);
}

/* ═══ Home Page ═══ */
/* 首页 ANSI 字符波浪背景：铺满 main-area 垫在所有内容之下，仅首页显示。
   width/height 100% 不可省——canvas 是替换元素，不设宽高时 inset 不拉伸、
   按属性像素尺寸作 CSS 尺寸显示；JS 把 backing store 设为 w×dpr 后，
   dpr>1（Windows 缩放 >100%）时浏览器再把画布放大 dpr 倍显示 → 全场模糊 */
#ascii-wave-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 项目视图与首页态可叠加（启动即首页 → 直接进项目）：进项目即撤除波浪背景 */
#main-area.is-home:not(.project-view-open):not(.aux-view-open) #ascii-wave-bg {
  display: block;
}

/* 首页输入卡背景模糊层：垫在波浪画布之上、输入卡之下（z-index:0 + DOM 序），
   overflow:hidden 按卡片圆角裁剪；内嵌画布带 20px 出血防模糊边缘暗角。
   显隐与逐帧定位由 AsciiWave._syncInputBlur 驱动（采样波浪离屏副本 + blur） */
#home-input-blur-wrap {
  display: none;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

#home-input-blur-wrap > canvas {
  position: absolute;
}

/* 首页：列表仅含输入区，flex 垂直居中（hero 在输入区内部）。
   主页把 main-area 钉为视口高，message-area/message-list 靠 flex 自然填满剩余高度，
   不写 calc(100vh - 52px) 这类魔数——头部实际高度（57px）与 min-height(52px) 的
   差值曾把文档撑出视口 5px，导致无内容时也出现滚动条。 */
#main-area.is-home {
  height: 100vh;
}

.is-home #message-list {
  justify-content: center;
  /* 首页钉住视口不滚动，无 sticky 边界问题，补回底部留白保持居中布局不变 */
  padding-bottom: var(--space-md);
}

.is-home #input-area {
  position: relative;
  bottom: auto;
  margin-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.is-home #input-card {
  width: 100%;
}

/* ═══ Home Page Hero ═══ */
#home-hero {
  display: none;
}

.is-home #home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  animation: fade-in 0.35s ease;
}

.hero-logo {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* 常驻形象行:输出消息末尾的下一行(输入区之上),48px,与消息列同宽对齐;
   状态由 js/companion.js 驱动;行内不含 .message,不进 blur-mirror 克隆;
   260823 起改为正常落在消息操作行下面一行(用户反馈——原 -26px 上提
   与操作行同一行会把操作钮挤右 56px,观感上按钮不对齐) */
.companion-row {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-xs);
  width: 100%;
  box-sizing: border-box;
}

.companion-row .companion-mascot {
  display: inline-block;
}

/* 首页:形象作为 doodle 居中守在输入框正上方(hero 区之上;装饰关闭时贴着输入卡) */
.is-home #companion-row {
  margin-top: 0;
  text-align: center;
}

.hero-tagline {
  font-size: var(--fs-l2);
  color: var(--text-tertiary);
}

#hero-chips {
  display: none;
}

.is-home #hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 560px;
  margin: var(--space-lg) auto 0;
  align-self: center;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--fs-l3);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.hero-chip:hover,
.hero-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.hero-chip:active {
  background: var(--surface-pressed);
  border-color: var(--accent);
  color: var(--accent);
}

.hero-chip svg {
  stroke: currentColor;
}

/* 首页 chips 入场：依次淡入上移（插入 DOM 时播放一次） */
.hero-chip {
  animation: chip-enter 240ms var(--ease-winui) backwards;
}

#hero-chips .hero-chip:nth-child(2) { animation-delay: 40ms; }
#hero-chips .hero-chip:nth-child(3) { animation-delay: 80ms; }
#hero-chips .hero-chip:nth-child(4) { animation-delay: 120ms; }

@keyframes chip-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-tagline::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--text-tertiary);
  vertical-align: -0.15em;
  animation: hero-caret-blink 1.1s steps(1) infinite;
}

@keyframes hero-caret-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tagline::after { animation: none; }
}

/* ═══ Slash command panel ═══ */
#slash-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 20;
  display: none;
}

.slash-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.slash-item:hover,
.slash-item.active {
  background: var(--surface-hover);
}

.slash-item:active {
  background: var(--surface-pressed);
}

.slash-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slash-item-name {
  font-size: var(--fs-l3);
  font-weight: 500;
}

.slash-item-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Row: attach btn · textarea · stop */
#input-row {
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm) var(--space-sm) 0 var(--space-sm);
  gap: var(--space-sm);
}

#message-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 6px 0;
  min-height: 24px;
}

#message-input::placeholder {
  color: var(--text-tertiary);
}

#message-input:disabled {
  color: var(--text-tertiary);
}

.input-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.input-action-btn:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.input-action-btn:active {
  background: var(--surface-pressed);
}

/* 上传回形针：hover 轻摆 */
#btn-attach:hover svg {
  transform: rotate(-8deg);
}

.btn-send-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.btn-send-circle:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

/* 发送箭头：hover 跃跃欲试 */
.btn-send-circle:hover svg {
  transform: translate(1px, -1px);
}

.btn-send-circle:disabled {
  background: var(--rule-strong);
  color: var(--text-tertiary);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-stop {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--error-bg);
  color: var(--error);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--error);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.btn-stop:hover {
  background: var(--error);
  color: #FFFFFF;
}

/* ═══ Input Card Footer (toggles + model + send) ═══ */
#input-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
}

#footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative; /* anchor for intensity panel */
}

.api-key-prompt {
  font-size: 12px;
  line-height: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.api-key-prompt .link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  margin-left: 2px;
}
.api-key-prompt .link-btn:hover {
  text-decoration: underline;
}

#footer-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mode-toggle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--surface-control);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.mode-toggle:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.mode-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.mode-toggle:active {
  background: var(--surface-pressed);
}

/* ═══ Icon button (base) ═══ */
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.icon-btn:active {
  background: var(--surface-pressed);
}

/* ═══ 图标微动效（hover 时图标本身的个性动画，与按钮底色互不干扰） ═══ */
.icon-btn svg,
.btn-new-chat svg,
.btn-send-circle svg,
.input-action-btn svg {
  transition: transform var(--transition-normal);
}

/* 设置齿轮：hover 缓慢旋转（WinUI 招牌细节） */
#btn-settings svg {
  transition: transform 500ms var(--ease-winui);
}
#btn-settings:hover svg {
  transform: rotate(60deg);
}

/* 搜索：hover 轻微放大 */
#btn-search-conv:hover svg {
  transform: scale(1.12);
}

/* ═══ Settings: Model Data Section ═══ */
.setting-section-divider {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-lg) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}
.sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.sync-status {
  font-size: 12px;
  color: var(--text-tertiary);
}
.btn-sm {
  font-size: 12px !important;
  padding: 4px 12px !important;
}

/* ═══ Settings: 同步进度步骤 ═══ */
.sync-steps {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sync-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-l5);
  color: var(--text-secondary);
  transition: color 0.2s;
}
.sync-step-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  box-sizing: border-box;
}
/* pending: hollow circle */
.sync-step[data-state="pending"] .sync-step-icon,
.sync-step:not([data-state]) .sync-step-icon {
  border-color: var(--rule);
}
/* active: spinning border */
.sync-step[data-state="active"] .sync-step-icon {
  border-color: var(--rule);
  border-top-color: var(--accent);
  animation: step-spin 0.6s linear infinite;
}
/* done: green check */
.sync-step[data-state="done"] .sync-step-icon {
  border-color: #107c10;
  background: #107c10;
}
.sync-step[data-state="done"] .sync-step-icon::after {
  content: '✓';
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
/* error: red cross */
.sync-step[data-state="error"] .sync-step-icon {
  border-color: #d13438;
  background: #d13438;
}
.sync-step[data-state="error"] .sync-step-icon::after {
  content: '✕';
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
/* active step text */
.sync-step[data-state="active"] {
  color: var(--text-primary);
}
/* done step text dims slightly */
.sync-step[data-state="done"] {
  color: var(--text-tertiary);
}
/* error step text stands out */
.sync-step[data-state="error"] {
  color: #d13438;
}

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

/* ═══ Settings: 背景材质选择 ═══ */
.material-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.material-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.material-option:hover {
  background: var(--surface-hover);
}

.material-option:active {
  transform: scale(0.98);
  background: var(--surface-pressed);
}

.material-option.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.material-option-name {
  font-size: var(--fs-l3);
  font-weight: 600;
  color: var(--text-primary);
}

.material-option.active .material-option-name {
  color: var(--accent);
}

.material-option-desc {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  line-height: 1.4;
}

#material-hint {
  margin-top: var(--space-xs);
}

/* ═══ Settings: API 供应商卡片 ═══ */
.provider-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.provider-empty {
  padding: var(--space-md);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-md);
}

/* 卡片质感参考 .material-option：--surface-card 衬底 + --rule 描边 */
.provider-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.provider-card:hover {
  background: var(--surface-hover);
}

.provider-card.disabled .provider-card-name,
.provider-card.disabled .provider-card-body {
  opacity: 0.55;
}

.provider-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.provider-card-name {
  font-size: var(--fs-l3);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.provider-card-url,
.provider-card-key {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-card-key {
  font-family: var(--font-mono);
}

.provider-card-foot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.provider-card-status {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态色与同步步骤（.sync-step）一致：绿=通，红=失败 */
.provider-card-status.ok { color: #107c10; }
.provider-card-status.fail { color: var(--error); }
.provider-card-status.testing { color: var(--text-secondary); }

.provider-card-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* 「+ 添加供应商」按钮（仿 .model-add-btn 的强调色文字按钮，卡片场景加虚线框） */
.provider-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: var(--space-sm);
  padding: 8px 14px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.provider-add:hover {
  background: var(--surface-secondary);
  border-color: var(--accent);
}

.provider-add svg {
  flex-shrink: 0;
}

/* 供应商弹层：测试状态文字居左占位（同 .cm-overwrite-note 的 margin-right:auto 布局） */
.pd-test-status {
  margin-right: auto;
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-test-status.ok { color: #107c10; }
.pd-test-status.fail { color: var(--error); }
.pd-test-status.testing { color: var(--text-secondary); }

#btn-provider-save:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ═══ Confirmation Dialog ═══ */
/* 确认层须压过同级 .modal-overlay（z-index:100）——供应商弹层「未接通不保存」确认从其上弹出 */
#confirm-overlay {
  z-index: 110;
}

.confirm-text {
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
  padding: var(--space-xl);
}

/* ═══ Conversation Lock Dialog（会话加密密码框） ═══ */
#conv-lock-dialog .confirm-text {
  padding-bottom: var(--space-md);
}

.conv-lock-hint {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 0 var(--space-xl);
  margin: 0 0 var(--space-md);
}

.conv-lock-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-xl) var(--space-md);
}

.conv-lock-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-control);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  outline: none;
}

.conv-lock-input:focus {
  border-color: var(--accent);
}

.conv-lock-error {
  font-size: var(--fs-l4);
  color: var(--error);
  padding: 0 var(--space-xl);
  margin: 0 0 var(--space-xs);
}

/* ═══ Buttons (shared) ═══ */
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition-fast);
}

.btn-accent:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  transition: all var(--transition-fast);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--surface-secondary);
}

.btn-ghost:active {
  background: var(--surface-pressed);
}

/* ═══ Settings Modal — Sidebar + Tabs ═══ */

.modal-with-sidebar {
  display: flex;
  position: relative;   /* 关闭按钮绝对定位锚点 */
  padding: 0 !important;
  width: 860px;
  max-width: 92vw;   /* 覆盖 .modal-panel 的 max-width:480px，窄窗口不溢出 */
  height: 600px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* 顶部 inset 高光 + 浮层深影，营造 WinUI 弹层质感 */
  box-shadow: inset 0 1px 0 var(--surface-top-highlight), var(--shadow-lg);
}

.modal-sidebar-wrapper {
  position: relative;
  /* No flex — let the overlay center this via its own flex */
}

.modal-close-float {
  position: absolute;
  top: -35px;
  right: 0px;
  z-index: 20;
  padding: 6px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-tertiary);
  background: var(--surface-card);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 12px;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}

.modal-close-float::after {
  content: '关闭';
}

.modal-close-float:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.modal-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--surface-modal-side);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: var(--space-md) 0;
}

/* 侧栏顶部「设置」标题（WinUI NavView Header） */
.modal-sidebar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.sidebar-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-sm);
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  position: relative;
  transition: all var(--transition-fast);
}

.settings-tab:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.settings-tab:active {
  transform: scale(0.98);
  background: var(--surface-pressed);
}

.settings-tab.active {
  background: var(--surface-hover);
  color: var(--text-primary);
  font-weight: 600;
}

/* WinUI NavView 选中指示条（切换时弹出动画） */
.settings-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
  animation: nav-pill-in 180ms var(--ease-winui);
}

@keyframes nav-pill-in {
  from { transform: translateY(-50%) scaleY(0.3); opacity: 0; }
  to   { transform: translateY(-50%) scaleY(1);   opacity: 1; }
}

/* Close button moved to .modal-close-float */

.modal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  overflow-y: auto;
  min-width: 0;
}

.settings-tab-content {
  display: none;
}

/* Tab 内容切换：淡入 + 上移（display none→block 时动画自然重放） */
.settings-tab-content.active {
  display: block;
  animation: settings-tab-in 200ms var(--ease-winui);
}

/* 关于页：撑满主区高度以便内容垂直居中 */
#settings-tab-about.active {
  display: flex;
  flex: 1;
}

@keyframes settings-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ About tab ═══ */

.about-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-2xl) 0;
}

/* 应用徽章：accent 渐变圆角方块 + 对话气泡 */
.about-app-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xs);
}

.about-app-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 版本号胶囊 */
.about-version-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 3px 12px;
}

.about-tagline {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ═══ Usage tab ═══ */

.usage-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) 0;
}

/* Placeholder / Loading / Error shared */
.usage-placeholder,
.usage-loading,
.usage-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl) 0;
}

.usage-placeholder-text,
.usage-loading-text,
.usage-error-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.usage-error-text {
  color: var(--error);
}

/* Status */
.usage-content {
  width: 100%;
}

.usage-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-lg);
  justify-content: flex-start;
}

.usage-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.usage-status-dot.available {
  background: var(--success);
}

.usage-status-dot.unavailable {
  background: var(--error);
}

.usage-status-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Balance Cards */
.usage-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.usage-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-modal-card);
}

.usage-card-header {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
}

.usage-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.usage-card-body {
  padding: var(--space-sm) var(--space-md);
}

.usage-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.usage-balance-row:last-child {
  border-bottom: none;
}

.usage-balance-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.usage-balance-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.usage-balance-value.total {
  font-weight: 600;
}

.usage-balance-value.granted {
  color: var(--text-tertiary);
}

/* Footer */
.usage-footer {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-end;
}

.usage-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Local usage stats (30-day cost chart + day detail) */
.usage-stats {
  width: 100%;
  border-top: 1px solid var(--rule);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
}

.usage-stats-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.usage-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.usage-total-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-modal-card);
}

.usage-total-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.usage-total-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--rule);
}

.usage-bar {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.usage-bar-fill {
  width: 100%;
  background: var(--rule-strong);
  border-radius: 1px 1px 0 0;
}

.usage-bar:hover .usage-bar-fill {
  background: var(--text-tertiary);
}

.usage-bar.selected .usage-bar-fill {
  background: var(--accent);
}

.usage-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: var(--space-md);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.usage-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}

.usage-detail-row:last-child {
  border-bottom: none;
}

.usage-detail-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.usage-detail-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.usage-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: var(--space-lg);
  line-height: 1.5;
}

.usage-rate-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.usage-rate-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.usage-rate-input {
  width: 90px;
}

/* ═══ Thinking Intensity Panel ═══ */

#research-tag-wrap {
  position: relative;
  display: flex;
}

#model-selector-wrap {
  position: relative;
  display: flex;
}

#model-selection-panel {
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}

.model-selection-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--transition-fast);
  white-space: nowrap;
}

/* 富信息选项：名称 + meta 行（上下文/价格/能力图标）两行布局 */
.model-selection-option.rich {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.model-option-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.model-option-stat {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.model-option-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.model-option-icon {
  display: inline-flex;
  color: var(--text-tertiary);
}

.model-selection-option.active .model-option-meta,
.model-selection-option.active .model-option-icon {
  color: var(--accent);
}

/* 「＋ 添加模型」按钮（浮窗顶部） */
.model-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 14px 8px;
  margin-bottom: 4px;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  transition: background var(--transition-fast);
}

.model-add-btn:hover {
  background: var(--surface-secondary);
}

.model-add-btn svg {
  flex-shrink: 0;
}

/* 自定义模型选项：删除小按钮（hover 显现） */
.model-selection-option.custom {
  position: relative;
}

.model-option-delete {
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.model-selection-option.custom:hover .model-option-delete {
  opacity: 1;
}

.model-option-delete:hover {
  background: var(--surface-pressed);
  color: var(--text-primary);
}

/* ═══ 添加模型弹窗 ═══ */

.custom-model-dialog {
  max-width: 420px;
  padding: 0;
}

.custom-model-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.custom-model-title {
  font-size: var(--fs-l1);
  font-weight: 600;
  color: var(--text-primary);
}

.custom-model-subtitle {
  margin-top: 2px;
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
}

.custom-model-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.custom-model-close:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.custom-model-body {
  padding: var(--space-lg) var(--space-xl) var(--space-sm);
}

.custom-model-body .form-group {
  margin-bottom: var(--space-lg);
}

.cm-required {
  color: var(--accent);
}

/* 能力开关 chips */
.cm-cap-row {
  display: flex;
  gap: var(--space-sm);
}

.cm-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface-control);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cm-cap-chip:hover {
  border-color: var(--rule-strong);
  color: var(--text-secondary);
}

.cm-cap-chip.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

/* 高级选项折叠 */
.cm-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  margin: 0 0 var(--space-md) -8px;
  width: calc(100% + 16px);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cm-advanced-toggle:hover {
  background: var(--surface-secondary);
}

.cm-advanced-chevron {
  transition: transform var(--transition-fast);
}

.cm-advanced-toggle[aria-expanded="true"] .cm-advanced-chevron {
  transform: rotate(90deg);
}

.cm-advanced-hint {
  color: var(--text-tertiary);
  font-weight: 400;
}

.cm-advanced {
  padding-top: var(--space-xs);
}

.cm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.cm-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

.cm-grid-2 .form-group,
.cm-price-field {
  min-width: 0;
}

.cm-grid-2 .form-input,
.cm-grid-3 .form-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cm-price-group {
  margin-bottom: var(--space-sm);
}

.cm-price-unit {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: normal;
}

.cm-price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-sub-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* footer：覆盖提示居左，按钮居右 */
.custom-model-footer {
  border-top: 1px solid var(--rule);
}

.cm-overwrite-note {
  margin-right: auto;
  font-size: 12px;
  color: var(--text-tertiary);
}

#btn-custom-model-save:disabled {
  opacity: 0.45;
  cursor: default;
}
.model-selection-option:hover {
  background: var(--surface-secondary);
}
.model-selection-option.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.model-selection-option:active {
  background: var(--surface-pressed);
}

.intensity-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface-primary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
}

.intensity-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 0 2px;
}

.intensity-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.intensity-option:hover {
  background: var(--surface-secondary);
}

.intensity-option:active {
  background: var(--surface-pressed);
}

.intensity-option.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* ═══ Search Settings tab ═══ */

.search-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.search-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.search-toggle-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Toggle Switch — WinUI ToggleSwitch：关=描边+深钮，开=强调色填充 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: transform 160ms var(--ease-winui), background var(--transition-fast), width var(--transition-fast);
}

/* WinUI 按压细节：按住时滑块变宽 */
.toggle-slider:active::before {
  width: 15px;
}

.toggle-slider:hover {
  background: var(--surface-hover);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  background: var(--on-accent);
  transform: translateX(20px);
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

.search-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
  line-height: 1.4;
}

/* ═══ Prompt Settings Sections (collapsible card details) ═══ */

.prompt-section {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface-modal-card);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.prompt-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--space-lg);
  font-size: var(--fs-l3);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.prompt-section-title::-webkit-details-marker {
  display: none;
}

.prompt-section-title:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.prompt-section[open] > .prompt-section-title {
  color: var(--text-primary);
  border-bottom: 1px solid var(--rule);
}

.prompt-chevron {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  transition: transform 180ms var(--ease-winui);
}

.prompt-section[open] .prompt-chevron {
  transform: rotate(90deg);
}

.prompt-cat-icon {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
}

/* 统一图标尺寸（ICONS 里个别 svg 未带 width/height 属性） */
.prompt-cat-icon svg,
.prompt-chevron svg {
  width: 16px;
  height: 16px;
}

.prompt-chevron svg {
  width: 12px;
  height: 12px;
}

.prompt-section[open] .prompt-cat-icon {
  color: var(--accent);
}

.prompt-section-count {
  margin-left: auto;
  font-size: var(--fs-l4);
  font-weight: 400;
  color: var(--text-tertiary);
}

.prompt-section-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: prompt-section-in 200ms var(--ease-winui);
}

@keyframes prompt-section-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prompt-section-body .form-group {
  margin-bottom: 0;
}

.prompt-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* 「已修改」徽标：仅用户 override 过的条目显示 */
.prompt-modified-badge {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.prompt-item.modified .prompt-modified-badge {
  display: inline-block;
}

/* 重置：ghost 小按钮，行 hover 或条目已修改时显现 */
.btn-reset-prompt {
  margin-left: auto;
  font-size: var(--fs-l4);
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  padding: 2px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.prompt-label-row:hover .btn-reset-prompt,
.prompt-item.modified .btn-reset-prompt,
.btn-reset-prompt:focus-visible {
  opacity: 1;
}

.btn-reset-prompt:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* 提示词文本域：等宽字体 + 舒适行高，长文本易读 */
#settings-tab-prompt .form-textarea {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
}

/* ── 设置：浏览器 tab（LLM 浏览器 + 浏览数据管理） ── */
.browser-data-summary {
  font-size: 13.5px;
  color: var(--text-primary);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.browser-data-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  line-height: 1.5;
}

.browser-data-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.browser-danger-btn {
  color: var(--danger, #C42B1C);
}

.browser-danger-btn:hover {
  box-shadow: 0 0 0 1px var(--danger, #C42B1C);
}

.browser-site-panel {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
}

.browser-site-panel .form-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.browser-site-list {
  max-height: 260px;
  overflow-y: auto;
}

.browser-site-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.browser-site-row:last-child {
  border-bottom: none;
}

.browser-site-domain {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-site-count {
  color: var(--text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}

.browser-site-clear {
  flex-shrink: 0;
  padding: 3px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.browser-site-clear:hover {
  color: var(--danger, #C42B1C);
  border-color: var(--danger, #C42B1C);
}

.browser-site-clear.armed {
  color: #fff;
  background: var(--danger, #C42B1C);
  border-color: var(--danger, #C42B1C);
}

.browser-site-clear:disabled {
  opacity: 0.5;
  cursor: default;
}

.browser-site-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ═══ Boot Entrance（一次性入场动画，首帧后由 app.js 加 .boot-intro） ═══ */
body.boot-intro #sidebar {
  animation: boot-slide-left 380ms var(--ease-winui) both;
}

body.boot-intro #chat-header {
  animation: boot-fade 300ms 50ms var(--ease-winui) both;
}

body.boot-intro #message-area {
  animation: boot-fade 340ms 90ms var(--ease-winui) both;
}

body.boot-intro #input-card {
  animation: boot-rise 400ms 150ms var(--ease-winui) both;
}

body.boot-intro #home-hero {
  animation: boot-rise 420ms 110ms var(--ease-winui) both;
}

@keyframes boot-slide-left {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

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

@keyframes boot-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.boot-intro #sidebar,
  body.boot-intro #chat-header,
  body.boot-intro #message-area,
  body.boot-intro #input-card,
  body.boot-intro #home-hero {
    animation: none;
  }
}