/* O ESTÚDIO — tokens preservados fora do disco de voz.
 *
 * Tokens do estúdio (17/09/2026): grafite #14171A, vermelhão
 * #D2521E, teal fundo #1F5F63 — que em negativo sobe para #5FBFA8 —, papel
 * #FBF9F4 e areia #EDEAE3.
 *
 * ## O vermelhão não é cor de texto no escuro
 *
 * Medido: #D2521E sobre #0E1113 dá 3,53:1. Serve para forma (mínimo 3), não
 * para texto pequeno (mínimo 4,5). Por isso o acento de TEXTO no tema escuro é o
 * teal negativo #5FBFA8 — 8,9:1 — e o vermelhão fica no ponto, nas barras e nas
 * bordas, que é o papel que o manual dá a ele. No tema claro o acento de texto é
 * o teal fundo #1F5F63 sobre papel: 6,97:1.
 *
 * Três declarações de propósito — base, preferência do sistema com guarda, e
 * escolha explícita —, como manda o padrão da casa. */
.ev-estudio {
  --lt-plano: #EDEAE3;
  --lt-painel: #FBF9F4;
  --lt-painel-fundo: rgba(20, 23, 26, 0.045);
  --lt-ink: #14171A;
  --lt-ink-sec: #6B767B;
  --lt-ink-terc: #8A8F94;
  --lt-linha: rgba(20, 23, 26, 0.14);
  --lt-acento-texto: #1F5F63;
  --lt-vermelhao: #D2521E;
  --lt-teal: #1F5F63;
  --lt-bolha-pessoa: #1F5F63;
  --lt-bolha-pessoa-ink: #FBF9F4;
  --lt-bolha-ia: #FBF9F4;
  --lt-bolha-ia-ink: #14171A;

  width: min(1420px, calc(100% - 48px));
  min-height: calc(100vh - var(--portal-header-height, 74px));
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) 0 clamp(28px, 4vh, 56px);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, .78fr) minmax(320px, 1.05fr);
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 34px);
  color: var(--lt-ink);
  font-family: var(--font-plex-sans), 'IBM Plex Sans', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ev-estudio {
    --lt-plano: #0E1113;
    --lt-painel: #171B1E;
    --lt-painel-fundo: rgba(251, 249, 244, 0.06);
    --lt-ink: #FBF9F4;
    --lt-ink-sec: #A8AFB3;
    --lt-ink-terc: #8A8F94;
    --lt-linha: rgba(251, 249, 244, 0.16);
    --lt-acento-texto: #5FBFA8;
    --lt-bolha-ia: #1E2429;
    --lt-bolha-ia-ink: #FBF9F4;
  }
}

:root[data-theme="dark"] .ev-estudio {
  --lt-plano: #0E1113;
  --lt-painel: #171B1E;
  --lt-painel-fundo: rgba(251, 249, 244, 0.06);
  --lt-ink: #FBF9F4;
  --lt-ink-sec: #A8AFB3;
  --lt-ink-terc: #8A8F94;
  --lt-linha: rgba(251, 249, 244, 0.16);
  --lt-acento-texto: #5FBFA8;
  --lt-bolha-ia: #1E2429;
  --lt-bolha-ia-ink: #FBF9F4;
}

/* A ABERTURA OCUPA A ÁREA INTEIRA e não divide espaço com coluna nenhuma: é o
 * momento em que o assistente tem cara, e dividir a atenção o desfaz. */
.ev-estudio[data-abertura] {
  grid-template-columns: 1fr;
  place-items: center;
  padding-bottom: clamp(48px, 8vh, 96px);
}

.ev-palcoAbertura {
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vh, 44px);
  text-align: center;
  max-width: 560px;
}

.ev-saudacao { display: grid; justify-items: center; gap: 12px; min-height: 148px; }

.ev-saudacaoTitulo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* O cursor da digitação: 2px de vermelhão, como na referência. */
.ev-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--lt-vermelhao);
  animation: ev-piscar 1s steps(2, start) infinite;
}

.ev-saudacaoTexto {
  max-width: 34ch;
  margin: 0;
  color: var(--lt-ink-sec);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  text-wrap: pretty;
  min-height: 3em;
}

/* As sete barras da fala, alternando vermelhão e teal, com períodos diferentes —
 * o desencontro é o que faz parecer voz, e não metrônomo. */
.ev-barras { display: flex; align-items: center; gap: 5px; height: 38px; }
.ev-barras > span { width: 4px; border-radius: 2px; background: var(--lt-vermelhao); animation: ev-barra .72s ease-in-out infinite; }
.ev-barras > span:nth-child(even) { background: var(--lt-teal); }
.ev-barras > span:nth-child(2) { animation-duration: .81s; animation-delay: .08s; }
.ev-barras > span:nth-child(3) { animation-duration: .9s; animation-delay: .16s; }
.ev-barras > span:nth-child(4) { animation-duration: .99s; animation-delay: .24s; }
.ev-barras > span:nth-child(5) { animation-duration: 1.08s; animation-delay: .32s; }
.ev-barras > span:nth-child(6) { animation-duration: 1.17s; animation-delay: .4s; }
.ev-barras > span:nth-child(7) { animation-duration: 1.26s; animation-delay: .48s; }

.ev-rotuloDeEstado {
  margin: 0;
  color: var(--lt-ink-terc);
  font-family: var(--font-receitas-mono), 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
}

/* O POSTO DE TRABALHO. */
.ev-palco {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.ev-nome {
  display: flex;
  align-items: baseline;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
}

.ev-recado {
  max-width: 30ch;
  min-height: 3em;
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.ev-privacidade {
  max-width: 32ch;
  margin: 0;
  color: var(--lt-ink-sec);
  font-size: 12.5px;
  line-height: 1.5;
}

.ev-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ev-barra { 0%, 100% { height: 12px; } 50% { height: 34px; } }
@keyframes ev-piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 1120px) {
  .ev-estudio { grid-template-columns: minmax(280px, 1fr) minmax(240px, .8fr); align-items: start; }
  .ev-palco { align-self: center; }
  .ev-estudio [data-transcricao] { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .ev-estudio { width: min(100% - 32px, 1420px); grid-template-columns: 1fr; gap: 16px; }
  .ev-palco { grid-row: 1; padding: 12px 0 4px; }
  .ev-estudio [data-transcricao] { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-cursor,
  .ev-barras > span { animation: none !important; }
  .ev-barras > span { height: 22px; }
}