/**
 * HEADER RECENTS LOCK — single source of truth for editor header thumbnail strips.
 * Loaded LAST on Sketch, Quick Edit, Stencil, Magic Blend, Try-On.
 * DO NOT add position:absolute + left:calc() overrides for these strips elsewhere.
 *
 * Structure: .hdr-editor-title-lane wraps brand + recents in document order so
 * thumbnails always start after the page title at every breakpoint.
 *
 * Phone thumb caps (Stencil/Try-On) live in phone-header-recents-lock.css.
 * Speak & Create header recents live in talk-create-header-recents-lock.css.
 */

body.try-on-page .main-header .nav-container,
body.quick-edit-page .main-header .nav-container,
body.magic-blend-page .main-header .nav-container,
body.stencil-page .main-header .nav-container,
body.sketch-page .main-header .nav-container,
body.try-on-page .main-header .nav-container.app-nav-64,
body.quick-edit-page .main-header .nav-container.app-nav-64,
body.magic-blend-page .main-header .nav-container.app-nav-64,
body.stencil-page .main-header .nav-container.app-nav-64,
body.sketch-page .main-header .nav-container.app-nav-64 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 64px !important;
    max-height: 64px !important;
    width: 100% !important;
}

body.try-on-page .main-header .hdr-editor-title-lane,
body.quick-edit-page .main-header .hdr-editor-title-lane,
body.magic-blend-page .main-header .hdr-editor-title-lane,
body.stencil-page .main-header .hdr-editor-title-lane,
body.sketch-page .main-header .hdr-editor-title-lane {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
}

body.try-on-page .main-header .app-brand-wrap,
body.quick-edit-page .main-header .app-brand-wrap,
body.magic-blend-page .main-header .app-brand-wrap,
body.stencil-page .main-header .app-brand-wrap,
body.sketch-page .main-header .app-brand-wrap {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

body.try-on-page .main-header .app-brand-wrap .brand,
body.quick-edit-page .main-header .app-brand-wrap .brand,
body.magic-blend-page .main-header .app-brand-wrap .brand,
body.stencil-page .main-header .app-brand-wrap .brand,
body.sketch-page .main-header .app-brand-wrap .brand {
    white-space: nowrap !important;
}

body.try-on-page .main-header .nav-actions,
body.quick-edit-page .main-header .nav-actions,
body.magic-blend-page .main-header .nav-actions,
body.stencil-page .main-header .nav-actions,
body.sketch-page .main-header .nav-actions {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
    background: transparent !important;
    gap: 6px !important;
}

body.try-on-page .main-header .nav-actions .mobile-toggle,
body.quick-edit-page .main-header .nav-actions .mobile-toggle,
body.magic-blend-page .main-header .nav-actions .mobile-toggle,
body.stencil-page .main-header .nav-actions .mobile-toggle,
body.sketch-page .main-header .nav-actions .mobile-toggle {
    position: relative !important;
    z-index: 5 !important;
}

body.try-on-page .main-header .hdr-editor-title-lane #tryon-result-history.tryon-result-history,
body.quick-edit-page .main-header .hdr-editor-title-lane #qe-recents-strip.sketch-recents-strip,
body.magic-blend-page .main-header .hdr-editor-title-lane #sketch-recents-strip.sketch-recents-strip,
body.stencil-page .main-header .hdr-editor-title-lane #qe-recents-strip.sketch-recents-strip,
body.sketch-page .main-header .hdr-editor-title-lane #sketch-recents-strip.sketch-recents-strip {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    gap: 6px !important;
}

body.try-on-page .main-header .hdr-editor-title-lane #tryon-result-history.tryon-result-history {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 5px !important;
}

/* Phone + tablet: lock thumb geometry (beats legacy sketch.css absolute overrides). */
@media (max-width: 1024px) {
    /* sketch.css reserves space for a hidden download btn (visibility:hidden) — collapse it until JS shows output. */
    body.sketch-page .main-header .nav-actions #btn-download-mobile:not(.show-download),
    body.magic-blend-page .main-header .nav-actions #btn-download-mobile:not(.show-download),
    body.quick-edit-page .main-header .nav-actions #btn-download-mobile:not(.show-download),
    body.stencil-page .main-header .nav-actions #btn-download-mobile:not(.show-download) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.quick-edit-page .main-header .hdr-editor-title-lane #qe-recents-strip.sketch-recents-strip .sketch-recent-thumb,
    body.magic-blend-page .main-header .hdr-editor-title-lane #sketch-recents-strip.sketch-recents-strip .sketch-recent-thumb,
    body.stencil-page .main-header .hdr-editor-title-lane #qe-recents-strip.sketch-recents-strip .sketch-recent-thumb,
    body.sketch-page .main-header .hdr-editor-title-lane #sketch-recents-strip.sketch-recents-strip .sketch-recent-thumb {
        width: 34px !important;
        height: 42px !important;
        min-width: 34px !important;
        min-height: 42px !important;
        max-width: 34px !important;
        max-height: 42px !important;
        flex: 0 0 34px !important;
        object-fit: cover !important;
        object-position: center !important;
        align-self: center !important;
        border-radius: 4px !important;
    }

    /* nth-child visibility caps removed — see header-recents-display-lock.css */
}

/* Beat legacy padding-left hacks on .sketch-recents-strip at tablet widths */
body.try-on-page .main-header .sketch-recents-strip,
body.quick-edit-page .main-header .sketch-recents-strip,
body.magic-blend-page .main-header .sketch-recents-strip,
body.stencil-page .main-header .sketch-recents-strip,
body.sketch-page .main-header .sketch-recents-strip,
body.try-on-page .main-header .tryon-result-history {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Touch: thumbs stay tappable; strip lane must not steal hamburger taps on narrow headers */
@media (max-width: 1024px) and (pointer: coarse) {
    body.quick-edit-page #qe-recents-strip,
    body.magic-blend-page #sketch-recents-strip,
    body.stencil-page #qe-recents-strip,
    body.sketch-page #sketch-recents-strip,
    body.try-on-page #tryon-result-history {
        pointer-events: none !important;
    }

    body.quick-edit-page #qe-recents-strip .sketch-recent-thumb,
    body.magic-blend-page #sketch-recents-strip .sketch-recent-thumb,
    body.stencil-page #qe-recents-strip .sketch-recent-thumb,
    body.sketch-page #sketch-recents-strip .sketch-recent-thumb,
    body.try-on-page #tryon-result-history .tryon-output-thumbnail {
        pointer-events: auto !important;
    }
}