/* ============================================================
 * 高黎贡山 AI 智能语音助手 — 主界面样式表 style.css
 * 来源：gaoligong-voice-assistant/pages/main-default.html 设计稿
 * 版本：?v=20260810b
 * 结构：4 大块 CSS（按设计稿顺序提取，不含 Tailwind 的 @theme inline / @layer base）
 *   1. theme-vars：:root + .dark 品牌 CSS 变量（颜色/字体/圆角/节奏）
 *   2. semantic-token-fallback：语义 token 回退样式（bg-/text-/border-/ring- 工具类）
 *   3. 通用工具：no-scrollbar 隐藏滚动条 + data-icon 图标掩码
 *   4. critical-layout：核心布局与组件样式（网格/顶栏/侧边栏/卡片/按钮/输入框/响应式）
 * 设计原则（Google 设计系统）：
 *   - 扁平无阴影：层级靠 1px 薄边框 + 色调差异表达
 *   - 8px 圆角：卡片/按钮/输入框统一 var(--glg-radius-lg)
 *   - 主色 #4285f4：选中态 / 主按钮 / 聚焦环
 *   - DM Sans + Noto Sans SC 字体栈
 *   - 全部颜色通过 --glg- 语义变量引用，便于主题切换
 *   - 不使用 emoji 作功能图标，统一用 inline SVG
 * 说明：@theme inline 和 @layer base 是 Tailwind 语法，留在 index.html 里由 Tailwind CDN 处理
 * ============================================================ */


/* ============================================================
 * 第 1 块：theme-vars — 品牌 CSS 变量
 * 来源：设计稿 <style id="theme-vars"> 的 :root 和 .dark 部分（7-189 行）
 * 作用：定义全站颜色/字体/圆角/节奏变量，供后续组件样式引用
 * 注意：本块不含 @theme inline（191-245 行），那是 Tailwind 语法留在 HTML 里
 * ============================================================ */

/* ===== Light mode 源 token =====
 * 白天模式核心变量：所有组件颜色都引用这些变量
 * 改这里就能改全局色调，方便维护和主题切换 */
:root {
  /* ---- 核心表面色 ---- */
  --background: #ffffff;          /* 页面主背景：纯白 */
  --foreground: #0e1115;          /* 主文字色：近黑 */
  --card: #ffffff;                /* 卡片背景：纯白 */
  --card-foreground: #0e1115;     /* 卡片内文字：近黑 */
  --popover: #f9f9fa;             /* 弹出层背景：极浅灰 */
  --popover-foreground: #0e1115;  /* 弹出层文字：近黑 */

  /* ---- 语义动作色 ---- */
  --primary: #4285f4;             /* 品牌主色：Google 蓝 */
  --primary-foreground: #ffffff;  /* 主色上的文字：白 */
  --secondary: #dbeafe;           /* 次要色：浅蓝背景 */
  --secondary-foreground: #333942;/* 次要色上的文字：深灰 */
  --muted: #eff1f4;               /* 弱化背景：浅灰 */
  --muted-foreground: #7f8d9f;    /* 弱化文字：中灰（提示/占位） */
  --accent: #dbeafe;              /* 强调背景：浅蓝 */
  --accent-foreground: #003e8f;   /* 强调文字：深蓝 */
  --destructive: #ef4444;         /* 危险色：红 */
  --destructive-foreground: #ffffff;/* 危险色上的文字：白 */

  /* ---- 状态色（仅用于语义状态，非品牌色） ---- */
  --state-success: #34a853;       /* 成功：绿 */
  --state-warning: #fbbc05;       /* 警告：黄 */
  --state-error: #ea4335;         /* 错误：红 */
  --state-info: #4285f4;          /* 信息：蓝 */

  /* ---- 边框、输入、聚焦环 ---- */
  --border: #ebebeb;              /* 默认边框：浅灰 */
  --input: #e2e3e4;               /* 输入框边框：浅灰 */
  --ring: #4285f4;                /* 聚焦环：主色蓝 */

  /* ---- 数据可视化色板 ---- */
  --chart-1: #4285f4;
  --chart-2: #ea4335;
  --chart-3: #fbbc05;
  --chart-4: #0043ad;
  --chart-5: #34a853;

  /* ---- 侧边栏专用色 ---- */
  --sidebar: #f0f6ff;             /* 侧边栏背景：极浅蓝 */
  --sidebar-foreground: #0e1115;  /* 侧边栏文字：近黑 */
  --sidebar-primary: #4285f4;     /* 侧边栏选中态：主色蓝 */
  --sidebar-primary-foreground: #ffffff;/* 侧边栏选中态文字：白 */
  --sidebar-accent: #dbeafe;      /* 侧边栏 hover：浅蓝 */
  --sidebar-accent-foreground: #003e8f;/* 侧边栏 hover 文字：深蓝 */
  --sidebar-border: #e7eaef;      /* 侧边栏边框：浅灰蓝 */
  --sidebar-ring: #4285f4;        /* 侧边栏聚焦环：主色蓝 */

  /* ---- 字体 ---- */
  --font-sans: "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, sans-serif, system-ui;
  --font-serif: "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, sans-serif, system-ui;
  --font-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, monospace;

  /* ---- 圆角 ---- */
  --radius: 0.5rem;               /* 默认圆角：8px */

  /* ---- 阴影原语（Google 风格：扁平无可见阴影） ---- */
  --shadow-color: #0e1115;

  /* ---- 节奏 ---- */
  --tracking-normal: 0em;         /* 默认字间距 */
  --spacing: 0.24rem;             /* 间距单位，组件间距用 calc(var(--spacing)*N) */

  /* ============================================================
   * 语义别名（glg 前缀）
   * 必须在 :root 内，供 apply-html-head-contract.mjs 检测
   * 这些别名是组件样式实际引用的变量，与上面的源 token 一一对应
   * 好处：源 token 可随意改名，只要 glg 别名不变，组件样式就不用改
   * ============================================================ */

  /* 颜色别名 */
  --glg-background: #ffffff;
  --glg-foreground: #0e1115;
  --glg-card: #ffffff;
  --glg-card-foreground: #0e1115;
  --glg-popover: #f9f9fa;
  --glg-popover-foreground: #0e1115;
  --glg-primary: #4285f4;
  --glg-primary-foreground: #ffffff;
  --glg-secondary: #dbeafe;
  --glg-secondary-foreground: #333942;
  --glg-muted: #eff1f4;
  --glg-muted-foreground: #7f8d9f;
  --glg-accent: #dbeafe;
  --glg-accent-foreground: #003e8f;
  --glg-destructive: #ef4444;
  --glg-destructive-foreground: #ffffff;
  --glg-border: #ebebeb;
  --glg-input: #e2e3e4;
  --glg-ring: #4285f4;

  /* 状态色别名 */
  --glg-state-success: #34a853;
  --glg-state-warning: #fbbc05;
  --glg-state-error: #ea4335;
  --glg-state-info: #4285f4;

  /* 圆角别名 */
  --glg-radius: 0.5rem;
  --glg-radius-sm: 0.25rem;
  --glg-radius-md: 0.375rem;
  --glg-radius-lg: 0.5rem;
  --glg-radius-xl: 0.75rem;
}

/* ===== Dark mode 源 token =====
 * 暗色模式覆盖：通过 .dark 类切换（如 <html class="dark">）
 * 只需覆盖颜色变量，布局/字体/圆角保持不变 */
.dark {
  --background: #161616;           /* 页面主背景：深灰黑 */
  --foreground: #eff1f4;           /* 主文字色：近白 */
  --card: #1d1d1c;                 /* 卡片背景：深灰 */
  --card-foreground: #eff1f4;      /* 卡片内文字：近白 */
  --popover: #2e2e2e;              /* 弹出层背景：中灰 */
  --popover-foreground: #e5e5e5;   /* 弹出层文字：浅灰 */

  --primary: #fc2c50;              /* 暗色主色：粉红（暗色模式下品牌色更鲜艳） */
  --primary-foreground: #ffffff;
  --secondary: #383838;            /* 次要色：深灰 */
  --secondary-foreground: #e5e5e5;
  --muted: #383838;                /* 弱化背景：深灰 */
  --muted-foreground: #949494;     /* 弱化文字：中灰 */
  --accent: #4a2026;               /* 强调背景：暗红 */
  --accent-foreground: #fc2c50;    /* 强调文字：粉红 */
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  --state-success: #34a853;
  --state-warning: #fbeb35;        /* 暗色警告更亮 */
  --state-error: #f1204a;
  --state-info: #2dccd3;           /* 暗色信息用青色 */

  --border: #1d1d1c;
  --input: #000000;
  --ring: #ffffff;                 /* 暗色聚焦环用白色 */

  --chart-1: #2dccd3;
  --chart-2: #f1204a;
  --chart-3: #edbbe8;
  --chart-4: #fbeb35;
  --chart-5: #baf6f0;

  --sidebar: #171717;
  --sidebar-foreground: #e5e5e5;
  --sidebar-primary: #0065fd;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00266b;
  --sidebar-accent-foreground: #bfdbfe;
  --sidebar-border: #404040;
  --sidebar-ring: #00266b;

  --shadow-color: #000000;

  /* Dark mode 语义别名覆盖 */
  --glg-background: #161616;
  --glg-foreground: #eff1f4;
  --glg-card: #1d1d1c;
  --glg-card-foreground: #eff1f4;
  --glg-popover: #2e2e2e;
  --glg-popover-foreground: #e5e5e5;
  --glg-primary: #fc2c50;
  --glg-primary-foreground: #ffffff;
  --glg-secondary: #383838;
  --glg-secondary-foreground: #e5e5e5;
  --glg-muted: #383838;
  --glg-muted-foreground: #949494;
  --glg-accent: #4a2026;
  --glg-accent-foreground: #fc2c50;
  --glg-destructive: #ef4444;
  --glg-destructive-foreground: #ffffff;
  --glg-border: #1d1d1c;
  --glg-input: #000000;
  --glg-ring: #ffffff;
  --glg-state-success: #34a853;
  --glg-state-warning: #fbeb35;
  --glg-state-error: #f1204a;
  --glg-state-info: #2dccd3;
}


/* ============================================================
 * 第 2 块：semantic-token-fallback — 语义 token 回退样式
 * 来源：设计稿 <style id="semantic-token-fallback">（293-414 行）
 * 作用：为 Tailwind 未加载或语义工具类未生成时提供回退
 *       覆盖 bg-/text-/border-/ring- 前缀的所有语义颜色工具类
 *       这样即使 Tailwind CDN 加载失败，语义颜色也能正常显示
 * ============================================================ */
.bg-background { background-color: var(--glg-background); }
.text-background { color: var(--glg-background); }
.border-background { border-color: var(--glg-background); }
.ring-background { --tw-ring-color: var(--glg-background); }
.bg-foreground { background-color: var(--glg-foreground); }
.text-foreground { color: var(--glg-foreground); }
.border-foreground { border-color: var(--glg-foreground); }
.ring-foreground { --tw-ring-color: var(--glg-foreground); }
.bg-card { background-color: var(--glg-card); }
.text-card { color: var(--glg-card); }
.border-card { border-color: var(--glg-card); }
.ring-card { --tw-ring-color: var(--glg-card); }
.bg-card-foreground { background-color: var(--glg-card-foreground); }
.text-card-foreground { color: var(--glg-card-foreground); }
.border-card-foreground { border-color: var(--glg-card-foreground); }
.ring-card-foreground { --tw-ring-color: var(--glg-card-foreground); }
.bg-popover { background-color: var(--glg-popover); }
.text-popover { color: var(--glg-popover); }
.border-popover { border-color: var(--glg-popover); }
.ring-popover { --tw-ring-color: var(--glg-popover); }
.bg-popover-foreground { background-color: var(--glg-popover-foreground); }
.text-popover-foreground { color: var(--glg-popover-foreground); }
.border-popover-foreground { border-color: var(--glg-popover-foreground); }
.ring-popover-foreground { --tw-ring-color: var(--glg-popover-foreground); }
.bg-primary { background-color: var(--glg-primary); }
.text-primary { color: var(--glg-primary); }
.border-primary { border-color: var(--glg-primary); }
.ring-primary { --tw-ring-color: var(--glg-primary); }
.bg-primary-foreground { background-color: var(--glg-primary-foreground); }
.text-primary-foreground { color: var(--glg-primary-foreground); }
.border-primary-foreground { border-color: var(--glg-primary-foreground); }
.ring-primary-foreground { --tw-ring-color: var(--glg-primary-foreground); }
.bg-secondary { background-color: var(--glg-secondary); }
.text-secondary { color: var(--glg-secondary); }
.border-secondary { border-color: var(--glg-secondary); }
.ring-secondary { --tw-ring-color: var(--glg-secondary); }
.bg-secondary-foreground { background-color: var(--glg-secondary-foreground); }
.text-secondary-foreground { color: var(--glg-secondary-foreground); }
.border-secondary-foreground { border-color: var(--glg-secondary-foreground); }
.ring-secondary-foreground { --tw-ring-color: var(--glg-secondary-foreground); }
.bg-muted { background-color: var(--glg-muted); }
.text-muted { color: var(--glg-muted); }
.border-muted { border-color: var(--glg-muted); }
.ring-muted { --tw-ring-color: var(--glg-muted); }
.bg-muted-foreground { background-color: var(--glg-muted-foreground); }
.text-muted-foreground { color: var(--glg-muted-foreground); }
.border-muted-foreground { border-color: var(--glg-muted-foreground); }
.ring-muted-foreground { --tw-ring-color: var(--glg-muted-foreground); }
.bg-accent { background-color: var(--glg-accent); }
.text-accent { color: var(--glg-accent); }
.border-accent { border-color: var(--glg-accent); }
.ring-accent { --tw-ring-color: var(--glg-accent); }
.bg-accent-foreground { background-color: var(--glg-accent-foreground); }
.text-accent-foreground { color: var(--glg-accent-foreground); }
.border-accent-foreground { border-color: var(--glg-accent-foreground); }
.ring-accent-foreground { --tw-ring-color: var(--glg-accent-foreground); }
.bg-destructive { background-color: var(--glg-destructive); }
.text-destructive { color: var(--glg-destructive); }
.border-destructive { border-color: var(--glg-destructive); }
.ring-destructive { --tw-ring-color: var(--glg-destructive); }
.bg-destructive-foreground { background-color: var(--glg-destructive-foreground); }
.text-destructive-foreground { color: var(--glg-destructive-foreground); }
.border-destructive-foreground { border-color: var(--glg-destructive-foreground); }
.ring-destructive-foreground { --tw-ring-color: var(--glg-destructive-foreground); }
.bg-border { background-color: var(--glg-border); }
.text-border { color: var(--glg-border); }
.border-border { border-color: var(--glg-border); }
.ring-border { --tw-ring-color: var(--glg-border); }
.bg-input { background-color: var(--glg-input); }
.text-input { color: var(--glg-input); }
.border-input { border-color: var(--glg-input); }
.ring-input { --tw-ring-color: var(--glg-input); }
.bg-ring { background-color: var(--glg-ring); }
.text-ring { color: var(--glg-ring); }
.border-ring { border-color: var(--glg-ring); }
.ring-ring { --tw-ring-color: var(--glg-ring); }
.bg-chart-1 { background-color: var(--chart-1); }
.text-chart-1 { color: var(--chart-1); }
.border-chart-1 { border-color: var(--chart-1); }
.ring-chart-1 { --tw-ring-color: var(--chart-1); }
.bg-chart-2 { background-color: var(--chart-2); }
.text-chart-2 { color: var(--chart-2); }
.border-chart-2 { border-color: var(--chart-2); }
.ring-chart-2 { --tw-ring-color: var(--chart-2); }
.bg-chart-3 { background-color: var(--chart-3); }
.text-chart-3 { color: var(--chart-3); }
.border-chart-3 { border-color: var(--chart-3); }
.ring-chart-3 { --tw-ring-color: var(--chart-3); }
.bg-chart-4 { background-color: var(--chart-4); }
.text-chart-4 { color: var(--chart-4); }
.border-chart-4 { border-color: var(--chart-4); }
.ring-chart-4 { --tw-ring-color: var(--chart-4); }
.bg-chart-5 { background-color: var(--chart-5); }
.text-chart-5 { color: var(--chart-5); }
.border-chart-5 { border-color: var(--chart-5); }
.ring-chart-5 { --tw-ring-color: var(--chart-5); }
.bg-sidebar { background-color: var(--sidebar); }
.text-sidebar { color: var(--sidebar); }
.border-sidebar { border-color: var(--sidebar); }
.ring-sidebar { --tw-ring-color: var(--sidebar); }
.bg-sidebar-foreground { background-color: var(--sidebar-foreground); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.border-sidebar-foreground { border-color: var(--sidebar-foreground); }
.ring-sidebar-foreground { --tw-ring-color: var(--sidebar-foreground); }
.bg-sidebar-primary { background-color: var(--sidebar-primary); }
.text-sidebar-primary { color: var(--sidebar-primary); }
.border-sidebar-primary { border-color: var(--sidebar-primary); }
.ring-sidebar-primary { --tw-ring-color: var(--sidebar-primary); }
.bg-sidebar-primary-foreground { background-color: var(--sidebar-primary-foreground); }
.text-sidebar-primary-foreground { color: var(--sidebar-primary-foreground); }
.border-sidebar-primary-foreground { border-color: var(--sidebar-primary-foreground); }
.ring-sidebar-primary-foreground { --tw-ring-color: var(--sidebar-primary-foreground); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.text-sidebar-accent { color: var(--sidebar-accent); }
.border-sidebar-accent { border-color: var(--sidebar-accent); }
.ring-sidebar-accent { --tw-ring-color: var(--sidebar-accent); }
.bg-sidebar-accent-foreground { background-color: var(--sidebar-accent-foreground); }
.text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }
.border-sidebar-accent-foreground { border-color: var(--sidebar-accent-foreground); }
.ring-sidebar-accent-foreground { --tw-ring-color: var(--sidebar-accent-foreground); }


/* ============================================================
 * 第 3 块：通用工具样式
 * 来源：设计稿 <style>（415-430 行）
 * 作用：no-scrollbar 隐藏滚动条 + data-icon 图标掩码基础样式
 * ============================================================ */

/* no-scrollbar：隐藏元素的滚动条（侧边栏纵向滚动时不显示滚动条，更美观）
 * WebKit 内核用 ::-webkit-scrollbar，IE/Edge 用 -ms-overflow-style，Firefox 用 scrollbar-width */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* data-icon：基于 mask 的图标显示方案
 * 配合 [data-icon="图标名"] 使用，background-color: currentColor 让图标继承文字颜色
 * mask 把背景色裁切成图标形状，实现单色图标 */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}


/* ============================================================
 * 第 4 块：critical-layout — 主界面布局与组件样式
 * 来源：设计稿 <style id="critical-layout">（437-992 行）
 * 作用：应用网格布局 + 顶栏 + 侧边栏 + 主区 + 卡片 + 按钮 + 输入框 + 响应式
 * 这是核心样式块，定义了所有可见组件的外观
 * 设计原则（Google 设计系统）：
 *   1) 扁平无阴影：层级靠 1px 薄边框 + 色调差异表达，不用 box-shadow
 *   2) 8px 圆角：卡片/按钮/输入框统一 var(--glg-radius-lg)
 *   3) 紧凑节奏：间距单位 --spacing=0.24rem，calc(var(--spacing)*N)
 *   4) 白色表面：背景 #fff，卡片 #fff，侧边栏 #f0f6ff
 *   5) 主色 #4285f4：选中态 / 主按钮 / 聚焦环
 *   6) DM Sans + Noto Sans SC 字体栈
 *   7) 全部颜色通过 --glg- 语义变量引用，便于主题切换
 *   8) 不使用 emoji 作功能图标，统一用 inline SVG
 * ============================================================ */

/* ===== 基础重置（盒模型与默认外边距清零） ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

/* 全站正文：白色背景 + 主色文字 + DM Sans 字体栈 */
body {
  font-family: var(--font-sans);
  background: var(--glg-background);
  color: var(--glg-foreground);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;     /* macOS 平滑字体 */
  -moz-osx-font-smoothing: grayscale;      /* Firefox 平滑字体 */
}

/* 按钮/输入框继承字体，移除默认外观 */
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
button:disabled { cursor: not-allowed; }

/* ===== 应用整体网格布局 =====
 * 列：260px 侧边栏 + 1fr 主区
 * 行：72px 顶栏 + 1fr 内容 + 48px 底栏
 * 顶栏/底栏跨全宽，侧边栏占第 1 列第 2 行 */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 72px 1fr 48px;
  height: 100vh;
  overflow: hidden;
}

/* ===== [A] 顶部标题区 TOPBAR =====
 * 跨全宽第 1 行：左侧品牌标记 + 右侧会话管理按钮组 */
.topbar {
  grid-column: 1 / -1;              /* 跨所有列 */
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 两端对齐：品牌在左，操作在右 */
  gap: calc(var(--spacing) * 4);
  padding: 0 calc(var(--spacing) * 6);
  background: var(--glg-card);
  border-bottom: 1px solid var(--glg-border);
}

/* 品牌标记容器：logo + 名称 + 副标题 */
.brand {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3.5);
  min-width: 0;                     /* 允许收缩，防止溢出 */
}

/* 品牌标记方块：40x40，主色背景，白色"高"字 */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--glg-radius-lg);
  background: var(--glg-primary);
  color: var(--glg-primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 品牌文字列：主名称 + 副标题 */
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: 1rem; font-weight: 600; color: var(--glg-foreground); }
.brand-sub { font-size: 0.82rem; color: var(--glg-muted-foreground); }

/* 顶栏右侧操作组 */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  flex-wrap: nowrap;                /* 不换行，保持单行 */
}

/* ===== [B/C] 侧边栏 SIDEBAR =====
 * 第 1 列第 2 行：浅蓝背景，纵向滚动，内含分类 + 知识点 */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  background: var(--glg-sidebar);
  border-right: 1px solid var(--glg-sidebar-border);
  overflow-y: auto;                 /* 内容超出时纵向滚动 */
  padding: calc(var(--spacing) * 5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);    /* 分类区与知识点区之间的间距 */
}

/* 侧边栏分区（分类区 / 知识点区） */
.sidebar-section { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2.5); }

/* ===== 主区域 =====
 * 第 2 列第 2 行：内部再分为 center(1fr) + right(420px) 两列 */
.main {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  overflow: hidden;
}

/* 中间列：纵向排布 [F] 讲解区 + [D] 语音问答区 */
.center-col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6);
  overflow: hidden;
  min-height: 0;                    /* 关键：允许 flex 子项收缩，防止溢出 */
}

/* 右侧列：纵向排布 [E] AI 对话区 + [G] 播放器 */
.right-col {
  border-left: 1px solid var(--glg-border);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6);
  overflow: hidden;
  min-height: 0;
}

/* ===== [H] 底部信息区 FOOTER =====
 * 跨全宽第 3 行：居中版权信息 */
.footer {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  background: var(--glg-card);
  border-top: 1px solid var(--glg-border);
  font-size: 0.82rem;
  color: var(--glg-muted-foreground);
}
.footer .footer-sep { color: var(--glg-border); }   /* 分隔符颜色更淡 */

/* ===== 卡片容器 =====
 * 白色表面 + 1px 薄边框 + 12px 圆角，扁平无阴影 */
.card {
  background: var(--glg-card);
  border: 1px solid var(--glg-border);
  border-radius: var(--glg-radius-xl);   /* 12px 大圆角 */
  padding: calc(var(--spacing) * 5);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 让某些卡片弹性填充剩余高度 */
.card-flex { flex: 1; }

/* 卡片标题行：eyebrow 标签 + 右侧状态/badge */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 4);
}
.card-header .card-title-strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--glg-foreground);
}

/* ===== Eyebrow 标签 =====
 * 小号大写（中文不转换）+ letter-spacing，用作分区小标题 */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;            /* 字母间距加大，更有标签感 */
  color: var(--glg-muted-foreground);
  text-transform: uppercase;         /* 英文大写，中文不受影响 */
}

/* ===== 按钮基础 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
  border-radius: var(--glg-radius-lg);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;               /* 不换行 */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { flex-shrink: 0; }         /* 按钮内 SVG 不被压缩 */

/* 主色按钮：主色背景 + 白色文字 */
.btn-primary {
  background: var(--glg-primary);
  color: var(--glg-primary-foreground);
}
.btn-primary:hover { background: #3367d6; }       /* hover 加深 */
.btn-primary:active { background: #2a5bb0; }      /* active 更深 */
.btn-primary:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }

/* 幽灵按钮：透明背景 + 薄边框 */
.btn-ghost {
  background: transparent;
  color: var(--glg-foreground);
  border: 1px solid var(--glg-border);
}
.btn-ghost:hover { background: var(--glg-muted); border-color: var(--glg-input); }
.btn-ghost:active { background: var(--glg-secondary); }
.btn-ghost:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }

/* 警告按钮：用于清除配置等危险操作的次级按钮 */
.btn-warn {
  background: #fef7e0;
  color: #b07000;
  border: 1px solid #fbbc05;
}
.btn-warn:hover { background: #fee9c0; }

/* 图标按钮：40x40 方形，圆角 */
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--glg-radius-lg);
  color: var(--glg-foreground);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--glg-muted); }
.icon-btn:active { background: var(--glg-secondary); }
.icon-btn:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }
.icon-btn:disabled { opacity: 0.45; pointer-events: none; }   /* 禁用态灰显且不可点 */
.icon-btn-circle { border-radius: 50%; }                       /* 圆形变体（语音输入按钮用） */

/* ===== Badge 徽章 =====
 * 小型标签：会话状态、配置状态、语音状态等 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
  border-radius: var(--glg-radius-md);
  font-size: 0.76rem;
  font-weight: 500;
  background: var(--glg-muted);
  color: var(--glg-muted-foreground);
  white-space: nowrap;
}
/* 主色调 badge（会话状态等） */
.badge-primary { background: var(--glg-secondary); color: var(--glg-accent-foreground); }
/* 错误态 badge（未配置等） */
.badge-error { background: #fce8e6; color: var(--glg-state-error); }
/* 成功态 badge */
.badge-success { background: #e6f4ea; color: var(--glg-state-success); }
/* 警告态 badge */
.badge-warning { background: #fef7e0; color: #b07000; }

/* ===== Chip 建议标签 =====
 * 用于欢迎页的建议方向，hover 变主色浅底 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);
  border-radius: var(--glg-radius-xl);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--glg-foreground);
  background: var(--glg-card);
  border: 1px solid var(--glg-border);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover {
  background: var(--glg-secondary);
  border-color: var(--glg-primary);
  color: var(--glg-accent-foreground);
}
.chip:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }
.chip .chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glg-primary); flex-shrink: 0;
}

/* ===== 侧边栏导航/分类按钮 =====
 * 全宽左对齐，hover 变 sidebar-accent，选中态主色背景白字
 * 由 script.js 的 renderCategories 动态生成 */
.nav-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  width: 100%;
  padding: calc(var(--spacing) * 2.75) calc(var(--spacing) * 3.5);
  border-radius: var(--glg-radius-lg);
  color: var(--glg-foreground);
  text-align: left;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s ease;
}
.nav-btn:hover { background: var(--glg-sidebar-accent); }
.nav-btn:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }
/* 选中态：主色背景 + 白色文字 + 图标变白 */
.nav-btn.active {
  background: var(--glg-sidebar-primary);
  color: var(--glg-sidebar-primary-foreground);
}
.nav-btn.active:hover { background: var(--glg-sidebar-primary); }
/* 分类图标容器：20x20 方块，居中 */
.nav-btn .nav-icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--glg-muted-foreground);
}
.nav-btn.active .nav-icon { color: var(--glg-sidebar-primary-foreground); }

/* 知识点按钮：比分类按钮更紧凑，左侧小圆点
 * 由 script.js 的 renderItems 动态生成 */
.kp-btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  width: 100%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border-radius: var(--glg-radius-lg);
  color: var(--glg-foreground);
  text-align: left;
  font-size: 0.84rem;
  transition: background 0.15s ease;
}
.kp-btn:hover { background: var(--glg-sidebar-accent); }
.kp-btn:focus-visible { outline: 2px solid var(--glg-ring); outline-offset: 2px; }
/* 知识点左侧小圆点：默认灰，hover 变主色 */
.kp-btn .kp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glg-muted-foreground);
  flex-shrink: 0;
}
.kp-btn:hover .kp-dot { background: var(--glg-primary); }

/* ===== 输入框 =====
 * 1px 边框，聚焦变主色边框 + 聚焦环 */
.input {
  width: 100%;
  padding: calc(var(--spacing) * 2.75) calc(var(--spacing) * 3.5);
  border: 1px solid var(--glg-input);
  border-radius: var(--glg-radius-lg);
  background: var(--glg-card);
  color: var(--glg-foreground);
  font-size: 0.88rem;
  transition: border-color 0.15s ease;
}
.input::placeholder { color: var(--glg-muted-foreground); }
.input:focus {
  outline: none;
  border-color: var(--glg-primary);
}
.input:focus-visible { box-shadow: 0 0 0 2px var(--glg-ring); }

/* ===== 空状态（[F] 讲解区默认态） =====
 * 居中引导图标 + 标题 + 副标题
 * answerBox 初始内容，script.js 会用 innerHTML 替换 */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  text-align: center;
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
}
.empty-state .empty-icon {
  width: 96px;
  height: 96px;
  color: var(--glg-muted-foreground);
  opacity: 0.7;
}
.empty-state .empty-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--glg-muted-foreground);
}
.empty-state .empty-sub {
  font-size: 0.82rem;
  color: var(--glg-muted-foreground);
  max-width: 320px;
}

/* ===== 欢迎引导（[E] AI 对话区默认态） =====
 * aiChatHistory 初始内容，script.js 会用 innerHTML 替换为对话气泡
 * 修复输入框消失：#aiChatHistory 必须可滚动，且 .welcome 不能 flex:1 无限撑开
 * 否则 AI 回答累加后会把 .ai-input-row 推出视口，用户找不到输入框 */
#aiChatHistory {
  flex: 1;
  min-height: 0;          /* flex 子项滚动必需，否则 flex:1 会无限撑开父容器 */
  overflow-y: auto;        /* 内容溢出时显示滚动条，而不是把输入框挤走 */
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}
/* 初始欢迎态：居中显示引导图标（用 min-height 替代 flex:1 避免无限撑开） */
#aiChatHistory.welcome {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.welcome .welcome-icon {
  width: 56px;
  height: 56px;
  color: var(--glg-primary);
}
.welcome .welcome-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--glg-foreground);
}
.welcome .welcome-sub {
  font-size: 0.86rem;
  color: var(--glg-muted-foreground);
  max-width: 340px;
}
/* 建议标签横向排列，自动换行 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2.5);
  justify-content: center;
  margin-top: calc(var(--spacing) * 2);
}

/* ===== 知识点讲解框内暂停/继续按钮（2026-08-11 新增） =====
 * 直接放在 answerBox 内部，文字下方 */
.kb-controls {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 3);
  padding-top: calc(var(--spacing) * 2.5);
  border-top: 1px solid var(--glg-border);
}
.kb-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--glg-border);
  border-radius: var(--glg-radius);
  background: var(--glg-card);
  color: var(--glg-foreground);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kb-control-btn:hover {
  background: var(--glg-muted);
  border-color: var(--glg-muted-foreground);
}
.kb-control-btn svg { width: 16px; height: 16px; }

/* ===== 语音控制栏（知识讲解卡片底部，默认隐藏） =====
 * 改进 2026-08-11：大按钮 + 浅色背景，放在 answerBox 下方，显眼位置
 * script.js 通过 style.display 控制显隐 */
.voice-controls {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: #f0f4ff;
  border: 1px solid #d0d9f0;
  border-radius: var(--glg-radius-lg);
}
.dark .voice-controls {
  background: #1e2440;
  border-color: #2e3460;
}
.voice-controls .voice-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--glg-foreground);
  white-space: nowrap;
}
.vc-buttons {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-left: auto;
}
.vc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--glg-radius);
  background: var(--glg-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.vc-btn:hover {
  background: #3367d6;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.vc-btn:active {
  transform: translateY(0);
}
.vc-btn-stop {
  background: #e74c3c;
}
.vc-btn-stop:hover {
  background: #c0392b;
}
.vc-btn svg { width: 20px; height: 20px; }

/* ===== 语音问答输入行（[D]） ===== */
.voice-query-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.voice-query-row .input { flex: 1; }
.hint {
  margin-top: calc(var(--spacing) * 2);
  font-size: 0.78rem;
  color: var(--glg-muted-foreground);
}

/* ===== 徒步导航区（[H]，2026-08-16 新增） ===== */
.trail-result {
  margin-top: calc(var(--spacing) * 3);
  background: rgba(66, 133, 244, 0.06);
  border: 1px solid rgba(66, 133, 244, 0.25);
  border-radius: calc(var(--radius) * 2);
  padding: calc(var(--spacing) * 3);
  max-height: 420px;
  overflow-y: auto;
}
.trail-loading { color: var(--glg-primary, #4285f4); font-size: 0.85rem; }
.trail-summary { font-size: 0.95rem; font-weight: 600; line-height: 1.7; }
.trail-where {
  font-size: 0.8rem;
  color: var(--glg-muted-foreground);
  margin-top: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 2);
  border-top: 1px solid var(--glg-border);
}
.trail-ahead { list-style: none; margin-top: calc(var(--spacing) * 2); }
.trail-ahead li { font-size: 0.85rem; color: var(--glg-muted-foreground); padding: 3px 0; }
.trail-ahead b { color: var(--glg-primary, #4285f4); }
.trail-empty { color: var(--glg-muted-foreground); font-size: 0.85rem; line-height: 1.6; }

/* 徒步路线列表 */
.trail-route-card {
  border: 1px solid var(--glg-border);
  border-radius: calc(var(--radius) * 2);
  padding: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 3);
}
.trail-route-head { display: flex; align-items: center; justify-content: space-between; }
.trail-route-name { font-size: 0.95rem; font-weight: 700; }
.trail-route-badge {
  font-size: 0.7rem;
  color: #c26a00;
  background: rgba(255, 149, 0, 0.15);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.trail-route-meta { font-size: 0.78rem; color: var(--glg-muted-foreground); margin-top: 4px; }
.trail-route-note { font-size: 0.8rem; color: var(--glg-muted-foreground); margin-top: calc(var(--spacing) * 2); line-height: 1.7; }
.trail-route-permit {
  font-size: 0.75rem;
  color: #c26a00;
  background: rgba(255, 149, 0, 0.1);
  border-radius: calc(var(--radius) * 1.5);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 2);
  line-height: 1.6;
}
.trail-wp-list { list-style: none; margin-top: calc(var(--spacing) * 2); }
.trail-wp { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--glg-border); }
.trail-wp:last-child { border-bottom: none; }
.trail-wp-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--glg-primary, #4285f4);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.trail-wp-body { display: flex; flex-direction: column; }
.trail-wp-name { font-size: 0.85rem; font-weight: 600; }
.trail-wp-alt { font-size: 0.72rem; color: var(--glg-primary, #4285f4); margin-top: 1px; }
.trail-wp-note { font-size: 0.72rem; color: var(--glg-muted-foreground); margin-top: 1px; line-height: 1.5; }

.ai-config-hint {
  display: block;
  font-size: 0.75rem;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ===== AI 输入区（[E] 底部） =====
 * 顶部细分隔线 + 输入框 + 发送按钮 */
.ai-input-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 3.5);
  border-top: 1px solid var(--glg-border);
  margin-top: calc(var(--spacing) * 3);
  flex-shrink: 0;           /* 修复输入框消失：输入栏不被压缩，始终固定在卡片底部 */
}
.ai-input-row .input { flex: 1; }

/* ===== AI 回答语音播放器（[G]） =====
 * 紧凑播放条：静默背景 + 文字 + 控件 */
.player-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
  background: var(--glg-muted);
  border-radius: var(--glg-radius-xl);
}
.player-bar .player-text {
  font-size: 0.82rem;
  color: var(--glg-muted-foreground);
  flex: 1;
  min-width: 0;
}
.player-bar .player-controls {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  flex-shrink: 0;
}
/* 播放器空闲态：控件灰显不可点 */
.player-bar.idle .player-controls { opacity: 0.45; pointer-events: none; }


/* ============================================================
 * 以下为 script.js 动态生成内容所需的兼容样式
 * 设计稿未含，但 script.js 会动态生成这些 class 的元素
 * 保持设计系统风格（Google 设计系统），不破坏视觉一致性
 * ============================================================ */

/* ===== AI 配置面板（aiConfigArea，默认隐藏） =====
 * script.js 通过 display:none/block 控制显隐 */
.ai-config-area {
  margin-bottom: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  background: var(--glg-card);
  border: 1px solid var(--glg-border);
  border-radius: var(--glg-radius-xl);
}
.ai-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--spacing) * 3);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--glg-foreground);
}
/* 关闭按钮：右上角 × */
.btn-close-config {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--glg-radius-md);
  font-size: 1.2rem;
  color: var(--glg-muted-foreground);
  line-height: 1;
}
.btn-close-config:hover { background: var(--glg-muted); color: var(--glg-foreground); }
.ai-config-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
}
.ai-config-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--glg-muted-foreground);
}
.ai-config-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 1.5);
}
.ai-config-actions .btn { flex: 1; }
.btn-save-config { /* 保存按钮用 .btn-primary 主色 */ }
.btn-clear-config { /* 清除按钮用 .btn-warn 警告色 */ }
.ai-config-status {
  font-size: 0.8rem;
  color: var(--glg-muted-foreground);
  min-height: 1.2em;
}

/* ===== 讲解内容展示（answerBox 内动态生成） =====
 * script.js 的 showAnswer / ask 会用 innerHTML 填充以下结构 */
.answer-badge {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
  border-radius: var(--glg-radius-md);
  font-size: 0.76rem;
  font-weight: 500;
  background: var(--glg-secondary);
  color: var(--glg-accent-foreground);
  margin-bottom: calc(var(--spacing) * 3);
}
.answer-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--glg-foreground);
  margin-bottom: calc(var(--spacing) * 3);
}
.answer-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--glg-foreground);
  margin-bottom: calc(var(--spacing) * 3);
}
.answer-source {
  font-size: 0.78rem;
  color: var(--glg-muted-foreground);
  margin-top: calc(var(--spacing) * 2);
}

/* 正在播报指示器：三点跳动动画 */
.speaking-indicator {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-size: 0.82rem;
  color: var(--glg-primary);
  margin: calc(var(--spacing) * 3) 0;
}
.speaking-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glg-primary);
  animation: speaking-bounce 1.2s infinite ease-in-out;
}
.speaking-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.speaking-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes speaking-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 占位提示（无法连接后端等错误态） */
.placeholder {
  color: var(--glg-muted-foreground);
  font-size: 0.88rem;
  text-align: center;
  padding: calc(var(--spacing) * 6);
}

/* ===== AI 对话气泡（aiChatHistory 内动态生成） ===== */
.ai-msg {
  display: flex;
  gap: calc(var(--spacing) * 2.5);
  margin-bottom: calc(var(--spacing) * 3);
  align-items: flex-start;
}
.ai-msg-user { flex-direction: row-reverse; }   /* 用户消息靠右 */
.ai-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glg-secondary);
  color: var(--glg-accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ai-bubble {
  max-width: 75%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: var(--glg-radius-xl);
  font-size: 0.88rem;
  line-height: 1.5;
  word-break: break-word;
}
/* 用户气泡：主色背景白字，右下圆角小 */
.ai-bubble-user {
  background: var(--glg-primary);
  color: var(--glg-primary-foreground);
  border-bottom-right-radius: var(--glg-radius-sm);
}
/* AI 气泡：浅灰背景，左下圆角小 */
.ai-bubble-ai {
  background: var(--glg-muted);
  color: var(--glg-foreground);
  border-bottom-left-radius: var(--glg-radius-sm);
}
/* 错误气泡：红色边框 */
.ai-bubble.ai-error {
  background: #fce8e6;
  color: var(--glg-state-error);
  border: 1px solid #f4c4c0;
}

/* 打字指示器（AI 思考中） */
.ai-typing .ai-bubble { display: inline-flex; align-items: center; }
.typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--glg-muted-foreground);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* AI 语音播放器（插在 AI 消息下方） */
.ai-speech {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: var(--glg-muted);
  border-radius: var(--glg-radius-lg);
}
.ai-speech-label {
  font-size: 0.78rem;
  color: var(--glg-muted-foreground);
  white-space: nowrap;
}
.ai-speech audio { flex: 1; height: 36px; }
/* AI 语音暂停/继续按钮（2026-08-17 人类指令） */
.ai-speech-toggle {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: #4a9eff;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-speech-toggle:hover { background: #2f80e0; }
.ai-speech-toggle:active { background: #1f6fc7; }

/* RAG 引用来源标签组 */
.ai-rag-sources {
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: #e8f5e9;
  border-radius: var(--glg-radius-lg);
  border: 1px solid #c8e6c9;
}
.rag-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--glg-state-success);
  white-space: nowrap;
}
.rag-tag {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
  border-radius: var(--glg-radius-md);
  font-size: 0.76rem;
  background: var(--glg-card);
  color: var(--glg-foreground);
  border: 1px solid var(--glg-border);
  cursor: default;
}
/* 命中知识点分类徽章：橙色 */
.rag-tag-cat {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffcc80;
  font-weight: 600;
}

/* 工具调用链（Agent 循环过程，可折叠） */
.ai-tool-chain {
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3);
  background: #f3e5f5;
  border-radius: var(--glg-radius-lg);
  border: 1px solid #e1bee7;
}
.tool-chain-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7b1fa2;
  cursor: pointer;
  user-select: none;
}
.tool-chain-header:hover { text-decoration: underline; }
.tool-chain-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2.5);
}
.tool-chain-item {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
  background: var(--glg-card);
  border-radius: var(--glg-radius-md);
  border: 1px solid var(--glg-border);
  font-size: 0.78rem;
}
.tool-chain-item .tool-name { font-weight: 600; color: #7b1fa2; margin-bottom: calc(var(--spacing) * 1.5); }
.tool-chain-item .tool-args { color: var(--glg-muted-foreground); margin-bottom: calc(var(--spacing) * 1); word-break: break-all; }
.tool-chain-item .tool-result { color: var(--glg-foreground); word-break: break-all; }

/* 操作提示条（替代 confirm 弹窗） */
.ai-tip {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: #e6f4ea;
  color: var(--glg-state-success);
  border-radius: var(--glg-radius-lg);
  font-size: 0.82rem;
  text-align: center;
  animation: tip-fade-in 0.3s ease;
}
@keyframes tip-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 配置已配置状态徽章 */
.badge.status-configured {
  background: #e6f4ea;
  color: var(--glg-state-success);
}

/* 录音中状态：红色脉冲动画（语音输入按钮） */
.icon-btn.recording {
  background: #fce8e6;
  color: var(--glg-state-error);
  animation: recording-pulse 1.5s infinite ease-in-out;
}
/* 录音暂停/继续按钮（2026-08-17 人类指令，动态插入麦克风按钮旁） */
.rec-pause-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid #f2b8b5;
  border-radius: 8px;
  background: #fff;
  color: #c62828;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.rec-pause-btn:hover { background: #fdecea; border-color: #e57373; }
@keyframes recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(234, 67, 53, 0); }
}

/* 识别中状态：紫色旋转动画（语音转写中） */
.icon-btn.transcribing {
  background: #f3e5f5;
  color: #7b1fa2;
  animation: transcribing-spin 1s infinite linear;
}
@keyframes transcribing-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ============================================================
 * 响应式断点
 * ============================================================ */

/* 中等屏（≤1100px）：右侧列下沉到中间列下方，单列布局 */
@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr; }
  .right-col {
    border-left: none;
    border-top: 1px solid var(--glg-border);
  }
}

/* 小屏（≤760px）：侧边栏转为顶部水平滚动条，顶栏简化 */
@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px auto 1fr 48px;   /* 顶栏变矮 56px，侧边栏高度自适应 */
  }
  /* 侧边栏横向排列 */
  .sidebar {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;                          /* 横向滚动 */
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--glg-sidebar-border);
    gap: calc(var(--spacing) * 4);
  }
  .sidebar-section { flex-direction: row; gap: calc(var(--spacing) * 2); }
  .sidebar-section .eyebrow { display: none; } /* 小屏隐藏分区标题 */
  .nav-btn, .kp-btn { width: auto; white-space: nowrap; }
  .main { grid-column: 1; grid-row: 3; }
  .topbar { padding: 0 calc(var(--spacing) * 3); }
  /* 小屏隐藏副标题与部分操作，简化顶栏 */
  .brand-sub { display: none; }
  .topbar-actions .btn-ghost { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); }
}