/* ======================================================
   ZAPI — TEMAS
   ======================================================
   Toda cor da tela é uma variável. Trocar de tema troca as variáveis, não o
   código: antes as cores estavam espalhadas em classes do Tailwind dentro do
   HTML (bg-[#0b141a] em 40 lugares), e um tema claro exigiria caçar cada uma.

   O tema é escolhido pelo dono (botão no topo) e guardado no navegador. Na
   primeira visita segue a preferência do sistema operacional.
   ====================================================== */

:root, [data-tema="escuro"] {
  --fundo-app: #0b141a;
  --fundo-painel: #111b21;      /* sidebar */
  --fundo-barra: #202c33;       /* cabeçalhos e rodapé */
  --fundo-campo: #2a3942;       /* inputs */
  --fundo-elevado: #2a3942;     /* menus, popovers */
  --fundo-hover: #374248;
  --fundo-ativo: #2a3942;       /* conversa selecionada */
  --linha: #222d34;
  --linha-sutil: #1a242b;

  --texto: #e9edef;
  --texto-secundario: #d1d7db;
  --texto-fraco: #8696a0;

  --bolha-saida: #005c4b;
  --bolha-entrada: #202c33;
  --bolha-texto: #e9edef;
  --bolha-meta: rgba(255,255,255,.5);

  --acento: #00a884;
  --acento-forte: #06cf9c;
  /* Selo de não lidas: no escuro, verde claro com texto escuro (8,24:1) lê
     muito melhor que branco sobre verde (3,03:1, abaixo do mínimo). */
  --selo-fundo: #06cf9c;
  --selo-texto: #06231a;
  /* tinta do realce ao pular para a mensagem citada */
  --realce-citada-forte: rgba(6,207,156,.22);
  --realce-citada: rgba(6,207,156,.10);
  --acento-fraco: rgba(0,168,132,.15);
  --tick-lido: #53bdeb;

  --separador-fundo: #182229;
  --separador-texto: #8696a0;

  --sombra-suave: 0 1px 2px rgba(0,0,0,.3);
  --sombra-media: 0 4px 12px rgba(0,0,0,.4);
  --fundo-chat-img: url('chat-bg.jpg');
  --scroll-thumb: #2a3942;
  --scroll-thumb-hover: #374248;
}

/* Tema claro. Não é o escuro invertido: o WhatsApp Web claro usa painéis
   brancos, o papel de parede quase branco e a bolha de saída em verde-menta.
   O fundo do chat é a MESMA arte do tema escuro, invertida e clareada. */
[data-tema="claro"] {
  --fundo-app: #eae6df;
  --fundo-painel: #ffffff;
  --fundo-barra: #f0f2f5;
  --fundo-campo: #f0f2f5;
  --fundo-elevado: #ffffff;
  --fundo-hover: #f5f6f6;
  --fundo-ativo: #f0f2f5;
  --linha: #e9edef;
  --linha-sutil: #eff2f5;

  --texto: #111b21;
  --texto-secundario: #3b4a54;
  --texto-fraco: #54656f;   /* era #667781: 4,14:1, abaixo do mínimo de 4,5 */

  --bolha-saida: #d9fdd3;
  --bolha-entrada: #ffffff;
  --bolha-texto: #111b21;
  /* Medido em 08/08/2026: o cinza a 45% dava 2,85:1 sobre a bolha verde-menta,
     e o azul do tick lido, 1,92:1. Os tracinhos ficavam quase invisíveis no
     tema claro, justo o detalhe que diz se a cobrança chegou. */
  --bolha-meta: rgba(17,27,33,.62);

  --acento: #00a884;
  --acento-forte: #008069;
  /* No claro, o caminho é o oposto: verde fundo com branco (4,89:1). */
  --selo-fundo: #008069;
  --selo-texto: #ffffff;
  --realce-citada-forte: rgba(0,128,105,.20);
  --realce-citada: rgba(0,128,105,.09);
  --acento-fraco: rgba(0,168,132,.12);
  --tick-lido: #0a6f96;

  --separador-fundo: #ffffff;
  --separador-texto: #667781;

  --sombra-suave: 0 1px 1px rgba(11,20,26,.13);
  --sombra-media: 0 4px 12px rgba(11,20,26,.15);
  --fundo-chat-img: url('chat-bg-light.jpg');
  --scroll-thumb: #d0d4d7;
  --scroll-thumb-hover: #b8bfc4;
}

body { background: var(--fundo-app); color: var(--texto); }
.app-bg { background: var(--fundo-app); color: var(--texto); }
.txt-muted { color: var(--texto-fraco); }
.txt-secondary { color: var(--texto-secundario); }
.accent-text { color: var(--acento-forte); }

.sidebar { background: var(--fundo-painel); border-right: 1px solid var(--linha); }
.pane-header { background: var(--fundo-barra); border-bottom: 1px solid var(--linha); }
.chat-pane-bg { background: var(--fundo-app); }
.search-subbar { background: var(--fundo-barra); border-bottom: 1px solid var(--linha); }
.edit-bar { background: var(--fundo-barra); border-top: 1px solid var(--linha); }
.search-box { background: var(--fundo-campo); color: var(--texto); }
/* #search-input entra por nome: a classe .search-box está no <div> que
   envolve o campo, e texto de ajuda não é herdado — aquele campo ficava
   com o cinza padrão, 2,26:1 no tema claro (mínimo é 4,5:1). */
.search-box::placeholder, #search-input::placeholder, .input-msg::placeholder { color: var(--texto-fraco); }
.input-msg { background: var(--fundo-campo); color: var(--texto); }
.empty-state { color: var(--texto-secundario); }
.empty-ico { background: var(--fundo-barra); color: var(--texto-fraco); opacity: .55; }

/* Botão de ícone padrão — um só estilo para os ~15 botões do cabeçalho */
.icon-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--texto-fraco);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--fundo-hover); color: var(--texto); }

/* O ícone do botão de tema mostra para onde você VAI, não onde está */
[data-tema="escuro"] #btn-tema .ico-lua { display: none; }
[data-tema="escuro"] #btn-tema .ico-sol { display: block; }
[data-tema="claro"] #btn-tema .ico-lua { display: block; }
[data-tema="claro"] #btn-tema .ico-sol { display: none; }

/* Chips de filtro da lista */
.filtros { background: var(--fundo-painel); border-bottom: 1px solid var(--linha); }
.chip-filtro {
  background: var(--fundo-campo); color: var(--texto-fraco);
  border: none; border-radius: 999px; padding: 5px 14px;
  font-size: 13px; cursor: pointer; transition: background .12s, color .12s;
}
.chip-filtro:hover { background: var(--fundo-hover); }
.chip-filtro.active { background: var(--acento-fraco); color: var(--acento-forte); font-weight: 500; }

/* Papel de parede do chat: a mesma arte nos dois temas, versão clara no claro */
.chat-bg {
  background-color: var(--fundo-app);
  background-image: var(--fundo-chat-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ============ BOLHAS ============ */
.bubble {
  max-width: 70%;
  padding: 6px 9px 8px 9px;
  border-radius: 8px;
  font-size: 14.2px;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
  color: var(--bolha-texto);
  box-shadow: var(--sombra-suave);
}
.bubble.out { background: var(--bolha-saida); align-self: flex-end; border-bottom-right-radius: 2px; }
.bubble.in  { background: var(--bolha-entrada); align-self: flex-start; border-bottom-left-radius: 2px; }
.bubble .meta {
  font-size: 10.5px;
  color: var(--bolha-meta);
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: bottom;
  float: right;
  margin-top: 4px;
  user-select: none;
}
.bubble.deleted {
  background: transparent;
  border: 1px dashed var(--texto-fraco);
  color: var(--texto-fraco);
  font-style: italic;
  box-shadow: none;
}

/* Ticks de entrega. O ✓✓ era fixo no código: TODA mensagem enviada parecia
   entregue, mesmo a que nunca saiu. Agora cada estado tem o seu desenho. */
.tick { display: inline-flex; align-items: center; }
.tick svg { display: block; }
.tick-lido { color: var(--tick-lido); }
.tick-falhou { color: #f15c6d; }
/* Amarelo, não vermelho: tempo esgotado quer dizer "não sei", não "não chegou". */
.tick-incerto { color: #d9a406; font-weight: 700; }
/* Enviada do aparelho: não existe confirmação para essas, então não é um traço
   pálido (que lê como falha) e sim o desenho do celular, um pouco apagado. */
.tick-celular { opacity: .72; margin-left: 1px; }

/* Formatação do WhatsApp dentro da bolha */
.bubble b { font-weight: 600; }
.bubble i { font-style: italic; }
.bubble s { text-decoration: line-through; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.8px;
  background: rgba(127,127,127,.18);
  padding: 1px 4px; border-radius: 3px;
}
.bubble a { color: var(--tick-lido); text-decoration: underline; word-break: break-all; }
[data-tema="claro"] .bubble a { color: #027eb5; }

#msgs-container { display: flex; flex-direction: column; gap: 8px; padding: 16px 5%; }
.grouped { margin-top: -6px; }

/* ============ DOCUMENTO / PDF ============ */
/* Comprovante em PDF chega todos os dias. A bolha mostrava só o texto "[PDF]",
   sem nada clicável: o dono tinha que pedir ao cliente pra mandar de novo como
   foto. Agora é um cartão com nome, tamanho, abrir e baixar. */
.doc-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(127,127,127,.13);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 4px;
  min-width: 230px; max-width: 320px;
  cursor: pointer;
  transition: background .12s;
}
.doc-card:hover { background: rgba(127,127,127,.22); }
.doc-icone {
  width: 38px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #d93025; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; flex-shrink: 0;
}
.doc-icone.generico { background: #5f6368; }
.doc-info { min-width: 0; flex: 1; }
.doc-nome {
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-sub { font-size: 11.5px; color: var(--bolha-meta); margin-top: 1px; }
.doc-baixar {
  background: transparent; border: none; cursor: pointer;
  color: var(--bolha-meta); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-baixar:hover { background: rgba(127,127,127,.2); color: var(--bolha-texto); }

/* Visualizador de PDF em tela cheia */
#visor-doc {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fundo-app);
  display: flex; flex-direction: column;
}
#visor-doc.hidden { display: none; }
.visor-topo {
  background: var(--fundo-barra); border-bottom: 1px solid var(--linha);
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
}
.visor-nome { font-size: 14px; font-weight: 500; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-corpo { flex: 1; min-height: 0; background: #52565a; }
.visor-corpo iframe, .visor-corpo embed { width: 100%; height: 100%; border: none; display: block; }
.visor-btn {
  background: var(--fundo-campo); color: var(--texto);
  border: none; border-radius: 8px; padding: 7px 14px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.visor-btn:hover { background: var(--fundo-hover); }

/* ============ PLAYER DE ÁUDIO PRÓPRIO ============ */
/* O player nativo esconde a velocidade num menu do navegador e muda de cara em
   cada um. Com o volume de áudio que chega aqui, ouvir em 2x economiza tempo
   real todo dia, então a velocidade virou um botão só. */
.audio-player {
  display: flex; align-items: center; gap: 9px;
  min-width: 230px; max-width: 300px; padding: 3px 0 5px;
}
.audio-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--acento); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.audio-btn:hover { filter: brightness(1.08); }
.audio-meio { flex: 1; min-width: 0; }
.audio-barra {
  /* A faixa continua com 3px de aparência, mas a área que responde ao toque é
     bem maior: com 3px, pular para um trecho de um recado longo era impossível
     no celular. O padding cria a folga e o background-clip mantém o desenho
     fino, sem pintar a folga. */
  height: 3px; border-radius: 2px; background: rgba(127,127,127,.35);
  position: relative; cursor: pointer;
  padding: 10px 0; background-clip: content-box; box-sizing: content-box;
  margin: -10px 0;
}
/* A parte verde tem que ter a MESMA espessura da faixa cinza (3px). Com
   top:0/bottom:0 ela esticava por toda a área de toque (23px) e virava uma
   tarja grossa por cima do relógio do áudio — foi o que o dono viu. */
.audio-progresso {
  position: absolute; left: 0; top: 10px; height: 3px;
  background: var(--acento-forte); border-radius: 2px; width: 0;
}
.audio-bolinha {
  /* Ancorada na faixa (10px do topo + metade dos 3px), não no meio da área
     de toque, senão desce junto com o padding. */
  position: absolute; top: 11.5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--acento-forte); transform: translate(-50%, -50%); left: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.audio-rodape {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 5px; font-size: 11px; color: var(--bolha-meta);
}
.audio-vel {
  background: rgba(127,127,127,.2); border: none; cursor: pointer;
  color: var(--bolha-meta); font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; min-width: 30px;
}
.audio-vel:hover { background: rgba(127,127,127,.35); color: var(--bolha-texto); }

/* ============ SKELETON DE UPLOAD ============ */
.bubble.skeleton { opacity: .75; border: 1px dashed rgba(127,127,127,.35); }
.bubble.skeleton.failed { background: rgba(160,60,60,.5); border-color: rgba(255,100,100,.4); color: #fff; }
.skeleton-img { max-width: 280px; max-height: 280px; border-radius: 6px; opacity: .55; margin-bottom: 4px; }
.skeleton-video, .skeleton-audio, .skeleton-doc {
  background: rgba(127,127,127,.18); padding: 18px 14px; border-radius: 6px;
  font-size: 14px; margin-bottom: 4px; min-width: 200px; text-align: center;
}
.skeleton-audio { padding: 14px; }
.skel-spinner {
  display: inline-block; width: 10px; height: 10px;
  border: 2px solid rgba(127,127,127,.4); border-top-color: currentColor;
  border-radius: 50%; animation: skel-spin .8s linear infinite;
  vertical-align: middle; margin-right: 4px;
}
@keyframes skel-spin { to { transform: rotate(360deg); } }

/* ============ SEPARADOR DE DATA ============ */
.day-separator { align-self: center; margin: 12px 0 4px 0; }
.day-separator span {
  background: var(--separador-fundo); color: var(--separador-texto);
  font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 8px;
  text-transform: capitalize; display: inline-block; box-shadow: var(--sombra-suave);
}

.scroll-bottom-btn {
  position: absolute; bottom: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--fundo-elevado); color: var(--texto-fraco);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-media);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .18s, transform .18s, background .1s; z-index: 6;
}
.scroll-bottom-btn:hover { background: var(--fundo-hover); color: var(--texto); }
.scroll-bottom-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

.floating-date {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--separador-fundo); color: var(--separador-texto);
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 12px;
  text-transform: capitalize; z-index: 5; opacity: 0;
  transition: opacity .25s; pointer-events: none;
  box-shadow: var(--sombra-suave); white-space: nowrap;
}
.floating-date.show { opacity: 1; }

.unread-marker { align-self: stretch; margin: 10px 0; text-align: center; position: relative; }
.unread-marker::before, .unread-marker::after {
  content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: rgba(0,168,132,.4);
}
.unread-marker::before { left: 0; }
.unread-marker::after { right: 0; }
.unread-marker span {
  background: var(--acento-fraco); color: var(--acento-forte);
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 12px;
  display: inline-block; text-transform: uppercase; letter-spacing: .5px;
}

/* ============ LISTA DE CONVERSAS ============ */
.conv-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid var(--linha-sutil);
  transition: background .15s;
}
.conv-row:hover { background: var(--fundo-hover); }
.conv-row.active { background: var(--fundo-ativo); box-shadow: inset 4px 0 0 var(--acento-forte); }
.conv-row .avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; color: white; object-fit: cover;
}
img.avatar { background: var(--fundo-campo); }
.conv-row .body { flex: 1; min-width: 0; overflow: hidden; }
.conv-row .name {
  font-size: 14.5px; font-weight: 500; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
/* O tracinho da prévia acompanha o texto: mesmo desenho do chat, menor, e com
   a cor do texto secundário para não competir com o nome do cliente. */
.tick-previa {
  display: inline-flex; vertical-align: -2px; margin-right: 3px;
  color: var(--texto-fraco);
}
.tick-previa svg { width: 13px; height: 12px; }
.tick-previa.tick-lido { color: var(--tick-lido); }

.conv-row .preview {
  font-size: 12.5px; color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.conv-row .right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conv-row .time { font-size: 11.5px; color: var(--texto-fraco); white-space: nowrap; }
.conv-row.tem-nao-lida .time { color: var(--acento-forte); }
.conv-row .badge {
  /* --acento com branco dá 3,03:1, abaixo do mínimo de 4,5 para texto pequeno.
     É justamente o elemento que o dono varre com o olho para achar quem espera
     resposta, e no sol do celular some. O tom fundo chega a 4,54:1. */
  background: var(--selo-fundo); color: var(--selo-texto); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.conv-row .row-actions { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.conv-row .row-menu-btn {
  background: transparent; border: none; color: var(--texto-fraco); cursor: pointer;
  font-size: 18px; padding: 0; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
@media (hover: hover) { .conv-row:hover .row-menu-btn { display: flex; } }
@media (hover: none)  { .conv-row .row-menu-btn { display: flex; opacity: .7; } }
.conv-row .row-menu-btn:hover { background: var(--fundo-elevado); color: var(--texto); }
.pin-icon { font-size: 11px; opacity: .7; }

/* Selo de quem está com a conversa. O estado já existia no sistema (o robô cala
   quando o dono assume) mas era invisível: ele só descobria pelo silêncio. */
.quem-pill {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  flex-shrink: 0;   /* quem encolhe é o telefone, o selo tem que continuar legível */
}
/* #d9a406 dava 1,87:1 no tema claro: o selo mais importante da tela era o
   menos legível dela. */
.quem-pill.humano { background: rgba(240,196,25,.18); color: #7a6000; }
.quem-pill.robo   { background: var(--acento-fraco); color: var(--acento-forte); }
/* Vermelho porque é o único estado em que NINGUÉM responde o cliente. */
.quem-pill.desligado { background: rgba(217,48,37,.14); color: #c5221f; }
[data-tema="escuro"] .quem-pill.desligado { color: #f15c6d; }
[data-tema="escuro"] .quem-pill.humano { color: #f0c419; }
.conv-row .quem-pill { font-size: 9px; padding: 1px 5px; }

.btn-devolver {
  background: var(--acento); color: #fff; border: none; border-radius: 8px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn-devolver:hover { filter: brightness(1.1); }

/* ============ CHAVE DO ROBÔ ============
   O MESMO interruptor da coluna BOT da lista de clientes, com as mesmas
   medidas e a mesma cor de ligado (#5483B3). Antes era um desenho de chave,
   que não dizia nada para quem olha. O rótulo "Bot" acompanha porque no chat,
   diferente da lista, não existe cabeçalho de coluna explicando o que é. */
.chave-bot {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 2px 2px; cursor: pointer;
}
.chave-rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--texto-fraco); text-transform: uppercase;
}
.chave-trilho {
  position: relative; display: inline-block; width: 40px; height: 22px;
  border-radius: 11px; background: var(--fundo-hover);
  transition: background-color .18s ease;
}
.chave-bola {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .18s ease;
}
.chave-bot.ligado .chave-trilho { background: #5483B3; }
.chave-bot.ligado .chave-bola { transform: translateX(18px); }
/* Desligado é o estado que precisa saltar aos olhos: é um cliente que ninguém
   está atendendo. O rótulo vira vermelho junto com o trilho. */
.chave-bot:not(.ligado) .chave-trilho { background: rgba(224,72,60,.28); }
.chave-bot:not(.ligado) .chave-rotulo { color: #e0483c; }
/* Enquanto o estado não chega do servidor, o botão não afirma nada. */
.chave-bot.indefinido { opacity: .4; pointer-events: none; }
.chave-bot.indefinido .chave-trilho { background: var(--fundo-hover); }
.chave-bot.indefinido .chave-rotulo { color: var(--texto-fraco); }

/* ============ FAIXA DO "VOLTAR PRO ROBÔ" (só no celular) ============ */
.faixa-devolver {
  align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; background: rgba(240,196,25,.14);
  border-bottom: 1px solid var(--linha); flex-shrink: 0;
}
.faixa-devolver.hidden { display: none; }
#faixa-devolver-texto { font-size: 12px; color: var(--texto-fraco); }
[data-tema="escuro"] #faixa-devolver-texto { color: #f0c419; }

/* ============ SINO DOS LEMBRETES ============ */
.icon-btn.interruptor { position: relative; }
/* Ligado é o normal, então não grita: fica com a cor do acento, discreto. */
.icon-btn.interruptor { color: var(--acento-forte); }
/* Desligado PRECISA saltar aos olhos: é um cliente que não está sendo
   atendido, ou que deixou de receber aviso de vencimento. */
.icon-btn.interruptor.desligado { color: #e0483c; }
.icon-btn.interruptor.desligado::after {
  content: ''; position: absolute; right: 5px; top: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #e0483c; border: 1.5px solid var(--fundo-barra);
}
/* Enquanto não se sabe o estado, o botão não afirma nada. */
.icon-btn.interruptor.indefinido { color: var(--texto-fraco); opacity: .45; pointer-events: none; }

.conv-popup {
  position: fixed; background: var(--fundo-elevado); border-radius: 8px; padding: 4px 0;
  box-shadow: var(--sombra-media); z-index: 100; min-width: 210px; border: 1px solid var(--linha);
}
.conv-popup-btn {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--texto-secundario); padding: 10px 16px; font-size: 14px; cursor: pointer;
}
.conv-popup-btn:hover { background: var(--fundo-hover); }
.conv-popup-btn.perigo { color: #f15c6d; }

.attach-menu { background: var(--fundo-elevado); box-shadow: var(--sombra-media); border: 1px solid var(--linha); }
.attach-opt {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--texto-secundario); padding: 9px 16px; font-size: 14px; cursor: pointer;
}
.attach-opt:hover { background: var(--fundo-hover); }

/* Skeleton da lista */
.skeleton-row { pointer-events: none; opacity: .5; }
.skel-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg, var(--linha-sutil) 0%, var(--fundo-campo) 50%, var(--linha-sutil) 100%);
  background-size: 200% 100%; animation: skel-shimmer 1.4s infinite;
}
.skel-bar {
  height: 12px; border-radius: 4px; margin: 4px 0;
  background: linear-gradient(90deg, var(--linha-sutil) 0%, var(--fundo-campo) 50%, var(--linha-sutil) 100%);
  background-size: 200% 100%; animation: skel-shimmer 1.4s infinite;
}
.skel-bar-name { width: 50%; }
.skel-bar-preview { width: 75%; height: 10px; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ CITAÇÃO ============ */
.quote {
  border-left: 3px solid var(--acento-forte);
  background: rgba(127,127,127,.16);
  padding: 5px 8px; border-radius: 4px; font-size: 13px;
  margin-bottom: 5px; line-height: 1.3; cursor: pointer;
  transition: background .12s;
}
.quote:hover { background: rgba(127,127,127,.26); }
.quote.quote-out { border-left-color: #53bdeb; }
.quote-author { font-size: 12px; font-weight: 600; color: var(--acento-forte); margin: 0 0 2px 0; }
.quote.quote-out .quote-author { color: #53bdeb; }
.quote-text {
  font-size: 12.5px; color: var(--bolha-meta); margin: 0; white-space: pre-wrap;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Pulo até a mensagem citada.
   Durava 1,4s e o contorno era fino demais: quando a tela terminava de rolar,
   o destaque já estava sumindo e o dono não conseguia ver QUAL mensagem era.
   Agora fica 3 segundos, com o fundo levemente tingido além do contorno, e a
   saída é suave para não piscar. */
@keyframes destaque-pulo {
  0%   { box-shadow: 0 0 0 0 rgba(0,168,132,0);   background-color: var(--realce-citada-forte); }
  12%  { box-shadow: 0 0 0 4px rgba(0,168,132,.75); background-color: var(--realce-citada-forte); }
  75%  { box-shadow: 0 0 0 4px rgba(0,168,132,.75); background-color: var(--realce-citada); }
  100% { box-shadow: 0 0 0 0 rgba(0,168,132,0);   background-color: transparent; }
}
.bubble.pulou {
  animation: destaque-pulo 3s ease-out;
  /* acima do vizinho, para o contorno não ficar escondido */
  position: relative; z-index: 2;
}

/* ============ MENU DA BOLHA ============ */
.msg-menu {
  position: absolute; top: -10px; display: none;
  background: var(--fundo-elevado); border-radius: 999px; padding: 4px 6px; gap: 2px;
  z-index: 3; border: 1px solid var(--linha); box-shadow: var(--sombra-media);
}
.bubble.out .msg-menu { left: -152px; }
.bubble.in  .msg-menu { right: -152px; }
@media (hover: hover) { .bubble:hover .msg-menu { display: flex; } }
.bubble.show-menu .msg-menu { display: flex; }
.msg-menu-btn {
  background: transparent; border: none; color: var(--texto-fraco); cursor: pointer;
  font-size: 14px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .1s; position: relative;
}
.msg-menu-btn:hover { background: var(--fundo-hover); color: var(--texto); }
.msg-menu-btn[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: var(--fundo-elevado); color: var(--texto);
  font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 10; box-shadow: var(--sombra-media); border: 1px solid var(--linha);
}
.msg-menu-btn:hover::after { opacity: 1; }

mark.search-hit { background: rgba(255,235,59,.55); color: inherit; padding: 0 1px; border-radius: 2px; }
.bubble.search-current mark.search-hit { background: #ffb800; color: #000; }
.bubble.search-current { box-shadow: 0 0 0 2px #ffb800; }

.reaction-picker { background: var(--fundo-elevado); box-shadow: var(--sombra-media); border: 1px solid var(--linha); }
.reaction-pick-btn {
  background: transparent; border: none; font-size: 22px; cursor: pointer;
  padding: 4px 6px; border-radius: 50%; transition: transform .1s, background .1s;
}
.reaction-pick-btn:hover { background: var(--fundo-hover); transform: scale(1.2); }

.edited-tag { font-size: 10px; color: var(--bolha-meta); font-style: italic; margin-right: 4px; }
.reaction-bubble {
  position: absolute; bottom: -12px; background: var(--fundo-elevado);
  border-radius: 999px; padding: 2px 8px; font-size: 13px; line-height: 1.2;
  border: 2px solid var(--fundo-app); z-index: 2; white-space: nowrap;
}
.bubble.out .reaction-bubble { left: 6px; }
.bubble.in  .reaction-bubble { right: 6px; }
/* 12px deixava a reação (que desce 12px) encostando na bolha seguinte. */
.bubble.has-reaction { margin-bottom: 20px; }

.reply-tick { background: var(--acento-forte); }
.modal-overlay { background: rgba(0,0,0,.7); }
.modal-card { background: var(--fundo-painel); box-shadow: var(--sombra-media); }
.drop-card { background: var(--fundo-painel); border: 2px dashed var(--acento-forte); color: var(--texto); }
.rec-bar { background: var(--fundo-barra); }
.rec-dot { color: #f15c6d; animation: pulsar 1s infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
.rec-cancel {
  background: transparent; border: none; color: #f15c6d; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.rec-cancel:hover { background: var(--fundo-hover); }

.btn-enviar {
  background: var(--acento); color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: filter .12s;
}
.btn-enviar:hover:not(:disabled) { filter: brightness(1.12); }
.btn-enviar:disabled { cursor: default; }

/* Aviso curto no rodapé da tela (substitui o alert do navegador) */
/* ============ AVISOS DO ZAPI ============ */
#maax-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.maax-toast {
  pointer-events: auto; position: relative; width: 360px; max-width: calc(100vw - 32px);
  border-radius: 14px; padding: 14px 16px 20px 14px;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden; color: #fff;
  animation: maaxToastIn .35s cubic-bezier(.34,1.56,.64,1);
}
.maax-toast.escuro {
  background: linear-gradient(135deg, #2D3550 0%, #3D2F5C 50%, #2A3D5E 100%);
  border: 1px solid rgba(193,232,255,.15);
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4),
              0 0 0 1px rgba(193,232,255,.05) inset, 0 1px 0 rgba(255,255,255,.08) inset;
}
.maax-toast.claro {
  background: linear-gradient(135deg, #1A1F2E 0%, #2A1F3E 50%, #1F2A3E 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
}
.maax-toast.saindo { animation: maaxToastOut .3s ease-in forwards; }
.maax-toast-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
  font-family: Arial, sans-serif;
  animation: maaxIconPulse 2s ease-in-out infinite;
}
.maax-toast-corpo { flex: 1; min-width: 0; }
.maax-toast-titulo { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; letter-spacing: -.01em; }
.maax-toast-texto { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.4; }
.maax-toast-x {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; padding: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .3s, border-color .2s;
}
.maax-toast-x:hover {
  background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4);
  transform: rotate(90deg);
}
.maax-toast-barra {
  position: absolute; bottom: 0; left: 14px; right: 14px; height: 3px;
  border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.08);
}
.maax-toast-barra > div { height: 100%; border-radius: 2px; animation: maaxProgressBar 5s linear forwards; }
@keyframes maaxToastIn  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes maaxToastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes maaxProgressBar { from { width: 100%; } to { width: 0%; } }
@keyframes maaxIconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 480px) {
  #maax-toast-container { bottom: 12px; right: 12px; left: 12px; }
  .maax-toast { width: 100%; }
}

/* Estado da conexão: pílula discreta que diz quando os dados chegaram. */
.conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; margin-right: 2px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 11px; line-height: 1; white-space: nowrap;
  color: var(--texto-fraco); background: transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.conn-pill:hover { background: var(--fundo-hover); color: var(--texto-secundario); }
.conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); flex-shrink: 0;
  transition: background .2s;
}
.conn-pill.atualizando .conn-dot { background: #d9a300; animation: conn-pulsa 1s ease-in-out infinite; }
.conn-pill.erro {
  color: #f15c6d; border-color: rgba(241,92,109,.35); background: rgba(241,92,109,.10);
}
.conn-pill.erro .conn-dot { background: #f15c6d; }
@keyframes conn-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Botão de atualizar: gira enquanto busca, para o clique ter resposta visível. */
#btn-refresh.girando svg { animation: gira 0.75s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ============ ANIMAÇÕES ============ */
#msgs-container > div.msg-wrapper { animation: msg-fade-in .18s ease-out; }
@keyframes msg-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#msgs-container > .skeleton-msg,
#msgs-container > .day-separator,
#msgs-container > .unread-marker { animation: none; }
#chat-pane:not(.hidden) { animation: pane-fade-in .2s ease-out; }
@keyframes pane-fade-in { from { opacity: 0; } to { opacity: 1; } }
button { transition: background .12s ease, color .12s ease, transform .12s ease, filter .12s ease; }
button:active { transform: scale(.96); }
#reply-bar:not(.hidden), #upload-bar:not(.hidden) { animation: bar-slide-in .18s ease-out; }
@keyframes bar-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.bubble img { max-height: 320px; image-orientation: from-image; border-radius: 6px; }
.bubble video { max-height: 320px; border-radius: 6px; }
#lightbox-content img { image-orientation: from-image; }
.lightbox-img {
  max-width: 95vw; max-height: 92vh;
  border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.6);
  display: block;
}
/* Miniatura ampliada: sem isto o navegador deixa a foto de perfil quadriculada. */
.lightbox-img.ampliada { image-rendering: auto; height: auto; }

/* Imagem muito alta (comprovante): abre em largura legível e rola. */
#lightbox-content.rola {
  overflow-y: auto; overflow-x: hidden;
  max-height: 100vh; max-width: 100vw;
  align-items: flex-start; padding: 16px 0 24px;
  scrollbar-width: thin;
}
.lightbox-img.alta {
  max-height: none; height: auto;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
@media (hover: hover) { .bubble:hover { box-shadow: 0 0 0 1px rgba(0,168,132,.3), var(--sombra-suave); } }

/* ======================================================
   MOBILE
   ====================================================== */
@media (max-width: 767px) {
  /* Trava de segurança: qualquer conteúdo largo demais fica contido em vez de
     empurrar a tela para o lado. Rolagem lateral no celular é o defeito que
     mais estraga a sensação de aplicativo. */
  html, body, #app { max-width: 100vw; overflow-x: hidden; }
  #main-pane { min-width: 0; }

  #sidebar { width: 100% !important; border-right: 0; }
  #main-pane { display: none !important; }
  body.chat-open #sidebar { display: none !important; }
  body.chat-open #main-pane { display: flex !important; }

  /* iOS dá zoom em input com fonte menor que 16px */
  input, textarea, select { font-size: 16px !important; }

  #msgs-container { padding: 12px 10px; }
  .bubble { max-width: 88%; font-size: 15px; }
  .bubble img, .bubble video { max-width: 78vw !important; max-height: 50svh !important; object-fit: contain; }

  .bubble.out .msg-menu { left: auto; right: 4px; top: auto; bottom: -38px; }
  .bubble.in  .msg-menu { right: auto; left: 4px; top: auto; bottom: -38px; }
  .msg-menu-btn::after { display: none; }
  .bubble.show-menu { margin-bottom: 52px; box-shadow: 0 0 0 2px var(--acento-forte); }

  #search-bar { gap: 4px !important; padding: 8px !important; }
  #search-count { display: none !important; }
  #btn-search-prev, #btn-search-next, #btn-search-close { width: 34px !important; height: 34px !important; }
  #lightbox-close { top: 12px !important; right: 12px !important; }
  /* No celular esta regra tinha !important e vencia a da imagem alta: um
     comprovante comprido era ESPREMIDO para caber em 80% da tela, em vez de
     abrir legível e rolar como acontece no computador. O :not() deixa a
     imagem alta de fora, e ela mantém o comportamento de rolagem. */
  #lightbox-content img:not(.alta), #lightbox-content video { max-width: 100vw !important; max-height: 80svh !important; }
  /* Largura cheia no celular: é o que dá para ler num comprovante. */
  #lightbox-content .lightbox-img.alta { width: 100vw !important; max-width: 100vw !important; max-height: none !important; border-radius: 0; }
  #lightbox-content.rola { padding: 0 0 40px; }
  .conv-popup { max-width: calc(100vw - 16px); }
  #upload-preview audio { max-width: 100% !important; width: 100%; min-width: 0; }
  #empty-state .w-32 { width: 96px; height: 96px; }
  #empty-state h2 { font-size: 18px; }
  #forward-modal > div { max-height: 92svh; max-width: 100%; }
  #msg-input { font-size: 16px !important; max-height: 96px; }
  .skel-bar-name { width: 60%; }
  #reaction-picker { max-width: 95vw; flex-wrap: wrap; }
  #drop-overlay { display: none !important; }
  /* O aviso sobe para não cobrir a caixa de mensagem. */
  #maax-toast-container { bottom: 88px; }

  .doc-card { min-width: 0; max-width: 74vw; }
  /* min-width:0 deixava o player encolher até o tamanho do conteúdo: num
     celular de 390px o balão inteiro ficava com 116px, com a barra de progresso
     espremida em nada. Um mínimo em proporção da tela resolve sem estourar em
     aparelho pequeno. */
  .audio-player { min-width: min(240px, 66vw); max-width: 74vw; }
  /* Esta regra escondia o telefone no celular desde a época em que o selo
     disputava a linha com ele. Caiu em 17/08/2026: o selo saiu do cabeçalho
     do celular (vive na faixa abaixo), a linha é toda do número, e o dono quer
     o número visível — "igual o WhatsApp": nome em cima, número embaixo. */

  /* O "Voltar pro robô" do cabeçalho SOME no celular: ele ficava em cima do
     nome do cliente, que aparecia como "F...". Quem faz o serviço aqui é o
     botão da faixa logo abaixo do cabeçalho.
     !important porque a classe .hidden do Tailwind é do mesmo peso e vem antes
     neste arquivo; sem isso, um dos dois venceria por ordem, não por intenção. */

  /* O botão saiu do cabeçalho e foi para a faixa de baixo, então não precisa
     mais ser espremido em 76px para caber ao lado do nome. */
  .btn-devolver { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

  /* Espaço é curto e o nome do cliente é o que mais importa: tudo em volta
     encolhe para ele sobrar. Com o cabeçalho de antes ele aparecia como "F...".
     Cada peça aqui vale entre 5 e 30 pixels de nome. */
  #chat-avatar { width: 34px; height: 34px; }
  .pane-header { gap: 5px; }
  .chave-bot { gap: 4px; }
  .chave-rotulo { font-size: 9.5px; letter-spacing: 0; }
  .chave-trilho { width: 36px; height: 20px; border-radius: 10px; }
  .chave-bola { width: 16px; height: 16px; }
  .chave-bot.ligado .chave-bola { transform: translateX(16px); }
  .icon-btn { padding: 5px; }
  /* O selo "VOCÊ RESPONDE" repete o que a faixa logo abaixo já diz por extenso.
     Com a faixa na tela ele só ocupa espaço. */
  .quem-pill.repetido { display: none; }
}

/* Figurinha não tem bolha no WhatsApp: fica solta sobre o papel de parede */
.bubble.sem-fundo { background: transparent !important; box-shadow: none !important; padding: 0; }
.bubble.sem-fundo .meta { background: rgba(0,0,0,.35); color: #fff; border-radius: 8px; padding: 1px 6px; }
[data-tema="claro"] .bubble.sem-fundo .meta { background: rgba(255,255,255,.85); color: var(--texto-fraco); }

/* Foco de teclado visível. Os campos usam focus:outline-none para não mostrar
   o contorno azul feio do navegador, mas isso deixava quem navega por Tab sem
   saber onde está. :focus-visible só aparece na navegação por teclado, então o
   clique de mouse continua limpo. */
input:focus-visible, textarea:focus-visible, button:focus-visible,
[tabindex]:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Prévia da última mensagem: já cortava, mas no meio da letra. */
.conv-row .preview, .conv-row .name { text-overflow: ellipsis; }

/* Mensagem só com emoji aparece grande, como no WhatsApp */
.bubble.so-emoji { font-size: 34px; line-height: 1.15; background: transparent !important; box-shadow: none !important; }
.bubble.so-emoji .meta { font-size: 10.5px; }

/* ======================================================
   SÓ NO COMPUTADOR / SÓ NO CELULAR
   ======================================================
   Este arquivo carrega DEPOIS do tailwind.css, então .icon-btn { display: flex }
   passava por cima do "hidden md:flex" do Tailwind: o ✕ de fechar aparecia no
   celular e a seta de voltar aparecia no computador, os dois onde não deviam.
   Misturar as duas fontes de estilo para a MESMA propriedade é o problema —
   aqui o display desses botões tem um dono só. */
.so-computador { display: none; }
.so-celular { display: flex; }
@media (min-width: 768px) {
  .so-computador { display: flex; }
  .so-celular { display: none; }
}

/* Cortina de abertura da conversa (17/08/2026): a montagem acontece atrás dela */
#cortina-conversa {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease;
}
#cortina-conversa .cortina-miolo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(0,0,0,.45); padding: 14px 22px; border-radius: 14px;
}
#cortina-conversa .cortina-giro {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #22c55e;
  animation: cortina-gira .7s linear infinite;
}
#cortina-conversa .cortina-texto { font-size: 12px; color: #cbd5e1; }
@keyframes cortina-gira { to { transform: rotate(360deg); } }

/* Quem responde, versão celular (17/08/2026): o selo por extenso é só de
   computador; no celular ele cedia a linha inteira e o NÚMERO do cliente não
   cabia. O estado virou um ponto colorido no canto do avatar. */
.quem-pill { display: none; }
@media (min-width: 768px) { .quem-pill { display: inline-block; } }

.avatar-com-estado { position: relative; }
/* O ponto no avatar durou uma hora (17/08/2026): pontinho verde em avatar é
   linguagem universal de "online", e o dono leu exatamente assim. O estado no
   celular vive por extenso na faixa abaixo do cabeçalho, como um cardzinho. */
.quem-dot { display: none; }

/* O cardzinho de estado dentro da faixa do celular: a mesma cara do selo do
   computador, no lugar onde cabe. */
.faixa-devolver .quem-pill { display: inline-block; }
.faixa-devolver.faixa-desligado #faixa-devolver-texto { color: #f15c6d; font-weight: 600; }