/* Decorative edge surface; never participates in the document or menu layout. */
.benix-browser-edge {
    display: none;
}

/* iOS WebKit only. Browser chrome still requires verification on a real device. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px), (max-height: 600px) and (pointer: coarse) {
        html.benix-inner-page,
        html.benix-inner-page body {
            background-color: #ffffff;
        }

        /* Keep the edge above the moving menu, including during its transition.
           A 12px box extends 2px above the viewport: only the existing 10px
           gap is painted, without covering the resting menu or moving it. */
        .benix-browser-edge {
            display: block;
            position: fixed;
            top: -2px;
            right: 0;
            left: 0;
            height: 12px;
            background-color: #ffffff;
            pointer-events: none;
            z-index: 10000;
        }

        html.benix-home-safe-area .benix-browser-edge {
            background-color: #000000;
        }
    }
}