/* ============================================================
   SCENE 5 — MEDIA STUDIO  ·  MOBILE / NARROW-FRAME FIX
   ------------------------------------------------------------
   Targets #psScene4 (the Media Intelligence Studio scene).
   Symptoms fixed:
     · Tab strip clipped — Staging / 360° hidden on narrow frames
     · Drag & drop zone truncated underneath the right rail
     · Right rail overlap on mid-width frames
     · Score card stacking awkwardly below content
   ------------------------------------------------------------
   Load LAST in _Layout.cshtml so it wins the cascade:
       <link rel="stylesheet" href="~/css/private-seller-scene5-mobile.css" asp-append-version="true" />
   ============================================================ */

/* ============================================================
   TIER 1 — Mid frames (≤900px): right rail collapses, left
   becomes the full surface. Same breakpoint as scene 4 fix so
   both scenes feel consistent across the journey.
   ============================================================ */
@media (max-width: 900px) {

    /* Hide the floating right rail so it can no longer overlap
       the upload zone or the panel content underneath. */
    #psScene4 > .ps-right,
    #psScene4 #psRight4 {
        display: none !important;
    }

    /* Let the scene be a single column with the left rail
       absorbing the full width. */
    #psScene4 {
        display: flex !important;
        flex-direction: column !important;
    }

        #psScene4 > .ps-left {
            flex: 1 1 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 14px 14px 0 !important;
            gap: 10px !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            height: 100% !important;
        }
}

/* ============================================================
   TIER 2 — Phone frames (≤768px): full mobile treatment.
   ============================================================ */
@media (max-width: 768px) {

    /* ──────────────────────────────────────────────────────────
       1. SCENE HEAD — compact, sticky
       ────────────────────────────────────────────────────────── */
    #psScene4 .ps-scene-label {
        font-size: 0.62rem !important;
        padding: 4px 10px !important;
        margin-bottom: 4px !important;
    }

    #psScene4 .ps-question {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        margin: 2px 0 2px !important;
    }

    #psScene4 .s5-hero-subtitle,
    #psScene4 #s5HeroSubtitle {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
    }

    /* ──────────────────────────────────────────────────────────
       2. TAB STRIP — horizontal scroll with edge-fade affordance
          + snap so every tab is reachable with one swipe
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-tabs {
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 4px !important;
        gap: 4px !important;
        background: rgba(15, 23, 42, 0.05) !important;
        border-radius: 999px !important;
        position: relative;
        /* Edge fade so it's visually obvious the strip scrolls. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }

        #psScene4 .s5-tabs::-webkit-scrollbar {
            display: none !important;
        }

    #psScene4 .s5-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        padding: 7px 12px !important;
        font-size: 0.68rem !important;
        min-height: 34px !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

        #psScene4 .s5-tab i {
            font-size: 0.78rem !important;
        }

        /* Active tab pops slightly so users see it past the fade. */
        #psScene4 .s5-tab.active {
            box-shadow: 0 1px 3px rgba(245, 130, 32, 0.18), 0 0 0 1px rgba(245, 130, 32, 0.18) !important;
        }

    /* ──────────────────────────────────────────────────────────
       3. PANEL CONTAINER — left rail is the scroll surface
          (head + tabs pinned, nav pinned, panel scrolls in middle)
       ────────────────────────────────────────────────────────── */
    #psScene4 > .ps-left {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 14px 14px 0 !important;
        gap: 8px !important;
    }

    #psScene4 .s5-panel {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 2px 2px 12px !important;
        gap: 10px !important;
        /* Narrow orange scrollbar so users see content scrolls. */
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 130, 32, 0.55) transparent;
    }

        #psScene4 .s5-panel::-webkit-scrollbar {
            width: 4px;
        }

        #psScene4 .s5-panel::-webkit-scrollbar-thumb {
            background: rgba(245, 130, 32, 0.55);
            border-radius: 4px;
        }

    /* ──────────────────────────────────────────────────────────
       4. UPLOAD ZONE — full width, compact, never truncated
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-upload-zone {
        padding: 18px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    /* Photos panel zone can be a bit larger since nothing follows it. */
    #psScene4 #s5Panel_photos .s5-upload-zone {
        min-height: 170px !important;
        padding: 22px 14px !important;
    }

    /* Video panel zone needs to be SHORT so the "Don't have a video?"
       card is visible without scrolling. */
    #psScene4 #s5Panel_video .s5-upload-zone {
        min-height: 0 !important;
        padding: 14px 14px !important;
    }

    #psScene4 #s5Panel_video .s5-upload-icon {
        font-size: 1.4rem !important;
        margin-bottom: 2px !important;
    }

    #psScene4 #s5Panel_video .s5-upload-label {
        font-size: 0.78rem !important;
    }

    #psScene4 #s5Panel_video .s5-upload-sub {
        font-size: 0.6rem !important;
    }

    #psScene4 #s5Panel_video .s5-upload-tags {
        margin-top: 4px !important;
    }

    #psScene4 .s5-upload-icon {
        font-size: 1.7rem !important;
        margin-bottom: 4px !important;
    }

    #psScene4 .s5-upload-label {
        font-size: 0.86rem !important;
    }

    #psScene4 .s5-upload-sub {
        font-size: 0.66rem !important;
        margin-top: 2px !important;
        text-align: center;
    }

    #psScene4 .s5-upload-tags {
        margin-top: 8px !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    #psScene4 .s5-upload-tag {
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
    }

    /* ──────────────────────────────────────────────────────────
       5. INLINE MEDIA SCORE STRIP — replaces the desktop right
          rail. A compact horizontal-scroll chip row at the top
          of every panel so users always see progress at a glance.
          Rendered into the score card already in DOM; we just
          re-style it inline at mobile widths.
       ────────────────────────────────────────────────────────── */
    /* Promote the inline score card to a top-of-panel summary
       if the host ever moves #psRight4 children into a mobile
       slot. (No-op if not present.) */
    #psScene4 .ps-left .s5-score-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        flex-wrap: wrap !important;
    }

    #psScene4 .ps-left .s5-score-ring-wrap {
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    #psScene4 .ps-left .s5-score-items {
        flex: 1 1 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px 8px !important;
        font-size: 0.64rem !important;
    }

    /* ──────────────────────────────────────────────────────────
       6. PHOTO GRID — 2-up on phones (was 4-up)
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    #psScene4 .s5-photo-count-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ──────────────────────────────────────────────────────────
       7. SLIDESHOW PANEL — compact cards, capped song list, and
          Generate button pinned to the bottom of the panel so
          it's always visible above the Back/Continue nav.
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-slideshow-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    #psScene4 .s5-slideshow-card[data-style="warm"] {
        grid-column: 1 / -1 !important;
    }

        /* Shrink card preview height so 5 styles fit faster. */
        #psScene4 .s5-slideshow-preview,
        #psScene4 .s5-slideshow-card[data-style="warm"] .s5-slideshow-preview {
            height: 36px !important;
        }

    #psScene4 .s5-slideshow-card-info {
        padding: 5px 7px 6px !important;
    }

    #psScene4 .s5-slideshow-name {
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }

    #psScene4 .s5-slideshow-desc {
        font-size: 0.6rem !important;
        line-height: 1.25 !important;
    }

    #psScene4 .s5-slideshow-chooselbl {
        font-size: 0.7rem !important;
        margin: 0 0 4px !important;
    }

    #psScene4 .s5-song-picker {
        padding: 8px 10px !important;
        flex-shrink: 0 !important;
    }

    #psScene4 .s5-song-picker-label {
        font-size: 0.66rem !important;
        margin-bottom: 4px !important;
    }

    /* Song list capped + visible scrollbar so users discover it. */
    #psScene4 .s5-song-list {
        max-height: 140px !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 130, 32, 0.5) rgba(0, 0, 0, 0.04);
    }

        #psScene4 .s5-song-list::-webkit-scrollbar {
            width: 4px !important;
            display: block !important;
        }

        #psScene4 .s5-song-list::-webkit-scrollbar-thumb {
            background: rgba(245, 130, 32, 0.55);
            border-radius: 4px;
        }

    #psScene4 .s5-song-item {
        padding: 6px 8px !important;
    }

    #psScene4 .s5-song-name {
        font-size: 0.66rem !important;
    }

    #psScene4 .s5-song-mood {
        font-size: 0.56rem !important;
    }

    /* PIN the Generate button to the bottom of the slideshow panel
       so it's always visible even if the cards scroll above it. */
    #psScene4 #s5Panel_slideshow.active {
        position: relative;
        padding-bottom: 56px !important;
    }

    #psScene4 .s5-generate-btn {
        position: sticky !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        z-index: 4;
        margin: 6px -2px 0 !important;
        padding: 12px 14px !important;
        font-size: 0.8rem !important;
        min-height: 46px !important;
        border-radius: 12px !important;
        box-shadow: 0 -6px 14px rgba(255, 255, 255, 0.9), 0 8px 22px rgba(245, 130, 32, 0.35) !important;
    }

    /* ──────────────────────────────────────────────────────────
       8. VIDEO PANEL — short upload zone, no-video alt always
          visible, and a clear scrollbar if content overflows
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-no-video-alt {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        text-align: left;
        flex-wrap: wrap !important;
    }

    #psScene4 .s5-no-video-alt-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
        flex-shrink: 0;
    }

    #psScene4 .s5-no-video-alt-title {
        font-size: 0.7rem !important;
        margin: 0 !important;
    }

    #psScene4 .s5-no-video-alt-desc {
        font-size: 0.58rem !important;
        line-height: 1.28 !important;
    }

    #psScene4 .s5-no-video-alt-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 7px 12px !important;
        font-size: 0.7rem !important;
        margin-top: 2px;
    }

    /* ──────────────────────────────────────────────────────────
       8b. VTE UPLOAD ZONE — the video tab's upload zone is
           rendered dynamically by video-tab-enhanced.js using
           a different class namespace (.vte-*). We must override
           those too or none of the size cuts below apply.
       ────────────────────────────────────────────────────────── */
    #psScene4 .vte-upload-zone {
        flex-shrink: 0 !important;
    }

    #psScene4 .vte-upload-inner {
        padding: 10px 14px 10px !important;
        gap: 3px !important;
    }

    #psScene4 .vte-upload-icon-wrap {
        width: 30px !important;
        height: 30px !important;
        margin-bottom: 0 !important;
    }

    #psScene4 .vte-upload-icon {
        font-size: 1.15rem !important;
    }

    /* Halt the heavy pulse animation on phones — it doubles the
       perceived height of the icon and gobbles GPU. */
    #psScene4 .vte-upload-pulse {
        display: none !important;
    }

    #psScene4 .vte-upload-title {
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
    }

    #psScene4 .vte-upload-sub {
        font-size: 0.58rem !important;
        line-height: 1.28 !important;
    }

    #psScene4 .vte-upload-tags {
        gap: 3px !important;
        margin-top: 0 !important;
    }

    #psScene4 .vte-tag {
        font-size: 0.52rem !important;
        padding: 1px 6px !important;
    }

    /* Pull the divider + import-from row visually closer so the
       whole zone reads as ~140px instead of ~260px. */
    #psScene4 .vte-upload-divider {
        font-size: 0.55rem !important;
        margin: 1px 0 0 !important;
        max-width: 200px !important;
    }

    /* Import-from buttons on a single horizontal scroll row so
       all five sources stay on one line and the zone stays short. */
    #psScene4 .vte-upload-sources {
        gap: 5px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 2px 4px !important;
        /* Soft edge fade so users see there's more to scroll. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }

        #psScene4 .vte-upload-sources::-webkit-scrollbar {
            display: none !important;
        }

    #psScene4 .vte-source-btn {
        flex: 0 0 auto !important;
        padding: 5px 10px !important;
        font-size: 0.6rem !important;
        gap: 4px !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
    }

        #psScene4 .vte-source-btn i {
            font-size: 0.7rem !important;
        }

    /* Force a visible scrollbar on the video panel when content
       overflows so users know to scroll past the upload zone. */
    #psScene4 #s5Panel_video {
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 130, 32, 0.55) rgba(0, 0, 0, 0.04);
    }

        #psScene4 #s5Panel_video::-webkit-scrollbar {
            width: 5px !important;
            display: block !important;
        }

        #psScene4 #s5Panel_video::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.04);
            border-radius: 4px;
        }

        #psScene4 #s5Panel_video::-webkit-scrollbar-thumb {
            background: rgba(245, 130, 32, 0.55) !important;
            border-radius: 4px;
        }

    /* ──────────────────────────────────────────────────────────
       9. NO-VIDEO NUDGE BANNER — wrap cleanly
       ────────────────────────────────────────────────────────── */
    #psScene4 .s5-no-video-nudge {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px !important;
    }

    #psScene4 .s5-nudge-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ──────────────────────────────────────────────────────────
       10. NAV — pinned to bottom of left rail with safe area
       ────────────────────────────────────────────────────────── */
    #psScene4 .ps-nav {
        flex: 0 0 auto !important;
        margin-top: auto !important;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0.6) 100%);
        position: sticky;
        bottom: 0;
        z-index: 5;
        border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    }

    #psScene4 .ps-btn-back,
    #psScene4 .ps-btn-next {
        min-height: 44px !important;
        font-size: 0.78rem !important;
    }

    /* ──────────────────────────────────────────────────────────
       11. TIP CARDS inside panels — tighter on phone
       ────────────────────────────────────────────────────────── */
    #psScene4 .sj-intel-tip {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

        #psScene4 .sj-intel-tip p {
            font-size: 0.66rem !important;
            line-height: 1.35 !important;
        }
}

/* ============================================================
   TIER 2b — Narrow phones (≤460px): import-from buttons go
   icon-only so all 5 sources fit on one row without scrolling.
   ============================================================ */
@media (max-width: 460px) {
    #psScene4 .vte-source-btn {
        padding: 6px 9px !important;
        font-size: 0 !important;
        gap: 0 !important;
        min-width: 34px !important;
        justify-content: center !important;
    }

        #psScene4 .vte-source-btn i {
            font-size: 1rem !important;
        }

    #psScene4 .vte-upload-sources {
        justify-content: center !important;
        overflow-x: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* ============================================================
   TIER 3 — Tiny phones (≤380px): one extra pass of tightening
   ============================================================ */
@media (max-width: 380px) {
    #psScene4 > .ps-left {
        padding: 12px 12px 0 !important;
    }

    #psScene4 .s5-tab {
        padding: 6px 10px !important;
        font-size: 0.64rem !important;
    }

    #psScene4 #s5Panel_photos .s5-upload-zone {
        padding: 18px 10px !important;
        min-height: 150px !important;
    }

    #psScene4 #s5Panel_video .s5-upload-zone {
        padding: 12px 10px !important;
    }

    #psScene4 .vte-upload-inner {
        padding: 10px 12px !important;
        gap: 3px !important;
    }

    #psScene4 .vte-upload-icon-wrap {
        width: 30px !important;
        height: 30px !important;
    }

    #psScene4 .vte-upload-icon {
        font-size: 1.1rem !important;
    }

    #psScene4 .vte-upload-title {
        font-size: 0.72rem !important;
    }

    #psScene4 .vte-upload-sub {
        font-size: 0.58rem !important;
    }

    #psScene4 .s5-photo-grid {
        gap: 6px !important;
    }

    #psScene4 .s5-slideshow-preview,
    #psScene4 .s5-slideshow-card[data-style="warm"] .s5-slideshow-preview {
        height: 32px !important;
    }

    #psScene4 .s5-song-list {
        max-height: 120px !important;
    }
}

/* ============================================================
   TIER 4 — Landscape phones (≤560px tall): keep nav reachable
   ============================================================ */
@media (max-height: 560px) and (max-width: 900px) {
    #psScene4 #s5Panel_photos .s5-upload-zone {
        min-height: 110px !important;
        padding: 12px !important;
    }

    #psScene4 #s5Panel_video .s5-upload-zone {
        padding: 10px !important;
    }

    #psScene4 .vte-upload-inner {
        padding: 8px 12px !important;
        gap: 2px !important;
    }

    #psScene4 .vte-upload-icon-wrap {
        width: 28px !important;
        height: 28px !important;
    }

    #psScene4 .vte-upload-icon {
        font-size: 1rem !important;
    }

    /* Hide tags + import-from row when vertical space is at a
       premium — the primary action is the drop zone itself. */
    #psScene4 .vte-upload-tags,
    #psScene4 .vte-upload-divider,
    #psScene4 .vte-upload-sources {
        display: none !important;
    }

    #psScene4 .ps-question {
        font-size: 0.95rem !important;
    }

    #psScene4 .s5-hero-subtitle {
        display: none !important;
    }

    #psScene4 .s5-slideshow-preview,
    #psScene4 .s5-slideshow-card[data-style="warm"] .s5-slideshow-preview {
        height: 28px !important;
    }

    #psScene4 .s5-song-list {
        max-height: 100px !important;
    }
}