/* R12 + R15 — Stage overlay layers + guest-preview chrome lane */

:root {
  --sl-overlay-stage-fx: 26;
  --sl-overlay-preview: 36;
  --sl-overlay-toast: 45;
  --sl-overlay-chrome: 50;
}

/* Dedicated lane: top-LEFT of the video stage (never under Exit / Buy tokens). */
.sl-room-preview-lane {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  bottom: auto;
  z-index: var(--sl-overlay-preview);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  max-width: min(240px, calc(100% - 96px));
  pointer-events: none;
}

.sl-room-preview-lane[hidden] {
  display: none !important;
}

.sl-room-preview-lane.is-body {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: auto;
  z-index: 100040;
}

.sl-room-preview-lane .sl-room-access-countdown,
.sl-room-preview-lane .sl-room-access-countdown--stage {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  max-width: 100%;
  z-index: auto !important;
}

/* Stage FX layer defaults (gifts / goal) stay inside the video host. */
.sl-room-video-host .sl-vg-stage,
.sl-room-offline-stage .sl-vg-stage,
.videoContainer .sl-vg-stage,
#slGoalAutoLayer {
  z-index: var(--sl-overlay-stage-fx) !important;
}

/* Never let gift/goal layers park on document.body. */
body > .sl-vg-stage,
body > #slGoalAutoLayer {
  display: none !important;
}

@media (max-width: 860px) {
  .sl-room-preview-lane {
    top: 6px;
    left: 6px;
    max-width: min(220px, calc(100% - 72px));
  }

  /* Kill legacy body-fixed bottom/center countdown placement. */
  body > .sl-room-access-countdown:not(.sl-room-access-countdown--stage) {
    top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* When preview lane is visible, keep offline #slTrChip below it. */
  body.sl-offline-room-active:has(#slRoomPreviewLane:not([hidden])) #slTrChip {
    top: calc(100px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
  }
}