/**
 * adaptive/mobile.css — @media from style.css (C.4).
 * 1:1 move. Overrides pages-adaptive-* не трогались в этом шаге.
 */

@media (max-width: 480px) {
    .friends-fab {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

/* @bp-phone — 640px */
@media (max-width: 640px) {
    .chat-gif-modal {
        width: calc(100vw - 16px);
        height: min(640px, calc(100vh - 32px));
    }

    .chat-gif-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* @bp-phone — 640px */
@media (max-width: 640px) {
    .settings-device-row {
        flex-wrap: wrap;
    }

    .settings-device-actions {
        width: 100%;
        justify-content: flex-start;
        padding-top: var(--space-1);
    }
}

/* @bp-compact — 560px */
@media (max-width: 560px) {
    .library-news-card,
    .library-news-card--wide {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .library-news-thumb,
    .library-news-card--wide .library-news-thumb {
        width: 56px;
        height: 56px;
    }
}

/* @bp-narrow — 720px */
@media (max-width: 720px) {
    .web-mode-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* @bp-narrow — 720px */
@media (max-width: 720px) {
    .steam-inventory-layout {
        grid-template-columns: 1fr;
    }

    .steam-inventory-cats {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* @bp-narrow — 720px */
@media (max-width: 720px) {
    .main-content {
        padding: var(--space-3);
    }

    .main-content h1 {
        font-size: 1.35rem;
    }

    .discord-layout {
        height: 100%;
        min-height: 0;
    }

    .community-page[data-community-style="telegram"] .discord-layout.community-layout-root,
    .community-page[data-community-style="vk"] .discord-layout.community-layout-root {
        display: grid !important;
        flex-direction: unset !important;
        height: 100% !important;
        min-height: 0;
    }

    .guilds-bar {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .channels-bar {
        width: 100% !important;
        max-height: 180px;
        border-right: none !important;
        border-bottom: 1px solid var(--va-bg-card, #2f3136);
    }

    .community-page[data-community-style="vk"] .channels-bar,
    .community-page[data-community-style="telegram"] .channels-bar {
        max-height: none !important;
    }

    .community-chat-area {
        min-height: 320px;
        flex: 1 1 auto;
    }

    .members-sidebar {
        display: none !important;
    }

    .community-page {
        --community-shell-h: calc(100vh - 88px);
    }

    .library-layout {
        grid-template-columns: 1fr !important;
    }

    .library-sidebar {
        max-height: 220px;
        overflow-y: auto;
    }

    .market-sell-layout,
    .settings-layout,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-page-actions {
        width: 100%;
    }

    .inventory-page-actions .btn {
        flex: 1 1 auto;
    }

    .steam-inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }

    .steam-inv-body {
        grid-template-columns: 1fr;
    }

    .steam-inv-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.1rem;
    }

    .header-balance,
    .header-status {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steam-avatar-wrap.profile-avatar-preview {
        width: 120px;
        height: 120px;
    }

    .profile-avatar-preview {
        --profile-avatar-size: 120px;
    }

    .guild-voice-tiles {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .chat-input-row {
        flex-wrap: wrap;
    }

    .chat-input-row input[type="text"] {
        min-width: 0;
        flex: 1 1 100%;
        order: 1;
    }

    .chat-input-row .btn:last-child {
        margin-left: auto;
    }
}

/* @bp-narrow — 720px */
@media (max-width: 720px) {
    .rewards-grid { grid-template-columns: 1fr; }
}

/* TODO(bp): 760px leave — stack/one-off */
@media (max-width: 760px) {
    .add-friend-body {
        grid-template-columns: 1fr;
    }

    .add-friend-preview-panel {
        position: static;
        min-height: 200px;
    }
}