/* 动态背景（2026-09-08 第二版）——独立的一层，不管布局、不管对话状态、不管资料排序。
 * 第二版：渲染层从 .main 里挪到 body 下、fixed 铺满整个应用外壳（左侧对话栏、顶栏、主区共享同一条
 * 连续的光幕，侧栏改成半透明磨砂——见 chat.css 的 .rail / .topbar）。
 * 颜料刻意不复用语义色 --accent：薄荷只表示状态。四套主题各三色 + 雾色，跟 ambient-background.js 的
 * THEMES 表同一组数（那边喂给着色器，这边给静态渐变和主题卡片）。
 * 三个颜料 token 注册成可过渡的 @property：换主题时静态渐变和主题卡片的颜色跟着滑过去，不跳色。 */
@property --ambient-a { syntax: '<color>'; inherits: true; initial-value: #2fb9a3; }
@property --ambient-b { syntax: '<color>'; inherits: true; initial-value: #5c86b8; }
@property --ambient-c { syntax: '<color>'; inherits: true; initial-value: #dfe9ec; }

:root,
[data-theme="dark"] {
    --ambient-a: #2fb9a3;   /* 青绿 */
    --ambient-b: #5c86b8;   /* 青灰蓝 */
    --ambient-c: #dfe9ec;   /* 银光 */
    --ambient-haze: 16%;
    transition: --ambient-a 700ms ease, --ambient-b 700ms ease, --ambient-c 700ms ease;
}

[data-theme="light"] {
    /* 浅底：颜料比底色深一档半，高光不能是纯白（白上加白等于没画）——跟 ambient-background.js 的 THEMES 同一组数 */
    --ambient-a: #3d97a6;   /* 深冰青 */
    --ambient-b: #6d8cc0;   /* 暮蓝 */
    --ambient-c: #d6e6ec;   /* 带色的亮边 */
    --ambient-haze: 34%;
}

[data-theme="indigo"] {
    --ambient-a: #4f86e6;   /* 极光蓝 */
    --ambient-b: #8c6ce0;   /* 紫 */
    --ambient-c: #cfe0ff;   /* 冰蓝亮边 */
    --ambient-haze: 24%;
}

[data-theme="warm"] {
    /* 同浅底规则：金要沉一档，高光带米色不带白 */
    --ambient-a: #b8843f;   /* 古铜金 */
    --ambient-b: #c99f68;   /* 暖砂 */
    --ambient-c: #f1dbb0;   /* 米色高光 */
    --ambient-haze: 32%;
}

/* fixed 铺满视口、z-index -1：在根堆叠上下文里画在 body 底色之上、一切内容之下。
   .rail（z 10）和 .main（z 5）都是定位过的，各自盖在这层上；它们的底色改成半透明后光幕才透得过来。 */
.ambient-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity 700ms ease;
    /* 环境光：两团顺着丝带走向的柔光，光幕（canvas）没起来时这就是全部画面 */
    background:
        radial-gradient(ellipse at 78% 38%, color-mix(in srgb, var(--ambient-a) var(--ambient-haze), transparent), transparent 56%),
        radial-gradient(ellipse at 42% 90%, color-mix(in srgb, var(--ambient-b) var(--ambient-haze), transparent), transparent 53%),
        /* 左下一团顺着后层丝带落到左栏后面：左栏是磨砂的，这团光是它能透出来的主要东西 */
        radial-gradient(ellipse 36% 50% at 8% 70%, color-mix(in srgb, var(--ambient-a) calc(var(--ambient-haze) * 1.7), transparent), transparent 100%),
        radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--ambient-c) calc(var(--ambient-haze) * 0.5), transparent), transparent 46%);
}

.ambient-background canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1000ms ease;
}

.ambient-background[data-renderer="webgl"] canvas { opacity: 1; }

/* 阅读轴上罩一层底色的径向遮罩：正文所在的中央偏左压暗，两翼留给光幕。不是玻璃板，是渐隐。 */
.ambient-background::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 椭圆钉在对话列（视口 56% 处）而不是整页中心：左栏（0–268px）不在遮罩里，光幕在那儿是全亮的 */
    background: radial-gradient(ellipse 42% 60% at 56% 48%, color-mix(in srgb, var(--bg) 82%, transparent), transparent 100%);
}

/* 视觉重心：空白时光幕全开；有了聊天内容压到 0.3（正文后面亮度和动感都退），画布打开再退一档。
   设置 › 主题「淡化背景」关着时（<html class="ambient-no-dim">，ambient-background.js 挂、index.html 首帧前预置）这几条都不生效，光幕一直全亮 */
:root:not(.ambient-no-dim) body:has(#message-list > *) .ambient-background { opacity: 0.3; }
:root:not(.ambient-no-dim) body.artifact-open .ambient-background { opacity: 0.16; }

/* 设置弹窗的极光帘（ambient-background.js 里 ensureAurora 建的画布）：铺满遮罩层、在弹窗之下，
   只在弹窗打开时画。遮罩自己那层模糊照旧盖住页面，极光画在模糊之上、弹窗之下。 */
.ambient-aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
}
.ambient-aurora.is-live { opacity: 1; }
.settings-dialog-backdrop > .settings-dialog { z-index: 1; }

/* 主题卡片的预览涂同一组颜料，不另起四个渲染器 */
.theme-swatch-body {
    background:
        radial-gradient(ellipse at 92% 25%, color-mix(in srgb, var(--ambient-a) 34%, transparent), transparent 65%),
        linear-gradient(145deg, transparent 38%, color-mix(in srgb, var(--ambient-b) 24%, transparent) 65%, transparent 90%);
}

/* 开关：长相完全借协同面板那枚 .collab-switch（chat.css），这里只把原生 checkbox 的默认外观抹掉，
   并把它的 :checked 映射到那枚开关的开/关两态（那边靠 is-off 类，这边是原生状态）。 */
.ambient-motion-switch {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: block;
}
.ambient-motion-switch:not(:checked) { background: var(--surface-3); }
.ambient-motion-switch:not(:checked)::after { right: 17px; }
.ambient-motion-switch:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 2px; }

@media (max-width: 720px) {
    .ambient-background { opacity: 0.72; }
    :root:not(.ambient-no-dim) body:has(#message-list > *) .ambient-background { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-background, .ambient-background canvas { transition: none; }
    :root, [data-theme="dark"] { transition: none; }
}

@media (forced-colors: active), print {
    .ambient-background { display: none; }
}

/* Sparse dust stays at the periphery; the host controls reading attenuation. */
.ambient-dust { position: absolute; inset: 0; pointer-events: none; }
.ambient-dust i { position: absolute; display: block; border-radius: 50%; background: var(--ambient-c); box-shadow: 0 0 5px color-mix(in srgb, var(--ambient-a) 45%, transparent); opacity: .35; }
[data-theme="light"] .ambient-dust i, [data-theme="warm"] .ambient-dust i { background: var(--ambient-a); box-shadow: none; }
@media (max-width:720px) { .ambient-dust i:nth-child(2n) { display:none; } }

/* 星光在画布里（ambient-background.js 的 gl.POINTS 那趟）：跟丝带同一张画布、同一套压暗与暂停，这里没有它的样式。 */