/*
 * Final public-shell layout contract.
 *
 * This file is deliberately loaded after page CSS and theme CSS. Public
 * feature/safety pages use the browser document as their only page scroller;
 * the shared sidebar and topbar remain pinned. Normal desktop widths keep the
 * same left guide; extra-wide screens centre the complete right-pane content.
 */

@media (min-width: 921px) {
    html:has(body > .creation-app),
    html:has(body > .portal-shell),
    html:has(body > .feature-shell) {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body:has(> .creation-app),
    body:has(> .portal-shell),
    body:has(> .feature-shell) {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .creation-app,
    body > .portal-shell,
    body > .feature-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .creation-app > aside[data-fuuvo-shared-sidebar="1"],
    body > .portal-shell > aside[data-fuuvo-shared-sidebar="1"],
    body > .feature-shell > aside[data-fuuvo-shared-sidebar="1"] {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        position: sticky !important;
        top: 0 !important;
        align-self: start !important;
    }

    body > .creation-app > .creation-workspace,
    body > .portal-shell > .portal-content,
    body > .feature-shell > .workspace,
    body > .creation-app [data-fuuvo-app-workspace="1"],
    body > .portal-shell [data-fuuvo-app-workspace="1"],
    body > .feature-shell [data-fuuvo-app-workspace="1"] {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .creation-app [data-fuuvo-shared-topbar="1"],
    body > .portal-shell [data-fuuvo-shared-topbar="1"],
    body > .feature-shell [data-fuuvo-shared-topbar="1"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
    }

    body > .creation-app [data-fuuvo-app-scroll="1"],
    body > .portal-shell [data-fuuvo-app-scroll="1"],
    body > .feature-shell [data-fuuvo-app-scroll="1"] {
        width: min(1080px, calc(100% - 96px)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-left: 56px !important;
        margin-right: 40px !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-width: auto;
    }
}

/* English feature/detail pages use the transparent treatment on desktop only.
 * Mobile shares the same solid white sticky header as the Chinese version so
 * scrolling content never shows through the topbar. */
@media (min-width: 921px) {
    html[lang^="en"] header[data-fuuvo-shared-topbar="1"].creation-topbar {
        border-color: transparent !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}

/* On extra-wide displays, centre the complete page body (including its title)
 * inside the workspace instead of leaving all spare space on the right. */
@media (min-width: 1600px) {
    body > .creation-app [data-fuuvo-app-scroll="1"],
    body > .portal-shell [data-fuuvo-app-scroll="1"],
    body > .feature-shell [data-fuuvo-app-scroll="1"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
 * Mobile public-shell contract.
 *
 * Page styles historically sized the shell to 100vh and then made the main
 * pane scroll independently. On mobile that clips content when the browser
 * chrome changes height and produces nested scroll areas. Keep the sidebar's
 * existing off-canvas behavior, but let the document own vertical scrolling.
 */
@media (max-width: 920px) {
    html:has(body > .creation-app),
    html:has(body > .portal-shell),
    html:has(body > .feature-shell) {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body:has(> .creation-app),
    body:has(> .portal-shell),
    body:has(> .feature-shell) {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
        touch-action: pan-y !important;
    }

    body > .creation-app,
    body > .portal-shell,
    body > .feature-shell {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .creation-app > .creation-workspace,
    body > .portal-shell > .portal-content,
    body > .feature-shell > .workspace,
    body > .creation-app [data-fuuvo-app-workspace="1"],
    body > .portal-shell [data-fuuvo-app-workspace="1"],
    body > .feature-shell [data-fuuvo-app-workspace="1"] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .creation-app [data-fuuvo-shared-topbar="1"],
    body > .portal-shell [data-fuuvo-shared-topbar="1"],
    body > .feature-shell [data-fuuvo-shared-topbar="1"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        flex: 0 0 auto !important;
    }

    body > .creation-app [data-fuuvo-app-scroll="1"],
    body > .portal-shell [data-fuuvo-app-scroll="1"],
    body > .feature-shell [data-fuuvo-app-scroll="1"] {
        position: static !important;
        width: calc(100% - 28px) !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: auto;
    }

    /* These safety redesigns explicitly restore 100vh internal scrollers in
     * their own styles, so keep them on the same document-scroll contract. */
    body > .portal-shell:has(.ai-card-redesign),
    body > .portal-shell:has(.data-control-page),
    body > .portal-shell:has(.account-data-layout),
    body > .portal-shell:has(.capabilities-page),
    body > .portal-shell:has(.community-rules-page),
    body > .portal-shell:has(.ai-card-redesign) > .portal-content,
    body > .portal-shell:has(.data-control-page) > .portal-content,
    body > .portal-shell:has(.account-data-layout) > .portal-content,
    body > .portal-shell:has(.capabilities-page) > .portal-content,
    body > .portal-shell:has(.community-rules-page) > .portal-content {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body > .portal-shell:has(.ai-card-redesign) .portal-main,
    body > .portal-shell:has(.data-control-page) .portal-main,
    body > .portal-shell:has(.account-data-layout) .portal-main,
    body > .portal-shell:has(.capabilities-page) .portal-main,
    body > .portal-shell:has(.community-rules-page) .portal-main {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.mobile-nav-open:has(> .creation-app),
    body.mobile-nav-open:has(> .portal-shell),
    body.mobile-nav-open:has(> .feature-shell),
    body.fuuvo-mobile-sidebar-open:has(> .creation-app),
    body.fuuvo-mobile-sidebar-open:has(> .portal-shell),
    body.fuuvo-mobile-sidebar-open:has(> .feature-shell) {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body:not(.mobile-nav-open):not(.fuuvo-mobile-sidebar-open) > :is(.creation-app,.portal-shell,.feature-shell),
    body:not(.mobile-nav-open):not(.fuuvo-mobile-sidebar-open) [data-fuuvo-app-workspace="1"],
    body:not(.mobile-nav-open):not(.fuuvo-mobile-sidebar-open) [data-fuuvo-app-scroll="1"] {
        touch-action: pan-y !important;
    }
}