/* =====================================================
   FlexGram UI — Telegram Mini App: fullscreen & safe-area
   -----------------------------------------------------
   Telegram пробрасывает в :root CSS-переменные:
     --tg-safe-area-inset-*          — челка / статус-бар устройства
     --tg-content-safe-area-inset-*  — собственный UI Telegram
                                       (верхние контролы fullscreen:
                                        back / collapse / меню)
   Вне Telegram они равны 0px, поэтому правила безопасны везде.
   Класс body.tg-fullscreen ставит JS только на мобильных клиентах
   (ios / android) — на десктопе/вебе fullscreen не запрашивается.
   ===================================================== */

/* ── Единая точка отсчёта для всех слоёв ──
   На некоторых клиентах --tg-content-safe-area-inset-top приходит как 0 —
   страхуемся минимумом --tg-bar-height (типовая высота панели Telegram).
   Значения объявлены на body, поэтому их наследуют и position: fixed
   элементы: модалки, шиты, drawer, тосты, полноэкранные панели. */
body.tg-fullscreen {
    --layer-top-offset: calc(
        var(--tg-safe-top) + max(var(--tg-bar-height), var(--tg-content-top))
    );
    --layer-bottom-offset: max(
        env(safe-area-inset-bottom, 0px),
        var(--tg-safe-bottom)
    );
}

/* ── Верхний отступ контента под нативной панелью Telegram ──
   Правило для веб-аппа: у него контент лежит прямо в .main-content, без
   верхней панели. В оболочке с .app-topbar (админка, панель бота) отступ
   забирает панель, поэтому контенту он не нужен — иначе получится двойной. */
body.tg-fullscreen .main-content {
    padding-top: calc(8px + var(--layer-top-offset));
}

/* ── Боковые safe-area отступы (поворот экрана, скруглённые углы) ── */
body.tg-webapp .container {
    padding-left: calc(var(--spacing-md) + var(--tg-safe-area-inset-left, 0px));
    padding-right: calc(var(--spacing-md) + var(--tg-safe-area-inset-right, 0px));
}

/* ── Нижняя навигация: учитываем нижнюю safe-area Telegram ── */
body.tg-fullscreen .bottom-nav {
    padding-bottom: max(10px, var(--layer-bottom-offset));
}

/* В fullscreen на мобильных контент тянется до низа — добавим запас,
   чтобы карточки не уезжали под капсулу навигации. */
body.tg-fullscreen .main-content {
    padding-bottom: calc(100px + var(--tg-safe-bottom));
}

body.tg-fullscreen .page-content {
    padding-bottom: calc(110px + var(--tg-safe-bottom));
}

/* Верхняя панель оболочки уходит под контролы Telegram своим padding-top
   (ui/css/shell.css), поэтому липнет она к нулю: сдвигать её ещё и через
   top значило бы оставить над ней прозрачную щель. */

/* ── Слои поверх страницы ──
   Всё, что рисуется через position: fixed, должно начинаться ниже
   контролов Telegram. .tg-layer — хук для произвольной панели
   приложения (например, полноэкранного чата с ассистентом). */
body.tg-fullscreen .modal-overlay,
body.tg-fullscreen .app-sidebar,
body.tg-fullscreen .tg-layer {
    padding-top: var(--layer-top-offset);
}

body.tg-fullscreen .toast-container {
    top: calc(var(--layer-top-offset) + 8px);
}

/* Шит выезжает снизу — сверху ему нужен не паддинг, а потолок высоты,
   иначе длинный список уползает под панель Telegram. */
body.tg-fullscreen .modal-overlay > .modal,
body.tg-fullscreen .modal-overlay > .modal-dialog > .modal-content {
    max-height: calc(100vh - var(--layer-top-offset) - var(--spacing-md));
}

/* =====================================================
   Brand capsule — лого / название раздела по центру верхней панели
   -----------------------------------------------------
   По умолчанию скрыта. В fullscreen (мобайл) показывается всегда:
   на главной — «FlexGram» (лого), на разделах — «иконка лого +
   название раздела» (текст подставляет JS). Центрируется между
   нативными кнопками Telegram, на скролле получает «liquid glass»
   окантовку.
   ===================================================== */
.tg-brand {
    display: none;
}

/* В fullscreen прячем встроенный заголовок страницы — его роль
   берёт на себя капсула сверху (убираем дублирующее лого/заголовок). */
body.tg-fullscreen .page-header,
body.tg-fullscreen .page-header-compact {
    display: none;
}

body.tg-fullscreen .tg-brand {
    --brand-h: 34px;
    --tg-bar-h: max(var(--tg-bar-height), var(--tg-content-top));

    position: fixed;
    top: calc(var(--tg-safe-top) + (var(--tg-bar-h) - var(--brand-h)) / 2);
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--brand-h);
    max-width: 60vw;
    padding: 0 14px;

    z-index: 1100;
    border-radius: var(--border-radius-pill);
    border: 1px solid transparent;
    color: var(--text-primary);
    font-weight: 700;
    user-select: none;
    pointer-events: none;

    transition:
        background var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        backdrop-filter var(--duration-normal) var(--ease-smooth);
}

/* Liquid glass — появляется после прокрутки вниз */
body.tg-fullscreen.tg-scrolled .tg-brand {
    background: var(--bg-glass-thick);
    border-color: var(--glass-border);
    box-shadow:
        var(--glass-highlight),
        var(--glass-glow),
        0 8px 24px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
}

body.tg-fullscreen .tg-brand .tg-brand-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

body.tg-fullscreen .tg-brand .tg-brand-name {
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.1px;
}