/* ============================================================
   MOBILE FIXES — дополнительный слой поверх main.css
   Подключается ПОСЛЕ main.css, поэтому одинаковые по
   специфичности правила ниже побеждают в каскаде и позволяют
   точечно править существующие стили, не трогая main.css.
   ============================================================ */

/* ---------- 3.2. Единая шкала z-index вместо разрозненных значений ----------
   До этого: .navbar, .bottom-nav, .emoji-picker и .side-menu-overlay были
   на одном уровне (1000), а .side-menu — то 1001, то 1050 на мобильных
   (два разных значения в разных местах). Совпадения/близкие значения —
   ровно то, из-за чего навбар рисовался поверх чата, а не под ним. Вместо
   очередной точечной правки — сразу понятная лестница слоёв, чтобы такие
   конфликты не всплывали в третий раз в новых местах.

   10   — локальные элементы внутри карточек (было и осталось)
   100  — навбар + нижняя навигация (не пересекаются друг с другом физически)
   200  — chat-view (полноэкранный чат поверх навбара/нижней навигации)
   300  — затемнение под боковым меню
   310  — само боковое меню
   400  — затемнение под панелью уведомлений
   410  — панель уведомлений
   450  — emoji-picker
   500  — модальные окна
   600  — тосты/всплывающие уведомления, инвайты в игру — выше всего остального
*/
.navbar { z-index: 100; }
.bottom-nav { z-index: 100; }
.side-menu-overlay { z-index: 300; }
.side-menu { z-index: 310; }
.notifications-overlay { z-index: 400; }
.notifications-panel { z-index: 410; }
.emoji-picker { z-index: 450; }
.modal-overlay { z-index: 500; }
.notification { z-index: 600; }
.game-invite-popup { z-index: 610; }

@media (max-width: 480px) {
    .chat-view { z-index: 200; }
    .side-menu { z-index: 310; }
    .bottom-nav { z-index: 100; }
}

/* ---------- 3.3. Поле ввода превращалось в "шар" на многострочном тексте ----------
   border-radius: var(--r-pill) (999px) в main.css красиво выглядит на
   однострочном поле (таблетка), но когда JS растит textarea по высоте
   (autoResizeInput) при многострочном тексте, тот же радиус на почти
   квадратной коробке визуально превращает её в шар с текстом, вылезающим
   за пределы видимой области. К тому же текст выше max-height просто
   обрезался — не было overflow-y, чтобы можно было проскроллить. */
.message-input {
    border-radius: 20px;
    overflow-y: auto;
}

/* ---------- 3.1. Реальная высота вьюпорта поверх dvh ----------
   --real-vh считает mobile-enhancements.js через visualViewport и
   обновляет при каждом открытии/закрытии клавиатуры. dvh остаётся
   как мгновенный фолбэк на первую отрисовку, пока JS ещё не отработал. */
.chat-view,
.side-menu,
.auth-screen {
    height: 100vh;
    height: 100dvh;
    height: var(--real-vh, 100dvh);
}

@media (max-width: 480px) {
    .chat-view {
        height: 100vh;
        height: 100dvh;
        height: var(--real-vh, 100dvh);
    }
}

/* ---------- 1. iOS auto-zoom fix ----------
   Safari на iPhone автоматически зумит страницу при фокусе на
   поле ввода, если у него font-size < 16px. В main.css несколько
   полей были меньше (.message-input на мобиле — 14.4px,
   .modal-input — 14.7px, .search-input — 15.2px), из-за чего при
   каждом тапе в поле экран дёргался и зуммировался. */
.modal-input,
.search-input,
.message-input,
.setting-select,
select.setting-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
    font-size: 16px;
}

@media (max-width: 480px) {
    .message-input { font-size: 16px; }
}

/* ---------- 2. Overscroll / резиновый скролл ----------
   Без overscroll-behavior потягивание списка чатов или ленты
   сообщений вверх на телефоне «протекает» на body и вызывает
   резиновый отскок всей страницы / pull-to-refresh браузера —
   в чат-приложении это особенно заметно и раздражает. */
html, body {
    overscroll-behavior-y: contain;
}

.messages-container,
.chats-list,
.side-menu,
.notifications-panel,
.modal,
.settings-container,
.admin-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 3. Экран авторизации: dvh вместо vh ----------
   На мобильных браузерах 100vh не учитывает панель адреса,
   из-за чего страница входа была выше видимой области и
   слегка «прыгала» при скролле. Паттерн dvh уже используется
   в main.css для chat-view и side-menu — тут его не хватало. */
.auth-screen {
    min-height: 100vh;   /* фолбэк для старых браузеров */
    min-height: 100dvh;
}

/* ---------- 4. Затемнение позади бокового меню ----------
   В main.css у .side-menu не было своего оверлея (в отличие от
   уведомлений, для которых он есть) — на планшетной ширине меню
   не закрывает весь экран, и не было возможности закрыть его
   тапом мимо, только повторным нажатием на гамбургер. */
.side-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.45);
    opacity: 0;
    transition: opacity .2s ease;
}

.side-menu-overlay.active {
    display: block;
    opacity: 1;
}

@media (max-width: 480px) {
    /* На телефоне side-menu и так занимает 100% ширины —
       оверлей не нужен визуально, но остаётся кликабельным
       элементом вне меню на случай будущих раскладок. */
    .side-menu-overlay.active { background: rgba(10, 12, 20, 0.55); }
}

/* ---------- 5. Блокировка скролла фона при открытых панелях ---------- */
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ---------- 6. Landscape-телефон: навбар и нижняя навигация ниже ----------
   В альбомной ориентации высота экрана резко сокращается, а
   navbar/bottom-nav занимали столько же места, сколько в портретной
   ориентации — сообщений помещалось критически мало. */
@media (max-height: 420px) and (orientation: landscape) {
    :root { --navbar-height: 48px; --bottom-nav-height: 48px; }

    .navbar { padding: .3rem .8rem; }

    .bottom-nav-item span { display: none; } /* оставляем только иконки */

    .bottom-nav-item i { font-size: 1.1rem; }

    .auth-container { padding: 1.25rem; max-height: 96dvh; }
}

/* ---------- 7. Видимый фокус для клавиатурной/switch-навигации ----------
   Было полностью не видно, куда сейчас переведён фокус — важно
   не только для доступности, но и для управления с внешней
   Bluetooth-клавиатуры на планшете/телефоне. */
button:focus-visible,
.side-menu-item:focus-visible,
.chat-item:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-orange, #FFB347);
    outline-offset: 2px;
}

/* ---------- 8. Safe-area для полноэкранных модалок и панели уведомлений ---------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .notifications-panel {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .navbar {
        padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
        height: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
    }
}

/* ---------- 9. Предотвращаем горизонтальный скролл на узких экранах ---------- */
html, body {
    overflow-x: hidden;
}

/* ============================================================
   10. МОБИЛЬНЫЙ ПРОХОД ПО ФИЧАМ, ДОБАВЛЕННЫМ ПОСЛЕ ПЕРВОНАЧАЛЬНОЙ
   МОБИЛЬНОЙ ВЁРСТКИ (контакты, кошелёк, бизнес, поддержка,
   просмотрщик медиа, трансляции) — раньше у них не было ни одного
   мобильного переопределения вообще.
   ============================================================ */

/* ---------- 10.0. Заголовки "стрелка-назад + заголовок" ----------
   .chats-header была рассчитана на пару "заголовок + кнопка справа"
   (space-between), а не на "кнопка слева + заголовок" — с ней вторая
   пара выглядела так, будто заголовок прибит к правому краю с
   огромным пустым промежутком. */
.chats-header-back {
    justify-content: flex-start;
    gap: .6rem;
}

/* ---------- 10.1. Тач-таргет кнопки "назад"/крестика ----------
   .modal-close была ~34px по факту — меньше минимальных 44px,
   принятых во всём остальном приложении. */
@media (max-width: 480px) {
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* ---------- 10.2. Контакты ---------- */
    .contact-item {
        padding: .6rem .2rem;
        min-height: 56px;
        gap: .65rem;
    }

    .contact-item .chat-avatar {
        width: 46px;
        height: 46px;
        font-size: .95rem;
    }

    .contacts-list { margin-bottom: .3rem; }

    /* ---------- 10.3. Настройки: аватар-шапка аккаунта, иконки-бейджи ---------- */
    .settings-account-header { gap: .7rem; padding: .35rem 0 .85rem; }

    .settings-account-avatar { width: 50px; height: 50px; font-size: 1.2rem; }

    .settings-account-name { font-size: .96rem; max-width: 58vw; }

    .settings-account-hint { font-size: .72rem; }

    .settings-h3-icon { width: 23px; height: 23px; font-size: .74rem; }

    .settings-link-icon { width: 27px; height: 27px; font-size: .82rem; }

    .settings-link-main { gap: .65rem; }

    .settings-link-trailing { gap: .4rem; }

    /* ---------- 10.4. Кошелёк — кнопки друг под другом, а не втиснуты в ряд ---------- */
    .wallet-actions {
        flex-direction: column;
        gap: .5rem;
    }

    .wallet-balance-card { padding: 1.2rem; }

    .wallet-balance-card .wallet-balance-value { font-size: 1.85rem; }

    /* ---------- 10.5. Minva для бизнеса ---------- */
    .business-hero { padding: 1.1rem .5rem; }

    .business-hero .business-icon { font-size: 2.1rem; }

    .business-feature-item { padding: .7rem; font-size: .88rem; }

    /* ---------- 10.6. Архив — строка-папка вверху списка ---------- */
    .archive-folder-row { min-height: 60px; }

    /* ---------- 10.7. Поддержка — пузыри треда чуть уже, читаемее ---------- */
    .support-thread { max-height: 42vh; }

    .support-bubble { max-width: 90%; font-size: .85rem; }

    .support-thread-input-row textarea { font-size: .9rem; }

    /* ---------- 10.8. Просмотрщик медиа — теснее хедер/футер на узких экранах ---------- */
    .mv-header { gap: .35rem; padding: calc(.5rem + env(safe-area-inset-top, 0px)) .5rem .5rem; }

    .mv-icon-btn { width: 40px; height: 40px; font-size: .95rem; }

    .mv-header-name { font-size: .85rem; }

    .mv-footer { padding: .5rem .6rem calc(.65rem + env(safe-area-inset-bottom, 0px)); gap: .45rem; }

    /* ---------- 10.9. Звонки — плотнее на узких экранах (<=360px и ниже) ---------- */
    .call-local-video { width: 92px; height: 128px; }

    .call-controls, .call-incoming-actions { gap: 1.05rem; }

    .call-ctrl-btn { width: 56px; height: 56px; font-size: 1.15rem; }

    /* ---------- 10.10. Баннер трансляции — не даём тексту распирать кнопку ---------- */
    .broadcast-banner { padding: .5rem .7rem; font-size: .8rem; }

    .broadcast-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 360px) {
    .call-local-video { width: 80px; height: 112px; }
    .call-ctrl-btn { width: 52px; height: 52px; font-size: 1.05rem; }
    .settings-link-icon { width: 25px; height: 25px; }
}