/* ═══════════════════════════════════════════════════════════════
   UGC Farm Platform — Design Tokens
   Generative Cyber-Minimalism · Dark / Light
   Подключать ПЕРВЫМ во всех HTML-файлах приложения.
   Редактируй только этот файл для глобальных изменений темы.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Фон ─────────────────────────────────────────────────── */
  --bg-base:        #09090b;   /* zinc-950 — основной холст */
  --bg-surface:     #121214;   /* карточки первого уровня */
  --bg-surface-2:   #1a1a1e;   /* вложенные панели, дропдауны */
  --bg-surface-3:   #222228;   /* строки при ховере */

  /* ── Границы ─────────────────────────────────────────────── */
  --border:         rgba(255, 255, 255, 0.06);
  --border-hover:   rgba(255, 255, 255, 0.12);
  --border-active:  rgba(255, 255, 255, 0.22);

  /* ── Текст ───────────────────────────────────────────────── */
  --text-primary:   #f4f4f5;   /* zinc-100 */
  --text-secondary: #a1a1aa;   /* zinc-400 */
  --text-muted:     #71717a;   /* zinc-500 */
  --text-faint:     #3f3f46;   /* zinc-700 */

  /* ── AI-градиент ─────────────────────────────────────────── */
  --grad-ai:            linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #f59e0b 100%);
  --grad-ai-border:     linear-gradient(135deg,
                          rgba(6, 182, 212, 0.35),
                          rgba(139, 92, 246, 0.25),
                          rgba(245, 158, 11, 0.25));
  --glow-ai:            0 0 28px rgba(139, 92, 246, 0.35),
                        0 0  8px rgba(6, 182, 212, 0.20);
  --glow-ai-hover:      0 0 40px rgba(139, 92, 246, 0.50),
                        0 0 14px rgba(6, 182, 212, 0.30);

  /* ── Статусы ─────────────────────────────────────────────── */
  --color-success:  #22c55e;   /* green-500 */
  --color-warning:  #f59e0b;   /* amber-500 */
  --color-danger:   #ef4444;   /* red-500 */
  --color-info:     #06b6d4;   /* cyan-500 */

  /* ── Переходы ────────────────────────────────────────────── */
  --ease-ui:   all 0.20s ease-in-out;
  --ease-fast: all 0.12s ease-in-out;
}

/* ── Светлая тема ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #f8f9fa;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f4f4f5;
  --bg-surface-3:   #ebebed;

  --border:         rgba(0, 0, 0, 0.07);
  --border-hover:   rgba(0, 0, 0, 0.14);
  --border-active:  rgba(0, 0, 0, 0.26);

  --text-primary:   #09090b;   /* zinc-950 */
  --text-secondary: #52525b;   /* zinc-600 */
  --text-muted:     #71717a;   /* zinc-500 — одинаково в обеих темах */
  --text-faint:     #d4d4d8;   /* zinc-300 */

  --glow-ai:        0 4px 20px rgba(139, 92, 246, 0.22),
                    0 1px  4px rgba(6, 182, 212, 0.12);
  --glow-ai-hover:  0 6px 28px rgba(139, 92, 246, 0.32),
                    0 2px  8px rgba(6, 182, 212, 0.18);
}

/* ═══════════════════════════════════════════════════════════════
   УТИЛИТЫ — применяются через class="..." напрямую
   ═══════════════════════════════════════════════════════════════ */

/* Градиентный текст (AI-заголовки) */
.text-ai {
  background: var(--grad-ai);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Градиентная рамка через обёртку (p-px + bg-gradient) */
.border-ai {
  padding: 1px;
  background: var(--grad-ai-border);
}

/* Поверхности */
.bg-base    { background: var(--bg-base); }
.bg-surface { background: var(--bg-surface); }
.bg-surface-2 { background: var(--bg-surface-2); }

/* AI-свечение */
.glow-ai       { box-shadow: var(--glow-ai); }
.glow-ai:hover { box-shadow: var(--glow-ai-hover); }

/* Shimmer-анимация для progress bar */
@keyframes ds-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.shimmer-ai {
  position: relative;
  overflow: hidden;
}
.shimmer-ai::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  animation: ds-shimmer 1.4s infinite linear;
}

/* ── AI Gradient Outline Button ─────────────────────── */
@keyframes ai-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-ai-outline {
  background: linear-gradient(135deg, #06b6d4, #8b5cf6, #f59e0b, #06b6d4);
  background-size: 300% 300%;
  animation: ai-border-flow 4s ease infinite;
  padding: 1px;
  display: inline-flex;
}
.btn-ai-outline-inner {
  background: #09090b;
  transition: background 0.2s ease;
  width: 100%;
}
.btn-ai-outline:hover .btn-ai-outline-inner { background: #141416; }

/* ── Ambient background orb animations ─────────────────── */
@keyframes ambient-loop-1 {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  33%       { transform: translate(50px, -40px) scale(1.2) rotate(120deg); }
  66%       { transform: translate(-30px, 20px) scale(0.8) rotate(240deg); }
}
@keyframes ambient-loop-2 {
  0%, 100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  50%       { transform: translate(-60px, -50px) scale(1.25) rotate(-180deg); }
}
@keyframes ambient-loop-3 {
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  40%       { transform: translate(-40px, -20px) scale(1.1); }
  70%       { transform: translate(30px, -10px) scale(0.9); }
}
.animate-ambient-1 { animation: ambient-loop-1 20s infinite ease-in-out; }
.animate-ambient-2 { animation: ambient-loop-2 25s infinite ease-in-out; }
.animate-ambient-3 { animation: ambient-loop-3 18s infinite ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .animate-ambient-1, .animate-ambient-2, .animate-ambient-3 { animation: none; }
}

/* ── CTA glow halo ──────────────────────────────────────── */
.btn-glow-wrap {
  position: relative;
  display: inline-flex;
}
.btn-glow-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #06b6d4, #8b5cf6, #f59e0b);
  filter: blur(10px);
  opacity: 0.55;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}
.btn-glow-wrap:hover::before {
  opacity: 0.9;
  filter: blur(14px);
}

/* Нет скруглений — глобальный reset (применяется только при data-ds="active") */
[data-ds="active"] *,
[data-ds="active"] *::before,
[data-ds="active"] *::after {
  border-radius: 0 !important;
}

/* ── Reference-style form inputs ─────────────────────────── */
[data-ds="active"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
[data-ds="active"] textarea,
[data-ds="active"] select,
[data-ds="active"] button[aria-haspopup="listbox"] {
  background-color: rgba(9, 9, 11, 0.6) !important;
  border-color: #27272a !important;
}
[data-ds="active"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
[data-ds="active"] textarea:focus {
  border-color: #3f3f46 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* The reference-style rule above hardcodes a near-black fill for every
   listbox-trigger button (e.g. HookGen's model dropdown) with no theme
   awareness — on a light background it renders dark text on a dark-ish
   translucent fill, unreadable. Override back to the theme surface. */
[data-theme="light"][data-ds="active"] button[aria-haspopup="listbox"] {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — structural overrides
   Tailwind utility classes are hardcoded hex; these rules override
   the main layout areas when [data-theme="light"] is set on body.
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

/* Sidebar */
[data-theme="light"] #app-sidebar {
  background-color: var(--bg-surface) !important;
  border-right-color: var(--border) !important;
}
[data-theme="light"] #app-sidebar button {
  color: var(--text-secondary);
}
[data-theme="light"] #app-sidebar button span[class*="absolute"] {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

/* Main panels */
[data-theme="light"] #block-tts,
[data-theme="light"] #block-drive,
[data-theme="light"] #video-previews-section,
[data-theme="light"] #hv-section,
[data-theme="light"] #tab-indexator .bg-\[\\#121214\] {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* Nested sub-panels (body blocks, hook blocks, inner cards) */
[data-theme="light"] #block-tts [class*="bg-\[#0f"],
[data-theme="light"] #block-tts [class*="bg-\[#121"],
[data-theme="light"] #hv-section [class*="bg-\[#0f"],
[data-theme="light"] #hv-section [class*="bg-\[#121"] {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
}

/* Inputs and selects */
[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Dropdowns */
[data-theme="light"] [class*="bg-\[#09090b\]"],
[data-theme="light"] [class*="bg-\[#0f0f12\]"],
[data-theme="light"] [class*="bg-\[#050506\]"] {
  background-color: var(--bg-base) !important;
}
[data-theme="light"] [class*="bg-\[#121214\]"],
[data-theme="light"] [class*="bg-\[#0d0d10\]"],
[data-theme="light"] [class*="bg-\[#0d0d0f\]"],
[data-theme="light"] [class*="bg-\[#18181b\]"] {
  background-color: var(--bg-surface) !important;
}
[data-theme="light"] [class*="bg-\[#1a1a1e\]"] {
  background-color: var(--bg-surface-2) !important;
}

/* Text overrides */
[data-theme="light"] [class*="text-\[#f4f4f5\]"]  { color: var(--text-primary)   !important; }
[data-theme="light"] [class*="text-\[#a1a1aa\]"]  { color: var(--text-secondary) !important; }
[data-theme="light"] [class*="text-\[#71717a\]"]  { color: var(--text-muted)     !important; }
[data-theme="light"] [class*="text-\[#3f3f46\]"]  { color: var(--text-faint)     !important; }

/* Border overrides */
[data-theme="light"] [class*="border-white\/\[0.06\]"] { border-color: var(--border)       !important; }
[data-theme="light"] [class*="border-white\/\[0.08\]"] { border-color: var(--border-hover)  !important; }
[data-theme="light"] [class*="border-white\/\[0.10\]"] { border-color: var(--border-active) !important; }

/* Log / pre */
[data-theme="light"] pre { background-color: var(--bg-surface-2) !important; color: var(--text-secondary) !important; }

/* Nickname bar (fixed header, all tabs) — hardcoded zinc-900/zinc-800
   Tailwind classes don't pick up the token overrides above. */
[data-theme="light"] #nickname-bar [class*="border-zinc-800"] { border-color: var(--border-hover) !important; }
[data-theme="light"] #nickname-bar [class*="bg-zinc-900"] { background-color: var(--bg-surface-2) !important; }
[data-theme="light"] #nickname-bar [class*="text-zinc-300"] { color: var(--text-primary) !important; }
[data-theme="light"] #nickname-bar [class*="text-zinc-600"] { color: var(--text-muted) !important; }
[data-theme="light"] #nickname-bar [class*="placeholder-zinc-700"]::placeholder { color: var(--text-faint) !important; }

/* Subtitle settings overlay (#caption-overlay) — built almost entirely with
   plain Tailwind zinc-* utility classes (not the bracket-literal bg-[#...]
   pattern the rules above target), so none of it picked up theming: color
   swatches, selects, row backgrounds, the timeline strip all stayed hardcoded
   near-black. */
[data-theme="light"] #caption-overlay [class*="bg-zinc-950"],
[data-theme="light"] #caption-overlay [class*="bg-zinc-900"] {
  background-color: var(--bg-surface-2) !important;
}
[data-theme="light"] #caption-overlay [class*="border-zinc-800"],
[data-theme="light"] #caption-overlay [class*="border-zinc-700"] {
  border-color: var(--border-hover) !important;
}
[data-theme="light"] #caption-overlay [class*="text-zinc-200"],
[data-theme="light"] #caption-overlay [class*="text-zinc-300"] {
  color: var(--text-primary) !important;
}
[data-theme="light"] #caption-overlay [class*="text-zinc-400"],
[data-theme="light"] #caption-overlay [class*="text-zinc-500"] {
  color: var(--text-secondary) !important;
}
[data-theme="light"] #caption-overlay [class*="text-zinc-600"],
[data-theme="light"] #caption-overlay [class*="text-zinc-700"] {
  color: var(--text-muted) !important;
}
[data-theme="light"] #caption-overlay [class*="bg-cyan-950"] {
  background-color: rgba(6, 182, 212, 0.08) !important;
}
/* text-cyan-300 is a pale accent tuned for a dark backdrop — on white (or
   the pale cyan bg-cyan-950/40 tint above) it reads as washed-out blue. */
[data-theme="light"] #caption-overlay [class*="text-cyan-300"] {
  color: #0e7490 !important;
}
/* <input type="color"> swatches keep their own OS-rendered fill (the color
   value itself), only the surrounding box needs to follow the theme. */
[data-theme="light"] #caption-overlay input[type="color"] {
  border-color: var(--border-hover) !important;
}

/* ── Language switch (static/shared/i18n.js) ──
   Sits next to the nickname field in the shell header, and top-right in each
   tool when it is opened standalone. Marked data-i18n-skip by the engine so it
   can never translate its own labels. */
.i18n-switch {
  display: inline-flex;
  align-items: center;
  height: 28px;
  border: 1px solid var(--border, #27272a);
  background: var(--bg-surface-2, rgba(24,24,27,.4));
}
.i18n-lang {
  min-width: 30px;
  height: 100%;
  padding: 0 7px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #71717a);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
.i18n-lang + .i18n-lang { border-left: 1px solid var(--border, #27272a); }
.i18n-lang:hover { color: var(--text-primary, #e4e4e7); }
.i18n-lang.is-on {
  background: rgba(55, 247, 18, .14);
  color: var(--primary, #37f712);
}