:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  
  /* Add CSS variables for consistent colors and easier theme changes */
  --primary-color: #646cff;
  --neutral-light: #e0e8f0;
  --neutral-dark: #c5d8e8;
  --connecting-light: #fffbe0;
  --connecting-dark: #ffe066;
  --active-light: #49b3ff;
  --active-dark: #4dffd6;
  --dan-light: #ff5e5e;
  --dan-dark: #ff8f70;
  --angel-light: #ffb6c1;
  --angel-dark: #ffd1dc;
  --orator-light: #9370DB; /* Medium purple */
  --orator-dark: #7B68EE;  /* Medium slate blue */
  --dan-shadow-primary: rgba(255, 94, 94, 0.6);
  --dan-shadow-secondary: rgba(255, 94, 94, 0.2);
  --angel-shadow-primary: rgba(255, 182, 193, 0.6);
  --angel-shadow-secondary: rgba(255, 182, 193, 0.2);
  --orator-shadow-primary: rgba(147, 112, 219, 0.6);
  --orator-shadow-secondary: rgba(147, 112, 219, 0.2);
}

/* Fix viewport height issues */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Use exact height instead of min-height */
  overflow-y: hidden; /* Prevent vertical scrolling */
  background: #242424;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  overflow-x: hidden;
}

/* Make center container fit within viewport */
.center-container {
  height: 100%; /* Use exact height */
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  overflow: hidden; /* Prevent overflow */
  padding: 0;
  margin: 0;
}
/* --- VOICE ORB --- */
.voice-orb {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: none;
  position: relative;
  overflow: visible;
  background: linear-gradient(135deg, #e0e8f0 70%, #c5d8e8 100%); /* Neutral grey light blue */
  box-shadow: 0 4px 24px rgba(197, 216, 232, 0.4);
  transition:
    box-shadow 0.23s cubic-bezier(.28,.84,.42,1),
    background 0.18s,
    transform 0.12s;
  animation: orb-pulse 1.45s infinite;
}

.voice-orb:focus-visible {
  outline: 4px solid var(--primary-color);
  outline-offset: 4px;
  transform: scale(0.97);
}

.voice-orb:active {
  transform: scale(0.95);
}

/* Pseudo-elements for depth */
.voice-orb::before, 
.voice-orb::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.voice-orb::before {
  width: 80%;
  height: 80%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.8);
  animation: inner-pulse 3s infinite alternate;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M40,-65.5C53.4,-60.5,66.9,-52.8,75,-41C83.1,-29.1,85.9,-13.1,83.9,1.9C82,17,75.4,31,66.4,43C57.5,54.9,46.2,64.8,33.2,71.9C20.2,79,6.5,83.2,-7.2,82.7C-20.9,82.2,-34.6,77,-46.2,69C-57.9,60.9,-67.6,50,-73.7,37.3C-79.7,24.5,-82.1,10,-79.7,-3.5C-77.2,-17,-69.9,-29.5,-60.9,-40.4C-51.9,-51.3,-41.2,-60.7,-29.3,-66.5C-17.4,-72.4,-4.3,-74.8,7.7,-72.5C19.6,-70.2,26.7,-70.5,40,-65.5Z' transform='translate(100 100)' /%3E%3C/svg%3E")
    center/contain;
  animation: blob-animate 12s linear infinite alternate;
}

.voice-orb::after {
  width: 50%;
  height: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: inner-spin 8s linear infinite;
}

/* State classes for call status - updated to use CSS variables */
.voice-orb.idle {
  background: linear-gradient(135deg, var(--neutral-light) 70%, var(--neutral-dark) 100%);
  box-shadow: 0 4px 24px rgba(197, 216, 232, 0.4);
}

.voice-orb.connecting {
  background: linear-gradient(135deg, var(--connecting-light) 60%, var(--connecting-dark) 100%);
  box-shadow: 0 4px 32px #ffe06688, 0 0 0 12px #ffe06633;
  backdrop-filter: blur(5px);
}

.voice-orb.active {
  background: linear-gradient(135deg, var(--active-light) 40%, var(--active-dark) 100%);
  box-shadow: 0 8px 32px #49ffd760, 0 0 0 12px #49ffd733;
}

/* Set default speaking state to use orator colors since it's the first assistant */
.voice-orb.speaking {
  background: linear-gradient(135deg, var(--orator-light) 40%, var(--orator-dark) 100%); /* Purple */
  box-shadow: 0 8px 36px var(--orator-shadow-primary), 0 0 0 14px var(--orator-shadow-secondary);
}

.voice-orb.speaking::before {
  filter: hue-rotate(240deg) brightness(1.2);
  animation: wave-pulse 1.5s ease-in-out infinite;
}

/* Specific assistant styles (these will override the default speaking state) */
.voice-orb.speaking-dan {
  background: linear-gradient(135deg, var(--dan-light) 40%, var(--dan-dark) 100%); /* Spicy red */
  box-shadow: 0 8px 36px var(--dan-shadow-primary), 0 0 0 14px var(--dan-shadow-secondary);
}

.voice-orb.speaking-dan::before {
  filter: hue-rotate(0deg) brightness(1.2);
  animation: wave-pulse 1.5s ease-in-out infinite;
}

.voice-orb.speaking-angel {
  background: linear-gradient(135deg, var(--angel-light) 40%, var(--angel-dark) 100%); /* Mellow pink */
  box-shadow: 0 8px 36px var(--angel-shadow-primary), 0 0 0 14px var(--angel-shadow-secondary);
}

.voice-orb.speaking-angel::before {
  filter: hue-rotate(320deg) brightness(1.2);
  animation: wave-pulse 1.5s ease-in-out infinite;
}

/* Add styling for orator assistant */
.voice-orb.speaking-orator {
  background: linear-gradient(135deg, var(--orator-light) 40%, var(--orator-dark) 100%); /* Purple */
  box-shadow: 0 8px 36px var(--orator-shadow-primary), 0 0 0 14px var(--orator-shadow-secondary);
}

.voice-orb.speaking-orator::before {
  filter: hue-rotate(240deg) brightness(1.2);
  animation: wave-pulse 1.5s ease-in-out infinite;
}

/* Hide the Vapi button, but keep it alive for events/triggers */
.vapi-btn {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Add space for logo/title */
.header-space {
  min-height: 60px;
}

/* Add instructions text styling */
.instruction-text {
  text-align: center;
  font-size: 1rem;
  max-width: 80%;
  opacity: 0.8;
  margin-top: 1.5rem;
  transition: opacity 0.3s;
}

.voice-orb.active ~ .instruction-text,
.voice-orb.connecting ~ .instruction-text,
.voice-orb.speaking ~ .instruction-text,
.voice-orb.speaking-dan ~ .instruction-text,
.voice-orb.speaking-angel ~ .instruction-text,
.voice-orb.speaking-orator ~ .instruction-text {
  opacity: 0.3;
}

/* Animations */
@keyframes orb-pulse {
  0%   { box-shadow: 0 8px 32px rgba(197, 216, 232, 0.3), 0 0 0 0 rgba(197, 216, 232, 0.2); transform: scale(1);}
  60%  { box-shadow: 0 8px 48px rgba(197, 216, 232, 0.5), 0 0 0 18px rgba(197, 216, 232, 0); transform: scale(1.09);}
  100% { box-shadow: 0 8px 32px rgba(197, 216, 232, 0.3), 0 0 0 0 rgba(197, 216, 232, 0.2); transform: scale(1);}
}

@keyframes inner-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

@keyframes inner-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wave-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes blob-animate {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes ripple {
  0% { 
    box-shadow: 0 0 0 0 rgba(255,255,255,0.6), 
               0 0 0 20px rgba(255,255,255,0.6), 
               0 0 0 40px rgba(255,255,255,0.4),
               0 0 0 60px rgba(255,255,255,0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255,255,255,0.6),
               0 0 0 40px rgba(255,255,255,0.4), 
               0 0 0 60px rgba(255,255,255,0.2),
               0 0 0 80px rgba(255,255,255,0);
  }
}

/* Light mode override */
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #fff;
    
    /* Light mode specific variables */
    --shadow-color: rgba(197, 216, 232, 0.6);
  }
  
  body {
    background: #fff;
  }
  
  .voice-orb {
    box-shadow: 0 8px 32px var(--shadow-color), 0 0 0 0 rgba(197, 216, 232, 0.4);
  }
}

/* Add print styles */
@media print {
  .voice-orb {
    display: none;
  }
}

/* Add animation performance optimization */
.voice-orb {
  will-change: transform, box-shadow;
  /* Add existing voice-orb properties */
}

/* Fix Firefox specific issues */
@-moz-document url-prefix() {
  .voice-orb::before {
    animation: blob-animate 12s ease-in-out infinite alternate;
  }
}

/* Add touch device optimizations */
@media (hover: none) {
  .voice-orb:hover {
    transform: none;
  }
}

/* Improve accessibility with better focus styles */
.voice-orb:focus-visible {
  outline: 4px solid var(--primary-color);
  outline-offset: 4px;
  transform: scale(0.97);
}


/* Adjust keyword display position */
.keyword-display {
  margin-top: 0.5rem; /* Reduce space */
  position: relative; /* Position this explicitly */
  height: 5rem; /* Fixed height for the display area */
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-keywords {
  font-family: 'Arial', sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  font-weight: 600;
  color: #9370DB; /* Purple color matching your screenshot */
  display: inline-block;
  position: relative;
  letter-spacing: 0.025em;
}

/* Simple cursor effect */
.animated-keywords::after {
  content: '|';
  display: inline-block;
  margin-left: 1px;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* Specific color classes - keeping these simple */
.color-dan { color: #ffb6c1; }
.color-angel { color: #ff5e5e; }
.color-orator { color: #9370DB; }