/* Final mobile shell overrides, loaded after the legacy MenuGo stylesheet. */
@media (max-width: 759px) {
    body[data-active-page="chat"] .mm-chat-page,
    body[data-active-page="chat"] .mm-chat-list,
    body[data-active-page="chat"] .mm-chat-stage,
    body[data-active-page="chat"] .mm-thread {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body[data-active-page="chat"] .mm-chat-list {
        position: absolute !important;
        inset: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-active-page="chat"] .mm-chat-profile-rail {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body[data-active-page="chat"] .mm-chat-list-actions {
        position: relative !important;
        inset: auto !important;
        z-index: 2 !important;
        flex: 0 0 64px !important;
        width: 100% !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 5px 12px 7px !important;
        transform: none !important;
    }

    body[data-active-page="chat"] .mm-chat-stage,
    body[data-active-page="chat"] .mm-thread {
        position: absolute !important;
        inset: 0 !important;
    }

    body[data-active-page="chat"] .mm-thread:not([hidden]) {
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-active-page="chat"] .mm-messages {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body[data-active-page="chat"] .mm-compose {
        position: relative !important;
        inset: auto !important;
        z-index: 3 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 7px 7px !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }

    .mm-new-chat-page {
        position: fixed !important;
        inset: 0 !important;
        z-index: 210 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        align-items: stretch !important;
        background: var(--page) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .mm-new-chat-page .mm-new-chat-sheet {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: max(8px, var(--safe-top)) 12px max(10px, var(--safe-bottom)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--page) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .mm-new-chat-page .mm-new-chat-head,
    .mm-new-chat-page .mm-new-chat-controls,
    .mm-new-chat-page .mm-new-chat-current {
        flex: 0 0 auto !important;
    }

    .mm-new-chat-page .mm-new-chat-current {
        min-height: 0 !important;
        margin-top: 8px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent) !important;
        overflow: hidden !important;
    }

    .mm-new-chat-page .mm-new-chat-current:empty {
        display: none !important;
    }

    .mm-new-chat-page .mm-new-chat-current section,
    .mm-new-chat-page .mm-new-chat-list section {
        min-width: 0 !important;
    }

    .mm-new-chat-page .mm-new-chat-current section > b,
    .mm-new-chat-page .mm-new-chat-list section > b {
        display: block !important;
        margin: 0 4px 7px !important;
    }

    .mm-new-chat-page .mm-new-chat-list {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        padding-top: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.mm-new-chat-open .mm-nav {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 759px) {
        html.menugo-ios {
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            width: 100% !important;
            height: 100% !important;
            min-height: 100% !important;
            margin: 0 !important;
            overflow: hidden !important;
            background: var(--page) !important;
        }

        html.menugo-ios body {
            position: fixed !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 0 !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            background: var(--page) !important;
            -webkit-text-size-adjust: 100% !important;
        }

        html.menugo-ios button,
        html.menugo-ios a,
        html.menugo-ios input,
        html.menugo-ios textarea,
        html.menugo-ios select {
            font-family: inherit !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        html.menugo-ios button,
        html.menugo-ios a {
            touch-action: manipulation;
        }

        html.menugo-ios .mm-nav button,
        html.menugo-ios .mm-header button,
        html.menugo-ios .mm-thread-back,
        html.menugo-ios .mm-sheet button {
            min-width: 44px;
            min-height: 44px;
        }

        html.menugo-ios .mm-header {
            top: calc(var(--safe-top) + 8px) !important;
        }

        html.menugo-ios .mm-main {
            top: calc(var(--safe-top) + var(--header)) !important;
            right: 0 !important;
            bottom: calc(var(--nav) + var(--safe-bottom)) !important;
            left: 0 !important;
            width: auto !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: hidden !important;
        }

        html.menugo-ios body[data-active-page="chat"] .mm-main,
        html.menugo-ios body[data-active-page="profile"] .mm-main,
        html.menugo-ios body[data-active-page="product"] .mm-main,
        html.menugo-ios body[data-active-page="favorites"] .mm-main,
        html.menugo-ios body[data-active-page="competitions"] .mm-main {
            top: var(--safe-top) !important;
        }

        html.menugo-ios .mm-nav {
            position: fixed !important;
            inset: auto 0 0 0 !important;
            width: 100% !important;
            height: calc(var(--nav) + var(--safe-bottom)) !important;
            min-height: calc(var(--nav) + var(--safe-bottom)) !important;
            padding: 3px max(8px, var(--safe-right)) max(3px, var(--safe-bottom)) max(8px, var(--safe-left)) !important;
            box-sizing: border-box !important;
            transform: none !important;
            margin: 0 !important;
            background: var(--solid) !important;
        }

        html.menugo-ios .mm-page[data-page="menu"] .mm-menu-layout,
        html.menugo-ios .mm-page[data-page="menu"] .mm-menu-content,
        html.menugo-ios .mm-page[data-page="menu"] .mm-products-scroll {
            min-height: 0 !important;
        }

        html.menugo-ios .mm-new-chat-page {
            inset: 0 !important;
            height: 100% !important;
            box-sizing: border-box !important;
        }

        html.menugo-ios .mm-page,
        html.menugo-ios .mm-products-scroll,
        html.menugo-ios .mm-category-rail,
        html.menugo-ios .mm-messages,
        html.menugo-ios .mm-review-list,
        html.menugo-ios .mm-new-chat-list {
            -webkit-overflow-scrolling: touch !important;
        }

        @media (hover: none) {
            html.menugo-ios button:hover,
            html.menugo-ios a:hover {
                transform: none;
            }
        }

        html.menugo-ios.menugo-keyboard-open body {
            inset: auto 0 auto 0 !important;
            top: var(--menugo-visual-top, 0px) !important;
            height: var(--menugo-visual-height) !important;
            min-height: var(--menugo-visual-height) !important;
            max-height: var(--menugo-visual-height) !important;
        }

        html.menugo-ios.menugo-keyboard-open .mm-main,
        html.menugo-ios.menugo-keyboard-open body[data-active-page="chat"] .mm-main {
            bottom: 0 !important;
        }

        html.menugo-ios.menugo-keyboard-open body[data-active-page="chat"] .mm-compose {
            margin-bottom: 5px !important;
        }
    }
}

/* iOS bottom dock contract.
   The home-indicator inset must not be added to both the dock height and the
   page offset. The dock paints through the physical bottom edge and keeps its
   controls inside its own fixed height. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 759px) {
        html.menugo-ios {
            --menugo-dock-height: 74px;
        }

        html.menugo-ios .mm-main,
        html.menugo-ios body[data-active-page="chat"] .mm-main,
        html.menugo-ios body[data-active-page="profile"] .mm-main,
        html.menugo-ios body[data-active-page="product"] .mm-main,
        html.menugo-ios body[data-active-page="favorites"] .mm-main,
        html.menugo-ios body[data-active-page="competitions"] .mm-main {
            bottom: var(--menugo-dock-height) !important;
        }

        html.menugo-ios .mm-nav {
            inset: auto 0 0 0 !important;
            height: var(--menugo-dock-height) !important;
            min-height: var(--menugo-dock-height) !important;
            padding: 3px max(8px, var(--safe-right)) 3px max(8px, var(--safe-left)) !important;
            align-items: stretch !important;
            background: var(--solid) !important;
        }

        html.menugo-ios .mm-nav > button {
            height: 100% !important;
            min-height: 0 !important;
            align-self: stretch !important;
        }

        html.menugo-ios .mm-new-chat-page {
            bottom: var(--menugo-dock-height) !important;
        }

        html.menugo-ios.menugo-keyboard-open .mm-main,
        html.menugo-ios.menugo-keyboard-open body[data-active-page="chat"] .mm-main,
        html.menugo-ios.menugo-keyboard-open .mm-new-chat-page {
            bottom: 0 !important;
        }
    }
}