/* ==========================================================================================
   Ajuda — conversa sobre a documentação e as perguntas que ela não respondeu.

   Nenhum valor literal: cor, espaço, raio, sombra e duração vêm de design-system.css. Um número
   escrito aqui é um número que a próxima mudança de tema não alcança.
   ========================================================================================== */

.wms-chat {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
  min-height: 0;
}

/* Histórico à esquerda, conversa à direita. Empilha no estreito com o histórico primeiro: quem
   chega pelo celular escolhe a conversa antes de ler qualquer coisa. */
.wms-chat__corpo {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: var(--gap-secao);
  align-items: start;
}

@media (max-width: 60rem) {
  .wms-chat__corpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------------------------------
   Histórico
   ------------------------------------------------------------------------------------------ */

.wms-chat__historico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  background: var(--cor-fundo-superficie);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-3);
}

.wms-chat__nova {
  width: 100%;
}

.wms-chat__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-chat__historico-item {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  width: 100%;
  box-sizing: border-box;
  text-align: start;
  padding: var(--espaco-2) var(--espaco-3);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  /* É `<a>`, e não botão: cada conversa tem endereço próprio. O sublinhado sai porque o item já se
     desenha como linha de lista selecionável — o realce de foco continua vindo do design system. */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), box-shadow var(--transicao);
}

.wms-chat__historico-item:hover {
  background: var(--cor-fundo-sutil);
}

.wms-chat__historico-item--atual {
  background: var(--barra-ativo-fundo);
  font-weight: var(--fonte-peso-medio);
}

.wms-chat__historico-titulo {
  font-size: var(--fonte-tam-md);
  /* Duas linhas e corta: título de conversa é a primeira pergunta, e ela varia de três palavras a
     um parágrafo. Sem o corte, uma conversa comprida empurra a lista inteira. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wms-chat__historico-data {
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-tenue);
  font-variant-numeric: tabular-nums;
}

.wms-chat__aviso {
  margin: 0;
  padding: var(--espaco-3);
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* ------------------------------------------------------------------------------------------
   Conversa
   ------------------------------------------------------------------------------------------ */

.wms-chat__painel {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  background: var(--cor-fundo-superficie);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-4);
  min-height: 24rem;
}

.wms-chat__falas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  flex: 1 1 auto;
}

.wms-chat__fala {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  max-width: 46rem;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-lg);
  animation: wms-chat-entrada var(--transicao-media) both;
}

/* A pergunta encosta à direita e a resposta à esquerda, que é a convenção que dispensa legenda:
   ninguém precisa ler um rótulo para saber quem falou. */
.wms-chat__fala--pergunta {
  align-self: flex-end;
  background: var(--cor-primaria-100);
  color: var(--cor-texto);
}

.wms-chat__fala--resposta {
  align-self: flex-start;
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto);
}

.wms-chat__texto {
  font-size: var(--fonte-tam-lg);
  line-height: 1.55;
  white-space: pre-wrap;
  /* Texto do modelo pode trazer caminho, endereço ou campo concatenado sem espaço. Sem isto, um
     deles ultrapassa a largura da fala e a página inteira ganha barra de rolagem lateral — mesmo
     tratamento de `.wms-doc-leitura__corpo` e `.wms-auditoria__valor`. */
  overflow-wrap: anywhere;
}

/* Cursor pulsante enquanto o texto chega. Sem ele, uma pausa do modelo entre duas frases é
   indistinguível do fim da resposta. */
.wms-chat__cursor {
  display: inline-block;
  width: var(--espaco-2);
  height: 1.1em;
  margin-inline-start: var(--espaco-1);
  vertical-align: text-bottom;
  background: var(--cor-primaria-500);
  border-radius: var(--raio-sm);
  animation: wms-chat-pulso var(--cadencia-pulso) steps(2, start) infinite;
}

/* ------------------------------------------------------------------------------------------
   Fontes da resposta
   ------------------------------------------------------------------------------------------ */

.wms-chat__fontes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-bottom: var(--espaco-2);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-chat__fontes-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wms-chat__fontes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.wms-chat__fonte {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-superficie);
  border: var(--borda-largura) solid var(--cor-borda);
  color: var(--cor-primaria-700);
  font-size: var(--fonte-tam-sm);
  text-decoration: none;
  transition: background-color var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.wms-chat__fonte:hover {
  background: var(--cor-primaria-050);
  border-color: var(--cor-primaria-300);
  box-shadow: var(--sombra-1);
}

.wms-chat__fonte-icone {
  font-size: var(--fonte-tam-md);
}

/* ------------------------------------------------------------------------------------------
   Convite e envio
   ------------------------------------------------------------------------------------------ */

.wms-chat__convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);
  text-align: center;
  padding: var(--espaco-6) var(--espaco-4);
  color: var(--cor-texto-secundario);
}

.wms-chat__convite-icone {
  font-size: var(--fonte-tam-3xl);
  color: var(--cor-primaria-300);
}

.wms-chat__convite-texto {
  margin: 0;
  max-width: 32rem;
  font-size: var(--fonte-tam-md);
}

/* Alinhado pela base: o campo do Radzen reserva espaço no topo para o rótulo flutuante, então
   centralizar deixaria o botão acima da linha do campo. Mesma razão de `.wms-doc__busca`. */
.wms-chat__envio {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
  padding-top: var(--espaco-3);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-chat__envio .rz-form-field {
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------------------------------------
   Perguntas sem resposta
   ------------------------------------------------------------------------------------------ */

.wms-lacunas {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-lacunas__filtro {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
}

.wms-lacunas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.wms-lacunas__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  background: var(--cor-fundo-superficie);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--espaco-3) var(--espaco-4);
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

.wms-lacunas__item:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--cor-borda-forte);
}

/* A contagem é o que ordena a leitura: quem escaneia a lista procura o número maior, não o texto. */
.wms-lacunas__contagem {
  flex: 0 0 auto;
  min-width: 2.5rem;
  text-align: center;
  padding: var(--espaco-1) var(--espaco-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-700);
  font-weight: var(--fonte-peso-medio);
  font-variant-numeric: tabular-nums;
}

.wms-lacunas__conteudo {
  flex: 1 1 auto;
  min-width: 0;
}

.wms-lacunas__pergunta {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  color: var(--cor-texto);
  /* Pergunta é texto livre de até 500 caracteres, colado por quem opera. Mesma razão do texto da
     resposta: sem quebra, um trecho sem espaço rola a página de lado. */
  overflow-wrap: anywhere;
}

.wms-lacunas__data {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-tenue);
}

.wms-lacunas__total {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

@media (max-width: 48rem) {
  .wms-lacunas__item {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------------------------------------------------
   Movimento
   ------------------------------------------------------------------------------------------ */

@keyframes wms-chat-entrada {
  from {
    opacity: 0;
    transform: translateY(var(--espaco-2));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wms-chat-pulso {
  to {
    opacity: 0;
  }
}

/* Quem pediu menos movimento recebe menos movimento — inclusive o cursor, que pisca sem parar e é
   justamente o tipo de animação que incomoda quem desligou. */
@media (prefers-reduced-motion: reduce) {
  .wms-chat__fala,
  .wms-chat__cursor {
    animation: none;
  }

  .wms-chat__cursor {
    opacity: 1;
  }
}