/**
 * CSS переменные для Telegram Safe Areas
 * На основе документации: docs/telegram-safe-areas.md
 */

:root {
  /* Системные safe areas с fallback через env() */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* Telegram UI safe areas (устанавливаются через JS) */
  --tg-content-safe-area-top: 0px;
  --tg-content-safe-area-bottom: 0px;
  --tg-content-safe-area-left: 0px;
  --tg-content-safe-area-right: 0px;

  /* Комбинированные safe areas (устанавливаются через JS) */
  --combined-safe-area-top: 0px;
  --combined-safe-area-bottom: 0px;
  --combined-safe-area-left: 0px;
  --combined-safe-area-right: 0px;

  /* Высота viewport Telegram */
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
}

/* Контейнер с учетом safe areas */
.safe-area-container {
  padding-top: var(--combined-safe-area-top);
  padding-bottom: var(--combined-safe-area-bottom);
  padding-left: var(--combined-safe-area-left);
  padding-right: var(--combined-safe-area-right);
  min-height: var(--tg-viewport-height, 100vh);
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Контейнер только с системными safe areas */
.safe-area-container-system {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  min-height: var(--tg-viewport-height, 100vh);
  box-sizing: border-box;
}

/* Фиксированный header с учетом safe area сверху */
.safe-header {
  padding-top: var(--combined-safe-area-top);
}

/* Фиксированный footer с учетом safe area снизу */
.safe-footer {
  padding-bottom: var(--combined-safe-area-bottom);
}

/* Полноэкранный контент с учетом всех safe areas */
.fullscreen-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: var(--combined-safe-area-top);
  padding-bottom: var(--combined-safe-area-bottom);
  padding-left: var(--combined-safe-area-left);
  padding-right: var(--combined-safe-area-right);
  box-sizing: border-box;
  overflow: auto;
}

/* Внутренний контейнер 480px */
.content-wrapper {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}