/* ============================================================
   base.css — основа: цвета (светлая и тёмная тема), сброс стилей,
   «каркас» приложения, анимации экранов, запасные кнопки вне Telegram.
   Цвета фона/текста Telegram подставляет через переменные --bg, --card,
   --text, --hint (см. js/telegram.js). Акцент всегда #2AABEE.
   ============================================================ */

:root {
  /* Акцент Telegram */
  --accent: #2AABEE;
  --accent-2: #5CC8F7;                 /* второй конец градиента на кольцах и иконках */
  --accent-soft: rgba(42, 171, 238, .13);
  --accent-text: #1479B3;              /* акцент для ТЕКСТА (контраст ≥ 4.5:1 на белом) */
  --on-accent: #FFFFFF;

  /* Светлая тема (по умолчанию) */
  --bg: #EFEFF4;
  --card: #FFFFFF;
  --text: #111418;
  --hint: #6B7480;
  --sep: rgba(60, 70, 85, .13);
  --press: rgba(60, 70, 85, .08);
  --danger: #D93A3A;
  --ok: #2E9E5B;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .07);
  --shadow-up: 0 -1px 0 var(--sep);

  /* Размеры */
  --r-card: 18px;                      /* закругление карточек */
  --r-btn: 14px;                       /* закругление кнопок */
  --tap: 48px;                         /* минимальная высота нажимаемой строки/кнопки (≥ 44) */
  --gutter: 16px;                      /* боковые поля */

  /* Отступы безопасных зон (вырез, жесты) и Telegram */
  --safe-top: calc(env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Тёмная тема. Включается из js/telegram.js (data-theme) */
:root[data-theme="dark"] {
  --bg: #0F1822;
  --card: #182533;
  --text: #F2F5F8;
  --hint: #8A9AAB;
  --sep: rgba(255, 255, 255, .1);
  --press: rgba(255, 255, 255, .08);
  --accent-text: #5CC0F5;
  --danger: #FF6B6B;
  --ok: #55C98A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* свою подсветку рисуем сами */
  overscroll-behavior: none;                  /* нет «резиновой» прокрутки страницы */
  touch-action: manipulation;                 /* нет задержки и зума по двойному тапу */
}
body { overflow: hidden; position: fixed; inset: 0; width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
[hidden] { display: none !important; }

/* Интерфейс — как в приложении: текст не выделяется, кроме полей ввода */
.screen, #fallback-bar, #fallback-back { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Каркас ---------- */
#shell {
  position: relative;
  height: var(--tg-viewport-stable-height, 100dvh);
  max-width: 430px;                     /* только мобильная ширина */
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}
/* На широком экране (открыли на компьютере) — рамка по краям */
@media (min-width: 460px) {
  #shell { box-shadow: 0 0 0 1px var(--sep), 0 20px 60px rgba(0, 0, 0, .18); }
}

#app { position: absolute; inset: 0; }
html.has-fallback-back #app { top: 48px; }

/* Один экран = один слой с собственной прокруткой */
.screen {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 28px);
  will-change: transform;
}
.screen.is-hidden { visibility: hidden; pointer-events: none; }
html.has-main .screen { padding-bottom: calc(var(--safe-bottom) + 100px); }   /* место под нижнюю панель (72px) + воздух */
.screen::-webkit-scrollbar { display: none; }

/* ---------- Запасные элементы вне Telegram (для разработки в браузере) ---------- */
#fallback-back {
  position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; padding: 0 8px;
  background: var(--card); box-shadow: 0 1px 0 var(--sep);
}
#fallback-back button {
  display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px 0 4px;
  color: var(--accent-text); font-weight: 500; border-radius: 12px;
}
#fallback-back button:active { background: var(--press); }
#fallback-back svg { width: 24px; height: 24px; }

/* Нижняя панель: сплошная подложка с тонкой линией сверху, как у нативной кнопки Telegram.
   Контент под ней не просвечивает, а в конце экрана оставлено место (см. .screen) */
#fallback-bar {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 0;
  padding: 10px var(--gutter) calc(var(--safe-bottom) + 10px);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--sep);
}
#fallback-main {
  display: block; width: 100%; height: 52px; border-radius: var(--r-btn);
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; text-align: center;
  transition: transform .12s ease, opacity .15s ease, background-color .15s ease;
}
#fallback-main:active:not(:disabled) { transform: scale(.98); filter: brightness(.94); }
#fallback-main:disabled { background: var(--press); color: var(--hint); }
#fallback-main.is-loading { opacity: .7; }

/* ---------- Сообщение (toast) ---------- */
#toast {
  position: absolute; z-index: 60; left: 50%; bottom: calc(var(--safe-bottom) + 90px);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 48px); padding: 12px 18px; border-radius: 16px;
  background: rgba(30, 36, 44, .92); color: #fff; font-size: 15px; text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Фото: плавное появление, пока грузятся — мягкий фон ---------- */
.ph { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; background: var(--press); }
.ph.loaded { opacity: 1; }
/* В тёмной теме светлые пастельные картинки слепят — слегка приглушаем (кроме полноэкранного просмотра) */
:root[data-theme="dark"] .ph { filter: brightness(.8) saturate(.9); }
:root[data-theme="dark"] .viewer .ph { filter: none; }

/* Уважаем настройку «уменьшить движение»: без сдвигов и анимаций */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}