/* ---------- Mode non-voyant : écrans à part (schéma version 3, 2026-10-05) ----------
   Salon : salon-nv.php. Gros boutons (52 px) bien espacés (12 px), chacun nommé pour TalkBack /
   VoiceOver ; fond uni, pas d'avatars ni de couleurs. La place va à l'espacement, pas au texte
   (Thierry : « ils n'ont pas besoin d'un écran facile à voir »). */
.nv-salon {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

.nv-haut,
.nv-saisie,
.nv-dock {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 12px;
    background: var(--white);
}

.nv-haut {
    border-bottom: 1px solid var(--line);
}

.nv-saisie {
    border-top: 1px solid var(--line);
}

.nv-dock {
    padding-top: 0;
    padding-bottom: 12px;
}

/* Une ligne de boutons côte à côte, de même largeur */
.nv-ligne {
    display: flex;
    gap: 12px;
}

.nv-ligne > .nv-btn {
    flex: 1 1 0;
    min-width: 0;
}

.nv-btn {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 10px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.nv-btn .ti {
    flex-shrink: 0;
    font-size: 22px;
}

.nv-principal {
    border-color: var(--orange-dark);
    background: var(--orange-dark);
    color: var(--white);
}

/* Parler en cours, salon coupé : bord orange épais */
.nv-actif {
    border-color: var(--orange-dark);
    border-width: 3px;
}

/* Zone de saisie : champ plus petit, Envoyer à sa droite */
.nv-champ {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    resize: none;
}

.nv-ligne > .nv-envoyer {
    flex: 0 0 auto;
    width: auto;
    padding: 4px 18px;
}

/* Réponse / modification en cours */
.nv-bandeau {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
}

.nv-bandeau > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-bandeau > .nv-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 4px 18px;
}

.nv-partage {
    margin: 0;
}

/* ---------- Messages : tous à gauche, toute la largeur, fond uni ---------- */
.nv-messages .m-bubble-row,
.nv-messages .m-bubble-row.own {
    justify-content: flex-start;
    margin-bottom: 16px;
}

.nv-messages .m-bubble-col {
    width: 100%;
    max-width: 100%;
}

.nv-messages .m-msg-avatar,
.nv-messages .m-msg-avatar-spacer,
.nv-messages .m-msg-actions {
    display: none;
}

.nv-messages .m-bubble,
.nv-messages .m-bubble-row.own .m-bubble {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
}

/* Bulle au-dessus, boutons du message dessous */
.nv-messages .m-bubble-line,
.nv-messages .m-bubble-line-own {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* Boutons Répondre / Réagir / Plus d'actions / Signaler (message-mobile.php) : invisibles à l'œil
   en mode normal (.zb-lecteur, style.css), visibles ici */
.nv-messages .m-bubble-line > .zb-lecteur {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
    border: 0;
    background: none;
    padding: 0;
}

.nv-messages .m-bubble-line > .zb-lecteur button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 4px 12px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}