/* Fixed surfaces need their own insets; padding the shell does not move them (#726). */
:root {
    --aom-safe-top: env(safe-area-inset-top, 0px);
    --aom-safe-right: env(safe-area-inset-right, 0px);
    --aom-safe-bottom: env(safe-area-inset-bottom, 0px);
    --aom-safe-left: env(safe-area-inset-left, 0px);
}
.app-shell {
    padding: var(--aom-safe-top) var(--aom-safe-right) calc(38px + var(--aom-safe-bottom)) var(--aom-safe-left);
}
.app-shell .ak-notifbar {
    min-height: calc(38px + var(--aom-safe-bottom));
    padding-left: max(12px, var(--aom-safe-left));
    padding-right: max(12px, var(--aom-safe-right));
    padding-bottom: var(--aom-safe-bottom);
}
.app-shell .ak-nav-drawer {
    padding: calc(8px + var(--aom-safe-top)) 8px calc(8px + var(--aom-safe-bottom)) calc(8px + var(--aom-safe-left));
}
.app-shell .ak-toast { bottom: calc(56px + var(--aom-safe-bottom)); }
.app-shell .side-drawer {
    right: var(--aom-safe-right);
    bottom: calc(38px + var(--aom-safe-bottom));
    max-width: calc(100vw - var(--aom-safe-left) - var(--aom-safe-right));
}
.app-shell :is(.browser-modal, .browser-sheet, .penguin-modal) {
    max-width: calc(100vw - 2 * max(var(--aom-safe-left), var(--aom-safe-right)));
}
.app-shell .browser-modal {
    max-height: min(80dvh, calc(100dvh - 32px - 2 * max(var(--aom-safe-top), var(--aom-safe-bottom))));
}
.app-shell .browser-sheet {
    max-height: min(85dvh, calc(100dvh - 32px - 2 * max(var(--aom-safe-top), var(--aom-safe-bottom))));
}
.app-shell .browser-modal.account-management, .app-shell .penguin-modal {
    max-height: calc(100dvh - 32px - 2 * max(var(--aom-safe-top), var(--aom-safe-bottom)));
}
.aom-update-notice {
    right: calc(1rem + var(--aom-safe-right));
    bottom: calc(1rem + var(--aom-safe-bottom));
    max-width: calc(100vw - 2rem - var(--aom-safe-left) - var(--aom-safe-right));
}
.app-shell .pwa-install[hidden], .app-shell .pwa-install-help[hidden] { display: none; }
.app-shell .pwa-install .ak-nav-item { width: 100%; gap: 8px; }
.app-shell .pwa-install svg { flex: none; }
.app-shell .pwa-install-help { margin: 0 8px 8px; color: var(--mute2); font-size: 12px; line-height: 1.6; }
.app-shell .pwa-install-help p { margin: 6px 0; }

@media (max-width: 1279px) {
    .app-shell .side-drawer { top: calc(45px + var(--aom-safe-top)); max-height: calc(100dvh - 45px - var(--aom-safe-top)); }
}
@media (max-width: 743px), (max-height: 499px) and (max-width: 1279px) {
    .app-shell .side-drawer {
        inset: var(--aom-safe-top) var(--aom-safe-right) var(--aom-safe-bottom) var(--aom-safe-left);
        width: auto;
        max-height: calc(100dvh - var(--aom-safe-top) - var(--aom-safe-bottom));
    }
    .app-shell .expanded-operator .detail.pd-page {
        padding: var(--aom-safe-top) var(--aom-safe-right) var(--aom-safe-bottom) var(--aom-safe-left);
    }
    .app-shell .pd-page .browser-sheet {
        left: var(--aom-safe-left);
        right: var(--aom-safe-right);
        bottom: var(--aom-safe-bottom);
    }
}