/* Rebel Avatar Webpage Styles
 * Designed for 1280x720 Output Media in Recall.ai bots
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg-primary: #0f0f14;
  --color-bg-secondary: #1a1a24;
  --color-accent: #4a90a4;
  --color-accent-glow: rgba(74, 144, 164, 0.4);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-success: #6bc46d;
  --color-warning: #c4a64a;
  
  --avatar-size: 180px;
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
}

body {
  width: 1280px;
  height: 720px;
  background: linear-gradient(145deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  color: var(--color-text-primary);
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Avatar Circle */
.avatar {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--color-accent-glow);
  filter: blur(20px);
  opacity: 0.5;
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.pulse-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Bot Info */
.bot-info {
  text-align: center;
}

.bot-name {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.bot-status {
  font-size: 16px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

/* Connection Indicator */
.connection-indicator {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: background var(--transition-fast);
}

.connection-indicator.connected .connection-dot {
  background: var(--color-success);
}

/* Knowledge Indicator */
.knowledge-indicator {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(107, 196, 109, 0.15);
  border: 1px solid rgba(107, 196, 109, 0.3);
  border-radius: 20px;
  font-size: 14px;
  color: var(--color-success);
}

.knowledge-icon {
  font-size: 16px;
}

/* ==========================================================================
   STATE: IDLE
   Subtle breathing animation, calm presence
   ========================================================================== */

.avatar.idle .avatar-glow {
  animation: idle-breathe 4s ease-in-out infinite;
}

.avatar.idle .avatar-ring {
  animation: idle-ring-pulse 4s ease-in-out infinite;
}

@keyframes idle-breathe {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes idle-ring-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* ==========================================================================
   STATE: LISTENING
   Active attention, responsive to audio levels
   ========================================================================== */

.avatar.listening .avatar-glow {
  opacity: 0.7;
  transform: scale(1.1);
  background: rgba(107, 196, 109, 0.4);
}

.avatar.listening .avatar-ring {
  opacity: 0.9;
  border-color: var(--color-success);
}

.avatar.listening .pulse-ring {
  animation: listening-pulse 1.5s ease-out infinite;
}

.avatar.listening .bot-status {
  color: var(--color-success);
}

@keyframes listening-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Audio level visualization - scale varies with level */
.avatar.listening[data-level="low"] .avatar-glow {
  transform: scale(1.05);
}

.avatar.listening[data-level="medium"] .avatar-glow {
  transform: scale(1.12);
}

.avatar.listening[data-level="high"] .avatar-glow {
  transform: scale(1.2);
}

/* ==========================================================================
   STATE: THINKING
   Processing indicator, anticipatory
   ========================================================================== */

.avatar.thinking .avatar-glow {
  animation: thinking-glow 1s ease-in-out infinite;
  background: rgba(196, 166, 74, 0.4);
}

.avatar.thinking .avatar-ring {
  border-color: var(--color-warning);
  animation: thinking-ring-rotate 2s linear infinite;
}

.avatar.thinking .bot-status {
  color: var(--color-warning);
}

@keyframes thinking-glow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
  }
}

@keyframes thinking-ring-rotate {
  0% {
    transform: rotate(0deg);
    border-style: dashed;
  }
  100% {
    transform: rotate(360deg);
    border-style: dashed;
  }
}

/* ==========================================================================
   STATE: SPEAKING
   Active output, confident presence
   ========================================================================== */

.avatar.speaking .avatar-glow {
  opacity: 0.9;
  transform: scale(1.15);
  background: rgba(74, 144, 164, 0.5);
  animation: speaking-glow 0.3s ease-in-out infinite alternate;
}

.avatar.speaking .avatar-ring {
  opacity: 1;
  border-width: 3px;
}

.avatar.speaking .pulse-ring {
  animation: speaking-pulse 0.8s ease-out infinite;
  border-color: var(--color-accent);
}

@keyframes speaking-glow {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.18);
  }
}

@keyframes speaking-pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* ==========================================================================
   STATE: ERROR / DISCONNECTED
   Subtle indication without alarming meeting participants
   ========================================================================== */

.avatar.error .avatar-glow {
  opacity: 0.3;
  background: rgba(196, 74, 74, 0.3);
}

.avatar.error .avatar-ring {
  border-color: rgba(196, 74, 74, 0.5);
  opacity: 0.5;
}

/* ==========================================================================
   ONE-SHOT STATES
   Wave, Goodbye, Celebration - play once then return to idle
   These mostly rely on the GIF animation, CSS adds subtle enhancements
   ========================================================================== */

/* Wave - friendly hello */
.avatar.wave .avatar-glow {
  opacity: 0.8;
  background: rgba(107, 196, 109, 0.4);
  animation: wave-glow 0.5s ease-in-out 3;
}

.avatar.wave .avatar-ring {
  border-color: var(--color-success);
  opacity: 0.9;
}

@keyframes wave-glow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Goodbye - departing */
.avatar.goodbye .avatar-glow {
  animation: goodbye-fade 2s ease-out forwards;
}

.avatar.goodbye .avatar-ring {
  animation: goodbye-ring-fade 2s ease-out forwards;
}

@keyframes goodbye-fade {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes goodbye-ring-fade {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

/* Celebration - confetti energy */
.avatar.celebration .avatar-glow {
  opacity: 1;
  background: linear-gradient(45deg, rgba(107, 196, 109, 0.5), rgba(196, 166, 74, 0.5), rgba(74, 144, 164, 0.5));
  animation: celebration-glow 0.4s ease-in-out infinite;
  background-size: 200% 200%;
}

.avatar.celebration .avatar-ring {
  border-color: var(--color-success);
  border-width: 3px;
  animation: celebration-ring 0.3s ease-in-out infinite alternate;
}

.avatar.celebration .pulse-ring {
  animation: celebration-pulse 0.5s ease-out infinite;
  border-color: var(--color-success);
}

@keyframes celebration-glow {
  0%, 100% {
    background-position: 0% 50%;
    transform: scale(1.1);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.2);
  }
}

@keyframes celebration-ring {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.05) rotate(5deg);
  }
}

@keyframes celebration-pulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* ==========================================================================
   PERSONALITY STATES
   Eye roll, Yawn, Nod - rare, subtle character moments
   ========================================================================== */

/* Eye roll - dry humor */
.avatar.eye_roll .avatar-glow {
  opacity: 0.5;
  background: rgba(128, 128, 128, 0.3);
}

.avatar.eye_roll .avatar-ring {
  opacity: 0.6;
  border-color: rgba(128, 128, 128, 0.5);
}

/* Yawn - self-aware humor for long meetings */
.avatar.yawn .avatar-glow {
  opacity: 0.4;
  animation: yawn-breathe 3s ease-in-out;
}

@keyframes yawn-breathe {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* Nod - subtle acknowledgment */
.avatar.nod .avatar-glow {
  opacity: 0.7;
  background: rgba(107, 196, 109, 0.3);
}

.avatar.nod .avatar-ring {
  border-color: var(--color-success);
  opacity: 0.7;
}