/* Вожатская — мобильный слой (адаптивная версия на том же домене).
   Подключается последним, поэтому переопределяет десктопные правила.

   Принцип: ни одного хардкода цвета и размера. Всё через токены --vz-*
   (tokens.css) и уже существующие компоненты. Поэтому если поменять
   оформление кабинета или темы — мобильная версия изменится вместе с ним,
   для всех поддоменов сразу.

   Диапазон: телефоны (до 767px). Планшеты 768–1023px остаются на
   существующих адаптивных правилах разделов. */

:root {
    --vz-tabbar-h: 58px;
    --vz-drawer-w: min(86vw, 340px);
}

/* На десктопе элементы мобильного слоя не занимают места. */
.vz-tabbar,
.vz-drawer,
.vz-drawer-backdrop,
.vz-mobile-burger,
.cabinet-burger {
    display: none;
}

/* Атрибут hidden всегда сильнее любого display из медиазапроса. */
.vz-drawer[hidden],
.vz-drawer-backdrop[hidden] {
    display: none !important;
}

@media (max-width: 767px) {

    /* ---------- Общая подготовка страницы ---------- */
    html {
        -webkit-text-size-adjust: 100%;
    }

    /* Место под фиксированное нижнее меню + системная «домашняя» полоса. */
    body.site,
    body.cabinet-body {
        padding-bottom: calc(var(--vz-tabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Меньше «воздуха», крупнее касаемые элементы. */
    .vz-container,
    .cabinet-content {
        padding-left: var(--vz-space-4);
        padding-right: var(--vz-space-4);
    }

    .vz-section {
        padding: 2.25rem var(--vz-space-4);
    }

    /* Тяжёлые секции за кадром не влияют на первый рендер. */
    .vz-section,
    .vz-reveal,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }

    /* ---------- Скрываем лишнее на телефоне ---------- */
    .site-nav {
        display: none;
    }

    [data-mobile-hide],
    .vz-mobile-hide {
        display: none !important;
    }

    /* Мобильная шапка: компактная, липкая, с блюром. */
    .site-header__inner {
        min-height: 52px;
        padding: 0 var(--vz-space-4);
        gap: var(--vz-space-3);
    }

    .site-brand__mark {
        width: 32px;
        height: 32px;
        border-radius: var(--vz-radius-xs);
        font-size: 15px;
    }

    .site-actions {
        margin-left: auto;
        gap: var(--vz-space-2);
    }

    .site-actions .logout-form,
    .site-header .logout-form {
        display: none;
    }

    .site-actions .btn {
        padding: 8px 14px;
    }

    /* Бургер мобильного меню. */
    .vz-mobile-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border: 1px solid var(--vz-border);
        border-radius: var(--vz-radius-sm);
        background: var(--vz-surface);
        color: var(--vz-text);
        cursor: pointer;
    }

    .vz-mobile-burger .ico {
        color: var(--vz-text-2);
    }

    /* Уведомления и сообщения — только иконки. */
    .head-ico {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    /* ---------- Нижнее меню ---------- */
    .vz-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--vz-z-sticky);
        padding: 0 var(--vz-space-1) env(safe-area-inset-bottom, 0px);
        background: var(--vz-surface-blur);
        -webkit-backdrop-filter: var(--vz-blur);
        backdrop-filter: var(--vz-blur);
        border-top: 1px solid var(--vz-border);
    }

    .vz-tabbar__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--vz-tabbar-h);
        padding: 6px 2px;
        background: none;
        border: 0;
        color: var(--vz-text-tertiary);
        font: inherit;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.1;
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .vz-tabbar__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vz-tabbar__item .ico {
        color: currentColor;
    }

    .vz-tabbar__item.is-active {
        color: var(--vz-accent-text);
        font-weight: 600;
    }

    .vz-tabbar__item:active {
        transform: scale(.94);
    }

    /* ---------- Выезжающее меню «Ещё» ---------- */
    .vz-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--vz-z-drawer);
        background: rgba(15, 19, 25, .45);
        opacity: 0;
        transition: opacity var(--vz-dur-2) var(--vz-ease-out);
    }

    .vz-drawer-backdrop.is-open {
        opacity: 1;
    }

    .vz-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: calc(var(--vz-z-drawer) + 1);
        width: var(--vz-drawer-w);
        max-width: 100%;
        background: var(--vz-surface);
        border-right: 1px solid var(--vz-border);
        box-shadow: var(--vz-shadow-lg);
        transform: translateX(-104%);
        transition: transform var(--vz-dur-3) var(--vz-ease-out);
        overscroll-behavior: contain;
    }

    .vz-drawer.is-open {
        transform: none;
    }

    .vz-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--vz-space-3);
        padding: var(--vz-space-4);
        border-bottom: 1px solid var(--vz-border);
    }

    .vz-drawer__brand {
        display: inline-flex;
        align-items: center;
        gap: var(--vz-space-2);
        color: var(--vz-text);
        font-weight: 700;
        font-size: var(--vz-fs-lg);
    }

    .vz-drawer__mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: var(--vz-radius-sm);
        background: var(--vz-primary);
        color: var(--vz-on-primary);
        font-weight: 700;
    }

    .vz-drawer__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--vz-radius-sm);
        background: var(--vz-surface-2);
        color: var(--vz-text-2);
        cursor: pointer;
    }

    .vz-drawer__user,
    .vz-drawer__login {
        display: flex;
        align-items: center;
        gap: var(--vz-space-3);
        margin: var(--vz-space-4);
        padding: var(--vz-space-3);
        border: 1px solid var(--vz-border);
        border-radius: var(--vz-radius-lg);
        background: var(--vz-surface-2);
        color: var(--vz-text);
    }

    .vz-drawer__login .ico {
        color: var(--vz-accent-text);
    }

    .vz-drawer__ava {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: var(--vz-radius-full);
        background: var(--vz-primary-soft);
        color: var(--vz-accent-text);
        font-weight: 700;
        flex-shrink: 0;
    }

    .vz-drawer__user-meta {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .vz-drawer__user-meta strong {
        font-size: var(--vz-fs-lg);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vz-drawer__user-meta span {
        color: var(--vz-text-tertiary);
        font-size: var(--vz-fs-xs);
    }

    .vz-drawer__body {
        flex: 1;
        overflow-y: auto;
        padding: 0 var(--vz-space-4) var(--vz-space-4);
        -webkit-overflow-scrolling: touch;
    }

    .vz-drawer__group {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: var(--vz-space-4);
    }

    .vz-drawer__group-title {
        padding: var(--vz-space-2) var(--vz-space-3);
        color: var(--vz-text-tertiary);
        font-size: var(--vz-fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .vz-drawer__link {
        display: flex;
        align-items: center;
        gap: var(--vz-space-3);
        min-height: 48px;
        padding: 10px var(--vz-space-3);
        border-radius: var(--vz-radius-sm);
        color: var(--vz-text-2);
        font-weight: 500;
        font-size: var(--vz-fs-lg);
    }

    .vz-drawer__link .ico {
        width: 22px;
        text-align: center;
        color: var(--vz-text-tertiary);
    }

    .vz-drawer__link:active {
        background: var(--vz-surface-hover);
    }

    .vz-drawer__foot {
        margin: 0;
        padding: var(--vz-space-3) var(--vz-space-4)
                 calc(var(--vz-space-3) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--vz-border);
    }

    .vz-drawer__link--muted {
        width: 100%;
        background: none;
        border: 0;
        font: inherit;
        font-weight: 500;
        cursor: pointer;
        color: var(--vz-danger-text);
    }

    /* ---------- Личный кабинет: сайдбар становится выезжающим ---------- */
    .cabinet[data-vz-cabinet] {
        display: block;
    }

    .cabinet[data-vz-cabinet] .cabinet-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--vz-drawer-w);
        max-width: 100%;
        height: 100dvh;
        z-index: calc(var(--vz-z-drawer) + 1);
        transform: translateX(-104%);
        transition: transform var(--vz-dur-3) var(--vz-ease-out);
        border-right: 1px solid var(--vz-border);
        border-bottom: 0;
        box-shadow: none;
        overscroll-behavior: contain;
    }

    .cabinet[data-vz-cabinet].is-drawer-open .cabinet-side {
        transform: none;
        box-shadow: var(--vz-shadow-lg);
    }

    .cabinet[data-vz-cabinet] .cabinet-main {
        width: 100%;
    }

    .cabinet-top {
        min-height: 52px;
        padding: 0 var(--vz-space-4);
        gap: var(--vz-space-3);
    }

    /* Кнопка открытия меню кабинета. */
    .cabinet-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--vz-border);
        border-radius: var(--vz-radius-sm);
        background: var(--vz-surface);
        color: var(--vz-text-2);
        cursor: pointer;
    }

    .cabinet-top__title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cabinet-content {
        padding: var(--vz-space-4) var(--vz-space-4) var(--vz-space-6);
    }

    .cabinet-main > .alert {
        width: calc(100% - 2 * var(--vz-space-4));
        margin: var(--vz-space-3) auto 0;
    }

    /* Выезжающее меню кабинета: забираем на себя роль drawer. */
    .cabinet[data-vz-cabinet] .cabinet-nav a,
    .cabinet[data-vz-cabinet] .cabinet-nav__exit {
        min-height: 44px;
    }

    /* Баннер cookie не перекрывает нижнее меню. */
    .vz-cookie {
        bottom: calc(var(--vz-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
    }

    /* ---------- Универсальные мелочи под палец ---------- */
    .btn,
    .vz-btn,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
        min-height: 44px;
    }

    .btn-sm,
    .vz-btn--sm {
        min-height: 38px;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   Точечные мобильные правки разделов
   ========================================================================== */
@media (max-width: 767px) {

    /* Справочник: вкладки одной строкой с горизонтальной прокруткой,
       а не «лесенкой» из переносов (иначе меню выглядит неровно). */
    .sprav .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .sprav .tabs::-webkit-scrollbar {
        display: none;
    }

    .sprav .tabs a {
        scroll-snap-align: start;
        padding: 9px 15px;
    }

    /* Плавающий виджет «Написать Римме» перекрывает нижнее меню
       (личный кабинет и «Ещё») — на телефоне убираем. Сам AI-помощник
       доступен вкладкой «Римма» в нижнем меню. */
    .rw-btn,
    .rw-panel {
        display: none !important;
    }

    /* AI-помощник: приложение на весь экран, но над нижним меню,
       чтобы композер не уходил под него. */
    body.vz-ai-body .vz-ai {
        height: auto;
        bottom: calc(var(--vz-tabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Мессенджер: приложение во весь экран, но над нижним меню, чтобы
       панель ввода и последнее сообщение не уходили под неё. */
    body.cabinet-body--messenger {
        padding-bottom: 0;
    }

    body.cabinet-body--messenger .cabinet-content--flush,
    body.cabinet-body--messenger .vz-msg {
        height: calc(100vh - var(--vz-tabbar-h) - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - var(--vz-tabbar-h) - env(safe-area-inset-bottom, 0px));
    }
}