/* Телефон (до 768px): нижняя панель вкладок (elements/mobile_tabbar.php), выезжающее меню,
   отступы под панель и вырезы экрана. Поведение — js/mobile-nav.js. */

.mtab { display: none; }

/* Шапка в светлой теме — светлая, как сайдбар (раньше оставалась тёмной) */
[data-theme="light"] .mobile-header {
    --h-text: #1d1d24;
    --h-card: #f1f1f5;
    --h-border: #e4e4ea;
    --h-bg-glass: rgba(255, 255, 255, 0.96);
}

@media (max-width: 768px) {
    :root {
        --mobile-tab-height: 62px;
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --tab-space: calc(var(--mobile-tab-height) + var(--safe-bottom));
    }
    body.no-tabbar { --tab-space: var(--safe-bottom); }

    /* ---- Нижняя панель ---- */
    .mtab {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1003;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        height: var(--mobile-tab-height);
        padding: 0 4px var(--safe-bottom);
        box-sizing: content-box;
        background: var(--sb4-bg, #15151b);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--sb4-border, #24242c);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
        transition: transform 0.2s ease;
    }
    body.no-tabbar .mtab, body.kb-open .mtab { transform: translateY(100%); pointer-events: none; }

    .mtab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--sb4-muted, #8a8a96);
        font: inherit;
        font-family: 'Minecraft', sans-serif;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mtab-icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 46px;
        height: 28px;
        border-radius: 14px;
        font-size: 17px;
        transition: background 0.15s, color 0.15s;
    }
    .mtab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
    .mtab-item.is-active, .mtab-item.is-open { color: var(--sb4-text, #f2f2f5); }
    .mtab-item.is-active .mtab-icon, .mtab-item.is-open .mtab-icon {
        background: color-mix(in srgb, var(--sb4-accent, #6a5aff) 18%, transparent);
        color: var(--sb4-accent, #6a5aff);
    }
    .mtab-item:active .mtab-icon { transform: scale(0.94); }
    .mtab-item:focus-visible { outline: 2px solid var(--sb4-accent, #6a5aff); outline-offset: -4px; border-radius: 12px; }
    .mtab-badge {
        position: absolute;
        top: -4px; right: 2px;
        min-width: 17px; height: 17px;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 9px;
        background: #ff5b5b;
        color: #fff;
        font-style: normal;
        font-size: 10px;
        line-height: 17px;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
    }

    /* ---- Место под панель внизу страницы ---- */
    body { padding-bottom: var(--tab-space) !important; }
    .back-to-top { bottom: calc(var(--tab-space) + 14px) !important; right: 14px !important; width: 44px !important; height: 44px !important; }
    #popup-notification-container { bottom: calc(var(--tab-space) + 12px) !important; right: 12px !important; left: 12px; align-items: flex-end; }

    /* ---- Шапка: вырезы экрана и подписи ---- */
    .mobile-header {
        background: var(--sb4-bg, #15151b) !important;
        border-bottom-color: var(--sb4-border, #24242c) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    .mobile-brand-icon { image-rendering: auto; }
    /* Меню открывает «Ещё» в нижней панели; кнопка в шапке нужна только там, где панели нет (чат) */
    .mobile-menu-toggle { display: none !important; }
    body.no-tabbar .mobile-menu-toggle { display: flex !important; }
    .mobile-header-brand { padding-left: 4px; }
    /* Прокрутка вниз прячет шапку, вверх — возвращает (js/mobile-nav.js) */
    .mobile-header { transition: transform 0.22s ease; }
    body.hdr-hidden .mobile-header { transform: translateY(-100%); }
    .mobile-notif-dot { top: 6px !important; right: 6px !important; }

    /* ---- Меню на телефоне — шторка «Ещё»; сайдбар остаётся только на компьютере ---- */
    #sidebarMenu { display: none !important; }

    .mm {
        position: fixed;
        left: 0; right: 0;
        bottom: var(--tab-space);
        z-index: 1002;
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: calc(100dvh - var(--mobile-bar-height, 60px) - var(--tab-space) - 16px);
        padding: 8px 12px 12px;
        box-sizing: border-box;
        background: var(--sb4-bg, #15151b);
        border: 1px solid var(--sb4-border, #24242c);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.3);
        color: var(--sb4-text, #f2f2f5);
        font-family: 'Minecraft', sans-serif;
        transform: translateY(calc(100% + var(--tab-space)));
        transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
        overscroll-behavior: contain;
    }
    .mm[hidden] { display: none; }
    .mm.is-open { transform: translateY(0); }
    .mm-handle { flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--sb4-border, #2c2c36); margin-bottom: 2px; }

    .mm-me { flex: none; display: flex; align-items: stretch; gap: 8px; }
    .mm-me-main, .mm-balance {
        display: flex; align-items: center; gap: 10px; min-width: 0;
        padding: 10px; border-radius: 16px; background: var(--sb4-me, #1b1b22);
        color: inherit; text-decoration: none;
    }
    .mm-me-main { flex: 1; }
    .mm-ava { width: 40px; height: 40px; flex: none; border-radius: 11px; object-fit: cover; image-rendering: pixelated; }
    .mm-ava.is-empty { display: grid; place-items: center; background: var(--sb4-tile, #202028); color: var(--sb4-muted, #7c7c88); }
    .mm-me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .mm-me-text b { font-weight: normal; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mm-me-text small, .mm-balance small { font-size: 12px; color: var(--sb4-muted, #7c7c88); }
    .mm-balance { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex: none; padding: 10px 14px; }
    .mm-balance b { font-weight: normal; font-size: 16px; color: var(--sb4-accent, #6a5aff); white-space: nowrap; }

    .mm-guest { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--sb4-me, #1b1b22); }
    .mm-guest p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sb4-text-soft, #b4b4c0); }
    .mm-guest div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .mm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; scrollbar-width: none; }
    .mm-scroll::-webkit-scrollbar { display: none; }
    .mm-group h3 { margin: 0 0 8px 4px; font-weight: normal; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sb4-muted, #7c7c88); }
    .mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .mm-item {
        display: flex; align-items: center; gap: 8px; min-width: 0;
        padding: 5px; border-radius: 13px; background: var(--sb4-me, #1b1b22);
        color: var(--sb4-text-soft, #b4b4c0); text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mm-item:active { background: var(--sb4-hover, #1d1d24); }
    .mm-icon { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--sb4-tile, #202028); color: var(--sb4-accent, #6a5aff); font-size: 14px; }
    .mm-label { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mm-item.is-active .mm-icon { background: var(--sb4-accent, #6a5aff); color: #fff; }
    .mm-item.is-active { color: var(--sb4-text, #f2f2f5); background: var(--sb4-active, #1f1d33); }
    .mm-item .mtab-badge { top: -5px; right: -6px; }
    /* Пункты, которые уже есть внизу, — только когда нижней панели нет (чат) */
    .mm-item.is-tab { display: none; }
    body.no-tabbar .mm-item.is-tab { display: flex; }
    .mm-group:not(:has(.mm-item:not(.is-tab))) { display: none; }
    body.no-tabbar .mm-group { display: block; }

    .mm-foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sb4-border, #24242c); }
    .mm-btn {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: 12px;
        border: 1px solid var(--sb4-border, #24242c); background: var(--sb4-me, #1b1b22);
        color: var(--sb4-text, #f2f2f5); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
    }
    .mm-btn.primary { background: var(--sb4-accent, #6a5aff); border-color: var(--sb4-accent, #6a5aff); color: #fff; }
    .mm-btn { min-width: 0; overflow: hidden; }
    .mm-btn.is-danger { padding: 0; color: #ff6b6b; }
    .mm-foot .mm-btn:only-child { grid-column: 1 / -1; }

    .sidebar-overlay {
        bottom: var(--tab-space) !important;
        height: auto !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(2px) !important;
    }

    /* ---- Окна колокольчика и аккаунта: между шапкой и панелью ---- */
    .notifications-modal, .profile-modal, .theme-modal {
        height: calc(100dvh - var(--mobile-bar-height) - var(--tab-space)) !important;
    }
    .notifications-modal .modal-content, .profile-modal .modal-content {
        width: 100% !important;
        max-width: 420px !important;
        border-radius: 18px 0 0 18px !important;
    }

    /* ---- Поля ввода: 16px — иначе iPhone приближает страницу при фокусе ---- */
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

@media (max-width: 350px) {
    .mm-icon { width: 28px; height: 28px; font-size: 12px; }
    .mm-item { gap: 6px; padding: 4px; }
    .mm-label { font-size: 11.5px; }
    .mtab-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .mtab, .mm, .mobile-header { transition: none !important; }
}