@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg:#050508; --bg2:#0c0c12; --bg3:#12121a; --border:#1e1e2a;
  --gold:#c8a84b; --gold2:#ffe08a; --cyan:#4fc3c8;
  --text:#c8c8d0; --dim:#8a8aa0; --green:#3a8a4a; --red:#8a3a3a; --purple:#7a4a9a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}

/* ── HEADER ── */
#header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.h-titre { color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.h-meta  { font-size: 10px; color: var(--dim); display: flex; align-items: center; gap: 10px; }
#dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); display: inline-block;
  margin-right: 4px; transition: background .3s;
}
#dot.ok  { background: #3c3; box-shadow: 0 0 4px #3c3; }
#dot.err { background: #c33; }

/* ── LAYOUT PRINCIPAL ── */
#corps      { flex: 1; display: flex; overflow: hidden; }
#corps-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── BARRE VIDÉO ── */
#video-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--gold);
  flex-shrink: 0;
}
#video-bar .vb-title { color: var(--gold); font-weight: 700; font-size: 10px; letter-spacing: .08em; flex: 1; }
.vb-btn {
  background: none; border: 1px solid var(--gold); color: var(--gold);
  font-family: inherit; font-size: 10px; padding: 2px 8px;
  cursor: pointer; border-radius: 2px; transition: all .15s;
}
.vb-btn:hover       { background: var(--gold); color: var(--bg); box-shadow: 0 0 6px rgba(200,168,75,.4); }
.vb-btn.live        { border-color: #c33; color: #c33; animation: vb-live 1.5s ease-in-out infinite; }
.vb-btn.live:hover  { background: #c33; color: var(--bg); }
@keyframes vb-live  { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 8px rgba(204,51,51,.6);} }

/* ── FENÊTRES VIDÉO FLOTTANTES ── */
.vwin {
  position: fixed; width: 240px;
  background: var(--bg2); border: 1px solid var(--gold);
  box-shadow: 0 0 16px rgba(200,168,75,0.25);
  display: flex; flex-direction: column;
  z-index: 900; animation: vw-pop .15s ease;
  overflow: auto;
  resize: both;
  min-width: 160px; min-height: 140px;
}
@keyframes vw-pop { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
.vwin.me { border-color: var(--gold2); box-shadow: 0 0 16px rgba(255,224,138,0.35); }

/* ── Poignée de redimensionnement native ── */
.resize-handle { display: none; }  /* remplacé par resize:both natif */
.pm-win::-webkit-resizer,
.vwin::-webkit-resizer {
  background: linear-gradient(135deg, transparent 40%, var(--gold) 40%);
  opacity: 0.8;
}

.vw-head {
  background: #3a3a50; border-bottom: 1px solid var(--gold);
  padding: 4px 8px; display: flex; justify-content: space-between; align-items: center;
  cursor: grab; user-select: none;
}
.vw-head:active { cursor: grabbing; }
.vw-title       { color: var(--gold); font-weight: 700; font-size: 10px; letter-spacing: .05em; }
.vwin.me .vw-title { color: var(--gold2); }
.vw-close       { color: #8a3a3a; cursor: pointer; padding: 0 8px; font-weight: 700; font-size: 18px; line-height: 1; }
.vw-close:hover { color: #e05555; text-shadow: 0 0 4px #e05555; }
.vw-pm          { color: var(--dim); cursor: pointer; padding: 0 8px; font-size: 18px; line-height: 1; }
.vw-pm:hover    { color: var(--gold); text-shadow: 0 0 4px var(--gold2); }

.vw-body {
  background: #000; cursor: pointer;
  position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden;
}
.vwin.me .vw-body { cursor: default; }
.vw-body video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* ── MESSAGES ── */
#messages { flex: 1; overflow-y: auto; padding: 8px 10px; scroll-behavior: smooth; }
#messages::-webkit-scrollbar       { width: 3px; }
#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.ligne { padding: 1px 0; word-wrap: break-word; animation: fi .12s ease; }
@keyframes fi { from{opacity:0} to{opacity:1} }

.ts   { color: #9a9ab0; user-select: none; }
.nick { font-weight: 700; }
.nw   { color: var(--gold); }
.ni   { color: var(--cyan); }
.nb   { color: var(--purple); }
.nme  { color: var(--gold2); }
.mj   { color: var(--green); font-style: italic; }
.mp   { color: var(--red);   font-style: italic; }
.mn   { color: #a83;         font-style: italic; }
.ms   { color: #57a;         font-style: italic; }
.npm  { color: #ff79c6;      font-style: italic; font-weight: 700; }
.mpm  { color: #ff79c6; }

/* ── SIDEBAR ── */
#sidebar {
  width: 120px; border-left: 1px solid var(--border);
  background: var(--bg2);
  display: flex; flex-direction: column;
  flex-shrink: 0; overflow: hidden;
}
.sb-t {
  padding: 4px 8px; font-size: 11px; color: var(--dim);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .05em;
}
#user-list { flex: 1; overflow-y: auto; padding: 3px 0; }
#user-list::-webkit-scrollbar { width: 2px; }

.ui {
  padding: 2px 8px; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.ui:hover     { background: var(--bg3); }
.ui.ume       { cursor: default; }
.ui.ume:hover { background: transparent; }
.uw   { color: var(--gold); }
.uir  { color: var(--cyan); }
.ume  { color: var(--gold2); font-weight: 700; }
.usep {
  padding: 3px 8px 1px; font-size: 9px; color: var(--dim);
  border-top: 1px solid var(--border); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .06em;
}
.sb-n { padding: 4px 8px; font-size: 9px; color: var(--dim); border-top: 1px solid var(--border); }

/* ── ZONE SAISIE ── */
#input-zone {
  border-top: 2px solid var(--gold); background: var(--bg2);
  padding: 6px 8px; display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
#pbadge { color: var(--gold); font-weight: 700; font-size: 11px; white-space: nowrap; }
#pbadge::before { content: '<'; }
#pbadge::after  { content: '>'; }
#mi {
  flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 2px;
  color: var(--text); font-family: inherit; font-size: 13px; outline: none; padding: 4px 8px;
  caret-color: var(--gold); transition: border-color .2s, box-shadow .2s;
}
#mi:focus       { border-color: var(--gold); box-shadow: 0 0 6px rgba(200,168,75,0.2); }
#mi::placeholder { color: var(--dim); }
#sb {
  background: none; border: 1px solid var(--gold); color: var(--gold);
  font-family: inherit; font-size: 10px; padding: 4px 8px;
  cursor: pointer; border-radius: 2px; transition: all .2s;
}
#sb:hover { background: var(--gold); color: var(--bg); }

/* ── POPUPS PM ── */
.pm-win {
  position: fixed; width: 280px; height: 340px;
  background: var(--bg2); border: 1px solid var(--gold);
  box-shadow: 0 0 16px rgba(200,168,75,0.25);
  display: flex; flex-direction: column;
  z-index: 1000; font-size: 12px; animation: pm-pop .15s ease;
  overflow: auto;
  resize: both;
  min-width: 220px; min-height: 200px;
}
@keyframes pm-pop { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }

.pm-head {
  background: #3a3a50; border-bottom: 1px solid var(--gold);
  padding: 5px 8px; display: flex; justify-content: space-between; align-items: center;
  cursor: grab; user-select: none;
}
.pm-head:active { cursor: grabbing; }
.pm-title       { color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: .05em; }
.pm-close       { color: #8a3a3a; cursor: pointer; padding: 0 6px; font-weight: 700; font-size: 14px; line-height: 1; }
.pm-close:hover { color: #e05555; text-shadow: 0 0 4px #e05555; }

.pm-body { flex: 1; overflow-y: auto; padding: 5px 7px; line-height: 1.4; }
.pm-body::-webkit-scrollbar       { width: 2px; }
.pm-body::-webkit-scrollbar-thumb { background: var(--border); }
.pm-line   { padding: 1px 0; word-wrap: break-word; animation: fi .12s ease; }
.pm-mine   { color: var(--gold2); font-weight: 700; }
.pm-theirs { color: var(--cyan);  font-weight: 700; }

.pm-input-zone { border-top: 1px solid var(--gold); padding: 5px; }
.pm-input-zone input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 12px; padding: 5px 6px;
  outline: none; border-radius: 2px;
}
.pm-input-zone input:focus { border-color: var(--gold); box-shadow: 0 0 4px rgba(200,168,75,0.3); }

.pm-blink { animation: pm-blink .4s ease 3; }
@keyframes pm-blink {
  0%,100% { box-shadow: 0 0 16px rgba(200,168,75,0.25); border-color: var(--gold); }
  50%     { box-shadow: 0 0 24px rgba(255,121,198,0.8); border-color: #ff79c6; }
}

/* ── BANDEAU RADIO ── */
.lbn-bandeau   { width: 100%; max-height: 110px; object-fit: cover; flex-shrink: 0; display: block; }
.lbn-manifeste {
  background: var(--gold); color: var(--bg);
  padding: 4px 10px; font-family: 'Courier New', Courier, monospace;
  font-size: 12px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; flex-shrink: 0; letter-spacing: .02em;
}
.lbn-bar {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-family: 'Courier New', Courier, monospace;
}

/* Menu nav */
.lbn-nav { position: relative; flex-shrink: 0; }
.lbn-nav-toggle {
  background: #3a3a50; color: var(--gold); border: 1px solid var(--gold);
  padding: 5px 10px; font-family: inherit; font-size: 11px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: all .2s; white-space: nowrap;
}
.lbn-nav-toggle:hover,
.lbn-nav.open .lbn-nav-toggle { background: var(--gold); color: var(--bg); box-shadow: 0 0 10px var(--gold2); }
.lbn-nav-toggle .arrow { font-size: 8px; transition: transform .2s; }
.lbn-nav.open .lbn-nav-toggle .arrow { transform: rotate(180deg); }
.lbn-nav-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #3a3a50; border: 1px solid var(--gold);
  box-shadow: 0 0 16px rgba(200,168,75,.15);
  z-index: 200; min-width: 140px; flex-direction: column;
}
.lbn-nav.open .lbn-nav-dropdown { display: flex; }
.lbn-nav-dropdown a {
  background: transparent; color: var(--gold);
  padding: 7px 14px; font-family: inherit; font-size: 11px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  border-bottom: 1px solid var(--border); transition: all .15s; white-space: nowrap;
}
.lbn-nav-dropdown a:last-child { border-bottom: none; }
.lbn-nav-dropdown a:hover { background: var(--gold); color: var(--bg); }

/* Player */
.lbn-player {
  background: var(--bg); border: 1px solid var(--border);
  padding: 5px 10px; display: flex; flex-direction: column;
  gap: 4px; width: 220px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.lbn-player::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.lbn-ph     { display: flex; align-items: center; justify-content: space-between; }
.lbn-plabel { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); font-weight: bold; }
.lbn-live   { display: flex; align-items: center; gap: 4px; font-size: 8px; letter-spacing: .1em; color: var(--dim); }
.lbn-livedot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); transition: background .3s; }

.lbn-player.playing .lbn-livedot { background: #e03030; box-shadow: 0 0 5px #e03030; animation: lbn-blink 1s infinite; }
.lbn-player.playing .lbn-live    { color: #e03030; }
@keyframes lbn-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.lbn-pctrl { display: flex; align-items: center; gap: 8px; }
.lbn-pbtn  {
  width: 28px; height: 28px; border: 1px solid var(--gold);
  background: transparent; color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; font-family: inherit; transition: all .15s; padding: 0;
}
.lbn-pbtn:hover { background: var(--gold); color: var(--bg); box-shadow: 0 0 10px var(--gold2); }

.lbn-wave  { flex: 1; height: 28px; display: flex; align-items: center; gap: 1px; overflow: hidden; }
.lbn-wb    { flex: 1; background: #7a6028; border-radius: 1px; height: 3px; }
.lbn-player.playing .lbn-wb { background: var(--gold); animation: lbn-wave .7s ease-in-out infinite alternate; }
@keyframes lbn-wave { from{height:3px} to{height:var(--wh-px,18px)} }

.lbn-vol    { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lbn-vlabel { font-size: 8px; color: var(--dim); letter-spacing: .08em; }
.lbn-vslider {
  width: 48px; height: 3px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--gold) 80%, var(--border) 80%);
  outline: none; cursor: pointer; border-radius: 2px;
}
.lbn-vslider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px;
  background: var(--gold); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 4px rgba(200,168,75,.5);
}
.lbn-vslider::-moz-range-thumb {
  width: 10px; height: 10px; background: var(--gold);
  border-radius: 50%; border: none; cursor: pointer;
  box-shadow: 0 0 4px rgba(200,168,75,.5);
}
.lbn-vval { font-size: 8px; color: var(--dim); min-width: 22px; text-align: right; }
.lbn-ttl  {
  font-size: 10px; color: var(--dim); letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; min-height: 12px; padding: 1px 0;
}
.lbn-ttl.has-title {
  font-size: 11px; color: var(--gold2);
  text-shadow: 0 0 8px rgba(255,224,138,.5); font-weight: bold;
}
.lbn-ttl.has-title .lbn-ti {
  display: inline-block;
  animation: lbn-marquee 12s linear infinite; will-change: transform;
}
@keyframes lbn-marquee { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }

.lbn-social  { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; }
.lbn-btnsoc  {
  background: var(--bg); color: var(--cyan); border: 1px solid var(--cyan);
  padding: 5px 10px; font-family: inherit; font-size: 11px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.lbn-btnsoc:hover { background: var(--cyan); color: var(--bg); box-shadow: 0 0 10px var(--cyan); }

/* ── BULLE MINUTE DU SERPENT ── */
.lbn-serpent {
  flex: 1; min-width: 0; max-width: 600px; margin: 0 8px;
  background: var(--bg); border: 1px solid var(--gold); border-radius: 2px;
  padding: 5px 8px 5px 10px; display: flex; align-items: flex-start;
  gap: 8px; height: 60px; position: relative;
  box-shadow: inset 0 0 8px rgba(200,168,75,.08);
}
.lbn-serpent::before {
  content: '🐍'; flex-shrink: 0; font-size: 14px;
  filter: drop-shadow(0 0 3px rgba(200,168,75,.6)); margin-top: 1px;
}
.lbn-serpent-txt {
  flex: 1; height: 100%; overflow-y: auto; overflow-x: hidden;
  font-size: 13px; color: var(--gold2);
  text-shadow: 0 0 8px rgba(255,224,138,.5);
  font-weight: bold; letter-spacing: .02em; line-height: 1.35;
  padding-right: 4px; scrollbar-width: thin;
  scrollbar-color: var(--gold-dim, #7a6028) transparent;
}
.lbn-serpent-txt::-webkit-scrollbar       { width: 3px; }
.lbn-serpent-txt::-webkit-scrollbar-track { background: transparent; }
.lbn-serpent-txt::-webkit-scrollbar-thumb       { background: #7a6028; border-radius: 2px; }
.lbn-serpent-txt::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.lbn-serpent.empty                   { opacity: .5; }
.lbn-serpent.empty .lbn-serpent-txt  { color: var(--dim); font-weight: normal; text-shadow: none; }
.lbn-serpent.fresh { animation: lbn-serpent-flash 1.5s ease; }
@keyframes lbn-serpent-flash {
  0%,100% { box-shadow: inset 0 0 8px rgba(200,168,75,.08); }
  50%     { box-shadow: inset 0 0 8px rgba(200,168,75,.08), 0 0 16px rgba(255,224,138,.6); }
}
/* ── Écran de chargement cyberpunk ── */
#lbn-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease;
}
#lbn-loader.lbn-loader-out { opacity: 0; pointer-events: none; }

.lbn-loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.lbn-loader-glyph {
  font-size: 48px; color: var(--gold);
  text-shadow: 0 0 24px var(--gold2), 0 0 48px rgba(200,168,75,.4);
  animation: lbn-loader-pulse 2s ease-in-out infinite;
}
@keyframes lbn-loader-pulse {
  0%,100% { text-shadow: 0 0 24px var(--gold2), 0 0 48px rgba(200,168,75,.4); }
  50%     { text-shadow: 0 0 40px var(--gold2), 0 0 80px rgba(200,168,75,.7); }
}

.lbn-loader-txt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700;
  color: var(--gold); letter-spacing: .15em;
  text-transform: uppercase;
}

.lbn-loader-dots { display: flex; gap: 6px; }
.lbn-loader-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: .2;
  animation: lbn-loader-dot 1.2s ease-in-out infinite;
}
.lbn-loader-dots span:nth-child(2) { animation-delay: .2s; }
.lbn-loader-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes lbn-loader-dot {
  0%,80%,100% { opacity: .2; transform: scale(.8); }
  40%         { opacity: 1;  transform: scale(1.2); }
}

.lbn-loader-sub {
  font-size: 10px; color: var(--dim);
  letter-spacing: .1em; text-transform: uppercase;
}