/* =====================================================================
   IH7 Tech — front-end completo (landing + painel) no estilo GPT Maker
   Vanilla CSS. Tema: landing escura / painel claro.
   ===================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Paleta oficial da marca (mesmas cores da logo): dourado + navy.
     --violet-* continuam se chamando "violet" só pelo nome histórico das
     variáveis (pra não reescrever toda regra do arquivo) mas agora são NAVY. */
  --violet:#25215c; --violet-600:#322c78; --violet-700:#1a1740; --violet-800:#100e28;
  --violet-soft:#f7efdd; --violet-softer:#fbf6ea;
  --grad:linear-gradient(135deg,#38316f 0%,#1a1740 100%);
  --grad-dark:linear-gradient(155deg,#25215c 0%,#100e28 100%);
  --grad-gold:linear-gradient(150deg,#e8cb7d 0%,#c9a24b 55%,#9c7a2e 100%);
  --green:#22c55e; --green-600:#16a34a;
  --ink:#1f2430; --ink-2:#3b4252; --muted:#5d6474; --dim:#6e7587;
  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#faf8f2;
  --line:#ece7da; --line-2:#ddd4bd;
  --ok:#16a34a; --ok-soft:#dcfce7; --warn:#d97706; --warn-soft:#fef3c7;
  /* --ok em cima de --ok-soft dá só 3:1; este é o tom pra TEXTO (4,6:1). */
  --ok-texto:#15803d;
  /* Versão legível do estado sobre fundo claro — o --danger/--warn cru é
     forte demais pra texto pequeno. Cada tema tem a sua. */
  --danger-texto:#b91c1c; --warn-texto:#b45309;
  --danger:#dc2626; --danger-soft:#fee2e2; --info:#2563eb; --info-soft:#dbeafe;
  --r:16px; --r-sm:11px; --r-lg:22px;
  --sh-sm:0 1px 2px rgba(30,24,10,.05),0 2px 8px rgba(30,24,10,.05);
  --sh:0 6px 24px -10px rgba(40,30,10,.18),0 2px 8px rgba(30,24,10,.05);
  --sh-lg:0 24px 60px -18px rgba(30,24,10,.3);
  --f-head:'Sora','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  /* A monoespaçada já vinha sendo baixada e não era usada em lugar nenhum.
     Ela é a voz dos DADOS e dos RÓTULOS: número de seção, ficha técnica,
     métrica. É o contraste entre ela e a Sora que dá o ar de documentação
     de engenharia em vez de peça publicitária. */
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --gold:#c9a24b; --gold-2:#e8cb7d; --gold-dim:#9c7a2e; --gold-soft:rgba(201,162,75,.16);
  --navy-ink:#25215c;
  /* Tinta que vai EM CIMA do accent. Existe porque o accent muda de navy
     (claro) pra ouro (escuro): cravar #fff junto do fundo dava texto branco
     sobre ouro, 1,78:1 — ilegível. Quem pinta o fundo de --violet usa isto
     no color, nunca uma cor fixa. */
  --on-accent:#fff;
}

/* ===================================================================
   DESIGN SYSTEM DO PAINEL
   ===================================================================
   Três camadas, nesta ordem:

     1. ESCALAS (:root)      — espaçamento, cantos, motion. Não mudam com o
                               tema. Existem pra acabar com número solto no
                               meio da regra: se um respiro é "3", é --sp-3
                               em toda a interface.
     2. TEMA ESCURO          — o PADRÃO do app desde 2026-09-19. Vale pra
                               #gm-app e pros overlays que nascem fora dele
                               (modal, menu, toast).
     3. TEMA CLARO           — opção, em body[data-theme="light"]. Precisa
                               redeclarar os valores porque o bloco escuro,
                               por ser mais específico que :root, ganharia.

   A landing e a tela de login NÃO entram aqui: continuam sempre claras,
   com os tokens do :root, de propósito.

   SUPERFÍCIES EM CAMADAS: --bg (fundo) < --surface (cartão) < --surface-2
   (encaixe dentro do cartão) < --surface-3 (o que flutua: menu, modal,
   popover). Elevação é cor + borda; sombra só entra no que flutua de
   verdade. Isso é o que dá profundidade sem virar festival de box-shadow.
   =================================================================== */

:root{
  /* Espaçamento — passo de 4px (o --sp-05 é a exceção: fresta entre itens
     de uma lista colada, onde 4px já separaria demais).
     A auditoria achou 14 valores de gap diferentes no painel, de 1px a 18px.
     Ritmo irregular é o que faz a interface parecer montada por pessoas
     diferentes em dias diferentes. */
  --sp-05:2px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* Cantos — 5 degraus. A auditoria achou 14 raios diferentes espalhados
     (4,6,7,8,9,10,11,12,13,14,16,18,20,22): perto demais uns dos outros pra
     alguém notar a diferença, longe demais pra parecer intencional.
     Os nomes curtos (--r*) são os antigos e apontam pros canônicos, então os
     dois convivem sem reescrever o arquivo inteiro. */
  --radius-xs:8px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --radius-xl:22px; --radius-full:999px;
  --r-sm:var(--radius-sm); --r:var(--radius-md); --r-lg:var(--radius-xl);
  /* Motion — rápido e natural, na faixa que o olho lê como "resposta". */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:130ms; --dur:180ms; --dur-slow:240ms;

  /* Tipografia — 8 degraus, razão ~1,25 entre eles.
     A auditoria encontrou 49 tamanhos distintos no painel (de .55rem a
     2.6rem), muitos separados por meio pixel. Isso não é hierarquia, é
     ruído: sem degraus perceptíveis o olho não consegue ordenar a
     informação. Cada degrau daqui é visivelmente diferente do vizinho. */
  --fs-caption:.68rem;  /* ~11px — overline, micro-rótulo */
  --fs-small:.78rem;    /* ~12px — legenda, badge, pé de cartão */
  --fs-body-sm:.86rem;  /* ~14px — corpo denso, item de lista, botão */
  --fs-body:.98rem;     /* ~16px — corpo padrão */
  --fs-h3:1.15rem;      /* ~18px */
  --fs-h2:1.45rem;      /* ~23px */
  --fs-h1:1.8rem;       /* ~29px */
  --fs-display:2.4rem;  /* ~38px — números de destaque */
}

/* ---------------- TEMA ESCURO (padrão do app) ---------------- */
#gm-app,
.gm-modal,
.gm-menu,
.gm-toast-wrap{
  --bg:#0b0a14; --surface:#141324; --surface-2:#1b1930; --surface-3:#232040;
  --surface-hover:#1f1d36; --surface-active:#282549;
  --line:#262340; --line-2:#332f52;
  --ink:#f3f1fb; --ink-2:#d2cde8; --muted:#a49ec6; --dim:#8b85ad;
  /* O accent do painel escuro é o DOURADO da marca — um accent só, usado
     com parcimônia. (A variável se chama --violet por história; virou navy
     no tema claro e ouro no escuro.) */
  --violet:#e3bd6d; --violet-600:#eccb86; --violet-700:#f0d08c; --violet-800:#17131f;
  --violet-soft:rgba(227,189,109,.15); --violet-softer:rgba(227,189,109,.08);
  --on-accent:#17131f;
  --ok-texto:#4ade80;
  --danger-texto:#fca5a5; --warn-texto:#fcd34d;
  --ok-soft:rgba(74,222,128,.14); --warn-soft:rgba(251,191,36,.14);
  --danger-soft:rgba(248,113,113,.14); --info-soft:rgba(96,165,250,.14);
  /* Sem sombra no que está APOIADO. Sobre #0b0a14 uma sombra preta de 1px
     é invisível: 35 elementos pagavam a pintura e não entregavam nada. No
     escuro quem separa camada é a cor da superfície e a borda; sombra fica
     só pro que realmente flutua (--sh em popovers, --sh-lg em modais). */
  --sh-sm:none;
  --sh:0 4px 16px -6px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
  --sh-lg:0 24px 60px -18px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.5);
  --glow-accent:0 6px 16px -10px rgba(227,189,109,.45);
  color-scheme:dark;
}
/* Semânticas que não vêm de variável e ficariam escuras demais no escuro. */
#gm-app .tag.ok{color:#4ade80}
#gm-app .tag.warn{color:#fbbf24}
#gm-app .tag.info{color:#60a5fa}
#gm-app .tag.danger{color:#f87171}
#gm-app .tag.off{background:var(--surface-2);color:var(--muted)}
#gm-app .dotstat.off::before{background:#4a4270}
#gm-app .gm-nav a.active .nav-count{background:var(--violet-800);color:var(--violet)}
#gm-app ::-webkit-scrollbar-thumb{background:#312d4e}
#gm-app ::-webkit-scrollbar-thumb:hover{background:#3e3960}
/* A tinta do botão primário vem de --on-accent (ver o token). Aqui só o que
   é específico do escuro: o peso e o brilho do ouro. */
#gm-app .btn-primary,.gm-modal .btn-primary,.gm-menu .btn-primary{font-weight:700}
#gm-app .btn-primary:hover,.gm-modal .btn-primary:hover{background:var(--violet-700)}
#gm-app .btn-white{background:var(--surface-3);color:var(--ink);border-color:var(--line-2)}
#gm-app .btn-white:hover{background:var(--surface-active)}

/* ---------------- TEMA CLARO (opção) ---------------- */
body[data-theme="light"] #gm-app,
body[data-theme="light"] .gm-modal,
body[data-theme="light"] .gm-menu,
body[data-theme="light"] .gm-toast-wrap{
  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#faf8f2; --surface-3:#ffffff;
  --surface-hover:#f4f1e9; --surface-active:#efebe0;
  --line:#ece7da; --line-2:#ddd4bd;
  --ink:#1f2430; --ink-2:#3b4252; --muted:#5d6474; --dim:#6e7587;
  --violet:#25215c; --violet-600:#322c78; --violet-700:#1a1740; --violet-800:#100e28;
  --violet-soft:#f7efdd; --violet-softer:#fbf6ea;
  --on-accent:#fff;
  --ok-texto:#15803d;
  /* Versão legível do estado sobre fundo claro — o --danger/--warn cru é
     forte demais pra texto pequeno. Cada tema tem a sua. */
  --danger-texto:#b91c1c; --warn-texto:#b45309;
  --ok-soft:#dcfce7; --warn-soft:#fef3c7; --danger-soft:#fee2e2; --info-soft:#dbeafe;
  --sh-sm:0 1px 2px rgba(30,24,10,.05),0 2px 8px rgba(30,24,10,.05);
  --sh:0 6px 24px -10px rgba(40,30,10,.18),0 2px 8px rgba(30,24,10,.05);
  --sh-lg:0 24px 60px -18px rgba(30,24,10,.3);
  --glow-accent:0 10px 24px -12px rgba(37,33,92,.55);
  color-scheme:light;
}
body[data-theme="light"] #gm-app .tag.ok{color:#15803d}
body[data-theme="light"] #gm-app .tag.warn{color:#b45309}
body[data-theme="light"] #gm-app .tag.info{color:#1d4ed8}
body[data-theme="light"] #gm-app .tag.danger{color:#b91c1c}
body[data-theme="light"] #gm-app .tag.off{background:#f1f0f6;color:var(--muted)}
body[data-theme="light"] #gm-app .dotstat.off::before{background:#cbd0dd}
body[data-theme="light"] #gm-app .gm-nav a.active .nav-count{background:#fff;color:var(--violet)}
body[data-theme="light"] #gm-app ::-webkit-scrollbar-thumb{background:#d8d2ea}
body[data-theme="light"] #gm-app ::-webkit-scrollbar-thumb:hover{background:#c4bce0}
body[data-theme="light"] #gm-app .btn-primary{font-weight:600}
body[data-theme="light"] #gm-app .btn-white{background:#fff;color:var(--violet-800);border-color:transparent}
body[data-theme="light"] #gm-app .btn-white:hover{background:#f3ecff}

html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
/* Tela decidida antes do 1º desenho (gptmaker-boot.js marca o <html>): até o
   gptmaker.js mostrar a tela de verdade, a landing não aparece por trás do
   painel/login e o fundo já nasce na cor de quem vai abrir — senão, ao
   recarregar logado, a página inicial "piscava" antes do painel. */
html[data-tela="app"] #gm-landing,
html[data-tela="auth"] #gm-landing{display:none}
html[data-tela="auth"] body{background:#fff}
html[data-tela-tema="dark"] body{background:#0b0a14}
::selection{background:rgba(37,33,92,.18)}

/* Foco por TECLADO visível em tudo (:focus-visible só marca quem navega de
   Tab, nunca aparece no clique de mouse). Antes não existia anel nenhum: dava
   pra atravessar o painel de Tab sem saber onde você estava. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
/* Dentro do app (escuro por padrão) o navy do anel de foco some no fundo:
   o anel é dourado. No tema claro volta a ser o navy da marca. */
#gm-app :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible{outline-color:var(--gold-2)}
body[data-theme="light"] #gm-app :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible{outline-color:var(--violet)}
/* Fundo escuro (landing/hero, cartões navy): o violeta não aparece. */
.lp-nav :focus-visible,.lp-hero :focus-visible{outline-color:var(--gold-2)}

/* Existe pro leitor de tela, não pro olho. Usar quando um controle é claro
   visualmente (um avatar, um ícone) mas precisa dizer o que é em voz alta. */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* "Ir para o conteúdo": invisível até receber o foco no Tab. */
.pular-para-conteudo{position:fixed;top:8px;left:8px;z-index:200;padding:10px 16px;border-radius:var(--radius-sm);
  background:var(--violet);color:var(--on-accent);font-weight:600;font-size:var(--fs-body-sm);box-shadow:var(--sh);
  transform:translateY(-160%);transition:transform .18s}
.pular-para-conteudo:focus{transform:none}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d8d2ea;border-radius:var(--radius-xs);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#c4bce0;background-clip:padding-box}

/* ---------------- Botões / primitivos ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:42px;padding:0 18px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-body-sm);white-space:nowrap;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn-lg{height:52px;padding:0 26px;font-size:var(--fs-body);border-radius:var(--radius-md)}
.btn-sm{height:34px;padding:0 13px;font-size:var(--fs-small);gap:var(--sp-2)}
.btn-block{width:100%}
.btn-primary{background:var(--violet);color:var(--on-accent);box-shadow:var(--glow-accent)}
.btn-primary:hover{background:var(--violet-700)}
.btn-white{background:#fff;color:var(--violet-800);font-weight:700}
.btn-white:hover{background:#f3ecff}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-softer)}
.btn-danger{background:var(--danger);color:#fff}
.btn i{font-size:.9em}

.chip{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 10px;border-radius:999px;font-size:var(--fs-caption);font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 9px;border-radius:var(--radius-xs);font-size:var(--fs-caption);font-weight:700;letter-spacing:.02em}
.tag.ok{background:var(--ok-soft);color:var(--ok-600,#15803d)}
.tag.off{background:#f1f0f6;color:var(--muted)}
.tag.warn{background:var(--warn-soft);color:#b45309}
.tag.info{background:var(--info-soft);color:#1d4ed8}
.tag.new{background:var(--violet-soft);color:var(--violet)}
.tag.danger{background:var(--danger-soft);color:#b91c1c}
.dotstat{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.dotstat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
.dotstat.on::before{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dotstat.off::before{background:#cbd0dd}
.dotstat.err::before{background:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.15)}
/* "em andamento" — conexão que ainda não fechou (ex.: QR gerado, esperando leitura) */
.dotstat.warn::before{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}

.field{display:flex;flex-direction:column;gap:var(--sp-1)}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.input,.select,.textarea{height:42px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s,box-shadow .15s;width:100%}
.textarea{height:auto;padding:11px 13px;min-height:96px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}

/* Permissões do operador (modais de convite/edição da tela Equipe) */
.perm-hint{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.gm-modal-card .perm-hint{margin:-2px 0 8px}
.perm-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--sp-2)}
.perm-item{display:flex;align-items:flex-start;gap:var(--sp-2);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;transition:border-color .15s,background .15s}
.perm-item:hover{border-color:var(--violet)}
.perm-item:has(input:checked){border-color:var(--violet);background:var(--violet-softer)}
.perm-item input{flex:none;margin-top:3px;accent-color:var(--violet)}
.perm-txt{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0}
.perm-txt b{font-size:var(--fs-body-sm);font-weight:600;color:var(--ink)}
.perm-txt small{font-size:var(--fs-caption);color:var(--muted);line-height:1.35}

/* ---------------- Autocomplete (busca de usuário no admin) ---------------- */
.ac-list{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-lg);max-height:220px;overflow-y:auto;z-index:20;padding:6px}
.ac-item{display:flex;flex-direction:column;gap:var(--sp-05);width:100%;text-align:left;padding:8px 10px;border-radius:var(--radius-xs);font-size:var(--fs-small)}
.ac-item:hover{background:var(--violet-softer)}
.ac-item b{color:var(--ink);font-weight:600}
.ac-item span{color:var(--muted);font-size:var(--fs-small)}
.ac-empty{padding:10px;font-size:var(--fs-small);color:var(--muted);text-align:center}

/* ---------------- Busca rápida (Ctrl+K) ---------------- */
.cp-item{display:flex;gap:var(--sp-3);align-items:center;padding:10px 12px;border-radius:var(--radius-sm)}
.cp-item:hover,.cp-item:focus-visible{background:var(--violet-softer)}
.cp-item i{color:var(--violet);width:16px}

/* Chips de destinatário (notificações admin — modo "específicos") */
.notif-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:9px}
.notif-chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 6px 5px 12px;border-radius:999px;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-small);font-weight:600}
.notif-chip button{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--violet);font-size:var(--fs-caption)}
.notif-chip button:hover{background:rgba(0,0,0,.08)}

/* ---------------- Toast ---------------- */
.gm-toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;pointer-events:none}
.gm-toast{display:flex;align-items:center;gap:var(--sp-3);background:#1b1730;color:#fff;padding:12px 18px;border-radius:var(--radius-md);font-size:var(--fs-body-sm);font-weight:600;box-shadow:0 20px 50px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(14px);transition:.25s}
.gm-toast.show{opacity:1;transform:none}
.gm-toast i{color:#b794f6}
.gm-toast.ok i{color:#4ade80}
.gm-toast.err i{color:#f87171}

/* ---------------- Dropdown menu / popover ---------------- */
.gm-menu{position:fixed;z-index:99990;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-lg);padding:7px;min-width:240px;max-width:340px;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.gm-menu h5{font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:9px 10px 5px}
.gm-menu button,.gm-menu a{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:9px 11px;border-radius:var(--radius-sm);font-size:var(--fs-body-sm);font-weight:500;color:var(--ink-2)}
.gm-menu button:not(:disabled):hover,.gm-menu a:hover{background:var(--violet-softer);color:var(--violet)}
.gm-menu button i,.gm-menu a i{width:16px;text-align:center;color:var(--dim)}
.gm-menu button:not(:disabled):hover i,.gm-menu a:hover i{color:var(--violet)}
.gm-menu button:disabled{cursor:not-allowed;opacity:.7}
.gm-menu .sep{height:1px;background:var(--line);margin:6px 4px}
.gm-menu .mi-note{padding:6px 11px 10px;font-size:var(--fs-small);color:var(--muted);font-weight:500}
.gm-menu.vibe{background:var(--grad-dark);border:none;color:#fff;padding:16px}
.gm-menu.vibe h5{color:rgba(255,255,255,.6)}
.gm-menu.vibe .mi-note{color:rgba(255,255,255,.8)}
.gm-menu .noti{display:block;padding:10px 11px;border-radius:var(--radius-sm)}
.gm-menu .noti:hover{background:var(--violet-softer)}
.gm-menu .noti b{display:block;font-size:var(--fs-small);color:var(--ink)}
.gm-menu .noti span{font-size:var(--fs-small);color:var(--muted)}
.gm-menu .noti time{font-size:var(--fs-caption);color:var(--dim)}

/* ---------------- Modal ---------------- */
.gm-modal{position:fixed;inset:0;z-index:99995;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(24,16,48,.55);backdrop-filter:blur(4px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.gm-modal-card{background:var(--surface);color:var(--ink);border-radius:var(--radius-xl);box-shadow:var(--sh-lg);width:100%;max-width:460px;max-height:calc(100vh - 44px);overflow-y:auto;padding:32px;text-align:center;animation:pop .2s ease;position:relative}
.gm-modal-card.wide{max-width:620px;text-align:left}
.gm-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:var(--radius-sm);color:var(--muted)}
.gm-modal-x:hover{background:var(--surface-2)}
.gm-modal-ic{width:78px;height:78px;border-radius:var(--radius-xl);display:grid;place-items:center;margin:0 auto 18px;font-size:var(--fs-h1);color:#fff;background:linear-gradient(150deg,#fbbf24,#f97316)}
.gm-modal-card h3{font-size:var(--fs-h2);margin-bottom:8px}
.gm-modal-card p{color:var(--muted);font-size:var(--fs-body);margin-bottom:22px}
/* Confirmação do painel (ver confirmar() em gptmaker.js) — o ícone diz na
   hora se é uma pergunta ou algo que não dá pra desfazer. */
.gm-modal-ic.pergunta{background:var(--grad-dark)}
.gm-modal-ic.perigo{background:linear-gradient(150deg,#f87171,#dc2626)}
.gm-confirm-acoes{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.gm-confirm-acoes .btn{min-width:132px}

/* ===================================================================
   TOUR DE BOAS-VINDAS (primeira visita ao painel)
   =================================================================== */
.tour-spot{position:fixed;z-index:99990;border-radius:var(--radius-md);box-shadow:0 0 0 6000px rgba(15,10,30,.72);pointer-events:none;transition:top .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1);animation:tourPulse 1.8s ease-in-out infinite}
@keyframes tourPulse{0%,100%{outline:2px solid rgba(232,203,125,.95);outline-offset:1px}50%{outline:2px solid rgba(232,203,125,.35);outline-offset:3px}}
.tour-card{position:fixed;z-index:99991;background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);box-shadow:0 30px 70px -20px rgba(15,10,30,.5);padding:22px;animation:pop .2s ease;transition:top .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1);width:340px;max-width:calc(100vw - 28px)}
/* .tour-card.center usa transform pra se centralizar (top/left:50% +
   translate(-50%,-50%)) — a animação "pop" da .tour-card base zera esse
   transform durante os 0.2s dela (keyframes controlam a propriedade inteira,
   não só o que mudou), então o card nascia com o canto no centro da tela em
   vez do card inteiro, e só "pulava" pro lugar certo quando a animação
   terminava. popCenter mantém o translate(-50%,-50%) do início ao fim. */
@keyframes popCenter{from{opacity:0;transform:translate(-50%,-50%) translateY(-6px) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
.tour-card.center{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;text-align:center;padding:34px 30px 28px;animation:popCenter .2s ease}
.tour-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:var(--radius-xs);color:var(--dim);display:grid;place-items:center}
.tour-x:hover{background:var(--surface-2);color:var(--muted)}
.tour-ic{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:var(--fs-h3);background:var(--violet-soft);color:var(--violet);margin-bottom:14px}
.tour-card.center .tour-ic{width:64px;height:64px;border-radius:var(--radius-lg);font-size:var(--fs-h1);margin:0 auto 16px;background:var(--grad-gold);color:var(--violet-800);box-shadow:0 14px 30px -12px rgba(201,162,75,.6)}
.tour-card-eyebrow{font-size:var(--fs-caption);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tour-card h4{font-family:var(--f-head);font-size:var(--fs-h3);margin-bottom:7px;line-height:1.25}
.tour-card p{font-size:var(--fs-body-sm);color:var(--muted);line-height:1.55;margin-bottom:18px}
.tour-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.tour-card.center .tour-card-foot{justify-content:center;flex-direction:column;gap:16px}
.tour-card-foot .btn[disabled]{visibility:hidden}


/* Regras da landing (nav/hero/secoes/footer) ficam num bloco unico
   "LANDING" no fim do arquivo — editar la, sem criar blocos "vN" novos. */

/* ===================================================================
   APP SHELL
   =================================================================== */
#gm-app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:var(--bg);color:var(--ink)}
#gm-app.side-collapsed{grid-template-columns:78px minmax(0,1fr)}

.gm-scrim{position:fixed;inset:0;background:rgba(20,14,40,.44);z-index:60;opacity:0;transition:.2s}
.gm-scrim.show{opacity:1}

.gm-side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-4);padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:70}
.gm-side-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:2px 6px}
.gm-brand{display:flex;align-items:center;gap:var(--sp-2);min-width:0;transition:opacity var(--dur) var(--ease)}
.gm-brand:hover{opacity:.78}
.gm-brand-name{font-family:var(--f-head);font-weight:700;font-size:var(--fs-h3);white-space:nowrap}
.gm-brand-name b{color:var(--violet);font-weight:800}
.gm-side-collapse{width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--line);color:var(--dim);display:grid;place-items:center}
.gm-side-collapse:hover{background:var(--violet-soft);color:var(--violet)}
.side-collapsed .gm-side-collapse i{transform:rotate(180deg)}

/* Seletor de workspace: é CONTEXTO, não ação principal. Era um bloco cheio
   de gradiente competindo com a logo logo acima; agora é uma superfície de
   encaixe com borda sutil, no mesmo peso dos itens de navegação. */
.gm-ws{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:var(--fs-body-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.gm-ws:hover{background:var(--surface-hover);border-color:var(--line-2)}
.gm-ws-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-ws-caret{font-size:var(--fs-caption);opacity:.85}
.gm-ws-ic{display:none;font-size:var(--fs-body)}
/* console do admin: não é seletor de empresa, é só o rótulo do ambiente */
.gm-ws-admin{cursor:default;background:var(--grad-dark);border:1px solid rgba(232,203,125,.3)}
/* :hover do .gm-ws (fundo claro) ganhava daqui: texto branco sumia no bege */
.gm-ws-admin:hover{filter:none;background:var(--grad-dark);border-color:rgba(232,203,125,.45)}
.gm-ws-admin .gm-ws-ic{display:block;color:var(--gold-2)}
.gm-ws-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--grad-gold);color:var(--violet-800);font-size:var(--fs-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase}

.gm-nav{display:flex;flex-direction:column;gap:var(--sp-05);flex:1;overflow-y:auto;padding-right:2px}
.gm-nav .nav-sec{font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:16px 12px 6px}
.gm-nav a{display:flex;align-items:center;gap:var(--sp-3);padding:9px 12px;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-size:var(--fs-body-sm);position:relative}
.gm-nav a i{width:18px;text-align:center;font-size:var(--fs-body);opacity:.85}
.gm-nav a:hover{background:var(--surface-2);color:var(--ink)}
.gm-nav a.active{background:var(--violet-soft);color:var(--violet);font-weight:650}
.gm-nav a.active i{opacity:1}
.gm-nav a .nav-count{margin-left:auto;font-size:var(--fs-caption);font-weight:700;background:var(--surface-2);color:var(--muted);padding:1px 7px;border-radius:999px}
.gm-nav a.active .nav-count{background:#fff;color:var(--violet)}

/* --- rodapé da sidebar: só o aviso de trial --- */
.gm-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3)}
.gm-trial{background:var(--grad-dark);color:#fff;border-radius:var(--radius-lg);padding:38px 16px 16px;text-align:center;position:relative;box-shadow:var(--sh-lg);margin-bottom:var(--sp-2)}
.gm-trial-rocket{position:absolute;top:0;left:50%;transform:translate(-50%,-42%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-h3);color:var(--violet-800);background:var(--grad-gold);border:3px solid var(--bg);box-shadow:0 10px 22px -8px rgba(201,162,75,.6)}
.gm-trial p{font-size:var(--fs-small);color:#e6ddfb;margin-bottom:14px;line-height:1.45}


/* A conta mora na barra de cima, ao lado do sino, e é SÓ o avatar
   (.gm-avbtn) — ver a barra de cima. */

.side-collapsed .gm-brand-name,.side-collapsed .gm-ws-label,.side-collapsed .gm-ws-caret,
.side-collapsed .gm-nav .nav-sec,.side-collapsed .gm-nav a span,.side-collapsed .gm-nav a .nav-count,
.side-collapsed .gm-trial p,.side-collapsed .btn-white span{display:none}
.side-collapsed .gm-side-head{flex-direction:column;justify-content:center;gap:var(--sp-3)}
.side-collapsed .gm-ws{justify-content:center;padding:11px 0}
.side-collapsed .gm-ws-ic{display:block}
.side-collapsed .gm-nav a{justify-content:center;gap:0;padding:11px 0}
.side-collapsed .gm-nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--violet)}
.side-collapsed .gm-trial{padding:34px 8px 12px}
.side-collapsed .gm-trial .btn-white{padding:0}

.gm-shell{min-width:0;display:flex;flex-direction:column;min-height:100vh}
/* Sem backdrop-filter de propósito: num topo fixo ele obriga o navegador a
   refazer o desfoque de tudo que passa por baixo a cada frame de rolagem (e a
   cada frame do pulso do botão amarelo, que fica aqui dentro). Medido: era o
   que fazia o painel gastar CPU parado. Fundo quase opaco dá o mesmo visual. */
/* Fundo por TOKEN, não cor fixa: com o creme cravado aqui a barra continuou
   branca quando o painel virou escuro — um bloco aceso no alto da tela. */
.gm-top{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:var(--sp-4);padding:12px clamp(14px,3vw,28px);background:var(--bg);border-bottom:1px solid var(--line)}
/* flex:0 0 auto: sem isso o botão do menu era comprimido a 17px de largura
   (alvo de toque bem abaixo do mínimo) quando a barra ficava apertada. */
.gm-top-burger{display:none;flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-h3)}
/* min-width:0 (aqui e no input): item flex não encolhe além do conteúdo por
   padrão, e o campo de busca era o que estourava a barra no celular. */
.gm-search{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;gap:var(--sp-3);height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-md);box-shadow:var(--sh-sm)}
.gm-search i{color:var(--dim);font-size:var(--fs-body-sm)}
.gm-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--fs-body-sm)}
.gm-search input::placeholder{color:var(--dim)}
.gm-search kbd{font-family:var(--f-body);font-size:var(--fs-caption);font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px 6px}
.gm-top-actions{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;flex:0 0 auto}
.gm-credits{display:flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--sh-sm)}
.gm-credits i{color:var(--violet)}
.gm-credits b{font-weight:700;font-size:var(--fs-body-sm)}
.gm-credits span{font-size:var(--fs-small);color:var(--muted)}
.gm-credits:hover{border-color:var(--violet)}
.gm-vibe{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--violet-800);background:var(--grad-gold);box-shadow:0 8px 20px -8px rgba(201,162,75,.55);position:relative}
.gm-vibe::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(201,162,75,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.gm-vibe:hover{filter:brightness(1.1)}
.gm-iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);box-shadow:var(--sh-sm);position:relative}
.gm-iconbtn:hover{color:var(--violet);border-color:var(--violet)}
.gm-badge-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
/* A conta na barra de cima é só o avatar — mesmo alvo de 40px dos outros
   botões de ícone, então os três alinham sem ajuste manual. */
.gm-avbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid transparent;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.gm-avbtn:hover{border-color:var(--violet)}
.gm-avbtn:active{transform:scale(.94)}
.gm-user-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-small);color:#fff;background:var(--grad);overflow:hidden}
.gm-user-av img{width:100%;height:100%;object-fit:cover}

.gm-view{flex:1;padding:clamp(18px,3vw,30px);max-width:1400px;width:100%;margin:0 auto;animation:vfade .24s ease}
.gm-view:focus{outline:none}
@keyframes vfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Help tab + attendant */
.gm-att{position:fixed;right:22px;bottom:22px;z-index:59}
.gm-att-btn{display:block;background:none;border:none;padding:0;cursor:pointer;transition:transform .15s}
.gm-att-btn:hover{transform:translateY(-2px)}
.gm-att-ic{position:relative;width:92px;height:92px;display:grid;place-items:center}
.gm-att-badge{position:absolute;top:8px;right:8px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-sm);background:#dc2626;color:#fff;font-size:var(--fs-caption);font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)}
/* Altura FIXA: sem isso o painel encolhia ao trocar pra uma aba sem campo
   de texto e o cabeçalho pulava pra baixo no meio da navegação. */
.gm-att-panel{position:absolute;right:0;bottom:100px;width:380px;max-width:88vw;height:min(520px,calc(100vh - 150px));background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--sh-lg);overflow:hidden;display:flex;flex-direction:column;animation:pop .18s ease}
.gm-att-panel header{position:relative;display:flex;align-items:center;gap:var(--sp-1);justify-content:space-between;padding:16px 18px;background:var(--grad-dark);color:#fff;overflow:hidden}
.gm-att-panel header::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 15% 0%,rgba(232,203,125,.28),transparent 65%);pointer-events:none}
.gm-att-head-id{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.gm-att-head-id>div{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0}
.gm-att-panel header strong{font-family:var(--f-head);font-size:var(--fs-body)}
.gm-att-panel header div>span{font-size:var(--fs-caption);color:#c9bdf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-att-panel header button{position:relative;color:#fff;width:30px;height:30px;border-radius:var(--radius-sm);flex:0 0 auto}
.gm-att-panel header button:hover{background:rgba(255,255,255,.15)}
.elt-av{position:relative;width:30px;height:30px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;flex:0 0 auto;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.elt-av svg{width:22px;height:22px}
.elt-av.lg{width:42px;height:42px}
.elt-av.lg svg{width:30px;height:30px}
/* Bolinha de estado: fica na MESMA linha do texto que ela descreve. Grudada
   no avatar ela era cortada pela borda do cabeçalho e ainda contradizia o
   rótulo ao lado ("verde" com "fora do horário" escrito do lado). */
.gm-att-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;flex:0 0 auto;box-shadow:0 0 0 2px rgba(74,222,128,.25)}
.gm-att-dot.off{background:#94a3b8;box-shadow:0 0 0 2px rgba(148,163,184,.25)}
.gm-att-panel header div>span{display:flex;align-items:center;gap:var(--sp-1)}
.gm-att-body{padding:16px;display:flex;flex-direction:column;gap:var(--sp-3);flex:1;min-height:0;overflow-y:auto;background:var(--surface-2)}
.gm-att-row{display:flex;align-items:flex-end;gap:var(--sp-2);animation:msgIn .22s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gm-att-row.me{justify-content:flex-end}
.gm-att-msg{max-width:76%;padding:10px 14px;border-radius:var(--radius-lg);font-size:var(--fs-body-sm);line-height:1.45;box-shadow:0 2px 6px -3px rgba(20,10,50,.15)}
.gm-att-msg p{margin:0;white-space:pre-wrap;word-break:break-word}
.gm-att-msg time{display:block;font-size:var(--fs-caption);opacity:.6;margin-top:4px;text-align:right}
.gm-att-msg.them{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.gm-att-msg.me{background:var(--violet);color:var(--on-accent);border-bottom-right-radius:4px}
.gm-att-quick{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-left:38px;margin-top:-2px}
.gm-att-quick button{padding:7px 13px;border-radius:999px;border:1.5px solid var(--violet-soft);background:var(--surface);color:var(--violet);font-size:var(--fs-small);font-weight:600;transition:background .15s,transform .1s}
.gm-att-quick button:hover:not(:disabled){background:var(--violet-softer);transform:translateY(-1px)}
.gm-att-quick button:disabled{opacity:.45;cursor:default}
.gm-att-typing{display:flex;align-items:center;gap:var(--sp-1);padding:13px 15px}
.gm-att-typing span{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:typingDot 1.2s ease-in-out infinite}
.gm-att-typing span:nth-child(2){animation-delay:.15s}
.gm-att-typing span:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.gm-att-preview{display:flex;align-items:center;gap:var(--sp-2);padding:9px 14px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted);background:var(--surface-2)}
.gm-att-preview img{width:32px;height:32px;border-radius:var(--radius-xs);object-fit:cover;flex:0 0 auto}
.gm-att-preview i.fa-file{width:32px;height:32px;border-radius:var(--radius-xs);display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);flex:0 0 auto}
.gm-att-preview span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-att-preview button{color:var(--dim);width:22px;height:22px;border-radius:var(--radius-xs);flex:0 0 auto}
.gm-att-preview button:hover{color:#dc2626;background:var(--danger-soft)}
.gm-att-composer{display:flex;align-items:center;gap:var(--sp-2);padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.gm-att-input-wrap{flex:1;display:flex;align-items:flex-end;gap:var(--sp-1);border:1px solid var(--line-2);border-radius:var(--radius-xl);padding:5px 6px 5px 6px;background:var(--surface-2);transition:border-color .15s,box-shadow .15s}
.gm-att-input-wrap:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);background:var(--surface)}
.gm-att-attach{width:34px;height:34px;border-radius:50%;color:var(--muted);flex:0 0 auto}
.gm-att-attach:hover{background:var(--surface);color:var(--violet)}
.gm-att-composer textarea{flex:1;min-height:34px;max-height:110px;border:none;background:none;padding:7px 4px;outline:none;resize:none;font:inherit;line-height:1.35}
.gm-att-send{width:40px;height:40px;border-radius:50%;background:var(--violet);color:var(--on-accent);flex:0 0 auto;transition:background .15s,transform .1s}
.gm-att-send:hover{background:var(--violet-700);transform:scale(1.05)}
.gm-att-send:active{transform:scale(.96)}
/* --- cabeçalho: botão voltar (histórico) + status real do atendimento --- */
.gm-att-head-id{flex:1}
/* Atendente humano: inicial do nome, nunca a carinha do Eliot. */
.elt-av.pessoa{font-family:var(--f-head);font-size:var(--fs-small);font-weight:700;color:var(--violet-700);background:var(--grad-gold)}
/* Abas do widget: atendimento atual / encerrados / histórico. */
.gm-att-tabs{display:flex;gap:var(--sp-05);padding:6px 8px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.gm-att-tabs button{flex:1;padding:8px 4px 9px;font-size:var(--fs-small);font-weight:600;color:var(--muted);border-bottom:2px solid transparent;border-radius:8px 8px 0 0;transition:color .15s,border-color .15s,background .15s}
.gm-att-tabs button:hover{color:var(--ink-2);background:var(--surface-2)}
.gm-att-tabs button.on{color:var(--violet);border-bottom-color:var(--gold)}
/* Faixa fina abaixo do cabeçalho: fila da equipe / fora do horário. */
.gm-att-note{display:flex;align-items:center;gap:var(--sp-2);padding:8px 14px;font-size:var(--fs-caption);font-weight:600;line-height:1.35;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
.gm-att-note i{flex:0 0 auto;color:var(--gold-dim)}
.gm-att-note.esperando{background:var(--warn-soft);color:#92400e}
.gm-att-note.esperando i{color:#b45309}
/* Nome de quem respondeu — só em mensagem de gente, o Eliot já se identifica pelo avatar. */
.gm-att-autor{display:block;font-size:var(--fs-caption);font-weight:700;color:var(--violet);margin-bottom:2px}
/* Link pra uma tela do painel dentro da fala do Eliot. Precisa saltar sem
   gritar: a frase continua legível e o destino fica óbvio. */
.gm-att-link{display:inline-flex;align-items:baseline;gap:var(--sp-1);font-weight:700;color:var(--violet);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px;transition:color .15s,text-decoration-color .15s}
.gm-att-link:hover{color:var(--violet-700);text-decoration-color:currentColor}
.gm-att-link i{font-size:.62em;transition:transform .15s}
.gm-att-link:hover i{transform:translateX(2px)}
/* Recado do próprio sistema (encerramento, transferência): nota discreta, não fala de ninguém. */
.gm-att-sys{align-self:center;max-width:92%;text-align:center;font-size:var(--fs-caption);color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
/* Avaliação do atendimento */
.gm-att-rating{align-self:stretch;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px}
.gm-att-rating p{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.gm-att-stars{display:flex;justify-content:center;gap:var(--sp-05);margin-top:8px}
.gm-att-stars button{width:32px;height:32px;border-radius:var(--radius-xs);color:var(--gold);font-size:var(--fs-body);transition:transform .1s}
.gm-att-stars button:hover:not(:disabled){transform:scale(1.18)}
.gm-att-stars button:disabled{cursor:default}
/* Lista de atendimentos anteriores */
.gm-att-hist{display:flex;flex-direction:column;gap:var(--sp-05);width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);transition:border-color .15s,transform .1s}
.gm-att-hist:hover{border-color:var(--line-2);transform:translateY(-1px)}
.gm-att-hist-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.gm-att-hist-top b{font-size:var(--fs-small);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-att-hist-top time{font-size:var(--fs-caption);color:var(--dim);flex:0 0 auto}
.gm-att-hist-prev{font-size:var(--fs-caption);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-att-hist-pe{display:flex;align-items:center;gap:var(--sp-2);margin-top:3px}
.gm-att-hist-nota{font-size:var(--fs-caption);color:var(--gold);letter-spacing:1px}
.gm-att-chip{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.gm-att-chip.on{color:var(--ok-texto);background:var(--ok-soft);border-color:transparent}
/* Busca e resumo da aba Histórico */
.gm-att-busca{position:relative;display:flex;align-items:center}
.gm-att-busca i{position:absolute;left:11px;font-size:var(--fs-small);color:var(--dim);pointer-events:none}
.gm-att-busca input{width:100%;padding:8px 12px 8px 31px;font:inherit;font-size:var(--fs-small);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;outline:none;transition:border-color .15s,box-shadow .15s}
.gm-att-busca input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.gm-att-resumo{display:flex;gap:var(--sp-4);font-size:var(--fs-caption);color:var(--muted);padding:0 4px}
.gm-att-resumo b{color:var(--ink);font-size:var(--fs-small)}
/* Tela inicial enxuta: título, botão e três atalhos. Nada de avatar grande
   (o cabeçalho logo acima já mostra o Eliot), nada de parágrafo explicando o
   que o botão já diz, nada de rótulo em cima da lista. Cada bloco a mais aqui
   é uma coisa a menos que a pessoa lê. */
.gm-att-inicio{margin:auto 0;display:flex;flex-direction:column;gap:var(--sp-3);width:100%}
.gm-att-inicio strong{font-family:var(--f-head);font-size:var(--fs-h3);color:var(--ink);text-align:center}
.gm-att-inicio .btn{height:44px}
.gm-att-atalhos{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:2px}
.gm-att-atalhos button{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--fs-small);font-weight:600;color:var(--ink-2);transition:border-color .15s,background .15s,color .15s}
.gm-att-atalhos button:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--violet)}
.gm-att-atalhos button i{width:15px;text-align:center;color:var(--gold-dim);font-size:var(--fs-small);flex:0 0 auto}
.gm-att-load{margin:auto;color:var(--dim)}
.gm-att-vazio{margin:auto;display:grid;justify-items:center;gap:var(--sp-2);color:var(--dim);font-size:var(--fs-small);text-align:center}
.gm-att-vazio i{font-size:var(--fs-h1);opacity:.45}
.gm-att-vazio p{margin:0}

/* Anexos (imagem/arquivo) — usado no widget de atendimento e na caixa do admin */
.att-img{display:block;margin-top:6px}
.att-img img{max-width:180px;max-height:180px;border-radius:var(--radius-sm);display:block;cursor:zoom-in}
.att-file{display:flex;align-items:center;gap:var(--sp-2);margin-top:6px;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.15);color:inherit;font-size:var(--fs-small)}
.gm-att-msg.them .att-file,.msg.in .att-file{background:var(--surface-2);border:1px solid var(--line)}
.att-file i{font-size:var(--fs-h3)}
.att-file b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.att-file small{opacity:.75;font-size:var(--fs-caption)}

/* ===================================================================
   PÁGINAS — cabeçalho comum
   =================================================================== */
.pg-head{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:22px}
.pg-title{display:flex;align-items:center;gap:var(--sp-4)}
.pg-ic{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-body);flex:0 0 auto}
.pg-title h1{font-size:var(--fs-h2)}
.pg-title p{font-size:var(--fs-body-sm);color:var(--muted);margin-top:2px}
.pg-head-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* Ícone de "?" explicando o que uma métrica/seção faz — hover no desktop,
   toque abre/fecha no mobile (classe .open, ver JS). */
.info-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;color:var(--dim);background:var(--surface-2);font-size:var(--fs-caption);cursor:help;flex:0 0 auto;transition:color .15s,background .15s}
.info-tip:hover,.info-tip.open{color:var(--violet);background:var(--violet-soft)}
/* display:none e não só opacity:0 — uma caixa absoluta de 220px continua
   contando pro overflow da página mesmo invisível, e era isso que punha
   uma barra de rolagem horizontal no dashboard sem ninguém encostar nela. */
.info-tip-bubble{display:none;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);width:max-content;max-width:220px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--ink);color:var(--bg);font-size:var(--fs-small);font-weight:500;line-height:1.45;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;z-index:85;text-align:left}
.info-tip-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.info-tip:hover .info-tip-bubble,.info-tip:focus-visible .info-tip-bubble,.info-tip.open .info-tip-bubble{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* Perto da borda direita a bolha ancora pela direita (classe posta pelo JS,
   que é quem consegue medir onde o ícone caiu). */
.info-tip.dica-fim .info-tip-bubble{left:auto;right:-8px;transform:translateY(4px)}
.info-tip.dica-fim .info-tip-bubble::after{left:auto;right:14px;transform:none}
.info-tip.dica-fim:hover .info-tip-bubble,.info-tip.dica-fim:focus-visible .info-tip-bubble,.info-tip.dica-fim.open .info-tip-bubble{transform:translateY(0)}
.card-head .info-tip,.kpi-top .info-tip{margin-left:2px}
@media (max-width:520px){.info-tip-bubble{left:auto;right:-8px;transform:translateY(4px)}.info-tip-bubble::after{left:auto;right:14px;transform:none}.info-tip:hover .info-tip-bubble,.info-tip:focus-visible .info-tip-bubble,.info-tip.open .info-tip-bubble{transform:translateY(0)}}

.seg{display:inline-flex;gap:var(--sp-05);padding:4px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
.seg button{display:flex;align-items:center;gap:var(--sp-2);padding:7px 14px;border-radius:var(--radius-sm);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.seg button i{font-size:var(--fs-small)}
.seg button.on{background:var(--violet);color:var(--on-accent)}
.seg button:not(.on):hover{background:var(--surface-2);color:var(--ink)}
/* A aba ativa também responde ao mouse — sem isso ela é o único controle
   da tela que parece morto sob o cursor. */
.seg button.on:hover{filter:brightness(1.07)}
.toolbtn{display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-small);font-weight:600;box-shadow:var(--sh-sm)}
.toolbtn i:last-child{font-size:var(--fs-caption);color:var(--dim)}
.toolbtn:hover{border-color:var(--violet);color:var(--violet)}
.toolbtn .tb-ic{width:24px;height:24px;border-radius:var(--radius-xs);display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-caption)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;gap:var(--sp-3);padding:16px 18px;border-bottom:1px solid var(--line)}
.card-head h3{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body)}
.card-head h3 i:first-child{color:var(--violet)}
.card-head .ch-tools{margin-left:auto;display:flex;gap:var(--sp-2)}
.hidden-plano{display:none!important}
.icnbtn{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--dim)}
.icnbtn:hover{color:var(--violet);border-color:var(--violet)}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-2);padding:46px 20px;color:var(--dim)}
.empty-ic{width:60px;height:60px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--surface-2);color:#c6bedd;font-size:var(--fs-h2)}
.empty strong{font-size:var(--fs-body);color:var(--muted)}
.empty p{font-size:var(--fs-small);max-width:280px}

.empty-hero{padding:48px 20px 44px;gap:0}
/* Peças de ícone (1 ou várias, levemente giradas e sobrepostas) */
.eh-pecas{display:flex;justify-content:center;margin-bottom:22px}
.eh-pecas span{width:64px;height:64px;margin-left:-12px;border-radius:20px;display:grid;place-items:center;font-size:28px;color:#fff;background:var(--cor);border:4px solid var(--bg);box-shadow:var(--sh);transform:rotate(var(--gira,0deg));animation:ehSobe .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
.eh-pecas span:first-child{margin-left:0}
.eh-pecas span.ouro{background:var(--grad-gold);color:#25215c}
.card .eh-pecas span{border-color:var(--surface)}
@keyframes ehSobe{from{opacity:0;transform:translateY(14px) rotate(var(--gira,0deg))}}
.empty-hero strong{font-family:var(--f-head);font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.empty-hero p{margin:8px 0 0;font-size:var(--fs-body);max-width:460px;color:var(--muted);line-height:1.5}
.eh-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* O botão principal do convite: grande, com um pulso suave chamando o clique */
.eh-cta .btn{height:52px;padding:0 30px;font-size:1rem;border-radius:16px}
.eh-cta .btn-primary{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--violet) 70%,transparent);animation:ehPulso 2.4s ease-in-out infinite}
.eh-cta .btn-primary:hover{transform:translateY(-2px)}
@keyframes ehPulso{0%,100%{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--violet) 70%,transparent),0 0 0 0 color-mix(in srgb,var(--violet) 35%,transparent)}50%{box-shadow:0 10px 30px -8px color-mix(in srgb,var(--violet) 70%,transparent),0 0 0 12px transparent}}
/* Tela inteira (Canais sem canal, conta sem plano): centralizado na altura */
.eh-pagina{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 260px)}
@media (prefers-reduced-motion:reduce){.eh-pecas span,.eh-cta .btn-primary{animation:none}}

/* Tabela */
.tbl-wrap{overflow-x:auto;overflow-y:auto;max-height:min(70vh,760px)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body-sm)}
/* Cabeçalho grudento: em lista longa, rolar sem saber de que coluna é o
   número é o que faz tabela parecer amadora. border-collapse:separate
   porque com `collapse` a borda do <th> não acompanha o sticky. */
table.tbl th{position:sticky;top:0;z-index:2;text-align:left;font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--line)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr{transition:background var(--dur-fast) var(--ease)}
table.tbl tbody tr:hover{background:var(--surface-2)}
.cell-main{display:flex;align-items:center;gap:var(--sp-3)}
.cell-av{width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;font-weight:700;font-size:var(--fs-small);color:#fff;flex:0 0 auto}
.cell-av.round{border-radius:50%}
.cell-main b{font-weight:650;color:var(--ink)}
.cell-main small{display:block;color:var(--dim);font-size:var(--fs-small)}

.pager{display:flex;align-items:center;gap:var(--sp-2);padding:14px 16px;font-size:var(--fs-small);color:var(--muted);flex-wrap:wrap}
.pager .pg-info{margin-right:auto}
.pager button{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--muted);display:grid;place-items:center}
.pager button:hover{border-color:var(--violet);color:var(--violet)}
.pager button.on{background:var(--violet);color:var(--on-accent);border-color:var(--violet);font-weight:700}
.pager button:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line-2);color:var(--muted)}
.pager button:disabled:hover{border-color:var(--line-2);color:var(--muted)}
.pager .pg-size{display:flex;align-items:center;gap:var(--sp-1);margin-left:8px}
.pager select{height:32px;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:0 8px;background:var(--surface)}
.pager select:disabled{opacity:.35;cursor:not-allowed}

/* ---------------- Dashboards ---------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.dash-hero{position:relative;overflow:hidden;background:var(--grad-dark);border-radius:var(--r-lg);padding:22px 26px;margin-bottom:16px;color:#fff;box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.08);animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both}
.dash-hero-glow{position:absolute;inset:0;background:radial-gradient(40% 90% at 0% 0%,rgba(232,203,125,.22),transparent 60%),radial-gradient(30% 70% at 100% 100%,rgba(139,124,246,.2),transparent 65%);pointer-events:none}
.dash-hero-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.dash-hero-text{min-width:0;flex:1 1 380px}
.dash-hero-text h2{font-size:var(--fs-h2);color:#fff;margin-bottom:5px}
.dash-hero-text p{font-size:var(--fs-body-sm);color:#d9d2f2;line-height:1.5}
.dash-hero-text p b{color:#fff;font-weight:650}
.dash-hero-status{position:relative;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.dash-hero-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:var(--fs-small);font-weight:600;color:#fff;transition:background .15s,border-color .15s}
a.dash-hero-pill:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.dash-hero-cta{background:var(--grad-gold);border-color:transparent;color:var(--violet-800)}
a.dash-hero-cta:hover{background:var(--grad-gold);filter:brightness(1.06)}
.dash-hero .dotstat{font-size:var(--fs-small)}
.dash-hero-pill .dotstat::before{width:7px;height:7px}
.dash-alerta{color:#fbbf24;font-weight:700}
.dho-steps{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.dho-step{display:flex;align-items:center;gap:var(--sp-3);padding:12px 14px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.dho-step.done{opacity:.6}
.dho-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:var(--fs-small);font-weight:800;color:var(--violet-800);background:var(--gold-2)}
.dho-step.done .dho-n{background:#4ade80;color:#06301a}
.dho-b{flex:1;min-width:0}
.dho-b b{display:block;font-size:var(--fs-body-sm);color:#fff}
.dho-b small{display:block;font-size:var(--fs-small);color:#b9b0dc;margin-top:1px}
.dho-step .btn{flex:0 0 auto}
/* --- KPIs: quatro cartões, não uma faixa dividida por linhas ---
   Anatomia fixa nos quatro: ícone + rótulo / valor + tendência / extra /
   contexto. O `margin-top:auto` no pé alinha a última linha entre cartões de
   alturas diferentes, sem altura fixa. */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4);
  animation:riseIn .45s var(--ease) both .05s}
.ds-item{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-4) var(--sp-5) var(--sp-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ds-item:hover{border-color:var(--line-2);background:var(--surface-hover)}
.ds-head{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.ds-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);
  font-size:var(--fs-small);color:var(--violet);background:var(--violet-soft)}
.ds-label{display:flex;align-items:center;gap:var(--sp-1);min-width:0;font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.ds-mid{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.ds-val{font-family:var(--f-head);font-size:var(--fs-h1);font-weight:800;line-height:1.05;color:var(--ink);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
/* Tendência: verde sobe, vermelho desce. É o único lugar do cartão onde cor
   carrega significado — por isso o resto fica neutro. */
.ds-trend{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 7px;border-radius:var(--radius-full);
  font-size:var(--fs-caption);font-weight:700;font-variant-numeric:tabular-nums}
.ds-trend i{font-size:var(--fs-caption)}
.ds-trend.up{color:var(--ok-texto);background:var(--ok-soft)}
.ds-trend.down{color:var(--danger);background:var(--danger-soft)}
.ds-foot{font-size:var(--fs-small);color:var(--dim);margin-top:auto}
.ds-item .kpi-spark{height:26px;margin:0 -2px}
.ds-bar{height:5px;border-radius:var(--radius-full);background:var(--surface-2);overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:var(--radius-full);background:var(--violet);transition:width .6s var(--ease)}
.ds-bar.alerta i{background:var(--danger)}
/* Estado do cartão: o tom entra na borda e no ícone, não no fundo inteiro. */
.ds-item.alerta{border-color:color-mix(in srgb,var(--warn) 34%,var(--line))}
.ds-item.alerta .ds-ic{color:#fbbf24;background:var(--warn-soft)}
.ds-item.perigo{border-color:color-mix(in srgb,var(--danger) 38%,var(--line))}
.ds-item.perigo .ds-ic{color:var(--danger);background:var(--danger-soft)}
.dash-stats .dash-alerta{color:var(--danger);font-weight:600}
.ds-bloqueio{grid-column:1/-1}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-4);margin-bottom:16px}
.dash-grid>.card,.dash-col>.card{display:flex;flex-direction:column;animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both .1s}
/* Coluna da direita empilhada: contatos recentes em cima, o que vence hoje
   embaixo. Sem isso o terceiro cartão abria uma linha nova e deixava meio
   dashboard vazio do lado. */
.dash-col{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}

/* Agenda do dia */
.ag-link{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:0;color:inherit}
.ag-ponto{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.ag-ponto.atrasada{background:var(--danger)}
.ag-lista .top-b b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-lista .chip{flex:0 0 auto}
/* Alvo de clique: 19px de altura é menor que qualquer dedo. O padding
   negativo na margem mantém o alinhamento visual onde estava. */
.ch-link{margin:-7px -9px -7px auto;padding:7px 9px;border-radius:var(--radius-xs);font-size:var(--fs-small);font-weight:600;color:var(--violet);transition:background var(--dur) var(--ease)}
.ch-link:hover{background:var(--violet-softer)}
.dash-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-1);padding:var(--sp-6) 20px;color:var(--dim)}
.dash-vazio span{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:6px;background:var(--surface-2);color:var(--dim);font-size:var(--fs-body)}
.dash-vazio b{font-size:var(--fs-body-sm);color:var(--muted)}
.dash-vazio small{font-size:var(--fs-small);max-width:300px;line-height:1.45}
@media (max-width:1024px){.dash-stats{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}}
@media (max-width:560px){.dash-stats{grid-template-columns:1fr}}
@media (max-width:640px){.dho-steps{grid-template-columns:1fr}.dho-step{flex-wrap:wrap}}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:16px}
/* Dashboard admin usa 5 KPIs; abaixo de 1500px eles voltam a quebrar em 3+2
   (o :has evita mexer nas telas de 4 KPIs do painel do cliente). */
@media (min-width:1500px){.kpi-row:has(>:nth-child(5)){grid-template-columns:repeat(5,1fr)}}
@media (min-width:1025px) and (max-width:1499px){.kpi-row:has(>:nth-child(5)){grid-template-columns:repeat(3,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:var(--sp-3);min-height:172px;position:relative;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.kpi-row .kpi:nth-child(1){animation-delay:.03s}.kpi-row .kpi:nth-child(2){animation-delay:.08s}
.kpi-row .kpi:nth-child(3){animation-delay:.13s}.kpi-row .kpi:nth-child(4){animation-delay:.18s}
.kpi-top{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.kpi-ic{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-small)}
.kpi-val{font-family:var(--f-head);font-size:var(--fs-display);font-weight:800;line-height:1}
.kpi-foot{margin-top:auto;font-size:var(--fs-caption);color:var(--dim);display:flex;align-items:center;gap:var(--sp-2)}
.kpi-delta{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 8px;border-radius:999px;font-weight:700;font-size:var(--fs-caption);background:var(--ok-soft);color:var(--ok-texto)}
.kpi-delta.down{background:var(--danger-soft);color:var(--danger)}
.kpi-spark{height:34px;margin:0 -4px -2px}
.kpi.dark{background:var(--grad-dark);border-color:transparent;color:#fff}
.kpi.dark::after{content:"";position:absolute;right:0;bottom:0;width:130px;height:130px;border-radius:0 0 var(--r) 0;background:radial-gradient(closest-side at 100% 100%,rgba(232,203,125,.32),transparent 70%);pointer-events:none;z-index:0}
.kpi.dark>*{position:relative;z-index:1}
.kpi.dark .kpi-top{color:#d6cbf3}.kpi.dark .kpi-ic{background:rgba(255,255,255,.16);color:#fff}.kpi.dark .kpi-delta{background:rgba(255,255,255,.18);color:#fff}

/* Skeleton shimmer (substitui o spinner nos placeholders de carregamento) */
@keyframes shimmer{to{background-position:-135% 0}}
.skel{background:linear-gradient(100deg,var(--surface-2) 30%,var(--line) 50%,var(--surface-2) 70%);background-size:250% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--radius-xs)}
.kpi-skel-ic{width:30px;height:30px;border-radius:var(--radius-sm)}
.kpi-skel-label{width:60%;height:11px}
.kpi-skel-val{width:80%;height:26px;margin-top:6px}
.kpi-skel-foot{width:45%;height:9px;margin-top:auto}



.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--sp-4);margin-bottom:16px}
.grid-2>.card{position:relative;display:flex;flex-direction:column;transition:box-shadow .2s;animation:riseIn .45s cubic-bezier(.2,.8,.2,1) both .15s}
.chart-body{padding:18px;flex:1;display:flex;flex-direction:column;justify-content:center}
.bars{display:flex;align-items:flex-end;gap:var(--sp-3);height:210px;padding-top:22px}
.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);height:100%;justify-content:flex-end;position:relative}
.bars .bar i{width:100%;max-width:34px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#e8cb7d,#c9a24b);display:block;transition:height .5s cubic-bezier(.2,.8,.2,1),filter .15s;cursor:default}
.bars .bar:hover i{filter:brightness(1.08)}
.bars .bar i:hover + span, .bars .bar:hover .bar-val{opacity:1;transform:translateY(0)}
.bars .bar-val{position:absolute;top:-2px;left:50%;transform:translate(-50%,4px);opacity:0;transition:opacity .15s,transform .15s;font-size:var(--fs-caption);font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 6px;white-space:nowrap;pointer-events:none}
.bars .bar.today i{background:linear-gradient(180deg,var(--violet-600),var(--violet));box-shadow:0 6px 16px -6px rgba(37,33,92,.55)}
.bars .bar span{font-size:var(--fs-caption);color:var(--dim)}
.bars .bar.today span{color:var(--violet);font-weight:700}
.donut-wrap{display:flex;align-items:center;gap:var(--sp-6);padding:6px 4px}
.donut{width:158px;height:158px;border-radius:50%;flex:0 0 auto;position:relative;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;text-align:center;gap:var(--sp-05);box-shadow:0 10px 26px -14px rgba(37,33,92,.35)}
.donut::before{content:"";position:absolute;inset:32px;background:var(--surface);border-radius:50%}
.donut b{position:relative;font-family:var(--f-head);font-size:var(--fs-h2);line-height:1.15}
.donut small{position:relative;font-size:var(--fs-caption);font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}
.donut-legend{display:flex;flex-direction:column;gap:var(--sp-3);font-size:var(--fs-small)}
.donut-legend span{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted)}
.donut-legend i{width:11px;height:11px;border-radius:4px}
.donut-legend b{margin-left:auto;color:var(--ink)}
.donut-legend b small{color:var(--dim);font-weight:600}
@media (max-width:640px){.dash-hero{padding:22px}}

.toplist{list-style:none;padding:6px 6px 10px}
.toplist li{display:flex;align-items:center;gap:var(--sp-3);padding:10px 10px;border-radius:var(--radius-sm)}
.toplist li:hover{background:var(--surface-2)}
.top-rank{width:20px;text-align:center;font-size:var(--fs-small);color:#c9c1de;font-weight:700}
.top-rank.r1{color:#eab308}.top-rank.r2{color:#94a3b8}
.top-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-small);color:#fff;flex:0 0 auto}
.top-b{flex:1;min-width:0}
.top-b b{font-size:var(--fs-body-sm);display:block}
.top-b small{font-size:var(--fs-caption);color:var(--dim)}
.top-metric{font-family:var(--f-head);font-weight:700;font-size:var(--fs-body-sm);color:var(--violet)}

.activity-list{padding:2px 6px 8px}
.activity-row{display:flex;align-items:center;gap:var(--sp-3);padding:11px 8px;border-top:1px solid var(--line)}
.activity-row:first-child{border-top:none}
.activity-row:hover{background:var(--surface-2);border-radius:var(--radius-sm)}
.activity-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-small);flex:0 0 auto;background:var(--violet-soft);color:var(--violet)}
.activity-ic.ticket{background:var(--gold-soft);color:var(--gold-dim)}
.activity-b{flex:1;min-width:0}
.activity-b b{font-size:var(--fs-small);font-weight:600;display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-b small{font-size:var(--fs-caption);color:var(--dim)}
.activity-row .tag{flex:0 0 auto}
.activity-ic.cred-in{background:var(--ok-soft);color:var(--ok)}
.activity-ic.cred-out{background:var(--danger-soft);color:var(--danger)}

/* ---------------- Créditos (painel admin) ---------------- */
.card-head-note{margin-left:auto;font-size:var(--fs-caption);color:var(--dim)}
.kpi-link{text-decoration:none}
.kpi-link .kpi-go{margin-left:auto;font-size:var(--fs-caption);color:var(--dim);transition:transform .18s}
.kpi-link:hover .kpi-go{transform:translateX(3px);color:var(--violet)}
.cred-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:4px 11px;border-radius:999px;font-size:var(--fs-small);font-weight:700;font-variant-numeric:tabular-nums;background:var(--violet-soft);color:var(--violet)}
.cred-pill i{font-size:var(--fs-caption);opacity:.75}
.cred-pill.ok{background:var(--ok-soft);color:var(--ok-texto)}
.cred-pill.baixo{background:var(--warn-soft);color:#b45309}
.cred-pill.zero{background:var(--danger-soft);color:var(--danger)}
.cred-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:5px;max-width:180px}
.cred-bar i{display:block;height:100%;border-radius:999px;background:var(--grad-gold)}
.cred-balance{display:flex;align-items:center;gap:var(--sp-5);padding:16px 18px;margin-bottom:16px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line)}
.cred-balance>div{display:flex;flex-direction:column;gap:var(--sp-05);min-width:96px}
.cred-balance span{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600}
.cred-balance b{font-family:var(--f-head);font-size:var(--fs-h2);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cred-balance>i{color:var(--dim)}
.cred-ops{width:100%;display:flex}
.cred-ops button{flex:1;justify-content:center}
.cred-presets{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.cred-presets button{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-small);font-weight:600;color:var(--muted);transition:border-color .15s,color .15s,background .15s}
.cred-presets button:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-softer)}

/* ---------------- Funil (kanban) ---------------- */
.kb-sum{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px}
.kb-sum-item{display:flex;align-items:center;gap:var(--sp-3);padding:18px 20px}
.kb-sum-item+.kb-sum-item{border-left:1px solid var(--line)}
.kb-sum-ic{width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:0 0 auto;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-body-sm)}
.kb-sum-item small{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.kb-sum-item b{display:block;font-family:var(--f-head);font-size:var(--fs-h2);font-weight:800;line-height:1.15;margin-top:2px}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:var(--sp-4);overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.kb-col{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);display:flex;flex-direction:column;min-height:420px;max-height:calc(100vh - 330px)}
.kb-col::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--kb-c,var(--violet));border-radius:13px 13px 0 0}
.kb-col-head{display:flex;align-items:center;gap:var(--sp-2);padding:15px 14px 12px;font-weight:700;font-size:var(--fs-body-sm)}
.kb-col-head .kb-ic{width:26px;height:26px;border-radius:var(--radius-xs);display:grid;place-items:center;color:#fff;font-size:var(--fs-caption);background:var(--kb-c,var(--violet))}
.kb-col-head .kb-n{margin-left:auto;font-size:var(--fs-caption);font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.kb-add{width:30px;height:30px;border-radius:var(--radius-xs);display:grid;place-items:center;color:var(--dim);font-size:var(--fs-caption);flex:0 0 auto;transition:background .15s,color .15s}
.kb-add:hover{background:var(--surface);color:var(--violet)}
.kb-list{display:flex;flex-direction:column;gap:var(--sp-2);padding:2px 10px 12px;overflow-y:auto;flex:1}
.kb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center;color:var(--dim);font-size:var(--fs-small);line-height:1.45;margin:4px;padding:26px 14px;border:1.5px dashed var(--line-2);border-radius:12px;opacity:.85}
.kb-empty i{font-size:var(--fs-h3);opacity:.7}
.kb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--sh-sm);cursor:grab;transition:box-shadow .15s,border-color .15s}
.kb-card:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.kb-card:active{cursor:grabbing}
.kb-card.drag{opacity:.4}
.kb-col.over{outline:2px dashed var(--kb-c,var(--violet));outline-offset:-4px}
.kb-card b{font-size:var(--fs-body-sm);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-card .kb-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:var(--fs-caption);color:var(--dim);border-top-color:color-mix(in srgb,var(--line) 60%,transparent)}
.kb-card .kb-origem{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600;color:var(--muted)}
.kb-card-top{display:flex;align-items:center;gap:var(--sp-3)}
.kb-card-id{min-width:0;flex:1}
.kb-card-id small{display:block;font-size:var(--fs-caption);color:var(--dim);margin-top:1px}
.kb-card-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-caption);font-weight:700;color:#fff;flex:0 0 auto;overflow:hidden}
.kb-card-av img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.kb-sum{grid-template-columns:repeat(2,1fr)}.kb-sum-item:nth-child(3){border-left:none}.kb-sum-item:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------------- Agentes ---------------- */
.ag-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:16px}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4);margin-bottom:16px}
.ag-grid>:not(.ag-card){grid-column:1/-1}
.ag-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;animation:riseIn .4s cubic-bezier(.2,.8,.2,1) both}
.ag-card:not(.ag-new):hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.ag-top{display:flex;align-items:center;gap:var(--sp-3)}
.ag-av{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#fff;font-family:var(--f-head);font-weight:800;font-size:var(--fs-h3);cursor:pointer}
.ag-av img{width:100%;height:100%;object-fit:cover}
.ag-id{flex:1;min-width:0;cursor:pointer}
.ag-id b{display:block;font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-id small{display:block;font-size:var(--fs-small);color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-tags{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}
.ag-desc{font-size:var(--fs-small);color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.ag-desc.vazio{font-style:italic;color:var(--dim)}
.ag-foot{display:flex;gap:var(--sp-2);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.ag-foot .btn{flex:1}
.ag-new{align-items:center;justify-content:center;text-align:center;gap:var(--sp-1);min-height:250px;cursor:pointer;background:transparent;border:1.5px dashed var(--line-2);box-shadow:none}
.ag-new:hover{border-color:var(--violet);background:var(--violet-softer)}
.ag-new-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-h3)}
.ag-new b{font-size:var(--fs-body);color:var(--ink)}
.ag-new small{font-size:var(--fs-small);color:var(--dim)}

/* ---------------- Chat ---------------- */
/* Duas colunas por padrão. O painel de detalhes gastava 300px fixos pra
   repetir o nome e o telefone que já estão no cabeçalho, e espremia a
   conversa — no WhatsApp ele só abre quando se clica no contato. */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;height:calc(100dvh - 214px);min-height:520px}
.chat.com-ctx{grid-template-columns:320px minmax(0,1fr) 320px}
.chat:not(.com-ctx) .chat-ctx{display:none}
/* O cabeçalho inteiro é o botão que abre os detalhes, como no app. */
.chat-main-head .cm-abrir{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0;text-align:left;cursor:pointer;border-radius:var(--radius-sm);padding:4px;margin:-4px}
.chat-main-head .cm-abrir:hover{background:var(--surface-2)}
.cx-fechar{position:absolute;top:10px;right:10px}
.chat-ctx{position:relative}
.chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.chat-list-head{padding:14px;border-bottom:1px solid var(--line)}
/* --- Contatos: faixa de números + barra de filtros --- */
/* Faixa de números da lista: fina, dentro do cartão, acima dos filtros.
   Três cartões grandes pra mostrar "1" pesavam mais que o dado. */
.lst-resumo{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.lst-num{display:flex;flex-direction:column;gap:2px;text-align:left;position:relative}
/* Separador discreto entre os números, sem virar mais uma borda de caixa. */
.lst-num + .lst-num::before{content:"";position:absolute;left:calc(var(--sp-6) / -2);top:2px;bottom:2px;width:1px;background:var(--line)}
.lst-num b{font-size:var(--fs-h3);font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.lst-num span{font-size:var(--fs-caption);color:var(--dim)}
/* Número que dá pra filtrar vira botão: indicador que não leva a lugar
   nenhum é decoração. */
.lst-num-btn{cursor:pointer;border-radius:var(--radius-xs);padding:2px 8px;margin:-2px -8px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.lst-num-btn:hover{background:var(--surface-2)}
.lst-num-btn:hover b,.lst-num-btn.on b{color:var(--violet)}
.lst-num-btn.on{background:var(--violet-soft)}
.lst-num-btn.on span{color:var(--violet)}
.lst-aviso{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-small);font-weight:600;color:var(--warn-texto)}
/* Sem a faixa de cartões, os filtros ficam colados no resumo. */
.ct-barra{padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line)}

/* Busca, etapa, origem e limpar numa linha só. Antes a busca ocupava uma
   linha inteira sozinha, do tamanho da tela. */
.ct-barra{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Busca com largura de campo de busca, não da tela inteira: em 1920 um
   input de 1000px pra digitar um nome parece erro de layout. */
.ct-busca{flex:0 1 360px;min-width:180px}
.ct-barra .select-sm{width:auto;min-width:150px;height:38px;font-size:var(--fs-small)}
.ct-limpar{margin-left:auto}
/* Contagem sozinha (uma página só): sem as bordas e a altura de controle,
   porque ali não há nada pra clicar. */
.pager-so-conta{padding:12px 16px;color:var(--dim);font-size:var(--fs-caption)}

.chat-list-search{display:flex;align-items:center;gap:var(--sp-2);height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.chat-list-search input{border:none;outline:none;flex:1;background:none;font-size:var(--fs-small)}
.chat-filters{display:flex;gap:var(--sp-1);margin-top:10px}
.chat-filters button{font-size:var(--fs-caption);font-weight:600;min-height:32px;padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.chat-filters button.on{background:var(--violet);color:var(--on-accent)}
.chat-threads{flex:1;overflow-y:auto}
.thread{display:flex;gap:var(--sp-3);padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.thread:hover{background:var(--surface-2)}
.thread.on{background:var(--violet-softer);box-shadow:inset 3px 0 0 var(--violet)}
.thread-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-small);color:#fff;flex:0 0 auto;position:relative}
.thread-av .ch-ic{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-caption);color:#fff;border:2px solid var(--surface)}
.thread-b{flex:1;min-width:0}
.thread-top{display:flex;align-items:center;gap:var(--sp-1)}
.thread-top b{font-size:var(--fs-body-sm);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-top time{font-size:var(--fs-caption);color:var(--dim)}
.thread-prev{font-size:var(--fs-small);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.thread-unread{min-width:18px;height:18px;border-radius:var(--radius-sm);background:var(--violet);color:var(--on-accent);font-size:var(--fs-caption);font-weight:700;display:grid;place-items:center;padding:0 5px;align-self:center}
/* A faixa de números come ~74px da altura — sem descontar isso a conversa
   passava do rodapé e a tela inteira virava rolagem. */
#supShell{height:calc(100dvh - 292px)}
.thread-assunto{font-size:var(--fs-caption);font-weight:600;color:var(--violet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
/* Tempo de espera: o único dado da lista que muda de cor, porque é o único
   que fica pior sozinho enquanto ninguém olha. */
.thread-espera{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:5px;font-size:var(--fs-caption);font-weight:700;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok-texto)}
.thread-espera.med{background:var(--warn-soft);color:#b45309}
.thread-espera.urg{background:var(--danger-soft);color:#b91c1c}
.thread-espera.bot{background:var(--violet-soft);color:var(--violet)}
.msg-sys{align-self:center;max-width:80%;text-align:center;font-size:var(--fs-caption);color:var(--dim);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 14px}
/* Respostas prontas: preenchem o campo, nunca enviam sozinhas. */
.sup-macros{display:flex;gap:var(--sp-1);flex-wrap:wrap;padding:9px 14px 0}
.sup-macros button{font-size:var(--fs-caption);font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);transition:border-color .15s,color .15s}
.sup-macros button:hover{border-color:var(--violet);color:var(--violet)}

/* min-height:0 é obrigatório: item de grid nasce com min-height:auto, que
   é o tamanho do CONTEÚDO — com uma conversa longa a coluna crescia além
   da linha do grid e empurrava a barra de escrever pra fora da tela. */
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-main-head{display:flex;align-items:center;gap:var(--sp-3);padding:13px 18px;border-bottom:1px solid var(--line)}
/* Só aparece no celular (ver media query de 600px), onde a lista e a conversa
   ocupam a tela inteira uma por vez. */
.chat-voltar{display:none;flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-sm);place-items:center;color:var(--muted);border:1px solid var(--line)}
.chat-voltar:hover{background:var(--surface-2);color:var(--violet)}
.chat-main-head .cm-b{flex:1;min-width:0}
.chat-main-head .cm-b b{font-size:var(--fs-body);display:block;line-height:1.2}
.chat-main-head .cm-b span{font-size:var(--fs-small);color:var(--muted);display:block}
.chat-main-head .cm-tools{display:flex;gap:var(--sp-1)}
/* Mesmo motivo: sem min-height:0 o overflow-y:auto não recorta nada,
   porque o item se dimensiona pelo conteúdo antes de rolar. */
.chat-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.chat-composer{display:flex;align-items:center;gap:var(--sp-2);padding:13px 16px;border-top:1px solid var(--line)}
.chat-composer .cc-ic{width:38px;height:38px;border-radius:var(--radius-sm);color:var(--muted);display:grid;place-items:center}
.chat-composer .cc-ic:hover{background:var(--surface-2);color:var(--violet)}
.chat-composer input{flex:1;height:42px;border:1px solid var(--line-2);border-radius:var(--radius-md);padding:0 14px;outline:none}
.chat-composer input:focus{border-color:var(--violet)}
.chat-composer .cc-send{width:42px;height:42px;border-radius:var(--radius-md);background:var(--violet);color:var(--on-accent);flex:0 0 auto}
/* O botão de enviar não é .btn, então não pegava o .is-loading de cima — e
   sem o pointer-events:none dava pra disparar o envio duas vezes. */
.chat-composer .cc-send.is-loading{position:relative;color:transparent !important;pointer-events:none}
.chat-composer .cc-send.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}

/* ==================== Chat com cara de WhatsApp ====================
   Quem atende aqui passa o dia no WhatsApp. Quanto mais a tela responder
   igual à que a pessoa já conhece, menos ela precisa aprender. O que foi
   copiado é o VOCABULÁRIO visual (papel de parede, balão com cauda, hora
   dentro do balão, separador de dia) — não a arte do WhatsApp, que é deles.

   O que NÃO tem aqui de propósito: ✓✓ de entregue/lido. Não guardamos esse
   estado (MensagemWhatsapp não tem campo de entrega), e desenhar dois
   tiquinhos sem saber se chegou seria mentir pra quem atende. */

/* Papel de parede: rabiscos próprios, bem discretos, no tom da superfície.
   Sem isso a área da conversa é um retângulo liso e a tela não "lê" como
   uma conversa. */
.chat-msgs{
  background-color:var(--wpp-fundo);
  background-image:var(--wpp-rabisco);
  background-size:340px 340px;
  background-repeat:repeat;
}
#gm-app{
  --wpp-fundo:#efe7dd;
  --wpp-bolha-nossa:#d9fdd3;
  --wpp-bolha-deles:#ffffff;
  --wpp-bolha-texto:#111b21;
  --wpp-hora:rgba(17,27,33,.45);
  --wpp-rabisco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='46' cy='38' r='11'/%3E%3Cpath d='M112 30c6-8 16-8 22 0M250 44h26M262 32v24'/%3E%3Crect x='300' y='26' width='20' height='16' rx='4'/%3E%3Cpath d='M28 116c10-6 20 6 30 0M96 108l14 14M110 108l-14 14'/%3E%3Ccircle cx='186' cy='118' r='9'/%3E%3Cpath d='M244 112h30l-8 14h-22z'/%3E%3Cpath d='M56 196c8-10 22-10 30 0M138 188v22M128 199h20'/%3E%3Ccircle cx='222' cy='198' r='12'/%3E%3Cpath d='M290 190l16 8-16 8z'/%3E%3Cpath d='M34 272h24M46 260v24M116 266c10-8 20 8 30 0'/%3E%3Ccircle cx='204' cy='274' r='10'/%3E%3Crect x='274' y='262' width='22' height='22' rx='6'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="dark"] #gm-app{
  --wpp-fundo:#0b141a;
  --wpp-bolha-nossa:#005c4b;
  --wpp-bolha-deles:#202c33;
  --wpp-bolha-texto:#e9edef;
  --wpp-hora:rgba(233,237,239,.5);
  --wpp-rabisco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.02' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='46' cy='38' r='11'/%3E%3Cpath d='M112 30c6-8 16-8 22 0M250 44h26M262 32v24'/%3E%3Crect x='300' y='26' width='20' height='16' rx='4'/%3E%3Cpath d='M28 116c10-6 20 6 30 0M96 108l14 14M110 108l-14 14'/%3E%3Ccircle cx='186' cy='118' r='9'/%3E%3Cpath d='M244 112h30l-8 14h-22z'/%3E%3Cpath d='M56 196c8-10 22-10 30 0M138 188v22M128 199h20'/%3E%3Ccircle cx='222' cy='198' r='12'/%3E%3Cpath d='M290 190l16 8-16 8z'/%3E%3Cpath d='M34 272h24M46 260v24M116 266c10-8 20 8 30 0'/%3E%3Ccircle cx='204' cy='274' r='10'/%3E%3Crect x='274' y='262' width='22' height='22' rx='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Balões. gap menor que antes: no WhatsApp as mensagens ficam próximas e é
   isso que dá a sensação de conversa em vez de lista de cartões. */
.chat-msgs{gap:3px;padding:18px 6%}
/* Conversa curta encosta no rodapé, não fica boiando no topo — é assim que
   o app se comporta. margin-top:auto no primeiro filho em vez de
   justify-content:flex-end, que cortaria o topo quando a conversa é longa. */
.chat-msgs > :first-child{margin-top:auto}
.msg{
  max-width:min(65%,520px);padding:6px 9px 7px;border-radius:8px;
  font-size:var(--fs-body-sm);line-height:1.38;position:relative;
  box-shadow:0 1px .5px rgba(11,20,26,.13);white-space:pre-wrap;word-wrap:break-word;
  color:var(--wpp-bolha-texto);border:0
}
/* A hora flutua no fim do texto — é o truque do WhatsApp: cabe na última
   linha quando sobra espaço, e desce sozinha quando não sobra. */
.msg time{float:right;margin:4px 0 -2px 10px;font-size:.67rem;line-height:1;color:var(--wpp-hora);opacity:1}
.msg.in{background:var(--wpp-bolha-deles);align-self:flex-start;border-top-left-radius:0}
.msg.out,.msg.bot{background:var(--wpp-bolha-nossa);color:var(--wpp-bolha-texto);align-self:flex-end;border-top-right-radius:0}
/* Cauda do balão, igual à "orelhinha" do WhatsApp. */
.msg.in::before,.msg.out::before,.msg.bot::before{
  content:"";position:absolute;top:0;width:8px;height:13px;
}
.msg.in::before{left:-8px;background:var(--wpp-bolha-deles);
  clip-path:polygon(100% 0,0 0,100% 100%)}
.msg.out::before,.msg.bot::before{right:-8px;background:var(--wpp-bolha-nossa);
  clip-path:polygon(0 0,100% 0,0 100%)}
/* Mensagens seguidas do mesmo lado: só a primeira tem cauda, como no app. */
.msg.in + .msg.in{border-top-left-radius:8px}
.msg.out + .msg.out,.msg.bot + .msg.bot,.msg.out + .msg.bot,.msg.bot + .msg.out{border-top-right-radius:8px}
.msg.in + .msg.in::before,
.msg.out + .msg.out::before,.msg.bot + .msg.bot::before,
.msg.out + .msg.bot::before,.msg.bot + .msg.out::before{display:none}
.msg .msg-who{font-size:var(--fs-caption);font-weight:700;margin-bottom:2px;color:var(--ok-texto)}

/* Separador de dia — a pílula centralizada que o WhatsApp usa. */
.msg-dia{align-self:center;margin:12px 0 6px}
.msg-dia span{display:inline-block;padding:5px 12px;border-radius:8px;
  background:var(--wpp-bolha-deles);color:var(--wpp-hora);
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  box-shadow:0 1px .5px rgba(11,20,26,.13)}

/* Barra de escrever: anexo e emoji à esquerda do campo, como no app. */
/* O padding da direita reserva o canto do balão flutuante do Eliot: sem
   ele o botão Enviar nascia EMBAIXO do widget e não dava pra clicar
   (medido: botão em x=1353, widget a partir de x=1326, e o widget ainda tem
   o balãozinho de contagem sobrando pra fora). */
.chat-composer{background:var(--wpp-fundo);border-top:0;padding:10px 96px 10px 14px;gap:var(--sp-1)}
.chat-composer input{border:0;background:var(--wpp-bolha-deles);height:44px;border-radius:9px;
  color:var(--wpp-bolha-texto);padding:0 16px}
.chat-composer input:focus{border:0;box-shadow:none}
.chat-composer input::placeholder{color:var(--wpp-hora)}
.chat-composer .cc-ic{color:var(--wpp-hora);font-size:1.05rem}
.chat-composer .cc-ic:hover{background:transparent;color:var(--ink)}
.chat-composer .cc-send{background:var(--ok);color:#fff;border-radius:50%}

.chat-ctx{border-left:1px solid var(--line);padding:18px;overflow-y:auto}
.chat-ctx .cx-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-h3);color:#fff;margin:0 auto 10px}
.chat-ctx h4{text-align:center;font-size:var(--fs-body)}
.chat-ctx .cx-sub{text-align:center;font-size:var(--fs-small);color:var(--muted);margin-bottom:16px}
.cx-block{padding:14px 0;border-top:1px solid var(--line)}
.cx-block h5{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.cx-line{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);padding:4px 0;color:var(--ink-2)}
.cx-line i{width:15px;color:var(--dim)}
.cx-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.cx-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--sp-3);color:var(--dim);text-align:center;font-size:var(--fs-small);padding:20px}
.cx-idle i{font-size:var(--fs-h1)}
.plan-cupom-msg{margin:-12px 0 16px;text-align:right;font-size:var(--fs-small);font-weight:600}
.plan-cupom-msg.ok{color:var(--ok)}
.plan-cupom-msg.err{color:var(--danger)}
.plan-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.plan-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.plan-trust li{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.plan-trust li i{color:var(--violet);font-size:var(--fs-small)}

/* ---------------- Mais opções ---------------- */
/* ---------------- Meu perfil ---------------- */
.perf-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:var(--sp-4);align-items:start}
.perf-side{display:flex;flex-direction:column;gap:var(--sp-4)}
@media (max-width:980px){.perf-grid{grid-template-columns:1fr}}
.perf-card .card-pad{padding-bottom:24px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}

.perf-hero{position:relative;display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;padding:24px 26px;margin-bottom:16px}
.perf-hero-id{flex:1;min-width:220px}
.perf-hero-nome{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.perf-hero-nome h2{font-size:var(--fs-h2)}
.perf-hero-id>p{font-size:var(--fs-body-sm);color:var(--muted);margin-top:3px}
.perf-hero-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.perf-hero-meta li{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);color:var(--muted)}
.perf-hero-meta i{color:var(--violet);font-size:var(--fs-small)}
.perf-hero-acts{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2)}
.perf-hero-acts>div{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
#pfFotoDica.pendente{color:var(--warn);font-weight:600}
.perf-av-wrap{position:relative;flex:none}
.perf-av{width:84px;height:84px;display:grid;place-items:center;border-radius:50%;overflow:hidden;font-size:var(--fs-h1);font-weight:700;color:#fff;background:var(--grad);box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line-2)}
.perf-av img{width:100%;height:100%;object-fit:cover}
.perf-av-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-caption);color:var(--violet);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
.perf-av-cam:hover{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.perf-remover:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
@media (max-width:760px){.perf-hero-acts{align-items:flex-start;width:100%}.perf-hero-acts>div{justify-content:flex-start}}

.perf-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-4)}
.perf-full{grid-column:1/-1}
.perf-lock{position:relative;display:flex}
.perf-lock .input{padding-right:36px}
.perf-lock i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:var(--fs-small);color:var(--dim);pointer-events:none}
.input:disabled,.select:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.perf-hint{display:block;font-size:var(--fs-small);color:var(--muted);line-height:1.45}

.perf-hero-areas{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);margin-top:10px;font-size:var(--fs-small);color:var(--muted)}
.perf-senhas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:560px){.perf-senhas{grid-template-columns:1fr}}
.chip.warn{background:var(--warn-soft);color:#b45309;border-color:transparent}

.gm-user-av.has-photo{background:none;overflow:hidden}
.gm-user-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.opt:hover{border-color:var(--violet);transform:translateY(-2px);transition:.15s}
.opt-ic{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:var(--fs-h3);color:var(--violet);background:var(--violet-soft);margin-bottom:12px}
.opt h3{font-size:var(--fs-body);margin-bottom:5px}
.opt p{font-size:var(--fs-small);color:var(--muted)}
/* ---------------- Seletor "Qual canal deseja conectar?" ---------------- */
/* Precisa de mais largura que o .wide padrão (620px): com 3 colunas, cada
   card ficava com ~170px e a descrição quebrava em 5 linhas. */
.gm-modal-card.wide:has(.canal-grid){max-width:940px}
.canal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:18px}
.canal-opt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px 16px 18px;box-shadow:var(--sh-sm)}
.canal-opt:not(.off):hover{border-color:var(--violet);transform:translateY(-2px);transition:.15s}
.canal-opt h3{font-size:var(--fs-body);margin:0}
.canal-opt p{font-size:var(--fs-small);color:var(--muted);margin:0;flex:1}
.canal-opt .btn{margin-top:4px}
/* Canal ainda não implementado: continua visível (mostra o roadmap) mas
   nunca clicável — conectar algo que o bot não atende é pior que não listar. */
.canal-opt.off{opacity:.62}
.canal-opt-ic{width:56px;height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;font-size:var(--fs-h2)}
.canal-opt-tag{position:absolute;top:12px;right:12px}
@media(max-width:820px){.canal-grid{grid-template-columns:repeat(2,1fr)}}
/* Dica de coexistência no modal "Criar canal WhatsApp Meta": a escolha de usar
   o app do celular acontece DENTRO da janela da Meta, então quem não souber
   que ela existe cria um número novo sem precisar. */
.wa-coex-dica{display:flex;gap:var(--sp-3);align-items:flex-start;text-align:left;padding:11px 13px;margin:0 0 18px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.wa-coex-dica i{color:#25d366;font-size:var(--fs-body);margin-top:2px}
.wa-coex-dica b{color:var(--ink)}
/* Nome do canal com linha de baixo (coexistência, "desconectado pela Meta"):
   sem largura mínima, no celular a coluna era espremida a ~5 linhas de texto.
   A tabela já rola na horizontal lá, então largura extra não quebra nada. */
#canaisBody td:first-child{min-width:230px}
@media(max-width:560px){.canal-grid{grid-template-columns:1fr}}

/* ---------------- Modal de conexão por QR Code ---------------- */
.gm-modal-card.wide:has(.wa-qr-body){max-width:820px}
.wa-qr-head{display:flex;align-items:center;gap:var(--sp-4);text-align:left;margin-bottom:22px;padding-right:28px}
.wa-qr-body{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:flex-start;text-align:left}
/* Passos numerados em bolinha (o marcador padrão do <ol> se perde ao lado
   do QR, que é o elemento que puxa o olho). */
.wa-steps{list-style:none;counter-reset:passo;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.wa-steps li{counter-increment:passo;position:relative;padding-left:38px;font-size:var(--fs-body-sm);color:var(--muted);line-height:1.5}
.wa-steps li::before{content:counter(passo);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  background:var(--green,#25d366);color:#fff;font-size:var(--fs-small);font-weight:700;display:grid;place-items:center}
.wa-qr-box{flex:none;width:260px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px}
.wa-qr-box.conectado{background:var(--surface)}
/* Carregando do QR. A caixa é sempre branca (o QR precisa), então as cores
   não seguem o tema escuro. Gira só o ::before (transform), o ícone fica. */
.wa-qr-loader{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);font-size:var(--fs-body-sm);font-weight:600;color:#374151}
.wa-qr-ring{position:relative;width:68px;height:68px;display:grid;place-items:center;font-size:var(--fs-h2);color:var(--green,#25d366)}
.wa-qr-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid #e3f6ea;
  border-top-color:var(--green,#25d366);border-right-color:var(--green,#25d366);animation:spin .9s cubic-bezier(.55,.2,.45,.8) infinite}
.wa-qr-off{font-size:var(--fs-display);color:#c9cdd6}
@media(max-width:700px){.wa-qr-box{width:100%}}

/* ---------------- Transmissão (Dashboards > aba Transmissão) ---------------- */
.camp-list{display:flex;flex-direction:column;padding:6px}
.camp-row{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;padding:14px 10px;border-top:1px solid var(--line)}
.camp-row:first-child{border-top:none}
.camp-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex:0 0 auto}
.camp-thumb-ic{display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:var(--fs-body)}
.camp-b{flex:1;min-width:180px}
.camp-b b{display:block;font-size:var(--fs-body-sm)}
.camp-b small{font-size:var(--fs-small);color:var(--dim)}
.camp-motivo{display:flex;align-items:center;gap:var(--sp-1);color:var(--danger);margin-top:3px;line-height:1.4}
.camp-progress{display:flex;align-items:center;gap:var(--sp-3);min-width:180px}
.camp-bar{width:120px;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.camp-bar i{display:block;height:100%;background:var(--grad-gold);border-radius:999px}
.camp-progress span{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
.camp-tags{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.camp-actions{display:flex;gap:var(--sp-1);flex:0 0 auto}
.camp-actions .icnbtn:hover{color:var(--violet);border-color:var(--violet)}

/* seletor de contatos dentro do modal "Nova campanha" */
.cp-contact-list{max-height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------------- Página de detalhe do agente ---------------- */
.agent-detail{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--sp-5);align-items:start}
.agent-detail-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 16px;text-align:center}
.agent-detail-av{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-h2);font-weight:700;color:#fff;overflow:hidden}
.ad-avatar-wrap{position:relative;width:72px;margin:0 auto 12px}
.ad-avatar-edit{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:var(--violet);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-caption);border:2px solid var(--surface);cursor:pointer}
.ad-avatar-edit:hover{background:var(--violet-700)}
.agent-detail-side h3{font-size:var(--fs-body);margin-bottom:2px}
.agent-detail-side p{font-size:var(--fs-small);color:var(--muted);margin-bottom:10px}
.ad-avatar-remove{display:block;margin:-4px auto 10px;font-size:var(--fs-caption);color:var(--danger);background:none;border:none;text-decoration:underline;cursor:pointer}
.ad-modelo-pill{display:inline-flex;align-items:center;gap:var(--sp-1);margin:0 auto 14px;padding:6px 12px;border-radius:999px;background:var(--violet-softer);color:var(--violet);font-size:var(--fs-small);font-weight:700;border:none;cursor:pointer;max-width:100%}
.ad-modelo-pill:hover{background:var(--violet-soft)}
.ad-modelo-pill span,.ad-modelo-pill{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-detail-nav{display:flex;flex-direction:column;gap:var(--sp-05);text-align:left;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.agent-detail-nav button,.agent-detail-nav a{display:flex;align-items:center;gap:var(--sp-3);padding:9px 11px;border-radius:var(--radius-sm);font-size:var(--fs-body-sm);font-weight:600;color:var(--ink-2);width:100%}
.agent-detail-nav button i,.agent-detail-nav a i{width:16px;text-align:center;color:var(--dim)}
.agent-detail-nav button:not(:disabled):hover,.agent-detail-nav a:hover{background:var(--surface-2)}
.agent-detail-nav button.on{background:var(--violet-soft);color:var(--violet)}
.agent-detail-nav button.on i{color:var(--violet)}
.agent-detail-nav button:disabled{opacity:.4;cursor:not-allowed}
.agent-detail-main{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;padding-bottom:90px}
.agent-detail-main h3{font-size:var(--fs-h3);margin-bottom:4px}
.agent-detail-main>p:first-of-type{color:var(--muted);font-size:var(--fs-body-sm);margin-bottom:20px}

/* switch (liga/desliga) — preferências de conversa do agente */
.pref-row{display:flex;align-items:center;gap:var(--sp-4);padding:14px 0;border-top:1px solid var(--line)}
.pref-row:first-child{border-top:none}
.pref-b{flex:1;min-width:0}
.pref-b b{display:block;font-size:var(--fs-body-sm);margin-bottom:2px}
.pref-b span{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.sw{position:relative;width:42px;height:24px;flex:0 0 auto}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.15s;pointer-events:none}
.sw i::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked+i{background:var(--violet)}
.sw input:checked+i::before{transform:translateX(18px)}

/* seletor de modelo de IA (modal em Configurações do agente) */
.modelo-list{display:flex;flex-direction:column;gap:var(--sp-2);max-height:60vh;overflow:auto}
.modelo-row{display:flex;align-items:center;gap:var(--sp-3);padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;transition:.15s}
.modelo-row:hover{border-color:var(--violet)}
.modelo-row.on{border-color:var(--violet);background:var(--violet-softer)}
.modelo-row .cell-av{background:var(--violet-softer);color:var(--violet)}
.modelo-row.on .cell-av{background:var(--violet);color:var(--on-accent)}
.modelo-mult{font-size:var(--fs-small);font-weight:700;color:var(--muted);white-space:nowrap;background:var(--surface-2,var(--line));padding:4px 10px;border-radius:999px}
.modelo-row input[type=radio]{width:18px;height:18px;accent-color:var(--violet);flex:none}

/* lista de arquivos de treinamento (aba Treinamentos do agente) */
.anexo-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:12px}
.anexo-row{display:flex;align-items:center;gap:var(--sp-3);padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md)}
.anexo-ic{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--violet-softer);color:var(--violet);flex:0 0 auto}
.anexo-b{flex:1;min-width:0}
.anexo-b b{display:block;font-size:var(--fs-body-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-b span{font-size:var(--fs-caption);color:var(--muted)}

/* linhas de "Avançado" (Configurações do agente) — mesmo visual dos toggles
   (pref-row/pref-b), mas com select/input/botão em vez de switch */
.adv-ctl{flex:0 0 auto;width:220px}
.adv-ctl.btn{white-space:nowrap;width:auto}
.adv-ctl-num{width:90px;text-align:center}
@media(max-width:640px){
  .pref-row{flex-wrap:wrap}
  .adv-ctl{width:100%}
}

/* assistente de criação de agente (etapas) */
.wiz{display:flex;flex-direction:column;gap:var(--sp-5)}
.wiz-progress{display:flex;align-items:center;gap:var(--sp-3);padding-right:34px}
.wiz-progress span{font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.wiz-bar{flex:1;height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.wiz-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--violet));transition:width .35s cubic-bezier(.2,.8,.2,1)}
.wiz-head{display:flex;align-items:flex-start;gap:var(--sp-4)}
.wiz-ic{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;flex:0 0 auto;font-size:var(--fs-h3);color:var(--violet);background:var(--violet-soft)}
.gm-modal-card .wiz-head h3{font-size:var(--fs-h3);margin:2px 0 4px}
.gm-modal-card .wiz-head p{font-size:var(--fs-body-sm);margin:0;line-height:1.5}
.wiz .field .input,.wiz .field .textarea{width:100%}
.wiz .au-err{margin:-6px 0 0}
.wiz-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:16px;border-top:1px solid var(--line)}
.wiz-obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.wiz-obj{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 10px;text-align:center;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.wiz-obj:hover{border-color:var(--violet);transform:translateY(-2px)}
.wiz-obj.on{border-color:var(--violet);background:var(--violet-softer)}
.wiz-obj .opt-ic{margin:0 auto 8px}
.wiz-obj h4{font-size:var(--fs-small)}
@media (max-width:560px){.wiz-obj-grid{grid-template-columns:1fr}.wiz-head{flex-direction:column}}

/* ===================================================================
   RESPONSIVO
   =================================================================== */
@media (max-width:1200px){
  .grid-2{grid-template-columns:1fr}
  .agent-detail{grid-template-columns:1fr}
  .chat{grid-template-columns:280px minmax(0,1fr)}
  .chat-ctx{display:none}
}
@media (max-width:1024px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .lp-hero{grid-template-columns:1fr}
  .lp-links,.lp-nav-cta{display:none}
  .lp-burger{display:block}
}
@media (max-width:860px){
  /* minmax(0,1fr) e não 1fr: com "1fr" o mínimo da coluna é o conteúdo, e
     qualquer coisa larga (tabela do admin, topo) empurrava a PÁGINA inteira
     pro lado — o celular ficava com rolagem horizontal em todas as telas. */
  #gm-app{grid-template-columns:minmax(0,1fr)}
  #gm-app.side-collapsed{grid-template-columns:minmax(0,1fr)}
  .gm-side{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:84vw;transform:translateX(-100%);transition:transform .25s}
  #gm-app.side-open .gm-side{transform:none}
  .gm-top-burger{display:grid;place-items:center}
  .gm-search kbd{display:none}
  .lp-footer{grid-template-columns:1fr}
  .lp-foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .kpi-row{grid-template-columns:1fr}
  .gm-credits span{display:none}
  .pg-head-actions{width:100%}
  .seg{width:100%}.seg button{flex:1;justify-content:center}

  /* Barra de cima em tela estreita: mesma barra, só mais justa — sem isso
     os botões da direita saíam da tela (medido: 589px de conteúdo em 390). */
  .gm-top{gap:var(--sp-2);padding:10px 14px}
  .gm-top-actions{gap:var(--sp-2)}
  .gm-credits{padding:0 11px;height:38px}
  .gm-vibe,.gm-iconbtn{width:38px;height:38px}
  /* Recolher o menu não faz sentido quando ele já é uma gaveta por cima. */
  .gm-side-collapse{display:none}

  /* Alvos de toque: mínimo confortável no dedo (eram 24-30px). */
  .kb-add{width:32px;height:32px}
  .perf-av-cam{width:34px;height:34px}
  .au-foot a,.au-forgot{display:inline-block;padding:6px 0}
  .lp-foot-cols a{padding:9px 0}

  /* Chat no celular = duas etapas: lista de conversas → conversa aberta,
     com botão de voltar. Antes a lista era escondida (display:none) e
     sobrava só "escolha uma conversa na lista ao lado", sem lista: não
     existia jeito de abrir conversa nenhuma pelo celular. */
  .chat{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 196px);min-height:430px}
  .chat-main,.chat-ctx{display:none}
  .chat.ver-conversa .chat-list{display:none}
  .chat.ver-conversa .chat-main{display:flex}
  .chat-voltar{display:grid}
}

/* ===================================================================
   Reveal-on-scroll (usado pela landing) — regra utilitaria, mantida
   =================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===================================================================
   AUTENTICAÇÃO — login / cadastro
   =================================================================== */
/* Tela dividida de ponta a ponta: formulário limpo à esquerda, painel da
   marca à direita (some no celular). Nada animado aqui — o login fica leve. */
/* ===================================================================
   AUTENTICAÇÃO — um card só, no centro.
   Antes eram duas colunas: formulário à esquerda e um painel de marketing
   à direita (headline + conversa de exemplo + lista de recursos). Quem
   chega no login já decidiu entrar; aquilo era a landing repetida, roubando
   metade da tela da única coisa que importa ali, que é o formulário.
   =================================================================== */
#gm-auth{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto}
/* O fundo desfocado é o próprio site: a landing continua ali atrás, só que
   fora de foco. Custa GPU, então só existe enquanto a janela está aberta —
   e nada se move por trás dela (ver pausarDecoracaoForaDaTela). */
.au-scrim{position:absolute;inset:0;background:rgba(16,14,40,.55);backdrop-filter:blur(16px) saturate(.9);-webkit-backdrop-filter:blur(16px) saturate(.9);animation:auFade .2s ease both}
@supports not (backdrop-filter:blur(2px)){.au-scrim{background:rgba(16,14,40,.88)}}
@keyframes auFade{from{opacity:0}to{opacity:1}}
/* Com a janela aberta, a landing atrás do vidro congela: cada quadro dela
   seria recomposto borrado, e pro usuário aquela tela está parada. */
body.auth-aberta #gm-landing *{animation-play-state:paused !important}
.au-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:var(--radius-sm);color:var(--dim);font-size:var(--fs-body);transition:color .15s,background .15s}
.au-x:hover{color:var(--ink);background:var(--surface-2)}
.au-brand{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-bottom:22px}
.au-brand .lp-brand-name{color:var(--ink);font-size:var(--fs-h3)}
.au-brand .lp-brand-name b{color:var(--violet)}
/* O card. max-width 430 porque campo de formulário mais largo que isso fica
   desconfortável de ler e de mirar. */
/* A janela. max-width 430 porque campo mais largo que isso fica
   desconfortável de ler e de mirar. margin:auto pra ela centralizar mesmo
   quando o cadastro fica mais alto que a tela e o overlay precisa rolar. */
.au-card{position:relative;z-index:1;width:100%;max-width:430px;margin:auto;background:#fff;border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-xl);
  padding:clamp(26px,4vw,38px);box-shadow:0 40px 90px -30px rgba(10,6,30,.55),0 2px 10px rgba(10,6,30,.12);
  animation:auSobe .26s cubic-bezier(.2,.9,.25,1) both}
.au-pane{animation:auEntra .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes auEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes auSobe{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.au-pane .au-titulo{font-family:var(--f-head);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin-bottom:6px}
.au-sub{color:var(--muted);font-size:var(--fs-body-sm);line-height:1.5;margin-bottom:24px}
.au-gbtn{display:flex;justify-content:center;min-height:44px}
.au-gbtn iframe{margin:0 auto}
.au-sep{display:flex;align-items:center;gap:var(--sp-4);margin:20px 0;color:var(--dim);font-size:var(--fs-small)}
.au-sep::before,.au-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.au-pane form{display:flex;flex-direction:column;gap:var(--sp-4)}
.au-pane .au-titulo{text-wrap:balance}
.au-pane .field label{font-size:var(--fs-small);color:var(--ink)}
.au-pane .input{height:46px;border-radius:var(--radius-sm);border-color:var(--line-2);background:var(--surface-2);font-size:var(--fs-body);transition:border-color .15s,box-shadow .15s,background .15s}
.au-pane .input::placeholder{color:var(--dim)}
.au-pane .input:hover{border-color:var(--violet-soft)}
.au-pane .input:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(37,33,92,.12)}
.au-pane .btn-primary{height:48px;border-radius:var(--radius-sm);font-size:var(--fs-body);margin-top:4px}
/* Rodapé fora do card: o "voltar" é uma saída, não uma ação do formulário. */
.au-foot{margin-top:20px;text-align:center;font-size:var(--fs-small);color:var(--dim)}
.au-foot a{color:var(--muted)}
.au-foot a:hover{color:var(--violet);text-decoration:underline}
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
/* Rótulo à esquerda, "Esqueceu a senha?" à direita, na mesma linha. Classe
   genérica (usada em qualquer campo com ação no cabeçalho), mas mora aqui
   porque a tela de auth é o único lugar que usa hoje. */
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.au-forgot{font-size:var(--fs-small);font-weight:600;color:var(--violet)}
.au-forgot:hover{text-decoration:underline}
.au-inp{position:relative;display:flex}
.au-inp>i:first-child{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:var(--fs-small);pointer-events:none}
.au-inp>i:first-child+.input{padding-left:38px}
.au-inp--pass>.input{padding-right:38px}
.au-toggle-pass{position:absolute;right:2px;top:2px;bottom:2px;width:34px;display:flex;align-items:center;justify-content:center;color:var(--dim);border-radius:var(--radius-xs);font-size:var(--fs-small)}
.au-toggle-pass:hover{color:var(--violet);background:var(--violet-softer)}
.au-check input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--violet)}
.au-check{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.au-check input{margin-top:3px}
/* inline, não inline-block: em bloco o link nao cabia na linha e jogava
   "política de privacidade" sozinha na linha de baixo, desalinhada. */
.au-check a{color:var(--violet);font-weight:600}
.au-err{background:var(--danger-soft);color:#b91c1c;font-size:var(--fs-small);font-weight:600;padding:10px 13px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:var(--sp-2)}
.au-err::before{content:"\f06a";font-family:"Font Awesome 6 Free";font-weight:900}
.au-switch{text-align:center;font-size:var(--fs-body-sm);color:var(--muted);margin-top:20px}
.au-switch a{color:var(--violet);font-weight:700;display:inline-block;padding:5px 2px}
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-ghost.is-loading::after,.btn-white.is-loading::after{border-color:rgba(37,33,92,.3);border-top-color:var(--violet)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Notebook de tela baixa (1366x768 e afins): o card de cadastro é o mais
   alto, então é ele que decide se cabe sem rolar. */
@media (max-height:900px){
  #gm-auth{padding:18px}
  .au-card{padding:26px}
}
@media (max-height:780px){
  #gm-auth{padding:14px}
  .au-sub{margin-bottom:18px}
  .au-sep{margin:14px 0}
  .au-pane form{gap:var(--sp-3)}
  .au-card{padding:24px}
}
@media (max-width:480px){
  #gm-auth{padding:16px 14px}
  .au-card{padding:22px 18px;border-radius:var(--radius-lg)}
  .au-pane .au-titulo{font-size:var(--fs-h2)}
  .au-row{grid-template-columns:1fr}
}

.au-dev-cap{display:flex;align-items:center;gap:var(--sp-3);margin-top:22px;color:var(--dim);font-size:var(--fs-caption);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.au-dev-cap::before,.au-dev-cap::after{content:"";flex:1;height:1px;background:var(--line)}
.au-dev-row{display:flex;gap:var(--sp-2);margin-top:12px}
.au-dev-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex:1;
  padding:10px;border-radius:var(--radius-sm);border:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-small);font-weight:600;background:var(--surface-2);
}
.au-dev-btn:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-softer)}


/* ===================================================================
   LANDING — bloco único e autossuficiente de #gm-landing.

   Reescrita enxuta. O que saiu, e por quê:
     - canvas de partículas, "beam" e 3 halos animados no hero: seis
       decorações disputando atenção com a única coisa que vende, que é a
       conversa rodando no celular (e era CPU queimada com a tela parada);
     - os 3 cartões flutuantes em volta do celular: contavam o que a própria
       conversa já mostra;
     - a grade "bento" de 9 blocos, cada um com sua mini-animação: virou
       4 cartões + uma linha de texto com o resto.
   O que entrou: fundo de malha estático, tipografia fluida, e uma borda
   girando só no plano em destaque (um elemento, pausado fora da tela).
   Tokens --lp-* ficam presos à landing pra não mexer no painel.
   NÃO criar blocos "vN": editar este aqui.
   ===================================================================== */
#gm-landing{
  --lp-ink:#0e1024; --lp-ink-2:#2a2e45; --lp-muted:#5d6275; --lp-dim:#6b7080;
  --lp-bg:#ffffff; --lp-tint:#f7f6fb; --lp-line:#e8e8f0;
  --lp-night:#0d0b22; --lp-night-2:#221d52;
  --lp-gold:#c9a24b; --lp-gold-2:#e8cb7d; --lp-gold-vivo:#efc25e;
  /* Passo de ritmo vertical: todas as seções respiram no mesmo múltiplo. */
  --lp-gap:clamp(64px,8vw,120px);
  background:var(--lp-bg);color:var(--lp-ink-2);
}
#gm-landing h1,#gm-landing h2,#gm-landing h3,#gm-landing h4{font-family:var(--f-head);color:var(--lp-ink);letter-spacing:-.02em;text-wrap:balance}
#gm-landing p{text-wrap:pretty}
.lp-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.lp-progress i{display:block;height:100%;width:0;background:var(--grad-gold);transition:width .1s linear}

/* ---------------- Botões da landing ---------------- */
.lp-btn-gold{position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-gold);color:#25215c;font-weight:700;box-shadow:0 10px 26px -12px rgba(201,162,75,.7);
  transition:box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1),filter .2s}
.lp-btn-gold:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(201,162,75,.8)}
/* Reflexo que atravessa o botão no hover. z-index negativo dentro de um
   contexto isolado = pinta ACIMA do fundo do botão e ABAIXO do texto. */
.lp-btn-gold::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-200%);transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.lp-btn-gold:hover::after{transform:translateX(350%)}
@media (prefers-reduced-motion:reduce){.lp-btn-gold::after{display:none}}
/* A seta anda um passo à frente no hover — o detalhe que diz "isto leva
   você a algum lugar" sem precisar de texto. */
#gm-landing .btn i.fa-arrow-right,#gm-landing .btn i.fa-arrow-right-long{transition:transform var(--dur) var(--ease)}
#gm-landing .btn:hover i.fa-arrow-right,#gm-landing .btn:hover i.fa-arrow-right-long{transform:translateX(5px)}
.lp-btn-quiet{color:#fff;background:transparent;border-color:rgba(255,255,255,.22)}
.lp-btn-quiet:hover{background:rgba(255,255,255,.1)}
.lp-nav.scrolled .lp-btn-quiet,.lp-nav.menu-open .lp-btn-quiet{color:var(--lp-ink);border-color:var(--lp-line)}
.lp-nav.scrolled .lp-btn-quiet:hover,.lp-nav.menu-open .lp-btn-quiet:hover{background:var(--lp-tint)}
.lp-btn-glass{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.lp-btn-glass:hover{background:rgba(255,255,255,.16)}
.lp-btn-line{color:var(--lp-ink);background:#fff;border-color:var(--lp-line)}
.lp-btn-line:hover{border-color:var(--violet);color:var(--violet)}

/* ---------------- Marca ---------------- */
.lp-brand{display:inline-flex;align-items:center;gap:10px}
.lp-brand-mark{display:grid;place-items:center;flex:0 0 auto}
.lp-brand-name{font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em}
.lp-brand-name b{color:var(--lp-gold-2);font-weight:700}
.lp-nav.scrolled .lp-brand-name,.lp-nav.menu-open .lp-brand-name{color:var(--lp-ink)}
.lp-nav.scrolled .lp-brand-name b,.lp-nav.menu-open .lp-brand-name b{color:var(--violet)}

/* ---------------- Nav ---------------- */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:55;transition:background .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
/* Sem backdrop-filter aqui: barra fixa com blur é recomposta a cada quadro
   da rolagem, e foi um dos motivos de a página pesar com a tela parada. */
/* Branco OPACO, não .97: com 3% de transparência o texto que passava por
   baixo aparecia fantasma dentro da barra. */
.lp-nav.scrolled,.lp-nav.menu-open{background:#fff;border-bottom-color:var(--lp-line);box-shadow:0 1px 20px -10px rgba(14,16,36,.25)}
/* Rolando dentro do hero: fundo escuro quase opaco. Sem backdrop-filter de
   propósito (barra fixa desfocando o que passa por baixo é recomposta a
   cada quadro — ver o comentário da .lp-nav). */
.lp-nav.escura{background:rgba(9,8,22,.9);border-bottom-color:rgba(255,255,255,.06)}
/* A barra encolhe ao rolar: menos peso no topo depois que a pessoa já
   passou do hero. */
.lp-nav-in{max-width:1240px;margin:0 auto;padding:16px clamp(18px,4vw,40px);display:flex;align-items:center;gap:26px;
  transition:padding .25s cubic-bezier(.2,.8,.2,1)}
.lp-nav.scrolled .lp-nav-in{padding-top:9px;padding-bottom:9px}
.lp-links{display:flex;gap:4px;margin-left:auto}
.lp-links a{position:relative;padding:9px 13px;border-radius:9px;font-size:.88rem;font-weight:500;color:rgba(255,255,255,.82);transition:color var(--dur) var(--ease)}
.lp-links a:hover{color:#fff}
/* Sublinhado que se desenha da esquerda. scaleX em vez de width: um é
   composto, o outro força cálculo de layout a cada quadro. */
.lp-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;border-radius:2px;
  background:var(--lp-gold-2);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur) var(--ease)}
.lp-links a:hover::after{transform:scaleX(1)}
.lp-nav.scrolled .lp-links a::after,.lp-nav.menu-open .lp-links a::after{background:var(--violet)}
.lp-nav.scrolled .lp-links a,.lp-nav.menu-open .lp-links a{color:var(--lp-muted)}
.lp-nav.scrolled .lp-links a:hover,.lp-nav.menu-open .lp-links a:hover{color:var(--violet);background:var(--lp-tint)}
.lp-nav-cta{display:flex;align-items:center;gap:10px}
.lp-nav-cta .btn{height:40px;padding:0 16px;font-size:.85rem}
.lp-burger{display:none;width:42px;height:42px;border-radius:11px;color:#fff;font-size:1.1rem}
.lp-nav.scrolled .lp-burger,.lp-nav.menu-open .lp-burger{color:var(--lp-ink)}
.lp-drawer{display:none;flex-direction:column;gap:2px;padding:10px clamp(18px,4vw,40px) 20px;background:#fff;border-top:1px solid var(--lp-line)}
.lp-drawer a{padding:13px 4px;font-size:.95rem;font-weight:500;color:var(--lp-ink-2);border-bottom:1px solid var(--lp-line)}
.lp-drawer-cta{display:flex;flex-direction:column;gap:9px;margin-top:16px}

/* ---------------- Hero ---------------- */
/* ===================================================================
   HERO — fundo, luz e atmosfera
   ===================================================================
   O que saiu e por quê:
     - a GRADE quadriculada: é o clichê nº 1 de landing de SaaS gerada por
       IA, e era o que mais denunciava o fundo;
     - os eixos técnicos: viraram marquinhas soltas nos cantos, lidas como
       sujeira e não como sistema;
     - o roxo #0d0b22 chapado: fundo morto, frio.

   O que entrou: um preto-navy bem mais profundo como base e uma ATMOSFERA
   quente — bloom dourado grande atrás do celular, que é de onde a luz da
   cena já vinha. Resolve duas queixas de uma vez: dá calor, e ACENDE o
   miolo entre o texto e o celular, que antes era um buraco.
   =================================================================== */
/* O hero ocupa a tela inteira no primeiro carregamento. Sem isto, numa
   janela um pouco mais alta que o conteúdo, uma fatia fina da seção branca
   seguinte aparecia colada embaixo — e fatia de branco puro encostada no
   navy lê como defeito de renderização, não como "começo de outra seção".
   svh (não vh): no celular, vh conta a altura SEM a barra do navegador e o
   hero passaria da tela. */
.lp-hero{position:relative;overflow:hidden;background:var(--lp-night);
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  padding:clamp(96px,11vh,140px) 0 0}
.lp-hero-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(48% 55% at 74% 34%,rgba(214,166,74,.30),transparent 68%),
    radial-gradient(52% 46% at 8% 82%,rgba(76,58,168,.34),transparent 70%),
    radial-gradient(92% 82% at 50% 38%,transparent 44%,rgba(4,3,12,.8) 100%),
    linear-gradient(175deg,#0a0818 0%,#0c0a1e 46%,#080714 100%)}

/* Halo concentrado logo atrás do aparelho. Separado do fundo pra andar em
   ritmo próprio na paralaxe e reagir ao mouse. */
.lp-hero-luz{position:absolute;inset:-12% -6%;pointer-events:none;contain:strict}
.lp-hero-luz i{position:absolute;display:block;border-radius:50%;filter:blur(80px)}
.lp-hero-luz .l1{width:44vw;height:44vw;max-width:620px;max-height:620px;right:4%;top:6%;opacity:.55;
  background:radial-gradient(closest-side,rgba(226,178,86,.46),rgba(120,86,206,.2) 58%,transparent 76%);
  translate:calc(var(--mx) * -16px) calc(var(--my) * -12px)}

/* Grão: textura estática por cima de tudo. É o que tira do fundo o ar de
   "gradiente de CSS". SVG inline, sem requisição. */
.lp-grao{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}

/* flex:1 faz o miolo ocupar a altura que sobra e o align-items:center do
   grid centraliza o conteúdo nela; a régua vem depois e fica no pé.
   width:100% porque, num item flex com margin auto, a largura encolheria
   pro conteúdo em vez de ir até o max-width. */
.lp-hero-in{position:relative;flex:1;width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.lp-hero-copy{max-width:660px}
/* Marcador de estado, não "pílula de landing". Sem fundo, sem borda
   arredondada: um fio à esquerda, texto monoespaçado e o ponto verde. Lê
   como etiqueta de sistema — que é o que ele é. */
.lp-pill{display:inline-flex;align-items:center;gap:10px;padding:0 0 0 13px;border-left:2px solid var(--lp-gold);
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:#cfc6e8}
.lp-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
/* #gm-landing h1 (id) vence .lp-hero h1 (classe) por especificidade — sem
   repetir o #gm-landing aqui o título saía preto sobre o fundo escuro. */
/* Três linhas, não cinco: a manchete dominava a tela inteira e empurrava a
   prova (o celular) pra fora do primeiro olhar. */
#gm-landing .lp-hero h1{margin:24px 0 20px;color:#fff;font-size:clamp(2.2rem,4.6vw,3.55rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;max-width:19ch}
/* Dourado SÓLIDO, não gradiente. O gradiente de cinco paradas com reflexo
   deslizante era efeito sem motivo: chamava atenção pra si, não pra frase.
   Uma cor chapada, no ponto exato em que a promessa é entregue, lê como
   decisão; o gradiente lê como enfeite. */
.lp-hero h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  font-size:1.07em;letter-spacing:-.012em;color:var(--lp-gold-vivo)}

/* Abertura do hero: os blocos entram um atrás do outro em vez de a página
   aparecer pronta. Só na carga — nada disso roda de novo ao rolar.

   A abertura acontece SEMPRE. O que "reduzir movimento" muda é só o TIPO:
   com movimento os blocos sobem, sem movimento eles apenas esmaecem no
   lugar. Página morta não é acessibilidade — o que a recomendação pede é
   tirar o DESLOCAMENTO, não tirar todo sinal de vida. */
.lp-hero-copy>*,.lp-stage{animation:lpEntra .85s cubic-bezier(.16,1,.3,1) both}
.lp-hero-copy>:nth-child(1){animation-delay:.04s}
.lp-hero-copy>:nth-child(2){animation-delay:.12s}
.lp-hero-copy>:nth-child(3){animation-delay:.20s}
.lp-hero-copy>:nth-child(4){animation-delay:.28s}
.lp-hero-copy>:nth-child(5){animation-delay:.36s}
.lp-stage{animation-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .lp-hero-copy>*,.lp-stage{animation-name:lpEntraSuave}
}
@keyframes lpEntra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lpEntraSuave{from{opacity:0}to{opacity:1}}

/* ---- abertura cinematográfica (GSAP assume) ----
   A marca data-cinema vem do gptmaker-boot.js, ANTES do primeiro desenho:
   sem isso o hero apareceria pronto e só depois sumiria pra animar. Aqui só
   apagamos o ponto de partida e desligamos a abertura em CSS — quem move é
   o initLandingCinema. Se o GSAP não carregar, o boot tira a marca em 1,5s
   e tudo reaparece. */
html[data-cinema] #gm-landing .lp-nav,
html[data-cinema] #gm-landing .lp-hero-copy>*,
html[data-cinema] #gm-landing .lp-stage{opacity:0}
html[data-cinema] #gm-landing .lp-hero-copy>*,
html[data-cinema] #gm-landing .lp-stage{animation:none}

/* Palavra a palavra. O corte é por clip-path e não por transform de
   propósito: transform num filho de um elemento com background-clip:text
   descola o gradiente do texto. Cada palavra dourada leva o próprio
   gradiente (.lp-w--ouro), então o corte funciona igual nas duas. */
.lp-w{display:inline-block;white-space:pre}
.lp-w--ouro{color:var(--lp-gold-vivo)}
.lp-hero-copy>p{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.6;color:#c2bcd8;max-width:540px}
.lp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
/* Ficha técnica: os mesmos três fatos, separados por fio em vez de
   checkmark. Lista com ✓ é o clichê visual mais datado de landing — e o
   fio comunica a mesma coisa (são itens de uma mesma especificação) sem
   gritar. */
.lp-hero-fine{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#a49cc4}
.lp-hero-fine li{padding:0 18px}
.lp-hero-fine li:first-child{padding-left:0}
.lp-hero-fine li+li{border-left:1px solid rgba(255,255,255,.12)}
/* Quando a linha quebra, o fio do primeiro item da linha de baixo fica
   órfão, pendurado no nada. Em tela estreita o espaço separa sozinho. */
@media (max-width:620px){
  .lp-hero-fine{justify-content:center;gap:4px 0}
  .lp-hero-fine li{padding:0 11px}
  .lp-hero-fine li+li{border-left:none}
}

/* ---- celular com a conversa (roteiro em initHeroDemo, gptmaker.js) ----
   .lp-phone recebe a inclinação 3D (segue o mouse via --rx/--ry);
   .lp-phone-frame faz a flutuação — transforms separados pra não brigarem. */
.lp-stage{position:relative;display:grid;place-items:center;min-height:650px;perspective:1400px}
.lp-phone-glow{position:absolute;left:50%;top:50%;width:420px;height:520px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,162,75,.42),rgba(72,64,170,.2) 60%,transparent);filter:blur(30px);animation:lpGlowPulse 5s ease-in-out infinite}
@keyframes lpGlowPulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
.lp-phone{--rx:4deg;--ry:-9deg;position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lp-phone-frame{position:relative;width:300px;height:620px;padding:11px;border-radius:52px;
  background:linear-gradient(145deg,#3b3752 0%,#16142a 38%,#0b0a18 62%,#2a2640 100%);
  box-shadow:0 0 0 1px rgba(232,203,125,.35),0 0 0 3px #07060f,inset 0 0 0 1px rgba(255,255,255,.12),
    -30px 60px 90px -30px rgba(0,0,0,.9),0 30px 60px -20px rgba(201,162,75,.25);
  animation:lpPhoneFloat 6s ease-in-out infinite}
@keyframes lpPhoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.lp-phone-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2a2640,#4a4563)}
.lp-phone-btn.b1{left:-4px;top:120px;height:34px}
.lp-phone-btn.b2{left:-4px;top:168px;height:58px}
.lp-phone-btn.b3{right:-4px;top:150px;height:84px;background:linear-gradient(270deg,#2a2640,#4a4563)}
.lp-phone-screen{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#0b141a;display:flex;flex-direction:column}
.lp-phone-island{position:absolute;top:10px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000;z-index:3}
.lp-phone-status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:14px 26px 0 30px;font-size:.74rem;color:#e9edef;flex:0 0 auto;background:#202c33}
.lp-phone-status b{font-weight:600;font-family:var(--f-body)}
.lp-phone-status span{display:flex;gap:5px;font-size:.62rem}
.lp-wa-head{display:flex;align-items:center;gap:9px;padding:8px 14px 10px 10px;background:#202c33;color:#aebac1;flex:0 0 auto;font-size:.86rem}
.lp-wa-head>i:first-child{font-size:.9rem;color:#e9edef}
.lp-wa-head>i:nth-last-child(-n+2){margin-left:14px}
.lp-wa-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grad-gold);color:var(--violet-800);font-size:.8rem;flex:0 0 auto}
.lp-wa-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.lp-wa-id b{font-size:.86rem;color:#e9edef;font-weight:600}
.lp-wa-id span{font-size:.68rem;color:#8696a0;transition:color .2s}
.lp-wa-id span.typing{color:#00a884}
/* papel de parede com textura sutil, como no WhatsApp escuro */
.lp-wa-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px 10px 8px;overflow:hidden;
  background-color:#0b141a;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px),radial-gradient(rgba(255,255,255,.025) 1px,transparent 1.2px);
  background-size:22px 22px,22px 22px;background-position:0 0,11px 11px;transition:opacity .45s}
.lp-wa-body.reset{opacity:0}
.lp-wa-day{align-self:center;margin-bottom:6px;padding:4px 10px;border-radius:7px;background:#182229;color:#8696a0;font-size:.62rem;font-weight:600;letter-spacing:.04em}
.lp-msg{position:relative;max-width:82%;padding:6px 9px 7px;border-radius:9px;font-size:.78rem;line-height:1.38;color:#e9edef;animation:lpMsgIn .32s cubic-bezier(.2,.8,.2,1) both;flex:0 0 auto;box-shadow:0 1px .5px rgba(0,0,0,.25)}
@keyframes lpMsgIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.lp-msg.agente{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.lp-msg.cliente{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.lp-msg time{float:right;margin:6px 0 -3px 10px;font-size:.58rem;color:rgba(233,237,239,.55);display:inline-flex;align-items:center;gap:3px}
.lp-msg.cliente time i{color:#53bdeb;font-size:.6rem}
.lp-msg.audio{display:flex;align-items:center;gap:8px;min-width:190px;padding:8px 10px}
.lp-msg.audio>i{font-size:.8rem;color:#aebac1}
/* alinhadas pela base (flex-end): as curtas ficam encostadas embaixo, como
   parte da mesma onda — centralizadas (align-items:center, versão antiga)
   as barras curtas pareciam bolinhas soltas flutuando no meio das altas */
.lp-msg.audio .bars{display:flex;align-items:flex-end;gap:2px;flex:1;height:22px}
.lp-msg.audio .bars b{flex:1;min-height:3px;border-radius:1.5px;background:rgba(233,237,239,.65)}
.lp-msg.audio small{font-size:.6rem;color:rgba(233,237,239,.6)}
.lp-msg.typing{display:flex;gap:4px;padding:11px 13px}
.lp-msg.typing span{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:lpTyping 1s ease-in-out infinite}
.lp-msg.typing span:nth-child(2){animation-delay:.15s}.lp-msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes lpTyping{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.lp-wa-compose{display:flex;align-items:center;gap:8px;padding:8px 10px 18px;background:#0b141a;flex:0 0 auto}
.lp-wa-compose span{flex:1;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:22px;background:#202c33;color:#8696a0;font-size:.76rem}
.lp-wa-compose b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#00a884;color:#0b141a;font-size:.82rem;flex:0 0 auto}
/* reflexo de vidro passando pela tela */
/* O reflexo é uma camada 2,6x mais larga que desliza por transform — animar
   background-position repintava a tela inteira do celular a cada frame.
   -73.8% / 12.3% = mesmas posições do background-position 120% / -20% antigo. */
.lp-phone-glare{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:inherit}
.lp-phone-glare::before{content:"";position:absolute;top:0;bottom:0;left:0;width:260%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);
  animation:lpGlare 7s ease-in-out infinite}
@keyframes lpGlare{0%,100%{transform:translateX(-73.8%)}50%{transform:translateX(12.3%)}}


/* ---------------- Seções ---------------- */
.lp-sec{padding:var(--lp-gap) 0}
/* A seção antes do CTA não precisa do respiro de baixo inteiro: o CTA já
   traz 104px de padding próprio, e os dois somados davam 224px de branco
   vazio — uma tela quase em branco entre a última dúvida e a chamada. */
.lp-sec:has(+ .lp-cta){padding-bottom:clamp(24px,3vw,44px)}
.lp-sec--tint{background:var(--lp-tint);border-block:1px solid var(--lp-line)}
.lp-sec-in{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.lp-head{max-width:640px;margin-bottom:clamp(34px,4vw,54px)}
.lp-head--center{margin-inline:auto;text-align:center}
/* Rótulo de seção com número editorial. O número é monoespaçado e o texto
   não: o contraste entre as duas famílias é o que faz a linha parecer
   paginação de publicação técnica em vez de "tag colorida". O fio depois do
   número liga o rótulo à régua da seção. */
.lp-tag{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-muted);margin-bottom:14px}
.lp-tag i{font-family:var(--f-mono);font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:0;color:var(--lp-gold)}
.lp-tag i::after{content:"";display:inline-block;width:26px;height:1px;margin-left:10px;vertical-align:middle;background:currentColor;opacity:.45}
.lp-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.14;font-weight:800}
.lp-head h2 em{font-style:normal;color:var(--violet)}
.lp-head>p{margin-top:14px;font-size:1rem;line-height:1.62;color:var(--lp-muted)}
/* reveal-on-scroll (IntersectionObserver em initLanding) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* Com movimento reduzido some o deslocamento, mas a esmaecida fica: antes
   isto era `transition:none`, e o resultado era uma página 100% parada. */
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:opacity .45s ease}
  .reveal.in{transform:none}
}

/* ---------------- O que ele faz: 4 cartões ---------------- */
/* ---- composição assimétrica: 1 bloco + 3 linhas ---- */
.lp-cards{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(22px,3.5vw,56px);align-items:start;perspective:1100px}
.lp-card-n{display:block;font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--lp-gold);margin-bottom:12px}
/* As três linhas: sem caixa, sem sombra, sem raio. O fio entre elas já diz
   que são itens da mesma lista — a caixa só acrescentaria ruído. */
.lp-card-lista{display:flex;flex-direction:column}
.lp-card--lead{padding:30px 28px 32px}
.lp-cards .lp-card--linha{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding:22px 0;background:none;border:none;border-top:1px solid var(--lp-line);border-radius:0;box-shadow:none}
.lp-cards .lp-card--linha:first-child{border-top:none;padding-top:0}
.lp-cards .lp-card--linha .lp-card-n{margin:2px 0 0}
.lp-cards .lp-card--linha h3{margin-bottom:6px}
.lp-cards .lp-card--linha:hover{transform:none;box-shadow:none;border-color:var(--lp-line)}
.lp-cards .lp-card--linha:hover h3{color:var(--violet)}
.lp-cards .lp-card--linha h3{transition:color var(--dur) var(--ease)}
/* A prova: um pedaço de conversa de verdade dentro do bloco principal, com
   a hora que sustenta a afirmação "24 horas". Detalhe de produto vale mais
   que ícone decorativo. */
.lp-prova{margin-top:22px;padding-top:18px;border-top:1px dashed var(--lp-line);display:flex;flex-direction:column;gap:10px}
.lp-prova-topo{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-dim)}
.lp-prova-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.lp-prova-linha{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;font-size:.84rem;line-height:1.5}
.lp-prova-linha b{font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-dim);padding-top:3px}
.lp-prova-linha span{color:var(--lp-ink-2)}
.lp-prova-linha.ia b{color:var(--lp-gold)}
.lp-prova-linha.ia span{color:var(--lp-ink);font-weight:500}
/* Inclinação 3D discreta seguindo o cursor: --rx/--ry vêm do mesmo listener
   que já desenha a luz (initCardSpotlight), então o custo é o mesmo de
   antes. Amplitude pequena de propósito — cartão que gira muito vira
   brinquedo, não produto. */
.lp-card{position:relative;padding:26px 24px 28px;background:#fff;border:1px solid var(--lp-line);border-radius:18px;
  transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
/* A elevação entra como variável dentro do MESMO transform da inclinação —
   se fosse uma declaração à parte, uma apagaria a outra. */
.lp-card:hover{--lift:-4px;border-color:color-mix(in srgb,var(--lp-gold) 45%,var(--lp-line));box-shadow:0 22px 40px -26px rgba(14,16,36,.35)}
/* Luz que segue o cursor: o --mx/--my vem de UM listener de pointermove na
   grade (initCardSpotlight), e o resto é gradiente. Sem hover (celular) o
   listener nem é registrado e isto nunca acende. */
.lp-card--lead::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(201,162,75,.16),transparent 72%)}
.lp-card--lead:hover::after{opacity:1}
.lp-card>*{position:relative;z-index:1}
.lp-card h3{font-size:1.06rem;margin-bottom:9px}
.lp-card p{font-size:.9rem;line-height:1.6;color:var(--lp-muted)}
/* Fecha a seção com uma régua, alinhada à esquerda como todo o resto. Isto
   era centralizado, sozinho, no meio de uma composição toda à esquerda —
   centralizar o que sobra é um dos tiques mais reconhecíveis de template. */
.lp-tambem{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;
  margin-top:clamp(28px,3.5vw,44px);padding-top:18px;border-top:1px solid var(--lp-line);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lp-dim)}
.lp-tambem span{margin:0 10px;color:var(--lp-line)}

/* ---------------- Como funciona ---------------- */
.lp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);counter-reset:passo}
.lp-steps li{position:relative;padding-top:6px}
/* A linha que liga um passo ao outro: some no último e no mobile. */
.lp-steps li::after{content:"";position:absolute;top:22px;left:56px;right:-20px;height:1px;background:linear-gradient(90deg,var(--lp-line),transparent)}
.lp-steps li:last-child::after{display:none}
.lp-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:18px;
  font-family:var(--f-head);font-weight:800;font-size:1.05rem;color:#fff;background:var(--grad-dark);
  box-shadow:0 10px 22px -12px rgba(37,33,92,.8)}
.lp-steps h3{font-size:1.08rem;margin-bottom:9px}
.lp-steps p{font-size:.9rem;line-height:1.6;color:var(--lp-muted)}

/* ---------------- Painel ---------------- */
.lp-painel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,64px);align-items:center}
.lp-painel .lp-head{margin-bottom:0}
.lp-checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px}
.lp-checks li{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--lp-ink-2)}
.lp-checks i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:0 0 auto;font-size:.6rem;color:#15803d;background:#dcfce7}
.lp-app{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--lp-line);box-shadow:0 40px 80px -40px rgba(14,16,36,.45)}
.lp-app-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--lp-tint);border-bottom:1px solid var(--lp-line)}
.lp-app-bar i{width:9px;height:9px;border-radius:50%;background:#d8d5e2}
.lp-app-bar i:first-child{background:#f87171}.lp-app-bar i:nth-child(2){background:#fbbf24}.lp-app-bar i:nth-child(3){background:#34d399}
.lp-app-bar span{margin-left:10px;font-size:.72rem;color:var(--lp-dim)}
.lp-app-body{display:grid;grid-template-columns:168px minmax(0,1fr)}
.lp-app-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--lp-tint);border-right:1px solid var(--lp-line)}
.lp-app-side a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:.78rem;color:var(--lp-muted)}
.lp-app-side a i{width:14px;font-size:.72rem}
.lp-app-side a.on{background:#fff;color:var(--violet);font-weight:600;box-shadow:0 1px 3px rgba(14,16,36,.07)}
.lp-app-main{padding:18px}
.lp-app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.lp-app-kpis div{padding:13px 14px;border:1px solid var(--lp-line);border-radius:12px}
.lp-app-kpis span{display:block;font-size:.68rem;color:var(--lp-dim);margin-bottom:5px}
.lp-app-kpis b{font-family:var(--f-head);font-size:1.15rem;color:var(--lp-ink)}
.lp-app-kpis .gold{background:linear-gradient(150deg,#fdf6e4,#fff);border-color:#efe2c2}
.lp-app-kpis b.on{font-size:.9rem;color:#15803d}
.lp-app-chart{padding:15px 16px;border:1px solid var(--lp-line);border-radius:12px}
.lp-app-chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.lp-app-chart-head b{font-size:.85rem;color:var(--lp-ink)}
.lp-app-chart-head span{font-size:.7rem;color:var(--lp-dim)}
.lp-app-bars{display:flex;align-items:flex-end;gap:5px;height:96px}
.lp-app-bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#6c5cc4,#3d3480)}
.lp-app-bars i:nth-child(12){background:linear-gradient(180deg,#e8cb7d,#c9a24b)}

/* ---------------- Planos ---------------- */
/* subgrid: título, descrição, preço, créditos, lista e botão de cada plano
   ficam alinhados entre as três colunas mesmo com textos de tamanhos
   diferentes — sem altura fixa e sem gambiarra de min-height. */
.lp-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:start}
.lp-price{display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:0;
  position:relative;padding:30px 26px;background:#fff;border:1px solid var(--lp-line);border-radius:20px}
@supports (grid-template-rows:subgrid){
  .lp-prices{grid-template-rows:auto;align-items:stretch}
  .lp-price{grid-row:span 6;grid-template-rows:subgrid}
}
.lp-price h3{font-size:1.2rem}
.lp-price-who{margin-top:6px;font-size:.84rem;line-height:1.5;color:var(--lp-muted)}
.lp-price-val{margin-top:18px;display:flex;align-items:baseline;gap:5px}
.lp-price-val b{font-family:var(--f-head);font-size:2.3rem;font-weight:800;color:var(--lp-ink);letter-spacing:-.03em}
.lp-price-val span{font-size:.88rem;color:var(--lp-dim)}
.lp-price-credits{margin-top:6px;font-size:.82rem;font-weight:600;color:var(--lp-gold)}
.lp-price ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:22px 0;padding-top:20px;border-top:1px solid var(--lp-line)}
.lp-price li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--lp-ink-2)}
.lp-price li i{color:#16a34a;font-size:.72rem}
.lp-price--pop{border-color:transparent;background:#fff;box-shadow:0 30px 60px -34px rgba(37,33,92,.5)}
/* Borda girando no plano em destaque: @property faz o ângulo ser animável
   de verdade (sem ele o conic-gradient não interpola). É UM elemento, e a
   animação para fora da tela (.fora-da-tela, ver pausarDecoracaoForaDaTela). */
@property --lp-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.lp-price--pop::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:0;
  background:conic-gradient(from var(--lp-ang),transparent 0deg,var(--lp-gold-2) 60deg,var(--violet) 140deg,transparent 220deg,transparent 360deg);
  animation:lpGira 6s linear infinite}
.lp-price--pop::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;z-index:0}
.lp-price--pop>*{position:relative;z-index:1}
@keyframes lpGira{to{--lp-ang:360deg}}
.lp-sec.fora-da-tela .lp-price--pop::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lp-price--pop::before{animation:none}}
.lp-price-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:2;
  padding:5px 14px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap;
  background:var(--grad-dark);color:#fff;box-shadow:0 8px 18px -10px rgba(37,33,92,.9)}

/* ---------------- Dúvidas ---------------- */
.lp-faq-wrap{max-width:820px}
.lp-faq{display:flex;flex-direction:column;gap:10px}
.lp-faq-item{border:1px solid var(--lp-line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .2s}
.lp-faq-item.open{border-color:color-mix(in srgb,var(--violet) 30%,var(--lp-line))}
.lp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  padding:17px 20px;font-family:var(--f-head);font-size:.98rem;font-weight:600;color:var(--lp-ink)}
.lp-faq-q i{flex:0 0 auto;font-size:.78rem;color:var(--lp-dim);transition:transform .25s,color .2s}
.lp-faq-item.open .lp-faq-q i{transform:rotate(45deg);color:var(--violet)}
/* grid-template-rows 0fr->1fr: abre na altura real do conteúdo, sem medir
   nada em JS e sem max-height chutado. */
.lp-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1)}
.lp-faq-item.open .lp-faq-a{grid-template-rows:1fr}
.lp-faq-a>p{overflow:hidden;margin:0;padding:0 20px;font-size:.91rem;line-height:1.65;color:var(--lp-muted)}
.lp-faq-item.open .lp-faq-a>p{padding-bottom:19px}

/* ---------------- CTA final ---------------- */
/* O fim da página era um paredão escuro de 761px em DOIS tons diferentes,
   com uma emenda dura entre o bloco (#0d0b22) e o rodapé (#1c1848) — parecia
   defeito. Agora o bloco termina exatamente na cor do rodapé, então os dois
   viram uma peça só, e o respiro vertical encolheu (sobravam 103px de escuro
   vazio embaixo dos botões). */
.lp-cta{position:relative;overflow:hidden;text-align:center;
  padding:clamp(56px,6vw,80px) clamp(18px,4vw,40px) clamp(52px,5.5vw,72px);
  background:linear-gradient(180deg,var(--lp-night) 0%,var(--lp-night) 52%,var(--lp-night-2) 100%)}
.lp-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 80% at 50% 0%,rgba(201,162,75,.22),transparent 65%),radial-gradient(60% 90% at 50% 120%,rgba(94,74,190,.3),transparent 70%)}
.lp-cta>*{position:relative}
#gm-landing .lp-cta h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.12;max-width:760px;margin:0 auto;font-weight:800}
.lp-cta h2 em{font-style:normal;color:var(--lp-gold-2)}
.lp-cta>p{margin:16px auto 30px;font-size:1rem;color:#bdb6d6}
.lp-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------------- Rodapé ---------------- */
.lp-footer{background:var(--lp-night-2);color:#c9c3e0;padding:clamp(40px,4.5vw,58px) clamp(18px,4vw,40px) 26px}
.lp-foot-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);gap:clamp(30px,5vw,60px)}
.lp-foot-brand p{margin-top:16px;font-size:.88rem;line-height:1.65;color:#a49dc2;max-width:330px}
.lp-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* #gm-landing h4 é seletor de ID e vencia `.lp-foot-cols h4` — os títulos
   das colunas saíam com a tinta escura dos títulos do corpo (#0e1024) em
   cima do roxo do rodapé: contraste 1,14. Praticamente invisíveis. */
#gm-landing .lp-foot-cols h4{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.lp-foot-cols a{display:block;padding:5px 0;font-size:.88rem;color:#bdb6d6;transition:color .15s}
.lp-foot-cols a:hover{color:var(--lp-gold-2)}
.lp-foot-copy{max-width:1240px;margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;color:#9e97bd}

/* ---------------- Responsivo ---------------- */
@media (max-width:1080px){
  .lp-cards{grid-template-columns:1fr;gap:28px}
  .lp-hero-in{grid-template-columns:1fr;text-align:center}
  .lp-hero-copy{max-width:660px;margin:0 auto}
  .lp-hero-copy>p{margin-inline:auto}
  .lp-hero-actions,.lp-hero-fine{justify-content:center}
  .lp-painel{grid-template-columns:1fr}
  .lp-painel .lp-head{max-width:none;text-align:center;margin-inline:auto}
  .lp-checks{align-items:center}
}
@media (max-width:900px){
  .lp-links,.lp-nav-cta{display:none}
  .lp-burger{display:grid;place-items:center;margin-left:auto}
  .lp-nav.menu-open .lp-drawer{display:flex}
  .lp-prices{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .lp-price{grid-row:auto;grid-template-rows:none}
  .lp-steps{grid-template-columns:1fr;gap:26px}
  .lp-steps li::after{display:none}
  .lp-app-body{grid-template-columns:1fr}
  .lp-app-side{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--lp-line)}
  .lp-app-side a{white-space:nowrap}
  .lp-foot-in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lp-app-kpis{grid-template-columns:1fr}
  .lp-foot-cols{grid-template-columns:1fr;gap:20px}
}

/* ===================================================================
   Pausa de animação fora da tela (ver pausarDecoracaoForaDaTela em
   gptmaker.js). A landing tinha 25 animações rodando juntas, 18 delas em
   blocos que ninguém estava vendo — medido com a API de animações.
   =================================================================== */
.fora-da-tela,.fora-da-tela *,.fora-da-tela *::before,.fora-da-tela *::after{animation-play-state:paused!important}

/* Telas baixas (ex.: notebook 1366x768): compacta o respiro vertical pra caber sem rolar. */
@media (max-height:820px) and (min-width:1025px){
  .gm-view{padding-top:16px;padding-bottom:16px}
  .pg-head{margin-bottom:14px}
  .dash-hero{padding:16px 22px;margin-bottom:12px}
  .dash-hero-text h2{font-size:1.25rem}
  .dho-steps{margin-top:12px;padding-top:12px}
  .dho-step{padding:9px 12px}
  .dash-stats{margin-bottom:12px}
  .ds-item{padding:12px 18px}
  .ds-val{font-size:1.5rem}
  .ds-item .kpi-spark{height:22px}
  .dash-grid{margin-bottom:0}
  .dash-grid .card-head{padding:12px 16px}
  .dash-grid .chart-body{padding:12px 16px}
  .dash-grid .bars{height:136px;padding-top:16px}
  .dash-grid .toplist{padding:4px 6px 6px}
  .dash-grid .toplist li{padding:4px 10px}
  .dash-vazio{padding:18px 16px}
  .plan-foot{margin-top:12px;padding:9px 14px}
  .perf-hero{padding:16px 20px;margin-bottom:12px}
  .perf-av{width:68px;height:68px;font-size:1.3rem}
  .perf-grid .card-head{padding:12px 16px}
  .perf-grid .card-pad{padding:14px 16px}
  .perf-campos{gap:12px}
  .card-foot{padding:10px 16px}
}

/* ===================================================================
   DOCUMENTOS (#/termos e #/privacidade)
   Página de leitura: coluna estreita, tipografia grande e um índice
   grudento ao lado. São textos que alguém abre pra achar UM parágrafo,
   não pra ler do começo ao fim.
   ===================================================================== */
#gm-legal{min-height:100dvh;background:var(--bg);color:var(--ink-2)}
.lg-topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(18px,4vw,40px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.lg-topo .lp-brand-name{color:var(--ink);font-size:1.02rem}
.lg-topo .lp-brand-name b{color:var(--violet)}
.lg-voltar{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted)}
.lg-voltar:hover{color:var(--violet)}
.lg-doc{max-width:1000px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(18px,4vw,40px) 80px}
.lg-head{max-width:680px;margin-bottom:clamp(30px,4vw,48px)}
.lg-head h1{font-family:var(--f-head);font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:10px 0 14px;text-wrap:balance}
.lg-head>p{font-size:1.02rem;line-height:1.65;color:var(--muted);text-wrap:pretty}
.lg-data{margin-top:14px;font-size:.8rem;color:var(--dim)}
.lg-corpo{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
.lg-indice{position:sticky;top:90px;font-size:.84rem}
.lg-indice b{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.lg-indice ol{list-style:none;counter-reset:lgi;display:flex;flex-direction:column;gap:2px}
.lg-indice a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);line-height:1.4;transition:color .15s,background .15s}
.lg-indice a:hover{color:var(--violet);background:var(--violet-softer)}
.lg-texto{max-width:660px}
/* scroll-margin: com o topo grudento, clicar no índice deixava o título
   escondido atrás da barra. */
.lg-sec{scroll-margin-top:96px}
.lg-sec+.lg-sec{margin-top:34px}
.lg-sec h2{display:flex;align-items:baseline;gap:11px;font-family:var(--f-head);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.lg-sec h2 span{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--gold-dim)}
.lg-sec p{font-size:.95rem;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.lg-sec p+p{margin-top:12px}
.lg-outro{max-width:660px;margin:44px 0 0 auto;padding-top:22px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.lg-outro a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:860px){
  .lg-corpo{grid-template-columns:1fr}
  .lg-indice{position:static;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .lg-indice ol{flex-direction:row;flex-wrap:wrap;gap:4px}
  .lg-indice a{padding:5px 10px;background:var(--surface-2);border-radius:999px;font-size:.78rem}
  .lg-outro{margin-left:0}
}

/* ===================================================================
   LANDING — MOVIMENTO AO ROLAR (scroll-driven animations)
   Camada aditiva: TUDO aqui vive dentro de @supports. Onde
   `animation-timeline` não existe (Safari e Firefox hoje), a página fica
   exatamente como está acima — o reveal do IntersectionObserver continua
   sendo o comportamento base, não um remendo.

   Por que scroll-driven e não JS: a animação é amarrada à POSIÇÃO da
   rolagem, não a um gatilho de "entrou na tela". Rolar pra cima desfaz,
   rolar devagar mostra o meio do caminho, e nada disso passa pela thread
   principal — quem interpola é o compositor.
   ===================================================================== */
@supports (animation-timeline: view()) and (animation-range: entry 10%){

  /* --- barra de leitura no topo --- */
  /* FORA do prefers-reduced-motion de propósito: isto não é enfeite, é o
     indicador de quanto falta da página, e o `cssRolagem` do initLanding já
     tirou o JS daqui. Quando esta regra estava dentro do bloco de
     movimento, quem pedia "reduzir movimento" ficava com a barra travada
     em zero pra sempre. */
  .lp-progress i{
    width:100%;transform-origin:0 50%;transition:none;
    animation:lpProgresso linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes lpProgresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  @media (prefers-reduced-motion: no-preference){

    /* O reveal por JS sai de cena: sem isto os dois brigariam pelo mesmo
       opacity/transform e o elemento piscaria. */
    #gm-landing .reveal{opacity:1;transform:none;transition:none}

    /* --- entrada em blocos --- */
    /* Cada filho direto entra na sua vez. O escalonamento vem de deslocar
       o RANGE de cada um (delay não existe em timeline de rolagem). */
    #gm-landing .reveal > *{
      animation:lpSobe linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    #gm-landing .reveal > *:nth-child(2){animation-range:entry 8% cover 30%}
    #gm-landing .reveal > *:nth-child(3){animation-range:entry 12% cover 34%}
    #gm-landing .reveal > *:nth-child(4){animation-range:entry 16% cover 38%}
    #gm-landing .reveal > *:nth-child(5){animation-range:entry 20% cover 42%}
    #gm-landing .reveal > *:nth-child(6){animation-range:entry 24% cover 46%}
    @keyframes lpSobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

    /* --- hero: o fundo anda mais devagar que o conteúdo --- */
    .lp-hero-bg{
      animation:lpParalaxe linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes lpParalaxe{from{transform:translateY(-4%) scale(1.06)}to{transform:translateY(6%) scale(1.06)}}

    /* --- o painel se monta peça por peça --- */
    .lp-app{perspective:1200px}
    #gm-landing .lp-app-bar,
    .lp-app-side a,
    .lp-app-kpis > div,
    .lp-app-chart{
      animation:lpMonta linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 40%;
    }
    @keyframes lpMonta{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
    /* o menu lateral acende de cima pra baixo */
    .lp-app-side a:nth-child(1){animation-range:entry 14% cover 34%}
    .lp-app-side a:nth-child(2){animation-range:entry 16% cover 36%}
    .lp-app-side a:nth-child(3){animation-range:entry 18% cover 38%}
    .lp-app-side a:nth-child(4){animation-range:entry 20% cover 40%}
    .lp-app-side a:nth-child(5){animation-range:entry 22% cover 42%}
    .lp-app-side a:nth-child(6){animation-range:entry 24% cover 44%}
    .lp-app-kpis > div:nth-child(1){animation-range:entry 22% cover 44%}
    .lp-app-kpis > div:nth-child(2){animation-range:entry 25% cover 47%}
    .lp-app-kpis > div:nth-child(3){animation-range:entry 28% cover 50%}
    .lp-app-chart{animation-range:entry 30% cover 52%}

    /* --- as barras do gráfico crescem do chão --- */
    .lp-app-bars i{
      transform-origin:50% 100%;
      animation:lpBarra linear both;
      animation-timeline:view();
    }
    @keyframes lpBarra{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .lp-app-bars i:nth-child(1){animation-range:entry 34% cover 50%}
    .lp-app-bars i:nth-child(2){animation-range:entry 35% cover 51%}
    .lp-app-bars i:nth-child(3){animation-range:entry 36% cover 52%}
    .lp-app-bars i:nth-child(4){animation-range:entry 37% cover 53%}
    .lp-app-bars i:nth-child(5){animation-range:entry 38% cover 54%}
    .lp-app-bars i:nth-child(6){animation-range:entry 39% cover 55%}
    .lp-app-bars i:nth-child(7){animation-range:entry 40% cover 56%}
    .lp-app-bars i:nth-child(8){animation-range:entry 41% cover 57%}
    .lp-app-bars i:nth-child(9){animation-range:entry 42% cover 58%}
    .lp-app-bars i:nth-child(10){animation-range:entry 43% cover 59%}
    .lp-app-bars i:nth-child(11){animation-range:entry 44% cover 60%}
    .lp-app-bars i:nth-child(12){animation-range:entry 45% cover 61%}
    .lp-app-bars i:nth-child(13){animation-range:entry 46% cover 62%}
    .lp-app-bars i:nth-child(14){animation-range:entry 47% cover 63%}

    /* --- os números contam --- */
    /* @property registra --n como <integer>, e é só por causa disso que o
       navegador sabe interpolar de 0 até o alvo. Um counter lê esse número
       e o ::after imprime. Sem JS, sem requestAnimationFrame. */
    .lp-num{position:relative;color:transparent}
    .lp-num::after{
      content:counter(lpn);counter-reset:lpn var(--n);
      position:absolute;inset:0;color:var(--lp-ink);
      animation:lpConta linear both;
      animation-timeline:view();
      animation-range:entry 24% cover 48%;
    }
    @keyframes lpConta{from{--n:0}to{--n:var(--alvo)}}

    /* --- passos: a linha que liga um ao outro se desenha --- */
    .lp-steps li::after{
      transform-origin:0 50%;
      animation:lpLinha linear both;
      animation-timeline:view();
      animation-range:entry 20% cover 45%;
    }
    @keyframes lpLinha{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* --- CTA final: o brilho abre conforme a seção sobe --- */
    .lp-cta::before{
      animation:lpBrilho linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 60%;
    }
    @keyframes lpBrilho{from{opacity:.25;transform:scale(1.15)}to{opacity:1;transform:none}}

    /* --- os cartões entram deitados e se levantam --- */
    /* Precisa vir DEPOIS da regra genérica `.reveal > *`: mesma
       especificidade, ganha a última. */
    #gm-landing .lp-cards>*,#gm-landing .lp-card--linha{animation-name:lpLevanta;transform-origin:50% 100%}
    #gm-landing .lp-card--linha:nth-child(2){animation-range:entry 10% cover 32%}
    #gm-landing .lp-card--linha:nth-child(3){animation-range:entry 14% cover 36%}
    /* translate/rotate (propriedades independentes) em vez de transform:
       o `transform` do cartão é da inclinação pelo mouse, e com fill:both
       um `transform:none` no fim do keyframe ficaria grudado e mataria a
       inclinação pra sempre. Assim os dois se compõem. */
    @keyframes lpLevanta{from{opacity:0;translate:0 30px;rotate:x 12deg}to{opacity:1;translate:0 0;rotate:x 0deg}}

    /* --- a bolinha do passo gira e assenta --- */
    #gm-landing .lp-step-n{
      animation:lpSelo linear both;
      animation-timeline:view();
      animation-range:entry 16% cover 38%;
    }
    @keyframes lpSelo{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}

    /* --- sublinhado dourado se desenhando sob a palavra em destaque --- */
    /* Só no desktop: em telas estreitas o <em> quebra em duas linhas e o
       traço (que mede a caixa inline inteira) sairia torto. */
    @media (min-width:900px){
      #gm-landing .lp-head h2 em{position:relative}
      #gm-landing .lp-head h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:3px;border-radius:2px;
        background:linear-gradient(90deg,var(--lp-gold-2),var(--lp-gold));transform-origin:0 50%;
        animation:lpSublinha linear both;
        animation-timeline:view();
        animation-range:entry 22% cover 44%;
      }
      @keyframes lpSublinha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    }
  }
}
@property --n{syntax:"<integer>";initial-value:0;inherits:false}

/* ===================================================================
   GSAP NO COMANDO — o que o CSS solta
   ===================================================================
   `data-gsap` é posto por initLandingCinema quando a lib carrega de fato.
   Tudo aqui é elemento que passa a ter DOIS donos do mesmo transform: o
   scroll-driven do CSS e o ScrollTrigger. Dois donos na mesma propriedade
   dá tremida, então o CSS cede — mas só o que o GSAP realmente assume.
   A entrada dos blocos das outras seções e a barra de leitura continuam em
   CSS, porque ali o compositor faz melhor e de graça.
   =================================================================== */
html[data-gsap] .lp-hero-bg{animation:none}
html[data-gsap] #gm-landing .lp-app-bar,
html[data-gsap] .lp-app-side a,
html[data-gsap] .lp-app-kpis > div,
html[data-gsap] .lp-app-chart,
html[data-gsap] .lp-app-bars i{animation:none}
/* Dentro da seção presa o view() congela (o elemento para de andar na
   tela), então quem revela o texto de lá é o GSAP. */
html[data-gsap] #painel .reveal > *{animation:none;opacity:1;transform:none}
/* O contador em CSS sai: quem conta agora é o tween, escrevendo no
   textContent. Sem isto o número ficaria transparente com o ::after por
   cima travado em zero. */
html[data-gsap] .lp-num{color:inherit}
html[data-gsap] .lp-num::after{content:none;animation:none}


/* ---- régua que fecha o hero ----
   Dá PÉ à composição: sem ela o hero terminava no ar, com um vão morto
   abaixo dos botões. Vai de ponta a ponta de propósito — é o contraste
   entre ela (largura total) e o conteúdo (coluna) que faz a cena parecer
   desenhada em vez de empilhada. */
.lp-hero-regua{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  width:100%;max-width:1240px;margin:clamp(34px,4vh,56px) auto 0;padding:18px clamp(18px,4vw,40px) 22px;
  border-top:1px solid rgba(255,255,255,.09)}
/* Status de canal, não lista de canais. O WhatsApp aparece aceso (é o único
   que conecta hoje) e os demais apagados com "em breve": mostra que a
   plataforma é multicanal sem prometer o que ainda não existe — regra do
   dono do produto, e a que evita cliente assinar esperando o Instagram. */
.lp-hero-canais{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.lp-hero-canais b{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#e9e4f7}
.lp-canal-on{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.lp-hero-canais span{color:#6f6893}
@media (max-width:760px){
  .lp-hero-regua{justify-content:center;text-align:center;margin-top:34px}
  .lp-hero-canais{width:100%}
}
/* Entra junto com o resto da abertura (ver montarAberturaHero). */
html[data-cinema] #gm-landing .lp-hero-regua{opacity:0}
/* ===================================================================
   ROLAGEM CINEMATOGRÁFICA (GSAP, desktop com movimento liberado)
   ===================================================================
   `data-gsap-rolagem` só existe enquanto o bloco de desktop do
   gsap.matchMedia está ativo (ver initLandingCinema). No celular e para quem
   pede menos movimento, NADA daqui vale e a página segue com a entrada em
   CSS de antes — que continua sendo a versão base, não um remendo.
   =================================================================== */

/* O GSAP assume a entrada destas seções; a animação em CSS sai de cena pra
   não haver dois donos do mesmo transform. Os contêineres .reveal ficam
   visíveis — quem esconde e revela agora são os tweens. Sem !important de
   propósito: os estilos inline do GSAP precisam continuar vencendo. */
html[data-gsap-rolagem] #gm-landing .reveal{opacity:1;transform:none;transition:none}
html[data-gsap-rolagem] #gm-landing .reveal > *,
html[data-gsap-rolagem] #gm-landing .lp-card--linha,
html[data-gsap-rolagem] #gm-landing .lp-step-n{animation:none}

/* ---- cortina ----
   O hero fica preso atrás e a primeira seção sobe por cima dele. Ela precisa
   de fundo próprio (as seções herdavam o branco do #gm-landing, e com o
   hero preso atrás elas seriam transparentes) e de estar numa camada acima. */
.lp-hero-veu{position:absolute;inset:0;z-index:3;background:#05040c;opacity:0;pointer-events:none}
html[data-gsap-rolagem] .lp-hero{z-index:0}
html[data-gsap-rolagem] #gm-landing .lp-sec,
html[data-gsap-rolagem] #gm-landing .lp-cta,
html[data-gsap-rolagem] #gm-landing .lp-footer{position:relative;z-index:1}
/* A folha: cantos de cima arredondados e uma sombra projetada PRA CIMA, que
   é o que faz ler como camada chegando por cima e não como emenda. */
html[data-gsap-rolagem] #recursos{background:var(--lp-bg);border-radius:34px 34px 0 0;
  box-shadow:0 -34px 70px -28px rgba(0,0,0,.6)}
/* O miolo do hero recua a partir do centro enquanto é coberto. */
html[data-gsap-rolagem] #lpHero .lp-hero-in{transform-origin:50% 40%}

/* ---- como funciona: a linha que se desenha ----
   ::before é o trilho cinza (sempre visível), ::after é o preenchimento
   dourado — o GSAP anima --fill de 0 a 1 em cada passo. scaleX em vez de
   width: um é composto pela GPU, o outro recalcula layout a cada quadro. */
html[data-gsap-rolagem] .lp-steps li::before{content:"";position:absolute;top:21px;left:56px;right:-20px;height:2px;
  border-radius:2px;background:var(--lp-line)}
html[data-gsap-rolagem] .lp-steps li:last-child::before{display:none}
html[data-gsap-rolagem] .lp-steps li::after{top:21px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--lp-gold),var(--lp-gold-2));
  transform-origin:0 50%;transform:scaleX(var(--fill,0));animation:none}
/* Passo apagado até a linha chegar nele; ao acender, o selo vira ouro. As
   transições aqui são do ESTADO (classe .ativo), não do tween — por isso
   podem ter duração própria sem brigar com o GSAP. */
html[data-gsap-rolagem] .lp-steps > li{transition:opacity .45s var(--ease)}
html[data-gsap-rolagem] .lp-steps > li:not(.ativo){opacity:.38}
html[data-gsap-rolagem] .lp-steps .lp-step-n{transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
html[data-gsap-rolagem] .lp-steps > li.ativo .lp-step-n{background:var(--grad-gold);color:#25215c;transform:scale(1.07);
  box-shadow:0 0 0 6px rgba(201,162,75,.15),0 14px 28px -12px rgba(201,162,75,.75)}

/* ===================================================================
   PARA QUEM É — a faixa escura no meio da página
   ===================================================================
   É a única seção escura depois do hero, e isso é o ponto: a página vinha
   clara desde a cortina, e aqui muda de clima exatamente onde a pessoa se
   reconhece ("isso é pra mim"). Os nomes dos segmentos usam a mesma Playfair
   itálica da manchete — amarra os dois momentos escuros como uma família.
   Sem cards: quatro colunas separadas por fio, como um índice. */
#gm-landing .lp-publico-sec{position:relative;overflow:hidden;color:#cfc9e6;
  background:
    radial-gradient(46% 70% at 88% 0%,rgba(214,166,74,.16),transparent 70%),
    radial-gradient(40% 60% at 0% 100%,rgba(76,58,168,.26),transparent 72%),
    linear-gradient(175deg,#0c0a1e,#080714)}
#gm-landing .lp-publico-sec h2{color:#fff}
#gm-landing .lp-publico-sec .lp-head h2 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  letter-spacing:-.01em;color:var(--lp-gold-vivo)}
#gm-landing .lp-publico-sec .lp-head>p{color:#aaa3c8}
#gm-landing .lp-publico-sec .lp-tag{color:#9a93bb}

.lp-publico{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.1)}
.lp-publico li{display:flex;flex-direction:column;gap:12px;padding:30px 26px 6px 0}
.lp-publico li+li{padding-left:26px;border-left:1px solid rgba(255,255,255,.1)}
.lp-publico b{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15;color:#fff;letter-spacing:-.01em}
.lp-publico span{font-size:.92rem;line-height:1.6;color:#a39cc2}
/* O fio de cima de cada coluna acende em dourado no hover — mostra que a
   coluna é uma unidade sem precisar de caixa em volta. */
.lp-publico li{position:relative}
.lp-publico li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--lp-gold-vivo);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-slow) var(--ease)}
.lp-publico li+li::before{left:26px}
.lp-publico li:hover::before{transform:scaleX(1)}
@media (max-width:980px){
  .lp-publico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-publico li:nth-child(3){padding-left:0;border-left:none}
  .lp-publico li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}
@media (max-width:600px){
  .lp-publico{grid-template-columns:1fr}
  .lp-publico li,.lp-publico li+li{padding:24px 0 4px;border-left:none}
  .lp-publico li+li{border-top:1px solid rgba(255,255,255,.1)}
  .lp-publico li+li::before{left:0}
}

/* ===================================================================
   FICHA DO CONTATO (#/contato) — o CRM
   ===================================================================
   Três blocos: identidade em cima, e embaixo os dados de negócio, as
   anotações e a conversa. As anotações ficam ao lado da conversa de
   propósito: quem anota está lendo o que foi dito.
   =================================================================== */
.ficha{display:flex;flex-direction:column;gap:var(--sp-4)}
.fi-topo{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5)}
.fi-av{width:58px;height:58px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  font-family:var(--f-head);font-weight:700;font-size:var(--fs-h3);color:#fff}
.fi-av img{width:100%;height:100%;object-fit:cover}
.fi-id{flex:1;min-width:0}
.fi-id h2{font-size:var(--fs-h3);margin-bottom:3px}
.fi-id p{font-size:var(--fs-small);color:var(--muted)}
.fi-acoes{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fi-acoes .select{width:auto;min-width:150px;height:38px}

/* Duas faixas, não quatro caixas soltas: em cima Dados | Anotações |
   Tarefas com a MESMA altura (align-items:stretch), embaixo a conversa
   ocupando a largura toda. Com pouco conteúdo, altura desigual lia como
   tela quebrada; alinhada, o vazio lê como respiro. */
.fi-grid{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-4);align-items:stretch}
.fi-grid>.card{display:flex;flex-direction:column}
/* A lista é quem absorve a sobra de altura da faixa — min-height:0 pra ela
   continuar rolando por dentro em vez de esticar o cartão. */
.fi-grid .fi-lista{flex:1 1 auto;min-height:0}
.fi-dados{display:flex;flex-direction:column;gap:var(--sp-4)}
/* Salvar ancorado no rodapé do cartão: sem isso ele flutuava no meio do
   vazio quando a faixa era esticada por um vizinho mais alto. */
.fi-dados #fiSalvar{margin-top:auto}
.fi-campo{display:flex;flex-direction:column;gap:6px}
.fi-rot{font-size:var(--fs-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

.fi-lista{list-style:none;display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.fi-tars{max-height:none}
.fi-lista li{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line)}
.fi-nota-topo{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:5px}
.fi-nota-topo b{font-size:var(--fs-small);font-weight:650;color:var(--ink)}
.fi-nota-topo time{font-size:var(--fs-caption);color:var(--dim)}
/* O apagar só aparece com o ponteiro na anotação: presente quando precisa,
   fora do caminho na leitura. Volta a aparecer no foco por teclado. */
.fi-nota-topo .icnbtn{margin-left:auto;opacity:0;transition:opacity var(--dur) var(--ease)}
.fi-lista li:hover .icnbtn,.fi-nota-topo .icnbtn:focus-visible{opacity:1}
.fi-lista p{font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink-2);white-space:pre-wrap}
.fi-vazio{padding:var(--sp-2) 0;font-size:var(--fs-small);color:var(--dim);line-height:1.55}
.fi-lista .fi-vazio{padding:var(--sp-4) var(--sp-5)}


/* Tarefas na faixa de cima: é a única coisa desta tela que pede ação,
   então não pode nascer abaixo da dobra. A conversa desce — ela é
   consulta, não tarefa. */
.fi-dados{grid-column:1;grid-row:1}
.fi-notas{grid-column:2;grid-row:1}
.fi-tarefas{grid-column:3;grid-row:1}
.fi-conversa{grid-column:1/-1;grid-row:2}
/* A conversa ocupa a faixa inteira, mas a LEITURA fica numa coluna: com
   os balões colados nas duas beiradas de 1100px, a conversa deixa de
   parecer uma conversa e vira duas colunas de texto sem relação. */
.fi-conversa .fi-msgs{width:100%;max-width:780px;margin:0 auto}
.fi-conversa .fi-msg{max-width:min(88%,520px)}
.fi-conversa .card-pad .fi-vazio{text-align:center;padding:var(--sp-4) 0}

.fi-tar-nova{display:flex;flex-direction:column;gap:var(--sp-2)}
.fi-tar-linha{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* 132px é o mínimo pra "19/09/2026" mais o ícone do calendário caberem.
   Abaixo disso os dois campos empilham em vez de cortar a data. */
.fi-tar-linha .input,.fi-tar-linha .select{min-width:0;flex:1 1 132px;height:36px;font-size:var(--fs-small)}
.fi-tar{display:flex;align-items:flex-start;gap:var(--sp-2)}
/* Alvo de 26px: menor que isso e marcar uma tarefa no celular vira sorte. */
.fi-tar-ok{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line-2);background:transparent;color:transparent;font-size:11px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.fi-tar-ok:hover{border-color:var(--ok);color:color-mix(in srgb,var(--ok) 55%,transparent)}
.fi-tar-txt{flex:1;min-width:0}
.fi-tar-txt p{font-size:var(--fs-body-sm);line-height:1.45;color:var(--ink);word-break:break-word}
.fi-tar-prazo{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--dim)}
.fi-tar .icnbtn{margin-left:0;opacity:0;transition:opacity var(--dur) var(--ease)}
.fi-tar:hover .icnbtn,.fi-tar .icnbtn:focus-visible{opacity:1}

/* O atraso é a única coisa nesta lista que precisa gritar. */
.fi-tar.atrasada .fi-tar-prazo{color:var(--danger-texto);font-weight:600}
.fi-tar.atrasada .fi-tar-ok{border-color:color-mix(in srgb,var(--danger) 55%,var(--line-2))}
.fi-tar.hoje .fi-tar-prazo{color:var(--warn-texto);font-weight:600}
.fi-tar.concluida .fi-tar-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.fi-tar.concluida .fi-tar-txt p{text-decoration:line-through;color:var(--dim)}

.chip-alerta{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger-texto)}

.fi-msgs{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);max-height:460px;overflow-y:auto}
.fi-msg{max-width:88%;padding:9px 12px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line)}
.fi-msg.deles{align-self:flex-start;border-bottom-left-radius:4px}
.fi-msg.nossa{align-self:flex-end;background:var(--violet-softer);border-color:var(--violet-soft);border-bottom-right-radius:4px}
.fi-msg p{font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink);white-space:pre-wrap}
.fi-msg time{display:block;margin-top:4px;font-size:var(--fs-caption);color:var(--dim)}

/* Nome clicável na tabela de contatos */
.cell-link{cursor:pointer;transition:color var(--dur) var(--ease)}
.cell-link:hover b{color:var(--violet)}
/* Atalho pra ficha no cartão do funil */
.kb-ficha{margin-left:auto;width:26px;height:26px;flex:0 0 auto;border-radius:var(--radius-xs);display:grid;place-items:center;
  color:var(--dim);font-size:var(--fs-caption);opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease)}
.kb-card:hover .kb-ficha,.kb-ficha:focus-visible{opacity:1}
.kb-ficha:hover{background:var(--violet-soft);color:var(--violet)}
.kb-valor{font-weight:700;color:var(--ok-texto)}

@media (max-width:1200px){
  .fi-grid{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .fi-dados{grid-column:1;grid-row:1}
  .fi-tarefas{grid-column:1;grid-row:2}
  .fi-notas{grid-column:2;grid-row:1/span 2}
  .fi-conversa{grid-column:1/-1;grid-row:3}
}
@media (max-width:820px){
  .fi-grid{grid-template-columns:1fr}
  /* Uma coluna: a ordem volta a ser a do HTML, senão as linhas fixas
     deixariam buraco entre os cartões. */
  .fi-dados,.fi-tarefas,.fi-notas,.fi-conversa{grid-column:auto;grid-row:auto}
  .fi-topo{flex-wrap:wrap}
  .fi-acoes{width:100%}
  .fi-acoes .select{flex:1}
}

/* ---------------- Servidores MCP ---------------- */
.mcp-aviso{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--info-soft);color:var(--ink-2);font-size:var(--fs-small);line-height:1.5}
.mcp-card+.mcp-card{margin-top:var(--sp-3)}
.mcp-meta{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--muted)}
.mcp-meta code{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--ink-2);word-break:break-all}
.mcp-erro{display:flex;align-items:flex-start;gap:8px;margin-top:4px;color:var(--danger);font-size:var(--fs-small);line-height:1.5}
.mcp-tools{list-style:none;display:flex;flex-direction:column}
.mcp-tools li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-4);align-items:center;
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line)}
/* Ferramenta liberada ganha um fio dourado à esquerda: dá pra varrer a lista
   e ver o que o agente pode fazer sem ler caixa por caixa. */
.mcp-tools li.on{box-shadow:inset 3px 0 0 var(--violet)}
.mcp-tool-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.mcp-tool-id b{font-size:var(--fs-body-sm);font-weight:650;color:var(--ink)}
.mcp-tool-id code{font-family:var(--f-mono);font-size:var(--fs-caption);color:var(--dim)}
.mcp-tool-id span{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.mcp-chk{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.mcp-chk input{accent-color:var(--violet);width:16px;height:16px}
/* "Pedir confirmação" só faz sentido se a ferramenta estiver liberada. */
.mcp-chk.mudo{opacity:.4;cursor:default}
@media (max-width:760px){
  .mcp-tools li{grid-template-columns:1fr;gap:var(--sp-2)}
}

/* Rótulo com ação do lado (ex.: "Base de conhecimento" + Importar do site) */
.lbl-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:6px;flex-wrap:wrap}
.lbl-linha label{margin:0}

/* KPIs: com o cartão de autonomia são 5 — auto-fit em vez de 4 fixas, pra
   caber em qualquer largura sem quebrar feio. */
.dash-stats{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
/* Saída do beco sem saída do QR: alternativas de agente dentro do erro */
/* A caixa de erro e um flex row (icone + texto). O bloco de alternativas
   entrava como mais um item e espremia a mensagem numa coluna estreita:
   basis 100% joga ele pra linha de baixo, ocupando a largura inteira. */
.au-err:has(.wa-qr-alt){flex-wrap:wrap;align-items:flex-start}
.au-err:has(.wa-qr-alt)::before{line-height:1.5}
.wa-qr-alt{flex:1 0 100%;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.wa-qr-alt span{font-size:var(--fs-small);color:var(--muted)}

/* ===================================================================
   LANDING — acabamento editorial (2026-09-25)
   Mora no FIM do arquivo de propósito: as camadas de movimento acima
   (sublinhado que se desenha, passo ativo dourado) têm a mesma
   especificidade e venceriam por ordem.
   ---------------------------------------------------------------
   Pedido: "top, mas sem parecer feito por IA, como empresa profissional".
   O que entregava a cara de template foi tirado, não escondido atrás de
   mais enfeite: sublinhado dourado sob a palavra de destaque em todo
   título, título em duas cores, etiqueta "01 —— SEÇÃO" em fonte de
   máquina, quadradinhos 3D nos passos, bolinha verde de ✓ em toda lista,
   botão com degradê + brilho + reflexo, borda girando no plano destaque e
   caixas com sombra nas dúvidas.
   No lugar: papel quente em vez de branco de app, fios finos separando o
   que antes era caixa, a serifada só no destaque (em itálico, na mesma
   tinta do título) e cor usada com parcimônia — o dourado aparece no
   botão principal e em quase mais nada. O hero e o celular não mudam. */
#gm-landing{
  --ed-paper:#f7f4ee; --ed-paper-2:#f0ebe1; --ed-rule:#e0d8c8; --ed-rule-forte:#c9bfa9;
  --ed-ink:#15132b; --ed-ink-2:#3a364c; --ed-muted:#625d55; --ed-ouro-texto:#7d6124;
  --lp-bg:var(--ed-paper); --lp-tint:var(--ed-paper-2); --lp-line:var(--ed-rule);
  --lp-ink:var(--ed-ink); --lp-ink-2:var(--ed-ink-2); --lp-muted:var(--ed-muted); --lp-dim:var(--ed-muted);
}

/* Botões: sólidos, canto discreto, sem sombra colorida nem reflexo. */
#gm-landing .lp-btn-gold{background:#c9a24b;color:#15132b;border-color:#c9a24b;border-radius:6px;box-shadow:none;font-weight:600}
#gm-landing .lp-btn-gold:hover{background:#d8b35c;border-color:#d8b35c;transform:none;box-shadow:none;filter:none}
#gm-landing .lp-btn-gold::after{display:none}
#gm-landing .lp-btn-glass,#gm-landing .lp-btn-quiet{border-radius:6px;background:transparent}
#gm-landing .lp-btn-glass:hover,#gm-landing .lp-btn-quiet:hover{background:rgba(255,255,255,.07)}
#gm-landing .lp-btn-line{border-radius:6px;background:transparent;border-color:var(--ed-rule-forte);color:var(--ed-ink);font-weight:600}
#gm-landing .lp-btn-line:hover{border-color:var(--ed-ink);color:var(--ed-ink);background:transparent}

/* Barra de navegação sobre o papel: fio fino, sem sombra. */
#gm-landing .lp-nav.scrolled,#gm-landing .lp-nav.menu-open{background:var(--ed-paper);border-bottom-color:var(--ed-rule);box-shadow:none}
#gm-landing .lp-nav.scrolled .lp-links a:hover,#gm-landing .lp-nav.menu-open .lp-links a:hover{color:var(--ed-ink);background:transparent}
#gm-landing .lp-drawer{background:var(--ed-paper)}
#gm-landing .lp-progress i{background:#c9a24b}

/* Seções: um papel só, divididas por fio — não por faixa de cor. */
#gm-landing .lp-sec:not(.lp-publico-sec){background:var(--ed-paper)}
#gm-landing .lp-sec:not(.lp-publico-sec)+.lp-sec:not(.lp-publico-sec){border-top:1px solid var(--ed-rule)}
#gm-landing .lp-sec--tint{background:var(--ed-paper);border-block:none;border-top:1px solid var(--ed-rule)}

/* Rubrica da seção: texto baixo e calmo, sem número nem traço. */
#gm-landing .lp-tag{gap:0;font-size:.74rem;font-weight:600;letter-spacing:.08em;color:var(--ed-ouro-texto)}
#gm-landing .lp-tag i{display:none}

/* Títulos: uma tinta só. O destaque é a serifada em itálico, não uma cor
   nova com sublinhado desenhado embaixo. */
#gm-landing .lp-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--ed-ink)}
#gm-landing .lp-head h2 em{font-family:var(--f-serif,'Playfair Display',Georgia,serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--ed-ink);
  background:none;-webkit-text-fill-color:currentColor;text-decoration:none}
#gm-landing .lp-head h2 em::after,#gm-landing .lp-head h2 em::before{display:none;content:none}
#gm-landing .lp-head>p{color:var(--ed-muted);max-width:56ch}
#gm-landing .lp-head--center>p{margin-inline:auto}

/* O que ele faz: o bloco principal deixa de ser caixa e vira coluna. */
#gm-landing .lp-card{background:transparent;border:none;border-radius:0;box-shadow:none}
#gm-landing .lp-card:hover{box-shadow:none;border-color:transparent;transform:none}
#gm-landing .lp-card--lead{padding:0 clamp(0px,3vw,40px) 0 0;border-right:1px solid var(--ed-rule)}
#gm-landing .lp-card--lead::after{display:none}
#gm-landing .lp-card--lead h3{font-size:1.5rem;letter-spacing:-.02em}
#gm-landing .lp-card-n{font-family:var(--f-head);font-size:.78rem;font-weight:600;letter-spacing:0;color:var(--ed-ouro-texto)}
#gm-landing .lp-cards .lp-card--linha{border-top-color:var(--ed-rule)}
#gm-landing .lp-cards .lp-card--linha:hover h3{color:var(--ed-ink)}
#gm-landing .lp-prova{border-top:1px solid var(--ed-rule);margin-top:26px}
#gm-landing .lp-prova-topo,#gm-landing .lp-prova-linha b{font-family:var(--f-head);letter-spacing:.04em}
#gm-landing .lp-prova-linha.ia b{color:var(--ed-ouro-texto)}
#gm-landing .lp-tambem{font-family:var(--f-head);text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--ed-muted);border-top-color:var(--ed-rule)}
#gm-landing .lp-tambem span{color:var(--ed-rule-forte)}

/* Passos: número em serifada, fio fino ligando — sem ícone 3D. */
#gm-landing .lp-step-n{width:auto;height:auto;margin-bottom:14px;border-radius:0;background:none;box-shadow:none;
  display:block;font-family:var(--f-serif,'Playfair Display',Georgia,serif);font-style:italic;font-weight:500;font-size:2.4rem;line-height:1;color:var(--ed-ink)}
#gm-landing .lp-step-n::before,#gm-landing .lp-step-n::after{display:none}
#gm-landing .lp-steps li::after{top:20px;left:48px;background:var(--ed-rule)}
#gm-landing .lp-steps li,#gm-landing .lp-steps li *{opacity:1}
#gm-landing .lp-steps h3{font-size:1.1rem}

/* Painel: lista com travessão; mockup sem os três pontinhos de janela. */
#gm-landing .lp-checks{gap:0;margin-top:26px;border-top:1px solid var(--ed-rule)}
#gm-landing .lp-checks li{padding:11px 0;border-bottom:1px solid var(--ed-rule);color:var(--ed-ink-2);opacity:1}
#gm-landing .lp-checks i{display:none}
#gm-landing .lp-app{border-radius:8px;border-color:var(--ed-rule);box-shadow:0 30px 60px -45px rgba(21,19,43,.45)}
#gm-landing .lp-app-bar i{display:none}
#gm-landing .lp-app-bar span{margin-left:0}
#gm-landing .lp-app-side a{border-radius:4px}
#gm-landing .lp-app-kpis div,#gm-landing .lp-app-chart{border-radius:6px}

/* Planos: três colunas lado a lado, separadas por fio. Sem sombra, sem
   borda girando; o destaque é o fundo escuro, que já diz "este". */
#gm-landing .lp-prices{gap:0;border:1px solid var(--ed-rule);border-radius:8px;overflow:hidden}
#gm-landing .lp-price{background:transparent;border:none;border-radius:0;padding:34px 30px}
#gm-landing .lp-price+.lp-price{border-left:1px solid var(--ed-rule)}
#gm-landing .lp-price--pop{background:var(--ed-ink);box-shadow:none}
#gm-landing .lp-price--pop::before{display:none;animation:none}
#gm-landing .lp-price--pop::after{display:none}
#gm-landing .lp-price--pop h3,#gm-landing .lp-price--pop .lp-price-val b{color:#fff}
#gm-landing .lp-price--pop .lp-price-who,#gm-landing .lp-price--pop .lp-price-val span,#gm-landing .lp-price--pop li{color:#c9c4d8}
#gm-landing .lp-price--pop ul{border-top-color:rgba(255,255,255,.14)}
#gm-landing .lp-price--pop .lp-price-credits{color:#e3c37a}
/* Fica fora do fluxo: os planos dividem as linhas por subgrid, e um item a mais só neste desalinhava os três. */
#gm-landing .lp-price-tag{position:absolute;top:14px;left:30px;transform:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#e3c37a}
#gm-landing .lp-price-val b{font-weight:700}
#gm-landing .lp-price-credits{color:var(--ed-ouro-texto)}
#gm-landing .lp-price li i{display:none}
#gm-landing .lp-price li::before{content:"—";color:var(--ed-rule-forte)}
#gm-landing .lp-price--pop li::before{color:rgba(255,255,255,.3)}

/* Dúvidas: linhas com fio, como índice de livro — não caixas. */
#gm-landing .lp-faq{gap:0;border-top:1px solid var(--ed-rule-forte)}
#gm-landing .lp-faq-item{border:none;border-bottom:1px solid var(--ed-rule);border-radius:0;background:transparent}
#gm-landing .lp-faq-item.open{border-color:var(--ed-rule)}
#gm-landing .lp-faq-q{padding:20px 0;font-size:1.02rem}
#gm-landing .lp-faq-a>p{padding:0 48px 0 0}
#gm-landing .lp-faq-item.open .lp-faq-a>p{padding-bottom:22px}
#gm-landing .lp-faq-item.open .lp-faq-q i{color:var(--ed-ink)}

/* Fechamento: um azul-noite só, sem brilho radial. O destaque na mesma
   serifada itálica do hero, pra a página abrir e fechar com a mesma voz. */
#gm-landing .lp-cta{background:var(--lp-night);border-top:none}
#gm-landing .lp-cta::before{display:none}
#gm-landing .lp-cta h2{font-weight:700;letter-spacing:-.025em}
#gm-landing .lp-cta h2 em{font-family:var(--f-serif,'Playfair Display',Georgia,serif);font-style:italic;font-weight:500;color:var(--lp-gold-vivo)}
#gm-landing .lp-cta>p{color:#b9b4c9}
#gm-landing .lp-footer{background:var(--lp-night);border-top:1px solid rgba(255,255,255,.08)}

html[data-gsap-rolagem] #gm-landing .lp-steps .lp-step-n{background:none;box-shadow:none;transform:none}
html[data-gsap-rolagem] #gm-landing .lp-steps > li.ativo .lp-step-n{background:none;box-shadow:none;transform:none;color:var(--ed-ouro-texto)}
@media (max-width:900px){
  #gm-landing .lp-prices{max-width:460px}
  #gm-landing .lp-price+.lp-price{border-left:none;border-top:1px solid var(--ed-rule)}
  #gm-landing .lp-card--lead{padding-right:0;border-right:none;padding-bottom:8px}
}

/* ===================================================================
   SUPORTE (Eliot) — acabamento profissional (2026-09-25)
   Sai o robô de desenho pulando no canto: botão "Suporte" discreto, que é
   o que se espera de uma empresa. Cabeçalho sem brilho radial, tela inicial
   com saudação + horário real da equipe, balões sóbrios e aviso do sistema
   como linha de texto, não pílula.
   =================================================================== */
.gm-att-btn{display:inline-flex;align-items:center;gap:var(--sp-2);height:44px;padding:0 18px 0 14px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--sh);font-family:var(--f-head);font-weight:600;font-size:var(--fs-body-sm)}
.gm-att-btn:hover{transform:none;background:var(--surface-hover);border-color:var(--violet)}
.gm-att-ic{position:relative;width:auto;height:auto;display:inline-grid;place-items:center;color:var(--violet);font-size:1rem}
.gm-att-badge{top:-9px;right:-12px}
.gm-att-panel{bottom:58px}
.gm-att-panel header{background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line)}
.gm-att-panel header::before{display:none}
.gm-att-panel header div>span{color:var(--muted)}
.gm-att-panel header button{color:var(--muted)}
.gm-att-panel header button:hover{color:var(--ink);background:var(--surface-hover)}

.gm-att-inicio{margin:0;gap:var(--sp-4);padding-top:var(--sp-4)}
.gm-att-ola{display:flex;flex-direction:column;gap:2px}
.gm-att-ola strong{font-family:var(--f-head);font-size:var(--fs-h3);color:var(--ink);text-align:left}
.gm-att-ola span{font-size:var(--fs-body);color:var(--muted)}
.gm-att-horario{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--sp-2);row-gap:2px;margin:0;
  padding:var(--sp-3) 0;border-block:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--ink)}
.gm-att-horario small{grid-column:2;font-size:var(--fs-caption);color:var(--dim)}
.gm-att-atalhos{gap:0;margin:0}
.gm-att-atalhos-tit{font-size:var(--fs-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--sp-1)}
.gm-att-atalhos button{justify-content:space-between;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:12px 2px;background:transparent;color:var(--ink)}
.gm-att-atalhos button:hover{background:transparent;color:var(--violet)}
.gm-att-atalhos button i{width:auto;color:var(--dim);font-size:var(--fs-caption)}
.gm-att-inicio .btn{margin-top:auto}

.gm-att-msg.me{background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2)}
.gm-att-sys{background:none;border:none;padding:2px 12px;max-width:100%;font-size:var(--fs-caption);color:var(--dim)}
.gm-att-quick button{border:1px solid var(--line-2);background:transparent;color:var(--ink);font-weight:500}
.gm-att-quick button:hover:not(:disabled){background:var(--surface-hover);border-color:var(--violet);color:var(--ink);transform:none}

/* ---------- Agente: horário de atendimento (agente.expediente) ---------- */
.exp-box #adExpDetalhe{margin-top:var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}
.exp-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.exp-dias{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.exp-dias button{min-width:44px;height:34px;padding:0 10px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:var(--fs-small);font-weight:600}
.exp-dias button:hover{border-color:var(--violet);color:var(--ink)}
.exp-dias button.on{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.exp-horas{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-small)}
.exp-horas .input{width:112px}
.exp-sub{display:block;margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.exp-opcoes{display:grid;gap:var(--sp-2)}
.exp-opcao{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface)}
.exp-opcao:has(input:checked){border-color:var(--violet)}
.exp-opcao input{margin-top:3px;accent-color:var(--violet)}
.exp-opcao b{display:block;font-size:var(--fs-body-sm);color:var(--ink)}
.exp-opcao small{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--dim);line-height:1.45}
#adExpAusenciaWrap{margin-top:var(--sp-2)}

/* ---------- Agente: guia "o que falta", modelos e contador ---------- */
.ad-guia{width:100%;margin:var(--sp-3) 0 var(--sp-1);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);text-align:left}
.ad-guia.pronto{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:600;color:var(--ok)}
.ad-guia-tit{display:flex;justify-content:space-between;font-size:var(--fs-caption);color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.ad-guia-tit b{color:var(--ink);letter-spacing:0}
.ad-guia-barra{height:4px;margin:var(--sp-2) 0 var(--sp-2);border-radius:999px;background:var(--line);overflow:hidden}
.ad-guia-barra i{display:block;height:100%;background:var(--violet);border-radius:inherit}
.ad-guia-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:6px 2px;font-size:var(--fs-small);color:var(--ink);text-align:left;background:none;border:none}
.ad-guia-item i{width:14px;text-align:center;font-size:.8em;color:var(--dim)}
.ad-guia-item.ok{color:var(--dim)}
.ad-guia-item.ok i{color:var(--ok)}
button.ad-guia-item{cursor:pointer}
button.ad-guia-item:hover{color:var(--violet)}
button.ad-guia-item i.fa-arrow-right{margin-left:auto}
.ad-contador{display:block;margin-top:6px;text-align:right;font-size:var(--fs-caption);color:var(--dim)}

/* ---------- Agente: canais/equipe, intenções, integrações, modelos ---------- */
.ag-canais{display:grid;gap:var(--sp-2)}
.ag-canal{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);align-items:center}
.ag-canal .cell-av{flex:0 0 auto;color:#fff}
.ag-canal-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ag-canal-b>b{font-size:var(--fs-body-sm);color:var(--ink)}
.ag-canal-b>span{font-size:var(--fs-small);color:var(--muted)}
.ag-canal-b strong{color:var(--ink);font-weight:600}
.ag-canal-st{margin-left:6px;font-size:var(--fs-caption);font-weight:500;color:var(--dim)}
.ag-canal-st.on{color:var(--ok)}
.ag-equipe{display:flex;align-items:center;gap:var(--sp-2);margin-top:4px;font-size:var(--fs-small);color:var(--ink);cursor:pointer}
.ag-equipe input{accent-color:var(--violet)}
.int-lista{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.int-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.int-row.off{opacity:.6}
.int-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--violet)}
.int-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.int-b b{font-size:var(--fs-body-sm);color:var(--ink)}
.int-b span{font-size:var(--fs-small);color:var(--muted)}
.int-b small{font-size:var(--fs-caption);color:var(--dim)}
.wh-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-copiar{margin-left:6px;background:none;border:none;color:var(--violet);font-size:var(--fs-caption);cursor:pointer;text-decoration:underline}
.int-vazio{display:flex;flex-direction:column;gap:6px;padding:var(--sp-5);border:1px dashed var(--line-2);border-radius:var(--radius-md);text-align:center;color:var(--muted);font-size:var(--fs-small)}
.int-vazio b{color:var(--ink);font-size:var(--fs-body-sm)}
.int-sugestoes{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:6px}
.wh-ajuda{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--muted)}
.wh-ajuda summary{cursor:pointer;color:var(--ink);font-weight:600}
.wh-ajuda p{margin:8px 0 0;line-height:1.55}
.md-grupos{margin-top:var(--sp-3);width:fit-content}
.md-corpo{display:grid;grid-template-columns:230px 1fr;gap:var(--sp-3);margin-top:var(--sp-3);min-height:320px}
.md-lista{display:flex;flex-direction:column;gap:6px}
.md-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-align:left;cursor:pointer}
.md-item b{font-size:var(--fs-body-sm);color:var(--ink)}
.md-item small{font-size:var(--fs-caption);color:var(--muted);line-height:1.4}
.md-item:hover{border-color:var(--line-2)}
.md-item.on{border-color:var(--violet);box-shadow:inset 3px 0 0 var(--violet)}
.md-previa{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);overflow:auto;max-height:360px}
.md-previa pre{margin:0;padding:14px 16px;white-space:pre-wrap;font-family:var(--f-body);font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
@media (max-width:700px){.md-corpo{grid-template-columns:1fr}.md-previa{max-height:220px}}
.ag-canal .btn:disabled{opacity:.45;cursor:not-allowed}

/* ===================================================================
   SUPORTE — mensageiro no padrão Intercom/Crisp (2026-09-25)
   Início (hero + cartões) · Mensagens (o chat de sempre) · Ajuda (artigos).
   As vistas novas se sobrepõem às peças do chat, que só aparecem em
   .vista-chat — a lógica da conversa não mudou.
   =================================================================== */
.gm-att-panel{display:flex;flex-direction:column;height:min(600px,calc(100vh - 110px))}
.gm-att-panel:not(.vista-chat)>header,
.gm-att-panel:not(.vista-chat) #gmAttTabs,
.gm-att-panel:not(.vista-chat) #gmAttNote,
.gm-att-panel:not(.vista-chat) #gmAttBody,
.gm-att-panel:not(.vista-chat) #gmAttPreview,
.gm-att-panel:not(.vista-chat) #gmAttForm{display:none!important}
.gm-att-home,.gm-att-help{flex:1;min-height:0;overflow-y:auto;background:var(--surface-2)}
.gm-att-hero{padding:18px 20px 60px;background:linear-gradient(160deg,#1c1846 0%,#25215c 60%,#2f2a70 100%);color:#fff}
.gm-att-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.gm-att-hero-marca{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:var(--fs-body-sm)}
.gm-att-hero-marca .elt-av{width:30px;height:30px}
.gm-att-hero-x{width:30px;height:30px;border-radius:var(--radius-sm);color:rgba(255,255,255,.8);background:none;border:none}
.gm-att-hero-x:hover{background:rgba(255,255,255,.12);color:#fff}
.gm-att-hero h2{margin:0;font-family:var(--f-head);font-size:1.6rem;line-height:1.15;color:#fff}
.gm-att-hero p{margin:4px 0 0;font-size:1.05rem;color:rgba(255,255,255,.78)}
.gm-att-cards{display:flex;flex-direction:column;gap:10px;margin-top:-40px;padding:0 14px 16px}
.gm-att-card{display:block;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:0 6px 18px -12px rgba(0,0,0,.4);text-align:left;color:var(--ink)}
button.gm-att-card{cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
button.gm-att-card:hover{border-color:var(--violet)}
.gm-att-busca-ajuda{display:flex;align-items:center;gap:8px;padding:0 12px;height:40px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.gm-att-busca-ajuda input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;font-size:var(--fs-small);color:var(--ink)}
.gm-att-busca-ajuda i{color:var(--violet);font-size:var(--fs-small)}
.gm-att-artigos{display:flex;flex-direction:column;margin-top:6px}
.gm-att-artigo{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 2px;border:none;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:var(--fs-small);color:var(--ink);cursor:pointer}
.gm-att-artigo:last-child{border-bottom:none}
.gm-att-artigo:hover{color:var(--violet)}
.gm-att-artigo i{color:var(--dim);font-size:var(--fs-caption)}
.gm-att-artigos-vazio{margin:10px 0 2px;font-size:var(--fs-small);color:var(--muted)}
.gm-att-artigo-topo{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--line);font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.gm-att-artigo-topo span{flex:1;text-align:center}
.gm-att-artigo-topo button{width:30px;height:30px;border-radius:var(--radius-sm);border:none;background:none;color:var(--muted)}
.gm-att-artigo-topo button:hover{background:var(--surface-hover);color:var(--ink)}
.gm-att-artigo-corpo{padding:18px 20px 22px;background:var(--surface);min-height:100%}
.gm-att-artigo-corpo h3{margin:0 0 10px;font-family:var(--f-head);font-size:var(--fs-h3);color:var(--ink)}
.gm-att-artigo-corpo h4{margin:18px 0 8px;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gm-att-artigo-corpo p,.gm-att-artigo-corpo li{font-size:var(--fs-body-sm);line-height:1.65;color:var(--ink)}
.gm-att-artigo-corpo ol{margin:0;padding-left:20px;display:grid;gap:6px}
.gm-att-artigo-corpo a{color:var(--violet);text-decoration:underline}
.gm-att-artigo-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.gm-att-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:var(--surface)}
.gm-att-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;border:none;background:none;color:var(--dim);font-size:var(--fs-caption);font-weight:600;cursor:pointer}
.gm-att-nav button i{font-size:1rem}
.gm-att-nav button:hover{color:var(--ink)}
.gm-att-nav button.on{color:var(--violet)}
.gm-att-head-id .elt-av.pessoa{display:grid;place-items:center;line-height:1}

/* ---------- Agente: "Onde atende" + passo do assistente ---------- */
.ag-canal.indisp{background:var(--surface-2)}
.ag-canal-b a{color:var(--violet);text-decoration:underline}
.ag-assunto{margin:16px 0 0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}
.ag-assunto-pe{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-top:8px}
.wiz-onde{display:grid;gap:8px}
.wiz-onde-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.wiz-onde-item:has(input:checked){border-color:var(--violet)}
.wiz-onde-item.indisp{opacity:.6;cursor:not-allowed}
.wiz-onde-item input{accent-color:var(--violet)}
.wiz-onde-item .cell-av{color:#fff;flex:0 0 auto}
.wiz-onde-b{display:flex;flex-direction:column;gap:2px}
.wiz-onde-b b{font-size:var(--fs-body-sm);color:var(--ink)}
.wiz-onde-b small{font-size:var(--fs-caption);color:var(--muted)}
@media (max-width:900px){.ag-canal{flex-wrap:wrap}}

/* ---------- Admin · Suporte enxuto (2026-09-25) ---------- */
.sup-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 14px;font-size:var(--fs-small);color:var(--muted)}
.sup-resumo b{color:var(--ink);font-size:var(--fs-body);font-weight:700;margin-right:2px}
.sup-resumo small{color:var(--dim)}
.sup-resumo .alerta,.sup-resumo .alerta b{color:var(--danger)}
.msg-nota{align-self:stretch;margin:6px 0;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--warn) 55%,var(--line));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--warn) 8%,transparent);font-size:var(--fs-small);color:var(--ink);line-height:1.5}
.msg-nota span{display:block;margin-bottom:3px;font-size:var(--fs-caption);font-weight:600;color:var(--warn)}
/* Selo "Console IH7" do admin: fundo sempre escuro, então o texto também
   precisa ser claro nos dois temas (no claro ele sumia). */
.gm-ws-admin .gm-ws-label{color:#fff}
/* Uma barra de navegação só no suporte: a de baixo (Início/Mensagens/Ajuda).
   Os atendimentos anteriores ficam no menu ⋮ do cabeçalho. */
.gm-att-panel #gmAttTabs{display:none!important}
/* Suporte do admin é ferramenta de atendimento, não o WhatsApp do cliente:
   fundo liso, sem "orelhinha" nos balões e cores com significado (azul =
   equipe, neutro = Eliot, branco = cliente). O Chat do cliente continua
   com a cara de WhatsApp de propósito. */
#supShell .chat-msgs{background:var(--surface-2);background-image:none;gap:8px;padding:18px 5%}
#supShell .msg{border-radius:12px;box-shadow:none;max-width:min(70%,560px)}
#supShell .msg::before{display:none}
#supShell .msg.in{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-top-left-radius:4px}
#supShell .msg.out{background:var(--violet);color:var(--on-accent);border-top-right-radius:4px}
#supShell .msg.out time,#supShell .msg.out .msg-who{color:color-mix(in srgb,var(--on-accent) 70%,transparent)}
#supShell .msg.bot{background:var(--surface-3);border:1px solid var(--line);color:var(--ink);border-top-right-radius:4px}
#supShell .msg.bot .msg-who{color:var(--muted)}
#supShell .msg time{color:var(--dim)}
#supShell .chat-composer{background:var(--surface)}
#supShell .chat-composer .cc-send{background:var(--violet);color:var(--on-accent);border-radius:var(--radius-md)}
/* Entrada de página mais curta: 240ms com deslocamento dava sensação de
   atraso a cada clique no menu. */
.gm-view{animation-duration:.12s}
@keyframes vfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ===================================================================
   PAINEL — menos enfeite, mais leitura (2026-09-25)
   Pedido: "objetivo, não poluído, o usuário precisa ter facilidade".
   Sai o que só decora: ícone em quadradinho no título de toda página e em
   todo cartão, faixa de saudação em degradê com "pílulas", selo colorido de
   tendência e o "?" gritando em cada número. O gráfico encolhe pra o
   Dashboard caber numa tela sem rolar.
   =================================================================== */
.pg-ic{display:none}
.ds-ic{display:none}
.ds-trend,.ds-trend.up,.ds-trend.down{background:none;padding:0}
.info-tip{opacity:.45;transition:opacity var(--dur-fast) var(--ease)}
.info-tip:hover,.info-tip:focus{opacity:1}
.dash-hero{background:var(--surface);border:1px solid var(--line);box-shadow:none;color:var(--ink);padding:18px 22px}
.dash-hero-glow{display:none}
.dash-hero-text h2{color:var(--ink)}
.dash-hero-text p{color:var(--muted)}
.dash-hero-text p b{color:var(--ink)}
.dash-hero-pill{background:none;border:none;padding:0 0 0 14px;color:var(--muted);font-weight:500}
.dash-hero-pill b,.dash-hero-pill strong{color:var(--ink)}
.bars{height:150px}

/* Passos de configuração dentro da faixa de saudação. A faixa era escura e
   eles tinham texto BRANCO; quando a faixa ficou clara, o texto sumiu
   (sobrava só "1 … Conectar ✓"). Agora usam as cores do tema. */
.dho-steps{border-top-color:var(--line)}
.dho-step{background:var(--surface-2);border:1px solid var(--line-2)}
.dho-b b{color:var(--ink)}
.dho-b small{color:var(--muted)}
.dho-n{background:var(--violet);color:var(--on-accent)}
.dho-step.done .dho-n{background:var(--ok);color:#fff}
.dho-step .btn-white,body[data-theme="light"] #gm-app .dho-step .btn-white{background:var(--violet);color:var(--on-accent);border-color:transparent}
.dho-step .btn-white:hover,body[data-theme="light"] #gm-app .dho-step .btn-white:hover{filter:brightness(1.1);background:var(--violet)}

/* Tema claro com separação que se enxerga em qualquer monitor: borda e fundo
   eram 1,1–1,2x mais escuros que o branco dos cartões — em muita tela os
   cartões, a busca e o item ativo do menu simplesmente sumiam. */
body[data-theme="light"] #gm-app,
body[data-theme="light"] .gm-modal,
body[data-theme="light"] .gm-menu{
  --bg:#f1eee6; --surface-2:#f8f6f0;
  --line:#e0d9c8; --line-2:#cdc3a9;
  --dim:#626a7b;
}

/* ===================================================================
   PAINEL — limpeza das telas restantes (2026-09-25)
   Mesmo critério do Dashboard: ícone só onde ajuda a achar algo (menu,
   botões), nunca enfeitando número; pílula só quando a cor significa algo
   (etapa do funil, status ruim). O resto vira texto.
   =================================================================== */
/* Números com ícone decorativo (admin, funil) */
.kpi-ic,.kb-sum-ic{display:none}
.kpi.dark{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.kpi.dark .kpi-val,.kpi.dark .kpi-top{color:var(--ink)}
.kpi.dark .kpi-foot{color:var(--muted)}
.kpi-delta{background:none;padding:0;color:var(--ok-texto,var(--ok))}
/* Tabelas: origem, créditos e plano como texto; status só com a bolinha */
/* Origem (Contatos) e plano (Workspaces) são rótulo, não alerta: texto simples.
   A etapa do funil (.chip) mantém o destaque — ela é o que se procura na lista. */
.tbl .tag.new{background:none;border:none;padding:0;color:var(--muted);font-weight:500;text-transform:none}
.tbl .cred-pill{background:none;border:none;padding:0;color:var(--ink);font-weight:600}
.tbl .cred-pill i{display:none}
.tbl .tag.ok{background:none;border:none;padding:0;color:var(--ok-texto,var(--ok))}
/* Mais opções: ícone monocromático, cartão limpo */
.opt .opt-ic{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
/* Dashboard numa tela só: as listas da direita (contatos recentes, para
   hoje) rolam por dentro em vez de esticar a página inteira. */
.dash-col .toplist{max-height:172px;overflow-y:auto}
.dash-col .dash-vazio{padding:16px 18px;gap:4px}
.dash-col .dash-vazio>span{display:none}
/* Cartão de ação (<button>) igual ao de link (<a>): o navegador centraliza
   texto de botão por padrão — Aparência e Suporte saíam desalinhados. */
button.opt,a.opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.opt:hover{border-color:var(--violet)}

/* ===================================================================
   DASHBOARD NUMA TELA SÓ (2026-09-25)
   Pedido: "todas as abas cabem, o dashboard também deveria". Em vez de
   cortar pixels a cada caso (com ou sem os passos de configuração, telas
   de 768 a 1080 de altura), a página vira uma coluna com a ALTURA DA
   JANELA: título, saudação e números ficam no tamanho natural, e gráfico +
   listas dividem o que sobra — as listas rolam por dentro. Só em tela de
   computador; no celular a página rola normal.
   =================================================================== */
@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(> #dashViewGeral:not([hidden])){
    display:flex;flex-direction:column;overflow:hidden;
    height:calc(100dvh - var(--top-h,69px));padding-bottom:16px
  }
  #dashViewGeral{flex:1;min-height:0;display:flex;flex-direction:column}
  #dashViewGeral .dash-grid{flex:1;min-height:0;margin-bottom:0;grid-template-rows:minmax(0,1fr)}
  #dashViewGeral .dash-grid>.card{min-height:0;overflow:hidden}
  #dashViewGeral .chart-body{flex:1;min-height:0;padding-top:8px;padding-bottom:10px}
  #dashViewGeral .bars{height:auto;flex:1;min-height:70px}
  #dashViewGeral .dash-col{min-height:0}
  #dashViewGeral .dash-col>.card{flex:1 1 0;min-height:0;overflow:hidden}
  #dashViewGeral .dash-col>.card>.card-head+div{flex:1;min-height:0;overflow-y:auto}
  #dashViewGeral .dash-col .toplist{max-height:none}
}

/* ---------- Pagamentos (cliente) e recibo ---------- */
.pag-acoes{display:flex;gap:6px;justify-content:flex-end;align-items:center;white-space:nowrap}
.pag-emissao{font-size:var(--fs-caption);color:var(--dim);padding:0 6px}
.pag-cupom{display:block;font-size:var(--fs-caption);color:var(--muted)}
.pag-st{margin-left:6px;font-size:var(--fs-caption);font-weight:600;color:var(--warn)}
.pag-nota-info{margin:12px 2px 0;font-size:var(--fs-small);color:var(--muted)}
.pag-nota-info i{margin-right:6px;color:var(--dim)}
.recibo{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;color:#1f2430}
.recibo-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #e0d9c8}
.recibo-topo b{font-family:var(--f-head);font-size:1.25rem;color:#1f2430}
.recibo-topo span{font-size:var(--fs-small);color:#5d6474;text-transform:uppercase;letter-spacing:.06em}
.recibo dl{display:grid;grid-template-columns:180px 1fr;gap:10px 16px;margin:0}
.recibo dt{font-size:var(--fs-small);color:#5d6474}
.recibo dd{margin:0;font-size:var(--fs-body-sm);color:#1f2430}
.recibo .recibo-valor{font-size:1.2rem;font-weight:700}
.recibo-pe{margin:18px 0 0;padding-top:12px;border-top:1px solid #e0d9c8;font-size:var(--fs-caption);color:#5d6474}
@media print{
  body.imprimindo-recibo *{visibility:hidden!important}
  body.imprimindo-recibo #reciboImprimir,body.imprimindo-recibo #reciboImprimir *{visibility:visible!important}
  body.imprimindo-recibo #reciboImprimir{position:fixed;inset:0 auto auto 0;width:100%;border:none;box-shadow:none}
}

/* ===== Barra de progresso (QR lido, importação de contatos) =====
   Com porcentagem: a largura anda até o valor. Sem porcentagem
   (gm-prog-indet): um trecho corre de ponta a ponta — nunca fica parada,
   porque barra parada é lida como "travou". */
.gm-prog{position:relative;width:100%;height:8px;border-radius:999px;background:var(--surface-2,#eef0f4);overflow:hidden;margin:14px 0 6px}
.gm-prog>span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--green,#25d366);transition:width .6s cubic-bezier(.3,.7,.4,1)}
.gm-prog.gm-prog-indet>span{width:38%;transition:none;animation:gmProgCorre 1.3s ease-in-out infinite}
.gm-prog.ok>span{background:var(--ok,#16a34a)}
.gm-prog.erro>span{background:var(--danger,#dc2626)}
@keyframes gmProgCorre{0%{left:-40%}100%{left:100%}}
/* Quem pede menos movimento ainda precisa ver que está vivo: pulsa em vez de correr. */
@media (prefers-reduced-motion:reduce){
  .gm-prog.gm-prog-indet>span{left:0;width:100%;animation:gmProgPulsa 1.6s ease-in-out infinite}
}
@keyframes gmProgPulsa{0%,100%{opacity:.35}50%{opacity:1}}
.gm-prog-nota{font-size:var(--fs-body-sm,.84rem);color:var(--muted);margin:8px 0 0}
.gm-prog-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
#agendaTxt{font-weight:600;color:var(--text);margin-bottom:0}
#waQrSync{width:78%}
#waQrSync .gm-prog{margin:4px 0 0}
#waQrSync small{font-size:var(--fs-body-sm,.84rem);font-weight:500;color:var(--muted)}
.wa-qr-lido{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;
  background:var(--ok-soft,#dcfce7);color:var(--ok,#16a34a);animation:gmLidoEntra .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes gmLidoEntra{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

/* Foto do contato no Chat (lista, cabeçalho e ficha lateral). */
.thread-av .av-foto,.cx-av .av-foto{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cx-av{position:relative;overflow:hidden}
.cn-mais-wrap{margin-top:22px}
.cn-mais-head h2{font-size:1.02rem;margin:0 0 2px;color:var(--text)}
.cn-mais-head p{margin:0 0 12px;color:var(--muted);font-size:var(--fs-body-sm)}
.cn-mais{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cn-sug{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color var(--dur,.15s),box-shadow var(--dur,.15s)}
.cn-sug:hover{border-color:var(--line-2);box-shadow:0 6px 18px -14px rgba(20,20,40,.35)}
.cn-sug-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem}
.cn-sug .btn{flex:none}
@media(max-width:560px){.cn-sug{flex-wrap:wrap}.cn-sug .btn{width:100%}}
.cn-mais{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cn-sug{flex-direction:column;align-items:flex-start;gap:10px}
.cn-sug .btn{margin-top:auto}

/* Chat: filtro rápido da lista */
.chat-filtros{display:flex;gap:6px;margin-top:10px}
.chat-filtros button{flex:1;padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-small,.78rem);font-weight:600;cursor:pointer;white-space:nowrap}
.chat-filtros button:hover{color:var(--text);border-color:var(--line-2)}
.chat-filtros button.on{background:var(--text);border-color:var(--text);color:var(--surface)}
.chat-filtros button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}

/* ===== Mais opções: configurações em grupos ===== */
.mo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;align-items:start}
@media(max-width:900px){.mo2{grid-template-columns:1fr}}
.mo2-grupo h2{margin:0 0 8px 2px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.mo2-lista{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mo2-linha{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:0;border-top:1px solid var(--line);color:inherit;text-decoration:none;font:inherit;text-align:left;cursor:pointer;transition:background var(--dur,.15s)}
.mo2-linha:first-child{border-top:0}
.mo2-linha:hover{background:var(--surface-2)}
.mo2-linha:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mo2-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:.92rem}
.mo2-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mo2-b b{font-size:var(--fs-body);color:var(--text)}
.mo2-b small{font-size:var(--fs-body-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo2-val{flex:none;font-size:var(--fs-body-sm);font-weight:600;color:var(--muted)}
.mo2-seta{flex:none;font-size:.72rem;color:var(--dim)}

/* ===== Contatos: origem legível + lista cabendo na tela ===== */
.ct-origem{font-size:var(--fs-body-sm);color:var(--muted);white-space:nowrap}
.ct-origem::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--line-2)}
.ct-origem-whatsapp::before{background:#25d366}
.ct-origem-telegram::before{background:#229ed9}
.ct-origem-webchat::before{background:#6366f1}
.ct-origem-agenda::before{background:#c9b98f}
@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(#contatosBody){flex:none;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;height:calc(100dvh - var(--top-h,69px));padding-bottom:16px}
  .gm-view:has(#contatosBody)>.card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin-bottom:0}
  #contatosBody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
  #contatosBody .tbl-wrap{overflow:visible}
  #contatosBody thead th{position:sticky;top:0;z-index:2;background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
  #contatosBody .pager{margin-top:auto}
}

/* ===== Funil: barra, selo da IA e tela cheia sem rolar ===== */
.kb-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.kb-busca{flex:0 1 320px;min-width:200px}
.kb-agenda{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:var(--fs-body-sm);font-weight:600;cursor:pointer}
.kb-agenda:hover{color:var(--text);border-color:var(--line-2)}
.kb-agenda.on{color:var(--text);border-color:var(--line-2);background:var(--surface-2)}
.kb-origem{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--surface-2);color:var(--dim);font-size:.72rem}
.kb-ia{display:inline-flex;align-items:center;gap:4px;margin-left:auto;margin-right:8px;padding:1px 7px;border-radius:999px;font-size:.68rem;font-weight:700;background:rgba(124,58,237,.1);color:#6d28d9}
body[data-theme="dark"] .kb-ia,#gm-app:not([data-theme]) .kb-ia{background:rgba(167,139,250,.16);color:#c4b5fd}
.kb-mais{margin:4px 0 0;padding:8px;border:1px dashed var(--line-2);border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-body-sm);font-weight:600;cursor:pointer}
.kb-mais:hover{color:var(--text)}
@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(#kanban){flex:none;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;height:calc(100dvh - var(--top-h,69px));padding-bottom:12px}
  .gm-view:has(#kanban) #funilBody{flex:1;min-height:0;display:flex;flex-direction:column}
  .gm-view:has(#kanban) #kanban{flex:1;min-height:0;padding-bottom:4px}
  .gm-view:has(#kanban) .kb-col{min-height:0;max-height:none}
}
.gm-view:has(#kanban) .kanban{grid-auto-columns:minmax(190px,1fr)}

/* ===== Nova transmissão: mensagem + prévia | destinatários ===== */
.gm-modal-card.wide:has(.cp-grid){max-width:1000px;padding:26px 28px 22px}
.cp-topo h3{margin:0 0 4px}
.cp-topo p{margin:0 0 18px;color:var(--muted);font-size:var(--fs-body-sm)}
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
@media(max-width:820px){.cp-grid{grid-template-columns:1fr}}
.cp-col{min-width:0}
.cp-col-dest{display:flex;flex-direction:column}
.cp-dica{font-weight:500;color:var(--dim);font-size:.72rem;margin-left:4px}
.cp-previa{margin-top:4px;padding:14px;border-radius:14px;background:#efeae2;border:1px solid var(--line)}
body[data-theme="dark"] .cp-previa,#gm-app:not([data-theme]) .cp-previa{background:#0b141a}
.cp-previa-rot{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#667781;margin-bottom:8px}
.cp-bolha{max-width:88%;display:flex;flex-direction:column;gap:6px;padding:8px 10px 6px;border-radius:0 10px 10px 10px;background:#fff;color:#111b21;font-size:.86rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px .5px rgba(11,20,26,.13)}
body[data-theme="dark"] .cp-bolha,#gm-app:not([data-theme]) .cp-bolha{background:#202c33;color:#e9edef}
.cp-bolha img{width:100%;max-height:170px;object-fit:cover;border-radius:6px}
.cp-bolha .vazio{color:#8696a0;font-style:italic}
.cp-bolha small{color:#8696a0;font-size:.72rem}
.cp-dest{margin:0;display:flex;flex-direction:column;flex:1;min-height:0}
.cp-dest-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cp-count{font-size:var(--fs-body-sm);font-weight:700;color:var(--text)}
.cp-filtros{display:grid;grid-template-columns:1fr auto;gap:8px;margin:6px 0 8px}
.cp-filtros .select{height:38px}
.cp-all{margin:0 0 6px;padding:0 2px;font-weight:600}
.gm-modal-card .cp-contact-list{max-height:none;height:300px;padding:4px;gap:0}
.cp-item{display:flex!important;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer}
.cp-item:hover{background:var(--surface-2)}
.cp-av{position:relative;overflow:hidden;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.66rem;font-weight:700}
.cp-av .av-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cp-id{display:flex;flex-direction:column;min-width:0}
.cp-id b{font-size:var(--fs-body-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-id small{font-size:.72rem;color:var(--dim)}
.cp-vazio{color:var(--dim);font-size:.8rem;margin:10px}
.cp-aviso{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:var(--warn-soft,#fef3c7);color:var(--warn,#92400e);font-size:.78rem;line-height:1.4}
.cp-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cp-regras{flex:1 1 380px;margin:0;color:var(--dim);font-size:.76rem;line-height:1.45}
.cp-regras i{color:var(--ok,#16a34a);margin-right:4px}
.cp-rodape .au-err{flex-basis:100%;margin:0}
.cp-botoes{display:flex;gap:10px;margin-left:auto}
.cp-item[hidden]{display:none!important}
.gm-modal-card p.cp-regras{font-size:.76rem;margin:0;color:var(--dim)}
.gm-modal-card .cp-topo p{font-size:var(--fs-body-sm)}
.gm-modal-card p.cp-aviso{font-size:.78rem;line-height:1.4}

/* ===== Convidar para a equipe ===== */
.gm-modal-card.wide:has(#eqForm){max-width:640px}
#eqForm .field{margin-bottom:14px}
.gm-modal-card p.eq-sub{margin:2px 0 18px;color:var(--muted);font-size:var(--fs-body-sm)}
.eq-duas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.eq-duas{grid-template-columns:1fr}}
.eq-senha{display:flex;gap:8px}
.eq-senha .input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.eq-hint{display:block;margin-top:5px;color:var(--dim);font-size:.74rem}
.eq-perfis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.eq-perfis{grid-template-columns:1fr}}
.eq-perfil{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color var(--dur,.15s),background var(--dur,.15s)}
.eq-perfil input{position:absolute;opacity:0;pointer-events:none}
.eq-perfil:hover{border-color:var(--line-2)}
.eq-perfil:has(input:checked){border-color:var(--accent);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
.eq-perfil:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.eq-perfil-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--text);font-size:.8rem;margin-bottom:4px}
.eq-perfil b{font-size:var(--fs-body-sm);color:var(--text)}
.eq-perfil small{font-size:.74rem;color:var(--muted)}
#eqPerms{margin-top:12px}
.eq-botoes{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.eq-ok{text-align:center}
.eq-ok .eq-botoes{justify-content:center}
.eq-ok-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft,#dcfce7);color:var(--ok,#15803d);font-size:1.3rem}
.eq-cred{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left;font-size:.84rem;line-height:1.55;white-space:pre-wrap;word-break:break-all;user-select:all}

/* ===== Agente: "Onde atende" com seletor + página numa tela só ===== */
.ag-onde-resumo{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--text)}
.ag-onde-resumo i{color:var(--ok,#16a34a)}
.ag-onde-resumo .fa-circle-info{color:var(--muted)}
.ag-quem{flex:none;display:flex;flex-direction:column;gap:4px;min-width:190px}
.ag-quem label{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.ag-quem .select{height:36px}
.ag-assunto-check{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:var(--fs-body-sm);color:var(--muted);cursor:pointer}
.ag-assunto-check input{accent-color:var(--accent)}
@media(max-width:700px){.ag-canal{flex-wrap:wrap}.ag-quem{width:100%}}

@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(.agent-detail){flex:none;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;height:calc(100dvh - var(--top-h,69px));padding-bottom:16px}
  .gm-view:has(.agent-detail) .pg-head{margin-bottom:10px}
  #agenteDetalheBody{flex:1;min-height:0;display:flex;flex-direction:column}
  #agenteDetalheBody>div:first-child{margin-bottom:8px!important}
  .agent-detail{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
  .agent-detail-side{min-height:0;overflow-y:auto;padding:18px 14px;scrollbar-width:thin}
  .agent-detail-main{min-height:0;overflow-y:auto;padding-bottom:0;display:flex;flex-direction:column;scrollbar-width:thin}
  /* Salvar sempre à vista: a barra gruda no pé do painel enquanto o resto rola. */
  .agent-detail-main>div:has(> [id^="adSave"]){position:sticky;bottom:0;z-index:2;margin:auto -24px 0!important;padding:12px 24px;background:var(--surface);border-top:1px solid var(--line)}
  /* Perfil: o texto do comportamento ocupa a altura que sobra, sem rolar a página. */
  .agent-detail-main:has(#adPrompt) .field:has(#adPrompt){flex:1;min-height:0;display:flex;flex-direction:column}
  .agent-detail-main #adPrompt{flex:1;min-height:140px;resize:none}
}
@media (min-width:1000px) and (min-height:600px){
  /* Coluna do agente enxuta pra caber o menu inteiro sem rolar. */
  .agent-detail-side .agent-detail-av{width:56px;height:56px;font-size:1.3rem}
  .agent-detail-side h3{margin:6px 0 0;font-size:1rem}
  .agent-detail-side>p{margin:0 0 6px;font-size:.78rem}
  .agent-detail-side .ad-guia{padding:10px;margin:8px 0 2px}
  .agent-detail-side .ad-guia-item.ok{display:none}
  .agent-detail-side .ad-guia-barra{margin:6px 0 4px}
  .agent-detail-nav{padding-top:8px;margin-top:2px}
  .agent-detail-nav button{padding-top:7px!important;padding-bottom:7px!important}
  /* O botão flutuante de Suporte fica no canto: o Salvar não pode ficar embaixo dele. */
  .agent-detail-main>div:has(> [id^="adSave"]){padding-right:170px}
}
@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(.agent-detail) .pg-head p{display:none}
  .gm-view:has(.agent-detail) .pg-head{margin-bottom:6px}
  .agent-detail-side .ad-guia-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 2px}
}

/* ===== Suporte: caminho direto pra equipe ===== */
.gm-att-panel:not(.vista-chat) #gmAttPessoa{display:none!important}
.gm-att-pessoa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.8rem;color:var(--muted)}
.gm-att-pessoa[hidden]{display:none}
.gm-att-pessoa button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.gm-att-pessoa button:hover{border-color:var(--accent)}
.gm-att-equipe-intro{margin:18px 14px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:center}
.gm-att-equipe-ic{width:44px;height:44px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--text);font-size:1.1rem}
.gm-att-equipe-intro b{display:block;font-size:.95rem;color:var(--text)}
.gm-att-equipe-intro p{margin:6px 0 4px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.gm-att-equipe-intro small{font-size:.74rem;color:var(--dim)}

/* ===== Mais opções v3: cartões por grupo (a lista v2 ficou esticada e vazia) ===== */
.mo2{grid-template-columns:1fr;gap:22px}
.mo2-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;background:none;border:0;border-radius:0;overflow:visible}
.mo2-linha{position:relative;flex-direction:column;align-items:flex-start;gap:12px;min-height:128px;padding:18px;border:1px solid var(--line)!important;border-radius:14px;background:var(--surface);box-shadow:0 1px 2px rgba(20,20,40,.04);transition:border-color var(--dur,.15s),box-shadow var(--dur,.15s),transform var(--dur,.15s)}
.mo2-linha:hover{background:var(--surface);border-color:var(--line-2)!important;box-shadow:0 10px 24px -18px rgba(20,20,40,.45);transform:translateY(-1px)}
.mo2-ic{width:40px;height:40px;border-radius:11px;font-size:1rem}
.mo2-b small{white-space:normal;line-height:1.4}
.mo2-val{position:absolute;top:18px;right:18px;padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.72rem;color:var(--text)}
.mo2-seta{position:absolute;right:18px;bottom:18px;opacity:0;transition:opacity var(--dur,.15s)}
.mo2-linha:hover .mo2-seta{opacity:1}
@media (min-width:1100px){
  .mo2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
  .mo2-lista{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ===== Canais v2: vitrine de canais limpa ===== */
.cn-mais-wrap{margin-top:26px}
.cn-mais-wrap.so{margin-top:4px}
.cn-mais-head h2{font-size:1.05rem;font-weight:700;margin:0 0 3px}
.cn-mais-head p{margin:0 0 14px}
.cn-mais{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
@media(min-width:1200px){.cn-mais{grid-template-columns:repeat(4,minmax(0,1fr))}}
button.cn-sug{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:196px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
button.cn-sug:hover{border-color:var(--line-2);box-shadow:0 14px 30px -22px rgba(20,20,40,.5);transform:translateY(-2px)}
button.cn-sug:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cn-sug-topo{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.cn-sug-ic{width:44px;height:44px;border-radius:12px;font-size:1.25rem}
.cn-sug-topo em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
button.cn-sug>b{font-size:.98rem;font-weight:700;color:var(--text);margin-bottom:6px}
.cn-sug-txt{font-size:var(--fs-body-sm);line-height:1.45;color:var(--muted)}
.cn-sug-acao{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-body-sm);font-weight:700;color:var(--text)}
.cn-sug-acao i{font-size:.75rem;color:var(--dim);transition:transform .15s,color .15s}
button.cn-sug:hover .cn-sug-acao i{transform:translateX(3px);color:var(--text)}
.cn-sug-txt{margin-bottom:0}
button.cn-sug .cn-sug-txt+.cn-sug-acao{margin-top:auto}
.cn-mais button.cn-sug .cn-sug-txt{flex:0 0 auto;padding-bottom:14px}

/* Mais opções: cartões com a mesma largura em todos os grupos */
@media (min-width:1100px){.mo2-lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo2-linha{min-height:0}

/* ===== Suporte: início enxuto (3 caminhos numa lista) ===== */
.gm-att-ops{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px -14px rgba(20,20,40,.35)}
.gm-att-op{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;border-top:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer}
.gm-att-op:first-child{border-top:0}
.gm-att-op:hover{background:var(--surface-2)}
.gm-att-op-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--text);font-size:.9rem}
.gm-att-op-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gm-att-op-b b{font-size:.9rem;color:var(--text)}
.gm-att-op-b small{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-att-op>i{flex:none;font-size:.72rem;color:var(--dim)}
.gm-att-panel:has(#gmAttHome:not([hidden])){height:auto!important;min-height:0!important}
.gm-att-panel:has(#gmAttHome:not([hidden])) #gmAttHome{flex:none;padding-bottom:16px}

/* Chat: as colunas não podem crescer além da caixa — sem isto, com muitas
   conversas/mensagens a grade esticava, o fim era cortado pelo overflow e
   nem a lista nem a conversa rolavam. */
.chat{grid-template-rows:minmax(0,1fr)}
.chat>.chat-list,.chat>.chat-main,.chat>.chat-ctx{min-height:0}
.chat-list .chat-threads{min-height:0;overflow-y:auto}
#gm-app .chat-filtros button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Suporte início v3: status no topo, sem a barra de baixo repetindo as opções */
.gm-att-panel:has(#gmAttHome:not([hidden])) #gmAttNav{display:none}
.gm-att-hero-status{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:.78rem;font-weight:500;opacity:.9}
.gm-att-hero-status .gm-att-dot{flex:none}
.gm-att-op.principal .gm-att-op-ic{background:var(--accent);color:var(--on-accent,#fff)}
.gm-att-op.principal .gm-att-op-b b{font-size:.95rem}
#gm-app .gm-att-op.principal .gm-att-op-ic,.gm-att-op.principal .gm-att-op-ic{background:var(--ink);color:var(--surface)}

/* Sininho: título + "Limpar tudo" na mesma linha */
.noti-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.noti-topo h5{margin-bottom:0}
.noti-limpar{background:none;border:0;padding:4px 6px;border-radius:6px;font:inherit;font-size:.74rem;font-weight:700;color:var(--muted);cursor:pointer}
.noti-limpar:hover{color:var(--text);background:var(--surface-2)}

/* ===== Créditos: consumo + compra ===== */
.gm-modal-card.wide:has(#crBox){max-width:640px}
.cr-topo small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cr-topo strong{display:block;margin:2px 0 4px;font-family:var(--f-head);font-size:2rem;line-height:1.1;color:var(--text)}
.cr-topo strong span{font-size:.95rem;font-weight:600;color:var(--muted)}
.gm-modal-card .cr-topo p{margin:0;font-size:var(--fs-body-sm);color:var(--muted)}
.gm-modal-card .cr-topo p.alerta{color:var(--warn,#b45309)}
.cr-abas{display:flex;gap:4px;margin:16px 0 14px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.cr-abas button{flex:1;padding:8px;border:0;border-radius:9px;background:none;font:inherit;font-size:var(--fs-body-sm);font-weight:700;color:var(--muted);cursor:pointer}
.cr-abas button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,20,40,.12)}
.cr-graf-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-body-sm)}
.cr-graf-head span{color:var(--muted);font-size:.78rem}
.cr-graf{display:flex;align-items:flex-end;gap:2px;height:110px;margin-top:10px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.cr-bar{position:relative;flex:1;height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--line-2);cursor:default}
.cr-bar.hoje{background:var(--accent)}
.cr-bar:hover{background:var(--ink)}
.cr-bar::before{content:"";position:absolute;inset:-100px -2px 0}
.cr-bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--surface);font-size:.72rem;font-weight:600;white-space:nowrap;z-index:3;pointer-events:none}
.cr-graf-eixo{display:flex;justify-content:space-between;margin-top:4px;font-size:.7rem;color:var(--dim)}
.cr-sub{margin:16px 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.cr-movs{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.cr-movs li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.cr-movs li:first-child{border-top:0}
.cr-movs .cr-vazio{color:var(--muted);font-size:var(--fs-body-sm);justify-content:center}
.cr-mov-ic{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:.74rem;background:var(--surface-2);color:var(--muted)}
.cr-mov-ic.compra{color:var(--ok,#15803d)}
.cr-mov-b{flex:1;min-width:0;display:flex;flex-direction:column}
.cr-mov-b b{font-size:var(--fs-body-sm);font-weight:600;color:var(--text)}
.cr-mov-b small{font-size:.72rem;color:var(--dim)}
.cr-mov-v{font-weight:700;font-size:var(--fs-body-sm);color:var(--ok,#15803d)}
.cr-mov-v.neg{color:var(--danger,#dc2626)}
.gm-modal-card p.cr-nota{margin:12px 0 0;font-size:.74rem;color:var(--dim)}
.gm-modal-card p.cr-rec{margin:0 0 12px;font-size:var(--fs-body-sm);color:var(--muted)}
.cr-pacs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.cr-pacs{grid-template-columns:1fr}}
.cr-pac{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 14px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cr-pac:hover{border-color:var(--line-2);box-shadow:0 10px 22px -18px rgba(20,20,40,.5)}
.cr-pac.rec{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cr-pac em{position:absolute;top:-10px;left:12px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--surface);font-style:normal;font-size:.66rem;font-weight:700}
.cr-pac b{font-size:1.2rem;color:var(--text)}
.cr-pac b small{font-size:.78rem;font-weight:600;color:var(--muted)}
.cr-pac-preco{font-size:1rem;font-weight:700;color:var(--text)}
.cr-pac-uni{font-size:.7rem;color:var(--dim);line-height:1.35}
.gm-modal-card p.cr-dica{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:.8rem;color:var(--text)}
.cr-dica i{color:#d97706;margin-right:4px}
.cr-bar.hoje{background:var(--ink)}

/* Período personalizado do dashboard */
.gm-modal-card.wide:has(.pp){max-width:460px}
.gm-modal-card p.pp-sub{margin:2px 0 14px;font-size:var(--fs-body-sm);color:var(--muted)}
.pp-atalhos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pp-atalhos button{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer}
.pp-atalhos button:hover{border-color:var(--line-2);background:var(--surface-2)}
.pp-datas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-botoes{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

/* Transmissão: alcance e ritmo */
.cp-ritmo{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.cp-frios{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.cp-frios input{margin-top:3px;accent-color:var(--ink)}
.cp-frios span{display:flex;flex-direction:column;gap:2px}
.cp-frios b{font-size:var(--fs-body-sm);color:var(--text)}
.cp-frios small{font-size:.74rem;color:var(--muted)}
.gm-modal-card p.cp-risco{margin:0;padding:8px 10px;border-radius:10px;background:var(--warn-soft,#fef3c7);color:var(--warn,#92400e);font-size:.76rem;line-height:1.4}
.cp-ritmo-linha{display:flex;align-items:center;gap:10px}
.cp-ritmo-linha label{flex:none;font-size:var(--fs-body-sm);font-weight:600;color:var(--text)}
.cp-ritmo-linha .select{flex:1;height:36px}
.cp-ritmo-custom{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-ritmo-custom label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:600;color:var(--muted)}
.cp-ritmo-custom .input{height:36px}
.gm-modal-card p.cp-estimativa{margin:0;font-size:.78rem;color:var(--muted)}
.gm-modal-card p.cp-estimativa:empty{display:none}
.eq-nota{margin-top:12px;font-size:.82rem;color:var(--muted)}

/* ================= Agenda inteligente ================= */
.agd-status{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--surface);cursor:pointer}
.agd-status[hidden]{display:none}
.agd-status span:last-child{display:flex;flex-direction:column;line-height:1.15}
.agd-status b{font-size:var(--fs-small)}
.agd-status small{font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.agd-status.on{border-color:var(--ok)}
.agd-status.on small{color:var(--ok-texto)}
.agd-plano{display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--violet-softer)}
.agd-plano>div{flex:1;min-width:0;display:flex;flex-direction:column}
.agd-plano b{font-size:var(--fs-body-sm)}
.agd-plano>div span{font-size:var(--fs-small);color:var(--muted)}
.agd-plano-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-dim);flex:none}

.agd-inicio{max-width:980px}
.agd-inicio-head h2{font-size:var(--fs-h3);margin:0 0 4px}
.agd-inicio-head p{margin:0 0 16px;color:var(--muted);font-size:var(--fs-body-sm)}
.agd-modelos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){.agd-modelos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.agd-modelos{grid-template-columns:1fr}}
button.agd-modelo{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
button.agd-modelo:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh)}
button.agd-modelo:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.agd-modelo-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);margin-bottom:6px}
.agd-modelo b{font-size:var(--fs-body-sm);color:var(--ink)}
.agd-modelo small{font-size:var(--fs-small);color:var(--muted)}
.agd-passos{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--fs-small);color:var(--muted)}
.agd-passos i{color:var(--ink);margin-right:6px}

.agd-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.agd-grid{grid-template-columns:minmax(0,1fr)}}
.agd-lado{padding:16px}
.agd-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.agd-cal-head b{font-size:var(--fs-body-sm)}
.agd-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.agd-cal-sem{text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--dim);padding-bottom:4px}
.agd-dia{position:relative;height:40px;border-radius:9px;font-size:var(--fs-small);font-weight:600;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1;border:1px solid transparent}
.agd-dia:hover{background:var(--surface-2)}
.agd-dia.passado{color:var(--dim)}
.agd-dia.fechado{color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 4px,var(--surface-2) 4px 6px)}
.agd-dia.hoje{border-color:var(--line-2)}
.agd-dia.sel{background:var(--violet);color:var(--on-accent)}
.agd-dia i{font-style:normal;font-size:.56rem;font-weight:800;line-height:1;padding:1px 4px;border-radius:5px;background:var(--gold-soft);color:var(--ink)}
.agd-dia.sel i{background:rgba(255,255,255,.22);color:var(--on-accent)}
.agd-resumo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.agd-resumo div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.agd-resumo span{font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.agd-resumo b{font-size:var(--fs-body);font-family:var(--f-head)}

.agd-main{display:flex;flex-direction:column;min-height:0}
.agd-main-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.agd-filtro{width:auto;min-width:160px;height:36px;font-size:var(--fs-small)}
.agd-busca{flex:1;min-width:180px;height:36px;font-size:var(--fs-small)}
.agd-busca[hidden]{display:none}
.agd-conta{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:#fff;font-size:.62rem;font-weight:800}
.agd-conta[hidden]{display:none}
.agd-lista{overflow:auto;padding:4px 14px 14px}
.agd-dia-head{display:flex;align-items:center;gap:12px;padding:10px 0 8px}
.agd-dia-head>div{flex:1;min-width:0}
.agd-dia-head h3{margin:0;font-size:var(--fs-body)}
.agd-dia-head span{font-size:var(--fs-small);color:var(--muted)}
.agd-item{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.agd-item.inativo{opacity:.62}
.agd-item.pendente{background:linear-gradient(90deg,var(--warn-soft),transparent 60%);margin:0 -14px;padding:12px 14px}
.agd-hora{flex:none;width:62px;display:flex;flex-direction:column;line-height:1.2}
.agd-hora b{font-size:var(--fs-body);font-family:var(--f-head)}
.agd-hora span,.agd-hora small{font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.agd-info{flex:1;min-width:0}
.agd-l1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.agd-l1 b{font-size:var(--fs-body-sm)}
.agd-l1>span:not(.tag):not(.agd-ia){font-size:var(--fs-small);color:var(--muted)}
.agd-ia{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.agd-l2{font-size:var(--fs-small);color:var(--ink-2);margin-top:2px}
.agd-l3{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.agd-dado{font-size:var(--fs-caption);padding:3px 8px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.agd-acoes{flex:none;display:flex;gap:6px;align-items:center}
@media(max-width:640px){.agd-item{flex-wrap:wrap}.agd-acoes{width:100%;padding-left:76px}}

/* Cabe numa tela no computador: calendário fixo, lista rola por dentro. */
@media (min-width:1000px) and (min-height:600px){
  .gm-view:has(.agd-grid){flex:none;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;height:calc(100dvh - var(--top-h,69px))}
  .gm-view:has(.agd-grid) .agd-grid{flex:1;min-height:0;align-items:stretch}
  .gm-view:has(.agd-grid) .agd-lado{overflow:auto}
  .gm-view:has(.agd-grid) .agd-lista{flex:1;min-height:0}
}

/* Modais */
.agd-form .au-err[hidden],.agd-cfg .au-err[hidden]{display:none}
.agd-form h3,.agd-cfg h3{margin-bottom:4px}
.gm-modal-card p.agd-sub{font-size:var(--fs-body-sm);margin-bottom:4px}
.agd-form{display:flex;flex-direction:column;gap:12px}
.agd-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.agd-opc{font-weight:500;color:var(--dim)}
.agd-slots{display:flex;flex-wrap:wrap;gap:6px;max-height:156px;overflow:auto;padding:2px}
.agd-slot{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.agd-slot:hover{border-color:var(--violet)}
.agd-slot.on{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}
.agd-slots-msg{font-size:var(--fs-small);color:var(--muted);padding:8px 0}

.gm-modal-card.wide.agd-cfg-card{max-width:820px}
.agd-cfg{display:flex;flex-direction:column;gap:12px}
.agd-cfg-abas{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.agd-cfg-abas button{padding:9px 12px;font-size:var(--fs-small);font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.agd-cfg-abas button.on{color:var(--ink);border-bottom-color:var(--ink)}
.agd-cfg-corpo{min-height:320px;max-height:min(56vh,520px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px}
.agd-tab-lista{display:flex;flex-direction:column;gap:8px}
.agd-cfg-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.agd-cfg-linha>.input:first-child{flex:1;min-width:180px}
.agd-mini{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.agd-mini .select,.agd-mini .input{height:38px;font-size:var(--fs-small);min-width:118px}
.agd-largo .select{min-width:260px}
.agd-serv .agd-mini .input{width:118px}
.agd-serv{align-items:flex-end}
.agd-hor .input{width:120px;height:38px}
.agd-hor.off{opacity:.7}
.agd-dia-chk{display:flex;align-items:center;gap:8px;min-width:150px;font-size:var(--fs-body-sm);font-weight:600;cursor:pointer}
.agd-fechado{font-size:var(--fs-small);color:var(--dim)}
.agd-rotulos{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.agd-rotulos>span{font-weight:700;color:var(--ink-2);align-self:center}
.agd-rotulos label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-caption);font-weight:600}
.agd-rotulos .input{height:34px;width:150px;font-size:var(--fs-small)}
.agd-prof{align-items:flex-start}
.agd-prof>.input:first-child{max-width:220px}
.agd-faz{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:200px}
.agd-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--fs-small);cursor:pointer}
.agd-chip:has(input:checked){border-color:var(--ink);background:var(--surface-2)}
.agd-dica{font-size:var(--fs-small);color:var(--muted);margin:0}
.gm-modal-card p.agd-dica{font-size:var(--fs-small);margin:0}
.agd-vazio-cfg{font-size:var(--fs-small);color:var(--dim);margin:4px 0}
.agd-bloco{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.agd-bloco:last-child{border-bottom:none}
.agd-bloco h4{margin:0;font-size:var(--fs-body-sm)}
.agd-bloco .pref-row{padding:8px 0}
.agd-limites{display:flex;flex-wrap:wrap;gap:12px}
.agd-limites .select{min-width:190px}
.agd-folga{padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.agd-folga b{font-size:var(--fs-small);min-width:190px}
.agd-folga span{flex:1;font-size:var(--fs-small);color:var(--muted)}
.agd-folga-add .input,.agd-folga-add .select{width:auto;height:38px;font-size:var(--fs-small)}
.agd-folga-add #agFolgaMotivo{flex:1;min-width:140px}

.agd-serv{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px 34px;gap:8px;align-items:center}
.agd-serv .input,.agd-serv .select{height:38px;font-size:var(--fs-small)}
.agd-serv-cab span{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.agd-serv-cab{margin-bottom:-4px}
.agd-cfg-linha .input{height:38px}
.agd-cfg-corpo{height:min(56vh,470px);min-height:0}
.agd-duas-fixa{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.agd-duas-fixa{grid-template-columns:1fr}.agd-serv{grid-template-columns:minmax(0,1fr) 96px 80px 34px}}
.agd-quando{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:560px){.agd-quando{grid-template-columns:1fr}}
.agd-quando .agd-slots{min-height:42px;align-content:flex-start}
.agd-link{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Agenda: janelas livres, exportar, atalhos e resumo da configuração */
.agd-exportar{margin-left:auto}
.agd-livre{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:9px 12px;margin:6px 0;border:1px dashed var(--line-2);border-radius:12px;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}
.agd-livre:hover{border-color:var(--ink);background:var(--surface-2);color:var(--ink)}
.agd-livre:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.agd-livre .agd-hora b{font-size:var(--fs-body-sm);color:var(--muted)}
.agd-livre-txt{flex:1;font-size:var(--fs-small);font-weight:600;display:flex;align-items:center;gap:6px}
.agd-livre-acao{font-size:var(--fs-small);font-weight:700;color:var(--ink);opacity:0;transition:opacity .15s}
.agd-livre:hover .agd-livre-acao,.agd-livre:focus-visible .agd-livre-acao{opacity:1}
@media(hover:none){.agd-livre-acao{opacity:1}}
.agd-nome{font-size:var(--fs-body-sm);font-weight:700;color:var(--ink);text-decoration:none}
.agd-nome:hover{text-decoration:underline;text-underline-offset:3px}
.agd-atalhos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--muted)}
.agd-atalhos>span{font-weight:700;color:var(--ink-2);margin-right:4px}
button.agd-chip{background:var(--surface);color:var(--ink);font-weight:600}
button.agd-chip:hover{border-color:var(--ink)}
.agd-copiar{font-size:var(--fs-small);font-weight:600;color:var(--muted);opacity:0;transition:opacity .15s}
.agd-hor:hover .agd-copiar,.agd-copiar:focus-visible{opacity:1}
@media(hover:none){.agd-copiar{opacity:1}}
.agd-cfg-rodape{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.agd-cfg-rodape .eq-botoes{margin:0 0 0 auto}
.gm-modal-card p.agd-cfg-resumo{flex:1;min-width:240px;margin:0;font-size:var(--fs-small);color:var(--muted);line-height:1.45}
.agd-cfg-resumo i{color:var(--ink);margin-right:4px}
.agd-cfg-resumo b{color:var(--ink)}

/* Créditos v2: escolher pacote + resumo com botão de pagar */
.cr-pacs{margin-top:14px}
.cr-pac{padding:20px 16px 16px;gap:3px}
.cr-pac.rec{border-color:var(--line);box-shadow:none}
.cr-pac.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface-2)}
.cr-pac em.eco{background:var(--ok-soft);color:var(--ok-texto)}
.cr-pac-radio{position:absolute;top:16px;right:14px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);transition:border-color .15s}
.cr-pac.sel .cr-pac-radio{border:5px solid var(--ink)}
.cr-pac b{margin-bottom:2px}
.cr-pac-preco{font-size:1.15rem;font-family:var(--f-head)}
.cr-pac-dura{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:6px;padding-top:8px;border-top:1px solid var(--line);width:100%}
.cr-checkout{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.cr-checkout:empty{display:none}
.cr-checkout-b{flex:1;display:flex;flex-direction:column;gap:2px}
.cr-checkout-b span{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.cr-checkout-b b{font-size:1.05rem;color:var(--text)}
@media(max-width:560px){.cr-pacs{grid-template-columns:1fr}.cr-checkout{flex-direction:column;align-items:stretch}}
.cr-pac em{z-index:1}
.cr-pac em.eco{background:var(--surface);border:1px solid var(--ok);color:var(--ok-texto)}

/* Perfil v2 */
.perf-grid{grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr)}
.perf-card .card-head{display:flex;align-items:center}
.perf-card .card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.perf-estado{font-size:var(--fs-small);color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.perf-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.perf-estado.pendente{color:var(--warn-texto);font-weight:600}
.perf-estado.pendente::before{background:var(--warn)}
.perf-card .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.perf-olho{position:relative;display:flex}
.perf-olho .input{padding-right:42px}
.perf-olho-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:8px;color:var(--dim)}
.perf-olho-btn:hover{color:var(--ink);background:var(--surface-2)}
.perf-forca{display:flex;align-items:center;gap:10px;margin-top:8px}
.perf-forca[hidden]{display:none}
.perf-forca span{flex:1;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.perf-forca i{display:block;height:100%;border-radius:inherit;background:var(--danger);transition:width .2s,background .2s}
.perf-forca.media i{background:var(--warn)}
.perf-forca.boa i{background:var(--ok)}
.perf-forca small{font-size:var(--fs-caption);font-weight:700;color:var(--muted);min-width:110px;text-align:right}
.perf-remover{width:34px;padding:0}
.perf-forca small{min-width:0}
.perf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:980px){.perf-grid{grid-template-columns:1fr}}
.perf-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.perf-campos{grid-template-columns:1fr}}
.perf-hero{padding:18px 24px;margin-bottom:12px}
.perf-grid{gap:12px}
.perf-side{gap:12px}
.perf-card .card-pad{padding-top:16px;padding-bottom:16px}
.perf-so-dono{font-weight:500;color:var(--dim)}

/* Canais v3 — cartões de canal + vitrine */
.cnl-sec-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cnl-sec-head h2,.cn-mais-head h2{font-size:1.02rem;font-weight:700;margin:0;color:var(--ink);display:flex;align-items:center;gap:8px}
.cnl-conta{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--muted)}
.cnl-filtros{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cnl-filtros[hidden]{display:none}
.cnl-filtros .chat-list-search{min-width:220px}
.cnl-filtros .select{width:auto;min-width:170px;height:38px}
.cnl-carregando{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r)}
.cnl-lista{display:flex;flex-direction:column;gap:10px}
.cnl-item{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:border-color .15s}
.cnl-item:hover{border-color:var(--line-2)}
.cnl-item.err,.cnl-item.off{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.cnl-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;color:var(--cor);background:color-mix(in srgb,var(--cor) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--cor) 22%,transparent)}
.cnl-main{flex:1;min-width:0}
.cnl-l1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cnl-l1 b{font-size:var(--fs-body);color:var(--ink)}
.cnl-l2{margin-top:3px;font-size:var(--fs-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnl-sep{color:var(--dim);margin:0 2px}
.cnl-status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--surface-2);color:var(--muted)}
.cnl-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cnl-status.on{background:var(--ok-soft);color:var(--ok-texto)}
.cnl-status.warn{background:var(--warn-soft);color:var(--warn-texto)}
.cnl-status.err,.cnl-status.off{background:var(--danger-soft);color:var(--danger-texto)}
.cnl-agente{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left;cursor:pointer;transition:border-color .15s;min-width:170px}
.cnl-agente:hover{border-color:var(--ink)}
.cnl-agente .cell-av{width:32px;height:32px;font-size:.72rem}
.cnl-agente-b{display:flex;flex-direction:column;line-height:1.2;min-width:90px}
.cnl-agente-b small{font-size:.66rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.cnl-agente-b b{font-size:var(--fs-small);color:var(--ink)}
.cnl-agente>i{font-size:.65rem;color:var(--dim)}
.cnl-acoes{display:flex;align-items:center;gap:8px;min-width:170px;justify-content:flex-end}
@media(max-width:760px){.cnl-item{flex-wrap:wrap}.cnl-main{flex-basis:calc(100% - 64px)}.cnl-agente{flex:1}}
.cn-mais-wrap{margin-top:28px}
.cn-mais-head p{color:var(--muted);font-size:var(--fs-body-sm)}
button.cn-sug{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);min-height:0}
.cn-sug-acao{border-top:0;padding-top:18px}
.cn-sug-acao .btn{width:100%;justify-content:center}
button.cn-sug:hover .cn-sug-acao .btn-ghost{border-color:var(--ink)}
.cn-sug-topo em{background:var(--ok-soft);color:var(--ok-texto);border-color:transparent}
@media(max-width:760px){.cnl-acoes{min-width:0}}
/* Agentes do canal (equipe) */
.cnl-avs{display:flex}
.cnl-avs .cell-av{box-shadow:0 0 0 2px var(--surface)}
.cnl-avs .cell-av+.cell-av{margin-left:-10px}
.cnl-mais{font-weight:600;color:var(--dim);font-size:.78rem}
.cag-lista{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.cag-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .15s}
.cag-item.on{border-color:var(--ink)}
.cag-topo{display:flex;align-items:center;gap:10px;cursor:pointer}
.cag-topo .cell-av{width:32px;height:32px;font-size:.72rem}
.cag-nome{flex:1;display:flex;flex-direction:column;line-height:1.25}
.cag-nome small{color:var(--dim);font-size:var(--fs-small)}
.cag-assunto{margin-top:10px}
.cag-vazio{color:var(--dim);font-size:var(--fs-small);margin:0}
.gm-modal-pe{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
/* Equipe v2 — mesmo padrão de Canais */
.eqm-av{width:44px;height:44px;font-size:.9rem;flex:none}
.eqm-voce{font-size:.7rem;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.eqm-perfil{display:inline-flex;align-items:center;gap:8px;min-width:200px;font-size:var(--fs-small);font-weight:600;color:var(--text)}
.eqm-perfil i{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.78rem}
.eqm-lugares{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--muted)}
.eqm-lugares b{color:var(--ink)}
.eqm-barra{width:120px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.eqm-barra i{display:block;height:100%;background:var(--ink);border-radius:inherit}
.eqm-ic{background:var(--surface-2);color:var(--ink)}
@media(min-width:1200px){.eqm-perfis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.eqm-perfil{min-width:0}.eqm-lugares{margin-left:0;width:100%}}
/* Planos: item não incluso fica apagado, inclusive no cartão escuro */
#gm-landing .lp-price li.off{color:var(--lp-ink-3,#9a96a8);text-decoration:line-through;text-decoration-color:rgba(127,127,127,.45)}
#gm-landing .lp-price li.off em{font-style:normal;font-size:.76rem;text-decoration:none;display:inline-block}
#gm-landing .lp-price--pop li.off{color:rgba(255,255,255,.38)}
#gm-landing .lp-price li.off::before{opacity:.5}
/* Agenda v2 — dia com resumo, horários com faixa de status */
.agd-resumo{display:flex;flex-direction:column;gap:0}
.agd-resumo h4{margin:0 0 6px;font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.agd-resumo div{flex-direction:row;align-items:center;justify-content:space-between;background:none;padding:9px 2px;border-radius:0;border-top:1px solid var(--line)}
.agd-resumo div:first-of-type{border-top:0}
.agd-resumo span{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--muted);font-weight:500}
.agd-resumo span i{width:16px;text-align:center;color:var(--dim)}
.agd-resumo b{font-size:var(--fs-body-sm)}
.agd-dia-head{padding:14px 0 12px}
.agd-dia-head h3{display:flex;align-items:center;gap:8px;font-size:1.02rem}
.agd-hoje{font-size:.68rem!important;font-weight:700;color:var(--on-accent,#fff)!important;background:var(--ink);border-radius:999px;padding:2px 8px}
.agd-dia-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.agd-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:.74rem!important;font-weight:600;color:var(--muted)!important}
.agd-chip.on{background:var(--ok-soft);border-color:transparent;color:var(--ok-texto)!important}
.agd-item{position:relative;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 18px;margin:8px 0;background:var(--surface)}
.agd-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--ink)}
.agd-item.st-pendente::before{background:var(--warn,#d97706)}
.agd-item.st-concluido::before{background:var(--ok,#16a34a)}
.agd-item.st-faltou::before,.agd-item.st-cancelado::before{background:var(--line-2)}
.agd-item.pendente{margin:8px 0;padding:12px 14px 12px 18px;background:linear-gradient(90deg,var(--warn-soft),var(--surface) 55%)}
.agd-hora{width:70px}
.agd-hora b{font-size:1.05rem}
.agd-livre{margin:8px 0;padding:10px 14px 10px 18px;border-radius:12px}
.agd-livre .agd-hora b{font-weight:600}
.agd-livre-txt{color:var(--muted)}

.agd-acoes .agd-x:hover{color:var(--danger-texto,#b91c1c);border-color:currentColor}
@media(max-width:760px){.agd-item{flex-wrap:wrap}.agd-acoes{width:100%;justify-content:flex-end}}
.cag-modal{text-align:left}
.cag-modal>p{margin:6px 0 16px;color:var(--muted)}
.cag-modal .field>label{display:block;text-align:left}
.cag-nome{text-align:left}
#gm-landing .lp-price li:not(.off)::before{content:"✓";font-weight:700;color:#16a34a}
#gm-landing .lp-price--pop li:not(.off)::before{color:var(--gold-2,#e3c16f)}
#gm-landing .lp-price li.off{text-decoration:none}
/* Detalhes da transmissão */
.camp-nome{all:unset;cursor:pointer;font-weight:700;color:var(--ink)}
.camp-nome:hover{text-decoration:underline}
.camp-nome:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
.cpd{text-align:left}
.cpd-head{display:flex;align-items:center;gap:10px;padding-right:32px}
.cpd-head h3{margin:0}
.cpd-sub{margin:4px 0 14px;color:var(--muted);font-size:var(--fs-small)}
.cpd-alerta{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn-texto);font-size:var(--fs-small)}
.cpd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cpd h4{margin:0 0 8px;font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.cpd-bolha{background:#dcf8c6;color:#111b21;border-radius:12px 12px 12px 4px;padding:8px;max-height:220px;overflow:auto;box-shadow:var(--sh-sm)}
.cpd-bolha img{display:block;width:120px;height:120px;object-fit:cover;border-radius:8px;margin-bottom:6px}
.cpd-bolha p{margin:0;padding:2px 4px;font-size:var(--fs-body-sm);line-height:1.45;white-space:normal;word-break:break-word}
.cpd-ritmo{display:flex;gap:8px;margin:0 0 10px;font-size:var(--fs-small);color:var(--text);line-height:1.45}
.cpd-ritmo i{color:var(--dim);margin-top:3px}
.cpd-prog{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:var(--fs-small);color:var(--muted)}
.cpd-prog .camp-bar{flex:1}
.cpd-contas{display:flex;gap:14px;margin-top:8px;font-size:var(--fs-small);color:var(--muted)}
.cpd-contas b{color:var(--ink)}
.cpd-lista-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.cpd-lista-head .input{max-width:240px}
.cpd-lista{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.cpd-dest{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.cpd-dest:first-child{border-top:0}
.cpd-dest[hidden]{display:none}
.cpd-dest .cell-av{width:30px;height:30px;font-size:.7rem;flex:none}
.cpd-dest-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cpd-dest-b b{font-size:var(--fs-body-sm)}
.cpd-dest-b small{color:var(--muted);font-size:var(--fs-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpd-quando{color:var(--dim);font-size:var(--fs-caption)}
.cpd-nota{display:block;padding:12px;color:var(--muted);font-size:var(--fs-small);margin:0}
@media(max-width:700px){.cpd-grid{grid-template-columns:1fr}}
.camp-nome{display:block;width:fit-content}
/* --text e --accent eram usados em ~40 regras e nunca foram definidos (o
   filtro ativo do Chat ficava sem fundo e o foco sem contorno). Ficam como
   apelidos dos tokens reais, no mesmo elemento em que o tema os redefine. */
#gm-app,.gm-modal,.gm-menu,.gm-toast-wrap{--text:var(--ink);--accent:var(--violet)}
/* Testar agente — conversa de teste com cara de WhatsApp */
.gm-modal .tst{--wpp-fundo:#efe7dd;--wpp-bolha-nossa:#d9fdd3;--wpp-bolha-deles:#ffffff;--wpp-bolha-texto:#111b21}
body[data-theme="dark"] .gm-modal .tst{--wpp-fundo:#0b141a;--wpp-bolha-nossa:#005c4b;--wpp-bolha-deles:#202c33;--wpp-bolha-texto:#e9edef}
.gm-modal-card:has(.tst){padding:0;overflow:hidden;width:min(560px,calc(100vw - 32px));max-width:560px}
.tst{display:flex;flex-direction:column;height:min(640px,calc(100vh - 80px));text-align:left}
.tst-topo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tst-topo .cell-av{width:40px;height:40px;flex:none;overflow:hidden}
.tst-topo .cell-av img{width:100%;height:100%;object-fit:cover}
.tst-tit{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tst-tit b{font-size:var(--fs-body);color:var(--ink)}
.tst-tit small{font-size:var(--fs-caption);color:var(--muted)}
.tst-x{position:static;flex:none}
.tst-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;background-color:var(--wpp-fundo)}
.tst-b{max-width:78%;padding:8px 11px;border-radius:10px;font-size:var(--fs-body-sm);line-height:1.45;color:var(--wpp-bolha-texto);word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.tst-b.eu{align-self:flex-end;background:var(--wpp-bolha-nossa);border-top-right-radius:3px}
.tst-b.ele{align-self:flex-start;background:var(--wpp-bolha-deles);border-top-left-radius:3px}
.tst-evento{align-self:center;max-width:90%;margin:4px 0;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);font-size:.74rem;color:var(--muted);text-align:center;line-height:1.4}
.tst-evento i{color:var(--violet);margin-right:4px}
.tst-digitando{display:flex;gap:4px;padding:12px 14px}
.tst-digitando span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:tstPonto 1.2s infinite}
.tst-digitando span:nth-child(2){animation-delay:.2s}
.tst-digitando span:nth-child(3){animation-delay:.4s}
@keyframes tstPonto{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.8;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tst-digitando span{animation:none}}
.tst-vazio{margin:auto;text-align:center;color:var(--muted);max-width:360px}
.tst-vazio>i{font-size:1.8rem;color:var(--dim)}
.tst-vazio p{margin:8px 0 14px;font-size:var(--fs-body-sm)}
.tst-sug{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tst-sug-b{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.tst-sug-b:hover{border-color:var(--ink)}
.tst-pe{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface)}
.tst-pe .input{flex:1}
.ad-testar{width:100%;justify-content:center;margin:10px 0 4px}
/* Tela do agente no celular: a coluna "1fr" crescia até o item mais largo
   (seletor de modelo, guia) e a página inteira vazava pro lado. */
@media (max-width:1200px){.agent-detail{grid-template-columns:minmax(0,1fr)}.agent-detail-side,.agent-detail-main{min-width:0}}
@media (max-width:600px){.gm-modal-card:has(.tst){width:100%;max-width:none}.tst{height:calc(100dvh - 60px)}.tst-topo{flex-wrap:wrap}.tst-tit{flex-basis:calc(100% - 110px)}}
@media (max-width:600px){.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}}
.cnx-selo{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--ok-soft);color:var(--ok-texto);font-size:.68rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}
.cnx-lista{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.cnx-linha{display:flex;align-items:center;gap:14px;padding:14px 18px}
.cnx-linha+.cnx-linha{border-top:1px solid var(--line)}
.cnx-ic{width:40px;height:40px;border-radius:12px;font-size:1.15rem}
.cnx-linha-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cnx-linha-b b{font-size:var(--fs-body-sm);color:var(--ink)}
.cnx-linha-b span{font-size:var(--fs-small);color:var(--muted)}
.cnx-linha .btn{flex:none;min-width:96px;justify-content:center}
@media(max-width:760px){.cnx-linha{flex-wrap:wrap}.cnx-linha .btn{width:100%}}
/* Planos v2 — números lado a lado + só o que cada plano acrescenta */
.pln-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.pln-bar p{margin:0;font-size:var(--fs-body-sm);color:var(--muted);display:flex;align-items:center;gap:8px}
.pln-bar p i{color:var(--ink)}
.pln-bar p b{color:var(--ink)}
.pln-cupom{display:flex;align-items:center;gap:8px}
.pln-cupom .au-inp{width:220px}
.pln-cupom-link,.pln-link{all:unset;cursor:pointer;font-size:var(--fs-small);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;border-bottom:1px dashed var(--line-2);padding-bottom:1px}
.pln-cupom-link:hover,.pln-link:hover{border-bottom-color:var(--ink)}
.pln-cupom-link:focus-visible,.pln-link:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.pln-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;padding-top:12px}
.pln{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);padding:20px 22px}
.pln.pop{border-color:var(--line);box-shadow:var(--sh-sm)}
.pln.atual{border-color:var(--line);box-shadow:var(--sh-sm)}
.pln-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;margin-bottom:10px}
.pln-topo h3{margin:0;font-size:1.15rem;color:var(--ink)}
.pln-selo{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pln-selo.atual{border-color:transparent;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pln-preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pln-preco b{font-family:var(--f-head);font-size:2rem;line-height:1;color:var(--ink);letter-spacing:-.02em;display:inline-flex;align-items:flex-start;gap:2px}
.pln-preco span{font-size:var(--fs-small);color:var(--muted)}
.pln-preco s{font-size:var(--fs-small);color:var(--dim);width:100%}
.pln-tag{align-self:flex-start;margin-top:8px}
.pln-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin:12px 0}
.pln-nums{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.pln-nums div{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:6px 4px}
.pln-nums div+div{border-left:1px solid var(--line)}
.pln-nums b{font-family:var(--f-head);font-size:1.05rem;color:var(--ink)}
.pln-nums small{font-size:.7rem;color:var(--muted)}
.pln-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;margin-top:12px}
.pln-lista li{display:flex;gap:10px;color:var(--text);align-items:baseline;font-size:var(--fs-small);line-height:1.35}
.pln-lista i{margin-top:4px;font-size:.7rem;color:var(--ok)}
@media(max-width:1100px){.pln-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.pln-cupom .input{height:36px;font-size:var(--fs-body-sm)}

/* Agentes: canais que cada agente atende */
.ag-tags:empty{display:none}
.agc-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2,var(--bg));font-size:var(--fs-small);font-weight:600;color:var(--ink);white-space:nowrap}
.agc-chip i{font-size:13px}
.agc-chip small{font-size:11px;font-weight:500;color:var(--dim)}
.agc-chip.vazio{font-weight:500;color:var(--dim);border-style:dashed;background:transparent;text-decoration:none}
.agc-chip.vazio:hover{color:var(--violet);border-color:var(--violet)}
.agc-linha{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}

/* Logo: o arquivo é a imagem original da empresa, sem edição. Ela vem com
   cantos claros em volta do quadrado dourado (JPG não tem transparência);
   aqui só se esconde essa sobra na exibição, pra não virar borda branca no
   tema escuro. Medido no arquivo: quadrado a ~5px da borda, raio ~55px (de 256). */
.marca-logo{display:block;clip-path:inset(4.5% round 20%)}

/* Canais: atividade dos últimos 7 dias */
.cna-resumo{display:grid;grid-template-columns:1.35fr 1fr 1fr;margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.cna-cel{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:14px;padding:14px 18px;min-width:0}
.cna-cel+.cna-cel{border-left:1px solid var(--line)}
.cna-cel small{grid-column:1;font-size:var(--fs-caption);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.cna-cel b{grid-column:1;font-family:var(--f-head);font-size:24px;line-height:1.25;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cna-cel span{grid-column:1;font-size:var(--fs-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cna-cel .cna-barras{grid-column:2;grid-row:1/4;align-self:end;height:44px;width:auto}
.cna-barras{display:inline-flex;align-items:flex-end;gap:3px;height:30px;flex:0 0 auto}
.cna-barras i{display:block;width:6px;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--violet) 38%,transparent)}
.cna-barras i.hoje{background:var(--violet)}
.cna-cel .cna-barras i{width:8px}
.cna-canal{display:flex;align-items:center;gap:18px;padding:0 18px;border-left:1px solid var(--line);border-right:1px solid var(--line);flex:0 0 auto}
.cna-canal.vazio span{font-size:var(--fs-small);color:var(--dim)}
.cna-canal-n{display:flex;flex-direction:column;line-height:1.2}
.cna-canal-n b{font-size:var(--fs-body);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cna-canal-n small{font-size:var(--fs-caption);color:var(--dim);white-space:nowrap}
@media(max-width:1100px){.cna-canal{display:none}}
@media(max-width:900px){.cna-resumo{grid-template-columns:1fr 1fr}.cna-cel:nth-child(3){border-left:0}.cna-cel:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:480px){.cna-cel b{font-size:20px}.cna-cel .cna-barras{display:none}}
/* Colunas fixas: atividade, agentes e ações alinham de um cartão pro outro. */
.cnl-item .cna-canal{width:370px;display:grid;grid-template-columns:62px 160px 1fr;gap:16px}
.cnl-item .cnl-agente{width:190px;min-width:0}
.cnl-item .cnl-agente-b{min-width:0;flex:1}
.cnl-item .cnl-agente-b b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.cnl-item .cnl-agente{width:auto}}
.cnl-item .cna-canal.vazio{display:flex}
.cnl-item .cnl-acoes{min-width:0;justify-content:flex-end;width:236px}
@media(max-width:1100px){.cnl-item .cnl-acoes{width:auto}}

/* Planos: consumo real guiando a escolha */
.pln-uso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;margin:0 0 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-sm)}
.pln-uso-c{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 18px}
.pln-uso-c+.pln-uso-c{border-left:1px solid var(--line)}
.pln-uso-c small{font-size:var(--fs-caption);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pln-uso-c b{font-family:var(--f-head);font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.pln-uso-c b em{font-style:normal;font-family:var(--f-body,inherit);font-size:var(--fs-small);font-weight:500;color:var(--muted)}
.pln-uso-c span{font-size:var(--fs-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pln-uso-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:10px 18px;border-left:1px solid var(--line)}
.pln-bar .pln-uso-links{flex-direction:row;gap:18px;padding:0;border:0}
.pln-cupom-solto{justify-content:flex-end;margin:-4px 0 12px}
.pln-selo.ideal{background:color-mix(in srgb,var(--violet) 14%,transparent);border-color:transparent;color:var(--violet)}
.pln.ideal{border-color:var(--line-2);box-shadow:var(--sh-sm)}
.pln-pcred{margin:4px 0 0;font-size:var(--fs-caption);color:var(--dim);font-variant-numeric:tabular-nums}
.pln-fit{margin-top:8px}
.pln-fit-t{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-caption);color:var(--muted);margin-bottom:5px}
.pln-fit-t b{font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
.pln-fit-bar{height:6px;border-radius:999px;background:var(--surface-2,var(--line));overflow:hidden}
.pln-fit-bar i{display:block;height:100%;border-radius:inherit;background:var(--ok)}
.pln-fit.limite .pln-fit-bar i{background:var(--warn,#d97706)}
.pln-fit.nao .pln-fit-bar i{background:var(--danger)}
.pln-fit.nao .pln-fit-t span{color:var(--danger)}
/* cabe numa tela: cartões um pouco mais justos */
@media(max-width:900px){.pln-uso{grid-template-columns:1fr 1fr}.pln-uso-c:nth-child(3){border-left:0}.pln-uso-c:nth-child(n+3),.pln-uso-links{border-top:1px solid var(--line)}.pln-uso-links{flex-direction:row;justify-content:flex-start;border-left:0}}
@media(max-width:520px){.pln-uso{grid-template-columns:1fr}.pln-uso-c+.pln-uso-c{border-left:0;border-top:1px solid var(--line)}}

/* Comparar planos (janela) */
.gm-modal-card:has(.plc){width:min(760px,calc(100vw - 32px));max-width:760px}
.plc h3{margin:0}
.plc>p{margin:4px 0 14px;font-size:var(--fs-body-sm);color:var(--muted);margin-bottom:8px}
.plc-t{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm);text-align:left}
.plc-t th{font-size:var(--fs-body);color:var(--ink);text-align:center;border-bottom:1px solid var(--line);padding:6px 12px 8px}
.plc-t th small{display:block;font-size:var(--fs-caption);font-weight:500;color:var(--muted)}
.plc-t td{border-bottom:1px solid var(--line);color:var(--text);padding:6px 12px}
.plc-t td+td{text-align:center;width:120px}
.plc-t td b{color:var(--ink);font-variant-numeric:tabular-nums}
.plc-t .fa-check{color:var(--ok)}
.plc-t .fa-minus{color:var(--dim)}
.plc-t .atual{background:color-mix(in srgb,var(--ok) 7%,transparent)}
.plc-g td{font-size:var(--fs-caption);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);border-bottom:0;padding:10px 12px 4px}
@media(max-width:600px){.plc-t td+td{width:auto}.plc-t td,.plc-t th{padding:7px 6px}}
.pln-grid+.au-err+.plan-foot,#planGridWrap+.plan-foot{margin-top:12px}

/* Conectar o Discord */
.gm-modal-card:has(.dsc){width:min(560px,calc(100vw - 32px));max-width:560px;text-align:left}
.dsc-topo{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.dsc-topo h3{margin:0}
.dsc-topo p{margin:4px 0 0;font-size:var(--fs-body-sm);color:var(--muted)}
.dsc-passos{list-style:none;margin:0 0 16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2,var(--bg));border:1px solid var(--line);border-radius:12px}
.dsc-passos li{display:flex;gap:12px;font-size:var(--fs-body-sm);color:var(--text);line-height:1.45}
.dsc-passos a{color:var(--violet);font-weight:600}
.dsc-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--surface);font-size:.72rem;font-weight:700}
.dsc-ok{text-align:center;padding:6px 0}
.dsc-ok h3{margin:10px 0 4px}
.dsc-ok p{margin:0 0 6px;color:var(--muted);font-size:var(--fs-body-sm)}
.dsc-ok .gm-modal-pe{justify-content:center}
.dsc-ok-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:1.3rem}

/* Planos: esqueleto enquanto os dados chegam (a grade entra uma vez só) */
.pln-esq-bar{height:84px;margin:0 0 14px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line)}
.pln-esq-card{height:462px;background:linear-gradient(100deg,var(--surface) 40%,color-mix(in srgb,var(--line) 60%,var(--surface)) 50%,var(--surface) 60%) 0 0/200% 100%;animation:plnEsq 1.4s linear infinite}
@keyframes plnEsq{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pln-esq-card{animation:none}}

/* Confete ao concluir um tour */
.confete{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:100000}

/* Tour v2: seta pro alvo, pontinhos, "Já feito", camada que segura cliques */
.tour-bloq{position:fixed;inset:0;z-index:99989;background:transparent}
.tour-card[data-lado]::before{content:"";position:absolute;width:14px;height:14px;background:var(--surface);transform:rotate(45deg);border-radius:3px}
.tour-card[data-lado="direita"]::before{left:-6px;top:calc(var(--seta-y,30px) - 7px)}
.tour-card[data-lado="baixo"]::before{top:-6px;left:calc(var(--seta-x,30px) - 7px)}
.tour-card[data-lado="cima"]::before{bottom:-6px;left:calc(var(--seta-x,30px) - 7px)}
.tour-feito,.tour-falta{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;font-size:.66rem;letter-spacing:.02em;text-transform:none}
.tour-feito{background:var(--ok-soft);color:var(--ok-texto)}
.tour-falta{background:color-mix(in srgb,var(--warn,#d97706) 16%,transparent);color:var(--warn,#b45309)}
.tour-pontos{display:flex;gap:5px;align-items:center}
.tour-pontos i{width:6px;height:6px;border-radius:999px;background:var(--line-2,var(--line));transition:width .25s,background .25s}
.tour-pontos i.foi{background:color-mix(in srgb,var(--gold,#c9a24b) 55%,transparent)}
.tour-pontos i.on{width:18px;background:var(--grad-gold,#c9a24b)}
.tour-botoes{display:flex;gap:8px;margin-left:auto}
.tour-card.center .tour-botoes{margin:0}
.tour-card.center .tour-pontos{justify-content:center}
@media (max-width:640px){.tour-card.center{width:calc(100vw - 32px)}}
@media(max-width:1100px){.cnl-item .cna-canal,.cnl-item .cna-canal.vazio{display:none}}

/* Planos v4: lista completa em todo cartão + Corporate em destaque */
.pln-lista li span{flex:1}
.pln-lista li.off{color:color-mix(in srgb,var(--dim) 80%,transparent)}
.pln-lista li.off i{color:var(--dim);font-size:.66rem;opacity:.7}
.pln-lista li.off span{text-decoration-color:color-mix(in srgb,var(--dim) 55%,transparent);text-decoration:none}
.pln-lista li.off em{font-style:normal;font-size:.68rem;color:var(--dim);white-space:nowrap}
.pln-lista li.novo span{font-weight:700;color:var(--ink)}
.pln-eco{display:inline-block;border-radius:999px;font-weight:700;background:none;padding:0;margin-left:4px;color:var(--ok-texto,var(--ok))}
.pln.top{border-color:#c9a24b;box-shadow:0 0 0 1px #c9a24b,0 18px 40px -18px rgba(201,162,75,.55);background:linear-gradient(180deg,color-mix(in srgb,#c9a24b 9%,var(--surface)) 0,var(--surface) 160px)}
.pln-cta-top{background:var(--grad-gold)!important;color:#25215c!important;box-shadow:0 10px 24px -10px rgba(201,162,75,.8)!important}
.pln-cta-top:hover{filter:brightness(1.05)}
.pln.top.atual{border-color:#c9a24b;box-shadow:0 0 0 1px #c9a24b,0 18px 40px -18px rgba(201,162,75,.55)}
.pln-trial-nota{font-size:var(--fs-small);color:var(--muted)}
.plan-foot{margin-top:10px;padding:9px 16px}
/* Planos: acabamento (menos peso visual) */
.plan-foot{background:transparent;border:0;padding:4px 2px 0;margin-top:14px}
.plan-foot .plan-trust li{font-weight:500}

/* Convite de plano (conta sem plano, qualquer página) */
.convite-plano{text-align:center}
.convite-plano-aba{margin:0 0 -6px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.convite-plano-nota{margin:10px 0 0;font-size:var(--fs-small);color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.convite-plano-nota i{color:var(--ok)}
.convite-plano .empty-hero{padding-bottom:0}
/* Cor da peça padrão do convite: some no escuro se for o mesmo marinho do claro */
#gm-app,.gm-modal{--eh-peca:#4f46e5}
body[data-theme="light"] #gm-app,body[data-theme="light"] .gm-modal{--eh-peca:#25215c}

/* Planos v5: um destaque só (Corporate), fitas na borda, preço tipográfico */
.pln-fita{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.pln-fita.top{background:var(--grad-gold);color:#25215c;border-color:transparent;box-shadow:0 6px 16px -6px rgba(201,162,75,.8)}
.pln-selo.atual i{color:var(--ok)}
.pln-rs{font-size:1rem;font-weight:700;margin-top:6px;margin-right:3px;color:var(--muted)}
.pln-cent{font-size:1rem;font-weight:700;margin-top:6px;color:var(--muted)}

/* Funil v2: valor em R$ por coluna e no resumo, cartão mais leve, coluna vazia como área de soltar */
.kb-sum-item em{display:block;font-style:normal;font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
.kb-col-tit{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.kb-col-tit small{font-size:var(--fs-caption);font-weight:700;color:var(--ok-texto,var(--ok));font-variant-numeric:tabular-nums}
.kb-col.over .kb-empty{border-color:var(--kb-c);background:color-mix(in srgb,var(--kb-c) 8%,transparent)}
.kb-col-tit small.zero{color:var(--dim);font-weight:600}

/* Funil v3: indicadores de venda, filtros rápidos e sinais de ação no cartão */
.kb-sum{grid-template-columns:repeat(4,1fr)}
.kb-sum-item{padding:14px 18px}
.kb-sum-item b{font-variant-numeric:tabular-nums}
button.kb-sum-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--sp-3);padding:14px 18px;cursor:pointer;border-left:1px solid var(--line);border-radius:0 var(--r) var(--r) 0;transition:background .15s}
button.kb-sum-item:hover{background:var(--surface-2)}
button.kb-sum-item:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.kb-sum-atencao.tem .kb-sum-ic{background:color-mix(in srgb,#f97316 16%,transparent);color:#ea580c}
.kb-sum-atencao.tem b{color:#ea580c}
.kb-filtros{display:flex;flex-wrap:wrap;gap:6px}
.kb-filtros button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:var(--fs-small);font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.kb-filtros button span{font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-variant-numeric:tabular-nums}
.kb-filtros button:hover{border-color:var(--line-2);color:var(--ink)}
.kb-filtros button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.kb-filtros button.on span{background:color-mix(in srgb,var(--surface) 22%,transparent);color:var(--surface)}
.kb-filtros button.alerta:not(.on) span{background:color-mix(in srgb,#f97316 18%,transparent);color:#ea580c}
.kb-canal{width:auto;margin-left:auto}
.kb-sinais{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.kb-sinal{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap}
.kb-sinal.esperando{background:color-mix(in srgb,#f97316 14%,transparent);color:#c2410c}
.kb-sinal.vencida{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.kb-sinal.tarefa{background:var(--surface-2);color:var(--muted)}
.kb-sinal.parado{background:color-mix(in srgb,#eab308 14%,transparent);color:#a16207}
.kb-card.esperando{border-left:3px solid #f97316}
.kb-card.vencida{border-left:3px solid var(--danger)}
.kb-dono{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:.6rem;font-weight:800;margin-left:4px}
.kb-meta{justify-content:flex-start!important}
.kb-meta>:last-child{margin-left:auto}
.kb-empty{flex:none;min-height:110px}
@media (max-width:1100px){.kb-sum{grid-template-columns:repeat(3,1fr)}}
.kb-busca{flex:0 1 260px;min-width:180px}
.kb-canal{height:32px;padding:0 30px 0 12px;font-size:var(--fs-small);border-radius:999px}
@media (max-width:900px){.kb-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.kb-sum>:nth-child(odd){border-left:0}.kb-sum>:nth-child(n+3){border-top:1px solid var(--line)}.kb-sum>button.kb-sum-item{border-radius:0 0 var(--r) 0}}
@media (max-width:520px){.kb-sum-item,button.kb-sum-item{padding:12px 14px}.kb-sum-item b{font-size:1.2rem}}
/* Contatos: importação do app WhatsApp Business (coexistência) + "Excluir todos" */
.ct-sync{padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4)}
.ct-sync-cab{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body,.95rem)}
.ct-sync-cab .fa-whatsapp{color:var(--green,#25d366);font-size:1.1rem}
.ct-sync-linha{margin-top:var(--sp-3)}
.ct-sync-linha .gm-prog{margin:6px 0 0}
.ct-sync-rot{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600}
.ct-sync-rot i{width:16px;text-align:center;color:var(--muted)}
.ct-sync-rot span{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.ct-sync.expirou{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.ct-excluir-todos{color:var(--danger)}
.ct-excluir-todos:hover{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));color:var(--danger)}
/* Conta sem agente: aviso no Chat e na linha do canal (o bot fica calado) */
.chat-aviso-agente{display:flex;align-items:center;gap:var(--sp-3);padding:12px 16px;margin-bottom:var(--sp-3);border:1px solid color-mix(in srgb,#f97316 35%,var(--line));border-radius:var(--r);background:color-mix(in srgb,#f97316 8%,var(--surface));font-size:var(--fs-small)}
.chat-aviso-agente>i{color:#ea580c;font-size:1.1rem}
.chat-aviso-agente>span{flex:1;min-width:0}
.chat-aviso-agente .btn{flex:none}
.cnl-agente.cnl-sem-agente{text-decoration:none;color:inherit;border-color:color-mix(in srgb,#f97316 40%,var(--line))}
.cnl-agente.cnl-sem-agente>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,#f97316 14%,transparent);color:#ea580c}
.cnl-agente.cnl-sem-agente b{color:#ea580c}
@media (max-width:640px){.chat-aviso-agente{flex-wrap:wrap}.chat-aviso-agente .btn{width:100%;justify-content:center}}
.ct-sync-x{margin-left:auto;width:30px;height:30px}

/* Funil enxuto (2026-10-01): coluna = ponto de cor + nome + quantidade, "+" só
   ao passar o mouse, coluna vazia sem texto, cartão sem borda/linha extra. */
.kb-col-head{gap:8px;padding:14px 12px 10px 14px}
.kb-dot{width:9px;height:9px;border-radius:50%;background:var(--kb-c,var(--violet));flex:0 0 auto}
.kb-col-tit{flex:1}
.kb-col-valor{font-size:var(--fs-caption);font-weight:700;color:var(--ok-texto,var(--ok));font-variant-numeric:tabular-nums;white-space:nowrap}
.kb-col-head .kb-n{margin-left:0}
.kb-add{opacity:0;transition:opacity .15s,background .15s,color .15s}
.kb-col:hover .kb-add,.kb-add:focus-visible{opacity:1}
.kb-empty:empty{border-color:transparent;min-height:90px}
.kb-card .kb-meta{border-top:0;padding-top:0;margin-top:8px}
.kb-card .kb-meta:empty{display:none}
.kb-filtro-sel{margin-left:0}
@media (hover:none){.kb-add{opacity:1}}
/* "+" da coluna troca de lugar com a contagem ao passar o mouse: escondido
   por opacidade ele ainda ocupava o canto e empurrava valor e contagem. */
.kb-add{display:none;opacity:1}
.kb-col:hover .kb-add,.kb-col:focus-within .kb-add{display:grid}
.kb-col:hover .kb-n,.kb-col:focus-within .kb-n{display:none}
@media (hover:none){.kb-add{display:grid}.kb-col .kb-n{display:inline-block}}
/* Coluna estreita (1366px com 5 etapas): o valor da coluna sai (o total está
   nos indicadores do topo), telefone numa linha e selo de aviso com "…". */
.kb-col{container-type:inline-size}
@container (max-width:235px){.kb-col-valor{display:none}}
.kb-card-id small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-sinais{min-width:0}
.kb-sinal{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* A seta "abrir ficha" flutua no canto (aparece no mouse) em vez de reservar
   26px fixos: era ela que cortava nome e telefone nas colunas estreitas. */
.kb-card{position:relative}
.kb-ficha{position:absolute;top:8px;right:8px;margin:0;background:var(--surface)}
@container (max-width:235px){.kb-card{padding:10px}.kb-card-top{gap:8px}.kb-card-av{width:28px;height:28px}}

/* Equipe enxuta: dica de uma linha no lugar dos 3 cartões de perfil */
.eq-dica{display:flex;align-items:flex-start;gap:8px;margin-top:var(--sp-3);color:var(--muted)}
.eq-dica i{margin-top:3px;color:var(--dim)}

/* Canais enxuto: "Adicionar canal" em blocos pequenos e clicáveis inteiros */
.cnx-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.cnx-tile{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cnx-tile:hover{border-color:var(--line-2);box-shadow:var(--sh)}
.cnx-tile:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.cnx-tile .cnx-ic{width:36px;height:36px;font-size:1.05rem;flex:none}
.cnx-tile-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cnx-tile-b b{font-size:var(--fs-body-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnx-tile-b small{font-size:var(--fs-caption);color:var(--muted)}
.cnx-tile-seta{color:var(--dim);font-size:var(--fs-caption);transition:transform .15s,color .15s}
.cnx-tile:hover .cnx-tile-seta{color:var(--violet);transform:translateX(2px)}
.cnx-tile.destaque{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))}
.cnx-tile.destaque small{color:var(--violet);font-weight:700}
#canaisMais .cn-mais-head{margin-bottom:12px}

/* Agenda enxuta: ponto no dia com horário, robô sem texto, ⋯ por linha */
.agd-dia i.agd-ponto{display:block;width:5px;height:5px;padding:0;border-radius:50%;background:var(--violet);margin:2px auto 0}
.agd-dia.sel i.agd-ponto{background:currentColor}
.agd-ia{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%}

/* Chat: fundo liso (os rabiscos poluíam) e selo de quem atende no topo */
.chat-msgs{background-image:none}
.cm-tools{display:flex;align-items:center;gap:10px}
.cm-estado{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:var(--fs-caption);font-weight:700;white-space:nowrap}
.cm-estado.ia{background:color-mix(in srgb,var(--ok,#16a34a) 12%,transparent);color:var(--ok-texto,#15803d)}
.cm-estado.voce{background:color-mix(in srgb,#f97316 13%,transparent);color:#c2410c}
@media (max-width:720px){.cm-estado{display:none}}

/* Contatos: só o total quando os outros números repetiriam ele */
.lst-total{padding:14px var(--sp-5) 0;font-size:var(--fs-small);font-weight:600;color:var(--muted)}

/* "Mais opções" em painel flutuante com cartões (computador) */
.gm-mais{position:fixed;z-index:99980;width:min(560px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--sh-lg);padding:14px}
.gm-mais[hidden]{display:none}
.gm-mais-head{display:flex;align-items:baseline;gap:10px;padding:2px 4px 12px}
.gm-mais-head b{font-family:var(--f-head);font-size:var(--fs-body)}
.gm-mais-head span{font-size:var(--fs-caption);color:var(--muted)}
.gm-mais-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gm-mais-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-height:104px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.gm-mais-card:hover{border-color:var(--line-2);background:var(--surface-2)}
.gm-mais-card:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.gm-mais-ic{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;border-radius:var(--radius-sm);background:var(--violet-soft);color:var(--violet);font-size:.9rem}
.gm-mais-card b{font-size:var(--fs-body-sm);color:var(--ink)}
.gm-mais-card small{font-size:var(--fs-caption);line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Planos: o que todos os planos têm numa linha só, embaixo dos cartões */
.pln-comuns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 2px 0;font-size:var(--fs-small);color:var(--muted)}
.pln-comuns b{color:var(--ink);font-weight:700}
.pln-comuns span{display:inline-flex;align-items:center;gap:6px}
.pln-comuns i{color:var(--ok,#16a34a);font-size:.75rem}
/* Planos em tela baixa (1366x768): cabe sem rolar mesmo com a linha
   "Em todos os planos" quebrando em duas. */
@media (max-height:820px) and (min-width:1025px){
  .pln{padding:16px 20px}
  .pln-cta{margin:10px 0}
  .pln-lista{gap:2px;margin-top:10px}
  .pln-comuns{margin-top:10px;gap:4px 16px}
}

/* Dashboard: 3 contatos recentes inteiros, sem linha cortada */
.dash-col .toplist{max-height:none;overflow:visible}
.dash-col .toplist li{padding:8px 10px}
/* Dashboard: linhas mais baixas nos recentes e mais altura pra eles do que
   pra "Para hoje" (vazia, ela só tem uma frase). */
#dashContatosRecentes .toplist{padding:4px 6px 6px}
#dashContatosRecentes .toplist li{padding:6px 10px;gap:10px}
#dashContatosRecentes .top-av{width:30px;height:30px;font-size:var(--fs-caption)}
@media (min-width:1000px) and (min-height:600px){
  #dashViewGeral .dash-col>.card:first-child{flex-grow:1.35}
}

/* ===== Dashboard v2 (2026-10-01): saudação no título, números numa faixa
   só (igual Funil e Canais) e gráfico mais leve, na cor do tema. ===== */
.dash-head .pg-title h1{margin-bottom:2px}
.dash-head .pg-title p b{color:var(--ink);font-weight:700}
.dash-status{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.dash-status:empty{display:none}
.dash-status .dash-hero-pill{background:none;border:0;padding:0;font-size:var(--fs-caption);font-weight:600;color:var(--muted);text-decoration:none}
.dash-status .dash-hero-pill:hover{color:var(--ink)}
.dash-status .dash-hero-cta{color:var(--danger)}
.dash-onb{padding:14px 18px}
.dash-onb .dho-steps{margin-top:0;padding-top:0;border-top:0}
/* faixa única de indicadores */
.dash-stats{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden}
.dash-stats .ds-item{border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}
.dash-stats .ds-item+.ds-item{border-left:1px solid var(--line)}
.dash-stats .ds-item:hover{background:transparent}
.dash-stats .ds-ic{display:none}
.dash-stats .ds-item.alerta .ds-val{color:var(--warn)}
.dash-stats .ds-item.perigo .ds-val{color:var(--danger)}
/* gráfico: barras finas e lisas na cor do tema; hoje em destaque */
.ch-resumo{margin-left:auto;font-size:var(--fs-small);color:var(--muted)}
.ch-resumo b{color:var(--ink);font-weight:700}
.bars .bar i{max-width:26px;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--violet) 26%,transparent);box-shadow:none}
.bars .bar:hover i{filter:none;background:color-mix(in srgb,var(--violet) 45%,transparent)}
.bars .bar.today i{background:var(--violet);box-shadow:none}
@media (max-width:900px){
  .dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-stats .ds-item:nth-child(odd){border-left:0}
  .dash-stats .ds-item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .dash-stats{grid-template-columns:1fr}
  .dash-stats .ds-item{border-left:0!important}
  .dash-stats .ds-item+.ds-item{border-top:1px solid var(--line)}
}
/* Cabeçalho do Dashboard: abas e período ficam na linha do título; a frase
   do resumo quebra dentro do espaço dela (em 1366 as abas desciam sozinhas). */
.dash-head{flex-wrap:nowrap;align-items:flex-start}
.dash-head .pg-title{flex:1 1 auto;min-width:0}
.dash-head .pg-head-actions{flex:none}
@media (max-width:1100px){.dash-head{flex-wrap:wrap}}

/* Funil sem contatos: começo guiado e colunas baixas com o que é cada etapa */
.kb-comeco{display:flex;align-items:center;gap:var(--sp-4);padding:16px 20px;margin-bottom:16px}
.kb-comeco-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--violet-soft);color:var(--violet)}
.kb-comeco-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kb-comeco-b>b{font-size:var(--fs-body);color:var(--ink)}
.kb-comeco-b span{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.kb-comeco-b span b{color:var(--ink)}
.kb-comeco-acoes{display:flex;gap:8px;flex:none}
.kanban.vazio .kb-col{min-height:0;max-height:none}
.kb-empty.kb-dica{min-height:120px;flex:none;margin:4px}
@media (max-width:720px){.kb-comeco{flex-wrap:wrap}.kb-comeco-acoes{width:100%}}
/* Funil vazio: colunas do tamanho do conteúdo (o quadro esticava até o fim da tela) */
.gm-view:has(#kanban) #kanban.vazio{flex:0 0 auto;align-items:start}

/* Equipe: membros numa tabela só (colunas alinhadas, acesso explicado na
   linha) e um "lugar vazio" pra convidar enquanto é só o dono. */
.eq-tabela{padding:0;overflow:hidden}
.eq-tr{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:16px;padding:14px 20px}
.eq-tabela.com-acoes .eq-tr{grid-template-columns:minmax(0,1fr) 300px 190px}
.eq-tr+.eq-tr{border-top:1px solid var(--line)}
.eq-th{padding:9px 20px;background:var(--surface-2);font-size:var(--fs-caption);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.eq-pessoa{display:flex;align-items:center;gap:14px;min-width:0}
.eq-acesso{display:flex;align-items:center;gap:10px;min-width:0}
.eq-acesso-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:.8rem}
.eq-acesso>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.eq-acesso b{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.eq-acesso small{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-tr .cnl-acoes{min-width:0;justify-content:flex-end}
.eq-slot{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;border:0;border-top:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background .15s}
.eq-slot:hover{background:var(--surface-2)}
.eq-slot:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.eq-slot-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px dashed var(--line-2);color:var(--muted);transition:border-color .15s,color .15s}
.eq-slot:hover .eq-slot-ic{border-color:var(--violet);color:var(--violet)}
.eq-slot-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eq-slot-b b{font-size:var(--fs-body);color:var(--ink)}
.eq-slot-b small{font-size:var(--fs-small);color:var(--muted)}
.eq-slot-seta{color:var(--muted);transition:transform .15s}
.eq-slot:hover .eq-slot-seta{transform:translateX(3px);color:var(--violet)}
@media(max-width:760px){
  .eq-tr,.eq-tabela.com-acoes .eq-tr{grid-template-columns:1fr;gap:10px}
  .eq-th{display:none}
  .eq-th+.eq-tr{border-top:0}
  .eq-tr .cnl-acoes{justify-content:flex-start}
}
@media(max-width:760px){.eq-acesso,.eq-tr .cnl-acoes{padding-left:58px}}

/* Agenda: legenda do calendário, resumo só com número e abas escondíveis */
.seg button[hidden],.agd-resumo[hidden],.agd-exportar[hidden]{display:none}
.agd-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:var(--fs-caption);color:var(--muted)}
.agd-legenda:empty{display:none}
.agd-legenda span{display:inline-flex;align-items:center;gap:6px}
.agd-leg-fechado{width:14px;height:14px;border-radius:4px;background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-2) 3px 5px);border:1px solid var(--line)}
.agd-leg-ponto{width:6px;height:6px;border-radius:50%;background:var(--violet)}

/* Agenda > Configurar: "como você chama" num campo só, explicado */
.agd-rotulos{align-items:center;gap:16px}
.agd-rotulos .agd-rot-txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-small);font-weight:400}
.agd-rotulos .agd-rot-txt b{font-weight:700;color:var(--ink)}
.agd-rotulos .agd-rot-txt small{font-size:var(--fs-caption);color:var(--muted)}
.agd-rotulos .agd-rot-txt [data-rot-ex]{font-weight:700;color:var(--ink)}
.agd-rotulos .input{width:180px}

/* Contatos vazio: cartão do tamanho do conteúdo e os 3 caminhos de entrada */
.gm-view:has(#contatosBody)>.card.ct-card-vazio{flex:0 0 auto}
.ct-comeco{padding:22px 24px 24px}
.ct-comeco-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.ct-comeco-head b{font-size:1.05rem;color:var(--ink)}
.ct-comeco-head span{font-size:var(--fs-small);color:var(--muted)}
.ct-fontes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-fonte{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left;color:inherit;font:inherit;text-decoration:none}
.ct-fonte.clicavel{cursor:pointer;transition:border-color .15s,background .15s}
.ct-fonte.clicavel:hover{border-color:var(--line-2);background:var(--surface-2)}
.ct-fonte.clicavel:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ct-fonte-ic{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--violet-soft);color:var(--violet);margin-bottom:4px}
.ct-fonte b{font-size:var(--fs-body);color:var(--ink)}
.ct-fonte p{margin:0;font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.ct-fonte-pe{margin-top:auto;padding-top:6px;font-size:var(--fs-small);font-weight:700;color:var(--violet)}
.ct-fonte-pe i{font-size:.75em;transition:transform .15s}
.ct-fonte.clicavel:hover .ct-fonte-pe i{transform:translateX(3px)}
.ct-fonte-pe .ok{color:var(--ok-texto);font-weight:600}
.ct-fonte-pe .ok i{font-size:inherit}
@media(max-width:820px){.ct-fontes{grid-template-columns:1fr}}
@media(max-width:820px){.ct-fonte{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:3px;padding:14px}.ct-fonte-ic{grid-row:span 3;margin:0}.ct-comeco{padding:18px 16px}}

/* Admin > Contas de teste */
.cts-conta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cts-conta b{color:var(--ink)}
.cts-conta span{font-size:var(--fs-small);color:var(--muted)}
.cts-planos{width:100%}
.cts-planos button{flex:1;justify-content:center}
.gm-modal-card.wide:has(#ctsForm){max-width:600px}
#ctsForm .field{margin-bottom:14px}
.cts-conta,.eq-cred,#ctsEmail{font-feature-settings:"calt" 0}

/* Importar contatos (arquivo ou agenda do WhatsApp) */
.gm-modal-card.wide:has(#impForm){max-width:680px}
.imp-opcoes{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-bottom:12px}
.imp-opcoes.so-um{grid-template-columns:1fr}
.imp-op{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left}
.imp-op b{font-size:var(--fs-body);color:var(--ink)}
.imp-op>span:not(.imp-op-ic){font-size:var(--fs-small);color:var(--muted);line-height:1.5}
.imp-op .btn{margin-top:auto}
.imp-op.info{background:var(--surface-2)}
.imp-op-ic{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--violet-soft);color:var(--violet);margin-bottom:2px}
.imp-drop{border:1.5px dashed var(--line-2);cursor:pointer;transition:border-color .15s,background .15s}
.imp-drop:hover,.imp-drop.sobre,.imp-drop:focus-visible{border-color:var(--violet);background:var(--surface-2);outline:none}
.imp-drop.lendo{pointer-events:none;opacity:.7}
.imp-ajuda{margin:0 0 12px;font-size:var(--fs-small);color:var(--muted)}
.imp-ajuda summary{cursor:pointer;font-weight:600;color:var(--ink)}
.imp-ajuda ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;line-height:1.5}
.imp-cols{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px;font-size:var(--fs-small);color:var(--muted)}
.imp-cols label{display:inline-flex;align-items:center;gap:8px}
.imp-previa{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.imp-previa .tbl{margin:0}
.imp-sem{color:var(--dim);font-style:italic}
.imp-mais{margin:8px 2px 0;font-size:var(--fs-small);color:var(--muted)}
.imp-aviso{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:var(--fs-small);color:var(--text)}
.imp-aviso i{margin-top:3px;color:var(--warn)}
#impForm .eq-botoes{margin-top:16px}
.eq-ok-ic.erro{background:var(--danger-soft,#fee2e2);color:var(--danger)}
@media(max-width:640px){.imp-opcoes{grid-template-columns:1fr}}
.imp-cols label{white-space:nowrap}

/* Chat: lista diz quem falou por último e quem espera a equipe; barras de
   rolagem finas; painel do contato com etapa e ficha */
.chat-threads,.chat-msgs{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.thread-prev .tp-quem{font-weight:600;color:var(--ink-2)}
.thread-voce{flex:none;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.thread-prev{display:flex;align-items:center;gap:0}
.thread-prev .tp-quem{flex:none;margin-right:4px}
.thread-ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:auto;padding:0}
.thread.espera time{color:var(--warn);font-weight:700}
.thread-prev{white-space:nowrap}
.cm-ctx{flex:none}
.chat.com-ctx .cm-ctx{color:var(--ink);background:var(--surface-2)}
.cx-ficha{margin-top:14px;width:100%;justify-content:center}

/* ===== Dashboard do admin (2026-10-02): receita e pagantes primeiro, uma
   faixa de números, "precisa de atenção" acionável, tudo numa tela. ===== */
.ad-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.gm-view:has(#adKpis) .pg-head p b{color:var(--ink);font-weight:700}
.ad-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);align-items:stretch}
.ad-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ad-col .card-head{flex:none}
.ad-caixa{flex:1;min-height:0;overflow:hidden;padding:4px 10px 12px}
.ad-at-lista{display:flex;flex-direction:column;gap:6px}
.ad-at{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;transition:background .15s,border-color .15s}
.ad-at:hover{background:var(--surface-2);border-color:var(--line-2)}
.ad-at-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:.85rem}
.ad-at.alerta .ad-at-ic{background:var(--warn-soft);color:var(--warn)}
.ad-at.perigo .ad-at-ic{background:var(--danger-soft);color:var(--danger)}
.ad-at-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ad-at-b b{font-size:var(--fs-small);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-at-b small{font-size:var(--fs-caption);color:var(--muted)}
.ad-at-go{color:var(--dim);font-size:.7rem}
.ad-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;height:100%;min-height:160px;color:var(--muted);font-size:var(--fs-small)}
.ad-ok-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--ok-soft,#dcfce7);color:var(--ok);margin-bottom:6px}
.ad-ok b{color:var(--ink);font-size:var(--fs-body)}
.ad-planos{padding:2px 16px 10px;border-bottom:1px solid var(--line)}
.ad-barra{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line);gap:2px}
.ad-barra i{display:block;height:100%}
.ad-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:var(--fs-caption);color:var(--muted)}
.ad-legenda span{display:inline-flex;align-items:center;gap:6px}
.ad-legenda i{width:8px;height:8px;border-radius:50%}
.ad-legenda b{color:var(--ink)}
.ad-top .top-metric small{font-size:.7em;font-weight:500;color:var(--muted)}
.ad-col .toplist{max-height:none;overflow:visible}
.ad-col .toplist li{padding:8px 6px}
.ad-ativ .activity-ic{width:30px;height:30px;flex:none}
.ad-vazio{margin:18px 6px;font-size:var(--fs-small);color:var(--muted)}
@media (min-width:1101px) and (min-height:700px){
  .gm-view:has(#adKpis){display:flex;flex-direction:column;height:calc(100dvh - var(--top-h,69px));box-sizing:border-box;padding-bottom:16px;overflow:hidden}
  .gm-view:has(#adKpis) .ad-grid{flex:1;min-height:0}
}
@media (max-width:1100px){.ad-grid{grid-template-columns:1fr}.ad-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ad-stats{grid-template-columns:1fr}}
.ad-at[hidden],.toplist li[hidden]{display:none}
.ad-grid{grid-template-rows:minmax(0,1fr)}
.ad-stats .ds-mid{display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap;min-width:0}
.ad-stats .ds-val{white-space:nowrap}
@media (min-width:1101px) and (min-height:700px){.gm-view:has(#adKpis){min-height:0}}
@media (min-width:1101px) and (min-height:700px){.gm-view:has(#adKpis){flex:none}}

/* ===== Admin: listas (Workspaces, Usuários, Pagamentos) — 2026-10-02 =====
   O que o dono decide olhando a linha (cobrança, canal, uso) e nada repetido
   ("Ativo"/"Cliente" em toda linha saiu; só aparece o que é exceção). */
.adm-cel{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-cel small{font-size:var(--fs-caption);color:var(--muted)}
.adm-cel b{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.adm-dim{color:var(--dim)}
.adm-email{color:var(--ink-2)}
.adm-plano{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--dim);vertical-align:1px}
.adm-plano-pro{background:#3b82f6}
.adm-plano-business{background:#c9a24b}
.adm-cob.ok{color:var(--ok-texto)}
.adm-cob.perigo{color:var(--danger)}
.adm-cob.info{color:var(--violet)}
.adm-uso{display:flex;flex-direction:column;gap:5px;min-width:110px}
.adm-uso span{font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
.adm-uso small{color:var(--muted)}
.adm-uso i{display:block;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.adm-uso i b{display:block;height:100%;background:var(--violet);border-radius:inherit}
.seg-n{font-size:.72em;font-weight:700;opacity:.65;margin-left:3px}
.adm-tbl .dotstat{white-space:nowrap}
.adm-valor{color:var(--ink);font-variant-numeric:tabular-nums}
.adm-valor.gratis{color:var(--muted);font-weight:600}
.adm-mono{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:var(--fs-caption);color:var(--muted)}
.adm-nf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-nf a{font-size:var(--fs-small);font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.adm-nf a:hover{text-decoration:underline}
.gm-view:has(#admPagBody) .pg-head p b{color:var(--ink);font-weight:700}
/* Suporte (admin): números legíveis e a direita explicando a fila vazia */
.sup-estrela{color:#e3b341;font-size:.8em}
.sup-como{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);gap:8px}
.sup-como strong{color:var(--ink);font-size:var(--fs-body)}
.sup-como ol{margin:8px 0 0;padding:0;list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:10px;text-align:left;max-width:440px}
.sup-como li{counter-increment:passo;display:flex;gap:10px;font-size:var(--fs-small);line-height:1.5}
.sup-como li::before{content:counter(passo);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--ink)}
.sup-como li b{color:var(--ink)}
.adm-tbl .cred-pill.zero{color:var(--danger)}
.adm-tbl .cred-pill.baixo{color:var(--warn)}

/* ===== Login/cadastro (2026-10-02): sem tremida ao abrir e visual mais limpo =====
   Tremida: abrir a janela trava a rolagem (body overflow:hidden) e, no Windows,
   a barra de rolagem sumia — a landing e a janela pulavam ~15px pro lado.
   Reservar a calha da barra enquanto o site público está na tela mata o pulo. */
/* Espaço da barra devolvido pelo travarRolagem() (--sbw): o menu fixo e a
   janela ficam no mesmo lugar; o fundo desfocado cobre a tela inteira. */
body.auth-aberta .lp-nav{right:var(--sbw,0px)}
#gm-auth{border-right:var(--sbw,0px) solid transparent}
.au-scrim{position:fixed}
/* Um movimento só ao abrir: antes o cartão subia com zoom (texto borrava) e o
   conteúdo subia de novo por dentro, em outro ritmo. */
.au-card{animation:auAbre .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes auAbre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.au-pane{animation:auTroca .18s ease both}
@keyframes auTroca{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.au-card,.au-pane,.au-scrim{animation:none}}
/* Título alinhado com a marca (centralizada) */
.au-pane .au-titulo,.au-pane .au-sub{text-align:center}
.au-pane .au-sub{margin-bottom:22px}
/* Campo branco com borda neutra: o bege com borda dourada parecia campo
   já preenchido pelo navegador. Foco em azul-marinho bem visível. */
.au-pane .input{background:#fff;border-color:#ddd6c6}
.au-pane .input:hover{border-color:#c9c0aa}
.au-pane .input:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(37,33,92,.14)}
.au-pane .field{display:flex;flex-direction:column;gap:6px}
.au-pane .field label{font-weight:600}
.au-pane .field-head{display:flex;align-items:center;justify-content:space-between}
.au-sep{margin:18px 0}
.au-switch{margin-top:18px}
.au-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Telas baixas (notebook 1366×768): o cadastro cabe sem rolar a janela */
@media (max-height:820px) and (min-width:521px){
  .au-card{padding:24px 30px}
  .au-brand{margin-bottom:12px}
  .au-pane .au-titulo{font-size:var(--fs-h3);margin-bottom:4px}
  .au-pane .au-sub{margin-bottom:14px}
  .au-sep{margin:12px 0}
  .au-pane form{gap:10px}
  .au-pane .field{gap:4px}
  .au-pane .input{height:40px}
  .au-pane .btn-primary{height:44px}
  .au-switch{margin-top:12px}
  .au-switch a{padding:2px}
  .au-foot{margin-top:10px;padding-top:10px}
}
/* Bloco do Google recolhendo quando o Google recusa o endereço do site */
.au-gbtn,.au-pane .au-sep{max-height:80px;transition:opacity .2s ease,max-height .25s ease,margin .25s ease,min-height .25s ease}
.au-gbtn.au-g-sai,.au-pane .au-sep.au-g-sai{opacity:0;max-height:0;min-height:0;margin-top:0;margin-bottom:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.au-gbtn,.au-pane .au-sep{transition:none}}

/* =====================================================================
   LOGIN / CADASTRO v3 (2026-10-02, "isso tá ridículo, deixe top"):
   janela larga em duas partes — à esquerda a marca mostrando o produto
   (conversa de exemplo + 3 benefícios), à direita o formulário limpo.
   No celular fica só o formulário, com a marca em cima.
   ===================================================================== */
.au-scrim{background:rgba(9,8,26,.72)}
#gm-auth .au-card{max-width:960px;padding:0;display:grid;grid-template-columns:minmax(0,410px) minmax(0,1fr);overflow:hidden;border-radius:24px;border:0;
  box-shadow:0 50px 120px -40px rgba(4,3,18,.8),0 0 0 1px rgba(255,255,255,.06)}
#gm-auth .au-x{z-index:3}
/* --- lado da marca --- */
.au-lado{position:relative;display:flex;flex-direction:column;gap:22px;padding:34px 36px 26px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%,rgba(201,162,75,.22) 0%,transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(99,102,241,.18) 0%,transparent 60%),linear-gradient(160deg,#25215c 0%,#141235 60%,#0d0b24 100%)}
.au-lado-marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.au-lado-marca .lp-brand-name{color:#fff;font-size:var(--fs-h3)}
.au-lado-marca .lp-brand-name b{color:#e3c27a}
.au-lado-meio{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}
.au-lado-selo{display:none;align-self:flex-start;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:rgba(227,194,122,.14);border:1px solid rgba(227,194,122,.35);color:#f0d595;font-size:var(--fs-caption);font-weight:700;letter-spacing:.01em}
#gm-auth:has(#auPaneRegister:not([hidden])) .au-lado-selo{display:inline-flex}
.au-lado-titulo{margin:0;font-family:var(--f-head);font-size:1.6rem;line-height:1.22;font-weight:700;letter-spacing:-.025em;color:#fff;text-wrap:balance}
/* conversa de exemplo: o produto em ação, não um parágrafo sobre ele */
.au-demo{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}
.au-demo-topo{display:flex;align-items:center;gap:10px;padding-bottom:9px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.08)}
.au-demo-topo b{display:block;font-size:var(--fs-small);color:#fff}
.au-demo-topo small{font-size:.7rem;color:#8fe3b0}
.au-demo-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;font-size:.95rem;flex:none}
.au-demo-msg{margin:0;max-width:84%;padding:7px 11px;border-radius:12px;font-size:.78rem;line-height:1.4}
.au-demo-msg.cli{align-self:flex-start;background:rgba(255,255,255,.92);color:#1d1b33;border-top-left-radius:4px}
.au-demo-msg.ia{align-self:flex-end;background:linear-gradient(135deg,#e3c27a,#c9a24b);color:#1a1530;border-top-right-radius:4px}
.au-demo-ia{display:block;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-bottom:1px}
.au-demo-ia i{margin-right:3px}
.au-lado-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.au-lado-lista li{display:flex;gap:10px;font-size:var(--fs-small);line-height:1.45;color:rgba(255,255,255,.72)}
.au-lado-lista li b{color:#fff;font-weight:600}
.au-lado-lista i{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:rgba(227,194,122,.16);color:#e3c27a;font-size:.62rem}
.au-lado-pe{margin:0;font-size:var(--fs-caption);color:rgba(255,255,255,.45)}
.au-lado-pe a{color:rgba(255,255,255,.65)}
.au-lado-pe a:hover{color:#fff;text-decoration:underline}
/* --- lado do formulário --- */
.au-corpo{display:flex;flex-direction:column;justify-content:center;padding:44px 52px 36px;background:#fff;min-width:0}
.au-corpo>*{width:100%;max-width:380px;margin-left:auto;margin-right:auto}
.au-corpo .au-brand{display:none}
.au-pane .au-titulo,.au-pane .au-sub{text-align:left}
.au-pane .au-titulo{font-size:1.7rem;margin-bottom:6px}
.au-pane .au-sub{margin-bottom:22px}
.au-so-celular{display:none}
.au-pane .input{height:46px}
.au-inp>i:first-child{left:15px;font-size:.85rem;color:#a39b86}
.au-inp>i:first-child+.input{padding-left:42px}
.au-inp:focus-within>i:first-child{color:var(--violet)}
.au-inp--ddi>.input{padding-left:66px}
.au-ddi{position:absolute;left:1px;top:1px;bottom:1px;width:54px;display:grid;place-items:center;border-right:1px solid #e6e0d2;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:#faf8f3;color:var(--muted);font-size:var(--fs-small);font-weight:700;pointer-events:none}
.au-dica{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--fs-caption);color:var(--muted);transition:color .15s}
.au-dica.ok{color:var(--ok-texto)}
.au-pane .btn-primary{gap:8px}
.au-pane .btn-primary i{font-size:.8em;transition:transform .15s}
.au-pane .btn-primary:hover i{transform:translateX(3px)}
.au-termos{margin:2px 0 0;text-align:center;font-size:var(--fs-caption);line-height:1.5;color:var(--muted)}
.au-termos a{color:var(--ink);font-weight:600}
.au-termos a:hover{text-decoration:underline}
.au-sep span{white-space:nowrap}
/* telas baixas: compacta (o cadastro é o mais alto) */
@media (max-height:820px) and (min-width:861px){
  .au-lado{padding:26px 30px 20px;gap:16px}
  .au-lado-meio{gap:14px}
  .au-lado-titulo{font-size:1.38rem}
  .au-demo{padding:11px;gap:6px}
  .au-demo-msg{padding:6px 10px;font-size:.74rem}
  .au-lado-lista{gap:8px}
  .au-corpo{padding:30px 44px 24px}
  .au-pane .au-titulo{font-size:1.45rem}
  .au-pane .au-sub{margin-bottom:14px}
  .au-pane .input{height:42px}
}
@media (max-height:700px) and (min-width:861px){.au-demo{display:none}}
/* celular / janela estreita: só o formulário, com a marca em cima */
@media (max-width:860px){
  #gm-auth .au-card{grid-template-columns:1fr;max-width:460px}
  .au-lado{display:none}
  .au-corpo{padding:30px 26px 24px}
  .au-corpo .au-brand{display:flex;justify-content:flex-start;margin-bottom:18px}
  .au-so-celular{display:inline}
}
@media (max-width:480px){.au-corpo{padding:24px 18px 20px}.au-pane .au-titulo{font-size:1.45rem}}
/* Cadastro só pelo Google: os passos dizem o que vem depois do clique */
.au-passos{list-style:none;counter-reset:passo;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.au-passos li{counter-increment:passo;display:flex;gap:12px;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.au-passos li::before{content:counter(passo);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--violet-softer,#f1effa);color:var(--violet);font-size:.72rem;font-weight:800}
.au-passos li b{color:var(--ink);font-weight:600}
#auPaneRegister .au-gbtn{margin-top:4px}
#auPaneRegister .au-err{margin-top:12px}
#auPaneRegister .au-termos{margin-top:18px}
#auPaneRegister .au-switch{margin-top:14px}

/* ===== LOGIN / CADASTRO v4 (2026-10-02): multicanal + estrutura no formulário =====
   Lado da marca mostra a caixa de entrada única (WhatsApp, Telegram, Discord,
   chat do site) em vez de uma conversa só de WhatsApp. O lado do formulário
   ganhou abas no topo e rodapé fixo: deixou de ser um bloco solto no meio. */
.au-lado-selo{display:none}
#gm-auth:has(#auPaneRegister:not([hidden])) .au-lado-selo{display:inline-flex}
.au-lado-titulo{font-size:1.55rem}
.au-caixa{border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);overflow:hidden;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.au-caixa-topo{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.au-caixa-topo b{font-size:var(--fs-small);color:#fff}
.au-caixa-topo span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:#8fe3b0}
.au-caixa-topo span i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.au-conv{display:flex;align-items:center;gap:11px;padding:10px 14px;position:relative}
.au-conv+.au-conv{border-top:1px solid rgba(255,255,255,.06)}
.au-conv-av{position:relative;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:800}
.au-conv-canal{position:absolute;left:38px;top:31px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.55rem;border:2px solid #1b1845}
.au-conv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.au-conv-b b{font-size:.8rem;color:#fff;font-weight:600}
.au-conv-b small{font-size:.74rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-conv em{flex:none;font-style:normal;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px}
.au-conv em.ok{color:#8fe3b0;background:rgba(52,211,153,.12)}
.au-conv em.agenda{color:#f0d595;background:rgba(227,194,122,.14)}
.au-conv em.eq{color:#c7d2fe;background:rgba(129,140,248,.16)}
.au-lado-lista{gap:10px}
.au-lado-lista li{align-items:center}
.au-lado-lista i{width:26px;height:26px;border-radius:8px;font-size:.72rem;margin-top:0}
/* formulário: abas no topo, conteúdo, rodapé */
.au-corpo{justify-content:flex-start;gap:0;padding:28px 56px 22px}
.au-abas{display:flex;gap:4px;padding:4px;margin-bottom:30px;border-radius:12px;background:#f4f1ea;border:1px solid #ebe5d8;align-self:flex-start;width:auto !important}
.au-abas a{padding:8px 18px;border-radius:9px;font-size:var(--fs-small);font-weight:600;color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.au-abas a:hover{color:var(--ink)}
#gm-auth:has(#auPaneLogin:not([hidden])) [data-aba-auth="login"],
#gm-auth:has(#auPaneRegister:not([hidden])) [data-aba-auth="registrar"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,16,50,.12)}
.au-corpo>.au-abas{margin-left:max(0px,calc((100% - 380px) / 2))}
.au-pane{flex:1}
.au-pane .au-titulo{font-size:1.75rem}
.au-seguro{margin:22px auto 0 !important;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--dim)}
.au-seguro i{font-size:.75em;color:var(--ok-texto)}
.au-seguro a{color:var(--muted)}
.au-seguro a:hover{color:var(--ink);text-decoration:underline}
/* passos do cadastro com ícone e duas linhas */
.au-passos{gap:14px;margin-top:22px;padding-top:20px}
.au-passos li{counter-increment:none;align-items:flex-start;gap:13px}
.au-passos li::before{content:none}
.au-passo-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#f4f1ea;color:var(--violet);font-size:.85rem}
.au-passos li>span:last-child{display:flex;flex-direction:column;gap:1px}
.au-passos li b{font-size:var(--fs-small)}
.au-passos li small{font-size:var(--fs-caption);color:var(--muted);line-height:1.45}
#auPaneRegister .au-termos{margin-top:20px;text-align:left}
@media (max-height:820px) and (min-width:861px){
  .au-corpo{padding:22px 48px 16px}
  .au-abas{margin-bottom:20px}
  .au-conv{padding:8px 12px}
  .au-caixa-topo{padding:9px 12px}
  .au-seguro{margin-top:14px !important;padding-top:12px}
  .au-passos{margin-top:16px;padding-top:14px;gap:10px}
}
@media (max-width:860px){
  .au-corpo{padding:24px 24px 18px}
  .au-corpo>.au-abas{margin-left:0;align-self:stretch;width:100% !important}
  .au-abas a{flex:1;text-align:center}
  .au-corpo .au-brand{margin-bottom:16px}
}

/* =====================================================================
   LANDING v5 (2026-10-02, "melhore toda a página, deixe mais profissional")
   - Títulos sóbrios: a itálica dourada fica só no topo e na chamada final
     (em todo título ela deixava de ser destaque e virava enfeite).
   - Cada seção com ícone e um pedaço de produto de verdade, multicanal.
   - Entrada simples ao rolar (.reveal → .in). Sem revelar palavra por
     palavra nem efeito amarrado à rolagem: texto nunca fica apagado.
   O topo (celular, .lp-phone* / .lp-wa-*) NÃO foi tocado.
   ===================================================================== */
@supports (animation-timeline: view()) and (animation-range: entry 10%){
  @media (prefers-reduced-motion: no-preference){
    #gm-landing .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
    #gm-landing .reveal.in{opacity:1;transform:none}
    #gm-landing .reveal > *{animation:none !important}
  }
}
#gm-landing .ln-sec{padding:clamp(72px,8vw,112px) 0}
/* --- cabeçalho de seção --- */
#gm-landing .ln-head{max-width:640px;margin-bottom:clamp(36px,4vw,52px)}
#gm-landing .ln-head--centro{margin-left:auto;margin-right:auto;text-align:center}
#gm-landing .ln-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.28);color:#7d6124;font-size:.74rem;font-weight:700;letter-spacing:.04em}
#gm-landing .ln-head h2{font-size:clamp(2rem,3.4vw,2.85rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 14px;color:#15132b}
#gm-landing .ln-head>p{font-size:1.06rem;line-height:1.65;color:#5f5a52;margin:0}
/* --- régua do topo --- */
#gm-landing .ln-garantias{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
#gm-landing .ln-garantias li{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500;color:#d9d4ec}
#gm-landing .ln-garantias i{color:#34d399;font-size:.85rem}
#gm-landing .ln-canais-hero{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#gm-landing .ln-canais-rot{font-size:.82rem;color:#8a83ad;margin-right:2px}
#gm-landing .ln-canal{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.82rem;font-weight:600;color:#ece8f8}
#gm-landing .ln-canal i{font-size:.9rem;color:#e3c27a}
#gm-landing .ln-breve{font-size:.78rem;color:#7d76a3;margin-left:4px}
/* --- O que ele faz --- */
#gm-landing .ln-recursos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
#gm-landing .ln-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#gm-landing .ln-feat{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff;border:1px solid #e6dfd0;box-shadow:0 1px 2px rgba(21,19,43,.04);transition:border-color .2s,box-shadow .2s,transform .2s}
#gm-landing .ln-feat:hover{border-color:#d6cbb2;box-shadow:0 14px 34px -18px rgba(21,19,43,.22);transform:translateY(-2px)}
#gm-landing .ln-feat-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#25215c;color:#e3c27a;font-size:1rem}
#gm-landing .ln-feat h3{margin:0 0 6px;font-size:1.08rem;color:#15132b}
#gm-landing .ln-feat p{margin:0;font-size:.93rem;line-height:1.55;color:#625d55}
/* caixa de entrada (clara) */
#gm-landing .ln-inbox{border-radius:20px;background:#fff;border:1px solid #e6dfd0;box-shadow:0 30px 70px -38px rgba(21,19,43,.35);overflow:hidden}
#gm-landing .ln-inbox-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #eee8db}
#gm-landing .ln-inbox-topo>b{font-size:.95rem;color:#15132b}
#gm-landing .ln-inbox-filtros{display:flex;gap:6px}
#gm-landing .ln-inbox-filtros em{font-style:normal;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;background:#f5f1e8;color:#625d55}
#gm-landing .ln-inbox-filtros em.on{background:#15132b;color:#fff}
#gm-landing .ln-conv{display:flex;align-items:center;gap:13px;padding:13px 18px}
#gm-landing .ln-conv+.ln-conv{border-top:1px solid #f1ece2}
#gm-landing .ln-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.76rem;font-weight:800}
#gm-landing .ln-av>i{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff;font-style:normal}
#gm-landing .ln-av>i b{font-size:.58rem;color:#fff}
#gm-landing .ln-conv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#gm-landing .ln-conv-b b{font-size:.9rem;color:#15132b}
#gm-landing .ln-conv-b small{font-size:.82rem;color:#7a756c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gm-landing .ln-st{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700}
#gm-landing .ln-st.ok{background:#e9f8ef;color:#15803d}
#gm-landing .ln-st.ouro{background:#fbf3df;color:#8a6a1f}
#gm-landing .ln-st.eq{background:#eef0ff;color:#4338ca}
#gm-landing .ln-inbox-pe{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 18px;background:#faf8f3;border-top:1px solid #eee8db;font-size:.8rem;color:#7a756c}
#gm-landing .ln-inbox-pe b{color:#15132b}
#gm-landing .ln-tambem{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(32px,4vw,44px);padding-top:26px;border-top:1px solid #e6dfd0}
#gm-landing .ln-tambem-rot{font-size:.85rem;font-weight:700;color:#15132b;margin-right:4px}
#gm-landing .ln-tambem>span:not(.ln-tambem-rot){display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid #e6dfd0;font-size:.85rem;color:#3a364c}
#gm-landing .ln-tambem i{color:#7d6124;font-size:.8rem}
/* --- Como funciona --- */
#gm-landing .ln-passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#gm-landing .ln-passo{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:20px;background:#fff;border:1px solid #e6dfd0}
#gm-landing .ln-passo-n{position:absolute;top:22px;right:22px;font-family:var(--f-head);font-size:2.4rem;font-weight:800;line-height:1;color:#f0ebe1}
#gm-landing .ln-passo-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#25215c;color:#e3c27a;font-size:1.05rem;margin-bottom:18px}
#gm-landing .ln-passo h3{margin:0 0 8px;font-size:1.15rem;color:#15132b}
#gm-landing .ln-passo p{margin:0 0 20px;font-size:.94rem;line-height:1.6;color:#625d55}
#gm-landing .ln-passo-mini{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:#faf8f3;border:1px solid #eee8db}
#gm-landing .ln-mini-campo{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:9px;background:#fff;border:1px solid #e6dfd0;font-size:.84rem;color:#15132b}
#gm-landing .ln-mini-campo small{font-size:.7rem;font-weight:700;color:#8a847a}
#gm-landing .ln-mini-canais{flex-direction:row;justify-content:center;gap:12px;padding:18px 14px}
#gm-landing .ln-mini-canais i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.1rem}
#gm-landing .ln-mini-acao{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:14px}
#gm-landing .ln-mini-ia{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#e9f8ef;color:#15803d;font-size:.78rem;font-weight:700}
#gm-landing .ln-mini-ia i{width:7px;height:7px;border-radius:50%;background:#22c55e}
#gm-landing .ln-mini-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;background:#15132b;color:#fff;font-size:.8rem;font-weight:700}
/* --- Painel --- */
#gm-landing .ln-painel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
#gm-landing .ln-painel .ln-head{margin-bottom:0}
#gm-landing .ln-checks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
#gm-landing .ln-checks li{display:flex;gap:14px;align-items:flex-start}
#gm-landing .ln-checks li>span{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(201,162,75,.14);color:#7d6124;font-size:.9rem}
#gm-landing .ln-checks b{display:block;font-size:.98rem;color:#15132b;margin-bottom:2px}
#gm-landing .ln-checks small{font-size:.9rem;line-height:1.5;color:#625d55}
#gm-landing .ln-app{border-radius:18px;background:#fff;border:1px solid #e0d8c8;box-shadow:0 40px 90px -45px rgba(21,19,43,.45);overflow:hidden}
#gm-landing .ln-app-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f5f1e8;border-bottom:1px solid #e6dfd0}
#gm-landing .ln-app-bar>i{width:10px;height:10px;border-radius:50%;background:#d9d0bd}
#gm-landing .ln-app-bar>span{margin-left:10px;padding:3px 12px;border-radius:7px;background:#fff;border:1px solid #e6dfd0;font-size:.72rem;color:#7a756c}
#gm-landing .ln-app-corpo{display:grid;grid-template-columns:150px minmax(0,1fr)}
#gm-landing .ln-app-side{display:flex;flex-direction:column;gap:3px;padding:14px 10px;background:#fbf9f5;border-right:1px solid #eee8db}
#gm-landing .ln-app-marca{display:flex;align-items:center;gap:6px;padding:4px 8px 12px;font-family:var(--f-head);font-size:.82rem;font-weight:800;color:#15132b}
#gm-landing .ln-app-marca img{border-radius:5px}
#gm-landing .ln-app-marca b{color:#7d6124}
#gm-landing .ln-app-side a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-size:.76rem;font-weight:600;color:#625d55}
#gm-landing .ln-app-side a i{width:14px;font-size:.72rem;color:#9a9388}
#gm-landing .ln-app-side a.on{background:#f3ead4;color:#15132b}
#gm-landing .ln-app-side a.on i{color:#7d6124}
#gm-landing .ln-app-main{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
#gm-landing .ln-app-titulo b{display:block;font-family:var(--f-head);font-size:1rem;color:#15132b}
#gm-landing .ln-app-titulo small{font-size:.74rem;color:#7a756c}
#gm-landing .ln-app-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #eee8db;border-radius:12px;overflow:hidden}
#gm-landing .ln-app-kpis>div{display:flex;flex-direction:column;gap:3px;padding:11px 12px;min-width:0}
#gm-landing .ln-app-kpis>div+div{border-left:1px solid #eee8db}
#gm-landing .ln-app-kpis small{font-size:.66rem;font-weight:600;color:#8a847a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gm-landing .ln-app-kpis b{font-family:var(--f-head);font-size:1.12rem;color:#15132b}
#gm-landing .ln-app-kpis b.ok{color:#15803d;font-size:.95rem}
#gm-landing .ln-app-kpis em{font-style:normal;font-size:.64rem;color:#8a847a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gm-landing .ln-app-kpis em.sobe{color:#15803d;font-weight:700}
#gm-landing .ln-app-graf{border:1px solid #eee8db;border-radius:12px;padding:12px 14px}
#gm-landing .ln-app-graf-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
#gm-landing .ln-app-graf-topo b{font-size:.8rem;color:#15132b}
#gm-landing .ln-app-graf-topo small{font-size:.68rem;color:#8a847a}
#gm-landing .ln-app-barras{display:flex;align-items:flex-end;gap:5px;height:110px}
#gm-landing .ln-app-barras i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:rgba(37,33,92,.22)}
#gm-landing .ln-app-barras i.hoje{background:#25215c}
/* --- Para quem é (faixa escura) --- */
#gm-landing .lp-publico-sec .ln-eyebrow{background:rgba(227,194,122,.12);border-color:rgba(227,194,122,.3);color:#f0d595}
#gm-landing .lp-publico-sec .ln-head h2{color:#fff}
#gm-landing .lp-publico-sec .ln-head>p{color:#b9b2d6}
#gm-landing .ln-segs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#gm-landing .ln-segs li{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
#gm-landing .ln-segs li:hover{border-color:rgba(227,194,122,.35);background:rgba(255,255,255,.07)}
#gm-landing .ln-seg-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(227,194,122,.14);color:#e3c27a;font-size:1rem}
#gm-landing .lp-publico-sec .ln-segs h3{margin:0;font-family:var(--f-head);font-style:normal;font-size:1.08rem;color:#fff}
#gm-landing .ln-segs q{align-self:flex-start;padding:7px 12px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.92);color:#1d1b33;font-size:.84rem;font-weight:500}
#gm-landing .ln-segs p{margin:0;font-size:.9rem;line-height:1.6;color:#b9b2d6}
/* --- Dúvidas: título à esquerda, perguntas à direita --- */
#gm-landing #faq .lp-faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px);align-items:start;max-width:1240px}
#gm-landing #faq .lp-head{text-align:left;margin:0;position:sticky;top:96px}
#gm-landing #faq .lp-head h2{font-size:clamp(2rem,3.4vw,2.85rem);letter-spacing:-.03em;margin:0 0 14px}
#gm-landing #faq .lp-head>p{font-size:1.02rem;line-height:1.65;color:#5f5a52}
#gm-landing #faq .lp-faq{max-width:none;margin:0}
/* --- responsivo --- */
@media (max-width:1100px){
  #gm-landing .ln-recursos,#gm-landing .ln-painel{grid-template-columns:1fr}
  #gm-landing .ln-segs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #gm-landing #faq .lp-faq-wrap{grid-template-columns:1fr}
  #gm-landing #faq .lp-head{position:static}
}
@media (max-width:820px){
  #gm-landing .ln-passos{grid-template-columns:1fr}
  #gm-landing .ln-app-corpo{grid-template-columns:1fr}
  #gm-landing .ln-app-side{display:none}
  #gm-landing .ln-app-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #gm-landing .ln-app-kpis>div:nth-child(3){border-left:0}
  #gm-landing .ln-app-kpis>div:nth-child(n+3){border-top:1px solid #eee8db}
}
@media (max-width:600px){
  #gm-landing .ln-feats,#gm-landing .ln-segs{grid-template-columns:1fr}
  #gm-landing .ln-conv{padding:12px 14px}
  #gm-landing .ln-st{font-size:.68rem;padding:3px 8px}
  #gm-landing .ln-canais-hero,#gm-landing .ln-garantias{justify-content:center}
}

/* Planos da landing: item fora do plano com × discreto (sem "(não incluso)" por extenso) */
#gm-landing .lp-price li.off{color:#a39d92}
#gm-landing .lp-price li.off i{color:#c9c1b1}
#gm-landing .lp-price--pop li.off{color:rgba(255,255,255,.4)}
#gm-landing .lp-price--pop li.off i{color:rgba(255,255,255,.3)}

/* celular: selos e botões de exemplo não quebram em várias linhas */
#gm-landing .ln-inbox-filtros em,#gm-landing .ln-mini-ia,#gm-landing .ln-mini-btn,#gm-landing .ln-st{white-space:nowrap}
@media (max-width:600px){#gm-landing .ln-inbox-topo,#gm-landing .ln-mini-acao{flex-wrap:wrap}#gm-landing .ln-inbox-filtros em{font-size:.7rem}}

/* ===== Landing v5 — 2ª rodada (2026-10-02, "dá pra melhorar mais?") ===== */
/* Selo do topo no mesmo padrão dos selos das seções (era monoespaçado com
   barrinha dourada, o único diferente da página). O celular não muda. */
#gm-landing .lp-hero .lp-pill{padding:6px 14px 6px 12px;border:1px solid rgba(227,194,122,.32);border-radius:999px;background:rgba(227,194,122,.08);
  font-family:var(--f-body);font-size:.84rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:#f0d595}
#gm-landing .lp-hero .lp-pill .lp-dot{width:7px;height:7px}
/* Régua numa linha só no computador */
@media (min-width:1200px){
  #gm-landing .lp-hero-regua{flex-wrap:nowrap;gap:24px}
  #gm-landing .ln-garantias{flex-wrap:nowrap;gap:18px}
  #gm-landing .ln-garantias li{white-space:nowrap;font-size:.84rem}
  #gm-landing .ln-canais-hero{flex-wrap:nowrap;gap:6px}
  #gm-landing .ln-canal{font-size:.78rem;padding:4px 10px;white-space:nowrap}
  #gm-landing .ln-breve{white-space:nowrap}
}
@media (min-width:1200px) and (max-width:1439px){#gm-landing .ln-breve{display:none}}
/* Antes e depois */
#gm-landing .ln-antes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1040px;margin:0 auto}
#gm-landing .ln-antes-col{padding:30px 32px;border-radius:22px}
#gm-landing .ln-antes-sem{background:#efe9dd;border:1px solid #e3dac7}
#gm-landing .ln-antes-com{background:linear-gradient(160deg,#25215c 0%,#141235 70%);border:1px solid #2f2a6b;box-shadow:0 30px 70px -40px rgba(21,19,43,.6)}
#gm-landing .ln-antes-rot{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:6px 13px;border-radius:999px;font-size:.82rem;font-weight:700}
#gm-landing .ln-antes-sem .ln-antes-rot{background:#fff;color:#8a5a4a;border:1px solid #e3dac7}
#gm-landing .ln-antes-com .ln-antes-rot{background:rgba(227,194,122,.14);color:#f0d595;border:1px solid rgba(227,194,122,.3)}
#gm-landing .ln-antes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
#gm-landing .ln-antes li{position:relative;padding-left:30px;font-size:1rem;line-height:1.5}
#gm-landing .ln-antes li::before{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:'Font Awesome 6 Free';font-weight:900;font-size:.6rem}
#gm-landing .ln-antes-sem li{color:#6b6458}
#gm-landing .ln-antes-sem li::before{content:"\f00d";background:#e3d6c4;color:#9a6b58}
#gm-landing .ln-antes-com li{color:#e9e5f7}
#gm-landing .ln-antes-com li::before{content:"\f00c";background:rgba(227,194,122,.18);color:#e3c27a}
/* garantias embaixo dos planos */
#gm-landing .ln-garantias-planos{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
#gm-landing .ln-garantias-planos li{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#4a4540}
#gm-landing .ln-garantias-planos i{color:#7d6124;font-size:.85rem}
@media (max-width:760px){
  #gm-landing .ln-antes{grid-template-columns:1fr}
  #gm-landing .ln-antes-col{padding:24px 22px}
  #gm-landing .ln-garantias-planos{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:10px}
}

/* régua: no computador sem o "em breve" (fica nas Dúvidas) e "Atende em" numa linha */
@media (min-width:1200px){#gm-landing .ln-breve{display:none}#gm-landing .ln-canais-rot{white-space:nowrap}}