/* =====================================================
   Telegram Mini App — Fullscreen & Safe-area
   Telegram пробрасывает в :root:
     --tg-safe-area-inset-*          — челка / статус-бар
     --tg-content-safe-area-inset-*  — собственный UI Telegram
   Класс body.tg-fullscreen ставит JS только на мобильных.
   На ПК (tg-platform-desktop) fullscreen не запрашивается.
   ===================================================== */

/* В fullscreen контент уходит под системный бар — отступаем сверху,
   снизу освобождаем место под плавающую навигацию + safe-area. */
body.tg-fullscreen .main-content {
  padding-top: calc(
    8px
    + var(--tg-safe-area-inset-top, 0px)
    + max(52px, var(--tg-content-safe-area-inset-top, 0px))
  );
  padding-bottom: calc(var(--nav-h) + 56px + var(--tg-safe-area-inset-bottom, 0px));
}

body.tg-webapp .container {
  padding-left: var(--tg-safe-area-inset-left, 0px);
  padding-right: var(--tg-safe-area-inset-right, 0px);
}

/* Плавающая навигация поднимается над системной зоной жестов. */
body.tg-fullscreen .bottom-nav {
  bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px));
}
body.tg-fullscreen .toast {
  bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px));
}

/* Brand-капсула: скрыта по умолчанию, видна только в fullscreen,
   где она заменяет заголовок страницы. */
.tg-brand { display: none; }
body.tg-fullscreen .page-header { display: none; }

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: 8px;
  height: var(--brand-h);
  max-width: 64vw;
  padding: 0 16px;
  z-index: 1100;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--text-primary);
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  transition: background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* При прокрутке капсула получает фон-подложку. */
body.tg-fullscreen.tg-scrolled .tg-brand {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-float);
}
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;
}