/* Physical safe areas and the visible viewport are shared by every workspace. */
:root {
    --pm-safe-top: env(safe-area-inset-top, 0px);
    --pm-safe-right: env(safe-area-inset-right, 0px);
    --pm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pm-safe-left: env(safe-area-inset-left, 0px);
    --pm-safe-bottom-current: var(--pm-safe-bottom);
    --pm-viewport-height: 100vh;
    --pm-viewport-width: 100vw;
    --pm-viewport-top: 0px;
    --pm-viewport-left: 0px;
}
@supports (height: 100dvh) { :root { --pm-viewport-height: 100dvh; } }
html[data-pm-keyboard-open="true"] { --pm-safe-bottom-current: 0px; }

/* A fixed html/body can strand iOS touch/keyboard scrolling. Pin only MainLayout. */
html, body { position: static; touch-action: pan-x pan-y pinch-zoom; }
#app:has(> .layout-container) {
    position: fixed;
    top: var(--pm-viewport-top);
    left: var(--pm-viewport-left);
    width: var(--pm-viewport-width);
    height: var(--pm-viewport-height);
    overflow: hidden;
}
.layout-container {
    padding: var(--pm-safe-top) var(--pm-safe-right) var(--pm-safe-bottom-current) var(--pm-safe-left);
    box-sizing: border-box;
}
.layout-container .page-content, .layout-container .sidebar-scroll-area,
.layout-container .panel-content-scroll, .layout-container .sheet-content {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-y: contain;
}
/* Lock the actual background scroller, preserving its offset, while a form is open. */
#pmPageContent.pm-sheet-scroll-locked { overflow: hidden !important; }
.layout-container .sheet-overlay {
    inset: auto;
    top: var(--pm-viewport-top);
    left: var(--pm-viewport-left);
    width: var(--pm-viewport-width);
    height: var(--pm-viewport-height);
    padding: var(--pm-safe-top) var(--pm-safe-right) var(--pm-safe-bottom-current) var(--pm-safe-left);
    box-sizing: border-box;
    overflow: hidden;
}
.layout-container .sheet-panel { min-height: 0; }
.layout-container .sheet-panel > .sheet-header { flex: none; }
.layout-container .sheet-panel > .sheet-content { flex: 1 1 auto; min-height: 0; }

@media (max-width: 1023px) {
    /* Safari paints its edge/overscroll regions from the document canvas. */
    html:has(#app > .layout-container), body:has(#app > .layout-container), #app:has(> .layout-container) {
        background-color: var(--pm-browser-bg, var(--pm-app-bg, #f8fafc)) !important;
    }
    .layout-container, .layout-container .content-wrapper { background: var(--pm-app-bg, #f8fafc); }
    .layout-container .content-wrapper { padding: 0; }
    .layout-container .sheet-panel { max-height: 100%; margin: 0; }
    .layout-container .sheet-panel:has(.pm-sheet-large) { height: 100%; max-height: 100%; }
    .layout-container .sheet-panel:has(> .sheet-content > .connect-legal-reader) { height: 100%; max-height: 100%; }
    /* The overlay already reserves the home indicator; do not reserve it twice. */
    .layout-container .sheet-panel .pm-form-actions { padding-bottom: 16px; }
    .layout-container .sheet-panel:has(> .sheet-content > .connect-legal-reader) > .sheet-content { padding-bottom: 20px; }
    .layout-container .glass-sidebar {
        top: calc(var(--pm-viewport-top) + var(--pm-safe-top) + 10px);
        left: calc(var(--pm-viewport-left) + var(--pm-safe-left) + 10px);
        height: calc(var(--pm-viewport-height) - var(--pm-safe-top) - var(--pm-safe-bottom-current) - 20px);
        width: min(300px, calc(var(--pm-viewport-width) - var(--pm-safe-left) - var(--pm-safe-right) - 20px));
    }
    .layout-container .right-side-panel {
        top: calc(var(--pm-viewport-top) + var(--pm-safe-top) + 10px);
        left: calc(var(--pm-viewport-left) + var(--pm-safe-left) + 10px);
        right: auto;
        bottom: auto;
        width: calc(var(--pm-viewport-width) - var(--pm-safe-left) - var(--pm-safe-right) - 20px);
        height: calc(var(--pm-viewport-height) - var(--pm-safe-top) - var(--pm-safe-bottom-current) - 20px);
    }
    .layout-container .search-overlay {
        inset: auto;
        top: var(--pm-viewport-top);
        left: var(--pm-viewport-left);
        width: var(--pm-viewport-width);
        height: var(--pm-viewport-height);
        padding: calc(var(--pm-safe-top) + 12px) calc(var(--pm-safe-right) + 12px) calc(var(--pm-safe-bottom-current) + 12px) calc(var(--pm-safe-left) + 12px);
        box-sizing: border-box;
    }
    .layout-container .global-search-panel { width: 100%; max-height: 100%; min-height: 0; }
}

@media (max-width: 1023px) {
    /* Safe-area paint belongs to the workspace, including the home-indicator strip. */
    #app > .layout-container { background: var(--pm-app-bg, #f8fafc); }
    .layout-container .user-dropdown {
        max-height: max(120px, calc(var(--pm-viewport-height) - var(--pm-safe-top) - var(--pm-safe-bottom-current) - 136px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
.layout-container .sheet-panel > .sheet-header { gap: 12px; align-items: center; }
.layout-container .sheet-panel > .sheet-header .sheet-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.layout-container .sheet-panel > .sheet-header .btn-close { min-width: 44px; min-height: 44px; flex: none; }

/* The same actions move to the bottom on phones; desktop keeps its header layout. */
@media (max-width:767px), (max-width:1023px) and (max-height:600px) and (pointer:coarse) {
    :root { --pm-mobile-actions-height:64px; }
    .layout-container .glass-topbar {
        display:flex; height:64px; min-height:64px; padding:0 12px;
        background:var(--pm-app-bg,#f8fafc); border-radius:0;
        transform:none; filter:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    }
    .layout-container .glass-topbar::before {
        content:"";position:fixed;top:var(--pm-viewport-top);left:var(--pm-viewport-left);
        width:var(--pm-viewport-width);height:var(--pm-safe-top);background:var(--pm-app-bg,#f8fafc);pointer-events:none;
    }
    .layout-container .topbar-start { width:100%;min-width:0;gap:10px; }
    .layout-container .mobile-burger { width:36px;height:44px;align-items:center;justify-content:center;flex:none; }
    .layout-container .shell-actions {
        position:fixed;top:calc(var(--pm-viewport-top) + var(--pm-viewport-height) - var(--pm-safe-bottom-current) - var(--pm-mobile-actions-height));
        left:var(--pm-viewport-left);width:var(--pm-viewport-width);
        height:calc(var(--pm-mobile-actions-height) + var(--pm-safe-bottom-current));box-sizing:border-box;
        padding:8px calc(var(--pm-safe-right) + 8px) calc(var(--pm-safe-bottom-current) + 8px) calc(var(--pm-safe-left) + 8px);
        display:flex;align-items:center;justify-content:space-around;gap:4px;
        background:var(--pm-app-bg,#f8fafc);border-top:1px solid var(--pm-app-border,#dfe5ed);
        box-shadow:0 -4px 18px #0f172a08;
    }
    .layout-container .shell-actions .shell-icon-button { width:44px;height:44px;flex:none; }
    .layout-container .shell-actions .user-dropdown {
        top:auto;bottom:calc(100% + 12px);right:0;
        max-height:calc(var(--pm-viewport-height) - var(--pm-safe-top) - var(--pm-safe-bottom-current) - var(--pm-mobile-actions-height) - 28px);
    }
    .layout-container .page-content { margin-bottom:var(--pm-mobile-actions-height); }
    .layout-container .right-panel-backdrop { bottom:calc(var(--pm-safe-bottom-current) + var(--pm-mobile-actions-height)); }
    .layout-container .right-side-panel { height:calc(var(--pm-viewport-height) - var(--pm-safe-top) - var(--pm-safe-bottom-current) - var(--pm-mobile-actions-height) - 20px); }
    html[data-pm-keyboard-open="true"] { --pm-mobile-actions-height:0px; }
    html[data-pm-keyboard-open="true"] .layout-container .shell-actions { display:none; }
}