/* Chat: lista de conversas (esquerda) + área de mensagens (direita).
   Reaproveita variáveis de base.css e componentes de telas.css/topo.css. */

.btn-chat{position:relative}
.badge-nao-lidas{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-left:6px;
  border-radius:999px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.badge-nao-lidas.oculto{display:none !important}

.pagina-chat{
  flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0;
  border-top:1px solid var(--line);
}

/* ---------- lista ---------- */
.lista-conversas{border-right:1px solid var(--line);overflow-y:auto;background:var(--surface)}
.titulo-grupo{padding:12px 14px 4px}
.item-conversa{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;
  border:0;background:transparent;text-align:left;cursor:pointer;border-radius:0;
}
.item-conversa:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.item-conversa.ativo{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.item-corpo{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.item-nome{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-previa{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-novo .item-nome{font-weight:500}

.avatar-conversa{border-radius:50%;flex:none;object-fit:cover}
.avatar-letra{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;
}

/* ---------- área da conversa ---------- */
.area-conversa{display:flex;flex-direction:column;min-height:0}
.conversa-vazia{flex:1;display:grid;place-items:center}
.cabeca-conversa{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}

.msg-lista{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:70%;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.msg.minha{align-self:flex-end;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.msg.minha .msg-hora{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.msg-texto{white-space:pre-wrap;word-break:break-word;font-size:14.5px}
.msg-hora{font-size:11px;margin-top:2px;text-align:right}

.form-envio{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.form-envio textarea{
  flex:1;resize:none;padding:9px 12px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--radius);max-height:120px;
}