/* AeroForge workspace viewport shell (03C).
   The legacy app-layout height was calc(100vh - 56px), while the header has
   variable height. That excess created a third, document-level scrollbar.
   The header now consumes its natural height; the panes share the remainder.
   Scoped to /app: the stylesheet is not included in landing or admin. */

html {
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* fallback for browsers without dynamic viewport units */
    height: 100dvh;
    min-height: 0; /* override the original body min-height: 100vh */
    overflow: hidden;
    overscroll-behavior-y: none;
}

.app-header {
    flex: 0 0 auto;
}

/* 0% basis + min-height:0 allow independent grid child overflow. */
.app-layout {
    flex: 1 1 0%;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.panel-input,
.panel-results {
    min-height: 0;
    overscroll-behavior-y: contain;
}

/* Existing app.js toggles panel display on the mobile bottom tabs.
   Keep that logic; the active panel alone scrolls inside the viewport. */
@media (max-width: 900px) {
    .app-layout {
        /* Reserve the fixed bottom tab bar outside the scroller, rather than
           creating an 86px blank area at the end of each form. */
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        padding-bottom: var(--af-mobile-tabbar-height, calc(54px + env(safe-area-inset-bottom, 0px)));
        overflow: hidden;
    }

    .panel-input,
    .panel-results {
        flex: 1 1 0%;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        padding-bottom: 18px;
        scroll-padding-bottom: 18px;
    }
    /* The mobile saved-design drawer stops at the header and fixed tabs. */
    .sidebar {
        top: var(--af-mobile-header-height, 64px);
        bottom: var(--af-mobile-tabbar-height, calc(54px + env(safe-area-inset-bottom, 0px)));
        height: auto;
        min-height: 0;
        overflow: hidden;
    }
    .sidebar .sidebar-header {
        flex: 0 0 auto;
    }
    .sidebar .sidebar-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 10px 20px;
        scroll-padding-bottom: 20px;
        overscroll-behavior-y: contain;
    }
}