.pa-confetti { pointer-events: none !important; }
/* ============================================================
   PIMSU 4.0 — floating pearl-and-gold mascot
   No colored shell. Robot IS the button.
   Pure SVG + CSS.
   ============================================================ */

/* ---- Launcher: robot itself, no shell ---- */
.pa-launcher{
  width:140px;height:152px;border-radius:0;border:0;cursor:pointer;position:relative;
  background:transparent !important;
  box-shadow:none !important;
  display:grid;place-items:end center;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  padding:0;overflow:visible;
}
.pa-launcher:hover{
  transform:translateY(-6px) scale(1.05);
}
.pa-launcher:active{transform:scale(.94)}
.pa-launcher:focus-visible{outline:3px solid #F6B73C;outline-offset:6px;border-radius:20px}

/* Soft ground shadow under the robot */
.pa-launcher::before{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:78px;height:12px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(11,18,38,.22) 0%, transparent 70%);
  pointer-events:none;z-index:0;
  transition:width .3s ease, opacity .3s ease;
}
.pa-launcher:hover::before{width:90px;opacity:.85}

/* The SVG robot fills the launcher */
.pa-robot{
  width:100%;height:100%;display:block;overflow:visible;
  position:relative;z-index:1;
  filter:drop-shadow(0 8px 16px rgba(11,18,38,.18));
  transition:filter .3s ease;
}
.pa-launcher:hover .pa-robot{
  filter:drop-shadow(0 12px 22px rgba(11,18,38,.22));
}

/* Living Sky — subtle cool tint at night, warm in day */
html[data-tod="day"] .pa-robot{filter:drop-shadow(0 8px 16px rgba(11,18,38,.14)) brightness(1.03)}
html[data-tod="night"] .pa-robot{filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)) brightness(.97)}

/* ============================================================
   IDLE ANIMATIONS
   ============================================================ */
@keyframes pa-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.pa-robot .pa-bot-body{animation:pa-float 3.6s ease-in-out infinite;transform-origin:50% 85%}

@keyframes pa-antenna{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-2.5px) rotate(3deg)}
}
.pa-robot .pa-antenna{animation:pa-antenna 2.6s ease-in-out infinite;transform-origin:50% 100%}

@keyframes pa-light{
  0%,100%{opacity:.65;filter:drop-shadow(0 0 4px #FFE0A3)}
  50%{opacity:1;filter:drop-shadow(0 0 10px #F6B73C)}
}
.pa-robot .pa-antenna-light{animation:pa-light 1.9s ease-in-out infinite}

@keyframes pa-blink{
  0%,91%,100%{transform:scaleY(1)}
  94%,97%{transform:scaleY(.06)}
}
.pa-robot .pa-eye{animation:pa-blink 4.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

@keyframes pa-look{
  0%,42%,58%,100%{transform:translateX(0)}
  48%,54%{transform:translateX(1.8px)}
}
.pa-robot .pa-pupil{animation:pa-look 6.5s ease-in-out infinite;transform-box:fill-box}

@keyframes pa-cheek{
  0%,100%{opacity:.45}
  50%{opacity:.8}
}
.pa-robot .pa-cheek{animation:pa-cheek 3.4s ease-in-out infinite}

@keyframes pa-jet{
  0%,100%{opacity:.7;transform:scale(1,1)}
  50%{opacity:1;transform:scale(1.14,1.25)}
}
.pa-robot .pa-jet{animation:pa-jet 1.7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

@keyframes pa-chest{
  0%,100%{opacity:.7}
  50%{opacity:1;filter:drop-shadow(0 0 5px #F6B73C)}
}
.pa-robot .pa-chest-light{animation:pa-chest 2.2s ease-in-out infinite}

/* ============================================================
   WAVING HAND
   ============================================================ */
.pa-robot .pa-hand{
  transform-origin:55% 90%;transform-box:fill-box;opacity:0;
}
@keyframes pa-wave{
  0%{opacity:0;transform:rotate(0deg) scale(.5)}
  8%{opacity:1;transform:rotate(0deg) scale(1)}
  18%{transform:rotate(-22deg)}
  28%{transform:rotate(18deg)}
  38%{transform:rotate(-20deg)}
  48%{transform:rotate(15deg)}
  58%{transform:rotate(-14deg)}
  68%{transform:rotate(10deg)}
  78%{transform:rotate(-6deg)}
  88%{opacity:1;transform:rotate(0deg) scale(1)}
  100%{opacity:0;transform:rotate(0deg) scale(.5)}
}
.pa-launcher.pa-wave .pa-hand{animation:pa-wave 2.8s ease-in-out}
.pa-launcher.pa-auto .pa-hand{animation:pa-wave 2.8s ease-in-out 7s infinite}

/* ============================================================
   NOD / TILT / DANCE / YAWN
   ============================================================ */
@keyframes pa-nod{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-8deg)}
  50%{transform:rotate(5deg)}
  75%{transform:rotate(-3deg)}
}
.pa-launcher.pa-nod .pa-bot-body{animation:pa-float 3.6s ease-in-out infinite, pa-nod 1.3s ease-in-out}

@keyframes pa-tilt{
  0%,100%{transform:rotate(0deg)}
  30%,70%{transform:rotate(-14deg)}
}
.pa-launcher.pa-tilt .pa-bot-body{animation:pa-float 3.6s ease-in-out infinite, pa-tilt 1.7s ease-in-out}

@keyframes pa-dance{
  0%   {transform:rotate(0deg)   scale(1)    translateY(0)}
  10%  {transform:rotate(-14deg) scale(1.1)  translateY(-6px)}
  20%  {transform:rotate(16deg)  scale(1.14) translateY(0)}
  30%  {transform:rotate(-18deg) scale(1.12) translateY(-8px)}
  40%  {transform:rotate(14deg)  scale(1.16) translateY(-3px)}
  50%  {transform:rotate(-16deg) scale(1.12) translateY(-8px)}
  60%  {transform:rotate(12deg)  scale(1.14) translateY(-2px)}
  70%  {transform:rotate(-10deg) scale(1.08) translateY(-5px)}
  80%  {transform:rotate(7deg)   scale(1.05) translateY(0)}
  90%  {transform:rotate(-4deg)  scale(1.02) translateY(-2px)}
  100% {transform:rotate(0deg)   scale(1)    translateY(0)}
}
.pa-launcher.pa-dance{
  animation:pa-dance 2.4s cubic-bezier(.34,1.56,.64,1) !important;
}

@keyframes pa-yawn{
  0%,100%{transform:scaleY(1)}
  40%,60%{transform:scaleY(1.5) scaleX(.93)}
}
.pa-launcher.pa-yawning .pa-eye{animation:pa-yawn 3.2s ease-in-out 1}

/* ============================================================
   CONFETTI
   ============================================================ */
.pa-confetti{
  position:fixed;pointer-events:none;z-index:10000;
  width:10px;height:10px;border-radius:2px;
  animation:pa-confetti-fall 2.2s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes pa-confetti-fall{
  0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0}
}

/* ============================================================
   VOICE BUTTON
   ============================================================ */
.pa-voice{
  width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  display:grid;place-items:center;flex:none;
  transition:background .2s ease, transform .2s ease;
}
.pa-voice:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.pa-voice:active{transform:scale(.93)}
.pa-voice svg{width:17px;height:17px;transition:opacity .2s ease}
.pa-voice .pa-voice-off{display:none}
.pa-voice.muted .pa-voice-on{display:none}
.pa-voice.muted .pa-voice-off{display:block}
.pa-voice.speaking{background:rgba(246,183,60,.4);border-color:#F6B73C}

/* ---- Badge (floats above robot) ---- */
.pa-badge{
  position:absolute;top:4px;right:8px;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:#B42318;color:#fff;font-size:.72rem;font-weight:800;
  display:none;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 0 0 3px #FBF7F0, 0 4px 10px -2px rgba(180,35,24,.5)
}
.pa-badge.show{display:flex;animation:pa-badge-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes pa-badge-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---- Tooltip ---- */
.pa-tip{
  position:absolute;right:150px;left:auto;bottom:36px;
  background:#0B1226;color:#fff;padding:11px 15px;border-radius:14px;
  font-size:.88rem;font-weight:600;line-height:1.35;white-space:nowrap;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.55);
  opacity:0;transform:translateX(12px);pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pa-tip::after{
  content:"";position:absolute;right:-6px;bottom:18px;
  width:12px;height:12px;background:#0B1226;transform:rotate(45deg);
}
.pa-tip.show{opacity:1;transform:translateX(0)}
.pa-tip b{color:#FFC7A0}

/* ---- Panel header avatar ---- */
.pa-head .pa-avatar{
  width:54px;height:54px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 50% 30%,#3A4A9A 0%,#1A2456 55%,#0B1226 100%);
  display:grid;place-items:center;color:#0B1226;
  box-shadow:
    0 0 0 2px #F6B73C,
    0 0 0 5px rgba(246,183,60,.22),
    0 10px 20px -8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;
}
.pa-head .pa-avatar svg{width:42px;height:42px;display:block;margin-top:2px}
.pa-head .pa-avatar .pa-eye{animation:pa-blink 4.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.pa-head .pa-avatar .pa-antenna-light{animation:pa-light 1.9s ease-in-out infinite}

/* Talking mouth */
.pa-root.pa-thinking .pa-head .pa-avatar .pa-mouth{
  animation:pa-talk .55s ease-in-out infinite;
  transform-origin:center;transform-box:fill-box;
}
@keyframes pa-talk{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.3)}
}
.pa-root.pa-speaking .pa-head .pa-avatar .pa-mouth{
  animation:pa-talk .26s ease-in-out infinite;
}
.pa-root.pa-thinking .pa-head .pa-avatar .pa-antenna-light{
  animation:pa-light .55s ease-in-out infinite;
}

/* ---- Bot message bubble avatars ---- */
.pa-msg .pa-mini-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 30%,#3A4A9A 0%,#1A2456 55%,#0B1226 100%);
  display:grid;place-items:center;
  box-shadow:0 0 0 1.5px #F6B73C, 0 6px 12px -5px rgba(11,18,38,.55);
  overflow:hidden;
}
.pa-msg .pa-mini-avatar svg{width:28px;height:28px;display:block;margin-top:1px}
.pa-msg .pa-mini-avatar .pa-eye{animation:pa-blink 4.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

.pa-msg.pa-user .pa-mini-avatar{
  background:linear-gradient(135deg,#5B3FB0,#B06B8E);
}
.pa-msg.pa-user .pa-mini-avatar svg{stroke:#fff}

/* Hide default chatbot icons completely */
.pa-launcher svg.pa-i-chat,
.pa-launcher svg.pa-i-close{display:none !important}

/* ============================================================
   SEASONAL COSTUMES
   ============================================================ */
.pa-launcher.pa-season-ramadan::after{
  content:"🏮";position:absolute;top:-8px;left:2px;
  font-size:24px;line-height:1;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(246,183,60,.8));
  animation:pa-lantern-sway 3s ease-in-out infinite;
  transform-origin:50% 0%;
}
@keyframes pa-lantern-sway{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
}

.pa-launcher.pa-season-eid::after{
  content:"🌙";position:absolute;top:-6px;right:4px;
  font-size:24px;line-height:1;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(246,183,60,.9));
  animation:pa-crescent-glow 2s ease-in-out infinite;
}
@keyframes pa-crescent-glow{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}

.pa-launcher.pa-season-anniversary::after{
  content:"🎓";position:absolute;top:-6px;right:10px;
  font-size:24px;line-height:1;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(246,183,60,.9));
  animation:pa-cap-bounce 1.8s ease-in-out infinite;
}
@keyframes pa-cap-bounce{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-8deg)}
}

.pa-launcher.pa-season-birthday::before{
  content:"🎉";position:absolute;bottom:6px;left:2px;
  font-size:22px;z-index:2;animation:pa-float-small 2s ease-in-out infinite;
}
@keyframes pa-float-small{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}


/* ---- PIMSU name badge under the robot ---- */
.pa-name{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  z-index:2;pointer-events:none;
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:#0B1226;
  background:linear-gradient(135deg,#FFF4D6 0%,#F6B73C 55%,#E8B84A 100%);
  padding:3px 10px;border-radius:999px;
  box-shadow:
    0 4px 12px -4px rgba(246,183,60,.7),
    0 1px 0 rgba(255,255,255,.6) inset;
  white-space:nowrap;
  opacity:0;animation:pa-name-in .5s ease .4s forwards;
}
@keyframes pa-name-in{
  from{opacity:0;transform:translateX(-50%) translateY(6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.pa-launcher:hover .pa-name{
  box-shadow:
    0 6px 16px -4px rgba(246,183,60,.9),
    0 1px 0 rgba(255,255,255,.6) inset;
}

/* ---- Greeting popup ---- */
.pa-greet{
  position:absolute;right:154px;left:auto;bottom:48px;
  background:#0B1226;color:#fff;
  padding:12px 16px;border-radius:16px;
  font-size:.9rem;font-weight:600;line-height:1.4;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateX(14px) scale(.96);
  pointer-events:none;z-index:5;
  transition:opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  width:max-content;max-width:230px;
}
.pa-root.pa-open .pa-greet{display:none}
.pa-greet::after{
  content:"";position:absolute;right:-7px;bottom:22px;
  width:14px;height:14px;background:#0B1226;transform:rotate(45deg);
}
.pa-greet.show{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.pa-greet b{color:#F6B73C}
.pa-greet .pa-greet-sub{display:block;font-size:.75rem;font-weight:500;opacity:.8;margin-top:3px;line-height:1.3}




/* ---- Mobile: tiny FAB — zero interference with dock/scroll ---- */
@media (max-width:767px){
  .pa-launcher{
    width:48px !important;
    height:52px !important;
    overflow:visible;
  }
  .pa-launcher::before{
    width:28px;height:5px;bottom:0;
  }
  .pa-launcher:hover::before{width:32px}
  /* Hide anything that adds extra hit area or visual clutter */
  .pa-name,
  .pa-tip,
  .pa-greet,
  .pa-badge,
  .pa-launcher.pa-season-ramadan::after,
  .pa-launcher.pa-season-eid::after,
  .pa-launcher.pa-season-anniversary::after,
  .pa-launcher.pa-season-birthday::before{
    display:none !important;
  }
  .pa-robot{
    filter:drop-shadow(0 3px 8px rgba(11,18,38,.22));
  }
  /* Confetti must never block UI */
  .pa-confetti{
    pointer-events:none !important;
    z-index:1 !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pa-robot *, .pa-mini-avatar *, .pa-head .pa-avatar *,
  .pa-launcher, .pa-launcher::after, .pa-launcher::before{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  .pa-confetti{display:none !important}
}

/* ============================================================
   SMALL SCREENS — still larger than old shell version
   ============================================================ */
@media (max-width:520px){
  .pa-launcher{width:92px;height:100px}
  .pa-tip{right:100px;left:auto;font-size:.8rem;padding:9px 12px}
  .pa-greet{right:100px;left:auto;bottom:36px;font-size:.8rem;max-width:160px}
  .pa-name{font-size:.6rem;padding:2px 7px}
}


/* ---- Welcome-screen robot ---- */
.pa-welcome .pa-welcome-bot .pa-eye{animation:pa-blink 4.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.pa-welcome .pa-welcome-bot .pa-antenna-light{animation:pa-light 1.9s ease-in-out infinite}