/* Vokabel-Quest mascot widget (idea: Duolingo-owl-style bird, but in the
   app's own blue palette). Shared across dashboard.html, quiz.html (summary)
   and review.html (batch-end) -- see mascot.js for the markup/logic. Relies
   on each host page already defining --surface/--border/--ink/--radius-card/
   --shadow (true since the outer-shell unification pass), so this file only
   needs the mascot-specific rules. */
.vm-widget { display: flex; align-items: flex-end; gap: 0.7rem; margin: 0 0 1rem; }
.vm-bird { width: 68px; flex: none; }
.vm-bird svg { width: 100%; height: auto; display: block; }
.vm-bubble {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 0.6rem 0.9rem; font-size: 13.5px; line-height: 1.5;
  color: var(--ink); position: relative; max-width: 260px;
}
.vm-bubble::after {
  content: ''; position: absolute; left: -6px; bottom: 16px; width: 11px; height: 11px;
  background: var(--surface); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

@keyframes vm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes vm-hop {
  0% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-14px) rotate(-4deg); }
  40% { transform: translateY(0) rotate(3deg); }
  60% { transform: translateY(-8px) rotate(-2deg); }
  80% { transform: translateY(0) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes vm-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
.vm-bird.vm-idle svg { animation: vm-bob 2.6s ease-in-out infinite; transform-origin: bottom center; }
.vm-bird.vm-happy svg { animation: vm-hop 0.9s ease-in-out 2; transform-origin: bottom center; }
.vm-bird.vm-concerned svg { animation: vm-shake 0.6s ease-in-out 3; transform-origin: bottom center; }

@media (prefers-reduced-motion: reduce) {
  .vm-bird.vm-idle svg, .vm-bird.vm-happy svg, .vm-bird.vm-concerned svg { animation: none; }
}