/**
 * MERİVA — mobile fit overlay
 * Prevents navbar/wordmark clip, chip cut-off, and page overflow on 360–430.
 * Does not change homepage hero composition or desktop navbar.
 */

html,
body {
    overflow-x: clip;
}

.m-app-main,
.m-app-container {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 430px) {
    .m-app-header.m-navbar.m-premium-navbar,
    .m-app-header.m-navbar {
        padding-left: max(0.65rem, env(safe-area-inset-left));
        padding-right: max(0.65rem, env(safe-area-inset-right));
    }

    .m-navbar-inner {
        gap: 0.4rem;
        min-width: 0;
    }

    .m-navbar-left {
        gap: 0.3rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .m-navbar-brand {
        gap: 0.4rem;
        min-width: 0;
        flex-shrink: 1;
    }

    .m-navbar-brand .m-badger-emblem {
        width: 28px;
        height: 28px;
    }

    .m-navbar-wordmark {
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        overflow: hidden;
        text-overflow: clip;
    }

    .m-navbar-right {
        gap: 0.2rem;
        flex: 0 0 auto;
    }

    .m-navbar-menu-btn,
    .m-navbar-icon {
        width: 2.5rem;
        min-width: 44px;
        flex-shrink: 0;
    }

    .m-navbar-auth-mobile .m-btn {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .m-feed-chips,
    .mx-content-prefs {
        padding-right: 1.35rem;
        scroll-padding-inline: 0.75rem;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.1rem), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.1rem), transparent 100%);
    }

    .m-feed-chips::after,
    .mx-content-prefs::after {
        content: "";
        flex: 0 0 0.85rem;
    }

    .m-app-main h1,
    .m-app-main h2 {
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 100%;
    }

    .m-app-main p,
    .m-app-main li {
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

@media (max-width: 389.98px) {
    .m-navbar-auth-mobile {
        display: none !important;
    }
}

@media (max-width: 374.98px) {
    .m-navbar-wordmark {
        font-size: 0.84rem;
        letter-spacing: 0.04em;
    }

    .m-dock-link span {
        font-size: 0.62rem;
    }

    .mx-community-v2 .mx-community-action-hint {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .mx-community-v2 .mx-community-mission-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-feed-chips,
    .mx-content-prefs {
        scroll-behavior: auto;
    }
}

body.m-ui-v4 {
    overflow-x: clip;
}

body.m-ui-v4 .m-app-main,
body.m-ui-v4 .m-app-container,
body.m-ui-v4 .v4-explore {
    min-width: 0;
    max-width: 100%;
}