html.rossi-edge-to-edge {
    --rossi-safe-top: env(safe-area-inset-top, 0px);
    --rossi-safe-right: env(safe-area-inset-right, 0px);
    --rossi-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rossi-safe-left: env(safe-area-inset-left, 0px);
    --rossi-safe-height: calc(100dvh - var(--rossi-safe-top) - var(--rossi-safe-bottom));
    --rossi-safe-width: calc(100dvw - var(--rossi-safe-left) - var(--rossi-safe-right));
    --rossi-safe-bg: var(--page, var(--foreground-color, #f4f6f9));
    box-sizing: border-box;
    padding: var(--rossi-safe-top) var(--rossi-safe-right) var(--rossi-safe-bottom) var(--rossi-safe-left);
    scroll-padding-block: var(--rossi-safe-top) var(--rossi-safe-bottom);
    background-color: var(--rossi-safe-bg);
}

html.rossi-edge-to-edge::before,
html.rossi-edge-to-edge::after {
    content: "";
    position: fixed;
    inset-inline: 0;
    z-index: 21;
    pointer-events: none;
    background: var(--rossi-safe-bg);
}

html.rossi-edge-to-edge::before { top: 0; height: var(--rossi-safe-top); }
html.rossi-edge-to-edge::after { bottom: 0; height: var(--rossi-safe-bottom); }

.rossi-edge-to-edge dialog:modal {
    inset-block: var(--rossi-safe-top) var(--rossi-safe-bottom);
    max-block-size: var(--rossi-safe-height);
    max-inline-size: var(--rossi-safe-width);
}

.rossi-edge-to-edge .pwa-banner { bottom: calc(20px + var(--rossi-safe-bottom)); }
@media(max-width:380px) {
    .rossi-edge-to-edge .pwa-banner { bottom: calc(12px + var(--rossi-safe-bottom)); }
}

@media(max-width:900px) {
    html.rossi-edge-to-edge body:has(.erp-shell),
    html.rossi-edge-to-edge .erp-shell {
        width: var(--rossi-safe-width) !important;
        height: var(--rossi-safe-height) !important;
        min-height: 0 !important;
    }
}