/* ==========================================================================
   Conversas (Beta) - estilos escopados (prefixo .cb-)
   Etapas 1 e 2: base, lista, filtros, busca, abertura de conversa e leitura.
   "Chrome" (lista, cabecalho, filtros) usa os tokens do painel (var(--brand),
   --ink, --line, --canvas, --paper) com valores de reserva. A AREA DE MENSAGENS
   preserva a cara WhatsApp (wallpaper + bolhas verdes/brancas com rabinho).
   ========================================================================== */
/* Altura explicita (100dvh), igual a aba Conversas atual: dentro do q-page do Quasar,
   height:100% nao "desce" e a tela colapsa para zero (fica em branco). */
.cb-root{
  /* Para lembrar o WhatsApp Web ao maximo, redefinimos aqui a fonte e o accent
     (verde do WhatsApp) SO nesta aba. Como as regras usam var(--brand ...), basta
     trocar as variaveis num lugar so que tudo muda junto; o resto do painel segue
     com o laranja da marca. (Pedido do dono, 28/09.) */
  --fonte:"Segoe UI","Helvetica Neue",Helvetica,"Lucida Grande",Arial,sans-serif;
  --brand:#00a884;          /* verde accent do WhatsApp Web */
  --brand-soft:#f0f2f5;     /* cinza claro do item ativo/realce, como no WhatsApp */
  --brand-contrast:#ffffff;
  /* O Quasar 2 pinta color="primary" (botao enviar, microfone, spinners, toggles)
     usando esta variavel. Trocada aqui, o accent verde chega tambem nesses botoes,
     sem mexer no resto do painel. */
  --q-primary:#00a884;
  height:100vh;height:100dvh;min-height:0;display:flex;overflow:hidden;background:var(--paper,#fff);
  font-family:var(--fonte);color:var(--ink-2,#5a5a5a)}

/* ================= Coluna esquerda: lista ================= */
.cb-lista{width:372px;max-width:42%;min-width:288px;border-right:1px solid var(--line,#ebebeb);
  display:flex;flex-direction:column;min-height:0;background:var(--paper,#fff)}
/* Sao 4 botoes redondos ao lado do titulo: em coluna estreita o titulo precisa poder
   encolher, senao o conteudo passa da largura da lista. */
.cb-lista-topo{padding:12px 14px;border-bottom:1px solid var(--line,#ebebeb);background:#f0f2f5;
  display:flex;align-items:center;justify-content:space-between;gap:4px;flex:0 0 auto}
.cb-titulo{font-weight:800;color:var(--ink,#2b2b2b);font-size:16px;display:flex;align-items:center;gap:8px;
  min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-tag-beta{flex:0 0 auto}
.cb-tag-beta{font-size:10px;font-weight:800;color:var(--brand,#ff3200);border:1px solid var(--brand,#ff3200);
  border-radius:999px;padding:1px 7px;text-transform:uppercase;letter-spacing:.04em}
.cb-busca{padding:10px 12px 4px;flex:0 0 auto}
/* Busca no estilo WhatsApp Web: pilula cinza clara, lupa a esquerda, sem borda dura */
.cb-busca .q-field--outlined .q-field__control{border-radius:999px;background:#f0f2f5}
.cb-busca .q-field--outlined .q-field__control:before{border-color:transparent}
.cb-busca .q-field--outlined .q-field__control:hover:before{border-color:transparent}
.cb-busca .q-field--outlined.q-field--focused .q-field__control:after{border-color:var(--brand,#00a884)}
.cb-busca .q-field__prepend .q-icon{color:#54656f}
.cb-filtros{display:flex;gap:6px;flex-wrap:wrap;padding:4px 12px 10px;border-bottom:1px solid var(--line,#ebebeb);flex:0 0 auto}
.cb-chip{font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;cursor:pointer;
  border:1px solid var(--line,#e1e1e1);color:var(--ink-2,#5a5a5a);background:var(--paper,#fff);transition:.15s}
.cb-chip:hover{background:var(--canvas,#f5f6f6)}
.cb-chip.on{background:var(--brand,#ff3200);border-color:var(--brand,#ff3200);color:var(--brand-contrast,#fff)}
.cb-scroll{flex:1;min-height:0;overflow-y:auto}
.cb-scroll::-webkit-scrollbar{width:8px}
.cb-scroll::-webkit-scrollbar-thumb{background:#d7d8dd;border-radius:8px}

.cb-estado{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;text-align:center;color:var(--ink-3,#9d9d9d);font-size:14px}

.cb-item{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line,#f1f1f1);
  transition:background .15s;border-left:3px solid transparent}
.cb-item:hover{background:var(--canvas,#f5f6f6)}
.cb-item.ativa{background:var(--brand-soft,#fff0ec);border-left-color:var(--brand,#ff3200)}
.cb-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px}
.cb-av img{width:100%;height:100%;object-fit:cover;display:block}
.cb-item-corpo{flex:1;min-width:0}
.cb-item-lin1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cb-nome{font-weight:600;color:var(--ink,#111b21);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-hora{font-size:11px;color:var(--ink-3,#8a94a3);flex:0 0 auto}
.cb-item-lin2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.cb-prev{font-size:13px;color:var(--ink-3,#8a94a3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cb-badge{background:var(--brand,#25d366);color:#fff;border-radius:999px;min-width:18px;height:18px;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex:0 0 auto}
.cb-emoji-box{min-width:300px;min-height:60px}
.cb-emoji-box emoji-picker{--border-size:0;width:340px;max-width:92vw;height:360px;color-scheme:light}
.cb-emoji-msg{padding:18px;font-size:13px;color:#667781}
.cb-gravando{flex:1 1 auto;display:flex;align-items:center;gap:8px;font-size:14px;color:#b91c1c;font-variant-numeric:tabular-nums;padding:0 6px}
.cb-rec-ponto{width:10px;height:10px;border-radius:50%;background:#dc2626;animation:cbRec 1s ease-in-out infinite}
@keyframes cbRec{50%{opacity:.25}}
.cb-wpp-off{display:flex;align-items:center;gap:8px;margin:0 10px 6px;padding:8px 10px;border-radius:8px;
  background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12px;line-height:1.35}
.cb-wpp-off-txt{flex:1 1 auto;min-width:0}
.cb-selos{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;align-items:center}
.cb-selo{display:inline-flex;align-items:center;gap:3px;line-height:1.2;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px;border:1px solid var(--line,#ddd);color:var(--ink-3,#667781)}
.cb-selo .q-icon{font-size:11px;flex:0 0 auto}
/* situacao (igual aos filtros): Comigo / Com o robo / Sem atendimento */
.cb-selo.sit{border-radius:4px;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px}
.cb-selo.comigo{background:#ecfdf5;color:#047857;border-color:#d1fae5}
.cb-selo.robo{background:#fff7ed;color:#ea580c;border-color:#ffedd5}
.cb-selo.sem{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.cb-selo.crono{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.cb-selo.crono.urgente{background:#fde8e8;color:#b42318;border-color:#f7cdc9}
.cb-selo.mudo{background:#f3f4f6;color:#6b7280;border-color:#e5e7eb;border-radius:4px;padding:1px 4px}
.cb-selo.cor{border-radius:12px;font-weight:600}

/* ================= Coluna direita: conversa ================= */
.cb-chat{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--canvas,#f5f5f5);position:relative}
/* botao redondo flutuante "descer para a ultima mensagem", como no WhatsApp Web */
.cb-descer{position:absolute;right:20px;bottom:84px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#54656f;box-shadow:0 2px 5px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;z-index:6}
.cb-descer:hover{color:#111b21}
/* tela de "nenhuma conversa aberta" no estilo WhatsApp Web: icone grande num circulo,
   titulo leve, texto discreto e uma faixa verde fina embaixo */
.cb-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--ink-3,#54656f);padding:24px;background:#f7f8fa;
  border-bottom:5px solid var(--brand,#00a884);position:relative}
.cb-vazio-ic{width:118px;height:118px;border-radius:50%;background:#e9edef;color:#8696a0;
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.cb-vazio-t{font-size:26px;font-weight:300;color:#41525d;margin-bottom:12px}
.cb-vazio-p{font-size:14px;color:#667781;max-width:420px;line-height:1.5}
.cb-vazio-lock{position:absolute;bottom:22px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8696a0}

.cb-chat-topo{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:#f0f2f5;border-bottom:1px solid var(--line,#ebebeb)}
.cb-voltar{display:none}
.cb-chat-nome{font-weight:700;color:var(--ink,#111b21);font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-chat-fone{font-size:12px;color:var(--ink-3,#8a94a3)}
/* quando ha presenca (online/digitando/visto por ultimo), fica verde igual ao WhatsApp */
.cb-chat-fone.presente{color:#00a884}
.cb-chat-acoes{margin-left:auto;display:flex;align-items:center;gap:2px}

.cb-busca-msg{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;
  background:var(--paper,#fff);border-bottom:1px solid var(--line,#ebebeb)}
.cb-busca-msg input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:#111b21}
.cb-busca-msg-cont{font-size:12px;color:#667781;white-space:nowrap}
.cb-fixada{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;
  background:#fff7ed;border-bottom:1px solid #fed7aa}
.cb-fixada-info{flex:1;min-width:0}
.cb-fixada-rot{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--q-primary)}
.cb-fixada-txt{font-size:13px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-dim{opacity:.35}
.cb-hit-ativo .cb-bolha,.cb-hit-ativo.cb-aviso span{box-shadow:0 0 0 2px #f59e0b}
.cb-flash .cb-bolha,.cb-flash.cb-aviso span{animation:cbFlash 1.5s ease}
@keyframes cbFlash{0%,60%{box-shadow:0 0 0 3px rgba(245,158,11,.75)}100%{box-shadow:0 0 0 3px rgba(245,158,11,0)}}
.cb-quote.clicavel{cursor:pointer}
.cb-lock{flex:0 0 auto;background:#fef2f2;color:#b91c1c;border-bottom:1px solid #fecaca;
  padding:7px 14px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
/* faixa rapida "Voce assumiu esta conversa", logo acima da caixa de escrever */
.cb-assumiu{flex:0 0 auto;background:#fff7ed;color:#c2410c;border-top:1px solid #fed7aa;
  padding:7px 14px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;
  animation:cbSobe .18s ease-out}
@keyframes cbSobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* acoes em massa: caixinha em cada conversa e barra no topo da lista */
.cb-check{flex:0 0 auto;display:flex;align-items:center;margin-left:-4px}
.cb-item.marcada{background:#eef6ff}
.cb-item.ativa.marcada{background:var(--brand-soft,#fff0ec)} /* aberta manda no fundo */
.cb-massa{display:flex;align-items:center;gap:2px;padding:4px 8px 4px 10px;flex:0 0 auto;
  background:#eef6ff;border-bottom:1px solid var(--line,#ebebeb)}
.cb-massa-txt{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#1d4ed8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-opt-lin{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* area de mensagens: wallpaper WhatsApp (com reserva de cor caso a imagem falte) */
/* Fundo do WhatsApp Web (tom claro atual) com um padrao de rabiscos PROPRIO
   (nao o do WhatsApp, que e protegido): SVG leve e ladrilhavel, discreto. */
.cb-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 6%;
  background-color:#efeae2;background-image:url('/img/wpp-doodle.svg');background-repeat:repeat}
.cb-msgs::-webkit-scrollbar{width:8px}
.cb-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:8px}

.cb-vermais{display:flex;justify-content:center;margin:2px 0 12px}
.cb-vermais button{border:0;background:rgba(255,255,255,.85);color:#3b4a54;font-size:12.5px;font-weight:600;
  border-radius:999px;padding:5px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12)}

.cb-data{display:flex;justify-content:center;margin:10px 0}
.cb-data span{background:#e9edef;color:#54656f;font-size:12px;font-weight:600;border-radius:8px;padding:4px 12px;box-shadow:0 1px 0.5px rgba(0,0,0,.08);text-transform:uppercase;letter-spacing:.02em}

.cb-aviso{display:flex;justify-content:center;margin:8px 0}
.cb-aviso span{background:#fff2e6;color:#8a5a00;font-size:12px;border-radius:8px;padding:5px 12px;max-width:80%;text-align:center}
.cb-aviso.apagada span{background:rgba(255,255,255,.7);color:#8696a0;font-style:italic}

.cb-lin{display:flex;margin-top:10px;animation:cbBolhaEntra .16s ease-out}
/* fade suave so na opacidade: cada bolha aparece uma vez, sem "pular" quando o envio confirma */
@keyframes cbBolhaEntra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .cb-lin{animation:none} }
.cb-lin.grp{margin-top:3px}
.cb-lin.in{justify-content:flex-start}
.cb-lin.out{justify-content:flex-end}
.cb-bolha{max-width:75%;padding:6px 9px 5px;border-radius:7.5px;position:relative;
  box-shadow:0 1px 0.5px rgba(0,0,0,.13);font-size:14.2px;color:#111b21;word-break:break-word;line-height:1.35}
.cb-lin.in .cb-bolha{background:#fff;border-radius:0 7.5px 7.5px 7.5px}
.cb-lin.out .cb-bolha{background:#d9fdd3;border-radius:7.5px 0 7.5px 7.5px}
.cb-lin.grp.in .cb-bolha{border-radius:7.5px}
.cb-lin.grp.out .cb-bolha{border-radius:7.5px}
.cb-bolha .cb-txt a{color:#027eb5}
.cb-bolha-rodape{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;
  font-size:11px;color:#667781;line-height:1}
/* Tiques no formato do WhatsApp (SVG proprio via tickSvg): enviado (um risco),
   entregue (dois riscos cinza), visualizado (dois riscos azuis) e o relogio de
   "enviando". A cor sai daqui e o SVG usa currentColor. */
.cb-tick{color:#8696a0;display:inline-flex;align-items:center}
.cb-tick svg{display:block}
.cb-tick.lido{color:#53bdeb}
.cb-tick.erro{color:#e5484d}
/* tique antes da previa na lista lateral (igual ao WhatsApp Web) */
.cb-tick-prev{margin-right:3px;vertical-align:-2px}
.cb-tick-prev svg{width:15px;height:14px}

.cb-quote{border-left:3px solid #06cf9c;background:rgba(0,0,0,.06);border-radius:4px;
  padding:3px 8px;margin-bottom:4px;display:flex;flex-direction:column;overflow:hidden}
.cb-quote-sender{font-size:11.5px;font-weight:700;color:#06cf9c}
.cb-quote-txt{font-size:12.5px;color:#54656f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cb-anexo{margin-top:2px}
.cb-anexo img{max-width:260px;max-height:320px;border-radius:6px;display:block;cursor:zoom-in}
.cb-anexo video{max-width:280px;border-radius:6px;display:block}
.cb-anexo audio{width:250px;margin:2px 0}
.cb-arq{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.04);border-radius:6px;padding:8px 10px;margin-top:2px}
.cb-arq a{color:#027eb5;font-size:13px;text-decoration:none;font-weight:600}

.cb-lig{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:8px 12px;
  box-shadow:0 1px 0.5px rgba(0,0,0,.13);font-size:13px;color:#111b21;max-width:75%}
.cb-lig.perdida{color:#ea4335}

/* rodape informativo (o composer chega na Etapa 3) */
.cb-compose-soon{flex:0 0 auto;background:var(--paper,#fff);border-top:1px solid var(--line,#ebebeb);
  padding:10px 14px;text-align:center;color:var(--ink-3,#9d9d9d);font-size:12.5px}

/* ================= Ficha do contato (painel direito) ================= */
.cb-ficha{width:300px;flex:0 0 auto;border-left:1px solid var(--line,#ebebeb);background:var(--paper,#fff);
  display:flex;flex-direction:column;min-height:0}
.cb-ficha-topo{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line,#ebebeb)}
.cb-ficha-corpo{flex:1;min-height:0;overflow-y:auto;padding:14px}
.cb-ficha-nome{font-weight:700;color:var(--ink,#2b2b2b);font-size:16px;text-align:center;margin-top:8px}
.cb-ficha-fone{color:var(--ink-3,#8a94a3);font-size:13px;text-align:center;margin-top:2px}
.cb-ficha-sec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3,#9d9d9d);margin:16px 0 8px}
.cb-ped{border:1px solid var(--line,#ebebeb);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:13px;
  display:flex;align-items:center;gap:8px}
.cb-ped-txt{flex:1;min-width:0}
.cb-ped b{color:var(--ink,#2b2b2b)}

/* ================= Lightbox de imagem ================= */
.cb-lightbox{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.cb-lightbox img{max-width:92vw;max-height:92vh;border-radius:6px}

@media(max-width:900px){ .cb-ficha{display:none} }
@media(max-width:767px){
  .cb-lista{width:100%;max-width:100%;min-width:0}
  .cb-chat{display:none}
  .cb-voltar{display:inline-flex}
  .cb-root.tem-aberta .cb-lista{display:none}
  .cb-root.tem-aberta .cb-chat{display:flex}
}

/* ===================== Etapa 3: envio e acoes ===================== */
/* nota interna (aviso central laranja) */
.cb-bolha.pend{opacity:.85}
.cb-bolha.falhou{background:#fde8e8 !important;border:1px solid #f5b5b5}
.cb-falhou{font-size:11.5px;color:#b42318;margin-top:3px}
.cb-falhou a{color:#b42318;font-weight:700}

/* setinha de opcoes no canto superior direito da bolha, ao passar o mouse (como no WhatsApp Web).
   Um degrade na cor da propria bolha cobre o texto atras da setinha, deixando-a legivel. */
.cb-bolha{position:relative}
.cb-msg-acts{position:absolute;top:0;right:0;display:none;padding:0 0 4px 20px;border-top-right-radius:7.5px}
.cb-msg-acts .q-btn{color:#54656f}
.cb-lin:hover .cb-msg-acts{display:flex}
.cb-lin.in .cb-msg-acts{background:linear-gradient(90deg,rgba(255,255,255,0),#fff 55%)}
.cb-lin.out .cb-msg-acts{background:linear-gradient(90deg,rgba(217,253,211,0),#d9fdd3 55%)}

/* barra de resposta (citacao) acima do composer */
.cb-reply-bar{display:flex;align-items:center;gap:8px;background:#f0f2f5;border-left:4px solid #25d366;
  border-radius:6px;padding:6px 8px;margin:0 0 6px}
.cb-reply-info{flex:1;min-width:0}
.cb-reply-sender{display:block;font-size:11.5px;font-weight:700;color:#0b7d5a}
.cb-reply-txt{display:block;font-size:12.5px;color:#54656f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* respostas rapidas (dropdown do "/") */
.cb-qr-drop{position:absolute;left:12px;right:12px;bottom:58px;background:#fff;border:1px solid var(--line,#e5e7eb);
  border-radius:10px;box-shadow:0 -2px 12px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;z-index:20}
.cb-qr-item{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line,#f1f1f1);color:var(--ink-2,#5a5a5a)}
.cb-qr-item:hover{background:var(--canvas,#f5f6f6)}
.cb-qr-item b{color:var(--brand,#ff3200)}

/* composer */
.cb-composer{position:relative;flex:0 0 auto;background:#f0f2f5;border-top:1px solid var(--line,#e0e0e0);padding:8px 12px}
.cb-composer-lin{display:flex;align-items:flex-end;gap:6px}
.cb-textarea{flex:1;min-width:0;border:0;outline:0;resize:none;border-radius:20px;padding:10px 14px;
  font:14.5px/1.35 inherit;max-height:120px;background:#fff;color:#111b21}
.cb-textarea.nota{background:#fff6e6;box-shadow:inset 0 0 0 1px #ffd98a}
.cb-nota-aviso{font-size:11.5px;color:#8a5a00;margin:0 0 6px 4px}

/* reacoes */
.cb-react-row{display:flex;gap:2px;padding:5px 8px;border-bottom:1px solid var(--line,#f1f1f1)}
.cb-react{font-size:19px;cursor:pointer;padding:2px 4px;border-radius:6px;transition:transform .1s}
.cb-react:hover{background:var(--canvas,#f5f6f6);transform:scale(1.2)}
.cb-reacao{position:absolute;bottom:-11px;right:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;
  font-size:13px;line-height:1;padding:2px 5px;box-shadow:0 1px 2px rgba(0,0,0,.15);cursor:pointer}
.cb-lin.in .cb-reacao{right:auto;left:8px}

/* Em telas de toque (sem hover confiavel), as acoes da mensagem ficam sempre visiveis */
@media (hover: none), (pointer: coarse){
  .cb-msg-acts,.cb-lin.in .cb-msg-acts,.cb-lin.out .cb-msg-acts{display:flex;position:static;top:auto;right:auto;
    margin-top:4px;padding:0;box-shadow:none;border:0;background:transparent}
}

/* Meu WhatsApp (perfil da instancia) */
.cb-mywa-foto{text-align:center;margin-bottom:18px}
/* --brand-soft e quase branco no design system: sobre o card branco o circulo sumia.
   A borda usa a cor da marca para o avatar ficar visivel em qualquer loja. */
.cb-mywa-av{position:relative;width:110px;height:110px;border-radius:50%;margin:0 auto;cursor:pointer;
  overflow:hidden;border:3px solid var(--brand,#ff3200);background:var(--brand-soft,#fff0ec)}
.cb-mywa-av:focus-visible{outline:2px solid var(--brand,#ff3200);outline-offset:3px}
.cb-mywa-av img{width:100%;height:100%;object-fit:cover;display:block}
.cb-mywa-ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--brand,#ff3200);font-size:42px;font-weight:700}
.cb-mywa-falhou{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  padding:10px 12px;border-radius:10px;background:#fff6e6;border:1px solid #ffd98a;
  font-size:13px;color:#8a5a00;line-height:1.35}
.cb-mywa-falhou > div{flex:1;min-width:150px}
/* No celular nao ha hover: a camera fica sempre visivel, discreta no canto */
.cb-mywa-cam{position:absolute;inset:0;background:rgba(0,0,0,.4);color:#fff;display:flex;
  align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.cb-mywa-av:hover .cb-mywa-cam{opacity:1}
@media (hover: none), (pointer: coarse){
  .cb-mywa-cam{inset:auto 0 0 0;height:32px;background:rgba(0,0,0,.45);opacity:1}
}
.cb-mywa-dica{font-size:11px;color:#9ca3af;margin-top:8px;line-height:1.4}
.cb-mywa-info{margin-top:18px;padding:12px;background:#f9fafb;border-radius:10px;font-size:13px;color:#374151}
.cb-mywa-info > div{display:flex;justify-content:space-between;align-items:center}
.cb-mywa-info > div + div{margin-top:4px}
.cb-mywa-info span{color:#6b7280}

/* abas Conversas / Grupos */
.cb-abas{display:flex;gap:4px;padding:8px 12px 0;flex:0 0 auto}
.cb-aba{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font-size:13px;font-weight:700;padding:7px 8px;border-radius:9px;user-select:none;
  color:var(--ink-2,#5a5a5a);background:var(--canvas,#f5f6f6);border:1px solid transparent;transition:.15s}
.cb-aba:not(.on):hover{background:var(--line,#ececec)}
.cb-aba.on{background:var(--brand,#ff3200);border-color:var(--brand,#ff3200);color:var(--brand-contrast,#fff)}
.cb-aba.on:hover{filter:brightness(1.08)}

/* nome de quem escreveu, dentro da bolha do grupo */
.cb-autor{font-size:12.5px;font-weight:700;color:#06803f;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* janela de detalhes do grupo */
.cb-grp-topo{text-align:center;padding:22px 18px 16px;border-bottom:1px solid var(--line,#ececec)}
.cb-grp-av{width:96px;height:96px;border-radius:50%;margin:0 auto 10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;
  background:var(--brand-soft,#fff0ec);color:var(--brand,#ff3200)}
.cb-grp-av img{width:100%;height:100%;object-fit:cover;display:block}
.cb-grp-nome{font-size:17px;font-weight:700;color:var(--ink,#111b21);word-break:break-word}
.cb-grp-sub{font-size:12.5px;color:var(--ink-3,#8a94a3);margin-top:2px}
.cb-grp-rot{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3,#9d9d9d);margin:2px 0 8px}
.cb-grp-p{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line,#f3f3f3)}
.cb-grp-p:last-child{border-bottom:0}
.cb-grp-p-av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;background:#e6e8eb;color:#5a6472}
/* quem ja esta salvo na agenda da loja ganha o tom da marca */
.cb-grp-p-av.sal{background:var(--brand-soft,#fff0ec);color:var(--brand,#ff3200)}
.cb-grp-p-n{font-size:14px;color:var(--ink,#111b21);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-grp-p-f{font-size:12px;color:var(--ink-3,#8a94a3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-grp-tag{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;
  padding:2px 7px;background:#e8f5ee;color:#06803f}
.cb-grp-tag.criador{background:#fff4e5;color:#b45309}

/* ============================ MODO ESCURO ============================
   Escopado a .cb-root.escuro (so esta aba). Redefinimos os tokens de cor
   (que a maioria das regras ja usa) e, por cima, as poucas cores fixas
   das superficies do WhatsApp: cabecalhos, area de mensagens e bolhas.
   Paleta do WhatsApp Web escuro. O verde de destaque (--brand) nao muda.
   Observacao: os menus suspensos do Quasar (engrenagem, opcoes da mensagem,
   seletor de emoji) sao desenhados fora desta caixa e seguem claros. */
.cb-root.escuro{
  --paper:#111b21;      /* fundo das colunas (lista, ficha) */
  --canvas:#0b141a;     /* fundo da area de conversa e hover */
  --ink:#e9edef;        /* texto forte */
  --ink-2:#d1d7db;      /* texto medio */
  --ink-3:#8696a0;      /* texto discreto */
  --line:#2a3942;       /* bordas e divisorias */
  --brand-soft:#2a3942; /* item ativo/realce */
}
/* superficies claras fixas -> cinza-azulado escuro do WhatsApp */
.cb-root.escuro .cb-lista-topo,
.cb-root.escuro .cb-chat-topo,
.cb-root.escuro .cb-composer{background:#202c33}
.cb-root.escuro .cb-composer{border-top-color:#2a3942}
.cb-root.escuro .cb-lista-topo,
.cb-root.escuro .cb-chat-topo{border-bottom-color:#2a3942}
.cb-root.escuro .cb-busca .q-field--outlined .q-field__control{background:#2a3942}
.cb-root.escuro .cb-busca .q-field__prepend .q-icon{color:#8696a0}
.cb-root.escuro .cb-busca .q-field__native{color:#e9edef}
.cb-root.escuro .cb-busca-msg input{color:#e9edef}
/* area de mensagens: fundo escuro liso (o rabisco bege nao combina no escuro) */
.cb-root.escuro .cb-msgs{background-color:#0b141a;background-image:none}
.cb-root.escuro .cb-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}
.cb-root.escuro .cb-scroll::-webkit-scrollbar-thumb{background:#374248}
/* bolhas */
.cb-root.escuro .cb-bolha{color:#e9edef}
.cb-root.escuro .cb-lin.in .cb-bolha{background:#202c33}
.cb-root.escuro .cb-lin.out .cb-bolha{background:#005c4b}
.cb-root.escuro .cb-bolha-rodape{color:#8696a0}
.cb-root.escuro .cb-bolha .cb-txt a,
.cb-root.escuro .cb-arq a{color:#53bdeb}
.cb-root.escuro .cb-lin.in .cb-msg-acts{background:linear-gradient(90deg,rgba(32,44,51,0),#202c33 55%)}
.cb-root.escuro .cb-lin.out .cb-msg-acts{background:linear-gradient(90deg,rgba(0,92,75,0),#005c4b 55%)}
.cb-root.escuro .cb-msg-acts .q-btn{color:#8696a0}
.cb-root.escuro .cb-quote{background:rgba(255,255,255,.08)}
.cb-root.escuro .cb-quote-txt{color:#8696a0}
.cb-root.escuro .cb-arq{background:rgba(255,255,255,.06)}
.cb-root.escuro .cb-lig{background:#202c33;color:#e9edef}
.cb-root.escuro .cb-reacao{background:#2a3942;border-color:#111b21}
/* divisoria de data e "ver anteriores" */
.cb-root.escuro .cb-data span{background:#182229;color:#8696a0;box-shadow:none}
.cb-root.escuro .cb-vermais button{background:#202c33;color:#e9edef;box-shadow:0 1px 2px rgba(0,0,0,.4)}
/* botao flutuante de descer */
.cb-root.escuro .cb-descer{background:#202c33;color:#e9edef;box-shadow:0 2px 5px rgba(0,0,0,.5)}
/* barra de escrever: campo e respostas rapidas */
.cb-root.escuro .cb-textarea{background:#2a3942;color:#e9edef}
.cb-root.escuro .cb-textarea::placeholder{color:#8696a0}
.cb-root.escuro .cb-textarea.nota{background:#3a3320;box-shadow:inset 0 0 0 1px #6b5a2a}
.cb-root.escuro .cb-nota-aviso{color:#e0b34d}
.cb-root.escuro .cb-reply-bar{background:#202c33}
.cb-root.escuro .cb-reply-txt{color:#8696a0}
.cb-root.escuro .cb-qr-drop{background:#233138;border-color:#2a3942;box-shadow:0 -2px 12px rgba(0,0,0,.5)}
.cb-root.escuro .cb-qr-item{color:#d1d7db;border-bottom-color:#2a3942}
.cb-root.escuro .cb-qr-item:hover{background:#2a3942}
/* acoes em massa (azul claro -> azul escuro) */
.cb-root.escuro .cb-item.marcada{background:#0f2a3a}
.cb-root.escuro .cb-massa{background:#0f2a3a;border-bottom-color:#2a3942}
.cb-root.escuro .cb-massa-txt{color:#8ab4f8}
/* tela de nenhuma conversa aberta */
.cb-root.escuro .cb-vazio{background:#0b141a}
.cb-root.escuro .cb-vazio-ic{background:#202c33;color:#8696a0}
.cb-root.escuro .cb-vazio-t{color:#e9edef}
.cb-root.escuro .cb-vazio-p{color:#8696a0}
/* ficha do contato e detalhes do grupo */
.cb-root.escuro .cb-mywa-info{background:#182229;color:#d1d7db}
.cb-root.escuro .cb-mywa-info span{color:#8696a0}
.cb-root.escuro .cb-grp-p-av{background:#2a3942;color:#aebac1}