/* ============================================================
 * 氛围画布（出厂默认开启）：极光流动背景 + 玻璃态顶栏 + 出厂玻璃节点/能量连线
 * 全部效果挂在 body.ambient / body.factory-fresh 两个类上，关掉即完全恢复原样。
 * 可读性护栏（产品铁律）：详情面板/正文区一概不动；出厂玻璃态只在欢迎节点集上生效，
 * 用户一旦写真实内容（标题/详情一改）立刻退回常规高可读样式。
 * 动画全部是 CSS keyframes（GPU 合成，不烧 CPU）；prefers-reduced-motion 时全部静止。
 * ============================================================ */

/* ---- 极光流动背景层（#ambientBg 由 mindmap-ambient.js 注入 #canvas 内，z-index 0 垫在最底） ----
   普通画布：层自身不带底色（透明），画布底色归主题（body.ambient #canvasWrap 用 --mp-bg-canvas）——
   浅色主题开氛围不再是黑画布（黑底会把浅色主题的深字节点衬到看不清）；
   出厂门面（factory-fresh 欢迎节点集）：保留深色渐变底，「第一秒震撼」不变 */
#ambientBg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}
body.ambient #ambientBg { display: block; }
body.factory-fresh #ambientBg {
    background: linear-gradient(160deg, #0A0A0F 0%, #12081f 45%, #1A0B2E 100%);
}
/* 画布底色跟主题亮暗（default/四季/雾白玻璃=浅底，dark/暗夜琉璃=深底）；出厂门面永远深底 */
body.ambient #canvasWrap { background-color: var(--mp-bg-canvas, #0A0A0F); }
body.ambient.factory-fresh #canvasWrap { background-color: #0A0A0F; }
/* 动效主题（四季/双璃）接管时画布底色归主题：--mp-bg-canvas 随主题变量取值（含玻璃主题自带的底色），
   夏炽晴/雨相位的 background-color 规则特异性更高不受影响。
   用 background-color 不用 background 简写——简写会清掉主题自带的 background-image（如冬凛的梅枝底纹） */
body.fx-owned #canvasWrap { background-color: var(--mp-bg-canvas, #f0f2f6); background-image: none; }
body.ambient #canvas { background: transparent; }

#ambientBg .amb-blob {
    position: absolute;
    width: 1150px;
    height: 1150px;
    border-radius: 50%;
    /* blur 64：视觉与 90px 几乎无差，但全屏大层模糊半径是 GPU 大头（低端机「非常卡」主因） */
    filter: blur(64px);
    opacity: .55;
    will-change: transform;
}
#ambientBg .amb-blob.b1 {
    left: -300px; top: -260px;
    background: radial-gradient(circle at 35% 35%, rgba(92, 84, 236, .5), transparent 62%);
    animation: ambDrift1 26s ease-in-out infinite;
}
#ambientBg .amb-blob.b2 {
    right: -260px; top: 12%;
    background: radial-gradient(circle at 60% 40%, rgba(168, 85, 247, .38), transparent 62%);
    animation: ambDrift2 32s ease-in-out infinite;
}
#ambientBg .amb-blob.b3 {
    left: 22%; bottom: -420px;
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .26), transparent 60%);
    animation: ambDrift3 38s ease-in-out infinite;
}
/* 「呼吸」：整层轻微明暗起伏 */
#ambientBg { animation: ambBreathe 9s ease-in-out infinite; }

@keyframes ambDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(340px, 220px) scale(1.18); }
}
@keyframes ambDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1.05); }
    50% { transform: translate(-380px, 260px) scale(.92); }
}
@keyframes ambDrift3 {
    0%, 100% { transform: translate(0, 0) scale(.95); }
    50% { transform: translate(260px, -300px) scale(1.15); }
}
@keyframes ambBreathe {
    0%, 100% { opacity: .92; }
    50% { opacity: 1; }
}

/* ---- 玻璃态顶栏 / 底部聊天栏（毛玻璃透出背景，界面浑然一体） ---- */
body.ambient #appHeader {
    background: rgba(14, 13, 26, .58);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
body.ambient #appHeader h1 { color: #eaeaf4; }
body.ambient #appHeader a { color: #e6e6f2; }
body.ambient #chatBar {
    background: rgba(14, 13, 26, .55);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
/* 加载遮罩跟随亮暗（浅底画布不闪黑屏） */
body.ambient #loadingOverlay {
    background: #0A0A0F !important;
    color: #b9b9d6;
}
body.ambient.ambient-light #loadingOverlay {
    background: #f0f2f6 !important;
    color: #4a5568;
}

/* ---- 节点默认交互反馈（ambient 即生效）：悬停上浮 + 阴影放大 ----
   18ms 级即时触发 + 0.18s 轻快曲线（弹性曲线的过冲尾会让人觉得「慢半拍」，这里要的是跟手） */
body.ambient .node-box {
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
body.ambient .node-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 22px rgba(124, 140, 255, .22);
}
/* 节点拖拽时禁用悬停上浮，防跟手错觉 */
body.ambient .node-box.dragging:hover { transform: none; }

/* ---- 出厂玻璃态（仅欢迎节点集：半透明亚克力 + 霓虹扫光描边） ---- */
body.factory-fresh .node-box {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 34px rgba(0, 0, 0, .45);
}
/* 霓虹扫光：锥形渐变沿边框旋转（@property 驱动角度；不支持的浏览器退化为柔和光晕） */
@property --amb-neon-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body.factory-fresh .node-box::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 15px;
    padding: 1.5px;
    background: conic-gradient(from var(--amb-neon-angle),
        transparent 0deg, rgba(124, 140, 255, .9) 40deg, rgba(192, 132, 252, .9) 80deg, transparent 130deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ambNeonSweep 4.5s linear infinite;
    z-index: 3;
}
@keyframes ambNeonSweep {
    to { --amb-neon-angle: 360deg; }
}
body.factory-fresh .node-box .node-title {
    background: transparent;
    color: #eef0ff;
    border-bottom-color: rgba(255, 255, 255, .1);
}
body.factory-fresh .node-box .node-meta { color: #9aa0c8; }

/* ---- 连线艺术化：渐变描边（渐变 def 由 JS 注入 #edgeLayer） ---- */
body.factory-fresh #edgeLayer path[opacity="0.6"] {
    stroke: url(#ambEdgeGrad);
    opacity: .9;
}
/* 能量光点元素由 JS 注入（circle.amb-energy + animateMotion），这里只管发光 */
#edgeLayer .amb-energy {
    filter: drop-shadow(0 0 4px rgba(140, 160, 255, .95));
}

/* ---- 主题自带动效接管时，出厂极光层让位（class 由 theme-fx.js 管理） ---- */
body.fx-owned #ambientBg { display: none !important; }

/* ---- 减弱动效偏好：全部静止，保留静态极光底 ---- */
@media (prefers-reduced-motion: reduce) {
    #ambientBg, #ambientBg .amb-blob,
    body.factory-fresh .node-box::before { animation: none !important; }
    body.ambient .node-box { transition: none; }
}
body.reduced-motion #ambientBg, body.reduced-motion #ambientBg .amb-blob,
body.reduced-motion.factory-fresh .node-box::before { animation: none !important; }

/* ---- 弱档（ambient-low）：漂移减速一倍、色团更淡、不呼吸、霓虹扫光减半速 ----
   企业级动效口径：慢、低对比、可关闭——弱档就是「只要一丝活意」 */
body.ambient-low #ambientBg { animation: none; }              /* 关呼吸 */
body.ambient-low #ambientBg .amb-blob { opacity: .3; }        /* 更淡 */
body.ambient-low #ambientBg .amb-blob.b1 { animation-duration: 52s; }
body.ambient-low #ambientBg .amb-blob.b2 { animation-duration: 64s; }
body.ambient-low #ambientBg .amb-blob.b3 { animation-duration: 76s; }
body.ambient-low.factory-fresh .node-box::before { animation-duration: 9s; }

/* ===== 性能：移动端玻璃顶栏/聊天栏模糊降档（20px 实时模糊对手机 GPU 是持续重负载，8px 观感几乎不变） ===== */
@media (max-width: 768px) {
    body.ambient #appHeader, body.ambient #chatBar {
        backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
    }
}

/* ===== 性能模式（body.mp-perf，见 js/perf-mode.js：PWA 安装版/低端机自动降级） =====
   与 common.css 末段同款规则（mindmap 页不引 common.css，这里单独带一份）：
   关全站 backdrop-filter、氛围光团整层、场景/动效层大模糊降档；画布底色与主题色全保留。 */
body.mp-perf, body.mp-perf * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.mp-perf #ambientBg { display: none !important; }
body.mp-perf #mp-scene-bg > *, body.mp-perf #mp-scene-bg > * > * { filter: blur(12px) !important; }
body.mp-perf #themeFxLayer .fx-band { filter: blur(20px) !important; }
body.mp-perf #themeFxLayer .fx-sun, body.mp-perf #themeFxLayer .fx-dim { filter: none !important; }