/**
 * Styles pour la transcription streaming
 * Animation de curseur clignotant pendant la transcription
 */

/* Animation du curseur pour transcription en cours */
.message-bubble.transcribing::after {
    content: '|';
    margin-left: 2px;
    animation: blink 1s infinite;
    font-weight: bold;
    color: var(--primary-color, #007bff);
}

/* Animation de clignotement */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Style pour les messages en cours de transcription */
.message-bubble.transcribing {
    position: relative;
    background: linear-gradient(
        to right,
        #f0f8ff 0%,
        #e6f3ff 50%,
        #f0f8ff 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Animation de "shimmer" pour indiquer l'activité */
@keyframes shimmer {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

/* Style pour les messages utilisateur en transcription */
.message.user .message-bubble.transcribing {
    background: linear-gradient(
        to right,
        #e3f2fd 0%,
        #bbdefb 50%,
        #e3f2fd 100%
    );
    background-size: 200% 100%;
}

/* Animation plus subtile pour mode sombre (optionnel) */
@media (prefers-color-scheme: dark) {
    .message-bubble.transcribing {
        background: linear-gradient(
            to right,
            #1a1a2e 0%,
            #16213e 50%,
            #1a1a2e 100%
        );
        background-size: 200% 100%;
    }

    .message-bubble.transcribing::after {
        color: #64b5f6;
    }
}

/* État de chargement pendant traitement LLM */
.message-bubble.processing-llm {
    opacity: 0.7;
    position: relative;
}

.message-bubble.processing-llm::before {
    content: '⏳ ';
    margin-right: 4px;
}

/* Animation pour le statut de traitement */
.processing-status {
    display: inline-block;
    font-size: 0.9em;
    color: #666;
    font-style: italic;
    margin-top: 4px;
}

.processing-status.active {
    animation: pulse 1.5s ease-in-out infinite;
}

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