/**
 * Pixel 7 / phone polish (≈412×915) — mobile-first overrides.
 * Loaded after adaptive/mobile.css. Desktop (≥1024) untouched.
 * body.mobile-layout toggles at <900px (--bp-tablet).
 */

/* —— Shared —— */
body.mobile-layout {
    --voltark-bottom-nav-h: 56px;
    --m-pad: clamp(8px, 2vw, 12px);
    --m-font: clamp(14px, 3.6vw, 16px);
    overflow-x: hidden;
    max-width: 100vw;
}

body.mobile-layout #app,
body.mobile-layout .app-shell,
body.mobile-layout .main-content {
    max-width: 100%;
    overflow-x: hidden;
}

body.mobile-layout .main-content {
    max-width: 100%;
    padding: var(--m-pad);
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    font-size: var(--m-font);
}

body.mobile-layout .community-page,
body.mobile-layout .community-layout,
body.mobile-layout .channels-feed,
body.mobile-layout .cf-post,
body.mobile-layout .tg-media,
body.mobile-layout .message-list {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Bottom-nav: 4 icons (hide Загрузки) */
body.mobile-layout .bottom-navigation,
body.mobile-layout #bottom-navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex !important;
}

body.mobile-layout .bottom-nav-btn[data-page="downloads"] {
    display: none !important;
}

/* Убрать второй «bottom-nav» — FAB «Сообщество/Онлайн» */
body.mobile-layout .friends-fab,
body.mobile-layout #friends-fab {
    display: none !important;
}

body.mobile-layout .bottom-nav-btn {
    min-height: 44px;
    font-size: 0.62rem;
    gap: 2px;
    padding: 6px 2px;
}

body.mobile-layout .bottom-nav-btn .bottom-nav-icon,
body.mobile-layout .bottom-nav-btn .ui-icon {
    width: 22px;
    height: 22px;
}

/* —— Profile —— */
body.mobile-layout .steam-profile-header.profile-header-v3,
body.mobile-layout .profile-header-v3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 10px;
    padding: 12px var(--m-pad) 10px;
    margin-top: 0 !important;
}

body.mobile-layout .profile-header-main-col {
    align-items: center;
    gap: 8px;
    width: 100%;
}

body.mobile-layout .steam-avatar-wrap.profile-avatar-preview,
body.mobile-layout .profile-avatar-preview,
body.mobile-layout #steam-avatar-wrap {
    --profile-avatar-size: 96px !important;
    --ufa-size: 96px !important;
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
}

body.mobile-layout .profile-header-name-row h1 {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    line-height: 1.2;
}

body.mobile-layout .profile-header-identity .eyebrow {
    font-size: 0.78rem;
}

body.mobile-layout .profile-xp-row {
    width: 100%;
    max-width: none;
    margin: 4px 0 8px;
}

body.mobile-layout .pb-stats,
body.mobile-layout .profile-metrics-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 4px 0 10px;
}

body.mobile-layout .pb-stats > *,
body.mobile-layout .profile-metrics-row > * {
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
}

body.mobile-layout .pb-stats b,
body.mobile-layout .profile-metrics-row b {
    font-size: 1.05rem;
}

body.mobile-layout .profile-header-actions-row,
body.mobile-layout .steam-header-actions,
body.mobile-layout .profile-header-tools {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

body.mobile-layout .steam-header-actions {
    display: flex !important;
    grid-template-columns: none !important;
}

body.mobile-layout .steam-header-actions .btn,
body.mobile-layout .profile-owner-bar .btn {
    flex: 1 1 100%;
    min-height: 44px;
    max-height: 48px;
    height: 48px;
    padding: 10px 16px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

body.mobile-layout .profile-header-tools .btn,
body.mobile-layout .profile-header-actions-row .btn-outline {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 8px 12px;
    font-size: 0.82rem;
    white-space: nowrap;
}

body.mobile-layout .steam-main-tabs,
body.mobile-layout .profile-tab-v2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 0 4px 8px;
    width: 100%;
}

body.mobile-layout .steam-main-tabs::-webkit-scrollbar,
body.mobile-layout .profile-tab-v2::-webkit-scrollbar {
    display: none;
}

body.mobile-layout .steam-main-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.8rem;
}

body.mobile-layout .steam-profile-side-col,
body.mobile-layout .steam-profile-tab-layout .steam-profile-side-col {
    display: none !important;
}

/* —— Library —— */
body.mobile-layout .cr-meta .library-hub-grid,
body.mobile-layout .library-hub-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
}

body.mobile-layout .lib-hub-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.mobile-layout .lib-hub-empty,
body.mobile-layout .lib-hub-cards-grid > .lib-hub-empty,
body.mobile-layout .lib-hub-cards-grid > .muted,
body.mobile-layout .lib-hub-block .muted,
body.mobile-layout .cr-meta .muted,
body.mobile-layout .store-page--hero .hero-vert,
body.mobile-layout .store-hero-vert {
    grid-column: 1 / -1 !important;
    writing-mode: horizontal-tb !important;
    -webkit-text-orientation: mixed !important;
            text-orientation: mixed !important;
    transform: none !important;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    letter-spacing: normal !important;
    padding: 10px 4px;
    text-align: center;
}

body.mobile-layout .cr-carousel-wrap {
    padding-inline: 28px;
    min-height: 220px;
}

body.mobile-layout .cr-card {
    flex-basis: min(220px, 72vw) !important;
    height: 200px !important;
}

body.mobile-layout .cr-card.on {
    transform: scale(1.04);
}

body.mobile-layout .cr-meta h1 {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
}

body.mobile-layout .lib-shared-media {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px;
    padding: 12px !important;
}

body.mobile-layout .lib-shared-actions,
body.mobile-layout .cr-meta .lib-shared-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.mobile-layout .lib-shared-actions .btn {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
}

body.mobile-layout .library-toolbar,
body.mobile-layout .lib-filters,
body.mobile-layout .library-search-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

body.mobile-layout .library-toolbar input,
body.mobile-layout .library-toolbar select,
body.mobile-layout .lib-filters input,
body.mobile-layout .lib-filters select {
    width: 100%;
    min-height: 44px;
}

body.mobile-layout .lw-side,
body.mobile-layout .library-detail-aside,
body.mobile-layout .ld-side {
    display: none !important;
}

/* —— Store —— */
body.mobile-layout .store-page--hero .hero-copy h1 {
    font-size: clamp(24px, 8vw, 36px) !important;
    line-height: 1.1;
    margin: 8px 0 10px;
}

body.mobile-layout .store-page--hero .hero-watermark {
    font-size: clamp(2rem, 12vw, 3rem) !important;
    opacity: 0.12;
}

body.mobile-layout .store-page--hero .hero-product-wrap {
    width: min(56vw, 220px);
    top: 32%;
}

body.mobile-layout .store-page--hero .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

body.mobile-layout .store-page--hero .hero-cta-row .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}

body.mobile-layout .store-tabs,
body.mobile-layout .catalog-tabs,
body.mobile-layout .store-seg,
body.mobile-layout [data-store-tabs] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
}

body.mobile-layout .store-tabs::-webkit-scrollbar,
body.mobile-layout .catalog-tabs::-webkit-scrollbar {
    display: none;
}

body.mobile-layout .store-tabs .btn,
body.mobile-layout .catalog-tabs .btn,
body.mobile-layout .store-seg .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
}

body.mobile-layout .store-filters,
body.mobile-layout .catalog-toolbar,
body.mobile-layout .store-search-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

body.mobile-layout .store-filters input,
body.mobile-layout .store-filters select,
body.mobile-layout .catalog-toolbar input,
body.mobile-layout .catalog-toolbar select {
    width: 100%;
    min-height: 44px;
}

body.mobile-layout .game-grid,
body.mobile-layout .store-grid,
body.mobile-layout .catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
}

body.mobile-layout .store-sale-banner,
body.mobile-layout .store-sale-banner__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.mobile-layout .pagination,
body.mobile-layout .store-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* —— Community —— */
body.mobile-layout .community-top-tabs,
body.mobile-layout .community-seg {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding-inline: 2px;
}

/* VK header nav — не дублировать как второй bottom-bar */
body.mobile-layout .community-vk-header {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

body.mobile-layout .vk-community-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    width: 100%;
}

body.mobile-layout .vk-community-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    font-size: 0.78rem;
    padding: 6px 10px;
}

body.mobile-layout .community-top-tabs::-webkit-scrollbar,
body.mobile-layout .community-seg::-webkit-scrollbar {
    display: none;
}

body.mobile-layout .community-top-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.82rem;
}

body.mobile-layout .community-left-col {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Single-pane: list OR chat */
body.mobile-layout .community-page:not(.mobile-chat-active) .community-chat-area {
    display: none !important;
}

body.mobile-layout .community-page.mobile-chat-active .channels-bar,
body.mobile-layout .community-page.mobile-chat-active .community-left-col > aside.channels-bar,
body.mobile-layout.mobile-channels-open .community-page .community-left-col {
    display: none !important;
}

body.mobile-layout .community-page.mobile-chat-active .community-chat-area {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
}

body.mobile-layout .community-chat-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 44px;
}

body.mobile-layout .community-chat-head #community-chat-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

body.mobile-layout .community-chat-head #community-ws-status {
    display: none !important;
}

body.mobile-layout .community-vk-back:not(.hidden) {
    display: inline-flex !important;
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
}

body.mobile-layout .community-input-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: none !important;
}

/* Упрощённый композер: только +, input, send */
body.mobile-layout .community-input-row #community-attach-btn,
body.mobile-layout .community-input-row #community-sticker-btn,
body.mobile-layout .community-input-row #community-gif-btn,
body.mobile-layout .community-input-row #community-emoji-btn {
    display: none !important;
}

body.mobile-layout .community-input-row #community-media-more {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 1.25rem;
    line-height: 1;
}

body.mobile-layout .community-input-row #community-input,
body.mobile-layout .community-input-row .community-chat-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px;
    max-height: 96px;
    grid-column: auto !important;
    order: 0 !important;
    font-size: clamp(14px, 1.2vw + 0.5rem, 18px);
}

body.mobile-layout .community-input-row .chat-emoji-btn:not(#community-media-more) {
    display: none !important;
}

body.mobile-layout .community-input-row #community-send {
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0;
    border-radius: 12px;
}

body.mobile-layout .community-input-row #community-send::after {
    content: "🚀";
    font-size: 1.1rem;
    line-height: 1;
}

body.mobile-layout .community-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.mobile-layout .discord-layout.community-layout-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.mobile-layout img,
body.mobile-layout video {
    max-width: 100%;
    height: auto;
}

body.mobile-layout .friend-folders,
body.mobile-layout .community-chips,
body.mobile-layout .sf-chips,
body.mobile-layout .stories-rail,
body.mobile-layout .channel-stories-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
}

body.mobile-layout .friend-folders::-webkit-scrollbar,
body.mobile-layout .stories-rail::-webkit-scrollbar {
    display: none;
}

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

@media (min-width: 640px) and (max-width: 1023px) {
    body.mobile-layout .game-grid,
    body.mobile-layout .store-grid,
    body.mobile-layout .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.mobile-layout .lib-hub-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.mobile-layout .pb-stats,
    body.mobile-layout .profile-metrics-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* —— Community chrome auto-hide —— */
body.mobile-layout.page-community.chrome-hidden .app-header,
body.mobile-layout.page-community.chrome-hidden .bottom-navigation,
body.mobile-layout.page-community.chrome-hidden #bottom-navigation {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body.mobile-layout.page-community .app-header,
body.mobile-layout.page-community .bottom-navigation,
body.mobile-layout.page-community #bottom-navigation {
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body.mobile-layout.page-community.chrome-hidden .main-content {
    padding-top: 8px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* —— Radial Menu —— */
.radial-menu {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    width: 56px;
    height: 56px;
    pointer-events: none;
}

body.mobile-layout .radial-menu.is-visible {
    display: block;
    pointer-events: auto;
}

.radial-fab {
    position: absolute;
    inset: 0;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--va-accent, #00e5ff);
    color: var(--va-btn-text, #061016);
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
    z-index: 2;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.radial-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 45%);
    z-index: 0;
}

.radial-items {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.radial-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    min-width: 52px;
    max-width: 76px;
    min-height: 52px;
    margin: -26px 0 0 -26px;
    border: 0;
    border-radius: 16px;
    background: #1b2838;
    color: #eef1f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    font-size: 0.58rem;
    line-height: 1.1;
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
    z-index: 1;
}

.radial-item-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.radial-item-label {
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Открытые пункты: JS ставит position:fixed + left/top в viewport (не клипаются). */
.radial-menu.is-open .radial-item.is-placed {
    opacity: 1;
    pointer-events: auto;
    z-index: 10001;
}

.radial-menu.is-open .radial-item:not(.is-placed) {
    opacity: 0;
    pointer-events: none;
}

body.mobile-layout.page-community .radial-menu {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Media bottom-sheet */
.community-media-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11000;
    background: #121a24;
    border-radius: 16px 16px 0 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    box-shadow: 0 -8px 32px rgb(0 0 0 / 40%);
}

.community-media-sheet[hidden] {
    display: none !important;
}

.community-media-sheet button {
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    background: #1b2838;
    color: #eef1f6;
    font-size: 0.78rem;
}

.community-media-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10990;
    background: rgb(0 0 0 / 45%);
}

.community-media-sheet-backdrop[hidden] {
    display: none !important;
}

/* Desktop guard — never apply phone rules above 1023 when not mobile-layout */
@media (min-width: 1024px) {
    body:not(.mobile-layout) .bottom-nav-btn[data-page="downloads"] {
        display: flex;
    }

    body:not(.mobile-layout) .radial-menu {
        display: none !important;
    }
}