@media (max-width: 768px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /*
     * На узкой ширине (в т.ч. ПК с узким окном) html/body могут скроллиться из layout.php,
     * а у предков шапки overflow:hidden — position:sticky тогда не держит шапку у края экрана.
     * Фиксируем шапку и переносим вертикальный отступ в #appMain.
     */
    #appHeader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999999;
        width: 100%;
        box-sizing: border-box;
    }

    #appMain {
        /* padding-left: 20px !important; */
        /* padding-right: 20px !important; */
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    #bottomNav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        min-height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 99999999;
    }

    #sideMenuMobile {
        width: min(92vw, 360px) !important;
        max-width: 360px !important;
    }

    #sideMenuMobile .offcanvas-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .modal-backdrop,
    .modal-overlay,
    .post-filter-modal,
    .modal,
    #overlay,
    #modalwindow,
    #filterModal,
    #postFilterModal,
    #newscommentsparent,
    #newcontent.news-form-modal,
    #likesmodalparent,
    #cropheadermodalparent,
    #hobbyModal,
    #addJournalModal,
    #addPortfolioModal {
        /* Выше #appHeader / #bottomNav (99999999), иначе модалки визуально под системными панелями */
        z-index: 101000000 !important;
    }

    .modal {
        z-index: 101000001 !important;
    }

    body #hobbiesModal.modal {
        z-index: 101000002 !important;
    }

    /* В layout.php у .notifications-dropdown z-index: 1001000 — ниже #appHeader/#bottomNav (99999999) */
    #notifications-dropdown {
        z-index: 100500000 !important;
    }

    .modal-overlay .modal-content,
    .modal-content.mobile-fullscreen,
    .mobile-fullscreen.modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .modal-overlay .modal-body {
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Полноэкранный вид bootstrap-модалок */

    .modal.show .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    .modal.show .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal.show .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Мессенджер: свои z-index (~1e7) ниже #appHeader; вложенные .modal — полноэкранно на узкой ширине */
    body.page-messenger .modal-overlay,
    body.page-messenger .group-menu-overlay,
    body.page-messenger #allmessageattachments.allMessageAttachmentsContainer-active {
        z-index: 101000000 !important;
    }

    body.page-messenger .modal-overlay .modal,
    body.page-messenger .group-menu-overlay .modal {
        z-index: 101000001 !important;
    }

    body.page-messenger .modal-overlay.active .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* z-index в messenger.php ~1e7 — ниже шапки layout (99999999) */
    body.page-messenger #deleteConfirmation.delete-confirmation,
    body.page-messenger .photo-slider-overlay.active {
        z-index: 101000000 !important;
    }

    body.page-messenger #addgroupmodalparent,
    body.page-messenger #aboutgroupmodalparent,
    body.page-messenger #showattachmentsparent,
    body.page-messenger #modalnewsphotoparent,
    body.page-messenger #addgroupmembermodalparent,
    body.page-messenger #resendingchatsmodalparent {
        z-index: 101000000 !important;
    }
}

@media (max-width: 768px) {
    body.mobile-modal-open {
        overflow: hidden !important;
        touch-action: none;
    }

    /* Диалоги: fullscreen без системной шапки/нижнего меню */
    body.mobile-dialog-fullscreen #appHeader,
    body.mobile-dialog-fullscreen #bottomNav,
    body.mobile-dialog-fullscreen nav.top-navbar,
    body.mobile-dialog-fullscreen .bottom-nav {
        display: none !important;
    }

    body.mobile-dialog-fullscreen {
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    body.mobile-dialog-fullscreen #appMain {
        padding: 0 !important;
        margin: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        /* Чтобы .dialogspage и мессенджер могли сжиматься и отдавать место #allmessages под скролл */
        display: flex !important;
        flex-direction: column !important;
    }

    body.mobile-dialog-fullscreen #appMain .dialogspage:has(#dialogblock) {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        top: 0 !important;
    }

    /* m/layout: нет #appMain — основной контент в main#content */
    body.mobile-dialog-fullscreen main#content {
        padding: 0 !important;
        margin: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    /* Чат/чатбот: полную высоту задаём только корневой колонке. Внутренним блокам диалога
       нельзя дублировать 100dvh — иначе область сообщений съедает весь экран и пропадает ввод. */
    body.mobile-dialog-fullscreen .chatbot-page-embed {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    body.mobile-dialog-fullscreen .messenger-desktop-layout {
        flex: 1 1 0% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Точечные фиксы для тяжелых root-страниц */
    body.page-profile #appMain .container,
    body.page-dashboard #appMain .container,
    body.page-hobby #appMain .container,
    body.page-search #appMain .container,
    body.page-news #appMain .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-profile #appMain,
    body.page-dashboard #appMain,
    body.page-hobby #appMain,
    body.page-hobbies #appMain,
    body.page-hobby-survey #appMain,
    body.page-hobby-recommendations-result #appMain,
    body.page-search #appMain,
    body.page-news #appMain {
        overflow-x: hidden !important;
    }

    /* Убираем горизонтальные отступы от tailwind-класса px-4 на мобильных */
    body.page-news #appMain .news-page,
    body.page-hobby #appMain .hobby-page,
    body.page-hobbies #appMain .hobbies-page,
    body.page-profile #appMain .profile-page-column,
    body.page-hobby-survey #appMain #content,
    body.page-hobby-recommendations-result #appMain .max-w-6xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #bottomNav.hide-on-modal {
        display: none !important;
    }
}

/*
 * Список мессенджера без открытого чата (до ширины как в messenger.php / main):
 * #appMain не скроллится целиком — прокрутка в #alldialogscontainer, вкладки на месте.
 * При открытом чате body.mobile-dialog-fullscreen переопределяет #appMain.
 */
@media (max-width: 1024px) {
    body.page-messenger:not(.mobile-dialog-fullscreen) #appMain {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    body.page-messenger:not(.mobile-dialog-fullscreen) #appMain .dialogspage:not(:has(#dialogblock)) {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        top: 0 !important;
    }
}