.sl-room-video-host{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
}
.sl-room-video-chrome{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:12;
}
.sl-room-video-chrome-top,
.sl-room-video-chrome-bottom{
  position:absolute;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
}
.sl-room-video-chrome-top{
  top:0;
  /* Transparent so the live feed shows through START REC / volume / OFF row */
  background:transparent;
}
.sl-room-video-chrome-bottom{
  bottom:0;
  background:transparent;
  justify-content:flex-start;
}
.sl-room-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.sl-room-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.2);
  color:#f8fafc;
  font-size:12px;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.sl-room-chip.live{
  background:rgba(220,38,38,.88);
  border-color:rgba(248,113,113,.35);
}
.sl-room-chip.public{
  background:rgba(124,58,237,.78);
  border-color:rgba(196,181,253,.28);
}
.sl-room-chip.viewers{
  background:rgba(15,23,42,.78);
}
.sl-room-join-free{
  pointer-events:auto;
  margin-left:auto;
  padding:8px 14px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}
.sl-room-action-rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px 0;
}
.sl-room-action-rail .sl-room-action{
  flex:1 1 auto;
  min-height:42px;
  justify-content:center;
}
.sl-room-goal-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10055;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(8,10,16,.94);
  border-top:1px solid rgba(139,92,246,.22);
  backdrop-filter:blur(14px);
  color:#f8fafc;
  font-size:13px;
}
.sl-room-goal-bar[hidden]{
  display:none!important;
}
.sl-room-goal-bar-copy{
  flex:1 1 auto;
  min-width:0;
}
.sl-room-goal-bar-copy strong{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sl-room-goal-bar-copy span{
  display:block;
  color:#cbd5e1;
  font-size:12px;
}
.sl-room-goal-bar-track{
  flex:0 0 min(220px,34vw);
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.sl-room-goal-bar-fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  transition:width .35s ease;
}
.sl-room-goal-bar-tip{
  pointer-events:auto;
  padding:10px 16px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#111827;
  font-weight:800;
  cursor:pointer;
}
@media (max-width:860px){
  .sl-room-goal-bar{
    flex-wrap:wrap;
  }
  .sl-room-goal-bar-track{
    flex:1 1 100%;
    order:3;
  }
}

/* ============================================================
   Video control cluster (Stripchat parity) — top-right of player
   ============================================================ */
.sl-room-video-controls{
  pointer-events:auto;
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.sl-room-ctrl-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:34px;
  min-width:34px;
  padding:0 9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,23,42,.22);
  color:#f8fafc;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.sl-room-ctrl-btn:hover{
  background:rgba(15,23,42,.42);
  border-color:rgba(255,255,255,.38);
}
.sl-room-ctrl-btn.is-active{
  border-color:rgba(242,182,0,.7);
  color:#fde68a;
  background:rgba(242,182,0,.18);
}
.sl-room-ctrl-btn.is-muted{
  color:#f87171;
}
.sl-room-ctrl-btn .sl-vc-tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  opacity:.85;
}
.sl-room-ctrl-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:40;
  min-width:180px;
  padding:8px;
  border-radius:12px;
  background:rgba(11,15,22,.98);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.sl-room-ctrl-pop[hidden]{ display:none; }
.sl-room-ctrl-pop-title{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#94a3b8;
  padding:2px 8px 8px;
}
.sl-room-ctrl-pop-row{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#e2e8f0;
  font-size:13px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.sl-room-ctrl-pop-row:hover{ background:rgba(255,255,255,.07); }
.sl-room-ctrl-pop-row .sl-set-state{
  margin-left:auto;
  font-size:11px;
  font-weight:800;
  color:#94a3b8;
}
.sl-room-vc-range{
  width:100%;
  accent-color:#f2b600;
}

/* START REC button — glass / see-through so the stream stays visible */
.sl-room-rec-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(15,23,42,.2);
  color:#f8fafc;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  box-shadow:none;
  transition:background .15s ease,border-color .15s ease;
}
.sl-room-rec-btn:hover{ background:rgba(15,23,42,.4); border-color:rgba(255,255,255,.4); }
.sl-room-rec-btn i{ color:#ef4444; font-size:11px; }
.sl-room-rec-btn.is-recording{
  background:rgba(220,38,38,.9);
  border-color:rgba(248,113,113,.5);
}
.sl-room-rec-btn.is-recording i{ color:#fff; animation:sl-rec-pulse 1.2s ease-in-out infinite; }
@keyframes sl-rec-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* Record public show modal */
.sl-room-rec-modal{
  position:fixed;
  inset:0;
  z-index:10070;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(4,6,11,.72);
  backdrop-filter:blur(4px);
}
.sl-room-rec-modal[hidden]{ display:none!important; }
.sl-room-rec-modal-card{
  width:min(100%,360px);
  padding:26px 24px 22px;
  border-radius:16px;
  text-align:center;
  background:linear-gradient(180deg,rgba(24,28,38,.99),rgba(13,16,24,.99));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  color:#f8fafc;
}
.sl-room-rec-modal-card > div:first-child{ color:#ef4444; }
.sl-room-rec-modal-card h3{ margin:10px 0 8px; font-size:19px; font-weight:800; }
.sl-room-rec-modal-card p{ margin:0 0 12px; color:#cbd5e1; font-size:14px; line-height:1.55; }
.sl-room-rec-modal-card p strong{ color:#f8fafc; }
.sl-room-rec-modal-card .rate{
  display:inline-block;
  margin:0 auto 16px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(242,182,0,.14);
  border:1px solid rgba(242,182,0,.3);
  color:#fde68a;
  font-weight:800;
  font-size:13px;
}
.sl-room-rec-modal-card .cta{
  display:inline-block;
  width:100%;
  padding:12px 18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  color:#111827;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}
.sl-room-rec-modal-card .cta:hover{ filter:brightness(1.05); }

/* Contest countdown bar */
.sl-room-contest-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding:10px 14px;
  background:rgba(8,10,16,.94);
  border-top:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-size:13px;
}
.sl-room-contest-gift{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(242,182,0,.14);
  color:#fbbf24;
  flex:0 0 auto;
}
.sl-room-contest-copy{ flex:1 1 auto; min-width:0; }
.sl-room-contest-copy b{ color:#f8fafc; font-variant-numeric:tabular-nums; }
.sl-room-contest-link{
  color:#7dd3fc!important;
  font-weight:700;
  text-decoration:none!important;
  font-size:12px;
}
.sl-room-contest-link:hover{ color:#bae6fd!important; text-decoration:underline!important; }
.sl-room-contest-collapse{
  border:0;
  background:transparent;
  color:#94a3b8;
  cursor:pointer;
  padding:4px;
  flex:0 0 auto;
}
.sl-room-contest-bar.is-collapsed .sl-room-contest-copy,
.sl-room-contest-bar.is-collapsed .sl-room-contest-link{ display:none; }

/* Theatre mode — widen the video column, tuck the chat */
body.sl-room-theatre .vdchat-overlay .container .col-sm{ opacity:.35; }

@media (max-width:860px){
  .sl-room-video-controls{ gap:5px; }
  .sl-room-ctrl-btn{ height:30px; min-width:30px; padding:0 7px; font-size:12px; }
  .sl-room-rec-btn{ height:30px; padding:0 10px; font-size:11px; }
}

/* Fan-spy discount badge. Preferred: an inline chip in the LIVE/Public chip row
   (consistent on desktop + mobile, never overlaps tip toasts / video controls). */
.sl-room-chip.sl-room-chip-fanspy{
  background:linear-gradient(135deg,#059669,#10b981);
  color:#fff;font-weight:700;border:0;
}
.sl-room-chip.sl-room-chip-fanspy small{opacity:.85;font-weight:600;}
/* In-flow fallback (tip menu / chat tabs) — never position:fixed overlay. */
.sl-room-fanspy-inline{
  display:inline-flex;align-items:center;gap:6px;
  margin:6px 0 8px;
  padding:6px 11px;border-radius:999px;
  background:linear-gradient(135deg,#059669,#10b981);color:#fff;
  font-weight:700;font-size:12px;line-height:1.2;
  box-shadow:none;position:static !important;left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;z-index:auto;
  max-width:100%;
}
.sl-room-fanspy-inline small{opacity:.85;font-weight:600;}
/* Legacy float classes neutralized (owner overlay 2026-08-05 — toast collision). */
.sl-room-fanspy-float,
.sl-room-fanspy-float.sl-room-fanspy-float--chat{
  position:static !important;top:auto !important;right:auto !important;
  left:auto !important;bottom:auto !important;z-index:auto !important;
  display:inline-flex;align-items:center;gap:6px;
  margin:6px 0 8px;padding:6px 11px;border-radius:999px;
  background:linear-gradient(135deg,#059669,#10b981);color:#fff;
  font-weight:700;font-size:12px;box-shadow:none;max-width:100%;
}
body.sl-offline-room-active #slFanSpyBadge,
[data-sl-offline-shell="1"] #slFanSpyBadge,
.sl-offline-room-shell #slFanSpyBadge{
  display:none !important;
}

/* R26 — Offline kill-switch: never leave LIVE/Public chrome or empty Cam2 PiP on offline rooms
   (force-live / meta race can leave DOM nodes after is_live flips false). */
body.sl-offline-room-active .sl-room-video-chrome,
body.sl-offline-room-active .sl-room-video-chrome-top,
body.sl-offline-room-active .sl-room-video-chrome-bottom,
[data-sl-offline-shell="1"] .sl-room-video-chrome,
.sl-offline-room-shell .sl-room-video-chrome,
body.sl-offline-room-active #slDualCamPip,
body.sl-offline-room-active .sl-dual-cam-pip,
[data-sl-offline-shell="1"] #slDualCamPip,
[data-sl-offline-shell="1"] .sl-dual-cam-pip,
.sl-offline-room-shell #slDualCamPip,
.sl-offline-room-shell .sl-dual-cam-pip,
.sl-room-offline-stage #slDualCamPip,
.sl-room-offline-stage .sl-dual-cam-pip{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (max-width:860px){
  .sl-room-fanspy-inline,
  .sl-room-fanspy-float{
    font-size:11px;padding:6px 10px;
  }
}