/* ============================================================
   future-theme.css — 未来 UI 主题层（#1290 · B 方向：自适应深色 + 去趋势化）
   加载顺序：必须排在 skin.css 之后（index.html 中已置于 skin.css 链接之后）。
   作用域铁律：
     · 仅定义 html[data-skin="midnight"] / html[data-skin="auto"] 两套「新皮肤」；
     · 以及 .fs-* 组件类（命令面板 / AI 抽屉）。
     · #119 起在文件末尾以「叠加覆盖」对现有 5 套皮肤做去趋势化微调
       （玻璃更实 + aurora 渐变收敛），不改动 skin.css 一行；删除 #119 段即可完整回滚，零回归。
   设计取向：内容优先、克制、耐看——深色态用实色表面 + 细描边替代重玻璃/霓虹渐变，
   降低「2024 玻璃拟态」的时效性，向「未来 50 年」的耐久审美靠拢。

   变量名与 skin.css 完全同口径（--shell-* / --cp-* / --top-* / --primary* /
   --text* / --bg* / --glass* / --border*），故 content-premium.css 既有组件
   全部自动跟随，无需重绑。
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   深空黑（midnight）：真·深色工作态
   侧栏与内容区同为深色，品牌色用提亮靛蓝（在深底上可读、不刺眼）。
   ─────────────────────────────────────────────────────────── */
html[data-skin="midnight"] {
  --shell-bg: #0a0e16;
  --shell-bg-soft: rgba(255, 255, 255, .05);
  --shell-group: #7c879a;
  --shell-hair: rgba(255, 255, 255, .09);
  --shell-hair-strong: rgba(255, 255, 255, .16);
  --shell-nav-fg: #c2cbda;
  --shell-nav-fg-hover: #ffffff;
  --shell-nav-bg-hover: rgba(255, 255, 255, .07);
  --shell-active-bg: rgba(129, 140, 248, .18);
  --shell-active-fg: #a5b4fc;
  --shell-brand-fg: #ffffff;
  --shell-brand-sub: #7c879a;
  --shell-footer-fg: #7c879a;
  --shell-search-bg: rgba(255, 255, 255, .05);
  --shell-search-bd: rgba(255, 255, 255, .12);
  --bg-sidebar-grad: var(--shell-bg);

  --cp-canvas: #0b0f17;
  --cp-brand: #818cf8;
  --cp-brand-2: #a5b4fc;
  /* 去趋势：aurora 渐变压低饱和度，避免霓虹感 */
  --cp-aurora: linear-gradient(100deg, #6366f1 0%, #7c3aed 52%, #8b5cf6 100%);
  --cp-ring: rgba(129, 140, 248, .30);
  --cp-tint: rgba(129, 140, 248, .10);
  --cp-surface: #131a26;
  --cp-surface-2: #0f1521;
  --cp-hi: rgba(255, 255, 255, .96);
  --cp-hair: rgba(255, 255, 255, .10);
  --cp-hair-strong: rgba(255, 255, 255, .18);
  --cp-text: #e6ebf2;
  --cp-text-2: #aab4c4;
  --cp-text-3: #7c879a;

  --top-bg: #0e131d;
  --top-border: rgba(255, 255, 255, .10);
  --top-fg: #e6ebf2;
  --top-fg-dim: #8b97a9;
  --top-hover-bg: rgba(255, 255, 255, .08);
  --top-chip-bg: rgba(255, 255, 255, .07);
  --top-chip-fg: #cdd5e2;
  --top-chip-bd: rgba(255, 255, 255, .14);
  --top-input-bg: rgba(255, 255, 255, .06);
  --top-input-bd: rgba(255, 255, 255, .14);
  --top-panel-bg: #131a26;
  --top-panel-fg: #e6ebf2;
  --cs-panel-bg: #131a26;

  --primary: var(--cp-brand);
  --primary-light: var(--cp-brand-2);
  --primary-dark: #4f46e5;
  --primary-gradient: var(--cp-aurora);
  --primary-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, .14) 0%, rgba(139, 92, 246, .14) 100%);
  --text: var(--cp-text);
  --text-light: var(--cp-text-2);
  --text-muted: var(--cp-text-3);
  --border: rgba(255, 255, 255, .14);
  --border-light: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .22);
  --bg: var(--cp-canvas);
  --bg-page: var(--cp-canvas);
  --bg-card: var(--cp-surface);
  --bg-subtle: var(--cp-surface-2);
  /* 去趋势：玻璃更实、模糊更轻，避免「浮」的廉价感 */
  --glass-bg: rgba(19, 26, 38, .70);
  --glass-bg-strong: rgba(19, 26, 38, .86);
  --glass-border: rgba(255, 255, 255, .12);
}

/* 去趋势细化（仅 midnight）：收敛玻璃模糊、卡片用实色薄描边 */
html[data-skin="midnight"] .ds-glass,
html[data-skin="midnight"] .glass {
  backdrop-filter: blur(4px) saturate(112%);
  border: 1px solid var(--glass-border);
}

/* ───────────────────────────────────────────────────────────
   自适应（auto）：跟随系统 prefers-color-scheme
   浅色态 = 现行晨光白（与未换肤逐像素一致）；深色态 = 上方 midnight 配色。
   作用：首次进入即按系统主题呈现，不强迫用户在 6 套里挑。
   ─────────────────────────────────────────────────────────── */
html[data-skin="auto"] {
  /* 浅色默认（= dawn） */
  --shell-bg: #f1f5f9;
  --shell-bg-soft: rgba(15, 23, 42, .03);
  --shell-group: #64748b;
  --shell-hair: rgba(15, 23, 42, .08);
  --shell-hair-strong: rgba(15, 23, 42, .14);
  --shell-nav-fg: #334155;
  --shell-nav-fg-hover: #0f172a;
  --shell-nav-bg-hover: rgba(15, 23, 42, .05);
  --shell-active-bg: rgba(99, 102, 241, .12);
  --shell-active-fg: #4f46e5;
  --shell-brand-fg: #0f172a;
  --shell-brand-sub: #64748b;
  --shell-footer-fg: #64748b;
  --shell-search-bg: rgba(15, 23, 42, .04);
  --shell-search-bd: rgba(15, 23, 42, .09);
  --bg-sidebar-grad: var(--shell-bg);
  --cp-canvas: #f4f7fb;
  --cp-brand: #6366f1;
  --cp-brand-2: #818cf8;
  --cp-aurora: linear-gradient(100deg, #6366f1 0%, #7c3aed 52%, #8b5cf6 100%);
  --cp-ring: rgba(99, 102, 241, .18);
  --cp-tint: rgba(99, 102, 241, .06);
  --cp-surface: #ffffff;
  --cp-surface-2: #f7f9fc;
  --cp-hi: rgba(255, 255, 255, .92);
  --cp-hair: rgba(15, 23, 42, .10);
  --cp-hair-strong: rgba(15, 23, 42, .16);
  --cp-text: #0f172a;
  --cp-text-2: #475569;
  --cp-text-3: #94a3b8;
  --top-bg: rgba(255, 255, 255, .92);
  --top-border: rgba(15, 23, 42, .08);
  --top-fg: #0f172a;
  --top-fg-dim: #64748b;
  --top-hover-bg: #f1f5f9;
  --top-chip-bg: #ffffff;
  --top-chip-fg: #334155;
  --top-chip-bd: rgba(15, 23, 42, .10);
  --top-input-bg: rgba(15, 23, 42, .03);
  --top-input-bd: rgba(15, 23, 42, .09);
  --top-panel-bg: #ffffff;
  --top-panel-fg: #0f172a;
  --cs-panel-bg: #ffffff;
  --primary: var(--cp-brand);
  --primary-light: var(--cp-brand-2);
  --primary-dark: #4338ca;
  --primary-gradient: var(--cp-aurora);
  --primary-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, .10) 0%, rgba(139, 92, 246, .10) 100%);
  --text: var(--cp-text);
  --text-light: var(--cp-text-2);
  --text-muted: var(--cp-text-3);
  --border: #c9ccd3;
  --border-light: #e4e8f0;
  --border-strong: #c6cbd5;
  --bg: var(--cp-canvas);
  --bg-page: var(--cp-canvas);
  --bg-card: var(--cp-surface);
  --bg-subtle: var(--cp-surface-2);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-bg-strong: rgba(255, 255, 255, .86);
  --glass-border: rgba(15, 23, 42, .10);
}

@media (prefers-color-scheme: dark) {
  html[data-skin="auto"] {
    --shell-bg: #0a0e16;
    --shell-bg-soft: rgba(255, 255, 255, .05);
    --shell-group: #7c879a;
    --shell-hair: rgba(255, 255, 255, .09);
    --shell-hair-strong: rgba(255, 255, 255, .16);
    --shell-nav-fg: #c2cbda;
    --shell-nav-fg-hover: #ffffff;
    --shell-nav-bg-hover: rgba(255, 255, 255, .07);
    --shell-active-bg: rgba(129, 140, 248, .18);
    --shell-active-fg: #a5b4fc;
    --shell-brand-fg: #ffffff;
    --shell-brand-sub: #7c879a;
    --shell-footer-fg: #7c879a;
    --shell-search-bg: rgba(255, 255, 255, .05);
    --shell-search-bd: rgba(255, 255, 255, .12);
    --bg-sidebar-grad: var(--shell-bg);
    --cp-canvas: #0b0f17;
    --cp-brand: #818cf8;
    --cp-brand-2: #a5b4fc;
    --cp-aurora: linear-gradient(100deg, #6366f1 0%, #7c3aed 52%, #8b5cf6 100%);
    --cp-ring: rgba(129, 140, 248, .30);
    --cp-tint: rgba(129, 140, 248, .10);
    --cp-surface: #131a26;
    --cp-surface-2: #0f1521;
    --cp-hi: rgba(255, 255, 255, .96);
    --cp-hair: rgba(255, 255, 255, .10);
    --cp-hair-strong: rgba(255, 255, 255, .18);
    --cp-text: #e6ebf2;
    --cp-text-2: #aab4c4;
    --cp-text-3: #7c879a;
    --top-bg: #0e131d;
    --top-border: rgba(255, 255, 255, .10);
    --top-fg: #e6ebf2;
    --top-fg-dim: #8b97a9;
    --top-hover-bg: rgba(255, 255, 255, .08);
    --top-chip-bg: rgba(255, 255, 255, .07);
    --top-chip-fg: #cdd5e2;
    --top-chip-bd: rgba(255, 255, 255, .14);
    --top-input-bg: rgba(255, 255, 255, .06);
    --top-input-bd: rgba(255, 255, 255, .14);
    --top-panel-bg: #131a26;
    --top-panel-fg: #e6ebf2;
    --cs-panel-bg: #131a26;
    --primary: var(--cp-brand);
    --primary-light: var(--cp-brand-2);
    --primary-dark: #4f46e5;
    --primary-gradient: var(--cp-aurora);
    --primary-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, .14) 0%, rgba(139, 92, 246, .14) 100%);
    --text: var(--cp-text);
    --text-light: var(--cp-text-2);
    --text-muted: var(--cp-text-3);
    --border: rgba(255, 255, 255, .14);
    --border-light: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .22);
    --bg: var(--cp-canvas);
    --bg-page: var(--cp-canvas);
    --bg-card: var(--cp-surface);
    --bg-subtle: var(--cp-surface-2);
    --glass-bg: rgba(19, 26, 38, .70);
    --glass-bg-strong: rgba(19, 26, 38, .86);
    --glass-border: rgba(255, 255, 255, .12);
  }
}

/* ═══════════════════════════════════════════════════════════
   #1290 未来 UI 组件样式（命令面板 + AI 抽屉）
   全部使用既有主题变量（--top-* / --primary / --border / --text），
   故浅色/深色/自适应三态下自动正确呈现。
   ═══════════════════════════════════════════════════════════ */

/* ── 命令面板（⌘K） ── */
.fs-palette-root { position: fixed; inset: 0; z-index: 100000; display: none; }
.fs-palette-root.open { display: block; }
.fs-palette-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 11, 18, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.fs-palette {
  position: absolute; top: 13%; left: 50%; transform: translateX(-50%);
  width: min(640px, 92vw);
  background: var(--top-panel-bg, #fff);
  color: var(--top-panel-fg, #0f172a);
  border: 1px solid var(--top-border, rgba(15, 23, 42, .12));
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .35);
  overflow: hidden;
}
.fs-palette-inputrow {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--top-border, rgba(15, 23, 42, .10));
}
.fs-kbd-hint {
  font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: var(--top-chip-bg); color: var(--top-fg-dim);
  border: 1px solid var(--top-chip-bd);
}
.fs-palette-input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--top-panel-fg, #0f172a); font-size: 15px;
}
.fs-palette-input::placeholder { color: var(--top-fg-dim); }
.fs-palette-list { max-height: 52vh; overflow: auto; padding: 6px; }
.fs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  color: var(--top-panel-fg, #0f172a);
}
.fs-item.on, .fs-item:hover { background: var(--top-hover-bg, rgba(15, 23, 42, .06)); }
.fs-item-ico { width: 22px; text-align: center; color: var(--primary, #6366f1); }
.fs-item-title { flex: 1; }
.fs-item-hint {
  font-size: 11px; color: var(--top-fg-dim);
  border: 1px solid var(--top-chip-bd); padding: 1px 7px; border-radius: 999px;
}
.fs-empty { padding: 18px; text-align: center; color: var(--top-fg-dim); }
.fs-palette-foot {
  padding: 8px 14px; font-size: 11px; color: var(--top-fg-dim);
  border-top: 1px solid var(--top-border);
}

/* ── AI 智能体抽屉 ── */
.fs-ai-root { position: fixed; inset: 0; z-index: 100001; display: none; }
.fs-ai-root.open { display: block; }
.fs-ai-backdrop { position: absolute; inset: 0; background: rgba(8, 11, 18, .35); }
.fs-ai-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 94vw);
  background: var(--top-panel-bg, #fff);
  color: var(--top-panel-fg, #0f172a);
  border-left: 1px solid var(--top-border);
  box-shadow: -20px 0 60px rgba(2, 6, 23, .30);
  display: flex; flex-direction: column;
}
.fs-ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--top-border);
}
.fs-ai-title { font-weight: 700; }
.fs-ai-x {
  border: none; background: var(--top-chip-bg); color: var(--top-fg-dim);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
}
.fs-ai-body {
  flex: 1; overflow: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.fs-ai-msg {
  padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  max-width: 92%; white-space: pre-wrap; word-break: break-word;
}
.fs-ai-msg.user { align-self: flex-end; background: var(--primary, #6366f1); color: #fff; }
.fs-ai-msg.ai { align-self: flex-start; background: var(--top-chip-bg); color: var(--top-panel-fg); }
.fs-ai-msg.sys {
  align-self: stretch; background: transparent; color: var(--top-fg-dim);
  font-size: 12.5px; border: 1px dashed var(--top-chip-bd);
}
.fs-ai-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--top-border); }
.fs-chip {
  border: 1px solid var(--top-chip-bd); background: var(--top-chip-bg);
  color: var(--top-chip-fg); padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; cursor: pointer;
}
.fs-ai-inputrow { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--top-border); }
.fs-ai-input {
  flex: 1; border: 1px solid var(--top-input-bd); background: var(--top-input-bg);
  color: var(--top-fg); border-radius: 10px; padding: 9px 12px; outline: none;
}
.fs-ai-send {
  border: none; background: var(--primary, #6366f1); color: #fff;
  border-radius: 10px; padding: 0 16px; cursor: pointer; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   #119 去趋势化反哺 · 现有 5 套皮肤（#1290 设计原则下沉）
   ───────────────────────────────────────────────────────────────
   原则：保持各皮肤品牌色相与既有观感不变，只去除「2024 玻璃拟态 / 霓虹渐变」
   的时效性，向耐久审美靠拢。本段加载在 skin.css 之后（同特异性后者胜出），
   且不改动 skin.css 一行；删除本段即完整回滚。
   两处微调：
     ① 玻璃更实：--glass-bg / --glass-bg-strong 透明度下调（更不透明、更稳重），
        去「浮」的廉价玻璃感（仅影响 .glass/.ds-glass 浮动面 / 抽屉）。
     ② aurora 渐变收敛：把第三停靠点从「高亮霓虹色」收拢到与中停靠点同色系的次亮档，
        保留渐变层次但去 pop 感（影响 .dash-hero / .feat-card::before / 主按钮渐变）。
   ═══════════════════════════════════════════════════════════ */

/* 晨光白（默认 dawn，走 :root 基础值） */
html[data-skin="dawn"] {
  --glass-bg: rgba(255, 255, 255, .80);
  --glass-bg-strong: rgba(255, 255, 255, .93);
  /* 去趋势：去掉 sky-400 第三停靠点，收敛为靛→紫双档耐久渐变 */
  --cp-aurora: linear-gradient(100deg, #6366f1 0%, #7c3aed 55%, #8b5cf6 100%);
}

/* 深海蓝 */
html[data-skin="ocean"] {
  --glass-bg: rgba(244, 250, 253, .80);
  --glass-bg-strong: rgba(244, 250, 253, .93);
  --cp-aurora: linear-gradient(100deg, #0284c7 0%, #0ea5e9 50%, #2ba6db 100%);
}

/* 石墨黑 */
html[data-skin="graphite"] {
  --glass-bg: rgba(249, 250, 251, .80);
  --glass-bg-strong: rgba(249, 250, 251, .93);
  --cp-aurora: linear-gradient(100deg, #4f46e5 0%, #6366f1 50%, #6f74e6 100%);
}

/* 极光紫 */
html[data-skin="aurora"] {
  --glass-bg: rgba(251, 249, 254, .80);
  --glass-bg-strong: rgba(251, 249, 254, .93);
  --cp-aurora: linear-gradient(100deg, #7c3aed 0%, #8b5cf6 50%, #9b7bed 100%);
}

/* 森林绿 */
html[data-skin="forest"] {
  --glass-bg: rgba(247, 252, 249, .80);
  --glass-bg-strong: rgba(247, 252, 249, .93);
  --cp-aurora: linear-gradient(100deg, #047857 0%, #059669 50%, #20b386 100%);
}