/* ============================================================
   The guide's orb (v273, his ask, from his reference: a soft sphere in a pale halo, amber and orange into red,
   violet at its edges). Five colour fields inside the sphere, each a gradient set off its centre and turned on its
   own clock, so the colour drifts round inside the ball; the halo breathes. States from js/ai-orb.js: listening
   brightens the halo, thinking turns the fields faster, speaking swells the sphere and its glow with the voice
   (--amp). Reduced motion keeps one still sphere.
   ============================================================ */
/* the stage sizes the orb to the room it has (the chat's middle row), and lets its glow run past the edges unmasked */
.ai-stage:has(.ai-orb) { display: grid; place-items: center; container-type: size; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ai-stage:has(.ai-orb)::before { content: none; }
.ai-orb { --amp: 0; position: relative; width: min(58vw, 236px, 64cqh); aspect-ratio: 1; transform: scale(calc(1 + var(--amp) * .08)); transition: transform .14s linear; }
.ao-halo { position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 210, 190, 0) 50%, rgba(255, 196, 168, .3) 62%, rgba(206, 160, 255, .22) 73%, rgba(206, 160, 255, 0) 100%); filter: blur(12px); opacity: calc(.7 + var(--amp) * .6); animation: aoBreathe 6s ease-in-out infinite alternate; }
.ao-ball { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; isolation: isolate; background: radial-gradient(circle at 36% 42%, #f2a24f 0%, #e3763f 30%, #c94b34 55%, #8f2d42 76%, #5b2a88 96%); box-shadow: 0 0 46px 6px rgba(255, 168, 120, calc(.24 + var(--amp) * .3)), 0 0 90px 22px rgba(190, 130, 255, calc(.14 + var(--amp) * .2)); filter: blur(1.2px) saturate(1.05); }
.ao-ball i { --d: 24s; position: absolute; inset: -6%; border-radius: 50%; filter: blur(14px); animation: aoTurn var(--d) linear infinite; }
.ao-b1 { --d: 26s; background: radial-gradient(circle at 10% 46%, rgba(124, 62, 214, .95), rgba(124, 62, 214, 0) 30%); }
.ao-b2 { --d: 34s; background: radial-gradient(circle at 74% 70%, rgba(66, 18, 84, .9), rgba(66, 18, 84, 0) 38%); animation-direction: reverse; }
.ao-b3 { --d: 22s; background: radial-gradient(circle at 26% 72%, rgba(255, 192, 92, .85), rgba(255, 192, 92, 0) 36%); }
.ao-b4 { --d: 29s; background: radial-gradient(circle at 84% 30%, rgba(150, 110, 255, .8), rgba(150, 110, 255, 0) 32%); animation-direction: reverse; }
.ao-b5 { --d: 40s; background: radial-gradient(circle at 42% 30%, rgba(255, 150, 96, .6), rgba(255, 150, 96, 0) 42%); }
.ao-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 26%, rgba(255, 236, 214, .32), rgba(255, 236, 214, 0) 34%); mix-blend-mode: screen; }
@keyframes aoTurn { to { transform: rotate(360deg); } }
@keyframes aoBreathe { from { transform: scale(.96); } to { transform: scale(1.05); } }

.ai-orb[data-state="listening"] .ao-halo { opacity: calc(.95 + var(--amp) * .4); animation-duration: 2.4s; }
.ai-orb[data-state="thinking"] .ao-ball i { animation-duration: calc(var(--d) * .3); }
.ai-orb[data-state="thinking"] .ao-halo { animation-duration: 1.6s; }
.ai-orb[data-state="speaking"] .ao-ball { filter: blur(1.2px) saturate(calc(1.05 + var(--amp) * .25)) brightness(calc(1 + var(--amp) * .12)); }

:root[data-palette="greyblack"] .ai-orb { filter: grayscale(1) brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .ao-halo, .ao-ball i { animation: none; } .ai-orb { transition: none; } }
[data-motion="reduced"] .ao-halo, [data-motion="reduced"] .ao-ball i { animation: none; }