/* STRIKEBG_NETWORK_VISUAL_SYSTEM_V2
 * Full-chat BGIRC network design. No CS2 imagery or crosshair motifs.
 */

html.strikebg-network-v2 {
  color-scheme: dark;
  --sbn-bg: #05070b;
  --sbn-panel: rgba(9, 12, 18, .92);
  --sbn-panel-strong: rgba(7, 10, 15, .975);
  --sbn-panel-soft: rgba(15, 20, 29, .76);
  --sbn-line: rgba(255, 83, 46, .24);
  --sbn-line-cyan: rgba(39, 203, 221, .18);
  --sbn-orange: #ff532e;
  --sbn-orange-hot: #ff784f;
  --sbn-cyan: #27cddd;
  --sbn-green: #66e59a;
  --sbn-text: #edf2f7;
  --sbn-muted: #8e99a8;
}

html.strikebg-network-v2 .strikebg-theme-toggle { display: none !important; }

html.strikebg-network-v2 body {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 83, 46, .13), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(39, 205, 221, .10), transparent 32%),
    linear-gradient(145deg, #05070b 0%, #090b12 48%, #05070b 100%) !important;
}

.sb-network-ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, #000 10%, transparent 76%);
}

.sb-network-ambient::before,
.sb-network-ambient::after {
  content: "";
  position: absolute;
  width: 46vw;
  aspect-ratio: 1;
  border: 1px solid rgba(39, 205, 221, .09);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(39, 205, 221, .018),
    0 0 0 140px rgba(255, 83, 46, .014);
  animation: sbn-ambient-drift 18s ease-in-out infinite alternate;
}

.sb-network-ambient::before { top: -20vw; right: -12vw; }
.sb-network-ambient::after {
  bottom: -24vw;
  left: -13vw;
  border-color: rgba(255, 83, 46, .10);
  animation-delay: -9s;
}

.sb-network-ambient i {
  position: absolute;
  left: var(--sbn-x);
  top: var(--sbn-y);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sbn-color, var(--sbn-cyan));
  box-shadow: 0 0 9px currentColor, 0 0 22px currentColor;
  color: var(--sbn-color, var(--sbn-cyan));
  animation: sbn-node-pulse var(--sbn-speed, 3.8s) ease-in-out infinite;
  animation-delay: var(--sbn-delay, 0s);
}

html.strikebg-network-v2 #app,
html.strikebg-network-v2 #viewport,
html.strikebg-network-v2 #windows,
html.strikebg-network-v2 #chat,
html.strikebg-network-v2 #chat .window,
html.strikebg-network-v2 #chat .chat-view {
  background: transparent !important;
}

html.strikebg-network-v2 #viewport { z-index: 1; }

html.strikebg-network-v2 .strikebg-chat-site-header {
  background: rgba(5, 7, 11, .92) !important;
  border-bottom: 1px solid rgba(255, 83, 46, .32) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.34), inset 0 -1px 0 rgba(39,205,221,.06) !important;
  backdrop-filter: blur(18px) saturate(130%);
}

html.strikebg-network-v2 #sidebar {
  background:
    linear-gradient(180deg, rgba(8,11,17,.985), rgba(7,10,15,.97)),
    radial-gradient(circle at 0 35%, rgba(255,83,46,.12), transparent 42%) !important;
  border-right: 1px solid rgba(255, 83, 46, .22) !important;
  box-shadow: 16px 0 48px rgba(0,0,0,.28) !important;
}

html.strikebg-network-v2 #sidebar .logo-container {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent) !important;
  border-bottom: 1px solid rgba(39,205,221,.10) !important;
}

html.strikebg-network-v2 #sidebar .channel-list-item,
html.strikebg-network-v2 #sidebar .chan,
html.strikebg-network-v2 #sidebar .channel {
  margin: 2px 7px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease !important;
}

html.strikebg-network-v2 #sidebar .channel-list-item:hover,
html.strikebg-network-v2 #sidebar .chan:hover,
html.strikebg-network-v2 #sidebar .channel:hover {
  color: #fff !important;
  border-color: rgba(39,205,221,.13) !important;
  background: rgba(39,205,221,.055) !important;
  transform: translateX(2px);
}

html.strikebg-network-v2 #sidebar .active {
  color: #fff !important;
  border-color: rgba(255,83,46,.28) !important;
  background: linear-gradient(90deg, rgba(255,83,46,.18), rgba(255,83,46,.055)) !important;
  box-shadow: inset 3px 0 0 var(--sbn-orange), 0 7px 22px rgba(0,0,0,.18) !important;
}

html.strikebg-network-v2 #chat .chat-content {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255,83,46,.065), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(39,205,221,.055), transparent 30%),
    linear-gradient(180deg, rgba(8,11,17,.82), rgba(5,8,13,.94)) !important;
  border-inline: 1px solid rgba(255,255,255,.025) !important;
}

html.strikebg-network-v2 #chat .chat-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(39,205,221,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,205,221,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

html.strikebg-network-v2 #chat .messages,
html.strikebg-network-v2 #chat .chat-content > * {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

html.strikebg-network-v2 #chat .header,
html.strikebg-network-v2 #chat .chat-header,
html.strikebg-network-v2 #chat .channel-header {
  background: rgba(8,11,17,.88) !important;
  border-bottom: 1px solid rgba(39,205,221,.11) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(14px);
}

html.strikebg-network-v2 #chat .msg {
  border-color: rgba(255,255,255,.045) !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

html.strikebg-network-v2 #chat .msg:hover {
  background: linear-gradient(90deg, rgba(255,83,46,.055), rgba(39,205,221,.025)) !important;
  border-color: rgba(255,83,46,.12) !important;
  box-shadow: inset 2px 0 0 rgba(255,83,46,.45) !important;
}

html.strikebg-network-v2 #chat .msg[data-sb-avatar]::before {
  border-radius: 50% !important;
  border-color: hsl(var(--sb-avatar-hue) 78% 58% / .48) !important;
  background: radial-gradient(circle at 35% 28%, hsl(var(--sb-avatar-hue) 80% 58% / .72), hsl(var(--sb-avatar-hue) 64% 18% / .92)) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.025), 0 8px 20px hsl(var(--sb-avatar-hue) 70% 30% / .18) !important;
}

html.strikebg-network-v2 #chat .userlist,
html.strikebg-network-v2 #chat .nicklist {
  background: rgba(6,9,14,.955) !important;
  border-left: 1px solid rgba(39,205,221,.13) !important;
  box-shadow: -14px 0 42px rgba(0,0,0,.22) !important;
}

html.strikebg-network-v2 #chat .userlist .count,
html.strikebg-network-v2 #chat .nicklist .count {
  background: rgba(10,14,21,.98) !important;
  border-bottom: 1px solid rgba(255,83,46,.21) !important;
}

html.strikebg-network-v2 #form {
  background: rgba(5,8,13,.97) !important;
  border-top: 1px solid rgba(255,83,46,.38) !important;
  box-shadow: 0 -18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(39,205,221,.055) !important;
  backdrop-filter: blur(18px);
}

html.strikebg-network-v2 #input {
  color: var(--sbn-text) !important;
  border: 1px solid rgba(39,205,221,.18) !important;
  border-bottom-color: rgba(255,83,46,.4) !important;
  border-radius: 9px !important;
  background: rgba(14,19,27,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 22px rgba(0,0,0,.18) !important;
}

html.strikebg-network-v2 #input:focus {
  border-color: rgba(39,205,221,.54) !important;
  border-bottom-color: rgba(255,83,46,.82) !important;
  box-shadow: 0 0 0 3px rgba(39,205,221,.07), 0 9px 28px rgba(0,0,0,.24) !important;
}

html.strikebg-network-v2 #form button,
html.strikebg-network-v2 #strikebg-emoji-button {
  border-radius: 9px !important;
  background: rgba(14,19,27,.92) !important;
  border-color: rgba(255,255,255,.09) !important;
}

html.strikebg-network-v2 #form button:hover,
html.strikebg-network-v2 #strikebg-emoji-button:hover {
  border-color: rgba(255,83,46,.58) !important;
  background: rgba(255,83,46,.12) !important;
  box-shadow: 0 0 20px rgba(255,83,46,.10) !important;
}

html.strikebg-network-v2 #connect,
html.strikebg-network-v2 #loading {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,83,46,.13), transparent 30%),
    radial-gradient(circle at 75% 80%, rgba(39,205,221,.11), transparent 34%),
    linear-gradient(145deg, #05070b, #0a0d14 52%, #05070b) !important;
}

html.strikebg-network-v2 #connect > .container,
html.strikebg-network-v2 #sign-in > .container {
  border: 1px solid rgba(39,205,221,.16) !important;
  border-top: 2px solid rgba(255,83,46,.72) !important;
  border-radius: 18px !important;
  background: rgba(8,12,18,.88) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter: blur(22px) saturate(125%);
}

html.strikebg-network-v2 .sbfx-brand-sub { color: #8fa4b3 !important; }
html.strikebg-network-v2 .sbfx-brand-sub i { background: var(--sbn-cyan) !important; box-shadow: 0 0 12px var(--sbn-cyan) !important; }
html.strikebg-network-v2 .sbfx-crosshair { display: none !important; }
html.strikebg-network-v2 .sbfx-core { filter: drop-shadow(0 0 22px rgba(39,205,221,.18)); }
html.strikebg-network-v2 .sbfx-core-ring { stroke: rgba(39,205,221,.42) !important; }
html.strikebg-network-v2 .sbfx-core-pulse { stroke: rgba(255,83,46,.62) !important; }

html.strikebg-network-v2 .sbfx-stage::after {
  content: "BGIRC LIVE NETWORK";
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  color: rgba(143,164,179,.72);
  font: 700 9px/1 "Share Tech Mono", monospace;
  letter-spacing: .18em;
  white-space: nowrap;
}

html.strikebg-network-v2 .sbfx-packet {
  background: var(--sbn-cyan) !important;
  box-shadow: 0 0 12px var(--sbn-cyan), 0 0 26px rgba(39,205,221,.34) !important;
}

html.strikebg-network-v2 .strikebg-irc-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--sbn-cyan);
  box-shadow: 0 0 10px rgba(39,205,221,.85);
  animation: sbn-status-pulse 1.8s ease-in-out infinite;
}

html.strikebg-network-v2 .strikebg-irc-status-text {
  color: var(--sbn-text);
  font-weight: 700;
  letter-spacing: .08em;
}

@media (max-width: 768px) {
  html.strikebg-network-v2 #chat .chat-content {
    background:
      radial-gradient(circle at 50% 0, rgba(255,83,46,.07), transparent 30%),
      linear-gradient(180deg, rgba(8,11,17,.91), rgba(5,8,13,.97)) !important;
  }

  html.strikebg-network-v2 #chat .msg {
    background: rgba(12,16,23,.42) !important;
    border: 1px solid rgba(255,255,255,.045) !important;
  }

  html.strikebg-network-v2 .sb-network-ambient { background-size: 34px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-network-ambient::before,
  .sb-network-ambient::after,
  .sb-network-ambient i { animation: none !important; }
}

@keyframes sbn-node-pulse {
  0%, 100% { opacity: .25; transform: scale(.65); }
  48% { opacity: 1; transform: scale(1.35); }
}

@keyframes sbn-ambient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(.96); opacity: .42; }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: .82; }
}

@keyframes sbn-status-pulse {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}