/* ============================================================
   Messagerie — STRUCTURE uniquement
   styles/messagerie.css
   ============================================================
   L'apparence (couleurs, rayons, typographie) vit dans `peau.css`, chargée en
   dernier. Ici : les grilles, les zones qui défilent, et les deux paliers.

   ⚠️ LA RÈGLE QUI COMMANDE TOUT CE FICHIER : `min-height:0`
   Un élément de grille ou de flexbox refuse par défaut de devenir plus petit
   que son contenu. Sans `min-height:0` sur chaque maillon de la chaîne, la
   zone des bulles ne défile pas — elle pousse la page entière, la barre de
   saisie descend hors de l'écran, et on croit à un bug de hauteur alors que
   c'est le comportement normal de la flexbox.

   ⚠️ La hauteur de `.msg` est posée par le JavaScript (`App.msgApres`), pas
   ici : elle dépend de la barre du haut, des marges et de la barre d'onglets
   du mobile, qui changent de taille selon l'écran. Une constante écrite en dur
   finit toujours par être fausse quelque part.
   ============================================================ */

.msg{
  display:grid;
  grid-template-columns:340px 1fr;
  min-height:0;
  overflow:hidden;
}

/* ---------- volet gauche : les conversations ---------- */

.msg-liste{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.msg-liste-tete{ flex:none; display:flex; flex-direction:column; gap:8px; }
.msg-liste-tete h2{ margin:0; }
.msg-liste-corps{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }

.msg-conv{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; cursor:pointer;
  border:none; background:none; font:inherit;
}
.msg-conv-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.msg-conv-h{ display:flex; align-items:baseline; gap:8px; }
.msg-conv-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-conv-h time{ flex:none; }
.msg-conv-p{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-ava{ flex:none; display:grid; place-items:center; }
.msg-pastille{ flex:none; display:grid; place-items:center; }

/* ---------- volet droit : le fil ---------- */

.msg-fil{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.msg-fil-tete{ flex:none; display:flex; align-items:center; gap:10px; }
.msg-fil-qui{ min-width:0; }
.msg-fil-nom, .msg-fil-sous{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-fil-tete .spacer{ flex:1; }
.msg-retour{ display:none; flex:none; cursor:pointer; border:none; background:none; }

.msg-bulles{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:7px;
  scroll-behavior:smooth;
}
.msg-bulle{ max-width:74%; }
.msg-bulle.moi{ align-self:flex-end; }
.msg-bulle.lui{ align-self:flex-start; }
.msg-txt{ white-space:pre-wrap; word-break:break-word; }
.msg-pied{ display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.msg-bulle.lui .msg-pied{ justify-content:flex-start; }

.msg-jour{ align-self:center; }
.msg-fait{ align-self:center; max-width:82%; text-align:center; }

/* ---------- la barre de saisie ---------- */

.msg-saisie{ flex:none; display:flex; align-items:flex-end; gap:9px; }
.msg-saisie textarea{
  flex:1; min-width:0; resize:none; overflow-y:auto; max-height:132px;
  font:inherit;
}
.msg-envoi{ flex:none; display:grid; place-items:center; cursor:pointer; border:none; }

.msg-fil-vide{ display:grid; place-items:center; }

/* ============================================================
   Téléphone et petite tablette : un volet à la fois
   ------------------------------------------------------------
   Le seuil de 860 px est le MÊME que celui de `App.msgEtroit()`. Les deux
   doivent bouger ensemble : c'est ce booléen qui décide si « Entrée » envoie
   le message et si la liste s'ouvre sur un fil ou non. Décalés, on obtient un
   écran sans bouton de retour, ou une touche Entrée qui envoie une réponse à
   moitié écrite.
   ============================================================ */
@media (max-width:860px){
  .msg{ grid-template-columns:1fr; }
  .msg[data-vue="fil"]   .msg-liste{ display:none; }
  .msg[data-vue="liste"] .msg-fil{ display:none; }
  .msg-retour{ display:grid; }
  .msg-bulle{ max-width:86%; }
}


/* ---------- la note interne ----------
   ⚠️ Elle vit dans le fil du client mais ne lui est PAS destinée. Elle doit
   donc se reconnaître sans être lue : ni à gauche (le client) ni à droite
   (nous), mais au centre, sur un fond d'alerte douce. Une note qui
   ressemblerait à une bulle ordinaire ferait croire qu'on a répondu.
   ⚠️ `align-self:center` et non `stretch` : à pleine largeur elle deviendrait
   le point le plus visible du fil, alors qu'elle en est l'à-côté. */
.msg-bulle.note{
  align-self:center; max-width:90%;
  background:var(--warn-bg); border:1px dashed var(--warn);
  border-radius:12px; padding:9px 12px;
}
.msg-note-tete{
  font-size:10.5px; font-weight:800; letter-spacing:.3px;
  color:var(--warn); margin-bottom:4px;
}

/* La barre d'options au-dessus du champ de saisie. */
.msg-options{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:6px 12px 0; font-size:11.5px; color:var(--ink-soft);
}
.msg-options label{display:flex; align-items:center; gap:5px; cursor:pointer}
.msg-options input{width:15px; height:15px; accent-color:var(--accent); flex:0 0 auto}
.msg-prev{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* ⚠️ Le champ CHANGE D'ASPECT en mode note : on doit voir qu'on n'écrit pas
   au client, sans relire une case à cocher. */
.msg-saisie.note{background:var(--warn-bg)}
.msg-saisie.note textarea{background:transparent}


/* ⚠️ LE ✕ RESTE DISCRET, ET NE BOUGE PAS. Une croix qui n'apparaît qu'au
   survol est introuvable au doigt ; une croix trop visible invite à effacer.
   Elle est donc là, en petit, dans le pied de la bulle — à côté de l'heure,
   où le regard passe déjà. */
.msg-suppr{
  opacity:.45; padding:0 4px; line-height:1; border:0; background:none;
  font-size:12px; vertical-align:baseline;
}
.msg-suppr:hover{opacity:1; color:var(--bad)}
.msg-bulle.moi .msg-suppr{color:inherit}
.msg-note-tete .msg-suppr{float:right; color:var(--warn)}