/* ─── 🍞 AI面包屑导航 ───────────────────────────────
 * 标签含义: @COUPLED=联动文件 @GOTCHA=陷阱 @BUGFIX=Bug修复 @MAGIC=魔数
 * 
 * 面包屑:
 *   @COUPLED 改令牌值需检查: public/css/chat.css, public/css/chat-director.css,
 *            public/css/wf-canvas.css, public/css/group-chat.css,
 *            public/css/main.css, public/css/chat-additional.css,
 *            public/css/desktop-workspace.css, public/chat.html, desktop/renderer/chat.html
 *   @GOTCHA 改令牌需同步两入口 HTML 版本号（public + desktop/renderer）
 *   @WHY 2026-07-11: --tbp-z-* 分层令牌 + --tbp-bg-canvas/border-strong 等工作区令牌
 *   @BUGFIX 2026-07-11: P0-1 z-index 令牌化 + P1-1 四文件令牌空洞填补(新增7色)
 *   @WHY 2026-07-11: 无障碍硬化 — text-dim #6b7280→#8b91a3(对比度~5.5:1满足AA)
 *          + tertiary→旧dim值级联 + ease-spring去弹跳 + prefers-reduced-motion全局
 *   @WHY 2026-07-11: 材质系统令牌 — 玻璃态(glass-*)+深度(depth-*)+赤金点缀(gold-divider/glow)
 *          +悬浮层(surface-raised)替代bg-secondary滥用+发光边框(border-glow-*)
 *   @WHY 2026-07-26: v1.3 UI视觉大优化·地基（用户定稿）— 流光(border-flow/nav-flow)
 *          +玻璃透底(glass-panel/head/input/code)+品牌渐变带(grad-flow)+自绘图标工具类(tbp-ic)
 *          只加不改，界面零变化；施工顺序见 📖 UI视觉大优化-设计说明书-2026-07-26.md 第三节
 *   📖 定稿: 开发文档/03-架构设计/UI视觉大优化-设计说明书-2026-07-26.md（八件套）
 *   📖 预览: design/chat-redesign-preview-v4.html（用户已拍板）
 * ──────────────────────────────────────────────── */
/* TBP 统一设计令牌 (Design System)
 * 版本: v1.3 | 2026-07-26
 * 所有页面共用。页面专属样式由各自的 .css 覆盖。
 */

:root {
  /* ===== 核心品牌色 ===== */
  /* 赛博紫 — AI/科技感主色 */
  --tbp-accent:         #667eea;
  --tbp-accent-hover:   #5a6fd6;
  --tbp-accent-light:   #8899ff;
  --tbp-accent-dark:    #4a5cc4;

  /* 赤金 — 社区/价值感辅色 */
  --tbp-gold:           #c9a96e;
  --tbp-gold-light:     #e4c87a;
  --tbp-gold-dark:      #b8943a;

  /* ===== 背景系统 ===== */
  --tbp-bg-primary:     #0f1117;
  --tbp-bg-secondary:   #1a1d27;
  --tbp-bg-tertiary:    #0a0a0a;
  --tbp-bg-input:       #0f1117;
  --tbp-bg-hover:       #22263a;

  /* ===== 文字系统 ===== */
  --tbp-text-primary:   #f3f4f6;
  --tbp-text-secondary: #d1d5db;
  --tbp-text-tertiary:  #9ca3af;
  --tbp-text-dim:       #8b91a3;
  --tbp-text-muted:     #4b5563;

  /* ===== 边框系统 ===== */
  --tbp-border:         #252a3a;
  --tbp-border-light:   #1e293b;
  --tbp-border-glow:    #667eea;

  /* ===== 功能色 ===== */
  --tbp-success:        #2ecc71;
  --tbp-success-bg:     #0a2e1d;
  --tbp-warning:        #f0a500;
  --tbp-warning-bg:     #1a1f0a;
  --tbp-danger:         #ef4444;
  --tbp-danger-bg:      #2e1a1a;
  --tbp-info:           #667eea;
  --tbp-info-bg:        #1e2a45;

  /* ===== 尺寸系统 ===== */
  --tbp-radius-sm:      6px;
  --tbp-radius-md:      8px;
  --tbp-radius-lg:      12px;
  --tbp-radius-xl:      16px;
  --tbp-radius-full:    9999px;

  /* ===== 间距系统 (4px 基准) ===== */
  --tbp-space-1:        4px;
  --tbp-space-2:        8px;
  --tbp-space-3:        12px;
  --tbp-space-4:        16px;
  --tbp-space-5:        20px;
  --tbp-space-6:        24px;
  --tbp-space-8:        32px;
  --tbp-space-10:       40px;

  /* ===== 字体系统 ===== */
  --tbp-font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI",
                        "PingFang SC", "Microsoft YaHei", sans-serif;
  --tbp-font-mono:      "SF Mono", "Fira Code", "Consolas", monospace;

  --tbp-font-xs:        10px;
  --tbp-font-sm:        12px;
  --tbp-font-base:      14px;
  --tbp-font-md:        16px;
  --tbp-font-lg:        20px;
  --tbp-font-xl:        24px;
  --tbp-font-2xl:       32px;

  /* ===== 阴影 ===== */
  --tbp-shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
  --tbp-shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --tbp-shadow-lg:      0 8px 24px rgba(0,0,0,0.5);
  --tbp-shadow-glow:    0 0 20px rgba(102,126,234,0.15);

  /* ===== 动效时长 ===== */
  --tbp-transition-fast: 0.15s;
  --tbp-transition-base: 0.2s;
  --tbp-transition-slow: 0.3s;



  /* ===== 表面/控件（主题切换用，覆盖 chat.css 硬编码表面） ===== */
  --tbp-surface:        #12141c;
  --tbp-surface-2:      #161a24;
  --tbp-fill:           #272b3a;
  --tbp-fill-hover:     #313750;
  --tbp-line:           #252a3a;
  --tbp-accent-2:       #8b5cf6;
  --tbp-accent-90:      rgba(102,126,234,.9);
  --tbp-accent-15:      rgba(102,126,234,.15);
  --tbp-surface-95:     rgba(14,17,24,.95);

  /* ===== 材质系统 — 玻璃态 / 噪点 / 深度 / 赤金点缀 ===== */
  /* 玻璃态（现代工具感：半透明 + backdrop-blur） */
  --tbp-glass-bg:       rgba(255,255,255,0.03);
  --tbp-glass-border:   rgba(255,255,255,0.06);
  --tbp-glass-blur:     12px;

  /* 噪点纹理 — 覆盖在背景上增加微质感，opacity 0.02 不喧宾夺主 */
  --tbp-noise:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");

  /* 深度阴影 — 替代单一平面阴影，制造"浮起层次" */
  --tbp-depth-1:        0 1px 3px rgba(0,0,0,0.4);
  --tbp-depth-2:        0 4px 16px rgba(0,0,0,0.5);
  --tbp-depth-3:        0 8px 32px rgba(0,0,0,0.6);

  /* 赤金点缀色 — 仅用于分割线/徽章/选中态，不上大面积 */
  --tbp-gold-divider:   rgba(201,169,110,0.18);
  --tbp-gold-glow:      0 0 0 1px rgba(201,169,110,0.15), 0 4px 16px rgba(201,169,110,0.12);

  /* 悬浮层背景 — 比 bg-secondary(#1a1d27) 微亮，替代其滥用 */
  --tbp-surface-raised: #1c1f2a;

  /* 发光边框 — 组件 hover/聚焦时的光环 */
  --tbp-border-glow-accent: 0 0 0 1px rgba(102,126,234,0.15), 0 0 20px rgba(102,126,234,0.08);
  --tbp-border-glow-gold:   0 0 0 1px rgba(201,169,110,0.15), 0 0 20px rgba(201,169,110,0.06);

  /* ===== 动效令牌（主题层/动效使用，唯一真相源） ===== */
  --tbp-ease-spring:    cubic-bezier(0.16, 0, 0.2, 1);
  --tbp-ease-decel:     cubic-bezier(0, 0, 0.2, 1);
  --tbp-ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --tbp-dur-micro:      150ms;
  --tbp-dur-base:       220ms;
  --tbp-dur-slow:       340ms;
  --tbp-glow-soft:      0 0 24px rgba(102,126,234,.22);
  --tbp-glow-accent:    0 0 0 1px rgba(102,126,234,.25), 0 8px 24px rgba(102,126,234,.18);

  /* ===== Z-Index 分层系统 ===== */
  /* 语义化层级，替换全项目魔术数字（999/9999/99999） */
  --tbp-z-dropdown:     100;   /* 下拉菜单、浮动面板、tooltip、@提及弹出 */
  --tbp-z-sticky:       200;   /* 粘性头部、设置遮罩、快照浮层 */
  --tbp-z-modal:        300;   /* 模态框、设置面板、继续生成提示 */
  --tbp-z-toast:        999;   /* Toast 通知（当前值 999，保持兼容） */
  --tbp-z-max:          10000; /* 传送门动画、系统级覆盖（标题栏等） */
  --tbp-z-debug:        99999; /* 错误浮层，永远在最顶层 */

  /* ===== 工作区颜色（P1-1 令牌空洞填补） ===== */
  --tbp-bg-canvas:       #0d1117;  /* 画布底色，比 bg-primary 略深 */
  --tbp-border-strong:   #2d3143;  /* 高强度边框（节点/右键菜单/卡片） */
  --tbp-border-input:    #30363d;  /* 输入框边框 */
  --tbp-bg-input-alt:    #161b22;  /* 备选输入背景（wf-canvas 表单控件） */
  --tbp-separator:       #1f2937;  /* 分隔线/区段间隔 */
  --tbp-fg-bright:       #e5e7eb;  /* 高亮前景（导航项/活动Tab/标题） */
  --tbp-fg-subdued:      #9ca3af;  /* 次级前景（标签/图标/占位文字） */

  /* ===== 布局 ===== */
  --tbp-sidebar-w:      280px;
  --tbp-header-h:       60px;
  --tbp-layout-max:     min(96vw, 1800px);  /* v6.9.12: 超宽屏居中，96vw 平滑过渡 */
  --tbp-content-max:    min(80vw, 1200px);  /* v6.9.12: 内容区最大宽度（聊天等） */
}

/* v6.9.12: 响应式桌面适配 — 平板/小屏/超宽/4K */
@media (max-width: 1100px) {
  :root { --tbp-sidebar-w: 200px; }
}
@media (max-width: 640px) {
  :root { --tbp-sidebar-w: 0px; }
}

/* ===== 无障碍：尊重用户系统动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== GPU/CPU 模型管理控制板（2026-07-12，见 04-方案设计/GPU控制板-需求溯源与设计.md） ===== */
.gpu-ctrl-cluster { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.gpu-ctrl-switch { position: relative; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; font-size: 11px; }
.gpu-ctrl-ico { font-size: 11px; line-height: 1; }
.gpu-ctrl-check { position: absolute; opacity: 0; width: 0; height: 0; }
.gpu-ctrl-track { width: 26px; height: 14px; border-radius: 7px; background: #3a3a4a; transition: background var(--tbp-dur-base); position: relative; display: inline-block; }
.gpu-ctrl-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; transition: transform var(--tbp-dur-base); }
.gpu-ctrl-check:checked + .gpu-ctrl-track { background: #6366f1; }
.gpu-ctrl-check:checked + .gpu-ctrl-track::after { transform: translateX(12px); background: #fff; }
.gpu-ctrl-chip { font-size: 11px; padding: 1px 6px; border-radius: 6px; cursor: pointer; color: var(--tbp-text-dim); }
.gpu-ctrl-chip:hover { color: #fff; }
.gpu-ctrl-btn { background: transparent; border: none; cursor: pointer; font-size: 13px; color: var(--tbp-text-dim); padding: 0 2px; }
.gpu-ctrl-btn:hover { color: #fff; }
/* 🍞 悬浮助手球开关：开启态高亮（赛博紫发光） */
#assistantBallToggle.ab-ball-on { color: #667eea; text-shadow: 0 0 8px rgba(102,126,234,.8); }
.gpu-ctrl-panel { position: fixed; top: 38px; right: 12px; width: 320px; max-height: 80vh; overflow-y: auto; background: #1c1c28; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: var(--tbp-depth-3); z-index: 9999; display: none; flex-direction: column; padding: 10px; color: #e5e7eb; font-size: 12px; }
.gpu-ctrl-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; }
.gpu-ctrl-x { background: transparent; border: none; color: #9ca3af; cursor: pointer; font-size: 14px; }
.gpu-ctrl-x:hover { color: #fff; }
.gpu-ctrl-vram { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gpu-ctrl-vram-bar { flex: 1; height: 8px; border-radius: 4px; background: #2a2a38; overflow: hidden; }
.gpu-ctrl-vram-bar > div { height: 100%; width: 0; background: #4ade80; transition: width var(--tbp-dur-slow); }
.gpu-ctrl-sec { margin-bottom: 8px; }
.gpu-ctrl-sec h4 { margin: 6px 0 4px; font-size: 11px; color: #9ca3af; font-weight: 600; }
.gpu-ctrl-list { display: flex; flex-direction: column; gap: 4px; }
.gpu-ctrl-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: rgba(255,255,255,.04); border-radius: 6px; }
.gpu-ctrl-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpu-ctrl-meta { color: #9ca3af; font-size: 10px; }
.gpu-ctrl-unload { background: #ef4444; border: none; color: #fff; border-radius: 5px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
.gpu-ctrl-unload:hover { background: #dc2626; }
.gpu-ctrl-empty { color: #6b7280; font-size: 11px; padding: 4px; }
.gpu-ctrl-actions { display: flex; gap: 8px; margin-top: 6px; }
.gpu-ctrl-actions button { flex: 1; background: #374151; border: none; color: #e5e7eb; border-radius: 6px; padding: 6px; cursor: pointer; font-size: 11px; }
.gpu-ctrl-actions button:hover { background: #4b5563; }
.gpu-ctrl-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; color: #6b7280; line-height: 1.4; }
/* 🍞 悬停弹出时轻量淡入，缓解视觉卡顿感 */
.gpu-ctrl-panel[style*="flex"] { animation: gpuPanelIn .12s ease-out; }
@keyframes gpuPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 🍞 GPU/CPU 小图标 hover 高亮，暗示"点一下释放占用" */
.gpu-ctrl-chip:hover { background: rgba(255,255,255,.1); }
/* 🍞 2026-07-12: GPU 状态图标点击高亮（专用类，不改字号/padding，仅补齐与 CPU chip 一致的 hover 反馈） */
/* 🍞 @BUGFIX 2026-07-12: 颜色走 CSS 变量 --gpu-fg（由 JS 用 setProperty 注入实时显存色），hover 用 #fff 覆盖。
   旧版 JS 直接写 gpuEl.style.color（inline）会顶掉 :hover 的 color:#fff → 用户报"GPU 高亮不生效"真因（CPU 无 inline color 故正常）。 */
.gpu-ctrl-clickable { border-radius: 6px; padding: 1px 4px; color: var(--gpu-fg, #4ade80); transition: background var(--tbp-dur-fast, .12s), color var(--tbp-dur-fast, .12s); }
.gpu-ctrl-clickable:hover { background: rgba(255,255,255,.1); color: #fff !important; }

/* ================================================================
 * v1.3 (2026-07-26) UI视觉大优化·地基令牌 — 流光 / 玻璃透底 / 自绘图标
 * 🍞 只加不改，本块落地时界面零变化；消费方=施工第2~4步（chat.css/chat-ui.js 等）
 * 📖 定稿: 开发文档/03-架构设计/UI视觉大优化-设计说明书-2026-07-26.md
 * 📖 预览: design/chat-redesign-preview-v4.html
 * 豁免: 本文件为纯声明式令牌+工具类（300行红线豁免）
 * ================================================================ */
:root {
  /* ===== 光影（补充现有 --tbp-glow-*） ===== */
  --tbp-glow-accent-strong: 0 0 18px rgba(102,126,234,0.35);
  --tbp-glow-line:          0 0 10px rgba(102,126,234,0.45);
  --tbp-glow-gold-soft:     0 0 10px rgba(201,169,110,0.14);

  /* ===== 品牌渐变（岗位：边框流光/品牌时刻/实体上色，禁正文阅读区大面积填充） ===== */
  --tbp-grad-brand:   linear-gradient(135deg, #667eea, #c9a96e);
  --tbp-grad-brand-v: linear-gradient(180deg, #667eea, #c9a96e);
  /* 流光带：300% 宽、首尾同色 = 无缝循环流动 */
  --tbp-grad-flow:    linear-gradient(120deg, rgba(102,126,234,.9), rgba(201,169,110,.55), rgba(139,92,246,.45), rgba(102,126,234,.9));

  /* ===== 白透明度边框层级（新界面一律用此，实心灰令牌保留向后兼容） ===== */
  --tbp-border-a1: rgba(255,255,255,0.06);
  --tbp-border-a2: rgba(255,255,255,0.10);
  --tbp-border-a3: rgba(255,255,255,0.12);

  /* ===== 玻璃透底（面板半透明+blur，星空可透出；禁纯黑盖死背景） ===== */
  --tbp-glass-panel: rgba(26,29,39,0.78);
  --tbp-glass-head:  rgba(15,17,23,0.55);
  --tbp-glass-input: rgba(22,26,36,0.68);
  --tbp-glass-code:  rgba(13,17,23,0.55);

  /* ===== 聚焦光环（紫） ===== */
  --tbp-focus-ring: 0 0 0 3px rgba(102,126,234,0.18), 0 0 18px rgba(102,126,234,0.12);
}

/* ===== 边框光影流转（包裹框统一语言：工具卡片7s/代码块9s/发送5s/输入框聚焦6s/头像6~7s） ===== */
@keyframes tbp-border-flow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }

/* ===== 导航选中项：从左到右慢速扫光（标示"正在此条目"） ===== */
@keyframes tbp-nav-flow {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* ===== 通用旋转（加载 spinner：缺口圆环旋转；工具卡片进行中等加载态用） ===== */
@keyframes tbp-spin { to { transform: rotate(360deg); } }

/* 工具类：流光边框包裹（须配合 border:1.5px solid transparent + 双层 background 使用） */
.tbp-border-flow {
  border: 1.5px solid transparent;
  background-size: 100% 100%, 300% 100%;
  animation: tbp-border-flow 7s linear infinite;
}

/* 工具类：自绘 SVG 图标（24 viewBox / 线性描边 / currentColor 继承文字色 / 可发光）
   @WHY 2026-07-26: UI 图标自绘化（定稿第5件）— emoji 不可上色/跨平台渲染不一/行框随系统
        字体度量浮动（菜单高度事故实锤）。UI 图标一律 .tbp-ic；消息内容级 emoji 保留不动。 */
.tbp-ic {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.12em; flex: none;
}