@import url("nova-cosmos-login.css");
:root{
  --bg:#06070c;
  --bg-soft:#0d1018;
  --panel:#11141d;
  --panel-2:#171b26;
  --panel-3:#1d2230;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --text:#f5f7fb;
  --muted:rgba(245,247,251,.68);
  --muted-2:rgba(245,247,251,.46);

  --gold:#ffb347;
  --gold-2:#ff8a1f;
  --amber:#ffd27a;
  --violet:#8b5cf6;
  --blue:#58a6ff;
  --green:#33d17a;
  --red:#ff5d73;
  --grey:#93a0b4;

  --shadow-1:0 10px 24px rgba(0,0,0,.28);
  --shadow-2:0 18px 42px rgba(0,0,0,.34);
  --radius:18px;

  --topbar-h:58px;
  --composer-h:72px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:#05060a}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% 12%, rgba(255,138,31,.09), transparent 60%),
    radial-gradient(900px 500px at 85% 18%, rgba(88,166,255,.08), transparent 60%),
    radial-gradient(700px 420px at 50% 80%, rgba(139,92,246,.08), transparent 60%),
    linear-gradient(180deg,#07080c 0%,#0a0c12 100%);
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    radial-gradient(1px 1px at 8% 14%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 24% 64%, rgba(255,255,255,.48), transparent 60%),
    radial-gradient(1px 1px at 72% 16%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(1px 1px at 84% 30%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1px 1px at 62% 76%, rgba(255,255,255,.54), transparent 60%);
}

.hidden{display:none !important}

/* =========================
   LOGIN
========================= */

.login-view{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.login-card{
  width:min(100%, 520px);
  border-radius:28px;
  padding:24px;
  background:linear-gradient(180deg, rgba(17,20,29,.96), rgba(11,13,19,.98));
  border:1px solid var(--line);
  box-shadow:var(--shadow-2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.login-kicker{
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:800;
  color:var(--amber);
}

.login-card h1{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.1;
}

.login-sub{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.45;
  font-size:15px;
}

.login-form{display:grid;gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:7px}
.field span{font-size:14px;font-weight:800}

.field input,
.field select{
  width:100%;
  height:52px;
  border:none;
  outline:none;
  border-radius:16px;
  padding:0 15px;
  color:var(--text);
  background:linear-gradient(180deg, rgba(29,34,48,.96), rgba(20,24,34,.96));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.field input::placeholder{color:rgba(255,255,255,.32)}

.checkline{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 15px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(29,34,48,.96), rgba(20,24,34,.96));
  border:1px solid var(--line-soft);
  font-weight:700;
}

/* Case à cocher règlement */
.nova-rules-check{
  min-height:40px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  background:rgba(255,154,47,.05) !important;
  border:1px solid rgba(255,154,47,.14) !important;
  gap:10px !important;
}

.nova-rules-check input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#ff9a2f;
  cursor:pointer;
  flex-shrink:0;
}

.nova-rules-text{
  font-size:12px;
  font-weight:600;
  color:#8a9bb8;
  line-height:1.3;
}

a.rules-link{
  color:#ff9a2f;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:700;
}

a.rules-link:hover{
  color:#ffb85c;
}

.primary-btn{
  height:54px;
  border:none;
  border-radius:16px;
  color:#fff;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  box-shadow:0 12px 28px rgba(255,138,31,.18);
}

.login-status{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* =========================
   CHAT
========================= */

.chat-view{
  height:100dvh;
  display:grid;
  grid-template-rows:var(--topbar-h) 1fr var(--composer-h);
  overflow:hidden;
}

/* =========================
   TOPBAR
========================= */

.topbar{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  max-height:var(--topbar-h);
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(17,20,29,.96), rgba(10,12,17,.94));
  border-bottom:1px solid rgba(255,179,71,.08);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  position:relative;
  z-index:25;
  overflow:hidden;
}

.topbar-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:max-content;
}

.top-brandWrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:max-content;
  gap:0;
}

.top-logo{
  display:none !important;
}

.top-brand{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  padding:0 2px 4px;
  line-height:1;
  white-space:nowrap;
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.01em;
  position:relative;
  background:linear-gradient(90deg,#fff4d8 0%, #ffc866 38%, #ff9a2f 72%, #ff6a00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}

.top-brand::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,170,60,0), rgba(255,170,60,.75), rgba(255,106,0,0));
  opacity:.85;
}

.topbar-actions{
  display:grid;
  grid-template-columns:1fr 1fr 42px 42px;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}

.top-pill,
.top-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:38px;
  border:none;
  border-radius:12px;
  color:#fff7ef;
  background:linear-gradient(180deg, rgba(28,33,46,.96), rgba(20,24,34,.96));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:var(--shadow-1);
  font-size:.88rem;
  font-weight:800;
  white-space:nowrap;
}

.top-icon{
  padding:0;
  font-size:16px;
}

.top-target{display:none !important}

/* =========================
   MAIN
========================= */

.chat-main{
  position:relative;
  min-height:0;
  overflow:hidden;
  padding:0 10px;
  display:flex;
  flex-direction:column;
}

/* =========================
   ROOM HEAD
========================= */

.room-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow:hidden;
  white-space:nowrap;
  padding:8px 2px 8px;
}

.room-title,
.modes-line,
.topic-line{
  overflow:hidden;
  text-overflow:ellipsis;
}

.room-title{
  font-size:.98rem;
  font-weight:900;
  color:#f6f8fc;
}

.room-sep{
  opacity:.28;
  flex:0 0 auto;
}

.modes-line{
  font-size:.90rem;
  color:var(--muted);
  font-weight:700;
}

.topic-line{
  font-size:.92rem;
  color:#e9edf6;
  font-weight:800;
}

/* =========================
   MEMBERS FAB
========================= */

.members-fab{
  position:absolute;
  top:8px;
  right:10px;
  z-index:18;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:74px;
  height:38px;
  padding:0 11px;
  border:none;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg, rgba(28,33,46,.96), rgba(20,24,34,.96));
  box-shadow:var(--shadow-1);
  font-weight:900;
}

/* =========================
   MESSAGES
========================= */

.messages{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:2px 0 8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}

.messages::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}

.msg{
  margin-bottom:6px;
  padding:8px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(14,17,24,.96), rgba(10,12,17,.98));
  border:1px solid var(--line-soft);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}

.msg__meta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-right:8px;
  font-size:11px;
  color:var(--muted);
  vertical-align:middle;
}

.msg__time{
  color:var(--muted-2);
  font-weight:700;
}

.msg__nick{
  color:#fff;
  font-weight:900;
}

.msg__text{
  display:inline;
  font-size:14px;
  line-height:1.3;
  word-break:break-word;
  vertical-align:middle;
}

.msg.msg--event-join{box-shadow:inset 3px 0 0 var(--green), 0 6px 16px rgba(0,0,0,.14)}
.msg.msg--event-part,
.msg.msg--event-quit{box-shadow:inset 3px 0 0 var(--grey), 0 6px 16px rgba(0,0,0,.14)}
.msg.msg--event-kick,
.msg.msg--event-ban{box-shadow:inset 3px 0 0 var(--red), 0 6px 16px rgba(0,0,0,.14)}
.msg.msg--event-mode{box-shadow:inset 3px 0 0 var(--blue), 0 6px 16px rgba(0,0,0,.14)}
.msg.msg--event-gift{box-shadow:inset 3px 0 0 #a855f7, 0 6px 16px rgba(168,85,247,.15);background:rgba(168,85,247,.06);color:#c084fc;font-style:italic;}

/* ===== Réglages : masquer join/part ===== */
body.cn-hide-join-part .msg--event-join,
body.cn-hide-join-part .msg--event-part,
body.cn-hide-join-part .msg--event-quit { display: none !important; }

/* ===== Réglages : masquer notices ===== */
body.cn-hide-notices .msg--event-notice { display: none !important; }

/* ===== Mode simple : fond noir, pas d'étoiles ===== */
body.cn-simple-mode #novaStarsCanvas { display: none !important; }
body.cn-simple-mode { background: #000 !important; }
body.cn-simple-mode .chat-shell,
body.cn-simple-mode .chat-layout,
body.cn-simple-mode .cn-layout { background: #000 !important; }

/* =========================
   COMPOSER
========================= */

.composer{
  height:calc(var(--composer-h) + var(--safe-bottom));
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid;
  grid-template-columns:46px 46px 40px minmax(0,1fr) 46px;
  gap:8px;
  align-items:center;
  background:rgba(10,12,17,.99);
  border-top:1px solid rgba(255,255,255,.03);
  position:relative;
  z-index:28;
  overflow:hidden;
}

.composer-btn,
.composer-send,
.composer-cmd{
  width:46px;
  height:46px;
  border:none;
  border-radius:15px;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
}

#messageInput{
  width:100%;
  min-width:0;
  height:46px;
  border:none;
  outline:none;
  border-radius:16px;
  padding:0 15px;
  color:#fff;
  font-size:14px;
  background:linear-gradient(180deg, rgba(29,34,48,.98), rgba(20,24,34,.98));
  border:1px solid rgba(255,255,255,.05);
  box-sizing:border-box;
}

#messageInput::placeholder{
  color:rgba(255,255,255,.34);
}

/* =========================
   MEMBERS RAIL
========================= */

.members-rail{
  position:absolute;
  top:52px;
  right:10px;
  width:min(420px, calc(100vw - 20px));
  height:calc(100dvh - 178px - var(--composer-h));
  min-height:320px;
  z-index:17;
  padding:10px;
  background:linear-gradient(180deg, rgba(17,20,29,.98), rgba(10,12,17,.99));
  border:1px solid rgba(255,255,255,.05);
  border-radius:22px;
  box-shadow:var(--shadow-2);
  overflow:auto;
  opacity:0;
  pointer-events:none;
  transform:translateX(14px) scale(.985);
  transition:opacity .18s ease, transform .18s ease;
}

.members-rail.open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
}

.members-rail__head{
  margin-bottom:8px;
}

.members-rail__head h3{
  margin:0;
  font-size:1.18rem;
  font-weight:900;
}

.members-rail__head p{
  margin:4px 0 0;
  font-size:.84rem;
  color:var(--muted);
}

/* ── Liste utilisateurs compacte ── */
.user-list{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.user-item{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:7px;
  cursor:pointer;
  transition:background .12s;
  min-width:0;
}

.user-item:hover{
  background:rgba(255,255,255,.05);
}

/* Pastille sexe */
.ui-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.ui-dot--f{ background:#f472b6; }
.ui-dot--h{ background:#60a5fa; }
.ui-dot--u{ background:#374151; }

/* Badge mode (op/voice/etc.) */
.ui-mode{
  font-size:.72rem;
  font-weight:900;
  flex-shrink:0;
  line-height:1;
}
.ui-mode--owner{color:var(--red)}
.ui-mode--op{color:#60a5fa}
.ui-mode--halfop{color:#ffd257}
.ui-mode--voice{color:var(--green)}

/* Nick */
.ui-nick{
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.user-name--male,.ui-nick.user-name--male{ color:#7ab4ff }
.user-name--female,.ui-nick.user-name--female{ color:#f9a8d4 }
.user-name--unknown,.ui-nick.user-name--unknown{ color:#c9d7f2 }

/* Infos âge·dept */
.ui-info{
  font-size:.72rem;
  color:#3d4f6e;
  white-space:nowrap;
  flex-shrink:0;
}

/* Actions (PV, mod) — visibles au hover */
.ui-item-actions{
  display:flex;
  align-items:center;
  gap:3px;
  flex-shrink:0;
  opacity:0;
  transition:opacity .12s;
}
.user-item:hover .ui-item-actions{
  opacity:1;
}

.ui-act-btn{
  height:20px;
  padding:0 5px;
  border:none;
  border-radius:5px;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:#7ab4ff;
  line-height:1;
}
.ui-pv-btn{
  background:rgba(100,160,255,.12);
  border:1px solid rgba(100,160,255,.2);
}

/* Rétrocompat classes anciennes */
.user-badge{ display:none }
.user-sex-badge{ display:none }
.user-meta{ display:none }
.user-top{ display:none }
.user-actions{ display:none }
.user-main{ display:none }

/* =========================
   OVERLAY + DRAWER
========================= */

.overlay{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.overlay.open{
  opacity:1;
  pointer-events:auto;
}

.drawer{
  position:fixed;
  top:0;
  right:-101%;
  width:min(390px, calc(100vw - 24px));
  height:100vh;
  z-index:200;
  display:grid;
  grid-template-rows:auto 1fr;
  background:linear-gradient(180deg, rgba(17,20,29,.99), rgba(10,12,17,.995));
  border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-22px 0 50px rgba(0,0,0,.38);
  transition:right .22s ease;
}

.drawer.open{right:0}

.drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.drawer-head h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
}

.drawer-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.82rem;
}

.drawer-close{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(29,34,48,.96), rgba(20,24,34,.96));
  color:#fff;
  font-size:22px;
}

.drawer-body{
  overflow:auto;
  padding:6px 8px 12px;
}

.drawer-card{
  padding:8px 10px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(29,34,48,.94), rgba(20,24,34,.96));
  border:1px solid rgba(255,255,255,.045);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  margin-bottom:6px;
}

.drawer-card__title{
  font-size:.88rem;
  font-weight:900;
  margin-bottom:2px;
}

.drawer-card__sub{
  font-size:.76rem;
  color:var(--muted);
  line-height:1.1;
  margin-bottom:5px;
  opacity:.72;
}

.drawer-card__actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}

.drawer-card__actions::-webkit-scrollbar{display:none}

.drawer-card__actions button,
.drawer-tools button{
  height:26px;
  min-height:26px;
  border:none;
  border-radius:8px;
  padding:0 8px;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  background:linear-gradient(180deg, rgba(47,55,76,.96), rgba(32,38,54,.96));
}

.drawer-tools{
  display:grid;
  gap:8px;
}

.drawer-tools input{
  width:100%;
  height:34px;
  min-height:34px;
  border:none;
  outline:none;
  border-radius:10px;
  padding:0 10px;
  color:#fff;
  font-size:.84rem;
  background:linear-gradient(180deg, rgba(29,34,48,.96), rgba(20,24,34,.96));
  border:1px solid rgba(255,255,255,.04);
}

/* =========================
   MOBILE
========================= */

@media (max-width:760px){
  .login-view{
    align-items:flex-start;
    padding:16px 12px;
  }

  .login-card{
    margin-top:16px;
    padding:22px 18px;
    border-radius:24px;
  }

  .grid-2{gap:10px}

  .topbar{
    grid-template-columns:auto 1fr;
    padding:8px;
    gap:8px;
    height:56px;
    min-height:56px;
    max-height:56px;
  }

  .top-brand{
    font-size:.96rem;
  }

  .topbar-actions{
    grid-template-columns:1fr 1fr 38px 38px;
    gap:7px;
  }

  .top-pill,
  .top-icon{
    height:36px;
    border-radius:11px;
    font-size:.82rem;
  }

  .top-icon{
    font-size:15px;
  }

  .chat-main{
    padding:0 8px;
  }

  .room-head{
    padding:8px 2px 8px;
    gap:6px;
  }

  .room-title,
  .modes-line,
  .topic-line{
    font-size:.88rem;
  }

  .members-fab{
    top:8px;
    right:8px;
    min-width:70px;
    height:36px;
    font-size:.84rem;
  }

  .members-rail{
    top:50px;
    right:8px;
    width:calc(100vw - 16px);
    height:calc(100dvh - 170px - var(--composer-h));
    min-height:300px;
  }

  .messages{
    padding:2px 0 8px;
  }

  .msg{
    margin-bottom:5px;
    padding:8px 10px;
  }

  .msg__meta{font-size:10px}
  .msg__text{font-size:13px}

  .composer{
  padding:8px 8px calc(8px + var(--safe-bottom));
  grid-template-columns:44px 44px 36px minmax(0,1fr) 44px;
  gap:8px;
}

  .composer-btn,
.composer-send,
.composer-cmd{
  width:44px;
  height:44px;
  font-size:20px;
  border-radius:14px;
}

  #messageInput{
    height:44px;
    border-radius:15px;
    font-size:13px;
  }

  .drawer{
    width:min(360px, calc(100vw - 18px));
  }

  .menu-grid{
    grid-template-columns:1fr;
  }
}

/* ===== FIX TOPBAR TITRE AU PREMIER PLAN ===== */
.topbar{
  position:relative !important;
  z-index:50 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  padding:8px 10px !important;
  overflow:hidden !important;
}

.topbar-left{
  position:relative !important;
  z-index:51 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  min-width:auto !important;
  margin:0 !important;
  padding:0 !important;
}

.top-brandWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:auto !important;
  margin:0 !important;
  padding:0 !important;
}

.top-brand{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  position:relative !important;
  z-index:52 !important;
  top:0 !important;
  margin:0 !important;
  padding:0 2px 2px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  font-size:1rem !important;
  font-weight:900 !important;
  background:linear-gradient(90deg,#fff4d8 0%, #ffc866 38%, #ff9a2f 72%, #ff6a00 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
}

.top-brand::after{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  right:2px !important;
  bottom:0 !important;
  height:1px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(255,170,60,0), rgba(255,170,60,.75), rgba(255,106,0,0)) !important;
  opacity:.85 !important;
}

.topbar-actions{
  position:relative !important;
  z-index:51 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
}

.chat-main{
  position:relative !important;
  z-index:1 !important;
}

@media (max-width:760px){
  .topbar{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    padding:8px !important;
  }

  .topbar-actions{
    gap:5px !important;
  }

  .top-brand{
    font-size:.96rem !important;
  }
}

/* ===== couleurs événements IRC ===== */

.msg.msg--event-join{
  border-left: 3px solid #22c55e !important;
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(17,20,29,.96)) !important;
}

.msg.msg--event-part,
.msg.msg--event-quit{
  border-left: 3px solid #9ca3af !important;
  background: linear-gradient(180deg, rgba(156,163,175,.10), rgba(17,20,29,.96)) !important;
}

.msg.msg--event-kick,
.msg.msg--event-ban{
  border-left: 3px solid #ef4444 !important;
  background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(17,20,29,.96)) !important;
}

.msg.msg--event-mode{
  border-left: 3px solid #3b82f6 !important;
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(17,20,29,.96)) !important;
}

.msg.msg--highlight{
  border-left: 3px solid #f59e0b !important;
  background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(17,20,29,.96)) !important;
}

.msg.msg--event-join .msg__nick,
.msg.msg--event-part .msg__nick,
.msg.msg--event-quit .msg__nick,
.msg.msg--event-kick .msg__nick,
.msg.msg--event-ban .msg__nick,
.msg.msg--event-mode .msg__nick,
.msg.msg--highlight .msg__nick{
  color: #f8fafc !important;
}

/* ===== IRC EVENTS COLORS ===== */

.msg--event-join {
  color: #4ade80;
  background: rgba(74,222,128,0.08);
}

.msg--event-part,
.msg--event-quit {
  color: #9ca3af;
  background: rgba(156,163,175,0.08);
}

.msg--event-mode {
  color: #60a5fa;
  background: rgba(96,165,250,0.08);
}

.msg--event-kick {
  color: #f87171;
  background: rgba(248,113,113,0.10);
}

.msg--event-ban {
  color: #ef4444;
  background: rgba(239,68,68,0.12);
}

.msg--highlight {
  color: #facc15;
  background: rgba(250,204,21,0.12);
}

.msg--event-join,
.msg--event-part,
.msg--event-quit,
.msg--event-mode,
.msg--event-kick {
  font-style: italic;
  opacity: 0.9;
}

/* ===== IRC EVENTS COLORS (GLOBAL) ===== */

.msg.msg--event-join{
  color:#22c55e !important;
}

.msg.msg--event-mode{
  color:#3b82f6 !important;
}

.msg.msg--event-kick,
.msg.msg--event-ban{
  color:#ef4444 !important;
}

.msg.msg--event-part,
.msg.msg--event-quit{
  color:#9ca3af !important;
}

/* on enlève les bordures inutiles */
.msg--event-join,
.msg--event-mode,
.msg--event-kick,
.msg--event-ban,
.msg--event-part,
.msg--event-quit{
  border-left:none !important;
  background:none !important;
  font-style:italic;
}

/* menu-btn duplicate block disabled */

.pv-identity-host{
  display:none;
}

/* ===== ChatNova discussion override propre ===== */

.messages{
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg{
  margin-bottom: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,28,36,.96), rgba(15,18,24,.98)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}

.cn-msg-inline{
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.msg__meta{
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
  margin-right: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #cfd6e4 !important;
  vertical-align: baseline !important;
}

.msg__time{
  color: #8f9bb0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.msg__nick{
  color: #f6f7fb !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

.msg__nick:hover{
  color: #ffcc73 !important;
}

.msg__text{
  display: inline !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #f3f4f6 !important;
  word-break: break-word;
}

.msg.msg--highlight{
  border: 1px solid rgba(255, 184, 77, .28) !important;
  background: linear-gradient(180deg, rgba(255,184,77,.16), rgba(24,28,36,.98)) !important;
  box-shadow: 0 0 0 1px rgba(255,184,77,.12), 0 8px 18px rgba(0,0,0,.18) !important;
}

.msg.msg--highlight .msg__nick,
.msg.msg--highlight .msg__text{
  color: #ffe2a8 !important;
}

.msg.msg--event-join{
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(24,28,36,.96)) !important;
}

.msg.msg--event-part,
.msg.msg--event-quit{
  background: linear-gradient(180deg, rgba(148,163,184,.10), rgba(24,28,36,.96)) !important;
}

.msg.msg--event-mode{
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(24,28,36,.96)) !important;
}

.msg.msg--event-kick,
.msg.msg--event-ban{
  background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(24,28,36,.96)) !important;
}

@media (max-width: 768px){
  .messages{
    padding: 6px 8px 10px;
    gap: 7px;
  }

  .msg{
    padding: 9px 10px !important;
    border-radius: 12px;
  }

  .msg__meta,
  .msg__time,
  .msg__nick,
  .msg__text{
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

.composer-cmd{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1b2434,#111722);
  color:#ffb84d;
  font-weight:800;
  font-size:20px;
  cursor:pointer;
  box-shadow:none;
}

.composer-cmd:hover{
  background:linear-gradient(180deg,#232f45,#161e2b);
}

.composer-btn,
.composer-send{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  box-shadow:0 10px 24px rgba(255,138,31,.16);
}

.members-fab--mod{
  right: 92px !important;
}

@media (max-width: 768px){
  .members-fab--mod{
    right: 86px !important;
  }
}

.members-fab--mod{
  right:90px;
}

.members-fab--mod{
  min-width:38px;
  width:38px;
  padding:0;
  justify-content:center;
}


/* ===== ChatNova compact messages ===== */

.msg{
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}

.msg__meta{
  line-height: 1.15 !important;
  gap: 4px !important;
}

.msg__text{
  line-height: 1.2 !important;
}

/* réduit espace entre messages */
.cn-messages,
.messages{
  gap: 2px !important;
}

.notice-alert{
  position:relative;
}

.notice-alert::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff3b3b;
  box-shadow:0 0 6px #ff0000;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

/* Topbar compacte */
.topbar-actions{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.top-pill{
  flex: 0 0 auto !important;
}

.top-icon{
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.top-pill{
height:40px;
min-width:40px;
padding:0 12px;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
border-radius:12px;
}

.top-icon{
width:40px;
height:40px;
min-width:40px;
max-width:40px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
border-radius:12px;
padding:0;
}

.topbar-left{
flex:1;
min-width:0;
}

.topbar-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
width:auto;
}

.top-pill,
.top-icon{
width:40px;
height:40px;
min-width:40px;
max-width:40px;

display:flex;
align-items:center;
justify-content:center;

padding:0;
margin:0;

font-size:18px;

border-radius:12px;

background:rgba(20,30,60,.6);
border:1px solid rgba(255,255,255,.05);
}

.top-brandWrap{
flex:1;
display:flex;
align-items:center;
justify-content:flex-end;
}

/* ===== ChatNova Menu Buttons Upgrade ===== */

.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}

/* ===== ChatNova unified drawer/menu style ===== */

.drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.drawer-head h3{
  margin:0;
  font-size:1.12rem;
  font-weight:900;
  color:#f3f7ff;
}

.drawer-head p{
  margin:6px 0 0;
  color:rgba(220,230,255,.72);
  font-size:.92rem;
  line-height:1.25;
}

.drawer-close{
  width:44px;
  height:44px;
  border:none;
  border-radius:16px;
  background:rgba(20,28,48,.82);
  border:1px solid rgba(255,255,255,.05);
  color:#fff;
  font-size:22px;
}

.drawer-body{
  overflow:auto;
  padding:10px 12px 16px;
}

.drawer-card{
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(24,34,60,.88), rgba(14,20,36,.92));
  border:1px solid rgba(110,140,220,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  margin-bottom:10px;
}

.drawer-card__title{
  font-size:1rem;
  font-weight:800;
  margin-bottom:4px;
  color:#f2f6ff;
}

.drawer-card__sub{
  font-size:.9rem;
  color:rgba(220,230,255,.68);
  line-height:1.3;
  margin-bottom:10px;
}

.drawer-card__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.drawer-card__actions button,
.drawer-tools button{
  min-height:36px;
  border:none;
  border-radius:12px;
  padding:0 14px;
  color:#fff;
  font-size:.88rem;
  font-weight:700;
  background:linear-gradient(180deg, rgba(56,72,116,.95), rgba(38,50,86,.96));
  border:1px solid rgba(255,255,255,.05);
}

/* menu principal */
.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}

.menu-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(110,140,220,.12);
  background:linear-gradient(180deg, rgba(24,34,60,.88), rgba(14,20,36,.92));
  color:#eef3ff;
  font-size:15px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.menu-btn:hover{
  background:linear-gradient(180deg, rgba(34,50,88,.96), rgba(20,30,52,.98));
  border-color:rgba(120,170,255,.22);
  transform:translateY(-1px);
}

.menu-btn::before{
  content:none;
}

.menu-btn--danger{
  background:linear-gradient(180deg, rgba(88,18,30,.82), rgba(60,12,22,.9));
  border:1px solid rgba(255,90,90,.18);
  color:#ffe8e8;
}

.menu-btn--danger:hover{
  background:linear-gradient(180deg, rgba(112,24,40,.88), rgba(74,16,28,.94));
  border-color:rgba(255,120,120,.28);
}

/* bandeau notices */
.pv-system-header{
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(24,34,60,.88), rgba(14,20,36,.92));
  border:1px solid rgba(110,140,220,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.pv-system-title{
  font-size:1rem;
  font-weight:800;
  color:#f2f6ff;
  margin-bottom:4px;
}

.pv-system-sub{
  font-size:.92rem;
  color:rgba(220,230,255,.68);
}

/* =========================================
   ChatNova Unified Menu Style
========================================= */

.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}

.menu-btn{
  display:flex;
  align-items:center;
  gap:10px;

  width:100%;
  min-height:46px;
  padding:10px 14px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);

  background:linear-gradient(
    180deg,
    rgba(36,46,74,.55),
    rgba(20,26,44,.65)
  );

  color:#e8eefc;
  font-size:14px;
  font-weight:600;
  text-align:left;

  cursor:pointer;
  transition:all .18s ease;
}

.menu-btn:hover{
  background:linear-gradient(
    180deg,
    rgba(60,90,170,.35),
    rgba(40,60,120,.45)
  );
  border-color:rgba(120,160,255,.35);
  transform:translateY(-1px);
}

.menu-btn:active{
  transform:scale(.98);
}

/* bouton danger */
.menu-btn--danger{
  background:linear-gradient(
    180deg,
    rgba(120,30,40,.45),
    rgba(70,15,20,.55)
  );
  border-color:rgba(255,90,90,.25);
  color:#ffdada;
}

.menu-btn--danger:hover{
  background:linear-gradient(
    180deg,
    rgba(160,40,50,.55),
    rgba(90,20,30,.65)
  );
}

/* titres sections menu */

.menu-section-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;

  color:#9fb3ff;
  margin-top:14px;
  margin-bottom:6px;
  opacity:.85;
}


/* =========================================
   ChatNova Menu Compact Nova Style
========================================= */

.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin-top:6px;
}

/* bouton menu */

.menu-btn{
  display:flex;
  align-items:center;
  gap:8px;

  width:100%;
  min-height:38px;
  padding:8px 12px;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.05);

  background:linear-gradient(
    180deg,
    rgba(28,34,56,.65),
    rgba(18,22,38,.75)
  );

  color:#e8eefc;
  font-size:13px;
  font-weight:600;

  cursor:pointer;
  transition:all .15s ease;
}

/* effet hover Nova */

.menu-btn:hover{
  border-color:rgba(255,170,40,.45);

  background:linear-gradient(
    180deg,
    rgba(45,55,90,.75),
    rgba(25,30,50,.85)
  );

  box-shadow:
    0 0 6px rgba(255,170,40,.35),
    inset 0 0 6px rgba(255,170,40,.15);
}

/* bouton danger */

.menu-btn--danger{
  background:linear-gradient(
    180deg,
    rgba(110,30,40,.55),
    rgba(70,15,20,.65)
  );

  border-color:rgba(255,80,80,.25);
  color:#ffdada;
}

.menu-btn--danger:hover{
  border-color:rgba(255,110,110,.45);
  box-shadow:0 0 6px rgba(255,90,90,.35);
}

/* séparateurs menu */

.menu-section-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;

  color:#ffb347;
  opacity:.9;

  margin-top:8px;
  margin-bottom:3px;
}


/* ======================================
   ChatNova UI Harmonisation
====================================== */

/* boutons généraux */

button{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);

  background:linear-gradient(
    180deg,
    rgba(32,42,72,.85),
    rgba(18,24,42,.95)
  );

  color:#e8eefc;
  font-weight:600;

  transition:all .15s ease;
}

/* hover Nova */

button:hover{
  border-color:rgba(255,180,60,.45);

  box-shadow:
    0 0 6px rgba(255,170,40,.25),
    inset 0 0 6px rgba(255,170,40,.12);
}

/* bouton principal */


/* bouton secondaire */


/* champs formulaire */

input,
select,
textarea{

  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);

  background:linear-gradient(
    180deg,
    rgba(26,32,54,.85),
    rgba(14,18,34,.95)
  );

  color:#e8eefc;
  padding:10px 12px;

  transition:all .15s ease;
}

/* focus */

input:focus,
select:focus,
textarea:focus{

  outline:none;

  border-color:rgba(255,170,40,.5);

  box-shadow:
    0 0 8px rgba(255,170,40,.25);
}

/* cartes popup */

.modal,
.drawer-card{

  background:linear-gradient(
    180deg,
    rgba(20,26,44,.96),
    rgba(10,14,26,.98)
  );

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
    0 10px 30px rgba(0,0,0,.6);
}

/* titres popup */

.modal h2,
.modal h3{

  color:#ffb347;
  font-weight:700;
}


/* =========================
   ChatNova Login UI Upgrade
========================= */

.login-card{
  padding:18px 16px !important;
  border-radius:22px;
}

/* titre */
.login-card h1{
  font-size:22px;
  margin-bottom:6px;
}

.login-card p{
  font-size:13px;
  opacity:.75;
  margin-bottom:14px;
}

/* champs plus compacts */

.login-card input,
.login-card select{
  height:44px;
  border-radius:14px;
  font-size:14px;
}

/* grille age sexe */

.login-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* bouton connexion */

.login-submit{
  height:48px;
  border-radius:18px;
  font-size:16px;
  font-weight:700;

  background:linear-gradient(
    180deg,
    #ff7a00,
    #ff3c00
  );

  box-shadow:
  0 6px 18px rgba(255,120,0,.35);

  transition:all .18s ease;
}

.login-submit:hover{
  transform:translateY(-1px);
  box-shadow:
  0 8px 22px rgba(255,120,0,.45);
}


/* =========================
   Onglets Connexion
========================= */

.login-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}

.login-tab{
  flex:1;
  height:36px;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);

  background:rgba(30,40,65,.45);
  color:#e8eefc;

  font-size:13px;
  font-weight:700;
}

.login-tab.active{
  background:linear-gradient(
    180deg,
    #ff9a00,
    #ff6a00
  );
  color:#fff;
  border:none;
}


/* =========================
   Accent couleur Nova
========================= */

.login-card .badge{
  color:#ff9a00;
  letter-spacing:2px;
  font-weight:800;
}


/* =================================
   ChatNova Login V2
================================= */

.login-card{

  padding:16px !important;
  border-radius:22px;

  background:
  linear-gradient(
  180deg,
  rgba(20,25,40,.95),
  rgba(10,12,22,.95)
  );

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
  0 10px 30px rgba(0,0,0,.45);

}


/* titre */

.login-card h1{

  font-size:22px;
  margin-bottom:4px;

}

.login-card p{

  font-size:13px;
  opacity:.75;
  margin-bottom:14px;

}


/* champs */

.login-card input,
.login-card select{

  height:42px;

  border-radius:12px;

  font-size:14px;

  background:
  rgba(20,25,40,.75);

  border:
  1px solid rgba(255,255,255,.05);

}


/* grille age sexe */

.login-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;

}


/* bouton connexion */

.login-submit{

  height:46px;

  border-radius:16px;

  font-size:16px;
  font-weight:700;

  background:
  linear-gradient(
  180deg,
  #ff9a00,
  #ff5a00
  );

  box-shadow:
  0 6px 18px rgba(255,120,0,.35);

}

.login-submit:hover{

  transform:translateY(-1px);

  box-shadow:
  0 8px 22px rgba(255,120,0,.45);

}



/* =================================
   Onglets connexion
================================= */

.login-tabs{

  display:flex;
  gap:8px;
  margin-bottom:14px;

}

.login-tab{

  flex:1;

  height:34px;

  border-radius:12px;

  background:
  rgba(30,40,65,.45);

  border:
  1px solid rgba(255,255,255,.06);

  color:#e8eefc;

  font-size:13px;
  font-weight:700;

}

.login-tab.active{

  background:
  linear-gradient(
  180deg,
  #ff9a00,
  #ff6a00
  );

  border:none;

}


/* petit badge bienvenue */

.badge{

  color:#ff9a00;
  letter-spacing:2px;

  font-weight:800;

}

/* login tabs */

.login-tabs{

display:flex;
gap:8px;
margin-bottom:14px;

}

.login-tab{

flex:1;
height:36px;

border-radius:12px;

background:rgba(30,40,65,.45);
border:1px solid rgba(255,255,255,.06);

color:#e8eefc;
font-size:13px;
font-weight:700;

}

.login-tab.active{

background:linear-gradient(180deg,#ff9a00,#ff5a00);
border:none;

}

.hidden{

display:none;

}

/* ===== Login tabs compact ===== */

.login-tab{

height:32px;
font-size:12px;
font-weight:700;

border-radius:10px;

background:rgba(40,50,80,.35);

border:1px solid rgba(255,255,255,.05);

}

.login-tab.active{

background:linear-gradient(
180deg,
#ff8a00,
#ff4d00
);

box-shadow:0 4px 12px rgba(255,120,0,.35);

}


/* ===== Glass login card ===== */

.login-card{

background:rgba(15,18,35,.45);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.06);

box-shadow:
0 20px 60px rgba(0,0,0,.55),
inset 0 0 40px rgba(255,255,255,.02);

}


/* ===== Cosmos background ===== */

body::before{

content:"";

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:

radial-gradient(circle at 20% 30%, rgba(255,140,0,.12), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(120,80,255,.15), transparent 45%),
radial-gradient(circle at 60% 10%, rgba(255,60,0,.12), transparent 35%);

animation:cosmosMove 20s linear infinite;

z-index:-1;

}

@keyframes cosmosMove{

0%{transform:translateY(0px)}
50%{transform:translateY(-40px)}
100%{transform:translateY(0px)}

}


/* ===== Login layout redesign ===== */

.login-view{

display:flex;
align-items:center;
justify-content:center;

padding:20px;

}

/* carte plus petite */

.login-card{

width:100%;
max-width:420px;

max-height:82vh;

overflow:auto;

padding:18px 18px 20px 18px;

border-radius:24px;

background:rgba(10,12,22,.45);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.06);

box-shadow:
0 25px 80px rgba(0,0,0,.65);

}

/* réduire espaces */

.login-card h1{

font-size:22px;
margin-bottom:4px;

}

.login-sub{

font-size:13px;
margin-bottom:14px;
opacity:.75;

}

.field span{

font-size:13px;

}

/* champs moins gros */

.login-card input,
.login-card select{

height:40px;

font-size:14px;

}

/* bouton connexion */

.primary-btn{

height:44px;

font-size:15px;

border-radius:16px;

}

/* espace réduit */

.login-form{

display:flex;
flex-direction:column;
gap:10px;

}


/* =================================
   ChatNova Nova Cosmos Background
================================= */

html, body{
  min-height:100%;
  background:
    radial-gradient(circle at top, rgba(255,120,0,.08), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255,180,0,.05), transparent 22%),
    radial-gradient(circle at 20% 80%, rgba(120,80,255,.08), transparent 28%),
    linear-gradient(180deg, #050814 0%, #070b18 35%, #040611 100%);
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
}

/* nébuleuses douces */
body::before{
  background:
    radial-gradient(circle at 15% 25%, rgba(255,140,0,.13), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(255,90,0,.10), transparent 18%),
    radial-gradient(circle at 70% 75%, rgba(120,90,255,.12), transparent 22%),
    radial-gradient(circle at 35% 82%, rgba(255,180,0,.08), transparent 18%);
  filter:blur(28px);
  animation:novaNebulaMove 18s ease-in-out infinite alternate;
  opacity:.95;
}

/* étoiles */
body::after{
  z-index:-1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,210,140,.9) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(180,210,255,.85) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.4px);
  background-size:
    180px 180px,
    260px 260px,
    320px 320px,
    140px 140px;
  background-position:
    0 0,
    40px 70px,
    100px 20px,
    60px 110px;
  opacity:.34;
  animation:novaStarsDrift 50s linear infinite;
}

/* login/chat dark veil disabled to reveal cosmos */

.login-card,
.topbar,
.room-head,
.messages,
.composer,
.drawer,
.pv-system-header{
  position:relative;
  z-index:1;
}

/* carte login plus légère pour laisser voir le fond */
.login-card{
  width:100%;
  max-width:420px;
  max-height:82vh;
  overflow:auto;
  padding:18px 18px 20px 18px;
  border-radius:24px;
  background:rgba(7,11,24,.42) !important;
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 0 40px rgba(255,255,255,.015);
}

/* onglets plus compacts */
.login-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.login-tab{
  flex:1;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(28,36,62,.42);
  color:#eef3ff;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.login-tab.active{
  background:linear-gradient(180deg, rgba(255,145,0,.92), rgba(255,82,0,.92));
  color:#fff;
  border-color:rgba(255,190,110,.24);
  box-shadow:0 6px 18px rgba(255,110,0,.24);
}

/* champs plus fins */
.login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.login-card input,
.login-card select{
  height:40px !important;
  font-size:14px;
  border-radius:14px;
  background:rgba(10,16,32,.42) !important;
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}

.login-card input:focus,
.login-card select:focus{
  outline:none;
  border-color:rgba(255,165,60,.4);
  box-shadow:0 0 0 1px rgba(255,165,60,.18), 0 0 12px rgba(255,130,0,.18);
}

/* bouton principal */
.primary-btn,
#connectBtn{
  height:44px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, rgba(255,118,0,.95), rgba(180,35,0,.95)) !important;
  border:1px solid rgba(255,180,90,.18) !important;
  box-shadow:0 10px 26px rgba(255,88,0,.22);
}

.primary-btn:hover,
#connectBtn:hover{
  box-shadow:0 12px 30px rgba(255,88,0,.3);
}

/* petit kicker plus Nova */
.login-kicker{
  color:#ffb347 !important;
  letter-spacing:.14em;
  font-weight:800;
  font-size:.9rem;
}

/* animations */
@keyframes novaNebulaMove{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(-10px, 12px, 0) scale(1.04);
  }
  100%{
    transform:translate3d(14px, -10px, 0) scale(1.08);
  }
}

@keyframes novaStarsDrift{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-140px);
  }
}


/* ===== Login card lighter + smaller ===== */

.login-view{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 20px !important;
}

.login-card{
  width:100%;
  max-width:400px !important;
  max-height:78vh !important;
  overflow:auto;

  padding:16px !important;

  background:rgba(6,10,20,.22) !important;
  backdrop-filter:blur(14px) !important;

  border:1px solid rgba(255,255,255,.05) !important;

  box-shadow:
    0 16px 44px rgba(0,0,0,.38),
    inset 0 0 18px rgba(255,255,255,.02) !important;
}

/* réduire un peu les espaces internes */
.login-form{
  gap:8px !important;
}

.login-card h1{
  font-size:20px !important;
  margin-bottom:2px !important;
}

.login-sub{
  font-size:12px !important;
  margin-bottom:10px !important;
  opacity:.78;
}

.login-card input,
.login-card select{
  height:38px !important;
  background:rgba(8,14,28,.28) !important;
}

.primary-btn,
#connectBtn{
  height:42px !important;
}

/* fond cosmos plus visible */
body::before{
  opacity:1 !important;
  filter:blur(20px) !important;
}

body::after{
  opacity:.5 !important;
}


/* ===== ChatNova login background visible ===== */

.login-view{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:56px 20px 28px !important;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,140,0,.22), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,90,0,.18), transparent 16%),
    radial-gradient(circle at 72% 72%, rgba(120,90,255,.20), transparent 22%),
    radial-gradient(circle at 28% 78%, rgba(255,190,0,.14), transparent 18%),
    linear-gradient(180deg, #050814 0%, #070b18 38%, #040611 100%) !important;
}

.login-view::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,220,160,.85) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(160,200,255,.8) 1px, transparent 1.7px);
  background-size:
    170px 170px,
    240px 240px,
    310px 310px;
  background-position:
    0 0,
    30px 60px,
    90px 30px;
  opacity:.42;
  animation:chatnovaStarsMove 40s linear infinite;
}

.login-view::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,120,0,.18), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(255,70,0,.15), transparent 18%),
    radial-gradient(circle at 68% 76%, rgba(120,90,255,.16), transparent 22%);
  filter:blur(30px);
  opacity:.9;
  animation:chatnovaNebulaMove 16s ease-in-out infinite alternate;
}

.login-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:400px !important;
  max-height:78vh !important;
  overflow:auto;
  padding:16px !important;
  border-radius:24px;
  background:rgba(5,9,20,.58) !important;
  backdrop-filter:blur(12px) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.42),
    inset 0 0 18px rgba(255,255,255,.02) !important;
}

.login-card input,
.login-card select{
  background:rgba(8,14,28,.34) !important;
}

@keyframes chatnovaStarsMove{
  from{ transform:translateY(0); }
  to{ transform:translateY(-120px); }
}

@keyframes chatnovaNebulaMove{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-10px,12px,0) scale(1.04); }
  100%{ transform:translate3d(12px,-8px,0) scale(1.08); }
}


/* ===== ChatNova cosmos visible + shooting stars ===== */

.login-view{
  position:relative;
  overflow:hidden;
}

/* étoiles fixes plus visibles */
.login-view::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,220,170,.95) 1.3px, transparent 2px),
    radial-gradient(circle, rgba(170,210,255,.9) 1.1px, transparent 1.9px);

  background-size:
    120px 120px,
    180px 180px,
    260px 260px;

  background-position:
    0 0,
    40px 70px,
    100px 20px;

  opacity:.72;
  animation:chatnovaStarsDrift 80s linear infinite;
}

/* étoiles filantes / traînées */
.login-view::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    linear-gradient(120deg, transparent 0%, transparent 46%, rgba(255,255,255,.0) 47%, rgba(255,255,255,.95) 49%, rgba(255,180,90,.65) 50%, rgba(255,255,255,0) 53%, transparent 56%) 12% 18% / 180px 180px no-repeat,
    linear-gradient(120deg, transparent 0%, transparent 46%, rgba(255,255,255,.0) 47%, rgba(255,255,255,.95) 49%, rgba(255,140,0,.6) 50%, rgba(255,255,255,0) 53%, transparent 56%) 78% 22% / 220px 220px no-repeat,
    linear-gradient(120deg, transparent 0%, transparent 46%, rgba(255,255,255,.0) 47%, rgba(255,255,255,.92) 49%, rgba(140,180,255,.55) 50%, rgba(255,255,255,0) 53%, transparent 56%) 58% 70% / 200px 200px no-repeat;

  opacity:.55;
  animation:chatnovaShootingStars 9s ease-in-out infinite;
}

/* le contenu reste devant */
.login-card{
  position:relative;
  z-index:2;
}

/* animation douce des étoiles */
@keyframes chatnovaStarsDrift{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-120px);
  }
}

/* animation étoiles filantes */
@keyframes chatnovaShootingStars{
  0%{
    transform:translateX(0) translateY(0);
    opacity:0;
  }
  10%{
    opacity:.15;
  }
  20%{
    opacity:.5;
  }
  35%{
    opacity:.2;
  }
  45%{
    transform:translateX(-40px) translateY(20px);
    opacity:0;
  }
  55%{
    transform:translateX(20px) translateY(-10px);
    opacity:0;
  }
  65%{
    opacity:.18;
  }
  78%{
    opacity:.5;
  }
  90%{
    opacity:.12;
  }
  100%{
    transform:translateX(-60px) translateY(35px);
    opacity:0;
  }
}


/* ===== ChatNova login refinement ===== */

/* formulaire moins imposant */
.login-view{
  align-items:flex-start !important;
  padding:90px 20px 40px !important;
}

/* carte plus compacte et plus transparente */
.login-card{
  max-width:360px !important;
  max-height:72vh !important;
  padding:14px !important;

  background:rgba(6,10,20,.38) !important;
  backdrop-filter:blur(10px) !important;

  border:1px solid rgba(255,255,255,.06) !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 0 20px rgba(255,255,255,.02) !important;
}

/* champs plus légers */
.login-card input,
.login-card select{
  background:rgba(10,16,32,.22) !important;
  border:1px solid rgba(255,255,255,.05) !important;
}

/* réduire espace interne */
.login-form{
  gap:7px !important;
}

/* titre un peu plus compact */
.login-card h1{
  font-size:19px !important;
}

.login-sub{
  font-size:12px !important;
  opacity:.8;
}


/* ===== ChatNova animated stars ===== */

/* couche étoiles principale */
.login-view::before{
  animation:
    chatnovaStarsDrift 120s linear infinite,
    chatnovaStarsTwinkle 4s ease-in-out infinite;
}

/* petite 2e couche pour effet profondeur */
.login-view .stars-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,220,170,.8) 1px, transparent 2px);

  background-size:
    90px 90px,
    140px 140px;

  opacity:.35;

  animation:
    chatnovaStarsDriftReverse 160s linear infinite,
    chatnovaStarsTwinkle 6s ease-in-out infinite;
}

/* drift lent */
@keyframes chatnovaStarsDrift{
  from{ transform:translateY(0); }
  to{ transform:translateY(-200px); }
}

/* drift inverse */
@keyframes chatnovaStarsDriftReverse{
  from{ transform:translateY(0); }
  to{ transform:translateY(200px); }
}

/* scintillement */
@keyframes chatnovaStarsTwinkle{
  0%{ opacity:.5; }
  50%{ opacity:.85; }
  100%{ opacity:.5; }
}


/* ===== ChatNova space login final pass ===== */

/* centrage vertical */
.login-view{
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  position:relative;
  overflow:hidden;
}

/* carte formulaire */
.login-card{
  position:relative;
  z-index:3;
  width:100%;
  max-width:360px !important;
  max-height:78vh !important;
  overflow:auto;
  padding:14px !important;
  background:rgba(6,10,20,.34) !important;
  backdrop-filter:blur(10px) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.34),
    inset 0 0 20px rgba(255,255,255,.02) !important;
}

/* étoiles fond principal */
.login-view::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0.8px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.95) 1.2px, transparent 2.4px),
    radial-gradient(circle, rgba(255,220,170,.95) 1.4px, transparent 2.8px),
    radial-gradient(circle, rgba(170,210,255,.95) 1px, transparent 2.3px),
    radial-gradient(circle, rgba(255,255,255,.9) 2px, transparent 3.6px);
  background-size:
    90px 90px,
    140px 140px,
    220px 220px,
    300px 300px,
    420px 420px;
  background-position:
    0 0,
    40px 80px,
    120px 30px,
    20px 150px,
    200px 100px;
  opacity:.9;
  animation:
    chatnovaSpaceDrift 140s linear infinite,
    chatnovaTwinkle 5s ease-in-out infinite;
}

/* deuxième couche étoiles profondeur */
.login-view::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0.7px, transparent 1.6px),
    radial-gradient(circle, rgba(255,180,120,.9) 1px, transparent 2.2px),
    radial-gradient(circle, rgba(140,190,255,.9) 1.2px, transparent 2.3px);
  background-size:
    110px 110px,
    210px 210px,
    340px 340px;
  background-position:
    30px 20px,
    80px 120px,
    140px 60px;
  opacity:.55;
  animation:
    chatnovaSpaceDriftReverse 220s linear infinite,
    chatnovaTwinkleStrong 7s ease-in-out infinite;
}

/* couche étoiles filantes via la div ajoutée */
.stars-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
}

.stars-layer::before,
.stars-layer::after{
  content:"";
  position:absolute;
  width:180px;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.0) 15%,
    rgba(255,255,255,.95) 45%,
    rgba(255,180,120,.8) 70%,
    rgba(255,255,255,0) 100%
  );
  opacity:0;
  filter:blur(.4px);
  transform:rotate(-25deg);
  box-shadow:0 0 10px rgba(255,255,255,.35);
}

.stars-layer::before{
  top:18%;
  left:62%;
  animation:chatnovaShooting1 8s ease-in-out infinite;
}

.stars-layer::after{
  top:34%;
  left:12%;
  width:140px;
  animation:chatnovaShooting2 11s ease-in-out infinite;
}

/* nébuleuses un peu visibles */
.login-view{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,140,0,.18), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,90,0,.16), transparent 16%),
    radial-gradient(circle at 72% 72%, rgba(120,90,255,.16), transparent 20%),
    radial-gradient(circle at 28% 78%, rgba(255,190,0,.10), transparent 16%),
    linear-gradient(180deg, #040814 0%, #060b18 40%, #030611 100%) !important;
}

/* réduire les bulles âge / département */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px !important;
}

.login-form{
  gap:7px !important;
}

.login-card input,
.login-card select{
  height:36px !important;
  padding:8px 12px !important;
  font-size:14px !important;
  border-radius:14px;
  background:rgba(10,16,32,.22) !important;
  border:1px solid rgba(255,255,255,.05) !important;
}

#ageInput,
#deptInput{
  max-width:100% !important;
}

.field{
  margin:0 !important;
}

.field span{
  display:block;
  margin-bottom:5px !important;
  font-size:12px !important;
}

/* bouton + tabs un peu moins gros */
.login-tab{
  height:30px !important;
  font-size:12px !important;
}

.primary-btn,
#connectBtn{
  height:40px !important;
  border-radius:16px !important;
}

/* animations */
@keyframes chatnovaSpaceDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-80px,-140px,0) scale(1.08); }
}

@keyframes chatnovaSpaceDriftReverse{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(90px,120px,0) scale(1.12); }
}

@keyframes chatnovaTwinkle{
  0%{ opacity:.55; }
  25%{ opacity:.9; }
  50%{ opacity:.65; }
  75%{ opacity:1; }
  100%{ opacity:.55; }
}

@keyframes chatnovaTwinkleStrong{
  0%{ opacity:.25; }
  30%{ opacity:.7; }
  60%{ opacity:.4; }
  80%{ opacity:.85; }
  100%{ opacity:.25; }
}

@keyframes chatnovaShooting1{
  0%, 78%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(-25deg);
  }
  82%{
    opacity:.9;
  }
  92%{
    opacity:.35;
    transform:translate3d(-170px,110px,0) rotate(-25deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-220px,150px,0) rotate(-25deg);
  }
}

@keyframes chatnovaShooting2{
  0%, 58%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(-25deg);
  }
  64%{
    opacity:.8;
  }
  74%{
    opacity:.25;
    transform:translate3d(150px,95px,0) rotate(-25deg);
  }
  100%{
    opacity:0;
    transform:translate3d(220px,140px,0) rotate(-25deg);
  }
}


/* ===== ChatNova realistic cosmos ===== */

/* on neutralise les anciennes couches du login */
.login-view::before,
.login-view::after,
.stars-layer,
.stars-layer::before,
.stars-layer::after{
  content:none !important;
  background:none !important;
  animation:none !important;
}

/* fond cosmos global */
html, body{
  background:
    radial-gradient(circle at 20% 25%, rgba(255,140,0,.10), transparent 18%),
    radial-gradient(circle at 78% 22%, rgba(255,70,0,.08), transparent 16%),
    radial-gradient(circle at 68% 74%, rgba(110,90,255,.10), transparent 20%),
    radial-gradient(circle at 30% 78%, rgba(255,200,120,.06), transparent 14%),
    linear-gradient(180deg, #02040b 0%, #030713 45%, #02040a 100%) !important;
  overflow-x:hidden;
}

/* base pour couches espace */
body{
  position:relative;
  min-height:100vh;
}

/* couche nébuleuse lente */
body::before{
  content:"";
  position:fixed;
  inset:-12%;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,140,0,.14), transparent 20%),
    radial-gradient(circle at 80% 24%, rgba(255,80,0,.10), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(120,90,255,.12), transparent 22%),
    radial-gradient(circle at 38% 82%, rgba(255,180,80,.08), transparent 16%);
  filter:blur(42px);
  opacity:.9;
  animation:cnNebulaFloat 34s ease-in-out infinite alternate;
}

/* couche étoiles fines lointaines */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) .7px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.75) .9px, transparent 1.8px),
    radial-gradient(circle, rgba(170,210,255,.65) .8px, transparent 1.7px),
    radial-gradient(circle, rgba(255,210,150,.55) 1px, transparent 2px);
  background-size:
    140px 140px,
    220px 220px,
    320px 320px,
    420px 420px;
  background-position:
    0 0,
    60px 80px,
    120px 30px,
    200px 140px;
  opacity:.42;
  animation:cnStarFieldDrift 120s linear infinite;
}

/* couche supplémentaire proche, plus brillante */
.login-view{
  position:relative;
  overflow:hidden;
}

.login-view > .stars-layer{
  position:absolute !important;
  inset:-12% !important;
  pointer-events:none !important;
  z-index:0 !important;
  display:block !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.85) 1.4px, transparent 2.6px),
    radial-gradient(circle, rgba(255,220,170,.70) 1.2px, transparent 2.4px);
  background-size:
    180px 180px,
    280px 280px,
    380px 380px;
  background-position:
    10px 20px,
    80px 120px,
    150px 60px;
  opacity:.34;
  filter:blur(.2px);
  animation:
    cnStarFieldNear 80s linear infinite,
    cnTwinkle 7s ease-in-out infinite;
}

/* petite étoile filante discrète */
.login-view > .stars-layer::before{
  content:"";
  position:absolute;
  top:18%;
  left:72%;
  width:160px;
  height:2px;
  transform:rotate(-28deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.0) 15%,
    rgba(255,255,255,.95) 45%,
    rgba(255,190,120,.75) 70%,
    rgba(255,255,255,0) 100%
  );
  opacity:0;
  filter:blur(.4px);
  box-shadow:0 0 10px rgba(255,255,255,.25);
  animation:cnShootingStar 12s ease-in-out infinite;
}

/* carte login un peu plus "glass" et au-dessus */
.login-card{
  position:relative;
  z-index:2 !important;
  background:rgba(6,10,20,.30) !important;
  backdrop-filter:blur(10px) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}

/* topbar un peu plus transparente pour mieux laisser respirer le fond */
.topbar{
  background:rgba(18,22,30,.78) !important;
  backdrop-filter:blur(10px);
}

/* animations */
@keyframes cnNebulaFloat{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(-18px,10px,0) scale(1.04);
  }
  100%{
    transform:translate3d(16px,-12px,0) scale(1.08);
  }
}

@keyframes cnStarFieldDrift{
  from{
    transform:translate3d(0,0,0) scale(1);
  }
  to{
    transform:translate3d(-60px,-140px,0) scale(1.08);
  }
}

@keyframes cnStarFieldNear{
  from{
    transform:translate3d(0,0,0) scale(1);
  }
  to{
    transform:translate3d(80px,-180px,0) scale(1.14);
  }
}

@keyframes cnTwinkle{
  0%{ opacity:.24; }
  30%{ opacity:.42; }
  55%{ opacity:.30; }
  80%{ opacity:.48; }
  100%{ opacity:.24; }
}

@keyframes cnShootingStar{
  0%, 82%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(-28deg);
  }
  86%{
    opacity:.9;
  }
  94%{
    opacity:.3;
    transform:translate3d(-170px,110px,0) rotate(-28deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-220px,145px,0) rotate(-28deg);
  }
}


/* ===== Force visible stars ===== */

body::after{
  content:"" !important;
  position:fixed !important;
  inset:-20% !important;
  pointer-events:none !important;
  z-index:-2 !important;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.98) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.92) 1.4px, transparent 2.6px),
    radial-gradient(circle, rgba(255,220,170,.85) 1.2px, transparent 2.4px),
    radial-gradient(circle, rgba(170,210,255,.82) 1.1px, transparent 2.3px);

  background-size:
    110px 110px,
    170px 170px,
    240px 240px,
    320px 320px !important;

  background-position:
    0 0,
    40px 60px,
    100px 20px,
    180px 120px !important;

  opacity:.82 !important;
  animation:cnStarFieldDrift 140s linear infinite !important;
}

/* couche proche plus brillante */
.login-view > .stars-layer{
  position:absolute !important;
  inset:-12% !important;
  display:block !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.65 !important;
  filter:none !important;

  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 1.2px, transparent 2.2px),
    radial-gradient(circle, rgba(255,245,220,.95) 1.8px, transparent 3px),
    radial-gradient(circle, rgba(170,210,255,.9) 1.4px, transparent 2.6px) !important;

  background-size:
    130px 130px,
    220px 220px,
    340px 340px !important;

  background-position:
    20px 20px,
    80px 120px,
    150px 60px !important;

  animation:
    cnStarFieldNear 90s linear infinite,
    cnTwinkleStrong 5s ease-in-out infinite !important;
}

@keyframes cnTwinkleStrong{
  0%{ opacity:.45; }
  25%{ opacity:.8; }
  50%{ opacity:.55; }
  75%{ opacity:.95; }
  100%{ opacity:.45; }
}


/* ===== Ajustement hauteur + branding ===== */

/* réduit l'espace haut + centre mieux */
.login-view{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding-top:40px !important; /* avant trop grand */
}

/* réduit hauteur visuelle carte */
.login-card{
  margin-top:10px !important;
  padding-top:18px !important;
}

/* titre ChatNova stylé au-dessus */
.login-view::before{
  content:"ChatNova.fr";
  display:block;
  text-align:center;
  font-size:26px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:18px;

  background:linear-gradient(90deg, #ff8c00, #ff3c00, #ffcc70);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 12px rgba(255,120,0,.35),
    0 0 24px rgba(255,80,0,.25);

  animation:cnLogoGlow 3s ease-in-out infinite alternate;
}

/* petit glow animé */
@keyframes cnLogoGlow{
  from{
    opacity:.85;
    transform:translateY(0px);
  }
  to{
    opacity:1;
    transform:translateY(-2px);
  }
}


/* ===== Ajustement hauteur + branding ===== */

/* réduit l'espace haut + centre mieux */
.login-view{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  padding-top:40px !important; /* avant trop grand */
}

/* réduit hauteur visuelle carte */
.login-card{
  margin-top:10px !important;
  padding-top:18px !important;
}

/* titre ChatNova stylé au-dessus */
.login-view::before{
  content:"ChatNova.fr";
  display:block;
  text-align:center;
  font-size:26px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:18px;

  background:linear-gradient(90deg, #ff8c00, #ff3c00, #ffcc70);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 12px rgba(255,120,0,.35),
    0 0 24px rgba(255,80,0,.25);

  animation:cnLogoGlow 3s ease-in-out infinite alternate;
}

/* petit glow animé */
@keyframes cnLogoGlow{
  from{
    opacity:.85;
    transform:translateY(0px);
  }
  to{
    opacity:1;
    transform:translateY(-2px);
  }
}


/* ===== login compact no-scroll fix ===== */

.login-view{
  padding:16px !important;
  align-items:center !important;
  justify-content:center !important;
}

.login-card{
  width:100%;
  max-width:350px !important;
  max-height:calc(100vh - 32px) !important;
  padding:12px !important;
  overflow:auto;
}

.login-kicker{
  margin-bottom:4px !important;
}

.login-card h1{
  font-size:18px !important;
  margin:0 0 4px 0 !important;
}

.login-sub{
  font-size:12px !important;
  margin:0 0 8px 0 !important;
  line-height:1.35 !important;
}

.login-form{
  gap:6px !important;
}

.field span{
  margin-bottom:3px !important;
  font-size:12px !important;
}

.login-card input,
.login-card select{
  height:34px !important;
  padding:6px 10px !important;
  font-size:13px !important;
}

.grid-3{
  display:grid;
  grid-template-columns:.72fr .95fr .95fr !important;
  gap:7px !important;
}

.login-tab{
  height:28px !important;
  font-size:11px !important;
}

.checkline{
  min-height:42px !important;
  padding:8px 12px !important;
}

.primary-btn,
#connectBtn{
  position:sticky;
  bottom:0;
  z-index:5;
  height:38px !important;
  margin-top:4px !important;
}

.login-status{
  margin-top:4px !important;
  font-size:12px !important;
}

/* neutralise le gros bloc logo */
.login-brand,
.login-brand__logo,
.login-brand__star{
  display:none !important;
}


/* ===== Login final compact centered ===== */

/* réduit le vide en haut */
.login-view{
  padding-top:8px !important;
  padding-bottom:12px !important;
  justify-content:center !important;
}

/* centre tout le bloc titre */
.login-kicker,
.login-card h1,
.login-sub{
  text-align:center !important;
}

.login-kicker{
  display:block;
  width:100%;
  margin:0 0 6px 0 !important;
}

.login-card h1{
  margin:0 0 6px 0 !important;
}

.login-sub{
  margin:0 0 10px 0 !important;
  max-width:92%;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* enlève les labels âge / sexe / dépt sur la ligne compacte */
.login-compact-row .field span{
  display:none !important;
}

/* remonte un peu la ligne compacte */
.login-compact-row{
  margin-top:2px !important;
}

/* placeholders / champs plus compacts */
.login-compact-row input,
.login-compact-row select{
  height:34px !important;
  padding:6px 10px !important;
  font-size:13px !important;
}

/* un peu plus d'étoiles visibles autour */
body::after{
  opacity:.92 !important;
}

.login-view > .stars-layer{
  opacity:.82 !important;
}

/* la carte un peu moins lourde visuellement */
.login-card{
  margin-top:0 !important;
}


/* ===== Fix affichage login -> chat ===== */

body.chat-open #loginView{
  display:none !important;
}

body.chat-open #chatView{
  display:flex !important;
  flex-direction:column !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  position:fixed !important;
  inset:0 !important;
  z-index:50 !important;
  opacity:1 !important;
  visibility:visible !important;
  background:
    radial-gradient(900px 500px at 15% 12%, rgba(255,138,31,.09), transparent 60%),
    radial-gradient(900px 500px at 85% 18%, rgba(88,166,255,.08), transparent 60%),
    radial-gradient(700px 420px at 50% 80%, rgba(139,92,246,.08), transparent 60%),
    linear-gradient(180deg,#07080c 0%,#0a0c12 100%) !important;
}

/* sécurité: le chat normal doit prendre tout l'écran */
#chatView.chat-view{
  width:100%;
  min-height:100dvh;
}

/* évite que le login garde de la place invisible */
#loginView.hidden{
  display:none !important;
}




/* ===== FIX drawer invisible / overlay flou ===== */

#overlay,
.overlay{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  position:fixed !important;
  inset:0 !important;
  background:rgba(4,8,16,.42) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  z-index:9998 !important;
}

#overlay.open,
.overlay.open{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#drawer,
.drawer{
  display:block !important;
  position:fixed !important;
  top:0 !important;
  right:-92vw !important;
  width:min(92vw, 430px) !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:right .18s ease !important;
  z-index:9999 !important;

  background:linear-gradient(180deg, rgba(8,12,22,.98), rgba(5,8,16,.98)) !important;
  border-left:1px solid rgba(255,255,255,.06) !important;
  box-shadow:-18px 0 40px rgba(0,0,0,.35) !important;
}

#drawer.open,
.drawer.open{
  right:0 !important;
}

.drawer-head,
#drawer .drawer-head{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:linear-gradient(180deg, rgba(10,14,24,.98), rgba(8,12,22,.94)) !important;
}

/* sécurité anti couche invisible */
body.chat-open #drawer,
body.chat-open .drawer{
  pointer-events:auto !important;
}

body.chat-open #overlay.open,
body.chat-open .overlay.open{
  pointer-events:auto !important;
}


/* ===== ChatNova panels theme v1 ===== */

/* base drawer */
#drawer,
.drawer{
  background:
    linear-gradient(180deg, rgba(7,12,28,.94), rgba(4,8,18,.96)) !important;
  border-left:1px solid rgba(120,170,255,.10) !important;
  box-shadow:
    -18px 0 48px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* header drawer */
.drawer-head,
#drawer .drawer-head{
  padding:18px 18px 14px !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  background:
    linear-gradient(180deg, rgba(10,16,34,.92), rgba(8,12,24,.82)) !important;
}

.drawer-head h3{
  font-size:1.02rem !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
  color:#f4f7ff !important;
}

.drawer-head p{
  color:rgba(236,242,255,.68) !important;
  font-size:.84rem !important;
}

.drawer-close{
  width:58px !important;
  height:58px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.05) !important;
  background:
    linear-gradient(180deg, rgba(36,46,78,.88), rgba(22,28,48,.88)) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.drawer-close:hover{
  border-color:rgba(255,179,71,.20) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,179,71,.08) inset !important;
}

/* body */
.drawer-body{
  padding:14px 14px 18px !important;
}

/* cards */
.drawer-card,
#drawer .drawer-card{
  padding:14px 14px !important;
  margin-bottom:10px !important;
  border-radius:24px !important;
  border:1px solid rgba(120,170,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(7,16,44,.72), rgba(4,10,28,.74)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

.drawer-card__title{
  color:#f7f9ff !important;
  font-size:1rem !important;
  font-weight:900 !important;
  margin-bottom:4px !important;
}

.drawer-card__sub{
  color:rgba(236,242,255,.56) !important;
  font-size:.86rem !important;
  line-height:1.35 !important;
  margin-bottom:10px !important;
}

/* actions */
.drawer-card__actions{
  gap:8px !important;
}

/* buttons generic */
.drawer-card__actions button,
.drawer-tools button,
.menu-btn,
button[id^="menu"],
button[id^="logoutBtn"]{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:16px !important;
  border:1px solid rgba(120,170,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(17,31,76,.82), rgba(10,20,52,.88)) !important;
  color:#eef3ff !important;
  font-weight:800 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.drawer-card__actions button:hover,
.drawer-tools button:hover,
.menu-btn:hover{
  border-color:rgba(255,179,71,.18) !important;
  background:
    linear-gradient(180deg, rgba(22,39,92,.90), rgba(12,26,66,.92)) !important;
}

/* orange primary accents */
.primary-btn,
#connectBtn,
#drawer .btn-primary,
.cn-primary,
button[type="submit"]{
  background:
    linear-gradient(180deg, rgba(255,149,0,.96), rgba(221,79,0,.96)) !important;
  border:1px solid rgba(255,196,120,.20) !important;
  color:#fff !important;
  box-shadow:
    0 12px 28px rgba(255,102,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* danger */
.menu-btn--danger,
#logoutBtn2,
#logoutBtn{
  background:
    linear-gradient(180deg, rgba(110,10,18,.90), rgba(82,8,14,.94)) !important;
  border:1px solid rgba(255,110,110,.14) !important;
  color:#ffe9e9 !important;
}

/* modal shell */
#commandHelpModal > div,
#chatnovaRegisterModalCore > div,
#chatnovaConfirmCodeModal > div,
.cn-modal,
.cn-panel,
.cn-popup{
  border-radius:26px !important;
  border:1px solid rgba(120,170,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(6,16,44,.92), rgba(3,10,28,.94)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* modal headings */
#commandHelpModal h2,
#chatnovaRegisterModalCore h2,
#chatnovaConfirmCodeModal h2,
.cn-modal h2,
.cn-panel h2{
  color:#f7f9ff !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
}

/* inputs in panels/modals */
#drawer input,
#drawer select,
#drawer textarea,
#commandHelpModal input,
#commandHelpModal select,
#commandHelpModal textarea,
#chatnovaRegisterModalCore input,
#chatnovaRegisterModalCore select,
#chatnovaRegisterModalCore textarea,
#chatnovaConfirmCodeModal input,
#chatnovaConfirmCodeModal select,
#chatnovaConfirmCodeModal textarea,
.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea{
  border-radius:18px !important;
  border:1px solid rgba(120,170,255,.10) !important;
  background:rgba(8,16,38,.62) !important;
  color:#eef3ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#drawer input:focus,
#drawer select:focus,
#drawer textarea:focus,
.cn-modal input:focus,
.cn-modal select:focus,
.cn-modal textarea:focus,
.cn-panel input:focus,
.cn-panel select:focus,
.cn-panel textarea:focus{
  border-color:rgba(255,179,71,.28) !important;
  box-shadow:
    0 0 0 1px rgba(255,179,71,.12),
    0 0 18px rgba(255,136,0,.10),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
  outline:none !important;
}

/* ugly account status block */
#drawer .account-status,
#drawer [data-account-status],
#drawer .status-account{
  margin-top:12px !important;
  padding:14px !important;
  border-radius:20px !important;
  border:1px solid rgba(120,170,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(7,16,40,.58), rgba(4,10,24,.62)) !important;
  color:#eef3ff !important;
}

/* fallback for raw text block at bottom */
#drawerBody > div:last-child{
  margin-top:12px;
  padding:12px 2px 8px;
  color:rgba(240,245,255,.88);
}
#drawerBody > div:last-child b{
  color:#fff;
}

/* mobile compact */
@media (max-width: 760px){
  .drawer-head,
  #drawer .drawer-head{
    padding:16px 16px 12px !important;
  }

  .drawer-body{
    padding:12px 12px 16px !important;
  }

  .drawer-card,
  #drawer .drawer-card{
    border-radius:22px !important;
    padding:13px 13px !important;
  }

  .drawer-card__actions button,
  .drawer-tools button,
  .menu-btn{
    min-height:40px !important;
    border-radius:15px !important;
    font-size:.96rem !important;
  }
}


/* ===== ChatNova compact drawer redesign v2 ===== */

#drawer,
.drawer{
  width:min(88vw, 390px) !important;
  background:
    linear-gradient(180deg, rgba(5,10,24,.965), rgba(3,7,18,.975)) !important;
}

.drawer-head,
#drawer .drawer-head{
  padding:14px 14px 10px !important;
}

.drawer-head h3{
  font-size:1.9rem !important;
  line-height:1.05 !important;
  margin:0 0 4px 0 !important;
}

.drawer-head p{
  margin:0 !important;
  font-size:.82rem !important;
  opacity:.72 !important;
}

.drawer-close{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  font-size:20px !important;
}

.drawer-body{
  padding:10px 10px 14px !important;
}

/* cartes compactes */
.drawer-card,
#drawer .drawer-card{
  padding:12px 12px !important;
  margin-bottom:8px !important;
  border-radius:20px !important;
  background:
    linear-gradient(180deg, rgba(6,15,44,.58), rgba(3,10,28,.60)) !important;
  border:1px solid rgba(110,150,255,.06) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.drawer-card__title{
  font-size:.96rem !important;
  margin-bottom:2px !important;
}

.drawer-card__sub{
  font-size:.78rem !important;
  line-height:1.25 !important;
  margin-bottom:8px !important;
  opacity:.68 !important;
}

/* actions plus fines */
.drawer-card__actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
}

.drawer-card__actions button,
.drawer-tools button,
.menu-btn{
  min-height:36px !important;
  height:36px !important;
  padding:0 13px !important;
  border-radius:13px !important;
  font-size:.92rem !important;
  font-weight:800 !important;
}

/* menu principal moins gros */
.menu-grid{
  gap:8px !important;
  margin-top:8px !important;
}

.menu-btn{
  width:100% !important;
  min-height:44px !important;
  height:44px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  gap:10px !important;
  font-size:.95rem !important;
  background:
    linear-gradient(180deg, rgba(8,18,52,.62), rgba(4,11,33,.68)) !important;
}

/* danger */
.menu-btn--danger,
#logoutBtn,
#logoutBtn2{
  min-height:46px !important;
  height:46px !important;
  border-radius:16px !important;
}

/* champ ajout salon plus compact */
#drawer input[type="text"],
#drawer input[type="email"],
#drawer input[type="password"],
#drawer select,
#drawer textarea{
  min-height:40px !important;
  height:40px !important;
  border-radius:15px !important;
  padding:0 13px !important;
  font-size:.95rem !important;
}

#drawer textarea{
  min-height:90px !important;
  height:auto !important;
  padding:12px 13px !important;
}

/* modales / panneaux ouverts depuis le drawer */
.cn-modal,
.cn-panel,
.cn-popup,
#commandHelpModal > div,
#chatnovaRegisterModalCore > div,
#chatnovaConfirmCodeModal > div,
#drawerBody > div[style*="position:fixed"],
body > div[style*="position:fixed"][style*="z-index"] > div{
  width:min(92vw, 430px) !important;
  max-width:430px !important;
  max-height:82dvh !important;
  overflow:auto !important;
  padding:18px !important;
  border-radius:24px !important;
}

.cn-modal h2,
.cn-panel h2,
.cn-popup h2,
#commandHelpModal h2,
#chatnovaRegisterModalCore h2,
#chatnovaConfirmCodeModal h2{
  font-size:1.2rem !important;
  margin:0 0 10px 0 !important;
}

.cn-modal label,
.cn-panel label,
.cn-popup label,
#drawer label{
  font-size:.9rem !important;
}

.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea,
.cn-popup input,
.cn-popup select,
.cn-popup textarea{
  min-height:40px !important;
  height:40px !important;
  border-radius:15px !important;
  font-size:.95rem !important;
}

.cn-modal textarea,
.cn-panel textarea,
.cn-popup textarea{
  min-height:92px !important;
  height:auto !important;
  padding-top:10px !important;
}

/* boutons des modales */
.cn-modal button,
.cn-panel button,
.cn-popup button,
#commandHelpModal button,
#chatnovaRegisterModalCore button,
#chatnovaConfirmCodeModal button{
  min-height:38px !important;
  height:38px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  font-size:.95rem !important;
}

/* profil panel plus compact */
#drawer .profile-panel,
#drawer .profile-view,
#drawer [data-view="profileView"]{
  gap:10px !important;
}

/* bloc état du compte => vraie carte compacte */
#drawerBody > div:last-child{
  margin-top:10px !important;
  padding:12px !important;
  border-radius:18px !important;
  border:1px solid rgba(110,150,255,.06) !important;
  background:
    linear-gradient(180deg, rgba(6,15,44,.50), rgba(3,10,28,.54)) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.015) !important;
  font-size:.84rem !important;
  line-height:1.35 !important;
}

#drawerBody > div:last-child b{
  display:inline-block;
  min-width:92px;
}

/* salon cards */
#drawer .drawer-card__actions .primary-btn,
#drawer .drawer-card__actions button:first-child{
  background:
    linear-gradient(180deg, rgba(16,42,118,.88), rgba(8,24,72,.92)) !important;
}

/* moins de vide général */
@media (max-width:760px){
  #drawer,
  .drawer{
    width:min(86vw, 370px) !important;
  }

  .drawer-head,
  #drawer .drawer-head{
    padding:12px 12px 8px !important;
  }

  .drawer-body{
    padding:8px 8px 12px !important;
  }

  .drawer-card,
  #drawer .drawer-card{
    padding:11px !important;
    margin-bottom:7px !important;
    border-radius:18px !important;
  }

  .menu-btn{
    min-height:42px !important;
    height:42px !important;
    border-radius:15px !important;
    font-size:.93rem !important;
  }

  .drawer-card__actions button,
  .drawer-tools button{
    min-height:34px !important;
    height:34px !important;
    padding:0 11px !important;
    border-radius:12px !important;
    font-size:.88rem !important;
  }

  #drawer input[type="text"],
  #drawer input[type="email"],
  #drawer input[type="password"],
  #drawer select{
    min-height:38px !important;
    height:38px !important;
    border-radius:14px !important;
  }
}


/* ===== Compact real redesign v3 ===== */

.drawer-stack--compact{
  display:grid;
  gap:8px;
}

.drawer-tools--compact{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}

.drawer-tools--top{
  margin-bottom:10px;
}

.btn-main{
  width:100%;
}

.btn-chip{
  min-width:0 !important;
}

.drawer-card{
  padding:10px 12px !important;
  border-radius:18px !important;
  margin-bottom:0 !important;
}

.drawer-card__title{
  font-size:.92rem !important;
  margin-bottom:2px !important;
}

.drawer-card__sub{
  font-size:.76rem !important;
  margin-bottom:7px !important;
  opacity:.72 !important;
}

.drawer-card__actions{
  gap:6px !important;
}

.drawer-card__actions button{
  min-height:32px !important;
  height:32px !important;
  padding:0 11px !important;
  border-radius:11px !important;
  font-size:.84rem !important;
}

.drawer-tools input{
  min-height:38px !important;
  height:38px !important;
  border-radius:14px !important;
}

.drawer-tools button{
  min-height:38px !important;
  height:38px !important;
  border-radius:14px !important;
  font-size:.9rem !important;
}

/* menu really redesigned */
.menu-list{
  display:grid;
  gap:8px;
}

.menu-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(110,150,255,.06);
  background:linear-gradient(180deg, rgba(8,18,52,.52), rgba(4,11,33,.56));
  color:#eef3ff;
  font-size:.95rem;
  font-weight:800;
  text-align:left;
}

.menu-row__icon{
  width:22px;
  display:inline-flex;
  justify-content:center;
  flex:0 0 22px;
}

.menu-row__label{
  flex:1;
}

.menu-row--danger{
  background:linear-gradient(180deg, rgba(110,10,18,.88), rgba(82,8,14,.92));
  color:#ffecec;
}

/* account compact card */
.account-mini-card{
  margin-top:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(110,150,255,.06);
  background:linear-gradient(180deg, rgba(6,15,44,.48), rgba(3,10,28,.52));
}

.account-mini-card__title{
  font-size:.88rem;
  font-weight:900;
  margin-bottom:8px;
  color:#f4f7ff;
}

.account-mini-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  font-size:.82rem;
  color:rgba(235,241,255,.9);
}

.account-mini-card__row b{
  color:#fff;
  min-width:96px;
  font-size:.8rem;
}

/* hide old raw block dumped by modules if it is still appended */
#drawerBody > div:last-child{
  font-size:0 !important;
  line-height:0 !important;
}
#drawerBody > div:last-child .account-mini-card{
  font-size:initial !important;
  line-height:initial !important;
}

/* mobile tighter */
@media (max-width:760px){
  .drawer-head h3{
    font-size:1rem !important;
  }

  .drawer-head p{
    font-size:.8rem !important;
  }

  .drawer-close{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
  }

  .menu-row{
    min-height:42px;
    font-size:.92rem;
    padding:0 13px;
  }

  .drawer-card{
    padding:9px 11px !important;
  }
}


/* ===== ChatNova warm panel pass v4 ===== */

/* drawer global moins bleu */
#drawer,
.drawer{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,170,70,.08), transparent 22%),
    radial-gradient(circle at 88% 72%, rgba(255,120,20,.05), transparent 20%),
    linear-gradient(180deg, rgba(8,10,16,.97), rgba(4,6,12,.985)) !important;
  border-left:1px solid rgba(255,190,120,.08) !important;
}

/* header */
.drawer-head,
#drawer .drawer-head{
  background:
    linear-gradient(180deg, rgba(12,12,18,.92), rgba(8,8,14,.84)) !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important;
}

.drawer-head h3{
  color:#f7f2e8 !important;
}

.drawer-head p{
  color:rgba(240,228,210,.62) !important;
}

/* bouton fermer */
.drawer-close{
  background:
    linear-gradient(180deg, rgba(28,28,34,.92), rgba(16,16,22,.96)) !important;
  border:1px solid rgba(255,190,120,.10) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 22px rgba(255,140,0,.06) !important;
}

/* cartes moins bleues */
.drawer-card,
#drawer .drawer-card,
.account-mini-card{
  background:
    linear-gradient(180deg, rgba(16,16,22,.72), rgba(8,8,14,.80)) !important;
  border:1px solid rgba(255,200,130,.07) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,245,230,.02) !important;
}

.drawer-card__title,
.account-mini-card__title{
  color:#fff5e8 !important;
}

.drawer-card__sub,
.account-mini-card__row{
  color:rgba(232,224,210,.70) !important;
}

/* boutons secondaires anthracite chaud */
.drawer-card__actions button,
.drawer-tools button,
.btn-chip,
.menu-row{
  background:
    linear-gradient(180deg, rgba(24,24,30,.92), rgba(14,14,18,.96)) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  color:#f5efe6 !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* hover discret orange */
.drawer-card__actions button:hover,
.drawer-tools button:hover,
.btn-chip:hover,
.menu-row:hover{
  border-color:rgba(255,184,92,.18) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,170,70,.06) inset,
    0 0 18px rgba(255,130,20,.08) !important;
}

/* bouton principal orange Nova */
.btn-main,
.primary-btn,
#connectBtn,
#drawerJoinRoomBtn{
  background:
    linear-gradient(180deg, rgba(255,153,28,.96), rgba(214,92,0,.96)) !important;
  border:1px solid rgba(255,214,160,.16) !important;
  color:#fff !important;
  box-shadow:
    0 12px 24px rgba(255,106,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* danger */
.menu-row--danger,
.menu-btn--danger,
#logoutBtn,
#logoutBtn2{
  background:
    linear-gradient(180deg, rgba(112,16,16,.94), rgba(74,10,10,.96)) !important;
  border:1px solid rgba(255,140,120,.10) !important;
}

/* champs */
#drawer input,
#drawer select,
#drawer textarea,
.drawer-tools input{
  background:
    linear-gradient(180deg, rgba(18,18,24,.88), rgba(10,10,14,.94)) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  color:#f6efe6 !important;
}

#drawer input::placeholder,
#drawer textarea::placeholder{
  color:rgba(240,225,205,.34) !important;
}

/* texte menu */
.menu-row__icon{
  filter:saturate(1.05);
}

.menu-row__label{
  color:#f7f0e8 !important;
}

/* liste noire plus discrète */
.drawer-card .drawer-card__sub{
  opacity:.64 !important;
}

/* on retire les halos bleus restants */
.drawer,
.drawer *,
#drawer,
#drawer *{
  box-shadow-filter:none;
}


/* ===== ChatNova premium compact v5 ===== */

/* drawer plus neutre, moins bleu */
#drawer,
.drawer{
  background:
    radial-gradient(circle at 8% 14%, rgba(255,179,71,.10), transparent 14%),
    radial-gradient(circle at 86% 78%, rgba(255,111,0,.08), transparent 16%),
    linear-gradient(180deg, rgba(7,9,15,.975), rgba(4,6,12,.985)) !important;
  border-left:1px solid rgba(255,190,120,.08) !important;
}

/* header plus premium */
.drawer-head,
#drawer .drawer-head{
  padding:14px 14px 10px !important;
  background:linear-gradient(180deg, rgba(10,10,14,.90), rgba(7,8,12,.78)) !important;
}

.drawer-head h3{
  color:#fff4e8 !important;
  font-size:1.02rem !important;
}

.drawer-head p{
  color:rgba(245,228,205,.60) !important;
  font-size:.82rem !important;
}

.drawer-close{
  width:54px !important;
  height:54px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(23,24,30,.92), rgba(11,12,18,.96)) !important;
  border:1px solid rgba(255,190,120,.10) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 20px rgba(255,132,0,.05) !important;
}

.drawer-body{
  padding:10px !important;
}

/* cartes moins pavé */
.drawer-card,
#drawer .drawer-card{
  padding:11px 12px !important;
  border-radius:18px !important;
  margin-bottom:8px !important;
  background:
    linear-gradient(180deg, rgba(14,15,22,.70), rgba(7,8,14,.78)) !important;
  border:1px solid rgba(255,190,120,.06) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.drawer-card__title{
  font-size:.95rem !important;
  color:#fff7ef !important;
  margin-bottom:2px !important;
}

.drawer-card__sub{
  font-size:.80rem !important;
  color:rgba(238,226,208,.62) !important;
  margin-bottom:8px !important;
  line-height:1.25 !important;
}

/* boutons compacts anthracite */
.drawer-card__actions button,
.drawer-tools button,
.btn-chip{
  min-height:34px !important;
  height:34px !important;
  padding:0 12px !important;
  border-radius:12px !important;
  background:
    linear-gradient(180deg, rgba(24,24,30,.94), rgba(13,13,18,.96)) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  color:#f7f1e8 !important;
  font-size:.87rem !important;
  font-weight:800 !important;
}

/* vrai bouton orange */
.btn-main,
#drawerJoinRoomBtn{
  min-height:40px !important;
  height:40px !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg, rgba(255,154,28,.96), rgba(214,87,0,.96)) !important;
  border:1px solid rgba(255,215,170,.15) !important;
  box-shadow:
    0 10px 20px rgba(255,102,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* tools */
.drawer-tools--compact,
.drawer-tools--top{
  display:grid !important;
  gap:8px !important;
  margin-top:8px !important;
  margin-bottom:8px !important;
}

.drawer-tools input{
  min-height:38px !important;
  height:38px !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg, rgba(18,18,24,.92), rgba(10,10,14,.96)) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  color:#f6efe4 !important;
}

/* MENU : petites tuiles au lieu de gros pavés */
.menu-list,
.menu-row{
  display:none !important;
}

.menu-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.menu-tile{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 12px;
  border-radius:16px;
  border:1px solid rgba(255,190,120,.08);
  background:
    linear-gradient(180deg, rgba(17,17,24,.92), rgba(9,10,15,.96));
  color:#f9f3ea;
  font-weight:800;
  font-size:.90rem;
  text-align:left;
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.menu-tile__icon{
  width:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
}

.menu-tile__label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.menu-tile--wide{
  grid-column:1 / -1;
}

.menu-tile--danger{
  background:
    linear-gradient(180deg, rgba(108,14,14,.94), rgba(75,10,10,.96));
  color:#fff0ec;
}

/* account mini card propre */
.account-mini-card{
  margin-top:10px;
  padding:12px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(14,15,22,.68), rgba(7,8,14,.76)) !important;
  border:1px solid rgba(255,190,120,.06) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.account-mini-card__title{
  margin-bottom:8px;
  font-size:.88rem;
  font-weight:900;
  color:#fff5ea;
}

.account-mini-card__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:3px 0;
  font-size:.80rem;
  color:rgba(241,229,212,.78);
}

.account-mini-card__row b{
  min-width:96px;
  color:#fff;
}

/* hide any raw ugly injected block still surviving */
#drawerBody > div{
  font-size:inherit;
}
#drawerBody > div:not(.drawer-stack):not(.drawer-tools):not(.drawer-tools--compact):not(.drawer-tools--top):not(.account-mini-card):not(.menu-tiles):not(.drawer-card){
  /* laisse passer seulement les vrais blocs utiles */
}


/* mobile */
@media (max-width:760px){
  .menu-tile{
    min-height:44px;
    font-size:.88rem;
    border-radius:15px;
  }

  .drawer-card{
    border-radius:17px !important;
  }

  .drawer-close{
    width:50px !important;
    height:50px !important;
  }
}



/* DEBUG drawer clicks */
#drawer,
#drawer * ,
#drawerBody,
#drawerBody *{
  pointer-events:auto !important;
}

/* ===== ChatNova nick colors ===== */
.user-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.user-name{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-name--male{
  color:#69a8ff;
}

.user-name--female{
  color:#ff86c8;
}

.user-name--unknown{
  color:#f4f7ff;
}

/* ===== ChatNova userlist final layout ===== */
.user-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.user-name{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-name--male{
  color:#69a8ff;
}

.user-name--female{
  color:#ff86c8;
}

.user-name--unknown{
  color:#f4f7ff;
}

/* ===== MEMBERS PANEL V5 — compact ===== */

#membersRail,
.members-rail{
  top:14px !important;
  right:10px !important;
  width:min(300px, calc(100vw - 20px)) !important;
  height:calc(100dvh - 120px - var(--composer-h)) !important;
  max-height:calc(100dvh - 120px - var(--composer-h)) !important;
  min-height:unset !important;
  padding:10px !important;
  overflow:auto !important;
  background:
    linear-gradient(180deg, rgba(8,10,16,.98), rgba(4,6,12,.994)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:18px !important;
  box-shadow:0 16px 36px rgba(0,0,0,.36) !important;
}

.members-rail__head{
  margin-bottom:8px !important;
  padding:0 2px 8px !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}

.members-rail__head h3{
  margin:0 !important;
  font-size:1rem !important;
  font-weight:800 !important;
  color:#e8eefc !important;
  letter-spacing:-.01em !important;
}

.members-rail__head p{
  display:none !important;
}

#userList,
.user-list{
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
}

.user-item{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:4px 6px !important;
  border-radius:6px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background .1s !important;
}

.user-item:hover{
  background:rgba(255,255,255,.05) !important;
}

/* Rétrocompat — masquer anciens éléments */
.user-top,.user-meta,.user-actions,
.user-badge,.user-sex-badge{ display:none !important; }

@media (max-width:760px){
  #membersRail,
  .members-rail{
    top:10px !important;
    width:min(280px, calc(100vw - 16px)) !important;
    height:calc(100dvh - 110px - var(--composer-h)) !important;
    max-height:calc(100dvh - 110px - var(--composer-h)) !important;
  }
}

/* ===== HARMONISATION GLOBALE UI V1 ===== */

/* Cartes / panneaux */
.drawer-card,
#drawer .drawer-card,
.account-mini-card,
.cn-modal,
.cn-panel,
.cn-popup,
#commandHelpModal > div,
#chatnovaRegisterModalCore > div,
#chatnovaConfirmCodeModal > div{
  border-radius:22px !important;
  border:1px solid rgba(255,190,120,.08) !important;
  background:
    linear-gradient(180deg, rgba(14,16,24,.88), rgba(8,10,16,.94)) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Titres de blocs */
.drawer-card__title,
.account-mini-card__title,
.cn-modal h2,
.cn-panel h2,
#commandHelpModal h2,
#chatnovaRegisterModalCore h2,
#chatnovaConfirmCodeModal h2{
  color:#fff4e8 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

/* Sous-titres */
.drawer-card__sub,
.account-mini-card__row,
.drawer-head p{
  color:rgba(236,226,210,.68) !important;
}

/* Boutons secondaires unifiés */
.menu-btn,
.drawer-card__actions button,
.drawer-tools button,
.user-actions button,
.cn-modal button,
.cn-panel button,
#commandHelpModal button,
#chatnovaRegisterModalCore button,
#chatnovaConfirmCodeModal button{
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,190,120,.08) !important;
  background:
    linear-gradient(180deg, rgba(24,24,30,.96), rgba(13,13,18,.98)) !important;
  color:#f8f1e8 !important;
  font-weight:800 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Hover cohérent */
.menu-btn:hover,
.drawer-card__actions button:hover,
.drawer-tools button:hover,
.user-actions button:hover,
.cn-modal button:hover,
.cn-panel button:hover{
  border-color:rgba(255,184,92,.18) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,170,70,.05) inset !important;
}

/* Boutons principaux orange */
.primary-btn,
.btn-main,
#drawerJoinRoomBtn,
button[type="submit"],
.cn-primary{
  background:
    linear-gradient(180deg, rgba(255,154,28,.96), rgba(214,87,0,.96)) !important;
  border:1px solid rgba(255,215,170,.16) !important;
  color:#fff !important;
  box-shadow:
    0 12px 24px rgba(255,102,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Boutons danger */
.menu-btn--danger,
#logoutBtn2,
#logoutBtn{
  background:
    linear-gradient(180deg, rgba(130,18,18,.96), rgba(86,10,10,.98)) !important;
  border:1px solid rgba(255,130,110,.12) !important;
  color:#fff1ee !important;
}

/* Champs harmonisés */
#drawer input,
#drawer select,
#drawer textarea,
.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea,
#commandHelpModal input,
#commandHelpModal select,
#commandHelpModal textarea,
#chatnovaRegisterModalCore input,
#chatnovaRegisterModalCore select,
#chatnovaRegisterModalCore textarea,
#chatnovaConfirmCodeModal input,
#chatnovaConfirmCodeModal select,
#chatnovaConfirmCodeModal textarea{
  min-height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,190,120,.08) !important;
  background:
    linear-gradient(180deg, rgba(18,18,24,.90), rgba(10,10,14,.96)) !important;
  color:#f6efe6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Focus harmonisé */
#drawer input:focus,
#drawer select:focus,
#drawer textarea:focus,
.cn-modal input:focus,
.cn-modal select:focus,
.cn-modal textarea:focus,
.cn-panel input:focus,
.cn-panel select:focus,
.cn-panel textarea:focus{
  border-color:rgba(255,179,71,.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,179,71,.10),
    0 0 16px rgba(255,136,0,.08),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
  outline:none !important;
}

@media (max-width:760px){
  .menu-btn,
  .drawer-card__actions button,
  .drawer-tools button,
  .user-actions button,
  .cn-modal button,
  .cn-panel button{
    min-height:38px !important;
    height:38px !important;
    border-radius:13px !important;
    font-size:.92rem !important;
  }
}

/* ===== MENU HARMONISATION FORCÉE ===== */
#drawerBody .menu-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}

#drawerBody .menu-btn,
#drawerBody button.menu-btn,
#drawerBody #menuProfile,
#drawerBody #menuRegisterNick,
#drawerBody #menuSettings,
#drawerBody #menuServices,
#drawerBody #menuHelp,
#drawerBody #logoutBtn2{
  width:100% !important;
  min-height:56px !important;
  height:56px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,190,120,.08) !important;
  background:
    linear-gradient(180deg, rgba(18,19,27,.88), rgba(10,11,17,.94)) !important;
  color:#f8f1e8 !important;
  font-size:1rem !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  text-align:left !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#drawerBody .menu-btn:hover,
#drawerBody button.menu-btn:hover,
#drawerBody #menuProfile:hover,
#drawerBody #menuRegisterNick:hover,
#drawerBody #menuSettings:hover,
#drawerBody #menuServices:hover,
#drawerBody #menuHelp:hover,
#drawerBody #logoutBtn2:hover{
  border-color:rgba(255,184,92,.18) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,170,70,.06) inset !important;
}

#drawerBody #logoutBtn2,
#drawerBody .menu-btn--danger{
  background:
    linear-gradient(180deg, rgba(130,18,18,.96), rgba(86,10,10,.98)) !important;
  border:1px solid rgba(255,130,110,.12) !important;
  color:#fff1ee !important;
}

@media (max-width:760px){
  #drawerBody .menu-btn,
  #drawerBody button.menu-btn,
  #drawerBody #menuProfile,
  #drawerBody #menuRegisterNick,
  #drawerBody #menuSettings,
  #drawerBody #menuServices,
  #drawerBody #menuHelp,
  #drawerBody #logoutBtn2{
    min-height:52px !important;
    height:52px !important;
    padding:0 16px !important;
    border-radius:16px !important;
    font-size:.96rem !important;
  }
}

/* ===== MODALES HARMONISÉES ===== */

/* Structure */
.cn-modal,
.cn-panel,
#commandHelpModal > div,
#chatnovaRegisterModalCore > div,
#chatnovaConfirmCodeModal > div{
  padding:22px !important;
}

/* Espacement des champs */
.cn-modal label,
.cn-panel label{
  display:block !important;
  margin:12px 0 6px !important;
  color:#fff4e8 !important;
  font-weight:700 !important;
}

/* Inputs + selects FULL WIDTH propres */
.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea{
  width:100% !important;
  padding:12px 14px !important;
  font-size:.95rem !important;
}

/* Boutons en bas (layout clean) */
.cn-modal .actions,
.cn-panel .actions,
.cn-modal .form-actions,
.cn-panel .form-actions{
  display:flex !important;
  gap:12px !important;
  justify-content:flex-end !important;
  margin-top:20px !important;
}

/* Bouton secondaire (Fermer) */
.cn-modal button,
.cn-panel button{
  min-width:110px !important;
}

/* Bouton primaire (Sauvegarder / Valider) */
.cn-modal .primary,
.cn-panel .primary,
.cn-modal button:last-child,


/* Boutons liste (Services IRC) */


/* Cadre profil (chips couleurs) */
.cn-modal .chip,
.cn-panel .chip{
  padding:6px 12px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  font-weight:700 !important;
}

/* Alignement upload avatar */
.cn-modal input[type="file"]{
  background:transparent !important;
  border:none !important;
}

/* Bouton retirer avatar */
.cn-modal .btn-remove{
  margin-top:10px !important;
}

/* Mobile spacing clean */
@media (max-width:760px){
  .cn-modal,
  .cn-panel{
    padding:18px !important;
  }

  .cn-modal button,
  .cn-panel button{
    min-height:42px !important;
    height:42px !important;
  }
}


/* ===== Notices badge on info button ===== */
#infoBtn.notice-alert{
  position:relative;
  box-shadow:
    0 0 0 1px rgba(255,170,70,.14) inset,
    0 0 22px rgba(255,120,20,.12),
    var(--shadow-1) !important;
}

#infoBtn.notice-alert::after{
  content:"";
  position:absolute;
  top:7px;
  right:7px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg, #ff6b57, #d91e18);
  box-shadow:
    0 0 0 2px rgba(8,12,20,.95),
    0 0 14px rgba(255,80,60,.45);
}

#infoBtn.notice-alert .top-icon,
#infoBtn.notice-alert{
  animation:noticePulse 1.4s ease-in-out infinite;
}

@keyframes noticePulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}

/* ===== WS overlay lock ===== */
#wsStateOverlay button{
  cursor:pointer;
}

#wsStateOverlay button:active{
  transform:translateY(1px);
}

/* ===== PROFILE PANEL + PV STYLE HARMONISATION ===== */

#drawer .profile-panel,
#drawer .profile-view,
#drawer [data-view="profileView"],
#profilePanel,
#profileView{
  background:
    linear-gradient(180deg, rgba(8,12,22,.965), rgba(4,8,16,.985)) !important;
  border:1px solid rgba(255,190,120,.10) !important;
  border-radius:24px !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  color:#f7f0e8 !important;
}

/* titre + sous parties */
#profilePanel h2,
#profileView h2,
#profilePanel h3,
#profileView h3,
#drawer .profile-panel h2,
#drawer .profile-panel h3{
  color:#fff4e8 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

/* labels */
#profilePanel label,
#profileView label,
#profilePanel .field span,
#profileView .field span,
#drawer .profile-panel label{
  color:rgba(244,230,210,.78) !important;
  font-weight:700 !important;
}

/* inputs */
#profileAge,
#profileSex,
#profileDept,
#profileCity,
#profileBio,
#profilePanel input[type="text"],
#profilePanel input[type="number"],
#profilePanel input[type="email"],
#profilePanel input[type="password"],
#profilePanel select,
#profilePanel textarea,
#profileView input[type="text"],
#profileView input[type="number"],
#profileView select,
#profileView textarea{
  width:100% !important;
  background:
    linear-gradient(180deg, rgba(18,18,24,.92), rgba(10,10,14,.96)) !important;
  border:1px solid rgba(255,190,120,.08) !important;
  color:#f7f1e8 !important;
  border-radius:16px !important;
  min-height:46px !important;
  padding:12px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 6px 14px rgba(0,0,0,.12) !important;
}

#profileBio,
#profilePanel textarea,
#profileView textarea{
  min-height:120px !important;
  resize:vertical !important;
}

#profileAge:focus,
#profileSex:focus,
#profileDept:focus,
#profileCity:focus,
#profileBio:focus,
#profilePanel input:focus,
#profilePanel select:focus,
#profilePanel textarea:focus,
#profileView input:focus,
#profileView select:focus,
#profileView textarea:focus{
  outline:none !important;
  border-color:rgba(255,170,70,.24) !important;
  box-shadow:
    0 0 0 1px rgba(255,170,70,.10),
    0 0 20px rgba(255,120,20,.08),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* file input bloc avatar */
#profileAvatarFile,
#profilePanel input[type="file"],
#profileView input[type="file"]{
  width:100% !important;
  padding:10px !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg, rgba(16,16,22,.84), rgba(8,8,12,.92)) !important;
  border:1px solid rgba(255,190,120,.07) !important;
  color:#f7f1e8 !important;
}

#profilePanel input[type="file"]::file-selector-button,
#profileView input[type="file"]::file-selector-button,
#profileAvatarFile::file-selector-button{
  border:none !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  margin-right:12px !important;
  background:
    linear-gradient(180deg, rgba(36,36,44,.96), rgba(18,18,24,.98)) !important;
  color:#fff4ea !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

/* preview avatar */
#profileAvatarPreview{
  width:78px !important;
  height:78px !important;
  object-fit:cover !important;
  border-radius:20px !important;
  border:1px solid rgba(255,190,120,.12) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    0 0 18px rgba(255,120,20,.06) !important;
}

/* boutons secondaires */
#profileAvatarRemove,
#profileClose,
#profilePanel button:not(#profileSave),
#profileView button:not(#profileSave){
  min-height:42px !important;
  border:none !important;
  border-radius:14px !important;
  padding:0 16px !important;
  background:
    linear-gradient(180deg, rgba(31,36,50,.96), rgba(20,24,34,.98)) !important;
  color:#f7f1e8 !important;
  font-weight:800 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* bouton save */
#profileSave{
  min-height:44px !important;
  border:none !important;
  border-radius:15px !important;
  padding:0 18px !important;
  background:
    linear-gradient(180deg, rgba(255,154,28,.96), rgba(214,87,0,.96)) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:
    0 12px 24px rgba(255,102,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* bloc cadre profil / fond */
#profilePanel .frame-picker,
#profilePanel .theme-picker,
#profilePanel .profile-frames,
#profileView .frame-picker,
#profileView .theme-picker,
#profileView .profile-frames,
#profilePanel [data-role="frame-picker"],
#profileView [data-role="frame-picker"]{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg, rgba(13,14,20,.72), rgba(8,9,14,.82)) !important;
  border:1px solid rgba(255,190,120,.06) !important;
}

/* chips bleu rose noir etc */
#profilePanel .frame-picker button,
#profilePanel .theme-picker button,
#profilePanel .profile-frames button,
#profileView .frame-picker button,
#profileView .theme-picker button,
#profileView .profile-frames button,
#profilePanel [data-role="frame-picker"] button,
#profileView [data-role="frame-picker"] button{
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,190,120,.08) !important;
  background:
    linear-gradient(180deg, rgba(25,25,32,.94), rgba(12,12,18,.98)) !important;
  color:#f7f1e8 !important;
  font-weight:800 !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

#profilePanel .frame-picker button.is-active,
#profilePanel .theme-picker button.is-active,
#profilePanel .profile-frames button.is-active,
#profileView .frame-picker button.is-active,
#profileView .theme-picker button.is-active,
#profileView .profile-frames button.is-active,
#profilePanel [data-role="frame-picker"] button.is-active,
#profileView [data-role="frame-picker"] button.is-active{
  background:
    linear-gradient(180deg, rgba(255,154,28,.96), rgba(214,87,0,.96)) !important;
  color:#fff !important;
  border-color:rgba(255,214,160,.16) !important;
}

/* footer profil */
#profilePanel .profile-footer,
#profileView .profile-footer,
#profilePanel #profileSave,
#profilePanel #profileClose,
#profileView #profileSave,
#profileView #profileClose{
  margin-top:6px !important;
}

/* mobile */
@media (max-width:760px){
  #profilePanel,
  #profileView,
  #drawer .profile-panel{
    border-radius:20px !important;
    padding:16px !important;
  }

  #profileAvatarPreview{
    width:64px !important;
    height:64px !important;
    border-radius:18px !important;
  }

  #profileAge,
  #profileSex,
  #profileDept,
  #profileCity,
  #profileBio{
    font-size:16px !important;
  }
}

/* ===== PERF UI (moins de lag) ===== */

#profilePanel,
#profileView,
#drawer .profile-panel{
  animation:none !important;
  transition:opacity .15s ease, transform .15s ease !important;
  will-change:opacity, transform;
}

#profilePanel,
#profileView{
  transform:translateY(6px);
  opacity:0;
}

#profilePanel.is-visible,
#profileView.is-visible{
  transform:translateY(0);
  opacity:1;
}

/* réduit les ombres lourdes */
#profilePanel,
#profileView{
  box-shadow:
    0 10px 30px rgba(0,0,0,.25) !important;
}

/* scroll plus fluide */
#profilePanel,
#profileView{
  -webkit-overflow-scrolling: touch;
}


/* ===== FINAL OVERRIDE EVENT COLORS ===== */
.msg.msg--event-join .msg__text,
.msg--event-join .msg__text{
  color:#79ff9b !important;
  font-weight:800 !important;
}

.msg.msg--event-part .msg__text,
.msg--event-part .msg__text{
  color:#ffc97a !important;
  font-weight:800 !important;
}

.msg.msg--event-mode .msg__text,
.msg--event-mode .msg__text{
  color:#7db8ff !important;
  font-weight:800 !important;
}

.msg.msg--event-kick .msg__text,
.msg--event-kick .msg__text{
  color:#ff8e8e !important;
  font-weight:900 !important;
}

.msg.msg--event-join .msg__nick,
.msg--event-join .msg__nick{
  color:#79ff9b !important;
}

.msg.msg--event-part .msg__nick,
.msg--event-part .msg__nick{
  color:#ffc97a !important;
}

.msg.msg--event-mode .msg__nick,
.msg--event-mode .msg__nick{
  color:#7db8ff !important;
}

.msg.msg--event-kick .msg__nick,
.msg--event-kick .msg__nick{
  color:#ff8e8e !important;
}

/* ===== BUTTONS ===== */
button{
  border:none;
  cursor:pointer;
  transition:
    transform .14s ease,
    filter .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease;
}

button:hover{
  filter:brightness(1.04);
}

button:active{
  transform:translateY(1px);
}

button:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  filter:none;
}

/* bouton standard unifié */
.primary-btn,
button.primary,
.cn-btn,
.cn-settings-btn,
.cn-profile-btn,
.cn-modal button,
.cn-panel button,
.drawer-card__actions button,
.drawer-tools button,
.user-actions button,
#drawerBody button.menu-btn{
  min-height:44px;
  padding:0 14px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:linear-gradient(180deg, rgba(27,34,53,.96), rgba(18,24,42,.96));
  color:#eef2ff;
  border:1px solid rgba(255,255,255,.07);

  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;

  box-shadow:
    0 6px 14px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.primary-btn:hover,
button.primary:hover,
.cn-btn:hover,
.cn-settings-btn:hover,
.cn-profile-btn:hover,
.cn-modal button:hover,
.cn-panel button:hover,
.drawer-card__actions button:hover,
.drawer-tools button:hover,
.user-actions button:hover,
#drawerBody button.menu-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,179,71,.18);
  box-shadow:
    0 10px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* variante principale orange */
.primary-btn,
button.primary,
.cn-btn--primary,
.cn-settings-btn--primary,
.cn-profile-btn--primary,
button[type="submit"],
#composerForm button[type="submit"],
#sendBtn{
  background:linear-gradient(135deg, #ffb347 0%, #ff8a1f 58%, #ff6a00 100%);
  color:#fff;
  border-color:rgba(255,179,71,.22);
  box-shadow:
    0 10px 22px rgba(255,138,31,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* variante secondaire */
button.secondary,
.cn-btn--secondary,
.cn-settings-btn--secondary,
.cn-profile-btn--secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#f5f7fb;
  border-color:rgba(255,255,255,.08);
}

/* petite variante info */
.cn-btn--ghost,
.cn-btn--soft{
  background:rgba(255,255,255,.05);
  color:#eef2ff;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}

/* boutons icône */
.cn-btn--icon,
.drawer-close,
.cn-settings-close,
.cn-profile-close{
  min-width:38px;
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

/* topbar pills gardent leur style propre */
.top-pill{
  box-shadow:
    0 4px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* mobile */
@media (max-width:760px){
  .primary-btn,
  button.primary,
  .cn-btn,
  .cn-settings-btn,
  .cn-profile-btn,
  .cn-modal button,
  .cn-panel button,
  .drawer-card__actions button,
  .drawer-tools button,
  .user-actions button,
  #drawerBody button.menu-btn{
    min-height:42px;
    padding:0 12px;
    border-radius:13px;
    font-size:12px;
  }

  .cn-btn--icon,
  .drawer-close,
  .cn-settings-close,
  .cn-profile-close{
    min-width:36px;
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:15px;
  }
}



/* ===== ROOMS DRAWER PREMIUM ===== */
.drawer-stack--rooms{
  display:grid;
  gap:12px;
}

.drawer-card--room{
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(12,16,28,.94), rgba(9,12,22,.96));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.drawer-card--room .drawer-card__title{
  font-size:1.05rem;
  font-weight:900;
  margin-bottom:4px;
}

.drawer-card--room .drawer-card__sub{
  opacity:.72;
  margin-bottom:8px;
}

.drawer-card__meta{
  font-size:.9rem;
  line-height:1.35;
  color:rgba(255,255,255,.78);
  margin-bottom:12px;
}

.drawer-card--room .drawer-card__actions{
  display:flex;
  gap:10px;
}

.drawer-card--room .drawer-card__actions button{
  min-width:110px;
}

.drawer-joinbox{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(12,16,28,.94), rgba(9,12,22,.96));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.drawer-joinbox__title{
  font-size:1rem;
  font-weight:900;
  margin-bottom:12px;
}

.drawer-tools--join{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.drawer-tools--join input{
  min-height:46px;
  border-radius:16px;
}

.drawer-tools--join button{
  min-height:46px;
  background:linear-gradient(135deg, rgba(255,179,71,.16), rgba(255,106,0,.20));
  border:1px solid rgba(255,179,71,.20);
  color:#fff;
}

@media (max-width:760px){
  .drawer-card--room{
    padding:14px;
    border-radius:18px;
  }

  .drawer-card__meta{
    font-size:.86rem;
  }

  .drawer-card--room .drawer-card__actions{
    gap:8px;
  }

  .drawer-card--room .drawer-card__actions button{
    min-width:0;
    flex:1 1 auto;
  }

  .drawer-joinbox{
    padding:14px;
    border-radius:18px;
  }
}



/* ===== ROOMS COMPACT ===== */
.drawer-stack--rooms{
  gap:8px !important;
}

.drawer-card--room{
  padding:12px !important;
  border-radius:16px !important;
}

.drawer-card__meta{
  font-size:.82rem !important;
  margin-bottom:8px !important;
}

.drawer-card--room .drawer-card__actions{
  gap:6px !important;
}

.drawer-card--room .drawer-card__actions button{
  height:38px !important;
  font-size:.85rem !important;
}

.drawer-joinbox{
  padding:12px !important;
  border-radius:16px !important;
}

.drawer-tools--join input{
  height:40px !important;
}

.drawer-tools--join button{
  height:40px !important;
  font-size:.9rem !important;
}



/* ===== EXPLORER ALIGN WITH ROOMS ===== */
.drawer-card--room{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(20,24,40,.92), rgba(10,12,22,.96));
}

.drawer-card--room .drawer-card__actions button{
  background: linear-gradient(135deg, rgba(80,120,255,.25), rgba(80,120,255,.15));
  border: 1px solid rgba(80,120,255,.25);
}

#explorerRefreshBtn{
  width:100%;
}\n\n/* ===== PREMIUM PANELS / MODALS ===== */

/* overlays */
.cn-overlay,
.cn-modal,
#chatnovaRegisterModalCore,
#chatnovaConfirmCodeModal,
#chatnovaProfilePanel{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  background:rgba(5,8,14,.76) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

/* shell / modal core */
.cn-shell,
.cn-panel,
.cn-modal > div,
#chatnovaRegisterModalCore > div,
#chatnovaConfirmCodeModal > div{
  width:min(100%, 620px) !important;
  max-height:min(88vh, 920px) !important;
  overflow:auto !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at top left, rgba(255,120,0,.08), transparent 32%),
    linear-gradient(180deg, rgba(16,20,31,.985), rgba(8,11,18,.99)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:#f5f7fb !important;
}

/* header */
.cn-head,
.cn-panel > .cn-head,
.cn-modal h2,
#chatnovaRegisterModalCore h2,
#chatnovaConfirmCodeModal h2{
  position:relative !important;
}

.cn-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:22px 22px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
}

.cn-title{
  font-size:2rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  color:#ffffff !important;
  margin:0 !important;
}

.cn-sub{
  margin-top:6px !important;
  font-size:1rem !important;
  color:rgba(255,255,255,.62) !important;
  line-height:1.3 !important;
}

/* body */
.cn-body{
  display:grid !important;
  gap:16px !important;
  padding:18px 22px !important;
}

.cn-card{
  padding:18px !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgba(11,15,25,.92), rgba(7,10,18,.96)) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.cn-card__title{
  font-size:1.35rem !important;
  font-weight:900 !important;
  color:#ffffff !important;
  margin:0 0 4px !important;
}

.cn-card__sub{
  font-size:.98rem !important;
  color:rgba(255,255,255,.62) !important;
  margin:0 0 14px !important;
  line-height:1.35 !important;
}

/* form fields */
.cn-field{
  display:grid !important;
  gap:8px !important;
  margin-bottom:14px !important;
}

.cn-label{
  font-size:.95rem !important;
  font-weight:800 !important;
  color:#f7f8fb !important;
}

.cn-input,
.cn-select,
.cn-textarea,
.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea{
  width:100% !important;
  min-height:52px !important;
  padding:0 16px !important;
  border-radius:18px !important;
  background:rgba(6,9,16,.9) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#ffffff !important;
  font-size:1rem !important;
  outline:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.cn-textarea,
.cn-modal textarea,
.cn-panel textarea{
  min-height:120px !important;
  padding:14px 16px !important;
  resize:vertical !important;
}

.cn-input:focus,
.cn-select:focus,
.cn-textarea:focus,
.cn-modal input:focus,
.cn-modal select:focus,
.cn-modal textarea:focus,
.cn-panel input:focus,
.cn-panel select:focus,
.cn-panel textarea:focus{
  border-color:rgba(255,138,31,.34) !important;
  box-shadow:
    0 0 0 3px rgba(255,138,31,.10),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* radios / checks */
.cn-check{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  font-weight:700 !important;
}

.cn-check input{
  width:18px !important;
  height:18px !important;
}

/* preview block */
.cn-preview-card{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:14px !important;
  align-items:center !important;
  padding:16px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg, rgba(7,10,18,.94), rgba(11,15,25,.94)) !important;
  border:1px solid rgba(255,255,255,.05) !important;
}

.cn-preview-left{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.cn-preview-avatar{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.35rem !important;
  background:linear-gradient(135deg, rgba(255,179,71,.16), rgba(80,120,255,.12)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}

.cn-preview-nick{
  font-size:1.08rem !important;
  font-weight:900 !important;
  color:#fff !important;
}

.cn-preview-meta{
  font-size:.95rem !important;
  color:rgba(255,255,255,.68) !important;
  line-height:1.3 !important;
}

.cn-pill{
  min-height:32px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#f5f7fb !important;
  font-size:.84rem !important;
  font-weight:800 !important;
}

.cn-pill--accent{
  background:linear-gradient(135deg, rgba(255,179,71,.16), rgba(255,106,0,.18)) !important;
  border-color:rgba(255,179,71,.20) !important;
}

/* footer */
.cn-foot{
  display:flex !important;
  justify-content:flex-end !important;
  gap:12px !important;
  padding:14px 22px 22px !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}

/* generic buttons inside panels/modals */
.cn-btn,
.cn-modal button,
.cn-panel button,
#chatnovaRegisterModalCore button,
#chatnovaConfirmCodeModal button{
  min-height:48px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-size:1rem !important;
  font-weight:900 !important;
  color:#f8f9fb !important;
  background:linear-gradient(180deg, rgba(25,31,47,.96), rgba(15,20,34,.96)) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.cn-btn:hover,
.cn-modal button:hover,
.cn-panel button:hover,
#chatnovaRegisterModalCore button:hover,
#chatnovaConfirmCodeModal button:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(255,179,71,.18) !important;
}

.cn-btn--primary,
.cn-foot button:last-child,
#chatnovaRegisterModalCore button:last-child,
#chatnovaConfirmCodeModal button:last-child{
  background:linear-gradient(135deg, #ffb347 0%, #ff8a1f 58%, #ff6a00 100%) !important;
  color:#fff !important;
  border-color:rgba(255,179,71,.22) !important;
  box-shadow:
    0 14px 26px rgba(255,138,31,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cn-btn--secondary,
.cn-head button,
.cn-foot button:first-child{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  color:#f4f6fb !important;
}

/* services modal lists */
.cn-modal h3,
.cn-panel h3{
  font-size:1.15rem !important;
  font-weight:900 !important;
  margin:18px 0 10px !important;
  color:#fff !important;
}

.cn-modal .svc-list,
.cn-panel .svc-list{
  display:grid !important;
  gap:10px !important;
}

.cn-modal .svc-list button,
.cn-panel .svc-list button{
  width:100% !important;
  justify-content:flex-start !important;
  padding:0 16px !important;
}

/* mobile */
@media (max-width: 760px){
  .cn-overlay,
  .cn-modal,
  #chatnovaRegisterModalCore,
  #chatnovaConfirmCodeModal,
  #chatnovaProfilePanel{
    padding:10px !important;
    align-items:flex-end !important;
  }

  .cn-shell,
  .cn-panel,
  .cn-modal > div,
  #chatnovaRegisterModalCore > div,
  #chatnovaConfirmCodeModal > div{
    width:100% !important;
    max-height:90vh !important;
    border-radius:24px 24px 0 0 !important;
  }

  .cn-head{
    padding:18px 16px 12px !important;
  }

  .cn-title{
    font-size:1.7rem !important;
  }

  .cn-sub{
    font-size:.95rem !important;
  }

  .cn-body{
    gap:14px !important;
    padding:14px 16px !important;
  }

  .cn-card{
    padding:14px !important;
    border-radius:20px !important;
  }

  .cn-card__title{
    font-size:1.16rem !important;
  }

  .cn-card__sub{
    font-size:.92rem !important;
  }

  .cn-input,
  .cn-select,
  .cn-textarea,
  .cn-modal input,
  .cn-modal select,
  .cn-modal textarea,
  .cn-panel input,
  .cn-panel select,
  .cn-panel textarea{
    min-height:48px !important;
    font-size:.98rem !important;
    border-radius:16px !important;
  }

  .cn-preview-card{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .cn-foot{
    padding:12px 16px 16px !important;
    gap:10px !important;
  }

  .cn-btn,
  .cn-modal button,
  .cn-panel button,
  #chatnovaRegisterModalCore button,
  #chatnovaConfirmCodeModal button{
    min-height:46px !important;
    font-size:.96rem !important;
    border-radius:16px !important;
    flex:1 1 auto !important;
  }
}\n


/* ===== ORANGE BORDER (PREMIUM EDGE) ===== */

/* Cards */
.cn-card,
.drawer-card,
.cn-preview-card{
  border: 1px solid rgba(255,140,40,0.25) !important;
}

/* Inputs */
.cn-input,
.cn-select,
.cn-textarea,
.cn-modal input,
.cn-modal select,
.cn-modal textarea,
.cn-panel input,
.cn-panel select,
.cn-panel textarea{
  border: 1px solid rgba(255,140,40,0.20) !important;
}

/* Inputs focus (plus visible) */
.cn-input:focus,
.cn-select:focus,
.cn-textarea:focus,
.cn-modal input:focus,
.cn-modal select:focus,
.cn-modal textarea:focus{
  border: 1px solid rgba(255,140,40,0.45) !important;
}

/* Buttons outline */
.cn-btn,
.cn-modal button,
.cn-panel button{
  border: 1px solid rgba(255,140,40,0.18) !important;
}

/* Secondary buttons (Fermer etc) */
.cn-btn--secondary{
  border: 1px solid rgba(255,140,40,0.25) !important;
}

/* Drawer panels */
.drawer,
.cn-panel,
.cn-shell{
  border: 1px solid rgba(255,140,40,0.22) !important;
}



/* ===== SERVICES IRC PREMIUM ===== */
.cn-modal .services-modal,
.cn-panel .services-modal,
#servicesPanel,
#servicesModal{
  width:min(100%, 640px) !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at top right, rgba(255,120,0,.08), transparent 30%),
    linear-gradient(180deg, rgba(10,14,24,.98), rgba(6,9,16,.99)) !important;
  border:1px solid rgba(255,140,40,.24) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow:hidden !important;
}

.cn-modal .services-modal h2,
.cn-panel .services-modal h2,
#servicesPanel h2,
#servicesModal h2{
  font-size:1.9rem !important;
  font-weight:900 !important;
  margin:0 0 18px !important;
  color:#fff !important;
}

.cn-modal .services-modal h3,
.cn-panel .services-modal h3,
#servicesPanel h3,
#servicesModal h3{
  font-size:1.2rem !important;
  font-weight:900 !important;
  margin:22px 0 10px !important;
  color:#fff !important;
}

.cn-modal .services-modal button,
.cn-panel .services-modal button,
#servicesPanel button,
#servicesModal button{
  width:100% !important;
  min-height:46px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,140,40,.18) !important;
  background:linear-gradient(180deg, rgba(18,24,40,.96), rgba(10,14,24,.96)) !important;
  color:#f7f8fb !important;
  font-size:1rem !important;
  font-weight:800 !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.cn-modal .services-modal button:hover,
.cn-panel .services-modal button:hover,
#servicesPanel button:hover,
#servicesModal button:hover{
  border-color:rgba(255,140,40,.34) !important;
  transform:translateY(-1px) !important;
}

.cn-modal .services-modal button:last-child,
.cn-panel .services-modal button:last-child,
#servicesPanel button:last-child,
#servicesModal button:last-child{
  width:auto !important;
  min-width:130px !important;
  padding:0 18px !important;
}

.cn-modal .services-modal .services-section,
.cn-panel .services-modal .services-section,
#servicesPanel .services-section,
#servicesModal .services-section{
  padding:16px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  margin-bottom:14px !important;
}

/* cache les restes visuels derrière la modale services */
body:has(#servicesPanel),
body:has(#servicesModal){
  overflow:hidden !important;
}

/* ===== MENU LAG FIX MOBILE ===== */
.cn-overlay,
#drawer,
.drawer,
.drawer-panel,
.cn-shell {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cn-overlay {
  background: rgba(0,0,0,.58) !important;
}

#drawer,
.drawer,
.drawer-panel,
.cn-shell {
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}

.menu-grid,
.drawer-stack,
.cn-body {
  will-change: auto !important;
  transform: translateZ(0);
}

.menu-btn,
.drawer-card,
.cn-card {
  box-shadow: 0 4px 12px rgba(0,0,0,.16) !important;
}

@media (max-width: 768px) {
  .cn-overlay,
  #drawer,
  .drawer,
  .drawer-panel,
  .cn-shell,
  .menu-btn,
  .drawer-card,
  .cn-card {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== HIDE BUTTON "/" ===== */
#cmdBtn,
#commandBtn,
[data-action="commands"],
button[title*="/"] {
  display: none !important;
}

/* ===== HIDE "/" BUTTON SAFE ===== */
#cmdBtn,
#commandBtn,
#helpSlashBtn,
[data-action="commands"],
button[title="/"],
button[aria-label="/"] {
  display: none !important;
}

/* ===== REMOVE "/" BUTTON CLEAN ===== */
#cmdBtn {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* L'input prend toute la place */
#messageInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* sécurise la ligne */
.composer,
.composer-bar,
.composer-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

/* === PV BADGE === */
.cn-pv-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff3b3b,#ff0000);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(255,0,0,.4);
  border:1px solid rgba(255,255,255,.15);
  pointer-events:none;
}

/* === TOPBAR PV BADGE === */
.cn-pv-topbar-badge{
  position:fixed;
  top:10px;
  right:14px;
  z-index:9999;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff3b3b,#ff0000);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(255,0,0,.4);
  cursor:pointer;
}

/* === PANEL === */
.cn-pv-quick-panel{
  position:fixed;
  top:60px;
  right:10px;
  width:260px;
  max-height:60vh;
  overflow:auto;
  z-index:9999;
  border-radius:14px;
  background:linear-gradient(180deg,#111,#0a0a0a);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}

/* header */
.cn-pv-header{
  display:flex;
  justify-content:space-between;
  padding:10px;
  font-weight:900;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* list */
.cn-pv-list{
  display:flex;
  flex-direction:column;
}

/* row */
.cn-pv-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  cursor:pointer;
}

.cn-pv-row:hover{
  background:rgba(255,255,255,.05);
}

.cn-pv-row-main{
  display:flex;
  flex-direction:column;
}

.cn-pv-nick{
  font-weight:800;
}

.cn-pv-meta{
  font-size:11px;
  opacity:.6;
}

.cn-pv-unread{
  background:#ff3b3b;
  border-radius:999px;
  padding:2px 6px;
  font-size:11px;
  font-weight:900;
}

.cn-pv-empty{
  padding:10px;
  text-align:center;
  opacity:.6;
}

.cn-pv-topbar-badge{
  animation: cnPvPulse 1.5s infinite;
}

@keyframes cnPvPulse{
  0%   { transform: scale(1); box-shadow:0 6px 16px rgba(255,0,0,.35); }
  50%  { transform: scale(1.08); box-shadow:0 8px 20px rgba(255,0,0,.55); }
  100% { transform: scale(1); box-shadow:0 6px 16px rgba(255,0,0,.35); }
}

.cn-pv-topline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.cn-pv-row{
  gap:10px;
}

.cn-pv-row-main{
  min-width:0;
  flex:1;
}

.cn-pv-preview{
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.cn-pv-unread{
  flex:0 0 auto;
}


#navPv{
  position:relative;
}

.cn-pv-topbar-badge{
  position:absolute !important;
  top:-6px;
  right:-6px;
  z-index:20;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff3b3b,#ff0000);
  color:#fff;
  font-size:10px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(255,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  pointer-events:auto;
}


#navPv{
  position:relative;
  overflow:visible !important;
}

.cn-pv-topbar-badge{
  position:absolute !important;
  top:2px !important;
  right:2px !important;
  z-index:30;
  min-width:14px !important;
  height:14px !important;
  padding:0 3px !important;
  border-radius:999px;
  background:linear-gradient(135deg,#ff3b3b,#ff0000);
  color:#fff;
  font-size:8px !important;
  font-weight:900;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(255,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
  pointer-events:auto;
}


/* ===== FIX LOGIN TABS CLICK ===== */
.login-tabs {
  pointer-events: auto !important;
}

.login-tab {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.login-tab.active {
  opacity: 1 !important;
}


/* ===== FIX CLICK LOGIN (force priorité) ===== */
.login-tabs,
.login-form,
#loginView {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* kill overlays qui bloquent */
body::before,
body::after,
.login-overlay,
.cosmos,
.stars,
.veil {
  pointer-events: none !important;
}


/* ===== HARD FIX LOGIN CLICK ===== */

/* désactive toutes les couches overlay */
.overlay,
#overlay,
.cn-overlay,
body::before,
body::after {
  display: none !important;
  pointer-events: none !important;
}

/* force le login au dessus de tout */
#loginView {
  position: relative !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
}

.login-tabs,
.login-form,
.login-tab {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}


/* FIX affichage memberFields malgré .hidden */
#memberFields.show {
  display: block !important;
}


/* FIX tabs login visible */
.login-tabs {
  display: flex !important;
  gap: 10px !important;
}

.login-tab {
  opacity: .65 !important;
  filter: grayscale(.15) !important;
}

.login-tab.active {
  opacity: 1 !important;
  filter: none !important;
}


/* debug login tabs */
#tabGuest:not(.active),
#tabMember:not(.active){
  background: rgba(28,36,62,.42) !important;
  color: #eef3ff !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}

#tabGuest.active,
#tabMember.active{
  background: linear-gradient(180deg, rgba(255,145,0,.92), rgba(255,82,0,.92)) !important;
  color: #fff !important;
  border-color: rgba(255,190,110,.24) !important;
  box-shadow: 0 6px 18px rgba(255,110,0,.24) !important;
}

#memberFields.hidden{
  display:none !important;
}
#memberFields:not(.hidden){
  display:block !important;
}

/* FIX flash bleu tap mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

.login-card,
.login-form,
.login-form * {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

button,
input,
select,
textarea {
  outline: none;
}

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


#registerModal{
  display:none;
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  background:rgba(0,0,0,.65) !important;
  padding:18px !important;
}

#registerModal .modal-box{
  width:min(100%,420px) !important;
  margin:40px auto 0 !important;
  pointer-events:auto !important;
}


/* ============================================================
   ChatNova — Design unifié v2
   Drawer + Menu + PV Identity Card
   (Ce bloc remplace tous les anciens doublons ci-dessus)
   ============================================================ */

/* ─── Drawer ─────────────────────────────────────────────── */
#drawer,
.drawer {
  position: fixed;
  top: 0;
  right: -101%;
  width: min(88vw, 360px);
  height: 100%;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10,13,22,.99), rgba(6,8,16,.99));
  border-left: 1px solid rgba(255,255,255,.07);
  box-shadow: -8px 0 40px rgba(0,0,0,.45);
  transition: right .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

#drawer.open,
.drawer.open {
  right: 0;
}

/* En-tête drawer */
.drawer-head,
#drawer .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.drawer-head h3 {
  font-size: 17px;
  font-weight: 800;
  color: #e8eefc;
  margin: 0;
}

.drawer-head p {
  font-size: 12px;
  color: #7a8fbc;
  margin: 2px 0 0;
}

.drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  flex-shrink: 0;
}

.drawer-close:hover {
  background: rgba(255,255,255,.14);
}

/* Corps drawer */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Carte drawer générique */
.drawer-card,
#drawer .drawer-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #e8eefc;
}

.drawer-card__sub {
  font-size: 12px;
  color: #7a8fbc;
  margin-top: -4px;
}

.drawer-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer-card__actions button,
.drawer-tools button {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #e8eefc;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}

.drawer-card__actions button:hover,
.drawer-tools button:hover {
  background: rgba(255,255,255,.14);
}

/* Bouton primaire dans drawer */
.drawer-card__actions button.primary,
.drawer-card__actions .btn-primary {
  background: linear-gradient(180deg, #b90f00, #8f0000);
  border-color: transparent;
  color: #fff;
}

/* ─── Menu grid ──────────────────────────────────────────── */
.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.menu-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  color: #e8eefc;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .18s, border-color .18s, transform .1s;
}

.menu-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
}

.menu-btn:active {
  transform: scale(.98);
}

.menu-btn--danger {
  border-color: rgba(185,15,0,.35);
  background: rgba(185,15,0,.12);
  color: #ff6b6b;
}

.menu-btn--danger:hover {
  background: rgba(185,15,0,.22);
  border-color: rgba(185,15,0,.5);
}

/* ─── Overlay (drawer arrière-plan) ─────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.0);
  z-index: 8999;
  pointer-events: none;
  transition: background .28s;
}

.overlay.active {
  background: rgba(0,0,0,.45);
  pointer-events: all;
}

/* ─── Drawer stack (liste PV, salons) ───────────────────── */
.drawer-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── PV Identity Card ───────────────────────────────────── */
.cn-pv-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 10px 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.cn-pv-avatar-wrap {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  border: 2.5px solid #4f8aff;
  padding: 2px;
  box-sizing: border-box;
  transition: border-color .3s, box-shadow .3s;
}

.cn-pv-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(15,23,40,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.cn-pv-info {
  flex: 1;
  min-width: 0;
}

.cn-pv-nick {
  font-weight: 800;
  font-size: 17px;
  color: #e8eefc;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cn-pv-meta {
  font-size: 12px;
  color: #a8bbdc;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cn-pv-bio {
  font-size: 12px;
  color: #8899bb;
  margin-top: 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cn-pv-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.cn-pv-frame-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #4f8aff, #1e40af);
}

.cn-pv-actions {
  display: flex;
  gap: 6px;
}

.cn-pv-action-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
  color: inherit;
}

.cn-pv-action-btn:hover {
  background: rgba(255,255,255,.14);
}

.cn-pv-identity--notices {
  border-color: rgba(255,154,47,.2);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #drawer,
  .drawer {
    width: 100vw;
  }

  .cn-pv-bio {
    display: none;
  }
}

/* Fix cn-overlay pointer-events */
.cn-overlay { pointer-events: auto !important; }
.cn-overlay > * { pointer-events: auto !important; }

/* Fix modales pointer-events */
#chatnovaRegisterModalCore, #chatnovaRegisterModalCore * { pointer-events: auto !important; }

.msg__nick--admin{color:#ff9a2f;font-weight:900;text-shadow:0 0 8px rgba(255,154,47,.6);}
.msg__nick--bot{color:#7b9ef0;font-weight:700;}

@keyframes gradAnim{0%{opacity:1;}100%{opacity:1;}}
.register-hidden{display:none!important;}

/* Cadre spécial bo0m */
.pv-boom-frame{border:2px solid rgba(255,154,47,.6)!important;box-shadow:0 0 12px rgba(255,154,47,.3),inset 0 0 12px rgba(255,154,47,.05)!important;animation:boomPulse 2s ease-in-out infinite!important;}
@keyframes boomPulse{0%,100%{border-color:rgba(255,154,47,.4);box-shadow:0 0 8px rgba(255,154,47,.2);}50%{border-color:rgba(255,220,80,.8);box-shadow:0 0 20px rgba(255,180,50,.5),0 0 40px rgba(255,154,47,.2);}}
.cn-pv-avatar-wrap{transition:box-shadow .3s;}
@keyframes boomElectric{0%,100%{box-shadow:0 0 12px rgba(255,154,47,.5),0 0 24px rgba(255,100,0,.2);}50%{box-shadow:0 0 28px rgba(255,200,50,.8),0 0 56px rgba(255,154,47,.4),0 0 80px rgba(255,100,0,.15);}}

.cn-pv-boom{border:2px solid rgba(255,154,47,.7)!important;box-shadow:0 0 20px rgba(255,154,47,.4),0 0 40px rgba(255,100,0,.2),inset 0 0 20px rgba(255,154,47,.05)!important;animation:boomElectric 1.5s ease-in-out infinite!important;}

/* ===== TOPIC FULL VIEW + MEMBERS FAB FIX ===== */
.room-head,
.channel-head{
  position: relative;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  padding: 8px 86px 10px 2px !important;
  min-height: 44px;
}

.head-inline{
  display: block !important;
  min-width: 0;
}

#cnInlineTopic{
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.32 !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  color: #e9edf6 !important;
  padding-right: 2px;
}

#topicBar{
  display: none !important;
}

.members-fab{
  top: 4px !important;
  right: 8px !important;
  min-width: 68px !important;
  height: 34px !important;
  z-index: 30 !important;
}

@media (max-width: 760px){
  .room-head,
  .channel-head{
    padding: 8px 82px 10px 2px !important;
  }

  #cnInlineTopic{
    font-size: .88rem !important;
    line-height: 1.28 !important;
  }

  .members-fab{
    top: 2px !important;
    right: 6px !important;
    min-width: 64px !important;
    height: 32px !important;
  }
}

/* ===== TOPIC + MEMBRES - CLEAN v1 ===== */
#topicBar { display: none !important; }
#cnInlineTopic {
display: block;
font-size: 13px;
font-weight: 600;
color: #9ab0d0;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
padding: 2px 0;
}
.room-head, .channel-head {
position: relative;
display: flex;
flex-direction: column;
padding: 6px 70px 6px 8px;
min-height: 40px;
}
#membersToggle {
position: absolute;
top: 4px;
right: 6px;
z-index: 30;
min-width: 60px;
height: 32px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (max-width:760px) {
#cnInlineTopic { font-size: 12px; }
#membersToggle { min-width: 54px; height: 28px; }
}

/* ===== TOPIC + MEMBRES - CLEAN v1 ===== */
#topicBar { display: none !important; }

#cnInlineTopic {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #9ab0d0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 2px 0;
}

.room-head, .channel-head {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 70px 6px 8px;
  min-height: 40px;
}

#membersToggle {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 30;
  min-width: 60px;
  height: 32px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width:760px) {
  #cnInlineTopic { font-size: 12px; }
  #membersToggle { min-width: 54px; height: 28px; }
}

/* ================================================================
   ChatNova v5 — Redesign complet : messages, toasts, emoji, profils
   ================================================================ */

/* ===== Messages avec avatars (nouveau layout) ===== */

.msg--chat {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 10px !important;
  margin-bottom: 0 !important;
  border-radius: 6px !important;
  transition: background .1s;
  line-height: 1.5;
}
.msg--chat:hover { background: rgba(255,255,255,.03) !important; }

.msg__avatar { display: none !important; }
.msg__body   { display: none !important; }

.msg--chat .msg__time {
  font-size: 11px !important;
  color: rgba(255,255,255,.3) !important;
  font-weight: 500 !important;
  flex-shrink: 0;
  white-space: nowrap;
}

.msg--chat .msg__nick {
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity .15s;
}
.msg--chat .msg__nick:hover { opacity: .8; text-decoration: underline; text-underline-offset: 2px; }

.msg--chat .msg__text {
  display: inline !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: rgba(245,247,251,.88) !important;
  word-break: break-word !important;
  min-width: 0;
}

/* Nick sex colors in messages */
.msg__nick.nick--male   { color: #7ab4ff; }
.msg__nick.nick--female { color: #ff9fc8; }
.msg__nick.nick--op     { color: #ff9a2f !important; }
.msg__nick.nick--owner  { color: #ffd27a !important; }
.msg__nick.nick--me     { color: #a8edcc; }

/* Groupage : même auteur messages consécutifs — masquer heure + pseudo */
.msg--grouped {
  margin-top: -1px !important;
  padding-top: 1px !important;
}
.msg--grouped .msg__time { display: none !important; }
.msg--grouped .msg__nick { display: none !important; }

/* Animation entrée nouveaux messages */
@keyframes cn-msg-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg--new { animation: cn-msg-in 0.18s ease-out forwards; }

/* Preview images dans les messages */
.msg-img-wrap { margin-top: 6px; }
.msg-img-thumb {
  max-width: 240px; max-height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: block; object-fit: cover;
  transition: opacity .2s, transform .15s;
}
.msg-img-thumb:hover { opacity: .85; transform: scale(1.01); }

.msg--chat { position: relative; }

/* ===== Toast Notifications ===== */
#cn-toast-container {
  position: fixed; bottom: 90px; right: 14px; z-index: 999999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.cn-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 14px;
  min-width: 200px; max-width: 300px;
  font-size: 13px; font-weight: 600;
  pointer-events: all; backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  animation: cn-toast-in 0.3s cubic-bezier(.34,1.56,.64,1) forwards;
  cursor: pointer;
}
.cn-toast--success { background: rgba(34,197,94,.2); border: 1px solid rgba(34,197,94,.35); color: #4ade80; }
.cn-toast--error   { background: rgba(239,68,68,.2);  border: 1px solid rgba(239,68,68,.35);  color: #f87171; }
.cn-toast--info    { background: rgba(59,130,246,.2); border: 1px solid rgba(59,130,246,.35); color: #7ab4ff; }
.cn-toast--warning { background: rgba(245,158,11,.2); border: 1px solid rgba(245,158,11,.35); color: #fcd34d; }
.cn-toast__icon { font-size: 16px; flex-shrink: 0; }
.cn-toast.cn-toast--out { animation: cn-toast-out 0.2s ease-in forwards; }
@keyframes cn-toast-in  { from { opacity:0; transform:translateX(40px) scale(.95); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes cn-toast-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(40px); } }

/* ===== Emoji Picker ===== */
#cn-emoji-panel {
  position: fixed; bottom: 82px; left: 10px; z-index: 99999;
  width: 298px; max-height: 330px;
  background: linear-gradient(180deg, rgba(15,18,30,.99), rgba(8,11,20,.99));
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  box-shadow: 0 20px 56px rgba(0,0,0,.7);
  display: none; flex-direction: column; overflow: hidden;
  animation: cn-emoji-in 0.18s ease-out;
}
#cn-emoji-panel.open { display: flex; }
@keyframes cn-emoji-in { from { opacity:0; transform:scale(.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }

.cn-emoji-search { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cn-emoji-search input {
  width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: #fff; padding: 7px 12px; font-size: 13px; outline: none;
}
.cn-emoji-search input::placeholder { color: rgba(255,255,255,.35); }
.cn-emoji-search input:focus { border-color: rgba(255,154,47,.4); }

.cn-emoji-cats {
  display: flex; gap: 2px; padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow-x: auto; scrollbar-width: none;
}
.cn-emoji-cats::-webkit-scrollbar { display: none; }
.cn-emoji-cat-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.cn-emoji-cat-btn:hover, .cn-emoji-cat-btn.active {
  background: rgba(255,154,47,.15); border-color: rgba(255,154,47,.3);
}

.cn-emoji-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(8,1fr); gap: 1px;
  padding: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.cn-emoji-btn {
  width: 33px; height: 33px; border: none; background: transparent;
  border-radius: 7px; font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
}
.cn-emoji-btn:hover { background: rgba(255,255,255,.1); transform: scale(1.18); }
.cn-emoji-btn:active { transform: scale(.92); }

/* Bouton emoji dans composer */
#cn-emoji-open-btn {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.7); font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
#cn-emoji-open-btn:hover { background: rgba(255,154,47,.15); color: #ff9a2f; }
#cn-emoji-open-btn.active { background: rgba(255,154,47,.2); color: #ff9a2f; }

/* ===== Typing Indicator ===== */
#cn-typing-bar {
  height: 18px; padding: 0 14px; flex-shrink: 0;
  font-size: 11px; color: rgba(255,255,255,.38); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.cn-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.cn-typing-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,154,47,.7);
  animation: cn-dot-bounce 1.3s ease-in-out infinite;
}
.cn-typing-dots span:nth-child(2) { animation-delay: .22s; }
.cn-typing-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes cn-dot-bounce {
  0%,80%,100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ===== Profil mini-card (popup) ===== */
.cn-profile-popup {
  position: fixed; z-index: 99998;
  width: 218px;
  background: linear-gradient(160deg, rgba(14,18,38,.99), rgba(8,11,24,.99));
  border: 1px solid rgba(255,154,47,.22); border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.65);
  animation: cn-popup-in 0.18s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes cn-popup-in { from { opacity:0; transform:scale(.92) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } }
.cn-profile-popup__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cn-profile-popup__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
}
.cn-profile-popup__nick { font-size: 15px; font-weight: 800; color: #e8f0fc; }
.cn-profile-popup__sub  { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
.cn-profile-popup__stats { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.cn-profile-popup__stat { display: flex; justify-content: space-between; }
.cn-profile-popup__stat span:last-child { color: rgba(255,255,255,.8); font-weight: 700; }
.cn-profile-popup__actions { display: flex; gap: 8px; }
.cn-profile-popup__btn {
  flex: 1; padding: 8px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06);
  color: #e8f0fc; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.cn-profile-popup__btn:hover { background: rgba(255,255,255,.12); }
.cn-profile-popup__btn--primary {
  background: linear-gradient(180deg,#ff9a2f,#c96a00);
  border-color: transparent; color: #fff;
}
.cn-profile-popup__btn--primary:hover { filter: brightness(1.1); }

/* ===== Login : compteur en ligne ===== */
.cn-login-live {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 16px;
  border-radius: 99px; background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.2);
  font-size: 12px; font-weight: 700; color: #4ade80;
}
.cn-login-live__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: cn-live-pulse 2s ease-in-out infinite;
}
@keyframes cn-live-pulse {
  0%,100% { box-shadow: 0 0 8px #4ade80; }
  50%      { box-shadow: 0 0 18px #4ade80, 0 0 28px rgba(74,222,128,.3); }
}

/* ===== Avatars dans la liste membres ===== */
.user-item { position: relative; }
.ui-avatar-small {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #fff; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: -.3px;
}

/* ===== Send button pulse on type ===== */
@keyframes cn-send-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,154,47,.0); }
  50%      { box-shadow: 0 0 0 6px rgba(255,154,47,.25); }
}
.composer-send.typing { animation: cn-send-pulse 1.2s ease-in-out infinite; }

/* ── Bouton couleur texte composer ─────────────────────────────────────── */
.composer-color-btn {
  width:40px; height:40px;
  border-radius:13px;
  border:2px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; margin:0;
  transition:border-color .15s, background .15s;
}
.composer-color-btn:hover { background:rgba(255,255,255,.12); }
.composer-color-btn.active { border-color:var(--cn-active-color, #ff9a2f); }

/* ── Color picker popup ─────────────────────────────────────────────────── */
#cnColorPicker {
  position:fixed;
  bottom:84px;
  left:10px;
  background:rgba(10,12,20,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
  display:grid; grid-template-columns:repeat(5,34px); gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  z-index:99999;
}
.cn-cp-swatch {
  width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(255,255,255,.1);
  cursor:pointer; transition:transform .12s, border-color .12s;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
}
.cn-cp-swatch:hover { transform:scale(1.15); }
.cn-cp-swatch.selected { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35); }

/* ===== Separator date dans les messages ===== */
.msg-date-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 8px 6px;
  font-size: 11px; color: rgba(255,255,255,.28); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.msg-date-sep::before, .msg-date-sep::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07);
}

/* ===== Scroll-to-bottom button ===== */
#cn-scroll-btn {
  position: absolute; bottom: 80px; right: 18px; z-index: 100;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(12,15,25,.92); border: 1px solid rgba(255,154,47,.3);
  color: #ff9a2f; font-size: 18px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: opacity .2s, transform .15s;
}
#cn-scroll-btn:hover { transform: scale(1.08); }
#cn-scroll-btn.visible { display: flex; }