/* Langues — styles communs et interface de chat (RWD). */

.min-w-0 { min-width: 0; }

.menu-drapeaux { max-height: 70vh; overflow-y: auto; }
.drapeau-actif .fi { border-radius: 2px; }

.statut { font-weight: 500; }
.statut-pret { color: var(--bs-success); }
.statut-erreur { color: var(--bs-danger); }
.statut-en_cours, .statut-attente { color: var(--bs-warning-text-emphasis); }

.texte-source { max-height: 50vh; overflow-y: auto; white-space: normal; }
.statut-brouillon { color: var(--bs-primary); }

/* Difficulté des auteurs classiques */
.difficulte-facile { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.difficulte-moyen { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.difficulte-difficile { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Texte à lire (aperçu d'un extrait, panneau « Texte » du chat) */
.texte-lecture { font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.lecteur-texte { height: 34px; max-width: 100%; flex: 1 1 14rem; }
.panneau-texte { flex: 1 1 auto; overflow-y: auto; padding: 0 .25rem; }

/* ── Chat : pleine hauteur sous la barre de navigation ─────────────────── */
.conteneur-chat { padding-top: 0; padding-bottom: 0; }
.chat {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 57px);
}
.chat-entete, .chat-saisie { flex: 0 0 auto; }
.fil {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
}

.bulle {
    max-width: min(85%, 42rem);
    padding: .5rem .8rem;
    border-radius: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.bulle-prof, .bulle-question {
    align-self: flex-start;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-bottom-left-radius: .25rem;
}
.bulle-question { font-size: 1.05rem; }
.bulle-eleve {
    align-self: flex-end;
    background: var(--bs-primary-bg-subtle);
    border-bottom-right-radius: .25rem;
}
.bulle-vocale::before { content: "🎤 "; opacity: .7; }
.bulle-correct {
    align-self: center;
    text-align: center;
    background: var(--bs-success-bg-subtle);
    border: 1px solid var(--bs-success-border-subtle);
}
.bulle-correct .bravo {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--bs-success-text-emphasis);
}
.bulle-grammaire {
    align-self: flex-start;
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
    font-weight: 500;
}
.bulle-faux {
    align-self: flex-start;
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
    font-weight: 500;
}
.bulle-erreur {
    align-self: center;
    font-size: .875rem;
    color: var(--bs-danger);
    background: transparent;
    border: 1px dashed var(--bs-danger-border-subtle);
}
.bulle-attente, .bulle-prof.en-attente {
    align-self: flex-start;
    color: var(--bs-secondary-color);
    font-style: italic;
    background: transparent;
    border: 0;
}
.bulle-prof.en-attente::after { content: "…"; }

/* Traduction française (bulles du chat, textes) */
.btn-traduire {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-top: .3rem; padding: 0 .4rem;
    font-size: .72rem; line-height: 1.4;
    color: var(--bs-secondary-color); background: transparent;
    border: 1px solid var(--bs-border-color); border-radius: 1rem;
}
.btn-traduire:hover, .btn-traduire[aria-pressed="true"] { color: var(--bs-body-color); background: var(--bs-body-bg); }
.traduction {
    margin-top: .35rem; padding-left: .5rem;
    border-left: 3px solid var(--bs-primary-border-subtle);
    font-style: italic; font-size: .92em; color: var(--bs-secondary-color);
    white-space: pre-wrap; text-align: left;
}
.traduction-texte { font-size: 1rem; line-height: 1.6; }
.bulle-correct .traduction, .bulle-grammaire .traduction, .bulle-faux .traduction { font-weight: 400; }
/* Question masquée en mode vocal : sa traduction la dévoilerait. */
.fil.masquer-question .bulle-question .btn-traduire,
.fil.masquer-question .bulle-question .traduction { display: none; }

/* Mode vocal : question masquée tant que « Afficher la question » est éteint. */
.bouton-ecouter { display: none; }
.fil.mode-vocal .bouton-ecouter { display: inline-block; }
.question-masquee { display: none; }
.fil.masquer-question .texte-question { display: none; }
.fil.masquer-question .question-masquee { display: block; }
.bouton-ecouter.a-cliquer { animation: pulsation 1.2s ease-in-out infinite; }
@keyframes pulsation {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .5); }
    50% { box-shadow: 0 0 0 .35rem rgba(var(--bs-primary-rgb), 0); }
}

#champ { resize: none; max-height: 160px; }
#btn-micro.enregistrement {
    color: #fff;
    background: var(--bs-danger);
    animation: pulsation-rouge 1s ease-in-out infinite;
}
@keyframes pulsation-rouge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .5); }
    50% { box-shadow: 0 0 0 .4rem rgba(var(--bs-danger-rgb), 0); }
}

@media (max-width: 575.98px) {
    .bulle { max-width: 92%; }
    .bulle-correct .bravo { font-size: 1.6rem; }
}