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

/* --- MaxiMax ETERNA: палитра и шрифты (премиум-дизайн) --- */
:root {
  /* Фон (глубина для премиум-ощущения) */
  --bg-primary: #0A0A0F;
  --bg-secondary: #15151F;
  --bg-tertiary: #1E1E2A;
  --bg-surface: #252532;
  /* Текст (вторичный контраст ~5.8:1 для читаемости) */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: #9A9AB5;
  /* Типографика: иерархия и читаемость (чуть компактнее — без потери читаемости) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --leading-tight: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* Акценты (ИИ / энергия / ХВД) */
  --accent-primary: #7C5DFA;
  --accent-primary-light: #9B7EFB;
  --accent-primary-dark: #6B4DE6;
  --accent-secondary: #00D4AA;
  --accent-warning: #FFB86B;
  --accent-glow: rgba(124, 93, 250, 0.4);
  /* Градиенты (объём и премиум) */
  --gradient-primary: linear-gradient(135deg, #7C5DFA 0%, #8B6FFB 50%, #9B7EFB 100%);
  --gradient-energy: linear-gradient(135deg, #7C5DFA 0%, #00D4AA 100%);
  --gradient-calm: linear-gradient(135deg, #4F46E5 0%, #9333EA 100%);
  --bg-gradient: linear-gradient(180deg, #0A0A0F 0%, #15151F 100%);
  /* Многослойный фон (применяется к body в тёмной теме): больше глубины и мистичности */
  --bg-gradient-premium: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(99, 102, 241, 0.22) 0%, rgba(124, 93, 250, 0.12) 35%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 50%, rgba(139, 92, 246, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0, 212, 170, 0.12) 0%, rgba(16, 185, 129, 0.06) 30%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 70% 20%, rgba(196, 181, 253, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #06060a 0%, #0A0A0F 25%, #0f0f18 60%, #15151F 100%);
  /* Цвета для процентов / зон (ХВД) */
  --color-zone-low: #FF6B6B;
  --color-zone-mid: #FFB86B;
  --color-zone-high: #00D4AA;
  /* Совместимость с существующими правилами */
  --bg-main: var(--bg-primary);
  --bg-card: var(--bg-secondary);
  --bg-elevated: var(--bg-surface);
  --accent: var(--accent-primary);
  --accent-soft: rgba(124, 93, 250, 0.15);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.25);
  --radius: 18px;
  --radius-sm: 12px;
  --font-main: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;
  --input-bar-bg: var(--bg-surface);
  --input-bar-focus-bg: var(--bg-secondary);
  --menu-btn-bg: var(--bg-card);
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: max(env(safe-area-inset-bottom, 0), 20px);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

/* Светлая тема: в стиле лендинга — тот же акцент #0ea5e9, фон и типографика для единства с главной страницей */
[data-theme="light"] {
  --bg-primary: #e8ecf2;
  --bg-secondary: #f6f8fc;
  --bg-surface: #e4e4e8;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-primary: #0ea5e9;
  --accent-primary-light: #38bdf8;
  --accent-primary-dark: #0284c7;
  --accent-secondary: #06b6d4;
  --accent-warning: #f59e0b;
  --bg-main: var(--bg-primary);
  --bg-card: var(--bg-secondary);
  --bg-elevated: var(--bg-surface);
  --accent-soft: rgba(14, 165, 233, 0.12);
  --border: #dbe0e8;
  --shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --input-bar-bg: #e4e4e8;
  --input-bar-focus-bg: #ffffff;
  --menu-btn-bg: var(--bg-secondary);
  --bg-gradient: radial-gradient(ellipse 120% 80% at 50% 0%, #f0f4fa 0%, #e6ecf2 45%, #e0e6ee 100%);
  --bg-gradient-premium: var(--bg-gradient);
}

/* Тёмная тема по системе (если нет data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* уже задано в :root выше */
  }
}

[data-theme="dark"] {
  /* совпадает с :root, можно не дублировать */
}

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  background: var(--bg-gradient, var(--bg-main));
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Премиум-фон с глубиной (только тёмная тема: многослойный градиент) */
[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
  background: var(--bg-gradient-premium, var(--bg-gradient));
  background-attachment: fixed;
}

/* Фоновое свечение (премиум): сочные пятна сверху и снизу для мистичного фона. На мобильной — всегда; на десктопе — при наведении на чат. */
.ambient-glow {
  position: fixed;
  width:  min(100vw, 600px);
  height: min(100vh, 500px);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.6s ease;
}
@media (min-width: 769px) {
  body.chat-hover .ambient-glow {
    opacity: 0.22;
  }
}
@media (max-width: 768px) {
  [data-theme="dark"] .ambient-glow,
  :root:not([data-theme="light"]) .ambient-glow {
    opacity: 0.18;
  }
}
.ambient-glow-top {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.55) 0%, rgba(124, 93, 250, 0.35) 40%, transparent 70%);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
}
.ambient-glow-bottom {
  background: radial-gradient(circle, rgba(0, 212, 170, 0.4) 0%, rgba(16, 185, 129, 0.2) 45%, transparent 70%);
  bottom: -180px;
  right: -100px;
}
/* Светлая тема: очень мягкое свечение, без пёстрого фона. */
[data-theme="light"] .ambient-glow-top {
  background: radial-gradient(circle, rgba(124, 93, 250, 0.08) 0%, transparent 70%);
}
[data-theme="light"] .ambient-glow-bottom {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.02) 0%, transparent 70%);
}

/* Частицы-звёздочки: плавно поднимаются снизу вверх. На мобильной — всегда; на десктопе — видны всегда с лёгкой прозрачностью, при наведении на чат — ярче. */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* Десктоп: звёзды всегда видны (мистичный фон), при наведении на чат — сочнее. */
@media (min-width: 769px) {
  [data-theme="dark"] .particles-container,
  :root:not([data-theme="light"]) .particles-container {
    opacity: 0.65;
  }
  body.chat-hover .particles-container {
    opacity: 1;
  }
}
/* Мобильная: звёзды всегда. */
@media (max-width: 768px) {
  [data-theme="dark"] .particles-container,
  :root:not([data-theme="light"]) .particles-container,
  [data-theme="light"] .particles-container {
    opacity: 1;
  }
  /* Светлая тема на мобильной: мягкое свечение. */
  [data-theme="light"] .ambient-glow {
    opacity: 0.08;
  }
}
/* --start-y задаётся в JS (0–100): начальная высота в % viewport. Звёзды сочнее: сильнее свечение и мерцание. */
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(196, 181, 253, 0.7) 25%, rgba(124, 93, 250, 0.5) 45%, transparent 70%);
  box-shadow: 0 0 14px rgba(124, 93, 250, 0.7), 0 0 6px rgba(255, 255, 255, 0.25), 0 0 20px rgba(139, 92, 246, 0.25);
  animation: particle-float linear infinite, particle-twinkle 2.2s ease-in-out infinite;
}
/* Часть звёзд — с лёгким бирюзовым оттенком для глубины. */
.particle.particle-teal {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(167, 243, 208, 0.5) 30%, rgba(0, 212, 170, 0.35) 50%, transparent 70%);
  box-shadow: 0 0 12px rgba(0, 212, 170, 0.5), 0 0 4px rgba(255, 255, 255, 0.2);
}
/* Мелкие звёзды второго слоя — чуть приглушённее, создают глубину. */
.particle.particle-tiny {
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(124, 93, 250, 0.5), 0 0 3px rgba(255, 255, 255, 0.2);
}
.particle.particle-tiny.particle-teal {
  box-shadow: 0 0 6px rgba(0, 212, 170, 0.4), 0 0 2px rgba(255, 255, 255, 0.15);
}
/* Светлая тема: частицы приглушённые. */
[data-theme="light"] .particle {
  background: radial-gradient(circle, rgba(124, 93, 250, 0.35), rgba(124, 93, 250, 0.12) 40%, transparent 70%);
  box-shadow: 0 0 4px rgba(124, 93, 250, 0.2);
  animation: particle-float linear infinite, particle-twinkle-light 2.5s ease-in-out infinite;
}
[data-theme="light"] .particle.particle-teal {
  background: radial-gradient(circle, rgba(0, 212, 170, 0.25), rgba(0, 212, 170, 0.1) 40%, transparent 70%);
  box-shadow: 0 0 4px rgba(0, 212, 170, 0.15);
}
[data-theme="light"] .particle:nth-child(3n),
[data-theme="light"] .particle:nth-child(5n) {
  background: radial-gradient(circle, rgba(124, 93, 250, 0.28), rgba(124, 93, 250, 0.1) 40%, transparent 70%);
  box-shadow: 0 0 4px rgba(124, 93, 250, 0.15);
}
[data-theme="light"] .particle.particle-tiny {
  box-shadow: 0 0 3px rgba(124, 93, 250, 0.15);
}
[data-theme="light"] .particle.particle-tiny.particle-teal {
  box-shadow: 0 0 3px rgba(0, 212, 170, 0.12);
}
/* Длительность и имя анимации задаются в JS. Старт с произвольной высоты (--start-y 0–100) — частицы по всему экрану. */
@keyframes particle-float {
  0% { transform: translateY(calc(var(--start-y, 100) * 1vh)) scale(0.3); opacity: 0; }
  8% { opacity: 0.85; }
  92% { opacity: 0.85; }
  100% { transform: translateY(calc((var(--start-y, 100) - 100) * 1vh)) scale(1); opacity: 0; }
}
/* Мерцание звёздочек при движении — анимация заметнее. */
@keyframes particle-twinkle {
  0%, 100% { filter: brightness(0.9); }
  50% { filter: brightness(1.2); }
}
@keyframes particle-twinkle-light {
  0%, 100% { filter: brightness(0.9); }
  50% { filter: brightness(1.2); }
}

/* Разделитель с градиентом (премиум-оформление секций) */
.premium-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  margin: 28px 0;
  border: none;
}
[data-theme="light"] .premium-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 50%, transparent 100%);
}

/* Скелетон загрузки (премиум-ощущение при ожидании) */
@keyframes shimmer {
  0% { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}
.loading-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 100%);
  background-size: 800px 100%;
  animation: shimmer 2s ease-in-out infinite;
  border-radius: var(--radius-sm);