/* Trilha 2RP — chat estilo WhatsApp */

body.chat-pagina {
  background-color: #e5ddd5;
  background-image: linear-gradient(180deg, #d9d0c8 0%, #e5ddd5 6%);
  margin: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--vh-real, 100dvh);
  overflow: hidden;
  overscroll-behavior-y: contain;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  height: 100vh;
  height: 100dvh;
  height: var(--vh-real, 100dvh);
  margin: 0 auto;
  background-color: #e5ddd5;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
}

/* Cabeçalho */
.chat-cabecalho {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  padding-top: calc(0.6rem + env(safe-area-inset-top));
  background-color: #075e54;
  color: #fff;
  flex: 0 0 auto;
}
.chat-botao-topo {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-decoration: none;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.chat-botao-topo:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.chat-botao-topo-ativo {
  background-color: rgba(255, 255, 255, 0.22);
}
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #128c7e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.chat-titulo {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-nome {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.15;
}
.chat-status {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}

/* Corpo */
.chat-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
}

.chat-aviso-inicial {
  align-self: center;
  background-color: #fef8e2;
  color: #6b5a1f;
  font-size: 0.78rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  max-width: 90%;
  text-align: center;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.chat-linha {
  display: flex;
  margin-bottom: 0.4rem;
}
.chat-linha-bot { justify-content: flex-start; }
.chat-linha-usuario { justify-content: flex-end; }

.chat-bolha {
  max-width: 78%;
  padding: 0.45rem 0.65rem 0.4rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  position: relative;
  word-wrap: break-word;
  white-space: pre-line;
}
.chat-bolha-bot {
  background-color: #ffffff;
  color: #111b21;
  border-top-left-radius: 0;
}
.chat-bolha-usuario {
  background-color: #dcf8c6;
  color: #111b21;
  border-top-right-radius: 0;
}
.chat-hora {
  display: block;
  text-align: right;
  font-size: 0.65rem;
  color: #8696a0;
  margin-top: 0.15rem;
}

/* Palavras-chave em destaque dentro das mensagens do bot — azul royal,
   transmite confiança/serenidade e ajuda o cérebro a "escanear" o texto
   mais rápido em vez de ler tudo palavra por palavra. */
.chat-destaque {
  color: #2848b8;
  font-weight: 700;
}
.chat-bolha-usuario .chat-destaque {
  color: #0a3d8f;
}

/* Gráfico "para onde vai o dinheiro" — pizza (conic-gradient) + barras por
   categoria, tudo em CSS puro (sem lib externa, consistente com o resto do
   projeto). Pensado pra ser o momento de impacto visual no fim da Trilha. */
.chat-bolha-grafico {
  max-width: 92%;
  width: 300px;
  border-top-left-radius: 0.5rem;
}
.chat-grafico-titulo {
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0 0 0.6rem 0;
  color: #111b21;
}
.chat-grafico-pizza {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto 0.75rem auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.chat-grafico-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.chat-grafico-legenda li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
}
.chat-grafico-marcador {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.chat-grafico-rotulo {
  flex: 0 0 auto;
  width: 6.4rem;
  color: #3b4a54;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-grafico-barra-fundo {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background-color: #eef0f1;
  overflow: hidden;
}
.chat-grafico-barra-preenchida {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.chat-grafico-valor {
  flex: 0 0 auto;
  width: 2.6rem;
  text-align: right;
  color: #667781;
  font-variant-numeric: tabular-nums;
}

/* Indicador "digitando…" */
.chat-bolha-digitando {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.8rem;
}
.chat-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9aa5ab;
  display: inline-block;
  animation: chat-pulsar 1.2s infinite ease-in-out;
}
.chat-ponto:nth-child(2) { animation-delay: 0.2s; }
.chat-ponto:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-pulsar {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Cartão de login embutido */
.chat-cartao-login {
  max-width: 88%;
  width: 300px;
}

/* Chips de resposta rápida */
.chat-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.9rem 0.6rem 0.9rem;
  justify-content: flex-end;
}
.chat-chip {
  background-color: #ffffff;
  border: 1px solid #128c7e;
  color: #075e54;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.chat-chip:hover {
  background-color: #dcf8c6;
}

/* Rodapé */
.chat-rodape {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  background-color: #f0f0f0;
}
.chat-botao-voltar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background-color: #ffffff;
  color: #54656f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.chat-botao-voltar:disabled {
  opacity: 0.35;
}
.chat-form-input {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.chat-botao-microfone {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background-color: #ffffff;
  color: #54656f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.chat-botao-microfone-ativo {
  background-color: #e94b4b;
  color: #fff;
  animation: chat-microfone-pulsar 1.4s infinite ease-in-out;
}
@keyframes chat-microfone-pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 75, 75, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(233, 75, 75, 0); }
}
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  outline: none;
}
/* Some Android/Chrome builds render number-input spinner arrows that eat
   into the available width inside the flex row — hide them, a numeric
   keyboard is already forced via inputmode/step on the field itself. */
.chat-input::-webkit-outer-spin-button,
.chat-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.chat-input[type="number"] {
  -moz-appearance: textfield;
}
.chat-botao-enviar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background-color: #128c7e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-botao-enviar:hover {
  background-color: #075e54;
}
.chat-rodape-dica {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.8rem;
  color: #667781;
  padding: 0.35rem 0;
}

.chat-fim-espaco {
  height: 0.25rem;
  flex: 0 0 auto;
}

@media (max-width: 576px) {
  .chat-shell { box-shadow: none; }

  /* Alvos de toque maiores em telas pequenas (mínimo recomendado ~44px) */
  .chat-botao-topo { width: 40px; height: 40px; }
  .chat-botao-voltar,
  .chat-botao-enviar,
  .chat-botao-microfone { width: 44px; height: 44px; }
  .chat-chip { padding: 0.45rem 1rem; font-size: 0.85rem; }

  .chat-bolha { max-width: 86%; }
  .chat-cartao-login { width: 100%; max-width: 100%; }

  .chat-corpo { padding: 0.75rem 0.6rem; }
  .chat-chips { padding: 0 0.6rem 0.6rem 0.6rem; }
  .chat-rodape { padding: 0.45rem 0.5rem; padding-bottom: calc(0.45rem + env(safe-area-inset-bottom)); gap: 0.35rem; }
  .chat-form-input { gap: 0.3rem; }
}

/* Telas bem estreitas (a maioria dos celulares de entrada) — com o botão de
   voltar + microfone + enviar todos visíveis ao mesmo tempo, aperta um
   pouco mais os alvos de toque e os espaçamentos pra garantir que nada
   escape da largura da tela. */
@media (max-width: 360px) {
  .chat-botao-voltar,
  .chat-botao-enviar,
  .chat-botao-microfone { width: 40px; height: 40px; min-width: 40px; }
  .chat-rodape { padding-left: 0.35rem; padding-right: 0.35rem; gap: 0.3rem; }
  .chat-form-input { gap: 0.25rem; }
  .chat-input { padding: 0.55rem 0.7rem; }
}

/* Evita zoom automático do iOS Safari ao focar em inputs (mantém <16px só acima deste breakpoint) */
@media (min-width: 577px) {
  .chat-input { font-size: 0.92rem; }
}