/**
 * Agent Visual - Estilos del agente visual con estados
 */

.agent-visual-container {
  position: relative;
  width: var(--agentSizeDesktop);
  height: var(--agentSizeDesktop);
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agent-visual-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.3));
  transition: all 0.5s ease;
}

/* Estado idle (apagado) */
.agent-visual-container.idle .agent-visual-image {
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.2));
  opacity: 0.7;
}

/* Estado thinking (pensando) */
.agent-visual-container.thinking .agent-visual-image {
  filter: drop-shadow(0 0 15px rgba(0, 245, 255, 0.5));
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Estado speaking (hablando) */
.agent-visual-container.speaking .agent-visual-image {
  filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.8));
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* Animaciones */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.4));
    opacity: 0.9;
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.7));
    opacity: 1;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(0, 245, 255, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(0, 245, 255, 1));
  }
}