body.sl-live-room-shell-enabled,
body.sl-offline-room-active {
  --sl-room-bg: #05070c;
  --sl-room-panel: #0b0f18;
  --sl-room-panel-alt: #090c13;
  --sl-room-border: rgba(255, 255, 255, 0.08);
  --sl-room-text: #e8edf7;
  --sl-room-muted: #94a3b8;
  --sl-room-gold: #fbbf24;
  --sl-room-tip-green: #46a758;
  --sl-room-live-red: #ef4444;
}

/* Kill legacy full-width green bars */
body.sl-live-room-shell-enabled .chatWindow,
body.sl-offline-room-active .chatWindow,
body.sl-live-room-shell-enabled .chatWindow .chatRoom,
body.sl-offline-room-active .chatWindow .chatRoom,
body.sl-live-room-shell-enabled .chatWindow .chatLabel,
body.sl-offline-room-active .chatWindow .chatLabel,
body.sl-live-room-shell-enabled .chatWindow .users,
body.sl-offline-room-active .chatWindow .users,
body.sl-live-room-shell-enabled .vdchat-overlay,
body.sl-offline-room-active .vdchat-overlay,
body.sl-live-room-shell-enabled .vdchat-overlay .container,
body.sl-offline-room-active .vdchat-overlay .container,
body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer,
body.sl-offline-room-active .vdchat-overlay .videoContainer {
  background: var(--sl-room-panel-alt) !important;
  background-image: none !important;
}

body.sl-live-room-shell-enabled .chatWindow .chatLabel {
  background: var(--sl-room-panel) !important;
  color: var(--sl-room-text) !important;
  border-bottom: 1px solid var(--sl-room-border) !important;
}

body.sl-live-room-shell-enabled #roomKing,
body.sl-live-room-shell-enabled .roomKing,
body.sl-live-room-shell-enabled [id*="roomKing"],
body.sl-live-room-shell-enabled .chatWindow .chatLabel > div[style*="background"],
body.sl-live-room-shell-enabled .chatWindow .chatRoom #messages li.system3 {
  background: rgba(251, 191, 36, 0.1) !important;
  background-image: none !important;
  color: #fde68a !important;
  border: 1px solid rgba(251, 191, 36, 0.22) !important;
  border-radius: 10px !important;
}

body.sl-live-room-shell-enabled #roomEngagementDock,
body.sl-live-room-shell-enabled #addonPanel,
body.sl-live-room-shell-enabled #privateShowBtn,
body.sl-live-room-shell-enabled .join-popup,
body.sl-live-room-shell-enabled .tip-popup:not(.sl-room-tip-drawer):not(.sl-room-private-modal) {
  display: none !important;
}

/* Chat input — dark field, not green block */
body.sl-live-room-shell-enabled .chatWindow .chatRoom .message,
body.sl-live-room-shell-enabled .vdchat-overlay .container > .message,
body.sl-live-room-shell-enabled .vdchat-overlay .message {
  display: flex !important;
  background: #06080e !important;
  border-top: 1px solid var(--sl-room-border) !important;
}

body.sl-live-room-shell-enabled #messageText,
body.sl-live-room-shell-enabled #messageText1,
body.sl-live-room-shell-enabled .chatWindow .chatRoom .message input,
body.sl-live-room-shell-enabled .vdchat-overlay .message input {
  background: #111722 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

body.sl-live-room-shell-enabled .chatWindow .chatRoom .message #sendMessage,
body.sl-live-room-shell-enabled .chatWindow .chatRoom .message #sendMessage1,
body.sl-live-room-shell-enabled .vdchat-overlay .message #sendMessage,
body.sl-live-room-shell-enabled .vdchat-overlay .message #sendMessage1 {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}

/* LIVE badge — red pulse, not green STREAMING */
body.sl-live-room-shell-enabled .sl-room-live-pill {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fecaca !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

body.sl-live-room-shell-enabled .sl-room-live-pill::before {
  background: var(--sl-room-live-red) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
}

/* Subheader model strip — charcoal, never theme green */
body.sl-live-room-shell-enabled .sl-room-subheader,
body.sl-live-room-shell-enabled .sl-room-header-nav,
body.sl-live-room-shell-enabled .sl-room-subheader .sl-room-header-nav {
  background: rgba(8, 10, 16, 0.96) !important;
  background-image: none !important;
}

/* Send Tip on video rail — Stripchat accent green only here */
body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-action[data-room-shell-action="tip"] {
  background: linear-gradient(180deg, #52b852 0%, var(--sl-room-tip-green) 100%) !important;
  border-color: rgba(70, 167, 88, 0.45) !important;
  color: #fff !important;
}

body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-action.primary,
body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-action[data-room-shell-action="private"] {
  background: rgba(15, 18, 28, 0.92) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  color: #fde68a !important;
}

/* Goal bar fill — gold not neon green */
body.sl-live-room-shell-enabled .sl-room-goal-bar-fill {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

/* Chat tabs */
.sl-room-chat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 8px;
}

.sl-room-chat-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sl-room-chat-tab.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  box-shadow: inset 0 -2px 0 #fbbf24;
}

.sl-room-chat-tab-count {
  opacity: 0.85;
  font-weight: 600;
}

body.sl-live-room-shell-enabled .chatWindow .chatLabel .requestPrivateChat,
body.sl-live-room-shell-enabled .chatWindow .chatLabel .tip,
body.sl-live-room-shell-enabled .chatWindow .chatLabel a.requestPrivateChat,
body.sl-live-room-shell-enabled .chatWindow .chatLabel a.tip {
  display: none !important;
}

/* Sex toy quick action */
.sl-room-chat-quick button.is-toy {
  grid-column: 1 / -1;
  border-color: rgba(244, 114, 182, 0.35) !important;
  color: #f9a8d4 !important;
  background: rgba(244, 114, 182, 0.08) !important;
}

/* Chat footer contest strip */
.sl-room-chat-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--sl-room-border);
  background: #06080e;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.sl-room-chat-footer strong {
  color: #fde68a;
}

/* Force side-by-side stage + chat with EXPLICIT grid placement. lic.php leaves its
   markup unclosed, so page-bottom (footer/recos), the exit link and various
   scripts land as children of .container. Explicit placement pins the video and
   chat to row 1 and pushes everything else full-width to row 2, so stray children
   can never distort or collapse the room. */
body.sl-live-room-shell-enabled .vdchat-overlay .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 400px) !important;
  grid-template-rows: min(86dvh, 1040px) auto !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .col-lg {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  box-sizing: border-box !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .col-sm {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  box-sizing: border-box !important;
}

/* The video wrapper the room scripts inject inside the LEFT column must fill it. */
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg > * {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* RIGHT column is a vertical STACK, not a row. Previously every col-sm child was
   forced to width:100% AND height:100% inside a default flex-ROW, so the chat
   window collapsed to ~1px while injected bars (contest strip) ate the width —
   this is why the live-room chat + composer were invisible. Stack them: the chat
   window flexes to fill, injected strips sit at natural height beneath it. */
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm {
  flex-direction: column !important;
}
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm > * {
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm > .chatWindow {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Video wrapper chain (injected by sl-room-public-show.js / sl-room-pip.js) must
   pass full height down so the stage never collapses to a thin strip. */
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-wrap,
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-video-host,
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-column {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-wrap > .videoContainer,
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-video-host > .videoContainer {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Everything else lic.php leaves inside .container drops full-width below the room. */
body.sl-live-room-shell-enabled .vdchat-overlay .container > .sl-room-page-bottom {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .container > a.exit {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  z-index: 6 !important;
}

/* Video stage fills the left column; contain (no crop) on a solid black bed. */
body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  border-radius: 12px 0 0 12px !important;
  overflow: hidden !important;
}

/* The video host is the <video>'s offset parent. A legacy in-flow sibling inside
   .videoContainer was pushing the (relative) host down, offsetting the video. Pin the
   host to fill the stage so the video always aligns to the stage top edge. */
body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer .sl-room-video-host {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer video.mainVideo,
body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer video#streamerVideo {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
  transform: none !important;
  margin: 0 !important;
}

/* Chat window fills the right column as a flex column (label / messages / input). */
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm .chatWindow {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--sl-room-panel) !important;
  border-left: 1px solid var(--sl-room-border) !important;
  border-radius: 0 12px 12px 0 !important;
  overflow: hidden !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom {
  position: relative !important; /* legacy videochat.css pinned it absolute → 10px wide */
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* The composer input was left display:none by the halted lic.php ready-handler
   (userLoggedIn ReferenceError). For a logged-in member the shell always shows
   the full composer row so they can type. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message .maindiv {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #messageText {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
  position: relative !important; /* legacy videochat.css pins it absolute → overlaps composer */
  inset: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
/* Each chat line is a normal block; the legacy theme floated the username which
   made it overlap the message body. Keep name + text inline on one row. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages > li {
  position: relative !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Chat input row — flex, no overlap of emoji trigger and send button. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #06080e !important;
  border-top: 1px solid var(--sl-room-border) !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #messageText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #sendMessage,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #trigger,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message .emoji-trigger {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* Send button clears the emoji button (the emoji SVG's inline negative
   margin-right is normalised in JS; this guarantees separation pre-JS too). */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #sendMessage,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #sendMessage1 {
  margin-left: 6px !important;
}
/* The real emoji trigger in this build is span.showall (SVG smiley), living at
   the right edge of .maindiv. Keep it inside the row, round, and gapped from
   the send button so the two never overlap. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message .showall {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 10px 0 0 !important;
}
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message .showall svg,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message .showall img {
  border-radius: 50% !important;
}

/* Suppress the messy stack of legacy floating buttons in the shell room
   (squad, ticket teaser, queue, gift flare, group banner in body). Stripchat
   keeps the stage clean; these belong in menus, not floating over the video. */
body.sl-live-room-shell-enabled > #squadBtn,
body.sl-live-room-shell-enabled > #squadModal,
body.sl-live-room-shell-enabled > #ticketTeaser,
body.sl-live-room-shell-enabled > .sl-room-ticket-teaser,
body.sl-live-room-shell-enabled > #queueControls,
body.sl-live-room-shell-enabled > #queueJoinBtn,
body.sl-live-room-shell-enabled > #queueLeaveBtn,
body.sl-live-room-shell-enabled > #giftFlare,
body.sl-live-room-shell-enabled > #slGpRoomBanner {
  display: none !important;
}

/* The contest bar (js/sl-room-video-controls.js) is appended into .col-sm; the
   blanket "col-sm > * fills 100% height" rule above stretched it into a giant
   floating panel. Dock it as a compact strip at the BOTTOM of the chat column. */
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm > .sl-room-contest-bar {
  flex: 0 0 auto !important;
  height: auto !important;
  order: 99 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  border-top: 1px solid var(--sl-room-border) !important;
  background: #06080e !important;
}

/* Under-room info strip (rating widget etc.) sits centered beneath the stage. */
body.sl-live-room-shell-enabled .vdchat-overlay .container > .sl-room-page-bottom {
  padding-top: 12px !important;
}

/* Single clean roulette / next-cam button. Anchor it over the LEFT (video) side,
   never the bottom-right — that corner is the chat composer + send button, and a
   fixed bottom-right button collides with them (the "Next Cam over Send" overlap).
   Over the video's lower-left it stays out of the chat's way on desktop.
   The video's lower-left already stacks three player controls anchored to the
   video: .expand (fullscreen/monitor icon, top ~51px), .volume (mute, top ~104px)
   and the #slTrChip translate chip (top ~152px). At bottom:74px the pill sat right
   on top of that stack (the reported "Next Cam overlaying the other button"). Pin
   the pill ABOVE the topmost control (chip top = 152px) with a ~16px gap so it
   covers none of them. Measured live via .qa/g3_bl_probe.mjs. */
/* When JS pins #slRouletteBtn into the video host, switch from viewport-fixed
   to host-absolute so scroll never drops it onto the goal bar (owner overlay
   report 2026-08-05). Fallback keeps the previous fixed bottom if unpinned. */
body.sl-live-room-shell-enabled #slRouletteBtn {
  left: 16px !important;
  right: auto !important;
  bottom: 168px !important;
  z-index: 10040 !important;
}
body.sl-live-room-shell-enabled #slRouletteBtn.sl-room-nextcam-pinned {
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  bottom: 14px !important;
  top: auto !important;
  transform: none !important;
  z-index: 40 !important;
}

/* Legacy fixed tip-goal bar (injected by the old player script as
   `position:fixed; top:30px; width:100%`) predates the premium 44px topbar, so
   it hid BEHIND it and only a ~10px strip of its track leaked out below the bar
   (the "pink pill peeking under STREAMING" artifact). The mobile shell already
   reflowed it to static; do the same at ALL widths so it flows in-document
   below the topbar instead of overlapping it. Scoped to the viewer shell only
   (never the broadcaster studio `#permanentGoalBar`). */
body.sl-live-room-shell-enabled .vdchat-overlay .goal-bar-container {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* Legacy global top bar (`.chatHeader`: site logo + GTranslate widget + a
   duplicate "Tokens" button, fixed full-width at top:0 / z-index:1000). The
   premium room shell replaces it with `.sl-room-topbar` (branding + Buy Tokens +
   Exit, z-index:10050, 44px). The legacy bar is 55px, so it sat BEHIND the
   premium bar with its bottom strip (logo edge) leaking out below it — the
   reported "overlay under STREAMING". It's already fully superseded and largely
   unclickable behind the premium bar, so hide it in the viewer shell. Fixed/out
   of flow, so removing it shifts no layout. NOT scoped to the broadcaster
   studio, and `.modelChatHeader` (the chat-panel header) is a different element,
   both untouched. */
body.sl-live-room-shell-enabled .chatHeader {
  display: none !important;
}

@media (max-width: 860px) {
  /* Mobile stacks video → chat → composer(fixed) → action rail, so the entire
     lower half is occupied — a bottom-anchored Next Cam always collides with the
     composer/rail. Instead of hiding it (G3 parity: Stripchat surfaces Next on
     mobile too), pin a compact control to the mid-right EDGE, overlaid on the
     video band — clear of the topbar (top) and the chat/composer/rail (bottom).
     This is the Stripchat "side arrow" pattern. */
  body.sl-live-room-shell-enabled #slRouletteBtn {
    display: inline-flex !important;
    left: auto !important;
    right: 8px !important;
    top: 40dvh !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 10050 !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5) !important;
  }
  body.sl-live-room-shell-enabled #slRouletteBtn.sl-room-nextcam-pinned {
    position: absolute !important;
    left: auto !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
  }
}

@media (max-width: 860px) {
  /* Stacked: video band (auto, sized by the stage), then chat, then page bottom.
     The video row is `auto` so the action rail / goal bar flow *below* the video
     instead of being crammed into the video row (which collapsed the stage). */
  body.sl-live-room-shell-enabled .vdchat-overlay .container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(320px, 58dvh) auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Override the desktop scroll-layout height cap so the stacked mobile page grows
     with its content and can actually scroll — which is what lets the video float
     into the PiP mini-player as the stage leaves the viewport. */
  body.sl-room-scroll-enabled.sl-live-room-shell-enabled .vdchat-overlay .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: auto !important;
  }

  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 100% !important;
  }

  body.sl-live-room-shell-enabled .vdchat-overlay .container > .sl-room-page-bottom {
    grid-row: 3 !important;
  }

  /* Stage wrap flows naturally so the rail/goal sit under the video. */
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-wrap {
    height: auto !important;
  }

  /* Give the docked video a definite band so it never collapses to a strip. */
  body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-wrap > .videoContainer,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-video-host > .videoContainer {
    height: 46dvh !important;
    min-height: 240px !important;
    max-height: 62dvh !important;
    flex: 0 0 auto !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Video host fills that band; JS (sl-room-video-fit.js) pins the <video>. */
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-video-host {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm .chatWindow {
    border-left: 0 !important;
    border-top: 1px solid var(--sl-room-border) !important;
    border-radius: 0 0 12px 12px !important;
  }

  /* (Mobile Next Cam is edge-pinned over the video above; no bottom anchor here —
     a bottom offset would fight the composer/rail again.) */
}

/* =====================================================================
   AUTHORITATIVE MOBILE LIVE-ROOM LAYOUT (last-loaded wins)
   Fixes verified on-VPS: composer was hidden behind the fixed bottom rail,
   .container was pinned position:fixed (squeezing chat to ~100px), and legacy
   top overlays (cpm bar, king refresh, username float) stacked over the clean
   header. This block is the single source of truth for the phone live room.
   ===================================================================== */

/* Legacy duplicate overlays the premium shell already replaces (header shows
   tk/min + goal, a king chip lives in the chat). They only crowd the stage. */
body.sl-live-room-shell-enabled .vdchat-overlay .cpmTopBG,
body.sl-live-room-shell-enabled .vdchat-overlay .cpmTop,
body.sl-live-room-shell-enabled .vdchat-overlay .refreshKing,
body.sl-live-room-shell-enabled .vdchat-overlay .mian-div-username,
/* The "N tokens/min" pill duplicates the topbar private-rate chip and floats
   over the REC/HD control cluster on desktop. Suppress it on the shell. */
body.sl-live-room-shell-enabled .vdchat-overlay .videoOptions a.cpm,
body.sl-live-room-shell-enabled .vdchat-overlay .videoOptions .cpm {
  display: none !important;
}

@media (max-width: 860px) {
  /* The container must flow/scroll with the page, never be pinned fixed. */
  body.sl-live-room-shell-enabled .vdchat-overlay .container {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    grid-template-rows: auto minmax(46dvh, 1fr) auto !important;
    height: auto !important;
  }

  /* Chat column gets real, usable height. */
  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm .chatWindow {
    height: auto !important;
    min-height: 50dvh !important;
  }

  /* Message stream scrolls and leaves clearance for the fixed composer + rail. */
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom {
    padding-bottom: 0 !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
    padding-bottom: 140px !important;
  }

  /* Composer is pinned as its OWN bar directly ABOVE the bottom action rail so it
     is ALWAYS visible while chatting (it used to be fixed *under* the rail). NOTE:
     plain px — env() inside calc() is dropped by the engine here and silently fell
     back to the legacy bottom:10px, which re-buried it under the rail.
     The `#bio2` prefix is REQUIRED: lic.php ships an inline, ID-scoped
     `#bio2 .chatWindow .chatRoom .message{bottom:10px!important}` that outranks a
     class-only selector — we must match its ID specificity to win the cascade. */
  body.sl-live-room-shell-enabled #bio2 .chatWindow .chatRoom .message {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 74px !important;
    width: auto !important;
    z-index: 10046 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #0d1220 !important;
    border: 1px solid var(--sl-room-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45) !important;
  }

  /* Keep the bottom action rail (Tip / Private / Tokens / Profile) fixed at the
     very bottom, below the composer. */
  body.sl-live-room-shell-enabled .sl-room-mobile-rail {
    z-index: 10045 !important;
  }

  /* Legacy fixed goal bar drops below the 44px topbar instead of over it. */
  body.sl-live-room-shell-enabled .vdchat-overlay .goal-bar-container {
    position: static !important;
    width: 100% !important;
  }

  /* The legacy .videoOptions cluster (Send Gift · Go Private · Follow · Get
     Tokens · balance) floated as a vertical stack over the middle of the cam
     (owner: "messy"). On phones it fully duplicates the fixed bottom action rail
     (Send Tip · Private Show · Buy tokens · Profile), so hide it here to keep the
     cam clean — every action stays one tap away on the rail. */
  body.sl-live-room-shell-enabled #bio2 .videoContainer .videoOptions,
  body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer .videoOptions {
    display: none !important;
  }

  /* Top video chrome (LIVE / Public-show / watching chips + REC·HD controls,
     injected by sl-room-video-controls.js) stacked as a tall column down the
     left of the cam on phones. Collapse it into a compact horizontal strip
     pinned to the top edge so the cam stays clean. */
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-video-chrome-top {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    pointer-events: none !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-chip-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 62% !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-chip-row > *,
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-video-controls,
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-video-controls > * {
    pointer-events: auto !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-chip {
    font-size: 10px !important;
    padding: 3px 8px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .mobileProfilePic {
    width: 30px !important;
    height: 30px !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .sl-room-video-controls {
    position: relative !important;
    top: auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
}

/* -------------------------------------------------------------------------
   DESKTOP OVERFLOW GUARD
   On ~1366/1440-wide laptops the stage+chat grid overflowed the viewport by
   ~24px, clipping the chat send button off the right edge. Guarantee the room
   can never exceed the viewport width: cap the page, let the video column
   (minmax(0,1fr)) truly shrink (video/host min-width:0), zero stray margins,
   and clamp the chat column to a width that always fits. box-sizing:border-box
   keeps the 1px chat border inside the column so 100% never overflows.
   ------------------------------------------------------------------------- */
@media (min-width: 861px) {
  body.sl-live-room-shell-enabled .sl-room-unified-page {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay,
  body.sl-live-room-shell-enabled .vdchat-overlay .container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .container {
    /* Chat kept comfortable but trimmed so the cam gets more width (owner: bigger
       video). JS (sl-room-layout-fix.js) is the final authority on exact px. */
    grid-template-columns: minmax(0, 1fr) clamp(320px, 22vw, 400px) !important;
    column-gap: 0 !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm {
    margin: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-stage-wrap,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .sl-room-video-host,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .videoContainer,
  body.sl-live-room-shell-enabled .vdchat-overlay .col-lg .videoContainer video {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* The absolutely-positioned legacy #messages list must never be wider than
     its chat panel, or its content spills past the panel's right border. */
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================================
   AUTHORITATIVE CHAT-COLUMN LAYOUT  (single source of truth, last-loaded)
   Root cause of the "quick actions overlap messages / composer floats over
   chat" bug: .chatRoom is a flex column but its children had no explicit
   ORDER or flex sizing, so the JS-injected .sl-room-chat-quick row and the
   legacy composer stacked on top of the (flex:1) message list. We pin the
   order + flex of every row so the message stream is the ONLY growing,
   scrolling area and nothing can ever overlap it.
   ===================================================================== */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Neutralize legacy videochat.css offsets (top/bottom/margin on relative rows)
   that were shifting each row out of its flex-flow slot and causing overlap.
   Every direct child must sit exactly where the flex column places it. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom > *:not(script):not(style) {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
}
/* The contest/footer strip belongs just above the composer, not at the top. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom > .sl-room-chat-footer {
  order: 25 !important;
  flex: 0 0 auto !important;
}
/* 1) Tabs / room header row */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom > .chatLabel,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom > .users {
  order: 0 !important;
  flex: 0 0 auto !important;
}
/* 2) The message stream — the ONLY element that grows + scrolls.
   flex-basis:0 (not auto) is essential: with basis:auto the list sizes to its
   content height and overflows its flex slot, spilling over the quick-action
   row below it. basis:0 makes it take exactly the leftover column height. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
  order: 10 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
}
/* lic.php ships an inline, 2-ID rule `#bio2 ... #messages{position:absolute;
   top:60px;bottom:-60px}` that shifts the list 60px down out of its flex slot
   (so it overlaps the quick-action row). Match its 2-ID specificity to reset
   the offsets and keep the list flowing inside its flex column. */
body.sl-live-room-shell-enabled #bio2 .chatWindow .chatRoom #messages {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}
/* 3) Quick actions (Private Chat / Tip Menu / Sex Toy) — compact, never overlap */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .sl-room-chat-quick {
  order: 20 !important;
  flex: 0 0 auto !important;
  position: static !important;
  padding: 8px 10px !important;
  background: #06080e !important;
  border-top: 1px solid var(--sl-room-border) !important;
}
/* 4) Composer input row pinned at the bottom of the column */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message {
  order: 30 !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

/* ---- Message readability: clear, spacious lines (Stripchat-grade) ---- */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages > li {
  padding: 7px 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 9px !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages > li + li {
  margin-top: 3px !important;
}
/* Subtle zebra so consecutive lines are easy to separate at a glance. */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages > li:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---- MOBILE: the bottom action rail already exposes Tip/Private/Tokens, so
   the in-chat quick-action row is redundant AND was overlapping the fixed
   composer. Hide it on phones for a clean, tall message stream. ---- */
@media (max-width: 860px) {
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .sl-room-chat-quick {
    display: none !important;
  }
  /* Larger, comfortable lines on phones. */
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages > li {
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding: 8px 12px !important;
  }

  /* The contest strip ("Top tipper … Winners in mm:ss") is docked in .col-sm and
     bled below the fixed composer/rail on phones. Hide it here — the same info
     surfaces in chat events; the stage stays clean. */
  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm > .sl-room-contest-bar,
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom > .sl-room-chat-footer {
    display: none !important;
  }

  /* The premium .inputarea ("Type your message…") is the visible composer; the
     legacy #messageText behind it carries the funds-warning placeholder which
     peeked out above the overlay on phones. Suppress its placeholder text (the
     input stays fully functional) so only the real prompt shows. */
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .message #messageText::placeholder {
    color: transparent !important;
  }
  /* Solid composer background so nothing shows through behind the input row. */
  body.sl-live-room-shell-enabled #bio2 .chatWindow .chatRoom .message {
    background: #0d1220 !important;
  }
}

/* ---- Overlap sweep (owner-reported red marks + full audit, 2026-08-04) ----
   Every rule below removes a measured element collision found by
   .qa/room_overlap_audit.mjs. All targets are legacy lic.php (encoded) markup
   or shell pieces, so CSS overrides are the only fix surface. */

/* Legacy chat/user-list toggle icons (`.chat-toggle-buttons` in the chat
   header). The premium shell injects its own Public / Private / user-count
   tabs (.sl-room-chat-tabs) wired to the same panes, so the legacy pair is
   fully redundant — and it collided on BOTH viewports: fixed at [192,0] over
   the topbar model name on phones, absolute at [1284,216] over the shell chat
   tabs + legacy Exit on desktop. */
body.sl-live-room-shell-enabled .chatWindow .chatLabel .chat-toggle-buttons {
  display: none !important;
}

/* Legacy in-page Exit link (direct child of the room container). The shell
   topbar already carries the Exit action on every viewport; this leftover sat
   invisibly over the Magic-search field's right edge on phones ([318,146]) and
   over the legacy toggle cluster on desktop ([1357,218]). */
body.sl-live-room-shell-enabled .vdchat-overlay .container > a.exit {
  display: none !important;
}

/* Legacy floating speaker/mute pill (fixed [335,742] on phones) rendered
   UNDERNEATH the round Send button — two controls in the same spot. The video
   control bar (sl-room-video-controls) + the "Tap for sound" pill already own
   volume, so drop the duplicate. Desktop collapses it to 0x0 anyway. */
body.sl-live-room-shell-enabled .speakerBtn2 {
  display: none !important;
}

@media (max-width: 860px) {
  /* Legacy profile-pic block ([23,73,45,45]) floated over the Profile/Videos/
     Photos/Feed tab row AND the Magic-search field (owner red-mark #1). The
     shell topbar + subheader already show the model avatar. Sibling legacy
     `.profilePi` (sic) / `.mobileProfilePic` is the old mobile profile button,
     absolutely pinned over the video's top-left at z:99 where it sat behind
     the LIVE pill — same duplicate, same fix. */
  body.sl-live-room-shell-enabled #bio2 .profilePic,
  body.sl-live-room-shell-enabled .videoContainer .profilePi,
  body.sl-live-room-shell-enabled .videoContainer a.topProfileBtn-off,
  body.sl-live-room-shell-enabled img.mobileProfilePic {
    display: none !important;
  }

  /* The topbar Exit (X) hangs at [338,46] on the subheader row, and the "Feed"
     tab slid underneath it. Reserve its lane so the tab strip stops short. */
  body.sl-live-room-shell-enabled .sl-room-header-nav {
    padding-right: 64px !important;
  }

  /* Next Cam was edge-pinned mid-RIGHT (40dvh), exactly where lic.php renders
     the circular JOIN FREE guest badge on the video (owner red-mark #2).
     Mirror it to the LEFT edge — same Stripchat side-arrow pattern, empty lane. */
  body.sl-live-room-shell-enabled #slRouletteBtn {
    left: 8px !important;
    right: auto !important;
  }

  /* Public/Private/users tabs flowed in-document to the page bottom, where the
     fixed composer (bottom:74) and bottom rail clipped them (14px buried under
     the rail in the member view). Pin them as their own strip directly ABOVE
     the composer so all three stay fully tappable. */
  body.sl-live-room-shell-enabled .chatWindow .chatLabel .sl-room-chat-tabs {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 140px !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 10044 !important;
    background: rgba(10, 13, 20, 0.96) !important;
    border: 1px solid var(--sl-room-border) !important;
    border-radius: 10px !important;
    padding: 2px 4px !important;
  }

  /* Extra clearance so the last chat lines scroll above the (now fixed) tab
     strip + composer + rail stack instead of hiding behind it. */
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
    padding-bottom: 195px !important;
  }

  /* Translate chip poked 16px above the composer bar; centre it on the bar so
     it reads as the composer's in-field leading button. */
  body.sl-live-room-shell-enabled #slTrChip {
    top: auto !important;
    left: 12px !important;
    bottom: 83px !important;
  }
}

/* =====================================================================
   PINNED ENGAGEMENT CARDS (owner recording parity, 2026-08-04)
   Stripchat pins Tip Menu (items inline), Sex Toy, Goal and Fan Club cards
   at the TOP of the chat stream. .sl-room-pinned-cards replaces the old
   plain quick-action row; same class kept for the JS guards, so the old
   order-20 rule above is superseded here (later declaration wins).
   ===================================================================== */
/* Pinned cards must be a COLUMN stack. Offline chat mounts them directly under
   .chatWindow (no .chatRoom), so also match that path — otherwise the legacy
   `.sl-room-chat-quick { display:grid }` 2-col layout wins and Tip Menu /
   Sex Toy / Goal collide (owner red-mark: "Control" over tip items). */
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .sl-room-chat-quick.sl-room-pinned-cards,
body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .sl-room-chat-quick.sl-room-pinned-cards,
body.sl-offline-room-active .sl-room-chat-quick.sl-room-pinned-cards,
.sl-room-chat-quick.sl-room-pinned-cards {
  order: 5 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 4px !important;
  padding: 8px 8px 6px !important;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sl-room-border) !important;
  max-height: 58% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.sl-room-pinned-cards .sl-pin-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.sl-room-pinned-cards .sl-pin-items {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;
}

.sl-room-pinned-cards .sl-pin-ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.sl-room-pinned-cards .sl-pin-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.35;
}

.sl-room-pinned-cards .sl-pin-label em {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: #94a3b8;
}

.sl-room-pinned-cards .sl-pin-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.sl-room-pinned-cards .sl-pin-btn i { font-size: 9px; }

.sl-room-pinned-cards .is-tip .sl-pin-ico { background: linear-gradient(135deg, #22c55e, #16a34a); }
.sl-room-pinned-cards .is-tip .sl-pin-btn { background: linear-gradient(180deg, #52b852, #3f9d4b); }
.sl-room-pinned-cards .is-toy .sl-pin-ico { background: linear-gradient(135deg, #ec4899, #db2777); }
.sl-room-pinned-cards .is-toy .sl-pin-btn { background: linear-gradient(180deg, #ec4899, #db2777); }
.sl-room-pinned-cards .is-goal .sl-pin-ico { background: linear-gradient(135deg, #10b981, #0d9488); }
.sl-room-pinned-cards .is-goal .sl-pin-btn { background: linear-gradient(180deg, #34d399, #10b981); }
.sl-room-pinned-cards .is-fanclub .sl-pin-ico { background: linear-gradient(135deg, #ef4444, #dc2626); }
.sl-room-pinned-cards .is-fanclub .sl-pin-btn { background: linear-gradient(180deg, #f87171, #dc2626); }
.sl-room-pinned-cards .is-games .sl-pin-ico { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.sl-room-pinned-cards .is-games .sl-pin-btn { background: linear-gradient(180deg, #a78bfa, #7c3aed); }

/* Inline tip-menu items under the Tip Menu card — label left, price right. */
.sl-room-pinned-cards .sl-pin-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 2px 34px;
}

.sl-room-pinned-cards .sl-pin-items:empty { display: none; }

.sl-room-pinned-cards .sl-pin-item {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.sl-room-pinned-cards .sl-pin-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sl-room-pinned-cards .sl-pin-item-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* R13 — Offline tip-menu text must never bleed outside the chat column. */
body.sl-offline-room-active .sl-room-pinned-cards,
body.sl-offline-room-active .sl-room-chat-quick.sl-room-pinned-cards {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
body.sl-offline-room-active .sl-room-pinned-cards .sl-pin-items,
body.sl-offline-room-active .sl-room-pinned-cards .sl-pin-item {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
body.sl-offline-room-active .sl-room-pinned-cards .sl-pin-item-label {
  max-width: min(100%, 11.5rem);
}

.sl-room-pinned-cards .sl-pin-item-price {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: #7dd3fc;
  white-space: nowrap;
}

.sl-room-pinned-cards .sl-pin-item-price i { font-size: 9px; opacity: 0.7; }

.sl-room-pinned-cards .sl-games-hidden { display: none !important; }

/* lic.php renders its own legacy goal bar inside the chat header whenever the
   model has a tipgoal set — a giant gold .goal-bar-container block over the
   chat tabs. The shell already shows the goal under the stage
   (.sl-room-goal-bar) and in the pinned goal card, so the legacy one is pure
   duplication. */
body.sl-live-room-shell-enabled .chatWindow .chatLabel .goal-bar-container {
  display: none !important;
}

/* Legacy under-video link row ("Send Gift / Go Private / Follow / Get Tokens",
   lic.php) sits in the exact slot of the shell action rail — every function is
   already covered by the rail (♥ follow, Private Show, Send Tip incl. gift
   mode) and the topbar (Buy tokens). Post-R2 audit measured 90-95% box
   collisions with the rail buttons on desktop. */
body.sl-live-room-shell-enabled a.biochatroom,
body.sl-live-room-shell-enabled a.biochatroomfollow {
  display: none !important;
}

/* Legacy floating volume anchor collides with the composer translate toggle;
   the shell's video chrome owns mute/volume. */
body.sl-live-room-shell-enabled .vdchat-overlay a.volume {
  display: none !important;
}

@media (max-width: 860px) {
  /* Phones: the under-stage goal BAR lands behind the fixed composer and its
     "Tip N tk to goal" button bled through the input. The pinned goal card in
     the chat carries the goal on mobile. */
  body.sl-live-room-shell-enabled .sl-room-goal-bar {
    display: none !important;
  }

  /* A1 audit: the desktop under-video action rail (♥ / Private Show / Send
     Tip) still occupied mid-screen space on phones — visually transparent but
     stacked over the chat's pinned cards and stealing their taps. Every one
     of its actions already lives in the fixed mobile bottom rail / topbar. */
  body.sl-live-room-shell-enabled .sl-room-action-rail {
    display: none !important;
  }
}

/* Under-video rail ♥ favourite + live follower count (Stripchat parity).
   Mirrors the topbar follow button's state; red heart once following. */
body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-rail-heart {
  background: rgba(15, 18, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e2e8f0 !important;
  font-weight: 800;
}

body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-rail-heart i {
  color: #94a3b8;
  transition: color 0.15s ease;
}

body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-rail-heart.is-following {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

body.sl-live-room-shell-enabled .sl-room-action-rail .sl-room-rail-heart.is-following i {
  color: #ef4444;
}

/* Mobile: the cards flow between the stage and the message stream (page
   scrolls), so they are safe to show — compact paddings, shorter cap. The
   old blanket display:none for .sl-room-chat-quick is superseded here. */
@media (max-width: 860px) {
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom .sl-room-chat-quick.sl-room-pinned-cards,
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .sl-room-chat-quick.sl-room-pinned-cards,
  body.sl-offline-room-active .sl-room-chat-quick.sl-room-pinned-cards,
  .sl-room-chat-quick.sl-room-pinned-cards {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px 6px 4px !important;
  }
  .sl-room-pinned-cards .sl-pin-items { margin-left: 30px; }
  .sl-room-pinned-cards .sl-pin-item { padding: 6px 8px; }
  /* Phones: keep the pinned cluster short — top 2 menu items only (the Tip
     Menu button opens the full list), so the message stream stays tall. */
  .sl-room-pinned-cards .sl-pin-item:nth-child(n+3) { display: none; }

  /* Goal label can be long ("465 tk left to reach…") — never overflow the card. */
  .sl-room-pinned-cards .is-goal .sl-pin-label {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
}

/* =====================================================================
   OVERLAY POLISH (owner red-mark 2026-08-06 evening)
   Transparent START REC / volume / OFF cluster + no dark chrome bar.
   Dual-cam PiP must not sit under Headset VR (handled in sl-dual-cam.css).
   ===================================================================== */
body.sl-live-room-shell-enabled .sl-room-video-chrome-top,
body.sl-live-room-shell-enabled .sl-room-video-chrome-bottom {
  background: transparent !important;
}
body.sl-live-room-shell-enabled .sl-room-video-controls {
  background: transparent !important;
  box-shadow: none !important;
}
body.sl-live-room-shell-enabled .sl-room-ctrl-btn,
body.sl-live-room-shell-enabled .sl-room-rec-btn {
  background: rgba(15, 23, 42, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  box-shadow: none !important;
}

/* =====================================================================
   OVERLAY QUARANTINE (owner red-mark 2026-08-06)
   Mobile BRB room: Headset VR sat on Tip Menu; Next Cam mid-stage; hostess
   lines clipped by fixed Public/Private tabs; stage/chat seam crowded.
   ===================================================================== */

/* VR toggle lives in stage chrome only — never above Tip Menu z-layer. */
body.sl-live-room-shell-enabled #slVrToggle,
body.sl-live-room-shell-enabled .sl-vr-toggle-btn,
body.sl-offline-room-active #slVrToggle,
body.sl-offline-room-active .sl-vr-toggle-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 36 !important;
  max-width: calc(100% - 20px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Camera paused / BRB: hide stage toys that fight the wait card.
   Beat mobile `#slRouletteBtn { display:inline-flex !important }` (same file). */
body.sl-model-stream-paused.sl-live-room-shell-enabled #slVrToggle,
body.sl-model-stream-paused.sl-live-room-shell-enabled .sl-vr-toggle-btn,
body.sl-model-stream-paused.sl-live-room-shell-enabled #slRouletteBtn,
body.sl-model-stream-paused #slVrToggle,
body.sl-model-stream-paused .sl-vr-toggle-btn,
body.sl-model-stream-paused #slRouletteBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Spy / Ticket stage quarantine (owner red-mark 2026-08-07):
   Headset VR + Next Cam must not sit on the lounge / ticket invite. */
body.sl-spy-stage-active #slVrToggle,
body.sl-spy-stage-active .sl-vr-toggle-btn,
body.sl-spy-stage-active #slRouletteBtn,
body.sl-spy-wait-lounge-on #slVrToggle,
body.sl-spy-wait-lounge-on .sl-vr-toggle-btn,
body.sl-spy-wait-lounge-on #slRouletteBtn,
body.sl-ticket-stage-open #slVrToggle,
body.sl-ticket-stage-open .sl-vr-toggle-btn,
body.sl-ticket-stage-open #slRouletteBtn,
body.sl-spy-stage-active.sl-live-room-shell-enabled #slVrToggle,
body.sl-spy-stage-active.sl-live-room-shell-enabled .sl-vr-toggle-btn,
body.sl-spy-stage-active.sl-live-room-shell-enabled #slRouletteBtn,
body.sl-spy-wait-lounge-on.sl-live-room-shell-enabled #slVrToggle,
body.sl-spy-wait-lounge-on.sl-live-room-shell-enabled .sl-vr-toggle-btn,
body.sl-spy-wait-lounge-on.sl-live-room-shell-enabled #slRouletteBtn,
body.sl-ticket-stage-open.sl-live-room-shell-enabled #slVrToggle,
body.sl-ticket-stage-open.sl-live-room-shell-enabled .sl-vr-toggle-btn,
body.sl-ticket-stage-open.sl-live-room-shell-enabled #slRouletteBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Soft Invite CTA also stays off gated stages */
body.sl-spy-stage-active .sl-lumi-link-room-cta,
body.sl-spy-wait-lounge-on .sl-lumi-link-room-cta,
body.sl-ticket-stage-open .sl-lumi-link-room-cta {
  display: none !important;
}

/*
 * Private Show overlay quarantine (owner red-marks 2026-08-07):
 * Hide stage HUD chrome that bleeds through the Private gate (double LIVE,
 * watching chips, REC/HD controls). Keep chat / tip rails outside the host.
 */
body.sl-spy-stage-active .sl-room-video-controls,
body.sl-spy-stage-active .sl-room-video-controls > *,
body.sl-spy-stage-active .sl-room-stage-hud,
body.sl-spy-stage-active .sl-room-video-chrome,
body.sl-spy-stage-active .sl-room-video-chrome-top,
body.sl-spy-stage-active .sl-room-chip-row,
body.sl-spy-stage-active .sl-room-chip,
body.sl-spy-stage-active .sl-dual-cam-badge,
body.sl-spy-stage-active .sl-dual-cam-pip,
body.sl-spy-stage-active #slDualCamPip,
body.sl-spy-stage-active [data-sl-dual-cam-pip],
body.sl-spy-stage-active .sl-room-stage-pip,
body.sl-spy-stage-active #slNextCamBtn,
body.sl-spy-stage-active .sl-next-cam-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.sl-spy-stage-active .sl-room-video-host {
  overflow: hidden !important;
}
/* Magic search / media tabs clutter the Private gate on mobile — park them */
body.sl-spy-stage-active .sl-room-magic-search,
body.sl-spy-stage-active .sl-room-header-nav .sl-room-magic-search {
  display: none !important;
}

/* Owner red-oval 2026-08-07: stage fills the video band; Tip Menu starts
   cleanly UNDER it — never overlapping the Exclusive/Private card bottom. */
@media (max-width: 860px) {
  body.sl-spy-stage-active .sl-room-stage-wrap,
  body.sl-spy-stage-active .sl-room-video-host,
  body.sl-spy-stage-active .videoContainer {
    overflow: hidden !important;
    isolation: isolate;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    z-index: 5 !important;
  }
  body.sl-spy-stage-active .sl-spy-stage {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    z-index: 48 !important;
  }
  /* Tip rails stay BELOW the stage in document flow — do not float over it */
  body.sl-spy-stage-active .vdchat-overlay .col-sm {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    transform: none !important;
  }
  body.sl-spy-stage-active .vdchat-overlay .col-sm .chatWindow,
  body.sl-spy-stage-active .sl-room-pinned-cards,
  body.sl-spy-stage-active .sl-room-chat-quick {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
    top: auto !important;
    background-color: #0b0d12;
  }
  body.sl-spy-stage-active .vdchat-overlay .col-sm .chatWindow {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  body.sl-spy-stage-active .vdchat-overlay .col-lg {
    z-index: 5 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* One goal surface only: pinned chat goal card wins over Wave-M2 chip */
body.sl-live-room-shell-enabled .sl-room-chat-quick ~ .sl-goal-chat-chip,
body.sl-live-room-shell-enabled .sl-room-pinned-cards ~ .sl-goal-chat-chip,
body.sl-live-room-shell-enabled .chatWindow .sl-goal-chat-chip:nth-of-type(n+2),
body.sl-live-room-shell-enabled .chatRoom .sl-goal-chat-chip + .sl-goal-chat-chip {
  display: none !important;
}
body.sl-live-room-shell-enabled .sl-room-pinned-cards .sl-pin-card.is-goal ~ .sl-goal-chat-chip,
body.sl-live-room-shell-enabled:has(.sl-pin-card.is-goal) .sl-goal-chat-chip {
  display: none !important;
}

/* BRB — all viewports (desktop + mobile): Magic search off the stage/header */
body.sl-model-stream-paused .sl-room-magic-search,
body.sl-model-stream-paused .sl-room-header-nav .sl-room-magic-search,
body.sl-model-stream-paused .sl-room-subheader .sl-room-magic-search,
body.sl-model-stream-paused .sl-room-topbar .sl-room-magic-search {
  display: none !important;
}

/* BRB: hide PiP mini-player — it floats over Kindred rails when stage is paused.
   Tip Menu / Sex Toy / Goal / Fan Club stay visible — they are product features. */
body.sl-model-stream-paused .sl-room-pip {
  display: none !important;
}

/* Stage above chat column so leaked absolute children cannot paint Tip Menu
   over the countdown. */
body.sl-live-room-shell-enabled .vdchat-overlay .col-lg {
  position: relative;
  z-index: 2;
}
body.sl-live-room-shell-enabled .vdchat-overlay .col-sm {
  position: relative;
  z-index: 1;
}
body.sl-live-room-shell-enabled .vdchat-overlay .videoContainer {
  isolation: isolate;
}

@media (max-width: 860px) {
  /* Fixed topbar is 46px — keep overlay content below it, never under/over it. */
  body.sl-live-room-shell-enabled .vdchat-overlay {
    padding-top: 46px !important;
    box-sizing: border-box !important;
  }

  /* Profile / Videos / Photos / Feed + Magic search must occupy flow space
     under the topbar — never float over the BRB / video stage. */
  body.sl-live-room-shell-enabled .sl-room-subheader {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 4 !important;
    margin: 0 0 6px !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.sl-live-room-shell-enabled .vdchat-overlay .container {
    position: relative !important;
    z-index: 1 !important;
  }

  body.sl-model-stream-paused .sl-room-header-tabs {
    width: 100%;
  }
  /* Compact Profile/Videos/Photos/Feed strip — single row, no second search line */
  body.sl-model-stream-paused .sl-room-subheader .sl-room-header-nav {
    padding-right: 8px !important;
    gap: 4px !important;
  }
  body.sl-model-stream-paused .sl-room-header-tab {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Clear seam between stage and Tip Menu cluster */
  body.sl-live-room-shell-enabled .vdchat-overlay .col-sm .chatWindow {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 0 !important;
    background: #070a12 !important;
  }

  body.sl-model-stream-paused .sl-room-pinned-cards .sl-pin-card.is-tip {
    margin-bottom: 4px !important;
  }

  /* Bot / hostess lines must clear fixed tabs + composer + rail */
  body.sl-live-room-shell-enabled #slRoomBotNoticeHost,
  body.sl-live-room-shell-enabled .vdchat-overlay .chatWindow .chatRoom #messages {
    padding-bottom: 210px !important;
  }
  body.sl-live-room-shell-enabled .sl-room-bot-notice {
    margin-bottom: 8px !important;
  }
  body.sl-live-room-shell-enabled .sl-room-bot-notice.is-hostess {
    margin-bottom: 10px !important;
  }

  /* Translate chip: keep left of composer, never over Buy tokens / hostess */
  body.sl-live-room-shell-enabled #slTrChip {
    z-index: 10043 !important;
    bottom: 86px !important;
    left: 10px !important;
  }

  /* Next Cam stays left-edge mid-stage but below BRB layer when not paused */
  body.sl-live-room-shell-enabled #slRouletteBtn {
    z-index: 35 !important;
  }
}