/* ==========================================================================
   Falou.ai — Design Tokens "Obsidian Wave" (T-29 · Fase 1)
   Fonte única da verdade da paleta. O DESIGN.md do Stitch é material de
   origem; ESTE arquivo + docs/design-tokens.md são a referência oficial.
   Regra de ouro: glow desligado no claro; gradiente ciano→violeta só em
   logo/H1/FAB/card Pro (fases F2+).
   ========================================================================== */

/* --- Superfícies & Texto (slots semânticos usados pelo app inteiro) --- */
:root {
  color-scheme: light;
  /* Surface Elevation 1 (cards, sheets, painéis) */
  --surface: 255 255 255;
  /* Canvas Base (fundo da página) */
  --canvas: 245 247 250;
  /* Surface Elevation 2 (chips, inputs, hover) */
  --raised: 238 242 246;
  /* Texto primário (Deep Obsidian ink) */
  --ink: 16 21 31;
  /* Texto secundário */
  --copy: 60 70 87;
  /* Texto terciário / metadados */
  --muted: 100 116 139;
  /* Bordas (blend ~8% de preto sobre a surface) */
  --line: 216 222 231;
  /* Acento — ciano sombreado p/ contraste AA em fundo claro */
  --accent: 0 166 176;
  /* Acento em ~10% de opacidade sobre a surface */
  --accent-soft: 230 246 247;
}

/* --- Paleta Obsidian Wave (escuro) --- */
:root.dark {
  color-scheme: dark;
  --surface: 14 19 31;        /* #0E131F — Nível 1 (cards, sheets) */
  --canvas: 6 8 15;           /* #06080F — Nível 0 (fundo absoluto) */
  --raised: 22 29 46;         /* #161D2E — Nível 2 (chips, inputs) */
  --ink: 223 226 239;         /* #DFE2EF — texto primário */
  --copy: 185 202 203;        /* #B9CACB — texto secundário */
  --muted: 132 148 149;       /* #849495 — metadados */
  --line: 33 38 49;           /* ~rgba(255,255,255,.08) sobre #0E131F */
  --accent: 0 242 254;        /* #00F2FE — Cyan Ray */
  --accent-soft: 12 46 58;    /* ~rgba(0,242,254,.12) sobre #0E131F */
}

/* --- Cores de marca (constantes, não alternam com o tema) ---
   Uso em fases F2+ (badges de tier, chips de status, FAB). */
:root, :root.dark {
  --wave-cyan: 0 242 254;       /* #00F2FE Cyan Ray — ações, player ativo */
  --wave-cyan-dark: 0 166 176;  /* #00A6B0 Cyan sombreado (claro, AA) */
  --wave-violet: 121 40 202;    /* #7928CA Neural Violet — IA/Pro */
  --wave-emerald: 16 185 129;   /* #10B981 Emerald — sucesso/concluído */
  --wave-amber: 245 158 11;     /* #F59E0B Amber Pulse — processando */
  --wave-coral: 244 63 94;      /* #F43F5E Radiant Coral — erro/falha */
  --wave-magenta: 236 72 153;   /* #EC4899 Hyper Magenta — tier Max */
  --wave-electric: 139 92 246;  /* #8B5CF6 Electric Violet — tier Pro */
  --wave-velocity: 6 182 212;   /* #06B6D4 Velocity Cyan — tier Rápido */

  /* Glow luminescente (1 elemento por viewport; NUNCA no tema claro) */
  --glow-cyan: 0 0 24px rgba(0, 242, 254, 0.35);
  --glow-amber: 0 0 24px rgba(245, 158, 11, 0.35);
}

/* Borda focada (inputs/controls em destaque) — ciano a 40% */
:root.dark .focus-ring,
:root.dark input:focus,
:root.dark textarea:focus,
:root.dark select:focus {
  border-color: rgba(0, 242, 254, 0.4);
}

/* ==========================================================================
   Átomos F2 (T-29) — botões, chips de status, badges de tier, foco
   ========================================================================== */

/* Botão primário — Cyan Ray com texto obsidiana (contraste em ambos os temas) */
.btn-primary {
  background: rgb(var(--accent));
  color: #06080F;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(0.92); }
.btn-primary:disabled { opacity: 0.4; filter: none; cursor: not-allowed; }

/* Feedback tátil de pressão (regra do DESIGN: escala 0.97 no toque) */
.btn-press { transition: transform 0.12s ease, filter 0.12s ease; }
.btn-press:active { transform: scale(0.97); }

/* Anel de foco visível — ciano, nunca cortado */
:focus-visible { outline: 2px solid rgb(var(--accent) / 0.6); outline-offset: 2px; }

/* --- Chips de status (pílula luminescente: fundo ~12%, micro-borda ~30%) --- */
.chip-status {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; line-height: 1rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px; border: 1px solid transparent;
}
.chip-status .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.chip-done       { background: rgba(16,185,129,0.12);  color: #047857; border-color: rgba(16,185,129,0.30); }
.chip-done .dot  { background: #10B981; }
.chip-processing { background: rgba(245,158,11,0.12);  color: #B45309; border-color: rgba(245,158,11,0.30); }
.chip-processing .dot { background: #F59E0B; animation: chipPulse 1.5s infinite ease-in-out; }
.chip-queued     { background: rgba(245,158,11,0.12);  color: #B45309; border-color: rgba(245,158,11,0.30); }
.chip-queued .dot{ background: #F59E0B; animation: chipPulse 1.5s infinite ease-in-out; }
.chip-failed     { background: rgba(244,63,94,0.12);   color: #BE123C; border-color: rgba(244,63,94,0.30); }
.chip-failed .dot{ background: #F43F5E; }
.chip-warn       { background: rgba(245,158,11,0.12);  color: #B45309; border-color: rgba(245,158,11,0.30); }
.chip-warn .dot  { background: #F59E0B; }
/* No escuro os textos ganham os tons luminescentes do DESIGN */
:root.dark .chip-done       { color: #10B981; }
:root.dark .chip-processing,
:root.dark .chip-queued,
:root.dark .chip-warn       { color: #F59E0B; }
:root.dark .chip-failed     { color: #F43F5E; }

@keyframes chipPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* --- Badges de tier de modelo --- */
.badge-tier {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.25rem 0.75rem; border-radius: 9999px; border: 1px solid transparent;
}
.tier-max { background: linear-gradient(90deg, #EC4899, #8B5CF6); color: #FFFFFF; }
.tier-pro { border-color: #8B5CF6; background: rgba(139,92,246,0.15); color: #6D28D9; }
.tier-fast{ border-color: #06B6D4; background: rgba(6,182,212,0.15); color: #0E7490; }
:root.dark .tier-pro  { color: #C4B5FD; }
:root.dark .tier-fast { color: #67E8F9; }

/* Ações inline dentro de chips (ex.: tentar de novo) — ciano temático */
.chip-action { font-size: 0.75rem; font-weight: 700; color: rgb(var(--accent)); }
.chip-action:hover { text-decoration: underline; }

/* ==========================================================================
   Átomos F3 (T-29) — Player persistente, blocos de fala e abas de modo
   ========================================================================== */

/* Botão play principal — ciano com halo luminescente (o 1 glow da viewport) */
.play-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
  background: rgb(var(--accent)); color: #06080F;
  display: flex; align-items: center; justify-content: center;
}
.play-btn:hover { filter: brightness(0.92); }
.play-btn:active { transform: scale(0.94); }
:root.dark .play-btn { box-shadow: var(--glow-cyan); }

/* Controles secundários do player (±15s etc.) */
.player-ctl {
  width: 2rem; height: 2rem; border-radius: 0.5rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--muted)); transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.player-ctl:hover { color: rgb(var(--ink)); background: rgb(var(--raised)); }
.player-ctl:active { transform: scale(0.93); }

/* Blocos de fala — cards de segmento com elevação sutil */
.speech-block {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 0.75rem;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  scroll-margin-top: 7rem; /* não colar no topo/player ao navegar por busca */
}
.speech-block:hover { border-color: rgba(0, 242, 254, 0.25); }
:root:not(.dark) .speech-block:hover { border-color: rgba(0, 166, 176, 0.4); }
.speech-block.seg-active { border-color: rgba(0, 242, 254, 0.55); }
:root.dark .speech-block.seg-active { box-shadow: var(--glow-cyan); }
:root:not(.dark) .speech-block.seg-active { border-color: rgb(var(--accent)); }

/* Chip de tempo — mono, ciano a 10%, borda a 25% (clicável: pula o áudio) */
.time-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  background: rgba(0, 242, 254, 0.1);
  color: rgb(var(--accent));
  border: 1px solid rgba(0, 242, 254, 0.25);
  flex-shrink: 0;
  transition: background 0.12s ease;
}
.time-chip:hover { background: rgba(0, 242, 254, 0.22); }
:root:not(.dark) .time-chip { background: rgba(0, 166, 176, 0.1); border-color: rgba(0, 166, 176, 0.3); }

/* Aba de modo ativa (Transcrição/Leitura/Resumo IA) */
.mode-tab-active {
  background: rgb(var(--surface)) !important;
  color: rgb(var(--ink)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Karaoke / Closed Captions — modo Leitura (T-29 F3+)
   Palavra em fala: fundo no acento + texto obsidiana (contraste em ambos os
   tempos). O parágrafo ativo ganha borda de acento para acompanhar com os olhos. */
.cc-word {
  border-radius: 0.3rem;
  padding: 0 0.12rem;
  margin: 0 -0.06rem;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.cc-word.cc-on {
  background: rgb(var(--accent));
  color: #06080F;
  font-weight: 600;
}
.cc-para { transition: border-color 0.18s ease; scroll-margin-top: 8.5rem; }
.cc-para.cc-block-active { border-color: rgb(var(--accent)) !important; }
:root.dark .cc-para.cc-block-active { box-shadow: var(--glow-cyan); }

/* Toggle "Dados técnicos" (nerd mode) — chip discreto, estado ativo em acento */
.nerd-toggle { transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.nerd-toggle.nerd-on {
  color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  background: rgba(0, 242, 254, 0.08);
}
:root:not(.dark) .nerd-toggle.nerd-on { background: rgba(0, 166, 176, 0.1); }

/* ==========================================================================
   Átomos F3 — WORKSPACE (T-29): job ativo, mini-player, sidebar colapsável
   ========================================================================== */

/* Card de job ativo — barra de progresso em gradiente acento→violeta
   (o job é ação viva da tela; sem glow para respeitar 1-glow/viewport —
   o glow do dashboard fica no FAB de transcrever do mobile). */
.job-progress {
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--wave-violet)));
  transition: width 0.7s ease;
}
:root:not(.dark) .job-progress { background: linear-gradient(90deg, #00A6B0, #7928CA); }

/* Spinner do job: anel ciano girando (CSS puro, zero custo) */
.job-spinner {
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  border: 2px solid rgb(var(--accent) / 0.2);
  border-top-color: rgb(var(--accent));
  animation: jobSpin 0.9s linear infinite;
}
@keyframes jobSpin { to { transform: rotate(360deg); } }

/* Mini-player da lista (dock fixo): glassmorphism permitido — elemento fixo.
   O ícone de play herda .play-btn (halo luminescente = o 1 glow permitido
   quando o dock está visível). */

/* Sidebar colapsável (desktop): w-64 → w-16, só ícones; labels e textos
   escondidos via .sidebar-text; transição suave de largura. */
#app-sidebar { transition: width 0.2s ease, transform 0.2s ease; }
#app-sidebar.sidebar-collapsed { width: 4rem; }
#app-sidebar.sidebar-collapsed .sidebar-text { display: none; }
#app-sidebar.sidebar-collapsed .sidebar-pad { padding-left: 0.5rem; padding-right: 0.5rem; }
#app-sidebar.sidebar-collapsed #apikey-masked,
#app-sidebar.sidebar-collapsed .sidebar-hide-when-collapsed { display: none; }
/* Itens de nav continuam clicáveis e centralizados quando recolhidos */
#app-sidebar.sidebar-collapsed nav button { justify-content: center; }

/* ==========================================================================
   F4 — POLIMENTO (T-29): movimento reduzido, acessibilidade
   ========================================================================== */

/* prefers-reduced-motion: calma total — nada de pulse, spin, parallax ou
   transições longas para quem pede menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}