/* ============================================================================
   StrikeBG Chat (The Lounge) — Palette Enrichment Layer  (v20260721-enrich1)
   ----------------------------------------------------------------------------
   ADDITIVE ONLY. Injected LAST via nginx sub_filter, after chat-upgrades.css.
   Remove the <link> + location block from the nginx vhost to fully revert.

   Direction: "Обогатен нео-циан" — keeps the dark teal base but breaks the
   cyan monotony: violet active tab, amber unread / magenta mention badges,
   magenta mention highlight, multi-colour brand. Accent-only — no background
   rewrites, so both dark and light chat themes stay intact.
   ============================================================================ */

:root{
  --sb-cyan:#28d4df;
  --sb-violet:#8b5cf6;
  --sb-magenta:#ff3d8b;
  --sb-amber:#ffb020;
  --sb-green:#62e89a;
}

/* ---- 1. Active channel / network tab -> violet ------------------------- */
#sidebar .chan.active,
#sidebar .channel.active,
#sidebar .network.active,
#sidebar .lobby.active,
#sidebar .channel-list-item.active{
  border-left:3px solid var(--sb-violet)!important;
  background:linear-gradient(90deg,rgba(139,92,246,.24),rgba(139,92,246,.03))!important;
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.22),
             0 0 18px -6px rgba(139,92,246,.5)!important;
}
#sidebar .chan.active .name,
#sidebar .channel-list-item.active .name{ color:#e9e2ff!important; }

/* ---- 2. Unread badge -> amber, mention badge -> magenta ---------------- */
#sidebar .badge{
  background:var(--sb-amber)!important;color:#1a1205!important;font-weight:700;
  box-shadow:0 0 12px rgba(255,176,32,.5)!important;
}
#sidebar .badge.highlight{
  background:var(--sb-magenta)!important;color:#2a0716!important;
  box-shadow:0 0 12px rgba(255,61,139,.6)!important;
}

/* ---- 3. Message mention highlight -> magenta accent -------------------- */
#chat .msg.highlight,
#chat .highlight{
  border-left:3px solid var(--sb-magenta)!important;
  background:linear-gradient(90deg,rgba(255,61,139,.12),rgba(255,61,139,0) 60%)!important;
}

/* ---- 4. Brand wordmark -> cyan→violet→magenta gradient ----------------- */
.strikebg-sidebar-text,
.strikebg-sidebar-logo,
.nav-brand-text{
  background:linear-gradient(90deg,var(--sb-cyan),var(--sb-violet) 55%,var(--sb-magenta))!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}

/* ---- 5. Navigation counter dot cycles the accent set ------------------- */
.strikebg-irc-status-dot{ box-shadow:0 0 10px rgba(98,232,154,.7)!important; }
.nav-counter:hover{ border-color:rgba(139,92,246,.5)!important; }

/* ---- 6. Send / submit button gets a gradient --------------------------- */
#form #submit,
#form .btn,
button#submit{
  background:linear-gradient(120deg,var(--sb-cyan),var(--sb-violet))!important;
  color:#06090f!important;border-color:transparent!important;
}

/* ---- 7. Accent scrollbars (multi-tone) --------------------------------- */
#chat ::-webkit-scrollbar-thumb,
#sidebar ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--sb-cyan),var(--sb-violet))!important;
}

/* ---- 8. Selection colour -> magenta ------------------------------------ */
::selection{ background:rgba(255,61,139,.32); }


/* ---- 9. Connect screen: separate attention colours -------------------- */
html.strikebg-network-v2 #connect>.header{
  border-bottom:1px solid rgba(139,92,246,.35)!important;
  background:linear-gradient(90deg,rgba(139,92,246,.12),rgba(40,212,223,.05))!important;
}
html.strikebg-network-v2 #connect>.header .title,
html.strikebg-network-v2 #connect h1,
html.strikebg-network-v2 #connect h2{
  color:#e8e0ff!important;text-shadow:0 0 18px rgba(139,92,246,.35)!important;
}
html.strikebg-network-v2 #connect .connect-row:nth-of-type(1) input,
html.strikebg-network-v2 #connect input[name="nick"]{
  border-color:rgba(40,212,223,.62)!important;box-shadow:inset 3px 0 var(--sb-cyan)!important;
}
html.strikebg-network-v2 #connect .connect-row:has(input[name="join"]) input{
  border-color:rgba(255,176,32,.62)!important;box-shadow:inset 3px 0 var(--sb-amber)!important;
}
html.strikebg-network-v2 #connect input[name="nick"]:focus{border-color:var(--sb-green)!important;box-shadow:0 0 0 3px rgba(98,232,154,.15),inset 3px 0 var(--sb-green)!important}
html.strikebg-network-v2 #connect .connect-row:has(input[name="join"]) input:focus{border-color:var(--sb-amber)!important;box-shadow:0 0 0 3px rgba(255,176,32,.15),inset 3px 0 var(--sb-amber)!important}
html.strikebg-network-v2 #connect label[for="connect:nick"]{color:#8dece0!important}
html.strikebg-network-v2 #connect .connect-row:has(input[name="join"]) label{color:#ffd27a!important}
html.strikebg-network-v2 #connect button[type="submit"],
html.strikebg-network-v2 #connect .btn[type="submit"]{
  background:linear-gradient(120deg,var(--sb-violet),var(--sb-magenta),var(--sb-amber))!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;box-shadow:0 10px 26px rgba(255,61,139,.25)!important;
}
html.strikebg-network-v2 #connect button[type="submit"]:hover,
html.strikebg-network-v2 #connect .btn[type="submit"]:hover{
  background:linear-gradient(120deg,var(--sb-amber),var(--sb-magenta),var(--sb-violet))!important;
}