/*
  Основа оформления: переменные, сброс, типографика.
  Шрифты только системные — они уже есть на устройстве, загружать нечего,
  и текст выглядит ровно так, как принято в системе пользователя.
*/

:root {
  /* Акцент и системные цвета в духе iOS */
  --blue: #007AFF;
  --blue-pressed: #0062CC;
  --blue-soft: rgba(0, 122, 255, 0.1);
  --green: #34C759;
  --red: #FF3B30;
  --orange: #FF9500;
  --gray: #8E8E93;

  /* Фоны */
  --bg: #FFFFFF;
  --bg-grouped: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-hover: rgba(120, 120, 128, 0.08);
  --bg-active: rgba(120, 120, 128, 0.16);
  --bg-input: rgba(118, 118, 128, 0.12);

  /* Текст */
  --label: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-on-accent: #FFFFFF;

  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;

  /* Пузыри сообщений */
  --bubble-in: #E9E9EB;
  --bubble-out: var(--blue);

  /* Скругления */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Плавность в стиле iOS: быстрый старт, мягкое торможение */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-slow: 0.4s;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.16);

  --sidebar-w: 264px;
  --list-w: 340px;
  --tabbar-h: calc(50px + env(safe-area-inset-bottom));
  --header-h: 52px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--label);
  background: var(--bg-grouped);
  -webkit-font-smoothing: antialiased;
  /* Резиновая прокрутка всей страницы мешает интерфейсу с фиксированными панелями */
  overscroll-behavior: none;
}

/* Двойной тап для зума и выделение по долгому нажатию мешают в интерфейсе чата */
button, .tappable {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

/*
  Атрибут hidden должен побеждать всегда. Браузер задаёт для него display: none
  обычным правилом, поэтому любой наш класс с display: flex или grid его молча
  перебивает, и «скрытый» блок остаётся на экране.
*/
[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Крупные заголовки iOS */
.title-lg {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.title-md {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.text-sec {
  color: var(--label-secondary);
  font-size: 15px;
}

.text-sm {
  font-size: 13px;
  color: var(--label-secondary);
}

.mono {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
}

.app-root {
  height: 100%;
}

/* Заставка на время первой загрузки — чтобы не мигал пустой экран */
.boot-splash {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.boot-mark {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--blue);
  animation: boot-pulse 1.4s var(--ease) infinite;
}

@keyframes boot-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Кому анимации мешают — тем их не показываем */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}