/* =====================================================================================================================
   Fenêtre de chat intégrée + vocal dans le chat (09/10/2026, Maxime : « reprends les fenêtres de chat et vocal, refais en mieux et
   plus moderne, re-étudie tout et débugue »).
   UNE seule feuille pour la fenêtre (accueil, pages de jeu, Roblox, clan, privés…) : avant, 264 règles d'app.css, 63 de refonte.css
   et 15 de mobile.css se battaient dessus (cadres dans des cadres, bande à gauche, liste en bande ou en colonne selon la page).
   Chargée EN DERNIER (index.html). Les règles des pages (#csHub, #mpRacine, #svRacine, #acc) gardent les hauteurs ; ici on décide
   de tout le dessin et de la disposition, d'après la LARGEUR DE LA FENÊTRE (container « ce », posé par refonte.css § 20.1) :
     < 420 px  : liste des présents derrière la pastille « Connectés » (tiroir, téléphone) ;
     420–519   : colonne étroite des présents à droite, messages à la suite du pseudo ;
     520–719   : colonne + champ de recherche ; ≥ 720 : colonne large, messages alignés (pseudo | texte | heure).
   Pas de :has() (règle du 25/09), rien ne clignote (animations coupées si l'appareil demande moins de mouvement).
   ===================================================================================================================== */

/* ------------------------------------------------------------------------------------------- jetons ---------- */
.ce-compact,.vv-panneau{
  --cx-trait:var(--line,rgba(235,245,235,.09));
  --cx-survol:rgba(var(--neu-rgb,235,245,235),.05);
  --cx-moi:rgba(var(--id-rgb,198,245,0),.07);
  --cx-vert:#3ddc84;--cx-rouge:#ff6b6b;
  --cx-col:128px;
  --vx-touche:var(--key,rgba(235,245,235,.08));--vx-touche2:var(--key2,rgba(235,245,235,.14));
  --vx-vert:var(--id,#c6f500);--vx-encre:var(--id-ink,#0b0d00);--vx-rouge:#d3323f;
}
/* (posée sur la grille, pas sur .ce-compact : une requête de conteneur ne vise jamais son propre conteneur) */
@container ce (min-width:520px){ .ce-compact > .ce-corps,.vv-panneau > .vv-corps{--cx-col:168px} }
@container ce (min-width:720px){ .ce-compact > .ce-corps,.vv-panneau > .vv-corps{--cx-col:208px} }

/* ------------------------------------------------------------------------------------------- la fenêtre ------ */
html body .ce-compact{display:flex;flex-direction:column;min-height:0;padding:10px 12px 12px;gap:0}
html body .ce-compact > .ce-tete{flex:none;display:flex;align-items:center;gap:10px;min-height:30px;margin:0 0 8px;padding:0 2px}
.ce-compact > .ce-tete > b{font-size:14px;font-weight:700;font-family:'Space Grotesk',inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* état : un point + le mot, sans cadre */
.ce-compact .ce-etat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap}
.ce-compact .ce-etat::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(61,220,132,.15)}
.ce-compact .ce-etat.ok{color:var(--cx-vert)}
.ce-compact .ce-etat.ko{color:var(--dim)}
.ce-compact .ce-etat.ko::before{box-shadow:none;opacity:.6}
/* pastille « Connectés n » : un bouton seulement quand la liste est en tiroir (fenêtre < 300 px) */
html body .ce-compact .ce-gens-b{display:none;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;font:inherit;font-size:11.5px;
  color:var(--muted);background:var(--cx-survol);border:1px solid transparent;cursor:pointer}
html body .ce-compact .ce-gens-b b{color:var(--txt);font-weight:700}
html body .ce-compact .ce-gens-b:hover{color:var(--txt);border-color:var(--cx-trait)}
html body .ce-compact.gens-ouverts .ce-gens-b{color:var(--txt);border-color:var(--id,#c6f500)}

/* corps : messages | présents, séparés par des traits (plus de boîte dans la boîte) */
html body .ce-compact > .ce-corps{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--cx-col);gap:0 10px;
  position:relative;align-items:stretch;padding:4px 0;border-top:1px solid var(--cx-trait);border-bottom:1px solid var(--cx-trait)}
html body .ce-compact .ce-log,
html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact .ce-log,
html[data-theme] body .ce-compact .ce-log{height:auto !important;min-height:0 !important;max-height:none !important;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 2px 4px 0;background:transparent !important;background-image:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(var(--neu-rgb,235,245,235),.18) transparent}

/* --- messages --- */
html body .ce-compact .ce-log .cl-l{display:block !important;grid-template-columns:none !important;position:relative;padding:4px 44px 4px 8px;border-radius:9px;line-height:1.45;font-size:13.5px;word-break:break-word}
html body .ce-compact .ce-log .cl-l:hover{background:var(--cx-survol)}
html body .ce-compact .ce-log .cl-l.moi{background:var(--cx-moi)}
html body .ce-compact .ce-log .cl-l > .cr-nick{display:inline-flex;vertical-align:baseline;margin-right:7px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
html body .ce-compact .ce-log .cl-l > .cl-text{display:inline;white-space:normal !important;overflow:visible;overflow-wrap:anywhere}
html body .ce-compact .ce-log .cl-l > .cl-time{position:absolute;right:6px;top:5px;margin:0;font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;color:var(--dim);opacity:.8}
html body .ce-compact .ce-log .cl-l:hover > .cl-time{opacity:1}
/* fenêtre large : pseudo | texte | heure alignés sur trois colonnes, comme le chat en grand */
@container ce (min-width:720px){
  html body .ce-compact .ce-log{display:grid !important;grid-template-columns:max-content minmax(0,1fr) auto !important;column-gap:10px;align-content:start}
  html body .ce-compact .ce-log > *{grid-column:1 / -1}
  html body .ce-compact .ce-log .cl-l{display:grid !important;grid-template-columns:subgrid !important;grid-column:1 / -1;align-items:baseline;padding:3px 8px}
  html body .ce-compact .ce-log .cl-l > .cr-nick{margin:0;max-width:200px;justify-self:end}
  html body .ce-compact .ce-log .cl-l > .cl-time{position:static;justify-self:end}
}
html body .ce-compact .cl-jour{display:flex;align-items:center;gap:10px;margin:8px 4px 4px}
html body .ce-compact .cl-jour::before,html body .ce-compact .cl-jour::after{content:'';flex:1;height:1px;background:var(--cx-trait)}
html body .ce-compact .cl-jour span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding:2px 10px;border-radius:999px;background:var(--cx-survol)}
/* salon calme : au centre, sans cadre */
html body .ce-compact .ce-calme,html body .ce-compact .empty{background:none !important;border:0 !important;box-shadow:none !important}

/* --- présents (colonne) --- */
html body .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens,
html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens,
html[data-theme] body .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens{
  display:flex !important;flex-direction:column;position:static !important;inset:auto !important;z-index:auto;order:0;
  height:auto !important;min-height:0 !important;max-height:none !important;margin:0;padding:2px 0 2px 10px !important;
  background:transparent !important;background-image:none !important;border:0 !important;border-left:1px solid var(--cx-trait) !important;
  border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;overflow:hidden}
html body .ce-compact .ce-gens-h{display:flex;align-items:center;gap:8px;flex:none;margin:2px 0 6px}
html body .ce-compact .ce-gens-h b{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
html body .ce-compact .ce-gens-h b [data-ce-n]{color:var(--txt);margin-left:4px;letter-spacing:0}
html body .ce-compact .ce-gens-x{display:none;margin-left:auto;width:30px;height:30px;border-radius:50%;place-items:center;cursor:pointer;font:inherit;font-size:20px;line-height:1;
  color:var(--txt);background:var(--cx-survol);border:0}
html body .ce-compact .ce-gens .ce-filtre{display:none;flex:none;width:100%;box-sizing:border-box;margin:0 0 8px;padding:6px 10px;border-radius:9px;font:inherit;font-size:12px;
  color:var(--txt);background:var(--cx-survol);border:1px solid var(--cx-trait);font-size:11.5px}
html body .ce-compact .ce-gens .ce-filtre:focus{outline:none;border-color:rgba(var(--id-rgb,198,245,0),.6)}
@container ce (min-width:520px){ html body .ce-compact .ce-gens .ce-filtre{display:block} }
html body .ce-compact .ce-gens > #ceListe{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px;scrollbar-width:thin;scrollbar-color:rgba(var(--neu-rgb,235,245,235),.18) transparent}
html body .ce-compact .ce-gens .ce-g{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:5px;min-height:28px;padding:2px 6px !important;
  border:0 !important;border-radius:7px;background:none;font-size:12.5px !important;white-space:nowrap;overflow:hidden;min-width:0;cursor:default}
html body .ce-compact .ce-gens .ce-g:hover{background:var(--cx-survol)}
html body .ce-compact .ce-gens .ce-g > *{min-width:0}
html body .ce-compact .ce-gens .ce-g .cr-nick{overflow:hidden;text-overflow:ellipsis}
html body .ce-compact .ce-gens .ce-g .cr-tn{overflow:hidden;text-overflow:ellipsis}
html body .ce-compact .ce-gens .ce-g .cts{display:none}
@container ce (min-width:720px){ html body .ce-compact .ce-gens .ce-g .cts{display:inline-flex;margin-left:auto} }
html body .ce-compact .ce-gens .ce-g.dimc{color:var(--dim);font-style:italic;cursor:default}
html body .ce-compact .ce-gens .ce-g.dimc:hover{background:none}
html body .ce-compact .ce-gens .ce-plus{color:var(--id,#c6f500);font-style:normal;justify-content:flex-start;cursor:pointer}

/* --- saisie : champ arrondi + bouton rond d'envoi --- */
html body .ce-compact > .ce-form{flex:none;display:flex;align-items:center;gap:8px;margin:10px 0 0}
html body .ce-compact > .ce-form input,html[data-theme] body .ce-compact > .ce-form input{flex:1;min-width:0;min-height:38px;padding:8px 14px;border-radius:999px;font:inherit;font-size:13.5px;
  color:var(--txt);background:var(--cx-survol) !important;border:1px solid var(--cx-trait) !important;box-shadow:none !important}
html body .ce-compact > .ce-form input:focus{outline:none;border-color:rgba(var(--id-rgb,198,245,0),.7) !important;box-shadow:0 0 0 3px rgba(var(--id-rgb,198,245,0),.14) !important}
html body .ce-compact > .ce-form button,html[data-theme] body .ce-compact > .ce-form button{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;min-width:0;min-height:0;padding:0;
  border-radius:50%;border:0;cursor:pointer;color:var(--id-ink,#0b0d00);background:var(--id,#c6f500);box-shadow:0 6px 16px -8px rgba(var(--id-rgb,198,245,0),.9);transition:transform .12s,filter .12s}
html body .ce-compact > .ce-form button:hover{filter:brightness(1.06)}
html body .ce-compact > .ce-form button:active{transform:scale(.94)}
html body .ce-compact > .ce-form button svg{width:18px;height:18px;max-width:none}
html body .ce-compact > .ce-form button span{display:none}

/* --- fenêtre étroite (< 420 px, téléphone) : la liste derrière sa pastille, en tiroir sur les messages --- */
@container ce (max-width:419px){
  html body .ce-compact > .ce-corps{display:flex;flex-direction:column;overflow:hidden}
  html body .ce-compact > .ce-corps > .ce-log{flex:1 1 auto}
  html body .ce-compact .ce-gens-b{display:inline-flex}
  html body .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens,html[data-theme] body .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens,
  html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact:not(.gens-ouverts) .ce-corps > .ce-gens{display:none !important}
  html body .ce-compact.gens-ouverts .ce-corps > .ce-gens,html[data-theme] body .ce-compact.gens-ouverts .ce-corps > .ce-gens,
  html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact.gens-ouverts .ce-corps > .ce-gens{
    display:flex !important;flex-direction:column;position:absolute !important;inset:4px 0 !important;z-index:5;height:auto !important;max-height:none !important;
    padding:10px 12px !important;background:var(--panel,#18191b) !important;background-image:none !important;border:1px solid var(--cx-trait) !important;
    border-radius:14px !important;box-shadow:0 18px 40px rgba(0,0,0,.45) !important}
  html body .ce-compact.gens-ouverts .ce-gens-x{display:grid}
  html body .ce-compact.gens-ouverts .ce-gens .ce-filtre{display:block}
  html body .ce-compact .ce-log .cl-l{padding-right:8px}
  html body .ce-compact .ce-log .cl-l > .cl-time{display:none}
}
/* chats où la liste n'a pas sa place (bulle, privés du panneau Amis) : rien ne change pour eux */
html body :is(.bulle-c,.am-mp-c) .ce-compact > .ce-corps{display:block}
html body :is(.bulle-c,.am-mp-c) .ce-compact .ce-gens,html body :is(.bulle-c,.am-mp-c) .ce-compact .ce-gens-b{display:none !important}

/* pages de jeu sur PC : la pastille « Amis » (bas droite) recouvrait le bouton d'envoi */
@media (min-width:1100px){
  body:is(.pg-cshub,.pg-mpracine,.pg-srvnav) .ph-chat .ce-compact > .ce-form,
  body:is(.pg-cshub,.pg-mpracine,.pg-srvnav) .ph-chat .vv-panneau > .vv-barre{padding-right:118px}
}

/* ------------------------------------------------------------------------------------------- onglets « Vocal » dans la barre du chat */
.ph-chat-o.avec-vocal{display:flex !important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.ph-chat-o.avec-vocal::-webkit-scrollbar{display:none}
.ph-chat-o .vv-ong{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;padding-left:10px;padding-right:10px;white-space:nowrap}
.ph-chat-o .vv-ong .vx-ic{width:14px;height:14px;flex:none}
.ph-chat-o .vv-ong span{font-variant-numeric:tabular-nums}
.ph-chat-o .vv-ong .vx-n{font-style:normal;font-size:10.5px;font-weight:700;min-width:17px;height:17px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;
  background:var(--cx-vert,#3ddc84);color:#06140b}
.ph-chat-o .vv-ong.dedans:not(.on){color:var(--cx-vert,#3ddc84)}
.ph-chat-o .vv-ong.on .vx-n{background:#06140b;color:var(--cx-vert,#3ddc84)}

/* ------------------------------------------------------------------------------------------- le vocal, présenté comme le chat */
html body .vv-panneau{display:flex;flex-direction:column;min-height:0;height:100%;padding:10px 12px 12px;box-sizing:border-box}
html body .vv-panneau > .ce-tete{flex:none;display:flex;align-items:center;gap:10px;min-height:30px;margin:0 0 8px;padding:0 2px}
.vv-panneau > .ce-tete > b{font-size:14px;font-weight:700;font-family:'Space Grotesk',inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv-panneau .vv-n{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;font-size:11.5px;color:var(--muted);background:var(--cx-survol)}
.vv-panneau .vv-n b{color:var(--txt)}
html body .vv-panneau > .vv-corps{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--cx-col);gap:0 10px;align-items:stretch;padding:4px 0;
  border-top:1px solid var(--cx-trait);border-bottom:1px solid var(--cx-trait)}
html body .vv-panneau .vv-scene{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;
  align-content:start;background:transparent !important;border:0;border-radius:0;scrollbar-width:thin}
.vv-tuile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px 10px;border-radius:14px;
  background:var(--cx-survol);border:1px solid transparent;transition:border-color .15s,background .15s}
.vv-tuile:hover{background:rgba(var(--neu-rgb,235,245,235),.08)}
.vv-tuile .vv-av{position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--panel2,#23232b);
  box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.vv-tuile .vv-av :is(img,.av){width:100% !important;height:100% !important;object-fit:cover;border-radius:50%;display:grid;place-items:center;font-size:22px !important;font-weight:700;line-height:1}
.vv-tuile b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vv-tuile.moi b{color:var(--id,#c6f500)}
.vv-tuile.apercu{opacity:.75}
/* la personne parle : anneau vert qui respire (coupé si l'appareil demande moins de mouvement) */
.vv-tuile.parle{border-color:rgba(61,220,132,.45)}
.vv-tuile.parle .vv-av{box-shadow:0 0 0 3px var(--cx-vert,#3ddc84),0 0 20px rgba(61,220,132,.45);animation:vvParle 1.4s ease-in-out infinite}
@keyframes vvParle{0%,100%{box-shadow:0 0 0 3px var(--cx-vert,#3ddc84),0 0 14px rgba(61,220,132,.35)}50%{box-shadow:0 0 0 4px var(--cx-vert,#3ddc84),0 0 26px rgba(61,220,132,.6)}}
@media (prefers-reduced-motion:reduce){ .vv-tuile.parle .vv-av{animation:none} }
.vv-muet{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,80,80,.16);color:var(--cx-rouge,#ff6b6b)}
.vv-muet .vx-ic{width:13px;height:13px}
.vv-seul{grid-column:1 / -1;margin:0;padding:22px 8px;text-align:center;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.vv-seul .spin{width:16px;height:16px;flex:none}
/* colonne « dans le vocal » : même dessin que la colonne des présents du chat */
html body .vv-panneau .vv-gens{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 2px 10px;border-left:1px solid var(--cx-trait);scrollbar-width:thin}
.vv-gens-t{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:2px 0 6px}
.vv-gens-t b{color:var(--txt);margin-left:4px;letter-spacing:0}
.vv-panneau .vv-u{display:flex;align-items:center;gap:6px;min-height:28px;padding:2px 6px;border-radius:7px;font-size:12.5px}
.vv-panneau .vv-u:hover{background:var(--cx-survol)}
.vv-panneau .vv-u :is(img,.av){width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;object-fit:cover}
.vv-panneau .vv-u span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vv-panneau .vv-u .vx-ic{width:13px;height:13px;color:var(--cx-rouge,#ff6b6b);flex:none}
.vv-panneau .vv-u.parle span{color:var(--cx-vert,#3ddc84)}
.vv-panneau .vv-u.parle::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cx-vert,#3ddc84);flex:none;order:-1}
/* barre : micro · casque · réglages · quitter (ronds de voix.css, jetons posés plus haut) */
html body .vv-panneau > .vv-barre{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:10px 0 0;padding:0 4px;border:0}
.vv-panneau .vv-barre .vx-rond > .vx-ic{padding:11px}
.vv-panneau .vv-barre .vx-rond.coupe > .vx-ic{background:var(--cx-rouge,#ff6b6b);color:#fff}
.vv-panneau .vv-barre .vx-bouton.vx-vert{min-height:40px;padding:0 20px;border-radius:999px;font-weight:600}
@container ce (max-width:419px){
  html body .vv-panneau > .vv-corps{display:flex;flex-direction:column;overflow:hidden}
  html body .vv-panneau .vv-scene{flex:1 1 auto}
  html body .vv-panneau .vv-gens{display:none}
}
/* la page montre déjà l'appel dans un chat : le panneau flottant est en trop */
html.vv-salon-ici #voixAppel{display:none !important}

/* ------------------------------------------------------------------------------------------- hôtes sans hauteur ------ */
/* Un chat posé dans un bloc qui ne le dimensionne pas (page du clan, salon d'un événement…) : hauteur raisonnable. Les hôtes
   en flex (accueil, pages de jeu, bulle, privés du panneau Amis) imposent la leur (flex:1 1 0, la hauteur est ignorée). */
html body .ce-compact{height:min(60vh,560px);box-sizing:border-box}
/* page du clan : onglets « Chat | 🎧 Vocal » (mpChatOnglets, 09/10/2026) au-dessus du chat, comme sur les pages de jeu */
html body .clan-chat{display:flex;flex-direction:column;height:min(64vh,620px)}
html body .clan-chat > .ph-chat-o{flex:none}
html body .clan-chat > .ph-chat-c{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
html body .clan-chat > .ph-chat-c > *{flex:1 1 0;min-height:0;margin:0}

/* ------------------------------------------------------------------------------------------- page Chat (en grand) ------ */
/* la colonne des présents est en flex-column : avec « min-height:0 » (règle compacte d'app.css) ses 113 lignes s'écrasaient les
   unes sur les autres au lieu de défiler */
html body .chat-users .cu{flex:none}

/* 13/10/2026 (Maxime : « enlève ça dans le chat du jeu ») : pas de liste des connectés dans le chat d'une partie (#partie-*), même sur grand écran */
html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact.ce-sans-gens .ce-corps > .ce-gens,html body :is(#csHub,#mpRacine,#svRacine,#acc,#app) .ce-compact.ce-sans-gens .ce-gens-b,html body .ce-compact.ce-sans-gens .ce-corps > .ce-gens,html body .ce-compact.ce-sans-gens .ce-gens-b{display:none !important}
html body .ce-compact.ce-sans-gens .ce-corps{grid-template-columns:minmax(0,1fr) !important}