@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Baloo+2:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap");

/* ── CSS VARIABLES ── */
:root {
  color-scheme: dark;
  --sb-red: #ff4d2e;
  --sb-red-soft: rgba(255, 77, 46, .18);
  --sb-bg: #07080b;
  --sb-panel: rgba(13, 15, 19, .96);
  --sb-line: rgba(255, 77, 46, .28);
  --sb-text: #f3f0ea;
  --sb-muted: #afa9a0;
  --card-border: rgba(255, 255, 255, 0.08);
  --accent: #e8441a;
  --gold: #f5c518;
  --text: #e6ecf2;
  --text-dim: #7a8898;
  --nav-h: 78px;
  --font-head: 'Baloo 2', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius-sm: 5px;
}

/* ── BASE THEME ── */
html, body {
  background: var(--sb-bg) !important;
  color: var(--sb-text) !important;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,77,46,.12), transparent 34%),
    radial-gradient(circle at 82% 70%, rgba(40,212,223,.08), transparent 36%),
    linear-gradient(145deg, #05070b, #090d14 55%, #05070b) !important;
}

/* Hidden in embedded mode, shown in standalone via rule below */
.strikebg-chat-site-header { display: none !important; }

#app, #viewport, #windows, .window, .chat, .chat-content, .messages {
  background: transparent !important;
}

#sidebar, .sidebar, #form, .header, .chat-header, .channel-header, #windows .header {
  background: var(--sb-panel) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

#sidebar { border-right: 1px solid var(--sb-line) !important; }

#sidebar .logo-container {
  position: relative !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px 10px 20px !important;
}

#sidebar .logo-container .logo,
#sidebar .logo-container .logo-inverted {
  display: none !important;
}

#sidebar .logo-container::before,
#sidebar .logo-container::after {
  content: none !important;
}

#sidebar .strikebg-sidebar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#sidebar .strikebg-sidebar-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #ff8a5b, #ff4d2e) !important;
  box-shadow: 0 0 14px rgba(255, 77, 46, .35) !important;
  flex: 0 0 14px !important;
}

#sidebar .strikebg-sidebar-text {
  color: var(--sb-text) !important;
  font-family: var(--font-head), sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 16px rgba(255, 77, 46, .22) !important;
}

#input, textarea, input[type="text"], input[type="password"] {
  background: rgba(7, 8, 12, .98) !important;
  border: 1px solid rgba(255, 77, 46, .34) !important;
  color: var(--sb-text) !important;
  caret-color: var(--sb-red) !important;
}

button, .btn { border-color: rgba(255, 77, 46, .45) !important; }

a, .link, .nick, .user { color: #ff8a5b !important; }

.active, .chan.active, .channel.active, .network.active, .lobby.active {
  background: var(--sb-red-soft) !important;
  color: #fff !important;
}

.message.highlight, .msg.highlight, .highlight {
  background: rgba(255, 77, 46, .13) !important;
}

/* ── LIGHT THEME (auto by time of day, or manual via the header toggle) ── */
/* The Lounge's own compiled bundle paints most of the UI (incl. #sidebar, join/part/quit
   summary lines, condensed message groups) straight from these CSS custom properties.
   Our themes/strikebg.css theme sets them dark directly on `:root, body, .window,
   #sign-in, #connect` (not just :root) — so overriding only `html.strikebg-chat-light`
   was never enough: `body` has its own declaration that shadows whatever `html` says,
   since custom-property resolution inherits from the nearest ancestor that declares it.
   Re-declaring on the exact same elements here is what actually wins. */
html.strikebg-chat-light,
html.strikebg-chat-light body,
html.strikebg-chat-light .window,
html.strikebg-chat-light #sign-in,
html.strikebg-chat-light #connect {
  --body-bg-color: #f7ecdb !important;
  --window-bg-color: #f7ecdb !important;
  --body-color: #241a10 !important;
  --body-color-muted: #6b4423 !important;
  --highlight-bg-color: rgba(255, 77, 46, .16) !important;
  --link-color: #d9480f !important;
}

html.strikebg-chat-light {
  --sb-bg: #f7ecdb;
  --sb-panel: #f2e2c4;
  --sb-line: rgba(230, 90, 40, .28);
  --sb-text: #241a10;
  --sb-muted: #7a5a3a;
}

html.strikebg-chat-light body {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,119,70,.14), transparent 34%),
    linear-gradient(150deg, rgba(247,236,219,.96), rgba(245,221,190,.92), rgba(247,236,219,.96)) !important;
}

html.strikebg-chat-light #input,
html.strikebg-chat-light textarea,
html.strikebg-chat-light input[type="text"],
html.strikebg-chat-light input[type="password"] {
  background: rgba(247, 226, 196, .95) !important;
  border: 1px solid rgba(230, 90, 40, .38) !important;
  color: var(--sb-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4) !important;
}

html.strikebg-chat-light #input:focus,
html.strikebg-chat-light textarea:focus,
html.strikebg-chat-light input[type="text"]:focus {
  border-color: rgba(230, 90, 40, .7) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 46, .16) !important;
}

html.strikebg-chat-light #sidebar,
html.strikebg-chat-light #chat .chat-view .header,
html.strikebg-chat-light #chat .chat-view .footer,
html.strikebg-chat-light .nicklist {
  box-shadow: inset 0 0 0 1px rgba(230, 90, 40, .08) !important;
}

html.strikebg-chat-light a,
html.strikebg-chat-light .link,
html.strikebg-chat-light .nick,
html.strikebg-chat-light .user {
  color: #d9480f !important;
}

html.strikebg-chat-light .message.highlight,
html.strikebg-chat-light .msg.highlight,
html.strikebg-chat-light .highlight {
  background: rgba(255, 77, 46, .08) !important;
}

html.strikebg-chat-light #chat .user-mode:before,
html.strikebg-chat-light #chat .user-mode-search:before {
  background: rgba(230, 90, 40, .07) !important;
}

html.strikebg-chat-light #chat .user-mode.normal .user,
html.strikebg-chat-light #chat .user-mode.normal .user *,
html.strikebg-chat-light #chat .user.normal,
html.strikebg-chat-light #chat .user-mode.normal:before {
  color: #6b5133 !important;
}

html.strikebg-chat-light #sidebar .strikebg-brand-sub {
  color: #8a6a45 !important;
}

/* Lounge's own bundle hardcodes .time to #696969 (bypasses --body-color-muted entirely)
   and dims "X users have joined/left" / hint text via .is-muted{opacity:.5} — both fine
   on a dark background, both too faint on a light one. */
html.strikebg-chat-light .time {
  color: #5c4530 !important;
}

html.strikebg-chat-light .is-muted {
  opacity: .75 !important;
  color: #5c4530 !important;
}

/* True mIRC 0-15 palette, matching the native app's MircColors.kt exactly (both are
   verified against modern.ircdocs.horse). Lounge's own bundled CSS substitutes a
   different vivid 16-color set for these same codes (e.g. fg2 #001f3f, fg4 #ff4136) —
   the extended 16-98 range Lounge ships already IS the real mIRC table and is left
   untouched. This block restores 0-15 to match, for both themes; the light-theme
   readability overrides just below still win on top of it for the codes that need
   deepening to stay legible on white. */
.irc-fg0  { color: #ffffff !important; }
.irc-fg1  { color: #000000 !important; }
.irc-fg2  { color: #00007f !important; }
.irc-fg3  { color: #009300 !important; }
.irc-fg4  { color: #ff0000 !important; }
.irc-fg5  { color: #7f0000 !important; }
.irc-fg6  { color: #9c009c !important; }
.irc-fg7  { color: #fc7f00 !important; }
.irc-fg8  { color: #ffff00 !important; }
.irc-fg9  { color: #00fc00 !important; }
.irc-fg10 { color: #009393 !important; }
.irc-fg11 { color: #00ffff !important; }
.irc-fg12 { color: #0000fc !important; }
.irc-fg13 { color: #ff00ff !important; }
.irc-fg14 { color: #7f7f7f !important; }
.irc-fg15 { color: #d2d2d2 !important; }

.irc-bg0  { background-color: #ffffff !important; }
.irc-bg1  { background-color: #000000 !important; }
.irc-bg2  { background-color: #00007f !important; }
.irc-bg3  { background-color: #009300 !important; }
.irc-bg4  { background-color: #ff0000 !important; }
.irc-bg5  { background-color: #7f0000 !important; }
.irc-bg6  { background-color: #9c009c !important; }
.irc-bg7  { background-color: #fc7f00 !important; }
.irc-bg8  { background-color: #ffff00 !important; }
.irc-bg9  { background-color: #00fc00 !important; }
.irc-bg10 { background-color: #009393 !important; }
.irc-bg11 { background-color: #00ffff !important; }
.irc-bg12 { background-color: #0000fc !important; }
.irc-bg13 { background-color: #ff00ff !important; }
.irc-bg14 { background-color: #7f7f7f !important; }
.irc-bg15 { background-color: #d2d2d2 !important; }

/* Bot messages (StrikeBG trivia bot etc.) are formatted with classic mIRC color codes.
   Most of the 16-color palette reads fine on both backgrounds, but white/yellow/light-blue/
   light-gray/light-orange (the true mIRC values set above) are built for a dark chat
   background and vanish on a light one. */
html.strikebg-chat-light .irc-fg0  { color: #23282f !important; } /* was white */
html.strikebg-chat-light .irc-fg7  { color: #b35900 !important; } /* was light orange */
html.strikebg-chat-light .irc-fg8  { color: #a94700 !important; } /* контрастно оранжево върху бял фон */
html.strikebg-chat-light .irc-fg9  { color: #0f8a3f !important; } /* was bright green */
html.strikebg-chat-light .irc-fg11 { color: #0b63a8 !important; } /* was light blue */
html.strikebg-chat-light .irc-fg14 { color: #7a5a3a !important; } /* was light gray */
html.strikebg-chat-light .irc-fg15 { color: #5c4530 !important; } /* was very light gray */

/* Darken the role/nick colors that are too pale to read on a light background —
   same hue family as the dark-theme originals, just deeper for contrast. */
html.strikebg-chat-light #chat .user-mode.owner .user a,
html.strikebg-chat-light #chat .user-mode.owner .user,
html.strikebg-chat-light #chat .user-mode.owner .user *,
html.strikebg-chat-light #chat .user-mode.owner:before {
  color: #b8860b !important;
}

html.strikebg-chat-light #chat .user-mode.half-op .user a,
html.strikebg-chat-light #chat .user-mode.half-op .user,
html.strikebg-chat-light #chat .user-mode.half-op .user *,
html.strikebg-chat-light #chat .user-mode.half-op:before {
  color: #3d5adb !important;
}

html.strikebg-chat-light #chat .user-mode.voice .user a,
html.strikebg-chat-light #chat .user-mode.voice .user,
html.strikebg-chat-light #chat .user-mode.voice .user *,
html.strikebg-chat-light #chat .user-mode.voice:before {
  color: #0a9696 !important;
}

html.strikebg-chat-light #chat .user-mode.admin .user a,
html.strikebg-chat-light #chat .user-mode.admin .user,
html.strikebg-chat-light #chat .user-mode.admin .user *,
html.strikebg-chat-light #chat .user-mode.admin:before {
  color: #b8600a !important;
}

html.strikebg-chat-light #chat .user-mode.op .user a,
html.strikebg-chat-light #chat .user-mode.op .user,
html.strikebg-chat-light #chat .user-mode.op .user *,
html.strikebg-chat-light #chat .user-mode.op:before {
  color: #1f9a52 !important;
}

/* Full 32-color nick palette, deepened to hold contrast against the warm cream
   background while keeping each hue distinct — same rainbow as the dark theme. */
html.strikebg-chat-light #chat .user.color-1, html.strikebg-chat-light #chat .user.color-1 *,
html.strikebg-chat-light #chat .nick.color-1, html.strikebg-chat-light #chat .from.color-1,
html.strikebg-chat-light #chat .user-mode .user.color-1, html.strikebg-chat-light #chat .user-mode .user.color-1 * { color: #d63838 !important; }

html.strikebg-chat-light #chat .user.color-2, html.strikebg-chat-light #chat .user.color-2 *,
html.strikebg-chat-light #chat .nick.color-2, html.strikebg-chat-light #chat .from.color-2,
html.strikebg-chat-light #chat .user-mode .user.color-2, html.strikebg-chat-light #chat .user-mode .user.color-2 * { color: #a67c00 !important; }

html.strikebg-chat-light #chat .user.color-3, html.strikebg-chat-light #chat .user.color-3 *,
html.strikebg-chat-light #chat .nick.color-3, html.strikebg-chat-light #chat .from.color-3,
html.strikebg-chat-light #chat .user-mode .user.color-3, html.strikebg-chat-light #chat .user-mode .user.color-3 * { color: #178a4c !important; }

html.strikebg-chat-light #chat .user.color-4, html.strikebg-chat-light #chat .user.color-4 *,
html.strikebg-chat-light #chat .nick.color-4, html.strikebg-chat-light #chat .from.color-4,
html.strikebg-chat-light #chat .user-mode .user.color-4, html.strikebg-chat-light #chat .user-mode .user.color-4 * { color: #0a8a83 !important; }

html.strikebg-chat-light #chat .user.color-5, html.strikebg-chat-light #chat .user.color-5 *,
html.strikebg-chat-light #chat .nick.color-5, html.strikebg-chat-light #chat .from.color-5,
html.strikebg-chat-light #chat .user-mode .user.color-5, html.strikebg-chat-light #chat .user-mode .user.color-5 * { color: #1a6fb0 !important; }

html.strikebg-chat-light #chat .user.color-6, html.strikebg-chat-light #chat .user.color-6 *,
html.strikebg-chat-light #chat .nick.color-6, html.strikebg-chat-light #chat .from.color-6,
html.strikebg-chat-light #chat .user-mode .user.color-6, html.strikebg-chat-light #chat .user-mode .user.color-6 * { color: #2c56c4 !important; }

html.strikebg-chat-light #chat .user.color-7, html.strikebg-chat-light #chat .user.color-7 *,
html.strikebg-chat-light #chat .nick.color-7, html.strikebg-chat-light #chat .from.color-7,
html.strikebg-chat-light #chat .user-mode .user.color-7, html.strikebg-chat-light #chat .user-mode .user.color-7 * { color: #7d2fc9 !important; }

html.strikebg-chat-light #chat .user.color-8, html.strikebg-chat-light #chat .user.color-8 *,
html.strikebg-chat-light #chat .nick.color-8, html.strikebg-chat-light #chat .from.color-8,
html.strikebg-chat-light #chat .user-mode .user.color-8, html.strikebg-chat-light #chat .user-mode .user.color-8 * { color: #c93bab !important; }

html.strikebg-chat-light #chat .user.color-9, html.strikebg-chat-light #chat .user.color-9 *,
html.strikebg-chat-light #chat .nick.color-9, html.strikebg-chat-light #chat .from.color-9,
html.strikebg-chat-light #chat .user-mode .user.color-9, html.strikebg-chat-light #chat .user-mode .user.color-9 * { color: #b8611a !important; }

html.strikebg-chat-light #chat .user.color-10, html.strikebg-chat-light #chat .user.color-10 *,
html.strikebg-chat-light #chat .nick.color-10, html.strikebg-chat-light #chat .from.color-10,
html.strikebg-chat-light #chat .user-mode .user.color-10, html.strikebg-chat-light #chat .user-mode .user.color-10 * { color: #0b7d5f !important; }

html.strikebg-chat-light #chat .user.color-11, html.strikebg-chat-light #chat .user.color-11 *,
html.strikebg-chat-light #chat .nick.color-11, html.strikebg-chat-light #chat .from.color-11,
html.strikebg-chat-light #chat .user-mode .user.color-11, html.strikebg-chat-light #chat .user-mode .user.color-11 * { color: #0a8f8f !important; }

html.strikebg-chat-light #chat .user.color-12, html.strikebg-chat-light #chat .user.color-12 *,
html.strikebg-chat-light #chat .nick.color-12, html.strikebg-chat-light #chat .from.color-12,
html.strikebg-chat-light #chat .user-mode .user.color-12, html.strikebg-chat-light #chat .user-mode .user.color-12 * { color: #1f5fc4 !important; }

html.strikebg-chat-light #chat .user.color-13, html.strikebg-chat-light #chat .user.color-13 *,
html.strikebg-chat-light #chat .nick.color-13, html.strikebg-chat-light #chat .from.color-13,
html.strikebg-chat-light #chat .user-mode .user.color-13, html.strikebg-chat-light #chat .user-mode .user.color-13 * { color: #5f27cd !important; }

html.strikebg-chat-light #chat .user.color-15, html.strikebg-chat-light #chat .user.color-15 *,
html.strikebg-chat-light #chat .nick.color-15, html.strikebg-chat-light #chat .from.color-15,
html.strikebg-chat-light #chat .user-mode .user.color-15, html.strikebg-chat-light #chat .user-mode .user.color-15 * { color: #c22a38 !important; }

html.strikebg-chat-light #chat .user.color-16, html.strikebg-chat-light #chat .user.color-16 *,
html.strikebg-chat-light #chat .nick.color-16, html.strikebg-chat-light #chat .from.color-16,
html.strikebg-chat-light #chat .user-mode .user.color-16, html.strikebg-chat-light #chat .user-mode .user.color-16 * { color: #1f9a52 !important; }

html.strikebg-chat-light #chat .user.color-17, html.strikebg-chat-light #chat .user.color-17 *,
html.strikebg-chat-light #chat .nick.color-17, html.strikebg-chat-light #chat .from.color-17,
html.strikebg-chat-light #chat .user-mode .user.color-17, html.strikebg-chat-light #chat .user-mode .user.color-17 * { color: #b36a00 !important; }

html.strikebg-chat-light #chat .user.color-19, html.strikebg-chat-light #chat .user.color-19 *,
html.strikebg-chat-light #chat .nick.color-19, html.strikebg-chat-light #chat .from.color-19,
html.strikebg-chat-light #chat .user-mode .user.color-19, html.strikebg-chat-light #chat .user-mode .user.color-19 * { color: #2f5fc0 !important; }

html.strikebg-chat-light #chat .user.color-20, html.strikebg-chat-light #chat .user.color-20 *,
html.strikebg-chat-light #chat .nick.color-20, html.strikebg-chat-light #chat .from.color-20,
html.strikebg-chat-light #chat .user-mode .user.color-20, html.strikebg-chat-light #chat .user-mode .user.color-20 * { color: #3230c4 !important; }

html.strikebg-chat-light #chat .user.color-21, html.strikebg-chat-light #chat .user.color-21 *,
html.strikebg-chat-light #chat .nick.color-21, html.strikebg-chat-light #chat .from.color-21,
html.strikebg-chat-light #chat .user-mode .user.color-21, html.strikebg-chat-light #chat .user-mode .user.color-21 * { color: #c93c53 !important; }

html.strikebg-chat-light #chat .user.color-24, html.strikebg-chat-light #chat .user.color-24 *,
html.strikebg-chat-light #chat .nick.color-24, html.strikebg-chat-light #chat .from.color-24,
html.strikebg-chat-light #chat .user-mode .user.color-24, html.strikebg-chat-light #chat .user-mode .user.color-24 * { color: #0c66c2 !important; }

html.strikebg-chat-light #chat .user.color-25, html.strikebg-chat-light #chat .user.color-25 *,
html.strikebg-chat-light #chat .nick.color-25, html.strikebg-chat-light #chat .from.color-25,
html.strikebg-chat-light #chat .user-mode .user.color-25, html.strikebg-chat-light #chat .user-mode .user.color-25 * { color: #8f1fa8 !important; }

html.strikebg-chat-light #chat .user.color-28, html.strikebg-chat-light #chat .user.color-28 *,
html.strikebg-chat-light #chat .nick.color-28, html.strikebg-chat-light #chat .from.color-28,
html.strikebg-chat-light #chat .user-mode .user.color-28, html.strikebg-chat-light #chat .user-mode .user.color-28 * { color: #4d8034 !important; }

html.strikebg-chat-light #chat .user.color-29, html.strikebg-chat-light #chat .user.color-29 *,
html.strikebg-chat-light #chat .nick.color-29, html.strikebg-chat-light #chat .from.color-29,
html.strikebg-chat-light #chat .user-mode .user.color-29, html.strikebg-chat-light #chat .user-mode .user.color-29 * { color: #167d88 !important; }

html.strikebg-chat-light #chat .user.color-30, html.strikebg-chat-light #chat .user.color-30 *,
html.strikebg-chat-light #chat .nick.color-30, html.strikebg-chat-light #chat .from.color-30,
html.strikebg-chat-light #chat .user-mode .user.color-30, html.strikebg-chat-light #chat .user-mode .user.color-30 * { color: #4143b8 !important; }

html.strikebg-chat-light #chat .user.color-14, html.strikebg-chat-light #chat .user.color-14 *,
html.strikebg-chat-light #chat .nick.color-14, html.strikebg-chat-light #chat .from.color-14,
html.strikebg-chat-light #chat .user-mode .user.color-14, html.strikebg-chat-light #chat .user-mode .user.color-14 * { color: #5a7ba0 !important; }

html.strikebg-chat-light #chat .user.color-18, html.strikebg-chat-light #chat .user.color-18 *,
html.strikebg-chat-light #chat .nick.color-18, html.strikebg-chat-light #chat .from.color-18,
html.strikebg-chat-light #chat .user-mode .user.color-18, html.strikebg-chat-light #chat .user-mode .user.color-18 * { color: #2e9e57 !important; }

html.strikebg-chat-light #chat .user.color-22, html.strikebg-chat-light #chat .user.color-22 *,
html.strikebg-chat-light #chat .nick.color-22, html.strikebg-chat-light #chat .from.color-22,
html.strikebg-chat-light #chat .user-mode .user.color-22, html.strikebg-chat-light #chat .user-mode .user.color-22 * { color: #a3852a !important; }

html.strikebg-chat-light #chat .user.color-23, html.strikebg-chat-light #chat .user.color-23 *,
html.strikebg-chat-light #chat .nick.color-23, html.strikebg-chat-light #chat .from.color-23,
html.strikebg-chat-light #chat .user-mode .user.color-23, html.strikebg-chat-light #chat .user-mode .user.color-23 * { color: #0a9080 !important; }

html.strikebg-chat-light #chat .user.color-26, html.strikebg-chat-light #chat .user.color-26 *,
html.strikebg-chat-light #chat .nick.color-26, html.strikebg-chat-light #chat .from.color-26,
html.strikebg-chat-light #chat .user-mode .user.color-26, html.strikebg-chat-light #chat .user-mode .user.color-26 * { color: #c23a3a !important; }

html.strikebg-chat-light #chat .user.color-27, html.strikebg-chat-light #chat .user.color-27 *,
html.strikebg-chat-light #chat .nick.color-27, html.strikebg-chat-light #chat .from.color-27,
html.strikebg-chat-light #chat .user-mode .user.color-27, html.strikebg-chat-light #chat .user-mode .user.color-27 * { color: #6f8a1e !important; }

html.strikebg-chat-light #chat .user.color-31, html.strikebg-chat-light #chat .user.color-31 *,
html.strikebg-chat-light #chat .nick.color-31, html.strikebg-chat-light #chat .from.color-31,
html.strikebg-chat-light #chat .user-mode .user.color-31, html.strikebg-chat-light #chat .user-mode .user.color-31 * { color: #1c8f96 !important; }

html.strikebg-chat-light #chat .user.color-32, html.strikebg-chat-light #chat .user.color-32 *,
html.strikebg-chat-light #chat .nick.color-32, html.strikebg-chat-light #chat .from.color-32,
html.strikebg-chat-light #chat .user-mode .user.color-32, html.strikebg-chat-light #chat .user-mode .user.color-32 * { color: #c07a3e !important; }

html.strikebg-chat-light #strikebg-emoji-button {
  background: rgba(247, 226, 196, .95) !important;
  border-color: rgba(230, 90, 40, .38) !important;
  color: #241a10 !important;
}

html.strikebg-chat-light #strikebg-emoji-panel {
  background: rgba(247, 226, 196, .98) !important;
  border-color: rgba(230, 90, 40, .38) !important;
}

html.strikebg-chat-light #strikebg-emoji-panel button {
  background: rgba(230, 90, 40, .06) !important;
  border-color: rgba(230, 90, 40, .14) !important;
  color: #241a10 !important;
}

html.strikebg-chat-light #strikebg-emoji-panel button:hover {
  background: rgba(255, 77, 46, .16) !important;
  border-color: rgba(255, 77, 46, .4) !important;
}

/* Logo stays identical in both themes — no light/dark variant, matches the site's own brand mark. */

/* The Lounge's own "strikebg" theme (themes/strikebg.css) hardcodes dark colors with
   !important at higher specificity than the generic overrides above — these selectors
   match that file's exact rules so the light overrides actually win the cascade. */
html.strikebg-chat-light #sidebar,
html.strikebg-chat-light #chat .chat-view .header,
html.strikebg-chat-light #chat .chat-view .footer,
html.strikebg-chat-light .nicklist {
  background: var(--sb-panel) !important;
  border-color: var(--sb-line) !important;
}

html.strikebg-chat-light #chat .chat-view .footer .input {
  background: rgba(247, 226, 196, .95) !important;
  border: 1px solid rgba(230, 90, 40, .38) !important;
  color: var(--sb-text) !important;
}

html.strikebg-chat-light .channel-list-item {
  color: var(--sb-muted) !important;
}

html.strikebg-chat-light .channel-list-item:hover,
html.strikebg-chat-light .channel-list-item.active {
  background: linear-gradient(90deg, rgba(255,77,46,.16), rgba(255,77,46,.05)) !important;
  color: #241a10 !important;
  border-left: 2px solid #ff4d2e !important;
}

html.strikebg-chat-light .msg .from {
  color: #9a7000 !important;
}

html.strikebg-chat-light .msg .time {
  color: #8a6a45 !important;
}

/* Hide password toggle labels */
label:has(input[name="usePassword"]),
label:has(input[name="password-toggle"]) { display: none !important; }

.connect-row:has(input[name="username"]),
.connect-row:has(input[name="realname"]),
.connect-row:has(input[name="leaveMessage"]) {
  display: none !important;
}

/* ── CONNECT SCREEN ── */
.strike-connect-title {
  margin: 28px auto 8px !important;
  text-align: center !important;
  text-transform: uppercase;
}
.strike-connect-title span { font-weight: 800; }
.strike-connect-title b { margin-left: .3em; color: var(--sb-red); font-weight: 900; }

.strike-connect-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--sb-muted);
  font-size: 12px;
  text-transform: uppercase;
}
.strike-connect-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--sb-red); }

.strikebg-connect .strike-connect-title {
  display: block !important;
  width: 100% !important;
  margin: 38px auto 12px !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: var(--font-head), Baloo 2, Impact, sans-serif !important;
  font-size: clamp(2.6rem, 7vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  color: transparent !important;
  text-shadow: 0 18px 48px rgba(0,0,0,.48) !important;
  filter: none !important;
}

.strikebg-connect .strike-connect-title::before {
  content: "" !important;
  display: block !important;
  width: min(420px, 44vw) !important;
  height: 1px !important;
  margin: 0 auto 18px !important;
  background: linear-gradient(90deg, transparent, #ff4d2e, transparent) !important;
  box-shadow: 0 0 18px rgba(255,77,46,.7) !important;
  opacity: .8 !important;
}

.strikebg-connect .strike-connect-title::after {
  content: "" !important;
  display: block !important;
  width: 82px !important;
  height: 8px !important;
  margin: 14px auto 0 !important;
  background:
    radial-gradient(circle, #ff4d2e 0 18%, transparent 20%),
    radial-gradient(circle, #8b0000 0 18%, transparent 20%) !important;
  background-size: 32px 8px !important;
  background-position: 0 0, 18px 0 !important;
  background-repeat: no-repeat !important;
  opacity: .85 !important;
}

.strikebg-connect .strike-connect-meta {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  color: #ff4d2e !important;
  text-shadow: 0 0 12px rgba(255,77,46,.75) !important;
  letter-spacing: .34em !important;
}

/* ── SITE ACTION-LOGO (ported 1:1 from strikebg.com includes/action-logo.php + site-shell.css) ── */
.strike-connect-title .sb-action-logo {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: baseline;
  padding: .1em .12em .17em .09em;
  color: transparent;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(2.65rem, 6.8vw, 5.45rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .9;
  text-transform: uppercase;
  filter: none;
  animation: none;
}

.strike-connect-title .sb-action-speed,
.strike-connect-title .sb-action-sparks {
  display: none;
}

.strike-connect-title .sb-action-main,
.strike-connect-title .sb-action-accent {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.strike-connect-title .sb-action-main {
  background-image: linear-gradient(105deg, #fff 0%, #a9adb0 19%, #fff 37%, #d5d7d6 55%, #8d9194 76%, #fff 100%);
  background-size: 230% 100%;
  -webkit-text-stroke: 1px rgba(255,255,255,.13);
  text-shadow: 2px 2px 0 rgba(41,44,45,.82), 4px 4px 0 rgba(14,16,17,.82);
  /* Site disables this animation site-wide (NVIDIA/Chromium compositor workaround) — matched here for parity. */
  animation: none;
}

.strike-connect-title .sb-action-accent {
  margin-left: .075em;
  background-image: linear-gradient(180deg, #ffc064 0%, #ff8a32 42%, #f05a1c 74%, #ff9b3f 100%);
  -webkit-text-stroke: 1px rgba(255,187,102,.3);
  text-shadow: 2px 2px 0 #8a2307, 4px 4px 0 rgba(56,12,3,.88);
  filter: drop-shadow(0 0 17px rgba(255,111,35,.34));
  animation: none;
}

.strike-connect-title .sb-action-section {
  display: block;
  width: max-content;
  max-width: min(94vw, 760px);
  margin: 5px auto 0;
  padding: 7px 18px 6px;
  border: 1px solid rgba(255,114,53,.32);
  border-right-color: transparent;
  border-left-color: transparent;
  color: #ff9a52 !important;
  -webkit-text-fill-color: #ff9a52 !important;
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(.62rem, 1.45vw, .9rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(255,91,36,.25);
}

/* Animated blood drips under the logo — the one effect the site keeps enabled
   (speed/sparks/slice stay off there too, per its Chromium/NVIDIA workaround). */
.strike-connect-title .sb-action-drips {
  position: absolute;
  z-index: 3;
  top: 78%;
  right: 2%;
  left: 2%;
  height: 55px;
  overflow: visible;
  pointer-events: none;
  display: block;
}

.strike-connect-title .sb-action-drips i {
  position: absolute;
  top: 0;
  width: 5px;
  height: 24px;
  border-radius: 2px 2px 70% 70%;
  background: linear-gradient(90deg, #4d0008, #b3001b 48%, #61000c);
  box-shadow: inset 1px 0 1px rgba(255,95,95,.25), 0 0 6px rgba(116,0,14,.42);
  transform-origin: 50% 0;
  animation: sbActionBlood 2.7s ease-in-out infinite;
}

.strike-connect-title .sb-action-drips i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 9px;
  border-radius: 55% 45% 60% 40%;
  background: #8f0013;
  transform: translateX(-50%) rotate(45deg);
  animation: sbActionDrop 2.7s ease-in infinite;
}

.strike-connect-title .sb-action-drips i:nth-child(1) { left: 7%;  height: 15px; animation-delay: -.3s; }
.strike-connect-title .sb-action-drips i:nth-child(2) { left: 31%; height: 30px; animation-delay: -1.6s; }
.strike-connect-title .sb-action-drips i:nth-child(3) { left: 54%; height: 20px; animation-delay: -.9s; }
.strike-connect-title .sb-action-drips i:nth-child(4) { left: 76%; height: 34px; animation-delay: -2.1s; }
.strike-connect-title .sb-action-drips i:nth-child(5) { left: 94%; height: 18px; animation-delay: -1.2s; }
.strike-connect-title .sb-action-drips i:nth-child(1)::after { animation-delay: -.3s; }
.strike-connect-title .sb-action-drips i:nth-child(2)::after { animation-delay: -1.6s; }
.strike-connect-title .sb-action-drips i:nth-child(3)::after { animation-delay: -.9s; }
.strike-connect-title .sb-action-drips i:nth-child(4)::after { animation-delay: -2.1s; }
.strike-connect-title .sb-action-drips i:nth-child(5)::after { animation-delay: -1.2s; }

@keyframes sbActionBlood {
  0%, 100% { transform: scaleY(.78); filter: brightness(.76); }
  52% { transform: scaleY(1.14); filter: brightness(1); }
}

@keyframes sbActionDrop {
  0%, 42% { opacity: 1; transform: translate(-50%, 0) rotate(45deg) scale(.76); }
  72% { opacity: 1; transform: translate(-50%, 12px) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, 35px) rotate(45deg) scale(.45); }
}

@media (prefers-reduced-motion: reduce) {
  .strike-connect-title .sb-action-drips i,
  .strike-connect-title .sb-action-drips i::after {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .strike-connect-title .sb-action-logo {
    max-width: 96vw;
    font-size: clamp(2.15rem, 11.8vw, 3.45rem);
  }
  .strike-connect-title .sb-action-section {
    max-width: 92vw;
    padding-inline: 10px;
    letter-spacing: .11em;
  }
}

/* ── NAVBAR (ported 1:1 from strikebg.com main.css + site-shell.css) ── */
.strikebg-standalone .strikebg-chat-site-header,
.strikebg-embedded .strikebg-chat-site-header {
  display: block !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 8000 !important;
  height: var(--nav-h) !important;
  font-family: var(--font-body) !important;
}

.strikebg-standalone .strikebg-chat-site-header .navbar,
.strikebg-embedded .strikebg-chat-site-header .navbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  height: var(--nav-h) !important;
  z-index: 8000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(17, 19, 18, 0.985), rgba(7, 9, 9, 0.985)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 119, 57, 0.34) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.48),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.strikebg-standalone .strikebg-chat-site-header .navbar::before,
.strikebg-embedded .strikebg-chat-site-header .navbar::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 3%, #ff542f 24%, #ff9a4a 50%, #ff542f 76%, transparent 97%) !important;
  box-shadow: 0 0 18px rgba(255, 92, 44, 0.45) !important;
  opacity: 1 !important;
}

.strikebg-standalone .strikebg-chat-site-header .navbar-inner,
.strikebg-embedded .strikebg-chat-site-header .navbar-inner {
  width: 100% !important;
  max-width: 1500px !important;
  height: 100% !important;
  padding: 0 clamp(14px, 2.2vw, 34px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 1.4vw, 22px) !important;
  margin: 0 auto !important;
  position: relative !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo,
.strikebg-embedded .strikebg-chat-site-header .nav-logo {
  font-family: var(--font-head) !important;
  gap: 10px !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  filter: none !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-brand-mark,
.strikebg-embedded .strikebg-chat-site-header .nav-brand-mark {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px solid rgba(255, 132, 72, 0.7) !important;
  border-radius: 2px 12px 2px 12px !important;
  background: linear-gradient(145deg, rgba(255, 91, 39, 0.34), rgba(39, 14, 7, 0.72)) !important;
  box-shadow:
    inset 0 0 20px rgba(255, 98, 45, 0.12),
    0 0 24px rgba(255, 85, 38, 0.12) !important;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%) !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo .nav-brand-text,
.strikebg-embedded .strikebg-chat-site-header .nav-logo .nav-brand-text {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  font-family: "Baloo 2", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.105em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7) !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo .nav-brand-text b,
.strikebg-embedded .strikebg-chat-site-header .nav-logo .nav-brand-text b {
  color: #28d4df !important;
  -webkit-text-fill-color: #28d4df !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-actions,
.strikebg-embedded .strikebg-chat-site-header .nav-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links,
.strikebg-embedded .strikebg-chat-site-header .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links li,
.strikebg-embedded .strikebg-chat-site-header .nav-links li {
  flex: 0 0 auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a,
.strikebg-embedded .strikebg-chat-site-header .nav-links a {
  position: relative !important;
  display: inline-flex !important;
  min-height: 40px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 2px 9px 2px 9px !important;
  background: linear-gradient(180deg, rgba(30, 34, 34, 0.96), rgba(9, 11, 12, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 5px 15px rgba(0, 0, 0, 0.24) !important;
  color: #e8e9e6 !important;
  -webkit-text-fill-color: #e8e9e6 !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links .nav-icon,
.strikebg-embedded .strikebg-chat-site-header .nav-links .nav-icon {
  color: #ff7441 !important;
  -webkit-text-fill-color: #ff7441 !important;
  font-family: "Share Tech Mono", monospace !important;
  font-size: 0.82rem !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a::before,
.strikebg-embedded .strikebg-chat-site-header .nav-links a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 142, 80, 0.19) 48%, transparent 76%) !important;
  transform: translateX(-120%) !important;
  transition: transform 360ms ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a::after,
.strikebg-embedded .strikebg-chat-site-header .nav-links a::after {
  content: '' !important;
  position: absolute !important;
  right: 9px !important;
  bottom: 4px !important;
  left: 9px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff4c2b, #ff9b4a) !important;
  box-shadow: 0 0 11px rgba(255, 87, 38, 0.72) !important;
  opacity: 0 !important;
  transform: scaleX(0.25) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a:hover,
.strikebg-embedded .strikebg-chat-site-header .nav-links a:hover,
.strikebg-standalone .strikebg-chat-site-header .nav-links a.active,
.strikebg-embedded .strikebg-chat-site-header .nav-links a.active {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 126, 68, 0.76) !important;
  background: linear-gradient(180deg, rgba(91, 37, 19, 0.96), rgba(28, 12, 9, 0.99)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow:
    inset 0 0 22px rgba(255, 92, 42, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 99, 45, 0.08) !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a:hover::before,
.strikebg-embedded .strikebg-chat-site-header .nav-links a:hover::before {
  transform: translateX(120%) !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a:hover::after,
.strikebg-embedded .strikebg-chat-site-header .nav-links a:hover::after,
.strikebg-standalone .strikebg-chat-site-header .nav-links a.active::after,
.strikebg-embedded .strikebg-chat-site-header .nav-links a.active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-toggle,
.strikebg-embedded .strikebg-chat-site-header .nav-toggle {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  cursor: pointer !important;
  padding: 10px !important;
  background: rgba(232, 68, 26, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 18px rgba(232, 68, 26, 0.08) !important;
  z-index: 10 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-toggle span,
.strikebg-embedded .strikebg-chat-site-header .nav-toggle span {
  display: block !important;
  width: 22px; height: 2px;
  background: var(--text) !important;
  border-radius: 2px !important;
  transition: transform 0.3s, opacity 0.3s, background 0.2s !important;
  margin: 0 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-toggle.open span:nth-child(1),
.strikebg-embedded .strikebg-chat-site-header .nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
  background: var(--accent) !important;
}
.strikebg-standalone .strikebg-chat-site-header .nav-toggle.open span:nth-child(2) { opacity: 0 !important; }
.strikebg-embedded .strikebg-chat-site-header .nav-toggle.open span:nth-child(2) { opacity: 0 !important; }
.strikebg-standalone .strikebg-chat-site-header .nav-toggle.open span:nth-child(3),
.strikebg-embedded .strikebg-chat-site-header .nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
  background: var(--accent) !important;
}

/* Desktop: logo pinned left, LIVE counter pinned right, links centered */
@media (min-width: 1421px) {
  .strikebg-standalone .strikebg-chat-site-header .navbar-inner,
  .strikebg-embedded .strikebg-chat-site-header .navbar-inner {
    justify-content: center !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-logo,
  .strikebg-embedded .strikebg-chat-site-header .nav-logo {
    position: absolute !important;
    left: clamp(14px, 2.2vw, 34px) !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-actions,
  .strikebg-embedded .strikebg-chat-site-header .nav-actions {
    position: absolute !important;
    right: clamp(14px, 2.2vw, 34px) !important;
    margin: 0 !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-links,
  .strikebg-embedded .strikebg-chat-site-header .nav-links {
    width: max-content !important;
    max-width: calc(100% - 430px) !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
}

/* Mobile/tablet: hamburger + full-width dropdown grid */
@media (max-width: 1420px) {
  .strikebg-standalone .strikebg-chat-site-header .nav-toggle { display: flex !important; }
  .strikebg-embedded .strikebg-chat-site-header .nav-toggle { display: flex !important; }

  .strikebg-standalone .strikebg-chat-site-header .nav-links,
  .strikebg-embedded .strikebg-chat-site-header .nav-links {
    position: fixed !important;
    top: var(--nav-h) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1199 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 14px 18px 22px !important;
    border-bottom: 1px solid rgba(255, 117, 55, 0.28) !important;
    background: rgba(8, 10, 10, 0.985) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-125%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 230ms ease, opacity 180ms ease !important;
  }

  .strikebg-standalone .strikebg-chat-site-header .nav-links.open,
  .strikebg-embedded .strikebg-chat-site-header .nav-links.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .strikebg-standalone .strikebg-chat-site-header .nav-links a,
  .strikebg-embedded .strikebg-chat-site-header .nav-links a {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 14px !important;
  }

  .strikebg-standalone .strikebg-chat-site-header .nav-actions { margin-right: 8px !important; }
  .strikebg-embedded .strikebg-chat-site-header .nav-actions { margin-right: 8px !important; }
  .strikebg-standalone .strikebg-chat-site-header .nav-counter { display: none !important; }
  .strikebg-embedded .strikebg-chat-site-header .nav-counter { display: none !important; }
}

@media (max-width: 700px) {
  .strikebg-standalone .strikebg-chat-site-header .navbar,
  .strikebg-embedded .strikebg-chat-site-header .navbar,
  .strikebg-standalone .strikebg-chat-site-header { height: 68px !important; }
  .strikebg-embedded .strikebg-chat-site-header { height: 68px !important; }
  .strikebg-standalone .strikebg-chat-site-header .nav-brand-mark,
  .strikebg-embedded .strikebg-chat-site-header .nav-brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-logo .nav-brand-text,
  .strikebg-embedded .strikebg-chat-site-header .nav-logo .nav-brand-text {
    font-size: 0.82rem !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-links { top: 68px !important; grid-template-columns: 1fr 1fr !important; padding: 12px !important; }
  .strikebg-embedded .strikebg-chat-site-header .nav-links { top: 68px !important; grid-template-columns: 1fr 1fr !important; padding: 12px !important; }
}

/* Theme toggle button (auto/light/dark) */
.strikebg-standalone .strikebg-chat-site-header .strikebg-theme-toggle,
.strikebg-embedded .strikebg-chat-site-header .strikebg-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 2px 9px 2px 9px !important;
  background: linear-gradient(180deg, rgba(30, 34, 34, 0.96), rgba(9, 11, 12, 0.98)) !important;
  color: #ffcf8a !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .strikebg-theme-toggle:hover,
.strikebg-embedded .strikebg-chat-site-header .strikebg-theme-toggle:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 126, 68, 0.76) !important;
}

@media (max-width: 700px) {
  .strikebg-standalone .strikebg-chat-site-header .strikebg-theme-toggle,
  .strikebg-embedded .strikebg-chat-site-header .strikebg-theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }
}

/* Disconnect button (red, disconnect from the IRC network without leaving the page) */
.strikebg-standalone .strikebg-chat-site-header .strikebg-disconnect-btn,
.strikebg-embedded .strikebg-chat-site-header .strikebg-disconnect-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 82, 82, 0.35) !important;
  border-radius: 2px 9px 2px 9px !important;
  background: linear-gradient(180deg, rgba(60, 16, 16, 0.9), rgba(20, 6, 6, 0.96)) !important;
  color: #ff5252 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .strikebg-disconnect-btn:hover,
.strikebg-embedded .strikebg-chat-site-header .strikebg-disconnect-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 82, 82, 0.9) !important;
}

@media (max-width: 700px) {
  .strikebg-standalone .strikebg-chat-site-header .strikebg-disconnect-btn,
  .strikebg-embedded .strikebg-chat-site-header .strikebg-disconnect-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 14px !important;
  }
}

/* Floating theme toggle for the embedded (iframe on strikebg.com) chat — no navbar there. */
.strikebg-embedded .strikebg-theme-toggle-embedded {
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 30000 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px 9px 2px 9px !important;
  background: linear-gradient(180deg, rgba(30, 34, 34, 0.92), rgba(9, 11, 12, 0.94)) !important;
  color: #ffcf8a !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  transition: transform 160ms ease, border-color 160ms ease !important;
}

.strikebg-embedded .strikebg-theme-toggle-embedded:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 126, 68, 0.76) !important;
}

/* LIVE player counter pill */
.strikebg-standalone .strikebg-chat-site-header .nav-counter,
.strikebg-embedded .strikebg-chat-site-header .nav-counter {
  font-family: var(--font-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  color: var(--text-dim) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  padding: 8px 12px !important;
  min-height: 34px !important;
  border: 1px solid rgba(73, 231, 145, 0.22) !important;
  border-radius: 2px 9px 2px 9px !important;
  position: relative !important;
  overflow: hidden !important;
  background: rgba(8, 15, 12, 0.88) !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)) !important;
  box-shadow: none !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-counter::before,
.strikebg-embedded .strikebg-chat-site-header .nav-counter::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, transparent 0%, rgba(232,68,26,.12) 48%, transparent 100%) !important;
  transform: translateX(-70%) !important;
  animation: counterSweep 4.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

@keyframes counterSweep {
  0%, 65% { transform: translateX(-70%); opacity: 0; }
  72% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.strikebg-standalone .strikebg-chat-site-header .nav-counter-label,
.strikebg-embedded .strikebg-chat-site-header .nav-counter-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(232, 68, 26, 0.14) !important;
  color: #ff9f8e !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.2em !important;
  line-height: 1 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-counter #counter-dot,
.strikebg-embedded .strikebg-chat-site-header .nav-counter #counter-dot {
  box-shadow: 0 0 12px rgba(34, 212, 90, 0.7) !important;
}

/* Nav-link hover glitch (matches strikebg.com) */
@keyframes sbNavGlitch {
  0%, 100% { text-shadow: none; }
  35% { text-shadow: -2px 0 #ff4d2e, 2px 0 #36e5e5; }
  70% { text-shadow: 2px 0 #ff4d2e, -2px 0 #36e5e5; }
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a.nav-glitch:hover,
.strikebg-embedded .strikebg-chat-site-header .nav-links a.nav-glitch:hover {
  animation: sbNavGlitch 150ms steps(2, end) 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .strikebg-standalone .strikebg-chat-site-header .nav-links a,
  .strikebg-embedded .strikebg-chat-site-header .nav-links a,
  .strikebg-standalone .strikebg-chat-site-header .nav-links a::before,
  .strikebg-embedded .strikebg-chat-site-header .nav-links a::before,
  .strikebg-standalone .strikebg-chat-site-header .nav-links a::after,
  .strikebg-embedded .strikebg-chat-site-header .nav-links a::after {
    transition: none !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-links a.nav-glitch:hover,
  .strikebg-embedded .strikebg-chat-site-header .nav-links a.nav-glitch:hover,
  .strikebg-standalone .strikebg-chat-site-header .nav-counter::before,
  .strikebg-embedded .strikebg-chat-site-header .nav-counter::before {
    animation: none !important;
  }
}

/* ── KEYFRAMES ── */
@keyframes navlineShift {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.8); }
}
@keyframes logoLinePulse {
  0%,100% { transform: scaleX(.35); opacity: .35; }
  50%     { transform: scaleX(1); opacity: .95; }
}
@keyframes logoPulse {
  0%,100% { text-shadow: 0 0 10px rgba(232,68,26,0.5); }
  50%     { text-shadow: 0 0 25px rgba(232,68,26,1), 0 0 50px rgba(232,68,26,0.5); }
}
@keyframes navIconKick {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  45%  { transform: translateY(-3px) scale(1.22) rotate(-6deg); }
  100% { transform: translateY(0) scale(1.08) rotate(0); }
}
@keyframes activeNavGlow {
  0%,100% { box-shadow: inset 0 0 12px rgba(232,68,26,.18); }
  50%     { box-shadow: inset 0 0 18px rgba(232,68,26,.34), 0 0 18px rgba(232,68,26,.12); }
}

/* ── VIEWPORT LOCK ── */
html.strikebg-standalone,
html.strikebg-standalone body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

html.strikebg-standalone #app,
html.strikebg-standalone #viewport {
  position: fixed !important;
  top: var(--nav-h, 68px) !important;
  right: 0; bottom: 0; left: 0;
  width: 100vw !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.strikebg-standalone #sidebar,
html.strikebg-standalone #windows {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

html.strikebg-standalone #windows { overflow: hidden !important; }

html.strikebg-standalone #windows .window,
html.strikebg-standalone .window,
html.strikebg-standalone .chat {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.strikebg-standalone .chat {
  display: flex !important;
  flex-direction: column !important;
}

html.strikebg-standalone .chat .header,
html.strikebg-standalone .chat-header,
html.strikebg-standalone .channel-header { flex: 0 0 auto !important; }

html.strikebg-standalone .chat-content,
html.strikebg-standalone #chat,
html.strikebg-standalone .messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ── COMPOSE BAR (#form) — fixed, always visible ── */
html.strikebg-standalone {
  --sb-sidebar-w: 220px;
  --sb-userlist-w: 180px;
  --sb-compose-h: 64px;
}

html.strikebg-standalone #windows,
html.strikebg-standalone .window,
html.strikebg-standalone .chat {
  padding-bottom: var(--sb-compose-h) !important;
}

html.strikebg-standalone #chat,
html.strikebg-standalone .chat-content,
html.strikebg-standalone .messages {
  padding-bottom: calc(var(--sb-compose-h) + 12px) !important;
}

html.strikebg-standalone #form {
  position: fixed !important;
  left: var(--sb-sidebar-w) !important;
  right: var(--sb-userlist-w) !important;
  bottom: 0 !important;
  height: var(--sb-compose-h) !important;
  min-height: var(--sb-compose-h) !important;
  max-height: var(--sb-compose-h) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  z-index: 12000 !important;
  margin: 0 !important;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(7, 8, 12, .99) !important;
  border-top: 1px solid rgba(255, 77, 46, .45) !important;
  box-shadow: 0 -16px 38px rgba(0,0,0,.45) !important;
}

html.strikebg-standalone #form form,
html.strikebg-standalone #form .input,
html.strikebg-standalone #form .input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.strikebg-standalone #input,
html.strikebg-standalone #form textarea,
html.strikebg-standalone #form input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  line-height: 20px !important;
}

html.strikebg-standalone #form button,
html.strikebg-standalone #form .btn,
html.strikebg-standalone #form [role="button"],
html.strikebg-standalone #form [class*="emoji"],
html.strikebg-standalone #form [id*="emoji"],
html.strikebg-standalone #form [aria-label*="emoji" i],
html.strikebg-standalone #form [title*="emoji" i] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 38px !important;
  width: 38px; height: 38px;
  min-width: 38px; min-height: 38px;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* ── EMOJI BUTTON ── */
html.strikebg-standalone #strikebg-emoji-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 38px !important;
  width: 38px; height: 38px;
  min-width: 38px; min-height: 38px;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,77,46,.55) !important;
  border-radius: 4px !important;
  background: rgba(13,16,22,.98) !important;
  color: #f5f6fa !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html.strikebg-standalone #strikebg-emoji-button:hover {
  border-color: rgba(255,45,72,.9) !important;
  background: rgba(255,77,46,.18) !important;
}

#strikebg-emoji-panel {
  position: fixed !important;
  z-index: 13000 !important;
  width: 268px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  padding: 10px !important;
  border: 1px solid rgba(255,77,46,.6) !important;
  border-radius: 6px !important;
  background: rgba(7,8,12,.98) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
}

#strikebg-emoji-panel[hidden] { display: none !important; }

#strikebg-emoji-panel button {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#strikebg-emoji-panel button:hover {
  border-color: rgba(255,77,46,.8) !important;
  background: rgba(255,77,46,.22) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  html, body { width: 100% !important; height: 100% !important; overflow: hidden !important; }

  body {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,77,46,.12), transparent 34%),
      radial-gradient(circle at 82% 70%, rgba(40,212,223,.08), transparent 36%),
      linear-gradient(145deg, #05070b, #090d14 55%, #05070b) !important;
  }

  .message, .msg, .content, .text, .topic, .channel-topic {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .strike-connect-meta { display: none !important; }
  .strike-connect-title { margin-top: 16px !important; font-size: 30px !important; }

  .strikebg-connect .strike-connect-title {
    margin-top: 24px !important;
    font-size: clamp(2.4rem, 11vw, 3.8rem) !important;
    letter-spacing: .045em !important;
  }
  .strikebg-connect .strike-connect-title::before {
    width: min(260px, 62vw) !important;
    margin-bottom: 14px !important;
  }

  html.strikebg-standalone #form {
    min-height: 58px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 900px) {
  html.strikebg-standalone {
    --sb-sidebar-w: 0px;
    --sb-userlist-w: 0px;
    --sb-compose-h: 68px;
  }
  html.strikebg-standalone #form {
    left: 0 !important;
    right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  html.strikebg-standalone { --sb-userlist-w: 0px; }
}

/* ── NICK LIST CATEGORY HEADERS (BG) ── */
#chat .user-mode.owner:before    { content: "Собственици" !important; }
#chat .user-mode.admin:before    { content: "Администратори" !important; }
#chat .user-mode.op:before       { content: "Оператори" !important; }
#chat .user-mode.half-op:before  { content: "Полуоператори" !important; }
#chat .user-mode.voice:before    { content: "С глас" !important; }
#chat .user-mode.normal:before   { content: "Потребители" !important; }
#chat .user-mode-search:before   { content: "Резултати" !important; }

/* ── NICK LIST COLORS ── */
/* Owner ~ — злато */
#chat .user-mode.owner .user a,
#chat .user-mode.owner .user { color: #ffd700 !important; }
#chat .user-mode.owner .user:hover { color: #ffe84d !important; background: rgba(255,215,0,.08) !important; }

/* Admin & — оранжево */
#chat .user-mode.admin .user a,
#chat .user-mode.admin .user { color: #ff8c00 !important; }
#chat .user-mode.admin .user:hover { color: #ffaa33 !important; background: rgba(255,140,0,.08) !important; }

/* Operator @ — зелено */
#chat .user-mode.op .user a,
#chat .user-mode.op .user { color: #3ddc84 !important; }
#chat .user-mode.op .user:hover { color: #5fffa0 !important; background: rgba(61,220,132,.08) !important; }

/* Half-op % — синьо-лилаво */
#chat .user-mode.half-op .user a,
#chat .user-mode.half-op .user { color: #7b9fff !important; }
#chat .user-mode.half-op .user:hover { color: #a0b8ff !important; background: rgba(123,159,255,.08) !important; }

/* Voiced + — циан */
#chat .user-mode.voice .user a,
#chat .user-mode.voice .user { color: #00d4d4 !important; }
#chat .user-mode.voice .user:hover { color: #33eaea !important; background: rgba(0,212,212,.08) !important; }

/* Normal — светлосиво */
#chat .user-mode.normal .user a,
#chat .user-mode.normal .user { color: #b0b8c8 !important; }
#chat .user-mode.normal .user:hover { color: #d0d8e8 !important; background: rgba(176,184,200,.06) !important; }

/* Category header colors */
#chat .user-mode.owner:before  { color: #ffd700 !important; }
#chat .user-mode.admin:before  { color: #ff8c00 !important; }
#chat .user-mode.op:before     { color: #3ddc84 !important; }
#chat .user-mode.half-op:before{ color: #7b9fff !important; }
#chat .user-mode.voice:before  { color: #00d4d4 !important; }
#chat .user-mode.normal:before { color: #7a8499 !important; }
/* StrikeBG nick list polish - compatibility layer over Claude's role colors. */
#chat .user-mode {
  border-top: 1px solid rgba(255,255,255,.05) !important;
  padding-top: 7px !important;
  margin-top: 7px !important;
}

#chat .user-mode:before,
#chat .user-mode-search:before {
  display: block !important;
  padding: 5px 12px 6px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  background: rgba(255,255,255,.04) !important;
  border-left: 2px solid currentColor !important;
}

#chat .user-mode .user {
  border-left: 2px solid transparent !important;
  border-radius: 4px !important;
  margin: 1px 6px !important;
  padding-left: 8px !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

#chat .user-mode.owner .user { border-left-color: rgba(255,215,0,.65) !important; }
#chat .user-mode.admin .user { border-left-color: rgba(255,140,0,.65) !important; }
#chat .user-mode.op .user { border-left-color: rgba(61,220,132,.65) !important; }
#chat .user-mode.half-op .user { border-left-color: rgba(123,159,255,.65) !important; }
#chat .user-mode.voice .user { border-left-color: rgba(0,212,212,.65) !important; }
#chat .user-mode.normal .user { border-left-color: rgba(176,184,200,.28) !important; }

#chat .user-mode.owner .user *,
#chat .user-mode.owner .user { color: #ffd700 !important; }
#chat .user-mode.admin .user *,
#chat .user-mode.admin .user { color: #ff8c00 !important; }
#chat .user-mode.op .user *,
#chat .user-mode.op .user { color: #3ddc84 !important; }
#chat .user-mode.half-op .user *,
#chat .user-mode.half-op .user { color: #7b9fff !important; }
#chat .user-mode.voice .user *,
#chat .user-mode.voice .user { color: #00d4d4 !important; }
#chat .user-mode.normal .user *,
#chat .user-mode.normal .user { color: #b0b8c8 !important; }

#chat .user-mode .user.active,
#chat .user-mode .user:hover {
  background: rgba(255,255,255,.075) !important;
}

#chat .user-mode.owner .user.active,
#chat .user-mode.owner .user:hover { background: rgba(255,215,0,.10) !important; }
#chat .user-mode.admin .user.active,
#chat .user-mode.admin .user:hover { background: rgba(255,140,0,.10) !important; }
#chat .user-mode.op .user.active,
#chat .user-mode.op .user:hover { background: rgba(61,220,132,.10) !important; }
#chat .user-mode.half-op .user.active,
#chat .user-mode.half-op .user:hover { background: rgba(123,159,255,.10) !important; }
#chat .user-mode.voice .user.active,
#chat .user-mode.voice .user:hover { background: rgba(0,212,212,.10) !important; }

/* StrikeBG all nick colors - deterministic per nick. */
#chat .messages .from .user,
#chat .messages .from .user *,
#chat .messages .from .nick,
#chat .message .user,
#chat .message .nick,
#chat .text .user,
#chat .text .nick,
#chat .userlist .user,
#chat .userlist .user * {
  font-weight: 700 !important;
}

#chat .user.color-1, #chat .user.color-1 *, #chat .nick.color-1, #chat .from.color-1 { color: #ff6b6b !important; }
#chat .user.color-2, #chat .user.color-2 *, #chat .nick.color-2, #chat .from.color-2 { color: #f7b731 !important; }
#chat .user.color-3, #chat .user.color-3 *, #chat .nick.color-3, #chat .from.color-3 { color: #20bf6b !important; }
#chat .user.color-4, #chat .user.color-4 *, #chat .nick.color-4, #chat .from.color-4 { color: #0fb9b1 !important; }
#chat .user.color-5, #chat .user.color-5 *, #chat .nick.color-5, #chat .from.color-5 { color: #45aaf2 !important; }
#chat .user.color-6, #chat .user.color-6 *, #chat .nick.color-6, #chat .from.color-6 { color: #4b7bec !important; }
#chat .user.color-7, #chat .user.color-7 *, #chat .nick.color-7, #chat .from.color-7 { color: #a55eea !important; }
#chat .user.color-8, #chat .user.color-8 *, #chat .nick.color-8, #chat .from.color-8 { color: #f368e0 !important; }
#chat .user.color-9, #chat .user.color-9 *, #chat .nick.color-9, #chat .from.color-9 { color: #ff9f43 !important; }
#chat .user.color-10, #chat .user.color-10 *, #chat .nick.color-10, #chat .from.color-10 { color: #10ac84 !important; }
#chat .user.color-11, #chat .user.color-11 *, #chat .nick.color-11, #chat .from.color-11 { color: #00d2d3 !important; }
#chat .user.color-12, #chat .user.color-12 *, #chat .nick.color-12, #chat .from.color-12 { color: #54a0ff !important; }
#chat .user.color-13, #chat .user.color-13 *, #chat .nick.color-13, #chat .from.color-13 { color: #5f27cd !important; }
#chat .user.color-14, #chat .user.color-14 *, #chat .nick.color-14, #chat .from.color-14 { color: #c8d6e5 !important; }
#chat .user.color-15, #chat .user.color-15 *, #chat .nick.color-15, #chat .from.color-15 { color: #ff4757 !important; }
#chat .user.color-16, #chat .user.color-16 *, #chat .nick.color-16, #chat .from.color-16 { color: #2ed573 !important; }
#chat .user.color-17, #chat .user.color-17 *, #chat .nick.color-17, #chat .from.color-17 { color: #ffa502 !important; }
#chat .user.color-18, #chat .user.color-18 *, #chat .nick.color-18, #chat .from.color-18 { color: #7bed9f !important; }
#chat .user.color-19, #chat .user.color-19 *, #chat .nick.color-19, #chat .from.color-19 { color: #70a1ff !important; }
#chat .user.color-20, #chat .user.color-20 *, #chat .nick.color-20, #chat .from.color-20 { color: #5352ed !important; }
#chat .user.color-21, #chat .user.color-21 *, #chat .nick.color-21, #chat .from.color-21 { color: #ff6b81 !important; }
#chat .user.color-22, #chat .user.color-22 *, #chat .nick.color-22, #chat .from.color-22 { color: #eccc68 !important; }
#chat .user.color-23, #chat .user.color-23 *, #chat .nick.color-23, #chat .from.color-23 { color: #2fefc5 !important; }
#chat .user.color-24, #chat .user.color-24 *, #chat .nick.color-24, #chat .from.color-24 { color: #1e90ff !important; }
#chat .user.color-25, #chat .user.color-25 *, #chat .nick.color-25, #chat .from.color-25 { color: #be2edd !important; }
#chat .user.color-26, #chat .user.color-26 *, #chat .nick.color-26, #chat .from.color-26 { color: #ff7979 !important; }
#chat .user.color-27, #chat .user.color-27 *, #chat .nick.color-27, #chat .from.color-27 { color: #badc58 !important; }
#chat .user.color-28, #chat .user.color-28 *, #chat .nick.color-28, #chat .from.color-28 { color: #6ab04c !important; }
#chat .user.color-29, #chat .user.color-29 *, #chat .nick.color-29, #chat .from.color-29 { color: #22a6b3 !important; }
#chat .user.color-30, #chat .user.color-30 *, #chat .nick.color-30, #chat .from.color-30 { color: #686de0 !important; }
#chat .user.color-31, #chat .user.color-31 *, #chat .nick.color-31, #chat .from.color-31 { color: #dff9fb !important; }
#chat .user.color-32, #chat .user.color-32 *, #chat .nick.color-32, #chat .from.color-32 { color: #f8c291 !important; }

#chat .messages .from .user[class*="color-"],
#chat .message .user[class*="color-"],
#chat .text .user[class*="color-"],
#chat .userlist .user[class*="color-"] {
  text-shadow: 0 0 9px rgb(255 255 255 / 12%) !important;
}

#chat .userlist .user[class*="color-"] {
  background: linear-gradient(90deg, rgb(255 255 255 / 4%), transparent 72%) !important;
  border-radius: 3px !important;
}

/* StrikeBG userlist per-nick color override over role colors. */
#chat .user-mode .user.color-1, #chat .user-mode .user.color-1 * { color: #ff6b6b !important; }
#chat .user-mode .user.color-2, #chat .user-mode .user.color-2 * { color: #f7b731 !important; }
#chat .user-mode .user.color-3, #chat .user-mode .user.color-3 * { color: #20bf6b !important; }
#chat .user-mode .user.color-4, #chat .user-mode .user.color-4 * { color: #0fb9b1 !important; }
#chat .user-mode .user.color-5, #chat .user-mode .user.color-5 * { color: #45aaf2 !important; }
#chat .user-mode .user.color-6, #chat .user-mode .user.color-6 * { color: #4b7bec !important; }
#chat .user-mode .user.color-7, #chat .user-mode .user.color-7 * { color: #a55eea !important; }
#chat .user-mode .user.color-8, #chat .user-mode .user.color-8 * { color: #f368e0 !important; }
#chat .user-mode .user.color-9, #chat .user-mode .user.color-9 * { color: #ff9f43 !important; }
#chat .user-mode .user.color-10, #chat .user-mode .user.color-10 * { color: #10ac84 !important; }
#chat .user-mode .user.color-11, #chat .user-mode .user.color-11 * { color: #00d2d3 !important; }
#chat .user-mode .user.color-12, #chat .user-mode .user.color-12 * { color: #54a0ff !important; }
#chat .user-mode .user.color-13, #chat .user-mode .user.color-13 * { color: #5f27cd !important; }
#chat .user-mode .user.color-14, #chat .user-mode .user.color-14 * { color: #c8d6e5 !important; }
#chat .user-mode .user.color-15, #chat .user-mode .user.color-15 * { color: #ff4757 !important; }
#chat .user-mode .user.color-16, #chat .user-mode .user.color-16 * { color: #2ed573 !important; }
#chat .user-mode .user.color-17, #chat .user-mode .user.color-17 * { color: #ffa502 !important; }
#chat .user-mode .user.color-18, #chat .user-mode .user.color-18 * { color: #7bed9f !important; }
#chat .user-mode .user.color-19, #chat .user-mode .user.color-19 * { color: #70a1ff !important; }
#chat .user-mode .user.color-20, #chat .user-mode .user.color-20 * { color: #5352ed !important; }
#chat .user-mode .user.color-21, #chat .user-mode .user.color-21 * { color: #ff6b81 !important; }
#chat .user-mode .user.color-22, #chat .user-mode .user.color-22 * { color: #eccc68 !important; }
#chat .user-mode .user.color-23, #chat .user-mode .user.color-23 * { color: #2fefc5 !important; }
#chat .user-mode .user.color-24, #chat .user-mode .user.color-24 * { color: #1e90ff !important; }
#chat .user-mode .user.color-25, #chat .user-mode .user.color-25 * { color: #be2edd !important; }
#chat .user-mode .user.color-26, #chat .user-mode .user.color-26 * { color: #ff7979 !important; }
#chat .user-mode .user.color-27, #chat .user-mode .user.color-27 * { color: #badc58 !important; }
#chat .user-mode .user.color-28, #chat .user-mode .user.color-28 * { color: #6ab04c !important; }
#chat .user-mode .user.color-29, #chat .user-mode .user.color-29 * { color: #22a6b3 !important; }
#chat .user-mode .user.color-30, #chat .user-mode .user.color-30 * { color: #686de0 !important; }
#chat .user-mode .user.color-31, #chat .user-mode .user.color-31 * { color: #dff9fb !important; }
#chat .user-mode .user.color-32, #chat .user-mode .user.color-32 * { color: #f8c291 !important; }

/* StrikeBG connect password prompt cleanup. */
#connect .connect-row:has(label.tls:not(:has(input[name="tls"]))),
#connect label.tls:not(:has(input[name="tls"])),
#connect .connect-row:has(input[type="checkbox"] + span.strikebg-password-placeholder),
#connect .connect-row:has(input[type="checkbox"]):has(+ .connect-row .password-container),
#connect .connect-row:has(input[type="checkbox"]):has(label.tls) {
  display: none !important;
}


/* StrikeBG safe polish layer - scoped fixes over the current working chat skin. */
@media (max-width: 768px) {
  html.strikebg-standalone,
  html.strikebg-standalone body {
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.strikebg-standalone {
    --sb-compose-h: 68px;
  }

  html.strikebg-standalone #app,
  html.strikebg-standalone #viewport {
    height: calc(100dvh - var(--nav-h, 62px)) !important;
    min-height: calc(100dvh - var(--nav-h, 62px)) !important;
    overflow: hidden !important;
  }

  html.strikebg-standalone #form {
    min-height: calc(var(--sb-compose-h) + env(safe-area-inset-bottom)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 22000 !important;
  }

  html.strikebg-standalone #strikebg-emoji-button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html.strikebg-standalone #strikebg-emoji-panel {
    z-index: 26000 !important;
    max-width: calc(100vw - 16px) !important;
  }
}

@supports (height: 100svh) {
  @media (max-width: 768px) {
    html.strikebg-standalone,
    html.strikebg-standalone body {
      height: 100svh !important;
      min-height: 100svh !important;
    }

    html.strikebg-standalone #app,
    html.strikebg-standalone #viewport {
      height: calc(100svh - var(--nav-h, 62px)) !important;
      min-height: calc(100svh - var(--nav-h, 62px)) !important;
    }
  }
}

/* Keep old broad mobile rules from affecting embedded/non-StrikeBG pages. */
@media (max-width: 768px) {
  html:not(.strikebg-standalone),
  html:not(.strikebg-standalone) body {
    overflow: auto !important;
  }
}

/* === Site-style text brand in chat (added) === */
.strikebg-brand-word {
  font-family: "Unbounded", "Baloo 2", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: inherit;
  text-transform: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
}
.strikebg-brand-word b {
  color: transparent;
  background-image: linear-gradient(180deg, #d4fff6 0%, #3ee0ea 38%, #1aa8bc 72%, #7ef0d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
#sidebar .strikebg-sidebar-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
}
#sidebar .strikebg-brand-word { font-size: 1.15rem; }
#sidebar .strikebg-brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: #8f8d87;
  text-transform: uppercase;
}

/* Sidebar brand в същия стил, умален */
#sidebar .strikebg-brand-word {
  font-family: "Unbounded", "Baloo 2", sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  font-size: 1.15rem;
  color: inherit !important;
}
#sidebar .strikebg-brand-word .abv-flag-w { color: #f5f7fa !important; -webkit-text-fill-color: #f5f7fa !important; }
#sidebar .strikebg-brand-word .abv-flag-g { color: #2fd67b !important; -webkit-text-fill-color: #2fd67b !important; }
#sidebar .strikebg-brand-word .abv-flag-r { color: #e23b3b !important; -webkit-text-fill-color: #e23b3b !important; }
#sidebar .strikebg-brand-word b {
  color: transparent !important;
  background-image: linear-gradient(180deg, #d4fff6 0%, #3ee0ea 38%, #1aa8bc 72%, #7ef0d4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* === PNG logo in sidebar (small brand mark, unaffected by connect-screen logo change) === */
#sidebar .strikebg-sidebar-logo { max-width: 140px; height: auto; display: block; margin: 0 auto; }
#sidebar .strikebg-sidebar-brand { flex-direction: column; gap: 2px; }

#sidebar .strikebg-sidebar-logo {
  filter: contrast(1.15) brightness(1.1) saturate(1.2) drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
/* Shared The Lounge core: the iframe uses the same viewport and composer geometry as direct chat. */
html.strikebg-embedded,
html.strikebg-embedded body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

html.strikebg-embedded #app,
html.strikebg-embedded #viewport {
  position: fixed !important;
  top: var(--nav-h, 78px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.strikebg-embedded #sidebar,
html.strikebg-embedded #windows,
html.strikebg-embedded #windows .window,
html.strikebg-embedded .window,
html.strikebg-embedded .chat {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.strikebg-embedded .chat {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: var(--sb-compose-h) !important;
}

html.strikebg-embedded .chat .header,
html.strikebg-embedded .chat-header,
html.strikebg-embedded .channel-header {
  flex: 0 0 auto !important;
}

html.strikebg-embedded .chat-content,
html.strikebg-embedded #chat,
html.strikebg-embedded .messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: calc(var(--sb-compose-h) + 12px) !important;
}

html.strikebg-embedded {
  --nav-h: 78px;
  --sb-sidebar-w: 220px;
  --sb-userlist-w: 180px;
  --sb-compose-h: 64px;
}

html.strikebg-embedded #form {
  position: fixed !important;
  left: var(--sb-sidebar-w) !important;
  right: var(--sb-userlist-w) !important;
  bottom: 0 !important;
  height: var(--sb-compose-h) !important;
  min-height: var(--sb-compose-h) !important;
  max-height: var(--sb-compose-h) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 12000 !important;
  margin: 0 !important;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  background: rgba(7, 8, 12, .99) !important;
  border-top: 1px solid rgba(255, 77, 46, .45) !important;
  box-shadow: 0 -16px 38px rgba(0,0,0,.45) !important;
}

html.strikebg-embedded #form form,
html.strikebg-embedded #form .input,
html.strikebg-embedded #form .input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.strikebg-embedded #input,
html.strikebg-embedded #form textarea,
html.strikebg-embedded #form input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  line-height: 20px !important;
}

html.strikebg-embedded #form button,
html.strikebg-embedded #form .btn,
html.strikebg-embedded #form [role="button"],
html.strikebg-embedded #form [class*="emoji"],
html.strikebg-embedded #form [id*="emoji"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 900px) {
  html.strikebg-embedded {
    --sb-sidebar-w: 0px;
    --sb-userlist-w: 0px;
    --sb-compose-h: 68px;
  }

  html.strikebg-embedded #form {
    left: 0 !important;
    right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  html.strikebg-embedded { --sb-userlist-w: 0px; }
}

@media (max-width: 768px) {
  html.strikebg-embedded,
  html.strikebg-embedded body { overflow: hidden !important; }

  html.strikebg-embedded #form {
    min-height: 58px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 700px) {
  html.strikebg-embedded { --nav-h: 68px; }
}
/* Embedded header parity final: direct and iframe share the same top shell. */
html.strikebg-embedded .strikebg-theme-toggle-embedded {
  display: none !important;
}
@media (max-width: 700px) {
  html.strikebg-embedded { --nav-h: 68px; }
}

/* Mobile sidebar brand final: the shared top header is the only mobile brand. */
@media (max-width: 768px) {
  html.strikebg-standalone #sidebar .logo-container,
  html.strikebg-embedded #sidebar .logo-container {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html.strikebg-standalone #sidebar .strikebg-sidebar-brand,
  html.strikebg-embedded #sidebar .strikebg-sidebar-brand {
    display: none !important;
  }
}

/* Real Bulgaria logo in the shared chat header. */
.strikebg-standalone .strikebg-chat-site-header .nav-brand-mark,
.strikebg-embedded .strikebg-chat-site-header .nav-brand-mark {
  display: block !important;
  width: 48px !important;
  height: 40px !important;
  flex: 0 0 48px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: drop-shadow(0 4px 10px rgba(40, 212, 223, .22)) !important;
}
@media (max-width: 700px) {
  .strikebg-standalone .strikebg-chat-site-header .nav-brand-mark,
  .strikebg-embedded .strikebg-chat-site-header .nav-brand-mark {
    width: 40px !important;
    height: 34px !important;
    flex-basis: 40px !important;
  }
}
html.strikebg-embedded .sb-embedded-live-dock { display: none !important; }


/* PARITY: do not restyle portal wordmark */
.strike-connect-title::before,
.strike-connect-title::after,
.strikebg-connect .strike-connect-title::before,
.strikebg-connect .strike-connect-title::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.strike-connect-title,
.strikebg-connect .strike-connect-title {
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: inherit !important;
  font: inherit !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
#footer { display: none !important; }