/* ============================================================================
   SLIDESHOW PREVIEW MODAL — MOBILE REDESIGN (v5)
   ----------------------------------------------------------------------------
   Restores the layout from the design the user approved:
     • Slideshow canvas fills the modal (no wasted black space below)
     • Vertical icon rail FLOATS over the right side of the stage
     • Tiny slim titlebar at the very top (style name only)
     • Tiny slim CTA strip at the very bottom (Use This Style)
   Native playback bar (play/pause + dots + time) is left untouched.

   Desktop safety: every rule lives inside @media (max-width: 900px).
   No styles leak to desktop. Canvas sizing on desktop is untouched.
   ============================================================================ */

/* Mobile chrome hidden on desktop */
.s5-ss-mobile-titlebar,
.s5-ss-mobile-cta,
.s5-ss-mobile-rail,
.s5-ss-drawer-scrim {
    display: none;
}

/* ============================================================================
   MOBILE (≤900px)
   ============================================================================ */
@media (max-width: 900px) {

    .s5-slideshow-modal {
        padding: 10px !important;
    }

    .s5-slideshow-modal-inner {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        height: calc(100vh - 20px) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #0F1115 !important;
    }

    /* Hide native header + footer rows (replaced by our slim chrome) */
    .s5-slideshow-modal-header,
    .s5-slideshow-modal-footer-row,
    .s5-transition-row {
        display: none !important;
    }

    /* ─── Slim titlebar ─── */
    .s5-ss-mobile-titlebar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        flex-shrink: 0;
        background: rgba(0,0,0,0.55);
        border-bottom: 1px solid rgba(255,255,255,0.05);
        z-index: 5;
    }

    .s5-ss-mtitle-icon {
        color: var(--sj-orange,#F58220);
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .s5-ss-mtitle-text {
        flex: 1;
        min-width: 0;
        font-size: 0.78rem;
        font-weight: 800;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .s5-ss-mtitle-meta {
        flex-shrink: 0;
        font-size: 0.62rem;
        font-weight: 600;
        color: rgba(255,255,255,0.5);
    }

    /* ─── Body fills all space between titlebar and CTA ─── */
    .s5-slideshow-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        position: relative;
        background: #000;
    }

    .s5-slideshow-modal-left {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        position: relative;
    }

    /* CRITICAL: stage fills available space, no fixed aspect ratio on mobile.
       Reserve bottom padding so the engine's absolute-positioned playback
       controls don't sit at the visual bottom edge (where they'd clip into
       the CTA) — they get pushed up into the safe area instead. */
    .s5-slideshow-modal-stage {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        background: #000 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

        /* Canvas centers + letterboxes inside the stage. object-fit handles the
       letterbox when the canvas drawing buffer aspect ≠ stage aspect, so the
       top of the slide is never cropped. */
        .s5-slideshow-modal-stage canvas,
        .s5-slideshow-modal-stage > canvas,
        .s5-slideshow-modal-stage img,
        .s5-slideshow-modal-stage video {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            display: block !important;
        }

        /* Push the engine's own playback pill up off the bottom edge so it sits
       above the CTA when our JS relocator hasn't found+moved it yet. Targets
       common positioning patterns without needing to know the exact class. */
        .s5-slideshow-modal-stage > div[class*="ontrol"],
        .s5-slideshow-modal-stage > div[class*="layback"],
        .s5-slideshow-modal-stage > div[class*="ottom"],
        .s5-slideshow-modal-stage > .s5-slideshow-controls,
        .s5-slideshow-modal-stage > .s5-playback-controls,
        .s5-slideshow-modal-stage > .s5-playback-pill,
        .s5-slideshow-modal-stage > .s5-slideshow-playback {
            bottom: 14px !important;
            z-index: 10;
        }

    /* Hide desktop side panel by default — slid in as a drawer when needed */
    .s5-slideshow-modal-right {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 62% !important;
        height: 62% !important;
        z-index: 30;
        background: #0F1115 !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -20px 50px rgba(0,0,0,0.45) !important;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32,0.72,0.18,1);
        overflow: hidden !important;
        padding: 0 !important;
        display: none !important;
        flex-direction: column !important;
    }

    .s5-slideshow-modal[data-mobile-drawer="music"] .s5-slideshow-modal-right,
    .s5-slideshow-modal[data-mobile-drawer="text"] .s5-slideshow-modal-right {
        display: flex !important;
        transform: translateY(0);
    }

        .s5-slideshow-modal[data-mobile-drawer="music"] .s5-slideshow-modal-right .s5-text-overlay-section {
            display: none !important;
        }

        .s5-slideshow-modal[data-mobile-drawer="text"] .s5-slideshow-modal-right > .s5-ss-songs-header,
        .s5-slideshow-modal[data-mobile-drawer="text"] .s5-slideshow-modal-right > .s5-song-list,
        .s5-slideshow-modal[data-mobile-drawer="text"] .s5-slideshow-modal-right > #s5ModalSongList {
            display: none !important;
        }

    .s5-slideshow-modal-right::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255,255,255,0.22);
    }

    .s5-slideshow-modal-right > * {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .s5-slideshow-modal-right .s5-ss-songs-header {
        padding-top: 18px !important;
        padding-bottom: 10px !important;
        font-size: 0.78rem !important;
    }

    .s5-slideshow-modal-right .s5-song-list,
    .s5-slideshow-modal-right #s5ModalSongList {
        flex: 1;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto;
        padding-bottom: 16px !important;
    }

    .s5-slideshow-modal-right .s5-text-overlay-section {
        border-top: none !important;
        padding-top: 18px !important;
        padding-bottom: 16px !important;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    /* Transition popover (bottom sheet) */
    .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-transition-row {
        display: flex !important;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        background: #0F1115;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -20px 50px rgba(0,0,0,0.45);
        padding: 22px 14px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-height: 60%;
        overflow-y: auto;
    }

        .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-transition-row::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 36px;
            height: 4px;
            border-radius: 4px;
            background: rgba(255,255,255,0.22);
        }

    .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-transition-label {
        flex-basis: 100% !important;
        font-size: 0.68rem !important;
        color: rgba(255,255,255,0.55) !important;
    }

    .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-transition-pills {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-transition-pill {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    /* Scrim under drawers */
    .s5-ss-drawer-scrim {
        display: block !important;
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 25;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s;
    }

    .s5-slideshow-modal[data-mobile-drawer="music"] .s5-ss-drawer-scrim,
    .s5-slideshow-modal[data-mobile-drawer="text"] .s5-ss-drawer-scrim,
    .s5-slideshow-modal[data-mobile-drawer="transition"] .s5-ss-drawer-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* ─── Floating vertical icon rail (overlays the stage) ─── */
    .s5-ss-mobile-rail {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 40;
        pointer-events: auto;
    }

    .s5-ss-rail-btn {
        all: unset;
        cursor: pointer;
        width: 42px;
        height: 42px;
        border-radius: 13px;
        background: rgba(15,17,21,0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        box-shadow: 0 10px 24px rgba(0,0,0,0.4);
        transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
        position: relative;
    }

        .s5-ss-rail-btn:hover {
            transform: translateY(-1px) scale(1.04);
            background: rgba(245,130,32,0.92);
            border-color: rgba(255,255,255,0.2);
            color: #fff;
        }

        .s5-ss-rail-btn.is-active {
            background: linear-gradient(135deg,#F58220 0%,#D8691A 100%);
            border-color: rgba(255,255,255,0.35);
            color: #fff;
            box-shadow: 0 12px 28px rgba(245,130,32,0.45);
            transform: scale(1.06);
        }

        .s5-ss-rail-btn[data-rail="close"]:hover {
            background: rgba(239,68,68,0.85) !important;
        }

        .s5-ss-rail-btn[data-rail="maximize"]:hover {
            background: rgba(255,255,255,0.18) !important;
            color: #fff;
        }

    .s5-ss-rail-divider {
        height: 1px;
        background: rgba(255,255,255,0.18);
        margin: 2px 8px;
    }

    .s5-ss-rail-btn[data-has-value="true"]::before {
        content: '';
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(15,17,21,0.85);
    }

    .s5-ss-rail-btn[data-rail="music"][data-has-value="true"]::before {
        background: #16A34A;
    }

    .s5-ss-rail-btn[data-rail="text"][data-has-value="true"]::before {
        background: #F58220;
    }

    .s5-ss-rail-btn[data-rail="transition"][data-has-value="true"]::before {
        background: #38BDF8;
    }

    /* ─── Relocated native playback controls slot ─── */
    .s5-ss-mobile-controls-slot {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        padding: 8px 10px 4px;
        background: rgba(15,17,21,0.95);
        z-index: 34;
        position: relative;
    }

        .s5-ss-mobile-controls-slot:empty {
            display: none !important;
        }

        /* Reset absolute positioning on the relocated controls so they flow
       in the slot, and let the pill expand to comfortably show dots+time. */
        .s5-ss-mobile-controls-slot > [data-ssmm-relocated="true"] {
            position: static !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            transform: none !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: auto !important;
        }

    /* ─── Slim sticky CTA ─── */
    .s5-ss-mobile-cta {
        display: flex !important;
        flex-shrink: 0;
        gap: 10px;
        align-items: center;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom,0px));
        background: rgba(15,17,21,0.95);
        border-top: 1px solid rgba(255,255,255,0.06);
        z-index: 35;
    }

    .s5-ss-mobile-cta-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255,255,255,0.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .s5-ss-mobile-cta-meta i {
            color: var(--sj-orange,#F58220);
            flex-shrink: 0;
        }

    .s5-ss-mobile-cta-btn {
        all: unset;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        background: linear-gradient(135deg,#F58220 0%,#D8691A 100%);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 800;
        border-radius: 11px;
        box-shadow: 0 10px 24px rgba(245,130,32,0.4), 0 0 0 1px rgba(255,255,255,0.18) inset;
        flex-shrink: 0;
    }

        .s5-ss-mobile-cta-btn:active {
            transform: translateY(1px);
        }
}

@media (max-width: 420px) {
    .s5-slideshow-modal {
        padding: 8px !important;
    }

    .s5-slideshow-modal-inner {
        max-height: calc(100vh - 16px) !important;
        height: calc(100vh - 16px) !important;
        border-radius: 12px !important;
    }

    .s5-ss-rail-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .s5-ss-mobile-rail {
        right: 8px;
        gap: 6px;
    }

    .s5-ss-mobile-cta-btn {
        padding: 9px 14px;
        font-size: 0.72rem;
    }

    .s5-ss-mtitle-text {
        font-size: 0.74rem;
    }
}

@media (max-width: 900px) and (max-height: 560px) {
    .s5-slideshow-modal-right {
        max-height: 78% !important;
        height: 78% !important;
    }

    .s5-ss-mobile-rail {
        top: auto !important;
        bottom: 12px !important;
        transform: none !important;
        flex-direction: row;
        right: 50% !important;
        transform: translateX(50%) !important;
    }

    .s5-ss-rail-divider {
        width: 1px;
        height: auto;
        margin: 6px 2px;
    }
}

/* ============================================================================
   DEFENSIVE FIX — closed modal must not intercept taps on other scenes
   ----------------------------------------------------------------------------
   The slideshow modal is appended to <body>. Its icon rail / CTA / controls
   are absolutely-positioned, pointer-events:auto overlays. When the modal is
   CLOSED they were still floating at the right-centre of the viewport and
   stealing taps from the Private-Seller Scene-2 dropdown caret (which also sits
   at the right edge), making the arrow feel dead and laggy.

   When the modal carries none of the usual "open" markers (class or inline
   display), force its mobile chrome out of the hit-test layer. When the modal
   IS open (any marker present) the chrome behaves exactly as before.
   ============================================================================ */
@media (max-width: 900px) {
    .s5-slideshow-modal:not(.is-open):not(.active):not(.show):not(.open):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) .s5-ss-mobile-rail,
    .s5-slideshow-modal:not(.is-open):not(.active):not(.show):not(.open):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) .s5-ss-mobile-cta,
    .s5-slideshow-modal:not(.is-open):not(.active):not(.show):not(.open):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) .s5-ss-mobile-controls-slot,
    .s5-slideshow-modal:not(.is-open):not(.active):not(.show):not(.open):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) .s5-ss-mobile-titlebar,
    .s5-slideshow-modal:not(.is-open):not(.active):not(.show):not(.open):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) .s5-ss-drawer-scrim {
        display: none !important;
        pointer-events: none !important;
    }
}