/* ───────────── Ultra: the full cinematic experience ─────────────
   Only html.gfx-ultra turns any of this on. Every other level never draws these layers.
   · heavy live blur behind every glass surface
   · gooey lava-lamp slime (SVG metaball filter) drifting behind the app
   · slow glowing pools of ambient light plus accent glows on bubbles, sheets and buttons
   · Ultra never eases off for heat, battery or idling (Auto does that). */

.fx-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
#slimeGoo{display:none}

/* ---------- heavy live blur ---------- */
html.gfx-ultra.slime,
html.gfx-ultra.slime.lite,html.gfx-ultra.slime.battery-low,html.gfx-ultra.slime.heat-paused{--gl-blur:calc(22px + var(--cloud) * 40px)}
html.gfx-ultra.slime :is(.them .bubble,.chip,.seg2,#typing .dots){-webkit-backdrop-filter:saturate(1.8) blur(14px);backdrop-filter:saturate(1.8) blur(14px)}
html.gfx-ultra .modal{-webkit-backdrop-filter:saturate(1.4) blur(26px);backdrop-filter:saturate(1.4) blur(26px)}

/* ---------- glowing ambient light + gooey lava-lamp slime ----------
   Slow drifting pools of coloured light, with a metaball field (the same maths as an SVG goo filter) drawn by ultra.js into a tiny canvas and
   smoothly stretched to fill the screen, so blobs melt together and pinch apart at 60/120 fps for very little power. */
html.gfx-ultra.slime #slimeGoo{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.62}
html.gfx-ultra.bg-dark #slimeGoo{opacity:.45}
/* behind calls and games nobody sees it: stop paying for it */
body:has(#call:not(.hidden)):not(.call-mini) #slimeGoo,body.in-game #slimeGoo,html.bg-paused #slimeGoo{display:none!important}

/* ---------- gooey typing dots: they melt into each other as they bounce ---------- */
html.gfx-ultra:not(.no-anim) .dots{gap:0;filter:url(#goo-s);padding:3px 4px;border-radius:12px}
html.gfx-ultra:not(.no-anim) .dots i{width:7px;height:7px;margin:0 2px;background:var(--accent,#4f6bff);opacity:1;animation:gooDot 1.1s cubic-bezier(.45,0,.3,1) infinite}
html.gfx-ultra:not(.no-anim) .dots i:nth-child(2){animation-delay:.14s}html.gfx-ultra:not(.no-anim) .dots i:nth-child(3){animation-delay:.28s}
@keyframes gooDot{0%,60%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(-6px) scale(.8,1.25)}38%{transform:translateY(0) scale(1.55,.75)}48%{transform:translateY(0) scale(.92,1.06)}}

/* ---------- morphing shapes: bubbles and buttons breathe their corners like soft slime ---------- */
html.gfx-ultra:not(.no-anim) .m.in .bubble{animation:slimeBubble .75s linear,ultraMorph 1.1s var(--goo,ease) both}
@keyframes ultraMorph{0%{border-radius:40% 60% 55% 45%/55% 45% 60% 40%}45%{border-radius:28px 18px 26px 20px}100%{}}
html.gfx-ultra:not(.no-anim) :is(#btnSend,#btnMic):not(.jig){animation:ultraBlob 6s ease-in-out infinite}
@keyframes ultraBlob{0%,100%{border-radius:50%}33%{border-radius:56% 44% 52% 48%/46% 54% 46% 54%}66%{border-radius:45% 55% 47% 53%/54% 46% 55% 45%}}

/* ---------- accent glows ---------- */
html.gfx-ultra.slime .me .bubble{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 16px -10px rgba(255,255,255,.35),0 6px 18px rgba(79,107,255,.32),0 0 26px -4px color-mix(in srgb,var(--accent,#4f6bff) 55%,transparent)}
html.gfx-ultra.slime .them .bubble{box-shadow:inset 0 1px 0 var(--gl-edge),0 2px 10px rgba(60,72,120,.1),0 0 22px -8px color-mix(in srgb,var(--b2,#c496ff) 70%,transparent)}
html.gfx-ultra.slime:not(.no-anim) .m.in.me .bubble{animation:slimeBubble .75s linear,ultraMorph 1.1s var(--goo,ease) both,ultraFlare 1.6s ease-out}
@keyframes ultraFlare{0%{filter:brightness(1.25) drop-shadow(0 0 14px color-mix(in srgb,var(--accent,#4f6bff) 80%,transparent))}100%{filter:none}}
html.gfx-ultra.slime :is(.sheet,.card,#msgMenu,#gChat){box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim),0 18px 60px -18px color-mix(in srgb,var(--b1,#78a0ff) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--b2,#c496ff) 25%,transparent)}
html.gfx-ultra.slime #composer:focus-within .field-wrap{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#4f6bff) 40%,transparent),0 0 24px -2px color-mix(in srgb,var(--accent,#4f6bff) 55%,transparent);transition:box-shadow .4s var(--spring)}
html.gfx-ultra.slime .seg2 button.on{box-shadow:0 0 18px -3px color-mix(in srgb,var(--accent,#4f6bff) 70%,transparent)}
html.gfx-ultra.slime .conv.active,html.gfx-ultra.slime .conv:hover{box-shadow:0 0 22px -8px color-mix(in srgb,var(--b1,#78a0ff) 90%,transparent)}