:root{
  --bg:#030616;--panel:#080d21;--panel-2:#0c132b;--panel-3:#111a36;
  --line:#1c294d;--text:#f6f7ff;--muted:#9ca7c5;--pink:#ff2b91;
  --pink-2:#d70d72;--purple:#8b3dff;--cyan:#2aa7ff;--green:#22dc91;
  --danger:#ff334e;--shadow:0 25px 70px rgba(0,0,0,.42)
}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 12% 8%,rgba(119,28,255,.16),transparent 28%),radial-gradient(circle at 84% 15%,rgba(255,43,145,.09),transparent 24%),linear-gradient(145deg,#020411,#05091c 55%,#02030c)}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.page-shell{min-height:100vh;padding:18px}.chat-layout{width:min(1500px,100%);min-height:min(710px,calc(100vh - 250px));margin:auto;display:grid;grid-template-columns:310px minmax(0,1fr) 320px;gap:16px}.brand-card,.chat-card,.users-card,.private-card{background:linear-gradient(180deg,rgba(9,14,34,.97),rgba(4,8,22,.98));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.brand-card{padding:26px;display:flex;flex-direction:column;justify-content:space-between;position:relative}.brand-card:after{content:"";position:absolute;inset:auto -60px -70px; height:230px;background:radial-gradient(circle,rgba(255,43,145,.22),transparent 60%);pointer-events:none}.brand-logo{width:100%;max-height:195px;object-fit:contain;border-radius:18px;background:#050817;border:1px solid #172341;filter:saturate(1.08) contrast(1.05)}.brand-copy{position:relative;z-index:1}.brand-copy h1{font-size:44px;line-height:1;margin:20px 0 16px;letter-spacing:-1.5px}.brand-copy p,.rules-note{color:var(--muted);line-height:1.65}.live-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border-radius:999px;background:rgba(20,210,142,.09);color:#39e8a2;font-size:12px;font-weight:900;letter-spacing:.08em}.live-pill i,.user-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(34,220,145,.9)}
.chat-card{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.chat-header{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(3,6,18,.48)}.chat-header h2{margin:0;font-size:28px}.eyebrow{margin:0 0 5px;color:#d96eff;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.online-count,.role-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(20,210,142,.08);border:1px solid rgba(20,210,142,.15);color:#42efad;font-size:12px;font-weight:900}.role-badge{color:#d49aff;background:rgba(139,61,255,.13);border-color:rgba(139,61,255,.22)}#adminActions{display:flex;gap:8px}.ghost-button,.danger-button,.pm-toggle-button{border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-weight:800;color:var(--text);background:#0a1026}.danger-button{color:#ff69aa;border-color:rgba(255,43,145,.42);background:rgba(255,43,145,.08)}.pm-toggle-button.enabled{color:#3ff0aa;border-color:rgba(34,220,145,.35);background:rgba(34,220,145,.08)}.pm-toggle-button.disabled{color:#ff7990;border-color:rgba(255,51,78,.4);background:rgba(255,51,78,.09)}
.messages{min-height:0;overflow-y:auto;padding:22px;background:linear-gradient(180deg,rgba(5,9,25,.72),rgba(4,7,20,.93))}.message{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;margin:0 0 14px;padding:17px;border:1px solid #182645;border-radius:18px;background:linear-gradient(135deg,rgba(15,23,49,.98),rgba(7,13,31,.98));box-shadow:0 12px 30px rgba(0,0,0,.18)}.message.admin{border-color:rgba(255,43,145,.38);box-shadow:inset 0 0 35px rgba(255,43,145,.035)}.message-avatar,.user-avatar,.private-avatar{display:grid;place-items:center;border-radius:50%;font-weight:900;background:linear-gradient(145deg,#7e28ef,#4a16aa);color:white;box-shadow:0 0 22px rgba(139,61,255,.23)}.message-avatar{width:48px;height:48px}.message.admin .message-avatar{background:linear-gradient(145deg,#ff399c,#b20b64)}.message-content{min-width:0}.message-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}.message-name{font-weight:900;color:#b46bff}.message.admin .message-name{color:#ff55a8}.admin-badge{font-size:10px;font-weight:900;padding:3px 7px;border-radius:999px;color:#ff9aca;background:rgba(255,43,145,.12)}.message-time{margin-left:auto;color:#8190b1;font-size:12px}.message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px}.delete-message{margin-top:9px;border:0;padding:0;background:transparent;color:var(--danger);font-size:12px;font-weight:800}.message-form{padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border-top:1px solid var(--line);background:rgba(4,7,20,.92)}.message-form input,.login-card input{width:100%;border:1px solid #24355f;border-radius:14px;padding:14px 16px;color:var(--text);outline:none;background:#070c20}.message-form input:focus,.login-card input:focus{border-color:#b332ff;box-shadow:0 0 0 4px rgba(179,50,255,.12)}.message-form input:disabled{opacity:.55;cursor:not-allowed}.message-form button,.primary-button{border:1px solid #ff2b91;border-radius:14px;padding:13px 20px;color:white;font-weight:900;background:linear-gradient(135deg,#ff2b91,#bd106e);box-shadow:0 10px 28px rgba(255,43,145,.22)}.message-form button:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.5;box-shadow:none}
.users-card{padding:20px}.users-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.users-heading h3,.private-head h3{margin:0}.online-users{display:grid;gap:10px}.user-row{display:grid;grid-template-columns:9px 38px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:12px;border:1px solid #1a2849;border-radius:15px;background:linear-gradient(135deg,rgba(14,22,48,.95),rgba(6,11,27,.95))}.user-avatar{width:36px;height:36px;font-size:12px}.user-info{min-width:0;display:grid}.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-info small{color:#a06fec;font-size:11px;margin-top:2px}.pm-button,.ban-button,.ban-row button,.clear-private-button{border:1px solid transparent;border-radius:9px;padding:7px 9px;font-size:11px;font-weight:900}.pm-button{position:relative;color:#ff7db7;background:rgba(255,43,145,.13);border-color:rgba(255,43,145,.23)}.pm-unread-count,.private-unread-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:5px;padding:0 5px;border-radius:999px;color:white;background:var(--danger);font-size:10px;box-shadow:0 0 14px rgba(255,51,78,.55)}.ban-button{color:#ff5a70;background:rgba(255,51,78,.08)}.ban-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.ban-panel h4{margin:0 0 12px}.ban-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px}.ban-row small{display:block;color:var(--muted)}.rules-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.private-card{width:min(1180px,calc(100% - 120px));margin:16px auto 0;border-color:rgba(255,43,145,.55);box-shadow:0 0 0 1px rgba(139,61,255,.1),0 24px 70px rgba(0,0,0,.42)}.private-head{padding:15px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(139,61,255,.16),rgba(255,43,145,.08))}.private-head-actions{display:flex;align-items:center;gap:12px;color:#c7cbe0}.clear-private-button{color:#ff6e85;border-color:rgba(255,51,78,.35);background:rgba(255,51,78,.07)}.private-messages{height:210px;overflow:auto;padding:12px;background:#060a1b}.private-message{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;padding:10px 12px;margin-bottom:8px;border:1px solid #172546;border-radius:13px;background:linear-gradient(135deg,#0c142d,#080d20)}.private-avatar{width:34px;height:34px;font-size:11px}.private-content{min-width:0}.private-content small{float:right;color:#8590ad}.private-arrow{color:#8d98b8}.private-empty{margin:25px;text-align:center;color:var(--muted)}.pm-disabled .private-card{border-color:#27314d}.pm-disabled .private-head{background:rgba(20,25,43,.7)}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(1,3,12,.82);backdrop-filter:blur(14px)}.overlay.hidden{display:none}.login-card{width:min(430px,100%);padding:28px;border:1px solid #2a1e54;border-radius:24px;background:linear-gradient(160deg,#0c122b,#060919);box-shadow:0 30px 100px rgba(0,0,0,.6)}.login-logo{display:block;width:190px;max-width:70%;margin:0 auto 22px;border-radius:14px}.login-card h2{margin:0}.login-card label{display:block;margin:14px 0 7px;font-weight:800}.password-row.hidden{display:none}.primary-button{width:100%;margin-top:14px}.form-error{min-height:20px;margin:10px 0 0;color:#ff667e;font-size:13px;font-weight:700}.toast{position:fixed;left:50%;bottom:22px;z-index:30;transform:translateX(-50%) translateY(120px);opacity:0;padding:13px 17px;border:1px solid #33416b;border-radius:14px;color:white;background:#101832;box-shadow:var(--shadow);transition:.25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:#05091b}::-webkit-scrollbar-thumb{background:#2d3758;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#47547c}
@media(max-width:1100px){.chat-layout{grid-template-columns:230px minmax(0,1fr)}.users-card{grid-column:1/-1}.online-users{grid-template-columns:repeat(2,minmax(0,1fr))}.private-card{width:100%}}
@media(max-width:760px){.page-shell{padding:8px}.chat-layout{display:block}.brand-card,.chat-card,.users-card,.private-card{margin-bottom:12px}.brand-card{display:grid;grid-template-columns:125px 1fr;gap:16px;align-items:center}.brand-copy h1{font-size:32px}.chat-card{min-height:72vh}.users-card{padding:15px}.online-users{grid-template-columns:1fr}.private-card{margin-top:0}.private-head{align-items:flex-start;gap:12px}.private-head-actions{align-items:flex-end;flex-direction:column}.message{grid-template-columns:40px minmax(0,1fr);padding:13px}.message-avatar{width:38px;height:38px}.message-form{grid-template-columns:1fr}.header-actions{margin-top:12px}.chat-header{align-items:flex-start;flex-direction:column}.user-row{grid-template-columns:9px 36px minmax(0,1fr) auto auto}}
@media(max-width:460px){.brand-card{grid-template-columns:1fr}.brand-logo{max-height:145px}.message{grid-template-columns:1fr}.message-avatar{display:none}.user-row{grid-template-columns:9px 34px minmax(0,1fr) auto}.ban-button{grid-column:3/5}.private-head{flex-direction:column}.private-head-actions{width:100%;align-items:flex-start}}

/* Fixed-height chat layout: message volume never stretches the page */
@media (min-width:761px){
  html,body{height:100%;overflow:hidden}
  body{min-height:0}
  .page-shell{
    height:100dvh;
    min-height:0;
    padding:16px;
    display:grid;
    grid-template-rows:minmax(0,1fr) 248px;
    gap:14px;
    overflow:hidden;
  }
  .chat-layout{
    width:min(1500px,100%);
    height:100%;
    min-height:0;
    margin:auto;
  }
  .brand-card,.chat-card,.users-card{height:100%;min-height:0}
  .chat-card{overflow:hidden}
  .messages{height:100%;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}
  .message-form{position:relative;z-index:2;flex-shrink:0}
  .users-card{display:flex;flex-direction:column;overflow:hidden}
  .online-users{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:3px}
  .ban-panel{max-height:34%;overflow-y:auto;flex:0 0 auto}
  .rules-note{flex:0 0 auto;margin-bottom:0}
  .private-card{
    width:min(1180px,100%);
    height:248px;
    min-height:0;
    margin:0 auto;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
  }
  .private-messages{height:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .message-text,.private-content{overflow-wrap:anywhere;word-break:break-word}
}

/* Composer bars stay fixed while only message lists scroll (main chat + PM) */
.chat-card,
.private-card{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}
.messages,
.private-messages{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.message-form{
  position:relative;
  z-index:5;
  flex-shrink:0;
  background:#040714;
  box-shadow:0 -10px 24px rgba(0,0,0,.22);
}

/* The compact popup falls in this breakpoint: give both chats a real viewport height. */
@media(max-width:760px){
  html,body{min-height:100%;}
  .chat-card{
    height:calc(100dvh - 16px);
    min-height:520px;
    max-height:720px;
  }
  .private-card{
    height:360px;
    min-height:300px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .messages,.private-messages{height:auto;}
  .message-form{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:10px;
  }
  .message-form input{min-width:0;padding:12px 13px;}
  .message-form button{padding:12px 14px;white-space:nowrap;}
}

@media(max-width:390px){
  .message-form{grid-template-columns:minmax(0,1fr) auto;}
  .message-form button{font-size:12px;padding-inline:10px;}
}

/* Compact popup layout: both send bars are visible immediately, with no page scroll. */
@media(max-width:760px){
  html,body{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .page-shell{
    width:100%;
    height:100dvh;
    min-height:0;
    padding:6px;
    display:grid;
    grid-template-rows:minmax(0,1fr) 210px;
    gap:6px;
    overflow:hidden;
  }
  .chat-layout{
    width:100%;
    height:100%;
    min-height:0;
    display:block;
    margin:0;
    overflow:hidden;
  }
  .brand-card,
  .users-card{
    display:none!important;
  }
  .chat-card{
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    margin:0;
    border-radius:15px;
  }
  .chat-header{
    padding:10px 12px;
    flex-direction:row;
    align-items:center;
    gap:8px;
  }
  .chat-header h2{font-size:20px}
  .chat-header .eyebrow{display:none}
  .header-actions{
    margin-top:0;
    gap:5px;
    flex-wrap:nowrap;
  }
  .online-count,.role-badge{padding:5px 7px;font-size:10px}
  .ghost-button,.danger-button,.pm-toggle-button{padding:6px 8px;font-size:10px}
  .messages{padding:9px}
  .message{margin-bottom:8px;padding:10px;gap:9px;border-radius:13px}
  .message-text{font-size:14px}
  .message-form{
    padding:7px;
    gap:6px;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .message-form input{padding:10px 11px;border-radius:11px;font-size:13px}
  .message-form button{padding:10px 11px;border-radius:11px;font-size:11px}
  .private-card{
    width:100%;
    height:210px;
    min-height:0;
    max-height:none;
    margin:0;
    border-radius:15px;
  }
  .private-head{
    min-height:36px;
    padding:7px 10px;
    flex-direction:row;
    align-items:center;
    gap:6px;
  }
  .private-head h3{font-size:13px;white-space:nowrap}
  .private-head-actions{width:auto;align-items:center;flex-direction:row;font-size:10px;min-width:0}
  .clear-private-button{padding:5px 7px;font-size:9px}
  .private-messages{padding:7px}
  .private-message{padding:7px 8px;margin-bottom:5px}
}

@media(max-height:620px) and (max-width:760px){
  .page-shell{grid-template-rows:minmax(0,1fr) 175px}
  .private-card{height:175px}
  .chat-header{padding-block:7px}
}


/* B19FM SHOUTcast players */
.radio-players{position:relative;z-index:2;display:grid;gap:11px;margin-top:14px}
.radio-player{padding:13px;border:1px solid #20345e;border-radius:16px;background:radial-gradient(circle at 100% 0,rgba(255,43,145,.12),transparent 40%),linear-gradient(145deg,rgba(14,23,51,.98),rgba(5,10,27,.98));box-shadow:0 12px 28px rgba(0,0,0,.22)}
.radio-player.is-playing{border-color:rgba(34,220,145,.48);box-shadow:0 0 0 1px rgba(34,220,145,.08),0 14px 32px rgba(0,0,0,.28)}
.radio-player-top,.radio-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
.radio-player-top{margin-bottom:11px}
.radio-player-top strong{display:block;margin-top:3px;font-size:13px;line-height:1.25}
.radio-kicker,.radio-stream-label{color:#8795b8;font-size:9px;font-weight:900;letter-spacing:.1em}
.radio-live{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:4px 7px;border-radius:999px;color:#ff7caf;background:rgba(255,43,145,.1);border:1px solid rgba(255,43,145,.2);font-size:9px;font-weight:900}
.radio-live i{width:7px;height:7px;border-radius:50%;background:#ff3a66;box-shadow:0 0 10px rgba(255,58,102,.8)}
.radio-player.is-playing .radio-live i{animation:radioPulse 1.05s ease-in-out infinite}
@keyframes radioPulse{0%,100%{transform:scale(.78);opacity:.7}50%{transform:scale(1.18);opacity:1}}
.radio-play-button{width:39px;height:39px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:linear-gradient(135deg,#ff2b91,#8b3dff);box-shadow:0 8px 20px rgba(255,43,145,.22)}
.radio-play-button:hover{transform:translateY(-1px)}
.radio-play-button span{transform:translateX(1px)}
.radio-status-wrap{min-width:0;flex:1;display:grid;gap:2px}
.radio-status{color:#eef2ff;font-size:11px;font-weight:850}
.radio-volume{width:82px;flex:0 0 auto;display:grid;gap:5px;color:#8391b4;font-size:8px;font-weight:900;letter-spacing:.08em}
.radio-volume input{width:100%;accent-color:#ff2b91}
.brand-card.radio-active .brand-logo{border-color:rgba(255,43,145,.46);box-shadow:0 0 28px rgba(255,43,145,.18)}
@media(max-width:1100px) and (min-width:761px){
  .radio-player{padding:10px}
  .radio-player-top{align-items:flex-start}
  .radio-player-top strong{font-size:12px}
  .radio-controls{flex-wrap:wrap}
  .radio-volume{width:100%;grid-template-columns:auto minmax(0,1fr);align-items:center}
}
@media(max-width:760px){.radio-players{display:none}}