/* ---------- MESSAGERIE DU FOYER ---------- */
.msg-top-strip{flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--surface); border-bottom:1px solid var(--border);}
.msg-avatars{display:flex; align-items:center;}
.msg-strip-avatar{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; font-family:'IBM Plex Mono',monospace; border:2px solid var(--surface); margin-left:-8px;}
.msg-strip-avatar:first-child{margin-left:0;}
.msg-support-bubble{flex-shrink:0; display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--bg); color:var(--ink-soft); border-radius:999px; padding:7px 13px 7px 10px; font-size:11.5px; font-weight:600; font-family:'Inter',sans-serif;}
.msg-support-bubble svg{width:14px; height:14px;}
.msg-support-bubble:hover{border-color:var(--accent); color:var(--accent);}
.msg-support-bubble.active{background:var(--accent-fill); color:#fff; border-color:var(--accent);}
/* min-height:0 : sans ça un enfant flex refuse de rétrécir sous la taille de son
   contenu (min-height:auto par défaut). La liste déborde alors au lieu de
   défiler, et pousse l'en-tête et la barre de saisie hors de l'écran. */
.msg-list{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 14px 6px; display:flex; flex-direction:column; gap:12px;}
.msg-row{display:flex; align-items:flex-end; gap:8px; max-width:85%;}
.msg-row.mine{align-self:flex-end; flex-direction:row-reverse;}
.msg-avatar{width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',monospace;}
.msg-bubble-wrap{display:flex; flex-direction:column; min-width:0;}
.msg-row.mine .msg-bubble-wrap{align-items:flex-end;}
.msg-author{font-size:10.5px; color:var(--ink-soft); margin:0 2px 3px;}
.msg-bubble{background:var(--surface); border:1px solid var(--border); border-radius:14px 14px 14px 3px; padding:9px 12px; font-size:13.5px; line-height:1.4; color:var(--ink); word-break:break-word; white-space:pre-wrap;}
.msg-row.mine .msg-bubble{background:var(--accent-fill); color:#fff; border-color:var(--accent); border-radius:14px 14px 3px 14px;}
.msg-time{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft);}
.msg-edited{font-style:italic;}
.msg-meta-row{display:flex; align-items:center; gap:6px; margin:3px 2px 0;}
.msg-row.mine .msg-meta-row{flex-direction:row-reverse;}
.msg-actions{display:flex; align-items:center; gap:2px;}
.msg-action-btn{width:18px; height:18px; padding:0; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; border-radius:5px;}
.msg-action-btn:hover{background:var(--bg); color:var(--ink);}
.msg-action-btn svg{width:10px; height:10px;}
.msg-typing-row{flex-shrink:0; display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:11.5px; color:var(--ink-soft); font-style:italic;}
.msg-typing-dots{display:inline-flex; align-items:center; gap:3px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 10px;}
.msg-typing-dots span{width:5px; height:5px; border-radius:50%; background:var(--ink-soft); animation:msgTypingBounce 1.2s infinite ease-in-out;}
.msg-typing-dots span:nth-child(2){animation-delay:.15s;}
.msg-typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes msgTypingBounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-3px); opacity:1;}}
.msg-input-bar{flex-shrink:0; display:flex; align-items:flex-end; gap:8px; padding:10px 14px; background:var(--surface); border-top:1px solid var(--border);}
.msg-input-bar textarea{flex:1; resize:none; max-height:100px; border:1px solid var(--border); background:var(--bg); border-radius:14px; padding:9px 13px; font-size:13.5px; color:var(--ink); font-family:'Inter',sans-serif; line-height:1.4;}
.msg-input-bar textarea:focus{outline:none; border-color:var(--ink-soft);}
.msg-send-btn{width:36px; height:36px; border-radius:50%; border:none; background:var(--accent-fill); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.msg-send-btn svg{width:16px; height:16px;}

/* ---------- ONGLETS PAR ESPACE ----------
   Meme langage que la barre du bureau d'entreprise et du back office : une
   bande noire sous l'entete, l'onglet choisi en surbrillance claire. Les
   boutons se partagent la largeur et coupent au besoin, plutot que de passer
   a la ligne — l'ecran de lecture y perdrait trop de hauteur. */
/* Ils défilent au lieu de se serrer : à partir de quatre espaces, « flex:1 »
   rognait les noms jusqu'à les rendre illisibles. Mieux vaut en voir trois en
   entier et pousser les autres du doigt. */
.msg-space-tabs{
  flex-shrink:0; display:none; gap:4px; padding:8px 6px; background:var(--action);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.msg-space-tabs::-webkit-scrollbar{display:none;}
.msg-space-tab{flex:0 0 auto; max-width:60vw; position:relative; display:flex; align-items:center; justify-content:center;
  gap:6px; border:none; background:none; color:rgba(255,255,255,.6); border-radius:10px;
  padding:9px 13px; font-size:11.5px; font-weight:600; font-family:'Inter',sans-serif;
  transition:background .15s, color .15s;}
.msg-space-tab-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msg-space-tab:hover{background:rgba(255,255,255,.08); color:#fff;}
.msg-space-tab.active{background:rgba(255,255,255,.16); color:#fff;}
/* Le compteur de non-lus reprend .admin-tab-badge (css/admin.css) : c'est deja
   le signal « il y a du travail ici » partout ailleurs dans l'app. Mais ici le
   bouton est un long libelle centre, pas une icone : en position absolue le
   compteur retombait par-dessus le texte. Il reprend donc sa place dans le flux
   et suit le nom, que celui-ci soit coupe ou non. */
.msg-space-tab .admin-tab-badge{position:static; top:auto; right:auto; left:auto; flex-shrink:0;}