/* ============================================================
   CHATS KTALOGU — casa propria

   O modulo abre em aba separada e nao herda a casca do sistema: aqui nao ha
   cartao, nao ha sombra flutuando, nao ha titulo repetido. Tres colunas fixas,
   a conversa ocupando a tela inteira, do jeito que um aplicativo de mensagem
   ocupa.

   As cores sao as da casa (violeta forte, neutros levemente violaceos), mas as
   classes sao proprias: nada aqui depende do design system das telas de gestao.
   ============================================================ */

/*
  A paleta do modulo.

  Fora daqui o sistema e violeta. Aqui dentro a leitura precisa ser "isto e uma
  conversa", e conversa no Brasil tem cor: verde. O trilho e o verde escuro, o
  balao de quem atende e o verde claro (com tinta escura, que e o que se le
  bem), e o violeta da marca fica so na carinha — misturar os dois em botao e
  balao era o que deixava a tela incoerente.
*/
.chat-app {
  --fio-fundo: #e6e0d8;
  /* Balao de quem atende: verde claro, tinta escura. */
  --fio-minha: #d6f5cd;
  --fio-minha-tinta: #10321a;
  --fio-dele: #ffffff;
  /* Verde de acao: botao de enviar, aba escolhida, link. */
  --acao: #0f8c7a;
  --acao-suave: #e3f4f0;
  --rail: #075e54;
  --rail-ativo: #0f8c7a;
  --linha: #e6e6f2;
  --tinta: #1a1a2b;
  --tinta-fraca: #6f6f8e;
  --tinta-apagada: #9494b0;

  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 76px 340px minmax(0, 1fr) 320px;
  /* Altura da tela de verdade: no celular a barra de endereco entra e sai, e
     100vh mente sobre o espaco disponivel. */
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  color: var(--tinta);
  overflow: hidden;
}

/*
  Coluna que rola por dentro, e nao por fora.

  Sem `min-height: 0` a coluna do meio cresce com a conversa: uma imagem grande
  empurrava o campo de escrever para fora da tela e nao havia como responder.
  E o classico do grid/flex — o filho so encolhe se o pai permitir.
*/
.chat-app > * {
  min-width: 0;
  min-height: 0;
}

/* ---------- Trilho ---------- */

.chat-rail {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0 12px;
  background: var(--rail);
  color: #ffffff;
}

/* A carinha da casa, a mesma do menu recolhido do sistema. O simbolo e colorido
   no arquivo; aqui ele vira branco, como no menu. */
.chat-rail-marca {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 14px;
}

.chat-rail-marca img {
  height: auto;
  width: 60%;
  filter: brightness(0) invert(1);
}

/* Nos estados vazios do meio, o fundo e claro: ali a carinha aparece na cor da
   marca, e nao branca. */
.chat-fio .chat-rail-marca {
  background: #e3f1ee;
}

.chat-fio .chat-rail-marca img {
  filter: none;
}

.chat-rail-item {
  position: relative;
  display: flex;
  width: 56px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 0 7px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-rail-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.chat-rail-item[data-ativo="sim"] {
  background: var(--rail-ativo);
  color: #ffffff;
}

.chat-rail-bolha {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f0526e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ---------- Pé do trilho ----------
   A engrenagem, a volta para o sistema e o rosto de quem está logado. O rosto
   fica por último, encostado embaixo, como em qualquer aplicativo: é a resposta
   para "quem está falando por mim?". */

.chat-rail-pe {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
}

.chat-rail-icone {
  display: flex;
  height: 38px;
  width: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-rail-icone:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.chat-eu {
  position: relative;
  display: flex;
  height: 34px;
  width: 34px;
  margin-top: 6px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  cursor: default;
}

.chat-eu img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* O nome só aparece no repouso do mouse: o trilho é estreito, e o rosto já
   basta para reconhecer. */
.chat-eu-ficha {
  position: absolute;
  left: calc(100% + 10px);
  bottom: 0;
  z-index: 40;
  display: none;
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 11px;
  background: #10241f;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.chat-eu:hover .chat-eu-ficha {
  display: block;
}

.chat-eu-ficha strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

.chat-eu-ficha em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Lista ---------- */

.chat-lista {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--linha);
  background: #ffffff;
}

.chat-lista-topo {
  flex: 0 0 auto;
  padding: 18px 18px 12px;
}

.chat-lista-titulo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.chat-lista-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.chat-busca {
  position: relative;
  margin-top: 12px;
}

.chat-busca svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-apagada);
}

.chat-busca input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: #f7f7fc;
  font-size: 13px;
  color: var(--tinta);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chat-busca input:focus {
  border-color: #7fc9bb;
  background: #ffffff;
}

.chat-lista-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}

.chat-item {
  display: flex;
  width: 100%;
  gap: 11px;
  padding: 11px 18px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.chat-item:hover {
  background: #f7f7fc;
}

.chat-item[data-ativo="sim"] {
  border-left-color: var(--acao);
  background: var(--acao-suave);
}

.chat-avatar {
  position: relative;
  display: flex;
  height: 42px;
  width: 42px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: #eeeef7;
  color: #565672;
  font-size: 13px;
  font-weight: 700;
}

.chat-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-item-corpo {
  min-width: 0;
  flex: 1;
}

.chat-item-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-item-nome {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-hora {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tinta-apagada);
}

.chat-item-previa {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.chat-item-previa span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item[data-naolidas="sim"] .chat-item-previa span {
  color: var(--tinta);
  font-weight: 600;
}

.chat-bolha {
  display: inline-flex;
  height: 19px;
  min-width: 19px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acao);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
}

.chat-vazio {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* ---------- Fio ---------- */

.chat-fio {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--fio-fundo);
}

.chat-fio-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--linha);
  background: #ffffff;
}

.chat-fio-nome {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-fio-detalhe {
  margin-top: 1px;
  overflow: hidden;
  font-size: 12px;
  color: var(--tinta-fraca);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-fio-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-icone {
  display: inline-flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.chat-icone:hover {
  background: #f1f0f7;
  color: var(--tinta);
}

.chat-mensagens {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 26px 8px;
  /* Papel de parede: a carinha da casa em tamanhos e inclinacoes diferentes, de
     leve, para a conversa nao flutuar no vazio branco — a mesma ideia da trama
     do WhatsApp, com a nossa figurinha. */
  background-image: url("/chats-fundo.svg");
  background-size: 360px 360px;
}

.chat-dia {
  margin: 14px 0;
  text-align: center;
}

.chat-dia span {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.chat-linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.chat-linha[data-junto="sim"] {
  margin-top: 2px;
}

.chat-linha[data-minha="sim"] {
  justify-content: flex-end;
}

.chat-linha-avatar {
  width: 26px;
  flex-shrink: 0;
}

.chat-linha-avatar span {
  display: flex;
  height: 26px;
  width: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  color: #565672;
}

.chat-balao {
  position: relative;
  max-width: min(560px, 72%);
  padding: 8px 11px 6px;
  border-radius: 16px;
  background: var(--fio-dele);
  box-shadow: 0 1px 1px rgba(26, 26, 43, 0.09);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}

.chat-linha[data-minha="sim"] .chat-balao {
  background: var(--fio-minha);
  color: var(--fio-minha-tinta);
}

.chat-linha[data-minha="sim"][data-fecha="sim"] .chat-balao {
  border-bottom-right-radius: 6px;
}

.chat-linha[data-minha="nao"][data-fecha="sim"] .chat-balao {
  border-bottom-left-radius: 6px;
}

.chat-balao p {
  white-space: pre-wrap;
}

.chat-balao a.chat-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-balao-apagada {
  font-style: italic;
  opacity: 0.65;
}

.chat-anexo-imagem {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.chat-anexo-imagem img {
  display: block;
  max-height: 300px;
  width: 100%;
  border-radius: 11px;
  object-fit: cover;
}

.chat-anexo-arquivo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(26, 26, 43, 0.06);
  font-size: 12.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.chat-linha[data-minha="sim"] .chat-anexo-arquivo {
  background: rgba(16, 50, 26, 0.08);
}

.chat-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}

.chat-selo[data-arte="pending"] {
  background: #fef1e1;
  color: #b76a10;
}

.chat-selo[data-arte="approved"] {
  background: #e0f8f1;
  color: #0b8f66;
}

.chat-selo[data-arte="rejected"] {
  background: #fee9ec;
  color: #c22d47;
}

.chat-rodape-balao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 10.5px;
  opacity: 0.72;
}

.chat-lida {
  color: #14c78d;
}

.chat-linha[data-minha="sim"] .chat-lida {
  color: #0b8f66;
}

.chat-menu-abrir {
  position: absolute;
  top: 4px;
  right: -28px;
  display: none;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
}

.chat-linha[data-minha="sim"] .chat-menu-abrir {
  right: auto;
  left: -28px;
}

.chat-balao:hover .chat-menu-abrir {
  display: flex;
}

.chat-menu-abrir:hover {
  background: #ffffff;
}

.chat-menu {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 20;
  width: 190px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(26, 26, 43, 0.16);
}

.chat-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: #c22d47;
  text-align: left;
  cursor: pointer;
}

.chat-menu button:hover {
  background: #fee9ec;
}

/* ---------- Escrever ---------- */

.chat-escrever {
  flex: 0 0 auto;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--linha);
  background: #ffffff;
}

.chat-anexo-preview {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  background: #f4f0fe;
  font-size: 12px;
}

.chat-anexo-preview label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--acao);
  cursor: pointer;
}

.chat-caixa {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 5px 6px 5px 4px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.chat-caixa:focus-within {
  border-color: #7fc9bb;
}

.chat-caixa textarea {
  min-height: 36px;
  max-height: 132px;
  flex: 1;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta);
  outline: none;
  resize: none;
}

.chat-enviar {
  display: inline-flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  background: var(--acao);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.chat-enviar:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.chat-enviar:not(:disabled):active {
  transform: scale(0.95);
}

.chat-erro {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #c22d47;
}

/* ---------- Contexto ---------- */

.chat-contexto {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--linha);
  background: #ffffff;
}

.chat-contexto-capa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--linha);
  text-align: center;
}

.chat-contexto-capa .chat-avatar {
  height: 66px;
  width: 66px;
  border-radius: 22px;
  font-size: 20px;
}

.chat-secao {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
}

.chat-secao-titulo {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

.chat-dado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
}

.chat-dado dt {
  color: var(--tinta-fraca);
}

.chat-dado dd {
  font-weight: 700;
  text-align: right;
}

.chat-arquivos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chat-arquivos a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: #f1f0f7;
}

.chat-arquivos img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-link-item {
  display: block;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--acao);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-botao-linha {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.chat-botao-linha:hover {
  color: var(--acao);
}

/* ---------- Foto aberta ---------- */

.chat-foto {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(12, 8, 24, 0.86);
  backdrop-filter: blur(3px);
}

.chat-foto img {
  max-height: 88vh;
  max-width: 92vw;
  border-radius: 10px;
  object-fit: contain;
}

.chat-foto-fechar {
  position: absolute;
  top: 20px;
  right: 22px;
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
}

.chat-foto-fechar:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ---------- Convite para ligar os avisos ---------- */

.chat-convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #f4f0fe;
  font-size: 12px;
  color: #3f3f58;
}

.chat-convite > svg {
  flex-shrink: 0;
  color: var(--acao);
}

.chat-convite > span {
  flex: 1;
  min-width: 120px;
  line-height: 1.35;
}

.chat-convite button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
}

.chat-convite-ligar {
  height: 28px;
  padding: 0 11px;
  background: var(--acao) !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
}

.chat-convite-erro {
  width: 100%;
  color: #c22d47;
}

.chat-girando {
  animation: chat-girar 1s linear infinite;
}

@keyframes chat-girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Mensagem a caminho ---------- */

.chat-balao[data-pendente="sim"] {
  opacity: 0.72;
}

/* ---------- Chave do atendimento na loja ----------
   Bolinha vermelha parada quando esta fora do ar; verde pulsando quando tem
   gente atendendo. E a mesma leitura que o cliente ve na loja. */

.chat-chave {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.chat-chave > svg {
  flex-shrink: 0;
}

.chat-chave-texto {
  flex: 1;
  min-width: 0;
}

.chat-chave-texto strong {
  display: block;
  font-size: 12.5px;
  color: var(--tinta);
}

.chat-chave-botao {
  position: relative;
  display: inline-flex;
  height: 26px;
  width: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: #efeff6;
  cursor: pointer;
  transition: background 0.16s ease;
}

.chat-chave-botao[data-online="sim"] {
  justify-content: flex-end;
  background: #e0f8f1;
}

.chat-chave-botao:disabled {
  cursor: wait;
  opacity: 0.7;
}

.chat-chave-bolinha {
  display: block;
  height: 18px;
  width: 18px;
  border-radius: 999px;
  background: #f0526e;
  box-shadow: 0 1px 2px rgba(26, 26, 43, 0.2);
}

.chat-chave-botao[data-online="sim"] .chat-chave-bolinha {
  background: #14c78d;
  animation: chat-pulsar 1.6s ease-in-out infinite;
}

@keyframes chat-pulsar {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(20, 199, 141, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(20, 199, 141, 0);
  }
}

/* ---------- Aviso de outra conversa ----------
   Chega no canto, como em qualquer aplicativo de mensagem: quem esta no meio
   de uma conversa fica sabendo da outra sem perder o lugar. */

.chat-avisos {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 36px);
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(26, 26, 43, 0.18);
  text-align: left;
  cursor: pointer;
  animation: chat-aviso-entra 0.22s ease;
}

.chat-aviso:hover {
  border-color: #7fc9bb;
}

.chat-aviso-quem {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-aviso-texto {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes chat-aviso-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-aviso {
    animation: none;
  }

  .chat-chave-botao[data-online="sim"] .chat-chave-bolinha {
    animation: none;
  }
}


/* ---------- Abertas e encerradas ---------- */

.chat-filtro {
  display: inline-flex;
  margin-top: 10px;
  padding: 3px;
  border-radius: 10px;
  background: #f1f0f7;
}

.chat-filtro button {
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.chat-filtro button[data-ativo="sim"] {
  background: #ffffff;
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(26, 26, 43, 0.12);
}

.chat-selo-encerrada {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 7px;
  background: #eeeef7;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta-fraca);
  vertical-align: middle;
}

/* Quantas vezes o visitante voltou: quem volta esta interessado. */
.chat-marca-visitas {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fef1e1;
  font-size: 10.5px;
  font-weight: 700;
  color: #b76a10;
}


/* ---------- Pergunta de sim ou nao ----------
   O alerta do navegador trava a pagina, mostra o endereco do sistema e nao
   deixa explicar nada. Aqui cabe o motivo, e o botao perigoso tem cara de
   perigoso. */

.chat-decisao {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(12, 8, 24, 0.42);
  backdrop-filter: blur(2px);
  animation: chat-decisao-fundo 0.16s ease;
}

.chat-decisao-caixa {
  width: min(400px, 100%);
  padding: 20px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(26, 26, 43, 0.28);
  animation: chat-decisao-entra 0.18s ease;
}

.chat-decisao-titulo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.chat-decisao-texto {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.chat-decisao-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.chat-decisao-cancelar,
.chat-decisao-confirmar {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, opacity 0.14s ease;
}

.chat-decisao-cancelar {
  background: #f1f0f7;
  color: var(--tinta-fraca);
}

.chat-decisao-cancelar:hover {
  background: #e6e6f2;
  color: var(--tinta);
}

.chat-decisao-confirmar {
  background: var(--acao);
  color: #ffffff;
}

.chat-decisao-confirmar[data-tom="perigo"] {
  background: #e13a58;
}

.chat-decisao-confirmar:hover {
  opacity: 0.9;
}

@keyframes chat-decisao-fundo {
  from {
    opacity: 0;
  }
}

@keyframes chat-decisao-entra {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-decisao,
  .chat-decisao-caixa {
    animation: none;
  }
}


/* ---------- Quem esta na loja agora ----------
   O ponto verde e o mesmo do atendimento: presenca se le pela cor antes de se
   ler pelo texto. */

.chat-ponto-vivo {
  position: absolute;
  right: 2px;
  bottom: 2px;
  height: 9px;
  width: 9px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #14c78d;
  animation: chat-pulsar 1.8s ease-in-out infinite;
}

.chat-rail-bolha[data-tom="vivo"] {
  background: #14c78d;
}

/* ---------- Conversas e Visitantes ----------
   Duas perguntas sobre a mesma pessoa: quem esta esperando resposta e quem esta
   na loja agora. Lado a lado, porque a graca e passar de uma para a outra. */

.chat-subabas {
  display: flex;
  margin-top: 12px;
  gap: 2px;
  border-bottom: 1px solid var(--linha);
}

.chat-subabas button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 2px 9px;
  margin-right: 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.chat-subabas button:hover {
  color: var(--tinta);
}

.chat-subabas button[data-ativo="sim"] {
  border-bottom-color: var(--acao);
  color: var(--tinta);
}

.chat-subaba-bolha {
  display: inline-flex;
  height: 17px;
  min-width: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--acao);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.chat-subaba-bolha[data-tom="vivo"] {
  background: #14c78d;
}

/* ---------- Placar do dia ----------
   Entraram, falaram, compraram. Se esses tres numeros nao andam juntos, o
   atendimento da loja online esta em algum lugar entre inutil e caro. */

.chat-placar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: #fbfaff;
}

.chat-placar div {
  padding: 9px 6px;
  text-align: center;
}

.chat-placar div + div {
  border-left: 1px solid var(--linha);
}

.chat-placar strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.chat-placar span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

/* A foto do produto entra no lugar do avatar: a lista vira a vitrine. */
.chat-avatar[data-vitrine="sim"] {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--linha);
}

/* Quem ainda não tem rosto: bonequinho, e não iniciais de um nome que não
   existe. */
.chat-avatar[data-boneco="sim"] {
  background: #eceef3;
  color: #97a0b3;
}

/* A miniatura do produto vive na linha do que ele está olhando, e não no lugar
   da pessoa — são duas informações diferentes. */
.chat-mini-produto {
  display: inline-flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--linha);
}

.chat-mini-produto img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-fogo {
  display: inline-flex;
  margin-left: 5px;
  color: #e8590c;
  vertical-align: middle;
}

.chat-marca-carrinho {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e0f8f1;
  font-size: 10.5px;
  font-weight: 700;
  color: #0b8f66;
}

/* ---------- O que ele esta vendo ----------
   Nao e um formulario com os dados da visita: e a peca, do tamanho que se olha
   uma peca, com o preco que ele esta vendo na tela agora. */

.chat-vitrine {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(26, 26, 43, 0.09);
}

.chat-vitrine-foto {
  position: relative;
  display: flex;
  height: 104px;
  width: 104px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f0fe;
  color: #8b7bd8;
}

.chat-vitrine-foto img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-vitrine-vivo {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(20, 199, 141, 0.95);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}

.chat-vitrine-corpo {
  min-width: 0;
}

.chat-vitrine-nome {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.chat-vitrine-preco {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--acao);
}

.chat-vitrine-caminho {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--tinta-fraca);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-vitrine-marca {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef1e1;
  font-size: 11px;
  font-weight: 700;
  color: #b76a10;
}

.chat-vitrine-carrinho {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0b8f66;
}

/* ---------- Termometro ----------
   Sem porcentagem inventada: o selo diz o quanto, e a frase ao lado diz por
   que. E o porque que a pessoa usa na frase seguinte. */

.chat-leitura {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(26, 26, 43, 0.08);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.chat-leitura strong {
  color: var(--tinta);
}

.chat-leitura[data-tom="quente"] {
  background: #fff4ec;
  color: #8a4b12;
}

.chat-leitura[data-tom="quente"] > svg,
.chat-leitura[data-tom="quente"] strong {
  color: #e8590c;
}

.chat-leitura[data-tom="morno"] > svg {
  color: #b76a10;
}

.chat-leitura[data-tom="frio"] > svg {
  color: var(--tinta-apagada);
}

.chat-selo-temperatura {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 7px;
  background: #eeeef7;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta-fraca);
  vertical-align: middle;
}

.chat-selo-temperatura[data-tom="quente"] {
  background: #ffe8d8;
  color: #b3450a;
}

.chat-selo-temperatura[data-tom="morno"] {
  background: #fef1e1;
  color: #b76a10;
}

/* ---------- Primeiras frases ----------
   O que trava quem atende e a primeira frase. Tres prontas, escritas sobre o
   que a pessoa esta olhando, e o campo continua livre para escrever melhor. */

.chat-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.chat-sugestoes button {
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  color: var(--tinta-fraca);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.chat-sugestoes button:hover {
  border-color: #7fc9bb;
  color: var(--tinta);
}

/* ---------- Funil dentro da conversa ---------- */

.chat-estagios {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-estagios button {
  padding: 5px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.chat-estagios button:hover {
  border-color: #7fc9bb;
}

.chat-estagios button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.chat-estagios button[data-ativo="sim"] {
  border-color: transparent;
  background: var(--acao);
  color: #ffffff;
}

.chat-estagios button[data-ativo="sim"][data-estagio="fechado"] {
  background: #0b8f66;
}

.chat-estagios button[data-ativo="sim"][data-estagio="perdido"] {
  background: #9494b0;
}

/* ---------- A rota percorrida ----------
   Uma linha do tempo de verdade: fio vertical, hora a direita e a peca com
   foto quando o passo e um produto. E o que responde "por que ele esta
   perguntando isso?" antes de a resposta ser escrita. */

.chat-rota {
  position: relative;
  margin: 4px 0 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.chat-rota::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 10px;
  width: 1px;
  background: var(--linha);
}

.chat-rota-passo {
  position: relative;
  padding: 0 0 14px;
}

.chat-rota-ponto {
  position: absolute;
  left: -22px;
  top: 0;
  display: flex;
  height: 17px;
  width: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eeeef7;
  color: #6f6f8e;
}

.chat-rota-passo[data-tipo="carrinho"] .chat-rota-ponto,
.chat-rota-passo[data-tipo="compra"] .chat-rota-ponto {
  background: #e0f8f1;
  color: #0b8f66;
}

.chat-rota-passo[data-tipo="mensagem"] .chat-rota-ponto {
  background: #f4f0fe;
  color: var(--acao);
}

.chat-rota-passo[data-tipo="checkout"] .chat-rota-ponto {
  background: #fef1e1;
  color: #b76a10;
}

.chat-rota-corpo {
  min-width: 0;
}

.chat-rota-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-rota-titulo {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-rota-hora {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--tinta-apagada);
}

.chat-rota-detalhe {
  margin-top: 1px;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-rota-produto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 5px;
  border-radius: 10px;
  background: #f7f7fc;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acao);
}

.chat-rota-produto img {
  height: 34px;
  width: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.chat-rota-vazio {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

/* ---------- Ações rápidas (a barra "/") ----------
   Abre para cima, encostada no campo de escrever, como em qualquer aplicativo
   de mensagem. Nunca cobre a última mensagem por muito tempo: escolheu, fechou. */

.chat-caixa-area {
  position: relative;
}

.chat-atalhos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(26, 26, 43, 0.18);
  animation: chat-atalhos-entra 0.14s ease;
}

@keyframes chat-atalhos-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.chat-atalhos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--linha);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

.chat-atalhos-topo button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--acao);
  cursor: pointer;
}

.chat-atalhos-dica {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.chat-atalhos-lista {
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
}

.chat-atalhos-lista button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-atalhos-lista button[data-escolhido="sim"] {
  background: #f4f0fe;
}

.chat-atalho-icone {
  display: flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #f1f0f7;
  color: var(--acao);
}

.chat-atalho-foto {
  display: flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f1f0f7;
  color: var(--tinta-fraca);
}

.chat-atalho-foto img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.chat-atalho-corpo {
  min-width: 0;
  flex: 1;
}

.chat-atalho-nome {
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-atalho-nome em {
  flex-shrink: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: var(--acao);
}

.chat-atalho-dica {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-atalhos-vazio,
.chat-atalhos-rodape {
  padding: 14px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.chat-atalhos-rodape {
  border-top: 1px solid var(--linha);
  background: #fbfaff;
  padding: 9px 13px;
  font-size: 11.5px;
}

/* O comando escolhido vira etiqueta dentro do campo: a pessoa sabe que o que
   está digitando é busca, e não mensagem. */
.chat-comando-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  flex-shrink: 0;
  padding: 3px 4px 3px 9px;
  border-radius: 999px;
  background: #f4f0fe;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acao);
}

.chat-comando-chip button {
  display: inline-flex;
  height: 16px;
  width: 16px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(95, 49, 214, 0.14);
  color: var(--acao);
  cursor: pointer;
}

.chat-icone[data-ativo="sim"] {
  background: #f4f0fe;
  color: var(--acao);
}

/* ---------- Emojis ---------- */

.chat-emojis {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(322px, 100%);
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(26, 26, 43, 0.18);
}

.chat-emojis-busca {
  padding: 9px 10px 6px;
}

.chat-emojis-busca input {
  width: 100%;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #f7f7fc;
  font-size: 12.5px;
  color: var(--tinta);
  outline: none;
}

.chat-emojis-busca input:focus {
  border-color: #7fc9bb;
  background: #ffffff;
}

.chat-emojis-grade {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 196px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 8px 8px;
}

.chat-emojis-grade button {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s ease;
}

.chat-emojis-grade button:hover {
  background: #f1f0f7;
}

.chat-emojis-vazio {
  grid-column: 1 / -1;
  padding: 20px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.chat-emojis-abas {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--linha);
  background: #fbfaff;
}

.chat-emojis-abas button {
  flex: 1;
  padding: 7px 0;
  border: 0;
  border-top: 2px solid transparent;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.55;
}

.chat-emojis-abas button[data-ativo="sim"] {
  border-top-color: var(--acao);
  opacity: 1;
}

/* ---------- Cartão dentro do balão ----------
   Produto e cupom não viajam como link cru: link solto ninguém clica, e do
   outro lado não se sabe o que tem lá dentro. */

.chat-cartao {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  padding: 7px;
  border-radius: 12px;
  background: rgba(26, 26, 43, 0.06);
  color: inherit;
  text-decoration: none;
}

.chat-linha[data-minha="sim"] .chat-cartao {
  background: rgba(16, 50, 26, 0.07);
}

.chat-cartao img {
  height: 52px;
  width: 52px;
  flex-shrink: 0;
  border-radius: 9px;
  object-fit: cover;
}

.chat-cartao > span {
  min-width: 0;
}

.chat-cartao-nome {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-cartao-preco {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.chat-cartao[data-tipo="cupom"] {
  display: block;
  padding: 9px 11px;
}

.chat-cartao-rotulo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}

.chat-cartao-codigo {
  margin-top: 1px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.chat-cartao-condicao {
  font-size: 11.5px;
  opacity: 0.85;
}

/* ---------- Editor das respostas prontas ---------- */

.chat-respostas-caixa {
  width: min(560px, 100%);
}

.chat-respostas-lista {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 14px;
}

.chat-resposta-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
}

.chat-resposta-atalho {
  width: 110px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #f7f7fc;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acao);
  outline: none;
}

.chat-resposta-linha textarea {
  flex: 1;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta);
  outline: none;
  resize: vertical;
}

.chat-resposta-atalho:focus,
.chat-resposta-linha textarea:focus {
  border-color: #7fc9bb;
}

/* ---------- Esperando você ---------- */

.chat-filtro-bolha {
  display: inline-flex;
  height: 16px;
  min-width: 16px;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: #f0526e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.chat-filtro button[data-ativo="sim"] .chat-filtro-bolha {
  background: #f0526e;
}

/* O tempo de espera não é um horário qualquer: é uma cobrança. */
.chat-item-hora[data-espera="sim"] {
  font-weight: 700;
  color: #c22d47;
}

/* ---------- Retomar depois ---------- */

.chat-marca-retomar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2ff;
  font-size: 10.5px;
  font-weight: 700;
  color: #4c5fd7;
}

.chat-retomar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-retomar button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.chat-retomar button:hover {
  border-color: var(--acao);
  color: var(--acao);
}

.chat-retomar-marcado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #eef2ff;
  font-size: 12.5px;
  color: #3f4bb8;
}

.chat-retomar-marcado > svg {
  margin-top: 1px;
  flex-shrink: 0;
}

.chat-retomar-marcado span {
  flex: 1;
  min-width: 0;
}

.chat-retomar-marcado strong {
  display: block;
  font-weight: 700;
}

.chat-retomar-marcado em {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  font-style: normal;
  opacity: 0.85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-retomar-marcado button {
  display: inline-flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(63, 75, 184, 0.12);
  color: inherit;
  cursor: pointer;
}

.chat-config-nota code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--acao-suave);
  font-size: 11px;
  font-weight: 700;
  color: #0b6b5b;
}

/* ---------- Citar, editar, recado interno ---------- */

/* O trecho citado dentro do balão: sem ele, "isso mesmo" não quer dizer nada. */
.chat-citacao {
  margin-bottom: 5px;
  padding: 5px 8px;
  border-left: 3px solid var(--acao);
  border-radius: 7px;
  background: rgba(16, 50, 26, 0.06);
}

.chat-linha[data-minha="nao"] .chat-citacao {
  background: rgba(26, 26, 43, 0.05);
}

.chat-citacao span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--acao);
}

.chat-citacao em {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  font-style: normal;
  opacity: 0.75;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recado interno: cor de papel de bloco, para ninguém confundir com o que o
   cliente lê. */
.chat-balao[data-interna="sim"] {
  background: #fff6d8 !important;
  color: #6b4b06 !important;
  box-shadow: 0 1px 1px rgba(107, 75, 6, 0.14);
}

.chat-selo-interno {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}

.chat-editada {
  margin-right: 3px;
  font-size: 10px;
  font-style: italic;
  opacity: 0.8;
}

.chat-menu-perigo {
  color: #c22d47 !important;
}

.chat-menu button {
  color: var(--tinta);
}

.chat-menu button:hover {
  background: #f4f3f7;
}

.chat-menu-perigo:hover {
  background: #fee9ec !important;
}

/* A faixa acima do campo: o que este envio é. */
.chat-faixa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--acao-suave);
  font-size: 12px;
  color: var(--tinta-fraca);
}

.chat-faixa[data-tom="interna"] {
  background: #fff6d8;
  color: #6b4b06;
}

.chat-faixa[data-tom="edicao"] {
  background: #fef1e1;
  color: #8a5a10;
}

.chat-faixa > svg {
  flex-shrink: 0;
}

.chat-faixa span {
  flex: 1;
  min-width: 0;
}

.chat-faixa strong {
  display: block;
  font-size: 12px;
  color: inherit;
}

.chat-faixa em {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  font-style: normal;
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-faixa button {
  display: inline-flex;
  height: 22px;
  width: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  cursor: pointer;
}

/* Escrevendo um recado interno, o campo inteiro muda de cor: é o lembrete de
   que aquilo não sai daqui. */
.chat-caixa-area[data-interna="sim"] .chat-caixa {
  border-color: #e6c96a;
  background: #fffdf5;
}

/* ---------- Conversa que não corta ---------- */

.chat-carregar {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
}

.chat-carregar button {
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-fraca);
  cursor: pointer;
}

.chat-carregar button:hover {
  color: var(--tinta);
}

/* O trecho onde a busca achou a palavra. */
.chat-trecho {
  font-style: normal;
  color: var(--tinta);
}

/* ---------- Digitando ---------- */

.chat-digitando {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--acao);
  font-weight: 600;
}

.chat-digitando i {
  display: inline-block;
  height: 3px;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: chat-pontinho 1.2s infinite ease-in-out;
}

.chat-digitando i:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-digitando i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-pontinho {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* ---------- Responsável e etiquetas ---------- */

.chat-responsavel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-responsavel select {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #ffffff;
  font-size: 12.5px;
  color: var(--tinta);
  outline: none;
}

.chat-responsavel button {
  height: 34px;
  flex-shrink: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: var(--acao);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}

.chat-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px 3px 9px;
  border-radius: 999px;
  background: var(--acao-suave);
  font-size: 11.5px;
  font-weight: 700;
  color: #0b6b5b;
}

.chat-etiqueta button {
  display: inline-flex;
  height: 14px;
  width: 14px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 107, 91, 0.14);
  color: inherit;
  cursor: pointer;
}

.chat-etiquetas input {
  height: 26px;
  width: 96px;
  padding: 0 10px;
  border: 1px dashed var(--linha);
  border-radius: 999px;
  background: transparent;
  font-size: 11.5px;
  color: var(--tinta);
  outline: none;
}

.chat-etiquetas input:focus {
  border-style: solid;
  border-color: var(--acao);
}

/* ---------- Configurações ---------- */

/*
  Duas colunas: o menu e o assunto.

  Numa rolagem única a pessoa passa reto pelo que veio buscar — e ela quase
  sempre vem buscar uma coisa só ("a que horas eu atendo?"). Com o menu à
  esquerda, cada assunto cabe inteiro na tela, sem rolar.
*/
.chat-config {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  width: min(860px, 100%);
  height: min(78vh, 620px);
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(26, 26, 43, 0.28);
  animation: chat-decisao-entra 0.18s ease;
}

.chat-config-menu {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--linha);
  background: #fbfaf8;
}

.chat-config-procura {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 12px 8px;
}

.chat-config-procura svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-30%);
  color: var(--tinta-apagada);
}

.chat-config-procura input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #ffffff;
  font-size: 12.5px;
  color: var(--tinta);
  outline: none;
}

.chat-config-procura input:focus {
  border-color: var(--acao);
}

.chat-config-menu-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.chat-config-menu-vazio {
  padding: 18px 8px;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.chat-config-grupo {
  margin-top: 10px;
}

.chat-config-grupo > span {
  display: block;
  padding: 0 8px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

.chat-config-grupo button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-fraca);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.chat-config-grupo button:hover {
  background: rgba(15, 140, 122, 0.08);
  color: var(--tinta);
}

.chat-config-grupo button[data-ativo="sim"] {
  background: var(--acao-suave);
  color: #0b6b5b;
}

.chat-config-grupo button svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.chat-config-painel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.chat-config-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--linha);
}

.chat-config-topo > div {
  flex: 1;
  min-width: 0;
}

.chat-config-rotulo {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-apagada);
}

.chat-config-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.chat-config-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 8px;
}

.chat-config-bloco {
  padding: 14px 0 4px;
}

.chat-config-nota {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.chat-config-linha {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  cursor: pointer;
}

.chat-config-linha input[type="checkbox"] {
  margin-top: 2px;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  accent-color: var(--acao);
}

.chat-config-linha strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
}

.chat-config-linha em {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.chat-config-texto {
  width: 100%;
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta);
  outline: none;
  resize: vertical;
}

.chat-config-texto:focus {
  border-color: var(--acao);
}

/* Duas escolhas que se excluem, com o porquê de cada uma à vista. */
.chat-config-escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.chat-config-escolhas button {
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 13px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.chat-config-escolhas button:hover {
  border-color: var(--acao);
}

.chat-config-escolhas button[data-ativo="sim"] {
  border-color: var(--acao);
  background: var(--acao-suave);
}

.chat-config-escolhas strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta);
}

.chat-config-escolhas em {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.4;
  color: var(--tinta-fraca);
}

.chat-config-espera {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.chat-config-espera input {
  width: 74px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  outline: none;
}

.chat-config-espera input:focus {
  border-color: var(--acao);
}

.chat-horarios {
  margin-top: 11px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}

.chat-horario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
}

.chat-horario + .chat-horario {
  border-top: 1px solid var(--linha);
}

.chat-horario[data-aberto="nao"] {
  background: #fbfaff;
  color: var(--tinta-apagada);
}

.chat-horario label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.chat-horario label input {
  height: 15px;
  width: 15px;
  accent-color: var(--acao);
}

.chat-horario > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.chat-horario input[type="time"] {
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  background: #ffffff;
  font-size: 12px;
  color: var(--tinta);
  outline: none;
}

.chat-horario input[type="time"]:disabled {
  opacity: 0.45;
}

.chat-config-acao,
.chat-silencio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.chat-config-acao button,
.chat-silencio button {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
}

.chat-config-acao button:hover,
.chat-silencio button:hover {
  border-color: var(--acao);
  color: var(--acao);
}

.chat-config-estado {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.chat-config-estado[data-tom="bom"] {
  color: #0b8f66;
}

.chat-config-estado[data-tom="ruim"] {
  color: #c22d47;
}

.chat-config-estado[data-tom="atencao"] {
  color: #b76a10;
}

.chat-config-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  background: #fbfaff;
}

.chat-config-salvo {
  margin-right: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: #0b8f66;
}

/* Trocar de assunto não perde o que foi digitado, mas fechar sem salvar perde:
   por isso o aviso fica à vista até o Salvar. */
.chat-config-mexido {
  margin-right: auto;
  font-size: 12px;
  font-weight: 600;
  color: #b76a10;
}

.chat-config-rodape .chat-erro {
  margin: 0 auto 0 0;
}

.chat-config-aviso {
  padding: 10px 20px;
  background: #fef1e1;
  font-size: 12px;
  color: #8a5a10;
}

/* No celular a coluna do menu não cabe: ela deita e vira uma fita de assuntos
   que se rola com o dedo, com o conteúdo logo abaixo. */
@media (max-width: 720px) {
  .chat-config {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: min(90vh, 720px);
  }

  .chat-config-menu {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }

  .chat-config-procura {
    display: none;
  }

  .chat-config-menu-rolagem {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
  }

  .chat-config-grupo {
    display: flex;
    gap: 6px;
    margin-top: 0;
  }

  .chat-config-grupo > span {
    display: none;
  }

  .chat-config-grupo button {
    width: auto;
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #ffffff;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .chat-config-grupo button[data-ativo="sim"] {
    border-color: transparent;
  }
}

/* ---------- Telas estreitas ----------
   No celular a conversa e a tela inteira: a lista sai de cena quando um fio
   esta aberto, e o painel de contexto vira uma folha por cima. */

.chat-voltar {
  display: none;
}

/* No desktop o painel esta sempre a vista: o X so faz sentido quando ele vira
   uma folha por cima da conversa. */
@media (min-width: 1181px) {
  .chat-contexto-capa .chat-icone {
    display: none;
  }
}

@media (max-width: 1180px) {
  .chat-app {
    grid-template-columns: 76px 320px minmax(0, 1fr);
  }

  .chat-contexto {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 330px;
    box-shadow: -18px 0 40px rgba(26, 26, 43, 0.16);
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }

  .chat-app[data-painel="aberto"] .chat-contexto {
    transform: translateX(0);
  }
}

@media (max-width: 820px) {
  /*
    No celular a conversa e o aplicativo inteiro.

    O trilho lateral vira barra de baixo enquanto se escolhe com quem falar, e
    some assim que a conversa abre: quem esta escrevendo precisa de tela, nao de
    menu. A volta e pela seta, como em qualquer aplicativo de mensagem.
  */
  .chat-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .chat-lista,
  .chat-fio {
    grid-column: 1;
    grid-row: 1;
  }

  .chat-lista {
    border-right: 0;
  }

  .chat-rail {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    overflow: visible;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }

  .chat-rail-marca {
    display: none;
  }

  .chat-rail-item {
    width: 92px;
    padding: 6px 0 4px;
  }

  /* No celular o pé do trilho deita junto com o resto da barra. */
  .chat-rail-pe {
    margin-top: 0;
    flex-direction: row;
    padding-top: 0;
    gap: 2px;
  }

  .chat-rail-icone {
    height: 44px;
    width: 46px;
    border-radius: 14px;
  }

  .chat-eu {
    margin-top: 0;
  }

  .chat-eu-ficha {
    display: none !important;
  }

  .chat-app[data-fio="aberto"] .chat-lista,
  .chat-app[data-fio="aberto"] .chat-rail {
    display: none;
  }

  .chat-app[data-fio="fechado"] .chat-fio {
    display: none;
  }

  .chat-voltar {
    display: inline-flex;
  }

  .chat-mensagens {
    padding: 12px 12px 6px;
  }

  .chat-balao {
    max-width: 86%;
  }

  .chat-escrever {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .chat-contexto {
    width: min(340px, 92vw);
  }

  .chat-avisos {
    right: 10px;
    left: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .chat-aviso {
    width: 100%;
  }
}

/* Tela deitada e baixa (celular virado): o cabecalho encolhe para sobrar
   conversa. */
@media (max-height: 520px) {
  .chat-lista-topo {
    padding: 10px 14px 8px;
  }

  .chat-lista-sub,
  .chat-convite,
  .chat-chave {
    display: none;
  }
}