/*
|--------------------------------------------------------------------------
| Prelhe Messages Root Scroll Repair
|--------------------------------------------------------------------------
| Normal pages use document scrolling.
| Real chat pages use one controlled internal message scroller.
*/

:root {
    --prelhe-runtime-vh: 100dvh;
    --prelhe-runtime-chat-height: 100dvh;
    --prelhe-safe-bottom:
        env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------------
   NORMAL MESSAGE PAGES
------------------------------------------------------------- */

html.prelhe-msg-scroll-page {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;

    touch-action:
        pan-x
        pan-y
        pinch-zoom !important;

    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}

body.prelhe-msg-scroll-page {
    position: relative !important;

    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height:
        var(
            --prelhe-runtime-vh,
            100dvh
        ) !important;

    max-height: none !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    overscroll-behavior-y: auto !important;

    touch-action:
        pan-x
        pan-y
        pinch-zoom !important;

    -webkit-overflow-scrolling: touch;
}

/*
 * Old installers ne top-level page containers par
 * fixed 100vh aur overflow hidden lagaya ho to remove.
 */
body.prelhe-msg-scroll-page
:is(
    main,
    .page,
    .page-shell,
    .app-shell,
    .content-shell,
    .message-page,
    .messages-page,
    .prelhe-message-page,
    .prelhe-message-home,
    .simple-message-home,
    .prelhe-simple-message-home,
    .prelhe-message-settings-page,
    .prelhe-groups-page,
    [data-prelhe-message-settings],
    [data-prelhe-group-index],
    [data-prelhe-group-create-page],
    [data-prelhe-group-info]
):not(
    [data-prelhe-direct-chat]
):not(
    [data-prelhe-group-chat]
):not(
    [data-chat-shell]
) {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;
    inset: auto !important;

    height: auto !important;
    min-height:
        calc(
            var(
                --prelhe-runtime-vh,
                100dvh
            )
            - 1px
        ) !important;

    max-height: none !important;

    overflow: visible !important;
    overflow-y: visible !important;

    overscroll-behavior-y: auto !important;

    touch-action:
        pan-y
        pinch-zoom !important;
}

/* Lists and cards must not trap scrolling. */

body.prelhe-msg-scroll-page
:is(
    .prelhe-group-list-card,
    .prelhe-group-list,
    .prelhe-group-form,
    .prelhe-group-form-card,
    .prelhe-group-members-card,
    .prelhe-group-member-list,
    .prelhe-settings-form,
    .prelhe-settings-card,
    .conversation-list,
    .message-list,
    .messages-list,
    [data-conversation-list],
    [data-message-home-list]
) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    touch-action:
        pan-y
        pinch-zoom !important;
}

/* Member pickers should have their own limited scroll. */

body.prelhe-msg-scroll-page
:is(
    .prelhe-member-picker,
    [data-member-picker],
    .scrollable-picker
) {
    max-height:
        min(
            430px,
            58dvh
        ) !important;

    overflow-y: auto !important;

    overscroll-behavior: contain;
    touch-action:
        pan-y
        pinch-zoom !important;

    -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------
   CHAT PAGE ROOT
------------------------------------------------------------- */

html.prelhe-msg-chat-page,
body.prelhe-msg-chat-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    overscroll-behavior: none !important;
}

body.prelhe-msg-chat-page {
    position: relative !important;

    inset: auto !important;

    touch-action:
        pan-x
        pan-y
        pinch-zoom !important;
}

/*
 * The complete chat shell fits between current top position
 * and Android browser/keyboard visual viewport.
 */
body.prelhe-msg-chat-page
:is(
    [data-prelhe-direct-chat],
    [data-prelhe-group-chat],
    [data-chat-shell],
    #prelhe-group-chat,
    #clean-chat,
    .clean-chat,
    .clean-chat-shell,
    .prelhe-chat-shell,
    .direct-chat-shell,
    .prelhe-group-chat-shell
) {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    width: 100% !important;
    height:
        var(
            --prelhe-runtime-chat-height,
            100dvh
        ) !important;

    min-height: 320px !important;

    max-height:
        var(
            --prelhe-runtime-chat-height,
            100dvh
        ) !important;

    margin-right: auto !important;
    margin-left: auto !important;

    overflow: hidden !important;

    overscroll-behavior: none !important;

    box-sizing: border-box !important;
}

/* Header remains inside chat shell, not fixed to entire document. */

body.prelhe-msg-chat-page
:is(
    .clean-chat-header,
    .prelhe-chat-header,
    .prelhe-group-chat-header,
    [data-chat-header]
) {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;
    inset: auto !important;

    flex: 0 0 auto;

    width: 100% !important;

    z-index: 30;
}

/* Only the actual messages list scrolls. */

body.prelhe-msg-chat-page
:is(
    #clean-message-list,
    .clean-message-list,
    .prelhe-group-messages,
    .prelhe-chat-messages,
    .direct-message-list,
    .message-thread,
    [data-chat-messages],
    [data-group-message-list],
    [data-message-list]
) {
    position: relative !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain !important;

    touch-action:
        pan-y
        pinch-zoom !important;

    scroll-behavior: auto;

    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

/* Composer remains visible at the bottom of chat grid. */

body.prelhe-msg-chat-page
:is(
    .clean-chat-composer,
    .clean-chat-form,
    .prelhe-chat-composer,
    .prelhe-group-composer,
    .direct-chat-composer,
    [data-chat-composer],
    [data-group-composer],
    [data-message-form]
) {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    flex: 0 0 auto;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding-bottom:
        max(
            8px,
            var(--prelhe-safe-bottom)
        ) !important;

    transform: none !important;

    z-index: 40;

    box-sizing: border-box !important;
}

/* Composer fields responsive width. */

body.prelhe-msg-chat-page
:is(
    .clean-chat-composer,
    .clean-chat-form,
    .prelhe-chat-composer,
    .prelhe-group-composer,
    .direct-chat-composer,
    [data-chat-composer],
    [data-group-composer],
    [data-message-form]
)
:is(
    input,
    textarea,
    [contenteditable="true"]
) {
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* -------------------------------------------------------------
   MODAL AND MENU SCROLL
------------------------------------------------------------- */

body.prelhe-msg-modal-open {
    overflow: hidden !important;
}

body.prelhe-msg-modal-open
:is(
    dialog[open],
    [aria-modal="true"],
    .modal.is-open,
    .modal.show,
    [data-modal].is-open
) {
    max-height:
        calc(
            var(
                --prelhe-runtime-vh,
                100dvh
            )
            - 24px
        ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;

    touch-action:
        pan-y
        pinch-zoom !important;

    -webkit-overflow-scrolling: touch;
}

/*
 * Three-dot menus should not lock or blur the full page.
 */
body:is(
    .prelhe-msg-scroll-page,
    .prelhe-msg-chat-page
)
:is(
    .prelhe-home-dot-panel,
    .prelhe-clean-menu-panel,
    .prelhe-original-menu-panel,
    .prelhe-message-home-menu-panel,
    .chat-options-menu,
    [data-chat-menu],
    [data-message-menu]
) {
    max-height:
        min(
            520px,
            calc(
                var(
                    --prelhe-runtime-vh,
                    100dvh
                )
                - 32px
            )
        ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;

    touch-action:
        pan-y
        pinch-zoom !important;

    -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------
   STALE BLUR / POINTER LOCK REPAIR
------------------------------------------------------------- */

html.prelhe-msg-no-modal
body
:is(
    .prelhe-page-blur,
    .is-page-blurred,
    [data-page-blurred="true"]
) {
    filter: none !important;
    -webkit-filter: none !important;

    pointer-events: auto !important;

    transform: none !important;
}

/* Avoid invisible elements blocking page touch. */

html.prelhe-msg-no-modal
body
:is(
    [aria-hidden="true"].modal-backdrop,
    [aria-hidden="true"][data-overlay],
    .modal-backdrop:not(.show),
    .overlay:not(.is-open):not(.show)
) {
    display: none !important;

    pointer-events: none !important;
}

/* -------------------------------------------------------------
   MOBILE VIEWPORT
------------------------------------------------------------- */

@supports (height: 100svh) {
    :root {
        --prelhe-runtime-vh: 100svh;
    }
}

@media (max-width: 760px) {
    body.prelhe-msg-scroll-page {
        padding-bottom:
            max(
                0px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    body.prelhe-msg-chat-page
    :is(
        [data-prelhe-direct-chat],
        [data-prelhe-group-chat],
        [data-chat-shell],
        #prelhe-group-chat,
        #clean-chat,
        .clean-chat-shell,
        .prelhe-chat-shell,
        .direct-chat-shell,
        .prelhe-group-chat-shell
    ) {
        width: 100% !important;

        border-right: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }
}

/* Reduced motion preference. */

@media (
    prefers-reduced-motion: reduce
) {
    html.prelhe-msg-scroll-page,
    body.prelhe-msg-scroll-page,
    body.prelhe-msg-chat-page * {
        scroll-behavior: auto !important;
    }
}