/* ══════════════════════════════════════════════════════════════
   SupplAi Orb — CSS
   © Laszlo Marcus Czako — sole inventor
   Ported from Jeffrey AI source (common ownership)
   ══════════════════════════════════════════════════════════════ */

/* ── Base orb body ─────────────────────────────────────────────── */
.supplai-orb {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%;
  cursor: grab;
  pointer-events: auto;
  z-index: 9500;
  will-change: transform, filter, background;
  display: none;

  background:
    radial-gradient(circle at 28% 22%, #ffffff 0, #d0eaff 8%, rgba(140,200,255,1) 20%, rgba(80,160,255,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(108,60,255,1) 0, rgba(60,20,200,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(60,160,255,0.95) 0, rgba(20,80,200,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,90,60,0.85) 0, rgba(200,40,10,0.0) 42%),
    radial-gradient(circle at 50% 50%, #050611 36%, #020408 100%);

  box-shadow:
    0 0 40px rgba(140,180,255,1),
    0 0 70px rgba(108,60,255,0.85),
    0 0 55px rgba(255,90,60,0.5),
    0 0 20px rgba(60,160,255,0.6);

  /* Long background/shadow transitions for watercolour-melt between states */
  transition:
    background 3800ms ease-in-out,
    box-shadow 2600ms ease-in-out,
    filter 2600ms ease-in-out,
    opacity 2600ms ease-in-out;

  animation: supplai-shape-thinking 24s ease-in-out infinite;
  overflow: hidden;
}

/* ── Inner conic shimmer ────────────────────────────────────────── */
.supplai-orb::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0.45) 40deg,
    rgba(154,231,255,0.8) 90deg,
    rgba(128,90,255,0.8) 150deg,
    rgba(18,235,210,0.7) 210deg,
    rgba(255,255,255,0) 360deg
  );
  mix-blend-mode: screen;
  filter: blur(13px);
  animation: supplai-shimmer 24s linear infinite;
  opacity: 0.8;
  transition:
    opacity 1200ms ease-in-out,
    filter 1200ms ease-in-out;
}

/* ── Morphing — gentle opacity dip only, no snap ───────────────── */
.supplai-orb--morphing {
  opacity: 0.88;
  filter: blur(0.5px);
}

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════ */

/* Shimmer: rotate + breathe opacity + gentle scale (from Jeffrey) */
@keyframes supplai-shimmer {
  0%   { transform: rotate(0deg) scale(1);    opacity: 0.9; }
  35%  { opacity: 0.7; }
  55%  { opacity: 1.0; }
  100% { transform: rotate(360deg) scale(1.03); opacity: 0.85; }
}

/* Shimmer fast (working-hard state) */
@keyframes supplai-shimmer-fast {
  0%   { transform: rotate(0deg) scale(1.04);   opacity: 0.95; }
  40%  { opacity: 1; }
  60%  { opacity: 0.85; }
  100% { transform: rotate(360deg) scale(1.08); opacity: 0.95; }
}

/* Thinking — gentle float + subtle rotate, slow 24s */
@keyframes supplai-shape-thinking {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: scale(0.97) rotate(0deg); }
  20%  { border-radius: 58% 42% 51% 49% / 49% 51% 42% 58%; transform: scale(1.01) rotate(-1.5deg); }
  40%  { border-radius: 49% 51% 57% 43% / 43% 57% 51% 49%; transform: scale(1.03) rotate(1deg); }
  60%  { border-radius: 46% 54% 50% 50% / 50% 50% 54% 46%; transform: scale(1.0)  rotate(-1deg); }
  80%  { border-radius: 55% 45% 44% 56% / 56% 44% 45% 55%; transform: scale(0.98) rotate(0.5deg); }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: scale(0.97) rotate(0deg); }
}

/* Working — energetic rotate ±3deg, 3.2s cubic-bezier */
@keyframes supplai-shape-working {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: scale(1.0)  rotate(0deg); }
  20%  { border-radius: 65% 35% 47% 53% / 53% 47% 35% 65%; transform: scale(1.06) rotate(-3deg); }
  40%  { border-radius: 45% 55% 62% 38% / 38% 62% 55% 45%; transform: scale(0.98) rotate(2.5deg); }
  60%  { border-radius: 60% 40% 40% 60% / 60% 40% 40% 60%; transform: scale(1.05) rotate(-2deg); }
  80%  { border-radius: 52% 48% 52% 48% / 48% 52% 48% 52%; transform: scale(1.0)  rotate(1deg); }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: scale(1.0)  rotate(0deg); }
}

/* ══════════════════════════════════════════════════════════════
   STATES
   ══════════════════════════════════════════════════════════════ */

/* Thinking — confident, alive, default */
.supplai-orb--thinking {
  animation: supplai-shape-thinking 24s ease-in-out infinite;
}
.supplai-orb--thinking::before {
  background: conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0.45) 40deg,
    rgba(154,231,255,0.8) 90deg,
    rgba(128,90,255,0.8) 150deg,
    rgba(18,235,210,0.7) 210deg,
    rgba(255,255,255,0) 360deg
  );
  animation: supplai-shimmer 24s linear infinite;
  opacity: 0.8;
  filter: blur(13px);
}

/* Working Hard — full-spectrum shimmer, faster rotate */
.supplai-orb--working-hard {
  box-shadow:
    0 0 60px rgba(140,180,255,1),
    0 0 100px rgba(108,60,255,1),
    0 0 80px rgba(255,90,60,0.7),
    0 0 30px rgba(60,160,255,0.9);
  animation: supplai-shape-working 3.2s cubic-bezier(0.25,0.1,0.3,1.4) infinite;
}
.supplai-orb--working-hard::before {
  background: conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0.55) 25deg,
    rgba(154,231,255,0.8) 60deg,
    rgba(128,90,255,0.9) 110deg,
    rgba(18,235,210,0.7) 170deg,
    rgba(255,123,92,0.9) 220deg,
    rgba(255,56,96,0.9) 250deg,
    rgba(154,231,255,0) 300deg,
    rgba(255,255,255,0.6) 330deg,
    rgba(255,255,255,0) 360deg
  );
  animation: supplai-shimmer-fast 5s linear infinite;
  opacity: 1;
  filter: blur(8px);
}

/* Found Match — green burst, returns to thinking */
.supplai-orb--found-match {
  animation: supplai-found-match-burst 600ms ease-out forwards,
             supplai-shape-thinking 24s ease-in-out infinite 600ms;
}
@keyframes supplai-found-match-burst {
  0%   { box-shadow: 0 0 30px rgba(180,210,255,0.9), 0 0 0 rgba(21,128,61,0); transform: scale(1); }
  35%  { box-shadow: 0 0 80px rgba(21,128,61,1), 0 0 50px rgba(21,128,61,0.8); transform: scale(1.15); }
  100% { box-shadow: 0 0 30px rgba(180,210,255,0.9); transform: scale(1); }
}
.supplai-orb--found-match::before {
  background: conic-gradient(from 120deg,
    rgba(255,255,255,0) 0deg,
    rgba(200,255,220,0.8) 60deg,
    rgba(21,128,61,0.9) 120deg,
    rgba(0,210,140,0.8) 200deg,
    rgba(255,255,255,0) 300deg
  );
  animation: supplai-shimmer 8s linear infinite;
  opacity: 0.9;
  filter: blur(10px);
}

/* Excited — orange dominant + triple ripple */
.supplai-orb--excited {
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0, #fff0e8 10%, rgba(255,180,140,0.9) 22%, rgba(255,140,80,0.0) 46%),
    radial-gradient(circle at 68% 72%, rgba(217,83,30,0.95) 0, rgba(217,83,30,0.0) 48%),
    radial-gradient(circle at 32% 74%, rgba(255,123,92,0.85) 0, rgba(60,20,8,0.0) 55%),
    radial-gradient(circle at 68% 28%, rgba(255,200,100,0.6) 0, rgba(200,100,20,0.0) 45%),
    radial-gradient(circle at 50% 50%, #050611 38%, #050611 100%);
  animation: supplai-shape-working 16s ease-in-out infinite, supplai-triple-ripple 1s ease-out 1;
}
.supplai-orb--excited::before {
  background: conic-gradient(from 200deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,230,200,0.8) 40deg,
    rgba(255,150,80,0.9) 100deg,
    rgba(217,83,30,0.95) 170deg,
    rgba(255,200,100,0.7) 240deg,
    rgba(255,255,255,0) 320deg
  );
  animation: supplai-shimmer 8s linear infinite;
  opacity: 0.95;
  filter: blur(9px);
}
@keyframes supplai-triple-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(217,83,30,0.7); }
  33%  { box-shadow: 0 0 0 30px rgba(217,83,30,0); }
  34%  { box-shadow: 0 0 0 0 rgba(217,83,30,0.5); }
  67%  { box-shadow: 0 0 0 50px rgba(217,83,30,0); }
  68%  { box-shadow: 0 0 0 0 rgba(217,83,30,0.3); }
  100% { box-shadow: 0 0 0 80px rgba(217,83,30,0); }
}

/* Caution — amber, micro-jitter with rotate */
.supplai-orb--caution {
  background:
    radial-gradient(circle at 30% 25%, #fffde8 0, #fff8cc 12%, rgba(255,230,100,0.8) 24%, rgba(255,200,50,0.0) 46%),
    radial-gradient(circle at 68% 72%, rgba(180,120,0,0.8) 0, rgba(180,120,0,0.0) 48%),
    radial-gradient(circle at 32% 74%, rgba(255,180,40,0.7) 0, rgba(60,40,0,0.0) 55%),
    radial-gradient(circle at 50% 50%, #050611 38%, #050611 100%);
  animation: supplai-caution-wobble 0.8s ease-in-out infinite;
}
.supplai-orb--caution::before {
  background: conic-gradient(from 180deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,220,0.8) 50deg,
    rgba(255,220,60,0.9) 120deg,
    rgba(180,120,0,0.8) 200deg,
    rgba(255,255,255,0) 320deg
  );
  animation: supplai-shimmer 10s linear infinite;
  opacity: 0.9;
  filter: blur(10px);
}
@keyframes supplai-caution-wobble {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%     { transform: rotate(-2deg) scale(1.02); }
  40%     { transform: rotate(2deg) scale(0.98); }
  60%     { transform: rotate(-1.5deg) scale(1.01); }
  80%     { transform: rotate(1.5deg) scale(0.99); }
}

/* Error flash — brief rage flash, settles to caution */
.supplai-orb--error-flash {
  background:
    radial-gradient(circle at 30% 25%, #ffe8e8 0, #ffcccc 12%, rgba(255,100,100,0.9) 24%, rgba(255,50,50,0.0) 46%),
    radial-gradient(circle at 50% 50%, #200808 38%, #200808 100%);
  animation: supplai-error-flash 400ms ease-out forwards;
}
.supplai-orb--error-flash::before {
  background: conic-gradient(from 200deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,220,210,0.9) 30deg,
    rgba(255,80,80,0.95) 100deg,
    rgba(200,0,30,0.9) 180deg,
    rgba(255,255,255,0) 300deg
  );
  animation: supplai-shimmer-fast 4s linear infinite;
  opacity: 1;
  filter: blur(9px);
}
@keyframes supplai-error-flash {
  0%,100% { box-shadow: 0 0 30px rgba(255,50,50,0.9); }
  50%     { box-shadow: 0 0 80px rgba(255,50,50,1), 0 0 120px rgba(255,100,50,0.6); }
}

/* Celebration — gold + wave ripples */
.supplai-orb--celebration {
  background:
    radial-gradient(circle at 30% 25%, #fffaf0 0, #fff5dc 14%, rgba(255,235,180,0.9) 26%, rgba(255,225,140,0.0) 48%),
    radial-gradient(circle at 65% 70%, rgba(202,138,4,0.95) 0, rgba(202,138,4,0.0) 50%),
    radial-gradient(circle at 30% 75%, rgba(245,200,60,0.85) 0, rgba(40,30,0,0.0) 60%),
    radial-gradient(circle at 50% 50%, #1a1308 40%, #0a0703 100%);
  box-shadow:
    0 0 80px rgba(202,138,4,1),
    0 0 130px rgba(245,200,60,0.6);
  animation: supplai-shape-working 14s ease-in-out infinite, supplai-celebration-waves 2.5s ease-out forwards;
}
.supplai-orb--celebration::before {
  background: conic-gradient(from 180deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0.8) 40deg,
    rgba(255,255,210,0.9) 80deg,
    rgba(255,215,140,0.9) 140deg,
    rgba(202,138,4,0.8) 200deg,
    rgba(255,255,255,0) 280deg,
    rgba(255,255,255,0.5) 330deg,
    rgba(255,255,255,0) 360deg
  );
  animation: supplai-shimmer 10s linear infinite;
  opacity: 0.95;
  filter: blur(9px);
}
@keyframes supplai-celebration-waves {
  0%   { box-shadow: 0 0 0 0 rgba(202,138,4,0.9), 0 0 80px rgba(202,138,4,1); }
  20%  { box-shadow: 0 0 0 40px rgba(202,138,4,0), 0 0 80px rgba(202,138,4,1); }
  40%  { box-shadow: 0 0 0 0 rgba(245,200,60,0.7), 0 0 80px rgba(202,138,4,1); }
  60%  { box-shadow: 0 0 0 80px rgba(245,200,60,0), 0 0 80px rgba(202,138,4,1); }
  70%  { box-shadow: 0 0 0 0 rgba(255,220,100,0.5), 0 0 80px rgba(202,138,4,1); }
  100% { box-shadow: 0 0 0 140px rgba(255,220,100,0), 0 0 80px rgba(202,138,4,1); }
}

/* ══════════════════════════════════════════════════════════════
   PERSONALITY REACTIONS
   ══════════════════════════════════════════════════════════════ */

/* Jiggle — hover / touch */
.supplai-orb--react-jiggle {
  animation: supplai-react-jiggle 420ms ease-in-out !important;
}
@keyframes supplai-react-jiggle {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-9deg) scale(1.06); }
  30%  { transform: rotate(7deg)  scale(1.04); }
  45%  { transform: rotate(-6deg) scale(1.03); }
  60%  { transform: rotate(5deg)  scale(1.02); }
  78%  { transform: rotate(-2deg) scale(1.01); }
  100% { transform: rotate(0deg)  scale(1); }
}

/* Nod — after successful result */
.supplai-orb--react-nod {
  animation: supplai-react-nod 520ms ease-out !important;
}
@keyframes supplai-react-nod {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-12px) scale(1.06); }
  55%  { transform: translateY(5px)  scale(0.96); }
  78%  { transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0)    scale(1); }
}

/* Blushing — warm pink glow via ::after */
.supplai-orb--react-blushing::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%,
    rgba(255,100,140,0.5) 0%,
    rgba(255,80,120,0.25) 40%,
    rgba(255,100,140,0) 72%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: supplai-react-blush 2500ms ease-in-out forwards;
}
@keyframes supplai-react-blush {
  0%   { opacity: 0; transform: scale(0.75); }
  28%  { opacity: 1; transform: scale(1.06); }
  65%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Shrug — asymmetric squish + tilt */
.supplai-orb--react-shrug {
  animation: supplai-react-shrug 720ms ease-in-out !important;
}
@keyframes supplai-react-shrug {
  0%   { transform: rotate(0deg)  scale(1,1); }
  18%  { transform: rotate(5deg)  scale(0.90,1.10); }
  38%  { transform: rotate(-4deg) scale(1.08,0.93); }
  58%  { transform: rotate(3deg)  scale(0.95,1.05); }
  78%  { transform: rotate(-2deg) scale(1.02,0.98); }
  100% { transform: rotate(0deg)  scale(1,1); }
}

/* Startled — fast spike then settle */
.supplai-orb--react-startled {
  animation: supplai-react-startled 650ms cubic-bezier(0.3,0,0.6,1.6) !important;
}
@keyframes supplai-react-startled {
  0%   { transform: scale(1)    rotate(0deg);  filter: blur(0); }
  14%  { transform: scale(1.35) rotate(-5deg); filter: blur(1px); }
  38%  { transform: scale(0.90) rotate(3deg);  filter: blur(0); }
  65%  { transform: scale(1.06) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Curious — slow lean, held until next keystroke */
.supplai-orb--react-curious {
  animation: supplai-react-curious 1800ms ease-in-out forwards !important;
}
@keyframes supplai-react-curious {
  0%   { transform: scale(1)    rotate(0deg)  translateX(0); }
  55%  { transform: scale(1.05) rotate(-3deg) translateX(3px); }
  100% { transform: scale(1.08) rotate(-5deg) translateX(6px); }
}

/* Excited pulse — triple heartbeat on ! or CAPS */
.supplai-orb--react-excited-pulse {
  animation: supplai-react-excited-pulse 650ms ease-out !important;
}
@keyframes supplai-react-excited-pulse {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.16); }
  26%  { transform: scale(0.96); }
  40%  { transform: scale(1.11); }
  52%  { transform: scale(0.98); }
  66%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Thinking flicker — shimmer speed cranks up while waiting */
.supplai-orb--react-thinking-flicker::before {
  animation: supplai-shimmer-fast 2.5s linear infinite !important;
  filter: blur(8px) !important;
  opacity: 1 !important;
}

/* Tickle — double-click: rapid hot-pink jiggle flood */
.supplai-orb--react-tickle {
  animation: supplai-react-tickle 900ms ease-in-out !important;
}
@keyframes supplai-react-tickle {
  0%   { transform: rotate(0deg)   scale(1);    }
  6%   { transform: rotate(-10deg) scale(1.07); }
  12%  { transform: rotate(10deg)  scale(0.95); }
  18%  { transform: rotate(-11deg) scale(1.08); }
  24%  { transform: rotate(11deg)  scale(0.94); }
  30%  { transform: rotate(-10deg) scale(1.07); }
  36%  { transform: rotate(10deg)  scale(0.95); }
  42%  { transform: rotate(-9deg)  scale(1.06); }
  48%  { transform: rotate(9deg)   scale(0.96); }
  55%  { transform: rotate(-7deg)  scale(1.04); }
  63%  { transform: rotate(6deg)   scale(0.98); }
  75%  { transform: rotate(-3deg)  scale(1.02); }
  88%  { transform: rotate(2deg)   scale(1.01); }
  100% { transform: rotate(0deg)   scale(1);    }
}
.supplai-orb--react-tickle::before {
  background: conic-gradient(from 0deg,
    rgba(255,100,160,0.95),
    rgba(255,200,220,0.8),
    rgba(255,60,130,1),
    rgba(255,180,200,0.75),
    rgba(255,100,160,0.95)
  ) !important;
  animation: supplai-shimmer-fast 0.9s linear infinite !important;
  opacity: 1 !important;
  filter: blur(8px) !important;
}
.supplai-orb--react-tickle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,80,140,0.55) 0%,
    rgba(255,130,180,0.3) 40%,
    rgba(255,100,160,0) 70%
  );
  mix-blend-mode: screen;
  animation: supplai-react-blush 900ms ease-in-out forwards;
  pointer-events: none;
}

/* Spin-dizzy — 360° then dizzy wobble */
.supplai-orb--react-spin-dizzy {
  animation: supplai-react-spin-dizzy 1000ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-spin-dizzy {
  0%   { transform: rotate(0deg)   scale(1);    }
  42%  { transform: rotate(360deg) scale(1.12); }
  55%  { transform: rotate(352deg) scale(0.94); }
  66%  { transform: rotate(366deg) scale(1.05); }
  76%  { transform: rotate(357deg) scale(0.98); }
  86%  { transform: rotate(362deg) scale(1.02); }
  100% { transform: rotate(360deg) scale(1);    }
}

/* Bounce-dance — 5-beat vertical dance */
.supplai-orb--react-bounce-dance {
  animation: supplai-react-bounce-dance 1400ms ease-in-out !important;
}
@keyframes supplai-react-bounce-dance {
  0%   { transform: translateY(0)    scale(1,1);       }
  10%  { transform: translateY(-18px) scale(0.93,1.08); }
  20%  { transform: translateY(0)     scale(1.07,0.93); }
  30%  { transform: translateY(-15px) scale(0.94,1.07); }
  40%  { transform: translateY(0)     scale(1.06,0.94); }
  50%  { transform: translateY(-20px) scale(0.91,1.10); }
  60%  { transform: translateY(0)     scale(1.08,0.92); }
  70%  { transform: translateY(-12px) scale(0.95,1.05); }
  80%  { transform: translateY(0)     scale(1.04,0.96); }
  90%  { transform: translateY(-6px)  scale(0.98,1.02); }
  100% { transform: translateY(0)     scale(1,1);       }
}

/* Peek — slides off left, only edge visible, sneaks back */
.supplai-orb--react-peek {
  animation: supplai-react-peek 2200ms ease-in-out !important;
}
@keyframes supplai-react-peek {
  0%   { transform: translateX(0)     rotate(0deg);  opacity: 1;   }
  22%  { transform: translateX(-68px) rotate(-6deg); opacity: 0.25; }
  35%  { transform: translateX(-60px) rotate(4deg);  opacity: 0.4;  }
  50%  { transform: translateX(-62px) rotate(-3deg); opacity: 0.35; }
  65%  { transform: translateX(-60px) rotate(2deg);  opacity: 0.4;  }
  80%  { transform: translateX(-10px) rotate(1deg);  opacity: 0.8;  }
  92%  { transform: translateX(4px)   rotate(-1deg); opacity: 1;    }
  100% { transform: translateX(0)     rotate(0deg);  opacity: 1;    }
}

/* Sneeze — slow build, tilt back, then ACHOO burst */
.supplai-orb--react-sneeze {
  animation: supplai-react-sneeze 1100ms ease-in-out !important;
}
@keyframes supplai-react-sneeze {
  0%   { transform: scale(1)    rotate(0deg);   filter: blur(0);    }
  20%  { transform: scale(1.02) rotate(-3deg);  }
  38%  { transform: scale(1.05) rotate(-5deg);  }
  52%  { transform: scale(1.07) rotate(-6deg);  }
  60%  { transform: scale(0.65) rotate(12deg)  translateY(6px); filter: blur(0.5px); }
  68%  { transform: scale(1.30) rotate(-3deg)  translateY(-4px); filter: blur(1px);  }
  78%  { transform: scale(0.90) rotate(2deg);  filter: blur(0);    }
  88%  { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0deg);  }
}

/* Moonwalk — shuffles backward-looking left then snaps home */
.supplai-orb--react-moonwalk {
  animation: supplai-react-moonwalk 1300ms ease-in-out !important;
}
@keyframes supplai-react-moonwalk {
  0%   { transform: translateX(0)    scaleX(1)    rotate(0deg);  }
  15%  { transform: translateX(-10px) scaleX(0.93) rotate(-4deg); }
  30%  { transform: translateX(-20px) scaleX(1.07) rotate(3deg);  }
  45%  { transform: translateX(-30px) scaleX(0.94) rotate(-3deg); }
  60%  { transform: translateX(-20px) scaleX(1.05) rotate(2deg);  }
  72%  { transform: translateX(-10px) scaleX(0.97) rotate(-1deg); }
  82%  { transform: translateX(5px)   scaleX(1.04) rotate(1deg);  }
  100% { transform: translateX(0)     scaleX(1)    rotate(0deg);  }
}

/* Shrink-pop — collapses to a dot then EXPLODES back */
.supplai-orb--react-shrink-pop {
  animation: supplai-react-shrink-pop 950ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes supplai-react-shrink-pop {
  0%   { transform: scale(1);    filter: blur(0);    opacity: 1;   }
  25%  { transform: scale(0.4);  filter: blur(1px);  opacity: 0.7; }
  45%  { transform: scale(0.08); filter: blur(2px);  opacity: 0.4; }
  60%  { transform: scale(1.45); filter: blur(1px);  opacity: 1;   }
  75%  { transform: scale(0.88); filter: blur(0);    }
  88%  { transform: scale(1.10); }
  100% { transform: scale(1);    }
}

/* ══════════════════════════════════════════════════════════════
   SIZES
   ══════════════════════════════════════════════════════════════ */
.supplai-orb--corner {
  width: 36px;
  height: 36px;
  box-shadow:
    0 0 14px rgba(180,210,255,0.9),
    0 0 22px rgba(124,92,255,0.5);
}
.supplai-orb--active {
  width: 100px;
  height: 100px;
}
.supplai-orb--hero {
  width: 240px;
  height: 240px;
  box-shadow:
    0 0 110px rgba(180,210,255,1),
    0 0 170px rgba(124,92,255,0.7),
    0 0 140px rgba(255,123,92,0.5);
}

/* ══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* 0 — Slide-brake: shoots from left, squishes on impact, dust puff, bounces to rest */
.supplai-orb--enter-slide-brake {
  animation: supplai-enter-slide-brake 780ms cubic-bezier(0.1,0,0.2,1) forwards,
             supplai-shape-thinking 24s ease-in-out 780ms infinite !important;
}
@keyframes supplai-enter-slide-brake {
  0%   { transform: translateX(-180px) scaleX(1.15) scaleY(0.88); opacity: 0.5; filter: blur(3px); }
  42%  { transform: translateX(12px)   scaleX(0.72) scaleY(1.28); opacity: 1;   filter: blur(0);
         box-shadow: 0 0 0 0 rgba(200,210,255,0.9), 0 0 40px rgba(108,60,255,0.8); }
  52%  { transform: translateX(12px)   scaleX(0.72) scaleY(1.28);
         box-shadow: 0 4px 40px 18px rgba(200,210,255,0), 0 0 40px rgba(108,60,255,0.8); }
  63%  { transform: translateX(-6px)   scaleX(1.12) scaleY(0.90); }
  74%  { transform: translateX(4px)    scaleX(0.94) scaleY(1.06); }
  84%  { transform: translateX(-2px)   scaleX(1.04) scaleY(0.97); }
  92%  { transform: translateX(1px)    scaleX(0.99) scaleY(1.01); }
  100% { transform: translateX(0)      scale(1,1);                 opacity: 1; }
}

/* 1 — Sneak-in */
.supplai-orb--enter-sneak {
  animation: supplai-enter-sneak 1100ms ease-out forwards,
             supplai-shape-thinking 24s ease-in-out 1100ms infinite !important;
}
@keyframes supplai-enter-sneak {
  0%   { transform: translateY(40px) scale(0.2); opacity: 0; filter: blur(4px); }
  60%  { transform: translateY(8px) scale(0.9);  opacity: 0.8; filter: blur(1px); }
  100% { transform: translateY(0) scale(1);       opacity: 1;   filter: blur(0); }
}

/* 2 — Bounce */
.supplai-orb--enter-bounce {
  animation: supplai-enter-bounce 500ms cubic-bezier(0.34,1.56,0.64,1) forwards,
             supplai-shape-thinking 24s ease-in-out 500ms infinite !important;
}
@keyframes supplai-enter-bounce {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* 3 — Materialize */
.supplai-orb--enter-materialize {
  animation: supplai-enter-materialize 1000ms ease-out forwards,
             supplai-shape-thinking 24s ease-in-out 1000ms infinite !important;
}
@keyframes supplai-enter-materialize {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(0);   opacity: 0; }
  85%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* 4 — Iris */
.supplai-orb--enter-iris {
  animation: supplai-enter-iris 700ms ease-out forwards,
             supplai-shape-thinking 24s ease-in-out 700ms infinite !important;
}
@keyframes supplai-enter-iris {
  0%   { transform: scale(0);    box-shadow: 0 0 0 0 rgba(180,210,255,1);       opacity: 0; }
  30%  { transform: scale(0.1);  box-shadow: 0 0 4px 2px rgba(180,210,255,1);   opacity: 1; }
  85%  { transform: scale(1.05); box-shadow: 0 0 60px 8px rgba(180,210,255,0.7); }
  100% { transform: scale(1.0);  box-shadow: 0 0 90px rgba(180,210,255,0.9);    opacity: 1; }
}

/* 5 — Drop */
.supplai-orb--enter-drop {
  animation: supplai-enter-drop 600ms cubic-bezier(0.5,0,0.5,1.4) forwards,
             supplai-shape-thinking 24s ease-in-out 600ms infinite !important;
}
@keyframes supplai-enter-drop {
  0%   { transform: translateY(-50px) scale(1,1);    opacity: 0; }
  60%  { transform: translateY(0) scale(1.1,0.85);   opacity: 1; }
  80%  { transform: translateY(-4px) scale(0.95,1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1,1);         opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   EXIT ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

.supplai-orb--exit-fade {
  animation: supplai-exit-fade 400ms ease-out forwards !important;
}
@keyframes supplai-exit-fade {
  0%   { opacity: 1; transform: scale(1);   filter: blur(0); }
  100% { opacity: 0; transform: scale(0.9); filter: blur(2px); }
}

.supplai-orb--exit-drift {
  animation: supplai-exit-drift 1200ms ease-in forwards !important;
}
@keyframes supplai-exit-drift {
  0%   { transform: translateY(0) scale(1) rotate(0deg);    opacity: 1; }
  100% { transform: translateY(-80px) scale(0.4) rotate(-8deg); opacity: 0; }
}

.supplai-orb--exit-corner {
  animation: supplai-exit-corner 800ms ease-in-out forwards !important;
}
@keyframes supplai-exit-corner {
  0%   { transform: scale(1);    opacity: 1; }
  60%  { transform: scale(0.4);  opacity: 0.9; }
  75%  { transform: scale(0.55); opacity: 1; }
  100% { transform: scale(0.4);  opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════════════
   NEW PERSONALITY REACTIONS — BATCH 2 (53 additional)
   ══════════════════════════════════════════════════════════════ */

.supplai-orb--react-wobble-think {
  animation: supplai-react-wobble-think 1800ms ease-in-out !important;
}
@keyframes supplai-react-wobble-think {
  0%,100% { transform: rotate(0deg) scale(1); }
  18%  { transform: rotate(-8deg) scale(1.03); }
  36%  { transform: rotate(8deg)  scale(0.97); }
  54%  { transform: rotate(-6deg) scale(1.02); }
  72%  { transform: rotate(5deg)  scale(0.98); }
  88%  { transform: rotate(-2deg) scale(1.01); }
}

.supplai-orb--react-inflate {
  animation: supplai-react-inflate 1200ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-inflate {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5) rotate(-2deg); filter: blur(0.5px); }
  55%  { transform: scale(1.6) rotate(1deg); }
  75%  { transform: scale(0.85) rotate(0deg); filter: blur(0); }
  88%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.supplai-orb--react-melt {
  animation: supplai-react-melt 1600ms ease-in-out !important;
}
@keyframes supplai-react-melt {
  0%   { transform: scale(1,1) translateY(0); border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  25%  { transform: scale(1.2,0.7) translateY(6px); border-radius: 50% 50% 60% 60% / 30% 30% 70% 70%; }
  50%  { transform: scale(1.35,0.55) translateY(12px); border-radius: 50% 50% 65% 65% / 20% 20% 80% 80%; }
  68%  { transform: scale(1.2,0.7) translateY(8px); }
  85%  { transform: scale(0.95,1.1) translateY(-4px); }
  100% { transform: scale(1,1) translateY(0); border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
}

.supplai-orb--react-hiccup {
  animation: supplai-react-hiccup 800ms ease-in-out !important;
}
@keyframes supplai-react-hiccup {
  0%   { transform: translateY(0) scale(1); }
  12%  { transform: translateY(-14px) scale(0.95,1.06); }
  22%  { transform: translateY(0) scale(1.04,0.97); }
  38%  { transform: translateY(-10px) scale(0.96,1.05); }
  48%  { transform: translateY(0) scale(1.03,0.98); }
  62%  { transform: translateY(-6px) scale(0.98,1.03); }
  72%  { transform: translateY(0) scale(1.01,0.99); }
  100% { transform: translateY(0) scale(1); }
}

.supplai-orb--react-squash-stretch {
  animation: supplai-react-squash-stretch 900ms cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes supplai-react-squash-stretch {
  0%   { transform: scale(1,1); }
  18%  { transform: scale(1.5,0.6); }
  36%  { transform: scale(0.7,1.4); }
  52%  { transform: scale(1.3,0.75); }
  66%  { transform: scale(0.85,1.18); }
  80%  { transform: scale(1.08,0.94); }
  100% { transform: scale(1,1); }
}

.supplai-orb--react-yawn {
  animation: supplai-react-yawn 2000ms ease-in-out !important;
}
@keyframes supplai-react-yawn {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1,1.2) rotate(-2deg); }
  35%  { transform: scale(0.9,1.35) rotate(-4deg); filter: blur(0.5px); }
  55%  { transform: scale(0.85,1.4) rotate(-5deg); filter: blur(1px); }
  70%  { transform: scale(0.9,1.3) rotate(-3deg); filter: blur(0.5px); }
  82%  { transform: scale(1,1.1) rotate(-1deg); filter: blur(0); }
  90%  { transform: scale(1.12,0.92) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.supplai-orb--react-double-take {
  animation: supplai-react-double-take 700ms ease-in-out !important;
}
@keyframes supplai-react-double-take {
  0%   { transform: translateX(0) rotate(0deg); }
  18%  { transform: translateX(-14px) rotate(-6deg); }
  50%  { transform: translateX(-12px) rotate(-5deg); }
  62%  { transform: translateX(14px)  rotate(6deg); }
  76%  { transform: translateX(6px)   rotate(2deg); }
  100% { transform: translateX(0)     rotate(0deg); }
}

.supplai-orb--react-belly-laugh {
  animation: supplai-react-belly-laugh 1200ms ease-in-out !important;
}
@keyframes supplai-react-belly-laugh {
  0%,100% { transform: scale(1) rotate(0deg); }
  8%   { transform: scale(1.1,0.92) rotate(-3deg); }
  16%  { transform: scale(0.93,1.08) rotate(3deg); }
  24%  { transform: scale(1.09,0.93) rotate(-4deg) translateY(-6px); }
  32%  { transform: scale(0.94,1.07) rotate(4deg) translateY(0); }
  40%  { transform: scale(1.08,0.94) rotate(-3deg) translateY(-5px); }
  48%  { transform: scale(0.95,1.06) rotate(3deg) translateY(0); }
  56%  { transform: scale(1.07,0.95) rotate(-2deg) translateY(-4px); }
  64%  { transform: scale(0.96,1.05) rotate(2deg) translateY(0); }
  72%  { transform: scale(1.04,0.97) rotate(-1deg) translateY(-2px); }
  82%  { transform: scale(0.99,1.02) rotate(1deg); }
}

.supplai-orb--react-face-plant {
  animation: supplai-react-face-plant 1000ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-face-plant {
  0%   { transform: scale(1) translateY(0) rotate(0deg); }
  20%  { transform: scale(0.9,1.1) translateY(-10px) rotate(-5deg); }
  42%  { transform: scale(1.6,0.55) translateY(20px) rotate(0deg); filter: blur(1px); }
  55%  { transform: scale(1.6,0.55) translateY(18px); }
  68%  { transform: scale(0.9,1.15) translateY(-6px) rotate(2deg); filter: blur(0); }
  80%  { transform: scale(1.05,0.97) translateY(2px); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

.supplai-orb--react-boing {
  animation: supplai-react-boing 900ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes supplai-react-boing {
  0%   { transform: scale(1,1) translateY(0); }
  20%  { transform: scale(1.1,0.7) translateY(8px); }
  38%  { transform: scale(0.8,1.35) translateY(-30px); }
  52%  { transform: scale(1.12,0.82) translateY(4px); }
  64%  { transform: scale(0.9,1.15) translateY(-14px); }
  76%  { transform: scale(1.06,0.92) translateY(2px); }
  87%  { transform: scale(0.97,1.05) translateY(-5px); }
  100% { transform: scale(1,1) translateY(0); }
}

.supplai-orb--react-sway {
  animation: supplai-react-sway 1400ms ease-in-out !important;
}
@keyframes supplai-react-sway {
  0%,100% { transform: translateX(0) rotate(0deg); }
  22%  { transform: translateX(-16px) rotate(-5deg); }
  44%  { transform: translateX(0)     rotate(0deg); }
  66%  { transform: translateX(16px)  rotate(5deg); }
  88%  { transform: translateX(4px)   rotate(1deg); }
}

.supplai-orb--react-tilt-stare {
  animation: supplai-react-tilt-stare 1500ms ease-in-out forwards !important;
}
@keyframes supplai-react-tilt-stare {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-12deg) scale(1.04); }
  80%  { transform: rotate(-11deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

.supplai-orb--react-side-eye {
  animation: supplai-react-side-eye 1200ms ease-in-out !important;
}
@keyframes supplai-react-side-eye {
  0%,100% { transform: translateX(0) rotate(0deg) scaleX(1); }
  25%  { transform: translateX(10px) rotate(4deg) scaleX(0.94); }
  55%  { transform: translateX(12px) rotate(5deg) scaleX(0.93); filter: blur(0.3px); }
  80%  { transform: translateX(5px)  rotate(2deg) scaleX(0.97); filter: blur(0); }
}

.supplai-orb--react-nervous-twitch {
  animation: supplai-react-nervous-twitch 600ms linear !important;
}
@keyframes supplai-react-nervous-twitch {
  0%   { transform: translate(0,0) rotate(0deg); }
  10%  { transform: translate(-3px,1px) rotate(-1deg); }
  20%  { transform: translate(3px,-1px) rotate(1.5deg); }
  30%  { transform: translate(-2px,2px) rotate(-2deg); }
  40%  { transform: translate(2px,-2px) rotate(1deg); }
  50%  { transform: translate(-3px,0px) rotate(-1.5deg); }
  60%  { transform: translate(3px,1px)  rotate(2deg); }
  70%  { transform: translate(-1px,-2px) rotate(-1deg); }
  80%  { transform: translate(2px,2px)  rotate(1.5deg); }
  90%  { transform: translate(-1px,-1px) rotate(-0.5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

.supplai-orb--react-head-scratch {
  animation: supplai-react-head-scratch 1100ms ease-in-out !important;
}
@keyframes supplai-react-head-scratch {
  0%,100% { transform: rotate(0deg) translateX(0); }
  15%  { transform: rotate(-8deg) translateX(-4px); }
  30%  { transform: rotate(-6deg) translateX(-6px); }
  45%  { transform: rotate(-9deg) translateX(-3px); }
  60%  { transform: rotate(-7deg) translateX(-5px); }
  75%  { transform: rotate(-5deg) translateX(-3px); }
  88%  { transform: rotate(-2deg) translateX(-1px); }
}

.supplai-orb--react-ta-da {
  animation: supplai-react-ta-da 800ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes supplai-react-ta-da {
  0%   { transform: scale(1) rotate(0deg); }
  18%  { transform: scale(0.7) rotate(-3deg); }
  40%  { transform: scale(1.5) rotate(3deg); filter: brightness(1.5); }
  55%  { transform: scale(1.4) rotate(-1deg); filter: brightness(1.3); }
  70%  { transform: scale(1.1) rotate(1deg); filter: brightness(1.1); }
  85%  { transform: scale(0.95) rotate(0deg); filter: brightness(1); }
  100% { transform: scale(1) rotate(0deg); }
}

.supplai-orb--react-wave-hello {
  animation: supplai-react-wave-hello 1300ms ease-in-out !important;
}
@keyframes supplai-react-wave-hello {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-8px) rotate(-10deg); }
  28%  { transform: translateX(8px) rotate(10deg); }
  40%  { transform: translateX(-6px) rotate(-8deg); }
  52%  { transform: translateX(6px)  rotate(8deg); }
  64%  { transform: translateX(-4px) rotate(-5deg); }
  76%  { transform: translateX(4px)  rotate(5deg); }
  88%  { transform: translateX(-1px) rotate(-1deg); }
}

.supplai-orb--react-recoil {
  animation: supplai-react-recoil 550ms cubic-bezier(0.4,0,0.6,1) !important;
}
@keyframes supplai-react-recoil {
  0%   { transform: translateX(0) scale(1); }
  15%  { transform: translateX(20px) scaleX(0.75) scaleY(1.2); }
  28%  { transform: translateX(28px) scaleX(0.65) scaleY(1.25); }
  45%  { transform: translateX(-8px) scaleX(1.12) scaleY(0.92); }
  62%  { transform: translateX(4px) scaleX(0.96) scaleY(1.03); }
  100% { transform: translateX(0) scale(1); }
}

.supplai-orb--react-paranoid-look {
  animation: supplai-react-paranoid-look 800ms ease-in-out !important;
}
@keyframes supplai-react-paranoid-look {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-20px) rotate(-8deg); }
  28%  { transform: translateX(0) rotate(0deg); }
  38%  { transform: translateX(20px) rotate(8deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  60%  { transform: translateX(-14px) rotate(-5deg); }
  70%  { transform: translateX(0) rotate(0deg); }
  80%  { transform: translateX(10px) rotate(4deg); }
  90%  { transform: translateX(0) rotate(0deg); }
}

.supplai-orb--react-wink {
  animation: supplai-react-wink 450ms ease-in-out !important;
}
@keyframes supplai-react-wink {
  0%,100% { transform: scale(1,1); }
  18%  { transform: scale(1.08,0.55) rotate(2deg); }
  36%  { transform: scale(0.95,1.1) rotate(-1deg); }
  55%  { transform: scale(1.04,0.9) rotate(1deg); }
  72%  { transform: scale(0.98,1.04); }
}

.supplai-orb--react-facepalm {
  animation: supplai-react-facepalm 1400ms ease-in-out !important;
}
@keyframes supplai-react-facepalm {
  0%   { transform: rotate(0deg) translateY(0) scale(1); }
  20%  { transform: rotate(12deg) translateY(6px) scale(0.97,1.03); }
  42%  { transform: rotate(15deg) translateY(8px) scale(0.94,1.06); }
  65%  { transform: rotate(14deg) translateY(7px) scale(0.95,1.05); }
  80%  { transform: rotate(5deg) translateY(2px) scale(0.99,1.01); }
  100% { transform: rotate(0deg) translateY(0) scale(1); }
}

.supplai-orb--react-drumroll {
  animation: supplai-react-drumroll 900ms linear !important;
}
@keyframes supplai-react-drumroll {
  0%,100% { transform: translate(0,0); }
  5%   { transform: translate(-4px,-2px) rotate(-1deg); }
  10%  { transform: translate(4px,2px)  rotate(1deg); }
  15%  { transform: translate(-3px,2px) rotate(-1.5deg); }
  20%  { transform: translate(3px,-2px) rotate(1.5deg); }
  25%  { transform: translate(-4px,0px) rotate(-1deg); }
  30%  { transform: translate(4px,0px)  rotate(1deg); }
  35%  { transform: translate(-3px,-3px) rotate(-2deg); }
  40%  { transform: translate(3px,3px)   rotate(2deg); }
  45%  { transform: translate(-4px,1px) rotate(-1.5deg); }
  50%  { transform: translate(4px,-1px) rotate(1.5deg); }
  60%  { transform: translate(-3px,2px) rotate(-1deg); }
  70%  { transform: translate(2px,-1px) rotate(0.5deg); }
  80%  { transform: translate(-1px,1px) rotate(-0.5deg); }
  90%  { transform: translate(1px,-1px) rotate(0.5deg); }
}

.supplai-orb--react-flip {
  animation: supplai-react-flip 900ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-flip {
  0%   { transform: rotateX(0deg) scale(1); }
  25%  { transform: rotateX(-90deg) scale(0.9); }
  50%  { transform: rotateX(-180deg) scale(1.1); }
  75%  { transform: rotateX(-270deg) scale(0.95); }
  100% { transform: rotateX(-360deg) scale(1); }
}

.supplai-orb--react-rubber-band {
  animation: supplai-react-rubber-band 900ms cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
@keyframes supplai-react-rubber-band {
  0%   { transform: scale(1,1); }
  18%  { transform: scale(1.5,0.6); }
  34%  { transform: scale(0.65,1.4); }
  48%  { transform: scale(1.25,0.72); }
  60%  { transform: scale(0.8,1.2); }
  72%  { transform: scale(1.1,0.85); }
  82%  { transform: scale(0.92,1.08); }
  100% { transform: scale(1,1); }
}

.supplai-orb--react-tornado {
  animation: supplai-react-tornado 900ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-tornado {
  0%   { transform: rotate(0deg) scaleX(1) scaleY(1); }
  20%  { transform: rotate(180deg) scaleX(1.3) scaleY(0.7); }
  40%  { transform: rotate(360deg) scaleX(0.75) scaleY(1.25); }
  55%  { transform: rotate(540deg) scaleX(1.2) scaleY(0.8); }
  68%  { transform: rotate(630deg) scaleX(0.9) scaleY(1.1); }
  100% { transform: rotate(720deg) scaleX(1) scaleY(1); }
}

.supplai-orb--react-earthquake {
  animation: supplai-react-earthquake 700ms linear !important;
}
@keyframes supplai-react-earthquake {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  7%   { transform: translate(-6px,-4px) rotate(-3deg); }
  14%  { transform: translate(6px,4px)   rotate(3deg); }
  21%  { transform: translate(-8px,3px)  rotate(-4deg); }
  28%  { transform: translate(7px,-5px)  rotate(4deg); }
  35%  { transform: translate(-5px,6px)  rotate(-2deg); }
  42%  { transform: translate(6px,-4px)  rotate(2deg); }
  49%  { transform: translate(-7px,3px)  rotate(-3deg); }
  56%  { transform: translate(5px,-6px)  rotate(3deg); }
  63%  { transform: translate(-4px,4px)  rotate(-2deg); }
  70%  { transform: translate(4px,-3px)  rotate(2deg); }
  80%  { transform: translate(-2px,2px)  rotate(-1deg); }
  90%  { transform: translate(1px,-1px)  rotate(0.5deg); }
}

.supplai-orb--react-rocket {
  animation: supplai-react-rocket 1200ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-rocket {
  0%   { transform: scale(1,1) translateY(0); }
  10%  { transform: scale(0.85,1.2) translateY(8px); }
  30%  { transform: scale(0.7,1.35) translateY(-60px); filter: blur(1px); }
  45%  { transform: scale(0.7,1.35) translateY(-80px); filter: blur(1.5px); opacity: 0.7; }
  60%  { transform: scale(1.2,0.7) translateY(-10px); filter: blur(0); opacity: 1; }
  75%  { transform: scale(0.9,1.1) translateY(4px); }
  88%  { transform: scale(1.04,0.97) translateY(-2px); }
  100% { transform: scale(1,1) translateY(0); }
}

.supplai-orb--react-bounce-triple {
  animation: supplai-react-bounce-triple 900ms ease-in-out !important;
}
@keyframes supplai-react-bounce-triple {
  0%,100% { transform: translateY(0) scale(1,1); }
  12%  { transform: translateY(-22px) scale(0.92,1.1); }
  22%  { transform: translateY(0) scale(1.1,0.9); }
  36%  { transform: translateY(-18px) scale(0.93,1.08); }
  46%  { transform: translateY(0) scale(1.08,0.93); }
  60%  { transform: translateY(-12px) scale(0.95,1.06); }
  70%  { transform: translateY(0) scale(1.05,0.96); }
  82%  { transform: translateY(-5px) scale(0.98,1.02); }
  90%  { transform: translateY(0) scale(1.02,0.99); }
}

.supplai-orb--react-shimmy {
  animation: supplai-react-shimmy 1000ms ease-in-out !important;
}
@keyframes supplai-react-shimmy {
  0%,100% { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-12px) rotate(-6deg); }
  20%  { transform: translateX(12px)  rotate(6deg); }
  30%  { transform: translateX(-10px) rotate(-5deg); }
  40%  { transform: translateX(10px)  rotate(5deg); }
  50%  { transform: translateX(-8px)  rotate(-4deg); }
  60%  { transform: translateX(8px)   rotate(4deg); }
  70%  { transform: translateX(-5px)  rotate(-2deg); }
  80%  { transform: translateX(5px)   rotate(2deg); }
  90%  { transform: translateX(-2px)  rotate(-1deg); }
}

.supplai-orb--react-spin-zoom {
  animation: supplai-react-spin-zoom 900ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-spin-zoom {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(180deg) scale(1.5); filter: blur(0.5px); }
  55%  { transform: rotate(360deg) scale(0.7); filter: blur(0); }
  75%  { transform: rotate(420deg) scale(1.1); }
  100% { transform: rotate(450deg) scale(1); }
}

.supplai-orb--react-matrix-dodge {
  animation: supplai-react-matrix-dodge 900ms cubic-bezier(0.25,0.1,0.25,1) !important;
}
@keyframes supplai-react-matrix-dodge {
  0%   { transform: translateX(0) rotate(0deg) scaleX(1); }
  22%  { transform: translateX(30px) rotate(20deg) scaleX(0.8) skewX(-10deg); }
  44%  { transform: translateX(40px) rotate(25deg) scaleX(0.7) skewX(-15deg); filter: blur(0.5px); }
  60%  { transform: translateX(20px) rotate(10deg) scaleX(0.9); filter: blur(0); }
  78%  { transform: translateX(-5px) rotate(-2deg) scaleX(1.04); }
  100% { transform: translateX(0) rotate(0deg) scaleX(1); }
}

.supplai-orb--react-karate-chop {
  animation: supplai-react-karate-chop 600ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-karate-chop {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  12%  { transform: translateY(-20px) rotate(-15deg) scale(0.95,1.1); }
  28%  { transform: translateY(25px) rotate(8deg) scale(1.2,0.7); filter: blur(0.5px); }
  42%  { transform: translateY(5px) rotate(-3deg) scale(0.95,1.06); filter: blur(0); }
  58%  { transform: translateY(-4px) rotate(2deg) scale(1.03,0.97); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

.supplai-orb--react-victory-lap {
  animation: supplai-react-victory-lap 1600ms ease-in-out !important;
}
@keyframes supplai-react-victory-lap {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  15%  { transform: translate(20px,-15px) rotate(15deg) scale(1.05); }
  30%  { transform: translate(35px,-5px) rotate(25deg) scale(1.1); }
  45%  { transform: translate(30px,15px) rotate(20deg) scale(1.05); }
  60%  { transform: translate(10px,10px) rotate(8deg) scale(1); }
  72%  { transform: translate(-10px,5px) rotate(-5deg) scale(0.96); }
  84%  { transform: translate(-5px,-2px) rotate(-2deg) scale(0.99); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

.supplai-orb--react-gravity-flip {
  animation: supplai-react-gravity-flip 1400ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-gravity-flip {
  0%   { transform: rotateZ(0deg) translateY(0) scale(1); }
  25%  { transform: rotateZ(180deg) translateY(-20px) scale(0.9,1.1); }
  50%  { transform: rotateZ(180deg) translateY(-10px) scale(1); }
  65%  { transform: rotateZ(180deg) translateY(-15px) scale(1.05); }
  80%  { transform: rotateZ(360deg) translateY(0) scale(1.1,0.9); }
  100% { transform: rotateZ(360deg) translateY(0) scale(1); }
}

.supplai-orb--react-mic-drop {
  animation: supplai-react-mic-drop 1100ms cubic-bezier(0.4,0,0.6,1) !important;
}
@keyframes supplai-react-mic-drop {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  18%  { transform: translateY(-15px) rotate(-10deg) scale(0.95,1.06); }
  40%  { transform: translateY(35px) rotate(5deg) scale(1.25,0.6); filter: blur(0.5px); }
  52%  { transform: translateY(30px) rotate(3deg) scale(1.25,0.6); filter: blur(0); }
  65%  { transform: translateY(-10px) rotate(-3deg) scale(0.9,1.12); }
  78%  { transform: translateY(5px) rotate(1deg) scale(1.05,0.96); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

.supplai-orb--react-zip-left {
  animation: supplai-react-zip-left 500ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-zip-left {
  0%   { transform: translateX(0) scaleX(1); }
  18%  { transform: translateX(-50px) scaleX(0.6); filter: blur(2px); }
  35%  { transform: translateX(-60px) scaleX(0.5); filter: blur(3px); }
  55%  { transform: translateX(10px) scaleX(1.15); filter: blur(0); }
  100% { transform: translateX(0) scaleX(1); }
}

.supplai-orb--react-zip-right {
  animation: supplai-react-zip-right 500ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-zip-right {
  0%   { transform: translateX(0) scaleX(1); }
  18%  { transform: translateX(50px) scaleX(0.6); filter: blur(2px); }
  35%  { transform: translateX(60px) scaleX(0.5); filter: blur(3px); }
  55%  { transform: translateX(-10px) scaleX(1.15); filter: blur(0); }
  100% { transform: translateX(0) scaleX(1); }
}

.supplai-orb--react-glitch {
  animation: supplai-react-glitch 700ms steps(1) !important;
}
@keyframes supplai-react-glitch {
  0%,100% { transform: translate(0,0); filter: hue-rotate(0deg); }
  8%   { transform: translate(-4px,0) skewX(-5deg); filter: hue-rotate(90deg) brightness(1.5); }
  16%  { transform: translate(4px,0) skewX(5deg); filter: hue-rotate(180deg) brightness(0.8); }
  24%  { transform: translate(-3px,-2px); filter: hue-rotate(270deg) brightness(1.3); }
  32%  { transform: translate(3px,2px); filter: hue-rotate(0deg); }
  40%  { transform: translate(-5px,0) skewX(-8deg); filter: hue-rotate(45deg) brightness(1.6); }
  48%  { transform: translate(5px,0) scaleX(1.05); filter: hue-rotate(200deg); }
  56%  { transform: translate(-2px,2px); filter: hue-rotate(320deg) brightness(1.2); }
  72%  { transform: translate(-1px,0) skewX(-2deg); filter: brightness(1.1); }
  90%  { transform: translate(1px,0); filter: brightness(1); }
}

.supplai-orb--react-electric-shock {
  animation: supplai-react-electric-shock 700ms linear !important;
}
@keyframes supplai-react-electric-shock {
  0%,100% { transform: translate(0,0) rotate(0deg); filter: brightness(1); }
  5%   { transform: translate(-5px,-3px) rotate(-4deg); filter: brightness(2.5); }
  10%  { transform: translate(5px,3px)   rotate(4deg);  filter: brightness(1); }
  15%  { transform: translate(-6px,4px)  rotate(-5deg); filter: brightness(3); }
  20%  { transform: translate(6px,-4px)  rotate(5deg);  filter: brightness(1); }
  25%  { transform: translate(-4px,-4px) rotate(-3deg); filter: brightness(2.8) hue-rotate(200deg); }
  30%  { transform: translate(4px,4px)   rotate(3deg);  filter: brightness(1); }
  40%  { transform: translate(5px,-2px)  rotate(4deg);  filter: brightness(1); }
  50%  { transform: translate(-3px,3px)  rotate(-2deg); filter: brightness(2); }
  60%  { transform: translate(3px,-3px)  rotate(2deg);  filter: brightness(1); }
  75%  { transform: translate(-1px,1px)  rotate(-0.5deg); filter: brightness(1.5); }
  90%  { transform: translate(1px,-1px)  rotate(0.5deg); }
}

.supplai-orb--react-power-up {
  animation: supplai-react-power-up 1100ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes supplai-react-power-up {
  0%   { transform: scale(0.3) rotate(-180deg); filter: brightness(0.5); opacity: 0.5; }
  30%  { transform: scale(0.7) rotate(-90deg);  filter: brightness(1.5); opacity: 0.8; }
  55%  { transform: scale(1.4) rotate(0deg);    filter: brightness(2);   opacity: 1; }
  70%  { transform: scale(1.2) rotate(5deg);    filter: brightness(1.5); }
  80%  { transform: scale(0.95) rotate(-2deg);  filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0deg);      filter: brightness(1); }
}

.supplai-orb--react-melt-reform {
  animation: supplai-react-melt-reform 1800ms ease-in-out !important;
}
@keyframes supplai-react-melt-reform {
  0%   { transform: scale(1,1) translateY(0); opacity: 1; border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  22%  { transform: scale(1.4,0.55) translateY(16px); border-radius: 50% 50% 65% 65% / 20% 20% 80% 80%; }
  40%  { transform: scale(1.7,0.3) translateY(28px); filter: blur(1px); opacity: 0.8; }
  55%  { transform: scale(1.7,0.3) translateY(28px); opacity: 0.6; }
  68%  { transform: scale(0.4,0.4) translateY(0); border-radius: 50%; opacity: 0.4; filter: blur(2px); }
  78%  { transform: scale(1.2,1.2) translateY(-10px); filter: blur(0); opacity: 1; border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  88%  { transform: scale(0.95,0.95) translateY(2px); }
  100% { transform: scale(1,1) translateY(0); }
}

.supplai-orb--react-puppy-tail {
  animation: supplai-react-puppy-tail 800ms ease-in-out !important;
  transform-origin: center top;
}
@keyframes supplai-react-puppy-tail {
  0%,100% { transform: rotate(0deg) scaleX(1); }
  10%  { transform: rotate(-12deg) scaleX(0.96); }
  20%  { transform: rotate(12deg)  scaleX(1.04); }
  30%  { transform: rotate(-14deg) scaleX(0.95); }
  40%  { transform: rotate(14deg)  scaleX(1.05); }
  50%  { transform: rotate(-13deg) scaleX(0.96); }
  60%  { transform: rotate(13deg)  scaleX(1.04); }
  70%  { transform: rotate(-9deg)  scaleX(0.97); }
  80%  { transform: rotate(8deg)   scaleX(1.02); }
  90%  { transform: rotate(-3deg)  scaleX(0.99); }
}

.supplai-orb--react-float-up {
  animation: supplai-react-float-up 1600ms ease-in-out !important;
}
@keyframes supplai-react-float-up {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-20px) scale(1.05); opacity: 0.9; }
  55%  { transform: translateY(-35px) scale(1.08); opacity: 0.75; }
  70%  { transform: translateY(-28px) scale(1.06); opacity: 0.82; }
  85%  { transform: translateY(-10px) scale(1.02); opacity: 0.95; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.supplai-orb--react-bubble {
  animation: supplai-react-bubble 1000ms cubic-bezier(0.34,1.2,0.64,1) !important;
}
@keyframes supplai-react-bubble {
  0%   { transform: scale(1); filter: blur(0); }
  35%  { transform: scale(1.35); filter: blur(0.3px); }
  60%  { transform: scale(1.45); filter: blur(0.5px); }
  70%  { transform: scale(0.85); filter: blur(0); }
  80%  { transform: scale(1.12); }
  90%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.supplai-orb--react-excited-jump {
  animation: supplai-react-excited-jump 900ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes supplai-react-excited-jump {
  0%   { transform: translateY(0) scale(1,1) rotate(0deg); }
  12%  { transform: translateY(8px) scale(1.1,0.85) rotate(-2deg); }
  32%  { transform: translateY(-45px) scale(0.88,1.15) rotate(15deg); }
  52%  { transform: translateY(-50px) scale(0.9,1.12) rotate(20deg); }
  68%  { transform: translateY(6px) scale(1.15,0.82) rotate(3deg); }
  80%  { transform: translateY(-8px) scale(0.97,1.05) rotate(-1deg); }
  90%  { transform: translateY(3px) scale(1.03,0.98); }
  100% { transform: translateY(0) scale(1,1) rotate(0deg); }
}

.supplai-orb--react-think-hard {
  animation: supplai-react-think-hard 1500ms ease-in-out !important;
}
@keyframes supplai-react-think-hard {
  0%,100% { transform: rotate(0deg) scale(1) translateX(0); }
  20%  { transform: rotate(-8deg) scale(1.02) translateX(-4px); }
  40%  { transform: rotate(-9deg) scale(1.03) translateX(-5px); }
  52%  { transform: rotate(-8deg) scale(1.04) translateX(-5px); filter: blur(0.3px); }
  64%  { transform: rotate(-9deg) scale(1.03) translateX(-4px); filter: blur(0); }
  78%  { transform: rotate(-5deg) scale(1.01) translateX(-2px); }
  90%  { transform: rotate(-2deg) scale(1) translateX(-1px); }
}

.supplai-orb--react-confusion-spiral {
  animation: supplai-react-confusion-spiral 1200ms ease-in-out !important;
}
@keyframes supplai-react-confusion-spiral {
  0%   { transform: rotate(0deg) scale(1) translate(0,0); }
  15%  { transform: rotate(15deg) scale(1.05) translate(5px,0); }
  30%  { transform: rotate(-10deg) scale(0.95) translate(-8px,-5px); }
  45%  { transform: rotate(20deg) scale(1.08) translate(6px,3px); }
  60%  { transform: rotate(-15deg) scale(0.93) translate(-5px,-3px); }
  75%  { transform: rotate(10deg) scale(1.03) translate(3px,0); }
  88%  { transform: rotate(-4deg) scale(0.98) translate(-1px,0); }
  100% { transform: rotate(0deg) scale(1) translate(0,0); }
}

.supplai-orb--react-grow-shrink {
  animation: supplai-react-grow-shrink 900ms cubic-bezier(0.34,1.3,0.64,1) !important;
}
@keyframes supplai-react-grow-shrink {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.6); filter: blur(0.5px); }
  50%  { transform: scale(0.45); filter: blur(0.3px); }
  68%  { transform: scale(1.2); filter: blur(0); }
  82%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.supplai-orb--react-ping-pong {
  animation: supplai-react-ping-pong 800ms ease-in-out !important;
}
@keyframes supplai-react-ping-pong {
  0%,100% { transform: translateX(0) scaleX(1); }
  12%  { transform: translateX(-25px) scaleX(0.85); }
  24%  { transform: translateX(0) scaleX(1.1); }
  36%  { transform: translateX(25px) scaleX(0.85); }
  48%  { transform: translateX(0) scaleX(1.1); }
  60%  { transform: translateX(-18px) scaleX(0.9); }
  70%  { transform: translateX(0) scaleX(1.06); }
  80%  { transform: translateX(12px) scaleX(0.92); }
  90%  { transform: translateX(0) scaleX(1.03); }
}

.supplai-orb--react-zoom-in-out {
  animation: supplai-react-zoom-in-out 700ms cubic-bezier(0.4,0,0.2,1) !important;
}
@keyframes supplai-react-zoom-in-out {
  0%,100% { transform: scale(1); }
  25%  { transform: scale(1.55); filter: blur(0.5px); }
  42%  { transform: scale(1.6); }
  58%  { transform: scale(0.5); filter: blur(1px); }
  72%  { transform: scale(1.1); filter: blur(0); }
  86%  { transform: scale(0.95); }
}

.supplai-orb--react-stretch-tall {
  animation: supplai-react-stretch-tall 900ms cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes supplai-react-stretch-tall {
  0%,100% { transform: scale(1,1); }
  20%  { transform: scale(0.8,1.5); }
  38%  { transform: scale(0.65,1.8); }
  55%  { transform: scale(0.7,1.6); }
  68%  { transform: scale(0.85,1.25); }
  82%  { transform: scale(0.96,1.06); }
}

.supplai-orb--react-shrink-wide {
  animation: supplai-react-shrink-wide 900ms cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes supplai-react-shrink-wide {
  0%,100% { transform: scale(1,1); }
  20%  { transform: scale(1.5,0.8); }
  38%  { transform: scale(1.8,0.65); }
  55%  { transform: scale(1.6,0.7); }
  68%  { transform: scale(1.25,0.85); }
  82%  { transform: scale(1.06,0.96); }
}

.supplai-orb--react-dizzy-spin-slow {
  animation: supplai-react-dizzy-spin-slow 2000ms cubic-bezier(0.4,0,0.4,1) !important;
}
@keyframes supplai-react-dizzy-spin-slow {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(120deg) scale(1.06); filter: blur(0.5px); }
  60%  { transform: rotate(240deg) scale(0.95); filter: blur(0.3px); }
  80%  { transform: rotate(330deg) scale(1.03); filter: blur(0); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   NEW COLOR STATES (6)
   ══════════════════════════════════════════════════════════════ */

.supplai-orb--cosmic {
  background:
    radial-gradient(circle at 28% 22%, #ffffff 0, #e8d5ff 8%, rgba(200,140,255,0.9) 20%, rgba(150,80,255,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(180,40,255,1) 0, rgba(100,0,200,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(120,60,255,0.95) 0, rgba(60,0,180,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,100,255,0.8) 0, rgba(180,0,200,0.0) 42%),
    radial-gradient(circle at 50% 50%, #0a0314 36%, #050008 100%);
  box-shadow: 0 0 40px rgba(180,100,255,1), 0 0 70px rgba(140,40,255,0.85), 0 0 55px rgba(255,60,255,0.5);
  animation: supplai-shape-thinking 20s ease-in-out infinite;
}
.supplai-orb--cosmic::before {
  background: conic-gradient(from 180deg,
    rgba(255,255,255,0) 0deg, rgba(240,200,255,0.6) 40deg, rgba(200,100,255,0.9) 100deg,
    rgba(120,40,255,0.85) 170deg, rgba(255,100,255,0.75) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer 18s linear infinite; opacity: 0.9; filter: blur(12px);
}

.supplai-orb--fire {
  background:
    radial-gradient(circle at 28% 22%, #fff0e0 0, #ffe0c0 8%, rgba(255,160,60,0.95) 20%, rgba(255,80,0,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(220,50,0,1) 0, rgba(180,20,0,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(255,100,20,0.9) 0, rgba(120,20,0,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,200,0,0.8) 0, rgba(200,60,0,0.0) 42%),
    radial-gradient(circle at 50% 50%, #150500 36%, #0a0200 100%);
  box-shadow: 0 0 40px rgba(255,100,20,1), 0 0 70px rgba(220,50,0,0.85), 0 0 55px rgba(255,200,0,0.5);
  animation: supplai-shape-thinking 16s ease-in-out infinite;
}
.supplai-orb--fire::before {
  background: conic-gradient(from 200deg,
    rgba(255,255,255,0) 0deg, rgba(255,240,180,0.8) 40deg, rgba(255,140,40,0.9) 100deg,
    rgba(220,50,0,0.95) 170deg, rgba(255,200,0,0.75) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer-fast 6s linear infinite; opacity: 0.95; filter: blur(10px);
}

.supplai-orb--ice {
  background:
    radial-gradient(circle at 28% 22%, #ffffff 0, #f0faff 8%, rgba(180,240,255,0.95) 20%, rgba(100,220,255,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(40,180,255,0.9) 0, rgba(0,120,200,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(140,230,255,0.85) 0, rgba(20,100,180,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(220,250,255,0.7) 0, rgba(60,160,220,0.0) 42%),
    radial-gradient(circle at 50% 50%, #020d14 36%, #010508 100%);
  box-shadow: 0 0 40px rgba(140,220,255,1), 0 0 70px rgba(60,180,255,0.8), 0 0 55px rgba(200,240,255,0.6);
  animation: supplai-shape-thinking 28s ease-in-out infinite;
}
.supplai-orb--ice::before {
  background: conic-gradient(from 150deg,
    rgba(255,255,255,0) 0deg, rgba(220,248,255,0.9) 40deg, rgba(140,220,255,0.8) 100deg,
    rgba(60,180,255,0.85) 170deg, rgba(200,240,255,0.7) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer 20s linear infinite; opacity: 0.85; filter: blur(11px);
}

.supplai-orb--toxic {
  background:
    radial-gradient(circle at 28% 22%, #f0ffe0 0, #e0ffcc 8%, rgba(180,255,80,0.95) 20%, rgba(100,255,0,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(40,200,0,1) 0, rgba(0,140,0,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(120,255,40,0.9) 0, rgba(20,120,0,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(200,255,0,0.8) 0, rgba(80,200,0,0.0) 42%),
    radial-gradient(circle at 50% 50%, #050e01 36%, #020701 100%);
  box-shadow: 0 0 40px rgba(120,255,40,1), 0 0 70px rgba(60,220,0,0.85), 0 0 55px rgba(200,255,0,0.6);
  animation: supplai-shape-thinking 18s ease-in-out infinite;
}
.supplai-orb--toxic::before {
  background: conic-gradient(from 160deg,
    rgba(255,255,255,0) 0deg, rgba(230,255,180,0.8) 40deg, rgba(140,255,60,0.9) 100deg,
    rgba(40,200,0,0.95) 170deg, rgba(200,255,0,0.75) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer 14s linear infinite; opacity: 0.9; filter: blur(12px);
}

.supplai-orb--sunset {
  background:
    radial-gradient(circle at 28% 22%, #fff5f0 0, #ffe8e0 8%, rgba(255,180,160,0.95) 20%, rgba(255,120,100,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(220,80,120,0.95) 0, rgba(180,40,80,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(255,140,120,0.9) 0, rgba(120,20,60,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,200,160,0.8) 0, rgba(200,80,60,0.0) 42%),
    radial-gradient(circle at 50% 50%, #150508 36%, #0a0204 100%);
  box-shadow: 0 0 40px rgba(255,140,120,1), 0 0 70px rgba(220,80,120,0.85), 0 0 55px rgba(255,200,160,0.5);
  animation: supplai-shape-thinking 22s ease-in-out infinite;
}
.supplai-orb--sunset::before {
  background: conic-gradient(from 190deg,
    rgba(255,255,255,0) 0deg, rgba(255,230,220,0.8) 40deg, rgba(255,160,140,0.9) 100deg,
    rgba(220,80,120,0.9) 170deg, rgba(255,200,160,0.75) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer 22s linear infinite; opacity: 0.9; filter: blur(12px);
}

.supplai-orb--forest {
  background:
    radial-gradient(circle at 28% 22%, #f0fff0 0, #e0ffe0 8%, rgba(140,220,120,0.95) 20%, rgba(60,180,60,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(20,120,40,1) 0, rgba(0,80,20,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(60,160,60,0.9) 0, rgba(0,60,20,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(120,200,80,0.8) 0, rgba(40,120,20,0.0) 42%),
    radial-gradient(circle at 50% 50%, #030e04 36%, #010702 100%);
  box-shadow: 0 0 40px rgba(80,200,80,1), 0 0 70px rgba(20,140,40,0.85), 0 0 55px rgba(120,200,80,0.5);
  animation: supplai-shape-thinking 26s ease-in-out infinite;
}
.supplai-orb--forest::before {
  background: conic-gradient(from 140deg,
    rgba(255,255,255,0) 0deg, rgba(200,255,200,0.8) 40deg, rgba(100,220,100,0.9) 100deg,
    rgba(20,140,40,0.9) 170deg, rgba(120,200,80,0.75) 240deg, rgba(255,255,255,0) 320deg);
  animation: supplai-shimmer 24s linear infinite; opacity: 0.88; filter: blur(12px);
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .supplai-orb,
  .supplai-orb::before {
    animation: none !important;
    transition: background 200ms linear, box-shadow 200ms linear !important;
  }
  .supplai-orb--morphing {
    filter: none !important;
  }
}

/* ── Resting corner state — always visible, holdable for voice ── */
.supplai-orb--resting {
  /* Override JS left/top — use safe bottom-right anchor instead */
  right: 20px !important;
  bottom: 100px !important;
  left: auto !important;
  top: auto !important;
  opacity: 0.55 !important;
  animation: orb-resting-breathe 3s ease-in-out infinite !important;
  box-shadow:
    0 0 12px rgba(140,180,255,0.55),
    0 0 22px rgba(108,60,255,0.3) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.supplai-orb--resting:hover,
.supplai-orb--resting:active {
  opacity: 0.92 !important;
  transform: scale(1.22) !important;
  box-shadow:
    0 0 22px rgba(140,180,255,0.85),
    0 0 38px rgba(108,60,255,0.6) !important;
}
@keyframes orb-resting-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%       { transform: scale(1.08); opacity: 0.72; }
}

/* ── Voice wave bars (equalizer above orb during speech) ─────── */
.orb-voice-waves {
  position: fixed;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 9601;
  height: 36px;
}
.orb-voice-waves span {
  display: block;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(to top, rgba(255,80,60,1), rgba(255,180,120,0.8));
  transform-origin: bottom center;
  animation: orb-wave-bar 0.52s ease-in-out infinite;
}
.orb-voice-waves span:nth-child(1) { height: 10px; animation-delay: 0s;    }
.orb-voice-waves span:nth-child(2) { height: 20px; animation-delay: 0.10s; }
.orb-voice-waves span:nth-child(3) { height: 30px; animation-delay: 0.20s; }
.orb-voice-waves span:nth-child(4) { height: 20px; animation-delay: 0.30s; }
.orb-voice-waves span:nth-child(5) { height: 10px; animation-delay: 0.40s; }
@keyframes orb-wave-bar {
  0%, 100% { transform: scaleY(0.3);  opacity: 0.45; }
  50%       { transform: scaleY(1.25); opacity: 1; }
}

/* ── Voice hold — listening state ────────────────────────────── */
.supplai-orb--listening {
  animation: orb-listening-pulse 0.7s ease-in-out infinite !important;
  cursor: crosshair !important;
}

@keyframes orb-listening-pulse {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(220, 50, 50, 0.7),
      0 0 12px rgba(255, 80, 80, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 70px rgba(210, 30, 30, 0.85),
      0 0 40px rgba(255, 60, 60, 0.65);
    transform: scale(1.1);
  }
}

/* Floating transcript label */
.orb-voice-label {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(0, 10, 30, 0.88);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 80, 60, 0.5);
  pointer-events: none;
  z-index: 9600;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(255, 60, 40, 0.3);
  animation: orb-label-appear 0.2s ease-out;
}

@keyframes orb-label-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── v3 Behaviour 2 — Confidence-driven jitter ─────────────────────────── */
.supplai-orb--jitter-low {
  animation: orb-jitter-low 0.18s ease-in-out infinite !important;
}
@keyframes orb-jitter-low {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(1px, -1px); }
  75%       { transform: translate(-1px, 1px); }
}

.supplai-orb--jitter-med {
  animation: orb-jitter-med 0.14s ease-in-out infinite !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6)) !important;
}
@keyframes orb-jitter-med {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%       { transform: translate(2px, -1px) rotate(0.5deg); }
  50%       { transform: translate(-2px, 1px) rotate(-0.5deg); }
  80%       { transform: translate(1px, 2px) rotate(0.3deg); }
}

.supplai-orb--jitter-high {
  animation: orb-jitter-high 0.10s ease-in-out infinite !important;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9)) !important;
}
@keyframes orb-jitter-high {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%       { transform: translate(-3px, 2px) rotate(-1deg); }
  35%       { transform: translate(3px, -2px) rotate(1deg); }
  55%       { transform: translate(-2px, -2px) rotate(-0.5deg); }
  75%       { transform: translate(2px, 2px) rotate(0.5deg); }
}

/* ── v3 Behaviour 7 — Mistake recovery ────────────────────────────────── */
.supplai-orb--mistake-recovery {
  animation: orb-mistake-recovery 1200ms ease-in-out forwards !important;
}
@keyframes orb-mistake-recovery {
  0%   { opacity: 1; filter: brightness(1); }
  15%  { opacity: 0.6; filter: brightness(0.8) blur(1px); }
  35%  { transform: translateX(-3px) rotate(-2deg); opacity: 0.8; }
  55%  { transform: translateX(3px) rotate(2deg); opacity: 0.9; }
  75%  { transform: translateX(-1px) rotate(-1deg); filter: brightness(1.1); }
  100% { transform: translateX(0) rotate(0); opacity: 1; filter: brightness(1); }
}

/* ══════════════════════════════════════════════════════════════
   SupplAi Orb — Polish Spec v4
   Affectionate · Cheeky · Physical · Emotional · Discovery · Environmental · Mood
   Easing palette:
     Cheeky/playful   cubic-bezier(0.34,1.56,0.64,1)    slight overshoot
     Affectionate     cubic-bezier(0.25,0.1,0.25,1)     ease-out
     Surprised/sharp  cubic-bezier(0.55,0.05,0.65,1)    sharp decel
     Sad/melancholic  cubic-bezier(0.25,0.46,0.45,0.94) ease-out slow
     Excited/burst    cubic-bezier(0.18,0.89,0.32,1.28) elastic out
   ══════════════════════════════════════════════════════════════ */

/* ── Section 2 — Timing overrides for existing animations ────────────────── */
.supplai-orb--react-wink {
  animation: orb-wink 600ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
.supplai-orb--react-side-eye {
  animation: orb-side-eye 1800ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
.supplai-orb--react-mic-drop {
  animation: orb-mic-drop 1400ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
.supplai-orb--react-wave-hello {
  animation: orb-wave-hello 1200ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}

/* ── Affectionate Family ──────────────────────────────────────────────────── */

.supplai-orb--react-heart-eyes {
  animation: orb-heart-eyes 1800ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-heart-eyes {
  0%   { transform: scale(1); filter: brightness(1); }
  20%  { transform: scale(1.05); filter: brightness(1.15) drop-shadow(0 0 8px rgba(232,180,188,0.8)); }
  50%  { transform: scale(1.05) rotate(3deg); filter: brightness(1.2) drop-shadow(0 0 12px rgba(232,180,188,0.9)); }
  70%  { transform: scale(1.03) rotate(-2deg); filter: brightness(1.15) drop-shadow(0 0 8px rgba(232,180,188,0.7)); }
  85%  { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-hug {
  animation: orb-hug 1400ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-hug {
  0%   { transform: scale(1,1); filter: brightness(1); }
  15%  { transform: scaleX(1.18) scaleY(0.88); }
  30%  { transform: scaleX(0.92) scaleY(1.1); }
  50%  { transform: scaleX(1.1) scaleY(0.94); filter: drop-shadow(0 0 10px rgba(232,180,188,0.6)); }
  70%  { transform: scaleX(0.97) scaleY(1.03); }
  85%  { transform: scaleX(1.02) scaleY(0.99); }
  100% { transform: scale(1); filter: none; }
}

.supplai-orb--react-affection-pulse {
  animation: orb-affection-pulse 2000ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-affection-pulse {
  0%   { transform: scale(1); filter: brightness(1); }
  15%  { transform: scale(1.08); filter: brightness(1.1) drop-shadow(0 0 10px rgba(232,180,188,0.7)); }
  30%  { transform: scale(1); }
  50%  { transform: scale(1.06); filter: brightness(1.08) drop-shadow(0 0 8px rgba(232,180,188,0.6)); }
  65%  { transform: scale(1); }
  80%  { transform: scale(1.04); filter: brightness(1.05) drop-shadow(0 0 6px rgba(232,180,188,0.5)); }
  100% { transform: scale(1); filter: none; }
}

.supplai-orb--react-purr {
  animation: orb-purr 300ms ease-in-out infinite !important;
}
@keyframes orb-purr {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%       { transform: translateY(-2px) scaleX(1.02); filter: drop-shadow(0 0 5px rgba(232,180,188,0.5)); }
}

.supplai-orb--react-kiss-blow {
  animation: orb-kiss-blow 1200ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-kiss-blow {
  0%   { transform: scale(1); filter: brightness(1); }
  20%  { transform: scaleX(0.88) scaleY(1.05) translateY(-3px); filter: drop-shadow(0 0 8px rgba(232,180,188,0.8)); }
  40%  { transform: scaleX(0.85) scaleY(1.08) translateY(-5px); }
  60%  { transform: scaleX(1) scaleY(1) translateY(-8px); filter: drop-shadow(0 0 14px rgba(232,180,188,0.9)); }
  80%  { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 0 10px rgba(232,180,188,0.6)); }
  100% { transform: scale(1); filter: none; }
}

/* ── Cheeky Family ────────────────────────────────────────────────────────── */

.supplai-orb--react-tongue-out {
  animation: orb-tongue-out 800ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-tongue-out {
  0%   { transform: scale(1); filter: brightness(1); }
  20%  { transform: scaleY(1.05) scaleX(0.97); }
  40%  { transform: scaleY(1.1) scaleX(0.94) translateY(3px); filter: brightness(1.1); }
  60%  { transform: scaleY(1.08) scaleX(0.95) translateY(2px); }
  75%  { transform: scaleY(1.04) scaleX(0.98); filter: brightness(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-eyebrow-raise {
  animation: orb-eyebrow-raise 1000ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-eyebrow-raise {
  0%   { transform: scale(1); filter: brightness(1); }
  15%  { transform: scaleY(1.08) translateY(-3px); }
  30%  { transform: scaleY(1.12) translateY(-5px); filter: brightness(1.08); }
  60%  { transform: scaleY(1.1) translateY(-4px); }
  80%  { transform: scaleY(1.04) translateY(-2px); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-smirk {
  animation: orb-smirk 1500ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-smirk {
  0%   { transform: skewX(0) rotate(0); filter: brightness(1); }
  20%  { transform: skewX(4deg) rotate(-2deg); filter: brightness(1.05); }
  45%  { transform: skewX(6deg) rotate(-3deg) translateX(3px); }
  65%  { transform: skewX(4deg) rotate(-2deg); }
  80%  { transform: skewX(2deg) rotate(-1deg); }
  100% { transform: skewX(0) rotate(0); filter: brightness(1); }
}

.supplai-orb--react-troll-grin {
  animation: orb-troll-grin 1200ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-troll-grin {
  0%   { transform: scale(1); filter: brightness(1); }
  25%  { transform: scaleX(1.2) scaleY(0.9); filter: brightness(1.15) drop-shadow(0 0 8px rgba(212,165,116,0.7)); }
  50%  { transform: scaleX(1.18) scaleY(0.92); filter: brightness(1.2) drop-shadow(0 0 12px rgba(245,158,11,0.8)); }
  75%  { transform: scaleX(1.08) scaleY(0.97); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ── Rolling / Physical Family ───────────────────────────────────────────── */

.supplai-orb--react-roll-laugh {
  animation: orb-roll-laugh 1800ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
@keyframes orb-roll-laugh {
  0%   { transform: rotate(0) translateY(0); filter: brightness(1); }
  15%  { transform: rotate(90deg) translateY(-8px); filter: brightness(1.15); }
  35%  { transform: rotate(180deg) translateY(-12px); filter: brightness(1.2); }
  55%  { transform: rotate(270deg) translateY(-6px); filter: brightness(1.15); }
  75%  { transform: rotate(360deg) translateY(-2px); }
  90%  { transform: rotate(380deg) translateY(0); }
  100% { transform: rotate(360deg); filter: brightness(1); }
}

.supplai-orb--react-tumble {
  animation: orb-tumble 1500ms cubic-bezier(0.55,0.05,0.65,1) forwards !important;
}
@keyframes orb-tumble {
  0%   { transform: rotate(0) translateX(0) translateY(0); }
  20%  { transform: rotate(-45deg) translateX(-8px) translateY(-6px) scaleX(1.1) scaleY(0.9); }
  40%  { transform: rotate(90deg) translateX(8px) translateY(-10px) scaleX(0.9) scaleY(1.1); }
  60%  { transform: rotate(-120deg) translateX(-5px) translateY(5px); }
  80%  { transform: rotate(30deg) translateX(3px) translateY(-2px); }
  100% { transform: rotate(0) translateX(0) translateY(0); }
}

.supplai-orb--react-cartwheel {
  animation: orb-cartwheel 1200ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
@keyframes orb-cartwheel {
  0%   { transform: rotate(0) translateX(0); filter: brightness(1); }
  50%  { transform: rotate(180deg) translateX(12px); filter: brightness(1.1); }
  100% { transform: rotate(360deg) translateX(0); filter: brightness(1); }
}

.supplai-orb--react-barrel-roll {
  animation: orb-barrel-roll 900ms cubic-bezier(0.55,0.05,0.65,1) forwards !important;
}
@keyframes orb-barrel-roll {
  0%   { transform: rotateY(0); filter: brightness(1); }
  50%  { transform: rotateY(180deg) scaleX(0.8); filter: brightness(1.15); }
  100% { transform: rotateY(360deg) scaleX(1); filter: brightness(1); }
}

.supplai-orb--react-slow-roll {
  animation: orb-slow-roll 2500ms ease-in-out forwards !important;
}
@keyframes orb-slow-roll {
  0%   { transform: rotate(0) translateX(0); filter: brightness(1); }
  25%  { transform: rotate(90deg) translateX(8px); filter: brightness(1.05); }
  50%  { transform: rotate(180deg) translateX(0); }
  75%  { transform: rotate(270deg) translateX(-8px); filter: brightness(1.05); }
  100% { transform: rotate(360deg) translateX(0); filter: brightness(1); }
}

.supplai-orb--react-wobble-roll {
  animation: orb-wobble-roll 1600ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-wobble-roll {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(180deg) translateX(6px); }
  50%  { transform: rotate(180deg) translateX(-4px); }
  65%  { transform: rotate(200deg); }
  80%  { transform: rotate(170deg); }
  90%  { transform: rotate(185deg); }
  100% { transform: rotate(180deg); }
}

/* ── Emotional Depth Family ───────────────────────────────────────────────── */

.supplai-orb--react-shy {
  animation: orb-shy 1500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-shy {
  0%   { transform: scale(1) translateX(0); filter: brightness(1); }
  20%  { transform: scale(0.92) translateX(-8px); filter: brightness(0.9) drop-shadow(0 0 8px rgba(232,180,188,0.5)); }
  40%  { transform: scale(0.94) translateX(-6px) rotate(-5deg); }
  60%  { transform: scale(0.95) translateX(-4px); filter: brightness(0.92) drop-shadow(0 0 6px rgba(232,180,188,0.4)); }
  80%  { transform: scale(0.97) translateX(-2px); }
  100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

.supplai-orb--react-tearful {
  animation: orb-tearful 2000ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-tearful {
  0%   { transform: scale(1); filter: brightness(1) saturate(1); }
  15%  { transform: scale(0.97) translateY(2px); filter: brightness(0.85) saturate(0.7); }
  30%  { transform: scale(0.95) translateY(3px); filter: brightness(0.8) saturate(0.5) drop-shadow(0 4px 6px rgba(71,85,105,0.4)); }
  55%  { transform: scale(0.94) translateY(4px); filter: brightness(0.78) saturate(0.4); }
  75%  { transform: scale(0.96) translateY(3px); filter: brightness(0.82) saturate(0.6); }
  90%  { transform: scale(0.98) translateY(1px); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); }
}

.supplai-orb--react-proud {
  animation: orb-proud 1400ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-proud {
  0%   { transform: scale(1) translateY(0); filter: brightness(1); }
  20%  { transform: scaleY(1.08) translateY(-6px); filter: brightness(1.15) drop-shadow(0 0 12px rgba(212,165,116,0.7)); }
  45%  { transform: scaleY(1.1) translateY(-8px); filter: brightness(1.2) drop-shadow(0 0 16px rgba(212,165,116,0.8)); }
  65%  { transform: scaleY(1.07) translateY(-5px); }
  80%  { transform: scaleY(1.04) translateY(-3px); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

.supplai-orb--react-relieved {
  animation: orb-relieved 1300ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-relieved {
  0%   { transform: scale(1); filter: brightness(1); }
  20%  { transform: scaleX(1.08) scaleY(0.93); filter: brightness(0.92); }
  40%  { transform: scaleX(0.96) scaleY(1.04); }
  55%  { transform: scaleX(1.03) scaleY(0.98); filter: brightness(1.05); }
  70%  { transform: scaleX(0.99) scaleY(1.01); }
  85%  { transform: scaleX(1.01) scaleY(0.99); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-grateful {
  animation: orb-grateful 1500ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-grateful {
  0%   { transform: rotate(0) translateY(0); filter: brightness(1); }
  20%  { transform: rotate(-8deg) translateY(3px); filter: brightness(1.05) drop-shadow(0 0 8px rgba(212,165,116,0.5)); }
  40%  { transform: rotate(-15deg) translateY(5px); }
  60%  { transform: rotate(-12deg) translateY(4px); filter: brightness(1.1) drop-shadow(0 0 10px rgba(212,165,116,0.6)); }
  80%  { transform: rotate(-6deg) translateY(2px); }
  100% { transform: rotate(0) translateY(0); filter: brightness(1); }
}

.supplai-orb--react-nervous {
  animation: orb-nervous 1800ms cubic-bezier(0.55,0.05,0.65,1) forwards !important;
}
@keyframes orb-nervous {
  0%,100% { transform: translateX(0); filter: brightness(1) saturate(0.8); }
  5%   { transform: translateX(-3px) rotate(-1deg); }
  10%  { transform: translateX(3px) rotate(1deg); }
  15%  { transform: translateX(-2px) rotate(-0.5deg); filter: brightness(0.9) saturate(0.6); }
  20%  { transform: translateX(2px) rotate(0.5deg); }
  30%  { transform: translateX(-3px); filter: brightness(0.85) saturate(0.5); }
  35%  { transform: translateX(3px); }
  45%  { transform: translateX(-2px) rotate(-1deg); }
  55%  { transform: translateX(2px) rotate(1deg); filter: brightness(0.88); }
  65%  { transform: translateX(-1px); }
  75%  { transform: translateX(1px); filter: brightness(0.92); }
  85%  { transform: translateX(-1px); }
  95%  { transform: translateX(0); filter: brightness(0.96); }
}

/* ── Discovery / Reaction Family ─────────────────────────────────────────── */

.supplai-orb--react-lightbulb {
  animation: orb-lightbulb 800ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
@keyframes orb-lightbulb {
  0%   { transform: scale(1); filter: brightness(1); }
  15%  { transform: scale(0.92); filter: brightness(0.8); }
  30%  { transform: scale(1.15); filter: brightness(1.6) drop-shadow(0 0 20px rgba(245,158,11,0.9)); }
  50%  { transform: scale(1.08); filter: brightness(1.4) drop-shadow(0 0 14px rgba(245,158,11,0.7)); }
  70%  { transform: scale(1.04); filter: brightness(1.2); }
  85%  { transform: scale(1.01); filter: brightness(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-mind-blown {
  animation: orb-mind-blown 1200ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
@keyframes orb-mind-blown {
  0%   { transform: scale(1); filter: brightness(1); }
  10%  { transform: scale(0.88); filter: brightness(0.7); }
  25%  { transform: scale(1.15); filter: brightness(1.5) drop-shadow(0 0 20px rgba(217,83,30,0.8)); }
  40%  { transform: scale(1.1) rotate(6deg); filter: brightness(1.4) drop-shadow(0 0 30px rgba(217,83,30,0.7)); }
  55%  { transform: scale(1.12) rotate(-4deg); filter: brightness(1.35); }
  70%  { transform: scale(1.06) rotate(2deg); filter: brightness(1.2); }
  85%  { transform: scale(1.02); filter: brightness(1.08); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

.supplai-orb--react-confused-spin {
  animation: orb-confused-spin 2000ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-confused-spin {
  0%   { transform: rotate(0) scale(1); filter: brightness(1); }
  20%  { transform: rotate(20deg) scale(0.97); filter: brightness(0.92) saturate(0.8); }
  40%  { transform: rotate(-15deg) scale(0.95); }
  55%  { transform: rotate(25deg) scale(0.96); filter: brightness(0.9) saturate(0.7); }
  70%  { transform: rotate(-10deg) scale(0.98); }
  85%  { transform: rotate(8deg); filter: brightness(0.95); }
  100% { transform: rotate(0) scale(1); filter: brightness(1); }
}

.supplai-orb--react-gasp {
  animation: orb-gasp 1000ms cubic-bezier(0.55,0.05,0.65,1) forwards !important;
}
@keyframes orb-gasp {
  0%   { transform: scale(1); filter: brightness(1); }
  10%  { transform: scale(1.12); filter: brightness(1.25) drop-shadow(0 0 14px rgba(10,37,64,0.5)); }
  25%  { transform: scale(1.1); filter: brightness(1.2); }
  50%  { transform: scale(1.08); filter: brightness(1.15); }
  75%  { transform: scale(1.04); filter: brightness(1.08); }
  90%  { transform: scale(1.01); filter: brightness(1.03); }
  100% { transform: scale(1); filter: brightness(1); }
}

.supplai-orb--react-applause {
  animation: orb-applause 1600ms cubic-bezier(0.18,0.89,0.32,1.28) forwards !important;
}
@keyframes orb-applause {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  12%  { transform: translateY(-10px) scale(1.05); filter: brightness(1.2) drop-shadow(0 0 10px rgba(212,165,116,0.7)); }
  24%  { transform: translateY(0) scale(0.97); }
  36%  { transform: translateY(-8px) scale(1.04); filter: brightness(1.18); }
  48%  { transform: translateY(0) scale(0.98); }
  60%  { transform: translateY(-6px) scale(1.03); filter: brightness(1.15); }
  72%  { transform: translateY(0) scale(0.99); }
  84%  { transform: translateY(-3px) scale(1.01); filter: brightness(1.05); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.supplai-orb--react-bow {
  animation: orb-bow 1300ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-bow {
  0%   { transform: rotate(0) translateY(0); filter: brightness(1); }
  20%  { transform: rotate(15deg) translateY(4px); }
  40%  { transform: rotate(30deg) translateY(8px); filter: drop-shadow(0 4px 8px rgba(10,37,64,0.3)); }
  65%  { transform: rotate(28deg) translateY(7px); }
  80%  { transform: rotate(15deg) translateY(4px); }
  100% { transform: rotate(0) translateY(0); filter: brightness(1); }
}

/* ── Environmental Interaction Family ────────────────────────────────────── */

.supplai-orb--react-point {
  animation: orb-point 800ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-point {
  0%   { transform: translateX(0) rotate(0); filter: brightness(1); }
  30%  { transform: translateX(12px) rotate(5deg); filter: brightness(1.08); }
  55%  { transform: translateX(14px) rotate(6deg); }
  75%  { transform: translateX(12px) rotate(4deg); }
  90%  { transform: translateX(6px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0); filter: brightness(1); }
}

.supplai-orb--react-wave-goodbye {
  animation: orb-wave-goodbye 1500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-wave-goodbye {
  0%   { transform: rotate(0) translateX(0); opacity: 1; }
  10%  { transform: rotate(-12deg) translateX(-4px); }
  25%  { transform: rotate(12deg) translateX(4px); }
  40%  { transform: rotate(-10deg) translateX(-3px); opacity: 0.9; }
  55%  { transform: rotate(8deg) translateX(3px); }
  70%  { transform: rotate(-5deg) translateX(-2px); opacity: 0.85; }
  85%  { transform: rotate(3deg) translateX(1px); opacity: 0.9; }
  100% { transform: rotate(0) translateX(0); opacity: 1; }
}

.supplai-orb--react-nudge {
  animation: orb-nudge 600ms cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes orb-nudge {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(5px); }
  50%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.supplai-orb--react-lean-in {
  animation: orb-lean-in 1800ms cubic-bezier(0.25,0.1,0.25,1) forwards !important;
}
@keyframes orb-lean-in {
  0%   { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
  20%  { transform: scale(1.04) translateX(6px) rotate(-3deg); filter: brightness(1.05); }
  40%  { transform: scale(1.05) translateX(8px) rotate(-4deg); }
  65%  { transform: scale(1.05) translateX(8px) rotate(-4deg); filter: brightness(1.08); }
  80%  { transform: scale(1.02) translateX(4px) rotate(-2deg); }
  100% { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
}

.supplai-orb--react-lean-back {
  animation: orb-lean-back 1000ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-lean-back {
  0%   { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
  25%  { transform: scale(0.96) translateX(-8px) rotate(3deg); filter: brightness(0.92); }
  50%  { transform: scale(0.95) translateX(-10px) rotate(4deg); }
  70%  { transform: scale(0.97) translateX(-6px) rotate(2deg); filter: brightness(0.95); }
  85%  { transform: scale(0.99) translateX(-2px); }
  100% { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
}

/* ── Ambient Mood States ──────────────────────────────────────────────────── */

.supplai-orb--mood-sunny {
  animation: orb-mood-sunny-bob 3s ease-in-out infinite !important;
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(245,158,11,0.4)) !important;
}
@keyframes orb-mood-sunny-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.supplai-orb--mood-cloudy {
  animation: orb-mood-cloudy-drift 5s ease-in-out infinite !important;
  filter: brightness(0.9) grayscale(0.3) !important;
}
@keyframes orb-mood-cloudy-drift {
  0%, 100% { transform: translateX(0); }
  40%       { transform: translateX(-3px); }
  70%       { transform: translateX(2px); }
}

.supplai-orb--mood-cozy {
  animation: orb-mood-cozy-pulse 4s ease-in-out infinite !important;
  filter: drop-shadow(0 0 8px rgba(217,83,30,0.35)) !important;
}
@keyframes orb-mood-cozy-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(217,83,30,0.35)); }
  50%       { transform: scale(1.03); filter: drop-shadow(0 0 14px rgba(217,83,30,0.6)); }
}

.supplai-orb--mood-electric {
  animation: orb-mood-electric-flicker 0.15s step-end infinite !important;
}
@keyframes orb-mood-electric-flicker {
  0%   { filter: brightness(1) drop-shadow(0 0 4px rgba(99,102,241,0.6)); }
  20%  { filter: brightness(1.3) drop-shadow(0 0 12px rgba(99,102,241,0.9)); }
  40%  { filter: brightness(1) drop-shadow(0 0 4px rgba(99,102,241,0.6)); }
  60%  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(99,102,241,0.8)); }
  80%  { filter: brightness(1); }
  100% { filter: brightness(1.1) drop-shadow(0 0 6px rgba(99,102,241,0.7)); }
}

/* ── Jeffrey Mood States (Phase 1) ───────────────────────────────────────── */
/* Background transitions use the 3800ms watercolor-melt already on .supplai-orb */

/* CALM — cool whites/blues, soft cyan dominant, subtle warm accent */
.supplai-orb--mood-calm {
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0, #e0f7ff 10%, rgba(120,220,255,0.9) 22%, rgba(80,180,255,0.0) 48%),
    radial-gradient(circle at 68% 72%, rgba(60,140,220,0.7) 0, rgba(20,80,180,0.0) 50%),
    radial-gradient(circle at 30% 72%, rgba(100,200,255,0.85) 0, rgba(40,120,220,0.0) 55%),
    radial-gradient(circle at 70% 28%, rgba(255,140,60,0.22) 0, rgba(200,80,20,0.0) 40%),
    radial-gradient(circle at 50% 50%, #030d1a 38%, #010408 100%) !important;
  box-shadow:
    0 0 35px rgba(100,200,255,0.90),
    0 0 60px rgba(60,140,220,0.65),
    0 0 25px rgba(180,230,255,0.50) !important;
  animation: orb-shape-calm 26s ease-in-out infinite !important;
}
@keyframes orb-shape-calm {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  25%  { border-radius: 54% 46% 52% 48% / 48% 52% 50% 50%; }
  50%  { border-radius: 48% 52% 48% 52% / 52% 48% 52% 48%; }
  75%  { border-radius: 50% 50% 54% 46% / 46% 54% 48% 52%; }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
}

/* CHARGED — red-orange + violet + cyan triple tension */
.supplai-orb--mood-charged {
  background:
    radial-gradient(circle at 28% 22%, #ffffff 0, #ffe0d0 8%, rgba(255,110,50,0.90) 20%, rgba(255,60,0,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(140,40,255,1) 0, rgba(80,0,220,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(0,200,255,0.90) 0, rgba(0,120,220,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,80,20,0.90) 0, rgba(200,20,0,0.0) 42%),
    radial-gradient(circle at 50% 50%, #090308 36%, #040108 100%) !important;
  box-shadow:
    0 0 45px rgba(255,100,40,0.95),
    0 0 75px rgba(140,40,255,0.80),
    0 0 55px rgba(0,200,255,0.60),
    0 0 25px rgba(255,80,20,0.70) !important;
  animation: orb-shape-charged 20s ease-in-out infinite !important;
}
@keyframes orb-shape-charged {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  15%  { border-radius: 46% 54% 52% 48% / 54% 46% 50% 50%; }
  35%  { border-radius: 56% 44% 46% 54% / 46% 54% 52% 48%; }
  55%  { border-radius: 44% 56% 54% 46% / 52% 48% 44% 56%; }
  75%  { border-radius: 50% 50% 46% 54% / 48% 52% 56% 44%; }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
}

/* ANNOYED — twitchy micro-jitter, orange/violet/yellow accent, fast 9s cycle */
.supplai-orb--mood-annoyed {
  background:
    radial-gradient(circle at 28% 22%, #fff5f0 0, #ffd0a0 8%, rgba(255,140,40,0.95) 20%, rgba(255,100,0,0.0) 44%),
    radial-gradient(circle at 70% 74%, rgba(120,20,200,0.85) 0, rgba(80,0,160,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(255,200,0,0.70) 0, rgba(200,140,0,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,60,20,0.80) 0, rgba(200,20,0,0.0) 42%),
    radial-gradient(circle at 50% 50%, #0a0404 36%, #040202 100%) !important;
  box-shadow:
    0 0 38px rgba(255,120,40,0.90),
    0 0 60px rgba(120,20,200,0.70),
    0 0 30px rgba(255,80,0,0.65) !important;
  animation: orb-shape-annoyed 9s ease-in-out infinite !important;
}
@keyframes orb-shape-annoyed {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: translateX(0); }
  12%  { border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%; transform: translateX(-2px); }
  24%  { border-radius: 54% 46% 52% 48% / 48% 52% 46% 54%; transform: translateX(2px); }
  36%  { border-radius: 48% 52% 50% 50% / 54% 46% 52% 48%; transform: translateX(-1px); }
  48%  { border-radius: 52% 48% 46% 54% / 50% 50% 54% 46%; transform: translateX(1px); }
  60%  { border-radius: 50% 50% 52% 48% / 48% 52% 48% 52%; transform: translateX(-2px); }
  72%  { border-radius: 54% 46% 48% 52% / 52% 48% 50% 50%; transform: translateX(2px); }
  84%  { border-radius: 48% 52% 52% 48% / 46% 54% 52% 48%; transform: translateX(-1px); }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; transform: translateX(0); }
}

/* RAGE — dominant red-orange, aggressive glow, fast 12s, heavy shadow */
.supplai-orb--mood-rage {
  background:
    radial-gradient(circle at 28% 22%, #fff0e0 0, #ffb080 8%, rgba(255,80,20,1) 18%, rgba(255,30,0,0.0) 40%),
    radial-gradient(circle at 70% 74%, rgba(180,20,20,0.95) 0, rgba(120,0,0,0.0) 46%),
    radial-gradient(circle at 28% 76%, rgba(255,50,0,1) 0, rgba(200,10,0,0.0) 52%),
    radial-gradient(circle at 72% 26%, rgba(255,100,0,0.95) 0, rgba(220,30,0,0.0) 42%),
    radial-gradient(circle at 50% 50%, #0d0202 36%, #060101 100%) !important;
  box-shadow:
    0 0 55px rgba(255,60,0,1),
    0 0 90px rgba(200,0,0,0.90),
    0 0 40px rgba(255,120,0,0.80),
    0 0 20px rgba(255,30,0,1) !important;
  filter: brightness(1.08) saturate(1.30) !important;
  animation: orb-shape-rage 12s ease-in-out infinite !important;
}
@keyframes orb-shape-rage {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
  8%   { border-radius: 48% 52% 48% 52% / 54% 46% 48% 52%; }
  17%  { border-radius: 56% 44% 52% 48% / 46% 54% 50% 50%; }
  25%  { border-radius: 44% 56% 50% 50% / 52% 48% 56% 44%; }
  33%  { border-radius: 54% 46% 44% 56% / 48% 52% 46% 54%; }
  42%  { border-radius: 46% 54% 56% 44% / 54% 46% 50% 50%; }
  50%  { border-radius: 52% 48% 48% 52% / 46% 54% 52% 48%; }
  58%  { border-radius: 48% 52% 54% 46% / 52% 48% 44% 56%; }
  67%  { border-radius: 56% 44% 46% 54% / 48% 52% 54% 46%; }
  75%  { border-radius: 44% 56% 52% 48% / 54% 46% 48% 52%; }
  83%  { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  92%  { border-radius: 54% 46% 48% 52% / 46% 54% 52% 48%; }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 48% 52%; }
}

/* SAD — blue dominant, pale/washed-out, bottom-heavy droop, slow 18s */
.supplai-orb--mood-sad {
  background:
    radial-gradient(circle at 30% 22%, #f0f8ff 0, #c8e4f8 10%, rgba(80,160,220,0.60) 22%, rgba(40,100,180,0.0) 48%),
    radial-gradient(circle at 68% 74%, rgba(40,80,180,0.75) 0, rgba(20,40,120,0.0) 50%),
    radial-gradient(circle at 30% 76%, rgba(60,120,200,0.80) 0, rgba(20,60,160,0.0) 55%),
    radial-gradient(circle at 70% 28%, rgba(100,160,220,0.40) 0, rgba(60,100,180,0.0) 40%),
    radial-gradient(circle at 50% 50%, #020510 38%, #010208 100%) !important;
  box-shadow:
    0 0 30px rgba(60,120,200,0.70),
    0 0 50px rgba(40,80,180,0.50),
    0 8px 25px rgba(20,40,120,0.60) !important;
  filter: brightness(0.88) saturate(0.72) !important;
  animation: orb-shape-sad 18s ease-in-out infinite !important;
}
@keyframes orb-shape-sad {
  0%   { border-radius: 52% 48% 50% 50% / 50% 50% 55% 52%; transform: translateY(0); }
  20%  { border-radius: 50% 50% 55% 52% / 48% 52% 58% 50%; transform: translateY(1px); }
  40%  { border-radius: 54% 46% 52% 56% / 50% 50% 56% 52%; transform: translateY(2px); }
  60%  { border-radius: 50% 50% 54% 54% / 52% 48% 58% 54%; transform: translateY(1px); }
  80%  { border-radius: 52% 48% 52% 56% / 50% 50% 56% 54%; transform: translateY(2px); }
  100% { border-radius: 52% 48% 50% 50% / 50% 50% 55% 52%; transform: translateY(0); }
}

/* Reduce-motion: keep color but stop all shape/jitter animation */
@media (prefers-reduced-motion: reduce) {
  .supplai-orb--mood-calm,
  .supplai-orb--mood-charged,
  .supplai-orb--mood-annoyed,
  .supplai-orb--mood-rage,
  .supplai-orb--mood-sad {
    animation: none !important;
    transform: none !important;
  }
}

/* ── Ambient Reaction: sleepy-yawn ───────────────────────────────────────── */

.supplai-orb--react-sleepy-yawn {
  animation: orb-sleepy-yawn 2000ms cubic-bezier(0.25,0.46,0.45,0.94) forwards !important;
}
@keyframes orb-sleepy-yawn {
  0%   { transform: scale(1); filter: brightness(1); }
  15%  { transform: scaleY(1.1) scaleX(0.95); filter: brightness(0.92); }
  30%  { transform: scaleY(1.12) scaleX(0.93) translateY(-3px); filter: brightness(0.88); }
  50%  { transform: scaleY(1.08) scaleX(0.96) translateY(-2px); }
  65%  { transform: scaleY(1.04) scaleX(0.99); filter: brightness(0.92); }
  80%  { transform: scaleY(1.02); filter: brightness(0.95); }
  100% { transform: scale(1); filter: brightness(1); }
}