/* ============================================================
   NeuralDesk — sistema de design (v11)
   Consolidação de um CSS que tinha crescido em camadas (dois
   :root diferentes, dezenas de cores quase-iguais espalhadas,
   ajustes pontuais soltos no fim do arquivo). Este arquivo é uma
   única passada coerente: mesmos seletores de sempre — nada foi
   renomeado, então nenhum JS precisou mudar — só o tratamento
   visual. --channel, --tag e --bar continuam sendo definidas
   inline pelo JavaScript por instância; todo o resto é token
   fixo deste arquivo.
   ============================================================ */

:root{
  /* Superfícies — recalibradas para bater com o WhatsApp Web de verdade
     (pedido do usuário: layout o mais parecido possível), mantendo a
     mesma escala/hierarquia de antes — só os valores mudaram. */
  /* v10.0.138 — fundo #161717 nas duas marcas; superfícies em cinza neutro na mesma família. */
  --bg:#161717;
  --surface-1:#1C1D1D;   /* barra lateral, cabeçalhos fixos */
  --surface-2:#242626;   /* cards, painéis, fila, bolha recebida */
  --surface-3:#2D2F2F;   /* hover / elemento ativo */
  --surface-4:#363939;   /* elevado: modais, menus flutuantes */
  --line:#2A2C2C;
  --line-soft:#202222;

  /* Texto */
  --text:#E9EDF3;
  --text-soft:#D1D7DB;
  --muted:#94A3B8;
  --muted-2:#64748B;

  /* Acento — verde do próprio WhatsApp, de propósito, já que o pedido é
     parecer com o WhatsApp Web mesmo (não é mais o verde-menta evitando
     neon de antes — aqui a semelhança visual é o objetivo). */
  --accent:#2563FF;
  --accent-strong:#3B74FF;
  --accent-ink:#FFFFFF;
  --accent-soft:#14234A;

  /* Bolhas de mensagem — o verde de bolha do WhatsApp é mais escuro que o
     verde de destaque da interface; são cores distintas de propósito. */
  --bubble-out:#1D3FA8;
  --bubble-in:var(--surface-2);

  /* Estados */
  --warn:#F0AC55;
  --warn-soft:#332512;
  --danger:#F2748A;
  --danger-soft:#331920;
  --violet:#8C86FF;
  --violet-soft:#1E1C3A;

  /* Compatibilidade: nomes antigos usados em poucos pontos do CSS */
  --panel:var(--surface-2);
  --panel2:var(--surface-3);
  --green:var(--accent);
  --blue:var(--violet);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.24);
  --shadow:0 14px 34px rgba(0,0,0,.34);
  --shadow-lg:0 28px 68px rgba(0,0,0,.46);

  --ease:cubic-bezier(.4,0,.2,1);

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:#31394A transparent}
body{margin:0;background:var(--bg);color:var(--text);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{letter-spacing:-.01em;font-weight:650}
[hidden]{display:none!important}

/* ---------- Login ---------- */
.login-shell{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.login-card{width:min(420px,92vw);background:var(--surface-2);border:1px solid var(--line);padding:36px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-weight:800}
.login-card h1{margin:18px 0 4px;font-size:1.5rem}
.login-card p,.page p,.queue p{color:var(--muted);margin:0 0 26px}
.login-card label{display:grid;gap:8px;margin:18px 0;color:var(--text-soft);font-size:.9rem}
.login-card input,.modal-input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:12px 13px;transition:border-color .15s var(--ease)}
.login-card input:focus,.modal-input:focus{outline:none;border-color:var(--accent)}
.login-card button,.page header>button,.primary{width:100%;border:0;background:var(--accent);color:var(--accent-ink);padding:12px;border-radius:10px;font-weight:700;transition:filter .15s var(--ease),transform .1s var(--ease)}
.login-card button:hover,.page header>button:hover,.primary:hover{filter:brightness(1.08)}
.login-card button:active,.primary:active{transform:translateY(1px)}
.login-card small{display:block;color:var(--muted);margin-top:18px;line-height:1.5}
.login-monitoring-only{display:flex!important;flex-direction:row;align-items:center;gap:8px;margin:4px 0 0!important}
.login-monitoring-only input{width:auto!important}

/* ---------- Casca do app ---------- */
#app{height:100vh;display:grid;grid-template-columns:224px 1fr}
aside{background:var(--surface-1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;padding-top:16px}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:650;padding:0 8px 22px}
.brand .brand-mark{width:32px;height:32px}
nav{display:grid;gap:3px;overflow-y:auto}
.nav-group{color:var(--muted-2);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:14px 12px 5px}
.nav{min-height:42px;border:1px solid transparent;background:transparent;color:var(--muted);padding:11px 12px;text-align:left;border-radius:10px;display:flex;justify-content:space-between;font-weight:550;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.nav:hover{border-color:var(--line);color:var(--text-soft)}
.nav.active{background:var(--surface-3);color:var(--text);border-color:var(--line)}
.nav span,.tabs b{background:var(--surface-4);padding:1px 7px;border-radius:10px;font-size:11.5px}
.nav.waiting{background:var(--warn);color:#241505;box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 60%,transparent) inset}
.profile{margin-top:auto;border-top:1px solid var(--line);padding:16px 8px 0;display:grid;gap:3px}
.profile small{color:var(--muted)}
.profile button{margin-top:10px;text-align:left;border:0;background:transparent;color:var(--danger);padding:0}
.workspace{min-width:0}

/* ---------- Inbox ---------- */
.inbox-grid{display:grid;grid-template-columns:372px 1fr;height:100vh}
.queue{border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;background:var(--surface-1)}
.queue header,.page header{padding:22px 22px 12px}
.queue h2,.page h2{margin:0 0 3px;font-size:1.3rem;font-weight:650}
.queue p,.page p{font-size:13.5px;margin:0}
.tabs{display:flex;padding:0 12px 12px;border-bottom:1px solid var(--line);gap:3px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:8px 8px;border-radius:8px;font-size:12.5px;transition:background .15s var(--ease),color .15s var(--ease)}
.tabs button.active{background:var(--surface-3);color:var(--text)}
.conversation-list{overflow:auto}
.conversation{width:100%;display:grid;grid-template-columns:40px 1fr auto;gap:11px;border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--text);padding:14px 15px;text-align:left}
.conversation:hover,.conversation.active{background:var(--surface-2)}
.avatar{display:grid;place-items:center;background:var(--surface-4);color:var(--text-soft);width:40px;height:40px;border-radius:50%;font-weight:700;font-size:.92rem}
.conversation .top{display:flex;justify-content:space-between;gap:10px}
.conversation strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation p{margin:3px 0 0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.conversation small{color:var(--muted-2);font-size:10.5px}
.unread{background:var(--accent);color:var(--accent-ink);border-radius:12px;min-width:19px;text-align:center;padding:2px 6px;font-size:10.5px;font-weight:700}
.chat{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.chat.empty{display:grid;place-items:center}
.empty-state{text-align:center;color:var(--muted)}
.empty-state div{font-size:38px;color:var(--accent-fg,var(--accent))}
.empty-state h3{color:var(--text);margin-bottom:6px;font-weight:650}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface-1);min-height:70px}
#mobileBack{display:none}
.chat-head .actions{margin-left:auto;display:flex;gap:7px;align-items:center}
/* Pedido do usuário: "na barra de conversa, no responsivo, cria o ... para
   clicar e ver as opções, mas quando não tiver responsivo, não colocar
   ...". Mesma técnica de .collapsible-actions/.actions-toggle já usada em
   #contactsActions (ver .actions-toggle abaixo) — .chat-secondary-actions
   dá o "display:flex" incondicional (visível sempre no desktop); a regra
   ".collapsible-actions{display:none}" só existe dentro do
   @media(max-width:650px) mais abaixo, então no responsivo ela vence (vem
   depois no arquivo, mesma especificidade de uma classe) e esconde o
   grupo até o botão "⋯" (#chatActionsToggle, classe .actions-toggle) ser
   clicado, abrindo com .open. */
.chat-secondary-actions{display:flex;gap:7px;align-items:center}
.secondary,.danger{border:1px solid var(--line);background:var(--surface-3);color:var(--text);padding:9px 12px;border-radius:9px;transition:background .15s var(--ease),border-color .15s var(--ease)}
.secondary:hover,.danger:hover,.button:hover{background:var(--surface-4);border-color:color-mix(in srgb,var(--text) 20%,var(--line))}
.danger{color:var(--danger)}
/* Fundo com textura sutil atrás das mensagens, no espírito do WhatsApp Web
   (padrão repetido bem discreto atrás das bolhas) — um padrão de pontos
   original nosso, não uma cópia do desenho deles, para não reproduzir a
   arte específica de terceiros; só a ideia de "fundo com textura" em vez
   de cor sólida lisa. */
.messages{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:9px;background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:22px 22px;background-position:0 0}
.bubble{position:relative;max-width:70%;padding:9px 13px 8px;border-radius:8px 8px 8px 2px;background:var(--bubble-in);align-self:flex-start;line-height:1.4;box-shadow:var(--shadow-sm);font-size:14.2px}
.bubble.outbound{background:var(--bubble-out);align-self:flex-end;border-radius:8px 8px 2px 8px}
/* Pedido do usuário: "o rabicho das mensagens não estão aparecendo" — o
   "rabicho" (tail) do balão de fala, como no WhatsApp Web, nunca chegou a
   existir no CSS (não havia nenhum ::before/::after nas bolhas). O canto
   "reto" (2px, ao invés de 8px) em .bubble/.bubble.outbound já reserva o
   lugar certo pra ele — o rabicho nasce exatamente daquele canto.
   clip-path recorta o pseudo-elemento num triângulo (sem precisar da
   técnica antiga de borda transparente, que dá um triângulo com bordas
   serrilhadas em fundos com box-shadow). */
.bubble::before{content:"";position:absolute;bottom:0;left:-6px;width:10px;height:13px;background:var(--bubble-in);clip-path:polygon(100% 0,100% 100%,0 100%)}
.bubble.outbound::before{left:auto;right:-6px;background:var(--bubble-out);clip-path:polygon(0 0,100% 100%,0 100%)}
.bubble small{display:block;text-align:right;color:var(--muted);font-size:10.5px;margin-top:5px}
/* Pedido do usuário (modo teste da resposta por IA numa conversa e nota
   interna): duas "mensagens" especiais que nunca vão para o contato —
   centralizadas, sem o rabicho de balão normal (não são nem inbound nem
   outbound de verdade), com uma etiqueta de rótulo colorida em cima do
   texto. Cores diferentes uma da outra (laranja para a prévia da IA,
   amarelo "nota adesiva" para a nota interna) para não serem confundidas
   entre si nem com as bolhas reais da conversa. */
.bubble.system-note{align-self:center;max-width:88%;border-radius:10px;box-shadow:none}
.bubble.system-note::before{display:none}
.bubble.system-note .system-note-label{display:block;font-weight:700;font-size:11px;letter-spacing:.02em;margin-bottom:4px}
.bubble.ai-preview{background:color-mix(in srgb,#ff8a3d 16%,var(--surface-2));border:1px solid color-mix(in srgb,#ff8a3d 45%,var(--line))}
.bubble.ai-preview .system-note-label{color:#e07200}
.bubble.internal-note{background:color-mix(in srgb,#ffd23f 24%,var(--surface-2));border:1px solid color-mix(in srgb,#ffd23f 55%,var(--line))}
.bubble.internal-note .system-note-label{color:#8a6d00}
.composer{position:relative;display:flex;align-items:flex-end;gap:6px;padding:14px 15px;border-top:1px solid var(--line);background:var(--surface-1)}
.composer textarea{flex:1;resize:none;min-height:46px;max-height:120px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:22px;padding:12px 16px;font-size:16px;transition:border-color .15s var(--ease)}
.composer textarea:focus{outline:none;border-color:var(--accent)}
.composer button{width:auto;padding:0 22px}
/* Botões redondos (anexar/mídia/áudio/enviar), no estilo WhatsApp Web —
   mesmo tratamento visual já usado nos ícones do cabeçalho da conversa. */
.composer button.secondary,.composer button.primary{width:44px;height:44px;flex:0 0 44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:18px}
/* v10.0.112 — o "⋮" do campo de mensagem só existe no celular (no computador as ferramentas já aparecem) */
.composer button.composer-tools-toggle{display:none}
.composer button.secondary{background:transparent;border:0;color:var(--text-soft)}
.composer button.secondary:hover{background:var(--surface-3)}
.composer .recording{background:var(--danger);color:#2b0a10;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
/* Pedido do usuário: no responsivo, os ícones antes do campo de texto
   (anexar/mídia/áudio/emoji/menção) sobravam pouco espaço pra ler o que
   estava sendo digitado. No desktop nada muda — #composerTools continua
   "invisível" como agrupador (display:contents), os botões dentro dele
   continuam lado a lado como sempre foram, e o botão único de alternar
   fica escondido. Só no responsivo (media query abaixo) o grupo vira um
   painel flutuante que só aparece ao tocar no botão único "⋮". */
.composer-tools{display:contents}
.composer-tools-toggle{display:none}

/* ---------- Telas de gestão (cards, tabelas) ---------- */
.page{height:100vh;overflow:auto;padding:0 22px}
.page header{display:flex;align-items:center;justify-content:space-between;padding:26px 0 20px}
.page header>button{width:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.card,.table-card,.metric{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.card:hover{border-color:color-mix(in srgb,var(--text) 12%,var(--line));transform:translateY(-1px)}
.card-top{display:flex;justify-content:space-between;align-items:start}
.status{font-size:11.5px;padding:4px 9px;border-radius:12px;background:var(--surface-4);color:var(--text-soft)}
.status.connected{background:var(--accent-soft);color:var(--accent-fg,var(--accent))}
.card p{color:var(--muted);font-size:12.5px}
.card-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12.5px;font-weight:600}

/* ---------- Modais ---------- */
dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface-2);color:var(--text);width:min(480px,92vw);padding:0;box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(4,6,10,.62);backdrop-filter:blur(4px)}
dialog form{padding:26px;position:relative}
.close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--muted);font-size:23px;line-height:1}
.modal-fields{display:grid;gap:14px}
.modal-fields label{display:grid;gap:6px;color:var(--text-soft);font-size:.88rem}
.modal-help{margin:-4px 0 16px;color:var(--muted);line-height:1.5;font-size:.9rem}
.qr{display:block;width:min(320px,100%);margin:18px auto;background:#fff;padding:10px;border-radius:12px}
#toast{position:fixed;right:20px;bottom:20px;background:var(--surface-4);border:1px solid var(--line);padding:12px 16px;border-radius:10px;transform:translateY(80px);opacity:0;transition:.25s var(--ease);box-shadow:var(--shadow)}
#toast.show{transform:none;opacity:1}

/* ---------- Cabeçalho de conversas fixadas (abas do time) ---------- */
.chat-shell{min-width:0;display:flex;flex-direction:column;height:100vh}
.chat-shell .chat{flex:1;min-height:0}
.active-tabs{display:flex;gap:6px;padding:8px 10px;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;min-height:48px}
.active-tab{flex:0 0 auto;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);padding:7px 10px;border-radius:9px;display:flex;gap:8px;align-items:center}
.active-tab.active{border-color:var(--accent);color:var(--text)}
.active-tab>span{display:flex;align-items:center;white-space:nowrap}
.active-tab .inline-tags{margin-left:4px}
.channel-chip{display:inline-flex;align-items:center;gap:5px;color:var(--channel);font-weight:650}
.channel-dot{width:9px;height:9px;border-radius:3px;background:var(--channel)}
.header-actions{display:flex;gap:8px}
.header-actions button{width:auto}
.card small.muted{opacity:.6}
.actions-toggle{display:none}
.search{width:100%;background:var(--surface-2);border:1px solid transparent;color:var(--text);padding:9px 16px;border-radius:var(--radius-pill);margin-bottom:14px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.search:focus{background:var(--bg);border-color:var(--line)}
.search:focus{outline:none;border-color:var(--accent)}
.search.compact{width:auto;margin:0}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.metric strong{font-size:1.7rem;display:block;margin-top:6px;font-weight:700}
.metric span{color:var(--muted);font-size:12.5px}
.bar-row{display:grid;grid-template-columns:minmax(0,150px) 1fr minmax(44px,auto);gap:12px;align-items:center;margin:12px 0}
.bar-row>b{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* BI de atendimento (v10.0.101) */
.bi-period{margin:0 0 6px}
.bi-group-title{margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bi-cards{margin-top:4px}
.metric-grid.bi-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.bi-table{display:grid;gap:0;margin:8px 0}
.bi-tr{display:grid;grid-template-columns:minmax(0,1fr) 56px 56px 72px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.bi-tr>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bi-th{color:var(--muted);font-size:12px;padding-top:0}
.metric strong{font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--surface-4);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--bar,var(--accent))}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:13px}
.quota{height:7px;background:var(--surface-4);border-radius:5px;overflow:hidden;margin:8px 0 16px}
.quota i{display:block;height:100%;background:var(--accent)}
.icon-preview{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--channel) 22%,transparent);color:var(--channel);font-weight:700}
.file-button{border:1px dashed var(--line);padding:18px;border-radius:10px;text-align:center}
.note{color:var(--muted);font-size:12.5px;line-height:1.55}

/* ---------- Responsivo: tablet e celular ---------- */
@media(max-width:850px){
  #app{grid-template-columns:66px 1fr}
  aside{padding:14px 8px}
  .brand strong,.nav:not(.active),.nav span,.profile span,.profile small{display:none}
  .brand{padding:0 6px 20px}
  .nav.active{font-size:0}
  .nav.active:after{content:'☰';font-size:19px}
  .inbox-grid{grid-template-columns:320px 1fr}
  .page{padding:0 14px}
  .nav{display:flex!important}
  .nav:not(.active){display:flex!important}
}
@media(max-width:650px){
  #app{display:block}
  .workspace{height:calc(100vh - 60px)}
  aside{height:60px;position:fixed;bottom:0;left:0;right:0;z-index:5;flex-direction:row;align-items:center;border:0;border-top:1px solid var(--line);padding:6px 8px;overflow-x:hidden}
  .brand,.profile{display:none}
  nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;align-items:center;gap:4px;overflow:visible}
  .nav,.nav.active{display:grid!important;place-items:center;width:100%;min-width:0;min-height:44px;padding:0!important;margin:0;font-size:0!important}
  .nav.active:after{display:none}
  .nav-icon{display:grid!important;place-items:center;width:22px;height:22px;line-height:1;margin:0!important;color:var(--muted)}
  .nav.active .nav-icon{color:var(--text)}
  .nav-icon svg{display:block;width:22px;height:22px;color:inherit}
  .nav #openBadge{top:1px;right:calc(50% - 22px);position:absolute}
  .inbox-grid{height:calc(100vh - 60px);grid-template-columns:1fr}
  /* Pedido do usuário: "quando clico para escrever e o teclado abre na
     tela, encobre parte da caixa onde escreve" (conversa normal e grupo,
     as duas usam .chat aqui). Este "inset" abaixo é só o valor inicial/
     de segurança antes do JS calcular; quem realmente resolve o teclado
     cobrindo a caixa é o shared-dom.js, que mede o viewport visual de
     verdade e aplica "top"/"height" em pixels direto no elemento (uma
     tentativa anterior só com CSS --kb-offset não resolvia no Android). */
  .chat{position:fixed;inset:0 0 60px 0;z-index:3}
  .chat.empty{display:none}
  .queue{border:0}
  .page{height:calc(100vh - 60px)}
  aside{overflow-x:auto}
  .chat-shell{height:calc(100vh - 60px)}
  .chat-shell .chat{position:static}
  .chat-shell:has(.chat:not(.empty)){position:fixed;inset:0 0 60px;z-index:4;background:var(--bg)}
  #mobileBack{display:inline-block}
  .chat-head{padding:9px;gap:7px;flex-wrap:wrap}
  .chat-head>div:not(.actions){min-width:0;flex:1}
  .chat-head .actions{gap:4px;width:100%;margin-left:0;justify-content:flex-end;overflow-x:auto;padding-top:4px}
  .chat-head .actions button:not(.primary),.chat-head .actions .icon-link{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;font-size:15px}
  .chat-head .actions button.primary{flex:0 0 auto;width:auto;height:38px;padding:0 16px;font-size:13.5px;white-space:nowrap}
  .active-tabs{min-height:45px}
  .messages{padding:12px}
  .bubble{max-width:88%}
  .composer{padding:8px;gap:6px;align-items:center}
  .composer button{padding:0 13px;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px}
  .composer button.secondary,.composer button.primary{width:40px;height:40px;flex:0 0 40px;font-size:16px}
  .composer textarea{min-width:0}
  /* Pedido do usuário: "os icones que estão antes do campo onde escreve as
     mensagens, devem ficar em um icone unico que ao clicar mostra os
     outros. pq senao fica pouco espaço pra poder ler o que está
     escevendo". #composerTools deixa de ser "invisível" (display:contents)
     e vira um painel flutuante, escondido por padrão — só o botão único
     "⋮" fica visível no lugar de todos os ícones. */
  .composer-tools-toggle,.composer button.composer-tools-toggle{display:grid}
  .composer-tools{display:none;position:absolute;bottom:100%;left:8px;margin-bottom:8px;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:var(--shadow-lg);z-index:5}
  .composer-tools.open{display:flex}
  .page header{align-items:flex-start;gap:12px}
  .header-actions{flex-wrap:wrap}
  /* Pedido do usuário: colocar os botões "Exportar CSV / Importar / Limpar
     contatos / + Novo contato" da tela de Contatos dentro de um botão "+"
     que abre ao clicar, pra sobrar mais espaço na tela no responsivo. */
  .actions-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:20px;line-height:1;flex:0 0 auto}
  .collapsible-actions{display:none;width:100%;order:4}
  .collapsible-actions.open{display:flex}
  .table-card{overflow-x:auto;padding:8px}
  table{min-width:650px}
  /* Pedido do usuário: "equipes e contatos, está muito ruim no
     responsivo, ajustar." Tabela com rolagem lateral (regra acima) é
     ruim em tela estreita — pra tabelas marcadas como .responsive-table
     (Contatos e Equipe), a tabela vira uma lista de cartões empilhados,
     um por registro, usando o data-label de cada <td> como rótulo. */
  table.responsive-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
  table.responsive-table thead{display:none}
  table.responsive-table,table.responsive-table tbody{display:block;width:100%}
  table.responsive-table tr{display:block;width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
  table.responsive-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 0;border:0;text-align:right}
  table.responsive-table td:not(:last-child){border-bottom:1px solid var(--line)}
  table.responsive-table td[data-label]:before{content:attr(data-label);flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:600;text-align:left}
  table.responsive-table td:not([data-label]):before,table.responsive-table td[data-label=""]:before{content:none}
  table.responsive-table td[data-label=""]{justify-content:flex-end;flex-wrap:wrap;gap:6px}
  table.responsive-table td[data-label=""] button{flex:0 0 auto}
  table.responsive-table td .user-cell{justify-content:flex-end}
  .metric-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:minmax(0,100px) 1fr minmax(36px,auto)}
  .bi-tr{grid-template-columns:minmax(0,1fr) 44px 44px 60px;font-size:13px}
  .metric-grid.bi-kpis{grid-template-columns:1fr 1fr}
  .collapse-menu{display:none}
  .menu-collapsed #app{display:block}
}
.composer textarea{font-size:16px}
.historyRow{cursor:pointer}
.queue-load-more{width:calc(100% - 16px);margin:8px;padding:10px;font-size:12.5px;text-align:center}
.date-divider{display:flex;justify-content:center;margin:14px 0;align-self:center}
.date-divider span{background:var(--surface-3);color:var(--text-soft);font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;box-shadow:var(--shadow-sm)}
.contacts-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0;color:var(--muted);font-size:13px}
@media(max-width:650px){.contacts-pager{flex-direction:column;gap:8px;text-align:center}}
/* Pedido do usuário: escolher até 100 registros por página e selecionar
   vários/todos pra excluir em lote na tela de Contatos. */
.contacts-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contacts-toolbar .search{flex:1 1 220px}
.contacts-per-page{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap}
.contacts-per-page select{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.contacts-bulk-bar{display:flex;align-items:center;gap:12px;padding:8px 4px;color:var(--muted);font-size:13px}
#contactList table th:first-child,#contactList table td:first-child{width:34px}

/* ---------- Painel de acompanhamento (modo TV) ---------- */
#monitoringFilters,#monitoringDepartmentFilters{margin:16px 0 22px;display:flex;flex-wrap:wrap;gap:14px;padding:14px 16px}
#monitoringFilters legend,#monitoringDepartmentFilters legend{width:100%;color:var(--muted);font-size:.85rem;margin-bottom:2px}
#monitoringFilters label,#monitoringDepartmentFilters label{display:flex;align-items:center;gap:7px;font-size:.92rem}
.monitoring-select-all{padding-right:14px;margin-right:2px;border-right:1px solid var(--line)}
.monitoring-section-title{margin:6px 0 12px;font-size:.95rem;color:var(--muted);font-weight:650}
.monitoring-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.monitoring-grid:empty{display:none}
.monitoring-box{background:var(--surface-2);border:1px solid var(--line);border-top:4px solid var(--channel);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:16px}
.monitoring-box h3{margin:0;font-size:1.05rem;color:var(--channel)}
.monitoring-numbers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.monitoring-numbers>div{display:flex;flex-direction:column;gap:4px;align-items:center;padding:14px 8px;border-radius:12px;background:var(--surface-1)}
.monitoring-numbers strong{font-size:2.4rem;font-weight:800;line-height:1}
.monitoring-numbers span{font-size:.78rem;color:var(--muted);text-align:center}
.monitoring-numbers .unanswered strong{color:var(--warn)}
.monitoring-numbers .in-progress strong{color:var(--accent-fg,var(--accent))}
/* Em tela cheia (modo TV de verdade): só as boxes, sem cabeçalho nem filtros,
   ocupando 100% da tela — nada do menu/nav do app aparece porque o
   Fullscreen API é aplicado direto no #monitoringView (só ele e os
   descendentes renderizam), mas o próprio cabeçalho interno da tela
   ("Acompanhamento" + botão "Tela cheia") e os filtros de canal também
   precisam sumir aqui, senão sobra "menu" dentro da própria tela cheia. */
#monitoringView:fullscreen,#monitoringView.pseudo-fullscreen{background:var(--bg);padding:32px;overflow:auto;display:flex;flex-direction:column;height:100%}
/* .pseudo-fullscreen cobre a tela toda por conta própria (não depende da
   Fullscreen API do navegador ter funcionado) — ver comentário em
   settings-admin.js, no onclick de #monitoringFullscreen. */
#monitoringView.pseudo-fullscreen{position:fixed;inset:0;z-index:1000}
#monitoringView:fullscreen>header,#monitoringView.pseudo-fullscreen>header,
#monitoringView:fullscreen>.settings-tabs,#monitoringView.pseudo-fullscreen>.settings-tabs{display:none}
#monitoringView:fullscreen #monitoringFilters,#monitoringView.pseudo-fullscreen #monitoringFilters,
#monitoringView:fullscreen #monitoringDepartmentFilters,#monitoringView.pseudo-fullscreen #monitoringDepartmentFilters{display:none}
/* Os títulos "Canais"/"Setores" continuam visíveis em tela cheia — removê-los
   (versão anterior) deixava as duas seções coladas uma na outra sem nenhuma
   separação visual, o que o usuário relatou como caixas "sobrepostas". */
#monitoringView:fullscreen .monitoring-section-title,#monitoringView.pseudo-fullscreen .monitoring-section-title{display:block;margin-top:22px;font-size:1.1rem}
#monitoringView:fullscreen .monitoring-grid,#monitoringView.pseudo-fullscreen .monitoring-grid{align-content:start;grid-auto-rows:minmax(170px,auto)}
#monitoringView:fullscreen .monitoring-box,#monitoringView.pseudo-fullscreen .monitoring-box{padding:32px;justify-content:center}
#monitoringView:fullscreen .monitoring-numbers strong,#monitoringView.pseudo-fullscreen .monitoring-numbers strong{font-size:4.2rem}
#monitoringView:fullscreen .monitoring-box h3,#monitoringView.pseudo-fullscreen .monitoring-box h3{font-size:1.4rem}
@media(max-width:650px){
  .monitoring-grid{grid-template-columns:1fr}
  #monitoringFilters{padding:12px}
  /* No responsivo (celular/tablet), a TV é a própria tela: as boxes ocupam
     tudo que sobrar de altura, mesmo fora do modo fullscreen do navegador
     (que em muitos celulares nem existe pra elementos isolados). */
  #monitoringView{display:flex;flex-direction:column;min-height:0}
  #monitoringView .monitoring-grid{flex:1;grid-auto-rows:1fr}
}
.bubble.deleted{opacity:.7}
.deleted-message{font-style:italic;color:var(--muted)}
.edited-tag{font-style:italic;opacity:.8}

/* ---------- Ferramentas de áudio, download de imagem e ampliar (lightbox) ---------- */
.image-wrap{position:relative;display:inline-block;max-width:100%}
.image-download{position:absolute;right:6px;bottom:6px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;font-size:13px;opacity:0;transition:opacity .15s var(--ease)}
.image-wrap:hover .image-download{opacity:1}
.audio-wrap{display:flex;align-items:center;gap:8px}
.audio-player{flex:1;min-width:0}
.audio-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.audio-speed{min-width:38px;padding:6px 8px;font-size:11px;font-weight:700}
.audio-download{width:30px;height:30px;display:grid;place-items:center;padding:0;font-size:13px}
.lightbox-overlay{position:fixed;inset:0;z-index:30000;background:rgba(4,6,10,.9);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.lightbox-image{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:var(--shadow-lg)}
.lightbox-close,.lightbox-download{position:fixed;top:18px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:18px;text-decoration:none;background:var(--surface-3);border:1px solid var(--line);color:var(--text)}
.lightbox-close{right:18px}
.lightbox-download{right:70px}
@media(max-width:650px){.audio-wrap{flex-wrap:wrap}.lightbox-close,.lightbox-download{top:10px;width:38px;height:38px}.lightbox-close{right:10px}.lightbox-download{right:56px}}
.historyRow:hover{background:var(--surface-3)}
.message-media{display:block;max-width:100%;max-height:340px;border-radius:9px;margin-bottom:7px}
.bubble audio{min-width:280px}

/* ---------- Menu recolhido ---------- */
.collapse-menu{margin-left:auto;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:var(--surface-3);color:var(--text-soft);font-size:22px}
.menu-collapsed #app{grid-template-columns:76px 1fr}
.menu-collapsed aside{padding-inline:10px;align-items:center}
.menu-collapsed aside .brand strong,.menu-collapsed aside .profile span,.menu-collapsed aside .profile small,.menu-collapsed aside .nav:not(.active){display:none}
.menu-collapsed aside nav{width:100%}
.menu-collapsed aside .nav.active{font-size:0;padding:13px 8px;justify-content:center}
.menu-collapsed aside .nav.active::before{content:'💬';font-size:19px}
.menu-collapsed aside .nav.active span{font-size:11px}

/* ---------- Respostas rápidas (menu de atalho) ---------- */
.quick-menu{position:absolute;left:15px;right:15px;bottom:75px;max-height:300px;overflow:auto;background:var(--surface-3);border:1px solid var(--line);border-radius:13px;padding:6px;box-shadow:var(--shadow-lg);z-index:8}
.quick-menu button{width:100%;display:grid;grid-template-columns:100px 1fr auto;gap:10px;text-align:left;background:transparent;border:0;color:var(--text);padding:11px;border-radius:8px}
.quick-menu button:hover{background:var(--surface-4)}
.quick-menu span,.quick-menu small{color:var(--muted)}

/* ---------- Usuários ---------- */
.user-cell{display:flex;align-items:center;gap:10px}
.user-cell img,.user-cell i{width:34px;height:34px;border-radius:50%;object-fit:cover}
.user-cell i{display:grid;place-items:center;background:var(--surface-4);font-style:normal}
.menu-brand{justify-content:flex-start!important;padding-left:8px;display:flex;align-items:center;gap:10px}
.menu-brand strong{order:1;max-width:150px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-brand .collapse-menu{order:2;margin-left:0!important;width:24px;background:transparent;font-size:19px}

/* ---------- Formulários e listas de escolha ---------- */
.form-error{margin:0!important;padding:10px 12px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:9px;background:var(--danger-soft);color:var(--danger)!important;font-size:12.5px!important}
.icon-actions button{width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:18px}
.icon-actions{justify-content:flex-end}
.channel-picker{border:1px solid var(--line);border-radius:10px;padding:13px;display:grid;gap:10px}
.channel-picker legend{color:var(--muted);padding:0 6px;font-size:.85rem}
.channel-picker label{display:flex;align-items:center;gap:8px}
.channel-access-row{display:grid;grid-template-columns:34px minmax(130px,1fr) auto auto;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-left:3px solid var(--channel);border-radius:10px;background:var(--surface-2)}
.channel-access-row label{white-space:nowrap}
.channel-option{padding:8px;border:1px solid var(--line);border-radius:9px}
.channel-option .icon-preview,.channel-access-row .icon-preview{color:var(--channel)}
@media(max-width:640px){.channel-access-row{grid-template-columns:34px 1fr}.channel-access-row label{grid-column:2;white-space:normal}}

/* ---------- Construtor de fluxos ---------- */
.flow-builder{position:fixed;inset:0;z-index:10000;background:var(--bg);color:var(--text);display:grid;grid-template:64px minmax(250px,300px) 1fr minmax(270px,330px);grid-template-areas:"head head head" "palette canvas inspector";overflow:hidden}
.flow-builder>header{grid-area:head;display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-1);box-shadow:var(--shadow-sm);z-index:5}
.flow-builder>header>div{display:grid;margin-right:auto}
.flow-builder>header small,.flow-builder>header span{color:var(--muted)}
.flow-builder>header #flowSaveState{font-size:12px}
.flow-palette{grid-area:palette;border-right:1px solid var(--line);background:var(--surface-1);padding:14px;overflow:auto}
.flow-palette>label{display:grid;gap:8px;font-weight:650}
.flow-palette input,.flow-inspector input,.flow-inspector textarea,.flow-inspector select{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px;outline:none;transition:border-color .15s var(--ease)}
.flow-palette input:focus,.flow-inspector input:focus,.flow-inspector textarea:focus,.flow-inspector select:focus{border-color:var(--accent)}
.flow-palette h4{text-transform:uppercase;color:var(--muted-2);font-size:11.5px;letter-spacing:.08em;margin:22px 4px 9px}
.flow-block-choice{width:100%;display:flex;align-items:flex-start;gap:11px;text-align:left;padding:12px;margin:7px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease),transform .15s var(--ease)}
.flow-block-choice:hover{border-color:var(--violet);transform:translateY(-1px)}
.flow-block-choice>i{font-style:normal;color:var(--violet);font-size:20px;min-width:26px}
.flow-block-choice span{display:grid;gap:4px}
.flow-block-choice small{color:var(--muted);line-height:1.4}
.flow-builder #flowViewport{grid-area:canvas;position:relative;overflow:auto;background-color:var(--bg);background-image:radial-gradient(#293142 1px,transparent 1px);background-size:20px 20px;cursor:grab;touch-action:none;overscroll-behavior:contain}
.flow-builder #flowViewport.panning{cursor:grabbing;user-select:none}
.flow-builder #flowCanvas{position:relative;width:5000px;height:5000px}
.flow-builder #flowEdges{position:absolute;inset:0;overflow:visible;pointer-events:none}
.flow-builder #flowEdges path{fill:none;stroke:#5F6EBF;stroke-width:2}
.flow-builder #flowEdges circle{fill:var(--violet)}
.flow-builder #flowEdges .flow-edge-line{stroke:#5F6EBF;stroke-width:2;pointer-events:none}
.flow-builder #flowEdges .flow-edge-hit{stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
.flow-builder #flowEdges .flow-edge:hover .flow-edge-line{stroke:var(--danger);stroke-width:3}
.flow-builder #flowEdges .flow-edge circle{pointer-events:none}
.flow-node{position:absolute;width:245px;min-height:112px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);user-select:none;touch-action:none}
.flow-node.selected{border-color:var(--violet);box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 30%,transparent),var(--shadow)}
.flow-node>header{display:flex;align-items:center;gap:9px;padding:12px;border-bottom:1px solid var(--line);cursor:grab}
.flow-node>header>i{font-style:normal;color:var(--violet);font-size:17px}
.flow-node>header>b{flex:1;font-size:13px}
.flow-node-delete{border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}
.flow-node>p{color:var(--muted);font-size:12px;line-height:1.45;padding:10px 12px;margin:0;min-height:34px}
.flow-node>footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;padding:8px}
.flow-port{border:0;background:var(--surface-1);color:var(--text-soft);font-size:10px;padding:6px 2px 6px 8px;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:6px}
.flow-port i,.flow-node-in{display:block;width:12px;height:12px;border-radius:50%;background:var(--violet);border:2px solid color-mix(in srgb,var(--violet) 55%,white)}
.flow-port.active{background:var(--violet-soft);color:var(--text)}
.flow-node-in{position:absolute;left:-8px;top:47px;padding:0;z-index:2;cursor:crosshair}
.flow-inspector{grid-area:inspector;border-left:1px solid var(--line);background:var(--surface-1);padding:16px;overflow:auto}
.flow-inspector>header{display:flex;gap:11px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:15px}
.flow-inspector>header>i{font-style:normal;font-size:24px;color:var(--violet)}
.flow-inspector>header>div{display:grid}
.flow-inspector>header small{color:var(--muted)}
.flow-inspector-fields{display:grid;gap:13px}
.flow-inspector-fields>label{display:grid;gap:6px;font-size:12px;color:var(--text-soft)}
.flow-inspector textarea{min-height:88px;resize:vertical}
.flow-inspector fieldset{border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.flow-inspector fieldset label{display:flex;align-items:center;gap:6px}
.flow-inspector fieldset input{width:auto}
.flow-inspector>.danger{margin-top:20px;width:100%}
#flowChoiceOptions{display:grid;gap:7px}
#flowChoiceOptions>div{display:grid;grid-template-columns:48px 1fr 34px;gap:6px}
#flowChoiceOptions button{border:0;border-radius:8px;background:var(--danger-soft);color:var(--danger)}
.webhook-question-row{display:grid;grid-template-columns:1fr 150px 34px;gap:6px;align-items:start;margin-bottom:7px}
.webhook-question-accept{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface-2);border-radius:8px;padding:7px 10px}
.webhook-question-accept label{display:flex;align-items:center;gap:4px;font-size:12.5px}
.webhook-question-accept small{width:100%;color:var(--muted)}
.webhook-question-row .removeWebhookQuestion{border:0;border-radius:8px;background:var(--danger-soft);color:var(--danger)}
.flow-zoom{position:sticky;left:calc(50% - 75px);bottom:16px;width:max-content;display:flex;background:var(--surface-1);border:1px solid var(--line);border-radius:24px;padding:5px;box-shadow:var(--shadow)}
.flow-zoom button{border:0;background:transparent;color:var(--text-soft);padding:8px 12px;cursor:pointer}
.flow-zoom button+button{border-left:1px solid var(--line)}
@media(max-width:900px){
  .flow-builder{grid-template:58px 1fr 280px/1fr;grid-template-areas:"head" "canvas" "inspector"}
  .flow-palette{position:absolute;z-index:6;left:8px;top:66px;width:min(300px,80vw);max-height:65vh;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
  .flow-builder>header #flowSaveState,.flow-builder>header #flowAutoLayout{display:none}
  .flow-inspector{border-left:0;border-top:1px solid var(--line)}
  .flow-builder #flowViewport{min-height:45vh}
}

#toast{z-index:20000}
.modal-fields label:has(#newPersonalPhone),.modal-fields label:has(#newAlertMinutes),.modal-fields label:has(#editPersonalPhone),.modal-fields label:has(#editAlertMinutes),.modal-fields label:has(#myPhone){display:none!important}

/* ---------- Filtro por tipo de conversa e etiquetas ---------- */
.conversation-kind{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.conversation-kind button{flex:1;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:7px}
.conversation-kind button.active{background:var(--surface-3);color:var(--text);border-color:color-mix(in srgb,var(--text) 15%,var(--line))}
.tag-color{width:12px;height:12px;border-radius:50%;display:inline-block}
#settingsContent .card:has(#hoursChannel){display:none}
.channel-icon-choice{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px;background:color-mix(in srgb,var(--channel,var(--accent)) 14%,var(--surface-2));color:var(--channel,var(--accent));font-size:23px}
.channel-icon-choice span{font-size:14px;color:var(--text);font-weight:650}
#scheduleList{grid-template-columns:repeat(3,minmax(240px,1fr))}
#scheduleList .card{display:flex;flex-direction:column;gap:9px}
#scheduleList .scheduleItem{text-align:left}
@media(max-width:850px){#scheduleList{grid-template-columns:1fr}}

/* ---------- Seleção em massa ---------- */
.bulk-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.bulk-bar span{margin-left:auto}
.bulk-bar button{display:none;padding:0;width:32px;height:32px;font-size:14px}
.bulk-bar.has-selection button{display:inline-grid;place-items:center}
.conversation{grid-template-columns:22px 40px 1fr auto}
.bulkCheck{align-self:center;width:17px;height:17px;accent-color:var(--accent)}
@media(max-width:650px){
  .bulk-bar{position:sticky;top:0;background:var(--surface-2);z-index:2}
  .conversation{grid-template-columns:22px 38px 1fr auto;padding:12px 8px}
  .icon-preview{width:38px;height:38px}
}

.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.icon-link{padding:9px 12px}
@media(min-width:651px){
  .chat-head .actions button:not(.primary),.chat-head .actions .icon-link{width:40px;height:40px;padding:0;border-radius:50%;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--text-soft);transition:background .15s var(--ease)}
  .chat-head .actions button:not(.primary):hover,.chat-head .actions .icon-link:hover{background:var(--surface-3)}
  .chat-head .actions button.danger{background:transparent;color:var(--danger)}
  .chat-head .actions button.danger:hover{background:var(--danger-soft)}
  /* v10.0.106 — o "⋯" só existe para abrir os ícones no celular; no computador
     os ícones já ficam todos à mostra. */
  .chat-head .actions button.actions-toggle{display:none}
}
/* Regra completa de .older-messages fica mais abaixo, perto do resto do
   histórico expansível — evitando duas declarações do mesmo seletor
   espalhadas pelo arquivo, que foi exatamente o que causou o bug
   corrigido nesta revisão (a versão de baixo, com !important, vencia
   silenciosamente e destoava do resto da conversa). */

/* ---------- Indicadores de novidade — sóbrios, sem piscar agressivo ---------- */
.active-tab.new-unread,.conversation.new-unread{animation:none!important}
.conversation.new-unread .unread,.active-tab.new-unread b{animation:unreadPulse 1.6s ease-in-out infinite}
@keyframes unreadPulse{50%{opacity:.55}}
.inline-tags{display:flex;flex-wrap:wrap;gap:4px;max-width:100%;min-width:0;margin:4px 0 0}
.inline-tags i{font-style:normal;font-size:10px;line-height:1;padding:4px 6px;border-radius:999px;background:color-mix(in srgb,var(--tag) 22%,var(--surface-2));border:1px solid var(--tag);color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---------- Ordenação e nav (bloco consolidado) ---------- */
.queue,.chat-head,.composer,.active-tabs{background-color:color-mix(in srgb,var(--surface-1) 92%,transparent);backdrop-filter:blur(14px)}
/* Pedido do usuário: aproximar do WhatsApp Web de verdade. A lista de
   conversas de lá é uma sequência de linhas retas e cheias (sem margem,
   sem cantos arredondados, sem "levantar" no hover) — só muda a cor de
   fundo ao passar o mouse ou ao ficar selecionada. A versão anterior tinha
   virado "cartões" flutuantes com respiro entre eles e uma animação de
   levantar (transform:translateY) no hover, o que foge desse visual.
   Voltado ao estilo de linha cheia, mantendo os seletores e o resto do
   comportamento (nada de JS mudou). */
.conversation{position:relative;transition:background .12s var(--ease)}
.conversation.active{background:var(--surface-3)}
.conversation.active.new-unread{animation:none}
.media-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:55vh;overflow:auto}
.mediaChoice{display:grid;gap:6px;text-align:left;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:13px;padding:12px;transition:border-color .15s var(--ease)}
.mediaChoice:hover{border-color:var(--accent)}
.mediaChoice span{height:90px;display:grid;place-items:center;background:var(--bg);border-radius:9px;font-size:26px;overflow:hidden}
.mediaChoice img{width:100%;height:100%;object-fit:cover}
.mediaChoice small{color:var(--muted)}
@media(max-width:650px){.nav-group{display:none}.media-picker{grid-template-columns:1fr}}

.privacy-chip{display:inline-flex;margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--violet-soft);color:var(--violet);font-size:10px}
.profile select{width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px}

/* ---------- Chat interno ---------- */
.internal-chat{display:grid;grid-template-columns:260px 1fr;min-height:65vh;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface-1)}
.internal-chat>aside{padding:10px;border-right:1px solid var(--line)}
.internal-chat>section{display:grid;grid-template-rows:1fr auto;min-width:0}
.internal-user{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;color:var(--text);padding:12px;border-radius:12px}
.internal-user:hover,.internal-user.active{background:var(--surface-3)}
.internal-user span{display:flex;flex-direction:column}
.internal-user small{text-transform:capitalize;color:var(--muted)}
.presence{width:9px;height:9px;border-radius:50%;background:var(--muted-2)}
.presence.online{background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.presence.busy{background:var(--warn)}
.internal-chat .messages{padding:18px;overflow:auto}
.internal-chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.internal-chat textarea{flex:1;resize:none;min-height:44px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:11px}
@media(max-width:760px){.internal-chat{grid-template-columns:1fr}.internal-chat>aside{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.internal-user{min-width:160px}.menu-brand strong{display:none}}

/* ---------- Rolagem contida da fila ---------- */
.workspace,.inbox-grid,.queue{min-height:0;overflow:hidden}
.tabs{flex:0 0 auto;overflow-x:auto}
.conversation-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:650px){.workspace,.inbox-grid,.queue{height:calc(100vh - 60px);max-height:calc(100vh - 60px)}.conversation-list{-webkit-overflow-scrolling:touch}}

/* ---------- Abas de fila (ícones) ---------- */
.queue-tabs{display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:visible;padding:8px 6px;scrollbar-width:thin;justify-content:space-around;padding-top:12px}
.queue-tabs button,.queue-tabs .personal-conversations{position:relative;flex:0 0 48px;width:48px;min-width:48px;height:44px;margin:0;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center}
.queue-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:54px;font-size:19px;position:relative}
.queue-tabs button b{font-size:10.5px;line-height:18px;min-width:20px;padding:0 5px}
.queue-tabs button:hover::after{display:none!important}
.queue-tabs .tab-icon{display:grid;place-items:center;width:22px;height:22px}
.queue-tabs .tab-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.internal-user-row{grid-template-columns:36px 1fr;align-items:center}
.internal-user-row .presence{justify-self:center}
[id^="count"].open-count-alert{animation:openCountSoft 1.8s ease-in-out infinite;background:var(--accent);color:var(--accent-ink);border-radius:999px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
@keyframes openCountSoft{50%{opacity:.55}}

.conversation.transfer-pending{border-color:var(--warn);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 40%,transparent),var(--shadow-sm)}
.transfer-card-tag{display:inline-flex!important;width:max-content;max-width:100%;white-space:normal;overflow-wrap:anywhere;margin-top:6px;padding:4px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn)!important;border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);font-weight:650}
.transfer-notice{margin:10px 16px 0;padding:10px 13px;border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);border-radius:11px;background:var(--warn-soft);color:var(--text-soft);display:grid;gap:3px}
.transfer-notice p{margin:3px 0 0;color:var(--muted)}
.settings-tabs{position:sticky;top:0;z-index:6;display:flex;gap:6px;padding:12px 0;background:linear-gradient(180deg,var(--bg) 75%,transparent);overflow-x:auto}
.settings-tabs button{flex:0 0 auto;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);padding:9px 13px;border-radius:10px;font-weight:650}
.settings-tabs button.active{background:var(--surface-3);border-color:var(--accent);color:var(--text)}

.menu-brand strong{order:1;max-width:150px}
.menu-brand .collapse-menu{order:2;margin-left:0!important;width:24px;background:transparent;font-size:19px}
.conversation>span:nth-of-type(2){min-width:0;overflow:hidden}
@media(max-width:650px){.inline-tags{width:100%;margin-left:0}.transfer-card-tag{width:100%}.queue-tabs button{gap:3px;min-width:44px}.queue-tabs .tab-icon,.queue-tabs .tab-icon svg{width:19px;height:19px}}
.conversation .top strong{font-size:13.5px;font-weight:650}
.conversation .channel-chip{display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.conversation .channel-chip .route-step{font-size:10.5px;color:var(--muted);font-weight:650}
.conversation .channel-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:650px){.conversation .top strong{font-size:12.5px}.conversation .channel-chip{font-size:10px}.conversation .channel-chip .route-step{font-size:10px}}
.contact-photo{object-fit:cover;border-radius:50%}
.icon-preview .contact-photo{width:100%;height:100%}
.chat-head img.avatar{width:42px;height:42px}

/* ---------- Reações e participantes ---------- */
.react-message{position:absolute;right:8px;bottom:-9px;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-3);color:var(--text-soft);opacity:0;transition:opacity .15s var(--ease)}
.message-menu{position:absolute;right:36px;bottom:-9px;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-3);color:var(--text-soft);opacity:0;transition:opacity .15s var(--ease)}
.bubble:hover .message-menu,.message-menu:focus{opacity:1}
.bubble:hover .react-message,.react-message:focus{opacity:1}
/* Pedido do usuário: "nota interna... deve ter possibilidade de excluir
   ou editar a nota" — mesmo botão flutuante "⋮" das mensagens normais
   (.message-menu acima), só que centralizado (a bolha de nota interna é
   centralizada, não alinhada a uma lateral como as demais). */
.note-menu{position:absolute;right:8px;bottom:-9px;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-3);color:var(--text-soft);opacity:0;transition:opacity .15s var(--ease)}
.bubble:hover .note-menu,.note-menu:focus{opacity:1}
.message-reactions{display:inline-flex;margin-top:5px;padding:2px 6px;border-radius:999px;background:var(--surface-4);font-size:13px}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.emoji-grid button{font-size:24px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
/* Pedido do usuário: "aumentar a quantidade de emojis para chat" — o
   seletor do composer (showEmojiPicker, team-social.js) passou de uma
   lista fixa de 15 emojis pra ~220 agrupados por categoria em abas
   (.emoji-tabs), reaproveitando .emoji-grid/.emojiChoice pra cada painel
   — só o reagir a uma mensagem (bindReactionButtons) continua com a
   lista curta de sempre, sem abas.  */
.emoji-picker{display:flex;flex-direction:column;gap:10px}
.emoji-tabs{display:flex;flex-wrap:wrap;gap:5px}
.emoji-tabs button{font-size:19px;line-height:1;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.emoji-tabs button.active{border-color:var(--accent);background:var(--surface-3)}
.emoji-picker .emoji-panel{max-height:min(46vh,320px);overflow:auto;padding-right:2px}
.participant-list{display:grid;gap:8px;max-height:52vh;overflow:auto}
.participant-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:11px}
.participant-row>span{display:grid}
.participant-row small{color:var(--muted)}
.mentionChoice{display:grid;gap:4px;width:100%;text-align:left;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--text)}
.mentionChoice[disabled]{opacity:.55;cursor:not-allowed}
.mentionChoice small{color:var(--muted)}
@media(max-width:650px){.react-message,.message-menu,.note-menu{opacity:1}.emoji-grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- Navegação lateral (ícones) e perfil ---------- */
.nav{justify-content:center;position:relative}
.nav-icon{background:transparent!important;padding:0!important;font-size:21px}
.nav #openBadge{position:absolute;right:8px;top:5px}
.profile{display:flex;align-items:center;justify-content:center;gap:8px}
.profile-avatar{position:relative!important;width:42px;height:42px!important;margin:0!important;border:1px solid var(--line)!important;border-radius:50%!important;background:var(--surface-4)!important;color:var(--text)!important;display:grid;place-items:center;text-align:center!important;font-weight:700}
.profile-avatar img,.profile-photo-large img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.presence-dot{position:absolute;right:-1px;bottom:1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface-1);background:var(--danger)}
.presence-dot.online,.presence-choice.online{background:var(--accent)}
.presence-dot.busy,.presence-choice.busy{background:var(--warn)}
.presence-dot.offline,.presence-choice.offline{background:var(--danger)}
.profile #logout,.profile #installApp{width:34px;height:34px;margin:0;text-align:center;color:var(--muted);font-size:19px}
.personal-conversations{margin:10px 12px 0;padding:8px 12px;border:1px solid var(--violet);background:var(--violet-soft);color:var(--text);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:8px}
.personal-conversations.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 35%,transparent)}
.personal-conversations b{background:var(--violet);color:#100e28;border-radius:999px;padding:1px 7px}
.profile-editor{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.profile-photo-large{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--surface-4);font-size:27px;font-weight:700}
.presence-picker{display:flex;gap:14px;border:1px solid var(--line);border-radius:10px;padding:12px}
.presence-choice{width:28px;height:28px;border:4px solid var(--surface-4);border-radius:50%;transition:transform .15s var(--ease)}
.presence-choice:hover{transform:scale(1.1)}

#app{grid-template-columns:80px 1fr}
aside{padding-inline:10px}
.menu-brand{justify-content:center!important;padding-left:0}
.menu-brand strong{display:none}
.collapse-menu{display:none}
.profile{flex-wrap:wrap;padding-inline:0}
.personal-conversations{margin-inline:8px}
@media(max-width:650px){
  #app{display:block}
  .profile{display:none}
  .personal-conversations{position:absolute;right:8px;top:62px;z-index:3;width:48px;margin:0;padding:8px}
  .personal-conversations b{position:absolute;right:-4px;top:-7px;font-size:10px}
}

/* ---------- Figurinhas, ações e ajustes finais de densidade ---------- */
.message-sticker{width:min(190px,55vw);max-height:190px;object-fit:contain;background:transparent}
.remove-reaction{display:block;width:100%;margin-top:14px}
.card-actions{flex-wrap:wrap}
@media(max-width:650px){
  aside{padding:6px 8px;overflow-x:hidden}
  aside nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;gap:4px;overflow:visible}
  .queue-tabs{display:grid;grid-template-columns:repeat(7,minmax(42px,1fr));align-items:center;gap:2px;padding:8px 5px;overflow-x:auto}
  .queue-tabs button{width:100%;min-width:42px;height:42px;padding:0;gap:2px;line-height:1}
  .queue-tabs .tab-icon,.queue-tabs .tab-icon svg{display:block;width:20px;height:20px;margin:0}
  .queue-tabs button b{position:absolute;right:1px;top:0;min-width:17px;height:17px;line-height:17px;padding:0 4px}
}
#countClosed{display:none}
.menu-brand{display:flex;align-items:center;gap:10px}

/* ---------- Seções que a primeira passada deste arquivo não cobriu ---------- */

/* Contadores nas abas de fila e no menu recolhido */
#openBadge{display:none!important;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 6px;font-size:10px;line-height:16px}
#openBadge.has-count{display:inline-block!important}
.queue-tabs button b,.personal-conversations b,#openBadge{display:inline-grid!important;place-items:center!important;min-width:20px!important;width:auto;height:20px;padding:0 5px!important;border-radius:999px!important;line-height:1!important;font-size:10.5px!important}
.queue-tabs button b:not(.has-count),.personal-conversations b:not(.has-count),#openBadge:not(.has-count){display:none!important}
.queue-tabs button b.has-count,.personal-conversations b.has-count,#openBadge.has-count{display:inline-block!important}
.queue-tabs button.active,.queue-tabs button.selected-tab,.queue-tabs .personal-conversations.active{background:var(--surface-3);border-color:var(--accent);color:var(--text);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
#countPersonal[hidden],#countPersonal:empty{display:none!important}
.queue-tabs #countClosed{display:none!important}

/* Canal pessoal — status de conexão e painel dedicado */
.personal-connection-status{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-fg,var(--accent));font-size:12px;font-weight:650}
.personal-connection-status.offline{background:var(--danger-soft);color:var(--danger)}
.modal-fields hr + p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal-fields hr + p:after{content:'● Conectado';display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-fg,var(--accent));font-size:12px;font-weight:650}
.personal-channel-panel{padding:16px;border:1px solid color-mix(in srgb,var(--channel) 50%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--channel) 9%,var(--surface-2))}
.personal-channel-title{display:flex;align-items:center;gap:12px}
.personal-channel-title h3{margin:0 0 3px}
.personal-channel-title small{color:var(--muted)}
.personal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.personal-actions button{padding-inline:8px}
@media(max-width:650px){.personal-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Miniaturas de mídia na biblioteca */
.media-thumb{width:100%;height:180px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--bg);margin-bottom:12px}
.media-thumb img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:650px){.media-thumb{height:150px}}

/* Construtor de fluxos — variações de largura já usadas em telas específicas */
.flow-builder{grid-template-columns:220px 1fr 300px}
.flow-builder .flow-palette{width:220px;min-width:220px}
.flow-builder .flow-block-choice{padding:9px 8px;gap:8px}
.flow-builder #flowEdges{z-index:3}
.flow-builder #flowEdges circle{fill:var(--violet);stroke:color-mix(in srgb,var(--violet) 50%,white);stroke-width:1.5}
.flow-builder .flow-node{z-index:2}
.flow-builder .flow-node-in{z-index:4}
.flow-inspector .flow-node-duplicate{margin-top:20px;width:100%}
.flow-inspector .flow-node-duplicate+.danger{margin-top:8px}
@media(max-width:900px){.flow-builder{grid-template-columns:190px 1fr}.flow-builder .flow-inspector{display:none}.flow-builder .flow-palette{width:190px;min-width:190px}}

/* Aviso de limite de usuários (quota) */
.quota-required{width:min(680px,calc(100vw - 28px))}
.quota-required .close{display:none!important}
.quota-block>p{color:var(--muted);line-height:1.5;margin:0 0 14px}
.quota-user-list{display:grid;gap:9px;max-height:48vh;overflow:auto;margin:20px 0}
.quota-user-list>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-1)}
.quota-user-list span{display:grid;gap:4px}
.quota-user-list small{color:var(--muted)}
#quotaLogout{width:100%}

/* Status de entrega (confirmação de leitura) */
.delivery-status{display:inline-flex;align-items:center;position:relative;margin-left:3px;font-weight:700;line-height:1;color:var(--muted)}
.delivery-status i{font-style:normal;display:inline-block}
.delivery-status i+i{margin-left:-4px}
.delivery-status.read{color:var(--violet)}
.delivery-status.failed{color:var(--danger)}

/* Indicador de gravação de áudio */
.audio-recording-indicator{--audio-level:.18;display:flex;align-items:center;gap:9px;padding:10px 14px;margin:0 12px 8px;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:12px;background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--text)}
.audio-recording-indicator strong{font-size:13px;color:var(--danger)}
.audio-recording-indicator time{min-width:42px;font-variant-numeric:tabular-nums;font-weight:700}
.audio-recording-indicator small{margin-left:auto;color:var(--muted)}
.recording-pulse{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent);animation:recordingPulse 1.15s infinite}
.recording-bars{height:22px;display:flex;align-items:center;gap:3px}
.recording-bars i{display:block;width:3px;height:100%;border-radius:4px;background:var(--danger);transform:scaleY(var(--audio-level));transition:transform 80ms linear;animation:recordingWave .75s ease-in-out infinite alternate}
.recording-bars i:nth-child(2),.recording-bars i:nth-child(4){animation-delay:-.25s}
.recording-bars i:nth-child(3){animation-delay:-.5s}
@keyframes recordingPulse{70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--danger) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 0%,transparent)}}
@keyframes recordingWave{from{transform:scaleY(calc(var(--audio-level)*.55))}to{transform:scaleY(var(--audio-level))}}
@media(max-width:700px){.audio-recording-indicator{margin:0 8px 6px}.audio-recording-indicator small{display:none}}

/* Modal de perfil */
#app>aside>.menu-brand{display:none!important}
#app>aside>nav{margin-top:0!important}
#app>aside{padding-top:12px!important}
.profile-modal-head{display:flex;align-items:center;gap:16px;padding:4px 0 20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.profile-modal-head .profile-photo-large{width:82px;height:82px;flex:0 0 82px;box-shadow:0 0 0 4px var(--surface-3)}
.profile-modal-head .profile-identity{min-width:0;flex:1}
.profile-modal-head .profile-identity h2{margin:0 0 5px;font-size:1.4rem}
.profile-modal-head .profile-identity p{margin:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-role-chip{display:inline-flex;margin-top:9px;padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-fg,var(--accent));font-size:11px;font-weight:700}
.profile-photo-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.profile-section{border:1px solid var(--line);border-radius:15px;padding:16px;background:var(--surface-1);margin-top:14px}
.profile-section h3{margin:0 0 4px;font-size:15px}
.profile-section>p{margin:0 0 15px;color:var(--muted);font-size:12px}
.profile-section .modal-fields{gap:12px}
.profile-security-note{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:12px;margin-top:9px}
.profile-save-row{display:flex;justify-content:flex-end;margin-top:18px}
.profile-save-row .primary{width:auto;min-width:150px}
.profile-personal-channel{margin-top:14px}
#profilePhoto{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;overflow:hidden}
.profile-avatar{border-radius:999px!important}
@media(max-width:650px){#app>aside{padding-top:8px!important}.profile-modal-head{align-items:flex-start;flex-wrap:wrap}.profile-modal-head .profile-identity{min-width:calc(100% - 104px)}.profile-save-row .primary{width:100%}}

.channel-name-icon{width:15px;height:15px;display:inline-grid;place-items:center;color:var(--channel);flex:0 0 auto}
.channel-name-icon svg{width:15px;height:15px;stroke:currentColor}
.conversation .channel-chip .channel-dot,.historyRow .channel-chip .channel-dot{display:none!important}
.conversation .channel-chip{color:var(--channel)!important}
.conversation .channel-chip>span:not(.channel-name-icon){color:var(--channel)!important}
#toast{pointer-events:none;max-width:min(430px,calc(100vw - 32px));white-space:normal;line-height:1.4}
dialog>#toast{position:fixed!important;right:20px!important;bottom:20px!important}
#createTicket,#setDepartment{display:none!important}
.reseller-entry{min-height:43px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
.reseller-entry:hover{background:var(--surface-3);color:var(--text);border-color:var(--line)}
.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Controle de presença rápido (sino no menu lateral) — distinto do seletor de presença do perfil */
.presence-control{position:relative;display:grid;place-items:center}
.presence-button,.presence-option{width:15px!important;height:15px!important;min-height:15px!important;margin:0!important;padding:0!important;border:2px solid var(--surface-1)!important;border-radius:50%!important;box-shadow:0 0 0 1px var(--line);background:var(--danger)}
.presence-button.online,.presence-option.online{background:var(--accent)}
.presence-button.busy,.presence-option.busy{background:var(--warn)}
.presence-button.offline,.presence-option.offline{background:var(--danger)}
.presence-menu{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:30;display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);box-shadow:var(--shadow-lg)}
.presence-option{width:20px!important;height:20px!important;min-height:20px!important}
.presence-option:hover{transform:scale(1.15)}

/* Histórico expansível de mensagens antigas — corrigido de novo: a versão
   anterior usava <details>/<summary> com display:contents pra fazer as
   bolhas de dentro caírem no fluxo flex de .messages e herdarem
   align-self:flex-start/flex-end (alinhamento esquerda/direita por
   remetente). Na prática isso não é confiável em todos os navegadores —
   o comportamento de display:contents sobre <details> não é garantido pela
   especificação — e o resultado batia com o relato do usuário: "hoje está
   tudo uma mensagem abaixo da outra independente de quem mandou". Trocado
   por elementos comuns (sem <details>): o botão fica fora, e
   .older-messages agora É ela mesma um container flex-column (mesmo
   gap/direção de .messages), então as bolhas de dentro se alinham
   corretamente sem depender de nenhum comportamento não garantido. */
.older-toggle-wrap{align-self:center;position:sticky;top:0;z-index:2}
.older-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;margin:8px auto;padding:6px 14px;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;color:var(--text-soft);font-size:12px;font-weight:650;cursor:pointer;box-shadow:var(--shadow-sm)}
.older-toggle:before{content:"↕";color:var(--accent-fg,var(--accent))}
.older-messages{display:flex;flex-direction:column;gap:9px}
.older-messages[hidden]{display:none}
@media(max-width:650px){.older-toggle{font-size:11.5px}}

#bulkRead,#bulkUnread{min-height:28px;padding:5px 7px;font-size:10px;line-height:1.1;white-space:nowrap}
.bulk-bar{overflow-x:auto;flex-wrap:nowrap}
.bulk-bar>*{flex:0 0 auto}

/* Criar conta a partir da tela de login */
.login-create-account{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.login-create-account span{color:var(--muted);font-size:13px}
.login-create-account .button{display:flex;justify-content:center;align-items:center;text-decoration:none}
.login-create-account small{color:var(--muted)}

/* Financeiro do cliente — card com histórico rolável, responsivo por container query */
.client-finance-card{container-type:inline-size;container-name:clientFinance;display:flex;flex-direction:column;min-width:0;max-height:min(680px,72dvh);overflow:hidden}
.client-finance-card .finance-pay-box{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--accent-soft)}
.client-finance-card .finance-pay-box.overdue{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--danger-soft)}
.client-finance-card .finance-pay-box.free{border-color:color-mix(in srgb,var(--violet) 45%,var(--line));background:var(--violet-soft)}
.client-finance-card .finance-pay-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.client-finance-card .finance-history{display:grid;grid-template-columns:1fr;gap:12px;min-width:0;max-width:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}
.client-finance-card .finance-history-head,.client-finance-card .finance-history-row{display:none}
.client-finance-card .finance-history-item{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);min-width:0}
.client-finance-card .finance-history-item>header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.client-finance-card .finance-history-item>header>strong{text-transform:capitalize;font-size:15px;min-width:0;overflow-wrap:anywhere}
.client-finance-card .finance-status{display:inline-flex;flex:0 0 auto;width:max-content;max-width:100%;padding:4px 8px;border-radius:999px;font-size:12px;white-space:nowrap}
.client-finance-card .finance-status.paid{background:var(--accent-soft);color:var(--accent-fg,var(--accent))}
.client-finance-card .finance-status.open{background:var(--warn-soft);color:var(--warn)}
.client-finance-card .finance-status.free{background:var(--violet-soft);color:var(--violet)}
.client-finance-card .finance-status.canceled{background:var(--danger-soft);color:var(--danger)}
.client-finance-card .finance-history-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.client-finance-card .finance-history-values>div,.client-finance-card .finance-history-invoice{display:grid;gap:4px;min-width:0}
.client-finance-card .finance-history-item small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.client-finance-card .finance-history-invoice{padding-top:12px;border-top:1px solid var(--line)}
.client-finance-card .finance-history-invoice span{color:var(--muted)}
.client-finance-card .finance-invoice-link{display:inline-flex;width:max-content;max-width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)}
.account-danger-card{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.pix-code-box{width:100%;min-height:110px;resize:none}
@container clientFinance (max-width:390px){
  .client-finance-card .finance-history-values{grid-template-columns:1fr}
  .client-finance-card .finance-history-item>header{align-items:flex-start;flex-direction:column}
  .client-finance-card .finance-status{white-space:normal}
}
@media(max-width:650px){
  .client-finance-card{max-height:68dvh}
  .client-finance-card .finance-history{scrollbar-gutter:auto;padding-right:0}
}

/* Últimos detalhes de acessibilidade e pequenos ajustes visuais */
.queue-filters{padding:0 12px 12px}
button:hover,.button:hover{filter:brightness(1.05)}
button:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.channel-icon-choice:first-letter{font-size:1.5em}
.menu-brand+nav{margin-top:0}
.profile>button{transition:color .15s var(--ease)}
.profile>button:hover{color:color-mix(in srgb,var(--danger) 85%,white)}
.personal-conversations .tab-icon{display:inline-grid}
.personal-conversations .tab-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.queue-tabs b,.queue-tabs .personal-conversations b{font-size:10.5px}
.queue-tabs .personal-conversations b.has-count{display:block}
.settings-tabs button:hover{background:var(--surface-3);color:var(--text)}
.page>header{display:flex;align-items:center;justify-content:space-between;padding:26px 0 20px}
.page>header h2{margin:0 0 3px;font-size:1.3rem}
.page>header p{margin:0;color:var(--muted);font-size:13.5px}
#toast:before{content:"i";width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--violet);color:#100e28;font-weight:800;flex:0 0 auto}
#toast{display:flex;align-items:center;gap:10px}

/* Classes órfãs identificadas e removidas desta consolidação (nenhum HTML ou
   JS do projeto usa .chat-header ou .message — a classe real em uso é
   .chat-head e .bubble; confirmado com busca em todo o público/assets
   antes de remover, para não derrubar nada por engano). */

/* ---------- Correção: selo de contagem sobre o ícone, nunca empurrando o layout ----------
   Bug real desta consolidação: a posição absoluta do selo (bolinha com o
   número) só existia numa media query de celular no arquivo original.
   No desktop ela virava um segundo item dentro do grid do botão
   (.queue-tabs button{display:grid;place-items:center}), empilhando
   verticalmente com o ícone e desalinhando a barra inteira — exatamente o
   bug relatado. Regra única aqui, no fim do arquivo, para vencer qualquer
   declaração anterior sem depender de caçar cada ocorrência espalhada. */
.queue-tabs button,.queue-tabs .personal-conversations{position:relative!important}
.queue-tabs button b,.queue-tabs .personal-conversations b,#openBadge{
  position:absolute!important;
  top:2px!important;
  right:2px!important;
  left:auto!important;
  bottom:auto!important;
  margin:0!important;
  display:none;
  min-width:16px!important;
  height:16px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:var(--accent)!important;
  color:var(--accent-ink)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  line-height:16px!important;
  text-align:center!important;
}
.queue-tabs button b.has-count,.queue-tabs .personal-conversations b.has-count,#openBadge.has-count{display:inline-block!important}
.queue-tabs button b:not(.has-count),.queue-tabs .personal-conversations b:not(.has-count),#openBadge:not(.has-count){display:none!important}

/* ---------- Correção: WhatsApp pessoal sumindo da fileira de ícones no responsivo ----------
   Bug real, herdado de uma regra antiga que nunca foi removida quando o
   layout mudou para uma fileira única de ícones roláveis. Uma regra de uma
   versão anterior (a poucas linhas acima deste comentário no arquivo)
   tira ".personal-conversations" do fluxo normal em telas de celular
   (position:absolute, flutuando isolado no canto superior direito) — o que
   fazia sentido num design onde esse botão vivia sozinho, fora da barra de
   abas, mas conflita direto com o design atual, que trata esse mesmo botão
   como só mais um ícone dentro de ".queue-tabs". Resultado: no celular ele
   some da fileira e reaparece flutuando em outro lugar da tela. Correção
   aqui, com a maior prioridade de cascata do arquivo, faz esse botão
   voltar a se comportar exatamente como os outros ícones da fileira. */
@media(max-width:650px){
  .queue-tabs .personal-conversations{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    z-index:auto!important;
    width:48px!important;
    min-width:48px!important;
    margin:0!important;
    padding:0!important;
  }
}

/* ---------- Sincronizar grupos: ícone girando durante a chamada, check ao concluir ---------- */
.syncGroupBtn.spinning{animation:syncSpin .8s linear infinite;pointer-events:none;opacity:.85}
.syncGroupBtn.sync-done{color:var(--accent-fg,var(--accent));border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
@keyframes syncSpin{to{transform:rotate(360deg)}}

/* v10.0.98 — IA desligada para a conta (botão IA no financeiro do /admin) */
body.ai-off [data-settings-view="ai"],body.ai-off [data-settings-view="knowledgeBase"],body.ai-off #aiView,body.ai-off #knowledgeBaseView{display:none!important}

/* v10.0.106 — ícones de ação (SVG no mesmo padrão) */
.ui-icon{width:18px;height:18px;display:block;flex:0 0 auto;pointer-events:none}
.chat-head .actions .icon-link .ui-icon{margin:auto}

/* v10.0.112 — ícones do sistema todo no mesmo padrão (SVG de traço, cor do texto) */
button .ui-icon,a .ui-icon{margin:auto}
button.with-icon{display:inline-flex;align-items:center;gap:8px}
button.with-icon .ui-icon{margin:0;width:16px;height:16px}
.delivery-status .ui-icon{width:14px;height:14px}
.empty-state .ui-icon{width:40px;height:40px;margin:0 auto;opacity:.55;stroke-width:1.5}
.system-note-label .ui-icon,.deleted-message .ui-icon,.locked-note .ui-icon{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.profile-security-note .ui-icon{width:18px;height:18px}
.flow-block-choice i .ui-icon,.flow-node header i .ui-icon,#flowInspector header i .ui-icon{width:18px;height:18px}
.mediaChoice span .ui-icon{width:28px;height:28px;margin:auto}
.conversation-select .ui-icon,.bulk-actions .ui-icon{width:17px;height:17px}

/* v10.0.113 — tela vazia e carregando no mesmo formato em todo o sistema */
.empty-state{display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;color:var(--muted);padding:28px 16px;border:1px dashed var(--line);border-radius:14px;min-height:140px}
.empty-state::before{content:"";width:36px;height:36px;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z'/%3E%3C/svg%3E") center/contain no-repeat;margin-bottom:4px}
.empty-state:has(> .ui-icon)::before,.empty-state:has(> div)::before{display:none}
.empty-state>.ui-icon{width:36px;height:36px;opacity:.45;margin:0 0 4px;stroke-width:1.6}
.empty-state strong,.empty-state h3{color:var(--text);font-size:15px;font-weight:650;margin:0}
.empty-state p,.empty-state span{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);max-width:440px}
.empty-state.compact{min-height:0;padding:14px 12px;gap:4px}
.empty-state.compact::before,.empty-state.compact>.ui-icon{width:22px;height:22px;margin:0}
.chat.empty .empty-state,#flowInspector .empty-state{border:0;min-height:0}
.skeleton-list{display:grid;gap:4px;padding:6px}
.skeleton-row{display:flex;gap:12px;align-items:center;padding:12px}
.skeleton-row span{display:grid;gap:8px;flex:1}
.skeleton-circle,.skeleton-line{display:block;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-4,var(--line)) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:skeleton-shine 1.2s ease-in-out infinite;border-radius:8px}
.skeleton-circle{width:40px;height:40px;border-radius:50%;flex:0 0 40px}
.skeleton-line{height:11px;width:70%}
.skeleton-line.short{width:40%}
@keyframes skeleton-shine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skeleton-circle,.skeleton-line{animation:none}}

/* v10.0.113 — etiquetas de situação: mesmo formato e cor fixa por significado
   (verde = ok/ativo/pago/concluído · amarelo = aguardando/em aberto ·
   vermelho = problema/inativo/vencido · roxo = em atendimento/grátis/informativo) */
.chip,.status,.finance-status,.finance-status-pill,.personal-connection-status,.privacy-chip,.profile-role-chip{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;border:1px solid transparent;width:max-content}
.chip-neutral,.status{background:var(--surface-4,var(--surface-3));color:var(--text-soft);border-color:var(--line)}
.chip-ok,.status.connected,.status.active,.finance-status.paid,.finance-status-pill.paid,.personal-connection-status,.profile-role-chip{background:var(--accent-soft);color:var(--accent-fg,var(--accent));border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.chip-wait,.finance-status.open,.finance-status-pill.open{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.chip-bad,.finance-status.canceled,.finance-status-pill.overdue,.finance-status-pill.inactive,.personal-connection-status.offline{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.chip-info,.finance-status.free,.finance-status-pill.free,.privacy-chip{background:var(--violet-soft);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}

/* v10.0.113 — avisos (toast) com tipo e ícone no padrão */
#toast:before{content:"";width:22px;height:22px;border-radius:50%;flex:0 0 22px;background:var(--violet);-webkit-mask:none;mask:none}
#toast:after{content:"";position:absolute;left:var(--toast-pad,16px);top:50%;margin-top:-11px;width:22px;height:22px;background:#161717;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center/14px no-repeat}
#toast{position:fixed}
#toast.toast-success:before{background:var(--accent)}
#toast.toast-success:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
#toast.toast-error:before{background:var(--danger)}
#toast.toast-error:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E")}
#toast.toast-error{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
#toast{display:flex;align-items:center;gap:10px}

/* v10.0.114 — contador de não lidas SEMPRE redondo, com o número dentro
   (lista de conversas, abas da fila, abas abertas, menu). Tamanho fixo em vez
   de "mínimo", para não esticar na altura da linha; "99+" cabe com fonte menor. */
.unread,.conversation .unread,.internal-user-row .unread{display:inline-grid!important;place-items:center!important;width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;padding:0!important;border-radius:50%!important;align-self:center!important;justify-self:end;flex:0 0 24px!important;font-size:10.5px!important;line-height:1!important;letter-spacing:-.02em;font-style:normal;box-sizing:border-box;overflow:hidden;white-space:nowrap}
.queue-tabs button b.has-count,.queue-tabs .personal-conversations b.has-count,#openBadge.has-count,.nav-unread:not([hidden]),.active-tab b{display:inline-grid!important;place-items:center!important;width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;padding:0!important;border-radius:50%!important;font-size:9.5px!important;line-height:1!important;letter-spacing:-.03em;box-sizing:border-box;overflow:hidden;white-space:nowrap}

/* v10.0.114 — botões só com ícone (texto vira dica ao passar o mouse) */
button.icon-only{display:inline-grid;place-items:center;width:40px;min-width:40px;height:40px;padding:0!important;flex:0 0 40px}
button.icon-only .ui-icon{width:18px;height:18px;margin:0}
button.icon-only.is-loading .ui-icon{animation:ui-spin .9s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.modal-fields button.icon-only,dialog button.icon-only{justify-self:end}
td button.icon-only+button.icon-only{margin-left:6px}
a.icon-only{display:inline-grid;place-items:center;width:40px;min-width:40px;height:40px;padding:0!important}
a.icon-only .ui-icon{width:18px;height:18px;margin:0}
input[type=color]{width:72px;height:44px;padding:4px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}

/* v10.0.114 — modais padronizados (/app e /admin) */
dialog#modal{width:min(560px,calc(100vw - 32px));max-height:min(88dvh,900px);padding:0;border-radius:18px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
dialog#modal[open]{display:flex;flex-direction:column}
dialog#modal>form{display:flex;flex-direction:column;min-height:0;margin:0}
dialog#modal .close{position:absolute;right:12px;top:12px;width:36px;height:36px;min-width:36px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;z-index:3;padding:0}
dialog#modal .close:hover{background:var(--surface-3);color:var(--text)}
dialog#modal .close .ui-icon{width:18px;height:18px}
#modalBody{padding:22px 24px 20px;overflow:auto;min-height:0;max-height:min(88dvh,900px);box-sizing:border-box}
#modalBody .modal-title,#modalBody>h2{margin:0 44px 18px 0;font-size:18px;line-height:1.3;font-weight:700}
#modalBody .modal-fields,#modalBody .fields{display:grid;gap:14px}
#modalBody label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text-soft)}
#modalBody label:has(> input[type=checkbox]),#modalBody label:has(> input[type=radio]){display:flex;align-items:center;gap:10px}
#modalBody .modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);position:sticky;bottom:-20px;background:var(--surface-2)}
#modalBody .modal-actions>*{flex:0 0 auto;width:auto;margin:0}
@media(max-width:650px){dialog#modal{width:calc(100vw - 20px);max-height:92dvh}#modalBody{padding:18px 16px 16px;max-height:92dvh}#modalBody .modal-title,#modalBody>h2{font-size:17px}}
/* v10.0.114 — ações dos cartões sempre à esquerda, na mesma linha de base,
   quebrando para a linha de baixo quando não cabem (antes os cartões de canal
   alinhavam à direita e o de "Meu WhatsApp" jogava a lixeira sozinha embaixo) */
.card-actions,.icon-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;align-items:center;margin-top:14px}
.react-message .ui-icon,.message-menu .ui-icon,.note-menu .ui-icon{width:13px;height:13px}
@media(max-width:650px){
  /* cabeçalho das páginas empilha no celular: título em cima, filtros/ações embaixo, sem espremer */
  .page>header{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0 14px}
  .page>header .header-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .page>header .header-actions select{flex:1 1 140px;min-width:0}
}
/* v10.0.114 — contadores das abas: círculo que cabe "99+" e sem corte */
.queue-tabs,.queue-tabs button{overflow:visible!important}
.queue-tabs button b.has-count,.queue-tabs .personal-conversations b.has-count,#openBadge.has-count,.active-tab b{width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;font-size:9px!important;letter-spacing:-.04em}
.active-tab b{background:var(--accent,#10b981);color:#FFFFFF;font-weight:800;margin-left:6px;flex:0 0 22px}
.queue-tabs button{position:relative}
.queue-tabs button b.has-count{position:absolute!important;top:-3px!important;right:calc(50% - 26px)!important;left:auto!important;margin:0!important;color:#fff!important;background:#1D4ED8!important;box-shadow:0 0 0 2px var(--bg,#0d1117)}
.active-tab b{color:#fff!important;background:#1D4ED8!important}
/* v10.0.125 — usuários extras */
.extra-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent,#16a34a) 15%,transparent);color:var(--accent,#16a34a);font-size:11px;font-weight:700;vertical-align:middle}
.extra-user-box{display:grid;gap:8px;padding:12px;border:1px dashed var(--line,#2a3a4a);border-radius:12px}.extra-user-box small{opacity:.8}
.extra-user-box .check-line{display:flex;align-items:center;gap:8px;font-weight:500}.extra-user-box .check-line input{width:auto;margin:0}
.extra-quota{margin:0 0 10px;opacity:.85}
body.is-extra-user #personalConversations,body.is-extra-user #countPersonal,body.is-extra-user .personal-only,body.is-extra-user #newChannel,body.is-extra-user .channel-connect-btn{display:none!important}
body.is-extra-groups .nav[data-view="contacts"]{display:none!important}
/* v10.0.125 — convite para instalar o app / ativar notificações (celular) */
.pwa-banner{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:900;display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;border:1px solid var(--line,#2a3a4a);border-radius:14px;background:var(--panel,#101c2b);color:var(--text,#F8FAFC);box-shadow:0 12px 40px #0008;font-size:13.5px;line-height:1.45}
.pwa-banner-text{flex:1;display:grid;gap:4px}.pwa-banner-text>b{font-size:14.5px}.pwa-banner-text .ui-icon{width:16px;height:16px;vertical-align:-3px}.pwa-banner-text button{justify-self:start;margin-top:4px}
.pwa-banner-close{background:transparent;border:0;color:inherit;font-size:22px;line-height:1;padding:2px 6px;cursor:pointer;opacity:.7}
.pwa-profile .card-actions{flex-wrap:wrap}
@media(max-width:900px){.pwa-banner{bottom:calc(88px + env(safe-area-inset-bottom))}}
/* v10.0.126 — módulos por usuário */
.user-mod-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}.user-mod-filter>span{font-weight:700;opacity:.8}.user-mod-filter button{width:auto;flex:0 0 auto;padding:6px 12px;font-size:13px}
.user-mod-chip{display:inline-block;margin:0 4px 4px 0;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:color-mix(in srgb,var(--accent,#16a34a) 14%,transparent);color:var(--accent,#16a34a)}
.user-mod-chip.mod-quality{background:color-mix(in srgb,#8b5cf6 16%,transparent);color:#a78bfa}.user-mod-chip.mod-meetings{background:color-mix(in srgb,#0ea5e9 16%,transparent);color:#38bdf8}
.user-mod-none,.user-mod-all{opacity:.6;font-size:12px}
.user-mod-box{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line,#2a3a4a);border-radius:12px;max-height:50vh;overflow:auto}.user-mod-box .check-line,.modal-fields>.check-line{display:flex;align-items:center;gap:8px;font-weight:500}.user-mod-box input,.modal-fields>.check-line input{width:auto;margin:0}
/* v10.0.127 — licenças por tipo na Equipe */
.license-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 10px}
.license-card{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line,#2a3a4a);border-radius:14px;background:color-mix(in srgb,var(--panel,#101c2b) 85%,transparent)}
.license-card>span{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.license-card>b{font-size:24px;line-height:1}.license-card>b small{font-size:13px;font-weight:600;opacity:.65}
.license-card>small{opacity:.75;font-size:12px}.license-card.empty{opacity:.6}
.license-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text,#F8FAFC) 10%,transparent);overflow:hidden}.license-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent,#16a34a)}
.license-card.lic-premium .license-bar i{background:#a78bfa}.license-card.lic-extra .license-bar i{background:#38bdf8}
.lic-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:color-mix(in srgb,var(--text,#F8FAFC) 9%,transparent)}
.lic-badge.lic-premium{background:color-mix(in srgb,#8b5cf6 18%,transparent);color:#a78bfa}.lic-badge.lic-extra{background:color-mix(in srgb,#0ea5e9 16%,transparent);color:#38bdf8}
@media(max-width:700px){.license-panel{grid-template-columns:1fr}.license-card{grid-template-columns:1fr auto;align-items:center}.license-card>span{grid-column:1}.license-card>b{grid-column:2;grid-row:1}.license-card .license-bar,.license-card>small{grid-column:1/-1}}

/* v10.0.136 — tela de entrar da marca 2 (ZEIVE): cores da marca, logo desenhado e botão branco sobre azul. */
.login-wordmark,.login-tagline{display:none}
html[data-brand="2"]{--accent:#2563FF;--accent-strong:#1D4ED8;--accent-ink:#ffffff;--green:#2563FF}
html[data-brand="2"] .login-shell{background:radial-gradient(60% 50% at 70% 0,#1a2a52 0,transparent 70%),#161717}
html[data-brand="2"] .login-card{background:#1C1D1D;border-color:#2A2C2C}
html[data-brand="2"] .login-card input{background:#161717;border-color:#363939}
html[data-brand="2"] .login-card button{background:#2563FF;color:#fff}
html[data-brand="2"] .login-card .brand-mark{background:#161717;color:#2563FF;border:1px solid #2A3657}
html.brand-wordmark .login-card .brand-mark,html.brand-wordmark .login-card h1[data-platform-name]{display:none}
html.brand-wordmark .login-wordmark{display:block;width:180px;height:auto;margin:6px 0 10px;color:#F8FAFC}
html.brand-wordmark .login-tagline{display:block;margin:0 0 6px;color:#94A3B8;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
html[data-brand="2"] .login-card .button.secondary{background:#2D2F2F;border:1px solid #363939;color:#F8FAFC}

html[data-brand="2"]{--bubble-out:#1D3FA8}


/* v10.0.142 — status do usuário sempre verde (online), amarelo (ocupado) e vermelho (offline), independente da cor principal. */
:root{--presence-online:#22C55E;--presence-busy:#EAB308;--presence-offline:#EF4444}
.presence{background:var(--presence-offline)!important}
.presence.online,.presence-dot.online,.presence-choice.online,.presence-button.online,.presence-option.online{background:var(--presence-online)!important;box-shadow:none}
.presence.busy,.presence-dot.busy,.presence-choice.busy,.presence-button.busy,.presence-option.busy{background:var(--presence-busy)!important}
.presence.offline,.presence-dot,.presence-dot.offline,.presence-choice.offline,.presence-button.offline,.presence-option.offline{background:var(--presence-offline)!important}

/* v10.0.147 — tela de entrar da marca 1: só o nome da plataforma, sem o ícone. */
html:not([data-brand="2"]) .login-card .brand-mark{display:none}
/* v10.0.149 — abas da fila sempre cabem na coluna (a de Concluídas ficava cortada à direita). */
.queue-tabs{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;grid-template-columns:none!important;gap:4px!important;padding:8px 6px!important;overflow:visible!important}
.queue-tabs>button,.queue-tabs>.personal-conversations{width:100%!important;min-width:0!important;max-width:56px;justify-self:center;flex:none!important}