/* Distant Archives — Archive tab, tab bar, auth modal, Other Room button.
   Layered on top of app.css (the radio's original styles). */

/* ---------- left column + tab bar ---------- */
#leftCol{min-width:0;display:flex;flex-direction:column;min-height:0;}
#tabbar{display:flex;gap:8px;margin-bottom:16px;}
.da-tab{
  font-family:inherit;font-weight:700;letter-spacing:.22em;font-size:11px;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:.18s;
}
.da-tab:hover{color:var(--muted);border-color:rgba(255,255,255,.18);}
.da-tab.on{
  color:#fff;border-color:rgba(139,92,246,.5);
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(155,89,182,.12));
  box-shadow:0 6px 22px -12px rgba(139,92,246,.6);
}
#main[hidden],#archivePanel[hidden],#chatPanel[hidden],#notifyPanel[hidden]{display:none!important;}
#main,#archivePanel,#chatPanel,#notifyPanel{flex:1 1 auto;min-height:0;}

/* ---------- fixed layout: same width on both tabs, no expand ---------- */
/* Locked to the wide Home layout for every tab. The grid no longer animates or
   resizes when switching Lobby/Home, so the player stays put. */
#app{grid-template-columns:200px 1fr 428px;max-width:1820px;}
/* soft crossfade of the left panel when switching tabs */
#main,#archivePanel,#chatPanel,#notifyPanel{transition:opacity .26s ease;}
#main.paneFade,#archivePanel.paneFade,#chatPanel.paneFade,#notifyPanel.paneFade{opacity:0;}

/* ---------- left sidebar (labeled primary nav) ---------- */
#navRail{display:flex;flex-direction:column;align-items:stretch;gap:3px;
  padding:2px 12px 12px;min-width:0;
  border-right:1px solid var(--line);}
.navBrand{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:14px;}
.navMark{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:flex;
  align-items:center;justify-content:center;color:#a78bfa;font-size:17px;
  background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(155,89,182,.10));
  border:1px solid rgba(139,92,246,.30);box-shadow:0 0 22px -8px rgba(139,92,246,.6);}
.navWord{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--txt);line-height:1.2;}
.navWord b{color:#a78bfa;font-weight:700;}
.navSep{height:1px;margin:9px 6px;background:var(--line);}
.navItem{position:relative;display:flex;align-items:center;gap:13px;width:100%;
  padding:10px 12px;border-radius:12px;background:transparent;border:1px solid transparent;
  color:var(--muted);cursor:pointer;text-align:left;font:inherit;font-size:14px;font-weight:600;
  letter-spacing:.01em;transition:background .16s,color .16s,border-color .16s;}
.navItem[hidden]{display:none;}
.navItem:hover{color:var(--txt);background:rgba(255,255,255,.05);}
.navItem.on{color:#fff;border-color:rgba(139,92,246,.40);
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(155,89,182,.10));}
.navItem.on::after{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:24px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#a78bfa,#6d28d9);}
.navItem.on .navIco{color:#a78bfa;}
.navIco{width:21px;height:21px;flex:0 0 auto;display:block;}
.navIco svg{width:100%;height:100%;display:block;}
.navLabel{white-space:nowrap;}

/* ---------- brutal compaction: keep the whole player in one screen ---------- */
#side{gap:18px;padding:22px 58px 22px 22px;}
.pgPrivacy{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);cursor:pointer;margin:2px 0;line-height:1.35;}
.pgPrivacy input{flex:none;width:16px;height:16px;accent-color:var(--acc);cursor:pointer;}
#dialWrap{max-width:226px;margin-top:0;}
#eq{height:38px;}
#side .sideHdr{margin-bottom:-2px;}

/* transient toast for stub destinations */
#daToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
  background:#16161d;border:1px solid var(--line);color:var(--txt);font-size:13px;
  letter-spacing:.02em;padding:10px 16px;border-radius:12px;z-index:120;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9);}
#daToast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- kill the CRT white-noise overlay (it covered everything) ---------- */
canvas#static{display:none!important;}

/* ---------- equalizer: a baseline line so it reads as a bar/meter ---------- */
#eq{position:relative;}
#eq::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),rgba(139,92,246,.55),transparent);
  box-shadow:0 0 8px rgba(167,139,250,.35);}

/* ---------- archive: signed-out gate (blurred preview) ---------- */
#archivePanel{position:relative;display:flex;flex-direction:column;}
#archiveGate{position:relative;flex:1;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:60vh;
  background:radial-gradient(120% 90% at 80% -10%,rgba(167,139,250,.1),transparent 55%),
             radial-gradient(100% 90% at 0% 110%,rgba(139,92,246,.1),transparent 55%),#0b0b0d;}
.gateBlur{position:absolute;inset:0;filter:blur(34px) saturate(1.2);opacity:.5;pointer-events:none;}
.gateBlur .fauxCard{position:absolute;border-radius:18px;}
.fauxCard.c1{top:6%;left:5%;width:42%;height:30%;background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.fauxCard.c2{top:10%;right:6%;width:38%;height:24%;background:linear-gradient(135deg,#a78bfa,#6d28d9);}
.fauxCard.c3{top:44%;left:8%;width:34%;height:30%;background:linear-gradient(135deg,#6d28d9,#3a1d5b);}
.fauxCard.c4{top:40%;right:5%;width:44%;height:34%;background:linear-gradient(135deg,#8b5cf6,#a78bfa);}
.fauxCard.c5{bottom:4%;left:18%;width:30%;height:22%;background:linear-gradient(135deg,#a78bfa,#6d28d9);}
.fauxCard.c6{bottom:6%;right:20%;width:26%;height:20%;background:linear-gradient(135deg,#8b5cf6,#a78bfa);}
.gateInner{position:relative;z-index:2;max-width:30rem;text-align:center;padding:28px;}
.gateKicker{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.4em;color:var(--acc);margin-bottom:14px;}
.gateInner h2{font-size:clamp(28px,4.4vw,44px);line-height:1.05;margin:0 0 14px;color:#fff;font-weight:800;letter-spacing:-.01em;}
.gateInner p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 auto 22px;max-width:26rem;}
.gateBtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.gateNote{margin-top:16px;font-size:11px;letter-spacing:.04em;color:var(--dim);min-height:14px;}

.gatePrimary{font-family:inherit;font-weight:800;letter-spacing:.06em;font-size:14px;color:#0b0b0b;cursor:pointer;
  border:none;border-radius:12px;padding:14px 26px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);
  box-shadow:0 12px 34px -12px rgba(139,92,246,.6);transition:transform .15s,filter .15s;}
.gatePrimary:hover{filter:brightness(1.07);transform:translateY(-1px);}
.gatePrimary.full{width:100%;margin-top:6px;padding:13px;}
.gateGhost{font-family:inherit;font-weight:600;letter-spacing:.04em;font-size:13px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:12px;padding:14px 22px;transition:.15s;}
.gateGhost:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.gateGhost.sm{padding:8px 14px;font-size:12px;}

/* ---------- archive: signed-in placeholder ---------- */
#archiveApp{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:#0b0b0d;overflow:hidden;}
.archiveTop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.archiveTop[hidden]{display:none;}
#archiveHello{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.16em;color:var(--acc);}
.archiveSoon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:6px;}
.soonGlyph{font-size:34px;color:#8b5cf6;text-shadow:0 0 22px rgba(139,92,246,.6);margin-bottom:8px;}
.archiveSoon h3{margin:0;color:#fff;font-size:20px;font-weight:800;}
.archiveSoon p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:30rem;}

/* ---------- auth modal ---------- */
#authOverlay{position:fixed;inset:0;z-index:90;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px;}
#authOverlay[hidden]{display:none;}
#authModal{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,#15151b,#0d0d11);
  border:1px solid var(--line);border-radius:20px;padding:30px 28px 22px;box-shadow:0 40px 100px rgba(0,0,0,.7);}
#authClose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1;}
#authClose:hover{color:#fff;}
.authKicker{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.4em;color:var(--acc);margin-bottom:8px;}
#authModal h2{margin:0 0 18px;font-size:23px;color:#fff;font-weight:800;letter-spacing:-.01em;}
.authError{background:rgba(255,70,120,.1);border:1px solid rgba(255,70,120,.35);color:#ff9fb6;
  font-size:12.5px;line-height:1.5;border-radius:10px;padding:10px 12px;margin-bottom:14px;}
.authError[hidden]{display:none;}
.authField{display:block;margin-bottom:13px;}
.authField span{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.authField input{width:100%;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .15s;}
.authField input:focus{outline:none;border-color:rgba(167,139,250,.5);}
.authSwap{margin:16px 0 2px;text-align:center;font-size:12.5px;color:var(--muted);}
.authSwap button{background:none;border:none;font:inherit;color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Other Room button (right column) ---------- */
.orBtn{width:100%;margin-top:9px;font-family:inherit;font-weight:700;letter-spacing:.16em;font-size:12px;
  text-transform:uppercase;padding:13px;border-radius:12px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;background:var(--panel);color:var(--muted);border:1px solid var(--line);transition:.18s;}
.orBtn:hover{border-color:rgba(139,92,246,.45);color:var(--txt);}
.orBtn .orGlyph{font-size:13px;opacity:.6;}
.orBtn.on{color:#c4b5fd;border-color:rgba(139,92,246,.6);
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(109,40,217,.08));
  box-shadow:0 0 22px -4px rgba(139,92,246,.55);animation:orPulse 2.6s ease-in-out infinite;}
.orBtn.on .orGlyph{opacity:1;color:#c4b5fd;}
@keyframes orPulse{0%,100%{box-shadow:0 0 18px -6px rgba(139,92,246,.4)}50%{box-shadow:0 0 28px -2px rgba(139,92,246,.7)}}

/* ============================================================
   PHASE 2 — THE FEED (composer, filter bar, post cards, threads)
   ============================================================ */
#archiveApp{padding:0;}
#feedRoot{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:16px;gap:14px;}
#feedRoot::-webkit-scrollbar{width:8px;}
#feedRoot::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}

/* ---- composer ---- */
.composer{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  padding:14px;display:flex;flex-direction:column;gap:11px;}
.compTypes{display:flex;gap:7px;}
.compType{font-family:inherit;font-weight:700;letter-spacing:.14em;font-size:10.5px;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.16s;}
.compType:hover{color:var(--muted);}
.compType.on{color:#fff;border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.08);}
.composer textarea{width:100%;resize:vertical;min-height:46px;font-family:inherit;font-size:14px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 12px;transition:border-color .15s;}
.composer textarea:focus{outline:none;border-color:rgba(167,139,250,.45);}
.compMedia{display:flex;flex-wrap:wrap;align-items:center;gap:9px;}
.compMedia[hidden]{display:none;}
#compUrl{flex:1;min-width:200px;font-family:inherit;font-size:13px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
#compUrl:focus{outline:none;border-color:rgba(167,139,250,.45);}
.compUpload{font-family:inherit;font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--muted);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;transition:.15s;white-space:nowrap;}
.compUpload:hover{color:#fff;border-color:rgba(167,139,250,.4);}
.compPreview{width:100%;}
.compPreview[hidden]{display:none;}
.compPreview img{max-height:200px;max-width:100%;border-radius:12px;border:1px solid var(--line);}
.compFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.compHint{font-size:11.5px;color:#ff9fb6;letter-spacing:.02em;}
.gatePrimary.sm{padding:10px 22px;font-size:13px;border-radius:11px;}
.gatePrimary.sm:disabled{opacity:.6;cursor:default;transform:none;filter:none;}

/* ---- filter bar ---- */
.filterBar{display:flex;gap:7px;flex-wrap:wrap;position:sticky;top:-16px;z-index:3;
  padding:8px 0;background:linear-gradient(180deg,#0b0b0d 70%,transparent);}
.filt{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.16s;}
.filt:hover{color:var(--muted);}
.filt.on{color:#fff;border-color:rgba(139,92,246,.5);background:linear-gradient(180deg,rgba(139,92,246,.14),rgba(155,89,182,.1));}

/* ---- feed list ---- */
.feedList{display:flex;flex-direction:column;gap:14px;}
.feedEmpty{text-align:center;color:var(--dim);font-size:13.5px;padding:34px 16px;letter-spacing:.02em;}
.feedEmpty[hidden]{display:none;}

/* ---- post card ---- */
.postCard{--glow:rgba(255,255,255,.4);position:relative;border:1px solid var(--line);border-radius:16px;
  background:#0c0c0f;padding:14px 15px;display:flex;flex-direction:column;gap:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;transition:border-color .2s;}
.postCard::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--glow),transparent 42%);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.tag-image{--glow:rgba(167,139,250,.6);}
.tag-gif{--glow:rgba(139,92,246,.6);}
.tag-music{--glow:rgba(155,89,182,.65);}
.tag-text{--glow:rgba(139,92,246,.6);}
.tag-poll{--glow:rgba(45,212,191,.6);}
.postCard.justIn{animation:cardIn .5s ease both;}
@keyframes cardIn{from{opacity:0;transform:translateY(-8px) scale(.99);}to{opacity:1;transform:none;}}

.pcHead{display:flex;align-items:center;gap:10px;}
.pcAvatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);}
.pcAvatarFallback{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#0b0b0b;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.pcWho{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0;}
.pcName{font-weight:700;font-size:13.5px;color:#fff;}
.pcTime{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--dim);letter-spacing:.04em;}
.pcTag{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;border:1px solid var(--glow);border-radius:999px;padding:4px 9px;
  box-shadow:0 0 14px -4px var(--glow);background:rgba(255,255,255,.02);}

.pcMediaWrap{display:flex;flex-direction:column;gap:9px;}
.pcMedia{width:100%;border-radius:12px;display:block;border:1px solid var(--line);}
.pcCaption{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;}
.pcTextBody .pcText{margin:0;color:#eee;font-size:16px;line-height:1.6;letter-spacing:.01em;
  padding:6px 2px;white-space:pre-wrap;word-break:break-word;}

.pcActions{display:flex;align-items:center;gap:8px;}
.pcBtn{font-family:inherit;font-size:12.5px;color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.16s;}
.pcBtn:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.pcShare{margin-left:auto;letter-spacing:.06em;}
.pcHeart{font-size:14px;color:var(--dim);transition:color .16s,transform .16s;display:inline-block;}
.pcLike.liked{border-color:rgba(139,92,246,.5);color:#ddd6fe;}
.pcLike.liked .pcHeart{color:#8b5cf6;}
.pcLike.pop .pcHeart{animation:heartPop .34s ease;}
@keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---- comment thread ---- */
.pcThread{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:14px;}
.pcThread[hidden]{display:none;}
.threadList{display:flex;flex-direction:column;gap:18px;max-height:240px;overflow-y:auto;}
.threadEmpty{color:var(--dim);font-size:14px;letter-spacing:.02em;}

/* one comment = a vertical block (name+time, text, reply) — same font everywhere */
.cmt{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.55;}
.cmtHead{display:flex;align-items:baseline;gap:8px;}
.cmtWho{font-weight:700;color:#fff;font-size:14px;}
.cmtText{color:var(--muted);word-break:break-word;font-size:14px;}
.cmtAt{color:#7dd3fc;font-weight:600;}
.cmtTime{font-family:inherit;font-size:12px;color:var(--dim);font-weight:400;}
.cmtReplyBtn{align-self:flex-start;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--dim);
  background:transparent;border:none;cursor:pointer;padding:3px 0;margin-top:6px;letter-spacing:.02em;}
.cmtReplyBtn:hover{color:#7dd3fc;}

/* collapsible nested replies: indent + a thread line, with a small chevron toggle */
.cmtToggle{align-self:flex-start;font-family:inherit;font-size:13px;font-weight:600;color:#7dd3fc;
  background:transparent;border:none;cursor:pointer;padding:2px 0;margin:2px 0;letter-spacing:.01em;}
.cmtToggle:hover{filter:brightness(1.15);}
.cmtKids{display:flex;flex-direction:column;gap:18px;margin-left:6px;padding-left:14px;
  border-left:2px solid rgba(167,139,250,.2);margin-top:4px;}
.cmtKids[hidden]{display:none;}

/* reply tag: blue @handle chip that sits before the input */
.replyTag{display:inline-flex;align-items:center;gap:6px;align-self:center;
  background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.32);border-radius:9px;padding:6px 9px;}
.replyTag[hidden]{display:none;}
.replyAt{font-family:inherit;font-size:13px;font-weight:700;color:#7dd3fc;white-space:nowrap;}
.replyX{font-family:inherit;font-size:15px;line-height:1;color:var(--dim);background:transparent;
  border:none;cursor:pointer;padding:0 2px;}
.replyX:hover{color:#fff;}

.threadInput{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.threadInput input{flex:1;min-width:0;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;}
.threadInput input:focus{outline:none;border-color:rgba(167,139,250,.45);}
.threadSend{font-family:inherit;font-weight:700;font-size:13px;color:#0b0b0b;cursor:pointer;border:none;border-radius:10px;
  padding:9px 16px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);}

@media(max-width:880px){
  #app{grid-template-columns:1fr;max-width:none;}
  #navRail{order:0;flex-direction:row;align-items:center;width:100%;justify-content:center;gap:8px;
    padding:8px;border-right:none;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
    background:rgba(10,10,13,.78);backdrop-filter:blur(10px);}
  #navRail .navBrand{display:none;}
  #navRail .navSep{display:none;}
  #navRail .navItem{width:auto;padding:8px 14px;}
  #navRail .navItem.on::after{display:none;}
  #leftCol{order:1;} #side{order:2;padding:22px;}
  #archiveGate{min-height:48vh;}
  #feedRoot{padding:12px;}
}

/* ============================================================
   MODERN MINIMALIST REDESIGN (2026-06-23)
   user: "lean into modern minimalist, everything's too glassy, calm
   it down, but keep the synth core. middle feed stays as-is, just use
   a more readable text color." Built for a broad audience (gamers too).
   Loads after app.css so these win at equal specificity.
   ============================================================ */
:root{
  --surface:#0e0a16;        /* black-purple panel */
  --surface2:#160f24;       /* elevated / hover */
  --line:rgba(170,140,255,.10);
  --line2:rgba(170,140,255,.20);
  --read:#c9c4d6;           /* comfortable body-reading color */
}

/* calmer page backdrop — black with a faint purple wash */
body{
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(100% 90% at -5% 112%, rgba(109,40,217,.08), transparent 60%),
    linear-gradient(160deg,#0c0913 0%,#070509 62%,#040305 100%);
}

/* ---- player panel: solid + flat, no glass / heavy shadow ---- */
#side{background:var(--surface);border:1px solid var(--line);box-shadow:none;}
#side .ft{border-top:1px solid var(--line);}

/* dial: drop the big coloured halo, keep only a faint needle glow */
#dialWrap::after{box-shadow:inset 0 0 38px rgba(0,0,0,.55);}
svg#dial{filter:none;}
.needle{filter:drop-shadow(0 0 4px rgba(139,92,246,.5));}

/* EQ: keep the synth bars, lose the glowing baseline */
#eq::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);box-shadow:none;}

/* ---- buttons: black with a purple edge, modern display font ---- */
/* primary CTA = black button, bright purple border, white text */
#enterCta,.gatePrimary{background:#150d24;color:#fff;border:1px solid #8b5cf6;box-shadow:none;animation:none;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;}
#enterCta:hover,.gatePrimary:hover{background:#1d1334;border-color:#a78bfa;filter:none;}

/* secondary / utility buttons = black, faint purple edge */
#tune{background:var(--surface2);color:var(--txt);border:1px solid var(--line2);box-shadow:none;
  font-family:var(--display);letter-spacing:.04em;}
#tune:hover{background:#1c1430;border-color:rgba(167,139,250,.5);filter:none;}
#favMode{background:var(--surface2);border:1px solid var(--line2);}
#favMode.on{background:rgba(139,92,246,.12);color:#ddd6fe;border:1px solid rgba(139,92,246,.4);box-shadow:none;}
#favMode.on #favModeState{color:var(--dim);}
#play{background:var(--surface2);color:#fff;border:1px solid rgba(139,92,246,.4);}
#play.hint{animation:none;border-color:rgba(139,92,246,.55);}

/* favorites list panel: solid, drop the pink rail */
#favPanel{background:var(--surface);border:1px solid var(--line);}

/* other-room: calm the amber glow + pulse */
.orBtn.on{box-shadow:none;animation:none;background:rgba(139,92,246,.1);}

/* thread send: black button with purple edge */
.threadSend{background:#150d24;color:#fff;border:1px solid #8b5cf6;font-family:var(--display);}

/* ---- gate: kill the heavy multicolour blur, keep a clean field ---- */
.gateBlur{opacity:.09;filter:blur(64px) saturate(1);}
.gateInner p{color:var(--read);}
.soonGlyph{text-shadow:none;}

/* ---- feed: layout unchanged, just easier to read ---- */
#archiveHello{color:var(--txt);}
.pcCaption{color:var(--read);}
.cmtText{color:var(--read);}

/* ---- modern display font on the UI chrome (body text stays Inter) ---- */
.brand,.navWord,.navLabel,#sName,.gateInner h2,.archiveSoon h3,#archiveHello,
.sideHdr .t,.pcName,#authTitle,.gateGhost,#favMode,#play{font-family:var(--display);}

/* ============================================================
   PURE BLACK + PURPLE PASS (2026-06-23)
   user: "pure black and purple, filled not glass — except the player
   panel (glass over a gif), whose buttons stay black w/ white text."
   Appended last so it wins at equal specificity.
   ============================================================ */
:root{
  --surface:#08070a;        /* near-pure-black card */
  --surface2:#100e15;       /* elevated / hover */
  --line:rgba(170,140,255,.12);
  --line2:rgba(170,140,255,.24);
}

/* pure black page, faint purple glow */
body{
  background:
    radial-gradient(120% 80% at 90% -10%, rgba(124,58,237,.13), transparent 55%),
    radial-gradient(90% 80% at -6% 112%, rgba(139,92,246,.08), transparent 60%),
    #050406;
}
#app{background:transparent;}
#navRail{background:#040305;border-right:1px solid var(--line);}

/* ---- primary actions = FILLED purple, white text (not glass) ---- */
#enterCta,.gatePrimary,.threadSend{
  background:#7c3aed;color:#fff;border:1px solid #7c3aed;box-shadow:none;animation:none;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;}
#enterCta:hover,.gatePrimary:hover,.threadSend:hover{background:#8b5cf6;border-color:#8b5cf6;filter:none;}
.orBtn.on{background:#7c3aed;color:#fff;border-color:#7c3aed;box-shadow:none;animation:none;}

/* ===== PLAYER PANEL — the one glass exception, over a live GIF ===== */
#side{
  position:relative;border-radius:18px;overflow:hidden;
  background:rgba(16,11,26,.34);
  border:1px solid rgba(170,140,255,.30);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.95);
}
#side::before{                 /* the chosen gif, fills the player box exactly (cover crops any overflow) */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--player-bg, url('/assets/bg/bg1.gif'));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.6;}
#side::after{                  /* frosted-glass scrim for readability */
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,5,14,.38), rgba(7,5,14,.56));
  -webkit-backdrop-filter:blur(4px) saturate(1.15);
  backdrop-filter:blur(4px) saturate(1.15);}
#side > *{position:relative;z-index:2;}

/* player buttons = pure black, pure white text (over the glass) */
#tune,#favMode,#play,#prev,#next,.tbtn,#supportBtn,#privacyLink,#bgMenuBtn{
  background:#0a0a0c;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:none;}
#tune:hover,#favMode:hover,.tbtn:hover,#supportBtn:hover,#bgMenuBtn:hover,#privacyLink:hover{
  background:#161618;border-color:rgba(255,255,255,.32);filter:none;color:#fff;}
#favMode.on{background:#000;color:#fff;border-color:rgba(167,139,250,.6);}
#favMode.on #favModeState{color:#cbb8ff;}
#favPanel{background:rgba(5,4,8,.62);border:1px solid rgba(170,140,255,.22);}
#side .ft{border-top:1px solid rgba(255,255,255,.1);}
#side .ft span,#side .vi,.eqLabel{color:#cbc6d6;}

/* ===== three-dot background menu ===== */
.sideHdr{position:relative;}
#bgMenuBtn{font-size:17px;line-height:1;padding:3px 10px;border-radius:9px;cursor:pointer;
  font-family:var(--display);}
#bgMenu{position:absolute;top:40px;left:14px;z-index:30;width:212px;
  background:#060509;border:1px solid rgba(170,140,255,.32);border-radius:13px;
  padding:11px;box-shadow:0 24px 60px -22px rgba(0,0,0,.95);}
#bgMenu[hidden]{display:none;}
.bgMenuHd{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 2px 9px;}
.bgGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bgOpt{height:56px;border-radius:10px;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0c;
  color:#fff;font-family:var(--display);font-size:12px;transition:border-color .15s,box-shadow .15s;}
.bgOpt:hover{border-color:rgba(167,139,250,.65);}
.bgOpt.on{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,.55);}
.bgOff{display:flex;align-items:center;justify-content:center;letter-spacing:.08em;background-color:#000;}
.bgOpt[data-bg$="bg1.gif"]{background-image:url('../assets/bg/bg1.gif');}
.bgOpt[data-bg$="bg2.gif"]{background-image:url('../assets/bg/bg2.gif');}
.bgOpt[data-bg$="bg3.gif"]{background-image:url('../assets/bg/bg3.gif');}
.bgOpt[data-bg$="bg4.gif"]{background-image:url('../assets/bg/bg4.gif');}

/* ===== community / feed = pure black + purple ===== */
.postCard,#feedRoot .composer,.archiveSoon,.gateInner{background:var(--surface);}
.threadInput input{background:rgba(255,255,255,.05);}

/* ============================================================
   PHASE 4 — polls, music embeds, profiles & members directory
   ============================================================ */

/* --- archive top buttons --- */
.archiveTopBtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* --- clickable post author --- */
.pcAvatarBtn{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.pcAvatarBtn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(139,92,246,.5);}
.clickName{cursor:pointer;}
.clickName:hover{color:#cbb8ff;text-decoration:underline;text-underline-offset:2px;}

/* --- composer: music --- */
.compMusic{display:flex;flex-direction:column;gap:9px;}
.compMusic[hidden]{display:none;}
.compMusic input{width:100%;font-family:inherit;font-size:14px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.compMusic input:focus{outline:none;border-color:rgba(167,139,250,.5);}
.compEmbed[hidden]{display:none;}

/* --- composer: poll --- */
.compPoll{display:flex;flex-direction:column;gap:8px;}
.compPoll[hidden]{display:none;}
.pollOpts{display:flex;flex-direction:column;gap:7px;}
.pollOptIn{width:100%;font-family:inherit;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:9px 11px;}
.pollOptIn:focus{outline:none;border-color:rgba(45,212,191,.5);}
.pollAddOpt{align-self:flex-start;font-family:inherit;font-weight:600;font-size:12px;
  color:var(--muted);cursor:pointer;background:transparent;border:1px dashed var(--line2);
  border-radius:9px;padding:7px 12px;transition:.15s;}
.pollAddOpt:hover{color:#fff;border-color:rgba(45,212,191,.55);}
.pollAddOpt:disabled{opacity:.4;cursor:not-allowed;}

/* --- music embed in a post card --- */
.pcEmbed{width:100%;height:152px;border:1px solid var(--line);border-radius:12px;display:block;background:#000;}
.pcEmbed.pcEmbedVideo{height:auto;aspect-ratio:16 / 9;}
.pcEmbedLink{display:inline-block;font-family:var(--display);font-weight:600;font-size:13px;color:#cbb8ff;
  text-decoration:none;border:1px solid var(--line2);border-radius:10px;padding:9px 13px;}
.pcEmbedLink:hover{border-color:rgba(139,92,246,.6);color:#fff;}

/* --- poll inside a post card --- */
.pcPoll{display:flex;flex-direction:column;gap:10px;}
.pollQ{margin:0;font-family:var(--display);font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.pollList{display:flex;flex-direction:column;gap:8px;}
.pollOpt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  transition:border-color .15s;}
.pollOpt:hover{border-color:rgba(45,212,191,.5);}
.pollFill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;
  background:linear-gradient(90deg,rgba(45,212,191,.26),rgba(45,212,191,.12));
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.pollLab{position:relative;z-index:1;flex:1;min-width:0;}
.pollPct{position:relative;z-index:1;font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);}
.pollOpt.voted{border-color:rgba(45,212,191,.75);}
.pollOpt.voted .pollFill{background:linear-gradient(90deg,rgba(45,212,191,.4),rgba(45,212,191,.18));}
.pollOpt.voted .pollPct{color:#7ff0df;}
.pollMeta{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.04em;color:var(--dim);}

/* ============================================================
   PROFILE + MEMBERS MODAL
   ============================================================ */
#profileOverlay{position:fixed;inset:0;z-index:95;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);
  display:flex;align-items:flex-start;justify-content:center;padding:7vh 18px 18px;overflow-y:auto;}
#profileOverlay[hidden]{display:none;}
#profileModal{position:relative;width:100%;max-width:460px;background:linear-gradient(180deg,#15131c,#0c0b10);
  border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
  overflow:hidden;}
#profileClose{position:absolute;top:10px;right:12px;z-index:5;width:30px;height:30px;border-radius:8px;
  font-size:20px;line-height:1;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);
  cursor:pointer;}
#profileClose:hover{background:rgba(0,0,0,.7);}
#profileBody{padding:0 22px 22px;}

.pfLoading{padding:26px 0;text-align:center;color:var(--muted);font-size:13.5px;}
.pfBanner{height:110px;margin:0 -22px 0;background:linear-gradient(120deg,#241a3d,#10101a);
  background-size:cover;background-position:center;}
.pfHead{display:flex;align-items:flex-end;gap:13px;margin-top:-34px;margin-bottom:14px;}
.pfAvatar{width:72px;height:72px;border-radius:18px;object-fit:cover;flex-shrink:0;
  border:3px solid #0c0b10;background:#1a1622;}
.pfAvatarFallback{display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:28px;font-weight:700;color:#cbb8ff;}
.pfId{flex:1;min-width:0;padding-bottom:2px;}
.pfNameRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pfName{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.pfBadge{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#0c0b10;background:linear-gradient(90deg,#a78bfa,#8b5cf6);border-radius:6px;padding:3px 7px;font-weight:700;}
.pfBadge.sm{font-size:8.5px;padding:2px 6px;}
.pfHandle{display:block;font-family:ui-monospace,monospace;font-size:12.5px;color:var(--muted);margin-top:2px;}
.pfEditBtn{align-self:center;font-family:inherit;font-weight:600;font-size:12px;color:#fff;cursor:pointer;
  background:#7c3aed;border:1px solid #7c3aed;border-radius:9px;padding:8px 13px;}
.pfEditBtn:hover{background:#8b5cf6;}
.pfBio{margin:0 0 14px;color:#d7d2e2;font-size:14px;line-height:1.6;word-break:break-word;}
.pfTags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.pfTag{font-family:inherit;font-size:11.5px;color:#cbb8ff;background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.3);border-radius:999px;padding:5px 11px;}
.pfLinks{display:flex;flex-wrap:wrap;gap:8px;}
.pfLink{font-family:var(--display);font-weight:600;font-size:12.5px;color:#cbb8ff;text-decoration:none;
  border:1px solid var(--line2);border-radius:9px;padding:7px 12px;}
.pfLink:hover{border-color:rgba(139,92,246,.6);color:#fff;}
.pfFoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.pfGhost{font-family:inherit;font-weight:600;font-size:12.5px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:9px;padding:8px 13px;transition:.15s;}
.pfGhost:hover{color:#fff;border-color:rgba(255,255,255,.25);}

/* edit form */
.pfTitle{margin:18px 0 14px;font-family:var(--display);font-size:18px;font-weight:700;color:#fff;}
.pfField{display:block;margin-bottom:12px;}
.pfFieldLab{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.pfInput{width:100%;font-family:inherit;font-size:13.5px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;}
.pfInput:focus{outline:none;border-color:rgba(167,139,250,.5);}
.pfTextarea{resize:vertical;line-height:1.5;}
.pfCheck{display:flex;align-items:center;gap:9px;margin:4px 0 14px;font-size:13px;color:#d7d2e2;cursor:pointer;}
.pfCheck input{width:16px;height:16px;accent-color:#8b5cf6;}
.pfErr{color:#ff9c9c;font-size:12.5px;margin-bottom:10px;}
.pfErr[hidden]{display:none;}
.pfEditRow{display:flex;justify-content:flex-end;gap:9px;margin-top:6px;}
.pfSave{font-family:inherit;font-weight:600;font-size:13px;color:#fff;cursor:pointer;
  background:#7c3aed;border:1px solid #7c3aed;border-radius:9px;padding:9px 16px;}
.pfSave:hover{background:#8b5cf6;}
.pfSave:disabled{opacity:.5;cursor:not-allowed;}

/* members directory */
.pfDir{display:flex;flex-direction:column;gap:8px;}
.pfDirRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:.15s;}
.pfDirRow:hover{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.07);}
.pfDirAvatar{width:42px;height:42px;border-radius:11px;object-fit:cover;flex-shrink:0;background:#1a1622;}
.pfDirAvatar.pfAvatarFallback{font-size:17px;}
.pfDirMeta{flex:1;min-width:0;}
.pfDirName{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:14px;color:#fff;}
.pfDirHandle{display:block;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--muted);margin-top:1px;}

/* ============================================================
   SCROLL + LAYOUT OVERHAUL (2026-06-24)
   user: "middle should scroll down like a normal page, get rid of the inner
   slide-boxes, i can't reach the bottom of the player, and after sign-in I
   still see Join the community." Fixes: real [hidden] for gate/app, natural
   page scrolling, no inner overflow boxes, player grows so it's reachable.
   ============================================================ */

/* THE sign-in bug: #archiveGate/#archiveApp have display:flex, so the bare
   [hidden] attribute couldn't hide them -> gate + feed showed at once. */
#archiveGate[hidden],#archiveApp[hidden]{display:none!important;}

/* kill every inner scroll container the user hated (works on all widths) */
#feedRoot{overflow:visible!important;}
#archiveApp{overflow:visible!important;}
.threadList{max-height:none!important;overflow:visible!important;}
.filterBar{position:static!important;top:auto!important;}

@media(min-width:881px){
  /* X-STYLE FIXED SHELL: the page itself NEVER scrolls. The 3-column grid is
     locked to the viewport — nav (left) and player (right) stay perfectly
     still, and ONLY the center feed column scrolls up/down. */
  html,body{height:100%!important;overflow:hidden!important;}
  #app{position:fixed!important;inset:0!important;height:100vh!important;
       margin:0;align-items:stretch!important;overflow:hidden!important;}

  /* nav: fixed column, doesn't move */
  #navRail{align-self:stretch;max-height:100vh;overflow-y:auto;}

  /* RADIO tab keeps its full-viewport column (wave pinned to the bottom) */
  #main{min-height:0;height:100vh;overflow-y:auto;}

  /* COMMUNITY tab: the center column is THE scroller (only this moves) */
  #leftCol{display:block;height:100vh;overflow-y:auto;min-height:0;}
  #archivePanel{display:block;min-height:0;}
  #archiveApp{display:block;}
  #feedRoot{display:block;min-height:0;padding:18px;}

  /* player: fixed column on the right, never moves; scrolls INTERNALLY only if
     it's taller than the screen (saved-stations expanded). */
  #side{position:relative!important;align-self:stretch;
        height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;}

  /* hide the scrollbar "slider" on the scrollers — clean like X */
  #leftCol,#side,#navRail,#main{scrollbar-width:none;}
  #leftCol::-webkit-scrollbar,#side::-webkit-scrollbar,
  #navRail::-webkit-scrollbar,#main::-webkit-scrollbar{width:0;height:0;display:none;}
}

/* saved-stations playlist: drop its own inner scrollbox ("border slide") —
   the player already scrolls to its own end, so the list just flows. */
#favList{max-height:none!important;overflow:visible!important;}

/* POST DETAIL VIEW — click a post to open its own page (back button + comments),
   exactly like X. The composer / filter / feed list hide; the center column
   still scrolls the detail. */
.postCard.clickable{cursor:pointer;}
.postCard.clickable:hover{background:rgba(255,255,255,.03);}
#feedRoot.inDetail > .composer,
#feedRoot.inDetail > .filterBar,
#feedRoot.inDetail > #feedList,
#feedRoot.inDetail > #feedEmpty{display:none!important;}
.postDetail{display:block;}
.postDetail[hidden]{display:none;}
.detailBar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:6;
  margin:-18px -18px 0;padding:12px 16px;
  background:rgba(10,7,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);}
.detailBack{font-family:inherit;font-size:15px;font-weight:700;color:#fff;
  background:transparent;border:none;cursor:pointer;border-radius:99px;padding:7px 13px;
  transition:background .15s;}
.detailBack:hover{background:rgba(255,255,255,.10);}
.detailTitle{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;}
.detailBody{padding-top:14px;}
.postDetail .postCard{cursor:default;}
.postDetail .pcThread{display:block!important;}

/* composer type chips: wrap instead of spilling "POLL" out of the box */
.compTypes{flex-wrap:wrap;}
.composer{overflow:visible;}

/* CLEAN NAV (Twitter-style): no persistent filled pill, just a hover highlight
   and a bold white active item. user: "notice how clean twitter is, they only
   add highlight on hover." */
.navItem{border:none!important;}
.navItem:hover{color:#fff;background:rgba(255,255,255,.08);}
.navItem.on{color:#fff;background:transparent;font-weight:700;}
.navItem.on:hover{background:rgba(255,255,255,.08);}
.navItem.on .navIco{color:#fff;}

/* ════════════════ CREATOR SPACE (v1) ════════════════ */
#creatorOverlay{position:fixed;inset:0;z-index:96;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 18px 18px;overflow-y:auto;}
#creatorOverlay[hidden]{display:none;}
#creatorModal{position:relative;width:100%;max-width:540px;background:linear-gradient(180deg,#15131c,#0c0b10);
  border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.95);overflow:hidden;}
#creatorClose{position:absolute;top:10px;right:12px;z-index:5;width:30px;height:30px;border-radius:8px;
  font-size:20px;line-height:1;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);cursor:pointer;}
#creatorClose:hover{background:rgba(0,0,0,.7);}
#creatorBody{padding:24px 22px 26px;font-size:14px;color:var(--read);}
.crLoading{padding:30px 0;text-align:center;color:var(--muted);font-size:14px;}

/* header */
.crHead{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.crArt{flex:0 0 auto;width:72px;height:72px;border-radius:14px;background:#241a33 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff;
  border:1px solid var(--line2);}
.crIdCol{min-width:0;}
.crKicker{font-size:11px;letter-spacing:.16em;color:var(--dim);font-weight:700;}
.crName{margin:3px 0 2px;font-size:20px;font-weight:800;color:#fff;line-height:1.2;}
.crHandle{font-size:14px;color:var(--dim);}
.crBio{font-size:14px;line-height:1.55;color:var(--read);margin:0 0 16px;}

/* form */
.crForm{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.crField{display:flex;flex-direction:column;gap:6px;}
.crFieldLabel{font-size:13px;color:var(--dim);font-weight:600;}
.crField input,.crField textarea{font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.crField textarea{min-height:76px;resize:vertical;line-height:1.5;}
.crField input:focus,.crField textarea:focus{outline:none;border-color:rgba(167,139,250,.45);}

.crMedia{display:flex;flex-direction:column;gap:10px;}
.crUploadRow,.crSaveRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.crFileBtn{display:inline-block;font-family:inherit;font-size:13px;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;}
.crFileBtn:hover{background:rgba(255,255,255,.12);}
.crFileName{font-size:13px;color:var(--dim);}
.crMsg{font-size:13px;color:var(--dim);}

.crPrimary{font-family:inherit;font-weight:700;font-size:14px;color:#0b0b0b;cursor:pointer;border:none;
  border-radius:10px;padding:10px 18px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;}
.crPrimary:hover{filter:brightness(1.08);}
.crPrimary:disabled{opacity:.55;cursor:default;}
.crGhost{font-family:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:10px;padding:9px 16px;margin-bottom:16px;}
.crGhost:hover{background:rgba(255,255,255,.08);}

/* tracks */
.crTracks{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;}
.crSubhead{font-size:16px;font-weight:800;color:#fff;margin:0 0 14px;}
.crAddTrack{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.crTrackTitle{flex:1;min-width:140px;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.crTrackTitle:focus{outline:none;border-color:rgba(167,139,250,.45);}
.crTrackList{display:flex;flex-direction:column;gap:10px;}
.crTrack{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.crTrackPlay{flex:0 0 auto;width:36px;height:36px;border-radius:50%;font-size:13px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;display:flex;align-items:center;justify-content:center;}
.crTrackPlay:hover{filter:brightness(1.1);}
.crTrackMeta{flex:1;min-width:0;}
.crTrackTitleTxt{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crTrackSub{font-size:12px;color:var(--dim);}
.crTrackAdd{font-family:inherit;font-size:13px;font-weight:600;color:#a78bfa;cursor:pointer;
  background:transparent;border:1px solid rgba(167,139,250,.35);border-radius:99px;padding:6px 12px;white-space:nowrap;}
.crTrackAdd:hover{background:rgba(167,139,250,.12);}
.crTrackDel{flex:0 0 auto;width:28px;height:28px;border-radius:8px;font-size:16px;line-height:1;color:var(--dim);
  background:transparent;border:1px solid var(--line2);cursor:pointer;}
.crTrackDel:hover{color:#fff;background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4);}
.crEmpty{font-size:13px;color:var(--dim);padding:6px 0;}
.navItem.on::after{display:none!important;}

/* ════════════════ CREATOR PAGE (inline, profile = creator space) ════════════════ */
#feedRoot.inPage > .composer,
#feedRoot.inPage > .filterBar,
#feedRoot.inPage > #feedList,
#feedRoot.inPage > #feedEmpty,
#feedRoot.inPage > #postDetail{display:none!important;}
.pageView{display:block;}
.pageView[hidden]{display:none;}
.pgLoading{padding:40px 0;text-align:center;color:var(--muted);font-size:14px;}

/* top bar */
.pgBar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:6;
  margin:-18px -18px 0;padding:12px 16px;
  background:rgba(10,7,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);}
.pgBack{font-family:inherit;font-size:15px;font-weight:700;color:#fff;background:transparent;
  border:none;cursor:pointer;border-radius:99px;padding:7px 12px;transition:background .15s;}
.pgBack:hover{background:rgba(255,255,255,.10);}
.pgBarTitle{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;}

.pgBody{padding-top:14px;}
.pgBanner{height:150px;border-radius:16px;background:#1a1426 center/cover no-repeat;border:1px solid var(--line2);}
.pgBannerEmpty{background:linear-gradient(120deg,#241a33,#15131c);}

.pgHead{display:flex;align-items:flex-end;gap:14px;margin:-40px 4px 0;padding:0 6px;}
.pgAvatar{flex:0 0 auto;width:86px;height:86px;border-radius:18px;overflow:hidden;background:#241a33;
  border:3px solid #0c0b10;display:flex;align-items:center;justify-content:center;}
.pgAvatar img{width:100%;height:100%;object-fit:cover;}
.pgAvatarFallback{font-size:34px;font-weight:800;color:#fff;}
.pgId{flex:1 1 auto;min-width:0;padding-bottom:4px;}
.pgNameRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pgName{font-size:21px;font-weight:800;color:#fff;letter-spacing:.01em;}
.pgArtist{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a78bfa;
  background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.3);border-radius:99px;padding:2px 8px;}
.pgHandle{display:block;font-size:14px;color:var(--dim);margin-top:2px;}
.pgEditBtn{flex:0 0 auto;font-family:inherit;font-size:13px;font-weight:700;color:#fff;cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:8px 16px;transition:.16s;}
.pgEditBtn:hover{background:rgba(255,255,255,.08);}

.pgBio{margin:14px 8px 0;color:var(--read);font-size:14.5px;line-height:1.6;}
.pgTags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 8px 0;}
.pgChip{font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px;}
.pgLinks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 8px 0;}
.pgLink{font-size:13px;font-weight:600;color:#7dd3fc;text-decoration:none;border:1px solid rgba(125,211,252,.3);
  border-radius:99px;padding:5px 12px;transition:.16s;}
.pgLink:hover{background:rgba(125,211,252,.12);}

/* owner compose */
.pgCompose{margin:18px 8px 0;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px;}
.pgComposeText{width:100%;box-sizing:border-box;resize:vertical;min-height:54px;font:inherit;font-size:14.5px;
  color:#fff;background:transparent;border:none;outline:none;}
.pgComposeText::placeholder{color:var(--dim);}
.pgComposeRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.pgImgBtn,.pgFileBtn{font-family:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:6px 13px;transition:.16s;}
.pgImgBtn:hover,.pgFileBtn:hover{color:#fff;background:rgba(255,255,255,.07);}
.pgFileName{font-size:12px;color:var(--dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pgPost{font-family:inherit;font-weight:700;font-size:13.5px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;border-radius:99px;padding:8px 18px;}
.pgPost:disabled{opacity:.6;cursor:default;}
.pgGhost{font-family:inherit;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:8px 16px;}
.pgMsg{font-size:12.5px;color:var(--dim);}

/* tracks + posts sections */
.pgTracks,.pgPosts{margin:24px 8px 0;}
.pgSubhead{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pgAddTrack{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:11px;}
.pgTrackTitle{flex:1 1 160px;min-width:0;font:inherit;font-size:14px;color:#fff;background:transparent;
  border:none;border-bottom:1px solid var(--line2);outline:none;padding:5px 2px;}
.pgTrackTitle::placeholder{color:var(--dim);}
.pgTrackList{display:flex;flex-direction:column;gap:8px;}
.pgTrack{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;}
.pgTrackPlay{flex:0 0 auto;width:38px;height:38px;border-radius:50%;font-size:14px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);border:none;display:flex;align-items:center;justify-content:center;}
.pgTrackMeta{flex:1 1 auto;min-width:0;}
.pgTrackTitle2{font-size:14.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pgTrackSub{font-size:12px;color:var(--dim);}
.pgTrackAdd{font-family:inherit;font-size:13px;font-weight:600;color:#a78bfa;cursor:pointer;
  background:transparent;border:1px solid rgba(167,139,250,.35);border-radius:99px;padding:6px 12px;white-space:nowrap;}
.pgTrackAdd:hover{background:rgba(167,139,250,.12);}
.pgTrackDel{flex:0 0 auto;width:28px;height:28px;border-radius:8px;font-size:16px;line-height:1;color:var(--dim);
  background:transparent;border:1px solid var(--line2);cursor:pointer;}
.pgTrackDel:hover{color:#fff;background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4);}
.pgEmpty,.pgPostEmpty{font-size:13px;color:var(--dim);padding:6px 0;}

.pgPostList{display:flex;flex-direction:column;gap:12px;}
.pgPostCard{display:block;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px;}
.pgPostText{margin:0;color:var(--read);font-size:14.5px;line-height:1.6;word-break:break-word;}
.pgPostImg{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:10px;margin-top:10px;border:1px solid var(--line);}
.pgPostTime{margin-top:8px;font-size:12px;color:var(--dim);}

/* edit form */
.pgForm{display:flex;flex-direction:column;gap:14px;margin:18px 8px 0;}
.pgField{display:flex;flex-direction:column;gap:6px;}
.pgFieldLabel{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.pgField input,.pgField textarea{font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line2);border-radius:10px;padding:9px 11px;outline:none;}
.pgField textarea{resize:vertical;min-height:64px;}
.pgUploadRow{display:flex;align-items:center;gap:10px;}
.pgCheck{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer;}
.pgFormRow{display:flex;gap:10px;align-items:center;}

/* player source switch (FM / My Music / Artist) */
.srcSwitch{display:flex;gap:5px;margin:0 0 12px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);}
.srcBtn{flex:1 1 auto;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--dim);background:transparent;border:none;border-radius:99px;padding:6px 8px;cursor:pointer;
  transition:.15s;white-space:nowrap;}
.srcBtn:hover{color:#fff;}
.srcBtn.on{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);}

/* ============================================================
   SMOOTH REVEALS (2026-06-24) — comment threads & rows ease in
   instead of snapping. Keeps the feed feeling polished, not jumpy.
   ============================================================ */
@keyframes threadReveal{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.pcThread:not([hidden]){animation:threadReveal .26s cubic-bezier(.2,.7,.2,1) both;}
@keyframes cmtReveal{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.cmt{animation:cmtReveal .22s ease both;}



/* ============================================================================
   SOCIAL — follows, messages, alerts. Layered on the synthwave palette.
   ============================================================================ */

/* ---- nav unread badges ---- */
.navItem{position:relative;}
.navBadge{
  position:absolute;top:6px;left:50%;margin-left:2px;min-width:16px;height:16px;
  padding:0 4px;border-radius:9px;background:linear-gradient(180deg,var(--acc),var(--acc2));
  color:#0a0610;font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--bg0),0 4px 12px -4px rgba(139,92,246,.8);
}

/* ---- shared sign-in gate for chat / alerts ---- */
.socialGate{display:flex;align-items:center;justify-content:center;height:100%;padding:32px;}
.socialGate .gateInner{max-width:420px;text-align:center;}
.socialGate .gateKicker{font-size:11px;letter-spacing:.26em;color:var(--acc);text-transform:uppercase;margin-bottom:10px;}
.socialGate h2{margin:0 0 10px;font-size:24px;color:var(--txt);}
.socialGate p{color:var(--muted);line-height:1.6;margin:0 0 20px;}
.socialGate .gateBtns{display:flex;gap:10px;justify-content:center;}

/* ---- profile: follow / message / counts ---- */
.pfActions{margin-left:auto;display:flex;gap:8px;align-self:flex-start;}
.pfFollow,.pfMsg{
  font-family:inherit;font-weight:700;font-size:13px;border-radius:999px;padding:8px 18px;cursor:pointer;
  border:1px solid rgba(139,92,246,.5);background:linear-gradient(180deg,var(--acc),var(--acc2));color:#0a0610;
  transition:.16s;
}
.pfFollow.on{background:transparent;color:var(--txt);border-color:var(--line);}
.pfFollow.on:hover{border-color:#f87171;color:#f87171;}
.pfMsg{background:transparent;color:var(--txt);border-color:var(--line);}
.pfMsg:hover:not(:disabled){border-color:var(--acc);color:var(--acc);}
.pfMsg:disabled{opacity:.4;cursor:not-allowed;}
.pfFollowsYou{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  vertical-align:middle;
}
.pfStats{display:flex;gap:22px;margin:4px 0 16px;}
.pfStat{background:none;border:0;color:var(--muted);font-size:13.5px;cursor:pointer;padding:0;font-family:inherit;}
.pfStat b{color:var(--txt);font-weight:800;}
.pfStat:hover b{text-decoration:underline;}

/* ============================== MESSAGES ================================== */
#chatPanel,#notifyPanel{display:flex;flex-direction:column;overflow:hidden;}
#chatWrap{flex:1 1 auto;display:grid;grid-template-columns:300px 1fr;min-height:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);}
#chatListCol{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);}
.chatListHd{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;}
.chatListHd span{font-size:19px;font-weight:800;color:var(--txt);}
#chatNewBtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  color:var(--acc);font-size:19px;line-height:1;cursor:pointer;transition:.16s;}
#chatNewBtn:hover{border-color:var(--acc);background:rgba(139,92,246,.14);}
.chatSearch{padding:0 12px 10px;}
.chatSearch input{width:100%;box-sizing:border-box;background:var(--bg1);border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;color:var(--txt);font-family:inherit;font-size:13px;}
.chatSearch input:focus{outline:none;border-color:var(--acc);}
#chatList{flex:1 1 auto;overflow-y:auto;min-height:0;}
.chatRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  padding:10px 14px;cursor:pointer;border-left:2px solid transparent;font-family:inherit;transition:background .14s;}
.chatRow:hover{background:var(--panel2);}
.chatRow.on{background:rgba(139,92,246,.1);border-left-color:var(--acc);}
.chatAv{width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-weight:800;font-size:16px;}
.chatAv img{width:100%;height:100%;object-fit:cover;}
.chatAvGroup{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#0a0610;}
.chatRowMid{min-width:0;flex:1 1 auto;}
.chatRowTop{display:flex;justify-content:space-between;gap:8px;}
.chatRowName{font-weight:700;color:var(--txt);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chatRowTime{color:var(--dim);font-size:12px;flex:none;}
.chatRowPrev{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.chatRowDot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none;box-shadow:0 0 8px var(--acc);}
.chatListEmpty,.chatLoading,.chatNewEmpty{padding:24px 16px;color:var(--muted);font-size:13px;text-align:center;}

#chatThreadCol{display:flex;flex-direction:column;min-height:0;position:relative;}
.chatEmpty{margin:auto;text-align:center;max-width:300px;padding:30px;}
.chatEmptyArt{font-size:40px;color:var(--acc);opacity:.5;margin-bottom:8px;}
.chatEmpty h3{margin:0 0 6px;color:var(--txt);font-size:20px;}
.chatEmpty p{color:var(--muted);line-height:1.6;margin:0 0 16px;font-size:14px;}
#chatThread{display:flex;flex-direction:column;min-height:0;height:100%;}
#chatThreadHd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
.chatThreadName{font-weight:800;color:var(--txt);font-size:15px;}
.chatBack{display:none;background:none;border:0;color:var(--acc);font-size:20px;cursor:pointer;padding:0 4px 0 0;}
#chatMsgs{flex:1 1 auto;overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:3px;}
.chatDay{align-self:center;font-size:11px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:3px 12px;margin:12px 0 8px;letter-spacing:.04em;}
.chatMsg{display:flex;gap:8px;max-width:74%;align-items:flex-end;margin-bottom:2px;}
.chatMsg.mine{align-self:flex-end;flex-direction:row-reverse;}
.chatMsgAv{width:26px;height:26px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-size:11px;font-weight:800;}
.chatMsgAv img{width:100%;height:100%;object-fit:cover;}
.chatMsgCol{min-width:0;display:flex;flex-direction:column;}
.chatMsg.mine .chatMsgCol{align-items:flex-end;}
.chatMsgWho{font-size:11px;color:var(--acc);font-weight:700;margin:0 4px 2px;}
.chatBubble{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px;word-wrap:break-word;
  overflow-wrap:anywhere;}
.chatMsg.mine .chatBubble{background:linear-gradient(180deg,var(--acc2),#7c3aed);border-color:transparent;
  color:#fff;border-radius:16px;border-bottom-right-radius:5px;}
.chatMention{color:var(--acc);font-weight:700;}
.chatMsg.mine .chatMention{color:#e9d5ff;}
.chatAttach{display:block;max-width:240px;border-radius:10px;margin-top:6px;}
.chatMsgTime{font-size:10.5px;color:var(--dim);margin:2px 5px 0;}
.chatMsg .chatBubble.flash,.chatMsg.flash .chatBubble{animation:msgFlash 1.5s ease;}
@keyframes msgFlash{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 3px rgba(167,139,250,.5);}}
#chatComposer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);}
#chatInput{flex:1 1 auto;background:var(--bg1);border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;color:var(--txt);font-family:inherit;font-size:14px;}
#chatInput:focus{outline:none;border-color:var(--acc);}
#chatSend{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;font-size:16px;
  background:linear-gradient(180deg,var(--acc),var(--acc2));color:#0a0610;transition:.16s;}
#chatSend:hover{filter:brightness(1.1);}

/* new-message overlay */
#chatNewOverlay{position:fixed;inset:0;z-index:60;background:rgba(7,5,9,.74);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;}
#chatNewModal{width:min(440px,100%);max-height:80vh;overflow-y:auto;background:linear-gradient(180deg,var(--bg2),var(--bg1));
  border:1px solid var(--line);border-radius:18px;padding:22px;position:relative;}
#chatNewModal h3{margin:0 0 4px;color:var(--txt);font-size:20px;}
.chatNewHint{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px;}
#chatNewClose{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;}
#chatNewList{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.chatPick{display:flex;align-items:center;gap:11px;background:none;border:1px solid transparent;border-radius:12px;
  padding:8px 10px;cursor:pointer;font-family:inherit;text-align:left;transition:.14s;}
.chatPick:hover{background:var(--panel2);}
.chatPick.on{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);}
.chatPickMid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.chatPickName{color:var(--txt);font-weight:700;font-size:14px;}
.chatPickHandle{color:var(--muted);font-size:12px;}
.chatPickCheck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.14s;}
.chatPick.on .chatPickCheck{background:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 3px var(--bg1);}
.chatGroupTitle{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.chatGroupTitle span{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.chatGroupTitle input{background:var(--bg1);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  color:var(--txt);font-family:inherit;font-size:14px;}
.chatGroupTitle input:focus{outline:none;border-color:var(--acc);}

/* =============================== ALERTS ================================== */
#notifyWrap{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:var(--panel);}
.notifyHd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.notifyHd span{font-size:19px;font-weight:800;color:var(--txt);}
#notifyReadAll{background:none;border:0;color:var(--acc);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
#notifyReadAll:hover{text-decoration:underline;}
#notifyList{flex:1 1 auto;overflow-y:auto;min-height:0;}
.ntRow{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:14px 18px;cursor:pointer;font-family:inherit;transition:background .14s;}
.ntRow:hover{background:var(--panel2);}
.ntRow.unread{background:rgba(139,92,246,.07);}
.ntAv{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-weight:800;}
.ntAv img{width:100%;height:100%;object-fit:cover;}
.ntMid{flex:1 1 auto;min-width:0;}
.ntLine{color:var(--muted);font-size:14px;line-height:1.4;}
.ntLine b{color:var(--txt);font-weight:700;}
.ntBody{color:var(--txt);font-size:13.5px;margin-top:3px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:7px 11px;word-wrap:break-word;overflow-wrap:anywhere;}
.ntTime{color:var(--dim);font-size:12px;margin-top:4px;}
.ntDot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none;margin-top:6px;box-shadow:0 0 8px var(--acc);}
.ntEmpty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px;}

/* ---- mobile: chat collapses to a single column ---- */
@media (max-width:760px){
  #chatWrap{grid-template-columns:1fr;}
  #chatListCol{border-right:0;}
  #chatThreadCol{display:none;}
  #chatThreadCol.open{display:flex;position:absolute;inset:0;z-index:5;background:var(--bg1);}
  .chatBack{display:block;}
  #chatWrap{position:relative;}
}

/* hidden-attribute guards (these elements set an explicit display, which would
   otherwise override the [hidden] attribute and leak open on load) */
#chatNewOverlay[hidden],#chatThread[hidden],.chatGroupTitle[hidden],
#chatWrap[hidden],#notifyWrap[hidden],#chatGate[hidden],#notifyGate[hidden],
.chatEmpty[hidden]{display:none!important;}