/* ====================================================================
   web/css/simulacao.css — o simulador integrado (fatia 1, 07/10/2026):
   o PREPARO (js/simulacao-preparo.js: mini chat no Painel de apoio, ou numa
   folha própria enquanto o Painel não oferece o contêiner) e o CHAT DO
   ENSAIO (js/simulacao-chat.js: paralelo ao chat oficial, por cima dele).

   Só estrutura e o vocabulário visual da direção A (o do cockpit): fonte do
   sistema; escala 12 · 13 · 14 · 15 · 17; azul = ação e o que ela sabe;
   dourado = hipótese; hairline; raios 8 · 12 · 14. A pele final da página do
   simulador é da frente Ecossistema.
   ==================================================================== */

.simp, .simc, .simp-folha {
  --sm-ink: var(--va-ink, #0a1628);
  --sm-ink2: #5b6472;
  --sm-ink3: #8b929c;
  --sm-hair: rgba(0, 0, 0, .08);
  --sm-hair2: rgba(0, 0, 0, .14);
  --sm-bg: #fff;
  --sm-bg2: #f5f5f7;
  --sm-azul: var(--va-azul, #152848);
  --sm-azul-soft: #eef2f8;
  --sm-hip: #8a6405;
  --sm-hip-soft: #fbf4e3;
  --sm-ease: cubic-bezier(.23, 1, .32, 1);
  font-family: var(--va-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  color: var(--sm-ink);
}

/* ── o preparo ─────────────────────────────────────────────────────── */
.simp { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--sm-bg); }
.simp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--sm-hair); }
.simp-cab strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.simp .simp-cab button.simp-fechar { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--sm-ink2); font-size: 22px; line-height: 1; cursor: pointer; }
.simp .simp-cab button.simp-fechar:hover { background: var(--sm-bg2); }
.simp-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
/* (#76, 10/10) o `overscroll-behavior: contain` só vale onde o .simp-corpo rola de fato (a folha própria, de altura
   fixa). No Painel o contêiner não tem altura própria: o .simp-corpo cresce com o conteúdo, nunca rola, e com o
   `contain` ele prendia o gesto (dedo e roda do mouse) sem passar a rolagem ao corpo do painel — "não faz scroll". */
.simp-folha .simp-corpo { overscroll-behavior: contain; }
/* no Painel quem rola é o corpo do painel; o pé ("Começar o ensaio") gruda no fim da tela, à vista sem rolar.
   O `sticky` conta a partir do padding do rolador: o -56px desconta o padding de baixo do .ck-corpo (cockpit.css). */
.fe-sim-alvo .simp-pe { position: sticky; bottom: calc(-56px - env(safe-area-inset-bottom, 0px)); z-index: 2; margin: 0 -16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.simp-msg { display: flex; }
.simp-eu { justify-content: flex-end; }
.simp-bolha { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; background: var(--sm-bg2); }
.simp-ring .simp-bolha { border-bottom-left-radius: 6px; }
.simp-eu .simp-bolha { background: var(--sm-azul); color: #fff; border-bottom-right-radius: 6px; }
.simp-perfil { color: var(--sm-hip); font-size: 13px; }
.simp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.simp .simp-corpo button.simp-chip { min-height: 36px; padding: 6px 12px; border: 1px solid var(--sm-hair2); border-radius: 999px; background: var(--sm-bg); color: var(--sm-ink); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s var(--sm-ease), border-color .15s var(--sm-ease); }
.simp .simp-corpo button.simp-chip:hover { border-color: var(--sm-azul); }
.simp .simp-corpo button.simp-chip:active { transform: scale(.98); }
.simp .simp-corpo button.simp-chip.simp-padrao { border-color: var(--sm-azul); color: var(--sm-azul); font-weight: 600; }
/* (08/10) a negociação já fechou: o acordo, os combinados e a escolha do que ensaiar */
.simp-combinados { margin: 6px 0 4px; padding-left: 18px; font-size: 13px; }
.simp-acordo p { margin: 8px 0 0; }
.simp .simp-corpo button.simp-link { border: 0; padding: 0; background: none; color: var(--sm-azul); font: inherit; text-decoration: underline; cursor: pointer; }
.simp .simp-corpo button.simp-chip:focus-visible, .simp.simp button.simp-btn:focus-visible, .simp .simp-dif button.simp-seg:focus-visible, .simp .simp-col button.simp-x:focus-visible { outline: 2px solid var(--sm-azul); outline-offset: 2px; }

.simp-quadro { border: 1px solid var(--sm-hair); border-radius: 12px; background: var(--sm-bg); }
.simp-quadro > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.simp-quadro > summary::-webkit-details-marker { display: none; }
.simp-quadro > summary i { font-style: normal; color: var(--sm-ink3); transition: transform .2s var(--sm-ease); }
.simp-quadro[open] > summary i { transform: rotate(90deg); }
.simp-col { padding: 4px 12px 10px; border-top: 1px solid var(--sm-hair); }
.simp-col h4 { margin: 8px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sm-ink2); }
.simp-sabe h4 { color: var(--sm-azul); }
.simp-hip h4 { color: var(--sm-hip); }
.simp-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.simp-col li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: start; font-size: 13px; line-height: 1.45; }
.simp-col li.simp-fora span { text-decoration: line-through; color: var(--sm-ink3); }
.simp-hip li { padding-left: 8px; border-left: 2px solid var(--sm-hip-soft); }
.simp-efeito { grid-column: 1; font-style: normal; font-size: 12px; color: var(--sm-hip); }
.simp .simp-col button.simp-x { grid-row: 1; grid-column: 2; min-height: 28px; padding: 2px 8px; border: 1px solid var(--sm-hair2); border-radius: 8px; background: var(--sm-bg); color: var(--sm-ink2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.simp-vazio { color: var(--sm-ink3); }
.simp-nota { margin: 6px 0 0; font-size: 12px; color: var(--sm-ink3); }
.simp-comp { display: block; padding: 10px 12px 12px; border-top: 1px solid var(--sm-hair); font-size: 13px; }
.simp-comp small { color: var(--sm-ink3); }
.simp-comp textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--sm-hair2); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }

.simp-dif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 10px; background: var(--sm-bg2); }
.simp .simp-dif button.simp-seg { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--sm-ink2); font: inherit; font-size: 13px; cursor: pointer; }
.simp .simp-dif button.simp-seg[aria-checked="true"] { background: var(--sm-bg); color: var(--sm-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.simp-dif-efeito { margin: -2px 2px 0; font-size: 12px; line-height: 1.45; color: var(--sm-ink2); }

.simp-pe { padding: 10px 16px 14px; border-top: 1px solid var(--sm-hair); display: flex; flex-direction: column; gap: 8px; background: var(--sm-bg); }
.simp-progresso { margin: 0; font-size: 12px; color: var(--sm-ink2); text-align: center; }
.simp.simp button.simp-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--sm-hair2); border-radius: 12px; background: var(--sm-bg); color: var(--sm-ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.simp.simp button.simp-btn.simp-pri { background: var(--sm-azul); border-color: var(--sm-azul); color: #fff; }
.simp.simp button.simp-btn:disabled { opacity: .45; cursor: default; }
.simp-carregando, .simp-erro { padding: 24px 16px; font-size: 14px; color: var(--sm-ink2); display: flex; align-items: center; gap: 10px; }
.simp-erro { flex-direction: column; align-items: stretch; }
.simp-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--sm-azul); animation: simpPulso 1s ease-in-out infinite alternate; }
@keyframes simpPulso { from { opacity: .3; } to { opacity: 1; } }

/* a folha própria (fallback, até o Painel oferecer o contêiner) */
.simp-folha { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: flex-end; background: rgba(10, 22, 40, .18); }
.simp-folha-caixa { width: min(440px, 100%); height: 100%; box-shadow: -8px 0 32px rgba(10, 22, 40, .14); animation: simpEntra .28s var(--sm-ease); }
@keyframes simpEntra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .simp-folha-caixa { width: 100%; } }

/* ── o chat do ensaio, paralelo ao chat oficial ─────────────────────── */
#tab-chat { position: relative; }
.simc { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; min-height: 0; background: var(--sm-bg); }
.simc[hidden] { display: none; }
.simc-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--sm-hair); }
.simc-selo { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.simc-tag { padding: 3px 8px; border-radius: 999px; background: var(--sm-hip-soft); color: var(--sm-hip); font-size: 12px; font-weight: 600; }
.simc-quem { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simc-dif { color: var(--sm-ink2); white-space: nowrap; }
.simc-dif::before { content: "· "; }
.simc-voltar { min-height: 36px; padding: 0 12px; border: 1px solid var(--sm-hair2); border-radius: 10px; background: var(--sm-bg); color: var(--sm-ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
/* (08/10) "Encerrar ensaio" ao lado do "Voltar": a saída clara do ensaio, sem depender de pedir por texto */
.simc-cab-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.simc-encerrar { min-height: 36px; padding: 0 12px; border: 1px solid var(--sm-azul); border-radius: 10px; background: var(--sm-azul); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.simc-encerrar:disabled { opacity: .6; cursor: default; }
.simc-encerrar[hidden] { display: none; }
.simc-aviso { margin: 0; padding: 8px 16px; font-size: 12px; color: var(--sm-ink2); background: var(--sm-bg2); }
.simc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; }
.simc .sim-user .sim-bubble { background: var(--sm-azul); }
.simc .sim-assistant .sim-bubble { background: var(--sm-bg2); border: 0; }
.simc-fim { max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 12px 16px; border-top: 1px solid var(--sm-hair); font-size: 14px; line-height: 1.5; max-height: 45%; overflow-y: auto; }
.simc-fim p { margin: 0 0 6px; }
.simc-fim-tit { font-weight: 600; font-size: 15px; }
.simc-fim-sub, .simc-doc { color: var(--sm-ink2); font-size: 13px; }
.simc-doc span { color: var(--sm-ink); }
.simc-rev-tit { margin-top: 8px !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sm-hip); }
.simc-rev { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.simc-como { color: var(--sm-ink3); font-size: 12px; }
.simc-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.simc-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--sm-hair2); border-radius: 12px; background: var(--sm-bg); color: var(--sm-ink); font: inherit; font-size: 14px; cursor: pointer; }
.simc-btn.simc-pri { background: var(--sm-azul); border-color: var(--sm-azul); color: #fff; }
.simc-gerando { display: flex; align-items: center; gap: 10px; color: var(--sm-ink2); font-size: 13px; }
.simc-spin { width: 16px; height: 16px; border: 2px solid var(--sm-azul-soft); border-top-color: var(--sm-azul); border-radius: 50%; animation: simcGira .8s linear infinite; }
@keyframes simcGira { to { transform: rotate(360deg); } }
.simc-composer { display: flex; align-items: flex-end; gap: 8px; max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 10px 16px 14px; }
.simc-input { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--sm-hair2); border-radius: 22px; font: inherit; font-size: 15px; resize: none; box-sizing: border-box; }
.simc-input:focus { outline: none; border-color: var(--sm-azul); }
.simc-enviar { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--sm-azul); color: #fff; display: grid; place-items: center; cursor: pointer; }
.simc-enviar:disabled { opacity: .45; }
.simc-pilula { position: absolute; z-index: 25; top: 10px; left: 50%; transform: translateX(-50%); min-height: 36px; padding: 0 14px; border: 1px solid var(--sm-hip); border-radius: 999px; background: var(--sm-hip-soft, #fbf4e3); color: var(--sm-hip, #8a6405); font: 600 13px var(--va-font, system-ui, sans-serif); cursor: pointer; box-shadow: 0 2px 10px rgba(10, 22, 40, .10); }
.simc-pilula[hidden] { display: none; }
.simc-md { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--sm-bg); }
.simc-md-cab { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--sm-hair); font-size: 15px; }
.simc-md-x { min-height: 36px; border: 0; background: transparent; color: var(--sm-azul); font: inherit; font-size: 14px; cursor: pointer; }
.simc-md-corpo { flex: 1; overflow-y: auto; padding: 16px; max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; font-size: 14px; line-height: 1.55; }
.simc button:focus-visible, .simc-pilula:focus-visible { outline: 2px solid var(--sm-azul); outline-offset: 2px; }
@media (max-width: 600px) {
  .simc-cab { padding: 8px 12px; }
  .simc-log, .simc-composer, .simc-fim { padding-left: 12px; padding-right: 12px; }
  .simc-voltar, .simc-encerrar { padding: 0 10px; }
  .simc-cab-acoes { gap: 6px; }
  .simc-dif { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .simp-folha-caixa, .simp-ponto, .simc-spin { animation: none; }
}

/* ── (08/10, simulador · UX) nunca tela parada ──────────────────────────
   · o "digitando" diz quem está do outro lado (e o mentor, no FIM);
   · o "Começar" mostra a ficha sendo preparada, com o tempo que falta;
   · o cartão do fim mostra o relatório sendo escrito: barra com o progresso
     REAL (seções prontas), esqueleto até o resumo chegar, o resumo entrando;
   · a página de Relatórios (js/relatorio.js) usa o mesmo vocabulário (.relp-*). */
.sim-typing-rotulo { margin-left: 8px; font-style: normal; font-size: 13px; color: var(--sm-ink2, #5b6472); white-space: nowrap; }

.simp.simp button.simp-btn.simp-esperando { position: relative; overflow: hidden; opacity: 1; display: flex; align-items: center; justify-content: center; background: var(--sm-azul); }
.simp-espera-txt { position: relative; z-index: 1; font-size: 14px; font-variant-numeric: tabular-nums; }
.simp-espera-barra { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .7); border-radius: 0 2px 2px 0; transition: width .5s linear; }

.simc-rel { margin: 10px 0 4px; padding: 12px; border: 1px solid var(--sm-hair); border-radius: 12px; background: var(--sm-bg); }
.simc-rel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.simc-rel-tit { font-size: 13px; font-weight: 600; }
.simc-rel-etapa { font-size: 12px; color: var(--sm-ink2); font-variant-numeric: tabular-nums; text-align: right; }
.simc-barra, .relp-barra { height: 4px; border-radius: 999px; background: var(--sm-azul-soft, #eef2f8); overflow: hidden; }
.simc-barra i, .relp-barra i { display: block; height: 100%; border-radius: inherit; background: var(--sm-azul, #152848); transition: width .6s var(--sm-ease, ease-out); }
.simc-esqueleto, .relp-esqueleto { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.simc-esqueleto i, .relp-esqueleto i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%); background-size: 200% 100%; animation: simcBrilho 1.4s ease-in-out infinite; }
.simc-esqueleto i:nth-child(1), .relp-esqueleto i:nth-child(1) { width: 38%; }
.simc-esqueleto i:nth-child(2), .relp-esqueleto i:nth-child(2) { width: 92%; }
.simc-esqueleto i:nth-child(3), .relp-esqueleto i:nth-child(3) { width: 76%; }
@keyframes simcBrilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.simc-resumo, .relp-resumo { margin-top: 12px; font-size: 13px; line-height: 1.5; animation: simcEntra .32s var(--sm-ease, ease-out); }
.simc-resumo p, .relp-resumo p { margin: 0 0 4px; }
.simc-nota, .relp-nota { font-size: 17px !important; font-weight: 600; letter-spacing: -.01em; }
@keyframes simcEntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.simc-pilula.simc-pilula-pronto { border-color: var(--sm-azul, #152848); background: var(--sm-azul, #152848); color: #fff; animation: simcEntra .32s var(--sm-ease, ease-out); }

/* a página de Relatórios: o progresso real no lugar do "gerando…" parado */
.relp { max-width: 520px; margin: 48px auto; padding: 0 20px; color: #0a1628; font-size: 14px; }
.relp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.relp-tit { font-size: 15px; font-weight: 600; }
.relp-etapa { font-size: 12.5px; color: #5b6472; font-variant-numeric: tabular-nums; }
.relp-sub { margin: 12px 0 0; font-size: 12.5px; color: #8b929c; }

@media (prefers-reduced-motion: reduce) {
  .simc-esqueleto i, .relp-esqueleto i, .simc-resumo, .relp-resumo, .simc-pilula.simc-pilula-pronto { animation: none; }
  .simc-barra i, .relp-barra i, .simp-espera-barra { transition: none; }
}

/* Conclusão UX8: resultado em primeiro plano; a conversa continua consultável. */
.simc-concluida .simc-composer[hidden], .simc-concluida .simc-chips[hidden] { display: none; }
.simc-conclusao { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 20px; box-sizing: border-box; }
.simc-conclusao .simc-fim { max-width: 680px; padding: 0; border: 0; max-height: none; overflow: visible; }
.simc-conclusao .simc-fim-tit { margin: 0 0 8px; font-size: 25px; line-height: 1.25; font-family: inherit; }
.simc-conclusao .simc-fim-sub { font-size: 14px; margin-bottom: 20px; }
.simc-conclusao .simc-rel { margin-bottom: 20px; }
.simc-conclusao .simc-rel-cab { align-items: flex-start; flex-wrap: wrap; }
.simc-destaques { display: grid; gap: 14px; margin: 20px 0 24px; }
.simc-destaques p { padding-left: 14px; border-left: 3px solid var(--sm-hair2); overflow-wrap: anywhere; }
.simc-destaques b, .simc-destaques span { display: block; }
.simc-destaques b { font-size: 12px; color: var(--sm-ink2); margin-bottom: 3px; }
.simc-acoes-principais { gap: 10px; }
.simc-acoes-principais .simc-btn { min-height: 46px; padding: 10px 18px; }
.simc-btn:disabled { opacity: .55; cursor: default; }
.simc-acoes-secundarias { margin-top: 14px; gap: 8px 18px; }
.simc-acoes-secundarias .simc-btn { border: 0; padding: 4px 0; background: transparent; color: var(--sm-ink2); min-height: 40px; text-align: left; }
.simc-conclusao .simc-aviso-salvar { padding: 12px; border-radius: 10px; background: var(--sm-hip-soft, #fbf4e3); margin-bottom: 16px; }
.simc-pdf-status { min-height: 1.5em; color: var(--sm-ink2); font-size: 13px; margin-top: 8px !important; }
.simc-historico { max-width: 680px; margin: 20px auto 0; border-top: 1px solid var(--sm-hair); }
.simc-historico summary { cursor: pointer; font-size: 14px; padding: 16px 0; color: var(--sm-ink2); }
.simc-premissas summary { cursor: pointer; font-size: 13px; padding: 12px 0; color: var(--sm-ink2); }
.simc-historico .simc-log { padding: 12px 0; overflow: visible; }
@media (max-width: 600px) {
  .simc-conclusao { padding: 22px 16px; }
  .simc-conclusao .simc-fim-tit { font-size: 23px; }
  .simc-acoes-principais .simc-btn { flex: 1 1 110px; }
}

/* Fecho: leitura no tempo da pessoa; relatório pode preparar em segundo plano. */
.simc-lendo-fim .simc-composer, .simc-lendo-fim .simc-chips, .simc-lendo-fim .simc-fim { display: none; }
.simc-passagem { flex: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--sm-hair); }
.simc-passagem p { flex: 1 1 220px; margin: 0; font-size: 14px; color: var(--sm-ink2); }
.simc-passagem .simc-btn { min-height: 44px; }
.simc-pilula { display: flex; align-items: center; padding: 0 2px 0 10px; max-width: calc(100% - 24px); box-sizing: border-box; cursor: default; }
.simc-pilula button { min-height: 44px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.simc-pilula-retomar { min-width: 0; padding: 6px 4px; overflow-wrap: anywhere; }
.simc-pilula-fechar { flex: none; width: 44px; padding: 0; font-size: 22px !important; border-radius: 50%; }
.simc-pilula button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 12px; }