/* === RESET et correction hauteur sans scroll === */

html, body{
  margin: 0;
  padding: 0;
  overflow-y: auto;
  height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body{
  font-family: Arial, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
  background-color: #323339;
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* ==== scrollbar ==== */

::-webkit-scrollbar{
  width: 12px;
  border-radius: 8px;
}

::-webkit-scrollbar-track{
  background: #111;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(45deg, rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1));
  background-size: 400% 400%;
  border-radius: 8px;
  transition: background-position 0.5s ease;
  animation: gradientThumbScroll 3s ease infinite;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6), 0 0 10px rgba(0, 218, 222, 0.6);
}

@keyframes gradientThumbScroll{
  0%{
    background-position: 400% 0;
  }

  50%{
    background-position: 0 100%;
  }

  100%{
    background-position: 400% 0;
  }
}

/* 🖱️ FORCER CURSEUR NORMAL PARTOUT */

*, *::before, *::after{
  cursor: default !important;
}

/* === GENERAL === */

main{
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  margin-top: 40px;
  height: calc(100vh - 40px);
  min-width: 0;
}

/* === CHANNEL SIDEBAR (LEFT) === */

#channel-sidebar{
  flex: 0 0 240px;
  max-width: 240px;
  background: #222222b8;
  padding: 1em;
  border-right: 2px solid #333;
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  min-width: 0;
}

#channel-list-wrapper{
  flex: 1;
  margin-bottom: 110px;
}

#channel-sidebar h3{
  margin-top: 0;
  margin-bottom: 1em;
  text-align: center;
  color: #00ffff;
}

#channel-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 70px;
  min-width: 0;
}

#channel-list .channel{
  padding: 0.5em;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  transition: 0.2s ease;
}

#channel-list .channel:hover{
  background: linear-gradient(45deg, rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1));
  background-size: 400% 400%;
  border-radius: 30px;
  transition: background-position 0.5s ease;
  animation: gradientThumb 10s ease infinite;
}

#channel-list .channel.selected{
  background: linear-gradient(45deg, rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1));
  background-size: 400% 400%;
  border-radius: 30px;
  transition: background-position 0.5s ease;
  animation: gradientThumb 10s ease infinite;
  color: white;
  font-weight: bold;
}

/* === Création Salon Fixé en Bas === */

#create-channel{
  position: absolute;
  bottom: 70px;
  left: 1em;
  right: 1em;
  display: flex;
  gap: 5px;
  border-top: 1px solid #444;
  background: #222222b8;
  padding-top: 5px;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
}

/* ✅ Quand le bloc est inséré DANS la liste (entre catégories) */
body.create-in-list #channel-list-wrapper{ margin-bottom: 0; }
body.create-in-list #channel-list{ padding-bottom: 0; }

#channel-list li.create-channel-slot,
#home-channel-list li.create-channel-slot{
  list-style: none;
  margin: 8px 6px;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 10px;
  background: rgba(18,18,18,0.6);
}

#create-channel.in-channel-list{
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  border-top: none;
  background: transparent;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

#create-channel.in-channel-list .create-channel-title{
  font-weight: 700;
  font-size: 14px;
  opacity: 0.95;
}

#create-channel.in-channel-list .create-channel-row{
  display: flex;
  gap: 8px;
  align-items: center;
}

#create-channel.in-channel-list .create-channel-options{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
}

#create-channel.in-channel-list .create-opt{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  user-select: none;
}

#create-channel input{
  flex: 1;
  min-width: 0;
  padding: 0.5em;
  border: none;
  border-radius: 6px;
  background-color: #121212;
  color: white;
  font-size: 1em;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ✅ Force la lisibilité (au cas où une règle globale override l'input en blanc) */
#create-channel input#new-channel-name,
#create-channel .create-channel-input{
  background-color: #121212 !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

#create-channel input#new-channel-name::placeholder,
#create-channel .create-channel-input::placeholder{
  color: rgba(255, 255, 255, 0.55) !important;
}

/* évite les effets Chrome autofill (rare ici, mais safe) */
#create-channel input#new-channel-name:-webkit-autofill,
#create-channel .create-channel-input:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 9999s ease-out 0s;
}

#create-channel button{
  flex-shrink: 0;
  padding: 0.5em 0.8em;
  border: none;
  border-radius: 6px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
  box-sizing: border-box;
}

#create-channel button:hover{
  background: linear-gradient(
    45deg,
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1)
  );
  background-size: 400% 400%;
  border-radius: 8px;
  transition: background-position 0.5s ease;
  animation: gradientThumb 10s ease infinite;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6),
              0 0 10px rgba(0, 218, 222, 0.6);
  color: #fff;
}

@keyframes gradientThumb{
  0%{
    background-position: 0% 50%;
  }

  50%{
    background-position: 100% 50%;
  }

  100%{
    background-position: 0% 50%;
  }
}

/* === Bouton envoyer chat général === */

#send-button{
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background 0.5s;
}

#send-button:hover{
  background: linear-gradient(
    45deg,
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1)
  );
  background-size: 400% 400%;
  animation: gradientThumb 10s ease infinite;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6),
              0 0 10px rgba(0, 218, 222, 0.6);
  color: #fff;
}

/* === Boutons emoji 🎨 et couleur 🎨 (même style que send-button) === */

#emoji-button, #color-text{
  background-color: #444;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background 0.5s, box-shadow 0.5s;
}

/* Effet au survol (identique au bouton envoyer) */

#emoji-button:hover, #color-text:hover{
  background: linear-gradient(
    45deg,
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1)
  );
  background-size: 400% 400%;
  animation: gradientThumb 10s ease infinite;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6),
              0 0 10px rgba(0, 218, 222, 0.6);
  color: #fff;
}

body:not(.home-active) #channel-sidebar{
  display: none !important;
}

/* Animation du dégradé (même que pour send-button) */

/* === CHAT CONTAINER (CENTER) === */

#chat-container{
  padding: 1em;
}

.chat-messages{
  min-height: 0;
  background: #222222b8;
  padding: 1em;
  border-radius: 10px;
  margin-bottom: 10px;
}

.chat-messages .message{
  margin-bottom: 1em;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.4;
  word-break: break-word;
  animation: fadeInUp 0.3s ease;
}

#chat-input{
  width: 100%;
  box-sizing: border-box;
}

#message-input{
  flex: 1;
  min-width: 0;
  padding: 1em;
  font-size: 1em;
  border-radius: 30px;
  border: none;
  background-color: #121212;
  color: white;
  box-sizing: border-box;
  resize: vertical;
  max-height: 150px;
}

/* Le bouton reste sa taille mais ne rétrécit pas */

#send-button{
  background-color: #4caf50;
  flex-shrink: 0;
}

/* Responsive : en petit écran, empile le champ et bouton */

@media (max-width: 600px){
  #chat-input{
    flex-direction: column;
    gap: 8px;
  }

  #send-button{
    width: 100%;
  }
}

/* === USER LIST (RIGHT SIDEBAR) === */

#user-list{
  flex: 0 0 240px;
  max-width: 240px;
  background: #222222b8;
  padding: 1em;
  border-left: 2px solid #333;
  border-radius: 10px;
  min-width: 0;
  overflow-y: auto;
}

#users{
  list-style: none;
  padding: 0;
}

#users li{
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.gender-square{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  font-size: 1em;
  background-color: #aaa;
}

.age-span{
  color: #000;
}

/* Ajustement du pseudo pour qu'il accepte 16 caractères sans couper */

.username-span{
  color: #000;
  font-weight: bold;
  font-size: 1.1em;
  overflow: visible;
  text-overflow: initial;
  flex: 1;
  min-width: 0;
}

#users li.selected{
  background-color: #333;
  border-left: 4px solid #00ffff;
  padding-left: 6px;
  border-radius: 5px;
}

.clickable-username{
  color: #00ffff;
  font-weight: bold;
}

.clickable-username:hover{
  text-decoration: none;
  color: #ff00ff;
}

/* === MODAL === */

.modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.5s ease-in-out;
}

.logoutModal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.5s ease-in-out;
  background: rgba(0,0,0,0.6);
}

.logoutModal .modal-content{
  background-color: #222;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center;
}

/* Ancienne modal de connection */

/* Cadre filament laser pour modal */

.modal-content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1e1e24;
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 12px 4px rgba(148, 0, 211, 0.3);
  overflow: hidden;
  z-index: 1000;
}

/* Filament lumineux animé */

.modal-content::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
        from 0deg,
        rgba(0, 218, 222, 1) 0deg 60deg,
        rgba(251, 0, 255, 1) 60deg 120deg,
        transparent 120deg 360deg
    );
  animation: filament 6s linear infinite;
  z-index: 0;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.6;
}

/* Masque intérieur pour cacher l’excès de lumière */

.modal-content::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #1e1e24;
  border-radius: 10px;
  z-index: 1;
}

/* Contenu au-dessus du filament */

.modal-content > *{
  position: relative;
  z-index: 2;
}

/* Animation rotation du filament */

@keyframes filament{
  0%{
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(360deg);
  }
}

/* Effet laser au focus */

/* Labels centrés */

.modal-content label{
  font-weight: 500;
}

/* Uniformisation des champs input et select */

.modal-content input, .modal-content select{
  max-width: 280px;
  margin: 6px auto;
  display: block;
  outline: none;
  box-shadow: inset 0 0 5px rgba(251, 0, 255, 0.3);
}

/* Correction spécifique pour <select> (supprime le style navigateur) */

.modal-content select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, #00dadd, #fb00ff);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  cursor: pointer;
}

/* Effet focus laser */

.modal-content input:focus, .modal-content select:focus{
  border-color: #00dadd;
}

/* Optionnel : pour un triangle plus propre sur le select */

.modal-content select::-ms-expand{
  display: none;
}

.modal-content h2{
  margin-bottom: 1em;
  font-size: 1.8em;
  color: #00ffff;
}

.modal-content label{
  display: block;
  margin-top: 1em;
  margin-bottom: 0.2em;
  font-size: 1em;
  color: #ccc;
  text-align: left;
}

.modal-content input, .modal-content select{
  width: 100%;
  padding: 0.8em;
  margin-bottom: 1em;
  border: none;
  border-radius: 8px;
  background-color: #2c2c2c;
  color: white;
  font-size: 1em;
  transition: 0.3s ease;
}

.modal-content input:focus, .modal-content select:focus{
  outline: none;
  box-shadow: 0 0 10px #00ffff;
  background-color: #353535;
}

.modal-content button{
  background: linear-gradient(to right, #00ffff, #ff00ff);
  color: white;
  border: none;
  padding: 0.8em;
  font-size: 1.1em;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-content button:hover{
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ffff;
}

#modal-error{
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #ff4d4d;
  display: none;
}

/* =========================
   Date de naissance (inscription)
   ========================= */
.birth-row{
  display: flex;
  gap: 8px;
  max-width: 280px;
  margin: 6px auto 10px auto;
}
.birth-row input{
  flex: 1 1 0;
  max-width: none;
  margin: 0;
  margin-bottom: 0;
}
.birth-age-preview{
  max-width: 280px;
  margin: 0 auto 10px auto;
  font-size: 13px;
  opacity: .85;
  text-align: left;
}

.modal-image{
  display: block;
  width: 140px;
  height: 50px;
  object-fit: cover;
  margin: 0 auto 20px auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6), 0 0 10px rgba(0, 218, 222, 0.6);
}

/* === RESPONSIVE === */

@media (max-width: 768px){
  main{
    flex-direction: column;
    height: auto;
  }

  #channel-sidebar, #user-list{
    width: 100%;
    max-width: none;
    min-width: 0;
    border: none;
    border-top: 2px solid #333;
    border-radius: 0;
    margin: 0;
  }

  #chat-container{
    flex: none;
    width: 100%;
    padding: 0.5em;
  }

  #create-channel{
    position: static;
    margin-top: 1em;
    background: none;
    flex-wrap: wrap;
    gap: 8px;
  }

  #create-channel button{
    width: 100%;
  }
}

/* === ANIMATIONS === */

@keyframes fadeIn{
  from{
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}

@keyframes popIn{
  0%{
    transform: scale(0.8);
    opacity: 0;
  }

  100%{
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translateY(5px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

input:focus, select:focus, textarea:focus, button:focus{
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* Bande supérieure fixe */

#top-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #111;
  color: #00ffff;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  font-size: 1em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.system-message{
  color: #888;
  font-style: italic;
  margin: 5px 0;
}

.username-span.admin, .message .clickable-username.admin{
  color: red;
  font-weight: bold;
  position: relative;
}

/* Pour l'icône "🔥" */

.username-span.admin::after, .message .clickable-username.admin::after{
  content: "🔥";
  margin-left: 4px;
  font-size: 0.9em;
  vertical-align: middle;
  color: red;
}

/* Optionnel : curseur pointer quand sur pseudo */

.clickable-username{
  cursor: pointer;
}

/* Optionnel : espace entre l'âge et le pseudo */

.user-item .gender-square{
  display: inline-block;
  width: 20px;
  height: 18px;
  line-height: 19px;
  text-align: center;
  border-radius: 3px;
  color: white;
  font-weight: bold;
  margin-right: 8px;
  font-size: 14px;
  user-select: none;
}

/* Conteneur utilisateur */

.user-item{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Zone icône rôle (admin/modo), largeur fixe */

.user-item .role-icon{
  width: 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icône admin/mode centrée dans le conteneur */

.user-item .role-icon img, .user-item .role-icon svg{
  max-width: 20px;
  max-height: 18px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* Carré âge, largeur fixe */

.user-item .age-square{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #aaa;
  color: #000;
  font-weight: bold;
  font-size: 1em;
}

/* Pseudo, commence toujours après âge */

.user-item .username-span{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
  font-weight: bold;
}

/* Texte laser */

.texte-laser{
  font-size: 15px;
  font-weight: bold;
  background: linear-gradient(45deg, rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(251, 0, 255, 1));
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laserTexteMenu 2s linear infinite;
}

@keyframes laserTexteMenu{
  0%{
    background-position: 0% 0%;
  }

  50%{
    background-position: 100% 100%;
  }

  100%{
    background-position: 0% 0%;
  }
}

/* Fin texte laser */

/* Empêche le retour à la ligne entre le nom d'utilisateur et les icônes */

.username-span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Icône admin */

.admin-icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Icône modo */

.modo-icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}

@media (max-width: 400px){
  .admin-icon, .modo-icon{
    width: 12px;
    height: 12px;
    font-size: 12px;
  }
}

#user-list .texte-laser{
  flex: 0 0 auto;
  margin-bottom: 0px;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  user-select: none;
}

.control-button{
  background-color: #444;
  color: white;
  border: none;
  padding: 6px 10px;
  margin: 0 0px;
  border-radius: 5px;
  cursor: pointer;
}

.control-button:hover{
  background-color: #666;
}

#emoji-picker{
  display: none;
  position: absolute;
  bottom: 95px;
  left: 15px;
  background: #222;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 12px;
  z-index: 1000;
  max-width: 292px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#emoji-picker.show{
  display: flex;
}

/* Style des emojis */

#emoji-picker .emoji{
  font-size: 26px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.2s;
  user-select: none;
}

#emoji-picker .emoji:hover{
  background-color: #555;
  transform: scale(1.3);
}


/* =========================
   😀 MK EMOTES (palette images ;00..;66)
   ========================= */

#emoji-picker.mk-emote-picker{
  /* affichage géré par JS (none / flex) */
  --mk-emote-picker: 1;
}

#emoji-picker .mk-emote-item{
  width: 44px;
  padding: 6px 4px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.25s, transform 0.15s;
}

#emoji-picker .mk-emote-item:hover{
  background-color: #555;
  transform: scale(1.08);
}

#emoji-picker .mk-emote-img{
  height: 26px;
  width: auto;
  max-width: 34px;
  object-fit: contain;
  display: block;
}

#emoji-picker .mk-emote-code{
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  color: #bdbdbd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.mk-chat-emote{
  height: 19px;
  width: auto;
  max-width: 34px;
  object-fit: contain;
  vertical-align: -3px;
  margin: 0 1px;
}

.modal[style*="display: flex"] ~ #top-bar{
  display: none !important;
}

.modal[style*="display: flex"] ~ #top-bar, .modal[style*="display: flex"] ~ #user-list, .modal[style*="display: flex"] ~ #chat-container{
  display: none !important;
}

.user-item .clickable-username{
  pointer-events: auto;
  cursor: pointer;
}

/* Responsive : ajuste automatiquement la taille en dessous de 500px */

.youtube-wrapper{
  width: 64%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  margin: 10px 0 10px 10px;
  background-color: #121212;
  border: 2px solid #007bff;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.youtube-wrapper:hover{
  box-shadow: 0 0 10px #007bff, 0 0 10px #007bff;
  border-color: #007bff;
  z-index: 10;
}

.youtube-wrapper iframe{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
  display: block;
}

#content-container{
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
}

#channel-sidebar, #user-list{
  height: calc(100vh - 40px);
  margin-top: 117px;
}

.sprite-button{
  width: 24px;
  height: 24px;
  background: url("/icon/starbis.gif") no-repeat top center;
  background-size: 24px 48px;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  position: relative;
  left: 7px;
}

.sprite-button:hover{
  background-position: 0 -24px;
}

/* Pour désactiver les focus/outline si tu veux */

.sprite-button{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.sprite-button:focus, .sprite-button:active{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Nouveau bouton fermeture, classe différente */

.close-sprite-button{
  width: 24px;
  height: 24px;
  background: url("https://chat-app-91ml.onrender.com/icon/croix.gif") no-repeat center center;
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  position: relative;
  left: 0;
  user-select: none;
}

.close-sprite-button:hover{
  filter: brightness(1.2);
}

/* Désactivation des focus/outline */

.close-sprite-button{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.close-sprite-button:focus, .close-sprite-button:active{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.private-message{
  font-size: 0.95em;
}

.private-message .username{
  font-weight: bold;
  margin-right: 6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.private-message .message-text{
  word-break: break-word;
  flex: 1;
}

.private-message .timestamp{
  margin-left: 8px;
  color: #aaa;
  font-size: 0.95em;
  font-style: italic;
  white-space: nowrap;
}

/* Bouton démarrer webcam */

/* Style spécifique pour le bouton start-webcam-btn */

#start-webcam-btn{
  width: 24px;
  height: 24px;
  background: url("/icon/camzy.gif") no-repeat top center;
  background-size: 24px 48px;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  position: relative;
  left: -1px;
  outline: none !important;
  box-shadow: none !important;
}

#start-webcam-btn:hover{
  background-position: 0 -24px;
}

#start-webcam-btn:focus, #start-webcam-btn:active{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.webcam-icon{
  position: absolute;
  top: -6px;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 10;
}

.webcam-icon.admin{
  top: 0px;
  left: 0px;
}

.webcam-icon.modo{
  top: 0px;
  left: 0px;
}

.webcam-icon.user{
  top: -8px;
  left: 0;
}

.wiizz-cooldown-banner{
  animation: slideDown 0.3s ease;
  background-color: #ffc107;
  color: black;
  font-weight: bold;
  padding: 6px;
  text-align: center;
  border-bottom: 2px solid #222;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

@keyframes slideDown{
  from{
    top: -50px;
    opacity: 0;
  }

  to{
    top: 0;
    opacity: 1;
  }
}

.wizz-icon{
  height: 25px;
  width: 44px;
  vertical-align: middle;
  margin-right: 4px;
  animation: pulseWizz 1s ease;
}

.moderation-context-menu{
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: scale(0.95);
  }

  to{
    opacity: 1;
    transform: scale(1);
  }
}

.confirm-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.confirm-box{
  background: #222;
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  max-width: 80%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
}

.confirm-message{
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.confirm-buttons{
  display: flex;
  justify-content: space-around;
}

.confirm-buttons button{
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: #444;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.confirm-buttons button:hover{
  background: #666;
}

.room-banned{
  opacity: 0.4;
  cursor: not-allowed;
}

.badge-icon{
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 3px;
}

.badge-wrapper{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.username-span[data-gender="Homme"][data-role="user"]:not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: dodgerblue;
}

.username-span[data-gender="Femme"][data-role="user"]:not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: #f0f;
}

.username-span[data-gender="Trans"][data-role="user"]:not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: #ee82ee;
}

.username-span{
  transition: color 0.2s;
  cursor: pointer;
}

.username-span[data-role="admin"]{
  color: red;
}

.username-span[data-role="modo"]{
  color: limegreen;
}

.username-span[data-roomrole="owner"]{
  color: #a020f0;
}

.username-span[data-roomrole="mod"]{
  color: #cc66ff;
}

.username-span[data-gender="Homme"]:not([data-role]):not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: dodgerblue;
}

.username-span[data-gender="Femme"]:not([data-role]):not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: #f0f;
}

.username-span[data-gender="Trans"]:not([data-role]):not([data-roomrole="owner"]):not([data-roomrole="mod"]){
  color: #ee82ee;
}

/* 💫 Hover */

/* Animation au survol */

.username-span:hover{
  background-image: linear-gradient(
    90deg,
    #00dede,
    #fb00ff,
    #00dede
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: textGradientHover 2.5s linear infinite;
}

/* Animation dégradé */

@keyframes textGradientHover{
  0%{
    background-position: 0% center;
  }

  100%{
    background-position: 200% center;
  }
}

.texte-laser-italique{
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  font-family: Arial, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
  background: linear-gradient(45deg, rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(251, 0, 255, 1));
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laserTexteMenu 2s linear infinite;
  line-height: 1.2;
}

audio{
  width: 100%;
  max-width: 300px;
  background-color: #212529;
  border: 2px solid #007bff;
  border-radius: 10px;
  padding: 6px;
  margin-top: 6px;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

/* Personnalisation WebKit (Chrome, Edge, Brave, etc.) */

audio::-webkit-media-controls-panel{
  background: linear-gradient(270deg, #00dade, #fb00ff, #00dade, #fb00ff);
  background-size: 800% 800%;
  animation: audioGradientFlow 5s ease infinite;
  border-radius: 8px;
}

/* Barre de volume */

audio::-webkit-media-controls-volume-slider{
  background-color: #fff;
}

/* Boutons lecture / pause */

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-pause-button{
  background-color: #fff;
  border-radius: 50%;
}

/* Hover effet autour du lecteur */

audio:hover{
  border-color: #00bfff;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
}

@keyframes audioGradientFlow{
  0%{
    background-position: 0% 50%;
  }

  50%{
    background-position: 100% 50%;
  }

  100%{
    background-position: 0% 50%;
  }
}

/* 🎨 Hover visuel sans zoom pour images, vidéos, audio */

.media-hover{
  cursor: pointer;
  display: inline-block;
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 4px;
  background-color: #121212;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.media-hover:hover{
  box-shadow: 0 0 10px #00ffff, 0 0 10px #ff00ff;
  border-color: #ff00ff;
  z-index: 10;
}

/* Règlement */

.reglement-link{
  color: grey;
  text-decoration: none;
  font-size: 11px;
  display: inline-block;
  margin-right: 23px;
  vertical-align: middle;
}

.reglement-link:hover{
  color: #ff0000 !important;
}

/* Cacher sur les écrans mobiles (max 768px) */

@media (max-width: 768px){
  #emoji-picker, #color-picker{
    position: fixed !important;
    bottom: 60px;
    left: 10px;
    z-index: 2000;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

#send-button{
  cursor: pointer;
  margin-left: 5px;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: white;
}

/* Affichage Mobile */

@media (max-width: 768px){
  /* 📱 Conteneur principal mobile */

  #content-container{
    flex-direction: column !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* 📚 Sections principales en overlay (cachées par défaut) */

  #channel-sidebar, #chat-container, #user-list{
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto !important;
    padding: 0.5em !important;
    display: block !important;
    z-index: 1;
    transition: opacity 0.3s ease;
  }

  /* ✅ Section visible (active) */

  #channel-sidebar.active, #chat-container.active, #user-list.active{
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }

  /* 🧵 Hauteur chat responsive */

  #chat-container{
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 96px);
    padding-bottom: 120px !important;
  }

  .chat-messages{
    flex-grow: 1;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
  }

  /* 💬 Barre de message */

  #message-input-container{
    position: fixed;
    bottom: 48px;
    left: 0;
    right: 0;
    background: #111;
    padding: 8px 10px;
    z-index: 999;
    border-top: 1px solid #444;
  }

  /* Accueil : pas de bandeau vide */
  body.home-active #message-input-container{
    display: none !important;
  }

  #chat-input{
    display: flex;
    gap: 6px;
    align-items: center;
  }

  #chat-input input[type="text"]{
    flex: 1;
    padding: 8px;
    font-size: 14px;
    border-radius: 30px;
    border: 1px solid #555;
    background-color: #222;
    color: #fff;
  }

  #chat-input button{
    padding: 8px;
    border-radius: 6px;
    border: none;
    background-color: #0ff;
    color: #000;
    font-weight: bold;
    cursor: pointer;
  }

  /* 📱 Onglets fixes en bas */

  #mobile-tabs{
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background-color: #111;
    border-top: 1px solid #444;
    z-index: 9999;
  }

  #mobile-tabs button{
    flex: 1;
    padding: 10px 0;
    background: none;
    color: white;
    border: none;
    font-size: 14px;
  }

  #mobile-tabs button.active{
    color: #0ff;
    font-weight: bold;
  }

  main{
    margin-bottom: 48px;
  }
}

/* Mobile : affichage selon l'onglet actif */

@media (max-width: 768px){
  #chat-container, #channel-sidebar, #user-list{
    display: none;
  }

  #chat-container.active, #channel-sidebar.active, #user-list.active{
    display: block;
  }

  #mobile-tabs{
    display: flex;
    justify-content: space-around;
    background: #111;
    color: #fff;
    padding: 5px 0;
    border-top: 1px solid #333;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  #mobile-tabs button{
    background: none;
    border: none;
    color: #888;
    font-weight: bold;
    font-size: 14px;
  }

  #mobile-tabs button.active{
    color: #00ffff;
  }

  #top-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
  }

  body{
    overflow: hidden;
  }
}

@media (max-width: 768px){
  #chat-input{
    position: fixed;
    bottom: 48px;
    left: 0;
    right: 0;
    background: #111;
    padding: 6px 8px;
    z-index: 999;
    border-top: 1px solid #444;
  }

  #chat-container{
    padding-bottom: 120px !important;
  }
}

/* 🖥️ Masquer les onglets mobiles sur PC */

#mobile-tabs{
  display: none !important;
}

/* 📱 Réactiver les onglets sur mobile */

@media (max-width: 768px){
  #mobile-tabs{
    display: flex !important;
  }
}

@media (max-width: 768px){
  #channel-sidebar{
    order: 2;
  }

  main{
    display: flex;
    flex-direction: column;
  }
}

#chat-input{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #222222b8;
  border-top: 1px solid #444;
  border-radius: 10px;
}

#chat-input input[type="text"]{
  flex: 1;
  padding: 8px;
  font-size: 14px;
  border-radius: 30px;
  border: 1px solid #555;
  background-color: #222;
  color: #fff;
}

#chat-input button{
  outline: none;
}

#chat-input button{
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.input-buttons{
  display: flex;
  gap: 4px;
}

@media (max-width: 768px){
  #chat-input{
    flex-direction: row-reverse;
  }
}

/* 🌐 Liste des salons scrollable */

#channel-list-wrapper{
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 6px;
}

/* 👥 Liste des utilisateurs scrollable */

#user-list{
  display: flex;
  flex-direction: column;
  height: 100%;
}

#user-list ul#users{
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  padding-right: 6px;
}

/* 💬 Messages du chat scrollables */

.chat-messages{
  flex-grow: 1;
  max-height: calc(100vh - 180px);
  padding-right: 6px;
}

@media (max-width: 768px){
  html, body{
    overflow: hidden !important;
    height: 100% !important;
  }

  main{
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #channel-sidebar, #chat-container, #user-list{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: rgba(50, 51, 57, 255);
  }

  #channel-list-wrapper, .chat-messages, #users{
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 12px;
  }

  #create-channel{
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #444;
    background-color: rgba(20, 20, 20, 0.8);
  }
}

@media (max-width: 768px){
  #channel-sidebar{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: rgba(30, 30, 30, 0.85);
  }

  #channel-list-wrapper{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 80px;
  }

  #create-channel{
    position: fixed;
    bottom: 48px;
    left: 0;
    width: 100%;
    padding: 8px 12px;
    background-color: rgba(20, 20, 20, 0.95);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  #create-channel input, #create-channel button{
    width: 100%;
    margin-bottom: 6px;
  }
}

#mobile-tabs, #top-bar{
  display: none;
}

/* Cache top-bar et mobile-tabs quand la modale est visible */

#myModal:has(~ #top-bar), #myModal:has(~ #mobile-tabs){
  display: block;
}

body.modal-open #top-bar, body.modal-open #mobile-tabs{
  display: none !important;
}

@media (max-width: 480px){
  .modal-content{
    padding: 1.2em;
    border-radius: 12px;
    max-width: 95vw;
    width: 95vw;
    box-sizing: border-box;
  }

  .modal-content h2{
    font-size: 1.4em;
  }

  .modal-content label{
    font-size: 0.9em;
  }

  .modal-content input, .modal-content select{
    font-size: 0.95em;
    padding: 0.7em;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-content button{
    font-size: 1em;
    padding: 0.7em;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-image{
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
  }
}

/* 📱 Affichage mobile amélioré pour la palette d'émojis */

@media (max-width: 600px){
  #emoji-picker{
    position: absolute !important;
    bottom: 120px !important;
    left: 10px;
    right: 10px;
    z-index: 9999;
    max-height: 240px;
    overflow-y: auto;
    background: #222;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
    padding: 10px;
  }
}

@media (max-width: 600px){
  #top-bar h2{
    font-size: 15px;
    max-width: 50vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #top-bar .texte-laser{
    flex: 1;
    min-width: 0;
  }

  #top-bar{
    gap: 6px;
  }
}

/* Modal conditions */

.modal{
  display: none;
}

.modal.show{
  display: flex !important;
}

/* === Menu bas à droite === */

#menu-bottom{
  position: absolute;
  bottom: 23px;
  right: 0em;
  display: flex;
  gap: 11px;
  border-top: 1px solid #444;
  background: #222222b8;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 10px;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
}

/* Boutons du menu */

#menu-bottom .menu-button{
  flex-shrink: 0;
  padding: 0.5em 0.8em;
  border: none;
  border-radius: 6px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Hover animé identique à #create-channel */

#menu-bottom .menu-button:hover{
  background: linear-gradient(
    45deg,
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1)
  );
  background-size: 400% 400%;
  border-radius: 8px;
  transition: background-position 0.5s ease;
  animation: gradientThumb 10s ease infinite;
  box-shadow: 0 0 10px rgba(251, 0, 255, 0.6),
              0 0 10px rgba(0, 218, 222, 0.6);
  color: #fff;
}

/* Animation gradient bouton */

.modal-filament{
  position: relative;
  background-color: #1e1e24;
  border-radius: 12px;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  margin: auto;
  box-shadow: 0 0 12px 4px rgba(148, 0, 211, 0.3);
  overflow: hidden;
  z-index: 0;
}

/* Filament lumineux animé */

.modal-filament::before{
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 218, 222, 1) 0deg 60deg,
    rgba(251, 0, 255, 1) 60deg 120deg,
    transparent 120deg 360deg
  );
  animation: filament 6s linear infinite;
  z-index: 0;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.6;
}

/* Masque intérieur */

.modal-filament::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #1e1e24;
  border-radius: 10px;
  z-index: 1;
}

/* Contenu au-dessus du filament */

.modal-filament > *{
  position: relative;
  z-index: 2;
}

/* Animation rotation */

/* ========================= 
   Chat container
========================= */

#chat-container{
  display: flex;
  flex-direction: column;
}

/* =========================
   Wrapper onglets (salon + MP)
   ✅ Rangée du bas stable + MP au-dessus
   ✅ FIX: n’agrandit plus la zone -> déborde vers le haut (ne descend plus la rangée du bas)
========================= */

#room-tab-wrapper{
  height: 34px !important;
  min-height: 34px !important;
  position: relative !important;
  overflow: visible !important;
  display: flex;
  align-items: flex-end !important;
  padding-left: 16px;
  padding-bottom: 0 !important;
}

/* =========================
   Conteneur multi-onglets
   ✅ wrap-reverse => nouvelles rangées AU-DESSUS
   ✅ ancré en bas du wrapper
========================= */

#room-tabs{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-wrap: wrap-reverse !important;
  align-items: flex-end !important;
  align-content: flex-start !important;
  gap: 0 !important;
  row-gap: 2px;
  padding: 0 6px !important;
}

/* ✅ Le SALON (Général) reste toujours le 1er => rangée du bas, à gauche */

#room-tabs > #room-tab, #room-tabs > .room-tab:not(.mp){
  order: -1000 !important;
}

/* =========================
   Onglet SALON
========================= */

#room-tab{
  padding: 6px 14px;
  background: linear-gradient(180deg, #3a3a3a, #2b2b2b);
  border: 1px solid rgba(255,255,255,0.15);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #c084fc;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.6);
}

/* =========================
   Onglets MULTI (MP + salon)
   ✅ Non sélectionné = aligné
   ✅ Sélectionné = chevauche comme Coco
========================= */

.room-tab{
  padding: 6px 14px;
  background: linear-gradient(180deg, #3a3a3a, #2b2b2b);
  border: 1px solid rgba(255,255,255,0.15);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #c084fc;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.6);
  cursor: pointer;
  user-select: none;
}

/* ✅ Base (NON sélectionné) */

#room-tabs > #room-tab, #room-tabs > .room-tab{
  position: relative;
  transform: none !important;
  z-index: 1;
}

/* Petit “collage” propre (évite double bordure) */

#room-tabs > #room-tab:not(.active), #room-tabs > .room-tab:not(.active){
  margin-right: -1px !important;
  margin-left: 0 !important;
}

/* ✅ Sélectionné = chevauche uniquement quand actif */

#room-tabs > #room-tab.active, #room-tabs > .room-tab.active{
  z-index: 10 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Empêche “Général” de partir trop à gauche quand actif */

#room-tabs > #room-tab.active{
  margin-left: 0 !important;
}

/* Masque la jonction sous l’onglet actif */

#room-tabs > #room-tab.active::after, #room-tabs > .room-tab.active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #2b2b2b;
}

/* ✅ MP non lu = onglet jaune plein */

.room-tab.mp.unread:not(.active){
  background: #FFCA00 !important;
  border: 1px solid #000 !important;
  color: #c084fc !important;
  box-shadow: 0 0 10px rgba(255,204,0,0.45) !important;
}

/* ✅ Scroll si trop d’onglets (valeur par défaut) */

#room-tabs{
  max-height: 106px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
}

/* scrollbar onglets (optionnel) */

#room-tabs::-webkit-scrollbar{
  width: 8px;
}

#room-tabs::-webkit-scrollbar-thumb{
  border-radius: 8px;
}

/* =========================
   Messages collés sous les onglets
========================= */

.chat-messages{
  flex: 1;
  overflow-y: auto;
  margin-top: -1px !important;
}

/* ✅ Top-bar toujours au-dessus (PC + mobile) */

#top-bar{
  z-index: 20000 !important;
}

/* ✅ PC : autoriser plus de rangées avant scroll */

@media (min-width: 769px){
  #room-tabs{
    max-height: 120px !important;
  }
}

/* ✅ MOBILE : onglets multi-rangées sans faire descendre la zone */

@media (max-width: 768px){
  :root{
    --tabs-stack-h: 140px;
    --tabs-extra: calc(var(--tabs-stack-h) - 34px);
    --reserve-top-room: calc(42px + var(--tabs-extra));
    --reserve-top-mp: calc(42px + var(--tabs-extra));
  }

  #room-tab-wrapper{
    height: var(--tabs-stack-h) !important;
    min-height: var(--tabs-stack-h) !important;
    overflow: visible !important;
  }

  #room-tabs{
    max-height: var(--tabs-stack-h) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* ✅ Décale les panneaux vers le bas du même surplus */

  #room-users-panel{
    top: calc(52px + var(--tabs-extra)) !important;
  }

  #mp-panel{
    top: calc(52px + var(--tabs-extra)) !important;
  }
}

/* ✅ Chevauchement plus visible (sans reflow) */

:root{
  --tab-overlap: 10px;
  --tab-inactive-top: 1px;
}

/* Inactifs : un peu plus “plats” */

#room-tabs > #room-tab, #room-tabs > .room-tab{
  top: var(--tab-inactive-top) !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.45) !important;
}

/* Actif SALON : plus contrasté + glow léger */

#room-tabs > #room-tab.active, body:not(.mp-active) #room-tabs > #room-tab{
  top: 0 !important;
}

#room-tabs > #room-tab.active::before, body:not(.mp-active) #room-tabs > #room-tab::before{
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.70),
    0 0 10px rgba(192,132,252,0.22) !important;
}

/* Actif MP : idem, chevauchement visible des 2 côtés */

#room-tabs > .room-tab.active{
  top: 0 !important;
}

#room-tabs > .room-tab.active::before{
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.70),
    0 0 10px rgba(192,132,252,0.22) !important;
}

/* ✅ STOP reflow: l'actif ne doit JAMAIS utiliser margin -6 (sinon le salon bouge) */

#room-tabs > #room-tab.active, #room-tabs > .room-tab.active{
  margin-left: 0 !important;
  margin-right: -1px !important;
}

/* ✅ Onglet Général en gradient animé */

#room-title-text{
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(45deg,
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1)
  );
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: laserTexteMenu 2s linear infinite;
}

/* =====================================================
   🔐 MODE MP : masquer la liste des utilisateurs
   ===================================================== */

body.mp-active #user-list{
  display: none !important;
}

/* =====================================================
   💬 MP = même layout que salon
   ===================================================== */

body.mp-active #chat-container{
  flex: 1 1 auto;
  width: 100%;
}

/* ⭐ Upload fichiers (starbis.gif) — SALON UNIQUEMENT */

body:not(.mp-active) .sprite-button{
  display: inline-block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: default !important;
  z-index: 20;
  left: 0;
}

/* ================= PANEL ================= */

#mp-panel{
  padding: 10px;
  box-sizing: border-box;
  background: #2b2f36;
  border-radius: 18px;
  border: 1px solid #7d47fa;
  box-shadow: 0 0 16px rgba(155, 0, 255, 0.6);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

body.mp-active #mp-panel{
  display: flex;
}

/* ================= HEADER ================= */

.mp-header{
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  box-sizing: border-box;
}

.mp-title{
  display: flex;
  gap: 6px;
  font-size: 13px;
  font-weight: bold;
  color: #000;
}

.mp-age{
  background: #8aa0c8;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
}

/* Priorité rôle (optionnel) */

.mp-age[data-role="super_admin"],
.mp-age[data-role="admin"]{
  background: red;
}

.mp-age[data-role="modo"]{
  background: limegreen;
}

/* Sinon couleur selon genre */

.mp-age[data-gender="Homme"]{
  background: dodgerblue;
}

.mp-age[data-gender="Femme"]{
  background: #f0f;
}

.mp-age[data-gender="Trans"]{
  background: #EE82EE;
}

.mp-age[data-gender="non spécifié"]{
  background: #777;
}

.mp-city{
  text-transform: uppercase;
}

/* ❌ ⭐ */

.mp-header-actions{
  display: flex;
  gap: 4px;
}

/* ================= BODY ================= */

.mp-body{
  flex: 1;
  display: flex;
  gap: 8px;
  overflow: hidden;
}

/* ================= AVATAR ================= */

.mp-avatar{
  flex: 1;
  max-height: 100%;
  background: #B5CAEE;
  border: 1px solid #222;
  padding: 8px;
  color: #000;
  overflow: hidden;
}

/* ✅ PC : avatar MP affiché en entier, sans cadre, comme sur mobile */
@media (min-width: 769px){
  #mp-panel .mp-avatar{
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mp-panel .mp-avatar img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ================= COLONNE ================= */

.mp-actions{
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ================= BOUTONS (24x24 STRICT) ================= */

.mp-icon, #mp-close-btn{
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  display: block;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 24px 48px;
  background-color: transparent;
  cursor: pointer;
}

.mp-icon:hover, #mp-close-btn:hover{
  background-position: 0 -24px;
}

.mp-icon:focus, .mp-icon:active, #mp-close-btn:focus, #mp-close-btn:active{
  outline: none;
  box-shadow: none;
}

/* ================= IMAGES ================= */

#mp-close-btn{
  background-image: url("/icon/croix.gif");
}

.mp-icon.profile{
  background-image: url("/icon/starbis.gif");
}

.mp-icon.mic{
  background-image: url("/icon/micro.gif");
}

.mp-icon.cam{
  background-image: url("/icon/camzy.gif");
}

.mp-icon.alert{
  background-image: url("/icon/alerte.gif");
}

.mp-icon.warn{
  background-image: url("/icon/kill.gif");
}

.mp-icon.warn.is-blocked{
  background-position: 0 -24px;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 92, 92, .68),
    0 0 10px rgba(255, 72, 72, .38);
}

.mp-icon.warn.is-blocked:hover{
  background-position: 0 -24px;
}

.mp-icon.add{
  background-image: url("/icon/ami.gif");
}

.mp-icon.help{
  background-image: url("/icon/questor.gif");
}

#room-tab-wrapper, #room-tabs{
  position: relative;
  z-index: 5000;
}

/* =====================================================
   ✅ LISTE DU SALON + FIX chevauchement messages
   (bloc complet à coller tel quel)
   ===================================================== */

/* ✅ Réserve l’espace à droite pour éviter que le panneau couvre les messages */

:root{
  --room-panel-w: 240px;
  --room-panel-right: 40px;
  --room-panel-gap: 16px;
}

/* 🔑 Assure que le panneau absolu se positionne bien dans la zone chat */

#chat-container{
  position: relative;
}

/* =========================
   DESKTOP — réserver la hauteur pour voir la 2e rangée d’onglets
   + décale les panneaux (sinon ils recouvrent les onglets)
   + réduit l'espace entre rangées d'onglets
========================= */

@media (min-width: 769px){
  :root{
    --tabs-stack-h: 106px;
    --tabs-extra: calc(var(--tabs-stack-h) - 34px);
    --tab-inactive-top: 1px;
  }

  #room-tab-wrapper{
    height: var(--tabs-stack-h) !important;
    min-height: var(--tabs-stack-h) !important;
    overflow: visible !important;
  }

  #room-tabs{
    max-height: var(--tabs-stack-h) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    row-gap: 1px !important;
  }

  /* panneaux sous les onglets (salon + mp) */

  #room-users-panel, #mp-panel{
    top: calc(60px + var(--tabs-extra)) !important;
  }

  /* si tu utilises tes variables reserve-top */

  :root{
    --reserve-top-room: calc(42px + var(--tabs-extra));
    --reserve-top-mp: calc(42px + var(--tabs-extra));
  }
}

/* =========================
   LISTE DU SALON
========================= */

#room-users-panel{
  position: absolute;
  top: 60px;
  right: var(--room-panel-right);
  width: var(--room-panel-w);
  max-height: 70vh;
  background: #2b2f36;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 3000;
}

/* ✅ Empêche les messages de passer sous le panneau (salon uniquement) */

body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
  padding-right: calc(var(--room-panel-w) + var(--room-panel-right) + var(--room-panel-gap));
  box-sizing: border-box;
}

/* Header */

.room-users-header{
  flex-shrink: 0;
  padding: 6px 8px;
  border-bottom: 1px solid #444;
}

/* Liste utilisateurs */

#room-users-panel ul#users{
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
}

/* Un utilisateur */

#room-users-panel #users li{
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
}

#room-users-panel #users li:hover{
  background: rgba(255,255,255,0.08);
}

/* Layout wrapper */

#chat-wrapper main{
  display: flex;
  height: calc(100vh - 50px);
}

#channel-sidebar{
  width: 240px;
  flex-shrink: 0;
}

#chat-container{
  flex: 1;
  min-width: 0;
}

/* Sidebar droite désactivée */

/* 🔐 MP ACTIF → MASQUAGE TOTAL LISTE SALON + annule la réserve à droite */

body.mp-active #room-users-panel{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mp-active #chat-messages, body.mp-active .chat-messages{
  padding-right: 0 !important;
}

/* Gestion clic panneau */

#room-users-panel{
  pointer-events: none;
}

body:not(.mp-active) #room-users-panel{
  pointer-events: auto;
}

/* MP panel au-dessus */

#mp-panel{
  position: absolute;
  z-index: 6000;
}

/* ✅ OVERRIDE MOBILE: recaler le cadre "Liste du salon" (plus à droite) */

@media (max-width: 768px){
  :root{
    --room-panel-right: 24px;
    --room-panel-w: 214px;
    --room-panel-gap: 10px;
  }

  #room-users-panel{
    right: var(--room-panel-right) !important;
    width: var(--room-panel-w) !important;
    max-width: calc(100vw - (var(--room-panel-right) * 2)) !important;
  }

  /* ✅ IMPORTANT : sur mobile, évite de trop réduire la zone messages */

  body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
    padding-right: 0 !important;
  }
}

/* =====================================================
   ✅ MP : structure header / contenu
   ===================================================== */

.pm-header{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

.pm-time{
  color: #888;
  font-size: 12px;
}

.pm-name{
  font-weight: bold;
}

.pm-sep{
  font-weight: bold;
}

/* pm-content = UNIQUEMENT pour médias (images / fichiers) */

.pm-content{
  margin-left: 0;
  margin-top: 4px;
}

/* Texte MP = toujours inline, jamais indenté */

.private-message .pm-text{
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
}

.pm-content img, .pm-content .user-card{
  margin-left: 0;
  margin-top: 4px;
}

/* =====================================================
   ✅ CORRECTION DÉFINITIVE ALIGNEMENT MP TEXTE
   ===================================================== */

.private-message{
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0;
  line-height: 1.4;
}

.private-message .pm-time{
  margin-right: 4px;
  color: #888;
  font-size: 12px;
}

.private-message .pm-name{
  font-weight: bold;
  white-space: nowrap;
}

.private-message .pm-sep{
  margin-right: 4px;
}

.private-message .pm-text{
  white-space: pre-wrap;
}

/* ❌ ANNULATION TOTALE DE L’ANCIEN SYSTÈME POUR LE TEXTE */

.private-message .pm-content{
  margin-left: 0 !important;
  margin-top: 0 !important;
  display: inline !important;
}

/* =====================================================
   ✅ FIX MP AUDIO (fichiers) : ne pas compresser le lecteur
   ===================================================== */

/* MP "fichier" = header puis contenu en bloc */

.private-message.pm-file-msg{
  display: block !important;
}

/* Le conteneur média doit prendre une vraie largeur */

.private-message.pm-file-msg .pm-content{
  display: block !important;
  width: 100% !important;
  margin-top: 6px;
}

/* Header du fichier en ligne */

.private-message.pm-file-msg .pm-header{
  gap: 4px;
}

/* MP texte = une seule ligne (heure pseudo : texte) */

.private-message.pm-text-msg .pm-header{
  gap: 4px;
}

/* ✅ Mobile : ne pas réduire la zone messages */

@media (max-width: 768px){
  body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
    padding-right: 0 !important;
  }
}

@media (min-width: 769px){
  #user-list{
    display: none !important;
  }
}

/* ✅ PC + Mobile : titre cliquable */

#room-users-title{
  cursor: default !important;
  user-select: none;
}

/* indicateur */

#room-users-title::after{
  content: " ▾";
  opacity: .8;
  font-weight: normal;
}

#room-users-panel.collapsed #room-users-title::after{
  content: " ▸";
}

/* collapsed => cache la liste */

#room-users-panel.collapsed ul#users{
  display: none !important;
}

/* panneau réduit */

#room-users-panel.collapsed{
  max-height: 44px !important;
}

/* ✅ Mobile tabs: une seule logique d’affichage */

@media (max-width: 768px){
  #channel-sidebar, #chat-container, #user-list{
    display: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
  }

  #channel-sidebar.active, #chat-container.active, #user-list.active{
    display: flex !important;
    flex-direction: column;
  }
}

/* =========================
   MP — MOBILE: réserve seulement sur la hauteur du panel (FIX bas)
   ========================= */

/* 🔧 Dimensions + position réelles du panel */

:root{
  --mp-panel-w: 214px;
  --mp-panel-h: 216px;
  --mp-panel-top: 60px;
  --mp-panel-right: 40px;
  --mp-panel-gap: 16px;
}

/* (optionnel mais recommandé) Synchronise #mp-panel avec les variables */

#mp-panel{
  top: var(--mp-panel-top);
  right: var(--mp-panel-right);
  width: var(--mp-panel-w);
  height: var(--mp-panel-h);
}

/* ✅ PC: on réserve à droite sur toute la hauteur (OK sur desktop) */

@media (min-width: 769px){
  body.mp-active #chat-messages, body.mp-active .chat-messages{
    padding-right: calc(var(--mp-panel-w) + var(--mp-panel-right) + var(--mp-panel-gap)) !important;
    box-sizing: border-box;
  }
}

/* ✅ MOBILE: on réserve uniquement sur la hauteur du panel, à partir de son TOP */

@media (max-width: 768px){
  /* 1) sur mobile: pas de padding-right global */

  body.mp-active #chat-messages, body.mp-active .chat-messages{
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* 2) réserve uniquement sur la zone du panel (top + hauteur) */

  body.mp-active #chat-messages::before, body.mp-active .chat-messages::before{
    content: "";
    float: right;
    width: calc(var(--mp-panel-w) + var(--mp-panel-right) + var(--mp-panel-gap));
    height: calc(var(--mp-panel-h) + var(--mp-panel-gap));
    margin-top: var(--mp-panel-top);
  }

  /* 3)

  /* Accueil : pas de bandeau vide */
  body.home-active #message-input-container{
    display: none !important;
  }

  /* 3) clean float */

  body.mp-active #chat-messages::after, body.mp-active .chat-messages::after{
    content: "";
    display: block;
    clear: both;
  }
}

/* =====================================================
   ✅ FIX DEFINITIF : heure stable devant pseudo (MP)
   - largeur fixe pour l'heure
   - plus d'align-items: baseline (cause le "bouge" sur longs messages)
   ===================================================== */

/* MP texte */

.private-message.pm-text-msg{
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Header (heure + pseudo + :) */

.private-message.pm-text-msg .pm-header{
  display: flex !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Heure = colonne fixe -> ne bouge jamais */

.private-message.pm-text-msg .pm-time{
  width: 46px !important;
  flex: 0 0 46px !important;
  text-align: right !important;
  margin-right: 6px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* Pseudo + ":" */

.private-message.pm-text-msg .pm-name{
  white-space: nowrap !important;
  margin-right: 4px !important;
  line-height: 1.4 !important;
}

.private-message.pm-text-msg .pm-sep{
  margin-right: 6px !important;
  line-height: 1.4 !important;
}

/* Texte */

.private-message.pm-text-msg .pm-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

/* MP fichiers (si tu as aussi l'heure sur les fichiers) */

.private-message.pm-file-msg .pm-header{
  display: flex !important;
  align-items: center !important;
}

.private-message.pm-file-msg .pm-time{
  width: 46px !important;
  flex: 0 0 46px !important;
  text-align: right !important;
  margin-right: 6px !important;
  white-space: nowrap !important;
}

/* =========================================================
   PATCH MOBILE — header panel ne bouge plus
   + derniers messages non masqués
   + messages MP/SALON commencent SOUS le cadre (sans float)
   (À COLLER TOUT EN BAS)
   ========================================================= */

:root{
  --panel-w: 214px;
  --panel-h: 216px;
  --panel-gap: 16px;
  --reserve-top-room: 42px;
  --reserve-top-mp: 42px;
  --mobile-tabs-h: 48px;
  --mobile-input-h: 15px;
}

/* Sécurité anti-débordement pour les longues chaînes */

#chat-messages, .chat-messages, #chat-messages .message, .chat-messages .message, .private-message{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ MOBILE */

@media (max-width: 768px){
  /* 1) Empêche l’input + tabs de masquer les derniers messages */

  #chat-messages, .chat-messages{
    padding-bottom: calc(
      var(--mobile-tabs-h) + var(--mobile-input-h) + 16px + env(safe-area-inset-bottom)
    ) !important;
    scroll-padding-bottom: calc(
      var(--mobile-tabs-h) + var(--mobile-input-h) + 16px + env(safe-area-inset-bottom)
    ) !important;
  }

  /* 2) Si ta barre d’écriture est en fixed, on la cale au-dessus des tabs */

  #chat-input, #message-input-container{
    bottom: calc(var(--mobile-tabs-h) + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }

  #mobile-tabs{
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 9998 !important;
  }

  /* ✅ OVERRIDE MOBILE: recaler le MP panel (plus à droite / moins à gauche) */

  :root{
    --mp-panel-right: 24px;
    --mp-panel-w: 214px;
  }

  #mp-panel{
    right: var(--mp-panel-right) !important;
    width: var(--mp-panel-w) !important;
    max-width: calc(100vw - (var(--mp-panel-right) * 2)) !important;
  }

  /* 3) IMPORTANT : on NE MODIFIE PAS #mp-panel / #room-users-panel ici
        (sinon ça “bouge” ton titre + icônes) */

  /* 4) SUPPRESSION TOTALE de l'ancien système "réserve/retour ligne" (float) */

  #chat-messages::before, .chat-messages::before, #chat-messages::after, .chat-messages::after{
    content: none !important;
    display: none !important;
    float: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    shape-outside: none !important;
    clear: none !important;
  }

  /* 5) NOUVEAU : les messages commencent SOUS le cadre (pas à côté) */

  /* SALON (pas mp-active) */

  body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
    padding-top: calc(var(--reserve-top-room) + var(--panel-h) + var(--panel-gap)) !important;
  }

  /* MP (mp-active) */

  body.mp-active #chat-messages, body.mp-active .chat-messages{
    padding-top: calc(var(--reserve-top-mp) + var(--panel-h) + var(--panel-gap)) !important;
  }
}

/* 4) Fix header “Liste du salon” : icônes + titre ne bougent pas */

#room-users-panel .room-users-header{
  display: flex;
  align-items: center;
  gap: 6px;
}

#room-users-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* =========================
   ✅ Modal "déconnecté" (style Coco)
========================= */

.coco-disconnect-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 99999;
}

.coco-disconnect-box{
  background: #6a3a3a;
  border: 1px solid #000;
  width: 460px;
  max-width: calc(100vw - 40px);
  padding: 18px 18px 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}

.coco-disconnect-text{
  color: #000;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.25;
  font-weight: bold;
}

.coco-disconnect-text p{
  margin: 0 0 10px 0;
}

#serverDisconnectBtn{
  background: #1f7a1f;
  border: 1px solid #000;
  padding: 6px 14px;
  font-weight: bold;
  cursor: pointer !important;
}

#serverDisconnectBtn:hover{
  filter: brightness(1.1);
}

#siteBanOverlay{
  z-index: 100000;
}

#siteBanMessage,
#siteBanCountdownLine{
  color: #000;
}

#siteBanCountdown{
  font-weight: 800;
}

#siteBanRefreshBtn{
  background: #1f7a1f;
  border: 1px solid #000;
  padding: 6px 14px;
  font-weight: bold;
  cursor: pointer !important;
}

#siteBanRefreshBtn:hover{
  filter: brightness(1.1);
}

body.site-ban-active{
  overflow: hidden;
}

/* Optionnel : état offline */

body.server-offline{
  overflow: hidden;
}

/* ✅ Quand le serveur est offline : on masque toute l'UI derrière l'overlay */

body.server-offline #chat-container, body.server-offline #channel-sidebar, body.server-offline #user-list, body.server-offline #mobile-tabs,
body.site-ban-active #chat-container, body.site-ban-active #channel-sidebar, body.site-ban-active #user-list, body.site-ban-active #mobile-tabs{
  display: none !important;
}

@media (max-width: 768px){
  /* On force le corps de page à prendre exactement la hauteur VISIBLE (dvh = dynamic viewport height) */

  html, body{
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* Si vous avez un conteneur principal qui englobe tout */

  #chat-container, .main-wrapper{
    display: flex;
    flex-direction: column;
    height: 100% !important;
    width: 100%;
    position: static !important;
  }
}

/* =========================================================
   PATCH MOBILE CHROME — clavier / remontée messages
   ========================================================= */

@media (max-width: 768px){
  :root{
    --tabs-h: 48px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --input-h: 54px;
    --gap-bottom: 6px;
  }

  /* main = hauteur visible moins la barre du bas (tabs + safe area) */

  main{
    margin-top: 0 !important;
    height: calc(100dvh - var(--tabs-h) - var(--safe-bottom)) !important;
    min-height: calc(100dvh - var(--tabs-h) - var(--safe-bottom)) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  #content-container{
    padding-top: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #chat-container{
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ✅ IMPORTANT :
     padding-bottom = SEULEMENT la barre d’écriture (pas les tabs),
     puisque main a déjà retiré les tabs */

  #chat-messages, .chat-messages{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: calc(var(--input-h) + var(--gap-bottom)) !important;
    scroll-padding-bottom: calc(var(--input-h) + var(--gap-bottom));
  }

  /* input fixé au-dessus des tabs */

  #message-input-container{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--tabs-h) + var(--safe-bottom)) !important;
    z-index: 10001 !important;
  }

  #chat-input{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* tabs en bas (si l'élément existe) */

  #mobile-tabs{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--tabs-h) + var(--safe-bottom)) !important;
    padding-bottom: var(--safe-bottom) !important;
    z-index: 10002 !important;
  }
}

/* ✅ Pseudo Admin en gradient animé (texte) */

.admin-gradient{
  background: linear-gradient(45deg,
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1),
    rgba(251, 0, 255, 1),
    rgba(0, 218, 222, 1)
  );
  background-size: 400% 400%;
  animation: gradientThumb 10s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
}

/* =========================
   ACCUEIL — salons en panneau (style Coco) sans déplacer les onglets
========================= */

/* Mode Accueil : on masque le chat + panels */

body.home-active #chat-messages, body.home-active #chat-input, body.home-active #mp-panel, body.home-active #room-users-panel, body.home-active #emoji-picker{
  display: none !important;
}

/* On garde la place de la sidebar pour éviter le "shift" des onglets */

body.home-active #channel-sidebar{
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Panneau Accueil (injecté par privateTabs.js) */

#home-salons-panel{
  display: none;
  margin-top: 10px;
}

body.home-active #home-salons-panel{
  display: block;
}

#home-salons-box{
  width: 320px;
  max-width: 92vw;
  height: 62vh;
  max-height: 560px;
  background: #bfbfbf;
  border: 1px solid #111;
  border-radius: 3px;
  padding: 10px;
  box-sizing: border-box;
}

#home-salons-title{
  font-weight: bold;
  text-align: center;
  color: #111;
  margin: 0 0 10px 0;
}

#home-salons-scroll{
  height: calc(100% - 28px);
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.06);
  padding: 6px;
  box-sizing: border-box;
}

#home-channel-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Forcer couleurs "Coco" dans le panneau */

#home-salons-panel .channel, #home-salons-panel .channel-group-title{
  color: #111 !important;
  text-shadow: none !important;
}

#home-salons-panel .channel{
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

#home-salons-panel .channel:hover{
  background: rgba(0,0,0,0.08);
}

#home-salons-panel .channel.selected{
  background: rgba(0,0,0,0.15);
}

#home-salons-panel .channel-group-title{
  padding: 8px 6px 4px;
  font-weight: bold;
  opacity: .75;
}

/* Affichage mobile salon */

/* ✅ MOBILE : ne pas réserver de place à droite => chat centré */

@media (max-width: 900px), (pointer: coarse){
  body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
    padding-right: 0 !important;
  }

  /* optionnel: équilibre visuel (marges égales) */

  #chat-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  body:not(.mp-active) #chat-messages, body:not(.mp-active) .chat-messages{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =====================================================
   💥 FIX LARGEUR CHAT MOBILE (IMPORTANT)
   ===================================================== */

@media (max-width: 768px){
  #chat-container{
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  #chat-messages, .chat-messages{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }
}

/* ✅ SALONS : le centre ne doit jamais s’écraser en colonne fine */

main{
  min-width: 0;
}

/* colonne centrale */

#chat-container{
  flex: 1 1 auto;
  min-width: 0;
}

/* la zone messages doit suivre la largeur du centre */

#chat-container .chat-messages{
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   ✅ SUPERPOSITION webcam SUR l’icône de rôle (liste salon)
   Structure: .badge-wrapper > .badge-icons > img (+ webcam)
   ========================================================= */

/* conteneur des icônes (rôle + webcam) */

.badge-icons{
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-block !important;
  overflow: visible !important;
}

/* icône de rôle/genre = base */

.badge-icons > img:not(.webcam-active-icon){
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/* icône webcam = par-dessus (superposée) */

.badge-icons > img.webcam-active-icon{
  position: absolute !important;
  top: 1px !important;
  left: 0px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  z-index: 3 !important;
  cursor: pointer !important;
}

/* Pseudo au micro */

#voxi-users{
  width: 100%;
}

#voxi-users .voxi-user{
  width: 100%;
  overflow: hidden;
}

#voxi-users .voxi-user-label{
  display: inline-block;
  white-space: nowrap;
  transform-origin: left center;
}

/* PC uniquement : élargit la liste du salon */

@media (min-width: 769px){
  :root{
    --room-panel-w: 280px;
  }
}

/* ✅ LISTE SALON : pseudo 1 ligne, jamais de wrap, ellipsis si manque de place */

#room-users-panel #users .user-item{
  min-width: 0;
}

#room-users-panel #users .user-item .username-span{
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ MOBILE : cadre salon plus large + pseudo visible */

@media (max-width: 768px){
  :root{
    --room-panel-w: 250px;
    --room-panel-right: 12px;
  }

  #room-users-panel{
    width: var(--room-panel-w) !important;
    right: var(--room-panel-right) !important;
    max-width: calc(100vw - (var(--room-panel-right) * 2)) !important;
  }

  /* Pseudos plus “fit” sans compression */

  #room-users-panel #users .user-item .username-span{
    font-size: 1em !important;
    letter-spacing: 0 !important;
  }
}

/* =========================
   ✅ YouTube MP = comme salon (en dessous)
========================= */

/* ✅ MP: Youtube en dessous */

.private-message.pm-text-msg{
  flex-wrap: wrap;
}

.private-message.pm-text-msg .pm-media{
  flex: 0 0 100%;
  width: 100%;
}

.private-message.pm-text-msg .pm-media .youtube-wrapper{
  width: 64%;
  max-width: 400px;
  aspect-ratio: 16 / 9;
  margin: 6px 0 10px 52px;
}

.private-message.pm-text-msg .pm-media .youtube-wrapper iframe{
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* =========================================================
   ✅ MOBILE: plus de scroll vertical page (seuls les blocs internes scrollent)
   À COLLER TOUT EN BAS
   ========================================================= */

@media (max-width: 768px){
  :root{
    --tabs-h: 48px;
    --safe-b: env(safe-area-inset-bottom, 0px);
  }

  html, body{
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* sur mobile tu caches top-bar, donc on annule les réserves desktop */

  main{
    margin-top: 0 !important;
    height: calc(100dvh - var(--tabs-h) - var(--safe-b)) !important;
    min-height: calc(100dvh - var(--tabs-h) - var(--safe-b)) !important;
    overflow: hidden !important;
  }

  #content-container, #chat-container{
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* les “pages” actives prennent toute la hauteur */

  #channel-sidebar.active, #chat-container.active, #user-list.active{
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* ✅ SEULES zones scrollables */

  #chat-messages, .chat-messages, #channel-list-wrapper, #room-users-panel ul#users, #users{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ✅ SALONS : nom à gauche, compteur collé à droite */

#channel-list li.channel, #home-channel-list li.channel{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* partie gauche = prend toute la largeur */

#channel-list li.channel .channel-left, #home-channel-list li.channel .channel-left{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* compteur = largeur fixe, aligné à droite */

#channel-list li.channel .user-count, #home-channel-list li.channel .user-count{
  margin-left: auto;
  flex: 0 0 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* =========================================================
   ✅ FIX CUT GAUCHE/DROITE (PC + mobile) — À METTRE TOUT EN BAS
   ========================================================= */

#chat-container{
  min-width: 0 !important;
}

#chat-messages, .chat-messages{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  overflow-x: hidden !important;
}

#chat-messages .message, .chat-messages .message, #chat-messages .system-message, .chat-messages .system-message, .private-message{
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* =========================================================
   ✅ DESKTOP FIX FINAL (PC) — onglets stables + marge propre
   (annule margins qui rétrécissent + enlève double padding-top)
   ========================================================= */

@media (min-width: 769px){
  /* 1) stop double décalage vertical */

  #content-container{
    padding-top: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  main{
    margin-top: 40px !important;
    height: calc(100vh - 40px) !important;
    overflow: hidden !important;
  }

  /* 2) colonne centrale: marge = padding (ne réduit pas la largeur utile) */

  #chat-container{
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 12px 14px 14px 14px !important;
    box-sizing: border-box !important;
  }

  /* 3) onglets: ne bougent plus */

  #room-tab-wrapper{
    flex: 0 0 auto !important;
  }

  /* 4) messages: prennent l'espace, sans max-height + sans margins */

  #chat-messages, .chat-messages{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* 5) input: espace vertical via margin-top seulement (pas de margins latérales) */

  #chat-input, #message-input-container{
    flex: 0 0 auto !important;
    margin: 5px 0 0 0 !important; /* Espace entre input sur pc */ 
  }
}

/* ✅ ACCUEIL (PC) : enlever la marge du haut */

@media (min-width: 769px){
  body.home-active #channel-sidebar, body.home-active #user-list{
    margin-top: 8 !important;
    height: calc(100vh - 40px) !important;
  }
}

/* =========================================================
   ✅ ACCUEIL (PC) : supprime le gros vide (create-channel en bas "normal")
   ========================================================= */

@media (min-width: 769px){
  /* sidebar doit être une colonne qui remplit la hauteur utile */

  body.home-active #channel-sidebar{
    height: calc(100vh - 40px) !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* la liste prend tout l’espace disponible */

  body.home-active #channel-list-wrapper{
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }

  body.home-active #channel-list{
    padding-bottom: 0 !important;
  }

  /* ✅ le bloc "Créer" n'est plus en absolute -> plus de grand vide */

  body.home-active #create-channel{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: auto !important;
    padding-top: 10px !important;
  }
}

/* ✅ Identification (myModal ouverte) : ne pas afficher Accueil + Liste du salon */
body.modal-open #room-tab-wrapper,
body.modal-open #room-users-panel{
  display: none !important;
}


/* =========================================================
   ✅ CREATE SALON — FORCE STYLE (input + bouton)
   - couvre #create-channel / #home-create-channel
   - couvre aussi les classes .create-channel-input / .create-channel-btn
   ========================================================= */

#create-channel input,
#create-channel input[type="text"],
#create-channel #new-channel-name,
#home-create-channel input,
#home-create-channel input[type="text"],
#home-create-channel #home-new-channel-name,
.create-channel-input{
  background-color: #121212 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border: 1px solid #555 !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

#create-channel input::placeholder,
#home-create-channel input::placeholder,
.create-channel-input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

#create-channel button,
#create-channel #create-channel-button,
#home-create-channel button,
#home-create-channel #home-create-channel-button,
.create-channel-btn{
  background-color: #444 !important;
  color: #ffffff !important;
  border: none !important;
}

#create-channel button:hover,
#home-create-channel button:hover,
.create-channel-btn:hover{
  color: #ffffff !important;
}


/* =========================================================
   ✅ PC : cadre micro aligné + input intelligent (final)
   ✅ Même position du cadre micro (salon / accueil / MP)
   ✅ Espace réservé UNIQUEMENT si #voxi est visible
   ✅ Si #voxi est caché (salon non-vox / accueil / MP) => PAS d’espace
   ========================================================= */
@media (min-width: 769px){
  :root{
    --voxi-w: 192px;               /* largeur réelle du cadre micro */
    --voxi-input-gap: 1px;         /* espace visuel input -> micro */
    --voxi-input-advance: 26px;    /* fait avancer l’input vers le micro */
    --voxi-right-fallback: 38px;   /* colonne droite (comme capture 1) */
  }

  /* =========================
     Cadre micro (position)
     ========================= */
  body #voxi{
    left: auto !important;
    top: auto !important;
    bottom: 11px !important;
    right: var(--room-panel-right, var(--voxi-right-fallback)) !important;
    transform: none !important;
    /* ✅ ne pas toucher width/height */
  }

  /* =========================
     INPUT : base (aucun espace réservé)
     ========================= */
  #chat-input{
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-right: 0 !important; /* ✅ par défaut = pas d’espace */
  }

  #message-input{
    min-width: 0 !important;
  }

  /* =========================
     INPUT : espace réservé UNIQUEMENT si #voxi est visible
     (salon vox / accueil avec micro / MP avec micro)
     ========================= */
  body:has(#voxi:not([style*="display:none"]):not([style*="display: none"])) #chat-input{
    margin-right: calc(
      var(--room-panel-right, var(--voxi-right-fallback)) +
      var(--voxi-w) +
      var(--voxi-input-gap) -
      var(--voxi-input-advance)
    ) !important;
  }

  /* =========================
     INPUT : si #voxi est caché => aucun espace
     (salon non-vox / accueil sans micro / MP sans micro)
     ========================= */
  body:has(#voxi[style*="display:none"]) #chat-input,
  body:has(#voxi[style*="display: none"]) #chat-input{
    margin-right: 0 !important;
  }
}

/* =========================================================
   ✅ MOBILE ONLY
   - Masquer bouton envoyer
   - Masquer cadre micro sur Accueil
   - Masquer cadre micro en MP (même si on est dans un salon vox)
   ========================================================= */
@media (max-width: 768px){

  /* 1) Masquer le bouton envoyer (chat + MP, car même barre d'input) */
  #send-button{
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* 2) Le cadre micro ne doit pas apparaître sur Accueil */
  body.home-active #voxi{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 3) En MP, on masque aussi le cadre micro mobile
        (même si l'utilisateur est dans un salon vox) */
  body.mp-active #voxi{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* =========================
   🔐 Auth modal (tabs)
   ========================= */
.auth-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin: 10px 0 12px;
}
.auth-tab{
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#fff;
  padding:8px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.auth-tab.active{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
}

/* =========================
   Auth modal: date de naissance compact + lien reset
   (ajouts non-invasifs)
   ========================= */
#myModal .birthdate-row{
  display:flex;
  gap:10px;
  max-width:280px;
  margin: 6px auto 14px auto;
}
#myModal .birthdate-row input{
  margin: 0 !important;
  max-width: none !important;
  flex: 1 1 0;
}
#myModal #birth-year-input{
  flex: 1.4 1 0;
}
#myModal .forgot-link{
  color: #aab3ff;
  text-decoration: none;
  cursor: pointer !important;
}
#myModal .forgot-link:hover{
  text-decoration: underline;
}


/* =========================================================
   FIX MODAL INSCRIPTION : ULTRA-COMPACT (SANS SCROLL)
   ========================================================= */

/* 1. On force la modale à rester dans les limites de l'écran */
.modal-content {
    max-height: 96vh !important;
    overflow-y: hidden !important; /* On tue le scroll */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 20px !important;
}

/* 2. On réduit l'image pour l'inscription */
.modal-image {
    max-height: 40px !important; /* Image plus petite */
    margin: 0 auto 8px auto !important;
}

/* 3. On tasse les labels et les champs d'inscription */
.modal-content label {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

.modal-content input, 
.modal-content select {
    height: 30px !important; /* Hauteur réduite pour tous les champs */
    padding: 4px 10px !important;
    margin-bottom: 4px !important;
    font-size: 0.9rem !important;
}

/* 4. On compacte spécifiquement la ligne de naissance (birth-row) */
.birth-row {
    margin: 2px auto 4px auto !important;
    gap: 4px !important;
}

.birth-row input {
    height: 30px !important;
}

/* 5. On réduit le texte "Tu as XX ans" */
.birth-age-preview {
    margin: 0 auto 4px auto !important;
    font-size: 11px !important;
    height: 14px;
}

/* =========================================================
   ✅ MK MOBILE FIX v2 (2026-02-28)
   - Mobile: ne pas afficher l'ancien #user-list (évite la "barre" des connectés en bas)
   - Mobile: barre d'input collée en bas (au-dessus des tabs)
   - Mobile: avatar MP affiché en entier (contain)
   ========================================================= */

@media (max-width: 768px){
  /* 1) Sur mobile on utilise #room-users-panel, pas la sidebar users legacy */
  #user-list{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 2) Tabs bas: toujours au-dessus */
  #mobile-tabs{
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 48px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 10002 !important;
  }

  /* 3) Input: fixe juste au-dessus des tabs */
  #chat-input{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    z-index: 10001 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 4) Réserve sous les messages pour ne pas passer derrière input + tabs */
  #chat-messages, .chat-messages{
    padding-bottom: calc(48px + 48px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* 5) Accueil: pas de barre d'input (évite le bandeau vide) */
  body.home-active #chat-input{
    display: none !important;
  }

  /* 6) MP: avatar identique PC (remplit le cadre) */
  #mp-panel .mp-avatar{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
  #mp-panel .mp-avatar img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 2px !important;
  }
}

/* 6. Le bouton de validation */
.modal-content button {
    padding: 8px !important;
    margin-top: 8px !important;
    font-size: 1rem !important;
}

/* SÉCURITÉ : Si l'écran est vraiment trop petit (hauteur < 700px) */
@media screen and (max-height: 700px) {
    .modal-image, .modal-content h2 {
        display: none !important; /* On cache le logo et le titre pour sauver le formulaire */
    }
    .modal-content {
        gap: 0px !important;
    }
}

/* même base d'alignement pour le coeur + le ♦ */
.mk-heart-role-badge2,
.mk-avatar-diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  transform: translateY(-1px); /* ajuste: -2px / 0 / +1px selon ton rendu */
}

/* coeur */
.mk-heart-role-badge2 svg{
  width: 12px;
  height: 12px;
  display: block;
  pointer-events: none;
}

/* =========================================================
   ✅ MK MOBILE FIX — Top-bar variable (admin)
   - Sur mobile, la top-bar peut changer de hauteur (ex: bouton 👻 admin)
   - L'ancien calcul "main height = 100dvh - tabs" ne déduisait pas la top-bar
   - Résultat: zones qui bougent / input qui semble remonter (salon + MP)
   - Fix: on laisse le flex calculer la hauteur restante (sans changer le style)
   ========================================================= */

@media (max-width: 768px){
  /* Body en colonne: top-bar + chat-wrapper */
  html, body{
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body{
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #top-bar{
    flex: 0 0 auto !important;
  }

  #chat-wrapper{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Override du vieux calc() en dvh qui ne compte pas #top-bar */
  #chat-wrapper > main,
  main{
    flex: 1 1 auto !important;
    /* ✅ 100% = hauteur restante (déjà déduite de la top-bar via flex)
       On retire ensuite la barre du bas (tabs + safe-area) */
    height: calc(100% - var(--tabs-h, 48px) - env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(100% - var(--tabs-h, 48px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

 
/* =========================================================
   ✅ MK MOBILE SAUT FIX v6 (2026-03-02)
   CAUSE RÉELLE : sur mobile, plusieurs patches CSS supposent un wrapper
   #message-input-container (fixed). Comme il n’existait pas, #chat-input
   restait dans le flux => il monte/descend quand #users change.

   FIX :
   - Ajout du wrapper #message-input-container (index.html)
   - Mobile : wrapper FIXED au-dessus des tabs
   - Mobile : #chat-input redevient RELATIVE dans le wrapper
   - Réserve bas messages pour éviter masquage
   ========================================================= */

@media (max-width: 768px){
  :root{
    --mk-tabs-h: 48px;
    --mk-safe-b: env(safe-area-inset-bottom, 0px);
    /* hauteur approximative de la barre d’input (ton #chat-input padding inclus)
       => volontairement un peu large pour garantir zéro recouvrement */
    --mk-input-reserve: 76px;
  }

  /* 1) Tabs bas (stable) */
  #mobile-tabs{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    padding-bottom: var(--mk-safe-b) !important;
    z-index: 10002 !important;
  }

  /* 2) Wrapper input (FIXED) */
  #message-input-container{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    z-index: 10001 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) #chat-input NE DOIT PAS ÊTRE fixed (sinon conflit + saut) */
  #message-input-container #chat-input,
  #chat-input{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4) Réserve bas dans la zone messages (pour input + tabs) */
  #chat-messages, .chat-messages{
    padding-bottom: calc(var(--mk-input-reserve) + var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    scroll-padding-bottom: calc(var(--mk-input-reserve) + var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px){
  /* ✅ v6 : Accueil = pas de bandeau input */
  body.home-active #message-input-container{
    display: none !important;
  }
}


/* =========================================================
   ✅ MOBILE — Cadres au-dessus de l'input (Accueil / Salon / MP)
   - Remonte le bas de #home-salons-scroll / #chat-messages / #regionalList
     pour éviter le débordement derrière la barre d'input (fixed).
   - Ne change pas la logique JS
   ========================================================= */
@media (max-width: 768px){
  /* Réserve bas dans le conteneur central (l'input est fixed) */
  #chat-container{
    padding-bottom: calc(var(--mk-input-reserve, var(--input-h, 60px)) + var(--gap-bottom, 6px)) !important;
    box-sizing: border-box !important;
  }

  /* La réserve est gérée par #chat-container => on garde juste un petit confort en bas */
  #chat-messages, .chat-messages{
    padding-bottom: 10px !important;
    scroll-padding-bottom: 10px !important;
  }
}


/* =========================================================
   ✅ MK MOBILE FIX FINAL v14 (2026-03-03)
   Objectifs :
   - ✅ Bas FIXE (plus de montée/descente quand des users arrivent/partent)
   - ✅ Chat plein écran (pas de "colonne" vide à droite)
   - ✅ Ne pas casser la logique JS (home-active / mp-active / show-region)
   - ✅ Conserver l'input en bas + tabs mobiles
   ========================================================= */

@media (max-width: 768px){
  :root{
    --mk-topbar-h: 40px;
    --mk-tabs-h: 48px;
    --mk-safe-b: env(safe-area-inset-bottom, 0px);
    /* réserve safe pour éviter que le dernier message passe sous l'input */
    --mk-input-reserve: 76px;
  }

  /* Top bar + tabs : toujours visibles sur mobile */
  #top-bar{
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mk-topbar-h) !important;
    z-index: 20000 !important;
  }

  #mobile-tabs{
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    padding-bottom: var(--mk-safe-b) !important;
    z-index: 20000 !important;
  }

  /* ✅ Zone principale figée entre top-bar et tabs (ne dépend plus du contenu) */
  #chat-wrapper > main,
  main{
    position: fixed !important;
    top: var(--mk-topbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important; /* évite le layout flex 3 colonnes */
  }

  /* ✅ Sur mobile on n'utilise pas les sidebars Desktop (évite la colonne vide + reflow) */
  #channel-sidebar,
  #user-list{
    display: none !important;
  }

  /* ✅ Chat plein écran */
  #chat-container{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ✅ Input : toujours FIXED au-dessus des tabs (donc ne bouge pas) */
  #message-input-container{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    z-index: 20001 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ⚠️ #chat-input ne doit JAMAIS être fixed (sinon double ancrage = saut) */
  #message-input-container #chat-input,
  #chat-input{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ✅ Messages : hauteur stable (flex) + scroll interne + réserve bas pour l'input */
  #chat-messages,
  .chat-messages{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-right: 0 !important;
    padding-bottom: calc(var(--mk-input-reserve) + 10px) !important;
    scroll-padding-bottom: calc(var(--mk-input-reserve) + 10px) !important;
    box-sizing: border-box !important;
  }

  /* ✅ Home layout : garde le plein écran sans influencer la hauteur */
  #home-layout{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}
/* =========================================================
   ✅ MK MOBILE FIX v15 (2026-03-03)
   Objectif:
   - Bas FIXE (input + tabs) : plus de montée/descente quand #users change
   - Ne change pas le style, uniquement l'ancrage/hauteurs en mobile
   ========================================================= */
@media (max-width: 768px){
  :root{
    --mk-topbar-h: 40px;
    --mk-tabs-h: 48px;
    --mk-safe-b: env(safe-area-inset-bottom, 0px);
    /* réserve un peu large pour garantir zéro recouvrement */
    --mk-input-reserve: 76px;
  }

  /* S'assurer que top-bar / tabs existent bien (certains anciens blocs les masquent) */
  #top-bar{
    display: flex !important;
    height: var(--mk-topbar-h) !important;
    line-height: var(--mk-topbar-h) !important;
    z-index: 20000 !important;
  }
  #mobile-tabs{
    display: flex !important;
  }

  html, body{
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* 1) MAIN = zone fixe entre top-bar et tabs (ne dépend plus du contenu) */
  main{
    position: fixed !important;
    top: var(--mk-topbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* 1b) Si #chat-wrapper existe, on l'utilise comme zone fixe, et main devient "plein" dedans */
  #chat-wrapper{
    position: fixed !important;
    top: var(--mk-topbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    overflow: hidden !important;
  }
  #chat-wrapper > main,
  #chat-wrapper main{
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    display: block !important;
  }

  /* 2) Sur mobile on n'utilise pas les sidebars desktop */
  #channel-sidebar,
  #user-list{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 3) Zone centrale = plein écran + flex stable */
  #chat-container{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: 0.5em !important;
  }

  #room-tab-wrapper{
    flex: 0 0 auto !important;
  }

  /* 4) Cadres: flex stable + scroll interne uniquement */
  #home-layout,
  #mp-panel{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chat-messages,
  .chat-messages{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    margin-bottom: 0 !important;
    /* réserve bas: uniquement pour l'input fixed */
    padding-bottom: calc(var(--mk-input-reserve) + 10px) !important;
    scroll-padding-bottom: calc(var(--mk-input-reserve) + 10px) !important;
    box-sizing: border-box !important;
  }

  /* 5) Input FIXED au-dessus des tabs (reste l'ancre, ne bouge plus) */
  #message-input-container{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    z-index: 20001 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* #chat-input ne doit JAMAIS être fixed */
  #message-input-container #chat-input,
  #chat-input{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 6) Tabs bas */
  #mobile-tabs{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--mk-tabs-h) + var(--mk-safe-b)) !important;
    padding-bottom: var(--mk-safe-b) !important;
    z-index: 20002 !important;
  }
}

/* =========================================================
   ✅ MK MOBILE FIX v21 (2026-03-03)
   - Accueil: l'input est visible chez toi => on ne le masque pas
   - Donc la zone MAIN doit toujours réserver (tabs + input)
   - Objectif: plus de débordement bas, tout reste fixe
   ========================================================= */
@media (max-width: 768px){
  /* Si un ancien bloc masquait l'input sur Accueil, on l'annule */
  body.home-active #message-input-container{
    display: block !important;
  }

  /* Zone principale: réserve toujours la hauteur input + tabs */
  #chat-wrapper,
  main,
  #chat-wrapper > main,
  #chat-wrapper main{
    bottom: calc(var(--mk-tabs-h) + var(--mk-safe-b) + var(--mk-input-reserve)) !important;
  }
}
@media (max-width: 768px) and (hover: hover) and (pointer: fine){
  html, body{ height: 100vh !important; min-height: 100vh !important; }
}


/* =========================================================
   ✅ MOBILE — réduire l'input UNIQUEMENT à DROITE (salons VOX)
   - Seulement quand le cadre micro #voxi est visible
   - Ne touche ni Accueil, ni MP, ni les salons sans cadre micro
   ========================================================= */
@media (max-width: 768px){
  :root{
    --mk-vox-right-gap: 166px;
  }

  body:has(#voxi:not([style*="display:none"]):not([style*="display: none"])):not(.mp-active):not(.home-active)
  #message-input-container{
    left: 0 !important;
    right: var(--mk-vox-right-gap) !important;
  }

  body:has(#voxi:not([style*="display:none"]):not([style*="display: none"])):not(.mp-active):not(.home-active)
  #chat-input,
  body:has(#voxi:not([style*="display:none"]):not([style*="display: none"])):not(.mp-active):not(.home-active)
  #message-input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* =========================================================
   ✅ MK CENTER BANNER (succès / erreur)
   - Rectangle centré (comme tes captures)
   - Couleur (vert/rouge) toujours pilotée par app.js
   ========================================================= */
#error-banner.mk-center-banner{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* rectangle (pas full width) */
  width: auto;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 16px;
  border-radius: 10px;

  /* lisibilité */
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;


  /* sécurité */
  z-index: 9999;
  pointer-events: none;

  /* défaut (erreur) si app.js ne change pas la couleur */
  background-color: #f44336;
  color: #fff;

  /* centre le texte même si app.js met display:flex */
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#error-banner.mk-center-banner #error-banner-text{
  display: inline-block;
}


/* =========================================================
   ✅ MOBILE — bouton "Connectés" + panneau users déplacé
   - remplace l’affichage direct du cadre liste salon par un bouton
   - ouvre un panneau mobile avec webcam + starbis au-dessus des users
   ========================================================= */

#mobile-room-users-toggle{
  display: none;
}

@media (max-width: 768px){
  :root{
    --mobile-room-toggle-right: 12px;
    --mobile-room-toggle-top: calc(83px + var(--tabs-extra));
    --mobile-room-toggle-h: 34px;
    --mobile-room-toggle-w: 116px;
    --mobile-room-popup-gap: 8px;
  }

  body:not(.home-active):not(.mp-active) #mobile-room-users-toggle{
    position: fixed !important;
    top: var(--mobile-room-toggle-top) !important;
    right: var(--mobile-room-toggle-right) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--mobile-room-toggle-w) !important;
    height: var(--mobile-room-toggle-h) !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: linear-gradient(180deg, rgba(69,73,84,.96), rgba(48,52,61,.96)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 0 1px rgba(125, 71, 250, .20),
      0 4px 12px rgba(0,0,0,.26) !important;
    color: #79b8ff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 10051 !important;
    -webkit-tap-highlight-color: transparent !important;
    transform: none !important;
    transition: box-shadow .2s ease, color .2s ease, background .2s ease !important;
  }

body:not(.home-active):not(.mp-active) #mobile-room-users-toggle:hover,
body:not(.home-active):not(.mp-active) #mobile-room-users-toggle:focus-visible{
  outline: none !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(125, 71, 250, .30),
    0 4px 12px rgba(0,0,0,.26),
    0 0 10px rgba(125, 71, 250, .20) !important;
}

  body.mobile-room-users-open:not(.home-active):not(.mp-active) #mobile-room-users-toggle{
    color: #ffffff !important;
    transform: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 0 1px rgba(125, 71, 250, .42),
      0 0 12px rgba(155, 0, 255, .22),
      0 6px 16px rgba(0,0,0,.32) !important;
  }

  /* On ne garde plus la grande réserve haute : seul le bouton reste affiché. */
  body:not(.mp-active) #chat-messages,
  body:not(.mp-active) .chat-messages{
    padding-top: calc(var(--reserve-top-room) + var(--mobile-room-toggle-h) + 12px) !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel{
    display: none !important;
    position: fixed !important;
    top: calc(var(--mobile-room-toggle-top) + var(--mobile-room-toggle-h) + var(--mobile-room-popup-gap)) !important;
    right: var(--mobile-room-toggle-right) !important;
    width: 270px !important;
    max-width: calc(100vw - (var(--mobile-room-toggle-right) * 2)) !important;
    max-height: min(46dvh, 300px) !important;
    background: rgba(34,34,34,.92) !important;
    border-radius: 10px !important;
    z-index: 10060 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  body.mobile-room-users-open:not(.home-active):not(.mp-active) #room-users-panel{
    display: flex !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px 2px !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header > div{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-title{
    display: none !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #start-webcam-btn,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #upload-btn{
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.18) !important;
    color: #f4f7ff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: default !important;
    left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #start-webcam-btn:hover,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #upload-btn:hover,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #start-webcam-btn:focus,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #upload-btn:focus,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #start-webcam-btn:active,
  body:not(.home-active):not(.mp-active) #room-users-panel .room-users-header #upload-btn:active{
    background-image: none !important;
    background-position: initial !important;
    color: #f4f7ff !important;
    transform: none !important;
    left: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.18) !important;
  }

  body:not(.home-active):not(.mp-active) #room-users-panel ul#users{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 6px 10px 10px !important;
    padding: 8px !important;
    border: 1px solid rgba(125, 71, 250, .32) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.25) !important;
    max-height: 236px !important; /* ≈ 10 utilisateurs visibles avant scroll */
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}


/* =========================================================
   PC seulement — agrandir légèrement les écrits + emotes
   salon et MP
   ========================================================= */
@media (min-width: 769px){

  /* Salon */
  #chat-messages,
  .chat-messages{
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  #chat-messages .message,
  .chat-messages .message,
  #chat-messages .system-message,
  .chat-messages .system-message{
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* MP */
  .private-message,
  .private-message .pm-name,
  .private-message .pm-text,
  .private-message .pm-content{
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .private-message .pm-time{
    font-size: 15px !important;
    width: 56px !important;
    flex: 0 0 56px !important;
    line-height: 1.55 !important;
  }

  /* Emotes du chat */
  #chat-messages .mk-chat-emote,
  .chat-messages .mk-chat-emote,
  .private-message .mk-chat-emote{
    height: 22px !important;
    width: auto !important;
    max-width: 40px !important;
    vertical-align: -3px !important;
  }
}

/* =========================================================
   ✅ MP présence / typing — sans changer le style actuel des onglets
   ========================================================= */
.room-tab.mp.is-online:not(.is-typing):not(.unread){
  background: linear-gradient(180deg, #4d4d4d, #323232) !important;
  color: inherit !important;
}

.room-tab.mp.is-typing:not(.unread){
  background: linear-gradient(180deg, #7b35c3, #51247f) !important;
}



/* =========================================================
   ✅ MP typing indicator
   ========================================================= */
#mp-typing-indicator{
  position: absolute;
  z-index: 8;
  display: none;
  pointer-events: none;
  font-size: 12px;
  font-style: italic;
  color: rgba(210,210,210,0.86);
  white-space: nowrap;
  max-width: calc(100% - 28px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* =========================================================
   ✅ MP typing indicator — ajustement fin position PC / mobile
   ========================================================= */
#mp-typing-indicator{
  left: 10px !important;
  right: auto !important;
  text-align: left !important;
}

body.mp-active #mp-typing-indicator.visible{
  display: block;
}

@media (max-width: 768px){
  body.mp-active #mp-typing-indicator,
  body.mp-active #mp-typing-indicator.visible{
    left: 10px !important;
    bottom: 10px !important;
  }
}

@media (min-width: 769px){
  body.mp-active #mp-typing-indicator,
  body.mp-active #mp-typing-indicator.visible{
    left: 18px !important;
    bottom: 95px !important;
  }
}


/* MP = même géométrie que les autres onglets */
#room-tabs > .room-tab.mp,
#room-tabs > .room-tab.mp.is-online,
#room-tabs > .room-tab.mp.is-typing{
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* MP inactif = même niveau que les autres onglets inactifs */
#room-tabs > .room-tab.mp:not(.active),
#room-tabs > .room-tab.mp.is-online:not(.active),
#room-tabs > .room-tab.mp.is-typing:not(.active){
  top: var(--tab-inactive-top) !important;
}

/* MP actif = même niveau que les autres onglets actifs */
#room-tabs > .room-tab.mp.active,
#room-tabs > .room-tab.mp.is-online.active,
#room-tabs > .room-tab.mp.is-typing.active{
  top: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: -1px !important;
}

/* Raccord bas du MP actif : couleur adaptée à son état pour éviter le bord visible */
#room-tabs > .room-tab.mp.active::after,
#room-tabs > .room-tab.mp.is-online.active::after,
#room-tabs > .room-tab.mp.is-typing.active::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -1px !important;
  right: -1px !important;
  bottom: -2px !important;
  height: 2px !important;
  box-shadow: none !important;
  border: 0 !important;
}

#room-tabs > .room-tab.mp.active:not(.is-online):not(.is-typing)::after{
  background: #2b2b2b !important;
}

#room-tabs > .room-tab.mp.is-online.active:not(.is-typing)::after{
  background: #323232 !important;
}

#room-tabs > .room-tab.mp.is-typing.active::after{
  background: #51247f !important;
}


/* =========================================================
   ✅ MK EMOJI POSITION FIX
   - Mobile : bouton emoji à droite de l'input
   - PC : palette positionnée par JS au-dessus du bouton emoji
   - Ne change pas la logique d'envoi / insertion
   ========================================================= */
@media (max-width: 768px){
  #message-input-container #chat-input,
  #chat-input{
    flex-direction: row !important;
    align-items: center !important;
  }

  #message-input,
  #chat-input input[type="text"]{
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #emoji-button{
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    align-self: center !important;
  }

  #send-button{
    order: 3 !important;
  }
}

@media (min-width: 769px){
  #emoji-picker{
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }
}


/* =========================================================
   ✅ Salon Quizz
   ========================================================= */
#quiz-room-typing-indicator{
  display: none !important;
}


.quiz-room-message{
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.quiz-room-time{
  color: #888;
  font-style: italic;
  flex: 0 0 auto;
  margin-top: 2px;
}

.quiz-room-bubble{
  display: inline-block;
  max-width: min(92%, 560px);
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  background: rgba(90,90,90,0.9);
  color: #f4f4f4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.quiz-room-question-text,
.quiz-room-answer-line,
.quiz-room-question-line,
.quiz-room-winner{
  line-height: 1.3;
}

.quiz-room-answer-line + .quiz-room-question-line,
.quiz-room-winner + .quiz-room-answer-line{
  margin-top: 2px;
}

.quiz-room-answer-value{
  color: #ff6b6b;
  font-weight: 700;
}

.quiz-room-question-ref{
  color: #111;
}

.quiz-room-winner{
  color: #f7e08c;
}