/* ENAPOR Konekta — a conversa (#/conversas/<id>): o balão da pergunta, o cartão «A preparar a resposta» (os passos ao vivo, o
   relógio, a frase do passo em curso), a resposta (o texto, os blocos, as fontes, as sugestões e o rodapé do custo estimado), o
   painel lateral e a caixa da pergunta. Quem a monta é o js/conversa.js; os blocos da resposta desenham-se com a folha dos gráficos
   (css/graficos.css). O texto do agente (o Markdown, .md) também se estiliza aqui. */

/* ---------------------------------------------------------------- o Markdown do agente */

.md { line-height: 1.6; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md table, .md pre, .md blockquote { margin: 0 0 0.65rem; }
.md ul, .md ol { padding-left: 1.3rem; }
.md li + li { margin-top: 0.2rem; }
.md h1, .md h2, .md h3, .md h4 { margin: 0.9rem 0 0.4rem; font-size: var(--t-base); color: var(--texto); }
.md code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--superficie-2); }
.md pre { overflow-x: auto; padding: 0.65rem 0.8rem; border: 1px solid var(--borda); border-radius: var(--raio-peq); background: var(--fundo); }
.md pre code { padding: 0; background: none; }
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.md th, .md td { padding: 0.3rem 0.6rem; border: 1px solid var(--borda); text-align: left; }
.md th { background: var(--superficie-2); font-weight: 650; }
.md blockquote { padding-left: 0.85rem; border-left: 3px solid var(--borda-forte); color: var(--dim); }
.md-simples { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- a grelha: a conversa e o painel */

/* a caixa da pergunta encosta ao fundo do ecrã */
.vista:has(.cv-ecra) { padding-bottom: 0; }

.cv-cab { align-items: center; margin-bottom: 1rem; }
.cv-cab-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; min-width: 0; }
.cv-cab-titulo h1 { margin: 0; font-size: var(--t-m); overflow-wrap: anywhere; }
.cv-filtros { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.cv-filtros .chip { background: var(--superficie); border-color: var(--borda); color: var(--texto); }

.cv-ecra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: 1.5rem; align-items: start; }
.cv-principal { min-width: 0; display: flex; flex-direction: column; min-height: calc(100dvh - var(--faixa) - 6rem); }
.cv-caderno { flex: 1; display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: 0.5rem; }

/* ---------------------------------------------------------------- uma troca: a pergunta e a resposta */

.cv-troca { display: flex; flex-direction: column; gap: 0.9rem; scroll-margin-top: calc(var(--faixa) + 1rem); }
/* a pergunta: o balão marinho, à direita */
.cv-pergunta {
  align-self: flex-end; max-width: min(46rem, 88%); padding: 0.75rem 1.05rem 0.5rem;
  border-radius: 14px; background: var(--marinho); color: #fff;
}
.cv-pergunta p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-pergunta-hora { display: block; margin-top: 0.25rem; text-align: right; color: var(--azul-claro); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* a resposta: o sinal do agente à esquerda, e o cartão */
.cv-resposta { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.cv-agente { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--botao); color: #fff; }
.cv-agente .ico { width: 1.15rem; height: 1.15rem; }
.cv-cartao {
  min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.2rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}

/* «A preparar a resposta»: o título, a pílula dos passos, o relógio e a barra */
.cv-prep-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.cv-prep-cab h2 { margin: 0; font-size: var(--t-base); font-weight: 700; }
.cv-relogio { margin-left: auto; color: var(--dim); font-size: var(--t-peq); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-progresso { position: relative; height: 4px; margin-top: 0.7rem; border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.cv-progresso::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: inherit; background: var(--azul);
  animation: cv-progresso 1.6s var(--curva) infinite;
}
@keyframes cv-progresso { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* os passos: o estado (um círculo), o ícone da ferramenta, o nome e a frase, e o tempo */
.cv-passos { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.cv-passo {
  display: grid; grid-template-columns: 1.3rem 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--borda);
}
.cv-passo:last-child { border-bottom: 0; }
.cv-passo-estado { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px dashed var(--borda-forte); color: #fff; }
.cv-passo-estado .ico { display: none; width: 0.8rem; height: 0.8rem; stroke-width: 2.6; }
.cv-passo[data-estado="a_correr"] .cv-passo-estado { border: 2px solid var(--azul); border-right-color: transparent; animation: btn-rodar 0.8s linear infinite; }
.cv-passo[data-estado="ok"] .cv-passo-estado { border: 0; background: var(--ok); }
.cv-passo[data-estado="erro"] .cv-passo-estado { border: 0; background: var(--erro); }
.cv-passo[data-estado="parado"] .cv-passo-estado { border: 0; background: var(--aviso); }
.cv-passo[data-estado="ok"] .cv-i-ok, .cv-passo[data-estado="erro"] .cv-i-erro { display: block; }
.cv-passo-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--raio-peq); background: var(--superficie-2); color: var(--ativo); }
.cv-passo-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cv-passo-texto strong { font-size: 0.93rem; font-weight: 650; }
.cv-passo-frase { color: var(--dim); font-size: var(--t-peq); overflow-wrap: anywhere; }
.cv-passo-tempo { color: var(--dim); font-size: var(--t-peq); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-passo[data-estado="ok"] .cv-passo-tempo { color: var(--ok); }
.cv-passo[data-estado="erro"] .cv-passo-tempo { color: var(--erro); }

/* a frase do passo em curso (o lugar da «Primeira leitura», quando ela não vem) */
.cv-em-curso {
  margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--azul-claro); border-radius: var(--raio-peq);
  background: var(--superficie-2); color: var(--texto); font-size: var(--t-peq);
}
.cv-leitura-zona { margin-top: 0.6rem; }
/* a resposta pronta: os passos dobram-se num botão */
.cv-prep-feita .cv-alternar { margin-left: -0.6rem; }

/* o corpo da resposta */
.cv-texto:empty, .cv-blocos:empty, .cv-fontes-zona:empty, .cv-seguir:empty { display: none; }
.cv-texto .md { max-width: 75ch; }
.cv-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
/* um número e uma fila de KPI ocupam a largura toda */
.cv-blocos > .cv-numero, .cv-blocos > figure:has(> .cv-kpis) { grid-column: 1 / -1; }
.cv-pe-resposta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.cv-pe-resposta:not(:has(> :not(:empty))) { display: none; }
.cv-seguir { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
/* as sugestões só servem à última resposta */
.cv-troca:not(:last-child) .cv-seguir { display: none; }
.cv-aviso .alerta { margin: 0; }
.cv-aviso .alerta .linha { margin-top: 0.5rem; }
.cv-parada { margin: 0; color: var(--aviso); font-weight: 600; }
.cv-rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin: 0; padding-top: 0.7rem;
  border-top: 1px solid var(--borda); color: var(--dim); font-size: var(--t-peq); font-variant-numeric: tabular-nums;
}
.cv-rodape .btn { margin-left: auto; }

/* a conversa nova, ainda sem perguntas */
.cv-vazio { margin: auto 0; padding: 3rem 1rem; text-align: center; color: var(--dim); }
.cv-vazio .cv-agente { margin: 0 auto; width: 3rem; height: 3rem; border-radius: 14px; }
.cv-vazio h2 { margin: 0.9rem 0 0.4rem; color: var(--texto); font-size: var(--t-g); }
.cv-vazio p { max-width: 36rem; margin: 0 auto; }

/* ---------------------------------------------------------------- a caixa da pergunta */

.cv-tampo-zona {
  position: sticky; bottom: 0; z-index: 10; margin-top: auto; padding: 0.75rem 0 1rem;
  background: linear-gradient(to bottom, rgba(247, 249, 253, 0), var(--fundo) 40%);
}
.cv-tampo {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.65rem 0.8rem 0.6rem 1rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.cv-tampo:focus-within { border-color: var(--acento); outline: 1px solid var(--acento); }
.cv-campo { width: 100%; min-height: 2.5rem; max-height: 40vh; resize: none; padding: 0.35rem 0; border: 0; background: transparent; line-height: 1.45; }
.cv-campo:focus { outline: none; }
.cv-tampo-pe { display: flex; align-items: center; gap: 0.6rem; }
.cv-tampo-pe .proxima-item { flex: 0 1 auto; min-width: 0; }
.cv-extras { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--dim); font-size: var(--t-peq); }
.cv-extras > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cv-tampo-fim { display: inline-flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.cv-contador { color: var(--dim); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.cv-contador[data-nivel="aviso"] { color: var(--aviso); }
.cv-contador[data-nivel="cheio"] { color: var(--erro); }
/* a trabalhar: o botão é o Parar, com o contorno do «a correr» */
.cv-enviar.cv-parar { background: var(--correr-fundo); border-color: var(--azul); color: var(--azul-texto); }

/* ---------------------------------------------------------------- o painel lateral */

.cv-painel {
  position: sticky; top: calc(var(--faixa) + 1rem); display: flex; flex-direction: column; gap: 1.1rem;
  max-height: calc(100dvh - var(--faixa) - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.1rem 1.2rem;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.cv-painel-secao + .cv-painel-secao { padding-top: 1.1rem; border-top: 1px solid var(--borda); }
.cv-painel-secao > h2 { margin: 0; font-size: var(--t-base); font-weight: 700; }
.cv-painel-sub { margin: 0.15rem 0 0.5rem; color: var(--dim); font-size: var(--t-peq); }
.cv-painel-secao > .cv-bloco { margin-top: 0.6rem; }
/* os títulos dos blocos repetiam o da secção */
.cv-painel .cv-calculo > h3, .cv-painel .cv-ficha-cab { display: none; }
.cv-painel .cv-ficha h3 { font-size: var(--t-base); }
.cv-painel-h3 { margin: 1rem 0 0.4rem; color: var(--dim); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }

.cv-agentes { list-style: none; margin: 0; padding: 0; }
.cv-agente-linha {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--borda);
}
.cv-agente-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--raio-peq); background: var(--superficie-2); color: var(--ativo); }
.cv-agente-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cv-agente-nome strong { font-size: 0.93rem; font-weight: 600; }
.cv-agente-estado { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--dim); font-size: 0.78rem; }
.cv-agente-estado .ponto { width: 0.5rem; height: 0.5rem; }
/* o selo da «Próxima fase» fica por cima da lista, e não em cima do primeiro interruptor */
.cv-painel-agentes .proxima { padding-top: 1.8rem; }
.cv-painel-agentes .proxima-selo { top: 0.3rem; right: 0; }
.cv-agentes-nota {
  display: flex; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0.65rem 0.8rem; border-radius: var(--raio-peq);
  background: var(--superficie-2); color: var(--dim); font-size: 0.8rem;
}
.cv-agentes-nota .ico { margin-top: 0.15rem; }

/* o interruptor: um checkbox desenhado como interruptor (nesta fase nenhum se muda: o Exact está sempre incluído) */
.cv-interruptor {
  appearance: none; position: relative; flex: none; width: 2.3rem; height: 1.3rem; margin: 0;
  border: 1px solid var(--borda-forte); border-radius: 999px; background: var(--superficie-3); cursor: not-allowed;
}
.cv-interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(12, 36, 68, 0.3);
}
.cv-interruptor:checked { border-color: var(--botao); background: var(--botao); }
.cv-interruptor:checked::after { transform: translateX(1rem); }

/* ---------------------------------------------------------------- ecrãs mais estreitos */

@media (max-width: 1100px) {
  .cv-ecra { grid-template-columns: minmax(0, 1fr); }
  .cv-painel { position: static; max-height: none; }
}

@media (max-width: 760px) {
  /* a barra de navegação passa para baixo: a caixa da pergunta fica por cima dela */
  .vista:has(.cv-ecra) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  .cv-tampo-zona { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
  .cv-resposta { grid-template-columns: minmax(0, 1fr); }
  .cv-resposta > .cv-agente { display: none; }
  .cv-cartao { padding: 0.85rem 0.9rem; }
  .cv-pergunta { max-width: 94%; }
  .cv-extras > span:not(:first-child) { display: none; }
}