/* ForumX mobile viewport final guard — loaded last */
*, *::before, *::after { box-sizing: border-box; }

html,
body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
}

@supports not (overflow: clip) {
    html,
    body { overflow-x: hidden !important; }
}

body {
    position: relative;
    margin-inline: 0;
}

body > *,
.site-header,
.site-main,
main,
#content,
.container,
.page-shell,
.content-shell,
.home-layout,
.home-main,
.home-sidebar,
.home-block,
.card,
.panel,
.forum-card,
.fx-footer,
.mobile-bottom-nav {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
}

img,
video,
iframe,
canvas,
svg {
    max-inline-size: 100%;
}

.mobile-bottom-nav {
    box-sizing: border-box !important;
    inline-size: auto !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    transform: none !important;
}

@media (max-width: 760px) {
    body {
        touch-action: pan-y pinch-zoom;
    }

    .site-main,
    main,
    #content,
    .container,
    .home-layout,
    .home-main,
    .home-sidebar,
    .home-block,
    .home-block-content,
    .topic-feed-card,
    .topic-feed-table-shell,
    .member-grid,
    .online-users-grid,
    .new-members-grid,
    .fx-messenger,
    .fx-chat-layout,
    .forumx-editor-shell {
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }

    /* Tabs may scroll inside themselves, never move the page. */
    .topic-feed-tab-scroll,
    .forumx-quill-toolbar,
    .ql-toolbar {
        touch-action: pan-x;
        overscroll-behavior-inline: contain;
    }

    /* The old desktop topic table forced 393–446px widths on phones. */
    .topic-feed-table-shell {
        overflow-x: hidden !important;
        overscroll-behavior-inline: none !important;
    }

    .topic-feed-table-head {
        display: none !important;
    }

    .topic-feed-group,
    .topic-feed-row,
    .topic-feed-empty,
    .topic-feed-loading {
        min-inline-size: 0 !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
    }

    .topic-feed-group > header {
        min-inline-size: 0 !important;
        inline-size: 100% !important;
        padding-inline: 10px !important;
    }

    .topic-feed-row {
        display: grid !important;
        grid-template-columns: 28px 34px minmax(0, 1fr) 34px 38px !important;
        align-items: center !important;
        min-height: 44px !important;
        overflow: hidden !important;
    }

    .topic-feed-index,
    .topic-feed-avatar,
    .topic-feed-main,
    .topic-feed-number {
        min-inline-size: 0 !important;
        block-size: 44px !important;
    }

    .topic-feed-index {
        inline-size: 24px !important;
        block-size: 24px !important;
    }

    .topic-feed-avatar .avatar {
        inline-size: 28px !important;
        block-size: 28px !important;
    }

    .topic-feed-main {
        overflow: hidden !important;
        padding-inline: 5px !important;
    }

    .topic-feed-title-line,
    .topic-feed-title {
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }

    .topic-feed-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Forum name is already visible elsewhere; hide it on the narrow table. */
    .topic-feed-forum {
        display: none !important;
    }

    .topic-feed-number {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 3px !important;
        border-left: 1px solid var(--line) !important;
        font-size: .68rem !important;
    }

    .topic-feed-more {
        min-inline-size: 0 !important;
        inline-size: calc(100% - 16px) !important;
        max-inline-size: calc(100% - 16px) !important;
        margin: 8px !important;
    }

    /* Other legacy wide tables stay locally scrollable instead of widening body. */
    .table-wrap,
    .metric-table-wrap,
    .responsive-table,
    [class*="table-shell"] {
        max-inline-size: 100% !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    input,
    textarea,
    select,
    button {
        max-inline-size: 100%;
    }
}

@media (max-width: 420px) {
    .topic-feed-row {
        grid-template-columns: 26px 32px minmax(0, 1fr) 31px 35px !important;
    }

    .topic-prefix,
    .topic-type-badge,
    .topic-state {
        max-inline-size: 58px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}