/* Hookline . / a sala
   A bancada tem a mesma identidade da landing: preto, osso e sangue, o título em
   Anton, a etiqueta em mono e a frase de efeito em Instrument Serif. A peça, que
   é o que o cliente lê dez vezes, continua no Source Serif e numa coluna só.
   Gradiente é proibido aqui (teste de release): luz e sombra vêm de imagem. */

:root {
  color-scheme: dark;
  --font-ui: "Archivo", system-ui, sans-serif;
  --font-sheet: "Source Serif 4", Georgia, serif;
  --font-leitura: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Anton", "Archivo", Impact, sans-serif;
  --font-sussurro: "Instrument Serif", Georgia, serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-copy: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-hero: 32px;
  --label: 10.5px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --radius: 0;

  /* Paleta da landing. O branco puro saiu porque, ao lado do osso da landing,
     o app parecia outro produto. */
  --bg: #0a0a0a;
  --bg-elev: #121211;
  --bg-hover: #1a1a19;
  --line: #252523;
  --line-strong: #3a3a37;
  --ink: #f2f0eb;
  --ink-soft: #b3b0a8;
  --ink-dim: #8a8780;

  /* O vermelho tem dois pesos porque um só não cumpre os dois papéis: o claro
     vira TEXTO e traço sobre o preto (o sangue #c8102e dá 3,4:1 ali e reprova
     no AA), o escuro vira BLOCO com osso em cima. */
  --accent: #ec3d55;
  --accent-fill: #c8102e;
  --accent-press: #a50d26;
  --accent-ink: #f2f0eb;

  /* Vermelho virou a marca, então alerta não pode ser só cor: quem avisa é a
     palavra escrita ao lado. Neutro significa que está tudo bem. */
  --risk: #ec3d55;
  --ok: #8a8780;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --sidebar-width: 284px;
  --coluna: 46rem;
  --coluna-conversa: 72ch;

  /* Nomes antigos apontando para a superfície única, para os painéis não
     precisarem ser reescritos um a um. */
  --graf-900: var(--bg);
  --graf-800: var(--bg);
  --graf-700: var(--bg-elev);
  --graf-600: var(--line);
  --graf-ink: var(--ink);
  --graf-mid: var(--ink-soft);
  --graf-dim: var(--ink-dim);
  --marker: var(--accent);
  --marker-ink: var(--accent-ink);
  --sheet: var(--bg);
  --sheet-raised: var(--bg-elev);
  --sheet-ink: var(--ink);
  --sheet-soft: var(--ink-soft);
  --sheet-dim: var(--ink-dim);
  --sheet-line: var(--line);
  --sheet-risk: var(--risk);
  --sheet-ok: var(--ok);
  --instrument-width: 0px;
}

/* O claro é o papel do dossiê da landing, não uma folha branca de escritório. */
html[data-theme="paper"] {
  color-scheme: light;
  --bg: #f2f0eb;
  --bg-elev: #e9e6df;
  --bg-hover: #e0ddd5;
  --line: #d6d2c8;
  --line-strong: #b9b4a8;
  --ink: #0a0a0a;
  --ink-soft: #3f3d39;
  --ink-dim: #5f5c56;
  /* No papel o vermelho claro não tem contraste para virar texto, então os
     dois pesos colapsam no sangue. */
  --accent: #b00e28;
  --accent-fill: #c8102e;
  --accent-ink: #f2f0eb;
  --risk: #b00e28;
  --ok: #5f5c56;
  --shadow: 0 18px 50px rgba(10, 10, 10, .14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); }
body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, textarea, input, select { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: default; }
textarea, input { border: 0; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent-fill); color: var(--accent-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); border: 3px solid transparent; background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--s4); top: -64px; z-index: 300; display: flex; align-items: center; min-height: 44px; padding: 0 var(--s4); background: var(--accent-fill); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--s4); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes flicker { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .15; } 26% { opacity: 1; } 31% { opacity: .3; } 40%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Etiqueta de arquivo: a mesma em todo lugar. */
.auth-file, .auth-kicker, .proof-label, .dialog-kicker, .hero-kicker, .history-head, .context-label,
.specialist-label, .start-tag, .instrument-label, .vsl-title span, .vsl-cell-key, .dossier-group strong,
.lastro-tipo, .seat-card span, .document-state, .assistant-head strong {
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---------- Marca ---------- */
.wordmark { position: relative; display: inline-flex; align-items: baseline; color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: .02em; }
.wordmark b { position: relative; color: var(--accent-fill); font-weight: 400; }
.wordmark svg { position: absolute; left: 50%; top: 88%; width: .38em; height: .95em; transform: translateX(-50%); overflow: visible; }
.wordmark-lg { font-size: 40px; }

/* ---------- Acesso: a sala de interrogatório ----------
   A foto já vem com a base escurecida no próprio arquivo. */
.auth-gate {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, 1fr);
  background: #0a0a0a;
  color: #f2f0eb;
}
.auth-scene { position: relative; min-height: 0; overflow: hidden; background: #0a0a0a; border-right: 1px solid #252523; }
.auth-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9) contrast(1.05); }
.auth-scene-copy { position: absolute; left: var(--s12); right: var(--s12); bottom: 200px; animation: rise .6s ease-out both; }
.auth-file, .auth-kicker, .proof-label, .dialog-kicker, .hero-kicker { margin: 0 0 var(--s3); color: var(--ink-soft); }
.auth-file { color: rgba(242, 240, 235, .78); }
.auth-file span, .hero-kicker span, .brand-block p span { color: var(--accent-fill); }
.auth-scene-title { max-width: 14ch; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 58px); line-height: .95; text-transform: uppercase; }
.auth-scene-title em { font-style: normal; color: #ec3d55; }
.auth-proof { position: absolute; left: var(--s12); right: var(--s12); bottom: var(--s8); display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); align-items: baseline; padding: var(--s4) 0 0; border-top: 1px solid rgba(242, 240, 235, .18); }
.auth-proof .proof-label { grid-column: 1 / 3; margin: 0 0 var(--s1); color: #ec3d55; }
.auth-proof > strong { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; }
.auth-proof > span:not(.proof-label) { color: rgba(242, 240, 235, .72); font-family: var(--font-mono); font-size: var(--text-sm); }
.auth-proof p { grid-column: 1 / 3; max-width: 52ch; margin: var(--s2) 0 0; color: rgba(242, 240, 235, .72); font-size: var(--text-sm); line-height: 1.6; }

.auth-panel { min-height: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: var(--s12) var(--s8); }
.auth-card { width: 100%; max-width: 420px; animation: rise .5s ease-out both; }
.auth-brand { margin-bottom: var(--s12); }
.auth-card h1 { margin: 0; font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); font-weight: 400; line-height: .92; text-transform: uppercase; }
.auth-copy { max-width: 40ch; margin: var(--s4) 0 var(--s8); color: var(--ink-soft); font-family: var(--font-sussurro); font-size: 21px; font-style: italic; line-height: 1.35; }
.auth-tabs { display: flex; gap: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.auth-tab { min-height: 44px; padding: 0; background: transparent; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.auth-tab:hover { color: var(--ink); }
.auth-tab.on { color: var(--ink); box-shadow: inset 0 -2px var(--accent-fill); }
.auth-form { display: grid; gap: var(--s4); }
.auth-form label, .branding-form label { display: grid; gap: var(--s2); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.auth-form input, .branding-form input { min-height: 50px; padding: 0 var(--s4); background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--ink); font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: 0; text-transform: none; outline: 0; transition: border-color .15s ease; }
.auth-form input::placeholder, .branding-form input::placeholder { color: var(--ink-dim); opacity: .6; }
.auth-form input:focus, .branding-form input:focus { border-color: var(--accent-fill); }
.primary-button, .secondary-button { min-height: 52px; padding: 0 var(--s6); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: background-color .15s ease, transform .1s ease; }
.primary-button { margin-top: var(--s2); background: var(--accent-fill); color: var(--accent-ink); }
.primary-button:hover:not(:disabled) { background: var(--accent-press); }
.primary-button:active:not(:disabled), .secondary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .6; }
.secondary-button { min-height: 46px; background: var(--ink); color: var(--bg); font-size: var(--text-xs); letter-spacing: .16em; }
.auth-status { min-height: 20px; margin: 0; color: var(--risk); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.auth-terms-note { margin: 0; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.auth-terms-note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.auth-terms-note a:hover { text-decoration-color: var(--accent-fill); }
.auth-plano-nota { margin: 0; padding: var(--s3); background: var(--bg-elev); border: 1px solid var(--line); border-left: 2px solid var(--accent-fill); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.planos { display: grid; gap: var(--s3); }
.plano { display: grid; gap: var(--s2); padding: var(--s4); background: var(--bg-elev); border: 1px solid var(--line); }
.plano.plano-destaque { border-color: var(--accent-fill); box-shadow: inset 2px 0 var(--accent-fill); }
.plano-nome { color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.plano-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.plano-valor { color: var(--ink); font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: .02em; }
.plano-periodo { color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); }
.plano-equivale { margin: 0; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.4; }
.plano .primary-button { width: 100%; margin-top: var(--s1); padding: 0 var(--s3); }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s8) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .26em; text-transform: uppercase; }
/* A volta para a landing: quem caiu direto no login conhece a página antes de criar a conta. */
.auth-foot a, .paywall-logout-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: transparent; color: var(--ink-soft); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; transition: color .15s ease, text-decoration-color .15s ease; }
.auth-foot a:hover, .paywall-logout-link:hover { color: var(--ink); text-decoration-color: var(--accent-fill); }
/* O login tem a cara da landing nos dois temas: a sala não acende a luz. */
html[data-theme="paper"] .auth-gate { --bg: #0a0a0a; --line: #252523; --ink: #f2f0eb; --ink-soft: #b3b0a8; --ink-dim: #8a8780; --risk: #ec3d55; color-scheme: dark; }

/* ---------- Estrutura ---------- */
.app-shell { display: flex; width: 100%; height: 100%; background: var(--bg); }

/* Lateral: o arquivo. Cada trabalho é uma ficha numerada, como as evidências
   da landing, e a ficha aberta ganha o traço vermelho. */
.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  transition: margin-left .2s ease, transform .2s ease;
}
.sidebar.closed { margin-left: calc(var(--sidebar-width) * -1); }
.brand-block { padding: var(--s6) var(--s5) var(--s5); }
.brand { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; padding: 0; background: transparent; color: var(--ink); }
.brand-block p { margin: var(--s5) 0 0; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; }
.side-action { padding: 0 var(--s5) var(--s5); }
.new-chat { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s4); background: var(--accent-fill); color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: background-color .15s ease; }
.new-chat::after { content: "+"; font-size: var(--text-lg); font-weight: 400; letter-spacing: 0; transition: transform .2s ease; }
.new-chat:hover { background: var(--accent-press); }
.new-chat:hover::after { transform: rotate(90deg); }
kbd { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.history-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s5) var(--s2); border-top: 1px solid var(--line); color: var(--ink-dim); }
.history-count { min-width: 24px; text-align: right; color: var(--ink); }
.search-box { display: flex; align-items: center; min-height: 44px; gap: var(--s2); margin: 0 var(--s5) var(--s3); padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-dim); transition: border-color .15s ease; }
.search-box:focus-within { border-color: var(--accent-fill); }
.search-box input { width: 100%; min-width: 0; align-self: stretch; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); }
.search-box input::placeholder { color: var(--ink-dim); }
/* Era um quadrado girado, que na tela vira losango e não lupa. */
.search-icon { position: relative; width: 12px; height: 12px; flex: none; border: 1px solid currentColor; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; right: -4px; bottom: -2px; width: 6px; height: 1px; background: currentColor; transform: rotate(45deg); }
.convos { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s3) var(--s3); counter-reset: ficha; }
.convo { position: relative; display: flex; align-items: center; min-height: 56px; margin: 2px 0; color: var(--ink-soft); counter-increment: ficha; transition: background-color .12s ease; }
.convo:hover { background: var(--bg-elev); color: var(--ink); }
.convo.active { background: var(--bg-elev); color: var(--ink); box-shadow: inset 2px 0 var(--accent-fill); }
.convo-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s1); padding: var(--s2) var(--s2) var(--s2) var(--s3); background: transparent; text-align: left; color: inherit; }
.convo-main::before { content: counter(ficha, decimal-leading-zero); grid-row: 1 / 3; padding-top: 2px; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .08em; }
.convo.active .convo-main::before { color: var(--accent); }
.convo-title, .convo-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-title { font-size: var(--text-sm); font-weight: 600; }
.convo-meta { margin-top: 3px; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; }
.convo-delete { width: 40px; height: 44px; background: transparent; color: var(--ink-dim); font-size: var(--text-lg); opacity: 0; transition: opacity .12s ease, color .12s ease; }
.convo:hover .convo-delete, .convo.active .convo-delete, .convo-delete:focus-visible { opacity: 1; }
.convo-delete:hover { color: var(--risk); }
.history-empty { margin: var(--s2) var(--s2); padding: var(--s6) var(--s4); border: 1px dashed var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; text-align: center; }
.sidebar-foot { padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.knowledge-status { display: flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 0 var(--s2); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; line-height: 1.4; }
.status-dot { width: 7px; height: 7px; border: 1px solid var(--accent-fill); border-radius: 50%; flex: none; animation: pulse 1.4s ease-in-out infinite; }
.status-dot.ready { background: var(--ok); border-color: var(--ok); animation: none; }
.status-dot.error { background: var(--risk); border-color: var(--risk); animation: none; }
.account-button { width: 100%; min-height: 54px; display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); padding: var(--s2); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); text-align: left; transition: border-color .15s ease; }
.account-button:hover { border-color: var(--line-strong); color: var(--ink); }
.account-mark, .specialist-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; }
.account-copy, .specialist-copy { flex: 1; min-width: 0; }
.account-copy strong, .account-copy small, .specialist-copy strong, .specialist-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.account-copy small { margin-top: 2px; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); }
.account-more { color: var(--ink-dim); letter-spacing: .1em; }

/* ---------- Área de trabalho ---------- */
.workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { min-height: 64px; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); background: var(--bg); z-index: 30; }
.icon-button, .theme-button { min-width: 44px; height: 44px; background: transparent; border: 0; color: var(--ink-soft); transition: background-color .12s ease, color .12s ease; }
.icon-button:hover, .theme-button:hover { background: var(--bg-hover); color: var(--ink); }
.menu-toggle { display: grid; place-items: center; }
.menu-toggle span { display: block; width: 18px; height: 1px; background: currentColor; }
.menu-toggle span:last-child { width: 12px; margin-top: -10px; margin-left: -6px; }
/* A barra mostra em que ficha você está, como o cabeçalho de um dossiê. */
.work-context { min-width: 0; display: flex; align-items: baseline; gap: var(--s3); }
.context-label { flex: none; color: var(--ink-dim); }
.work-context strong { overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.top-spacer { flex: 1; }
.selector { position: relative; }
.specialist-button { min-height: 46px; display: flex; align-items: center; gap: var(--s3); padding: var(--s1) var(--s3) var(--s1) var(--s4); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); text-align: left; transition: border-color .15s ease; }
.specialist-button:hover, .specialist-button[aria-expanded="true"] { border-color: var(--line-strong); }
.specialist-mark, #selTagline, #projTagline { display: none; }
.coerencia-button { min-height: 46px; padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: border-color .15s ease, color .15s ease; }
.coerencia-button:hover { border-color: var(--accent-fill); color: var(--ink); }
.project-filter-bar { padding: 0 var(--s5) var(--s2); }
.project-filter-toggle { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .06em; text-align: left; }
.project-filter-toggle[aria-pressed="true"] { background: var(--bg-elev); border-color: var(--accent-fill); color: var(--ink); box-shadow: inset 2px 0 var(--accent-fill); }
.convo-proj { display: inline-block; max-width: 100%; margin-top: 3px; padding: 1px var(--s2); background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.specialist-label { color: var(--ink-dim); font-size: 9.5px; }
.specialist-copy strong { margin-top: 2px; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.chevron { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 var(--s1) var(--s1); }
.specialist-menu { position: absolute; top: calc(100% + var(--s2)); right: 0; z-index: 100; width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; padding: var(--s2); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow); animation: rise .15s ease-out; }
.menu-section { padding: var(--s3) var(--s2) var(--s1); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .22em; text-transform: uppercase; }
.specialist-option { width: 100%; min-height: 54px; display: flex; align-items: center; gap: var(--s3); padding: var(--s2); background: transparent; color: var(--ink-soft); text-align: left; }
.specialist-option:hover, .specialist-option[aria-selected="true"] { background: var(--bg-hover); color: var(--ink); }
.specialist-option[aria-selected="true"] { box-shadow: inset 2px 0 var(--accent-fill); }
.option-mark { width: 34px; flex: none; color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); }
.option-copy { display: grid; gap: 2px; }
.option-copy strong { font-size: var(--text-sm); }
.option-copy small { color: var(--ink-dim); font-size: var(--text-xs); }
.option-count { margin-left: auto; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); }
.option-unavailable { opacity: .55; cursor: not-allowed; }
.theme-button { display: grid; place-items: center; width: 44px; padding: 0; }
.theme-button > span:last-child { display: none; }
/* Círculo pela metade, que todo mundo lê como claro e escuro. O glifo que o JS
   escreve some; o desenho vem de borda e sombra interna. */
.theme-symbol { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; box-shadow: inset 6px 0 0 0 currentColor; font-size: 0; }

/* ---------- Início: a sala aberta ---------- */
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.empty { min-height: 100%; display: flex; align-items: center; padding: var(--s10) var(--s6); }
.empty-inner { width: 100%; max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s16); align-items: center; }
.empty-main { min-width: 0; animation: rise .5s ease-out both; }
.hero-copy { margin-bottom: var(--s8); }
.hero-copy h1 { max-width: 14ch; margin: 0 0 var(--s4); color: var(--ink); font-family: var(--font-display); font-size: clamp(46px, 5.6vw, 84px); font-weight: 400; letter-spacing: 0; line-height: .92; text-transform: uppercase; animation: flicker 1.3s linear both; }
.hero-copy h1 em { font-style: normal; color: var(--accent-fill); }
.hero-sub { max-width: 46ch; margin: 0; color: var(--ink-soft); font-family: var(--font-sussurro); font-size: 22px; font-style: italic; line-height: 1.38; }
/* As quatro portas viram fichas de arquivo: etiqueta em mono, nome em Anton. */
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.start-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 168px; padding: var(--s5) var(--s5) var(--s10); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.start-card::after { content: "→"; position: absolute; right: var(--s5); bottom: var(--s4); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--text-md); transition: transform .15s ease, color .15s ease; }
.start-card:hover, .start-card:focus-visible { border-color: var(--accent-fill); background: var(--bg-elev); }
.start-card:hover::after, .start-card:focus-visible::after { color: var(--accent); transform: translateX(4px); }
.start-tag { margin-bottom: var(--s4); color: var(--ink-dim); }
.start-tag i { font-style: normal; color: var(--accent-fill); }
.start-card strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 25px; font-weight: 400; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.start-card small { display: block; margin-top: var(--s3); font-size: var(--text-sm); line-height: 1.55; }
.empty-figure { margin: 0; animation: rise .7s .1s ease-out both; }
.empty-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a0a0a; border: 1px solid var(--line); transform: rotate(1.5deg); box-shadow: var(--shadow); }
.empty-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08); }
.empty-figure figcaption { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s4); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .18em; text-transform: uppercase; }
.empty-rumor { margin: var(--s4) 0 0; color: var(--ink-soft); font-family: var(--font-sussurro); font-size: 19px; font-style: italic; line-height: 1.35; }

/* ---------- Peça ---------- */
.messages { width: 100%; margin: 0 auto; padding: var(--s10) var(--s6) var(--s16); }
.message { margin-bottom: var(--s12); animation: rise .35s ease-out both; }
.user-message { display: flex; justify-content: flex-end; max-width: var(--coluna); margin-inline: auto; }
.user-stack { max-width: 82%; }
.user-stack::before { content: "Briefing"; display: block; margin-bottom: var(--s2); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .22em; text-align: right; text-transform: uppercase; }
.attached { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); margin-bottom: var(--s2); }
.attached-file { padding: var(--s1) var(--s2); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); }
.user-bubble { padding: var(--s3) var(--s4); background: var(--bg-elev); border: 1px solid var(--line); border-right: 2px solid var(--accent-fill); color: var(--ink); font-size: var(--text-md); line-height: 1.6; white-space: pre-wrap; }
.assistant-message { position: relative; }
.assistant-rail { display: none; }
.assistant-document { display: block; max-width: var(--coluna); margin-inline: auto; }
.assistant-document.sozinho { max-width: var(--coluna); }
.document-sheet { min-width: 0; color: var(--ink); }
/* Cabeçalho de documento: a peça tem número de arquivo, não balão de chat. */
.assistant-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.assistant-head strong { color: var(--ink-dim); }
.document-state { display: inline-flex; align-items: center; color: var(--ink-soft); }
.document-state::before { content: ""; width: 6px; height: 6px; margin-right: var(--s2); border-radius: 50%; background: var(--accent-fill); }
.assistant-body { padding: 0; color: var(--ink); font-family: var(--font-sheet); font-size: var(--text-copy); line-height: 1.72; overflow-wrap: anywhere; }
.assistant-body > :first-child { margin-top: 0; }
.assistant-body > :last-child { margin-bottom: 0; }
/* Título da peça em Anton, como os da landing; subtítulo vira etiqueta de
   arquivo em mono. O corpo continua serifado. */
.assistant-body h1, .assistant-body h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.assistant-body h1 { margin: var(--s10) 0 var(--s4); font-size: 38px; }
.assistant-body h2 { margin: var(--s10) 0 var(--s4); font-size: 28px; }
.assistant-body h3 { margin: var(--s8) 0 var(--s3); color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.assistant-body h4 { margin: var(--s6) 0 var(--s2); font-family: var(--font-ui); font-size: var(--text-md); }
.assistant-body p { margin: 0 0 var(--s5); }
.assistant-body ul, .assistant-body ol { padding-left: var(--s6); }
.assistant-body li { margin-bottom: var(--s2); }
.assistant-body li::marker { color: var(--accent); }
.assistant-body strong { color: var(--ink); }
.assistant-body a { color: var(--ink); text-decoration-color: var(--accent-fill); text-underline-offset: 3px; }
.assistant-body blockquote { margin: var(--s8) 0; padding: var(--s1) 0 var(--s1) var(--s5); border-left: 2px solid var(--accent-fill); color: var(--ink-soft); font-family: var(--font-sussurro); font-size: 21px; font-style: italic; line-height: 1.45; }
.assistant-body hr { margin: var(--s10) 0; border: 0; border-top: 1px dashed var(--line-strong); }
.assistant-body code { padding: 1px 5px; background: var(--bg-elev); font-family: var(--font-mono); font-size: var(--text-sm); }
.table-wrap { max-width: 100%; overflow-x: auto; margin: var(--s6) 0; }
.assistant-body table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-sm); }
.assistant-body th, .assistant-body td { padding: var(--s2) var(--s3); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.assistant-body th { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.document-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); margin-top: var(--s8); padding: var(--s4) 0 0; border-top: 1px solid var(--line); }
.document-meta { order: 2; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .06em; line-height: 1.5; }
.document-actions { order: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s1); }
.document-action { min-height: 38px; padding: 0 var(--s3); background: transparent; border: 1px solid transparent; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .04em; transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.document-action:hover { border-color: var(--line); background: var(--bg-elev); color: var(--ink); }
.document-action.primary { margin-left: auto; padding: 0 var(--s5); background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.document-action.primary:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--accent-ink); }
.document-action.done { border-color: var(--ok); color: var(--ink); }
.document-instruments { display: grid; gap: var(--s3); margin-top: var(--s6); min-width: 0; }
.instrument-card, .vsl-panel, .lastro, .sources, .dossier { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.instrument-card { padding: var(--s4); }
.instrument-label { color: var(--ink-dim); }
.instrument-value { display: block; margin-top: var(--s2); font-family: var(--font-mono); font-size: var(--text-lg); }
.instrument-detail { display: block; margin-top: var(--s1); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.message-error { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--risk); border-left-width: 3px; color: var(--risk); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
/* A nota final do redator fica à vista, mas claramente fora da peça: ela não vai
   no copiar, no PDF nem no link. */
.nota-redator { margin-top: var(--s5); padding: var(--s3) var(--s4); border-left: 2px solid var(--line); background: var(--bg-elev); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }
.nota-redator strong { display: block; margin-bottom: var(--s1); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nota-redator p { margin: 0 0 var(--s1); }
.memory-note { margin-top: var(--s4); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; }
.generation-status { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: var(--s3); min-height: 96px; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); }
.generation-status::after { content: "O texto aparece por bloco e cada tempo é medido depois da escrita."; grid-column: 2; color: var(--ink-dim); font-size: var(--label); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent-fill); border-radius: 50%; animation: spin .75s linear infinite; }
.thinking { min-height: 96px; display: flex; align-items: center; gap: var(--s2); }
.thinking span { width: 7px; height: 7px; background: var(--ink-dim); animation: pulse 1s infinite; }
.thinking span:nth-child(2) { animation-delay: .15s; }
.thinking span:nth-child(3) { animation-delay: .3s; background: var(--accent-fill); }
/* O mesmo cursor de bloco vermelho da demonstração da landing. */
.cursor { display: inline-block; width: .5em; height: 1.05em; margin-left: var(--s1); background: var(--accent-fill); vertical-align: -.16em; animation: blink 1s steps(1) infinite; }

/* Resposta de conversa: sem folha, sem cabeçalho, sem selo, sem rodapé. */
.assistant-message.conversa { display: block; max-width: var(--coluna); margin-inline: auto; }
.conversa-texto { color: var(--ink); font-family: var(--font-leitura); font-size: var(--text-copy); line-height: 1.68; }
.conversa-texto > :first-child { margin-top: 0; }
.conversa-texto > :last-child { margin-bottom: 0; }
.conversa-texto p { margin: 0 0 var(--s4); }
.assistant-message.conversa .message-error { margin-top: var(--s3); }

/* ---------- Relógio e mapa da VSL ---------- */
.vsl-panel { overflow: hidden; }
.vsl-head { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.vsl-title span { display: block; margin-bottom: var(--s1); color: var(--ink-dim); }
.vsl-title strong { display: block; font-size: var(--text-sm); line-height: 1.4; }
.vsl-badge { align-self: start; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); }
.vsl-progress-track { height: 3px; background: var(--line); }
.vsl-progress-bar { height: 100%; background: var(--accent-fill); transition: width .25s ease; }
.vsl-clock { padding: var(--s4); border-bottom: 1px solid var(--line); }
.vsl-clock strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: .02em; }
.vsl-clock span { display: block; margin-top: var(--s1); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); line-height: 1.6; }
.vsl-clock.fora { box-shadow: inset 3px 0 var(--risk); }
.vsl-clock.fora strong, .vsl-clock.fora .vsl-clock-pedido { color: var(--risk); }
.vsl-grid { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
.vsl-cell { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.vsl-cell:last-child { border-bottom: 0; }
.vsl-cell-key { color: var(--ink-dim); }
.vsl-cell-value { margin-top: var(--s1); color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
.vsl-cell input, .vsl-cell textarea { width: 100%; margin-top: var(--s1); padding: var(--s2) var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; outline: 0; resize: vertical; transition: border-color .15s ease; }
.vsl-cell input { min-height: 44px; font-family: var(--font-mono); }
.vsl-cell textarea { min-height: 72px; }
.vsl-cell input:focus, .vsl-cell textarea:focus { border-color: var(--accent-fill); }
.vsl-map { max-height: 320px; overflow-y: auto; }
.vsl-map.editando { max-height: none; overflow: visible; border-top: 1px solid var(--line); }
.vsl-plano-bloco { border-bottom: 1px solid var(--line); background: var(--bg); }
.vsl-plano-bloco:last-child { border-bottom: 0; }
.vsl-plano-bloco-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s4); background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.vsl-plano-bloco-num { color: var(--accent); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.vsl-plano-bloco-acoes { display: flex; flex-wrap: wrap; gap: var(--s1); }
.vsl-plano-bloco-acoes button { min-height: 40px; padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .06em; }
.vsl-plano-bloco-acoes button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.vsl-plano-bloco-acoes button:disabled { opacity: .45; cursor: not-allowed; }
.vsl-plano-bloco-topo { display: grid; grid-template-columns: minmax(0, 1fr) 110px; border-bottom: 1px solid var(--line); }
.vsl-plano-bloco-topo .vsl-cell { border-bottom: 0; }
.vsl-plano-bloco-topo .vsl-cell:first-child { border-right: 1px solid var(--line); }
.vsl-step { width: 100%; min-height: 44px; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 12px; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); background: transparent; border-bottom: 1px solid var(--line); color: var(--ink-soft); text-align: left; }
.vsl-step:last-child { border-bottom: 0; }
.vsl-step:hover { background: var(--bg-hover); }
.vsl-step-time, .vsl-step-words { font-family: var(--font-mono); font-size: var(--label); }
.vsl-step-name { color: var(--ink); font-size: var(--text-xs); }
.vsl-step.done .vsl-step-state { color: var(--ok); }
.vsl-step.fail .vsl-step-state { color: var(--risk); }
.vsl-step.doing { box-shadow: inset 3px 0 var(--accent-fill); }
.vsl-step.queda { background: var(--bg-hover); box-shadow: inset 3px 0 var(--accent-fill); }
.vsl-tools { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.vsl-tools button { min-height: 44px; padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.vsl-tools button:hover { border-color: var(--line-strong); }
.vsl-tools button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vsl-tools button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Dossiê, lastro e fontes ---------- */
.dossier > summary, .lastro > summary, .sources > summary { min-height: 44px; display: flex; align-items: center; padding: var(--s2) var(--s4); color: var(--ink); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; list-style: none; }
.dossier > summary::-webkit-details-marker, .lastro > summary::-webkit-details-marker, .sources > summary::-webkit-details-marker { display: none; }
.dossier > summary::after, .lastro > summary::after, .sources > summary::after { content: "+"; margin-left: auto; color: var(--ink-dim); font-size: var(--text-md); letter-spacing: 0; }
.dossier[open] > summary::after, .lastro[open] > summary::after, .sources[open] > summary::after { content: "−"; }
.dossier-content, .lastro-list, .source-list { display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.dossier-group { padding-top: var(--s3); border-top: 1px solid var(--line); }
.dossier-group strong { display: block; color: var(--ink-dim); }
.dossier-group p, .dossier-group li { color: var(--ink); font-size: var(--text-xs); line-height: 1.55; }
.dossier-group ul { margin: var(--s2) 0 0; padding-left: var(--s4); }
.dossier-group.risk strong, .dossier-group.risk li { color: var(--risk); }
.dossier-group .revisao-antes { color: var(--ink-dim); text-decoration: line-through; margin-top: var(--s2); }
.dossier-group .revisao-depois { margin-bottom: var(--s1); }
.lastro { border-color: var(--risk); }
.lastro > summary { color: var(--risk); }
.lastro-item { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); }
.lastro-tipo { color: var(--risk); }
.lastro-trecho { color: var(--ink); font-size: var(--text-sm); line-height: 1.55; }
.lastro-nota { margin: 0; padding: 0 var(--s4) var(--s4); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.lastro-acoes { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
.source-tag { min-height: 44px; padding: var(--s2) var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); text-align: left; }
.source-tag:hover { border-color: var(--accent-fill); color: var(--ink); }
.source-quote { margin: 0; padding: var(--s3); border-left: 2px solid var(--accent-fill); background: var(--bg-elev); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.6; }
/* O repertório consultado é nota de rodapé da peça, não instrumento. */
.sources.no-rodape { margin: var(--s4) 0 0; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--ink-soft); }
.sources.no-rodape > summary { padding: var(--s3) 0; color: var(--ink-dim); }
.sources.no-rodape > summary:hover { color: var(--ink); }
.sources.no-rodape .source-list { padding: 0 0 var(--s3); }
.sources.no-rodape .source-tag, .sources.no-rodape .source-quote { color: var(--ink-soft); border-color: var(--line); }
.sources.no-rodape .source-quote { border-left-color: var(--accent-fill); }

/* ---------- Roteiro ---------- */
.roteiro { display: flex; flex-direction: column; gap: var(--s2); }
.roteiro-bloco { border: 1px solid var(--line); background: var(--bg); }
.roteiro-bloco[open] { border-color: var(--line-strong); }
.roteiro-bloco.piscou, .roteiro-bloco.queda { outline: 2px solid var(--accent-fill); outline-offset: 1px; }
.roteiro-bloco.vazio { border-color: var(--risk); }
.roteiro-cabeca { min-height: 54px; display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); background: var(--bg-elev); cursor: pointer; list-style: none; }
.roteiro-cabeca::-webkit-details-marker { display: none; }
.roteiro-tc, .roteiro-conta { font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; }
.roteiro-tc { color: var(--accent); }
.roteiro-nome { color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.roteiro-conta { color: var(--ink-dim); white-space: nowrap; }
.roteiro-conta.fora, .roteiro-bloco.vazio .roteiro-conta { color: var(--risk); }
.roteiro-corpo { padding: var(--s5) var(--s5) var(--s4); color: var(--ink); }
.roteiro-corpo p { margin: 0 0 var(--s4); }
.roteiro-corpo p:last-child { margin-bottom: 0; }
.bloco-editor { width: 100%; min-height: 220px; padding: var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-copy); line-height: 1.72; outline: 0; resize: vertical; transition: border-color .15s ease; }
.bloco-editor:focus { border-color: var(--accent-fill); }
.roteiro-corpo .bloco-editor-actions { padding: var(--s3) 0 0; }
.block-actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s5) var(--s5); }
.block-actions button { min-height: 40px; padding: 0 var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .06em; }
.block-actions button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.block-actions button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.block-actions button.primary:hover:not(:disabled) { background: var(--accent-press); border-color: var(--accent-press); color: var(--accent-ink); }
.block-actions button:disabled { opacity: .45; cursor: not-allowed; }
.bloco-motivo-wrap { align-items: center; }
.bloco-motivo { flex: 1 1 220px; width: 100%; min-height: 44px; padding: var(--s2) var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.45; outline: 0; transition: border-color .15s ease; }
.bloco-motivo:focus { border-color: var(--accent-fill); }
.bloco-motivo::placeholder { color: var(--ink-dim); opacity: .65; }
.version-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: 0 var(--s5) var(--s5); }
.version-pane { padding: var(--s3); background: var(--bg-elev); border: 1px solid var(--line); }
.version-pane strong { display: block; margin-bottom: var(--s2); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .18em; text-transform: uppercase; }
.version-pane p { font-size: var(--text-md); line-height: 1.6; }

/* ---------- Campanha de webinar ---------- */
.webinar-campanha { display: flex; flex-direction: column; gap: var(--s5); outline: 0; }
.webinar-plano { border: 1px solid var(--line); background: var(--bg-elev); }
.webinar-crencas { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.webinar-crenca { padding: var(--s3); background: var(--bg); border: 1px solid var(--line); }
.webinar-crenca strong { display: block; margin-bottom: var(--s2); color: var(--accent); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em; text-transform: uppercase; }
.webinar-crenca p { margin: 0 0 var(--s1); font-size: var(--text-sm); line-height: 1.5; }
.webinar-crenca p:last-child { margin-bottom: 0; }
.webinar-grupo { display: flex; flex-direction: column; gap: var(--s2); }
.webinar-grupo-titulo { margin: 0; padding-bottom: var(--s1); border-bottom: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.webinar-peca-linha, .webinar-aula-card { display: grid; grid-template-columns: 96px 96px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); background: var(--bg); font-family: var(--font-ui); font-size: var(--text-sm); }
.webinar-peca-canal { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .1em; text-transform: uppercase; }
.webinar-aula-card { background: var(--bg-elev); border-color: var(--line-strong); }
.webinar-sem-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }

/* ---------- Composer: uma pasta com abas ----------
   As abas de formato encostam no campo como abas de pasta de arquivo; o
   ajuste da VSL e as referências moram dentro da mesma pasta. */
.composer-wrap { flex: none; padding: var(--s2) var(--s6) calc(var(--s4) + env(safe-area-inset-bottom)); background: var(--bg); z-index: 20; }
.composer-inner { width: 100%; max-width: var(--coluna); margin: 0 auto; }
.workflow-bar { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2px; margin-bottom: -1px; }
.workflow { min-width: 44px; min-height: 40px; padding: 0 var(--s4); background: transparent; border: 1px solid transparent; border-bottom: 0; color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: color .12s ease; }
.workflow:hover { color: var(--ink); }
.workflow.on { background: var(--bg-elev); border-color: var(--line); color: var(--ink); box-shadow: inset 0 2px var(--accent-fill); }
.vsl-setup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); padding: var(--s3) var(--s4); background: var(--bg-elev); border: 1px solid var(--line); border-bottom: 0; }
.setup-field { display: flex; align-items: center; gap: var(--s3); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; }
.setup-field input[type="range"] { width: 150px; height: 44px; accent-color: var(--accent-fill); }
.setup-field select { min-height: 40px; padding: 0 var(--s2); background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; }
.setup-field b { min-width: 64px; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.setup-tip { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.setup-tip.pensando { color: var(--ink-dim); font-family: var(--font-mono); }
.setup-tip strong { color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); }
.setup-tip .tip-why { flex: 1; min-width: 180px; }
.setup-tip button { min-height: 40px; padding: 0 var(--s3); background: var(--accent-fill); color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.reference-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.reference-chips:not(:empty) { padding: var(--s3) var(--s3) 0; background: var(--bg-elev); border: 1px solid var(--line); border-bottom: 0; }
.reference-chip { min-height: 34px; display: inline-flex; align-items: center; gap: var(--s2); max-width: 280px; padding-left: var(--s3); background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); }
.reference-chip.bad { border-color: var(--risk); color: var(--risk); }
.reference-chip.uploading { opacity: .65; }
.reference-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-remove { width: 40px; height: 34px; background: transparent; color: inherit; font-size: var(--text-md); }
.composer { min-height: 60px; display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s2); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .15s ease; }
.composer:focus-within { border-color: var(--line-strong); box-shadow: inset 0 -2px var(--accent-fill); }
.composer.drag { border-color: var(--accent-fill); }
.reference-button { width: 44px; height: 44px; flex: none; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-lg); transition: color .12s ease, border-color .12s ease; }
.reference-button:hover { border-color: var(--accent-fill); color: var(--accent); }
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 240px; padding: 10px var(--s2); resize: none; outline: 0; background: transparent; color: var(--ink); font-size: var(--text-copy); line-height: 1.5; }
.composer textarea::placeholder { color: var(--ink-dim); }
.send { height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; gap: var(--s2); flex: none; padding: 0 var(--s4); background: var(--accent-fill); color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: background-color .15s ease, opacity .15s ease; }
.send:hover:not(:disabled) { background: var(--accent-press); color: var(--accent-ink); }
.send:disabled { opacity: .3; }
/* Parar não pode ser mais um bloco vermelho igual ao de enviar: inverte. */
.send.stop { background: var(--ink); color: var(--bg); opacity: 1; }
.send-arrow { font-size: var(--text-md); letter-spacing: 0; }
.composer-meta { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s2); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .04em; }

/* ---------- Conta, toast e camadas ---------- */
.account-dialog { width: min(480px, calc(100vw - var(--s8))); max-height: calc(100dvh - var(--s8)); padding: 0; background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow); }
.account-dialog[open] { animation: rise .2s ease-out; }
.account-dialog::backdrop { background: rgba(5, 5, 5, .82); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: var(--s2) 0 0; font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.dialog-kicker { margin: 0; color: var(--ink-dim); }
.dialog-close { width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-lg); }
.dialog-close:hover { border-color: var(--line-strong); color: var(--ink); }
.seat-card { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); margin: var(--s5); padding: var(--s4); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: inset 2px 0 var(--accent-fill); }
.seat-card span { color: var(--ink-dim); }
.seat-card strong { font-family: var(--font-display); font-size: 20px; font-weight: 400; text-transform: uppercase; }
.seat-card small { grid-column: 1 / 3; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.plano-card { margin-top: calc(var(--s2) * -1); }
.plano-card .secondary-button { grid-column: 1 / 3; justify-self: start; margin-top: var(--s2); }
/* Consumo: o número que o parceiro mede no teste de 30 dias. Mono e tabular,
   porque é planilha, não peça. */
.consumo-card { display: grid; gap: var(--s2); margin: 0 var(--s5) var(--s5); }
.consumo-card h3 { margin: 0; font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.consumo-wrap { overflow-x: auto; border: 1px solid var(--line); }
.consumo-tabela { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.consumo-tabela th { padding: var(--s2); color: var(--ink-dim); font-weight: 500; letter-spacing: .14em; text-align: left; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line); }
.consumo-tabela td { padding: var(--s2); color: var(--ink); white-space: nowrap; border-bottom: 1px solid var(--line); }
.consumo-tabela td:not(:first-child), .consumo-tabela th:not(:first-child) { text-align: right; }
.consumo-tabela tr:last-child td { border-bottom: 0; }
.consumo-card small { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.branding-form { display: grid; gap: var(--s3); padding: 0 var(--s5) var(--s5); }
.branding-form h3 { margin: 0 0 var(--s1); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.logout-button { width: calc(100% - var(--s10)); min-height: 46px; margin: 0 var(--s5) var(--s5); background: transparent; border: 1px solid var(--risk); color: var(--risk); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.logout-button:hover { background: var(--risk); color: var(--bg); }
.account-legal-links { margin: 0 var(--s5) var(--s5); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.account-legal-links a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.account-legal-links a:hover { color: var(--ink); text-decoration-color: var(--accent-fill); }
.projeto-dialog { width: min(760px, calc(100vw - var(--s8))); }
.projeto-aviso { margin: 0; padding: var(--s3) var(--s5); background: var(--bg-elev); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.projeto-form { display: grid; gap: var(--s4); padding: var(--s5); max-height: calc(100dvh - 210px); overflow-y: auto; }
.projeto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.projeto-field { display: grid; gap: var(--s1); }
.projeto-field.full { grid-column: 1 / -1; }
.projeto-field label { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.projeto-field input, .projeto-field textarea { width: 100%; padding: var(--s2) var(--s3); background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; outline: 0; resize: vertical; transition: border-color .15s ease; }
.projeto-field input { min-height: 44px; font-family: var(--font-mono); }
.projeto-field input:focus, .projeto-field textarea:focus { border-color: var(--accent-fill); }
.projeto-field input::placeholder, .projeto-field textarea::placeholder { color: var(--ink-dim); opacity: .65; }
.projeto-briefing { border: 1px solid var(--line); background: var(--bg-elev); }
.projeto-briefing summary { min-height: 44px; display: flex; align-items: center; padding: 0 var(--s4); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.projeto-briefing[open] summary { border-bottom: 1px solid var(--line); }
.projeto-briefing > :not(summary) { margin: var(--s3) var(--s4); }
.projeto-briefing-nota { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; }
.projeto-briefing textarea { width: calc(100% - 2 * var(--s4)); padding: var(--s2) var(--s3); background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; resize: vertical; outline: 0; }
.projeto-briefing textarea:focus { border-color: var(--accent-fill); }
.projeto-briefing-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.projeto-briefing-acoes .primary-button { margin: 0 0 0 auto; min-height: 44px; }
.projeto-anexo { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4); border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.projeto-anexo:hover, .projeto-anexo:focus-visible { border-color: var(--accent-fill); }
.projeto-anexo-nome { min-width: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); }
.projeto-briefing-status { padding-bottom: var(--s1); color: var(--ink); font-size: var(--text-xs); line-height: 1.55; }
/* Campo que veio do briefing fica marcado até o usuário mexer nele: é o
   pedido de "confira antes de salvar" sem caixa de diálogo a mais. */
.projeto-field.veio-do-briefing textarea, .projeto-field.veio-do-briefing input { border-color: var(--accent-fill); border-left-width: 3px; }
.ficha-origem { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; }
.ficha-origem b { color: var(--ink-dim); font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.projeto-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.projeto-actions .primary-button { margin-top: 0; }
.projeto-actions .projeto-delete { width: auto; margin: 0; padding: 0 var(--s4); }
.projeto-confirm { display: grid; gap: var(--s3); padding: var(--s4); background: var(--bg-elev); border: 1px solid var(--risk); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.projeto-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.projeto-confirm-actions .logout-button { width: auto; margin: 0; padding: 0 var(--s4); }
.coerencia-dialog { width: min(680px, calc(100vw - var(--s8))); }
.coerencia-body { display: grid; gap: var(--s3); padding: var(--s5); max-height: calc(100dvh - 180px); overflow-y: auto; }
.coerencia-item { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); }
.coerencia-peca { color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; }
.coerencia-trecho { margin: 0; padding: var(--s2) var(--s3); background: var(--bg-elev); border-left: 2px solid var(--accent-fill); color: var(--ink); font-size: var(--text-xs); line-height: 1.55; }
.coerencia-explicacao { margin: 0; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5, 5, 5, .76); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.backdrop.show { opacity: 1; pointer-events: auto; }
.toast { position: fixed; left: 50%; bottom: var(--s6); z-index: 220; min-height: 48px; max-width: calc(100vw - var(--s8)); display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); transform: translateX(-50%); background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-family: var(--font-mono); font-size: var(--text-xs); animation: rise .2s ease-out; }
.toast button { min-height: 44px; padding: 0 var(--s2); background: transparent; color: var(--bg); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Telas largas: os instrumentos vão para a margem da peça ----------
   A folha nunca sai da coluna central, alinhada com o briefing e o campo de
   escrita. Os instrumentos só sobem para a margem quando ela cabe inteira; antes
   disso ficam embaixo da peça, que é melhor do que empurrar a folha de lado. */
@media (min-width: 1720px) {
  .assistant-document:not(.sozinho) { position: relative; }
  .document-instruments { position: absolute; top: 0; left: calc(100% + var(--s10)); width: 280px; margin-top: 0; }
}

@media (max-width: 1180px) {
  .empty-inner { grid-template-columns: minmax(0, 1fr); max-width: var(--coluna); }
  .empty-figure { display: none; }
}

@media (max-width: 820px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(86vw, 320px); flex-basis: auto; box-shadow: var(--shadow); }
  .sidebar.closed { margin-left: 0; transform: translateX(-105%); }
  .topbar { min-height: 56px; gap: var(--s2); padding: var(--s1) var(--s2); }
  .context-label { display: none; }
  .work-context strong { font-size: 16px; }
  .specialist-button { max-width: 46vw; padding: var(--s1) var(--s2) var(--s1) var(--s3); }
  .coerencia-button { padding: 0 var(--s2); font-size: 10px; }
  .projeto-grid { grid-template-columns: 1fr; }
  .specialist-copy .specialist-label { display: none; }
  .specialist-copy strong { margin: 0; font-size: var(--text-xs); }
  .empty { align-items: flex-start; padding: var(--s8) var(--s4); }
  .hero-copy { margin-bottom: var(--s6); }
  .hero-copy h1 { font-size: 46px; }
  .hero-sub { font-size: 19px; }
  .start-grid { grid-template-columns: 1fr; gap: var(--s2); }
  .start-card { min-height: 0; padding: var(--s4) var(--s10) var(--s4) var(--s4); }
  .start-card::after { top: 50%; bottom: auto; margin-top: -10px; }
  .start-tag { margin-bottom: var(--s2); }
  .start-card strong { font-size: 21px; }
  .start-card small { margin-top: var(--s2); }
  .messages { padding: var(--s6) var(--s4) var(--s10); }
  .assistant-document { display: block; }
  .document-instruments { position: static; }
  .document-foot { align-items: flex-start; }
  .document-actions { width: 100%; }
  .composer-wrap { padding: var(--s1) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); }
  .workflow-bar { overflow-x: auto; scrollbar-width: none; }
  .workflow-bar::-webkit-scrollbar { display: none; }
  .workflow { min-height: 40px; flex: none; padding: 0 var(--s3); }
  .composer-meta { display: none; }
  .vsl-setup { max-height: 150px; overflow-y: auto; }
  .user-stack { max-width: 92%; }
  .version-compare { grid-template-columns: 1fr; }
  .send { padding: 0; width: 44px; }
  .send .send-label { display: none; }

  /* No celular a sala vira uma faixa no topo e o formulário desce; a página
     inteira rola, porque o body é overflow hidden por causa do app. */
  .auth-gate { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; overflow-y: auto; }
  .auth-scene { height: 32vh; min-height: 220px; max-height: 300px; border-right: 0; border-bottom: 1px solid #252523; }
  .auth-scene-img { object-position: 50% 22%; }
  .auth-scene-copy { left: var(--s4); right: var(--s4); bottom: var(--s4); }
  .auth-scene-title { font-size: 28px; }
  .auth-copy { margin-bottom: var(--s6); font-size: 18px; }
  .auth-proof { display: none; }
  .auth-panel { align-items: flex-start; overflow: visible; padding: var(--s6) var(--s4) calc(var(--s12) + env(safe-area-inset-bottom)); }
  .auth-brand { margin-bottom: var(--s6); }
  .auth-card h1 { font-size: 46px; }
  .wordmark-lg { font-size: 30px; }
}

@media (max-width: 640px) {
  .vsl-plano-bloco-topo { grid-template-columns: 1fr; }
  .vsl-plano-bloco-topo .vsl-cell:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .vsl-plano-bloco-head { flex-direction: column; align-items: stretch; }
  .bloco-motivo-wrap { flex-direction: column; align-items: stretch; }
  .bloco-motivo { flex-basis: auto; }
}

@media (max-width: 520px) {
  /* Em 390px a soma mínima do cabeçalho passava 1px da tela e a página rolava de lado. */
  .topbar { gap: var(--s1); }
  .specialist-button { max-width: 44vw; }
  /* Com projeto ativo entra o botão de coerência, e o cabeçalho somava 485px
     numa tela de 390. O projeto vira só a marca com as iniciais (o nome
     inteiro está no menu que ela abre e no rótulo acessível). */
  .project-button .specialist-copy, .project-button .chevron { display: none; }
  .project-button { max-width: none; padding: 0 var(--s1); }
  .project-button .specialist-mark { display: grid; }
  .specialist:not(.project) .specialist-button { max-width: 32vw; }
  .empty { padding: var(--s6) var(--s4); }
  .hero-copy h1 { font-size: 40px; }
  .messages { padding: var(--s4) var(--s3) var(--s8); }
  .assistant-body { font-size: 16.5px; }
  .assistant-body h1 { font-size: 30px; }
  .assistant-body h2 { font-size: 24px; }
  .roteiro-cabeca { grid-template-columns: 96px minmax(0, 1fr); }
  .roteiro-conta { grid-column: 2; }
  .setup-field { width: 100%; }
  .setup-field input[type="range"] { flex: 1; min-width: 80px; }
}

@media (min-width: 821px) { .backdrop { display: none; } }