/* ============================================================
   RepRoom V2 — Character Animation System
   All SVG character animations, emotion states, interaction
   ============================================================ */

/* ── Base character container ───────────────────────────────── */
.character-stage {
  position: relative;
  width: 280px;
  height: 380px;
  margin: 0 auto;
  flex-shrink: 0;
}

.character-stage svg.character,
.character-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* SVG transform foundation — required for all child animations */
.character * {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Transition defaults ─────────────────────────────────────── */
.character .char-head,
.character .eyebrow-left,
.character .eyebrow-right,
.character .eye-left,
.character .eye-right,
.character .eye-left .iris,
.character .eye-right .iris,
.character .eye-left .eyelid-upper,
.character .eye-right .eyelid-upper,
.character .char-body {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
}

/* ── Blink animation ─────────────────────────────────────────── */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%            { transform: scaleY(0.05); }
}

.character.is-blinking .eye-left .eyelid-upper,
.character.is-blinking .eye-right .eyelid-upper {
  animation: blink 0.18s ease-in-out forwards;
  opacity: 1 !important;
}

/* Eyelid covers eye on blink — needs fill opacity boosted */
.character.is-blinking .eye-left .eyelid-upper,
.character.is-blinking .eye-right .eyelid-upper {
  fill-opacity: 1;
}

/* ── Breathing animation ──────────────────────────────────────── */
@keyframes breathe-idle {
  0%, 100% { transform: translateY(0px) scaleY(1); }
  40%       { transform: translateY(-2px) scaleY(1.008); }
  60%       { transform: translateY(-2px) scaleY(1.008); }
}

@keyframes breathe-stressed {
  0%, 100% { transform: translateY(0px) scaleY(1); }
  30%       { transform: translateY(-3.5px) scaleY(1.012); }
  50%       { transform: translateY(-3.5px) scaleY(1.012); }
}

@keyframes breathe-calm {
  0%, 100% { transform: translateY(0px) scaleY(1); }
  45%       { transform: translateY(-1.5px) scaleY(1.005); }
  55%       { transform: translateY(-1.5px) scaleY(1.005); }
}

.character .char-body {
  animation: breathe-idle 4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* ── Talking: mouth state switching ─────────────────────────── */
/* JS calls setTalking(true/false) which adds/removes .is-talking */
/* During talking, mouth-open shows; neutral hides */

.character.is-talking .char-mouth .mouth-neutral { display: none !important; }
.character.is-talking .char-mouth .mouth-open    { display: block !important; }

/* Talking head micro-bobble */
@keyframes talk-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%       { transform: translateY(-1.5px) rotate(0.4deg); }
  75%       { transform: translateY(1px) rotate(-0.3deg); }
}
.character.is-talking .char-head {
  animation: talk-bob 0.35s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   EMOTION STATES
   Applied to the root <svg class="character emotion-X"> element
   All transforms cascade to children via CSS selectors
   ═══════════════════════════════════════════════════════════════ */

/* ── emotion-idle (default) ──────────────────────────────────── */
.character.emotion-idle .char-head         { transform: rotate(0deg) translateY(0); }
.character.emotion-idle .eyebrow-left      { transform: translateY(0); }
.character.emotion-idle .eyebrow-right     { transform: translateY(0); }
.character.emotion-idle .char-body         { animation: breathe-idle 4s ease-in-out infinite; }

/* ── emotion-receptive ───────────────────────────────────────── */
/* Open, engaged, forward-leaning feel */
.character.emotion-receptive .char-head        { transform: rotate(-1deg) translateY(-2px); }
.character.emotion-receptive .eyebrow-left     { transform: translateY(-3px); }
.character.emotion-receptive .eyebrow-right    { transform: translateY(-3px); }
.character.emotion-receptive .eye-left .iris   { transform: scale(1.08); }
.character.emotion-receptive .eye-right .iris  { transform: scale(1.08); }
.character.emotion-receptive .char-body        { animation: breathe-calm 5s ease-in-out infinite; }
/* Show smile */
.character.emotion-receptive .char-mouth .mouth-neutral { display: none; }
.character.emotion-receptive .char-mouth .mouth-smile   { display: block !important; }

/* ── emotion-skeptical ───────────────────────────────────────── */
/* One brow raised, slight head tilt */
.character.emotion-skeptical .char-head         { transform: rotate(2deg) translateY(0); }
.character.emotion-skeptical .eyebrow-left      { transform: translateY(-4px) rotate(-3deg); }
.character.emotion-skeptical .eyebrow-right     { transform: translateY(2px); }
.character.emotion-skeptical .eye-left .eyelid-upper  { transform: scaleY(0.8); opacity: 0.7 !important; }
.character.emotion-skeptical .char-body         { animation: breathe-idle 4.5s ease-in-out infinite; }

/* ── emotion-resistant ───────────────────────────────────────── */
/* Arms crossed energy, furrowed brows, frown */
.character.emotion-resistant .char-head         { transform: rotate(3deg) translateY(3px); }
.character.emotion-resistant .eyebrow-left      { transform: translateY(4px) rotate(5deg); }
.character.emotion-resistant .eyebrow-right     { transform: translateY(4px) rotate(-5deg); }
.character.emotion-resistant .eye-left .eyelid-upper  { transform: scaleY(0.7); opacity: 0.8 !important; }
.character.emotion-resistant .eye-right .eyelid-upper { transform: scaleY(0.7); opacity: 0.8 !important; }
.character.emotion-resistant .char-body         { animation: breathe-stressed 3.5s ease-in-out infinite; }
/* Show frown */
.character.emotion-resistant .char-mouth .mouth-neutral { display: none; }
.character.emotion-resistant .char-mouth .mouth-frown   { display: block !important; }

/* ── emotion-frustrated ──────────────────────────────────────── */
/* Strong resistance — brows down hard, tight squint */
.character.emotion-frustrated .char-head         { transform: rotate(4deg) translateY(4px); }
.character.emotion-frustrated .eyebrow-left      { transform: translateY(6px) rotate(8deg); }
.character.emotion-frustrated .eyebrow-right     { transform: translateY(6px) rotate(-8deg); }
.character.emotion-frustrated .eye-left .eyelid-upper  { transform: scaleY(0.55); opacity: 0.9 !important; }
.character.emotion-frustrated .eye-right .eyelid-upper { transform: scaleY(0.55); opacity: 0.9 !important; }
.character.emotion-frustrated .eye-left .iris    { transform: scale(0.9); }
.character.emotion-frustrated .eye-right .iris   { transform: scale(0.9); }
.character.emotion-frustrated .char-body         { animation: breathe-stressed 2.8s ease-in-out infinite; }
/* Show frown */
.character.emotion-frustrated .char-mouth .mouth-neutral { display: none; }
.character.emotion-frustrated .char-mouth .mouth-frown   { display: block !important; }

/* ── emotion-thinking ────────────────────────────────────────── */
/* Processing — slight head tilt, upward gaze, brow neutral-raised on one side */
@keyframes thinking-eyes {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}
.character.emotion-thinking .char-head         { transform: rotate(-2.5deg) translateY(-1px); }
.character.emotion-thinking .eyebrow-left      { transform: translateY(-2px) rotate(-2deg); }
.character.emotion-thinking .eyebrow-right     { transform: translateY(-4px) rotate(-4deg); }
.character.emotion-thinking .eye-left .iris,
.character.emotion-thinking .eye-right .iris   { animation: thinking-eyes 2s ease-in-out infinite; }
.character.emotion-thinking .char-body         { animation: breathe-calm 5.5s ease-in-out infinite; }

/* ── emotion-shocked ─────────────────────────────────────────── */
/* Wide eyes, brows high, open mouth */
@keyframes shock-pulse {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.04); }
  20%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.character.emotion-shocked .char-head {
  transform: rotate(0deg) translateY(-4px);
  animation: shock-pulse 0.4s ease-out;
}
.character.emotion-shocked .eyebrow-left      { transform: translateY(-8px); }
.character.emotion-shocked .eyebrow-right     { transform: translateY(-8px); }
.character.emotion-shocked .eye-left .iris    { transform: scale(1.2); }
.character.emotion-shocked .eye-right .iris   { transform: scale(1.2); }
.character.emotion-shocked .eye-left .eyelid-upper  { transform: scaleY(0.4) !important; opacity: 0.5 !important; }
.character.emotion-shocked .eye-right .eyelid-upper { transform: scaleY(0.4) !important; opacity: 0.5 !important; }
.character.emotion-shocked .char-body         { animation: breathe-stressed 2s ease-in-out infinite; }
/* Show shocked mouth */
.character.emotion-shocked .char-mouth .mouth-neutral { display: none; }
.character.emotion-shocked .char-mouth .mouth-shocked { display: block !important; }

/* ── emotion-warming ─────────────────────────────────────────── */
/* Starting to convert — cautious smile, relaxing brows */
.character.emotion-warming .char-head         { transform: rotate(-0.5deg) translateY(-1px); }
.character.emotion-warming .eyebrow-left      { transform: translateY(-1px); }
.character.emotion-warming .eyebrow-right     { transform: translateY(-1px); }
.character.emotion-warming .eye-left .iris    { transform: scale(1.05); }
.character.emotion-warming .eye-right .iris   { transform: scale(1.05); }
.character.emotion-warming .char-body         { animation: breathe-calm 4.5s ease-in-out infinite; }
/* Show cautious smile */
.character.emotion-warming .char-mouth .mouth-neutral { display: none; }
.character.emotion-warming .char-mouth .mouth-smile   { display: block !important; }

/* ── emotion-cooling ─────────────────────────────────────────── */
/* Losing momentum — returning to doubt */
.character.emotion-cooling .char-head         { transform: rotate(1.5deg) translateY(2px); }
.character.emotion-cooling .eyebrow-left      { transform: translateY(2px) rotate(3deg); }
.character.emotion-cooling .eyebrow-right     { transform: translateY(2px) rotate(-3deg); }
.character.emotion-cooling .eye-left .eyelid-upper  { transform: scaleY(0.85); opacity: 0.6 !important; }
.character.emotion-cooling .eye-right .eyelid-upper { transform: scaleY(0.85); opacity: 0.6 !important; }
.character.emotion-cooling .char-body         { animation: breathe-idle 4s ease-in-out infinite; }
/* Show frown */
.character.emotion-cooling .char-mouth .mouth-neutral { display: none; }
.character.emotion-cooling .char-mouth .mouth-frown   { display: block !important; }

/* ── emotion-confused ────────────────────────────────────────── */
/* Jargon used, doesn't understand — asymmetric brows, head tilt */
@keyframes confused-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(-5deg); }
}
.character.emotion-confused .char-head {
  animation: confused-tilt 1.5s ease-in-out infinite;
}
.character.emotion-confused .eyebrow-left      { transform: translateY(-5px) rotate(-6deg); }
.character.emotion-confused .eyebrow-right     { transform: translateY(3px) rotate(2deg); }
.character.emotion-confused .eye-left .iris    { transform: scale(1.1); }
.character.emotion-confused .eye-right .iris   { transform: scale(0.95); }
.character.emotion-confused .char-body         { animation: breathe-idle 4s ease-in-out infinite; }

/* ── emotion-won (you closed them) ──────────────────────────── */
/* Patient is convinced — genuine happy, slight lean forward */
@keyframes won-bounce {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%       { transform: rotate(-1deg) translateY(-3px); }
  75%       { transform: rotate(1deg) translateY(-2px); }
}
.character.emotion-won .char-head {
  animation: won-bounce 1.2s ease-in-out infinite;
}
.character.emotion-won .eyebrow-left      { transform: translateY(-4px); }
.character.emotion-won .eyebrow-right     { transform: translateY(-4px); }
.character.emotion-won .eye-left .iris    { transform: scale(1.15); }
.character.emotion-won .eye-right .iris   { transform: scale(1.15); }
/* Show big smile */
.character.emotion-won .char-mouth .mouth-neutral { display: none; }
.character.emotion-won .char-mouth .mouth-smile   { display: block !important; }
.character.emotion-won .char-body { animation: breathe-calm 3.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   CHARACTER ENTRANCE ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes char-enter {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.character-stage.char-entering svg {
  animation: char-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Character exit ─────────────────────────────────────────── */
@keyframes char-exit {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-15px) scale(0.94); }
}

.character-stage.char-exiting svg {
  animation: char-exit 0.3s ease-in forwards;
}

/* ═══════════════════════════════════════════════════════════════
   CLOWN-SPECIFIC ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Clown honk reaction — quick side-to-side shake */
@keyframes clown-honk {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(-8deg) translateX(-4px); }
  30%  { transform: rotate(8deg) translateX(4px); }
  45%  { transform: rotate(-6deg) translateX(-3px); }
  60%  { transform: rotate(6deg) translateX(3px); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

.character[data-character="clown"].reaction-honk .char-head {
  animation: clown-honk 0.5s ease-in-out;
}

/* Clown chicken reaction — pecking motion */
@keyframes clown-chicken {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-6px) rotate(-4deg); }
  40%      { transform: translateX(6px) rotate(4deg); }
  60%      { transform: translateX(-4px) rotate(-3deg); }
  80%      { transform: translateX(4px) rotate(3deg); }
}

.character[data-character="clown"].reaction-chicken {
  animation: clown-chicken 0.6s ease-in-out;
}

/* Clown flower pop — zoom nose then settle */
@keyframes clown-flower {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  55%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.character[data-character="clown"].reaction-flower .char-clown-nose {
  animation: clown-flower 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Clown won — full body bounce + spin */
@keyframes clown-won-body {
  0%   { transform: rotate(0) scale(1); }
  15%  { transform: rotate(-4deg) scale(1.03); }
  30%  { transform: rotate(4deg) scale(1.03); }
  45%  { transform: rotate(-3deg) scale(1.02); }
  60%  { transform: rotate(3deg) scale(1.02); }
  75%  { transform: rotate(-1.5deg) scale(1.01); }
  100% { transform: rotate(0) scale(1); }
}

.character[data-character="clown"].emotion-won .char-body {
  animation: clown-won-body 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite !important;
}

/* ── Thinking dots ────────────────────────────────────────────── */
/* Shown when character is processing */
.patient-thinking {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  gap: 5px;
  align-items: center;
}

.patient-thinking.visible {
  display: flex;
}

@keyframes think-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}

.thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: think-dot 1.2s ease-in-out infinite;
}

.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Score-driven glow ring ───────────────────────────────────── */
.character-stage::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.character-stage.score-high::after {
  border-color: var(--green, #22c55e);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.25);
}

.character-stage.score-low::after {
  border-color: var(--red, #ef4444);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.2);
}

/* ── Emotion transition labels (debug only, hidden in prod) ───── */
.emotion-label {
  display: none;
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
}