/* ================= CALL STATUS ANIMATIONS (PROFESSIONAL) ================= */

.call-status {
    font-size: 16px; 
    font-weight: 500; 
    color: #9ca3af; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.status-text {
    letter-spacing: 0.5px;
}

/* ================= STATUS INDICATORS ================= */

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.pulse {
    background: #10b981; /* Green */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    animation: statusPulse 1.5s infinite;
}

.status-indicator.listening-wave {
    background: #3b82f6; /* Blue */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    animation: listeningPulse 1s infinite ease-in-out;
}

.status-indicator.processing-spinner {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #f59e0b; /* Yellow */
    animation: processingSpinFast 0.8s linear infinite;
}

.status-indicator.speaking-pulse {
    background: #ef4444; /* Red */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    animation: speakingPulse 1s infinite;
}

@keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
@keyframes listeningPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }
@keyframes processingSpinFast { to { transform: rotate(360deg); } }
@keyframes speakingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.85; } }

/* ================= AVATAR SPEAKING ANIMATION ================= */
.call-avatar {
    transition: box-shadow 0.4s ease, transform 0.4s ease, background 0.4s ease;
}

/* Listening State: Subtle Blue Pulse */
.call-avatar.listening {
    animation: avatarPulseBlue 2.5s infinite ease-in-out;
}
@keyframes avatarPulseBlue {
    0%, 100% { box-shadow: 0 0 40px rgba(229,57,53,0.3), 0 0 80px rgba(47,91,255,0.3); transform: scale(1); }
    50% { box-shadow: 0 0 50px rgba(229,57,53,0.4), 0 0 100px rgba(47,91,255,0.6); transform: scale(1.05); }
}

/* Processing State: Soft Breathing */
.call-avatar.processing {
    animation: avatarPulseSoft 2s infinite ease-in-out;
    opacity: 0.9;
}
@keyframes avatarPulseSoft {
    0%, 100% { box-shadow: 0 0 30px rgba(229,57,53,0.2), 0 0 60px rgba(47,91,255,0.2); transform: scale(0.98); }
    50% { box-shadow: 0 0 45px rgba(255,255,255,0.2), 0 0 80px rgba(255,255,255,0.2); transform: scale(1.02); }
}

/* Speaking State: Vibrant Red/Blue Pulse */
.call-avatar.speaking {
    animation: avatarPulseRedBlue 2s infinite ease-in-out;
    background: linear-gradient(135deg, #1e293b, #e53935);
}
@keyframes avatarPulseRedBlue {
    0%, 100% { box-shadow: 0 0 40px rgba(229,57,53,0.4), 0 0 80px rgba(47,91,255,0.4); transform: scale(1); }
    50% { box-shadow: 0 0 60px rgba(229,57,53,0.7), 0 0 120px rgba(47,91,255,0.6); transform: scale(1.08); }
}

/* ================= LIVE INTERIM SPEECH TEXT (Light Theme) ================= */
.call-interim-text {
    min-height: 28px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-style: italic;
    color: #5b403d;
    line-height: 1.5;
    padding: 0 0.5rem;
    transition: opacity 0.15s ease;
    word-break: break-word;
}
.call-interim-text:empty { opacity: 0; }
.call-interim-text:not(:empty) { opacity: 1; }
.call-interim-text::after {
    content: '|';
    display: inline-block;
    animation: cursorBlink 0.8s step-end infinite;
    color: #b7131a;
    margin-left: 2px;
}
.call-interim-text:empty::after { display: none; }

/* ================= MUTE BUTTON ACTIVE STATE ================= */
.call-control-btn.mute .icon-muted   { display: none; }
.call-control-btn.mute .icon-unmuted { display: block; }

.call-control-btn.mute.active {
    background: rgba(183,19,26,0.08) !important;
    color: #b7131a !important;
    border-color: rgba(183,19,26,0.3) !important;
}
.call-control-btn.mute.active .icon-unmuted { display: none; }
.call-control-btn.mute.active .icon-muted   { display: block; }

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ================= LIVE TRANSCRIPT LOG (Light Theme) ================= */
.call-transcript-log {
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #e7e8eb transparent;
}
.call-transcript-log::-webkit-scrollbar { width: 4px; }
.call-transcript-log::-webkit-scrollbar-thumb { background: #e7e8eb; border-radius: 999px; }

.call-transcript-hint {
    color: #9CA3AF;
    font-size: 13px;
    text-align: center;
    font-style: italic;
    padding: 0.5rem 0;
}

.transcript-line {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    animation: transcriptFadeIn 0.3s ease;
}
@keyframes transcriptFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.transcript-line .t-icon { display: none; }

.transcript-line .t-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.transcript-line .t-text {
    font-size: 14px;
    line-height: 1.6;
}

/* User — label abu muted, teks italic */
.transcript-line.user .t-label { color: #9CA3AF; }
.transcript-line.user .t-text  { color: #5b403d; font-style: italic; }

/* AI — card putih bersih, shadow tipis, label merah kecil */
.transcript-line.ai {
    background: #ffffff;
    border: 1px solid #f0f1f4;
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    box-shadow: 0 2px 8px rgba(25,28,30,0.05);
}
.transcript-line.ai .t-label { color: #b7131a; }
.transcript-line.ai .t-text  { color: #191c1e; font-weight: 500; }

/* ================= WAVEFORM ANIMATION ================= */

/* Idle — pelan, amplitudo kecil */
@keyframes waveIdle {
    0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
    50%       { transform: scaleY(0.6);  opacity: 0.6;  }
}
/* User berbicara — sedang, amplitudo medium */
@keyframes waveListen {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50%       { transform: scaleY(1.0); opacity: 1.0; }
}
/* Bot berbicara — cepat, amplitudo besar */
@keyframes waveSpeak {
    0%, 100% { transform: scaleY(0.35); opacity: 0.55; }
    50%       { transform: scaleY(1.15); opacity: 1.0;  }
}

.audio-bar {
    width: 4px;
    border-radius: 999px;
    transform-origin: center bottom;
    animation: waveIdle 2s ease-in-out infinite;
}

/* nth-child delays — spread 21 bars */
.audio-bar:nth-child(1)  { animation-delay: 0s;      }
.audio-bar:nth-child(2)  { animation-delay: 0.10s;   }
.audio-bar:nth-child(3)  { animation-delay: 0.20s;   }
.audio-bar:nth-child(4)  { animation-delay: 0.30s;   }
.audio-bar:nth-child(5)  { animation-delay: 0.40s;   }
.audio-bar:nth-child(6)  { animation-delay: 0.50s;   }
.audio-bar:nth-child(7)  { animation-delay: 0.40s;   }
.audio-bar:nth-child(8)  { animation-delay: 0.30s;   }
.audio-bar:nth-child(9)  { animation-delay: 0.20s;   }
.audio-bar:nth-child(10) { animation-delay: 0.10s;   }
.audio-bar:nth-child(11) { animation-delay: 0s;      }
.audio-bar:nth-child(12) { animation-delay: 0.10s;   }
.audio-bar:nth-child(13) { animation-delay: 0.20s;   }
.audio-bar:nth-child(14) { animation-delay: 0.30s;   }
.audio-bar:nth-child(15) { animation-delay: 0.40s;   }
.audio-bar:nth-child(16) { animation-delay: 0.50s;   }
.audio-bar:nth-child(17) { animation-delay: 0.40s;   }
.audio-bar:nth-child(18) { animation-delay: 0.30s;   }
.audio-bar:nth-child(19) { animation-delay: 0.20s;   }
.audio-bar:nth-child(20) { animation-delay: 0.10s;   }
.audio-bar:nth-child(21) { animation-delay: 0s;      }

/* User berbicara (listening state) */
#audioVisualizer.state-listening .audio-bar {
    animation-name: waveListen;
    animation-duration: 0.7s;
}
/* Bot berbicara (speaking state) */
#audioVisualizer.state-speaking .audio-bar {
    animation-name: waveSpeak;
    animation-duration: 0.5s;
}
/* Processing — berhenti hampir diam */
#audioVisualizer.state-processing .audio-bar {
    animation-name: waveIdle;
    animation-duration: 3s;
}

/* ================= AVATAR IDLE GLOW (default state) ================= */
@keyframes avatarIdle {
    0%, 100% { box-shadow: 0 0 40px rgba(229,57,53,0.35), 0 0 80px rgba(47,91,255,0.3);  }
    50%       { box-shadow: 0 0 60px rgba(229,57,53,0.55), 0 0 110px rgba(47,91,255,0.5); }
}

/* Applied when no state class is active (i.e. "connected" state) */
.call-avatar:not(.listening):not(.processing):not(.speaking) {
    animation: avatarIdle 2.8s ease-in-out infinite;
}

/* ================= ACCESSIBILITY ================= */
@media (prefers-reduced-motion: reduce) {
    .status-indicator, .call-avatar, .audio-bar { animation: none !important; }
}