/* ==========================================================================
   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; }

/* ---- Leva 2: mídia na bolha ------------------------------------------- */

.bolha--com-midia { max-width: min(72%, 340px); }

.bolha__imagem {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--raio-md);
  overflow: hidden;
  margin-bottom: var(--esp-1);
}

.bolha__imagem img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--raio-md);
  background: var(--cor-fundo-afundado);
  min-width: 120px;
  min-height: 80px;
}

.bolha__imagem--figurinha img { max-height: 140px; background: transparent; object-fit: contain; }

.bolha__video {
  display: block;
  width: 100%;
  max-height: 280px;
  border-radius: var(--raio-md);
  background: #000;
  margin-bottom: var(--esp-1);
}

.bolha__audio audio { display: block; width: 260px; max-width: 100%; height: 40px; }

.bolha__aviso {
  margin: var(--esp-1) 0 0;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.bolha__documento {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
  border: 1px solid var(--cor-borda);
  color: inherit;
  text-decoration: none;
  margin-bottom: var(--esp-1);
  min-width: min(220px, 100%);
  max-width: 100%;
}

.bolha__documento:hover { border-color: var(--cor-acao); }
.bolha__documento-icone { color: var(--cor-acao-forte); display: flex; }
.bolha__documento-nome { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 0.8125rem; }
.bolha__documento-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolha__documento-nome .texto--suave { font-size: 0.6875rem; }
.bolha__documento-baixar { color: var(--cor-texto-suave); display: flex; }

.bolha--com-midia .bolha__texto { display: block; margin-top: var(--esp-1); }

.bolha__baixar {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.bolha__baixar:hover { color: var(--cor-acao-forte); text-decoration: underline; }

.bolha__midia-estado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
  border: 1px dashed var(--cor-borda-forte);
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-1);
}

.bolha__midia-estado--carregando { align-items: center; }

.bolha__giro {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cor-borda-forte);
  border-top-color: var(--cor-acao);
  animation: bolha-giro 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes bolha-giro { to { transform: rotate(360deg); } }

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

.bolha__envio { margin-right: var(--esp-1); font-style: italic; }
.bolha__envio--falhou { color: var(--sgp-perigo); font-style: normal; font-weight: 600; }

.lightbox {
  border: 0;
  padding: var(--esp-3);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  box-shadow: var(--sombra-md);
}

.lightbox::backdrop { background: rgba(10, 14, 20, .78); }
.lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 90px); margin: 0 auto; border-radius: var(--raio-md); }
.lightbox__acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-2); }

/* Clipe, gravador e a etiqueta do anexo escolhido */
.thread__resposta { flex-wrap: wrap; }
.thread__clipe, .thread__microfone { padding-inline: var(--esp-2); flex-shrink: 0; }
.thread__microfone--gravando { color: var(--sgp-perigo); background: var(--sgp-perigo-suave); }

.thread__anexo {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-acao-suave);
  font-size: 0.8125rem;
  max-width: 100%;
}

.thread__anexo[hidden], .bolha__audio audio[hidden] { display: none; }
.thread__anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__anexo--gravando { background: var(--sgp-perigo-suave); color: var(--sgp-perigo); font-weight: 600; }

.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; }
}

/* ==========================================================================
   Caixa de entrada, leva 1 (05/10): recortes da lista, dono da conversa,
   eventos na thread (transferência, atendimento), "Criar atendimento",
   modelos de mensagem no "/" e o contador de não-lidas do menu.
   ========================================================================== */
.conversas__filtros {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-top: var(--esp-2);
  flex-wrap: wrap;
}

.conversas__filtro {
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pilula);
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.conversas__filtro:hover { background: var(--cor-fundo-afundado); color: var(--cor-texto); }

.conversas__filtro--ativo {
  background: var(--sgp-sucesso-suave);
  color: var(--cor-texto);
  font-weight: var(--peso-forte);
}

.conversas__total { margin-left: auto; }

.conversa-item__responsavel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.conversa-item__responsavel svg { width: 12px; height: 12px; }

.thread__acoes {
  gap: var(--esp-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.thread__transferir {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: 0.8125rem;
}

.thread__transferir select { max-width: 14rem; }

.thread__evento {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 90%;
  padding: 4px var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-elevado);
  border: 1px dashed var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
}

.thread__evento svg { width: 14px; height: 14px; flex: none; }
.thread__evento--atendimento { border-style: solid; }
.thread__evento-hora { font-size: 0.6875rem; white-space: nowrap; flex-shrink: 0; max-width: 100%; overflow: hidden; }

.botao--destaque { box-shadow: 0 0 0 3px var(--sgp-sucesso-suave); }

.modelos-mensagem { position: relative; }

.modelos-mensagem__painel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  max-height: 16rem;
  overflow-y: auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--esp-1);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-md, 0 8px 24px rgba(0, 0, 0, .12));
}

.modelos-mensagem__painel[hidden] { display: none; }

.modelos-mensagem__opcao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-md, 8px);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.modelos-mensagem__opcao[hidden] { display: none; }
.modelos-mensagem__opcao span { font-size: 0.8125rem; }

.modelos-mensagem__opcao:hover,
.modelos-mensagem__opcao--ativa { background: var(--sgp-sucesso-suave); }

.modelos-mensagem__vazio { padding: var(--esp-2) var(--esp-3); margin: 0; }

.modelos-mensagem__gerenciar {
  padding: var(--esp-2) var(--esp-3);
  border-top: 1px solid var(--cor-borda);
  font-size: 0.8125rem;
}

.modelos-mensagem-tela {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1.4fr);
  gap: var(--esp-4);
  align-items: start;
}

.modelos-mensagem-tela__remover { margin-top: var(--esp-4); }

/* Pedido do Dudu (06/10): os atendimentos ligados à conversa, no cabeçalho.
   Pílula com protocolo · assunto · situação; os encerrados ficam apagados. */
/* Segunda linha do cabeçalho (o cabeçalho quebra linha só por causa dela). */
.thread__cabecalho { flex-wrap: wrap; }
.thread__atendimentos {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: calc(-1 * var(--esp-1));
}
.thread__atendimentos[hidden] { display: none; }

.vinculo-atendimento {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  max-width: 100%;
  padding: 2px var(--esp-2) 2px var(--esp-2);
  border: 1px solid var(--cor-acao);
  border-radius: var(--raio-pilula);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
  font-size: 0.8125rem;
  text-decoration: none;
  line-height: 1.4;
}
a.vinculo-atendimento:hover,
a.vinculo-atendimento:focus-visible { background: var(--cor-fundo-elevado); }
.vinculo-atendimento__assunto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.vinculo-atendimento .etiqueta { font-size: 0.6875rem; }
.vinculo-atendimento--encerrado {
  border-color: var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-suave);
}

.menu__link .caixa-nao-lidas { margin-left: auto; }
.menu__link .caixa-nao-lidas:empty { display: none; }

@media (max-width: 860px) {
  .modelos-mensagem-tela { grid-template-columns: 1fr; }
  .thread__cabecalho { flex-direction: column; align-items: stretch; }
  .thread__acoes { justify-content: flex-start; }
}