/* ══════════════════════════════════════════════════════════════════════════
 *  chat.css — Chat Interno da Equipe, interface WEB do ERP
 *  Clínica Dr. Reges Jr.
 * --------------------------------------------------------------------------
 *  ARQUIVO NOVO, DE PROPÓSITO. `liquid-glass.css` e `liquid-glass.js` são
 *  ESPELHADOS do repositório do site por `assets/embutir-tema.mjs` (one-way,
 *  site→ERP): qualquer regra escrita lá desapareceria na próxima geração do
 *  tema, sem aviso. `liquid-glass-erp.css` é a camada de mapeamento do ERP e
 *  é mantida à mão, mas ela amarra o tema às classes que JÁ existiam — o chat
 *  é tela nova, então tem folha própria.
 *
 *  A PALETA DO CHAT É A MESMA DO APLICATIVO (ChatInternoScreen.js), e é a
 *  única exceção do ecossistema à regra "toda cor sai dos tokens --lg-*":
 *
 *      #FFD700  balão enviado (fundo)     — briefing, reafirmado pelo cliente
 *      #D4A373  balão recebido (borda)    — idem
 *      #000000  fundo                     — preto absoluto (= --lg-abismo)
 *
 *  Por que repetir em vez de usar `--lg-acento` (#CBA730, o dourado do
 *  brasão): é a mesma decisão já tomada e documentada no app. Se um dia
 *  voltar à marca, os dois lados mudam juntos — aqui e no
 *  `CHAT` de ChatInternoScreen.js. Os dois arquivos não se conversam.
 *
 *  Raio: 10px nas peças grandes, 8px nas pequenas — igual a `--lg-gota-*` /
 *  `--lg-seixo-*`, e é exatamente o `borderRadius: 10` do briefing. Formas
 *  retangulares de canto leve, nunca orgânicas (decisão definitiva do tema).
 * ══════════════════════════════════════════════════════════════════════════ */

.chat-raiz {
  /* Cores próprias do chat, escopadas na raiz da tela: nada disto escapa para
     o resto do ERP. */
  --chat-enviado: #FFD700;
  --chat-enviado-rim: #FFE873;
  --chat-enviado-tinta: #141414;          /* ~13:1 sobre o dourado — AAA */
  --chat-enviado-tinta-fraca: rgba(20, 20, 20, 0.62);
  --chat-enviado-veu: rgba(20, 20, 20, 0.14);
  --chat-enviado-veu-rim: rgba(20, 20, 20, 0.30);

  --chat-recebido-rim: #D4A373;
  --chat-recebido-fundo: rgba(255, 255, 255, 0.055);

  --chat-raio: 10px;
  --chat-raio-pequeno: 8px;

  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  /* A altura é medida em JS (ChatWeb.ajustarAltura) e escrita no style do
     elemento: `.view` não tem altura fixa, ela cresce com o conteúdo, e um
     `calc(100vh - 140px)` chutado aqui quebraria assim que a topbar mudasse
     de tamanho. O valor abaixo é só a reserva para o primeiro quadro. */
  height: 560px;
  min-height: 320px;
  font-family: var(--lg-fonte);
  color: var(--lg-tinta);
}

/* ────────────────────────────────────────────────────────────────────────
 *  Painéis de vidro — a moldura das duas colunas
 * ──────────────────────────────────────────────────────────────────────── */

.chat-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;                       /* deixa o filho rolar dentro do grid */
  background: var(--lg-vidro-medio, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.22));
  border-radius: var(--chat-raio);
  box-shadow: var(--lg-sombra-1, 0 10px 30px rgba(0, 0, 0, 0.45));
  overflow: hidden;
}

/* O desfoque só entra onde o navegador o suporta. Sem `@supports`, o
   `background` translúcido sobre preto vira um cinza chapado e o "vidro"
   desaparece sem ninguém entender por quê. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-painel {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

.chat-painel-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  flex-shrink: 0;
}

.chat-painel-cabeca h3 {
  font-size: 14.5px;
  font-weight: var(--lg-peso-medio, 500);
  letter-spacing: var(--lg-tracking-titulo, 0.02em);
  color: var(--lg-tinta);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-painel-cabeca .chat-sub {
  font-size: 12px;
  color: var(--lg-tinta-fraca);
  font-weight: var(--lg-peso-leve, 300);
  font-style: italic;                  /* hierarquia do tema: subtítulo em itálico leve */
}

/* ────────────────────────────────────────────────────────────────────────
 *  Selo de conexão
 * ──────────────────────────────────────────────────────────────────────── */

.chat-selo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  text-transform: uppercase;
  color: var(--lg-tinta-fraca);
  padding: 4px 9px;
  border-radius: var(--chat-raio-pequeno);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chat-selo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.chat-selo.on  { color: #7ddba0; border-color: rgba(125, 219, 160, 0.32); }
.chat-selo.off { color: #f0b45e; border-color: rgba(240, 180, 94, 0.32); }

/* ────────────────────────────────────────────────────────────────────────
 *  Coluna 1 — lista de conversas
 * ──────────────────────────────────────────────────────────────────────── */

.chat-filtros {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  flex-shrink: 0;
}

.chat-filtro {
  flex: 1;
  padding: 7px 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--lg-peso-medio, 500);
  letter-spacing: 0.02em;
  color: var(--lg-tinta-media);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.16));
  border-radius: var(--chat-raio-pequeno);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.chat-filtro:hover { background: rgba(255, 255, 255, 0.10); }

/* O filtro ativo usa o DOURADO DO CHAT (#FFD700), não `--lg-acento`
   (#CBA730, o do brasão). Motivo concreto, o mesmo já pago no aplicativo: os
   contadores de não-lidas nesta MESMA tela são #FFD700, e um botão em #CBA730
   a 40px deles põe dois dourados diferentes lado a lado — a diferença é
   visível a olho nu. */
.chat-filtro.ativo {
  background: var(--chat-enviado);
  border-color: var(--chat-enviado-rim);
  color: var(--chat-enviado-tinta);
  font-weight: var(--lg-peso-forte, 700);
}

.chat-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.chat-secao {
  padding: 12px 8px 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  color: var(--lg-tinta-fraca);
  font-weight: var(--lg-peso-medio, 500);
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  margin-bottom: 3px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--chat-raio-pequeno);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.chat-item:hover { background: rgba(255, 255, 255, 0.07); }
.chat-item.ativo {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--chat-recebido-rim);
}

.chat-avatar {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--chat-raio-pequeno);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  font-size: 15px;
  font-weight: var(--lg-peso-medio, 500);
  color: var(--lg-tinta);
}
.chat-avatar .chat-presenca {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #7ddba0;
  border: 2px solid #000;
}

.chat-item-corpo { flex: 1; min-width: 0; }

.chat-item-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.chat-item-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: var(--lg-peso-medio, 500);
  color: var(--lg-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-item-hora {
  font-size: 10.5px;
  color: var(--lg-tinta-fraca);
  flex-shrink: 0;
}
.chat-item-previa {
  font-size: 12px;
  color: var(--lg-tinta-fraca);
  font-weight: var(--lg-peso-leve, 300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-item-previa.digitando {
  color: var(--chat-recebido-rim);
  font-style: italic;
}

.chat-contador {
  flex-shrink: 0;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--chat-enviado);
  color: var(--chat-enviado-tinta);
  font-size: 11px;
  font-weight: var(--lg-peso-forte, 700);
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Coluna 2 — área de mensagens
 * ──────────────────────────────────────────────────────────────────────── */

.chat-fio {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* O fundo do fio é o preto absoluto do briefing; o vidro do painel fica
     nas bordas e no cabeçalho. */
  background: rgba(0, 0, 0, 0.34);
}

/* Conversa curta assenta no RODAPÉ, não no topo — é onde o olho procura a
   mensagem mais recente. `margin-top: auto` no primeiro filho em vez de
   `justify-content: flex-end` no contêiner: com o segundo, o navegador impede
   rolar até o topo quando o conteúdo cresce e passa a estourar. */
.chat-fio > :first-child { margin-top: auto; }

.chat-vazio {
  margin: auto;
  text-align: center;
  color: var(--lg-tinta-fraca);
  font-weight: var(--lg-peso-leve, 300);
  font-style: italic;
  font-size: 13.5px;
  padding: 30px 20px;
  line-height: 1.7;
}

.chat-dia {
  align-self: center;
  margin: 14px 0 8px;
  padding: 3px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  color: var(--lg-tinta-fraca);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.14));
  border-radius: var(--chat-raio-pequeno);
}

.chat-linha {
  display: flex;
  margin-top: 4px;
}
.chat-linha.mim   { justify-content: flex-end; }
.chat-linha.outro { justify-content: flex-start; }

.chat-balao {
  max-width: 76%;
  min-width: 92px;
  padding: 9px 12px;
  border-radius: var(--chat-raio);
  border: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Enviado: dourado sólido, texto escuro. */
.chat-balao.mim {
  background: var(--chat-enviado);
  border-color: var(--chat-enviado-rim);
  color: var(--chat-enviado-tinta);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Recebido: cinza escuro translúcido, borda amarelo caramelo. A borda é
   OPACA de propósito: o briefing pede a cor #D4A373, e a 38% (o
   `--lg-rim-quente` do tema) ela viraria outra cor. */
.chat-balao.outro {
  background: var(--chat-recebido-fundo);
  border-color: var(--chat-recebido-rim);
  color: var(--lg-tinta);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-balao.outro {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

.chat-autor {
  font-size: 11.5px;
  font-weight: var(--lg-peso-medio, 500);
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  color: var(--lg-acento-claro, #F3E5AB);
  margin-bottom: 3px;
}

.chat-texto { white-space: pre-wrap; }

.chat-balao a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-balao.outro a { color: var(--chat-recebido-rim); }

.chat-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
}
.chat-hora { color: var(--lg-tinta-fraca); }
.chat-balao.mim .chat-hora { color: var(--chat-enviado-tinta-fraca); }

.chat-marca { font-size: 11px; letter-spacing: -0.08em; }
.chat-marca.enviado  { color: var(--chat-enviado-tinta-fraca); }
.chat-marca.entregue { color: var(--chat-enviado-tinta-fraca); }
.chat-marca.lido     { color: #1a6dd4; }   /* o azul de "lido", sobre o dourado */
.chat-marca.falhou   { color: #b3261e; }

.chat-falhou {
  font-size: 10.5px;
  color: #7a1c15;
  font-weight: var(--lg-peso-medio, 500);
  margin-right: auto;
}

/* ── Anexos dentro do balão ─────────────────────────────────────────────── */

.chat-anexo-img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--chat-raio-pequeno);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  cursor: zoom-in;
  background: rgba(0, 0, 0, 0.3);
}

.chat-anexo-arq {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--chat-raio-pequeno);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.chat-balao.mim .chat-anexo-arq {
  background: var(--chat-enviado-veu);
  border-color: var(--chat-enviado-veu-rim);
}
.chat-anexo-arq:hover { filter: brightness(1.12); }

.chat-anexo-glifo { font-size: 20px; flex-shrink: 0; }
.chat-anexo-info { flex: 1; min-width: 0; }
.chat-anexo-nome {
  font-size: 12.5px;
  font-weight: var(--lg-peso-medio, 500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-anexo-meta { font-size: 10.5px; opacity: 0.72; margin-top: 1px; }
.chat-anexo-baixar { font-size: 15px; flex-shrink: 0; opacity: 0.8; }

/* ── Prévia de link (unfurl) ─────────────────────────────────────────────── */

.chat-previa {
  display: block;
  margin-top: 6px;
  border-radius: var(--chat-raio-pequeno);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  border-left: 3px solid var(--chat-recebido-rim);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
}
.chat-balao.mim .chat-previa {
  background: var(--chat-enviado-veu);
  border-color: var(--chat-enviado-veu-rim);
  border-left-color: var(--chat-enviado-tinta);
}
/* `text-decoration` PRECISA de especificidade maior que `.chat-balao a`
   (0,1,1), senão o sublinhado do link vaza para o cartão inteiro — título,
   descrição e domínio, todos riscados. Foi o que a captura do teste mostrou. */
.chat-balao a.chat-previa,
.chat-balao a.chat-previa * { text-decoration: none; }

.chat-previa:hover { filter: brightness(1.1); }
.chat-previa-dominio {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--lg-tracking-amplo, 0.055em);
  opacity: 0.72;
}
.chat-previa-titulo {
  font-size: 12.5px;
  font-weight: var(--lg-peso-medio, 500);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-previa-desc {
  font-size: 11.5px;
  opacity: 0.78;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Barra de progresso do envio ─────────────────────────────────────────── */

.chat-progresso {
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--chat-enviado-veu-rim);
  overflow: hidden;
}
.chat-progresso i {
  display: block;
  height: 100%;
  background: var(--chat-enviado-tinta);
  transition: width 0.18s linear;
}

/* ── "Alguém está digitando" ─────────────────────────────────────────────── */

.chat-digitando {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px 8px;
  font-size: 12px;
  font-style: italic;
  font-weight: var(--lg-peso-leve, 300);
  color: var(--chat-recebido-rim);
  flex-shrink: 0;
  min-height: 26px;
}
.chat-pontos { display: inline-flex; gap: 3px; }
.chat-pontos i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: chat-pulsa 1.1s infinite ease-in-out;
}
.chat-pontos i:nth-child(2) { animation-delay: 0.16s; }
.chat-pontos i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chat-pulsa {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}
/* Quem pediu menos animação não recebe os pontos pulando — o texto já diz. */
@media (prefers-reduced-motion: reduce) {
  .chat-pontos i { animation: none; opacity: 0.7; }
}

/* ── Barra de composição ─────────────────────────────────────────────────── */

.chat-compor {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  background: rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
}

.chat-btn-icone {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: var(--chat-raio-pequeno);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  color: var(--lg-tinta);
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.chat-btn-icone:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); }
.chat-btn-icone:disabled { opacity: 0.42; cursor: not-allowed; }

.chat-btn-enviar {
  background: var(--chat-enviado);
  border-color: var(--chat-enviado-rim);
  color: var(--chat-enviado-tinta);
  font-weight: var(--lg-peso-forte, 700);
}
.chat-btn-enviar:hover:not(:disabled) { background: var(--chat-enviado-rim); }

.chat-campo {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 132px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lg-tinta);
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.18));
  border-radius: var(--chat-raio-pequeno);
}
/* O placeholder NÃO pode quebrar em duas linhas: o campo nasce com uma linha
   de altura (`rows=1`, e o JS só o cresce quando há texto), então a segunda
   linha do placeholder era simplesmente CORTADA. Visível na captura de 390px,
   onde a barra lateral do ERP ainda come ~75px da largura. `text-overflow`
   funciona em placeholder no Chrome e no Safari; onde não funcionar, o
   `nowrap` sozinho já evita o corte no meio da palavra. */
.chat-campo::placeholder {
  color: var(--lg-tinta-fraca);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-campo:focus {
  outline: none;
  border-color: var(--chat-recebido-rim);
}

/* ── Menu de anexo ───────────────────────────────────────────────────────── */

.chat-menu-anexo {
  position: absolute;
  bottom: 58px;
  left: 12px;
  z-index: var(--lg-z-elevado, 10);
  min-width: 214px;
  padding: 6px;
  border-radius: var(--chat-raio);
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.22));
  box-shadow: var(--lg-sombra-2, 0 16px 40px rgba(0, 0, 0, 0.6));
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chat-menu-anexo {
    background: rgba(18, 18, 18, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }
}
.chat-menu-anexo button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: var(--chat-raio-pequeno);
  color: var(--lg-tinta);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.chat-menu-anexo button:hover { background: rgba(255, 255, 255, 0.09); }
.chat-menu-anexo .chat-menu-sub {
  display: block;
  font-size: 10.5px;
  color: var(--lg-tinta-fraca);
  margin-top: 1px;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Visor de mídia (lightbox)
 * --------------------------------------------------------------------------
 *  ARMADILHA DO TEMA, já documentada: `liquid-glass.js` põe `.lg-ambiente` no
 *  <body> em runtime, e a regra do núcleo
 *      .lg-ambiente > *:not(.portal-overlay):not(.avatar-ia-flutuante)
 *  rebaixa QUALQUER filho direto de <body> que tenha `position: fixed`
 *  próprio. Sem a classe `portal-overlay` no HTML, este visor não fica "no
 *  lugar errado": ele simplesmente não ocupa espaço visível, e parece que não
 *  abriu. A classe não tem estilo nenhum — existe só como escape do seletor.
 *  Ver o <div id="chat-visor" class="... portal-overlay"> no index.html.
 * ──────────────────────────────────────────────────────────────────────── */

.chat-visor {
  position: fixed;
  inset: 0;
  z-index: var(--lg-z-portal, 3000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.94);
}
.chat-visor.hidden { display: none; }

.chat-visor img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--chat-raio);
  border: 1px solid var(--lg-rim, rgba(255, 255, 255, 0.22));
  box-shadow: var(--lg-sombra-3, 0 30px 80px rgba(0, 0, 0, 0.8));
  object-fit: contain;
}

.chat-visor-barra {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), transparent);
  color: var(--lg-tinta);
}
.chat-visor-nome {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: var(--lg-peso-medio, 500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Contador de não-lidas no item de menu da barra lateral
 * ──────────────────────────────────────────────────────────────────────── */

.menu-item .chat-badge {
  margin-left: auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #FFD700;
  color: #141414;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Estreito: uma coluna por vez, como no aplicativo
 * ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .chat-raiz { grid-template-columns: minmax(0, 1fr); }
  /* Numa coluna só, quem está na tela é decidido por classe (o JS marca
     `.chat-raiz.mostrando-conversa` ao abrir uma conversa). Sem isto as duas
     colunas empilhariam e a lista empurraria o fio para fora da tela. */
  .chat-raiz:not(.mostrando-conversa) .chat-conversa { display: none; }
  .chat-raiz.mostrando-conversa .chat-lateral { display: none; }
  .chat-balao { max-width: 88%; }

  /* Três botões (voltar, anexar, enviar) dividem a linha com o campo, e a
     barra lateral do ERP continua ocupando ~75px no celular — sem apertar
     estas medidas o campo de texto fica com menos de 130px. */
  .chat-compor { gap: 6px; padding: 8px; }
  .chat-btn-icone { width: 34px; height: 34px; font-size: 15px; }
  .chat-campo { font-size: 13px; padding: 8px 10px; }

  /* A faixa de "digitando" reserva espaço para não pular o layout; no celular
     26px de vazio permanente custam caro. */
  .chat-digitando { min-height: 18px; padding: 4px 12px 6px; font-size: 11.5px; }

  .chat-painel-cabeca { padding: 10px 12px; }
  .chat-fio { padding: 12px 12px 6px; }
}

/* Voltar para a lista só existe quando há uma coluna. */
.chat-voltar { display: none; }
@media (max-width: 900px) {
  .chat-voltar { display: grid; }
}

/* ── Reservas de acessibilidade ──────────────────────────────────────────── */

@media (prefers-reduced-transparency: reduce) {
  .chat-painel,
  .chat-menu-anexo { background: #111; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chat-balao.outro { background: #1c1c1c; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Sem `!important` em lugar nenhum desta folha — é convenção do conjunto do
   tema, e aqui não é preciso: nada mais declara `display` para estas peças
   dentro de `@media print`. */
@media print {
  .chat-compor, .chat-filtros, .chat-visor, .chat-menu-anexo { display: none; }
}