/* Módulo conversas: caixa de entrada estilo WhatsApp (abas por número, lista à esquerda, mensagens à direita).
   Sem estilos inline (CSP). Funciona sem JavaScript; o JS só atualiza a lista/mensagens e envia sem recarregar.
   Tokens em app.css. */



.conv { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); margin-bottom: var(--esp-5); overflow: hidden; }
.conv-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); border-bottom: 1px solid var(--borda); background: var(--superficie); padding: 0 var(--esp-3); }
.conv-topo-acoes { padding: 6px 0; }

/* Abas por número */
.conv-abas { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0 0; }
.conv-aba { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--texto-suave); font-size: .9rem; font-weight: 500; white-space: nowrap; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); }
.conv-aba:hover { background: var(--superficie-3); color: var(--texto); }
.conv-aba.ativa { color: var(--cor-marca-texto); border-bottom-color: var(--cor-marca); font-weight: 600; }
.conv-aba-numero { white-space: nowrap; }
.conv-aba-nome { color: var(--texto-suave); font-weight: 400; }
.conv-nao-lidas { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--raio-pill); background: var(--cor-marca); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; }

/* Corpo em duas colunas */
.conv-corpo { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 520px; height: calc(100vh - 290px); }
.conv-lista { display: flex; flex-direction: column; border-right: 1px solid var(--borda); min-height: 0; background: var(--superficie); }
.conv-busca { display: flex; gap: 6px; padding: 8px 12px 10px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.conv-busca input { flex: 1 1 auto; height: 34px; padding: 0 12px; border-radius: var(--raio-pill); font-size: .9rem; }
.conv-busca .botao { height: 34px; border-radius: var(--raio-pill); }
.conv-contatos { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.conv-item { margin: 0; }
.conv-item a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borda-suave); text-decoration: none; color: var(--texto); transition: background var(--transicao); }
.conv-item a:hover { background: var(--superficie-2); }
.conv-item.ativo a { background: var(--cor-marca-suave); box-shadow: inset 3px 0 0 var(--cor-marca); }
.conv-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cinza-200); color: var(--cinza-700); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.conv-item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.conv-item-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.conv-item-linha strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.conv-item-nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.conv-item-nome .badge { flex: 0 0 auto; height: 18px; font-size: .66rem; padding: 0 6px; }

/* Filtro Todas / Pessoas / Grupos */
.conv-filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; background: var(--superficie-2); }
.conv-filtro { padding: 4px 12px; border-radius: var(--raio-pill); font-size: var(--texto-s); font-weight: 500; text-decoration: none; color: var(--texto-suave); border: 1px solid transparent; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); }
.conv-filtro:hover { background: var(--superficie); color: var(--texto); }
.conv-filtro.ativo { background: var(--superficie); color: var(--cor-marca-texto); border-color: var(--borda-forte); font-weight: 600; box-shadow: var(--sombra-1); }

/* Grupos na lista e no cabeçalho */
.conv-avatar-grupo { background: var(--cor-marca-clara); color: var(--cor-marca-texto); font-size: 1.1rem; }
.conv-cab-texto a { color: var(--cor-marca-texto); }
.conv-item-linha time { flex: 0 0 auto; font-size: var(--texto-xs); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.conv-resumo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--texto-s); color: var(--texto-suave); }
.conv-item-numero { font-size: var(--texto-xs); color: var(--texto-suave); }
.conv-vazio { padding: var(--esp-5) var(--esp-4); color: var(--texto-suave); font-size: .9rem; line-height: 1.5; }

/* Painel da conversa */
.conv-painel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--superficie); }
.conv-painel-vazio { align-items: center; justify-content: center; background: var(--superficie-2); }
.conv-painel-vazio .vazio { border: 0; background: transparent; max-width: 420px; }
.conv-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.conv-cab-texto { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.conv-cab-texto strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-cab-texto .pequeno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-cab-janela { flex: 0 1 auto; max-width: 100%; }
.conv-cab-janela .badge { white-space: normal; height: auto; min-height: 22px; padding: 2px 9px; line-height: 1.3; }
.conv-mensagens { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; background: #eef1f5; background-image: radial-gradient(#dde3ea 1px, transparent 1px); background-size: 16px 16px; overscroll-behavior: contain; }
.conv-vazio-msgs { align-self: center; margin: auto; background: rgba(255, 255, 255, .9); padding: 8px 14px; border-radius: 8px; font-size: .9rem; color: var(--texto-suave); }
.conv-dia { align-self: center; margin: 10px 0 4px; }
.conv-dia span { background: rgba(255, 255, 255, .95); color: var(--texto-suave); font-size: var(--texto-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--raio-pill); box-shadow: var(--sombra-1); }
.conv-balao { position: relative; max-width: min(75%, 560px); padding: 7px 10px 5px; border-radius: 10px; box-shadow: 0 1px 1px rgba(15, 23, 42, .08); font-size: .9375rem; line-height: 1.45; }
.conv-recebida { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.conv-enviada { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.conv-texto { white-space: pre-wrap; word-break: break-word; }
.conv-texto a, .conv-doc { color: #027eb5; text-decoration: underline; }
.conv-citacao { font-size: var(--texto-xs); color: var(--texto-suave); border-left: 3px solid var(--cor-marca); padding-left: 6px; margin-bottom: 4px; }
.conv-legenda { font-size: var(--texto-s); color: var(--texto-suave); }
.conv-imagem img { display: block; max-width: 100%; max-height: 360px; border-radius: 6px; margin-bottom: 4px; }
.conv-tipo-sticker .conv-imagem img { max-height: 160px; }
.conv-audio { width: min(100%, 320px); display: block; margin-bottom: 4px; }
.conv-video { max-width: 100%; max-height: 360px; border-radius: 6px; display: block; margin-bottom: 4px; }
.conv-doc { display: inline-block; padding: 4px 8px; background: rgba(15, 23, 42, .05); border-radius: 6px; }
.conv-autor { font-size: var(--texto-xs); font-weight: 700; color: #1b4f8a; margin-bottom: 2px; }
.conv-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .68rem; color: var(--texto-suave); margin-top: 2px; line-height: 1; }
.conv-origem { font-style: italic; }
.conv-origem::after { content: '·'; margin-left: 4px; }
.conv-tiques { font-size: .78rem; letter-spacing: -.1em; }
.conv-tiques-lida { color: #53bdeb; }
.conv-tiques-falhou { color: var(--erro); font-weight: 700; letter-spacing: 0; }
.conv-tiques-desconhecida { color: var(--aviso); font-weight: 700; letter-spacing: 0; }
.conv-erro-msg { font-size: var(--texto-xs); color: var(--erro); margin-top: 3px; }
.conv-erro { margin: 8px 16px 0; }
.conv-aviso { padding: 10px 16px; margin: 0; border-top: 1px solid var(--borda); background: var(--superficie-2); }
.conv-painel > .alerta { margin: 10px 16px; }

/* Campo de resposta */
.conv-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px; border-top: 1px solid var(--borda); background: var(--superficie); }
.conv-composer textarea { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .9375rem; padding: 9px 14px; border: 1px solid var(--borda-controle); border-radius: 18px; resize: vertical; min-height: 40px; max-height: 160px; background: var(--superficie); line-height: 1.4; transition: border-color var(--transicao), box-shadow var(--transicao); }
.conv-composer textarea:focus { outline: none; border-color: var(--cor-marca); box-shadow: var(--anel-foco); }
.conv-composer .botao { flex: 0 0 auto; height: 40px; border-radius: 20px; padding: 0 18px; }

/* Grupos (contexto) — cartão recolhível */
.conv-grupos { margin-bottom: var(--esp-5); }
.conv-grupos > summary { padding: 14px 20px; border-bottom-color: transparent; }
.conv-grupos[open] > summary { border-bottom-color: var(--borda); }
.conv-grupos > summary h2 { margin: 0; font-size: var(--texto-g); }

@media (max-width: 900px) {
  .conv-corpo { grid-template-columns: 1fr; height: auto; }
  .conv-lista { border-right: 0; border-bottom: 1px solid var(--borda); max-height: 320px; }
  /* Com uma conversa aberta no celular, ela vem primeiro; a lista fica logo abaixo para trocar de contato */
  .conv-corpo:has(.conv-painel[data-conversa]) .conv-lista { order: 2; border-bottom: 0; border-top: 1px solid var(--borda); max-height: 280px; }
  .conv-mensagens { min-height: 360px; max-height: 60vh; padding: 12px; }
  .conv-balao { max-width: 88%; }
  .conv-topo { flex-wrap: wrap; padding: 0 8px; }
  .conv-topo-acoes { padding: 8px 4px; }
  .conv-cab { padding: 10px 12px; }
  .conv-composer { padding: 10px 12px; }
  /* Alvos de toque (tablet e celular): busca, abas por número, chips de filtro, contatos e botão de enviar */
  .conv-aba { min-height: 44px; }
  .conv-busca input, .conv-busca .botao { height: 44px; }
  .conv-filtros { gap: 6px; }
  .conv-filtro { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; }
  .conv-item a { min-height: 56px; }
  .conv-composer textarea { min-height: 44px; }
  .conv-composer .botao { height: 44px; border-radius: 22px; }
}

/* Cada número tem identidade própria; as mensagens mantêm o padrão WhatsApp. */
.conv-cor-1 { --conv-cor:#087f72; --conv-suave:#e3f6f1; }
.conv-cor-2 { --conv-cor:#375bb3; --conv-suave:#eaf0ff; }
.conv-cor-3 { --conv-cor:#8050a5; --conv-suave:#f2ebfb; }
.conv-cor-4 { --conv-cor:#a85c10; --conv-suave:#fff1df; }
.conv-cor-5 { --conv-cor:#a13f68; --conv-suave:#fcebf2; }
.conv-cor-6 { --conv-cor:#18768b; --conv-suave:#e3f5fa; }
.conv-abas { gap:8px; padding:12px 0; }
.conv-aba { border:1px solid var(--borda); border-left:4px solid var(--conv-cor); border-radius:10px; margin:0; white-space:normal; flex-wrap:wrap; min-height:48px; padding:10px 14px; }
.conv-aba.ativa { background:var(--conv-suave); border-color:var(--conv-cor); color:var(--conv-cor); box-shadow:0 2px 8px #122d4312; }
.conv-cor-ponto { width:10px; height:10px; border-radius:50%; background:var(--conv-cor); flex:0 0 auto; }
.conv-identidade { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:12px 18px; background:var(--conv-suave); border-bottom:1px solid var(--borda); color:var(--conv-cor); }
.conv-identidade > span:not(.conv-cor-ponto) { font-size:.82rem; }
.conv-status { margin-left:auto; font-weight:600; }
.conv-corpo { grid-template-columns:minmax(280px,28%) minmax(0,1fr); height:calc(100dvh - 350px); min-height:520px; }
.conv-item.ativo a { background:var(--conv-suave); box-shadow:inset 4px 0 var(--conv-cor); }
.conv-filtro.ativo { color:var(--conv-cor); background:var(--conv-suave); }
.conv-cab { background:#f0f2f5; }
.conv-mensagens { background-color:#efeae2; background-image:radial-gradient(#d9d3c8 1px,transparent 1px); background-size:22px 22px; }
.conv-voltar { display:none; }
@media(max-width:900px) {
 .conv-corpo { grid-template-columns:1fr; height:calc(100dvh - 300px); min-height:480px; }
 .conv .conv-lista { max-height:none; height:100%; min-height:0; }
 .conv-com-contato .conv-lista { display:none; }
 .conv:not(.conv-com-contato) .conv-painel { display:none; }
 .conv .conv-painel { min-height:0; height:100%; }
 .conv-voltar { display:inline-flex; }
 .conv-cab-texto { flex-basis:120px; }
 .conv-abas { flex-wrap:nowrap; overflow-x:auto; width:100%; }
 .conv-aba { flex:0 0 220px; }
 .conv-topo { min-width:0; }
 .conv-status { margin-left:0; }
}