/**
 * Chat — a moldura genérica reaproveitável e a gaveta das Conversas.
 *
 * `.chat` é a casca (fio rolável, indicador de "pensando" com três pontos,
 * formulário de envio) que qualquer conversa do painel monta em cima. O que é
 * do Sr. Spent mora em sr_spent.css, carregado logo depois — a divisão segue a
 * ordem da cascata original, então nenhuma regra trocou de vizinho.
 *
 * O rodapé de envio é uma peça só, cortada ao meio na diagonal: a caixa de
 * texto termina em bisel e o botão começa no bisel espelhado, encaixando por
 * uma margem negativa de 18px. É a mesma junção dos dois CTAs da landing — e é
 * por isso que os dois clip-path têm de mudar JUNTOS: mexer em um sem o outro
 * abre uma fresta ou sobrepõe o texto. O bisel do botão vive em sr_spent.css.
 *
 * `.chat__alvo` é o realce de quem chegou ali por navegação (o histórico por
 * data leva o fio até uma mensagem e pisca nela por um instante).
 *
 * Fecha o arquivo a gaveta das Conversas, que expande sob a linha da pessoa em
 * vez de abrir modal.
 */

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
}

.chat__fio {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  min-height: 200px;
  max-height: min(62vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--e2);
}

.chat__pensando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
}

.chat__ponto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tinta-3);
  animation: chat-pulsar 1.2s ease-in-out infinite;
}
.chat__ponto:nth-child(2) { animation-delay: .15s; }
.chat__ponto:nth-child(3) { animation-delay: .3s; }

@keyframes chat-pulsar {
  0%, 100% { opacity: .25; transform: scale(.65); }
  50%      { opacity: 1;   transform: scale(1); }
}

.chat__forma {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: var(--e3);
  border: 2px solid var(--marca-tinta);
  box-shadow: 5px 5px 0 var(--marca-amarelo);
  background: var(--sup-cartao);
  transition: box-shadow var(--transicao);
}

.chat__forma:focus-within { box-shadow: 5px 5px 0 var(--marca-azul); }

.chat__entrada {
  flex: 1;
  min-width: 0;
  padding: 12px calc(var(--e5) + 18px) 12px var(--e4);
  margin-right: -18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  font: inherit;
  font-size: var(--t-apoio);
  line-height: 1.45;
  color: var(--tinta-1);
  resize: none;
}

.chat__entrada::placeholder {
  color: var(--tinta-3);
  font-style: italic;
}

.chat__entrada:focus-visible,
.chat__entrada:focus { outline: none; }