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

/* ── Капсула бренда: по умолчанию скрыта ── */
.tg-brand {
    display: none;
}

/* ── Fullscreen: контент уходит из-под нативной панели Telegram ──
   На части клиентов --tg-content-safe-area-inset-top приходит 0 —
   страхуемся минимумом 50px (типовая высота панели). */
html.tg-mode body.tg-fullscreen .app-shell {
    padding-top: calc(
        var(--space-sm)
        + var(--tg-safe-area-inset-top, 0px)
        + max(50px, var(--tg-content-safe-area-inset-top, 0px))
    );
    padding-left: max(var(--space-lg), var(--tg-safe-area-inset-left, 0px));
    padding-right: max(var(--space-lg), var(--tg-safe-area-inset-right, 0px));
    padding-bottom: max(var(--space-lg), var(--tg-safe-area-inset-bottom, 0px));
}

/* ── В fullscreen большой логотип/заголовок в карточке прячем —
   его роль берёт капсула сверху, экономим вертикальное место. ── */
body.tg-fullscreen .meditation-header {
    display: none;
}

body.tg-fullscreen .modern-player-card {
    padding-top: var(--space-md);
}

/* ── Плавающая кнопка фона учитывает нижнюю safe-area Telegram ── */
body.tg-fullscreen .bg-select {
    bottom: calc(var(--space-xl) + max(var(--safe-bottom), var(--tg-safe-area-inset-bottom, 0px)));
}

/* ── Тосты-уведомления (статус загрузки, «Скачано», ошибки и т.п.)
   в fullscreen не должны прятаться под нативной панелью Telegram и
   челкой устройства — иначе пользователь их просто не видит.
   Опускаем баннер ниже панели Telegram (как и капсулу бренда/лого). */
body.tg-fullscreen .ios-notification {
    top: calc(
        var(--space-sm)
        + var(--tg-safe-area-inset-top, 0px)
        + max(50px, var(--tg-content-safe-area-inset-top, 0px))
    );
}

/* =====================================================
   Brand capsule — лого + имя по центру верхней панели.
   Центрируется между нативными кнопками Telegram, на скролле
   получает «liquid glass» окантовку.
   ===================================================== */
body.tg-fullscreen .tg-brand {
    --brand-h: 36px;
    --tg-bar-h: max(48px, var(--tg-content-safe-area-inset-top, 48px));

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

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: var(--brand-h);
    max-width: 64vw;
    padding: 0 16px;

    z-index: var(--z-navigation);
    border-radius: var(--radius-full);
    user-select: none;
    pointer-events: none;

    /* Обводка капсулы видна всегда, а не только на прокрутке: без неё
       заголовок сливается с фоном приложения и «висит» в воздухе. */
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), 0 4px 14px rgba(17, 12, 12, 0.08);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        backdrop-filter var(--transition-base);
}

/* Liquid glass — на прокрутке подложка становится плотнее */
body.tg-fullscreen.tg-scrolled .tg-brand {
    box-shadow: var(--glass-shadow), 0 6px 20px rgba(17, 12, 12, 0.16);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
}

.tg-brand .tg-brand-logo {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff, var(--primary-shadow);
}

.tg-brand .tg-brand-logo[hidden] {
    display: none;
}

.tg-brand .tg-brand-name {
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    font-weight: var(--font-weight-bold);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* В открытом разделе капсула — это его заголовок, поэтому нейтральный
   тёмный текст вместо фирменного градиента имени. */
body.tg-fullscreen .tg-brand.is-section .tg-brand-name {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
}

/* ── LOW-PERF: без дорогого backdrop-filter ── */
html.low-perf-mode body.tg-fullscreen .tg-brand {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}