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

/* ── CSS VARIABLES ── */
:root {
  color-scheme: dark;
  --sb-red: #e8001d;
  --sb-red-soft: rgba(232, 0, 29, .18);
  --sb-bg: #07080b;
  --sb-panel: rgba(13, 15, 19, .96);
  --sb-line: rgba(232, 0, 29, .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: 68px;
  --font-head: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', 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:
    linear-gradient(145deg, rgba(5,6,9,.96), rgba(24,0,5,.82), rgba(5,6,9,.98)),
    url("https://strikebg.com/images/plevenbg.jpg") center / cover fixed no-repeat !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; }

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

button, .btn { border-color: rgba(232, 0, 29, .45) !important; }

a, .link, .nick, .user { color: #ff465c !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(232, 0, 29, .13) !important;
}

/* Hide password toggle labels */
label:has(input[name="usePassword"]),
label:has(input[name="password-toggle"]) { 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), Orbitron, Impact, sans-serif !important;
  font-size: clamp(2.8rem, 8vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: transparent !important;
  text-shadow: 3px 5px 6px rgba(0,0,0,.85) !important;
  filter: none !important;
}

.strikebg-connect .strike-connect-title span,
.strikebg-connect .strike-connect-title b {
  display: inline-block !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.strikebg-connect .strike-connect-title span {
  background-image: linear-gradient(180deg, #ccc 0%, #999 50%, #666 100%) !important;
}
.strikebg-connect .strike-connect-title b {
  margin-left: .16em !important;
  background-image: linear-gradient(180deg, #ff5555 0%, #e8001d 50%, #900 100%) !important;
  filter: drop-shadow(0 0 8px rgba(232,0,29,.4)) !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, #e8001d, transparent) !important;
  box-shadow: 0 0 18px rgba(232,0,29,.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, #e8001d 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: #e8001d !important;
  text-shadow: 0 0 12px rgba(232,0,29,.75) !important;
  letter-spacing: .34em !important;
}

/* ── NAVBAR ── */
.strikebg-standalone .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 {
  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: rgba(5, 7, 9, 0.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--card-border) !important;
  box-shadow: none !important;
}

.strikebg-standalone .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 0%, var(--accent) 25%, var(--gold) 50%, var(--accent) 75%, transparent 100%) !important;
  animation: navlineShift 5s ease-in-out infinite alternate !important;
  opacity: 0.85 !important;
}

.strikebg-standalone .strikebg-chat-site-header .navbar-inner {
  width: 100% !important;
  max-width: 1240px !important;
  height: var(--nav-h) !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 auto !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo {
  font-family: var(--font-head) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
  text-shadow: 0 0 18px rgba(232,68,26,0.6) !important;
  transition: text-shadow 0.3s, transform 0.3s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo::before {
  content: '' !important;
  width: 8px; height: 8px;
  background: var(--accent) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent) !important;
  animation: livePulse 1.8s ease-in-out infinite !important;
  flex: 0 0 auto !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo::after {
  content: '' !important;
  position: absolute !important;
  left: 18px; right: 0; bottom: -8px;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  opacity: .65 !important;
  transform: scaleX(.35) !important;
  transform-origin: center !important;
  animation: logoLinePulse 2.8s ease-in-out infinite !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo span {
  color: var(--accent) !important;
  animation: logoPulse 3s ease-in-out infinite !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-logo:hover {
  text-shadow: 0 0 30px rgba(232,68,26,1) !important;
  transform: translateY(-1px) !important;
}

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

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

.strikebg-standalone .strikebg-chat-site-header .nav-links a {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 11px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--text-dim) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  position: relative !important;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  isolation: isolate !important;
  line-height: 1 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a .nav-icon {
  font-size: 0.9rem !important;
  display: inline-block !important;
  transition: transform 0.25s !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(232,68,26,.20), transparent) !important;
  transform: translateX(-115%) !important;
  transition: transform .42s cubic-bezier(.4,0,.2,1) !important;
  z-index: -1 !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a::after {
  content: '' !important;
  position: absolute !important;
  left: 12px; right: 12px; bottom: 3px;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  transform: scaleX(0) !important;
  opacity: 0 !important;
  transition: transform .24s ease, opacity .24s ease !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a:hover {
  color: #fff !important;
  background: rgba(232,68,26,0.10) !important;
  border-color: rgba(232,68,26,0.35) !important;
  transform: translateY(-1px) !important;
  text-shadow: 0 0 14px rgba(232,68,26,.55) !important;
}

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

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

.strikebg-standalone .strikebg-chat-site-header .nav-links a:hover .nav-icon {
  animation: navIconKick .38s ease both !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-links a.active {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(232,68,26,0.18), rgba(139,0,0,0.18)) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 16px rgba(232,68,26,0.25) !important;
  animation: activeNavGlow 2.4s ease-in-out infinite !important;
}

.strikebg-standalone .strikebg-chat-site-header .nav-toggle {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  cursor: pointer !important;
  padding: 8px !important;
  background: none !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-sm) !important;
}

.strikebg-standalone .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 !important;
  margin: 0 !important;
}

.strikebg-standalone .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-standalone .strikebg-chat-site-header .nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
  background: var(--accent) !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(232, 0, 29, .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(232,0,29,.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(232,0,29,.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(232,0,29,.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(232,0,29,.8) !important;
  background: rgba(232,0,29,.22) !important;
}

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

  body {
    background:
      linear-gradient(160deg, rgba(5,6,9,.97), rgba(34,0,6,.86), rgba(5,6,9,.98)),
      url("https://strikebg.com/images/plevenbg.jpg") center / cover fixed no-repeat !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) {
  .strikebg-standalone .strikebg-chat-site-header .nav-toggle { display: flex !important; }
  .strikebg-standalone .strikebg-chat-site-header .navbar-inner { padding: 0 18px !important; }
  .strikebg-standalone .strikebg-chat-site-header #player-counter { display: none !important; }

  .strikebg-standalone .strikebg-chat-site-header .nav-links {
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    background: rgba(5,7,9,.97) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--card-border) !important;
    padding: 14px 16px 22px !important;
    gap: 6px !important;
    transform: translateY(-110%) !important;
    opacity: 0 !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s !important;
    pointer-events: none !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-links.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .strikebg-standalone .strikebg-chat-site-header .nav-links a {
    padding: 13px 16px !important;
    font-size: 0.72rem !important;
    border-color: rgba(255,255,255,0.05) !important;
    justify-content: flex-start !important;
  }

  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;
  }
}