/* Layout: conversa em coluna única com texto grande; painel de ouvir/responder fixo embaixo;
   avatar de Libras ao lado da conversa no PC e em cima dela no celular. */
:root {
  --fundo: #eef2f9;
  --superficie: #ffffff;
  --superficie-2: #f5f7fc;
  --tinta: #0d1830;
  --tinta-suave: #4b5875;
  --linha: #d5ddeb;
  --azul: #1f56c9;          /* azul do Setembro Azul, mês da comunidade surda */
  --azul-forte: #163f96;
  --sobre-azul: #ffffff;
  --azul-claro: #dfe8fb;
  --ciano: #139bd0;          /* Ciano Vox: as ondas da voz no símbolo da marca */
  --verde: #0b7a43;
  --ambar: #9a5b00;
  --ambar-claro: #fff1d6;
  --vermelho: #b42318;
  --parcial: #5d6a86;
  --sombra: 0 1px 2px rgb(13 24 48 / .06), 0 10px 30px rgb(13 24 48 / .10);
  --tam: 30px;
  --fonte: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --fundo: #0a1120; --superficie: #111a2c; --superficie-2: #16213a; --tinta: #edf2fc; --tinta-suave: #9eacc8;
    --linha: #26324d; --azul: #6f9cff; --azul-forte: #9dbbff; --sobre-azul: #07122a; --azul-claro: #172a52; --ciano: #8fe3ff;
    --verde: #43d18b; --ambar: #f3b44a; --ambar-claro: #2e2410; --vermelho: #ff7a6b; --parcial: #a3b0cb;
    --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #0a1120; --superficie: #111a2c; --superficie-2: #16213a; --tinta: #edf2fc; --tinta-suave: #9eacc8;
  --linha: #26324d; --azul: #6f9cff; --azul-forte: #9dbbff; --sobre-azul: #07122a; --azul-claro: #172a52; --ciano: #8fe3ff;
  --verde: #43d18b; --ambar: #f3b44a; --ambar-claro: #2e2410; --vermelho: #ff7a6b; --parcial: #a3b0cb;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35);
  color-scheme: dark;
}

:root[data-tema="contraste"] {
  --fundo: #000; --superficie: #000; --superficie-2: #121200; --tinta: #ffeb3b; --tinta-suave: #fff59d;
  --linha: #8a7d00; --azul: #ffeb3b; --azul-forte: #fff; --sobre-azul: #000; --azul-claro: #3a3500; --ciano: #fff;
  --verde: #00e676; --ambar: #ffab00; --ambar-claro: #2a2000; --vermelho: #ff5252; --parcial: #fff;
  --sombra: none;
  color-scheme: dark;
}
:root[data-tema="sepia"] {
  --fundo: #f3ead6; --superficie: #faf4e6; --superficie-2: #efe4c8; --tinta: #3a2c18; --tinta-suave: #6d5a3e;
  --linha: #d9c9a3; --azul: #8a4f12; --azul-forte: #6b3c0c; --sobre-azul: #fff; --azul-claro: #ead6b0; --ciano: #b07a2a;
  --verde: #2f7a3a; --ambar: #9a5b00; --ambar-claro: #f6e3bd; --vermelho: #a3261a; --parcial: #7a6a50;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* o toque aparece: o botão afunda um pouco e escurece enquanto está apertado (também nos links com cara de botão) */
button:not(:disabled), a.botao-topo { transition: transform .06s ease-out, filter .06s ease-out; }
button:not(:disabled):active, a.botao-topo:active { transform: translateY(1px) scale(.97); filter: brightness(.86); }
@media (prefers-reduced-motion: reduce) { button:not(:disabled):active, a.botao-topo:active { transform: none; } }
.botao-texto { border: 0; padding: 4px 2px; background: none; color: var(--azul); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* nada alarga a página além da tela */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
/* linhas fixas: o aviso oculto não pode empurrar as outras áreas */
.topo { grid-row: 1; }
.aviso { grid-row: 2; }
.corpo { grid-row: 3; }
.painel { grid-row: 4; }

/* ---------- topo */
.topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 8px; color: var(--azul); font-weight: 800; font-size: 20px; letter-spacing: .04em; white-space: nowrap; }
/* o quadrado azul da marca: nas cores da marca no claro e no escuro; nos temas de leitura (contraste, sépia,
   personalizado), nas cores do tema, como o resto da tela */
.marca { --marca-quadrado: #1f56c9; --marca-sobre: #ffffff; }
:root[data-tema="contraste"] .marca, :root[data-tema="sepia"] .marca, :root[data-tema="personalizado"] .marca { --marca-quadrado: var(--azul); --marca-sobre: var(--sobre-azul); }
.marca svg { width: 28px; height: 28px; flex: none; }
.marca-quadrado { fill: var(--marca-quadrado); }
.marca-desenho { stroke: var(--marca-sobre); }
.marca span { color: var(--tinta); }
.marca b { color: var(--azul); font-weight: 800; }
.marca-versao { align-self: flex-end; margin: 0 0 3px -2px; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--tinta-suave); }
.status {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--superficie-2); color: var(--tinta-suave); font-size: 14px; font-weight: 600;
}
#statusTexto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); flex: none; }
.status[data-estado="ok"] .ponto { background: var(--verde); }
.status[data-estado="erro"] .ponto { background: var(--vermelho); }
.status[data-estado="conectando"] .ponto { animation: piscar 1s infinite alternate; }
.acoes-topo { margin-left: auto; display: flex; gap: 6px; }
.botao-topo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 42px; height: 42px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--superficie); font-weight: 700; font-size: 16px;
}
a.botao-topo { color: inherit; text-decoration: none; }
.botao-topo svg { width: 22px; height: 22px; }
.botao-topo:hover { background: var(--superficie-2); }
.botao-topo.libras[aria-pressed="true"],
.botao-topo.modo[aria-pressed="true"],
.botao-topo.flutuante[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }

.aviso { padding: 10px 16px; background: var(--ambar-claro); color: var(--tinta); border-bottom: 1px solid var(--linha); font-size: 15px; }
.aviso a { color: var(--azul); font-weight: 700; }

/* ---------- corpo: conversa e avatar */
.corpo {
  min-height: 0;
  display: grid;
  grid-template-areas: "conversa";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.corpo.com-libras {
  grid-template-areas: "libras" "conversa";
  grid-template-rows: minmax(300px, 58%) minmax(0, 1fr);
}
@media (min-width: 900px) {
  .corpo.com-libras {
    grid-template-areas: "conversa libras";
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 440px);
    grid-template-rows: minmax(0, 1fr);
  }
  .painel-libras { border-left: 1px solid var(--linha); border-bottom: 0 !important; }
}
.painel-libras {
  grid-area: libras;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
}
.painel-libras iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: transparent; }
.libras-legenda {
  margin: 0; padding: 8px 14px; border-top: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.conversa {
  grid-area: conversa;
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 24px 16px;
  padding-inline: 16px;
  scroll-behavior: smooth;
}
.lista, .parciais, .vazio { max-width: 62rem; margin-inline: auto; }
.lista { list-style: none; padding: 0; margin-block: 0; display: flex; flex-direction: column; gap: 22px; }

.msg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.msg .tipo { font-weight: 600; }
.msg .texto {
  margin: 0; font-size: var(--tam); line-height: 1.28; font-weight: 600;
  overflow-wrap: anywhere; text-wrap: pretty;
}
.msg.fala .tipo { color: var(--azul); }
.msg.digitado {
  align-self: flex-end; max-width: min(88%, 46rem);
  background: var(--azul); color: var(--sobre-azul);
  padding: 12px 18px 14px; border-radius: 22px 22px 6px 22px;
}
.msg.digitado .meta, .msg.digitado .tipo { color: inherit; opacity: .85; }
.msg.digitado .texto { font-size: calc(var(--tam) * .82); font-weight: 500; }
.lista .msg.continua { margin-top: -12px; }
.msg.continua .meta { display: none; }
.msg.fala.libras-agora .texto { background: var(--azul-claro); border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.msg .acoes { display: flex; gap: 6px; margin-top: 4px; }
.mini {
  height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-suave);
}
.msg.digitado .mini { background: transparent; border-color: color-mix(in srgb, var(--sobre-azul) 45%, transparent); color: inherit; }
.msg .falando-agora { display: none; }
.msg.falando .falando-agora { display: inline-flex; align-items: center; gap: 3px; }
.onda { width: 3px; height: 10px; background: currentColor; border-radius: 2px; animation: onda .8s infinite ease-in-out; }
.onda:nth-child(2) { animation-delay: .15s; } .onda:nth-child(3) { animation-delay: .3s; }

/* legenda de som (música, campainha...): centralizada e discreta, como na legenda da TV */
.msg.som { align-self: center; align-items: center; gap: 2px; }
.msg.som .texto { font-size: calc(var(--tam) * .66); font-weight: 600; color: var(--tinta-suave); }
.msg.som .meta { font-size: 11px; }
.msg .idioma { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta); }

/* emoção percebida na voz: pequena e apagada ao lado da frase, porque é só um indício */
.emocao, .voz-alta {
  display: inline-block; font-size: max(13px, .45em); font-weight: 500; line-height: 1.2;
  vertical-align: .15em; white-space: nowrap; color: var(--tinta-suave); cursor: help;
}
.voz-alta { font-weight: 700; }
.sem-emocao .emocao { display: none; }

/* português simplificado: em "os dois", a versão simples embaixo da frase, menor e marcada */
.simples {
  display: block; margin: 2px 0 0; padding-left: .55em; border-left: 3px solid var(--azul);
  font-size: calc(var(--tam) * .72); line-height: 1.3; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere;
}
.coluna-falas .simples { font-size: .8em; margin-top: 6px; }
.simples.pendente { color: var(--tinta-suave); border-left-style: dashed; }
.marca-simples {
  display: inline-block; padding: 1px 7px; border-radius: 999px; vertical-align: .2em;
  font-family: var(--mono); font-size: max(11px, .4em); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-claro);
}
.simples .marca-simples { font-size: max(11px, .55em); }
.msg.digitado .marca-simples { display: none; }
.simplificar-baixar { display: grid; gap: 10px; }
.simplificar-baixar progress { width: 100%; height: 14px; accent-color: var(--azul); }
.simplificar-erro { margin: 0; font-size: 15px; line-height: 1.45; color: var(--vermelho); font-weight: 600; }

/* motores de teste: quem fez a frase e o atraso; no modo comparar, a versão do Whisper embaixo */
.msg .motor-frase { padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--linha); color: var(--tinta-suave); }
.comparacao {
  display: block; margin: 2px 0 0; padding-left: .55em; border-left: 3px dotted var(--tinta-suave);
  font-size: calc(var(--tam) * .6); line-height: 1.3; color: var(--tinta-suave); overflow-wrap: anywhere;
}
.comparacao b { font-family: var(--mono); font-size: max(11px, .6em); letter-spacing: .04em; text-transform: uppercase; }
.motores-teste { display: grid; gap: 10px; margin-top: 14px; }
.motores-teste h4 { margin: 0; }
.motor-teste { margin: 0; }
.motor-teste[data-ok] { color: var(--verde); font-weight: 600; }
.motor-teste[data-erro] { color: var(--vermelho); font-weight: 600; }
.campos .campo-largo { grid-column: 1 / -1; }
.campo-chave { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.campo-chave input { flex: 1 1 220px; min-width: 0; }

/* linha da letra da música: junto das outras linhas da mesma música, com uma faixa de destaque ao lado */
.msg.letra { padding-left: 14px; border-left: 4px solid var(--azul-claro); }
.msg.letra .texto { font-size: calc(var(--tam) * .82); font-weight: 500; font-style: italic; }
.msg.letra .musica { text-transform: none; letter-spacing: 0; }
.lista .msg.letra.continua { margin-top: -18px; }

/* painel da letra: fica no alto da conversa enquanto a música toca (letra.js desenha o conteúdo) */
.painel-letra {
  position: sticky; top: -24px; z-index: 2; /* -24px: cola no topo, descontando o espaço da conversa */
  overflow-anchor: none; /* as linhas mudam de tamanho aqui dentro: não podem servir de âncora da rolagem */
  max-width: 62rem; margin: -8px auto 22px; padding: 10px 16px 12px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra);
}
.letra-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.letra-rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.painel-letra .ls { --ls-tam: calc(var(--tam) * .8); }
.painel-letra .ls-janela { height: calc(var(--ls-tam) * 5.6); }
#btnLetraCompacta[aria-pressed="true"] { border-color: var(--azul); color: var(--azul); }
.letra-sincronia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.letra-estado { flex: 1 1 14rem; font-size: 14px; color: var(--tinta-suave); }
/* "só a linha atual": nada de rolagem, só a linha cantada, inteira */
.painel-letra.compacta .ls:not(.ls-simples) .ls-janela { height: auto; -webkit-mask-image: none; mask-image: none; }
.painel-letra.compacta .ls:not(.ls-simples) .ls-lista { transform: none !important; }
.painel-letra.compacta .ls:not(.ls-simples) .ls-linha:not(.ls-atual) { display: none; }
/* antes do canto (introdução do clipe), mostra a primeira linha, apagada, no lugar da atual */
.painel-letra.compacta .ls:not(.ls-simples) .ls-lista:not(:has(.ls-atual)) .ls-linha:first-child { display: block; }
.conversa.por-pessoa .painel-letra { position: static; flex: none; width: 100%; margin: 0 auto 14px; }

/* quem falou: nome na cor da pessoa */
.msg .quem { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-pessoa, var(--azul)); font-weight: 600; }
.msg .quem::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.msg .faixa-voz { color: var(--tinta-suave); text-transform: none; letter-spacing: 0; }

/* modo "Por pessoa": um balão (coluna) para cada voz */
.conversa.por-pessoa { overflow: hidden; display: flex; flex-direction: column; }
.conversa.por-pessoa .lista, .conversa.por-pessoa .parciais, .conversa.por-pessoa .vazio, .conversa.por-pessoa .ir-fim { display: none !important; }
.colunas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; }
.coluna {
  --cor-pessoa: var(--azul);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); overflow: hidden;
}
.coluna-topo {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: color-mix(in srgb, var(--cor-pessoa) 18%, var(--superficie));
  border-bottom: 1px solid var(--linha);
}
.coluna-topo .ponto-pessoa { width: 14px; height: 14px; border-radius: 50%; background: var(--cor-pessoa); flex: none; }
.coluna-nome { font-weight: 800; font-size: 19px; }
.coluna-faixa { font-family: var(--mono); font-size: 12px; color: var(--tinta-suave); margin-left: auto; text-align: right; }
.coluna-avatar { height: clamp(180px, 32vh, 300px); flex: none; border-bottom: 1px solid var(--linha); background: var(--superficie-2); }
.coluna-avatar iframe { width: 100%; height: 100%; border: 0; }
.coluna-falas { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.coluna-falas p { margin: 0; font-size: calc(var(--tam) * .82); line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.coluna-falas p.antiga { opacity: .55; }
.coluna-falas p.parcial { color: var(--parcial); font-weight: 500; }
.coluna-falas p.parcial::after { content: ""; display: inline-block; width: .4em; height: .85em; margin-left: .12em; vertical-align: -.08em; background: var(--cor-pessoa); animation: piscar .7s infinite alternate; border-radius: 2px; }
.coluna-falas .libras-agora { background: var(--azul-claro); border-radius: 6px; }
.coluna-vazia { color: var(--tinta-suave); font-size: 15px; }
.colunas[data-vazio]::before { content: "Cada pessoa que falar ganha uma coluna aqui, com o nome e a cor dela."; grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 30rem; text-align: center; font-size: 20px; line-height: 1.4; color: var(--tinta-suave); }

/* tocar no nome da pessoa (na conversa ou no alto da coluna) troca o nome e a cor */
.msg .quem[role="button"] { cursor: pointer; border-radius: 6px; }
.msg .quem[role="button"]:hover .nome-pessoa { text-decoration: underline; text-underline-offset: 3px; }
.msg .quem[role="button"]:focus-visible, .coluna-topo.editavel:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.coluna-topo.editavel { cursor: pointer; }
.coluna-topo.editavel:hover .coluna-nome { text-decoration: underline; text-underline-offset: 4px; }

.editar-pessoa {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px;
  border: 1px solid var(--linha); border-radius: 20px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.editar-pessoa .opcoes label.campo { display: grid; gap: 6px; font-size: 14px; }
.editar-pessoa .opcoes .campo select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: 16px; }
.editar-pessoa::backdrop { background: rgb(5 10 20 / .55); }
.editar-pessoa form { display: grid; gap: 14px; margin: 0; }
.editar-pessoa h2 { margin: 0; font-size: 22px; }
.editar-pessoa .campo input[type="text"] { font-size: 20px; font-weight: 700; }
.amostras-cor { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra-cor { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--linha); cursor: pointer; }
.amostra-cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--tinta); }
.outra-cor { align-items: center !important; }
.outra-cor input[type="color"] { width: 44px !important; height: 32px !important; padding: 2px; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie-2); }
.primario {
  height: 42px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--azul);
  background: var(--azul); color: var(--sobre-azul); font-weight: 800;
}

/* aviso discreto: "Pessoa 2 agora é Júlia · Desfazer", "Vozes lembradas de ..." */
.aviso-vozes {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); width: max-content;
  padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid var(--linha);
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); font-size: 16px; line-height: 1.35;
}
.aviso-vozes[hidden] { display: none; }
.aviso-vozes span { min-width: 0; }
.aviso-vozes button { flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); font-weight: 700; }
.aviso-vozes .aviso-acao { color: var(--azul); }
.aviso-vozes .aviso-fechar { width: 36px; padding: 0; color: var(--tinta-suave); }
/* a legenda flutuante deixando o mouse passar: embaixo do topo, à direita, perto do botão Flutuante */
.aviso-vozes.aviso-cliques { top: calc(72px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 16px; transform: none; max-width: min(560px, calc(100vw - 32px)); width: auto; border-color: var(--ambar); background: var(--ambar-claro); }

/* vozes conhecidas: lista nos ajustes e o passo a passo de gravar a voz */
.conhecida { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--linha); border-left: 6px solid var(--cor-pessoa, var(--azul)); border-radius: 12px; }
.conhecida-nome { flex: 1 1 160px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--tinta); font-size: 17px; font-weight: 800; text-align: left; cursor: pointer; }
.conhecida-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.conhecida .mini { height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.conhecida .estimativa { flex-basis: 100%; font-size: 13px; color: var(--tinta-suave); }

/* assistente de primeiro uso: passos com botões grandes */
.assistente {
  width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px;
  border: 1px solid var(--linha); border-radius: 20px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.assistente::backdrop { background: rgb(5 10 20 / .6); }
.assistente-pontos { display: flex; gap: 6px; margin-bottom: 14px; }
.assistente-pontos span { flex: 1; height: 6px; border-radius: 999px; background: var(--superficie-2); }
.assistente-pontos span.feito { background: var(--azul); }
.assistente-passo { display: grid; gap: 14px; font-size: 17px; line-height: 1.45; }
.assistente-passo[hidden] { display: none; }
.assistente-passo h2 { margin: 0; font-size: 26px; outline: none; }
.assistente-passo p { margin: 0; }
.assistente-lista { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 6px; font-size: 18px; }
.assistente-botoes { margin-top: 4px; }
.primario.grande, .assistente-botoes .secundario { height: 52px; padding: 0 22px; font-size: 18px; border-radius: 12px; }
.assistente .campo input[type="date"] { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: 16px; }
.assistente-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.assistente-pessoa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--linha); border-left: 6px solid var(--cor-pessoa, var(--azul)); border-radius: 12px; }
.assistente-pessoa-nome { flex: 1 1 140px; font-weight: 800; font-size: 18px; min-width: 0; }
.assistente-pessoa-voz { font-size: 14px; color: var(--ambar); font-weight: 700; }
.assistente-pessoa-voz.pronta { color: var(--verde); }
.assistente-pessoa .primario, .assistente-pessoa .secundario { height: 42px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.assistente-pessoa .mini { height: 42px; border-radius: 10px; }
.assistente-nova { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px dashed var(--linha); border-radius: 14px; }
.assistente-nova legend { padding: 0 6px; font-weight: 800; }
.assistente-nova .rotulo-escolha { font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
#novaNome[aria-invalid="true"], #perfilNome[aria-invalid="true"] { border-color: var(--vermelho); box-shadow: 0 0 0 2px var(--vermelho); }
.assistente .nota.erro-campo, .nota.erro-campo { color: var(--vermelho); font-weight: 700; margin-top: -6px; }
/* "Olá, Jorge! Você tem 10 anos, certo?" depois da data de nascimento */
.confirmar-idade { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--azul); background: var(--azul-claro); }
.confirmar-idade.pedir { border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar); }
/* sem a data: "tem até 10 anos?" só aparece no Próximo, sem nada marcado, e precisa de resposta */
.opcoes.pergunta-idade { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--azul); background: var(--azul-claro); }
.pergunta-idade.pedir { border-color: var(--ambar); box-shadow: 0 0 0 3px var(--ambar); }
.pergunta-idade legend { float: left; width: 100%; margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--tinta); } /* dentro da caixa */
.confirmar-idade-texto { margin: 0; font-size: 20px; font-weight: 800; }
.confirmar-idade .nota { margin: 0; }
/* passo "Sua voz": cada voz com Ouvir e Escolher */
.assistente-vozes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.assistente-voz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.assistente-voz.escolhida { border: 2px solid var(--azul); background: var(--azul-claro); }
.assistente-voz-nome { flex: 1 1 160px; font-weight: 800; font-size: 17px; }
.assistente-voz-tipo { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.assistente-voz .primario, .assistente-voz .secundario { height: 42px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.assistente-voz .ouvir-voz { min-width: 9.5em; }
.assistente-voz .ouvir-voz.ouvindo { border-color: var(--azul); background: var(--azul-claro); color: var(--tinta); box-shadow: 0 0 0 2px var(--azul); }
.assistente-faixa { margin-top: 8px; }
.assistente-escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.escolha-grande {
  display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 16px; border: 2px solid var(--azul);
  background: var(--azul-claro); color: var(--tinta); font-size: 20px; font-weight: 800; text-align: left; cursor: pointer;
}
.escolha-grande small { font-size: 14px; font-weight: 500; color: var(--tinta-suave); line-height: 1.4; }
.escolha-grande:hover, .escolha-grande:focus-visible { box-shadow: 0 0 0 3px var(--azul); outline: none; }
.dicas-gravar { margin: 0; padding: 10px 14px; list-style: none; display: grid; gap: 4px; border-radius: 12px; background: var(--superficie-2); font-size: 15px; }
.aviso-privacidade { padding: 8px 12px; border-radius: 10px; background: var(--superficie-2); color: var(--tinta); }
.ensinar-voz { width: min(520px, calc(100vw - 32px)); }
.ensinar-passo { display: grid; gap: 14px; }
.ensinar-passo[hidden] { display: none; }
.ensinar-passo h2 { margin: 0; font-size: 22px; }
.amostras-emoji { display: flex; flex-wrap: wrap; gap: 6px; }
.amostra-emoji { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: 22px; cursor: pointer; }
.amostra-emoji:first-child { font-size: 14px; font-weight: 700; }
.amostra-emoji[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.texto-ler { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); border-left: 4px solid var(--azul); font-size: 20px; line-height: 1.5; }
#ensinarProgresso { width: 100%; height: 12px; accent-color: var(--azul); }
.ensinar-medidor { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.ensinar-medidor span { display: block; height: 100%; width: 0; background: var(--verde); transition: width .1s linear; }
.ensinar-estado { margin: 0; font-size: 16px; font-weight: 700; min-height: 1.4em; }
.ensinar-avisos { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--tinta-suave); }
.ensinar-avisos:empty { display: none; }
#ensinarNome[aria-invalid="true"] { border-color: var(--vermelho); box-shadow: 0 0 0 2px var(--vermelho); }

/* ajustes: grupos de vozes (um por canal ou programa) */
.grupos-vozes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.grupo-vozes { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--linha); border-radius: 12px; }
.grupo-vozes.atual { border-color: var(--azul); background: var(--azul-claro); }
.grupo-vozes input[type="text"] { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); font-size: 15px; font-weight: 700; }
.grupo-vozes .mini { height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.grupo-vozes .estimativa { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-suave); }
@media (max-width: 560px) { .grupo-vozes { grid-template-columns: 1fr 1fr; } .grupo-vozes input[type="text"] { grid-column: 1 / -1; } }

/* ajustes: lista de pessoas */
.pessoas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pessoa { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 160px) auto; gap: 8px; align-items: center; }
.pessoa input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); }
.pessoa input[type="text"], .pessoa select { min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); font-size: 15px; }
.pessoa .estimativa { grid-column: 2 / -1; font-size: 13px; color: var(--tinta-suave); margin-top: -4px; }
.pessoa .mini { height: 40px; }
@media (max-width: 560px) { .pessoa { grid-template-columns: 44px minmax(0, 1fr); } .pessoa select, .pessoa .mini { grid-column: 2; } }

.parciais { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.parcial .meta { font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); }
.parcial .texto { margin: 0; font-size: var(--tam); line-height: 1.28; font-weight: 500; color: var(--parcial); overflow-wrap: anywhere; }
.parcial .meta { color: var(--cor-pessoa, var(--tinta-suave)); }
.parcial .texto::after { content: ""; display: inline-block; width: .45em; height: .9em; margin-left: .12em; vertical-align: -.08em; background: var(--cor-pessoa, var(--azul)); animation: piscar .7s infinite alternate; border-radius: 2px; }

.vazio { padding-block: 4vh 0; }
.vazio h1 { font-size: clamp(24px, 4.2vw, 40px); line-height: 1.15; margin: 0 0 12px; text-wrap: balance; letter-spacing: -.01em; }
.vazio > p { font-size: 18px; line-height: 1.5; color: var(--tinta-suave); max-width: 40rem; margin: 0 0 28px; }
.exemplo { list-style: none; padding: 20px 0 0; margin: 0; display: flex; flex-direction: column; gap: 18px; opacity: .5; border-top: 1px dashed var(--linha); pointer-events: none; }
.exemplo .texto { font-size: min(var(--tam), 30px); }

.ir-fim {
  position: sticky; bottom: 8px; display: block; margin: 12px 0 0 auto;
  padding: 10px 16px; border-radius: 999px; border: 0; background: var(--azul); color: var(--sobre-azul);
  font-weight: 800; box-shadow: var(--sombra);
}

/* ---------- painel inferior */
.painel {
  display: grid; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-top: 1px solid var(--linha);
}
.painel > * { width: 100%; max-width: 62rem; margin-inline: auto; }
.linha-ouvir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ouvir {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 24px 0 18px; border: 0; border-radius: 999px;
  background: var(--azul); color: var(--sobre-azul); font-size: 20px; font-weight: 800;
  transition: background-color .2s;
}
.ouvir svg { width: 28px; height: 28px; }
.ouvir .anel {
  position: absolute; inset: -5px; border-radius: inherit; border: 3px solid var(--verde);
  opacity: 0; transform: scale(calc(1 + var(--nivel, 0) * .08)); transition: transform .08s linear, opacity .2s;
  pointer-events: none;
}
.ouvir[data-estado="ouvindo"] { background: var(--verde); }
.ouvir[data-estado="ouvindo"] .anel { opacity: .55; }
.ouvir[data-estado="pausado"], .ouvir[data-estado="tocar"] { background: var(--ambar); }
.ouvir .rotulo small { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; opacity: .9; }
.ouvir .rotulo:has(small) { line-height: 1.15; text-align: left; }
.ouvir[data-estado="iniciando"] { opacity: .75; }
.trava {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 58px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--linha); background: var(--superficie); color: var(--tinta-suave);
  font-size: 16px; font-weight: 800;
}
.trava svg { width: 22px; height: 22px; }
.trava .arco { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .2s; transform: translateY(-2px) rotate(28deg); }
.trava[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.trava[aria-pressed="true"] .arco { transform: none; }
.trava.aviso-trava { animation: chacoalhar .4s; }
.fonte { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; max-width: 440px; }
.fonte > label[for] { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.filtros { display: grid; gap: 4px; margin-top: 4px; }
.filtros > label[for] { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.filtros select { width: 100%; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: 15px; font-weight: 600; }
.opcao-ruido { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.opcao-ruido input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
.fonte select {
  width: 100%; height: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--linha); background: var(--superficie-2); font-size: 16px; font-weight: 600;
}
.motor-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; flex: 1 1 200px; }
.motor-nome { font-weight: 700; }
.motor-estado { color: var(--tinta-suave); }
.motor-info[data-alerta] .motor-estado { color: var(--vermelho); font-weight: 600; }
/* legenda (CC) do YouTube no lugar do Whisper: "Usando a legenda do YouTube" ou a dica de ligar o CC */
.motor-legenda { font-weight: 600; color: var(--verde); cursor: pointer; }
.motor-legenda:hover, .motor-legenda:focus-visible { text-decoration: underline; }
.motor-legenda::before { content: "📺 "; }
.motor-legenda[data-tipo="lendo"] { color: var(--tinta); }
.motor-legenda[data-tipo="dica"] { color: var(--ambar, var(--tinta-suave)); }
.motor-legenda[data-tipo="dica"]::before { content: "💡 "; }
/* motor de transcrição na internet (Ajustes → Escutar, para testes): o aviso fica sempre à vista */
.motor-nuvem, .motor-nuvem-aviso { font-weight: 700; color: var(--ambar); }
.motor-nuvem { cursor: pointer; }
.motor-nuvem:hover, .motor-nuvem:focus-visible { text-decoration: underline; }
.motor-nuvem::before, .motor-nuvem-aviso::before { content: "☁️ "; }
.motor-nuvem-aviso { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--ambar-claro); }

.ditado { flex: 1 1 260px; display: grid; gap: 4px; min-width: 0; }
.ditado label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.ditado textarea {
  width: 100%; resize: none; font-size: 18px; line-height: 1.35; padding: 10px 12px;
  border: 2px dashed var(--azul); border-radius: 14px; background: var(--superficie-2);
}

.frases {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.frases::-webkit-scrollbar { display: none; }
.frases.no-fim { mask-image: none; }
.frase {
  flex: none; white-space: nowrap; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--superficie-2); font-size: 16px; font-weight: 700;
}
.frase:hover { border-color: var(--azul); }
.frase-sos { background: #b0001e; border-color: #b0001e; color: #fff; padding: 0 14px; }

/* ---------- 🆘 frases de emergência e o cartaz em letras enormes para quem ouve */
.sos {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0 0 20px;
  border: 1px solid var(--linha); border-radius: 20px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.sos::backdrop { background: rgb(5 10 20 / .55); }
.sos .nota { padding: 12px 20px 0; margin: 0; }
.sos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; padding: 14px 20px 0; }
.sos-botao {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 108px; padding: 12px 8px;
  border-radius: 18px; border: 3px solid var(--cor-nivel, var(--linha)); background: var(--superficie-2);
  font-size: 18px; font-weight: 800; line-height: 1.15; text-align: center;
}
.sos-botao[data-nivel="silencioso"] { --cor-nivel: #6b7280; }
.sos-botao[data-nivel="neutro"] { --cor-nivel: var(--azul); }
.sos-emoji { font-size: 44px; line-height: 1; }
.sos-surda { padding: 14px 20px 0; }

/* cartaz: a frase em letras enormes para quem está perto; a cor segue o nível (vermelho, laranja, amarelo) */
.cartaz {
  position: fixed; inset: 0; z-index: 950; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 24px 16px;
  background: #ffd400; color: #000;
}
.cartaz[data-nivel="perigo"] { background: #b0001e; color: #fff; }
.cartaz[data-nivel="grave"] { background: #c24e00; color: #fff; }
.cartaz[data-nivel="silencioso"] { background: #000; color: #fff; }
.cartaz.piscando[data-nivel="perigo"] { animation: piscar-alerta .5s steps(1, end) infinite; } /* 2 por segundo: abaixo do limite de 3 */
.cartaz.piscando[data-nivel="grave"] { animation: piscar-grave 1s steps(1, end) infinite; }
.cartaz-emoji { text-align: center; font-size: clamp(56px, 16vw, 140px); line-height: 1; }
.cartaz-texto {
  margin: 0; align-self: center; text-align: center; font-size: clamp(40px, 11vw, 120px);
  font-weight: 900; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere;
}
.cartaz-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cartaz-botao { height: 56px; padding: 0 24px; border-radius: 999px; border: 3px solid currentColor; background: transparent; color: inherit; font-size: 20px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .cartaz.piscando[data-nivel="perigo"] { animation-duration: 2s; }
  .cartaz.piscando[data-nivel="grave"] { animation-duration: 2s; }
}

.digitar { display: flex; align-items: flex-end; gap: 10px; }
.digitar textarea {
  flex: 1; min-width: 0; resize: none; max-height: 30vh;
  font-size: 20px; line-height: 1.35; padding: 12px 14px;
  border: 2px solid var(--linha); border-radius: 16px; background: var(--superficie-2);
}
.digitar textarea:focus { border-color: var(--azul); outline: none; }
.falar {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 54px; padding: 0 20px; border: 0; border-radius: 16px;
  background: var(--azul); color: var(--sobre-azul); font-size: 18px; font-weight: 800;
}
.falar svg { width: 24px; height: 24px; }
.falar .rotulo-curto { display: none; }
.falar:disabled { opacity: .5; cursor: default; }

/* ---------- ajustes */
.ajustes {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--linha); border-radius: 20px;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.ajustes[open] { display: flex; flex-direction: column; }
.ajustes::backdrop { background: rgb(5 10 20 / .55); }
.ajustes-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--linha); margin: 0;
}
.ajustes-topo h2 { margin: 0; font-size: 22px; }
.fechar { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); font-weight: 700; }
.ajustes-corpo { overflow-y: auto; padding: 0 20px 24px; }
.ajustes section { display: grid; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.ajustes section:last-child { border-bottom: 0; }
.ajustes h3 { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.ajustes h4 { margin: 8px 0 0; font-size: 16px; }

.explica { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 15px; line-height: 1.45; }
.explica dt { font-weight: 800; }
.explica dd { margin: 0; color: var(--tinta-suave); }
.motores { display: grid; gap: 10px; }
.motor {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px;
  padding: 14px; border: 2px solid var(--linha); border-radius: 14px; cursor: pointer;
}
.motor input { grid-row: 1 / span 3; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--azul); }
.motor:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.motor-titulo { font-weight: 800; font-size: 17px; }
.motor-desc { font-size: 15px; line-height: 1.45; color: var(--tinta-suave); }
.motor-estado-cartao { font-family: var(--mono); font-size: 13px; color: var(--tinta-suave); }
.motor-estado-cartao[data-ok] { color: var(--verde); }
.motor-estado-cartao[data-erro] { color: var(--vermelho); }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 14px; font-weight: 700; color: var(--tinta-suave); display: flex; justify-content: space-between; gap: 8px; }
.campo output { font-family: var(--mono); color: var(--tinta); }
.campo select, .campo input[type="text"], .campo textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie-2); font-size: 16px;
}
.campo textarea { resize: vertical; line-height: 1.4; }
.campo.cor input[type="color"] { width: 100%; height: 44px; padding: 3px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--azul); }
.opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opcoes legend { font-size: 14px; font-weight: 700; color: var(--tinta-suave); margin-bottom: 6px; padding: 0; }
.opcoes label, .interruptor { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
.opcoes input, .interruptor input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--azul); }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.secundario, .perigo {
  justify-self: start; height: 42px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--superficie-2); font-weight: 700;
}
.perigo { color: var(--vermelho); }
.perigo[data-confirmar] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.nota { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinta-suave); }
.nota a { color: var(--azul); font-weight: 700; }
.aparelhos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.aparelhos li { padding: 4px 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); font-size: 14px; }
.aparelhos li[data-ouvindo] { border-color: var(--verde); }
.conectar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.conectar > div { flex: 1 1 240px; min-width: 0; display: grid; gap: 6px; }
.conectar p { margin: 0; line-height: 1.45; }
.conectar img { background: #fff; padding: 6px; border-radius: 12px; border: 1px solid var(--linha); }
.conectar-titulo { font-weight: 800; font-size: 17px; }
/* celulares pela internet: lista dos permitidos e o pedido "… quer conectar" */
.internet { display: grid; gap: 10px; }
.aparelhos-internet { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.aparelhos-internet li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px;
  border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha);
}
.aparelhos-internet li[data-conectado] { border-color: var(--verde); }
.aparelhos-internet .aparelho-nome { font-weight: 700; }
.aparelhos-internet .nota { flex: 1 1 auto; }
.aparelhos-internet .perigo { height: 36px; }
.pedido-celular h2 { font-size: 20px; overflow-wrap: anywhere; }
.pedido-botoes { padding: 16px 20px 0; }
.pedido-botoes button { height: 48px; padding: 0 22px; font-size: 17px; }
.url { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--azul); user-select: all; overflow-wrap: anywhere; }

/* ---------- celular */
@media (max-width: 560px) {
  :root { --tam: 26px; }
  .topo { gap: 8px; }
  #statusTexto, .botao-topo.libras span, .botao-topo.flutuante span, .botao-topo.modo span, .botao-topo.sinais span { display: none; }
  .status { padding: 8px; }
  .marca span { font-size: 20px; }
  .topo { padding-inline: 12px; }
  .acoes-topo { gap: 4px; }
  .botao-topo { min-width: 40px; padding: 0 6px; }
  .colunas { grid-auto-rows: minmax(170px, 1fr); overflow-y: auto; } /* por pessoa: colunas empilhadas, com rolagem */
  .ouvir { height: 54px; font-size: 18px; }
  .digitar textarea { font-size: 18px; }
  .libras-legenda { display: none; }
  .trava { height: 54px; padding: 0 14px; }
  #rotuloTrava { display: none; }
  .falar { padding: 0 16px; }
  .falar .rotulo-longo { display: none; }
  .falar .rotulo-curto { display: inline; }
  .explica { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .explica dd { margin-bottom: 8px; }
  .ajustes { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
}
@media (max-width: 400px) {
  .marca span { display: none; } /* celular estreito: o símbolo basta */
}

/* ---------- alerta de perigo: tela inteira, por cima de tudo */
.alerta {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: #b0001e; color: #fff;
  animation: piscar-alerta .5s steps(1, end) infinite; /* 2 piscadas por segundo: abaixo do limite de 3 por segundo (fotossensibilidade) */
}
/* vermelho: perigo de morte (pisca 2x/s); laranja: emergência grave (1x/s); amarelo: atenção (pulsa); verde: área segura (parado) */
.alerta[data-nivel="grave"] { background: #c24e00; animation: piscar-grave 1s steps(1, end) infinite; }
.alerta[data-nivel="atencao"], .alerta[data-nivel="aviso"] { background: #d98c00; color: #1a1000; animation: pulsar-aviso 1.2s ease-in-out infinite; }
.alerta[data-nivel="seguro"] { background: #0a7d32; color: #fff; animation: none; }
.alerta-botoes { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.alerta-ok.seguro { background: #0a7d32; border-color: #fff; color: #fff; }
.alerta-caixa { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 40rem; }
.alerta-emoji { font-size: clamp(80px, 22vw, 180px); line-height: 1; }
.alerta-emoji.com-pessoa { padding: 0.12em; border-radius: 50%; box-shadow: 0 0 0 0.06em var(--cor-pessoa); background: rgba(255, 255, 255, 0.25); }
.alerta-foto { display: block; width: 1.2em; height: 1.2em; border-radius: 50%; object-fit: cover; }
.foto-pessoa { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cor-pessoa, transparent); }
.alerta-nivel { margin: 0; font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.alerta-texto { margin: 0; font-size: clamp(32px, 7vw, 64px); font-weight: 800; line-height: 1.1; text-wrap: balance; }
.alerta-detalhe { margin: 0; font-size: clamp(18px, 3.5vw, 26px); opacity: .9; }
.alerta-ok {
  margin-top: 14px; height: 64px; padding: 0 40px; border-radius: 999px; border: 3px solid currentColor;
  background: rgb(255 255 255 / .15); color: inherit; font-size: 24px; font-weight: 800;
}
@keyframes piscar-alerta { 0% { background: #b0001e; } 50% { background: #2a0008; } }
@keyframes pulsar-aviso { 0%, 100% { background: #d98c00; } 50% { background: #f5b700; } }
@keyframes piscar-grave { 0% { background: #c24e00; } 50% { background: #3d1800; } }

/* ---------- Ajustes dos alertas: legenda das cores, palavras e testes de vibração */
.cores-alerta, .lista-palavras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cores-alerta li, .lista-palavras li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-left: 6px solid var(--cor-nivel, #b0001e); border-radius: 6px; background: var(--superficie-2); font-size: 15px;
}
.cores-alerta li { justify-content: flex-start; }
[data-nivel="perigo"] { --cor-nivel: #d4002a; }
[data-nivel="grave"] { --cor-nivel: #e06a00; }
[data-nivel="atencao"] { --cor-nivel: #e8b000; }
[data-nivel="seguro"] { --cor-nivel: #0a9d40; }
.nova-palavra { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--linha); border-radius: 12px; }
.palavras-prontas summary { cursor: pointer; font-weight: 700; }
.palavras-prontas > div { display: grid; gap: 10px; margin-top: 10px; }
.grupo-palavras { margin: 6px 0 4px; font-weight: 700; }
.testes-vibracao, .linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.teste-vibracao {
  height: 40px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--cor-nivel); background: var(--superficie-2); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  /* mais lento, mas ainda chama atenção */
  .alerta[data-nivel="perigo"] { animation: piscar-alerta 2s steps(1, end) infinite !important; }
  .alerta[data-nivel="grave"] { animation: piscar-grave 2s steps(1, end) infinite !important; }
}

/* ---------- modo vigia: tela preta e sempre ligada, esperando alertas (o alerta fica por cima) */
.vigia { position: fixed; inset: 0; z-index: 900; background: #000; color: #8a8f99; display: grid; padding: 24px; }
.vigia-caixa { display: grid; gap: 6px; justify-items: center; text-align: center; align-self: center; transition: transform 1s; }
.vigia-titulo { margin: 0; font-size: 22px; font-weight: 700; }
.vigia-estado { margin: 0; font-size: 16px; }
.vigia-estado[data-problema] { color: #f5b700; font-weight: 700; }
.vigia-sair { margin-top: 18px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid #3a3f49; background: transparent; color: inherit; font-size: 16px; }

@keyframes piscar { from { opacity: 1; } to { opacity: .25; } }
@keyframes chacoalhar { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes onda { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.3); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- quadro Letra do "Por pessoa": a linha cantada agora em destaque (amarelo no escuro, fundo claro no claro) */
:root { --letra-atual-fundo: #fff1b8; --letra-atual-tinta: #3d2c00; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) { --letra-atual-fundo: rgb(255 224 102 / .14); --letra-atual-tinta: #ffe066; } }
:root[data-tema="escuro"], :root[data-tema="contraste"], :root[data-tema="personalizado"] { --letra-atual-fundo: rgb(255 224 102 / .14); --letra-atual-tinta: #ffe066; }
.coluna-falas p.letra-atual { background: var(--letra-atual-fundo); color: var(--letra-atual-tinta); font-weight: 800; border-radius: 8px; padding: 2px 8px; }

/* "Por pessoa": a caixa "Letra da música" do alto some; o acerto do tempo fica no pé do quadro Letra */
.painel-letra.so-no-quadro { display: none !important; }
.coluna > .letra-sincronia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--linha); font-size: 13px; }
.coluna > .letra-sincronia[hidden] { display: none; }
.coluna > .letra-sincronia .letra-estado { flex: 1 1 100%; color: var(--tinta-suave); }

/* hora nas falas: na conversa, até as falas seguidas da mesma pessoa mostram a hora (só a hora, sem repetir o
   nome); no "Por pessoa", a hora vem pequena na frente de cada fala. Letra, canto e sons ficam sem hora */
.msg.fala.continua .meta { display: flex; }
.msg.fala.continua .meta > :not(time) { display: none; }
.msg.fala.continua .meta > .motor-frase { display: inline; } /* testando motores: cada frase diz quem a fez */
.msg.fala.musica .meta time { display: none; }
.coluna-falas .hora-fala { font-family: var(--mono); font-size: max(12px, .5em); font-weight: 500; color: var(--tinta-suave); vertical-align: .15em; }

/* filtro de palavras (Ajustes → Conversa): um interruptor por grupo */
.filtro-palavras { display: grid; gap: 6px; }
.filtro-palavras small.nota { display: inline; margin: 0; font-size: .85em; }