/* cartao-grupo.css — o cartão com várias perguntas de uma vez (js/cartao-grupo.js) e a bolha de AÇÃO
   (js/acoes.js), 07/10/2026. Vale para a nova jornada (v3 e v5). As duas peles: a de sempre (style.css) e o
   visual aprovado (visual-a.css, `html[data-visual-a~="chat"]`). */

/* ---------- o cartão em grupo ---------- */
.escolha-step.escolha-grupo { gap: 0; }
.escolha-grupo .escolha-q { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 14px; }
.escolha-grupo .escolha-q + .escolha-q { border-top: 1px solid var(--border); padding-top: 14px; }
.escolha-grupo .escolha-prog { display: flex; align-items: center; gap: 6px; }
.escolha-grupo .escolha-q.respondida .escolha-prog::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* a resposta marcada fica marcada (uma por pergunta) */
.escolha-grupo .escolha-opt.marcada { border-color: var(--accent); background: var(--accent-soft); }
.escolha-grupo .escolha-extra.marcada { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.escolha-grupo .escolha-outro { padding-right: 12px; }
.escolha-grupo-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.escolha-grupo-falta { font-size: 13px; color: var(--text-dim); }
.escolha-grupo-enviar {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--navy); font: inherit; font-size: 15px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.escolha-grupo-enviar:hover { background: var(--accent-hover, var(--accent)); }
.escolha-grupo-enviar:disabled { background: var(--bg-input); color: var(--text-xdim); cursor: default; }
.escolha-grupo-enviar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html[data-visual-a~="chat"] .escolha-grupo .escolha-q + .escolha-q { border-top-color: var(--va-azul-linha); padding-top: 16px; }
html[data-visual-a~="chat"] .escolha-grupo .escolha-q { padding-bottom: 16px; }
html[data-visual-a~="chat"] .escolha-grupo .escolha-prog { margin-bottom: 6px; color: var(--va-dim); }
html[data-visual-a~="chat"] .escolha-grupo .escolha-q.respondida .escolha-prog::after { background: var(--va-gold); }
html[data-visual-a~="chat"] .escolha-grupo .escolha-q-label { margin-bottom: 8px; }
html[data-visual-a~="chat"] .escolha-grupo .escolha-opt.marcada { background: var(--va-azul); color: #fff; }
html[data-visual-a~="chat"] .escolha-grupo .escolha-opt.marcada .va-check { visibility: visible; color: var(--va-gold); }
html[data-visual-a~="chat"] .escolha-grupo .escolha-opt.marcada .escolha-opt-desc { color: rgba(255, 255, 255, 0.78); }
html[data-visual-a~="chat"] .escolha-grupo .escolha-extra.marcada { background: var(--va-azul-10); color: var(--va-azul-texto); }
html[data-visual-a~="chat"] .escolha-grupo .escolha-outro { padding-right: 16px; }
html[data-visual-a~="chat"] .escolha-grupo-rodape { padding-top: 14px; border-top-color: var(--va-azul-linha); }
html[data-visual-a~="chat"] .escolha-grupo-falta { font-size: 14px; color: var(--va-dim); }
html[data-visual-a~="chat"] .escolha-grupo-enviar {
  min-height: 48px; padding: 0 24px; border-radius: 14px;
  background: var(--va-azul); color: #fff; font-size: 16px; font-weight: 500;
}
html[data-visual-a~="chat"] .escolha-grupo-enviar:hover { background: var(--va-azul); filter: brightness(1.08); }
html[data-visual-a~="chat"] .escolha-grupo-enviar:disabled { background: var(--va-azul-06); color: var(--va-dim); filter: none; }

/* ---------- a bolha de ação (o botão que mandou um prompt) ---------- */
.bubble.user.bubble-acao {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; font-weight: 500; letter-spacing: .01em;
}
.bubble.user.bubble-acao svg { width: 16px; height: 16px; stroke-width: 1.8; opacity: .85; flex: none; }
html[data-visual-a~="chat"] .bubble.user.bubble-acao { gap: 10px; }
html[data-visual-a~="chat"] .bubble.user.bubble-acao svg { width: 18px; height: 18px; opacity: .9; }

/* ---------- (21/10/2026, painel, E4) a validação do painel: o cartão do "checkout" do A validar ----------
   A mesma bolha de ação (ícone + rótulo), aberta em bloco como a resposta ao cartão (.bubble-respostas): uma linha
   por decisão, com o ícone da decisão, o rótulo apagado (Confirmei · Não é · Corrigi…), o texto do item e, embaixo,
   o que ela escreveu. js/acoes.js (montarValidacao), só com a chave `consolidacao`. */
.bubble.user.bubble-acao.bubble-validacao { display: block; padding: 10px 16px 12px; text-align: left; white-space: normal; max-width: min(100%, 560px); }
.bubble-validacao .val-cab { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--text-dim, #5b6472); }
.bubble-validacao .val-cab svg { width: 16px; height: 16px; stroke-width: 1.8; opacity: .85; flex: none; }
.bubble-validacao .val-cab .bubble-acao-rotulo { flex: 1; min-width: 0; }
.bubble-validacao .val-n {
  flex: none; min-width: 20px; padding: 0 7px; border-radius: 999px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 600; background: rgba(21, 40, 72, .08); color: #33476b;
}
.bubble-validacao .val-lista { list-style: none; margin: 0; padding: 0; }
.bubble-validacao .val-it { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; line-height: 1.45; font-weight: 400; letter-spacing: 0; }
.bubble-validacao .val-it + .val-it { border-top: 1px solid rgba(10, 22, 40, .08); }
.bubble-validacao .val-it > svg { flex: none; width: 16px; height: 16px; margin-top: 3px; stroke-width: 2; opacity: 1; color: var(--accent, #152848); }
.bubble-validacao .val-it.nao > svg { color: #b42318; }
.bubble-validacao .val-it.confirmar > svg { color: #1f7a4d; }
.bubble-validacao .val-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bubble-validacao .val-rot { font-size: 12px; font-weight: 500; color: var(--text-dim, #5b6472); }
.bubble-validacao .val-sobre { color: var(--text, #0a1628); }
.bubble-validacao .val-nota { font-style: normal; font-weight: 600; color: var(--text, #0a1628); }
.bubble-validacao .val-it.corrigir .val-nota::before, .bubble-validacao .val-it.responder .val-nota::before, .bubble-validacao .val-it.ajustar .val-nota::before { content: "→ "; font-weight: 400; color: var(--text-dim, #5b6472); }
html[data-visual-a~="chat"] .bubble.user.bubble-acao.bubble-validacao { padding: 10px 18px 12px; }
html[data-visual-a~="chat"] .bubble-validacao .val-cab, html[data-visual-a~="chat"] .bubble-validacao .val-rot { color: var(--va-dim); }
html[data-visual-a~="chat"] .bubble-validacao .val-n { background: var(--va-azul-10); color: var(--va-azul-texto); }
html[data-visual-a~="chat"] .bubble-validacao .val-sobre, html[data-visual-a~="chat"] .bubble-validacao .val-nota { color: var(--va-ink); }
html[data-visual-a~="chat"] .bubble-validacao .val-it + .val-it { border-top-color: var(--va-azul-linha); }
html[data-visual-a~="chat"] .bubble-validacao .val-it > svg { color: var(--va-azul); }
html[data-visual-a~="chat"] .bubble-validacao .val-it.nao > svg { color: #b42318; }
html[data-visual-a~="chat"] .bubble-validacao .val-it.confirmar > svg { color: #1f7a4d; }
/* (AUD-E4 R2) o turno falhou antes da resposta: o cartão não pode parecer enviado */
.bubble-validacao.nao-enviado { opacity: .72; }
.bubble-validacao .val-nao-enviado { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; font-weight: 500; color: #7a2e0e; background: rgba(180, 35, 24, .08); }
@media (max-width: 768px) { .bubble.user.bubble-acao.bubble-validacao { max-width: 100%; } }

/* ---------- o carrossel (v7, 09/10/2026, C1): uma pergunta por vez no computador e no celular ---------- */
.escolha-carrossel .escolha-prog { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 4px; }
.escolha-carrossel .escolha-prog-txt { flex: 1; }
.escolha-carrossel .escolha-voltar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -6px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-dim); cursor: pointer;
}
.escolha-carrossel .escolha-voltar:hover { background: var(--bg-input); color: var(--text); }
.escolha-carrossel .escolha-voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.escolha-carrossel .escolha-voltar svg { width: 18px; height: 18px; }
.escolha-carrossel .escolha-pontos { display: inline-flex; gap: 5px; }
.escolha-carrossel .escolha-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .2s ease, width .2s ease; }
.escolha-carrossel .escolha-ponto.feito { background: var(--accent); }
.escolha-carrossel .escolha-ponto.atual { width: 16px; border-radius: 3px; background: var(--text-dim); }
.escolha-carrossel .escolha-opt.escolhida { border-color: var(--accent); background: var(--accent-soft); }
.escolha-carrossel.escolha-entra-frente > * { animation: escolha-entra-frente .18s ease-out; }
.escolha-carrossel.escolha-entra-tras > * { animation: escolha-entra-tras .18s ease-out; }
@keyframes escolha-entra-frente { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes escolha-entra-tras { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .escolha-carrossel.escolha-entra-frente > *, .escolha-carrossel.escolha-entra-tras > * { animation: none; }
}

html[data-visual-a~="chat"] .escolha-carrossel .escolha-prog { color: var(--va-dim); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-voltar { color: var(--va-dim); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-voltar:hover { background: var(--va-azul-06); color: var(--va-ink); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-ponto { background: var(--va-azul-linha); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-ponto.feito { background: var(--va-gold); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-ponto.atual { background: var(--va-azul); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-opt.escolhida { background: var(--va-azul); color: #fff; }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-opt.escolhida .va-check { visibility: visible; color: var(--va-gold); }
html[data-visual-a~="chat"] .escolha-carrossel .escolha-opt.escolhida .escolha-opt-desc { color: rgba(255, 255, 255, 0.78); }

/* ---------- avisos do chat com × (v7, 09/10/2026): todo aviso fecha (js/chat.js, botaoFecharAviso) ---------- */
.chat-toast.chat-toast-fechavel { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 18px; max-width: calc(100% - 32px); }
.chat-toast.chat-toast-fechavel > span { overflow: hidden; text-overflow: ellipsis; }
.chat-toast-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, 0.78); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.chat-toast-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.chat-toast-x:focus-visible { outline: 2px solid #e8d6a6; outline-offset: 1px; }

/* ---------- a resposta ao cartão no chat: PERGUNTA → RESPOSTA (10/10/2026, F4, pedido do Rafa) ----------
   A bolha dela vira um bloco compacto: o título (recolhível quando há mais de uma), uma linha por pergunta, a pergunta
   apagada e a resposta em destaque; "Ainda não sei"/"Pular por agora" em itálico, como lacuna. js/chat.js
   (montarRespostasDoCartao). */
.bubble.user.bubble-respostas { display: block; padding: 10px 16px 12px; text-align: left; white-space: normal; }
.bubble-respostas .resp-titulo {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; margin: 0 0 4px; padding: 0;
  border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--text-dim, #5b6472); text-align: left;
}
button.resp-titulo { cursor: pointer; }
button.resp-titulo:focus-visible { outline: 2px solid var(--accent, #152848); outline-offset: 2px; border-radius: 6px; }
.bubble-respostas .resp-titulo-txt { flex: 1; min-width: 0; }
.bubble-respostas .resp-n {
  flex: none; min-width: 20px; padding: 0 7px; border-radius: 999px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 600; background: rgba(21, 40, 72, .08); color: #33476b;
}
.bubble-respostas .resp-chevron {
  flex: none; width: 7px; height: 7px; margin: 0 4px 3px 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.bubble-respostas .resp-titulo[aria-expanded="false"] .resp-chevron { transform: rotate(-45deg); margin-bottom: 0; }
.bubble-respostas .resp-lista { list-style: none; margin: 0; padding: 0; }
.bubble-respostas .resp-lista[hidden] { display: none; }
.bubble-respostas .resp-linha { padding: 6px 0; line-height: 1.45; }
.bubble-respostas .resp-linha + .resp-linha { border-top: 1px solid rgba(10, 22, 40, .08); }
.bubble-respostas .resp-q { color: var(--text-dim, #5b6472); }
.bubble-respostas .resp-seta { margin: 0 6px; color: var(--text-dim, #5b6472); }
.bubble-respostas .resp-r { color: var(--text, #0a1628); font-weight: 600; }
.bubble-respostas .resp-vazia .resp-r { font-weight: 400; font-style: italic; color: var(--text-dim, #5b6472); }
html[data-visual-a~="chat"] .bubble.user.bubble-respostas { padding: 10px 18px 12px; }
html[data-visual-a~="chat"] .bubble-respostas .resp-titulo { color: var(--va-dim); }
html[data-visual-a~="chat"] .bubble-respostas .resp-n { background: var(--va-azul-10); color: var(--va-azul-texto); }
html[data-visual-a~="chat"] .bubble-respostas .resp-q,
html[data-visual-a~="chat"] .bubble-respostas .resp-seta,
html[data-visual-a~="chat"] .bubble-respostas .resp-vazia .resp-r { color: var(--va-dim); }
html[data-visual-a~="chat"] .bubble-respostas .resp-r { color: var(--va-ink); }
html[data-visual-a~="chat"] .bubble-respostas .resp-linha + .resp-linha { border-top-color: var(--va-azul-linha); }
@media (max-width: 768px) {
  /* alvo de toque: o título recolhível ganha altura sem engordar a bolha (margem negativa) */
  .bubble-respostas button.resp-titulo { min-height: 44px; margin: -8px 0 -4px; }
  .bubble-respostas .resp-linha { font-size: 15px; }
}