/* ============================================================
   Synox Chat — визуальный скин под новый дизайн (июнь 2026).
   Грузится ПОСЛЕ style.css и themes.css, поэтому переопределяет
   только переменные темы, акцент и шрифты. Разметку и script.js
   не трогает. Чтобы откатить — убрать <link> на этот файл.
   ============================================================ */

/* Фирменный акцент нового дизайна */
:root {
  --synox-accent: linear-gradient(120deg, #4fbfff 0%, #6c7bff 48%, #b06bff 100%);
  --synox-accent-hover: linear-gradient(120deg, #38b4ff 0%, #5a6bff 48%, #a64fff 100%);
}

/* ---- Палитра по темам (значения из нового дизайна) ---- */

/* Градиент (тема по умолчанию) */
:root,
[data-theme="gradient"] {
  --theme-gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #5b6fe0 50%, #764ba2 75%, #667eea 100%);
  --theme-gradient-text: #ffffff;
  --theme-gradient-text-secondary: rgba(255, 255, 255, 0.78);
  --theme-gradient-sidebar: rgba(20, 20, 40, 0.5);
  --theme-gradient-card: rgba(255, 255, 255, 0.10);
  --theme-gradient-card-hover: rgba(255, 255, 255, 0.14);
  --theme-gradient-border: rgba(255, 255, 255, 0.18);
  --theme-gradient-accent: var(--synox-accent);
  --theme-gradient-accent-hover: var(--synox-accent-hover);
}

/* Тёмная */
[data-theme="dark"] {
  --theme-gradient-bg: #07070c;
  --theme-gradient-text: #f3f4f8;
  --theme-gradient-text-secondary: rgba(255, 255, 255, 0.56);
  --theme-gradient-sidebar: rgba(13, 13, 20, 0.92);
  --theme-gradient-card: rgba(255, 255, 255, 0.05);
  --theme-gradient-card-hover: rgba(255, 255, 255, 0.09);
  --theme-gradient-border: rgba(255, 255, 255, 0.10);
  --theme-gradient-accent: var(--synox-accent);
  --theme-gradient-accent-hover: var(--synox-accent-hover);
}

/* Светлая */
[data-theme="light"] {
  --theme-gradient-bg: #f5f6fb;
  --theme-gradient-text: #15162b;
  --theme-gradient-text-secondary: rgba(21, 22, 43, 0.6);
  --theme-gradient-sidebar: rgba(255, 255, 255, 0.85);
  --theme-gradient-card: rgba(255, 255, 255, 0.7);
  --theme-gradient-card-hover: #ffffff;
  --theme-gradient-border: rgba(22, 24, 54, 0.09);
  --theme-gradient-accent: var(--synox-accent);
  --theme-gradient-accent-hover: var(--synox-accent-hover);
}

/* ---- Акцент-поверхности, где градиент зашит напрямую (не через переменную) ---- */
.message.user .bubble,
.input-container button,
.user-avatar,
.scroll-bottom-btn:hover,
#voiceModeMicToggle {
  background: var(--synox-accent);
}

/* Тёмная тема задаёт пузырь пользователя своим серым градиентом с большей
   специфичностью — перекрываем, чтобы и в dark был фирменный акцент. */
[data-theme="dark"] .message.user .bubble {
  background: var(--synox-accent);
  color: #ffffff;
}

/* ---- Шрифты нового дизайна ---- */
body,
.input-container input,
.input-container textarea,
button,
input,
textarea {
  font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Дисплейный шрифт для бренда и заголовков */
.model-selector-btn h1,
.chat-header h1,
.welcome-content h2,
.new-chat-btn {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  letter-spacing: -0.02em;
}

/* Моноширинный — для кода (на случай если где-то не задан) */
code, pre, kbd, samp {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
}