/* ═══════════════════════════════════════════════════════
   Seeshuraj Anime Avatar — State Animations + Bubble
═══════════════════════════════════════════════════════ */

/* ── Idle: gentle float ───────────────────────────────── */
@keyframes avatar-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(0.4deg); }
  66%       { transform: translateY(-4px) rotate(-0.3deg); }
}

/* ── Listening: pulse ring ────────────────────────────── */
@keyframes avatar-pulse-ring {
  0%   { box-shadow: 0 0 0 0px var(--color-primary-glow, rgba(0,212,224,0.4)), var(--shadow-md); }
  70%  { box-shadow: 0 0 0 18px transparent, var(--shadow-md); }
  100% { box-shadow: 0 0 0 0px transparent, var(--shadow-md); }
}

/* ── Thinking: side-to-side wobble ───────────────────── */
@keyframes avatar-wobble {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-2deg) translateX(-3px); }
  40%       { transform: rotate(2deg)  translateX(3px); }
  60%       { transform: rotate(-1.5deg) translateX(-2px); }
  80%       { transform: rotate(1deg)  translateX(2px); }
}

/* ── Speaking: gentle bob ────────────────────────────── */
@keyframes avatar-speak-bob {
  0%, 100% { transform: scaleY(1) translateY(0); }
  25%       { transform: scaleY(1.015) translateY(-3px); }
  75%       { transform: scaleY(0.990) translateY(2px); }
}

/* ── Apply animations via data-avatar-state ──────────── */
#animeWrap[data-avatar-state="idle"] .anime-avatar {
  animation: avatar-float 5s ease-in-out infinite;
}

#animeWrap[data-avatar-state="listening"] {
  animation: avatar-pulse-ring 1.4s ease-out infinite;
}
#animeWrap[data-avatar-state="listening"] .anime-avatar {
  animation: none;
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

#animeWrap[data-avatar-state="thinking"] .anime-avatar {
  animation: avatar-wobble 1.2s ease-in-out infinite;
}

#animeWrap[data-avatar-state="speaking"] .anime-avatar {
  animation: avatar-speak-bob 0.55s ease-in-out infinite;
}

/* ── Speech bubble ───────────────────────────────────── */
#avatarBubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-surface-2, #1c1b19);
  border: 1px solid oklch(from var(--color-primary, #00d4e0) l c h / 0.35);
  border-radius: var(--radius-xl, 1rem) var(--radius-xl, 1rem) var(--radius-xl, 1rem) 4px;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #e8e6e2);
  line-height: 1.55;
  max-width: min(320px, 90vw);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.4)), 0 0 24px var(--color-primary-glow, rgba(0,212,224,0.12));
  z-index: 10;
  pointer-events: none;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  white-space: pre-wrap;
  word-break: break-word;
}

#avatarBubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 0 solid transparent;
  border-top: 8px solid var(--color-primary, #00d4e0);
  opacity: 0.35;
}

#avatarBubble.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Talk button extra state styles ──────────────────── */
.btn-anime-talk:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-anime-talk:not(:disabled):active {
  transform: scale(0.96);
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #animeWrap .anime-avatar,
  #animeWrap {
    animation: none !important;
    transition: none !important;
  }
}