/* ═══════════════════════════════════════════════
   Onnen.Games — AI Mascot & Bubble v2
   css/ai-bubble.css
   ═══════════════════════════════════════════════ */

/* ═══════ WRAP ═══════ */
#aiBubbleWrap{position:fixed;bottom:100px;left:18px;z-index:1800;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
#aiBubbleWrap>*{pointer-events:auto}

/* ═══════ MASCOT ═══════ */
.ai-mascot{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1e1e22 0%,#111113 60%,#09090a 100%);border:2px solid rgba(212,149,43,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s,background .6s ease;box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 30px rgba(212,149,43,.08),inset 0 1px 0 rgba(255,255,255,.04);transform-origin:bottom center}
.ai-mascot:hover{transform:scale(1.12)!important;border-color:rgba(212,149,43,.55);box-shadow:0 6px 30px rgba(0,0,0,.6),0 0 40px rgba(212,149,43,.15),inset 0 1px 0 rgba(255,255,255,.06)}
.ai-mascot:active{transform:scale(.92)!important}
.ai-mascot-glow{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(212,149,43,.12);animation:mascotPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes mascotPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:0}}

/* ═══════ FACE ═══════ */
.ai-mascot-face{position:relative;width:32px;height:22px;transition:transform .4s ease;--eye-x:0px;--eye-y:0px}
.ai-eye{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--amber,#d4952b);top:2px;transition:all .25s ease;box-shadow:0 0 8px rgba(212,149,43,.5),0 0 16px rgba(212,149,43,.15)}
.ai-eye.left{left:4px}.ai-eye.right{right:4px}
.ai-eye::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;top:1px;left:1px;opacity:.45;transition:all .2s ease;transform:translate(var(--eye-x),var(--eye-y))}
.ai-mouth{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:10px;height:3px;border-radius:0 0 5px 5px;background:rgba(212,149,43,.25);transition:all .3s ease}

/* Anger vein */
.ai-anger-vein{position:absolute;top:-6px;right:-6px;font-size:0;opacity:0;pointer-events:none;transition:font-size .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;filter:drop-shadow(0 1px 4px rgba(255,50,50,.4));z-index:6}

/* ═══════ BIG EYES (for random messages) ═══════ */
.ai-mascot.big-eyes .ai-eye{width:9px;height:9px;box-shadow:0 0 12px rgba(212,149,43,.7),0 0 22px rgba(212,149,43,.25)}
.ai-mascot.big-eyes .ai-eye::after{width:4px;height:4px;opacity:.6}

/* ═══════ IDLE STATES ═══════ */
.ai-mascot.blink .ai-eye{animation:eyeBlink .18s ease-in-out}
@keyframes eyeBlink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
.ai-mascot.look-left .ai-mascot-face{transform:translateX(-3px)}.ai-mascot.look-left .ai-eye::after{left:-1px}
.ai-mascot.look-right .ai-mascot-face{transform:translateX(3px)}.ai-mascot.look-right .ai-eye::after{left:3px}
.ai-mascot.look-up .ai-mascot-face{transform:translateY(-2px)}.ai-mascot.look-up .ai-eye::after{top:-1px}

/* Sleep */
.ai-mascot.sleeping .ai-eye{height:2px;border-radius:2px;opacity:.45;box-shadow:0 0 4px rgba(212,149,43,.2)}
.ai-mascot.sleeping .ai-eye::after{opacity:0}
.ai-mascot.sleeping .ai-mouth{width:6px;height:6px;border-radius:50%;background:rgba(212,149,43,.12);bottom:-1px}
.ai-mascot.sleeping{animation:sleepBob 3s ease-in-out infinite}
@keyframes sleepBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(-3deg)}}
.ai-zzz{position:absolute;top:-8px;right:-6px;pointer-events:none;opacity:0;transition:opacity .5s}
.ai-mascot.sleeping .ai-zzz{opacity:1}
.ai-zzz span{position:absolute;font-family:'Playfair Display',serif;font-weight:700;font-style:italic;color:var(--amber,#d4952b);opacity:0;animation:zFloat 2.8s ease-out infinite}
.ai-zzz span:nth-child(1){font-size:10px;right:0;bottom:0;animation-delay:0s}
.ai-zzz span:nth-child(2){font-size:14px;right:4px;bottom:0;animation-delay:.7s}
.ai-zzz span:nth-child(3){font-size:18px;right:10px;bottom:0;animation-delay:1.4s}
@keyframes zFloat{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}12%{opacity:.8}75%{opacity:.25}100%{opacity:0;transform:translate(12px,-32px) rotate(18deg) scale(1.15)}}

/* Peek */
.ai-mascot.peeking{animation:peekSlide 4.5s ease-in-out forwards}
@keyframes peekSlide{0%{transform:translateY(0)}12%{transform:translateY(42px)}82%{transform:translateY(42px)}100%{transform:translateY(0)}}
.ai-mascot.peeking .ai-mouth{opacity:0}
.ai-mascot.peeking .ai-eye{box-shadow:0 0 12px rgba(212,149,43,.8),0 0 24px rgba(212,149,43,.3)}

/* Wave */
.ai-wave-hand{position:absolute;top:-14px;right:-12px;font-size:22px;pointer-events:none;opacity:0;transform:rotate(0) scale(0);transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.ai-mascot.waving .ai-wave-hand{opacity:1;transform:rotate(0) scale(1);animation:handWave 1.6s ease-in-out}
@keyframes handWave{0%{transform:rotate(0) scale(1)}12%{transform:rotate(25deg) scale(1.15)}28%{transform:rotate(-18deg) scale(1)}42%{transform:rotate(20deg) scale(1.08)}58%{transform:rotate(-12deg) scale(1)}72%{transform:rotate(15deg) scale(1.05)}88%{transform:rotate(-5deg) scale(1)}100%{transform:rotate(0) scale(1)}}

/* Bounce */
.ai-mascot.bouncing{animation:mascotBounce 1.2s cubic-bezier(.34,1.56,.64,1)}
@keyframes mascotBounce{0%{transform:translateY(0)}20%{transform:translateY(-14px) scale(1.06)}40%{transform:translateY(0) scale(.96)}55%{transform:translateY(-7px) scale(1.03)}70%{transform:translateY(0)}85%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* Wiggle */
.ai-mascot.wiggle{animation:mascotWiggle .65s ease-in-out}
@keyframes mascotWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(5deg)}}

/* Talking */
.ai-mascot.talking .ai-eye{animation:eyeBlink .15s ease-in-out}
.ai-mascot.talking .ai-mouth{animation:mouthTalk .22s ease-in-out 6}
.ai-mascot.talking{animation:talkBounce .22s ease-in-out 6}
@keyframes mouthTalk{0%,100%{height:3px;width:10px;border-radius:0 0 5px 5px}50%{height:8px;width:8px;border-radius:50%}}
@keyframes talkBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Hover */
.ai-mascot:hover .ai-eye{transform:scaleY(1.2);box-shadow:0 0 12px rgba(212,149,43,.7),0 0 22px rgba(212,149,43,.2)}
.ai-mascot:hover .ai-eye::after{opacity:.65}
.ai-mascot:hover .ai-mouth{width:12px;height:5px;border-radius:0 0 6px 6px;background:rgba(212,149,43,.45)}
.ai-mascot:hover .ai-mascot-glow{border-color:rgba(212,149,43,.25)}

/* ═══════════════════════════════════════════════
   COLOR PARTY — mascot cycles through colors
   ═══════════════════════════════════════════════ */
.ai-mascot.color-party{
  animation:colorCycle 3.5s ease-in-out;
  border-color:rgba(168,85,247,.5);
}
.ai-mascot.color-party .ai-eye{animation:eyeColorCycle 3.5s ease-in-out}
.ai-mascot.color-party .ai-mouth{background:rgba(168,85,247,.4)}
.ai-mascot.color-party .ai-mascot-glow{border-color:rgba(168,85,247,.3)}

@keyframes colorCycle{
  0%{background:radial-gradient(circle at 40% 35%,#1e1e22 0%,#111113 60%,#09090a 100%);border-color:rgba(212,149,43,.3)}
  15%{background:radial-gradient(circle at 40% 35%,#1e1422 0%,#170a1a 60%,#0a0309 100%);border-color:rgba(168,85,247,.5)}
  35%{background:radial-gradient(circle at 40% 35%,#0e1a22 0%,#06121a 60%,#020809 100%);border-color:rgba(59,130,246,.5)}
  55%{background:radial-gradient(circle at 40% 35%,#0e221a 0%,#061a12 60%,#020907 100%);border-color:rgba(34,197,94,.5)}
  75%{background:radial-gradient(circle at 40% 35%,#221e0e 0%,#1a1506 60%,#090802 100%);border-color:rgba(249,115,22,.5)}
  100%{background:radial-gradient(circle at 40% 35%,#1e1e22 0%,#111113 60%,#09090a 100%);border-color:rgba(212,149,43,.3)}
}
@keyframes eyeColorCycle{
  0%{background:#d4952b;box-shadow:0 0 8px rgba(212,149,43,.5)}
  15%{background:#a855f7;box-shadow:0 0 12px rgba(168,85,247,.6)}
  35%{background:#3b82f6;box-shadow:0 0 12px rgba(59,130,246,.6)}
  55%{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.6)}
  75%{background:#f97316;box-shadow:0 0 12px rgba(249,115,22,.6)}
  100%{background:#d4952b;box-shadow:0 0 8px rgba(212,149,43,.5)}
}

/* ═══════════════════════════════════════════════
   RAINBOW MODE — full rainbow arc above mascot
   ═══════════════════════════════════════════════ */
.ai-mascot.rainbow-mode{
  animation:rainbowBorder 4s linear;
  border-image:conic-gradient(from var(--rainbow-angle,0deg),#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0088,#ff0000) 1;
  border-image-slice:1;
  border-width:2px;
  border-style:solid;
}
/* Fallback since border-image + border-radius don't mix — use box-shadow instead */
.ai-mascot.rainbow-mode{
  border-color:transparent;
  animation:rainbowGlow 4.5s ease-in-out;
  box-shadow:
    0 4px 24px rgba(0,0,0,.5),
    0 0 15px rgba(255,0,0,.2),
    0 0 25px rgba(0,255,0,.15),
    0 0 35px rgba(0,100,255,.1);
}
.ai-mascot.rainbow-mode .ai-eye{animation:eyeRainbow 4.5s linear}
.ai-mascot.rainbow-mode .ai-eye.left{animation-delay:0s}
.ai-mascot.rainbow-mode .ai-eye.right{animation-delay:.3s}
.ai-mascot.rainbow-mode .ai-mascot-face{transform:translateY(-2px)}
.ai-mascot.rainbow-mode .ai-mouth{width:14px;height:5px;border-radius:0 0 7px 7px;background:rgba(255,255,255,.15)}

/* Rainbow arc above */
.ai-mascot.rainbow-mode::before{
  content:'🌈';
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%) scale(0);
  font-size:24px;
  animation:rainbowArcIn 4.5s ease-in-out;
  pointer-events:none;
  z-index:7;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

@keyframes rainbowGlow{
  0%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 0 rgba(255,0,0,0);border-color:rgba(212,149,43,.3)}
  15%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(255,0,0,.3),0 0 30px rgba(255,100,0,.15);border-color:rgba(255,100,0,.4)}
  35%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(255,255,0,.2),0 0 30px rgba(0,255,0,.2);border-color:rgba(0,255,100,.4)}
  55%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(0,100,255,.3),0 0 30px rgba(100,0,255,.15);border-color:rgba(0,100,255,.4)}
  75%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(140,0,255,.3),0 0 30px rgba(255,0,200,.1);border-color:rgba(140,0,255,.4)}
  100%{box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 0 rgba(255,0,0,0);border-color:rgba(212,149,43,.3)}
}
@keyframes eyeRainbow{
  0%{background:#d4952b}15%{background:#ff4444}30%{background:#ff8800}45%{background:#ffdd00}
  60%{background:#22cc55}75%{background:#3388ff}90%{background:#aa55ff}100%{background:#d4952b}
}
@keyframes rainbowArcIn{
  0%{transform:translateX(-50%) scale(0) rotate(-20deg);opacity:0}
  10%{transform:translateX(-50%) scale(1.1) rotate(5deg);opacity:1}
  85%{transform:translateX(-50%) scale(1) rotate(0deg);opacity:1}
  100%{transform:translateX(-50%) scale(0) rotate(15deg);opacity:0}
}

/* ═══════════════════════════════════════════════
   DIZZY — spinning eyes 😵‍💫
   ═══════════════════════════════════════════════ */
.ai-mascot.dizzy .ai-eye{
  animation:dizzyEyes 0.4s linear infinite;
  background:var(--amber,#d4952b);
}
.ai-mascot.dizzy .ai-eye::after{opacity:0}
.ai-mascot.dizzy .ai-mouth{
  width:8px;height:8px;border-radius:50%;
  background:rgba(212,149,43,.3);
}
.ai-mascot.dizzy{animation:dizzyWobble 1s ease-in-out infinite}

@keyframes dizzyEyes{
  0%{box-shadow:0 0 8px rgba(212,149,43,.5),3px 0 0 rgba(212,149,43,.3)}
  25%{box-shadow:0 0 8px rgba(212,149,43,.5),0 3px 0 rgba(212,149,43,.3)}
  50%{box-shadow:0 0 8px rgba(212,149,43,.5),-3px 0 0 rgba(212,149,43,.3)}
  75%{box-shadow:0 0 8px rgba(212,149,43,.5),0 -3px 0 rgba(212,149,43,.3)}
  100%{box-shadow:0 0 8px rgba(212,149,43,.5),3px 0 0 rgba(212,149,43,.3)}
}
@keyframes dizzyWobble{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-5deg) translateX(-1px)}
  75%{transform:rotate(5deg) translateX(1px)}
}


/* ═══════════════════════════════════════════════
   ANGER PHASES
   ═══════════════════════════════════════════════ */

/* Phase 1 */
.ai-mascot.anger-1{animation:tickleShake .5s ease-in-out 3;border-color:rgba(212,149,43,.6);box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 30px rgba(212,149,43,.25)}
.ai-mascot.anger-1 .ai-eye{height:4px;border-radius:4px 4px 0 0;transform:scaleY(1);box-shadow:0 0 10px rgba(212,149,43,.6)}
.ai-mascot.anger-1 .ai-eye::after{opacity:0}
.ai-mascot.anger-1 .ai-mouth{width:14px;height:6px;border-radius:0 0 8px 8px;background:rgba(212,149,43,.5)}
@keyframes tickleShake{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-6deg) scale(1.05)}30%{transform:rotate(5deg) scale(1.02)}45%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(3deg) scale(1.01)}75%{transform:rotate(-2deg) scale(1.03)}90%{transform:rotate(1deg)}}

/* Phase 2 */
.ai-mascot.anger-2{animation:annoyedPulse .8s ease-in-out 2;border-color:rgba(230,160,50,.5)}
.ai-mascot.anger-2 .ai-eye{width:9px;height:9px;box-shadow:0 0 12px rgba(230,160,50,.7),0 0 24px rgba(230,160,50,.2)}
.ai-mascot.anger-2 .ai-eye::after{width:3px;height:3px;opacity:.7}
.ai-mascot.anger-2 .ai-mouth{width:10px;height:2px;border-radius:1px;background:rgba(230,160,50,.4)}
@keyframes annoyedPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Phase 3 */
.ai-mascot.anger-3{animation:angerShake .3s ease-in-out infinite;border-color:rgba(255,100,50,.6);background:radial-gradient(circle at 40% 35%,#2a1a12 0%,#1a0e08 60%,#0a0504 100%);box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 30px rgba(255,80,30,.2),inset 0 0 20px rgba(255,50,20,.06)}
.ai-mascot.anger-3 .ai-eye{background:#ff6030;box-shadow:0 0 10px rgba(255,80,30,.8),0 0 20px rgba(255,60,20,.3)}
.ai-mascot.anger-3 .ai-eye.left{border-radius:0 50% 50% 50%;transform:rotate(-8deg)}
.ai-mascot.anger-3 .ai-eye.right{border-radius:50% 0 50% 50%;transform:rotate(8deg)}
.ai-mascot.anger-3 .ai-eye::after{background:#fff;opacity:.5}
.ai-mascot.anger-3 .ai-mouth{width:12px;height:3px;border-radius:1px;background:rgba(255,80,30,.5);border-top:1px solid rgba(255,100,50,.3)}
.ai-mascot.anger-3 .ai-anger-vein{font-size:16px;opacity:1;animation:veinPulse 1s ease-in-out infinite}
.ai-mascot.anger-3 .ai-mascot-glow{border-color:rgba(255,80,30,.25)}
@keyframes angerShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-1deg)}75%{transform:translateX(2px) rotate(1deg)}}
@keyframes veinPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* Phase 4 */
.ai-mascot.anger-4{animation:furiousTremble .08s linear infinite;border-color:rgba(255,50,30,.8);background:radial-gradient(circle at 40% 35%,#3a1510 0%,#220a08 60%,#0d0302 100%);box-shadow:0 4px 24px rgba(0,0,0,.6),0 0 40px rgba(255,50,20,.35),0 0 80px rgba(255,30,10,.1),inset 0 0 30px rgba(255,30,10,.1)}
.ai-mascot.anger-4 .ai-eye{width:6px;height:6px;background:#ff3020;box-shadow:0 0 14px rgba(255,40,20,1),0 0 30px rgba(255,30,10,.5)}
.ai-mascot.anger-4 .ai-eye.left{border-radius:0 50% 50% 50%;transform:rotate(-12deg)}
.ai-mascot.anger-4 .ai-eye.right{border-radius:50% 0 50% 50%;transform:rotate(12deg)}
.ai-mascot.anger-4 .ai-eye::after{background:#fff;opacity:.3;width:2px;height:2px}
.ai-mascot.anger-4 .ai-mouth{width:14px;height:4px;border-radius:1px;background:rgba(255,50,20,.6);border-top:2px dashed rgba(255,100,60,.4)}
.ai-mascot.anger-4 .ai-anger-vein{font-size:20px;opacity:1;animation:veinPulse .4s ease-in-out infinite}
.ai-mascot.anger-4 .ai-mascot-glow{border-color:rgba(255,40,20,.4);animation:furiousGlow 1s ease-in-out infinite}
@keyframes furiousTremble{0%{transform:translate(0,0)}25%{transform:translate(-1.5px,1px)}50%{transform:translate(1.5px,-.5px)}75%{transform:translate(-1px,-1px)}100%{transform:translate(1px,.5px)}}
@keyframes furiousGlow{0%,100%{transform:scale(1);opacity:.6;border-color:rgba(255,40,20,.3)}50%{transform:scale(1.3);opacity:.2;border-color:rgba(255,40,20,.5)}}

/* Phase 5 — detonation */
.ai-mascot.anger-5{animation:detonationSwell 1.6s ease-in-out infinite;border-color:rgba(255,30,10,1);background:radial-gradient(circle at 50%,#551510 0%,#330a08 60%,#110202 100%);box-shadow:0 0 50px rgba(255,30,10,.5),0 0 100px rgba(255,50,20,.2),inset 0 0 40px rgba(255,30,10,.15)}
.ai-mascot.anger-5 .ai-eye{width:5px;height:5px;background:#ff2010;box-shadow:0 0 16px rgba(255,30,10,1),0 0 40px rgba(255,20,5,.6)}
.ai-mascot.anger-5 .ai-eye.left{border-radius:0 50% 50% 50%;transform:rotate(-15deg)}
.ai-mascot.anger-5 .ai-eye.right{border-radius:50% 0 50% 50%;transform:rotate(15deg)}
.ai-mascot.anger-5 .ai-eye::after{opacity:0}
.ai-mascot.anger-5 .ai-mouth{width:10px;height:8px;border-radius:50%;background:rgba(255,30,10,.5)}
.ai-mascot.anger-5 .ai-anger-vein{font-size:22px;opacity:1;animation:veinPulse .25s ease-in-out infinite}
.ai-mascot.anger-5 .ai-mascot-glow{border-color:rgba(255,20,10,.6);animation:none;transform:scale(1.5);opacity:.4}
@keyframes detonationSwell{0%{transform:scale(1)}15%{transform:scale(1.2)}25%{transform:scale(.95)}40%{transform:scale(1.3)}55%{transform:scale(.92)}70%{transform:scale(1.4)}80%{transform:scale(.9)}90%{transform:scale(1.5)}100%{transform:scale(1)}}

/* Exploding / Exploded / Reforming */
.ai-mascot.exploding{animation:finalExplosion 1s cubic-bezier(.25,.1,.25,1) forwards!important;border-color:#ff4020!important;box-shadow:0 0 80px rgba(255,40,10,.8),0 0 160px rgba(255,60,20,.4)!important}
.ai-mascot.exploding .ai-mascot-face{animation:faceShake .05s linear infinite}
.ai-mascot.exploding .ai-mascot-glow{animation:none!important;transform:scale(2);border-color:rgba(255,40,10,.8);opacity:.6}
@keyframes finalExplosion{0%{transform:scale(1);opacity:1;filter:brightness(1)}20%{transform:scale(1.6);filter:brightness(1.5)}35%{transform:scale(1.1);filter:brightness(1.2)}50%{transform:scale(1.9);filter:brightness(2)}65%{transform:scale(1.3);filter:brightness(1.8)}80%{transform:scale(2.2);filter:brightness(3);opacity:.9}90%{transform:scale(2.5);filter:brightness(5);opacity:.5}100%{transform:scale(3);filter:brightness(8);opacity:0}}
@keyframes faceShake{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}100%{transform:translate(1px,1px)}}
.ai-mascot.exploded{animation:none!important;opacity:0!important;transform:scale(0)!important;pointer-events:none;transition:none}
.ai-mascot.reforming{animation:reformBounce .6s cubic-bezier(.34,1.56,.64,1) forwards!important;border-color:rgba(212,149,43,.3)!important;background:radial-gradient(circle at 40% 35%,#1e1e22 0%,#111113 60%,#09090a 100%)!important;box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 30px rgba(212,149,43,.08)!important}
.ai-mascot.reforming .ai-eye{background:var(--amber,#d4952b)!important;width:7px!important;height:7px!important;border-radius:50%!important;transform:none!important;box-shadow:0 0 8px rgba(212,149,43,.5)!important}
.ai-mascot.reforming .ai-eye::after{opacity:.45!important;background:#fff!important;width:3px!important;height:3px!important;top:1px!important;left:1px!important}
.ai-mascot.reforming .ai-mouth{width:10px!important;height:3px!important;border-radius:0 0 5px 5px!important;background:rgba(212,149,43,.25)!important;border:none!important}
.ai-mascot.reforming .ai-anger-vein{opacity:0!important;font-size:0!important}
.ai-mascot.reforming .ai-mascot-glow{border-color:rgba(212,149,43,.12)!important;animation:mascotPulse 3s ease-in-out infinite!important;transform:scale(1)!important;opacity:.5!important}
@keyframes reformBounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{opacity:1;transform:scale(1.2) rotate(10deg)}70%{transform:scale(.9) rotate(-5deg)}85%{transform:scale(1.05) rotate(2deg)}100%{transform:scale(1) rotate(0)}}

/* Explosion particles */
.ai-explosion-particle{position:absolute;border-radius:50%;pointer-events:none;z-index:1900;animation:particleFly .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes particleFly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}60%{opacity:.8}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.2)}}

/* ═══════ NOTIFICATION DOT ═══════ */
.ai-notif-dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--amber,#d4952b);border:2.5px solid #09090a;opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:5}
.ai-notif-dot.show{opacity:1;transform:scale(1);animation:notifPing 1.8s ease-in-out infinite}
@keyframes notifPing{0%,100%{box-shadow:0 0 0 0 rgba(212,149,43,.6)}50%{box-shadow:0 0 0 7px rgba(212,149,43,0)}}

/* ═══════════════════════════════════════════════
   BUBBLE — with color variants
   ═══════════════════════════════════════════════ */
.ai-bubble{
  background:rgba(14,14,16,.97);backdrop-filter:blur(20px);
  border:1.5px solid rgba(212,149,43,.2);
  border-radius:14px 14px 14px 4px;
  padding:14px 36px 14px 16px;max-width:320px;min-width:200px;position:relative;
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 40px rgba(212,149,43,.06),inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0;transform:translateY(10px) translateX(-10px) scale(.88);pointer-events:none;
  transition:opacity .4s cubic-bezier(0,0,.2,1),transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,border-color .3s;
}
.ai-bubble.show{opacity:1;transform:translateY(0) translateX(0) scale(1);pointer-events:auto}
.ai-bubble.hide{opacity:0;transform:translateY(8px) scale(.92);pointer-events:none;transition:opacity .3s ease,transform .3s ease}

/* ── Top bar (colored) ── */
.ai-bubble::before{content:'';position:absolute;top:0;left:12px;right:12px;height:2px;border-radius:2px;opacity:0;transition:opacity .3s .2s}
.ai-bubble.show::before{opacity:.6}

/* ── AMBER (recommendations) ── */
.ai-bubble.amber{border-color:rgba(212,149,43,.25)}
.ai-bubble.amber::before{background:linear-gradient(90deg,transparent,#d4952b,transparent)}
.ai-bubble.amber .ai-bubble-tail{background:rgba(14,14,16,.97);border-left:1.5px solid rgba(212,149,43,.25);border-bottom:1.5px solid rgba(212,149,43,.25)}

/* ── BLUE (welcome / greetings / idle chat) ── */
.ai-bubble.blue{border-color:rgba(59,130,246,.25);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 40px rgba(59,130,246,.06),inset 0 1px 0 rgba(255,255,255,.03)}
.ai-bubble.blue::before{background:linear-gradient(90deg,transparent,#3b82f6,transparent)}
.ai-bubble.blue .ai-bubble-tail{background:rgba(14,14,16,.97);border-left:1.5px solid rgba(59,130,246,.25);border-bottom:1.5px solid rgba(59,130,246,.25)}

/* ── RED (anger) ── */
.ai-bubble.red{border-color:rgba(239,68,68,.35);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 40px rgba(239,68,68,.1),inset 0 1px 0 rgba(255,255,255,.03)}
.ai-bubble.red::before{background:linear-gradient(90deg,transparent,#ef4444,transparent)}
.ai-bubble.red .ai-bubble-tail{background:rgba(14,14,16,.97);border-left:1.5px solid rgba(239,68,68,.35);border-bottom:1.5px solid rgba(239,68,68,.35)}
.ai-bubble.red .ai-bubble-content strong{color:#ef4444}

/* ── Tail default ── */
.ai-bubble-tail{position:absolute;bottom:10px;left:-7px;width:14px;height:14px;background:rgba(14,14,16,.97);border-left:1.5px solid rgba(212,149,43,.2);border-bottom:1.5px solid rgba(212,149,43,.2);transform:rotate(45deg);border-radius:0 0 0 4px;transition:border-color .3s}

/* Content */
.ai-bubble-content{font-family:'Inter',sans-serif;font-size:13px;line-height:1.6;color:rgba(236,232,222,.92);font-weight:400}
.ai-bubble-content strong{color:var(--amber,#d4952b);font-weight:600;transition:color .3s}
.ai-typing{display:inline-flex;gap:4px;align-items:center;height:18px;padding:0 4px}
.ai-typing span{width:5px;height:5px;border-radius:50%;background:var(--amber,#d4952b);opacity:.3;animation:typeDot .9s ease-in-out infinite}
.ai-typing span:nth-child(2){animation-delay:.15s}.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes typeDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.ai-bubble-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(236,232,222,.04);color:rgba(128,123,111,.5);font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;line-height:1}
.ai-bubble-close:hover{background:rgba(212,149,43,.15);color:var(--amber,#d4952b);transform:rotate(90deg)}
.ai-bubble-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ai-bubble-actions:empty{display:none;margin:0}
.ai-action-btn{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;padding:6px 14px;border-radius:7px;border:1px solid rgba(236,232,222,.08);background:none;color:rgba(128,123,111,.8);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
.ai-action-btn:hover{border-color:rgba(212,149,43,.35);color:var(--amber,#d4952b);transform:translateY(-2px)}
.ai-action-btn.primary{background:var(--amber,#d4952b);color:#09090a;border-color:var(--amber,#d4952b)}
.ai-action-btn.primary:hover{filter:brightness(1.12);box-shadow:0 3px 14px rgba(212,149,43,.3);transform:translateY(-2px)}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1000px){
  #aiBubbleWrap{bottom:20px;left:14px}
  .ai-mascot{width:54px;height:54px}.ai-mascot-face{width:28px;height:18px}
  .ai-eye{width:6px;height:6px}.ai-eye::after{width:2.5px;height:2.5px}.ai-eye.left{left:3px}.ai-eye.right{right:3px}.ai-mouth{width:8px}
  .ai-anger-vein{top:-5px;right:-5px}
  .ai-mascot.anger-3 .ai-anger-vein{font-size:14px}.ai-mascot.anger-4 .ai-anger-vein{font-size:17px}.ai-mascot.anger-5 .ai-anger-vein{font-size:18px}
  .ai-mascot.rainbow-mode::before{font-size:20px;top:-18px}
}
@media(max-width:600px){
  #aiBubbleWrap{bottom:14px;left:10px;right:auto;gap:8px}
  .ai-mascot{width:48px;height:48px}.ai-mascot-face{width:24px;height:16px}
  .ai-eye{width:5px;height:5px}.ai-eye::after{width:2px;height:2px}.ai-mouth{width:7px;height:2px}
  .ai-bubble{max-width:calc(100vw - 80px);min-width:150px;padding:12px 28px 12px 12px}
  .ai-bubble-content{font-size:12px}
  .ai-wave-hand{font-size:16px;top:-10px;right:-8px}
  .ai-zzz span:nth-child(1){font-size:8px}.ai-zzz span:nth-child(2){font-size:11px}.ai-zzz span:nth-child(3){font-size:14px}
  .ai-anger-vein{top:-4px;right:-4px}
  .ai-mascot.anger-3 .ai-anger-vein{font-size:12px}.ai-mascot.anger-4 .ai-anger-vein{font-size:14px}.ai-mascot.anger-5 .ai-anger-vein{font-size:16px}
  .ai-mascot.rainbow-mode::before{font-size:16px;top:-14px}
}