/* Chat des raids - panneau lateral live. Sobre sombre, emotes facon Clash Royale.
   Refonte 2026-09-26 : les couleurs suivent le systeme de design (styles/raids/ds.css), donc aussi
   les themes des joueurs ; valeurs de repli = anciennes teintes. */
#rgchat-root { --cbg:var(--card,#101019); --cbg2:var(--card2,#16161f); --cln:var(--line2,#2c2c39); --cacc:var(--accent,#a78bff); --ctx:var(--txt,#f2f2f6); --cmut:var(--mut,#9c9cab); }

/* bouton flottant (ouvrir) */
.rgchat-fab { position:fixed; right:18px; bottom:18px; z-index:1400; width:54px; height:54px; border-radius:50%; border:1px solid var(--cln);
  background:var(--cbg2); color:var(--cacc); display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 30px -8px rgba(0,0,0,.6); transition:transform .12s, box-shadow .12s; }
.rgchat-fab:hover { transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(0,0,0,.7); }
.rgchat-fab svg { width:24px; height:24px; }
.rgchat-fab.hide { display:none; }
.rgchat-fab-b { position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#e5484d; color:#fff; font-size:.75rem; font-weight:800; display:none; align-items:center; justify-content:center; }
.rgchat-fab-b.on { display:flex; }

/* panneau = CARTE FLOTTANTE (bulle) en bas a droite, pas pleine hauteur -> n'empiete pas sur le site */
.rgchat { position:fixed; right:16px; bottom:16px; z-index:1401; width:min(355px,92vw); height:min(70vh,540px); display:flex; flex-direction:column;
  background:var(--cbg); border:1px solid var(--cln); border-radius:16px; box-shadow:0 24px 64px -18px rgba(0,0,0,.75); overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.97); transform-origin:bottom right; pointer-events:none;
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.rgchat.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.rgchat-h { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--cln); flex:0 0 auto; }
.rgchat-h b { color:var(--ctx); font-size:.92rem; }
.rgchat-dot { width:8px; height:8px; border-radius:50%; background:#4ade9a; box-shadow:0 0 8px #4ade9a; flex:0 0 auto; }
.rgchat-dot.off { background:#6b7280; box-shadow:none; }
.rgchat-min { margin-left:auto; background:none; border:none; color:var(--cmut); font-size:1rem; cursor:pointer; padding:4px 6px; border-radius:7px; line-height:1; }
.rgchat-min:hover { color:var(--ctx); background:var(--cbg2); }

.rgchat-body { flex:1 1 auto; overflow-y:auto; padding:10px 11px; display:flex; flex-direction:column; gap:9px; overscroll-behavior:contain; }
.rgchat-body::-webkit-scrollbar { width:8px; } .rgchat-body::-webkit-scrollbar-thumb { background:var(--cln); border-radius:8px; }
.rgchat-empty { color:var(--cmut); font-size:.82rem; text-align:center; margin:auto; padding:20px; }

.rgchat-m { display:flex; flex-direction:column; gap:3px; }
.rgchat-mh { display:flex; align-items:center; gap:6px; min-width:0; }
.rgchat-av { width:20px; height:20px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#2a2d36; }
.rgchat-nm { font-size:.78rem; font-weight:700; color:var(--txt2,#cdd2e0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.rgchat-pp { flex:0 0 auto; font-size:.75rem; font-weight:800; color:var(--on-accent,#0b0c10); background:var(--cacc); border-radius:5px; padding:1px 6px; font-variant-numeric:tabular-nums; }
.rgchat-tx { font-size:.86rem; color:var(--ctx); line-height:1.4; word-wrap:break-word; overflow-wrap:anywhere; padding-left:26px; }
.rgchat-m-em .rgchat-big { padding-left:26px; font-size:2.5rem; line-height:1.1; }
.rgchat-big.pop, .rgchat-m-em.pop .rgchat-big { animation:rgchat-pop .5s cubic-bezier(.2,1.4,.4,1); transform-origin:left center; }
@keyframes rgchat-pop { 0%{ transform:scale(.2); opacity:0; } 55%{ transform:scale(1.25); opacity:1; } 100%{ transform:scale(1); } }

/* sthe emote picker */
.rgchat-emotes { flex:0 0 auto; display:flex; gap:4px; flex-wrap:wrap; padding:8px 10px; border-top:1px solid var(--cln); background:var(--cbg2); max-height:96px; overflow-y:auto; }
.rgchat-emb { width:38px; height:38px; border-radius:9px; border:1px solid transparent; background:rgba(255,255,255,.04); background:color-mix(in srgb, var(--ctx) 6%, transparent); cursor:pointer; font-size:1.25rem; line-height:1; display:grid; place-items:center; transition:transform .1s, background .1s, border-color .1s; }
.rgchat-emb:hover { background:rgba(167,139,255,.14); border-color:rgba(167,139,255,.4); transform:translateY(-2px) scale(1.08); }
.rgchat-emb:active { transform:scale(.94); }

.rgchat-input { flex:0 0 auto; display:flex; gap:7px; padding:9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--cln); }
.rgchat-input input { min-height:40px; font-size:16px; flex:1 1 auto; min-width:0; background:var(--bg2,#0e0e14); border:1px solid var(--cln); border-radius:9px; padding:8px 11px; color:var(--ctx); font-size:.86rem; outline:none; }
.rgchat-input input:focus { border-color:color-mix(in srgb, var(--cacc) 50%, var(--cln)); }
.rgchat-input button { flex:0 0 auto; width:38px; border:none; border-radius:9px; background:var(--cacc); color:var(--on-accent,#0b0c10); cursor:pointer; display:grid; place-items:center; }
.rgchat-input button svg { width:17px; height:17px; }
.rgchat-input button:hover { filter:brightness(1.08); }
.rgchat-login { padding:14px; text-align:center; border-top:1px solid var(--cln); }
.rgchat-login a { color:var(--cacc); font-weight:700; text-decoration:none; font-size:.86rem; }

.rgchat-flash { position:absolute; left:50%; bottom:62px; transform:translateX(-50%) translateY(8px); background:var(--cbg2); color:var(--ctx); border:1px solid var(--cln); border-radius:9px; padding:7px 13px; font-size:.78rem; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; white-space:nowrap; }
.rgchat-flash.on { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:720px) {
  /* dvh : hauteur REELLE visible (barres du navigateur mobile deduites) ; vh en repli */
  .rgchat { width:calc(100vw - 20px); height:74vh; height:74dvh; right:10px; bottom:10px; }
  .rgchat-input input { font-size:16px; }   /* >= 16px : Safari iOS ne zoome plus la page au focus */
  .rgchat-fab { right:14px; bottom:14px; }
}
/* Visiteur : pas de fil ni d'émotes (le flux exige une session) : le panneau le dit, sans bande vide. */
.rgchat.is-anon .rgchat-emotes { display:none; }
/* Mouvement réduit demandé par le système : le panneau et la bulle apparaissent sans glisser, l'émote sans rebond. */
@media (prefers-reduced-motion: reduce) {
  .rgchat, .rgchat-fab, .rgchat-emb, .rgchat-flash { transition:none; }
  .rgchat { transform:none; }
  .rgchat-big.pop, .rgchat-m-em.pop .rgchat-big { animation:none; }
  .rgchat-fab:hover, .rgchat-emb:hover { transform:none; }
}
@media print { #rgchat-root { display:none; } }

/* Boutons et champ du chat dans la police du site (Archivo), pas celle du navigateur (Arial, Times sous Safari). */
#rgchat-root button, #rgchat-root input { font-family: inherit; }