/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* La messagerie d'équipe 2.0 (2026-10-12, demande de Yoann) : le bouton « 💬 Messages » du haut, le panneau de droite,
   les cartes de notification, les réactions, 📌, « Vu », les @mentions et les groupes. Chargé seulement dans la page des
   agences (serveur_plateforme.PAGE_AGENCE). Le bloc du Pilotage garde son style d'avant (agence.css). Rien ne bouge quand
   l'écran préfère moins d'animations ; le panneau passe SOUS la bulle 💬 de l'aide (en bas à gauche), jamais dessus, et
   sur un téléphone il s'arrête au-dessus d'elle. */

/* ---------- Le bouton du haut ---------- */
.msg-haut { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 12px;
  border: 1px solid var(--bord); border-radius: 999px; background: var(--surface-2); color: var(--texte); font-weight: 600;
  font-size: 13px; white-space: nowrap; }
.msg-haut:hover { background: var(--surface-3); }
.msg-haut.actif { border-color: var(--accent); background: rgba(220,60,128,.14); }
.msg-haut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg-pastille { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #1f0010; font-size: 11px;
  font-weight: 800; line-height: 18px; text-align: center; }
.msg-pastille[hidden] { display: none; }
.msg-pastille.pop, .msg-puce.pop { animation: msg-pop .35s ease-out; }
@keyframes msg-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: none; } }

/* ---------- Le panneau de droite (sous la barre du haut, par-dessus l'onglet) ---------- */
.msgp { position: fixed; top: var(--msgp-haut, 58px); right: 0; bottom: 0; z-index: 45; width: min(420px, 100vw);
  display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-left: 1px solid var(--bord);
  box-shadow: -14px 0 36px rgba(0,0,0,.45); }
.msgp[hidden], .msgp [hidden] { display: none !important; }
.msgp-tete { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--bord);
  background: var(--surface-2); min-width: 0; flex: none; }
.msgp-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3);
  font-size: 16px; flex: none; }
.msgp-avatar .point { width: 11px; height: 11px; }
.msgp-nom { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msgp-nom b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgp-nom small { color: var(--tres-doux); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgp-nom small:empty { display: none; }
.msgp-icone { background: none; border: 0; color: var(--doux); width: 32px; height: 32px; border-radius: 8px; font-size: 15px;
  flex: none; display: inline-grid; place-items: center; padding: 0; }
.msgp-icone:hover, .msgp-icone:focus-visible { background: var(--surface-3); color: var(--texte); }
.msgp-action { border: 1px solid var(--bord); background: none; color: var(--doux); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.msgp-action:hover { color: var(--texte); background: var(--surface-3); }
.msgp-action.coupee { color: var(--texte); border-color: var(--accent); }

/* la liste des conversations */
.msgp-liste { flex: 1; overflow-y: auto; min-height: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.msgp .msg-ligne { padding: 9px 10px; gap: 10px; }
.msgp .msg-qui b { font-size: 14px; }
.msgp .msg-qui small { font-size: 12px; }
.msg-ligne .msg-icone { width: 20px; font-size: 16px; }
.messagerie .msg-ligne .msg-icone { width: 16px; font-size: 13px; }
.msg-ligne.a-lire .msg-qui b { color: #fff; }
.msg-ligne.a-lire .msg-qui small { color: var(--doux); }
.msg-ligne.pas-membre { opacity: .7; }
.msg-badge.gris { background: var(--surface-3); color: var(--doux); }
.msg-arobase { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--accent); color: #1f0010; font-size: 11.5px; font-weight: 800; line-height: 1; }
.msg-coupee { font-size: 12px; flex: none; opacity: .8; }
.msg-personne { margin: 8px; }
.msgp-nouveau { display: flex; justify-content: flex-end; padding: 0 2px 6px; }
.msgp-activer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid rgba(220,60,128,.45); border-radius: 12px; background: rgba(220,60,128,.08); font-size: 13px; }
.msgp-pied { margin-top: auto; padding: 10px 6px 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  border-top: 1px solid var(--bord); color: var(--tres-doux); font-size: 12px; }

/* une conversation */
.msgp-fil { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msgp .msg-messages { padding: 12px; gap: 8px; }
.msgp .msg { max-width: 86%; }
.msgp .msg-meta { font-size: 11px; }
.msgp .msg-texte { font-size: 13.5px; padding: 7px 11px; }
.msgp .msg-form { flex-direction: row; align-items: flex-end; gap: 8px; padding: 10px; flex: none; }
.msgp .msg-form textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 140px; font-size: 13.5px; }
.msgp .msg-form .bouton { align-self: auto; }
.msgp .msg-lecture { padding: 10px 12px; font-size: 12.5px; flex: none; }
.msg-rangee { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.msg.moi .msg-rangee { flex-direction: row-reverse; }
.msg-rangee .msg-texte { min-width: 0; }
.msg.me-mentionne:not(.moi) .msg-texte { border-left: 3px solid var(--accent); }

/* réactions */
.msg-reagir { opacity: 0; border: 0; background: none; font-size: 14px; padding: 2px 4px; border-radius: 6px; flex: none; }
.msg:hover .msg-reagir, .msg-reagir:focus-visible, .msg-reagir[aria-expanded="true"] { opacity: .9; }
.msg-reagir:hover { background: var(--surface-3); opacity: 1; }
@media (hover: none) { .msg-reagir { opacity: .6; } }
.msg-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 4px; padding: 3px; border: 1px solid var(--bord);
  border-radius: 999px; background: var(--surface-2); box-shadow: 0 6px 16px rgba(0,0,0,.35); max-width: 100%; }
.msg-choix button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font-size: 17px; padding: 0; }
.msg-choix button:hover, .msg-choix button:focus-visible { background: var(--surface-3); }
.msg-choix .msg-choix-pin { width: auto; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.msg-choix.avec-qui { border-radius: 14px; }
.msg-choix-qui { flex-basis: 100%; margin: 0; padding: 2px 8px 4px; color: var(--doux); font-size: 12px; overflow-wrap: anywhere; }
.msg-puces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.msg.moi .msg-puces { justify-content: flex-end; }
.msg-puces:empty { display: none; }
.msg-puce { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid var(--bord); border-radius: 999px;
  background: var(--surface-2); color: var(--texte); font-size: 12.5px; line-height: 20px; }
.msg-puce b { color: var(--doux); font-size: 11.5px; }
.msg-puce.moi { border-color: var(--accent); background: rgba(220,60,128,.16); }
.msg-puce.moi b { color: var(--texte); }
.msg-puce:not(:disabled):hover { border-color: var(--accent); }
.msg-puce:disabled { cursor: default; }

/* « Vu » */
.msg-vu { align-self: flex-end; border: 0; background: none; color: var(--tres-doux); font-size: 11px; padding: 1px 4px; }
.msg-vu.lu { color: var(--accent); font-weight: 600; }
.msg-vu-qui { align-self: flex-end; color: var(--doux); font-size: 11px; padding: 0 4px; text-align: right; overflow-wrap: anywhere; }

/* 📌 l'épingle, en haut de la conversation */
.msgp-epingle { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--bord);
  background: rgba(220,60,128,.08); flex: none; min-width: 0; }
.msgp-epingle-texte { flex: 1; min-width: 0; padding: 5px 0; border: 0; background: none; color: var(--texte); font-size: 12.5px;
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgp-epingle-texte b { color: var(--accent); }
.msg.eclair .msg-texte { animation: msg-eclair 1.4s ease-out; }
@keyframes msg-eclair { 0%, 35% { box-shadow: 0 0 0 3px rgba(220,60,128,.75); } 100% { box-shadow: 0 0 0 0 rgba(220,60,128,0); } }

/* @mentions */
.msg-mention { padding: 0 2px; border-radius: 4px; background: rgba(220,60,128,.18); color: var(--texte); font-weight: 600; }
.msg-mention.moi { background: var(--accent); color: #1f0010; }
.msgp-suggestions { display: flex; flex-direction: column; gap: 2px; margin: 0 10px; padding: 4px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); box-shadow: 0 -8px 20px rgba(0,0,0,.35); flex: none; }
.msgp-suggestion { display: flex; align-items: baseline; gap: 6px; padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--texte); font-size: 13px; text-align: left; }
.msgp-suggestion b { color: var(--accent); }
.msgp-suggestion small { color: var(--tres-doux); }
.msgp-suggestion.choisie, .msgp-suggestion:hover { background: var(--surface-3); }

/* ➕ Nouveau groupe / ⚙️ Gérer */
.msgp-groupe { flex: 1; overflow-y: auto; min-height: 0; padding: 14px; }
.msgp-form { display: flex; flex-direction: column; gap: 10px; }
.msgp-form .etiquette-champ { font-weight: 600; }
.msgp-champ-nom { display: flex; align-items: center; gap: 8px; }
.msgp-compte { flex: none; color: var(--tres-doux); font-size: 11.5px; }
.msgp-compte.trop { color: var(--erreur); font-weight: 700; }
.msgp-form fieldset { margin: 0; padding: 8px 10px 10px; min-width: 0; border: 1px solid var(--bord); border-radius: 12px; }
.msgp-form legend { padding: 0 4px; color: var(--doux); font-size: 12.5px; font-weight: 600; }
.msgp-emojis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.msgp-emojis label { position: relative; display: grid; place-items: center; cursor: pointer; }
.msgp-emojis input { position: absolute; opacity: 0; pointer-events: none; }
.msgp-emojis span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; font-size: 20px; }
.msgp-emojis label:hover span { background: var(--surface-3); }
.msgp-emojis input:checked + span { border-color: var(--accent); background: rgba(220,60,128,.16); }
.msgp-emojis input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.msgp-membres { display: flex; flex-direction: column; gap: 4px; }
.msgp-membres .aide { margin: 0 0 4px; }
.msgp-membre { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2);
  font-size: 13px; cursor: pointer; min-width: 0; }
.msgp-membre span { min-width: 0; overflow-wrap: anywhere; }
.msgp-membre input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.msgp-membre small { color: var(--tres-doux); }
.msgp-membre.gris { opacity: .65; cursor: default; }
.msgp-erreur { margin: 0; color: var(--erreur); font-size: 12.5px; }
.msgp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msgp-danger { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--bord); }

/* ---------- Les cartes de notification (dans la pile des messages, en bas à droite) ---------- */
.msg-carte { border-left-color: var(--accent); padding-right: 36px; display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.msg-carte.mention { box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(220,60,128,.55); }
.msg-carte-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--doux); font-size: 14px; }
.msg-carte-x:hover { background: var(--surface-2); color: var(--texte); }
.msg-carte-tete { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.msg-carte-tete b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-carte-conv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }
.msg-carte-icone.arobase { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--accent); color: #1f0010; font-size: 12px; font-weight: 800; }
.msg-carte-mention { color: var(--accent); font-size: 12px; font-weight: 700; }
.msg-carte-texte { font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg-carte-actions { display: flex; gap: 6px; margin-top: 2px; }
.msg-surplus { padding: 8px 36px 8px 14px; }
/* sur un téléphone, panneau ouvert : la carte entre dans le panneau, sous sa tête (agence-messagerie-alertes.js) */
.msgp-cartes { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 0; }
.msgp-cartes:empty { display: none; }
.msgp-cartes .msg-carte { max-width: none; }

/* panneau ouvert : les messages et les cartes se posent à sa gauche (ordinateur) ; sur un téléphone, les messages sous
   sa tête, et les cartes dans le panneau */
@media (min-width: 761px) {
  body.msgp-ouvert .toasts { right: calc(min(420px, 100vw) + 18px); max-width: min(420px, calc(100vw - min(420px, 100vw) - 36px)); }
}

/* ---------- Téléphone : toute la largeur, et le panneau s'arrête au-dessus de la bulle de l'aide ---------- */
@media (max-width: 760px) {
  /* la bulle 💬 de l'aide (52 px, à 16 px du bas) reste seule en dessous : jamais collée au champ du message */
  .msgp { left: 0; width: auto; border-left: 0; bottom: 84px; border-bottom: 1px solid var(--bord); }
  /* sous le panneau, un fond uni : rien de l'onglet ne dépasse ni ne se touche à côté de la bulle */
  body.msgp-ouvert::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 84px; z-index: 45;
    background: var(--surface); }
  .msgp .msg-form, .msgp .msg-lecture { padding-left: 10px; }
  .msgp-liste, .msgp-groupe { padding-bottom: 8px; }
  .msgp .msg { max-width: 92%; }
  body.msgp-ouvert .toasts { top: calc(var(--msgp-haut, 58px) + 56px); bottom: auto; right: 12px; left: 12px; max-width: none; }
}
@media (max-width: 420px) {
  .msg-haut { padding: 5px 10px; }
  .msgp-action { padding: 4px 8px; }
  .msgp-emojis span { width: 36px; height: 36px; }
}

/* ---------- Moins d'animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .msgp:not([hidden]) { animation: msgp-entre .2s ease-out; }
}
@keyframes msgp-entre { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .msg-pastille.pop, .msg-puce.pop { animation: none; }
  .msg.eclair .msg-texte { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; }
}