/* StrikeBG mobile v2 — stable, readable and touch-first mobile layer. */

html.strikebg-mobile-v2 {
  --sb-mobile-nav-h: 64px;
  --sb-mobile-gap: 12px;
  --sb-mobile-surface: #071419;
  --sb-mobile-surface-raised: #0b2025;
  --sb-mobile-line: rgba(40, 212, 223, .28);
  --sb-mobile-text: #e4f5f3;
  --sb-mobile-muted: #9fc1c2;
  color-scheme: dark;
}

/* The wordmark is intentionally contained; never stretch the logo asset. */
.strikebg-chat-site-header .portal-brand.portal-brand-bgirc img {
  object-fit: contain !important;
  filter: brightness(1.55) contrast(1.12) saturate(1.3) drop-shadow(0 0 8px rgba(40, 212, 223, .28)) !important;
}

/* The floating chat radar is retired; keep old scripts from showing it again. */
.sb-chat-radar,
.sb-chat-radar * {
  display: none !important;
}

@media (max-width: 900px) {
  html.strikebg-mobile-v2,
  html.strikebg-mobile-v2 body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.strikebg-mobile-v2 body {
    min-height: 100dvh;
    background: #05090c !important;
  }

  html.strikebg-mobile-v2 #app,
  html.strikebg-mobile-v2 #viewport {
    position: fixed !important;
    inset: var(--sb-mobile-nav-h) 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* There is one portal navigation on mobile. The Lounge's connect-page
     header is a second, empty hamburger row and wastes valuable height. */
  html.strikebg-mobile-v2 #connect > .header {
    display: none !important;
  }

  html.strikebg-mobile-v2 #connect > .header .lt {
    display: none !important;
  }

  html.strikebg-mobile-v2 #connect {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(40, 212, 223, .45) transparent;
  }

  html.strikebg-mobile-v2 #connect > .container {
    width: min(100% - 24px, 560px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    margin: 14px auto 32px !important;
    padding: 18px 14px calc(22px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }

  html.strikebg-mobile-v2 #connect > .container > * {
    min-width: 0;
    max-width: 100%;
  }

  html.strikebg-mobile-v2 #connect h2 {
    margin-top: 22px !important;
    margin-bottom: 10px !important;
    font-size: clamp(1.15rem, 5.8vw, 1.5rem) !important;
    line-height: 1.22 !important;
  }

  html.strikebg-mobile-v2 #connect .connect-row {
    margin-bottom: 12px !important;
  }

  html.strikebg-mobile-v2 #connect input,
  html.strikebg-mobile-v2 #connect select,
  html.strikebg-mobile-v2 #connect textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    border-radius: 8px !important;
  }

  html.strikebg-mobile-v2 #connect button[type="submit"] {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    margin-top: 6px !important;
    border-radius: 9px !important;
    touch-action: manipulation;
  }

  html.strikebg-mobile-v2 .sb-privacy-notice {
    margin: 14px 0 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  html.strikebg-mobile-v2 .sb-privacy-trigger {
    min-height: 44px !important;
    padding: 10px 12px !important;
    line-height: 1.2 !important;
    touch-action: manipulation;
  }

  /* Keep the real portal menu inside the viewport and easy to tap. */
  html.strikebg-mobile-v2 .strikebg-chat-site-header {
    z-index: 40000 !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-nav {
    height: var(--sb-mobile-nav-h) !important;
    min-height: var(--sb-mobile-nav-h) !important;
    padding-inline: 12px !important;
    box-sizing: border-box !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-brand.portal-brand-bgirc {
    left: 12px !important;
    top: 8px !important;
    width: 136px !important;
    height: 48px !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-brand.portal-brand-bgirc img {
    display: block !important;
    width: 126px !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-nav .nav-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 10px !important;
    border-radius: 9px !important;
    touch-action: manipulation;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-links {
    position: fixed !important;
    top: calc(var(--sb-mobile-nav-h) + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--sb-mobile-nav-h) - 16px) !important;
    overflow-y: auto !important;
    padding: 10px !important;
    gap: 7px !important;
    border: 1px solid rgba(40, 212, 223, .3) !important;
    border-radius: 12px !important;
    background: rgba(5, 16, 20, .98) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6) !important;
    transform: translateY(-12px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-links.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html.strikebg-mobile-v2 .strikebg-chat-site-header .portal-links a {
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    touch-action: manipulation;
  }

  /* Never let decorative layers compete with the chat on a small GPU. */
  html.strikebg-mobile-v2 .sb-chat-code-layer,
  html.strikebg-mobile-v2 .sb-chat-radar,
  html.strikebg-mobile-v2 .sb-chat-hud,
  html.strikebg-mobile-v2 .sb-network-ambient,
  html.strikebg-mobile-v2 .sb-embedded-live-dock {
    display: none !important;
  }

  html.strikebg-mobile-v2 .sbfx-network {
    display: none !important;
  }

  html.strikebg-mobile-v2 .strike-connect-title .sb-action-main,
  html.strikebg-mobile-v2 .strike-connect-title .sb-action-accent,
  html.strikebg-mobile-v2 #connect h1,
  html.strikebg-mobile-v2 #connect h2,
  html.strikebg-mobile-v2 #connect label,
  html.strikebg-mobile-v2 #connect p,
  html.strikebg-mobile-v2 .sb-welcome-panel,
  html.strikebg-mobile-v2 .sb-welcome-copy,
  html.strikebg-mobile-v2 .sb-welcome-features,
  html.strikebg-mobile-v2 #chat .msg,
  html.strikebg-mobile-v2 .nav-counter,
  html.strikebg-mobile-v2 .strikebg-irc-status-dot {
    animation: none !important;
  }

  html.strikebg-mobile-v2 .strike-connect-title .sb-action-main {
    background-image: none !important;
  }

  html.strikebg-mobile-v2 #loading {
    z-index: 50000 !important;
  }

  /* The stock The Lounge handler warns after 5 seconds. Give the app a
     little more time on mobile before exposing the retry UI. */
  html.strikebg-mobile-v2:not(.strikebg-mobile-v2-slow) #loading-slow,
  html.strikebg-mobile-v2:not(.strikebg-mobile-v2-slow) #loading-reload {
    visibility: hidden !important;
  }

  html.strikebg-mobile-v2.strikebg-mobile-v2-ready #loading,
  html.strikebg-mobile-v2.strikebg-mobile-v2-ready #loading-slow,
  html.strikebg-mobile-v2.strikebg-mobile-v2-ready #loading-reload {
    display: none !important;
  }

  html.strikebg-mobile-v2.strikebg-mobile-v2-slow #loading-slow,
  html.strikebg-mobile-v2.strikebg-mobile-v2-slow #loading-reload {
    visibility: visible !important;
  }

  /* Connected chat view: preserve a usable message area and composer. */
  html.strikebg-mobile-v2 #windows,
  html.strikebg-mobile-v2 #windows > .window,
  html.strikebg-mobile-v2 .chat,
  html.strikebg-mobile-v2 .chat-content {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.strikebg-mobile-v2 #chat,
  html.strikebg-mobile-v2 #chat .messages {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  html.strikebg-mobile-v2 #chat .msg,
  html.strikebg-mobile-v2 #chat .message,
  html.strikebg-mobile-v2 #chat .msg .content,
  html.strikebg-mobile-v2 #chat .message .content {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html.strikebg-mobile-v2 #form {
    z-index: 45000 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  html.strikebg-mobile-v2 button,
  html.strikebg-mobile-v2 a,
  html.strikebg-mobile-v2 input,
  html.strikebg-mobile-v2 textarea,
  html.strikebg-mobile-v2 select {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 430px) {
  html.strikebg-mobile-v2 #connect > .container {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin-top: 8px !important;
    padding-inline: 12px !important;
  }

  html.strikebg-mobile-v2 .strike-connect-title {
    margin-top: 12px !important;
  }

  html.strikebg-mobile-v2 .sb-welcome-panel {
    padding: 14px !important;
  }
}

@media (max-width: 380px) {
  /* On very narrow phones the message field is the primary action. */
  html.strikebg-mobile-v2 #form #upload,
  html.strikebg-mobile-v2 #form .sb-tool-command {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  html.strikebg-mobile-v2 .sbfx-overlay *,
  html.strikebg-mobile-v2 .sb-chat-code-layer *,
  html.strikebg-mobile-v2 .sb-chat-radar *,
  html.strikebg-mobile-v2 .sb-chat-hud * {
    animation: none !important;
    transition: none !important;
  }
}