/* ====================================================================
   Écran « Messagerie » (public/messages.js).

   Feuille dédiée : public/tailwind.css est précompilé et purgé sur les
   classes déjà présentes, une classe absente n'y existe pas. Toutes les
   valeurs passent par les variables de la console (tailwind.input.css) :
   l'écran suit la marque de chaque client, ses formes et sa densité.
   Handoff : aucune bordure sur les pastilles ni les cartes, la séparation
   vient des fonds et des ombres ; contraste AA mesuré sur chaque paire.
   ==================================================================== */

/* Hauteur réelle sur téléphone : 100vh y compte la barre d'adresse et
   cacherait la zone de saisie. Limité à cet écran par :has(). */
@supports (height: 100dvh) {
  body:has(.msg-root) .h-screen { height: 100dvh; }
}

/* Masqué à l'œil, lu par les lecteurs d'écran. */
.msg-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Infobulle des actions à pictogramme seul : rendue en CSS depuis aria-label,
   que l'observateur de traduction traduit. Jamais l'infobulle native. */
.msg-tip { position:relative; }
.msg-tip::after {
  content:attr(aria-label); position:absolute; left:50%; bottom:calc(100% + 8px); z-index:40;
  transform:translate(-50%, 3px); padding:5px 9px; border-radius:8px;
  background:var(--t1,#191837); color:#fff; font-size:11.5px; font-weight:600; line-height:1.3; letter-spacing:0;
  white-space:nowrap; box-shadow:var(--shh); opacity:0; pointer-events:none;
  transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.msg-tip:hover::after, .msg-tip:focus-visible::after { opacity:1; transform:translate(-50%, 0); }
.msg-tip.is-below::after { top:calc(100% + 8px); bottom:auto; transform:translate(-50%, -3px); }
.msg-tip.is-below:hover::after, .msg-tip.is-below:focus-visible::after { transform:translate(-50%, 0); }
.msg-tip.is-end::after { left:auto; right:0; transform:translate(0, 3px); }
.msg-tip.is-end.is-below::after { transform:translate(0, -3px); }
.msg-tip.is-end:hover::after, .msg-tip.is-end:focus-visible::after { transform:none; }

/* Badge du rail : même gabarit que les autres badges, sur la couleur de marque. */
.msg-nav-badge { background:var(--brand-ink,#232066); color:#fff; }

/* ---- Mise en page ---------------------------------------------------- */
.msg-root {
  box-sizing:border-box; height:100%; min-height:440px; max-width:var(--content,1340px); margin:0 auto;
  padding:2px 24px 14px; display:flex; flex-direction:column; gap:10px;
}
.msg-panes { flex:1 1 auto; min-height:0; display:flex; gap:16px; }
.msg-pane {
  min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface,#fff); border-radius:var(--r-card,18px); box-shadow:var(--sh);
}
.msg-list-pane { flex:0 0 320px; width:320px; }
.msg-thread-pane { flex:1 1 auto; min-width:0; position:relative; }

/* ---- Bandeaux --------------------------------------------------------- */
.msg-banner { flex:none; display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:var(--rs,12px); font-size:12.5px; font-weight:600; }
.msg-banner > span { flex:1 1 auto; min-width:0; }
.msg-banner svg { flex:none; }
/* #8F540D sur #FBF3E7 : 5,5:1. #8A2A20 sur #FBEDEA : 7,6:1. */
.msg-banner.is-warn { background:var(--tone-warn-bg,#FBF3E7); color:#8F540D; }
.msg-banner.is-danger { background:var(--tone-danger-bg,#FBEDEA); color:var(--tone-danger-deep,#8A2A20); }
.msg-banner-btn {
  flex:none; border:0; border-radius:var(--r-pill,99px); padding:6px 13px; cursor:pointer;
  background:var(--surface,#fff); color:var(--tone-danger-deep,#8A2A20); font:inherit; font-weight:700; box-shadow:var(--sh-btn);
}

/* ---- Liste des conversations ------------------------------------------ */
.msg-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 16px 6px 18px; }
.msg-list-title { margin:0; font-size:20px; font-weight:700; color:var(--t1); letter-spacing:-0.025em; }
.msg-list-lede { margin:0; padding:0 18px 10px; font-size:12px; line-height:1.45; color:var(--t3); }
.msg-new {
  flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:var(--brand-ink,#232066); color:#fff; font:inherit; font-size:12.5px; font-weight:600;
  box-shadow:var(--sh-btn-primary);
}
.msg-convs { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2px 10px 12px; display:flex; flex-direction:column; gap:2px; }
.msg-section { margin:14px 10px 6px; font-size:11.5px; font-weight:600; letter-spacing:0; color:var(--t3); }
.msg-conv {
  display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; cursor:pointer; text-align:left;
  border-radius:var(--rs,12px); background:transparent; color:var(--t2); font:inherit;
}
.msg-conv:hover { background:var(--surface-soft,#FAFAFD); }
.msg-conv.is-active { background:var(--brand-wash,#F0EFF8); }
.msg-conv-ico { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-pill,99px); }
.msg-conv-ico.is-general { background:var(--brand-ink,#232066); color:#fff; }
.msg-conv-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.msg-conv-row { display:flex; align-items:center; gap:8px; min-width:0; }
.msg-conv-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--t1); }
.msg-conv-time { flex:none; font-size:11.5px; color:var(--t3); font-variant-numeric:tabular-nums; }
.msg-conv-preview { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--t3); }
.msg-conv.has-unread .msg-conv-time { color:var(--brand-ink,#232066); font-weight:600; }
.msg-conv.has-unread .msg-conv-preview { color:var(--t2); font-weight:500; }
.msg-conv-unread {
  flex:none; position:relative; min-width:20px; height:20px; padding:0 6px; display:inline-grid; place-items:center;
  border-radius:var(--r-pill,99px); background:var(--brand-ink,#232066); color:#fff; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.msg-groups-empty { margin:2px 10px; padding:14px; border-radius:var(--rs,12px); background:var(--surface-soft,#FAFAFD); font-size:12.5px; line-height:1.5; color:var(--t3); }
.msg-groups-empty p { margin:0; }
.msg-groups-empty p + p { margin-top:4px; }

/* Squelette de chargement de la liste. */
.msg-skel { display:flex; align-items:center; gap:12px; padding:10px; }
.msg-skel-dot { flex:none; width:40px; height:40px; border-radius:50%; background:var(--surface-track,#F1F1F7); animation:msg-pulse 1.4s var(--ease) infinite; }
.msg-skel-lines { flex:1 1 auto; display:flex; flex-direction:column; gap:7px; }
.msg-skel-line { height:10px; border-radius:6px; background:var(--surface-track,#F1F1F7); animation:msg-pulse 1.4s var(--ease) infinite; }
.msg-skel-line.is-short { width:55%; }
@keyframes msg-pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

/* Teintes des groupes (fond clair, pictogramme coloré) et couleurs des
   auteurs (pastille pleine, initiales blanches : 5:1 au moins sur chacune). */
.msg-t0 { background:#E6EBF2; color:#2E5B96; } .msg-c0 { background:#2E5B96; } .msg-fc0 { color:#2E5B96; }
.msg-t1 { background:#E2EFEE; color:#0E7C73; } .msg-c1 { background:#0E7C73; } .msg-fc1 { color:#0E7C73; }
.msg-t2 { background:#F2EAE2; color:#8F540D; } .msg-c2 { background:#8F540D; } .msg-fc2 { color:#8F540D; }
.msg-t3 { background:#F4E7ED; color:#A6336B; } .msg-c3 { background:#A6336B; } .msg-fc3 { color:#A6336B; }
.msg-t4 { background:#ECEBF6; color:#5E5AB0; } .msg-c4 { background:#5E5AB0; } .msg-fc4 { color:#5E5AB0; }
.msg-t5 { background:#E4EEF1; color:#1F6F8B; } .msg-c5 { background:#1F6F8B; } .msg-fc5 { color:#1F6F8B; }
.msg-t6 { background:#F6E7E6; color:#B03A2E; } .msg-c6 { background:#B03A2E; } .msg-fc6 { color:#B03A2E; }
.msg-t7 { background:#E8EDE4; color:#3D6B21; } .msg-c7 { background:#3D6B21; } .msg-fc7 { color:#3D6B21; }

/* ---- Conversation ouverte --------------------------------------------- */
.msg-thread-head { flex:none; display:flex; align-items:center; gap:12px; padding:13px 16px 13px 18px; border-bottom:1px solid var(--hair,#EFEFF6); }
.msg-thread-titles { flex:1 1 auto; min-width:0; }
.msg-thread-title {
  margin:0; font-size:16px; font-weight:700; color:var(--t1); letter-spacing:-0.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; outline:none;
}
.msg-thread-sub { margin:2px 0 0; font-size:12px; color:var(--t3); }
.msg-icon-btn {
  flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:transparent; color:var(--t2);
}
.msg-icon-btn:hover { background:var(--surface-neutral,#F7F7FC); color:var(--t1); }
.msg-head-btn {
  flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:var(--surface-neutral,#F7F7FC); color:var(--t2); font:inherit; font-size:12.5px; font-weight:600;
}
.msg-head-btn:hover { background:var(--brand-wash,#F0EFF8); color:var(--brand-ink,#232066); }

.msg-scope {
  flex:none; display:flex; align-items:flex-start; gap:8px; margin:0; padding:9px 18px;
  font-size:12px; line-height:1.45; color:var(--t2); background:var(--surface-soft,#FAFAFD); border-bottom:1px solid var(--hair,#EFEFF6);
}
.msg-scope svg { flex:none; margin-top:2px; color:var(--t3); }
.msg-scope-text { flex:1 1 auto; min-width:0; }
.msg-scope.is-staff { color:var(--brand-ink,#232066); background:var(--brand-wash,#F0EFF8); }
.msg-scope.is-staff svg { color:var(--brand-ink,#232066); }

.msg-log-wrap { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.msg-log {
  position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; overflow-anchor:none; overscroll-behavior:contain;
  padding:12px 18px 18px; background:var(--canvas,#F3F3F9);
}
/* Peu de messages : ils se rangent en bas, au-dessus de la zone de saisie. */
.msg-log > :first-child { margin-top:auto; }
.msg-log:focus-visible { outline:2px solid var(--brand,#2EB8C9); outline-offset:-2px; }

.msg-day { display:flex; justify-content:center; margin:14px 0 6px; }
.msg-day-label { padding:4px 12px; border-radius:var(--r-pill,99px); background:var(--surface,#fff); color:var(--t2); font-size:11.5px; font-weight:600; box-shadow:var(--sh-btn); }
.msg-unread-divider { display:flex; align-items:center; gap:10px; margin:14px 0 4px; font-size:11.5px; font-weight:700; color:var(--brand-ink,#232066); }
.msg-unread-divider::before, .msg-unread-divider::after { content:""; flex:1 1 auto; height:1px; background:var(--n-200,#C9C8E0); }
.msg-older-wrap { display:flex; justify-content:center; margin:2px 0 6px; }
.msg-older {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:var(--surface,#fff); color:var(--t2); font:inherit; font-size:12px; font-weight:600; box-shadow:var(--sh-btn);
}
.msg-older:disabled { cursor:wait; color:var(--t3); }
.msg-start { margin:4px 0 8px; text-align:center; font-size:11.5px; color:var(--t3); }

.msg-run { display:flex; align-items:flex-start; gap:8px; margin-top:10px; }
.msg-run.is-mine { justify-content:flex-end; }
.msg-run-body { min-width:0; max-width:min(680px, 80%); display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.msg-run.is-mine .msg-run-body { align-items:flex-end; }
.msg-avatar {
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-pill,99px);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:0;
}
.msg-run .msg-avatar { margin-top:19px; }
.msg-author { display:flex; align-items:center; gap:6px; padding:0 4px 1px; font-size:12px; font-weight:600; }
.msg-tag {
  flex:none; display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--r-pill,99px);
  background:var(--brand-wash,#F0EFF8); color:var(--brand-ink,#232066); font-size:10.5px; font-weight:700; letter-spacing:0;
}
.msg-tag.is-soft { background:var(--surface-track,#F1F1F7); color:var(--t2); }

.msg-bubble {
  position:relative; max-width:100%; padding:7px 12px 5px; border-radius:16px;
  background:var(--surface,#fff); color:var(--t1); box-shadow:var(--sh-btn);
}
.msg-author + .msg-bubble { border-top-left-radius:6px; }
.msg-run.is-mine .msg-bubble:first-child { border-top-right-radius:6px; }
.msg-bubble.is-mine { background:var(--brand-ink,#232066); color:#fff; }
.msg-bubble.is-deleted { background:rgba(255,255,255,.6); color:var(--t3); box-shadow:none; }
.msg-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.45; }
.msg-text.is-deleted { display:inline-flex; align-items:center; gap:6px; white-space:normal; font-size:13px; }
.msg-link { color:var(--brand-ink,#232066); text-decoration:underline; text-underline-offset:2px; }
.msg-bubble.is-mine .msg-link { color:#fff; }
.msg-meta { display:block; margin-top:2px; text-align:right; font-size:10.5px; color:var(--t3); font-variant-numeric:tabular-nums; }
/* Blanc à 74 % sur la couleur de marque : 8:1 sur le bleu nuit par défaut. */
.msg-bubble.is-mine .msg-meta { color:rgba(255,255,255,.74); }

/* Menu de ses propres messages : visible au survol et au clavier, toujours
   sur un écran tactile. Pas de `transform` : `button:active` le remplacerait. */
.msg-more {
  position:absolute; top:4px; right:calc(100% + 6px); width:28px; height:28px; display:grid; place-items:center;
  border:0; cursor:pointer; border-radius:var(--r-pill,99px); background:var(--surface,#fff); color:var(--t2); box-shadow:var(--sh-btn);
  opacity:0; transition:opacity .15s var(--ease);
}
.msg-bubble:hover .msg-more, .msg-bubble:focus-within .msg-more, .msg-more[aria-expanded="true"] { opacity:1; }
.msg-menu {
  position:absolute; top:calc(100% + 4px); right:0; z-index:20; min-width:210px; padding:6px;
  display:flex; flex-direction:column; border-radius:var(--rs,12px); background:var(--surface,#fff); box-shadow:var(--shh);
}
.msg-menu.is-up { top:auto; bottom:calc(100% + 4px); }
.msg-menu button {
  display:flex; align-items:center; gap:8px; width:100%; padding:9px 10px; border:0; cursor:pointer; text-align:left;
  border-radius:8px; background:transparent; color:var(--t1); font:inherit; font-size:13px; font-weight:500;
}
.msg-menu button:hover { background:var(--surface-soft,#FAFAFD); }
.msg-menu .is-danger { color:var(--tone-danger,#C4392C); }

.msg-jump {
  position:absolute; left:0; right:0; bottom:14px; z-index:5; width:max-content; margin:0 auto;
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:var(--brand-ink,#232066); color:#fff; font:inherit; font-size:12.5px; font-weight:600;
  box-shadow:var(--sh-btn-primary);
}

/* ---- Zone de saisie ----------------------------------------------------- */
.msg-send-error {
  flex:none; display:flex; align-items:flex-start; gap:8px; margin:0; padding:9px 18px;
  font-size:12.5px; line-height:1.45; color:var(--tone-danger-deep,#8A2A20); background:var(--tone-danger-bg,#FBEDEA);
}
.msg-send-error svg { flex:none; margin-top:2px; }
.msg-composer { flex:none; display:flex; align-items:flex-end; gap:10px; padding:12px 14px 6px 18px; background:var(--surface,#fff); border-top:1px solid var(--hair,#EFEFF6); }
.msg-input {
  flex:1 1 auto; min-width:0; height:var(--msg-ta-h,44px); min-height:44px; max-height:168px; resize:none; overflow-y:auto;
  border:0; border-radius:22px; padding:11px 16px; background:var(--surface-neutral,#F7F7FC); color:var(--t1);
  font:inherit; font-size:14px; line-height:1.45;
}
.msg-input:disabled { opacity:.6; cursor:not-allowed; }
.msg-send {
  flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); background:var(--brand-ink,#232066); color:#fff; box-shadow:var(--sh-btn-primary);
}
.msg-send:disabled { background:var(--surface-track,#F1F1F7); color:var(--t4,#A8ADC4); box-shadow:none; cursor:not-allowed; }
.msg-compose-foot { flex:none; display:flex; align-items:center; gap:10px; padding:0 18px 10px; background:var(--surface,#fff); font-size:11px; color:var(--t3); }
.msg-counter { margin-left:auto; font-variant-numeric:tabular-nums; }
.msg-counter.is-over, .msg-too-long { color:var(--tone-danger,#C4392C); font-weight:600; }

/* ---- États : vide, chargement, erreur ------------------------------------ */
.msg-state { margin:auto; max-width:380px; padding:24px 16px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; color:var(--t3); }
.msg-state > svg { color:var(--t4,#A8ADC4); }
.msg-state.is-error > svg { color:var(--tone-danger,#C4392C); }
.msg-state-title { margin:6px 0 0; font-size:14px; font-weight:600; color:var(--t1); }
.msg-state-text { margin:0; font-size:12.5px; line-height:1.5; color:var(--t3); }
.msg-state .msg-secondary { margin-top:8px; }
.msg-thread-pane > .msg-state { flex:1 1 auto; justify-content:center; }
.msg-spinner { width:22px; height:22px; border-radius:50%; border:2.5px solid var(--surface-track,#F1F1F7); border-top-color:var(--brand-ink,#232066); animation:msg-spin .8s linear infinite; }
@keyframes msg-spin { to { transform:rotate(360deg); } }

/* ---- Messagerie fermée (usurpation, lien de partage) ----------------------- */
.msg-blocked { max-width:640px; margin:0 auto; padding:40px 16px; }
.msg-blocked-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:28px; background:var(--surface,#fff); border-radius:var(--r-card,18px); box-shadow:var(--sh); }
.msg-blocked-ico { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--rs,12px); background:var(--brand-wash,#F0EFF8); color:var(--brand-ink,#232066); }
.msg-blocked-title { margin:4px 0 0; font-size:18px; font-weight:700; color:var(--t1); }
.msg-blocked-text { margin:0; font-size:13.5px; line-height:1.6; color:var(--t2); }
.msg-blocked-card .msg-primary { margin-top:6px; }

/* ---- Boutons ---------------------------------------------------------- */
.msg-primary, .msg-secondary, .msg-danger-btn, .msg-chip-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; cursor:pointer;
  border-radius:var(--r-pill,99px); font:inherit; font-weight:600; white-space:nowrap;
}
.msg-primary { height:40px; padding:0 18px; font-size:13px; background:var(--brand-ink,#232066); color:#fff; box-shadow:var(--sh-btn-primary); }
.msg-primary:disabled { background:var(--surface-track,#F1F1F7); color:var(--t3); box-shadow:none; cursor:not-allowed; }
.msg-secondary { height:40px; padding:0 16px; font-size:13px; background:var(--surface-neutral,#F7F7FC); color:var(--t1); }
.msg-secondary:hover { background:var(--brand-wash,#F0EFF8); }
.msg-secondary.is-small { height:30px; padding:0 12px; font-size:12px; }
.msg-danger-btn { height:40px; padding:0 16px; font-size:13px; background:var(--tone-danger-bg,#FBEDEA); color:var(--tone-danger-deep,#8A2A20); }
.msg-chip-btn { height:34px; padding:0 13px; font-size:12.5px; background:var(--brand-wash,#F0EFF8); color:var(--brand-ink,#232066); }
.msg-link-btn {
  border:0; padding:2px 0; cursor:pointer; background:none; color:var(--brand-ink,#232066);
  font:inherit; font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:2px;
}

/* ---- Modales ------------------------------------------------------------ */
.msg-modal { display:flex; flex-direction:column; gap:14px; padding:22px 24px 20px; color:var(--t2); }
.msg-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.msg-modal-titles { min-width:0; }
.msg-modal-title { margin:0; font-size:18px; font-weight:700; color:var(--t1); letter-spacing:-0.02em; }
.msg-modal-sub { margin:3px 0 0; font-size:12.5px; color:var(--t3); overflow-wrap:anywhere; }
.msg-field { display:flex; flex-direction:column; gap:6px; }
.msg-field-label { font-size:12.5px; font-weight:600; color:var(--t1); }
/* Champs : bordés comme tous les champs de la console (ce ne sont pas des pastilles). */
.msg-text-input {
  width:100%; height:42px; padding:0 14px; border:1px solid #D7DAE5; border-radius:var(--r-md,10px);
  background:var(--surface,#fff); color:var(--t1); font:inherit; font-size:14px;
}
.msg-search-wrap { position:relative; }
.msg-search-wrap > svg { position:absolute; left:13px; top:50%; margin-top:-7.5px; color:var(--t3); pointer-events:none; }
/* Pilulaire, donc sans bordure (handoff) : fond neutre, comme la zone de saisie. */
.msg-search {
  width:100%; height:40px; padding:0 14px 0 36px; border:0; border-radius:var(--r-pill,99px);
  background:var(--surface-neutral,#F7F7FC); color:var(--t1); font:inherit; font-size:13px;
}
.msg-picker { display:flex; flex-direction:column; gap:8px; }
.msg-pick-tools { display:flex; align-items:center; flex-wrap:wrap; gap:14px; min-height:22px; font-size:12px; color:var(--t3); }
.msg-pick-count { margin-right:auto; }
.msg-people { max-height:min(320px, 40vh); overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:2px; margin:0 -6px; padding:0 6px; }
.msg-people-empty { margin:0; padding:16px 10px; text-align:center; font-size:12.5px; color:var(--t3); }
.msg-person { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--rs,12px); cursor:pointer; transition:background-color .15s var(--ease); }
.msg-person:hover { background:var(--surface-soft,#FAFAFD); }
.msg-person.is-on { background:var(--brand-wash,#F0EFF8); }
.msg-person input { flex:none; width:16px; height:16px; margin:0; }
.msg-person-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.msg-person-name { display:flex; align-items:center; gap:6px; min-width:0; font-size:13.5px; font-weight:600; color:var(--t1); }
.msg-person-name > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-person-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--t3); }
.msg-members { list-style:none; margin:0; padding:0; max-height:min(360px, 45vh); overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.msg-member { display:flex; align-items:center; gap:11px; padding:8px 2px; }
.msg-note { display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 12px; border-radius:var(--rs,12px); background:var(--surface-soft,#FAFAFD); font-size:12.5px; line-height:1.45; color:var(--t2); }
.msg-note svg { flex:none; margin-top:2px; color:var(--t3); }
.msg-rename { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--rs,12px); background:var(--surface-soft,#FAFAFD); }
.msg-form-error { margin:0; font-size:12.5px; font-weight:600; color:var(--tone-danger,#C4392C); }
.msg-form-row, .msg-modal-foot { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.msg-modal-foot.is-split { justify-content:space-between; }
.msg-modal-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- Écrans moyens et téléphones ------------------------------------------ */
@media (min-width:768px) {
  .msg-thread-head .msg-back { display:none; }
}
@media (max-width:1279px) {
  .msg-list-pane { flex-basis:288px; width:288px; }
}
/* Sous 768 px, comme une messagerie de téléphone : la liste OU la conversation. */
@media (max-width:767px) {
  .msg-root { padding:0 16px 12px; min-height:360px; }
  .msg-panes { gap:0; }
  .msg-list-pane { flex:1 1 auto; width:auto; }
  .msg-root[data-pane="list"] .msg-thread-pane,
  .msg-root[data-pane="thread"] .msg-list-pane { display:none; }
  .msg-thread-head { padding:10px 12px; gap:8px; }
  .msg-log { padding:10px 12px 16px; }
  .msg-scope { padding:8px 12px; }
  .msg-composer { padding:10px 10px 6px 12px; }
  .msg-compose-foot { padding:0 12px 8px; }
  .msg-run-body { max-width:86%; }
  .msg-modal { padding:18px 16px 16px; }
}
@media (max-width:420px) {
  .msg-thread-head .msg-conv-ico { display:none; }
  .msg-head-btn { width:36px; padding:0; justify-content:center; }
  /* Le libellé reste lu par les lecteurs d'écran. */
  .msg-head-btn span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .msg-new span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .msg-new { width:34px; padding:0; justify-content:center; }
}
/* Écran tactile : pas de survol, donc le menu reste visible et l'infobulle se tait. */
@media (hover:none) {
  .msg-more { opacity:1; }
  .msg-tip::after { display:none; }
}
@media (pointer:coarse) {
  .msg-hint { display:none; }
}