/* ============================================================
   AirFlow APP-shell & премиум-компоненты — АДДИТИВНО к site.css.
   Только новые классы с префиксом `app-` + переменные. Существующие
   правила site.css не трогаются. Все цвета — токены site.css → авто свет/тёмная.
   ============================================================ */
:root {
  --app-nav-h: 58px;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
  --app-safe-t: env(safe-area-inset-top, 0px);
}

/* ── Нижняя app-навигация (мобильный app-режим) ───────────── */
.app-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; align-items: stretch; justify-content: space-around;
  height: calc(var(--app-nav-h) + var(--app-safe-b));
  padding-bottom: var(--app-safe-b);
  background: var(--header-bg, rgba(255,255,255,0.8));
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.1));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.05);
  transform: translateY(110%);
  transition: transform 0.42s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1));
}
.app-bottom-nav.ready { transform: translateY(0); }
.app-bottom-nav a {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--text-secondary, #888); font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent; padding: 7px 4px 3px;
  transition: color 0.2s ease, transform 0.15s ease;
}
.app-bottom-nav a svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.25s var(--ease-smooth, ease); }
.app-bottom-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-bottom-nav a:active { transform: scale(0.9); }
.app-bottom-nav a.is-active { color: var(--accent, #007aff); }
.app-bottom-nav a.is-active svg { transform: translateY(-1px); }

body.has-app-nav { padding-bottom: calc(var(--app-nav-h) + var(--app-safe-b)) !important; }
/* чат-пузырь и cookie-баннер не должны перекрываться навбаром */
body.has-app-nav .afc-launcher { bottom: calc(var(--app-nav-h) + var(--app-safe-b) + 14px) !important; }
body.has-app-nav #cookieBanner { bottom: calc(var(--app-nav-h) + var(--app-safe-b)) !important; }

/* десктоп: навбар не нужен (есть верхняя шапка) */
@media (min-width: 880px) {
  .app-bottom-nav { display: none; }
  body.has-app-nav { padding-bottom: 0 !important; }
  body.has-app-nav .afc-launcher { bottom: 24px !important; }
  body.has-app-nav #cookieBanner { bottom: 0 !important; }
}

/* ── Премиум-компоненты для экранов (используются в Фазах 1/3/4) ── */
.app-card {
  background: var(--bg-elevated, #fff); border: 1px solid var(--card-border, var(--border, rgba(0,0,0,0.08)));
  border-radius: var(--radius-lg, 22px); box-shadow: var(--card-shadow, 0 8px 30px rgba(0,0,0,0.08)); padding: 18px;
}
.app-row { display: flex; align-items: center; gap: 12px; }
.app-muted { color: var(--text-secondary, #888); }

/* App top-bar (компактная шапка экрана приложения) */
.app-topbar {
  position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: 10px;
  height: calc(52px + var(--app-safe-t)); padding: var(--app-safe-t) 14px 0;
  background: var(--header-bg, rgba(255,255,255,0.8));
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.08));
}
.app-topbar h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.app-iconbtn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; background: var(--fill, rgba(120,120,128,0.1));
  color: var(--text, #1d1d1f); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.app-iconbtn:active { transform: scale(0.92); }

/* Bottom-sheet */
.app-sheet-backdrop { position: fixed; inset: 0; z-index: 1400; background: var(--overlay, rgba(0,0,0,0.45)); opacity: 0; transition: opacity 0.3s ease; }
.app-sheet-backdrop.open { opacity: 1; }
.app-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401; background: var(--bg-elevated, #fff);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
  padding: 8px 18px calc(22px + var(--app-safe-b)); transform: translateY(100%);
  transition: transform 0.42s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); max-height: 88vh; overflow: auto;
}
.app-sheet.open { transform: translateY(0); }
.app-sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--fill-strong, rgba(120,120,128,0.3)); margin: 8px auto 14px; }

/* Скелетоны загрузки */
.app-skel { background: linear-gradient(100deg, var(--fill, #eee) 30%, var(--fill-strong, #e3e3e3) 50%, var(--fill, #eee) 70%); background-size: 200% 100%; animation: appShimmer 1.3s linear infinite; border-radius: 10px; }
@keyframes appShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Плавное появление контента экрана */
.app-fade-in { animation: appFadeIn 0.45s var(--ease-smooth, ease) both; }
@keyframes appFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .app-bottom-nav, .app-sheet, .app-sheet-backdrop { transition: none; }
  .app-skel, .app-fade-in { animation: none; }
  .app-bottom-nav { transform: none; }
}