/* voice-mock.css — demo interativa do Facilita.voice embutida no site.
   Paleta, tipografia (Fraunces + Inter) e proporções portadas 1:1 dos tokens
   reais do app (D:\PROJECTS\facilita-voice\web\tailwind.config.js e
   src\styles\globals.css) — creme + violeta, ao contrário do "cockpit" escuro
   do facilitaSpace, de propósito: é a identidade visual real do produto.
   Seletores escopados sob .fv-demo, keyframes prefixados (fv-). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin-standard-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin-standard-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fv-demo {
  --fv-page: #F7F5F1;
  --fv-surface: #FFFFFF;
  --fv-muted: #EFEDE7;
  --fv-muted-2: #E7E3DA;
  --fv-ink: #1B1A17;
  --fv-ink-soft: #403D37;
  --fv-subtle: #6B675E;
  --fv-faint: #9A958A;
  --fv-line: #E5E1D8;
  --fv-line-strong: #D8D3C7;
  --fv-brand-50: #F1EFFD;
  --fv-brand-100: #E5E1FB;
  --fv-brand-200: #CFC8F7;
  --fv-brand-400: #8B7BEC;
  --fv-brand: #5646E5;
  --fv-brand-600: #4636CE;
  --fv-brand-700: #3A2CAB;
  --fv-dark: #191712;
  --fv-amber: #F59E0B;
  --fv-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fv-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  position: relative;
  font-family: var(--fv-sans);

  /* Palco fixo, sempre escuro — nunca segue o toggle claro/escuro do site.
     A janela do produto é clara de propósito (creme+violeta, o oposto do
     cockpit do site); sem esse fundo fixo ela some quando o site vai pro
     light mode. Tom = --color-surface do dark mode do site, hardcoded
     (não a var, que muda com o tema). */
  background: #111319;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
  padding: clamp(24px, 4.5vw, 56px);
  overflow: hidden;
}
.fv-demo *{ box-sizing: border-box; }
.fv-demo ::selection{ background: var(--fv-brand-200); color: var(--fv-ink); }
.fv-demo [hidden]{ display: none !important; }

/* ---------- Window frame ---------- */
.fv-window{
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  font-family: var(--fv-sans);
  color: var(--fv-ink);
}
/* Clipa só titlebar+body nos cantos arredondados. A .fv-voicebar fica FORA
   deste wrapper (ainda dentro de .fv-window) de propósito: ela é uma barra
   flutuante e sua própria box-shadow precisa de espaço pra esmaecer — presa
   dentro do overflow:hidden ela era cortada num degrau reto perto do rodapé
   da janela (só 16px de folga pro blur de 30px). */
.fv-window-clip{
  background: var(--fv-page);
  border-radius: 20px;
  overflow: hidden;
}
.fv-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 14px;
  background: var(--fv-page);
  border-bottom:1px solid var(--fv-line);
}
.fv-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  border:none; background:transparent; color:var(--fv-subtle);
  cursor:pointer; transition:background-color .15s, color .15s;
}
.fv-icon-btn:hover{ background:var(--fv-muted); color:var(--fv-ink); }
.fv-titlebar-right{ display:flex; align-items:center; gap:6px; }
.fv-bell-wrap, .fv-avatar-wrap{ position:relative; }
.fv-dot{
  position:absolute; top:6px; right:6px; width:7px; height:7px;
  border-radius:50%; background:var(--fv-brand);
}
.fv-avatar{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--fv-brand-400), var(--fv-brand-700));
  color:#fff; font-size:12px; font-weight:700; font-family:var(--fv-sans);
}
.fv-winctl{ display:flex; align-items:center; gap:6px; margin-left:8px; padding-left:10px; border-left:1px solid var(--fv-line); }
.fv-winctl span{ width:11px; height:11px; border-radius:50%; background:var(--fv-muted-2); border:1px solid var(--fv-line-strong); }

.fv-popover{
  position:absolute; right:0; top:40px; z-index:20;
  width:230px; background:var(--fv-surface); border:1px solid var(--fv-line);
  border-radius:16px; padding:10px; box-shadow:0 10px 40px -12px rgba(27,26,23,.25);
  opacity:0; transform:scale(.97); transform-origin:top right; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.fv-popover.open{ opacity:1; transform:scale(1); pointer-events:auto; }
.fv-popover p{ margin:0; }
.fv-popover-title{ font-size:13px; font-weight:600; padding:4px 6px 8px; }
.fv-popover-item{
  display:flex; align-items:center; gap:8px; width:100%;
  border:none; background:transparent; text-align:left; cursor:pointer;
  padding:8px 8px; border-radius:8px; font-size:13px; color:var(--fv-ink-soft);
  font-family:var(--fv-sans);
}
.fv-popover-item:hover{ background:var(--fv-muted); }
.fv-popover-note{ font-size:12px; color:var(--fv-subtle); padding:4px 6px 6px; line-height:1.5; }

/* ---------- Body / sidebar / main ---------- */
.fv-body{ display:flex; align-items:stretch; min-height:520px; }
.fv-sidebar{
  width:208px; flex-shrink:0; display:flex; flex-direction:column;
  background:var(--fv-page); border-right:1px solid var(--fv-line);
  padding:16px 10px; transition:width .2s ease;
}
.fv-sidebar.fv-collapsed{ width:56px; align-items:center; padding:16px 6px; }
.fv-sidebar.fv-collapsed .fv-logo-word,
.fv-sidebar.fv-collapsed .fv-badge,
.fv-sidebar.fv-collapsed .fv-nav-item span,
.fv-sidebar.fv-collapsed .fv-sidebar-bottom{ display:none; }
.fv-sidebar.fv-collapsed .fv-nav-item{ justify-content:center; padding:9px; }

.fv-logo{ display:flex; align-items:center; gap:8px; padding:0 6px 16px; }
.fv-logo-mark{ width:24px; height:24px; border-radius:7px; flex-shrink:0; }
.fv-logo-word{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.fv-logo-word b{ color:var(--fv-brand); font-weight:700; }
.fv-badge{
  margin-left:auto; white-space:nowrap; font-size:10px; font-weight:700;
  background:var(--fv-brand-100); color:var(--fv-brand-700);
  padding:2px 7px; border-radius:6px;
}

.fv-nav{ display:flex; flex-direction:column; gap:2px; }
.fv-nav-item{
  display:flex; align-items:center; gap:10px; position:relative;
  padding:8px 10px; border-radius:10px; font-size:13px; font-weight:500;
  color:var(--fv-ink-soft); cursor:pointer; transition:background-color .15s;
  white-space:nowrap; overflow:hidden;
}
.fv-nav-item svg{ flex-shrink:0; width:16px; height:16px; }
.fv-nav-item:hover{ background:var(--fv-muted); }
.fv-nav-item.active{ background:var(--fv-muted); color:var(--fv-ink); font-weight:600; }
.fv-nav-item.active::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:16px;
  transform:translateY(-50%); border-radius:0 4px 4px 0; background:var(--fv-brand);
}
.fv-sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid var(--fv-line); }
.fv-nav-accent{ color:var(--fv-brand-700); }

.fv-main{ flex:1; min-width:0; padding:22px 24px 26px; overflow:hidden; }
.fv-page-header{ margin-bottom:18px; }
.fv-page-header h3{ margin:0; font-family:var(--fv-serif); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.fv-page-header p{ margin:2px 0 0; font-size:12.5px; color:var(--fv-subtle); }

.fv-grid{ display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; }
@media (max-width:760px){ .fv-grid{ grid-template-columns:1fr; } }

.fv-hero-banner{
  position:relative; overflow:hidden; border-radius:16px; padding:20px 22px;
  background:var(--fv-dark); color:var(--fv-page); margin-bottom:18px;
}
.fv-hero-banner::before{
  content:""; position:absolute; right:-40px; top:-30px; width:180px; height:180px;
  border-radius:50%; background:rgba(86,70,229,.35); filter:blur(46px); pointer-events:none;
}
.fv-hero-banner h2{ position:relative; margin:0; font-family:var(--fv-serif); font-size:19px; line-height:1.3; font-weight:500; }
.fv-hero-banner h2 em{ font-style:italic; color:var(--fv-brand-200); }
.fv-hero-banner p{ position:relative; margin:6px 0 0; font-size:12.5px; color:rgba(247,245,241,.7); max-width:420px; }
.fv-btn-light{
  position:relative; margin-top:12px; border:none; cursor:pointer;
  background:var(--fv-page); color:var(--fv-ink); font-family:var(--fv-sans);
  font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:10px;
  transition:transform .15s;
}
.fv-btn-light:hover{ transform:scale(1.02); }

.fv-history-group h3{ margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--fv-subtle); }
.fv-history-group h3 span{ font-weight:400; color:var(--fv-faint); }
.fv-card{ background:var(--fv-surface); border:1px solid var(--fv-line); border-radius:14px; box-shadow:0 1px 2px rgba(27,26,23,.04), 0 1px 3px rgba(27,26,23,.06); }
/* Altura travada em 4 linhas (o teto que o JS já respeita em addHistoryRow) —
   sem isso o card cresce de 2 pra 4 ditados nos primeiros ciclos do loop e
   empurra o banner inteiro, mudando o tamanho da seção na home. */
.fv-history-list{ overflow:hidden; height:252px; }
.fv-history-row{
  display:flex; align-items:flex-start; gap:12px; padding:11px 14px;
  min-height:62px; border-bottom:1px solid var(--fv-line); transition:background-color .15s;
}
.fv-history-row:last-child{ border-bottom:none; }
.fv-history-row:hover{ background:rgba(239,237,231,.5); }
.fv-history-time{ flex-shrink:0; padding-top:1px; font-size:10.5px; color:var(--fv-faint); width:36px; }
.fv-history-row p{
  margin:0; font-size:12.5px; line-height:1.55; color:var(--fv-ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.fv-history-row.fv-row-new{ animation:fv-row-in .5s ease; }
@keyframes fv-row-in{
  from{ opacity:0; transform:translateY(-6px); background:var(--fv-brand-50); }
  to{ opacity:1; transform:none; }
}

.fv-stats{ padding:18px; display:flex; flex-direction:column; gap:16px; }
.fv-stat-num{ margin:0; font-family:var(--fv-serif); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; }
.fv-stat-label{ margin:2px 0 0; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--fv-subtle); }
.fv-heatmap{ display:flex; gap:3px; margin-top:9px; }
.fv-heatmap span{ width:8px; height:8px; border-radius:2px; background:var(--fv-muted-2); }
.fv-heatmap span.fv-h1{ background:var(--fv-brand-200); }
.fv-heatmap span.fv-h2{ background:var(--fv-brand-400); }
.fv-heatmap span.fv-h3{ background:var(--fv-brand); }

/* ---------- Floating VoiceBar ---------- */
.fv-voicebar{
  position:absolute; left:0; right:0; bottom:16px; z-index:15;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.fv-vb-pill{ pointer-events:auto; }
.fv-vb-idle{
  display:flex; align-items:center; gap:0; border:none; cursor:pointer;
  border-radius:999px; padding:4px; background:rgba(25,23,18,.85);
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 30px -6px rgba(27,26,23,.35);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  transition:padding .3s ease, box-shadow .3s ease, transform .3s ease;
}
.fv-vb-idle:hover{ padding-right:10px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 14px 44px -10px rgba(0,0,0,.55); transform:scale(1.02); }
.fv-vb-mic{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--fv-brand-400), var(--fv-brand-700));
  color:#fff; box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.fv-vb-mic svg{ width:12px; height:12px; }
.fv-vb-mic::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(86,70,229,.35); animation:fv-pulse-ring 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes fv-pulse-ring{
  0%{ transform:scale(.9); opacity:.7; }
  70%,100%{ transform:scale(1.6); opacity:0; }
}
.fv-vb-label{
  display:grid; grid-template-columns:0fr; overflow:hidden; white-space:nowrap;
  color:var(--fv-page); transition:grid-template-columns .25s ease;
}
.fv-vb-idle:hover .fv-vb-label{ grid-template-columns:1fr; }
.fv-vb-label > span{ display:flex; align-items:center; gap:6px; overflow:hidden; }
.fv-vb-label b{ padding-left:8px; font-size:12px; font-weight:600; }
.fv-vb-label kbd{
  font-family:var(--fv-sans); font-size:9px; font-weight:500; color:rgba(247,245,241,.55);
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
  border-radius:999px; padding:2px 6px;
}

.fv-vb-recording{
  display:flex; align-items:center; gap:6px; border-radius:999px;
  padding:4px 4px 4px 8px; background:rgba(25,23,18,.85);
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 30px -6px rgba(27,26,23,.35);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.fv-vb-reddot{ width:6px; height:6px; border-radius:50%; background:#ef4444; animation:fv-blink 1.1s infinite; flex-shrink:0; }
@keyframes fv-blink{ 50%{ opacity:.25; } }
.fv-vb-x, .fv-vb-check{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; border:none; cursor:pointer; flex-shrink:0; color:#fff;
}
.fv-vb-x{ background:rgba(255,255,255,.1); }
.fv-vb-x:hover{ background:rgba(255,255,255,.2); }
.fv-vb-check{ background:#6b9080; }
.fv-vb-check:hover{ background:#5f8272; }
.fv-vb-wave{ display:flex; align-items:center; gap:2px; height:18px; padding:0 2px; }
.fv-vb-wave span{
  width:2px; border-radius:2px; background:linear-gradient(to top, var(--fv-brand), var(--fv-brand-200));
  transition:height .1s ease-out;
}
.fv-vb-timer{ min-width:30px; text-align:center; font-size:10.5px; font-variant-numeric:tabular-nums; color:rgba(247,245,241,.7); }

.fv-vb-processing{
  display:flex; align-items:center; gap:8px; border-radius:999px; padding:6px 16px 6px 12px;
  background:rgba(25,23,18,.85); color:var(--fv-page); font-size:12px; font-weight:500;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 30px -6px rgba(27,26,23,.35);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.fv-thinking-wave{ display:flex; height:16px; align-items:center; gap:2.5px; }
.fv-thinking-wave span{
  width:2px; height:14px; border-radius:999px;
  background:linear-gradient(to top, var(--fv-brand), var(--fv-brand-200));
  animation:fv-eq 1s ease-in-out infinite;
}
.fv-thinking-wave span:nth-child(2){ animation-delay:120ms; }
.fv-thinking-wave span:nth-child(3){ animation-delay:240ms; }
.fv-thinking-wave span:nth-child(4){ animation-delay:360ms; }
.fv-thinking-wave span:nth-child(5){ animation-delay:480ms; }
@keyframes fv-eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

.fv-vb-result{
  pointer-events:auto; width:100%; max-width:340px; border-radius:16px;
  background:rgba(255,255,255,.97); border:1px solid var(--fv-line);
  box-shadow:0 10px 40px -12px rgba(27,26,23,.3); padding:11px 13px;
  animation:fv-fade-up .25s ease;
}
@keyframes fv-fade-up{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.fv-vb-result-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.fv-vb-result-head span{ display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--fv-brand); }
.fv-vb-result p{ margin:0; font-size:12px; line-height:1.5; color:var(--fv-ink); }
.fv-vb-result-foot{ margin-top:7px; display:flex; align-items:center; gap:8px; }
.fv-vb-copy{
  display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer;
  background:var(--fv-muted); color:var(--fv-ink); font-family:var(--fv-sans);
  font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:7px;
}
.fv-vb-copy:hover{ background:var(--fv-muted-2); }
.fv-vb-meta{ font-size:10px; color:var(--fv-faint); }

.fv-hint{
  text-align:center; margin-top:16px; font-size:12.5px; color:var(--text-3, #8a8a99);
  opacity:.75;
}
.fv-hint kbd{
  font-family:var(--fv-sans); font-size:11px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:2px 7px;
}

@media (max-width:760px){
  .fv-sidebar{ display:none; }
  .fv-main{ padding:18px; }
}
@media (prefers-reduced-motion:reduce){
  .fv-demo *{ animation:none !important; transition:none !important; }
}