/* ==========================================================================
   INKWELL — MESSAGERIE
   Sommaire :
   1. Structure générale (2 colonnes)
   2. Colonne liste des conversations
   3. Item de conversation
   4. Panneau fil — état vide
   5. En-tête du fil
   6. Bannière message épinglé
   7. Corps du fil — bulles de messages
   8. Actions au survol d'un message (menu, réaction rapide)
   9. Indicateur de frappe
   10. Zone de saisie
   11. Panneau emoji (Twemoji)
   12. Galerie médias (modale)
   13. Modale paramètres de la messagerie
   14. Responsive — mobile (≤900px) et petit mobile (≤480px)
   ========================================================================== */

/* ==========================================================================
   1. STRUCTURE GÉNÉRALE — 2 colonnes plein écran sous le header
   ========================================================================== */

.msg-page {
    display: flex;
    height: calc(100dvh - 64px);
    max-width: 1400px;
    margin: 0 auto;
    border-left: 1px solid rgba(38, 53, 60, 0.08);
    border-right: 1px solid rgba(38, 53, 60, 0.08);
}

/* Repli pour les très anciens navigateurs sans support de dvh */
@supports not (height: 100dvh) {
    .msg-page {
        height: calc(100vh - 64px);
    }
}

[data-theme="sombre"] .msg-page {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   2. COLONNE LISTE DES CONVERSATIONS
   ========================================================================== */

.msg-liste-panneau {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(38, 53, 60, 0.08);
    overflow: hidden;
}

[data-theme="sombre"] .msg-liste-panneau {
    border-right-color: rgba(255, 255, 255, 0.08);
}

.msg-liste-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px;
}

.msg-liste-entete__actions {
    display: flex;
    gap: 4px;
}

.msg-liste-titre {
    font-family: var(--police-exergue);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--couleur-anthracite);
}

[data-theme="sombre"] .msg-liste-titre {
    color: #f0ebe6;
}

.msg-liste-parametres {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(38, 53, 60, 0.5);
}

.msg-liste-parametres:hover {
    background-color: rgba(38, 53, 60, 0.06);
}

[data-theme="sombre"] .msg-liste-parametres {
    color: rgba(240, 235, 230, 0.5);
}

.msg-liste-recherche {
    position: relative;
    margin: 0 20px 14px;
}

.msg-liste-recherche i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(38, 53, 60, 0.35);
    font-size: 0.85rem;
}

.msg-liste-recherche input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 999px;
    border: 1px solid rgba(38, 53, 60, 0.12);
    background-color: rgba(38, 53, 60, 0.03);
    font-size: 0.86rem;
    color: var(--couleur-anthracite);
}

[data-theme="sombre"] .msg-liste-recherche input {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0ebe6;
}

.msg-liste-onglets {
    display: flex;
    gap: 4px;
    padding: 0 20px 14px;
}

.msg-liste-onglet {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(38, 53, 60, 0.5);
}

[data-theme="sombre"] .msg-liste-onglet {
    color: rgba(240, 235, 230, 0.5);
}

.msg-liste-onglet--actif {
    background-color: var(--couleur-corail);
    color: #ffffff;
}

.msg-liste-conversations {
    flex: 1;
    overflow-y: auto;
}

.msg-liste-vide {
    text-align: center;
    padding: 60px 20px;
    color: rgba(38, 53, 60, 0.45);
}

[data-theme="sombre"] .msg-liste-vide {
    color: rgba(240, 235, 230, 0.45);
}

.msg-resultats-contenu__titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(38, 53, 60, 0.4);
    padding: 10px 20px 4px;
}

[data-theme="sombre"] .msg-resultats-contenu__titre {
    color: rgba(240, 235, 230, 0.4);
}

/* ==========================================================================
   3. ITEM DE CONVERSATION (colonne liste — plus grand que celui du panneau cloche)
   ========================================================================== */

.msg-conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

.msg-conv-item:hover {
    background-color: rgba(38, 53, 60, 0.03);
}

[data-theme="sombre"] .msg-conv-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.msg-conv-item--actif {
    background-color: rgba(255, 103, 106, 0.08);
}

.msg-conv-item--non-lu .msg-conv-item__apercu {
    color: var(--couleur-anthracite);
    font-weight: 700;
}

[data-theme="sombre"] .msg-conv-item--non-lu .msg-conv-item__apercu {
    color: #f0ebe6;
}

.msg-conv-item__avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--couleur-corail);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.msg-conv-item__point-en-ligne {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #01907c;
    border: 2px solid #ffffff;
}

[data-theme="sombre"] .msg-conv-item__point-en-ligne {
    border-color: #171b1e;
}

.msg-conv-item__corps {
    flex: 1;
    min-width: 0;
}

.msg-conv-item__ligne-haut {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msg-conv-item__nom {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--couleur-anthracite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

[data-theme="sombre"] .msg-conv-item__nom {
    color: #f0ebe6;
}

.msg-conv-item__icone-epingle {
    font-size: 0.65rem;
    color: rgba(38, 53, 60, 0.35);
}

.msg-conv-item__icone-muet {
    font-size: 0.7rem;
    color: rgba(38, 53, 60, 0.35);
}

.msg-conv-item__date {
    font-size: 0.72rem;
    color: rgba(38, 53, 60, 0.4);
    flex-shrink: 0;
}

[data-theme="sombre"] .msg-conv-item__date {
    color: rgba(240, 235, 230, 0.4);
}

.msg-conv-item__apercu {
    font-size: 0.82rem;
    color: rgba(38, 53, 60, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="sombre"] .msg-conv-item__apercu {
    color: rgba(240, 235, 230, 0.55);
}

.msg-conv-item__badge {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--couleur-corail);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Menu contextuel (clic droit ou bouton "...") */
.msg-conv-item__actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.msg-conv-item:hover .msg-conv-item__actions {
    opacity: 1;
}

/* ==========================================================================
   4. PANNEAU FIL DE DISCUSSION — ÉTAT VIDE
   ========================================================================== */

.msg-fil-panneau {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.msg-fil-etat-vide {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(38, 53, 60, 0.35);
}

[data-theme="sombre"] .msg-fil-etat-vide {
    color: rgba(240, 235, 230, 0.3);
}

.msg-fil-etat-vide i {
    font-size: 3rem;
}

.msg-fil-etat-vide p {
    font-size: 0.9rem;
}

/* ==========================================================================
   5. EN-TÊTE DU FIL
   ========================================================================== */

.msg-fil-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(38, 53, 60, 0.08);
    flex-shrink: 0;
}

[data-theme="sombre"] .msg-fil-entete {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.msg-fil-entete__retour {
    display: none;
    color: var(--couleur-anthracite);
    font-size: 1.1rem;
}

[data-theme="sombre"] .msg-fil-entete__retour {
    color: #f0ebe6;
}

.msg-fil-entete__avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--couleur-corail);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.msg-fil-entete__corps {
    flex: 1;
    min-width: 0;
}

.msg-fil-entete__nom {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--couleur-anthracite);
    text-decoration: none;
}

[data-theme="sombre"] .msg-fil-entete__nom {
    color: #f0ebe6;
}

.msg-fil-entete__statut {
    font-size: 0.76rem;
    color: rgba(38, 53, 60, 0.45);
}

[data-theme="sombre"] .msg-fil-entete__statut {
    color: rgba(240, 235, 230, 0.45);
}

.msg-fil-entete__statut--en-ligne {
    color: #01907c;
}

.msg-fil-entete__actions {
    display: flex;
    gap: 4px;
}

.msg-fil-entete__action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(38, 53, 60, 0.5);
}

.msg-fil-entete__action:hover {
    background-color: rgba(38, 53, 60, 0.06);
}

[data-theme="sombre"] .msg-fil-entete__action {
    color: rgba(240, 235, 230, 0.5);
}

/* État actif du bouton wake lock dans l'en-tête du fil */
.msg-fil-entete__action--actif {
    background-color: rgba(255, 103, 106, 0.12);
    color: var(--couleur-corail);
}

/* ==========================================================================
   6. BANNIÈRE MESSAGE ÉPINGLÉ
   ========================================================================== */

.msg-fil-epingle-banniere {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background-color: rgba(255, 103, 106, 0.06);
    border-bottom: 1px solid rgba(38, 53, 60, 0.06);
    font-size: 0.8rem;
    cursor: pointer;
}

.msg-fil-epingle-banniere i {
    color: var(--couleur-corail);
}

.msg-fil-epingle-banniere__texte {
    flex: 1;
    color: var(--couleur-anthracite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="sombre"] .msg-fil-epingle-banniere__texte {
    color: #f0ebe6;
}

/* ==========================================================================
   7. CORPS DU FIL — BULLES DE MESSAGES
   ========================================================================== */

.msg-fil-corps {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.msg-fil-charger-plus {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--couleur-corail);
    padding: 10px 0;
}

.msg-bulle-ligne {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    position: relative;
}

.msg-bulle-ligne--moi {
    flex-direction: row-reverse;
}

.msg-bulle__audio {
    max-width: 220px;
    height: 36px;
}

.msg-bulle-corps {
    max-width: 65%;
    display: flex;
    flex-direction: column;
}

.msg-bulle-ligne--moi .msg-bulle-corps {
    align-items: flex-end;
}

.msg-bulle {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--couleur-anthracite);
    background-color: rgba(38, 53, 60, 0.05);
    word-break: break-word;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

[data-theme="sombre"] .msg-bulle {
    color: #f0ebe6;
    background-color: rgba(255, 255, 255, 0.06);
}

.msg-bulle-ligne--moi .msg-bulle {
    background-color: var(--couleur-corail);
    color: #ffffff;
}

.msg-bulle--supprime {
    font-style: italic;
    opacity: 0.55;
}

.msg-bulle__reponse-citee {
    display: block;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 0.78rem;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-bulle:not(.msg-bulle-ligne--moi .msg-bulle) .msg-bulle__reponse-citee {
    border-left-color: var(--couleur-corail);
    background-color: rgba(38, 53, 60, 0.04);
}

.msg-bulle__image {
    max-width: 260px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
}

.msg-bulle__fichier {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.msg-bulle__fichier i {
    font-size: 1.4rem;
}

.msg-bulle__fichier-nom {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.msg-bulle__partage-carte {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: var(--couleur-anthracite);
    min-width: 220px;
}

[data-theme="sombre"] .msg-bulle__partage-carte {
    background-color: #1c2126;
    color: #f0ebe6;
}

.msg-bulle__partage-couverture {
    width: 44px;
    height: 62px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: rgba(38, 53, 60, 0.1);
    flex-shrink: 0;
}

.msg-bulle__partage-titre {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.msg-bulle__partage-meta {
    font-size: 0.72rem;
    opacity: 0.6;
    margin-top: 2px;
}

.msg-bulle__citation-lecture {
    padding: 10px 12px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--couleur-anthracite);
    text-decoration: none;
    display: block;
    min-width: 220px;
}

[data-theme="sombre"] .msg-bulle__citation-lecture {
    background-color: #1c2126;
    color: #f0ebe6;
}

.msg-bulle__citation-texte {
    font-family: var(--police-exergue);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 6px;
}

.msg-bulle__citation-source {
    font-size: 0.72rem;
    opacity: 0.6;
}

.msg-bulle__transfere {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-style: italic;
    color: rgba(38, 53, 60, 0.4);
    margin-bottom: 3px;
    padding: 0 4px;
}

[data-theme="sombre"] .msg-bulle__transfere {
    color: rgba(240, 235, 230, 0.4);
}

.msg-bulle-ligne--moi .msg-bulle__transfere {
    align-self: flex-end;
}

.msg-bulle-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: rgba(38, 53, 60, 0.4);
    margin-top: 3px;
    padding: 0 4px;
}

[data-theme="sombre"] .msg-bulle-meta {
    color: rgba(240, 235, 230, 0.4);
}

.msg-bulle-meta__coche {
    font-size: 0.7rem;
}

.msg-bulle-meta__coche--lu {
    color: #01907c;
}

.msg-bulle__reactions {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.msg-bulle__reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background-color: rgba(38, 53, 60, 0.06);
    font-size: 0.72rem;
    cursor: pointer;
}

[data-theme="sombre"] .msg-bulle__reaction {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   8. ACTIONS AU SURVOL D'UN MESSAGE — menu "...", réaction rapide
   ========================================================================== */

.msg-bulle-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    align-self: center;
}

.msg-bulle-ligne:hover .msg-bulle-actions {
    opacity: 1;
}

.msg-bulle-actions button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(38, 53, 60, 0.45);
    font-size: 0.78rem;
}

.msg-bulle-actions button:hover {
    background-color: rgba(38, 53, 60, 0.08);
}

[data-theme="sombre"] .msg-bulle-actions button {
    color: rgba(240, 235, 230, 0.45);
}

/* Menu déroulant "..." */
.msg-bulle-menu {
    position: absolute;
    top: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(38, 53, 60, 0.18);
    padding: 6px;
    z-index: 50;
    min-width: 160px;
    display: none;
}

.msg-bulle-menu--ouvert {
    display: block;
}

[data-theme="sombre"] .msg-bulle-menu {
    background-color: #232a2f;
}

.msg-bulle-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--couleur-anthracite);
    text-align: left;
}

[data-theme="sombre"] .msg-bulle-menu button {
    color: #f0ebe6;
}

.msg-bulle-menu button:hover {
    background-color: rgba(38, 53, 60, 0.06);
}

.msg-bulle-menu button.msg-bulle-menu__danger {
    color: var(--couleur-rouge-vif);
}

/* Mini sélecteur de réaction rapide */
.msg-reaction-rapide {
    position: absolute;
    bottom: 100%;
    display: none;
    gap: 4px;
    padding: 6px 8px;
    background-color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(38, 53, 60, 0.18);
    margin-bottom: 6px;
    z-index: 50;
}

[data-theme="sombre"] .msg-reaction-rapide {
    background-color: #232a2f;
}

.msg-reaction-rapide--ouvert {
    display: flex;
}

.msg-reaction-rapide button {
    font-size: 1.1rem;
    padding: 4px;
    border-radius: 50%;
}

.msg-reaction-rapide button:hover {
    background-color: rgba(38, 53, 60, 0.08);
    transform: scale(1.15);
}

/* ==========================================================================
   9. INDICATEUR DE FRAPPE
   ========================================================================== */

.msg-frappe-indicateur {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 20px;
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(38, 53, 60, 0.5);
}

[data-theme="sombre"] .msg-frappe-indicateur {
    color: rgba(240, 235, 230, 0.5);
}

.msg-frappe-indicateur--visible {
    display: flex;
}

.msg-frappe-points span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    margin: 0 1px;
    animation: msg-frappe-anim 1.2s ease infinite;
}

.msg-frappe-points span:nth-child(2) { animation-delay: 0.2s; }
.msg-frappe-points span:nth-child(3) { animation-delay: 0.4s; }

@keyframes msg-frappe-anim {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* ==========================================================================
   10. ZONE DE SAISIE
   ========================================================================== */

.msg-fil-reponse-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background-color: rgba(38, 53, 60, 0.03);
    border-top: 1px solid rgba(38, 53, 60, 0.08);
}

[data-theme="sombre"] .msg-fil-reponse-preview {
    background-color: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.msg-fil-reponse-preview--visible {
    display: flex;
}

.msg-fil-reponse-preview__contenu {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(38, 53, 60, 0.6);
    border-left: 3px solid var(--couleur-corail);
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="sombre"] .msg-fil-reponse-preview__contenu {
    color: rgba(240, 235, 230, 0.6);
}

.msg-fil-saisie {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(38, 53, 60, 0.08);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

[data-theme="sombre"] .msg-fil-saisie {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.msg-fil-saisie__bouton {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(38, 53, 60, 0.5);
    flex-shrink: 0;
}

.msg-fil-saisie__bouton:hover {
    background-color: rgba(38, 53, 60, 0.06);
}

[data-theme="sombre"] .msg-fil-saisie__bouton {
    color: rgba(240, 235, 230, 0.5);
}

.msg-fil-saisie__champ {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid rgba(38, 53, 60, 0.12);
    background-color: rgba(38, 53, 60, 0.02);
    font-family: var(--police-corps);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--couleur-anthracite);
    resize: none;
    overflow-y: hidden;
}

.msg-fil-saisie__champ--defilement {
    overflow-y: auto;
}

[data-theme="sombre"] .msg-fil-saisie__champ {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0ebe6;
}

.msg-fil-saisie__envoyer {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--couleur-corail);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-fil-saisie__envoyer:disabled {
    opacity: 0.4;
}

/* ==========================================================================
   11. PANNEAU EMOJI (Twemoji)
   ========================================================================== */

.msg-emoji-panneau {
    position: absolute;
    bottom: 100%;
    left: 20px;
    width: 300px;
    max-height: 280px;
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(38, 53, 60, 0.2);
    padding: 10px;
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.msg-emoji-panneau--ouvert {
    display: grid;
}

[data-theme="sombre"] .msg-emoji-panneau {
    background-color: #232a2f;
}

.msg-emoji-panneau img {
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 6px;
    padding: 3px;
}

.msg-emoji-panneau img:hover {
    background-color: rgba(38, 53, 60, 0.08);
}

.msg-emoji-inline {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    margin: 0 1px;
}

/* ==========================================================================
   12. GALERIE MÉDIAS (modale)
   ========================================================================== */

.msg-galerie-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.msg-galerie-item {
    aspect-ratio: 1;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: rgba(38, 53, 60, 0.06);
    cursor: pointer;
}

/* ==========================================================================
   13. MODALE PARAMÈTRES DE LA MESSAGERIE
   ========================================================================== */

.msg-param-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(38, 53, 60, 0.08);
}

.msg-param-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

[data-theme="sombre"] .msg-param-section {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.msg-param-section__titre {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--police-corps);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--couleur-anthracite);
    margin-bottom: 6px;
}

[data-theme="sombre"] .msg-param-section__titre {
    color: #f0ebe6;
}

.msg-param-section__titre i {
    color: var(--couleur-corail);
    font-size: 0.88rem;
    width: 18px;
}

.msg-param-section__sous-titre {
    font-size: 0.82rem;
    color: rgba(38, 53, 60, 0.55);
    margin-bottom: 14px;
    line-height: 1.5;
}

[data-theme="sombre"] .msg-param-section__sous-titre {
    color: rgba(240, 235, 230, 0.55);
}

.msg-param-section .param-otp-ligne {
    padding: 0;
    border: none;
}

.msg-npd-plage {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(38, 53, 60, 0.1);
}

[data-theme="sombre"] .msg-npd-plage {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.msg-npd-plage__bloc {
    flex: 1;
    min-width: 140px;
}

.msg-npd-plage__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(38, 53, 60, 0.45);
    margin-bottom: 8px;
}

[data-theme="sombre"] .msg-npd-plage__label {
    color: rgba(240, 235, 230, 0.45);
}

.msg-npd-plage .datepicker-heure {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-content: flex-start;
}

/* ==========================================================================
   GESTES MOBILES — glissement pour répondre + bouton "..." toujours visible
   ========================================================================== */

.msg-bulle-mobile-menu-bouton {
    display: none;
}

/* ==========================================================================
   14. MENU MOBILE CENTRÉ — déclenché par appui long sur une bulle
   ========================================================================== */

.msg-menu-mobile-fond {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background-color: rgba(23, 27, 30, 0.55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.msg-menu-mobile-fond--ouvert {
    display: flex;
    animation: msg-menu-mobile-fond-apparition 0.15s ease;
}

@keyframes msg-menu-mobile-fond-apparition {
    from { opacity: 0; }
    to { opacity: 1; }
}

.msg-menu-mobile-carte {
    width: 100%;
    max-width: 320px;
    background-color: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    animation: msg-menu-mobile-carte-apparition 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="sombre"] .msg-menu-mobile-carte {
    background-color: #232a2f;
}

@keyframes msg-menu-mobile-carte-apparition {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.msg-menu-mobile-reactions {
    display: flex;
    justify-content: space-around;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(38, 53, 60, 0.08);
}

[data-theme="sombre"] .msg-menu-mobile-reactions {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.msg-menu-mobile-reactions button {
    font-size: 1.6rem;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.msg-menu-mobile-reactions button:active {
    transform: scale(1.2);
}

.msg-menu-mobile-actions {
    padding: 6px;
}

.msg-menu-mobile-actions button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    color: var(--couleur-anthracite);
    text-align: left;
}

[data-theme="sombre"] .msg-menu-mobile-actions button {
    color: #f0ebe6;
}

.msg-menu-mobile-actions button:active {
    background-color: rgba(38, 53, 60, 0.06);
}

.msg-menu-mobile-actions button i {
    width: 18px;
    color: rgba(38, 53, 60, 0.5);
}

[data-theme="sombre"] .msg-menu-mobile-actions button i {
    color: rgba(240, 235, 230, 0.5);
}

.msg-menu-mobile-actions button.msg-bulle-menu__danger {
    color: var(--couleur-rouge-vif);
}

.msg-menu-mobile-actions button.msg-bulle-menu__danger i {
    color: var(--couleur-rouge-vif);
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    /* --- Structure plein écran mobile : liste OU fil, jamais les deux --- */
    .msg-page {
        border: none;
        height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background-color: var(--couleur-beige);
    }

    /* Les actions au survol (réagir/répondre/...) ne fonctionnent pas sur
       tactile (:hover n'existe pas) et occupaient un espace invisible qui
       poussait la bulle et le bouton d'envoi hors du cadre visible à droite */
        .msg-bulle-actions {
        display: none;
    }

    .msg-bulle-mobile-menu-bouton {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        color: rgba(38, 53, 60, 0.4);
        font-size: 0.85rem;
        margin-top: 2px;
    }

    [data-theme="sombre"] .msg-bulle-mobile-menu-bouton {
        color: rgba(240, 235, 230, 0.4);
    }

    .msg-bulle-ligne--moi .msg-bulle-mobile-menu-bouton {
        align-self: flex-end;
    }

    [data-theme="sombre"] .msg-page {
        background-color: #171b1e;
    }

    @supports not (height: 100dvh) {
        .msg-page {
            height: 100vh;
        }
    }

    .msg-liste-panneau {
        width: 100%;
        border-right: none;
        padding-top: env(safe-area-inset-top);
    }

    .msg-liste-entete {
        padding-top: max(20px, env(safe-area-inset-top));
    }

    .msg-fil-panneau {
        display: none;
    }

    .msg-page--conversation-ouverte .msg-liste-panneau {
        display: none;
    }

    .msg-page--conversation-ouverte .msg-fil-panneau {
        display: flex;
        padding-top: env(safe-area-inset-top);
    }

    .msg-fil-entete__retour {
        display: block;
    }

     /* Le header/footer principal du site est masqué en mode conversation
       plein écran sur mobile — évite d'avoir 2 barres de navigation
       superposées, et empêche le footer d'être révélé par le rebond
       élastique iOS pendant un geste de glissement */
    body:has(.msg-page--conversation-ouverte) .entete,
    body:has(.msg-page--conversation-ouverte) .pied-de-page {
        display: none;
    }

        /* iOS zoome automatiquement la page quand un champ de saisie a une
       police de moins de 16px au moment du focus. 16px désactive ce
       comportement, mais nécessite d'ajuster padding/hauteur en même temps,
       calibrés à l'origine pour une police plus petite (0.88rem desktop) */
    .msg-fil-saisie__champ {
        font-size: 16px;
        line-height: 1.4;
        padding: 10px 16px;
        min-height: 44px;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
    }

    .msg-fil-saisie {
        min-width: 0;
    }

    .msg-fil-saisie > * {
        min-width: 0;
    }

    .msg-liste-recherche input {
        font-size: 16px;
        padding: 12px 14px 12px 38px;
        box-sizing: border-box;
    }

    /* Les boutons flottants globaux du site (cookies, remonter en haut)
       n'ont aucun sens par-dessus une conversation en plein écran, et se
       superposent physiquement à la barre de saisie (bouton pièce jointe
       caché derrière le bouton cookies, bouton envoyer partiellement masqué) */
    .msg-page--conversation-ouverte ~ .bouton-flottant-cookies,
    body:has(.msg-page--conversation-ouverte) .bouton-flottant-cookies,
    body:has(.msg-page--conversation-ouverte) .bouton-remonter {
        display: none !important;
    }

    /* --- Zone de sécurité horizontale (encoche / bords arrondis iPhone) --- */
    .msg-fil-saisie {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(28px, calc(env(safe-area-inset-right) + 16px));
        padding-bottom: 12px;
        gap: 6px;
        position: relative;
        z-index: 20;
    }

    .msg-liste-panneau {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .msg-fil-saisie__envoyer {
        margin-right: 2px;
    }

    .msg-fil-corps {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .msg-fil-epingle-banniere {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    /* --- Bulles plus larges sur mobile (65% était pensé pour desktop) --- */
    .msg-bulle-corps {
        max-width: 82%;
    }

    /* --- Zones tactiles agrandies (44px minimum, recommandation WCAG) --- */
    .msg-fil-entete__action,
    .msg-fil-saisie__bouton,
    .msg-liste-parametres {
        width: 44px;
        height: 44px;
    }

    .msg-bulle-actions button {
        width: 34px;
        height: 34px;
    }

    /* --- Panneau emoji plein largeur plutôt qu'une largeur fixe --- */
    .msg-emoji-panneau {
        left: 12px;
        right: 12px;
        width: auto;
    }

    /* --- Empêche le rebond de défilement (pull-to-refresh) --- */
    .msg-fil-corps,
    .msg-liste-conversations {
        overscroll-behavior-y: contain;
    }
}

@media (max-width: 480px) {
    .msg-conv-item__avatar {
        width: 44px;
        height: 44px;
    }

    .msg-bulle {
        font-size: 0.86rem;
    }

    .msg-fil-entete__nom {
        font-size: 0.88rem;
    }

    .msg-npd-plage {
        flex-direction: column;
        gap: 14px;
    }
}