/* ============================================
   HAON Avatar (círculo vivo con animaciones por estado)
   Estados: idle (default), thinking, done, error
   ============================================ */

.haon-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(91, 163, 232, 0.15);
  border: 1.5px solid rgba(91, 163, 232, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(91, 163, 232, 0.25);
}
@media (min-width: 640px) {
  .haon-avatar { width: 60px; height: 60px; }
}

.haon-avatar-img {
  width: 95%;
  height: 95%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

/* Anillo externo para latido (oculto por defecto) */
.haon-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--haon-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* === Estado: IDLE (respiración sutil) === */
.haon-avatar--idle .haon-avatar-img {
  animation: haon-breathe 4s ease-in-out infinite;
}
@keyframes haon-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* === Estado: THINKING (latido dorado expandiéndose) === */
.haon-avatar--thinking {
  border-color: var(--haon-accent);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.5);
}
.haon-avatar--thinking .haon-avatar-img {
  animation: haon-think-pulse 1.2s ease-in-out infinite;
}
.haon-avatar--thinking .haon-avatar-ring {
  animation: haon-ring-pulse 1.5s ease-out infinite;
}
@keyframes haon-think-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.15); }
}
@keyframes haon-ring-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* === Estado: DONE (brillo dorado breve, 1.2s) === */
.haon-avatar--done {
  border-color: var(--haon-accent);
  box-shadow: var(--shadow-glow);
  animation: haon-done-flash 1.2s ease-out;
}
@keyframes haon-done-flash {
  0% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  30% { box-shadow: 0 0 32px rgba(255, 215, 0, 0.7); }
  100% { box-shadow: var(--shadow-glow); }
}

/* === Estado: ERROR (sacudida horizontal) === */
.haon-avatar--error {
  border-color: var(--color-error);
  animation: haon-shake 0.5s ease-in-out;
}
@keyframes haon-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}