/* Bani the robot buddy: pops up from the bottom-left corner with a speech bubble. */
#buddy {
  position: fixed; z-index: 5; left: calc(12px + env(safe-area-inset-left)); bottom: calc(40px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
  opacity: 0; transform: translateY(140%); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s;
}
#buddy.show { opacity: 1; transform: none; }
#buddy:not(.show) * { animation-play-state: paused; }  /* resting while tucked away */
.buddy-bot { flex: none; width: 56px; height: 66px; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
.bot-eyes { transform-origin: 32px 31px; animation: blink 4s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bot-light { animation: botGlow 1.2s ease-in-out infinite alternate; }
@keyframes botGlow { to { fill: #fff3b0; } }
.buddy-bubble {
  max-width: min(320px, calc(100vw - 110px)); margin-bottom: 30px; padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, .95); color: #2a1446; font-size: clamp(13px, 1.1vw, 17px); font-weight: 700; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.buddy-bubble .saved { display: block; margin-top: 4px; font-size: .78em; color: #7a52d6; }
body.touch .buddy-bubble { max-width: calc(100vw - 200px); }

/* Happy dance for celebrations: Bani jumps above the cards and wiggles. */
#buddy.dance { z-index: 15; }
#buddy.dance .buddy-bot { animation: dance .45s ease-in-out 4; }
@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-14px) rotate(-12deg); }
  75% { transform: translateY(-14px) rotate(12deg); }
}

/* Confetti */
#confetti { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
#confetti i {
  position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px;
  animation: confettiFall 2.5s cubic-bezier(.25, .6, .5, 1) forwards;
}
@keyframes confettiFall {
  to { transform: translate(var(--dx), 110vh) rotate(var(--spin)); }
}

/* Bani's Dress Up outfits: shown when #buddy (or the preview) has the matching outfit class. */
.bani-glasses, .bani-bow, .bani-helmet { display: none; }
.outfit-glasses .bani-glasses, .outfit-bow .bani-bow, .outfit-helmet .bani-helmet { display: inline; }
.buddy-bot { overflow: visible; }