/* ============================================================ AI CHAT FAB ORB — first-paint resting styles ------------------------------------------------------------ Loaded via in on every page that shows the chat FAB, so the orb's RESTING appearance is correct on the very first paint — BEFORE the deferred ai-chat.js runs. Without this, base.css's resting .ac-chat-btn (chrome-orb image + GREEN circular border + glow/box-shadow + fab-breathe animation + ::after "AI") painted first and only got replaced after the async three.js dynamic import resolved → a flash of the old circular design. base.css is NOT modified; these rules win by loading later in + !important. They strip the old frame/glow/animation/"AI" AND replace the leftover chrome-orb.jpg placeholder (a chrome ball that didn't match the live orb and flashed for 1–3s until WebGL mounted) with a soft CSS orb in the live orb's palette (#00C566 / #1FE084 green, #FF5A78 red glint) — so first paint already looks like the orb. It fades to transparent BEFORE the button edge (no hard disc / no visible circular clip), so it reads as a floating orb. ai-chat.js mounts the live WebGL canvas (.ac-fab-orb) + adds .ac-fab-live, which clears this placeholder so only the real orb shows (no double-orb). The reduced-motion / no-WebGL fallback simply keeps this CSS orb (always visible). ============================================================ */ .ac-chat-btn { width: 80px !important; /* larger FAB (matches ai-chat.js sizing) */ height: 80px !important; border: none !important; /* drop the green circular frame */ box-shadow: none !important; /* drop the glow */ animation: none !important; /* drop the fab-breathe pulse */ overflow: visible !important; /* no clip — the gradient already fades out */ /* Soft glowing orb in the live orb's palette. `closest-side` makes 100% = the button half-width (40px); every layer is transparent by ~88% (~35px) so it fades out ~5px before the edge → a floating orb, never a hard circle. */ background: radial-gradient(circle closest-side at 66% 72%, rgba(255, 90, 120, 0.22) 0%, rgba(255, 90, 120, 0) 58%), /* faint red glint */ radial-gradient(circle closest-side at 40% 36%, rgba(220, 255, 238, 0.62) 0%, /* soft highlight */ rgba(31, 224, 132, 0.55) 26%, /* #1FE084 */ rgba(0, 197, 102, 0.30) 48%, /* #00C566 */ rgba(6, 28, 19, 0.18) 70%, /* dark translucent body */ rgba(6, 28, 19, 0) 88%) !important; /* → transparent before edge */ } .ac-chat-btn::after { display: none !important; /* the "AI" label lives on the orb surface now */ } /* Live WebGL orb mounted → clear the CSS placeholder so only the real orb shows. */ .ac-chat-btn.ac-fab-live { background: transparent !important; } @media (max-width: 768px) { .ac-chat-btn { width: 64px !important; height: 64px !important; } }