/* ============================================================================
   caixa.css — a conversa é o empreendimento.

   Duas colunas como no WhatsApp: as conversas à esquerda (avatar, nome, a
   última linha, quando, e o número do que falta conferir); à direita o chat —
   cabeçalho magro, os anexos numa faixa, o robô em bolhas, as unidades como
   mensagens curtas que abrem ao toque, e embaixo o botão de conferir no lugar
   do campo de digitar. No celular, uma coluna e a conversa cobre a lista.
   ========================================================================= */

.caixa {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  height: calc(100vh - var(--barra));
}

/* ── a lista ────────────────────────────────────────────────────────────── */

.lista {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--branco);
  border-right: 1px solid var(--borda);
}
.lista-topo { padding: 12px 12px 0; }
.lista-topo h1 { font-size: 22px; margin: 4px 6px 10px; display: flex; align-items: baseline; gap: 10px; }
.lista-topo h1 .total { font-size: 16px; font-weight: 500; color: var(--tinta-3); }
.busca { display: block; margin: 0 0 6px; }

.filtros { display: flex; border-bottom: 1px solid var(--borda); padding: 0 6px; }
.filtros button {
  flex: 1; min-height: 56px;
  border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--tinta-3); font-weight: 600;
}
.filtros button b { font-weight: 600; margin-left: 6px; color: var(--tinta-3); }
.filtros button.ativa { color: var(--azul); border-bottom-color: var(--azul); }
.filtros button.ativa b { color: var(--azul); }

.conversas { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.conversas .vazio { padding: 30px 16px; }

.conversa-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center;
  width: 100%; min-height: 76px;
  padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--borda);
  background: var(--branco); color: var(--tinta);
  text-align: left;
}
.conversa-item:hover { background: var(--fundo); }
.conversa-item.aberta { background: var(--azul-fundo); }
.conversa-item .avatar { grid-row: 1 / span 2; }
.conversa-item .nome { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-item .nome small { font-weight: 500; font-size: 16px; color: var(--tinta-3); margin-left: 6px; }
.conversa-item .quando { color: var(--tinta-3); white-space: nowrap; justify-self: end; }
.conversa-item .resumo { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-item .resumo .cuidado { color: var(--vermelho); }
.conversa-item .badge {
  justify-self: end;
  min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  background: var(--azul); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.conversa-item .badge.zero { background: var(--verde-fundo); color: var(--verde); }
.rodape-lista { padding: 8px 14px; color: var(--tinta-3); border-top: 1px solid var(--borda); }

.aviso-migracao { margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--raio); background: var(--ambar-fundo); color: var(--ambar); display: grid; gap: 8px; }
.aviso-migracao .relatorio { margin: 0; padding: 10px; max-height: 220px; overflow: auto; font-size: 16px; white-space: pre-wrap; background: var(--branco); color: var(--tinta); border-radius: 10px; }

/* ── a conversa ─────────────────────────────────────────────────────────── */

.conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--chat); }
.corpo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* só o fluxo rola e encolhe; o resto tem o tamanho que tem */
.cabecalho, .detalhes, .anexos-faixa, .anexo-painel, .rodape-conversa { flex: none; }
.vazia.grande { margin: auto; color: var(--tinta-3); font-size: 18px; padding: 20px; }

.cabecalho {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0 12px; align-items: center;
  padding: 8px 16px;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.cabecalho .voltar { grid-row: 1 / span 2; display: none; }
.cabecalho .avatar { grid-row: 1 / span 2; }
.cabecalho h2 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho h2 small { font-weight: 500; color: var(--tinta-3); font-size: 16px; margin-left: 8px; }
.cabecalho .linha { color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho .acoes { grid-column: 4; grid-row: 1 / span 2; display: flex; gap: 4px; }

.detalhes { padding: 10px 16px; background: var(--branco); border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: var(--tinta-2); }

/* os anexos: uma faixa de chips que rola de lado */
.anexos-faixa { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; background: var(--branco); border-bottom: 1px solid var(--borda); }
.anexo-chip {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; max-width: 380px; padding: 0 14px;
  border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--fundo); color: var(--tinta); text-align: left;
}
.anexo-chip:hover { border-color: var(--borda-2); }
.anexo-chip.ativa { border-color: var(--azul); background: var(--azul-fundo); }
.anexo-chip.arquivada { opacity: .55; }
.anexo-chip.arquivada .nome-arq { text-decoration: line-through; }
.anexo-chip .clipe { color: var(--tinta-3); }
.anexo-chip .nome-arq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.anexo-chip .conta { color: var(--tinta-3); white-space: nowrap; }
.anexo-chip .conta.pendente { color: var(--azul); font-weight: 700; }
.anexo-painel { padding: 12px 16px; background: var(--branco); border-bottom: 1px solid var(--borda); display: grid; gap: 10px; }
.anexo-painel .meta { color: var(--tinta-2); }
.anexo-painel .meta a { font-weight: 600; }
.anexo-painel .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anexo-painel .motivo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anexo-painel .motivo .campo { flex: 1 1 240px; width: auto; }

/* o fluxo: as bolhas */
.fluxo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.divisor {
  align-self: center; margin: 10px 0 2px; padding: 4px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--tinta-3);
  box-shadow: var(--sombra);
}
.bolha {
  max-width: 720px; padding: 10px 14px;
  border-radius: 14px; background: var(--branco); box-shadow: var(--sombra);
}
.bolha.robo { align-self: flex-start; border-top-left-radius: 4px; }
.bolha.gente { align-self: flex-end; background: var(--verde-bolha); border-top-right-radius: 4px; }
.bolha .quem { font-weight: 700; color: var(--tinta-2); margin-right: 6px; }
.bolha .frase { overflow-wrap: anywhere; }
.bolha .meta { color: var(--tinta-3); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.bolha .meta a { word-break: break-all; }
.dobra { align-self: flex-start; }

/* as unidades como mensagens */
.mensagem {
  align-self: flex-start; width: 100%; max-width: 820px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: center;
  padding: 10px 14px;
  border-radius: 14px; border-top-left-radius: 4px;
  background: var(--branco); box-shadow: var(--sombra);
}
.mensagem.conferida { background: var(--verde-bolha); }
.mensagem.divergente { box-shadow: inset 0 0 0 2px var(--ambar-borda), var(--sombra); }
.mensagem.suspeita { background: var(--vermelho-fundo); }
.mensagem .corpo-msg { min-width: 0; display: grid; gap: 2px; text-align: left; background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; }
.mensagem .resumo { font-weight: 700; font-size: 17px; }
.mensagem .origem { color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensagem .origem .falta { color: var(--ambar); }
.mensagem .acao { grid-column: 2; align-self: center; }
.mensagem .mais { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--borda); margin-top: 6px; }
.mensagem .mais .rotulos { flex-basis: 100%; color: var(--tinta-3); }
.divergencia { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: var(--ambar-fundo); color: var(--ambar); display: grid; gap: 8px; margin-top: 6px; }
.divergencia .titulo-div { font-weight: 700; }
.divergencia .opcao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  min-height: 56px; padding: 6px 10px;
  border-radius: 10px; background: var(--branco); color: var(--tinta);
}
.divergencia .opcao .v { font-weight: 700; font-size: 17px; }
.divergencia .opcao .de-onde { color: var(--tinta-3); }

/* o rodapé: o botão no lugar do campo de digitar */
.rodape-conversa {
  padding: 10px 16px; background: var(--branco); border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center;
}
.rodape-conversa .frase { color: var(--tinta-3); }
.rodape-conversa .frase b { color: var(--tinta-2); }
.rodape-conversa .aviso-do-botao { grid-column: 1 / -1; margin: 0; }

/* ── o celular ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .caixa { grid-template-columns: 1fr; }
  .lista { border-right: 0; }
  .conversa { display: none; }
  .caixa.mostrando-conversa .lista { display: none; }
  .caixa.mostrando-conversa .conversa { display: flex; }
  .cabecalho .voltar { display: inline-flex; }
  .cabecalho { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 6px 8px 6px 4px; }
  .cabecalho .linha { white-space: normal; }
  .barra .pessoa .quem { display: none; }
  .rodape-conversa { grid-template-columns: 1fr; }
  .rodape-conversa .botao { width: 100%; }
  .mensagem { grid-template-columns: 1fr; }
  .mensagem .acao { grid-column: 1; justify-self: stretch; }
  .mensagem .acao .botao { width: 100%; }
}