:root { color-scheme: dark; --bg:#0a0b0d; --panel:#121418; --line:#262a31; --text:#edf0f5; --muted:#9299a6; --accent:#adff2f; --danger:#ff5b66; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
header { height:68px; display:flex; align-items:center; gap:28px; padding:0 22px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; }.logo { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#071000; background:var(--accent); font-weight:900; }
.versao { font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.03em;padding:2px 8px;border:1px solid var(--line);border-radius:20px;white-space:nowrap; }
.status { flex:1; display:flex; gap:10px; align-items:center; color:var(--muted); }.status #dot { width:8px;height:8px;border-radius:50%;background:#59606c; }.status.live #dot { background:var(--danger); box-shadow:0 0 12px var(--danger); }.status.live #status { color:var(--text); }.status #timer { font-variant-numeric:tabular-nums; }
.actions { display:flex; gap:8px; } button,select,input,textarea { font:inherit; } button { border:0;border-radius:8px;background:var(--accent);color:#0c1204;padding:9px 15px;font-weight:750;cursor:pointer; } button:disabled { opacity:.35;cursor:not-allowed; }.secondary,.icon { background:#242830;color:var(--text); }.danger { background:var(--danger);color:white; }
main.so-mapa { grid-template-columns:1fr; }main.so-mapa .transcript-panel,main.so-mapa .splitter { display:none; }
/* A faixa saiu do index.html, mas uma aba já aberta ainda tem o elemento no DOM.
   Escondê-la por CSS faz o ajuste valer também em sessão que está gravando agora. */
.notice { display:none; }
main { display:grid; grid-template-columns:var(--esq,1fr) 6px 1fr; height:calc(100vh - 68px); gap:0;background:var(--line); }
.splitter { cursor:col-resize;background:var(--line);transition:background .12s; }.splitter:hover,.splitter.arrastando { background:#48525f; }
.toggle-audio { background:#242830;color:var(--text);font-size:15px;padding:8px 11px;line-height:1; }
.toggle-audio.mudo { background:#3a1a1e;color:#ff8f97;text-decoration:line-through; }
.panel { min-width:0;min-height:0;background:var(--panel);display:flex;flex-direction:column; }.panel-header { height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }.panel-header h2 { font-size:14px;margin:0;text-transform:uppercase;letter-spacing:.09em;color:var(--muted); }.content { overflow:auto;padding:20px;flex:1;min-height:0; }.empty { color:var(--muted);display:grid;place-items:center;flex:1;text-align:center; }
.segment { display:grid;grid-template-columns:140px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid #1d2026; }.speaker { color:var(--accent);font-weight:700; }.speaker.remote { color:#79a9ff; }.original { color:var(--muted);font-size:12px;text-decoration:line-through;margin-top:4px; }.partial { margin:12px 20px;color:#88909d;font-style:italic; }
.meters { display:flex;gap:12px;color:var(--muted);font-size:12px; }.meters i { display:inline-block;width:44px;height:5px;background:#2b3038;border-radius:4px;overflow:hidden;vertical-align:middle;--level:0%; }.meters i::after { content:"";display:block;width:var(--level);height:100%;background:var(--accent); }
select { color:var(--text);background:#1c2026;border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-weight:700; }
.mode-state h3 { margin:18px 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em; }.mode-state ul { margin:0;padding-left:20px; }.mode-state .overview { font-size:17px;line-height:1.6; }
dialog { width:min(760px,calc(100vw - 30px));border:1px solid var(--line);border-radius:14px;background:#15181d;color:var(--text);padding:22px;box-shadow:0 30px 100px #000b; } dialog::backdrop { background:#000a; }.dialog-head { display:flex;align-items:center;justify-content:space-between; }.dialog-head h2 { margin:0; }.dialog-head button { background:transparent;color:var(--muted);font-size:24px;padding:0; }.row { display:flex;gap:10px;align-items:center;margin:14px 0; }.row input { flex:1; } input,textarea { width:100%;border:1px solid var(--line);border-radius:8px;background:#0d0f12;color:var(--text);padding:10px; } textarea { resize:vertical; }.chips { display:flex;gap:7px;flex-wrap:wrap; }.chip { background:#242a20;border:1px solid #3a472c;padding:5px 8px;border-radius:20px; }.chip button { padding:0 3px;background:transparent;color:var(--muted); }.correction { padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted); }.correction b { color:var(--text); }
.correction button { padding:0 6px;background:transparent;color:var(--muted);font-size:17px;line-height:1; }
.correction button:hover { color:var(--danger); }
/* O mapa é a peça que o usuário olha o tempo todo e o cliente acompanha junto. Ele não
   pode ser empurrado para baixo quando chegam perguntas novas, então o painel vira
   uma coluna fixa: cabeçalho, área do mapa que não rola, e só os detalhes rolam. */
.content.diag-layout { overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:14px 18px; }
.diag-workspace { flex:1 1 auto;min-height:380px;display:grid;grid-template-columns:1fr minmax(230px,320px);gap:12px;overflow:hidden; }
.mapa-wrap { position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;background:#0c0e11;overflow:hidden; }
.mapa-barra { display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid var(--line);background:#12151a; }
.mapa-barra button { background:#242830;color:var(--muted);padding:4px 10px;font-size:12px;font-weight:650;border-radius:6px; }
.mapa-barra button.ativa { background:var(--accent);color:#0c1204; }
.mapa-barra .mapa-dica { margin-left:auto;color:#5d646f;font-size:11px; }
.mapa-viewport { flex:1;overflow:hidden;cursor:grab;position:relative; }.mapa-viewport.arrastando { cursor:grabbing; }
.mapa-canvas { position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform; }
.mapa-canvas svg { max-width:none !important;height:auto; }
.mapa-viewport.editando { cursor:default; }
.mapa-canvas .apagar-no { cursor:pointer; }
.mapa-canvas .apagar-no circle { fill:#ff5b66;stroke:#2a1214;stroke-width:1.5; }
.mapa-canvas .apagar-no text { fill:#1a0508;font:700 13px Inter,sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none; }
.mapa-canvas .apagar-no:hover circle { fill:#ff8f97; }
.campo { display:grid;gap:6px;margin:14px 0; }
.campo label { color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:600; }
.dialog-aviso { margin:10px 0 0;color:var(--muted);font-size:13px; }
.secoes-corpo { overflow:auto;padding-right:6px; }
.tabela-rolagem { overflow-x:auto;margin-bottom:10px; }
.tabela-rolagem .sistemas { margin-bottom:0; }
.tabela-rolagem td, .tabela-rolagem th { white-space:normal;min-width:88px; }
.secoes-corpo > h3:first-child { margin-top:0; }
.campo-dica { text-transform:none;letter-spacing:0;font-weight:400;color:#5d646f;margin-left:6px; }
.memoria { flex:0 0 auto;margin:0;border-bottom:1px solid var(--line);background:#12161a; }
.memoria > summary { padding:11px 18px;cursor:pointer;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;list-style:none; }
.memoria > summary::-webkit-details-marker { display:none; }
.memoria > summary::before { content:"▸ ";display:inline-block;transition:transform .15s; }
.memoria[open] > summary::before { content:"▾ "; }
.memoria > summary:hover { background:#161b20; }
.memoria-lista { list-style:none;margin:0;padding:0 18px;display:grid;gap:12px;max-height:38vh;overflow:auto; }
.memoria-lista li { padding-bottom:10px;border-bottom:1px solid var(--line-soft,#1d2026); }
.memoria-lista strong { display:block;margin-top:5px;font-size:15px; }
.memoria-lista blockquote { margin:6px 0 0;padding-left:10px;border-left:2px solid #3a414d;color:#a9b2bd;font-style:italic;font-size:13px; }
.memoria-lista cite { display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:var(--muted); }
.memoria .row { padding:0 18px 14px;margin:12px 0 0; }
.obs-cartao { padding:4px 2px; }
.obs-lista { list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px; }
.obs { border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#15181d; }
.obs-topo { display:flex;align-items:baseline;gap:10px; }
.obs-topo strong { flex:1;font-size:16px;line-height:1.35; }
.obs-tipo { flex:none;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:5px; }
.obs-dor { background:#2a1214;color:#ffb1b7; }
.obs-oportunidade { background:#1c2410;color:#c7f78a; }
.obs-pendencia { background:#2a2410;color:#f0cf9a; }
.obs-aprendizado { background:#152130;color:#9fc4f5; }
.obs-x { flex:none;background:transparent;color:#5d646f;font-size:18px;padding:0 4px;line-height:1; }
.obs-x:hover { color:var(--danger); }
.obs blockquote { margin:9px 0 0;padding-left:11px;border-left:2px solid #3a414d;color:#c8cfda;font-style:italic;cursor:pointer; }
.obs blockquote:hover { border-left-color:var(--accent); }
.obs cite { display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--muted); }
.obs-refugo { margin:12px 0 0;color:#5d646f;font-size:12px; }
.fio-dialog { width:min(920px,calc(100vw - 30px)); }
.fio-tabela { margin-top:6px; }
.fio-linha { cursor:pointer; }
.fio-linha:hover td { background:#1a1e24; }
.fio-linha .fio-num { font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent); }
.fio-provas td { background:#0d0f12;padding:12px 16px; }
.fio-provas blockquote { margin:0 0 10px;padding-left:11px;border-left:2px solid #3a414d;color:#c8cfda;font-style:italic;font-size:13px; }
.fio-provas blockquote:last-child { margin-bottom:0; }
.fio-provas cite { display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--muted); }
.fio-achados { display:grid;gap:12px;margin-top:6px;max-height:52vh;overflow:auto; }
.fio-achado { border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#15181d; }
.fio-achado strong { margin-left:8px;font-size:15px; }
.fio-achado blockquote { margin:8px 0 0;padding-left:11px;border-left:2px solid #3a414d;color:#c8cfda;font-style:italic;font-size:13px; }
.fio-achado cite { display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--muted); }
.obs-custo { margin:6px 0 0;color:#5d646f;font-size:12px;font-variant-numeric:tabular-nums; }
.obs-custo strong { color:var(--accent); }
.segment.piscando { background:#1e2617;border-radius:8px; }
.exportar-opcoes { display:grid;gap:8px;margin-top:14px; }
.exportar-opcoes button { text-align:left;padding:11px 14px;background:#242830;color:var(--text);font-weight:650; }
.exportar-opcoes button:hover { background:#2e333d; }
.exportar-opcoes small { display:block;color:var(--muted);font-weight:400;margin-top:2px; }
.mapa-vazio { position:absolute;inset:0;display:grid;place-items:center;color:#5d646f;font-size:13px;font-style:italic;text-align:center;padding:20px; }
.diag-detalhes { flex:0 0 auto;max-height:110px;overflow:auto; }
.diag-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.diag-titulo { margin:0;font-size:24px;line-height:1.15;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.diag-problema { margin:0;color:var(--muted);font-size:13px;border-left:3px solid var(--line);padding-left:10px;max-height:1.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.perguntas { margin:0;padding:12px 14px;border-radius:11px;background:#1b2113;border:1px solid #3d4d24;overflow:auto; }
.perguntas h3 { margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent); }
.perguntas ol { margin:0;padding-left:20px;display:grid;gap:10px; }
.perguntas li { line-height:1.45; }.pergunta-texto { font-size:16px;font-weight:650; }
.pergunta-motivo { display:block;color:var(--muted);font-size:12px; }
.pergunta-no { display:inline-block;margin-top:3px;padding:1px 6px;border-radius:5px;background:#2b3320;color:#b9cf90;font-size:11px; }
.perguntas ol { gap:8px; }.pergunta-texto { font-size:14px; }
.empty-inline { margin:0;color:#6a7280;font-size:13px;font-style:italic; }
.sistemas { width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px; }
.sistemas th { text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line); }
.sistemas td { padding:7px 8px;border-bottom:1px solid #1d2026;vertical-align:top; }
.api { padding:1px 7px;border-radius:20px;font-size:11px;font-weight:700; }.api-sim { background:#1c2410;color:#c7f78a; }.api-nao { background:#2a1214;color:#ffb1b7; }.api-duvida { background:#2a2410;color:#f0cf9a; }
.pendencias { margin:0;padding-left:20px;display:grid;gap:10px; }.pendencias summary { cursor:pointer;color:var(--muted);font-size:12px;margin-top:4px; }
.email-pronto { margin:8px 0;padding:11px;border-radius:8px;background:#0d0f12;border:1px solid var(--line);white-space:pre-wrap;font-size:12px;color:#c8cfda; }
.email-copiar { padding:5px 10px;font-size:12px; }
.mode-status { flex:1;text-align:right;margin-right:12px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums; }
.raw-state { margin:0;padding:12px;border-radius:8px;background:#0d0f12;border:1px solid var(--line);color:var(--muted);font-size:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-word; }
.diagram-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }.diagram-head strong { font-size:16px; }.diagram-head button { padding:6px 11px;font-size:12px; }
.diagram { overflow-x:auto;padding:6px 0;border-bottom:1px solid var(--line); }.diagram svg { max-width:100%;height:auto; }
.diagram-warning { margin:0 0 10px;padding:8px 11px;border-radius:8px;background:#2a1d10;border:1px solid #5c4320;color:#f0cf9a;font-size:12px; }
.speaker.instruction { color:#e2b8ff; }
.speaker[data-voz] { cursor:pointer;border-bottom:1px dashed transparent; }
.speaker[data-voz]:hover { border-bottom-color:currentColor; }
.instruction-bar { display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#15181d; }.instruction-bar input { flex:1; }.instruction-bar input:disabled,.instruction-bar button:disabled { opacity:.4; }
@media(max-width:800px){ main{grid-template-columns:1fr;height:auto}.splitter{display:none}.diag-workspace{grid-template-columns:1fr;overflow:auto}.content.diag-layout{overflow:auto}.panel{min-height:60vh}header{gap:10px}.brand strong,.secondary{display:none}.segment{grid-template-columns:1fr;gap:2px}}
.mode-falha { margin:0 0 10px;padding:9px 12px;border-radius:9px;background:#2a1d10;border:1px solid #5c4320;color:#f0cf9a;font-size:12px; }
.toggle-audio.ativo { background:#2b3320;color:var(--accent); }

/* ---- tela de entrada ---- */
body.tela-entrada { display:grid;place-items:center;padding:24px;min-height:100vh; }
/* A folha é a mesma do aplicativo, e lá `main` é o grid de duas colunas da reunião.
   Sem desfazer isso aqui, a tela de entrada herda a grade errada e espreme tudo. */
main.entrada { width:min(400px,100%);display:grid;grid-template-columns:1fr;gap:22px;
  justify-items:center;height:auto;background:transparent; }
.entrada .brand { font-size:22px; }
.cartao-entrada { width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 30px 90px #0009; }
.cartao-entrada h1 { margin:0;font-size:22px;letter-spacing:-.02em; }
.cartao-entrada .row { margin-bottom:0; }
.cartao-entrada .row button { flex:1; }
.erro-entrada { margin:4px 0 0;padding:9px 12px;border-radius:9px;background:#2a1214;border:1px solid #5c2328;color:#ffb1b7;font-size:13px; }
/* ---- quem está usando ---- */
.eu { display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px; }
.eu strong { color:var(--text);font-weight:650; }
.eu .papel { padding:2px 7px;border-radius:5px;background:#242830;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.eu button { background:transparent;color:var(--muted);padding:4px 6px;font-size:12px; }
.eu button:hover { color:var(--danger); }