/* Elevora CRM — css/messagerie.css  [V31] 12/10/2026 (document 2 de Célian, §29 « Messagerie »)
   Les messages (bulles, jours, pièces jointes, saisie) partagés par l'espace client (client.html) et l'équipe (index.html : la page Messages
   et l'onglet Messages de la fiche client), puis la page Messages de l'équipe (.mg-*). Jetons de couleur seulement (mode jour et nuit) :
   texte --text / --text2, bulle du client --accent-fill avec du blanc (le couple prévu pour les aplats), aucun trait de couleur sur le côté
   d'un bloc, aucune taille de texte sous --fs-min (css/commun.css). Mouvement réduit respecté. */

/* ══ Les messages, communs aux deux espaces ══ */
.msg-journal{list-style:none;margin:0 0 14px;padding:4px 2px 4px 0;display:flex;flex-direction:column;gap:8px;max-height:min(58vh,560px);min-height:140px;overflow-y:auto;overscroll-behavior:contain}
.msg-jour{align-self:center;margin:8px 0 2px}
.msg-jour span{display:inline-block;font-size:var(--fs-min);color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:999px;padding:2px 12px}
.msg-ligne{display:flex;flex-direction:column;max-width:min(78%,560px)}
.msg-ligne.msg-moi{align-self:flex-end;align-items:flex-end}
.msg-ligne.msg-autre{align-self:flex-start;align-items:flex-start}
.msg-bulle{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}
.msg-moi .msg-bulle{background:var(--accent-fill);color:#fff;border-bottom-right-radius:4px}
.msg-autre .msg-bulle{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px}
.msg-auteur{margin:0 0 2px;font-size:var(--fs-min);font-weight:700;opacity:.9}
.msg-texte{margin:0}
.msg-meta{margin:3px 4px 0;font-size:var(--fs-min);color:var(--text2)}
.msg-lu{font-weight:600}
.msg-pieces{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.msg-piece{display:flex;gap:10px;align-items:center;justify-content:space-between;width:100%;text-align:left;font:inherit;font-size:13px;border-radius:8px;padding:7px 10px;cursor:pointer;min-height:36px;background:var(--bg2);color:var(--text);border:1px solid var(--border2)}
.msg-moi .msg-piece{background:rgba(0,0,0,.24);color:#fff;border-color:rgba(255,255,255,.55)}
.msg-piece:hover{border-color:var(--accent)}
.msg-piece-nom{overflow-wrap:anywhere;font-weight:600;text-decoration:underline}
.msg-piece-taille{font-size:var(--fs-min);white-space:nowrap;opacity:.9}
.msg-saisie{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:12px}
.msg-saisie textarea{min-height:76px;resize:vertical;line-height:1.5}
.msg-barre{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.msg-aide{font-size:var(--fs-min);color:var(--text2);margin:0}
.msg-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.msg-chips:empty{display:none}
.msg-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border2);border-radius:999px;padding:3px 4px 3px 12px;font-size:13px;max-width:100%}
.msg-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.msg-chip button{background:none;border:0;color:var(--text2);cursor:pointer;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.msg-chip button:hover{background:var(--bg4);color:var(--text)}
@keyframes msgEntree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.msg-ligne{animation:msgEntree .2s ease}}
@media (max-width:860px){.msg-ligne{max-width:90%}}
@media (pointer:coarse){.msg-piece,.msg-fil-btn{min-height:44px}.msg-chip button{width:44px;height:44px}}

/* ══ L'espace client : la liste des conversations (une par projet) ══ */
.msg-page{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.msg-page.msg-seul{grid-template-columns:minmax(0,1fr)}
.msg-page .card{margin-bottom:0}
.msg-fils{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.msg-fil-btn{width:100%;text-align:left;display:flex;align-items:center;gap:8px;justify-content:space-between;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-height:44px}
.msg-fil-btn:hover{border-color:var(--border2)}
.msg-fil-btn[aria-current="true"]{background:var(--glow);border-color:var(--accent);color:var(--accent);font-weight:600}
.msg-fil-nb{background:var(--red-fill);color:#fff;font-size:var(--fs-min);font-weight:700;border-radius:10px;padding:1px 7px;min-width:20px;text-align:center}
.msg-conv-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
@media (max-width:860px){.msg-page{grid-template-columns:minmax(0,1fr)}.msg-fils{flex-direction:row;overflow-x:auto;padding-bottom:4px}.msg-fils li{flex:0 0 auto}.msg-fil-btn{width:auto;white-space:nowrap}}

/* ══ La page Messages de l'équipe ══ */
.mg-page{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start}
.mg-carte{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1rem 1.15rem;min-width:0}
.mg-barre-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mg-filtre{display:inline-flex;align-items:center;gap:8px;min-height:var(--cmd-h);padding:0 14px;border-radius:var(--r);border:1px solid var(--border2);background:transparent;color:var(--text2);font:inherit;font-size:13px;cursor:pointer}
.mg-filtre:hover{border-color:var(--accent);color:var(--text)}
.mg-filtre[aria-pressed="true"]{background:var(--glow);border-color:var(--accent);color:var(--accent);font-weight:600}
.mg-nb{background:var(--bg4);color:var(--text);font-size:var(--fs-min);font-weight:700;border-radius:10px;padding:0 7px;min-width:20px;text-align:center;line-height:1.6}
.mg-nb--alerte{background:var(--amber-bg);color:var(--amber)}
.mg-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(72vh,720px);overflow-y:auto;overscroll-behavior:contain}
.mg-fil{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;color:var(--text);font:inherit;font-size:13px;cursor:pointer;min-height:44px}
.mg-fil:hover{border-color:var(--border2)}
.mg-fil[aria-current="true"]{background:var(--glow);border-color:var(--accent)}
.mg-fil-l1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mg-fil-client{font-weight:700;overflow-wrap:anywhere}
.mg-fil-projet{color:var(--text2);font-size:var(--fs-min)}
.mg-fil-meta{color:var(--text2);font-size:var(--fs-min);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.mg-attente{display:inline-flex;align-items:center;background:var(--amber-bg);color:var(--amber);border-radius:999px;padding:0 9px;font-weight:600;font-size:var(--fs-min);line-height:1.6;white-space:nowrap}
.mg-nonlus{background:var(--red-fill);color:#fff;font-size:var(--fs-min);font-weight:700;border-radius:10px;padding:0 7px;min-width:20px;text-align:center;line-height:1.6}
.mg-conv-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.mg-conv-titre{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.mg-conv-sous{margin:2px 0 0;font-size:var(--fs-min);color:var(--text2)}
.mg-retour{display:none}
.mg-vide{padding:2.2rem 1rem;text-align:center;color:var(--text2);font-size:13px}
.mg-vide strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.mg-fiche-fils{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
@media (max-width:900px){
  .mg-page{grid-template-columns:minmax(0,1fr)}
  .mg-page[data-vue="conversation"] .mg-carte--liste{display:none}
  .mg-page[data-vue="liste"] .mg-carte--conv{display:none}
  .mg-retour{display:inline-flex}
}