/* ===========================
   Voice Recording Indicator Animations
   =========================== */

/* Pulse Ring Animation */
.pulse-ring {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ef4444;
    position: relative;
    animation: pulseRing 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.pulse-ring::before,
.pulse-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #ef4444;
    animation: pulseRingExpand 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.pulse-ring::after {
    animation-delay: 0.5s;
}

@keyframes pulseRing {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes pulseRingExpand {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
    }
}

/* Waveform Animation (optionnel - pour une version améliorée) */
.waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 24px;
}

.waveform-bar {
    width: 3px;
    background: #ef4444;
    border-radius: 2px;
    animation: waveformPulse 1.2s ease-in-out infinite;
}

.waveform-bar:nth-child(1) {
    animation-delay: 0s;
}

.waveform-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.waveform-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.waveform-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.waveform-bar:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes waveformPulse {
    0%, 100% {
        height: 4px;
    }
    50% {
        height: 20px;
    }
}

/* Breathing Animation for Voice Button */
.voice-button.breathing {
    animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
}

/* Ripple Effect on Click */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}