/* ---------- Design Tokens ---------- */
:root{
  --va-color: rgba(255,255,255,0.85);
  --va-color-wait: rgba(179,179,179,0.8);
  --va-color-rec: rgba(255,255,255,0.9);
  --va-color-spk: rgba(66, 236, 245, 0.9);
  --va-width: 8px;
  --va-height: 44px;
  --va-gap: 6px;
  --va-radius: 10px;
  --va-speed: 1.05s;
  --va-ease: cubic-bezier(.22,.61,.36,1);
  --va-blur: 0.6px;            /* subtle anti-aliasing */
  --va-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* ---------- Container ---------- */
.voice-chat-container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80vh; position: relative; z-index: 2;
}

/* ---------- Animation Wrapper ---------- */
.voice-animation{
  display: flex; justify-content: center; align-items: flex-end;
  margin: 20px 0;
  opacity: 0;
  filter: blur(var(--va-blur));
  transition: opacity .35s var(--va-ease), transform .35s var(--va-ease), filter .35s var(--va-ease);
  transform: translateZ(0);           
  will-change: opacity, transform, filter;
  padding: 6px 8px;
  border-radius: 999px;
  box-shadow: var(--va-shadow);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}

.voice-animation.active{ opacity: 1; }

/* States controlled by CSS Variables */
.voice-animation.recording{
  --va-color: var(--va-color-rec);
  --va-speed: 1.1s;
  animation: vaPulse 1.8s var(--va-ease) infinite;
}
.voice-animation.waiting{
  --va-color: var(--va-color-wait);
  --va-speed: 1.25s;
  opacity: .95;
}
.voice-animation.speaking{
  --va-color: var(--va-color-spk);
  --va-speed: .95s;
  animation: vaGlow 2.2s var(--va-ease) infinite;
}

/* ---------- Bars (waves) ---------- */
.wave{
  width: clamp(6px, 0.8vw, var(--va-width));
  height: var(--va-height);
  margin: 0 var(--va-gap);
  border-radius: var(--va-radius);
  background: var(--va-color);
  transform-origin: 50% 100%;
  transform: scaleY(.35) translateZ(0);
  backface-visibility: hidden;
  will-change: transform, box-shadow, opacity;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  opacity: .95;
}

/* Natural stagger */
.wave:nth-child(1){ animation-delay: .00s; }
.wave:nth-child(2){ animation-delay: .06s; }
.wave:nth-child(3){ animation-delay: .12s; }
.wave:nth-child(4){ animation-delay: .18s; }
.wave:nth-child(5){ animation-delay: .24s; }

/* ---------- State-driven Animations ---------- */
.voice-animation.recording .wave{
  animation: vaRecording var(--va-speed) var(--va-ease) infinite;
}
.voice-animation.waiting .wave{
  animation: vaWaiting var(--va-speed) var(--va-ease) infinite;
}
.voice-animation.speaking .wave{
  animation: vaSpeaking var(--va-speed) var(--va-ease) infinite;
}

/* ---------- Keyframes ---------- */
@keyframes vaRecording{
  0%, 100% { transform: scaleY(.38); }
  25%      { transform: scaleY(.85); }
  50%      { transform: scaleY(.55); }
  75%      { transform: scaleY(1);   }
}

@keyframes vaWaiting{
  0%, 100% { transform: scaleY(.32) translateX(0);   opacity: .9; }
  20%      { transform: scaleY(.42) translateX(1px); opacity: .92;}
  40%      { transform: scaleY(.35) translateX(-1px);}
  60%      { transform: scaleY(.45) translateX(1px); }
  80%      { transform: scaleY(.33) translateX(-1px);}
}

@keyframes vaSpeaking{
  0%, 100% { transform: scaleY(.5);   opacity: .95; box-shadow: 0 2px 12px rgba(27,79,222,.18); }
  25%      { transform: scaleY(1.15); opacity: 1;    box-shadow: 0 4px 16px rgba(27,79,222,.22); }
  50%      { transform: scaleY(.7);   }
  75%      { transform: scaleY(1.25); }
}

@keyframes vaPulse{
  0%,100% { box-shadow: 0 6px 20px rgba(255,255,255,.10); }
  50%     { box-shadow: 0 8px 26px rgba(255,255,255,.16); }
}
@keyframes vaGlow{
  0%,100% { box-shadow: 0 8px 26px rgba(27,79,222,.18); }
  50%     { box-shadow: 0 10px 32px rgba(27,79,222,.26); }
}

/* ---------- Status Text ---------- */
.voice-card .status-msg{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1rem; color: #fff;
  min-height: 24px; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: opacity .25s var(--va-ease), transform .25s var(--va-ease);
}

/* ---------- Spinner ---------- */
.voice-card .spinner{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  animation: spin 1s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
  transform: translateZ(0);
  will-change: transform;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .voice-animation,
  .voice-animation .wave,
  .spinner {
    animation: none !important;
    transition: none !important;
  }
}

.voice-card .btn-modern{
    --size: 2.2rem;          
    width: var(--size);
    height: var(--size);
    padding: 1.5rem !important;              
    margin: 0.1rem;               
    border-radius: 50% !important;     
    border: none;
    outline: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.2rem;      
    transition: 0.22s ease;

    position: relative;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px; 
}

.voice-card .tool-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.voice-card .close-btn{
  background-image: url('/static/icons/close-white.png');
  background-color: rgb(35, 35, 35);
}

.voice-card .reload-btn{
  background-image: url('/static/icons/reload-white.png');
  background-color: rgb(35, 35, 35);
}

.voice-card .mic-btn{
  background-image: url('/static/icons/microphone.png');
  background-color: #f4c431;
}

.voice-card .mic-btn-recording{
    background-image: url('/static/icons/stop.png');
}

.voice-card .mic-btn-waiting{
    background-image: url('/static/icons/no_record.png');
    background-color: rgb(138, 138, 138);
}

.voice-card .mic-btn-waiting:hover{
    background-color: rgb(138, 138, 138);
}

.voice-card .mic-btn-bot-speaking{
    background-image: url('/static/icons/no_record.png');
    background-color: rgb(138, 138, 138);
}

.voice-card .mic-btn-bot-speaking:hover{
    background-color: rgb(138, 138, 138);
}