/* ==========================================================================
   Central de Conversas de WhatsApp — layout de caixa de entrada (lista +
   thread + resposta). Só tokens do design system; nada de cor solta.
   ========================================================================== */

.conversas {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--esp-4);
  min-height: 0;
  height: calc(100vh - var(--alt-barra-topo, 64px) - var(--esp-16));
}

/* ---- Coluna da esquerda: lista de conversas ---- */
.conversas__lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  overflow: hidden;
}

.conversas__busca {
  padding: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

.conversas__rolagem {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.conversa-item {
  display: flex;
  gap: var(--esp-3);
  align-items: center;
  padding: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
  text-decoration: none;
  color: var(--cor-texto);
}

.conversa-item:hover { background: var(--cor-fundo-sutil); }
.conversa-item--ativa { background: var(--cor-acao-suave); }

.conversa-item__corpo { flex: 1; min-width: 0; }

.conversa-item__topo {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  align-items: baseline;
}

.conversa-item__nome {
  font-weight: var(--peso-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversa-item__hora {
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.conversa-item__previa {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversa-item__naolidas {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--raio-pilula);
  background: var(--sgp-sucesso);
  color: var(--cor-texto-invertido, #fff);
  font-size: 0.75rem;
  font-weight: var(--peso-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Coluna da direita: thread ---- */
.conversas__thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  overflow: hidden;
}

.thread__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}

.thread__mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  background: var(--cor-fundo-afundado);
}

.bolha {
  max-width: 72%;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-xs);
  word-wrap: break-word;
}

.bolha__texto { white-space: pre-wrap; }

.bolha__meta {
  display: block;
  margin-top: var(--esp-1);
  font-size: 0.6875rem;
  color: var(--cor-texto-suave);
  text-align: right;
}

.bolha--recebida {
  align-self: flex-start;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
}

.bolha--enviada {
  align-self: flex-end;
  background: var(--sgp-sucesso-suave);
}

.thread__resposta {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-end;
  padding: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
}

.thread__resposta .campo__controle { resize: none; }

.conversas__vazio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-8);
}

@media (max-width: 860px) {
  .conversas { grid-template-columns: 1fr; height: auto; }
  .conversas--com-thread .conversas__lista { display: none; }
  .conversas__thread { min-height: 60vh; }
}