/*
  BolsaBot — mascota oficial (PNG). Las imágenes (assets/bolsabot-*.png) son fijas:
  todo el movimiento se consigue por CSS (transform/filter) sobre el <img>, sin
  tocar ni recrear los archivos originales.
*/

.bolsabot-mascot {
  display: inline-block;
  line-height: 0;
}

.bb-imgwrap {
  position: relative;
  display: inline-block;
}

.bb-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ---------- Puntos de "pensando" (solo variante avatar) ---------- */
.bb-think-dots {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: flex;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(13, 17, 23, .85);
  box-shadow: 0 0 0 1px rgba(94, 225, 255, .35);
}

.bb-think-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #5ee1ff;
  display: block;
  opacity: .35;
}

@media (prefers-reduced-motion: no-preference) {
  .bb-think-dots i { animation: bbDotBounce 1.1s ease-in-out infinite; }
  .bb-think-dots i:nth-child(2) { animation-delay: .15s; }
  .bb-think-dots i:nth-child(3) { animation-delay: .3s; }

  /* ---------- Estado por defecto: idle / greeting / happy / sleeping ---------- */
  .bolsabot-mascot.is-idle .bb-img,
  .bolsabot-mascot.is-greeting .bb-img,
  .bolsabot-mascot.is-happy .bb-img,
  .bolsabot-mascot.is-sleeping .bb-img {
    animation: bbFloat 4s ease-in-out infinite, bbBreathe 4s ease-in-out infinite, bbGlowSoft 4s ease-in-out infinite;
  }

  /* Saludo: flotación algo más viva (personaje completo saludando) */
  .bolsabot-mascot.bb-variant-hero.is-greeting .bb-img,
  .bolsabot-mascot.bb-variant-hero.is-happy .bb-img {
    animation: bbFloatWave 3.2s ease-in-out infinite, bbBreathe 3.2s ease-in-out infinite, bbGlowSoft 3.2s ease-in-out infinite;
  }

  /* ---------- Procesando: thinking / typing / analyzing ---------- */
  .bolsabot-mascot.is-thinking .bb-img,
  .bolsabot-mascot.is-typing .bb-img,
  .bolsabot-mascot.is-analyzing .bb-img {
    animation: bbThinkBob 1.8s ease-in-out infinite, bbBreathe 3.6s ease-in-out infinite, bbGlowPulse 1.1s ease-in-out infinite;
  }

  /* ---------- Error: fullbody sad, movimiento mínimo ---------- */
  .bolsabot-mascot.is-error .bb-img {
    animation: bbSadSway 5s ease-in-out infinite, bbBreatheSlow 5s ease-in-out infinite;
  }
}

@keyframes bbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bbFloatWave { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes bbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes bbBreatheSlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes bbGlowSoft {
  0%, 100% { filter: drop-shadow(0 4px 14px rgba(31, 128, 255, .25)); }
  50% { filter: drop-shadow(0 6px 22px rgba(94, 225, 255, .4)); }
}
@keyframes bbGlowPulse {
  0%, 100% { filter: drop-shadow(0 4px 14px rgba(94, 225, 255, .3)); }
  50% { filter: drop-shadow(0 6px 20px rgba(94, 225, 255, .65)); }
}
@keyframes bbThinkBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes bbSadSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.2deg); } }

@media (prefers-reduced-motion: reduce) {
  .bolsabot-mascot * { animation: none !important; }
}