/* =========================================================
   ACCUEIL — Layout 2 colonnes dans #home-layout
   Objectifs :
   - Liste des salons à gauche
   - Cadre régional à droite (même hauteur que la liste)
   - Sur mobile : ne pas mélanger -> on cache la colonne droite
   - Ne pas casser l’onglet mobile "# Salons" (sidebar visible seulement quand .active)
   ========================================================= */
/* ---------- Desktop : en Accueil on masque la sidebar d’origine ---------- */
@media (min-width: 769px){
body.home-active #channel-sidebar{
    display: none !important;
  }
}
/* ---------- Mobile : en Accueil on masque la sidebar sauf si onglet Salons actif ---------- */
@media (max-width: 768px){
body.home-active #channel-sidebar:not(.active){
    display: none !important;
  }
}
/* Optionnel : masquer le panel droit UNIQUEMENT en Accueil (ne casse pas le chat) */
body.home-active #user-list{
  display: none !important;
}
/* On garde le chat en pleine largeur */
#chat-wrapper main{
  gap: 0 !important;
}
/* =========================================================
   ACCUEIL — affichage du layout central
   ========================================================= */
#home-layout{
  display: none;
}
body.home-active #home-layout{
  display: flex;
}
/* En Accueil, on masque le chat + panels (MAIS PAS l'input) */
body.home-active #chat-messages,
body.home-active #mp-panel,
body.home-active #room-users-panel,
body.home-active #emoji-picker{
  display: none !important;
}
/* =========================================================
   ACCUEIL — panneau principal (même place que la zone messages)
   ========================================================= */
body.home-active #home-layout{
  flex: 1 1 auto;
  width: auto !important;   /* ✅ pas de largeur forcée */
  max-width: none !important;
  min-width: 0;

  min-height: 0;
  overflow: hidden;

  align-items: stretch;
  background: #222222b8;
  padding: 1em;
  border-radius: 10px;
  margin-bottom: 0px;
  gap: 16px;
}

/* =========================================================
   Colonne gauche : salons
   ========================================================= */
#home-salons-col{
  width: 316px;
  max-width: 80vw;

  display: flex;
  flex-direction: column;
  min-height: 0;
}
#home-salons-title{
  margin: 0 0 10px 0;
}
#home-salons-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
}
#home-channel-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#home-channel-list .channel{
  padding: 0.5em;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  transition: 0.2s ease;
}
#home-channel-list .channel:hover{
  background: rgba(255,255,255,0.08);
}
#home-channel-list .channel-group-title{
  padding: 10px 6px 6px;
  font-weight: bold;
  opacity: 0.75;
  cursor: default;
}
/* Bloc création salon sous la liste */
#home-create-channel{
  display: flex;
  gap: 5px;
  border-top: 1px solid #444;
  background: #222222b8;
  padding-top: 6px;
  margin-top: 10px;
  align-items: center;
  box-sizing: border-box;
}
#home-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;
}
#home-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;
}
#home-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%;
  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);
}
/* =========================================================
   Colonne droite : pousse le cadre à droite (comme Coco)
   ========================================================= */
#home-right-col{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;

  display: flex;
  justify-content: flex-end;  /* -> cadre collé à droite */
  align-items: stretch;       /* -> même hauteur que la colonne salons */
}
/* =========================================================
   Cadre régional : DANS #home-layout (PAS en absolute)
   -> même hauteur que la liste salons
   -> 1 seul scroll : .coco-acc-body
   ========================================================= */
#regionalList{
  display: none; /* caché hors Accueil */
}
body.home-active #regionalList{
  display: flex;
  flex-direction: column;

  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 520px;
  max-width: 100%;
  height: 100%;
  min-height: 0;

  padding: 0;
  overflow: hidden;
  border-radius: 10px;

  background: rgba(0,0,0,.25);
  border: 1px solid #000;

  transform: translateX(-11px);
}
/* Barre du haut */
#regionalList .coco-acc-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#regionalList .coco-acc-left{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#regionalList .coco-acc-right{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
}
#regionalList .coco-filter-toggle{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#regionalList .coco-filter-toggle.is-open,
#regionalList .coco-filter-toggle:hover{
  color: #d40808;
  border-color: rgba(212,8,8,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(80,0,0,.22));
}
#regionalList .coco-acc-filters{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#regionalList .coco-filter-chip{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.16));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  color: #d40808;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#regionalList .coco-filter-chip:hover{
  color: #d40808;
  border-color: rgba(212,8,8,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(80,0,0,.22));
}
#regionalList .coco-filter-chip.is-selected{
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22));
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Homme"]{
  color: #1E90FF;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Femme"]{
  color: #FF00FF;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Trans"]{
  color: #EE82EE;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Homme"].is-selected{
  color: #1E90FF;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Femme"].is-selected{
  color: #FF00FF;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Trans"].is-selected{
  color: #EE82EE;
}
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Homme"]:hover,
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Homme"].is-selected:hover,
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Femme"]:hover,
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Femme"].is-selected:hover,
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Trans"]:hover,
#regionalList .coco-filter-chip[data-filter-kind="gender"][data-filter-value="Trans"].is-selected:hover{
  color: #d40808;
}
#regionalList .coco-filter-toggle .coco-filter-toggle-value{
  color: inherit;
}
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Homme"] .coco-filter-toggle-value{
  color: #1E90FF;
}
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Femme"] .coco-filter-toggle-value{
  color: #FF00FF;
}
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Trans"] .coco-filter-toggle-value{
  color: #EE82EE;
}
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Homme"]:hover .coco-filter-toggle-value,
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Homme"].is-open .coco-filter-toggle-value,
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Femme"]:hover .coco-filter-toggle-value,
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Femme"].is-open .coco-filter-toggle-value,
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Trans"]:hover .coco-filter-toggle-value,
#regionalList .coco-filter-toggle[data-filter-toggle="gender"][data-filter-current="Trans"].is-open .coco-filter-toggle-value{
  color: #d40808;
}
/* En-tête colonnes */
#regionalList .coco-acc-head{
  display: grid;
  grid-template-columns: 1fr 70px 1.2fr;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 13px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* Corps scrollable : PREND toute la hauteur restante */
#regionalList .coco-acc-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* Séparateurs */
#regionalList .reg-title,
#regionalList .reg-group{
  padding: 7px 10px;
  font-weight: 700;
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.08);
}
#regionalList .reg-empty{
  padding: 8px 10px;
  opacity: .75;
}
/* Lignes */
#regionalList .reg-row{
  display: grid;
  grid-template-columns: 1fr 70px 1.2fr;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
#regionalList .reg-row:hover{
  filter: brightness(1.08);
}
#regionalList .reg-pseudo{ font-weight: 700; cursor: pointer; }
#regionalList .reg-age{ text-align: center; font-variant-numeric: tabular-nums; opacity: .95; }
#regionalList .reg-city{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .95; }
/* Couleurs */
#regionalList .row-h{ background: rgb(153, 153, 221); }
#regionalList .row-f{ background: rgb(221, 153, 187); }
#regionalList .row-t{ background: rgba(130,70,170,.35); }
#regionalList .row-a{ background: rgba(90,90,90,.25); }
/* Scrollbar uniquement sur le corps */
#regionalList .coco-acc-body::-webkit-scrollbar{ width: 10px; }
#regionalList .coco-acc-body::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(255,255,255,.25);
}
#regionalList .coco-acc-body::-webkit-scrollbar-track{
  background: rgba(0,0,0,.20);
}
/* =========================================================
   ACCUEIL : garder input + envoyer, masquer emoji + style
   ========================================================= */
body.home-active #chat-input{
  display: flex !important;
  gap: 8px !important;
}
body.home-active #emoji-button,
body.home-active #color-text{
  display: none !important;
}
body.home-active #emoji-picker,
body.home-active #style-menu{
  display: none !important;
}
body.home-active #send-button{
  display: inline-flex !important;
}
/* =========================================================
   MP header : ville en ellipsis
   ========================================================= */
#mp-panel .mp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#mp-panel .mp-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
#mp-panel .mp-city{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
}
/* =========================================================
   MOBILE : ne pas mélanger salons + regionalList
   ========================================================= */
@media (max-width: 768px){
body.home-active #home-layout{
    flex-direction: column;
    gap: 10px;
  }
#home-salons-col{
    width: 100%;
    max-width: 100%;
  }
/* ✅ par défaut sur mobile : Accueil = salons seulement */
body.home-active #home-right-col,
  body.home-active #regionalList{
    display: none !important;
  }
/* ✅ quand on est sur l’onglet Connectés : région seulement */
body.home-active.show-region #home-salons-col{
    display: none !important;
  }
body.home-active.show-region #home-right-col{
    display: flex !important;
  }
body.home-active.show-region #regionalList{
    display: flex !important;
    width: 100%;
  }
}
/* =========================================================
   MOBILE — REGIONAL LIST (plein écran propre)
   ========================================================= */
@media (max-width: 768px){
body.home-active.show-region #home-layout{
    padding: 8px !important;
  }
body.home-active.show-region #regionalList{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }
/* Top bar plus compact */
body.home-active.show-region #regionalList .coco-acc-top{
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
  }
body.home-active.show-region #regionalList .coco-acc-left{
    font-size: 14px;
  }
body.home-active.show-region #regionalList .coco-acc-right{
    font-size: 11px;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
body.home-active.show-region #regionalList .coco-filter-toggle,
  body.home-active.show-region #regionalList .coco-filter-chip{
    font-size: 11px;
  }
body.home-active.show-region #regionalList .coco-filter-toggle{
    min-height: 26px;
    padding: 0 8px;
  }
body.home-active.show-region #regionalList .coco-filter-chip{
    min-height: 24px;
    padding: 0 8px;
  }
body.home-active.show-region #regionalList .coco-acc-filters{
    gap: 6px;
    padding: 6px 8px;
  }
/* Grille plus étroite : Pseudo | Age | Ville */
body.home-active.show-region #regionalList .coco-acc-head,
  body.home-active.show-region #regionalList .reg-row{
    grid-template-columns: 1fr 44px 1fr; /* Age plus petit */
    column-gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
  }
body.home-active.show-region #regionalList .reg-age{
    text-align: center;
  }
body.home-active.show-region #regionalList .reg-city{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* Titres de groupes plus petits */
body.home-active.show-region #regionalList .reg-title,
  body.home-active.show-region #regionalList .reg-group{
    padding: 6px 8px;
    font-size: 12px;
  }
body.home-active.show-region #regionalList .reg-empty{
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 768px){

  /* CONNECTÉS : on centre le conteneur au lieu de le coller à droite */
  body.home-active.show-region #home-right-col{
    justify-content: center !important;
  }

  /* CONNECTÉS : on annule le décalage desktop */
  body.home-active.show-region #regionalList{
    transform: none !important;        /* ✅ annule translateX(-11px) */
    width: 90vw !important;
    max-width: 96vw !important;
    margin: 0 auto !important;         /* ✅ centre */
    box-sizing: border-box !important;
  }

  /* optionnel (si ça “bave” encore) */
  body.home-active.show-region #home-layout{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   MODAL — Code postal => Ville DANS le même champ
   - le CP ne doit plus apparaître
   - la ville s'affiche DANS l’input
========================================================= */
#myModal #postal-field{
  position: relative;
  width: 100%;
  display: block;
}
/* Saisie = BLANC */
#myModal #postalcode-input{
  width: 100%;
  box-sizing: border-box;
  display: block;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Vide / placeholder = GRIS */
#myModal #postalcode-input::placeholder{
  color: #6B6B6B !important;
  -webkit-text-fill-color: #6B6B6B !important;
  opacity: 1;
}

/* Optionnel : garantit "gris quand vide" (si placeholder présent) */
#myModal #postalcode-input:placeholder-shown{
  color: #6B6B6B !important;
  -webkit-text-fill-color: #6B6B6B !important;
}

/* Optionnel : évite le texte bizarre en autofill Chrome/Edge */
#myModal #postalcode-input:-webkit-autofill{
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

/* Ville superposée DANS l’input */
#myModal #postal-inline-city{
  position: absolute;
  left: 117px;
  top: 50%;
  transform: translateY(-50%);

  pointer-events: none;
  user-select: none;

  display: none;

  max-width: calc(100% - 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: rgba(255,255,255,.92);
}
/* Quand la ville est trouvée : on cache le CP (valeur conservée) */
#myModal #postal-field.has-city #postalcode-input{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;

  /* on garde le curseur visible pour éviter “je tape mais je vois rien” */
  caret-color: #fff !important;
}
/* Affiche la ville exactement dans le champ */
#myModal #postal-field.has-city #postal-inline-city{
  display: block;
}
/* Cache l’ancien affichage en dessous */
#myModal #postal-preview{
  display: none !important;
}
/* Select si plusieurs communes (affiché seulement si besoin par le JS) */
#myModal #postal-city-select{
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}
/* Affichage mobile salon */
@media (max-width: 768px){
body.home-active #home-salons-col{
    width: 90vw !important;
    max-width: 96vw !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
  }
}
/* Affichage mobile région */
@media (max-width: 768px){
/* ✅ CONNECTÉS (régions) : centré comme la liste salons */
body.home-active.show-region #regionalList{
    width: 90vw !important;      /* ajuste: 90vw / 92vw / 94vw */
    max-width: 96vw !important;
    margin: 0 auto !important;   /* ✅ centre */
  }
/* (optionnel) si tu as un décalage à cause du padding du layout */
body.home-active.show-region #home-layout{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ✅ Messages système / modération (kill, warn, mute, etc.) TOUJOURS à gauche */
.system-message,
.kill-message,
.mod-message,
#chat-messages .system-message,
#chat-messages .kill-message,
#chat-messages .mod-message,
#messages .system-message,
#messages .kill-message,
#messages .mod-message,
#chat-box .system-message,
#chat-box .kill-message,
#chat-box .mod-message,
#chat .system-message,
#chat .kill-message,
#chat .mod-message{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important; /* utile si parent en flex */
}

/* ✅ Si ton code met display:flex sur les system messages */
.system-message,
.kill-message,
.mod-message{
  justify-content: flex-start !important;
  align-items: flex-start !important;
}