/* ============================================================
   Centella Avatar — placeholder v4 (cartoon extremo + cejas).

   La PAJARITA son DOS triángulos independientes (.av-bow-left,
   .av-bow-right) con `transform-origin: 50px 25px` (la pinza
   central). Se inclinan como CEJAS para añadir expresividad
   facial sin tener cara.

   ============================================================ */

.avatar-root {
  --av-size: 280px;
  --av-skin: #ffffff;
  --av-stroke: #0f1923;
  --av-bow: #57cc98;
  --av-bow-shadow: #2f8a64;

  --av-tilt: 0deg;
  --av-bow-x: 0px;
  --av-bow-y: -135px;        /* arriba por defecto (lazo) */
  --av-bow-rot: 0deg;
  --av-bow-skew: 0deg;
  --av-bow-scale: 1;

  width: var(--av-size);
  height: calc(var(--av-size) * 1.2);
  display: inline-block;
  position: relative;
  user-select: none;
}

.av-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ============================================================
   BODY: el `d` mor­fa entre poses con cartoon ease (overshoot)
   ============================================================ */
.av-body {
  transition: d 280ms cubic-bezier(.2, 1.5, .3, 1);
}

.av-body-wrap {
  transform-origin: 100px 178px;   /* anchor en 6h (suelo) — invariante R5 */
  animation: av-breathe 2.8s ease-in-out infinite;   /* invariante: nunca para */
  transition: transform 280ms cubic-bezier(.2,1.4,.3,1);
}

@keyframes av-breathe {
  0%, 100% { transform: translateY(0) scale(1.000, 1.000) rotate(var(--av-tilt)); }
  60%      { transform: translateY(-2px) scale(0.985, 1.020) rotate(var(--av-tilt)); }
}

/* SPIKES — solo visibles en angry */
.av-spikes {
  transform-origin: 100px 178px;
  transition: opacity 200ms ease;
}

/* SOMBRA pulsante */
.av-shadow {
  animation: av-shadow-pulse 2.8s ease-in-out infinite;
  transform-origin: 100px 220px;
}
@keyframes av-shadow-pulse {
  0%, 100% { transform: scale(1.00, 1.00); opacity: 1; }
  60%      { transform: scale(0.92, 0.85); opacity: 0.75; }
}

/* ============================================================
   PAJARITA — wrapper con posición y micro-vibración invariante
   ============================================================ */
.av-bow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 55px;
  transform-origin: 50% 50%;
  transform: translate(calc(-50% + var(--av-bow-x)),
                       calc(-50% + var(--av-bow-y)))
             rotate(var(--av-bow-rot))
             skewX(var(--av-bow-skew))
             scale(var(--av-bow-scale));
  animation: av-bow-microvib 0.25s ease-in-out infinite;   /* invariante R5 */
  transition: transform 320ms cubic-bezier(.2, 1.4, .3, 1);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(15,25,35,.25));
}
.av-bow-svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Micro-vibración ±1.5° @ 4Hz — invariante R5 (siempre activa) */
@keyframes av-bow-microvib {
  0%, 100% { rotate: -1.5deg; }
  50%      { rotate:  1.5deg; }
}

/* ============================================================
   TRIÁNGULOS DE LA PAJARITA — actúan como CEJAS expresivas.
   transform-origin = pinza central (50, 25).
   ============================================================ */
.av-bow-tri {
  transform-origin: 50px 25px;
  transition: transform 280ms cubic-bezier(.2, 1.4, .3, 1);
}

/* ============================================================
   ESTADOS BASE
   ============================================================ */

/* IDLE — neutral */

/* LISTENING — ligera atención: cejas levemente arqueadas */
.avatar-root.is-listening .av-body-wrap { transform: rotate(-3deg); }
.avatar-root.is-listening .av-bow-left  { transform: rotate(-6deg); }
.avatar-root.is-listening .av-bow-right { transform: rotate(6deg); }

/* THINKING — cabeza ladeada + ceja izquierda alta (curiosidad pensativa) */
.avatar-root.is-thinking .av-body-wrap {
  animation: av-think-sway 2.6s ease-in-out infinite;
}
.avatar-root.is-thinking .av-bow-left  { transform: rotate(-12deg) translateY(-3px); }
.avatar-root.is-thinking .av-bow-right { transform: rotate(8deg); }
@keyframes av-think-sway {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(10deg); }
}

/* SPEAKING — pulso rítmico del cuerpo, cejas oscilan en contraritmo */
.avatar-root.is-speaking .av-body-wrap {
  animation: av-speak-pulse 0.42s ease-in-out infinite;
}
.avatar-root.is-speaking .av-bow-left  { animation: av-bow-speak-l 0.42s ease-in-out infinite; }
.avatar-root.is-speaking .av-bow-right { animation: av-bow-speak-r 0.42s ease-in-out infinite; }
@keyframes av-speak-pulse {
  0%, 100% { transform: translateY(0) scale(1.00, 1.00); }
  50%      { transform: translateY(-3px) scale(1.04, 0.96); }
}
@keyframes av-bow-speak-l { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(2deg); } }
@keyframes av-bow-speak-r { 0%, 100% { transform: rotate(4deg);  } 50% { transform: rotate(-2deg); } }

/* HAPPY — cuerpo BRIDGE + cejas alegres curvadas hacia arriba */
.avatar-root.is-happy .av-body-wrap {
  animation: av-happy-bounce 0.75s cubic-bezier(.25,1.5,.4,1) infinite;
}
.avatar-root.is-happy .av-bow-left  { transform: rotate(-20deg); }
.avatar-root.is-happy .av-bow-right { transform: rotate(20deg); }
.avatar-root.is-happy .av-bow {
  --av-bow-y: -125px;
  animation: av-bow-happy-bounce 0.75s ease-in-out infinite;
}
@keyframes av-happy-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes av-bow-happy-bounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* EXCITED — bridge + bounce alto + cejas MUY arqueadas */
.avatar-root.is-excited .av-body-wrap {
  animation: av-excited 0.45s cubic-bezier(.3,1.6,.4,1) infinite;
}
.avatar-root.is-excited .av-bow-left  { transform: rotate(-28deg); }
.avatar-root.is-excited .av-bow-right { transform: rotate(28deg); }
.avatar-root.is-excited .av-bow {
  --av-bow-y: -130px;
  --av-bow-scale: 1.1;
}
@keyframes av-excited {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}

/* SURPRISED — stretch tall + cejas LEVANTADAS y separadas hacia arriba */
.avatar-root.is-surprised .av-body-wrap {
  animation: av-surprise-pop 0.55s cubic-bezier(.2,1.7,.3,1) 1;
}
.avatar-root.is-surprised .av-bow-left  { transform: translateY(-8px) rotate(-12deg); }
.avatar-root.is-surprised .av-bow-right { transform: translateY(-8px) rotate(12deg); }
.avatar-root.is-surprised .av-bow {
  --av-bow-y: -150px;
  --av-bow-scale: 1.15;
}
@keyframes av-surprise-pop {
  0%   { transform: translateY(0) scale(1.0, 1.0); }
  20%  { transform: translateY(-12px) scale(0.78, 1.30); }
  60%  { transform: translateY(-2px) scale(1.08, 0.95); }
  100% { transform: translateY(0) scale(1.0, 1.0); }
}

/* SAD — cuerpo con COLA COLGANTE + cejas drooping (outer ends UP, inner DOWN) */
.avatar-root.is-sad .av-body-wrap {
  transform: translateY(8px);
  animation: av-breathe 4.5s ease-in-out infinite;
}
.avatar-root.is-sad .av-bow-left  { transform: rotate(20deg) translate(0, 4px); }
.avatar-root.is-sad .av-bow-right { transform: rotate(-20deg) translate(0, 4px); }
.avatar-root.is-sad .av-bow {
  --av-bow-y: -118px;
  --av-bow-scale: 0.95;
}

/* ANGRY — body comprimido + SPIKES visibles + cejas FURIOSAS (V invertida) */
.avatar-root.is-angry .av-body-wrap {
  animation: av-angry-vib 0.10s linear infinite;
}
.avatar-root.is-angry .av-spikes { opacity: 1; }
.avatar-root.is-angry .av-bow-left  { transform: rotate(28deg) translate(0, 1px); }
.avatar-root.is-angry .av-bow-right { transform: rotate(-28deg) translate(0, 1px); }
.avatar-root.is-angry .av-bow {
  --av-bow-y: -118px;
  animation: av-angry-vib 0.10s linear infinite;
}
@keyframes av-angry-vib {
  0%, 100% { translate: 0 0; }
  25%      { translate: -1.5px 0; }
  75%      { translate:  1.5px 0; }
}

/* CONFUSED — recoil + UNA CEJA arriba, OTRA abajo (asimetría perpleja) */
.avatar-root.is-confused .av-body-wrap {
  transform: rotate(-8deg) translateX(-4px);
  animation: av-confused-tilt 2.4s ease-in-out infinite;
}
.avatar-root.is-confused .av-bow-left  { transform: rotate(-22deg) translateY(-4px); }
.avatar-root.is-confused .av-bow-right { transform: rotate(8deg) translateY(2px); }
.avatar-root.is-confused .av-bow {
  --av-bow-rot: -8deg;
  --av-bow-x: -8px;
}
@keyframes av-confused-tilt {
  0%, 100% { transform: rotate(-8deg) translateX(-4px); }
  50%      { transform: rotate(-5deg) translateX(2px); }
}

/* FOCUSED — quieto, cejas levemente bajadas (concentración) */
.avatar-root.is-focused .av-body-wrap {
  transform: rotate(-2deg);
  animation: av-breathe 5.5s ease-in-out infinite;
}
.avatar-root.is-focused .av-bow-left  { transform: rotate(8deg) translateY(2px); }
.avatar-root.is-focused .av-bow-right { transform: rotate(-8deg) translateY(2px); }

/* MISCHIEVOUS — tilt + UNA ceja levantada (∩∪) — pícaro */
.avatar-root.is-mischievous .av-body-wrap { transform: rotate(8deg); }
.avatar-root.is-mischievous .av-bow-left  { transform: rotate(8deg) translateY(2px); }
.avatar-root.is-mischievous .av-bow-right { transform: rotate(-22deg) translateY(-4px); }
.avatar-root.is-mischievous .av-bow {
  --av-bow-x: 14px;
  --av-bow-y: -120px;
}

/* ERROR — colapso + shake + cejas caídas asimétricas */
.avatar-root.is-error .av-body-wrap {
  animation: av-error-shake 0.3s linear 4;
}
.avatar-root.is-error .av-spikes { opacity: 0.5; }
.avatar-root.is-error .av-bow-left  { transform: rotate(15deg) translateY(3px); }
.avatar-root.is-error .av-bow-right { transform: rotate(-15deg) translateY(3px); }
.avatar-root.is-error .av-bow {
  animation: av-error-shake 0.3s linear 4;
  --av-bow-rot: -8deg;
}
@keyframes av-error-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -5px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 3px 0; }
}

/* SLEEPING — charco aplastado + pajarita ABAJO + cejas en línea horizontal */
.avatar-root.is-sleeping .av-body-wrap {
  animation: av-sleep-breathe 6.5s ease-in-out infinite;
  transform: rotate(-12deg) translateY(8px);
}
.avatar-root.is-sleeping .av-bow {
  --av-bow-y: 80px;             /* DEBAJO de la bola */
  --av-bow-rot: -8deg;
  --av-bow-scale: 0.85;
  animation: none;
}
.avatar-root.is-sleeping .av-bow-left  { transform: rotate(0deg); }
.avatar-root.is-sleeping .av-bow-right { transform: rotate(0deg); }
@keyframes av-sleep-breathe {
  0%, 100% { transform: rotate(-12deg) translateY(8px) scale(1.00, 1.00); }
  50%      { transform: rotate(-12deg) translateY(8px) scale(1.04, 0.94); }
}

/* GREETING — entrada saltarina + cejas alegres */
.avatar-root.is-greeting .av-body-wrap {
  animation: av-greet 1.2s cubic-bezier(.3,1.5,.4,1) 1;
}
.avatar-root.is-greeting .av-bow-left  { transform: rotate(-15deg); }
.avatar-root.is-greeting .av-bow-right { transform: rotate(15deg); }
.avatar-root.is-greeting .av-bow {
  animation: av-bow-greet 1.2s cubic-bezier(.3,1.5,.4,1) 1;
}
@keyframes av-greet {
  0%   { transform: scale(0.6) translateY(40px); opacity: 0; }
  30%  { transform: scale(1.20, 0.80) translateY(-15px); opacity: 1; }
  60%  { transform: scale(0.92, 1.10) translateY(0); }
  100% { transform: scale(1.0, 1.0); }
}
@keyframes av-bow-greet {
  0%   { translate: 0 30px; rotate: 0deg; scale: 0; }
  40%  { translate: 0 -8px; rotate: -30deg; scale: 1.4; }
  70%  { rotate: 18deg; scale: 1.0; }
  100% { translate: 0 0; rotate: 0deg; scale: 1.0; }
}

/* FAREWELL — bow + se hunde */
.avatar-root.is-farewell .av-body-wrap {
  animation: av-farewell 1.4s ease-in-out 1 forwards;
}
.avatar-root.is-farewell .av-bow-left  { transform: rotate(-8deg) translateY(2px); }
.avatar-root.is-farewell .av-bow-right { transform: rotate(8deg) translateY(2px); }
@keyframes av-farewell {
  0%   { transform: translateY(0) scale(1, 1); }
  40%  { transform: translateY(8px) scale(1.10, 0.86); }
  100% { transform: translateY(28px) scale(0.80, 0.80); opacity: 0.4; }
}

/* CELEBRATING — bounce alto + cejas spinning */
.avatar-root.is-celebrating .av-body-wrap {
  animation: av-celebrate 0.5s cubic-bezier(.3,1.6,.4,1) infinite;
}
.avatar-root.is-celebrating .av-bow {
  animation: av-bow-spin 0.7s linear infinite;
}
.avatar-root.is-celebrating .av-bow-left  { transform: rotate(-15deg); }
.avatar-root.is-celebrating .av-bow-right { transform: rotate(15deg); }
@keyframes av-celebrate {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-22px) rotate(-12deg); }
  50%      { transform: translateY(-4px) rotate(0); }
  75%      { transform: translateY(-22px) rotate(12deg); }
}
@keyframes av-bow-spin {
  0% { rotate: 0deg; } 100% { rotate: 360deg; }
}

/* ============================================================
   L2 REACTIVOS (one-shots)
   ============================================================ */

.avatar-root.is-boop .av-body-wrap {
  animation: av-boop 0.5s cubic-bezier(.2,1.6,.3,1) 1;
}
.avatar-root.is-boop .av-bow-left  { animation: av-bow-l-boop 0.5s ease-out 1; }
.avatar-root.is-boop .av-bow-right { animation: av-bow-r-boop 0.5s ease-out 1; }
@keyframes av-boop {
  0%   { transform: scale(1.0, 1.0); }
  30%  { transform: scale(1.30, 0.70); }
  60%  { transform: scale(0.90, 1.10); }
  100% { transform: scale(1.0, 1.0); }
}
@keyframes av-bow-l-boop {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(-30deg) translateY(-6px); }
}
@keyframes av-bow-r-boop {
  0%, 100% { transform: rotate(0); }
  35%      { transform: rotate(30deg) translateY(-6px); }
}

.avatar-root.is-surprised-pop .av-body-wrap {
  animation: av-surprise-pop 0.5s cubic-bezier(.2,1.7,.3,1) 1;
}

.avatar-root.is-tool-ping .av-body {
  animation: av-tool-ping 0.6s ease-out 1;
}
@keyframes av-tool-ping {
  0%   { stroke: #0f1923; stroke-width: 3; }
  40%  { stroke: var(--av-bow); stroke-width: 6; }
  100% { stroke: #0f1923; stroke-width: 3; }
}

.avatar-root.is-ack-nod .av-body-wrap {
  animation: av-nod 0.32s ease-in-out 1;
}
@keyframes av-nod {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-7deg) translateY(3px); }
}

.avatar-root.bow-twist .av-bow-left  { transform: rotate(36deg) translate(2px, 4px); }
.avatar-root.bow-twist .av-bow-right { transform: rotate(-12deg); }