/**
 * Nano Banana WebApp - Base Styles
 * CSS Variables, Reset, Typography
 */

/* ===== CSS VARIABLES ===== */
/*
 * ВАЖНО: WebApp ВСЕГДА использует тёмную тему.
 * Цвета заданы явно и НЕ переопределяются из Telegram theme.
 * Это гарантирует одинаковый вид для всех пользователей.
 */
:root {
  /* Фон - тёмная тема (НЕ наследуется от Telegram) */
  --bg-primary: #1a1a2e !important;
  --bg-secondary: #16213e !important;
  --bg-card: #232347;
  --bg-card-hover: #2a2a5a;
  /* Акценты */
  --accent-primary: #6a6aff;
  --accent-secondary: #4a4aaa;
  --accent-gold: #ffd700;
  /* Текст - светлый для тёмного фона */
  --text-primary: #ffffff !important;
  --text-secondary: rgba(255, 255, 255, 0.7) !important;
  --text-muted: rgba(255, 255, 255, 0.5);
  /* Статусы */
  --success: #4caf50;
  --error: #f44336;
  --warning: #ff9800;
  /* UI */
  --border-radius: 12px;
  --transition: 0.2s ease;

  /* === MODERN BUTTON ANIMATIONS === */
  /* Timing functions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Neon glow colors */
  --glow-primary: rgba(106, 106, 255, 0.6);
  --glow-gold: rgba(255, 215, 0, 0.6);
  --glow-success: rgba(76, 175, 80, 0.6);
  --glow-purple: rgba(138, 43, 226, 0.5);
  --glow-pink: rgba(255, 107, 107, 0.5);
  /* Telegram WebApp viewport height (устанавливается JS) */
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
  /* Safe area insets (устанавливаются JS из Telegram API) */
  /* safeAreaInset - системный UI (notch, статус-бар) */
  --tg-safe-area-inset-top: 0px;
  --tg-safe-area-inset-bottom: 0px;
  --tg-safe-area-inset-left: 0px;
  --tg-safe-area-inset-right: 0px;
  /* contentSafeAreaInset - UI Telegram (кнопки в прозрачном header) */
  --tg-content-safe-area-inset-top: 0px;
  --tg-content-safe-area-inset-bottom: 0px;
  --tg-content-safe-area-inset-left: 0px;
  --tg-content-safe-area-inset-right: 0px;
}

/* ===== RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  /* Fullscreen режим для Telegram WebApp */
  margin: 0;
  padding: 0;
  /* Принудительный тёмный фон на html уровне */
  background-color: #1a1a2e !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Принудительный тёмный фон - игнорируем тему Telegram */
  background: #1a1a2e !important;
  background-color: #1a1a2e !important;
  color: #ffffff !important;
  /* Используем Telegram viewport height если доступен */
  height: var(--tg-viewport-stable-height, 100vh);
  height: var(--tg-viewport-stable-height, 100dvh);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: auto;
  /*
   * Safe area padding:
   * - Используем Telegram API safe area insets (устанавливаются JS)
   * - Fallback на CSS env() для non-Telegram браузеров
   */
  padding-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0));
  padding-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
  padding-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0));
  padding-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0));
  /* Предотвращаем резиновый скролл на iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  /* Предотвращаем выделение текста при свайпах */
  -webkit-user-select: none;
  user-select: none;
  /* Отключаем зум на iOS */
  touch-action: pan-x pan-y;
}

/* Разрешаем выделение в текстовых полях */
textarea, input {
  -webkit-user-select: text;
  user-select: text;
}

.app-container {
  max-width: 480px;
  margin: 0 auto;
  /* Учитываем safe-area-inset-bottom */
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  /* Используем Telegram viewport */
  min-height: var(--tg-viewport-stable-height, 100vh);
  min-height: var(--tg-viewport-stable-height, 100dvh);
  min-height: -webkit-fill-available;
  /* Flex для растягивания контента */
  display: flex;
  flex-direction: column;
}