/* ============================================================
   INTVL-aligned mobile hardening (Stage 4).

   Загружается ПОСЛЕ intvl-tokens.css/intvl-components.css.

   Цели:
     1) Telegram WebView / iOS Safari / Android Chrome ширина 360-430px.
     2) Touch target >= 44x44 для всех vt-* интерактивных элементов.
     3) Safe-area insets везде, где есть «прилипание» к нижнему краю.
     4) Dynamic viewport (100dvh) с fallback на 100vh.
     5) Нулевой horizontal overflow.
     6) Удобный gamification header / layer switcher в одном безопасном ряду.
     7) Большой CompletedRide на одном экране без скролла на 6.1" iPhone.
     8) reduced-motion + reduced-data acknowledged.

   ВАЖНО: ни один селектор НЕ трогает существующие .nav-bar, .card, .sheet
   и прочие классы из app.css — мы накладываем mobile-improvements ТОЛЬКО
   на .vt-* и через CSS-переменные.
   ============================================================ */

/* ── 0. Дополнительные CSS-переменные для mobile-фрейма ───────────── */
:root {
  --vt-safe-top:    env(safe-area-inset-top, 0px);
  --vt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vt-safe-left:   env(safe-area-inset-left, 0px);
  --vt-safe-right:  env(safe-area-inset-right, 0px);

  /* Минимальная touch-зона: 44x44 (Apple HIG / Android Material). */
  --vt-touch-min: 44px;

  /* Главный отступ контейнеров мобильных страниц. */
  --vt-page-pad: 16px;

  /* В Telegram WebView внутренний viewport умножается на устройство — но
     iOS Safari при показе адресной строки иногда «прыгает». Используем
     fallback chain: 100dvh → 100vh → 100%. */
  --vt-vh-fallback: 100vh;
}
@supports (height: 100dvh) {
  :root { --vt-vh-fallback: 100dvh; }
}

/* ── 1. Глобальный no-horizontal-scroll guard ────────────────────── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
/* iOS «мягкая» прокрутка для long-content страниц (placeholders, settings). */
.vt-placeholder,
.scroll-page {
  -webkit-overflow-scrolling: touch;
}

/* ── 2. Touch target sizing для всех vt-* кнопок ─────────────────── */
.vt-layer-chip,
.vt-cta,
.vt-bkrent-entry,
.vt-list-item,
.vt-gamify-stat,
.vt-gamify-level {
  /* min-height гарантирует target. min-width — для chip-ов рядом. */
  min-height: var(--vt-touch-min);
}
.vt-layer-chip {
  /* layer-chip визуально 32px (через height), но добавляем «прозрачную»
     touch-area через padding, чтобы общая touch-зона достигала 44px. */
  position: relative;
}
.vt-layer-chip::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
  border-radius: inherit;
}

/* ── 3. Safe-area: компоненты «прилипают» к нижнему краю ─────────── */
.vt-play-overlay {
  /* Базовый top — чуть ниже системного статус-бара. */
  top: calc(var(--vt-safe-top) + var(--top-h, 56px) + 12px);
  left:  calc(12px + var(--vt-safe-left));
  right: calc(12px + var(--vt-safe-right));
}

/* CTA-row у placeholders должен учитывать safe-area-inset. */
.vt-placeholder {
  padding-left:  max(var(--vt-page-pad), var(--vt-safe-left));
  padding-right: max(var(--vt-page-pad), var(--vt-safe-right));
  padding-bottom: calc(var(--nav-h, 68px) + var(--vt-safe-bottom) + 16px);
}

/* ── 4. Mobile breakpoint: 360-430px ─────────────────────────────── */
@media (max-width: 430px) {
  :root {
    --vt-page-pad: 14px;
    --vt-space-5: 18px;
  }

  /* Gamification header: на узких экранах прячем word «Next level». */
  .vt-gamify-header .vt-small-paragraph.txt-dim {
    display: none;
  }
  /* Уменьшаем level-badge с 44 до 40, чтобы освободить место для XP-bar. */
  .vt-gamify-level {
    width: 40px; height: 40px;
    font-size: 12px;
  }
  /* Layer switcher: уменьшаем gap, чипы прилегают плотнее. */
  .vt-layer-switcher {
    gap: 2px;
    padding: 3px;
  }
  .vt-layer-chip {
    padding: 0 10px;
    font-size: 13px;
  }
  /* CompletedRide / placeholders заголовок: h2 → h3. */
  .vt-placeholder-header h1 {
    font-size: 24px;
    line-height: 28px;
  }
  /* Stats grid: остаётся 2 колонки, но компактнее padding. */
  .vt-stat {
    padding: 10px 12px;
  }
  .vt-stat .vt-stat-value {
    font-size: 22px;
    line-height: 24px;
  }
  /* BKRent entry: иконка чуть меньше. */
  .vt-bkrent-entry .vt-bkrent-icon {
    width: 36px; height: 36px;
    font-size: 20px;
  }
  /* CTA: размер кнопки на маленьких экранах остаётся 48px (touch), но
     уменьшаем горизонтальный padding. */
  .vt-cta { padding: 0 18px; }

  /* DEMO badge поднимаем над контентом, чтобы он не «съезжал»
     за safe-area. */
  .vt-placeholder-badge { margin-top: 0; }
}

/* ── 5. Ультра-узкие экраны (Telegram WebView в split-mode, ≤360px) ──── */
@media (max-width: 360px) {
  /* Скрываем текстовые лейблы у layer-chip, оставляем иконки. */
  .vt-layer-chip .vt-layer-label {
    display: none;
  }
  .vt-layer-chip {
    min-width: 44px;
    padding: 0;
  }
  /* Gamification side стат: показываем только числа, без иконок-точек. */
  .vt-gamify-stat .icon {
    display: none;
  }
}

/* ── 6. Bottom-nav: учёт safe-area-inset-bottom для 5-табового режима ── */
.nav-bar.vt-nav-5 {
  /* Уже учитывается в app.css env(safe-area-inset-bottom).
     Здесь подстраховываемся min-height для длинных шрифтов. */
  min-height: calc(var(--nav-h, 68px) + var(--vt-safe-bottom));
}
.nav-bar .nav-btn {
  /* Гарантия touch-zone */
  min-height: var(--vt-touch-min);
}

/* ── 7. Карта и overlay не должны блокировать pinch-zoom ─────────── */
.vt-play-overlay { touch-action: pan-y; }
.vt-layer-switcher { touch-action: manipulation; }
.vt-gamify-header  { touch-action: manipulation; }

/* ── 8. Контраст на ярком солнечном свете (outdoor cycling) ──────── */
@media (max-width: 430px) and (prefers-color-scheme: light) {
  .vt-gamify-header {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(15, 18, 28, 0.20);
  }
  .vt-layer-switcher {
    background: rgba(255, 255, 255, 0.94);
  }
}

/* ── 9. Reduced-motion: отключаем дорогие анимации ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .vt-hex-chip.vt-fresh { animation: none; }
  .vt-xp-fill { transition: none; }
  .vt-cta, .vt-layer-chip, .vt-bkrent-entry { transition: none; }
}

/* ── 10. Print: спрячем фиксированные элементы (на всякий случай) ─ */
@media print {
  .vt-play-overlay, .nav-bar { display: none !important; }
  .vt-placeholder { padding: 0; }
}

/* ── 11. Виртуальная клавиатура: даём space под input на узких ──── */
@media (max-width: 430px) and (max-height: 600px) {
  .vt-placeholder {
    padding-bottom: calc(var(--nav-h, 68px) + var(--vt-safe-bottom) + 60px);
  }
}

/* ── 12. Telegram WebView fix: высота контейнера ─────────────────── */
.vt-mobile-full {
  /* utility-class, который страницы могут навешать через JS */
  min-height: var(--vt-vh-fallback);
  height: var(--vt-vh-fallback);
}