#mascot-bot { max-width: 420px; font: 16px/1.5 system-ui, sans-serif; }

#mascot-bot .mb-stage {
  display: flex; justify-content: center; align-items: center;
  height: 200px;
}
#mascot-bot .mb-mascot {
  width: 180px; height: 180px;
  transition: transform .3s ease, filter .3s ease;
}
/* States are CSS on the one idle SVG — no extra animation files. */
#mascot-bot[data-state="listening"] .mb-mascot {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(80,160,255,.85));
}
#mascot-bot[data-state="thinking"] .mb-mascot {
  filter: grayscale(.6) drop-shadow(0 0 8px rgba(150,150,150,.6));
  animation: mb-bob 1.2s ease-in-out infinite;
}
#mascot-bot[data-state="talking"] .mb-mascot {
  filter: drop-shadow(0 0 14px rgba(255,190,60,.85));
  animation: mb-talk .35s ease-in-out infinite;
}
@keyframes mb-bob  { 50% { transform: translateY(-8px); } }
@keyframes mb-talk { 50% { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  #mascot-bot .mb-mascot { animation: none !important; }
}

#mascot-bot .mb-status { text-align: center; min-height: 1.5em; opacity: .7; font-size: 14px; }

#mascot-bot .mb-log {
  max-height: 220px; overflow-y: auto; margin: 12px 0;
  display: flex; flex-direction: column; gap: 8px;
}
#mascot-bot .mb-log p { margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 85%; }
#mascot-bot .mb-user { align-self: flex-end; background: #e8f0ff; }
#mascot-bot .mb-model { align-self: flex-start; background: #f3f3f3; }
#mascot-bot .mb-err  { align-self: center; background: #ffe9e9; color: #a00; font-size: 14px; }

#mascot-bot .mb-controls { display: flex; gap: 8px; }
#mascot-bot button {
  flex: 1; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; background: #2b6cff; color: #fff;
}
#mascot-bot button[disabled] { opacity: .5; cursor: default; }
#mascot-bot .mb-stop { background: #666; flex: 0 0 auto; }