:root {
  --bg: #0b0b0e; /* Gardez cette ligne pour les autres �l�ments */
  --panel: #d2e3093b;
  --panel-2: #ffd34d05;
  --border: #42f73f;
  --text: #14d90f;
  --text-color-swatch: #00ff00;
  --muted: #9aa0ad;
  --accent: #ffd34d;
  --accent-2: #ff7ac3;
}

/* WIDTH_VARS_MARKER: Ajustez ici les largeurs indépendantes des colonnes */
:root {
  --left-col: 375px;   /* largeur colonne SALONS (gauche) */
  --right-col: 450px;  /* largeur colonne CONNECTÉS (droite) */
}

/* === SCALE_UI: facteur global pour la page du chat ===
   - 1   = taille normale
   - 0.8 = similaire à zoom navigateur 80%
   Tu peux ajuster UNIQUEMENT cette variable.
*/
:root {
  --ui-scale: 0.9;
}

/* On applique le zoom sur tout le document (support principalement Chrome/Edge/Opera) */
html {
  zoom: var(--ui-scale);
}



* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* Remplacez background: var(--bg); par : */
  background: url('img/fond-noir.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #4bef09;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  background: linear-gradient(180deg, #ced11594, #0b0b0e);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar h1{
  margin:0; font-size: 18px; font-weight: 700; letter-spacing: .3px;
}
.topbar .spacer{ flex:1; }
.topbar a.btn{
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
}
.topbar a.btn:hover{ border-color: var(--accent); color: var(--accent); }

/* Bouton Administration (admin uniquement) en rouge */
.topbar a.btn.admin-only{
  border-color: #ff3b3b;
  color: #ff3b3b;
}
.topbar a.btn.admin-only:hover{
  border-color: #ff7676;
  color: #ff7676;
}


/* Bouton Invisible (admins) en vert fluo */
.topbar a.btn.invis-btn{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.topbar a.btn.invis-btn:hover{
  border-color: #9affc3 !important;
  color: #9affc3 !important;
}
.topbar a.btn.invis-btn.active{
  box-shadow: 0 0 10px rgba(0,255,120,.35);
}
/* Affichage du pseudo courant (gauche, encadrement vert fluo) */
.topbar .nick-pill{
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}


.layout{
  display: grid;
  /* WIDTH_TWEAK_MARKER: Colonnes indépendantes via variables --left-col / --right-col */
  grid-template-columns: var(--left-col) 1fr var(--right-col);
  gap: 12px;
  padding: 12px;
  /* On compense le zoom CSS pour que le chat occupe toujours toute la hauteur visible
     52px = hauteur approx. du header (topbar) */
  height: calc((100vh - 52px) / var(--ui-scale));
}


.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow overflow children */
  overflow: hidden;
}

.panel .header{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: .3px;
  display:flex;
  justify-content:center;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background: var(--panel-2);
  font-size:12px; letter-spacing:.3px;
}
.chip.accent{ border-color: var(--accent); color: var(--accent); }

.panel .body{
  padding: 10px;
  overflow: auto;
  flex: 1;
}

.list{ list-style: none; margin:0; padding:0; }
.list li{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  cursor:pointer;
}
.list li:hover{ background: var(--panel-2); }
.list li.active{ background: #1e1e2b; border:1px solid var(--accent); }
.list .pill{ margin-left:auto; font-size: 11px; color: var(--muted); }

.section-sep{
  margin:8px 0 10px;
  display:flex; justify-content:center;
}
.sep-box{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:10px;
  border:1px solid var(--accent);
  color:#000; background: var(--accent);
  font-weight:800; letter-spacing:.3px; font-size:12px;
}

.temp-form{
  padding: 10px;
  border-top: 1px dashed var(--border);
  background: #0f0f18;
}
.temp-form .row{ display:flex; gap:8px; margin-bottom:8px; }
.temp-form .row.inputs{ align-items:center; }
.temp-form input[type="text"]{
  flex: 1 1 50px; /* rétréci pour tenir dans 280px */
  min-width: 0;
  background: #0b0b12; color: var(--text);
  border:1px solid var(--border);
  padding:8px 10px; border-radius:8px;
}
.temp-form input[type="number"]{
  flex: 0 0 40px; /* plus étroit que v1 */
  background: #0b0b12; color: var(--text);
  border:1px solid var(--border);
  padding:8px 10px; border-radius:8px;
}

/* --- Couleurs & tailles : création de salon temporaire (placeholders) --- */
.temp-form #tempName,
.temp-form #tempMin{
  font-size: 20px;
  font-weight: 800;
}

.temp-form #tempName::placeholder,
.temp-form #tempMin::placeholder{
  color: #ffd200;
  opacity: 1;
}

/* Centrer uniquement le champ Minutes */
.temp-form #tempMin{
  text-align: center;
  font-size: 12px;
}

/* Même style dans la fenêtre d’options (modal) */
#tmpRoomName{
  font-size: 20px;
  font-weight: 800;
}
#tmpRoomName::placeholder{
  color: #ffd200;
  opacity: 1;
}

.temp-form .row.buttons{ justify-content:center; }
.temp-form button{
  background: var(--accent); color:#000;
  border:0; border-radius:8px; padding:8px 12px;
  font-weight:700; cursor:pointer; min-width: 220px;
}

.chat{ display:flex; flex-direction: column; min-height:0; }
.chat .messages{
  flex:1;
  overflow:auto;
  padding:12px;
  /* Un peu de marge en bas pour éviter que les derniers messages soient cachés
     par la barre Options (panneau rétractable) lorsqu'elle est ouverte */
  padding-bottom: 18px;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255, 211, 77, 0.66), transparent 60%);
}

/* Quand l'onglet Options est ouvert, on réserve de l'espace en bas du chat
   pour que les images (et gros messages) restent entièrement visibles. */
.panel.chat.opts-open .messages{
  padding-bottom: 95px; /* ~60px panneau + marge */
}

/* Bulles de messages */
.msg{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:6px 10px;
  margin:6px 0;
  border-radius:12px;
  border:1px solid var(--accent);
  background:rgba(0,0,0,.35);
}

.msg.sys{
  font-style:italic;
  color:#ffd34d;
}

.msg-main{
  flex:1 1 auto;
  min-width:0;
}

.msg .nick{
  color:var(--accent);
  font-weight:700;
  margin-right:6px;
  cursor:pointer;
}

/* Message "adressé" (Parler 1x / continu) — reste dans le salon */
.msg.directed{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.msg.directed .msg-to{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  opacity: .95;
}
.msg.directed.directed-me{
  background: rgba(108,255,119,.10);
  border-color: rgba(108,255,119,.32);
}

.msg-text{
  white-space:pre-wrap;
  word-wrap:break-word;
}

/* Images dans le chat : on force un rendu "propre" (pseudo sur la ligne du haut,
   image en dessous + petite marge pour éviter d'être collé au panneau Options) */
.msg.msg-media .msg-text img{
  display:block;
  margin-top:6px;
  margin-bottom:10px;
}

/* Images envoyées dans le chat : toujours en dessous du pseudo + mini marge */
.msg-text img{
  display:block;
  margin-top:6px;
  margin-bottom:10px; /* "ligne vide" légère sous l'image */
}

/* Un peu plus d'air après une vignette pour éviter l'effet collé */
.msg.msg-media{ margin-bottom: 12px; }

/* Liens dans le chat (si activés par salon) */
.msg-text a{
  color: inherit;
  text-decoration: underline;
}
.msg-text a:hover{ text-decoration: underline; }

.msg-time{
  flex:0 0 auto;
  font-size:11px;
  opacity:.7;
  margin-left:8px;
  align-self:flex-end;
}

/* Croix de suppression (Admin/SuperAdmin) */
.msg-del-btn{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-right:6px;
  margin-top:2px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,77,77,.55);
  background:rgba(0,0,0,.18);
  color:#ff4d4d;
  font-weight:900;
  line-height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 0 8px rgba(255,77,77,.12);
}
.msg-del-btn:hover{
  background:rgba(255,77,77,.14);
  border-color:rgba(255,77,77,.8);
}

/* Overlay de reconnexion */
.reconnect-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.reconnect-overlay.visible{
  display:flex;
}

.reconnect-box{
  background:rgba(10,10,10,0.95);
  border:1px solid var(--accent);
  border-radius:12px;
  padding:16px 24px;
  max-width:320px;
  text-align:center;
  box-shadow:0 0 18px rgba(0,0,0,0.5);
}

.reconnect-title{
  font-weight:700;
  margin-bottom:8px;
}

.reconnect-bar{
  display:flex;
  gap:4px;
  justify-content:center;
  margin:10px 0 6px;
}

.reconnect-bar .step{
  width:16px;
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,0.15);
  animation: reconnectPulse 1s infinite ease-in-out;
}

.reconnect-bar .step:nth-child(2){ animation-delay:0.15s; }
.reconnect-bar .step:nth-child(3){ animation-delay:0.30s; }
.reconnect-bar .step:nth-child(4){ animation-delay:0.45s; }

@keyframes reconnectPulse{
  0%,100%{
    background:rgba(255,255,255,0.15);
    transform:scaleX(1);
  }
  50%{
    background:var(--accent);
    transform:scaleX(1.4);
  }
}

.inputbar{
  position: relative;
  border-top:1px solid var(--border);
  background: var(--panel-2);
  padding: 4px;
  display:flex; gap:8px; align-items:center;
}
.inputbar input[type="text"]{
  flex:1; background:#0b0b12; color:var(--text);
  border:1px solid var(--border); padding:10px 12px; border-radius:10px;
}
.inputbar .emoji-btn{
  width:42px; height:42px; border-radius:10px;
  border:1px solid var(--border);
  background:#0b0b12; color:var(--text);
  font-size:20px; line-height:1; cursor:pointer;
}
.inputbar button.send{
  background: var(--accent); color:#000;
  border:0; border-radius:10px; padding:10px 50px;
  font-weight:700; cursor:pointer;
}

/* emoji panel */
.emoji-panel{
  position:absolute; bottom:56px; right:0px;
  width:380px; max-height:350px; overflow:auto;
  background: #0e0e16; border:1px solid var(--border);
  border-radius:12px; padding:8px;
  display:none; grid-template-columns: repeat(8, 1fr); gap:6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.emoji-panel.open{ display:grid; }
.emoji-panel button{
  border:0; background:transparent; cursor:pointer;
  font-size:20px; padding:6px; border-radius:8px;
}
.emoji-panel button:hover{ background:#1a1a27; }

/* Fond perso local: état actif */
.tb.user-bg-active{ outline: 2px solid rgba(108,255,119,.85); box-shadow: 0 0 18px rgba(108,255,119,.35); }

.user{ display:flex; align-items:center; gap:8px; padding:8px 6px; border-radius:8px; }
.user:hover{ background: var(--panel-2); }
.user .dot{ width:8px; height:8px; border-radius:50%; background:#6cff77; }
.user .role{ margin-left:auto; font-size:11px; color: var(--muted); }

@media (max-width: 1100px){
  /* WIDTH_TWEAK_MARKER: Ajustez les largeurs des colonnes gauche/droite (px) ci-dessous */
.layout{ /* WIDTH_TWEAK_MARKER: Colonnes indépendantes via variables --left-col / --right-col */
grid-template-columns: var(--left-col) 1fr var(--right-col); }
}
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; height: auto; }
  .panel, .chat{ min-height: 50vh; }
}


/* === UI polish requested === */

/* Make header chips span almost full width with 5px side margins */
.card .header .chip {
  display: block;
  margin: 0 5px;
  text-align: center;
  width: auto; /* full width minus margins */
  border-radius: 12px;
}

/* Ensure accent chips are clearly yellow on dark bg */
.chip.accent {
  background: var(--accent);
  color: #000;
}

/* Temp room form: make inputs sit inside one visual row */
.temp-form .row.inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 5px 0 5px; /* align with chip margins */
}

.temp-form .row.inputs input[type="text"]#roomName {
  flex: 1 1 auto;
  min-width: 0;
}

.temp-form .row.inputs input[type="number"]#ttlMinutes {
  width: 90px; /* compact number box */
}

/* Center the create button */
.temp-form .actions {
  display: flex;
  justify-content: center;
}

.temp-form .actions button {
  min-width: 220px;
}

/* Make left and right panes visually same height by letting cards fill */
.columns {
  align-items: stretch;
}
.leftpane, .rightpane {
  display: flex;
  flex-direction: column;
}
.leftpane .card, .rightpane .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.leftpane .card .body, .rightpane .card .body {
  flex: 1 1 auto;
  overflow: auto;
}

/* Make the message input bar sit inside the center column container */
.centerpane .composer {
  padding: 8px;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.centerpane .composer .row {
  margin: 0 5px 5px 5px;
}


/* Media Player (ajout local, non intrusif) */
.media-player-card { margin-top: 10px; background: #111; border: 1px solid var(--border, #333); border-radius: 12px; padding: 10px; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; }
.media-player-title { font-weight: 600; color: #ffd34d; margin-bottom: 6px; }
.media-player-btn { width: 100%; display: block; margin-bottom: 8px; border-radius: 12px; }
.media-player-select { width: 100%; display: block; margin-bottom: 8px; border-radius: 10px; background: #fff; color: #111; padding: 8px; box-sizing: border-box; }
.media-player-audio { width: 100%; max-width: 100%; display: block; }


/* Media Player styling update */
.media-player-title { text-align:center; color:#ffd34d; font-weight:700; margin: 4px 0 8px; }
.media-player-btn { width:100%; display:block; border-radius:12px; }

.media-player-select {
  width:100%; display:block; margin:8px 0;
  background:#111; color:#ffd34d;
  border:2px solid #ffd34d; border-radius:12px;
  padding:8px; box-sizing:border-box;
}
.media-player-select option { color:#ffd34d; background:#111; }
.media-player-audio { width:100%; max-width:100%; display:block; }


/* MediaPlayer: bouton de rétrécissement (mini) */
.media-player-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin: 4px 0 8px; }
.media-player-head .media-player-title{ margin:0 !important; flex:1; }

.mp-toggle{
  width:16px; height:16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.45);
  border-radius:3px;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow: 0 0 8px rgba(66,247,63,0.35);
  position: relative;
}
.mp-toggle::before{
  content:"";
  position:absolute;
  left:3px; right:3px;
  top:50%; height:2px;
  background: var(--border);
  transform: translateY(-50%);
}
/* plus visible uniquement quand le player est réduit */
.mp-toggle::after{
  content:"";
  position:absolute;
  top:3px; bottom:3px;
  left:50%; width:2px;
  background: var(--border);
  transform: translateX(-50%);
  opacity:0;
}
.media-player-wrap.mp-collapsed .mp-toggle::after{ opacity:1; }

/* Réduit: on garde le titre + la liste des radios, on masque le reste */
.media-player-wrap.mp-collapsed .media-player-btn,
.media-player-wrap.mp-collapsed .media-player-audio{
  display:none !important;
}
.media-player-wrap.mp-collapsed .media-player-card{
  padding-bottom: 8px;
}
.media-player-wrap.mp-collapsed .media-player-select{
  margin-bottom: 0;
}



:root {
  --accent-yellow: #ffd34d;
}
/* Salons */
aside#paneRooms .body ul#roomsListPub > li,
aside#paneRooms .body ul#roomsListTmp > li,
#roomsListPub > li,
#roomsListTmp > li {
  background: rgba(255,211,77,0.22) !important; /* jaune plus visible */
  border: 1px solid #ffd34d  !important;  /* fin bord noir */
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

/* Connectés */
#usersList li.user,
#paneUsers .body #usersList li.user {
  background: rgba(255,211,77,0.22) !important;
  border: 1px solid #ffd34d !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

/* Hover: bord jaune + fond un peu plus sombre pour le focus */
#roomsListPub > li:hover,
#roomsListTmp > li:hover,
#usersList li.user:hover {
  border-color: var(--accent-yellow) !important;
  background: rgba(0,0,0,0.35) !important;
}

/* Assure que le texte reste lisible dans les bulles */
#roomsListPub > li > span:first-child,
#roomsListTmp > li > span:first-child,
#usersList li.user .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === FRAME STYLES (visible par défaut) === */
:root { --accent-yellow: #ffd34d; }

/* Salons */
#roomsListPub > li,
#roomsListTmp > li {
  background: rgba(255,211,77,0.26) !important; /* jaune légèrement plus visible */
  border: 1px solid rgba(0,0,0,0.9) !important;  /* fin bord noir */
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

/* Connectés */
#usersList li.user {
  background: rgba(255,211,77,0.26) !important;
  border: 1px solid rgba(0,0,0,0.9) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}

/* Hover: bord jaune + fond un peu plus sombre pour le focus */
#roomsListPub > li:hover,
#roomsListTmp > li:hover,
#usersList li.user:hover {
  border-color: var(--accent-yellow) !important;
  background: rgba(0,0,0,0.35) !important;
}


/* === Patch: Création salon en colonne (Nom au-dessus, Minutes ensuite, Bouton en bas) === */
.temp-form { padding: 10px; }
.temp-form .row.inputs { display: flex; flex-direction: column; gap: 8px; }
#tempName { width: 100%; }
#tempMin  { width: 160px; }
.temp-form .row.buttons { margin-top: 8px; }


/* === Patch: MediaPlayer - champ "Choisir sa radio" en jaune intérieur === */
.media-player-card .media-player-select,
.media-player-card .media-player-input,
.media-player-card select,
.media-player-card input[type="text"] {
  background: rgba(255, 211, 77, 0.18) !important;
  border: 1px solid #35f73b !important;
  color: #ffd34d !important;
}




/* === Rôles & genres: couleurs === */
.user .name, .msg .nick { color: #fff; } /* défaut: invités / non spécifié */

.user.gender-male .name:not(.force), .msg .nick.gender-male { color: #4da3ff; }   /* homme: bleu */
.user.gender-female .name:not(.force), .msg .nick.gender-female { color: #ff66b3; } /* femme: rose */
.user.gender-other .name:not(.force), .msg .nick.gender-other { color: #ff9800; }  /* autres: orange */

/* Rôles (prioritaires sur genre) */
.user.role-vip .name, .msg .nick.role-vip { color: #ffd34d; }           /* VIP: jaune */
.user.role-moderator .name, .user.role-mod .name, .user.role-mod-temp .name, .msg .nick.role-moderator, .msg .nick.role-mod, .msg .nick.role-mod-temp { color: #2ecc71; } /* Modérateur: vert */
.user.role-admin .name, .msg .nick.role-admin { color: #ff4d4d; }        /* Admin: rouge */
.user.role-superadmin .name, .msg .nick.role-superadmin { color: #b04dff; }  /* SuperAdmin: violet */

/* Badge de rôle */
.role-badge {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: currentColor;
}

/* Menu modération minimal */
.mod-menu { margin-left: auto; position: relative; }
.mod-menu .menu-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.mod-menu .menu-panel {
  position: absolute; right: 0; top: 100%; background: #111; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 20;
}
.mod-menu .menu-panel button { background: #ff4d4d; border: 0; padding: 6px 8px; border-radius: 6px; text-align: left; cursor: pointer; white-space: nowrap; }
.mod-menu .menu-panel button:hover { background: #2a2a2a; }
.mod-menu .menu-panel hr { border: 0; height: 1px; background: rgba(255,255,255,0.15); margin: 4px 0; }


/* Avatars minimal (plugin safe) */
.messages .msg .msg-wrap{ display:flex; align-items:flex-start; gap:8px; }
.messages .msg .avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.15); }
#usersList li.user{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#usersList li.user .left{ display:flex; align-items:center; gap:6px; }
#usersList li.user .dev-ico{ font-size:12px; opacity:.9; }
#usersList li.user .avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.2); }


/* Users list: flag + age */
#usersList li.user .flag-icon{ width:16px; height:11px; object-fit:contain; border-radius:2px; border:1px solid rgba(0,0,0,.25); margin-left:6px; }
#usersList li.user .age-badge{ display:inline-block; margin-left:6px; font-size:12px; color:#b9c0cf; }

/* badge under pseudo */
.user .ttl-badge{font-size:11px;opacity:.85;margin-top:2px;line-height:1.1}


/* === Options retractable (onglet et panneau) === */
.panel.chat{ position: relative; }

.options-container{
  position: absolute;
  left: 0; right: 0;
  bottom: 56px; /* placé juste au-dessus de la barre de saisie */
  height: 0; /* fermé par défaut */
  pointer-events: none; /* évite de bloquer le scroll/messages */
}

.options-panel{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 0;
  overflow: hidden;
  background: #111111c9;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 18px rgba(0,0,0,.25);
  transition: height .25s ease;
  pointer-events: auto;
}

.options-container.open .options-panel{
  height: 60px; /* hauteur ajustée */
}

.options-tab{
  position: absolute;
  right: 12px;
  bottom: -10px; /* surplombe légèrement la barre d'entrée */
  transform: translateY(-100%); /* garde l'onglet au-dessus du bouton Envoyer */
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  pointer-events: auto; /* cliquable même si le container est non interactif */
}

.options-tab:hover{
  filter: brightness(1.1);
}

/* Assure que le panneau ne recouvre pas l'emoji-panel lorsqu'il est ouvert */
.options-container.open + form .emoji-panel{
  z-index: 10;
}


/* --- Patch: garder l'onglet visible quand le panneau est ouvert --- */
.options-panel{ z-index: 10; }
.options-tab{ z-index: 20; }

/* Quand ouvert, place l'onglet juste au-dessus du panneau (toujours cliquable) */
.options-container.open .options-tab{
  bottom: 60px;   /* égale à la hauteur du panneau */
  transform: none;
}


/* === Toolbar statique dans le panneau Options === */
.options-container.open .options-panel{ height: 60px; }
.options-container.open .options-tab{ bottom: 60px; }

.options-panel .toolbar{
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.options-panel .toolbar .group{
  display: flex;
  align-items: center;
}

.options-panel .toolbar .group-a .tb + .tb{ margin-left: 2px; } /* 2px entre les boutons du 1er groupe */
.options-panel .toolbar .group-b{ margin-left: 5px; }           /* 5px après le 1er groupe */
.options-panel .toolbar .group-b .tb + .tb{ margin-left: 2px; } /* 2px entre les boutons du 2e groupe */

.options-panel .tb{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: default;           /* non cliquable pour l'instant */
  pointer-events: none;      /* désactiver toute interaction */
}

/* Bouton de sélection de la couleur du texte (même style que les autres boutons) */
#textColorPicker{
  margin-left: 4px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* Harmoniser le rendu interne du carré de couleur dans le picker */
#textColorPicker::-webkit-color-swatch{
  border-radius: 6px;
  border: none;
}
#textColorPicker::-moz-color-swatch{
  border-radius: 6px;
  border: none;
}



/* Séparation nette entre les deux barres (après le U souligné) */
.options-panel .toolbar .group-a .tb:last-child{ margin-right: 5px !important; }
.options-panel .toolbar .group-b{ margin-left: 5px !important; }


/* === User actions right === */
#usersList li.user{ display:flex; align-items:center; }
#usersList li.user .user-push{ margin-left:auto; }
#usersList li.user .user-actions{ display:flex; align-items:center; gap:4px; margin-left:8px; }
#usersList li.user .user-actions img{ width:8px; height:8px; object-fit:contain; display:block; }


/* === Right-side user actions (flag + two mini icons) === */
#usersList li.user .right{ margin-left:auto; display:flex; align-items:center; gap:5px; }
#usersList li.user .mini-icon{ width:18px; height:18px; display:inline-block; object-fit:contain; }

#usersList li.user .right .gm-icon, #usersList li.user .right .gm-screen-icon{ margin:0 !important; padding:0 !important; border:none; background:transparent; display:inline-flex; align-items:center; }

/* === Fix: keep moderation menu always visible even with long pseudos === */
#usersList li.user{ justify-content:flex-start !important; }
#usersList li.user .left{ flex:1 1 auto; min-width:0; }
#usersList li.user .left .name{ flex:1 1 auto; min-width:0; }
#usersList li.user .right{ flex:0 0 auto; margin-left:auto; }
#usersList li.user .mod-menu{ flex:0 0 auto; margin-left:6px; }

/* === Option: if nickname is too long (ellipsis), tighten right-side icons === */
#usersList li.user.tight-icons .right{ gap:2px; }
#usersList li.user.tight-icons .mini-icon{ width:16px; height:16px; }
#usersList li.user.tight-icons .avatar{ width:16px; height:16px; }
#usersList li.user.tight-icons .flag-icon{ width:14px; height:10px; margin-left:2px; }
#usersList li.user.tight-icons .age-badge{ margin-left:2px; font-size:11px; }
#usersList li.user.tight-icons .mod-menu{ margin-left:3px; }

/* === Media Player wrap (in-place) === */
.media-player-wrap{ position: relative; width: 100%; }
.media-player-wrap .media-player-card{ margin: 0 50px; width: auto; max-width: none; box-sizing: border-box; }
.media-player-wrap .media-badge{ position: absolute; top:0; bottom:0; width:50px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.media-player-wrap .media-badge.left{ left:0; }
.media-player-wrap .media-badge.right{ right:0; }
.media-player-wrap .media-badge span{
  writing-mode: vertical-rl; text-orientation: mixed;
  background: linear-gradient(180deg, #ffd34d 0%, #0b0b0e 100%);
  color:#0b0b0e; border:2px solid #ffd34d; border-radius:12px;
  font-weight:800; letter-spacing:1px; padding:8px 6px; display:inline-block; min-height:40px;
  box-shadow: 0 0 0 2px #0b0b0e inset, 0 0 8px rgba(0,0,0,.6);

  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:6px;
  line-height:1;
  font-size:20px;
  text-transform:uppercase;
}
.media-player-audio{ width:100% !important; max-width:100% !important; display:block; }

/* v11: make side badges match MediaPlayer height exactly */
.media-player-wrap .media-badge{ top:0; bottom:0; }
.media-player-wrap .media-badge span{
  height: 100%;
  box-sizing: border-box;
  display: block;
  padding: 8px 6px; /* keep style, but included in the 100% height */

  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:6px;
  line-height:1;
  font-size:20px;
  text-transform:uppercase;
}

/* v12: badges match full MediaPlayer block height exactly */
.media-player-wrap{ position: relative; width: 100%; display: flow-root; } /* prevent margin-collapsing */
.media-player-wrap .media-player-card{ margin: 0 50px !important; }       /* no vertical margins inside wrap */
.media-player-wrap .media-badge{ top:0; bottom:0; }
.media-player-wrap .media-badge span{
  height: 100%; display: block; box-sizing: border-box;

  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:6px;
  line-height:1;
  font-size:20px;
  text-transform:uppercase;
}

/* v14: center & enlarge badge text, single column */
.media-player-wrap .media-badge span{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  line-height: 1;
  text-align: center;
  font-size: 24px;        /* bigger default */
  letter-spacing: 2px;    /* a bit more presence */
  text-transform: uppercase;
}

/* === Surbrillance salon actif & pseudo connecté === */

/* Salon actif : bordure jaune sur les 4 côtés + lueur douce */
aside#paneRooms .body ul#roomsListPub > li.active,
aside#paneRooms .body ul#roomsListTmp > li.active {
  border: 1px solid var(--accent-yellow) !important;
  box-shadow: 0 0 6px rgba(255,211,77,0.35);
}

/* Mon pseudo dans la liste : un peu plus marqué pour bien le voir */
#usersList li.user.me,
#usersList li.me,
#usersList li.user.self {
  border: 2px solid #ffff00 !important;
  box-shadow: 0 0 9px rgba(255,255,0,0.9);
  background: rgba(255,255,0,0.10) !important;
}


/* Bouton de partage d'cran (nouveau) bien visible et cliquable */
#btnShareScreen{
  cursor: pointer !important;
  pointer-events: auto !important;
  background: #ffd34d;
  color: #000;
  font-weight: 700;
}


/* Nettoyage : masquer les icnes fixes de micro gnral et d'cran
   On laisse apparatre seulement les icnes dynamiques (gm-screen-icon-lite) */
#usersList li.user .gm-icon{
  display:none !important;
}
#usersList li.user .gm-screen-icon{
  display:none !important;
}


/* Masquer aussi l'icne webcam statique dans la liste */
#usersList li.user img.cam{
  display:none !important;
}


/* Fentre de visionnage du partage d'cran : dplaable et redimensionnable */
.screen-viewer{
  max-height: 80vh;
}


/* Poigne de redimensionnement bien visible dans le coin bas droit */
.screen-viewer{
  position: fixed;
}

.screen-viewer::after{
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, #000 55%, #000 65%, rgba(0,0,0,0) 65%, rgba(0,0,0,0) 100%),
    linear-gradient(135deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 70%, #000 70%, #000 80%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%),
    linear-gradient(135deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 85%, #000 85%, #000 95%, rgba(0,0,0,0) 95%, rgba(0,0,0,0) 100%);
  opacity: 0.8;
}


/* Bouton de test micro (sous le titre Membres) */
.btn.btn-test-mic{
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #00ff00;
  background: #22242e;
  color: #ffd34d;
  cursor: pointer;
}
.btn.btn-test-mic i{
  margin-right: 4px;
}

/* Icne micro test  ct du pseudo (mic-flag-test) */
#usersList li.user .mic-flag-test{
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffd34d;
  margin-left: 4px;
}


/* Masquer les anciens boutons micro et son de la barre d'outils */
.options-panel .toolbar .tb[aria-label="Micro gnral"],
.options-panel .toolbar .tb[aria-label="Micro général"],
.options-panel .toolbar #enable-audio-play{
  display: none !important;
}


/* Icne camra  ct du pseudo (test webcam) */
#usersList li.user .cam-flag-test{
  display: none;
  margin-left: 4px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
}
#usersList li.user .cam-flag-test i{
  font-size: 15px;
}


/* === Fentres prives : header et boutons === */
.pm-window .pm-header{
  background: rgba(255,211,77,0.47) !important; /* #ffd34d78 */
  border-bottom: 1px solid #2ecc71;
}

.pm-window .pm-title{
  color: #ffd34d;
  font-weight: 600;
  font-size: 15px;
}

.pm-window .pm-controls{
  display: flex;
  gap: 4px;
  align-items: center;
}

.pm-window .pm-btn{
  background: rgba(0,0,0,0.15);
  border: 1px solid #2ecc71;
  border-radius: 6px;
  color: #ffd34d;
  padding: 1px 6px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.pm-window .pm-btn:hover{
  background: rgba(46,204,113,0.18);
}

.pm-window .pm-btn:focus{
  outline: none;
}

/* Boutons outils (emoji / image / fichier) en bas de la fentre prive */
.pm-window .pm-footer .pm-tools button{
  background: rgba(0,0,0,0.1);
  border: 1px solid #2ecc71;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}

.pm-window .pm-footer .pm-tools button:hover{
  background: rgba(46,204,113,0.18);
}


/* === Image lightbox pour les images du chat === */
.img-lightbox-overlay{
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
}
.img-lightbox-overlay.active{
  display: flex;
}
.img-lightbox-inner{
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
}
.img-lightbox-inner img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
}
.img-lightbox-close{
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4);
}
.img-lightbox-close:hover{
  background: rgba(0,0,0,0.9);
}


/* ---- Fenêtre modale pour salons verrouillés / membres ---- */
.room-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.room-modal-overlay.active{
  display: flex;
}
.room-modal{
  width: 520px;
  height: 260px;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
}
.room-modal-header{
  height: 24px;
  min-height: 24px;
  max-height: 30px;
  background: var(--accent);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  display:flex;
  align-items:center;
}
.room-modal-body{
  flex:1;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color: var(--text);
}
.room-modal-body p{
  margin:0 0 8px 0;
  font-size: 15px;
}
.room-modal-inputwrap{
  margin-top: 6px;
}
.room-modal-input{
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.4);
  color: var(--text);
  outline:none;
}
.room-modal-input:focus{
  box-shadow: 0 0 0 1px var(--accent);
}
.room-modal-actions{
  margin-top: 10px;
  text-align: right;
}
.room-modal-actions .btn{
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 6px;
  cursor:pointer;
}
.room-modal-actions .btn-primary{
  background: var(--accent);
  border: 1px solid var(--border);
  color:#000;
}
.room-modal-actions .btn-secondary{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  margin-right: 6px;
}

/* --- Info modals: plus gros texte + hauteur auto (évite le grand vide) --- */
.room-modal-overlay[data-mode="info"] .room-modal{
  height: auto;
  min-height: 160px;
}
.room-modal-overlay[data-mode="info"] .room-modal-header{
  height: auto;
  min-height: 32px;
  max-height: none;
  font-size: 16px;
  padding: 6px 10px;
}
.room-modal-overlay[data-mode="info"] .room-modal-body{
  justify-content: flex-start;
  padding: 14px 16px 12px 16px;
}
.room-modal-overlay[data-mode="info"] .room-modal-body p{
  font-size: 19px;
  line-height: 1.35;
  margin: 0;
}
.room-modal-overlay[data-mode="info"] .room-modal-actions{
  margin-top: 14px;
}


/* Bloc supplémentaire dans la fenêtre d'info membres (logo + lien inscription) */
.room-modal-extra{
  margin-top: 8px;
  text-align: center;
}
.room-modal-logo{
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto 6px auto;
}
.room-modal-register-link{
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
}
.room-modal-register-link:hover{
  text-decoration: none;
}


.room-modal-register-inline{
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
}
.room-modal-register-inline:hover{
  text-decoration: none;
}


/* Salon actif : bordure bien visible (jaune/vert fluo) */
aside#paneRooms .body ul#roomsListPub > li.active,
aside#paneRooms .body ul#roomsListTmp > li.active,
#roomsListPub > li.active,
#roomsListTmp > li.active {
  border: 2px solid #00ff66 !important;
  box-shadow: 0 0 8px rgba(0,255,102,0.9);
}

/* Mon pseudo dans la liste des membres */
#usersList li.user.me,
#usersList li.me,
#usersList li.user.self {
  border: 2px solid #00ff66 !important;
  box-shadow: 0 0 8px rgba(0,255,102,0.9);
}

/* Barre de réactions sous les messages */
.msg-reactions-bar {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.msg-react-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
}

.msg-react-btn:hover {
  transform: scale(1.2);
}

.msg-reactions-counts {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.9;
}



/* Barre de réactions compacte : un bouton + popup (superposition, sans décaler le chat) */
.msg-reactions-wrap {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  opacity: 0.9;
  position: relative; /* ancre la popup au message */
}

.msg-react-trigger {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  padding: 0 2px;
}

.msg-react-trigger:hover {
  transform: scale(1.2);
}

.msg-reactions-popup {
  position: left;
  bottom: 100%;         /* au-dessus du bouton */
  left: 0;              /* aligné sur la gauche, vers l'intérieur du bloc */
  margin-bottom: 3px;
  padding: 4px;
  background: #ffd34d;
  border-radius: 15px;
  border: 1px solid #00ff66;
  box-shadow: 0 0 66px rgba(0,255,102,0.7);
  display: none;
  z-index: 50;
  width: 96px;          /* 3 colonnes de réactions */
  max-width: 96px;
}

.msg-reactions-popup.open {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.msg-react-choice {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

.msg-react-choice:hover {
  transform: scale(1.2);
}

.msg-reactions-counts {
  font-size: 11px;
  opacity: 0.9;
  margin-left: 4px;
}
}



/* ===== Users list status dot + contextual menu ===== */
.user .dot{ cursor:pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.user .dot.status-online{ background:#6cff77; }
.user .dot.status-busy{ background:#ff9800; }
.user .dot.status-away{ background:#9aa0a6; }

/* menu */
.user-dot-menu{
  position: fixed;
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(16,19,27,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  z-index: 99999;
  color: #fff;
  backdrop-filter: blur(10px);
}
.user-dot-menu .menu-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: 0;
  color: #e9ecf5;
  padding: 10px 10px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.user-dot-menu .menu-item:hover{ background: rgba(255,255,255,.08); }
.user-dot-menu .menu-item:disabled{
  opacity: .45;
  cursor: not-allowed;
}
.user-dot-menu .menu-item.active{
  background: rgba(108,255,119,.14);
  box-shadow: inset 0 0 0 1px rgba(108,255,119,.22);
}
.user-dot-menu .menu-item.has-sub::after{
  content: "▸";
  opacity: .8;
}
.user-dot-menu .menu-item.has-sub.open::after{
  content: "▾";
}
.user-dot-menu .menu-sep{
  height: 1px;
  margin: 6px 8px;
  background: rgba(255,255,255,.10);
}

/* profile panel (submenu) */
.user-dot-menu .user-profile-panel{
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 550px;
  height: 400px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(16,19,27,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.user-dot-menu.flip-sub .user-profile-panel{
  left: auto;
  right: calc(100% + 10px);
}
.user-dot-menu .profile-card{
  height: 100%;
  display: flex;
  gap: 12px;
}
.user-dot-menu .profile-left{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-dot-menu .profile-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 2px;
}
.user-dot-menu .profile-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.user-dot-menu .profile-row .k{ opacity: .75; }
.user-dot-menu .profile-row .v{ font-weight: 700; display:flex; align-items:center; gap:6px; }
.user-dot-menu .profile-hint{
  margin-top: auto;
  font-size: 11px;
  opacity: .65;
}
.user-dot-menu .profile-right{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-dot-menu .profile-avatar{
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}


/* friends panel (submenu) */
.user-dot-menu .user-friends-panel{
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 330px;
  height: 320px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(16,19,27,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  display: flex;
}
.user-dot-menu.flip-sub .user-friends-panel{
  left: auto;
  right: calc(100% + 10px);
}
.user-dot-menu .friends-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-dot-menu .friends-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 800;
  letter-spacing: .2px;
}
.user-dot-menu .friends-list{
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
  border-radius: 12px;
}
.user-dot-menu .friend-item{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #e9ecf5;
  cursor: pointer;
  margin-bottom: 6px;
}
.user-dot-menu .friend-item:hover{ background: rgba(255,255,255,.10); }
.user-dot-menu .friend-item .left{ display:flex; align-items:center; gap:8px; min-width:0; }
.user-dot-menu .friend-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.user-dot-menu .friend-dot.status-online{ background:#6cff77; }
.user-dot-menu .friend-dot.status-busy{ background:#ff9800; }
.user-dot-menu .friend-dot.status-away{ background:#9aa0a6; }
.user-dot-menu .friend-name{ font-weight: 700; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.user-dot-menu .friend-room{ font-size: 11px; opacity: .75; white-space: nowrap; }

.user-dot-menu .friends-actions{
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  display: none;
}
.user-dot-menu .friends-actions.visible{ display:block; }
.user-dot-menu .friends-actions .title{
  font-weight: 800;
  margin-bottom: 8px;
}

.user-dot-menu .friends-actions .meta{
  font-size: 12px;
  opacity: .85;
  margin-bottom: 10px;
}
.user-dot-menu .friends-empty{
  padding: 10px;
  opacity: .75;
  font-size: 13px;
}
.user-dot-menu .friends-foot{
  font-size: 11px;
  opacity: .65;
}
.user-dot-menu .friends-actions button.danger{
  border-color: rgba(255,80,80,.55);
  color: #ff9090;
}
.user-dot-menu .friends-actions .row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.user-dot-menu .friends-actions button{
  flex: 1 1 calc(50% - 8px);
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}



/* inbox panel (offline PM) */
.user-dot-menu .user-inbox-panel{
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 360px;
  height: 320px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(16,19,27,.98);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  display: flex;
}
.user-dot-menu.flip-sub .user-inbox-panel{
  left: auto;
  right: calc(100% + 10px);
}
.user-dot-menu .inbox-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-dot-menu .inbox-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 900;
  letter-spacing: .2px;
}
.user-dot-menu .inbox-title{ font-weight: 950; }
.user-dot-menu .inbox-mini{
  border: 1px solid rgba(0,255,140,.35);
  background: rgba(0,0,0,.35);
  color: #d9ffe8;
  padding: 6px 9px;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
  font-size: 12px;
}
.user-dot-menu .inbox-mini:hover{ filter: brightness(1.08); }

.user-dot-menu .inbox-list{
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
  border-radius: 12px;
}
.user-dot-menu .inbox-empty{
  padding: 10px;
  opacity: .75;
  font-size: 13px;
}
.user-dot-menu .inbox-item{
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.user-dot-menu .inbox-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.user-dot-menu .inbox-from{ font-weight: 900; }
.user-dot-menu .inbox-time{ font-size: 11px; opacity: .75; white-space: nowrap; }
.user-dot-menu .inbox-text{ font-size: 13px; line-height: 1.25; opacity: .92; white-space: pre-wrap; }
.user-dot-menu .inbox-actions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.user-dot-menu .inbox-btn{
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}
.user-dot-menu .inbox-btn.secondary{
  border-color: rgba(0,255,140,.45);
  color: #d9ffe8;
}
.user-dot-menu .inbox-btn.danger{
  border-color: rgba(255,90,90,.6);
  color: #ffd0d0;
}
.user-dot-menu .inbox-foot{ font-size: 11px; opacity: .65; }

/* friend requests panel (sub-menu) */
.user-dot-menu .user-requests-panel{
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 10px;
  width: 280px;
  z-index: 9999;
}

/* block panel (sub-menu) */
.user-dot-menu .user-block-panel{
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  width: 280px;
  z-index: 9999;
}
.user-dot-menu.flip-sub .user-block-panel{
  left: auto;
  right: calc(100% + 10px);
}
.user-dot-menu .block-card{
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,211,77,0.35);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  color: #fff;
}
.user-dot-menu .block-head{
  font-weight: 900;
  margin-bottom: 6px;
}
.user-dot-menu .block-sub{
  font-size: 12px;
  opacity: .85;
  margin-bottom: 10px;
}
.user-dot-menu .block-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.user-dot-menu .blk-btn{
  width: 100%;
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  font-weight: 800;
}
.user-dot-menu .blk-btn:hover{ background: rgba(255,255,255,.06); }
.user-dot-menu .blk-btn.active{
  background: rgba(255,211,77,.10);
  box-shadow: inset 0 0 0 1px rgba(255,211,77,0.28);
}
.user-dot-menu .blk-btn.danger{
  border-color: rgba(255,80,80,.55);
  color: #ff9090;
}
.user-dot-menu .blk-btn.danger.active{
  background: rgba(255,80,80,.12);
  box-shadow: inset 0 0 0 1px rgba(255,80,80,.25);
}
.user-dot-menu .block-foot{
  font-size: 11px;
  opacity: .65;
  margin-top: 10px;
}
.user-dot-menu.flip-sub .user-requests-panel{
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 10px;
}
.user-dot-menu .requests-card{
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,211,77,0.35);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  color: #fff;
}
.user-dot-menu .requests-head{
  font-weight: 900;
  margin-bottom: 8px;
}
.user-dot-menu .requests-list{
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}
.user-dot-menu .req-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom: 6px;
}
.user-dot-menu .req-name{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dot-menu .req-btns{
  display:flex;
  gap: 6px;
  flex-shrink: 0;
}
.user-dot-menu .rq-btn{
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
}
.user-dot-menu .rq-btn.primary{
  border-color: rgba(46,204,113,.75);
  color: #6cff77;
}
.user-dot-menu .rq-btn.danger{
  border-color: rgba(255,80,80,.55);
  color: #ff9090;
}
.user-dot-menu .rq-btn:hover{ background: rgba(255,255,255,.06); }
.user-dot-menu .requests-empty{
  font-size: 12px;
  opacity: .75;
  padding: 10px 6px;
}
.user-dot-menu .requests-foot{
  font-size: 11px;
  opacity: .65;
  margin-top: 8px;
}

/* friend request popup */
/* Offset pour éviter de recouvrir le media player en bas à droite */
:root{ --alert-popups-bottom: 160px; --general-alert-popups-extra: 120px; }
.friend-request-popup{
  position: fixed;
  right: 18px;
  bottom: calc(var(--alert-popups-bottom) + 110px);
  width: 380px;
  max-width: calc(100vw - 36px);
  background: rgba(5,5,9,.96);
  border: 1px solid rgba(255,211,77,0.55);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.65);
  z-index: 99999;
  padding: 12px 12px 10px;
  color: #fff;
  backdrop-filter: blur(10px);
}
.friend-request-popup .t{
  font-weight: 800;
  margin-bottom: 6px;
}
.friend-request-popup .msg{
  font-size: 13px;
  opacity: .9;
  margin-bottom: 10px;
}
.friend-request-popup .btns{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.friend-request-popup button{
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.friend-request-popup button.primary{
  border-color: rgba(46,204,113,.75);
  color: #6cff77;
}
.friend-request-popup button.danger{
  border-color: rgba(255,80,80,.55);
  color: #ff9090;
}
.friend-request-popup button:hover{ background: rgba(255,255,255,.06); }

/* tiny toast */
.friend-toast{
  position: fixed;
  right: 18px;
  bottom: var(--alert-popups-bottom);
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,211,77,0.35);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  z-index: 99999;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 36px);
}
.friend-toast.show{
  opacity: 1;
  transform: translateY(0);
}

.user-dot-menu .friends-actions button:hover{ background: rgba(255,255,255,.06); }

/* image too large toast (green neon) */
.image-limit-toast{
  position: fixed;
  right: 18px;
  bottom: var(--alert-popups-bottom);
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(0,255,120,.85);
  color: #6cff77;
  padding: 10px 12px;
  border-radius: 14px;
  z-index: 99999;
  box-shadow: 0 0 0 1px rgba(0,255,120,.22) inset, 0 12px 28px rgba(0,0,0,.55), 0 0 16px rgba(0,255,120,.18);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - 36px);
  backdrop-filter: blur(8px);
}
.image-limit-toast.show{
  opacity: 1;
  transform: translateY(0);
}


/* friend ring popup */
.friend-call-popup{
  position: fixed;
  right: 18px;
  bottom: var(--alert-popups-bottom);
  width: 380px;
  max-width: calc(100vw - 36px);
  background: rgba(5,5,9,.96);
  border: 1px solid rgba(46,204,113,.65);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.65);
  z-index: 99999;
  padding: 12px 12px 10px;
  color: #fff;
  backdrop-filter: blur(10px);
}

/* Remonte les popups d'alerte générale pour éviter le media player */
#generalAlertComposer.friend-call-popup,
#generalAlertPopup.friend-call-popup{
  bottom: calc(var(--alert-popups-bottom) + var(--general-alert-popups-extra));
}
.friend-call-popup .t{
  font-weight: 800;
  margin-bottom: 6px;
}
.friend-call-popup .msg{
  font-size: 13px;
  opacity: .9;
  margin-bottom: 10px;
}
.friend-call-popup .btns{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
}
.friend-call-popup button{
  border: 1px solid rgba(255,211,77,0.55);
  background: #111;
  color: #ffd34d;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.friend-call-popup button.primary{
  border-color: rgba(46,204,113,.75);
  color: #6cff77;
}
.friend-call-popup button:hover{ background: rgba(255,255,255,.06); }



/* === DIRECT TALK (single-click menu) === */
.user-say-menu{
  position: fixed;
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(16,19,27,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  z-index: 99999;
  color: #fff;
  backdrop-filter: blur(10px);
}
.user-say-menu .menu-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  color: #e9ecf5;
  padding: 10px 10px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.user-say-menu .menu-item:hover{ background: rgba(255,255,255,.08); }
.user-say-menu .menu-item.active{
  background: rgba(108,255,119,.14);
  box-shadow: inset 0 0 0 1px rgba(108,255,119,.22);
}
.direct-talk-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 13px;
  user-select: none;
}
.direct-talk-pill.hidden{ display:none; }
.direct-talk-pill .dt-x{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  opacity: .85;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.direct-talk-pill .dt-x:hover{ opacity: 1; background: rgba(0,0,0,.55); }
/* === /DIRECT TALK === */


/* === Alerte générale (SuperAdmin) ===================================== */
.general-alert-popup{
  position: fixed;
  right: 18px;
  bottom: calc(var(--alert-popups-bottom) + 220px);
  width: 420px;
  max-width: calc(100vw - 36px);
  background: rgba(5,5,9,.96);
  border: 1px solid rgba(255,0,80,0.45);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.65);
  z-index: 99999;
  padding: 12px 12px 10px;
  color: #fff;
  backdrop-filter: blur(6px);
}
.general-alert-popup .t{
  font-weight: 800;
  letter-spacing: .3px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 6px;
}
.general-alert-popup .sub{
  font-size: 12px;
  opacity: .8;
  margin-bottom: 8px;
}
.general-alert-popup .msg{
  white-space: pre-wrap;
  line-height: 1.25;
  font-size: 14px;
}
.general-alert-popup .btns{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.general-alert-popup button{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  padding: 8px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.general-alert-popup button.primary{
  border-color: rgba(0,255,170,.55);
  box-shadow: 0 0 0 1px rgba(0,255,170,.15) inset;
}

/* Compose modal */
.general-alert-compose{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.general-alert-compose .box{
  width: 520px;
  max-width: 100%;
  background: rgba(5,5,9,.96);
  border: 1px solid rgba(0,255,170,.35);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  color:#fff;
  padding: 12px;
}
.general-alert-compose .hd{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing: .35px;
  margin: 2px 4px 10px;
}
.general-alert-compose .bd{
  padding: 0 4px 8px;
}
.general-alert-compose textarea.ta{
  width: 100%;
  resize: vertical;
  min-height: 110px;
  max-height: 240px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(0,255,140,.10), inset 0 0 16px rgba(0,255,140,.08);
  padding: 10px 12px;
  color: #fff;
  outline: none;
}
.general-alert-compose .ft{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding: 0 4px 2px;
}
.general-alert-compose button{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  padding: 8px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.general-alert-compose button.primary{
  border-color: rgba(0,255,170,.55);
  box-shadow: 0 0 0 1px rgba(0,255,170,.15) inset;
}
.general-alert-compose button:disabled{ opacity:.55; cursor:not-allowed; }


/* --- Standby room notice (expulses-bannis) --- */
body.room-standby .messages{
  background: url('/img/fond-noir.jpg') center/cover no-repeat fixed;
}
.standbyNotice{
  margin: 12px auto 16px;
  max-width: 920px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 2px dashed rgba(255, 211, 77, 0.85);
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(2px);
  text-align: center;
}
.standbyNotice .sn-title{
  font-size: 34px;
  font-weight: 900;
  color: #ffd34d;
  margin-bottom: 10px;
  letter-spacing: .2px;
}
.standbyNotice .sn-body{
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 14px;
}
.standbyNotice .sn-extra{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.standbyNotice .sn-box{
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(12,12,12,0.55);
}
.standbyNotice .sn-box-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}
.standbyNotice .sn-box-body{
  font-size: 18px;
  line-height: 1.35;
}
.standbyNotice .sn-box.sn-kick .sn-box-title{ color: #8bff3b; }
.standbyNotice .sn-box.sn-ban  .sn-box-title{ color: #ff4a4a; }
.standbyNotice .sn-box.sn-ban{
  border-color: rgba(255, 74, 74, 0.35);
  background: rgba(50,0,0,0.25);
}

/* --- Standby LOCK: in expulses-bannis, no interaction for sanctioned users --- */
body.standby-locked .options-container,
body.standby-locked form.inputbar,
body.standby-locked #paneUsers .body{
  pointer-events: none;
}
body.standby-locked .options-container,
body.standby-locked form.inputbar{
  opacity: .45;
  filter: grayscale(0.25);
}
body.standby-locked #paneUsers .body{
  opacity: .78;
}



/* === Topbar: Loupe + Son chat ========================================= */
.topbar a.btn.zoom-btn{
  border-color: #b85cff;
  color: #b85cff;
}
.topbar a.btn.zoom-btn:hover{
  border-color: #d19bff;
  color: #d19bff;
}

.topbar a.btn.sound-btn{
  border-color: #39b8ff;
  color: #39b8ff;
}
.topbar a.btn.sound-btn:hover{
  border-color: #8bd6ff;
  color: #8bd6ff;
}

.btn.btn-small{
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}

/* Bouton "Options salon" (même vibe que les boutons néon du thème) */
.room-options-btn{
  margin-left: 10px;
  background: var(--panel-2);
  border: 1px solid #ff9800;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.room-options-btn:hover{
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0,255,120,.25);
}
.room-options-btn:active{ transform: translateY(1px); }
.room-options-btn:focus{ outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 10px rgba(0,255,120,.25); }

/* Popovers */
.top-popover{
  position: absolute;
  top: 58px;
  right: 16px;
  width: 260px;
  background: rgba(10,10,14,.96);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  z-index: 50;
}
.top-popover .pop-title{
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-popover .pop-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-popover input[type="range"]{
  width: 100%;
}
.top-popover .pop-value{
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  color: #FFD700;
}
.top-popover .pop-col{
  display: grid;
  gap: 8px;
  margin: 6px 0 10px;
}
.top-popover .pop-check{
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.top-popover .pop-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.top-popover select{
  width: 100%;
  background: rgba(0,0,0,.35);
  color: #e9f2ff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}
.top-popover select:focus{
  border-color: var(--accent);
}
.top-popover label{
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* Popover separator */
.top-popover .pop-sep{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 10px 0;
}


/* ---- Modal salon temporaire (création / modification) ---- */
#tempRoomModalOverlay .room-modal{ height:auto; min-height:360px; width:560px; max-height:90vh; overflow:hidden; border:2px solid #00ff00; box-shadow: 0 0 18px rgba(0,255,0,.35), 0 0 60px rgba(255,255,0,.18), 0 12px 30px rgba(0,0,0,.65); }
#tempRoomModalOverlay .room-modal-header{ background: linear-gradient(90deg, #00ff00, #ffd700); color:#000; }
#tempRoomModalOverlay .room-modal-body{ justify-content:flex-start; overflow:auto; }
#tempRoomModalOverlay .room-modal-input{ border-color: rgba(0,255,0,.45); }
#tempRoomModalOverlay .room-modal-input:focus{ box-shadow: 0 0 0 1px #00ff00; }

/* === Player YouTube partagé (synchro room) — thème vert fluo / jaune / noir === */
.yt-room-wrap{ margin:10px 8px 12px; position:relative; }
.yt-room-badge{ position:absolute; top:-8px; font-size:10px; letter-spacing:1px; padding:2px 8px; border-radius:999px; background:#0b0b0b; border:1px solid #ffd400; color:#a8ff00; opacity:.95; }
.yt-room-badge.left{ left:8px; }
.yt-room-badge.right{ right:8px; }
.yt-room-card{ background: rgba(0,0,0,.78); border: 1px solid rgba(168,255,0,.55); box-shadow: 0 0 0 2px rgba(255,212,0,.12), 0 14px 30px rgba(0,0,0,.45); border-radius: 14px; padding: 10px; }
.yt-room-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.yt-room-title{ font-weight:800; color:#a8ff00; text-shadow:0 0 10px rgba(168,255,0,.25); }
.yt-toggle{ width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,212,0,.55); background:linear-gradient(180deg, rgba(168,255,0,.18), rgba(0,0,0,.25)); }
.yt-toggle:after{ content:""; display:block; width:12px; height:2px; margin:0 auto; background:#ffd400; border-radius:2px; }
.yt-room-controls{ display:flex; gap:6px; align-items:center; }
.yt-room-input{ flex:1; background: rgba(0,0,0,.55); border: 1px solid rgba(255,212,0,.45); color:#eaffc8; padding: 8px 10px; border-radius: 12px; outline:none; }
.yt-room-input:focus{ border-color:#a8ff00; box-shadow:0 0 0 2px rgba(168,255,0,.15); }
.yt-room-btn{ white-space:nowrap; }
.yt-room-mini{ display:flex; align-items:center; gap:6px; margin:8px 0 8px; }
.yt-mini{ padding:6px 10px; border-radius:12px; background: rgba(0,0,0,.55); border: 1px solid rgba(168,255,0,.45); color:#ffd400; }
.yt-mini:hover{ filter:brightness(1.1); }
.yt-now{ font-size:12px; color:#c9ff7a; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.yt-owner{ font-size:12px; color:#ffd400; opacity:.95; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt-watch{ border-color: rgba(255,212,0,.45); color:#a8ff00; }
.yt-stop{ border-color: rgba(255,80,80,.45); color:#ff5050; }
.yt-room-player{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,212,0,.30); background:#000; }
.yt-player-box{ width:100%; aspect-ratio: 16 / 9; }
.yt-room-hint{ margin-top:8px; font-size:11px; color:#eaffc8; opacity:.8; }
.yt-room-wrap.yt-collapsed .yt-room-controls,
.yt-room-wrap.yt-collapsed .yt-room-mini,
.yt-room-wrap.yt-collapsed .yt-room-hint{ display:none; }
.yt-room-wrap.yt-collapsed .yt-room-player{ display:block; }
.yt-room-wrap.yt-collapsed .yt-room-card{ padding-bottom:10px; }


/* YouTube room: release/kill */
.yt-release{ border-color: rgba(120,200,255,.45); color:#78c8ff; }
.yt-kill{ border-color: rgba(255,80,80,.65); color:#ff5050; }

.yt-room-wrap.yt-collapsed .yt-toggle:before{ content:""; display:block; width:2px; height:12px; margin:0 auto; background:#ffd400; border-radius:2px; position:relative; top:-7px; }


/* ==== Radio room player (admin selectable) ==== */
.radio-room-wrap{ margin-top:12px; position:relative; }
.radio-room-card{
  background: rgba(0,0,0,.68);
  border: 1px solid rgba(0,255,140,.55);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(0,255,140,.10), inset 0 0 16px rgba(0,255,140,.08);
  padding: 10px 12px;
  backdrop-filter: blur(4px);
}
.radio-room-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; }
.radio-room-title{ flex:1 1 auto; font-weight:800; letter-spacing:.8px; color:#00ff6a; text-transform:uppercase; font-size:12px; text-align:center; }
.radio-room-sub{ font-size:11px; opacity:.9; }
.radio-room-player{ margin-top:8px; }
.radio-room-player audio{ width:100%; height:34px; }
.radio-room-empty{ margin-top:6px; font-size:11px; opacity:.85; }
.radio-room-titlebar{
  position:absolute;
  left:0; right:0;
  top:-18px;
  height:24px;
  background: rgba(255, 212, 0, .14);
  border: 1px solid rgba(0,255,140,.55);
  border-bottom: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.radio-room-titlebar-center{
  font-size:10px;
  letter-spacing:1px;
  font-weight:800;
  color:#00ff6a;
  text-transform:uppercase;
  text-shadow: 0 0 10px rgba(0,255,140,.18);
}
.radio-room-badge{ position:absolute; top:10px; font-size:10px; letter-spacing:2px; opacity:.85; z-index:2; }
.radio-room-badge.left{ left:6px; top:-14px; transform:none; pointer-events:none; }
.radio-room-badge.right{ right:6px; top:-14px; transform:none; pointer-events:none; }
.radio-room-badge span{
  /* Retire la "bulle" noire: on garde juste le texte RADIO */
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color:#ffd400;
  font-weight:900;
}

/* Retire les phrases d'aide inutiles sous le player radio */
.radio-room-empty,
.radio-room-sub{ display:none !important; }


/* === Radio player — contrôles custom (vert fluo / jaune / noir) === */
.radio-room-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.radio-mini{
  height:26px; width:30px; padding:0;
  border-radius:10px;
  background: rgba(0,0,0,.75);
  border:1px solid rgba(0,255,140,.38);
  color:#00ff6a;
  box-shadow: 0 0 10px rgba(0,255,140,.12);
}
.radio-mini:hover{ filter:brightness(1.15); }

/* Radio: bouton réduire/déployer (même logique que YouTube) */
.radio-toggle{ border-color: rgba(255,215,0,.35); }
/* Utilise désormais une icône FontAwesome (- / +) au lieu des pseudo-éléments */
.radio-toggle:before,
.radio-toggle:after{ content:none !important; display:none !important; }
.radio-toggle i{ font-size:14px; line-height:26px; }

/* Radio: mode replié (garde play/stop/mute + now, masque le reste) */
.radio-room-wrap.radio-collapsed .radio-vol,
.radio-room-wrap.radio-collapsed .radio-menu-pop,
.radio-room-wrap.radio-collapsed .radio-room-empty{ display:none !important; }
.radio-room-wrap.radio-collapsed .radio-controls{ margin-top:6px; gap:6px; }

.radio-controls{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.radio-btn{
  height:30px; width:34px; padding:0;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(0,255,140,.22), rgba(0,0,0,.78));
  border:1px solid rgba(255,215,0,.38);
  color:#d6ff00;
  box-shadow: 0 0 14px rgba(255,215,0,.10), inset 0 0 10px rgba(0,255,140,.10);
}
.radio-btn:hover{ filter:brightness(1.12); }
.radio-btn:active{ transform: translateY(1px); }

.radio-vol{
  width:120px;
  accent-color:#d6ff00;
  height: 4px;
}
.radio-now{
  flex: 1 1 auto;
  min-width: 120px;
  font-size: 11px;
  color:#00ff6a;
  opacity:.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.radio-menu-pop{
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  background: rgba(0,0,0,.82);
  border:1px solid rgba(0,255,140,.35);
  box-shadow: 0 0 16px rgba(0,255,140,.10);
  position:relative;
}
.radio-menu-title{
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#d6ff00;
  margin-bottom:6px;
  font-weight:800;
}
.radio-select{
  width:100%;
  background: rgba(0,0,0,.85);
  border:1px solid rgba(255,215,0,.35);
  border-radius:12px;
  color:#00ff6a;
  padding:8px 10px;
  outline:none;
}
.radio-select:focus{ box-shadow: 0 0 0 2px rgba(0,255,140,.15); }
.radio-menu-hint{ margin-top:6px; font-size:11px; opacity:.85; }

/* ==============================
   HEADER CENTRAL (CHAT) — split horizontal (salon / vous)
   IMPORTANT: rester aligné avec les headers salons/membres
   ============================== */
.header.chat-header{ padding:0; }
.chat-header-split{
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.chat-header-left,
.chat-header-right{
  flex:1 1 0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  box-sizing:border-box;
  min-height:44px;
  height:44px;
  min-width:0; /* ellipsis */
}
.chat-header-left{
  background: rgba(255,255,0,.16);
  /* séparation centrale (trait vert) */
  border-right: 2px solid rgba(0,255,0,.95);
}
.chat-header-right{
  background: rgba(0,255,0,.12);
  /* aligner le texte à gauche dans la moitié droite */
  justify-content:flex-start;
}
.chat-header-label,
.chat-header-value{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header-label{ font-size:12px; opacity:.9; }
.chat-header-value{ font-weight:800; color:#ffff00; text-shadow:0 0 8px rgba(255,255,0,.22); }
.chat-header-left .room-options-btn{ margin-left:auto; }

/* Room list: FontAwesome icon before room name */
.room-name-ico{ margin-right:8px; opacity:.9; }

/* === Sanction icons next to pseudo (mute/expulsion/ban) === */
#usersList li.user .san-icons{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  flex:0 0 auto;
}
#usersList li.user .san-icons i{
  font-size:13px;
  line-height:1;
  padding:2px 3px;
  border-radius:6px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
}
#usersList li.user .san-icons i.mic,
#usersList li.user .san-icons i.text{
  color: #42f73f;
  text-shadow: 0 0 8px rgba(66,247,63,.35);
}
#usersList li.user .san-icons i.ban{
  color: #ff4d4d;
  text-shadow: 0 0 8px rgba(255,77,77,.35);
}
#usersList li.user .san-icons i.kick{
  color: #ffd34d;
  text-shadow: 0 0 8px rgba(255,211,77,.35);
}
#usersList li.user.tight-icons .san-icons i{
  font-size:12px;
  padding:1px 2px;
}

/* === Bigger emojis inside salon messages (not reactions) === */
.msg-text .emoji{
  display:inline-block;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: -0.18em;
}
.msg.emoji-only .msg-text .emoji{
  font-size: 1.2em;
  vertical-align: -0.28em;
}

/* === Topbar mail badge (offline PM inbox) === */
#offlineInboxBtn{ position:relative; }
#offlineInboxBtn .mail-badge{
  position:absolute;
  top:-8px;
  right:-8px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  background: rgba(255, 0, 92, .22);
  border: 2px solid rgba(255, 64, 128, .95);
  box-shadow: 0 0 16px rgba(255, 64, 128, .35);
  color:#fff;
  text-shadow: 0 0 8px rgba(255,255,255,.2);
  pointer-events:none;
}
#offlineInboxBtn.mail-pending{
  border-color: rgba(255, 64, 128, .95) !important;
  box-shadow: 0 0 0 1px rgba(255, 64, 128, .25) inset, 0 0 16px rgba(255, 64, 128, .28) !important;
}

/* === Offline inbox modal (center screen) === */
.offline-inbox-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}
.offline-inbox-modal{
  width: min(860px, 94vw);
  max-height: 88vh;
  overflow:auto;
  border-radius: 20px;
  padding: 16px 16px 12px;
  background: rgba(10,10,14,.86);
  color:#fff;
  border: 2px solid rgba(0,255,140,.75);
  box-shadow: 0 0 0 1px rgba(255,230,80,.25) inset, 0 0 24px rgba(0,255,140,.22), 0 24px 70px rgba(0,0,0,.65);
}
.offline-inbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.offline-inbox-title{
  font-size: 26px;
  font-weight: 950;
  letter-spacing: .2px;
  color:#ffe85a;
  text-shadow: 0 0 12px rgba(255,232,90,.22);
}
.offline-inbox-close{
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  font-size: 16px;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,230,80,.65);
  color:#fff;
}
.offline-inbox-close:hover{ filter: brightness(1.08); }

/* Reuse inbox blocks, but for modal (not only in .user-dot-menu) */
.offline-inbox-modal .user-inbox-panel{ width:100%; }
.offline-inbox-modal .inbox-card{ background:transparent; border:0; box-shadow:none; padding:0; }
.offline-inbox-modal .inbox-head{
  font-weight: 950;
  font-size: 18px;
  margin: 8px 0 10px;
  color:#d9ffe8;
}
.offline-inbox-modal .inbox-mini{
  border: 1px solid rgba(0,255,140,.35);
  background: rgba(0,0,0,.28);
  color: #d9ffe8;
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
  font-size: 13px;
}
.offline-inbox-modal .inbox-mini:hover{ filter: brightness(1.08); }
.offline-inbox-modal .inbox-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 56vh;
  overflow:auto;
  padding-right: 6px;
}
.offline-inbox-modal .inbox-empty{ opacity:.8; padding: 10px 0; }
.offline-inbox-modal .inbox-item{
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(0,255,140,.28);
}
.offline-inbox-modal .inbox-top{ display:flex; justify-content:space-between; gap:10px; }
.offline-inbox-modal .inbox-from{ font-weight: 950; }
.offline-inbox-modal .inbox-time{ font-size: 12px; opacity: .75; white-space: nowrap; }
.offline-inbox-modal .inbox-text{ font-size: 14px; line-height: 1.25; opacity: .92; white-space: pre-wrap; margin-top: 6px; }
.offline-inbox-modal .inbox-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.offline-inbox-modal .inbox-btn{
  cursor:pointer;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 950;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(0,255,140,.55);
  color:#fff;
}
.offline-inbox-modal .inbox-btn.secondary{
  border-color: rgba(0,255,140,.45);
  color: #d9ffe8;
}
.offline-inbox-modal .inbox-btn.danger{
  border-color: rgba(255,90,90,.6);
  color: #ffd0d0;
}
.offline-inbox-modal .inbox-btn:hover{ filter: brightness(1.08); }
.offline-inbox-modal .inbox-foot{ font-size: 12px; opacity: .75; margin-top: 10px; }