/* ===== AILOGIC HUB — camada global (fonte, animações, polimento) ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

/* Montserrat padrão: bold nos títulos, regular nos textos */
:root{ --font:Montserrat,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; }
body{ font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.headline h1,.panel-head h2,.panel-head h3,.brand strong,.kpi .value,.value{ font-family:var(--font); }
.headline h1,h1{ font-weight:700; letter-spacing:-.02em; }
h2,h3,.panel-head h2,.panel-head h3,.brand strong,.card h3{ font-weight:700; }
.kpi .value,.value{ font-weight:700; }
.badge,.btn,th,.section-title,.count,.chip2,.pill{ font-weight:700; }
p,.card p,.side-row span,.detail-item span,.rule span,td{ font-weight:400; }

/* ===== padronização (títulos · números · botões · cantos) ===== */
/* títulos: escala única em todas as telas */
.headline h1,h1{ font-size:24px !important; font-weight:700 !important; }
.panel-head h2,.panel-head h3{ font-size:15px !important; font-weight:700 !important; letter-spacing:-.01em; }
.kpi h3{ font-size:12px !important; font-weight:700 !important; }
.card h3{ font-size:14px !important; font-weight:700 !important; }
/* números: sempre Bold (700), nunca extrabold/black */
.value,.num,.count,.metric strong,.kpi strong,.donut .num,.kpi .value{ font-weight:700 !important; }
/* botões: fonte uniforme */
.btn,.pill{ font-size:13px !important; font-weight:700 !important; }
/* cantos generosos (visual XORA premium, muito respiro) */
:root{ --radius:16px; }
.panel,.kpi,.card,.alert-cell,.fstage,.fcard,.kbody,.fcol-body,.metric,.rule,.ph-card,.table-wrap table,table,.support{ border-radius:16px !important; }
.nav-item,.btn,.pill,select,input,.search,.chip2,.kpi-icon,.card-icon,.r-ico,.ai,.logo,.fi,.ph-ico,.fst-ic,.kpi-ic,.alc-ic,.ins-ic{ border-radius:11px !important; }

/* ===== varredura de fonte: Montserrat em TUDO + labels padronizadas em Bold ===== */
*{ font-family:Montserrat,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif !important; }
.trend{ font-weight:700 !important; }

/* ===== fundo do app claro azulado (respiro XORA) ===== */
:root:not([data-theme="dark"]) body{ background:var(--app-bg,#f4f7fc) !important; }
/* mais espacamento entre secoes/widgets */
.kpis{ gap:20px !important; }
.grid2,.grid2b,.grid3,.layout,.cards,.res{ gap:22px !important; }

/* ===== contorno suave dos widgets no MODO CLARO (borda sutil + sombra difusa) ===== */
:root:not([data-theme="dark"]) .kpi,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .panel,
:root:not([data-theme="dark"]) .metric,
:root:not([data-theme="dark"]) .alert-cell,
:root:not([data-theme="dark"]) .ph-card,
:root:not([data-theme="dark"]) .table-wrap{
  background:#fff !important;
  border:1px solid var(--card-border,#eef1f7) !important;
  box-shadow:0 6px 20px rgba(20,40,80,.06) !important;
}

/* ===== KPI de destaque: primeiro card da linha em degrade azul + texto branco ===== */
.kpis > .kpi:first-child,.kpi.featured{
  background:var(--grad-blue,linear-gradient(135deg,#2f5bd6,#1b306e)) !important;
  border:0 !important; color:#fff !important;
  box-shadow:0 10px 28px rgba(27,48,110,.28) !important;
}
.kpis > .kpi:first-child h3,.kpi.featured h3,
.kpis > .kpi:first-child .value,.kpi.featured .value,
.kpis > .kpi:first-child .trend,.kpi.featured .trend,
.kpis > .kpi:first-child .label,.kpi.featured .label{ color:#fff !important; }
.kpis > .kpi:first-child .kpi-ic,.kpis > .kpi:first-child .kpi-icon,
.kpi.featured .kpi-ic,.kpi.featured .kpi-icon{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
/* labels de secao discretas */
.kpi h3,.section-title{ color:var(--gray500) !important; }
.kpis > .kpi:first-child h3,.kpi.featured h3{ color:rgba(255,255,255,.85) !important; }

/* ===== badges sólidos: cor no box, fonte branca, fundo predominante + hover ===== */
.badge{ transition:transform .15s ease; }
.badge:hover{ transform:scale(1.05); }
.badge.green{ background:var(--green) !important; color:#fff !important; }
.badge.blue{ background:var(--blue) !important; color:#fff !important; }
.badge.orange{ background:var(--orange) !important; color:#fff !important; }
.badge.red{ background:var(--red) !important; color:#fff !important; }
.badge.purple{ background:var(--purple) !important; color:#fff !important; }
.badge.cyan{ background:var(--cyan) !important; color:#fff !important; }
.badge.gray{ background:var(--gray500) !important; color:#fff !important; }

/* ===== ícones do app: fundo navy (cor sidebar) + ícone branco + hover ===== */
.kpi-icon,.card-icon,.r-ico,.fi,.fst-ic,.kpi-ic,.ins-ic{ background:var(--accent-dk,#1b306e) !important; color:#fff !important; transition:transform .16s ease, box-shadow .16s ease; }
.kpi-icon:hover,.card-icon:hover,.r-ico:hover,.fi:hover,.fst-ic:hover,.kpi-ic:hover,.ins-ic:hover{ transform:scale(1.1); box-shadow:0 7px 18px rgba(27,48,110,.30); }
.fst.last .fst-ic,.fst.last .fi{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
/* logo WhatsApp (marcador .wa-ico) com tamanho adequado */
.wa-ico .hub-ic{ font-size:18px; }
.wa-ico{ display:inline-flex; vertical-align:middle; line-height:0; }
/* caixa de alerta com logo WhatsApp fica branca (logo verde precisa de contraste) */
.ai:has(svg[fill="#25D366"]){ background:#fff !important; border:1px solid var(--gray200) !important; }

/* cor da sidebar: AZUL navy rico em degrade (pedido do cliente, sem quase-preto) */
.sidebar{ background:var(--sidebar-grad,linear-gradient(180deg,#152a63,#0e1c44)) !important; }
/* tipografia da sidebar: tudo normal, só o item selecionado em negrito */
.sidebar .nav-item{ font-weight:400 !important; color:#c8d5f0 !important; }
.sidebar .nav-item.active{ font-weight:700 !important; color:#fff !important; }
.sidebar .section-title{ font-weight:500 !important; color:#8ea3d4 !important; }
/* item ativo em azul mais vivo */
.sidebar .nav-item.active{ background:rgba(79,111,240,.28) !important; box-shadow:inset 0 0 0 1px rgba(120,150,255,.24); }
.sidebar .nav-item:hover:not(.active){ background:rgba(255,255,255,.07) !important; }
/* ícones do menu com traço mais fino */
.hub-ic svg{ stroke-width:1.8; }
.nav-item .ico .hub-ic svg{ stroke-width:1.8; }

/* ===== recolher sidebar (mini rail) ===== */
.app{ transition:grid-template-columns .25s ease; }
.sb-toggle{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 0 10px auto; padding:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#a9c0e4; cursor:pointer; transition:background .15s,color .15s,transform .2s; }
.app.sb-collapsed .sb-toggle{ margin:0 auto 10px; }
.sb-toggle:hover{ background:rgba(255,255,255,.10); color:#dce8ff; }
.app.sb-collapsed{ grid-template-columns:62px 1fr !important; }
.app.sb-collapsed .sidebar{ padding:22px 11px; }
.app.sb-collapsed .nav-item{ justify-content:center; padding:11px 0; }
.app.sb-collapsed .nav-label{ display:none; }
.app.sb-collapsed .section-title{ height:1px; padding:0; margin:16px 8px; overflow:hidden; color:transparent; background:rgba(255,255,255,.08); }
.app.sb-collapsed .brand{ justify-content:center; }
.app.sb-collapsed .brand > div:last-child{ display:none; }
.app.sb-collapsed .support{ justify-content:center; padding:13px 0; }
.app.sb-collapsed .support > div:last-child{ display:none; }
.app.sb-collapsed .profile{ justify-content:center; padding-left:0; padding-right:0; }
.app.sb-collapsed .profile > div:last-child{ display:none; }
.app.sb-collapsed .sb-toggle{ transform:rotate(180deg); }
@media (max-width:1050px){ .sb-toggle{ display:none; } .app.sb-collapsed{ grid-template-columns:1fr; } }

/* ícones SVG inline (substituem emojis) herdam a cor do contexto */
.hub-ic{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.hub-ic svg{ width:1em; height:1em; }
.kpi-icon .hub-ic,.card-icon .hub-ic,.r-ico .hub-ic,.ai .hub-ic,.logo .hub-ic{ font-size:17px; }
/* icones do menu menores/clean (REV0c) */
.sidebar .nav-item .ico{ width:20px !important; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.sidebar .nav-item .ico .hub-ic{ font-size:15px; }
.sidebar .nav-item .ico .hub-ic svg{ width:16px; height:16px; }
.ph-ico .hub-ic{ font-size:34px; }

/* animações: entrada da tela + cascata */
@keyframes hubFade{ from{opacity:0} to{opacity:1} }
@keyframes hubRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes hubSide{ from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none} }
/* entrada limpa: esconde o conteúdo antes do JS orquestrar (sidebar > tela > boxes > números) */
html.hub-pre .main{ opacity:0; }
html.hub-pre .kpis .kpi, html.hub-pre .main > .panel, html.hub-pre .layout > *, html.hub-pre .alert-cell, html.hub-pre .fstage, html.hub-pre .kcol, html.hub-pre .ph-card{ opacity:0; }
@keyframes hubSideItem{ from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none} }
/* mobile "catraca": slide entre telas ao arrastar pro lado */
@keyframes hubSlideInR{ from{opacity:.3; transform:translateX(28px)} to{opacity:1; transform:none} }
@keyframes hubSlideInL{ from{opacity:.3; transform:translateX(-28px)} to{opacity:1; transform:none} }
/* dica de swipe (aparece 1x no mobile, some sozinha) */
@keyframes hubSwipeHint{ 0%,100%{opacity:0} 12%,88%{opacity:.55} 50%{transform:translateX(-10px)} }
.hub-swipe-hint{ position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:60; display:none; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:rgba(6,22,41,.9); color:#dce8ff; font-size:12px; font-weight:600; pointer-events:none; }
@media (max-width:900px){ .hub-swipe-hint{ display:flex; animation:hubSwipeHint 3.4s ease 1 both; } }
.hub-side-item{ opacity:0; animation:hubSideItem .5s cubic-bezier(.22,.61,.36,1) both; }
.hub-rise{ opacity:0; animation:hubRise .55s cubic-bezier(.22,.61,.36,1) forwards; }
/* navegação fluida: sem pulinho; só uma leve escala no item, suave */
.nav-item{ transition:transform .2s cubic-bezier(.22,.61,.36,1), background .15s ease, box-shadow .15s ease; transform-origin:left center; }
.nav-item{ white-space:nowrap; }
.nav-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover{ background:rgba(255,255,255,.06); }
.nav-item:hover:not(.active){ transform:translateX(2px); }
.nav-item.active{ transform:scale(1.03); }
/* setas do funil em navy (estavam quase invisíveis) */
.fconn{ color:var(--accent-dk,#1b306e) !important; }
/* ===== clique dinâmico em TODOS os botões: sem quadrado de toque, só a animação ===== */
button, a, [role="button"], .btn, .pill, .icon-btn, .wa-tab, .chip, .chip2, .seg button,
.act button, .nav-item, .sb-toggle, .hub-logout, .snd-toggle, .modal-x, .crm-close,
.wa-back, .wa-crm-btn, .dd > button, .tool, .toggle{ -webkit-tap-highlight-color:transparent; }
.icon-btn,.wa-tab,.chip,.chip2,.seg button,.act button,.snd-toggle,.modal-x,.crm-close,.wa-back,.wa-crm-btn{ transition:transform .12s ease, filter .12s ease; }
.icon-btn:active,.wa-tab:active,.chip:active,.chip2:active,.seg button:active,.act button:active,.snd-toggle:active,.modal-x:active,.crm-close:active,.wa-back:active,.wa-crm-btn:active{ transform:scale(.9); }

/* botões/pills do header: menores, minimalistas, com hover e clique */
.pill,.btn{ height:34px !important; padding:0 13px !important; font-size:12px !important; border-radius:10px !important; transition:transform .14s ease, box-shadow .14s ease, background .14s ease; }
.pill:hover,.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.12); }
.pill:active,.btn:active{ transform:translateY(0) scale(.94); }
/* botões sólidos (cor de fundo predominante) padronizados em todo o sistema */
.btn{ background:var(--accent-dk,#1b306e) !important; color:#fff !important; border-color:var(--accent-dk,#1b306e) !important; box-shadow:none !important; }
.btn.primary{ background:var(--accent-dk,#1b306e) !important; border-color:var(--accent-dk,#1b306e) !important; }
.btn.blue{ background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; }
.btn.red{ background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.btn.ghost{ background:#eef3fb !important; color:var(--gray700) !important; border-color:var(--gray200) !important; }
.btn:hover{ filter:brightness(1.12); }
.kpi,.card,.panel{ transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover,.card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,40,80,.10); }
.kpi,.card,.panel{ transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover,.card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,40,80,.10); }

/* ===== REV0c: loading (barrinha no topo + skeleton shimmer) ===== */
@keyframes hubTopbar{ 0%{left:-45%;width:45%} 60%{width:55%} 100%{left:100%;width:45%} }
.hub-topbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; overflow:hidden; }
.hub-topbar::before{ content:""; position:absolute; top:0; height:100%; left:-45%; width:45%; background:linear-gradient(90deg,transparent,var(--blue,#0b66ff),transparent); animation:hubTopbar 1.05s ease-in-out infinite; }
.hub-topbar.done::before{ animation:none; left:0; width:100%; opacity:0; transition:opacity .35s ease; }
@keyframes hubShimmer{ 0%{background-position:-200px 0} 100%{background-position:200px 0} }
.hub-skel,.hub-skel-num{ color:transparent !important; border-radius:8px; background-image:linear-gradient(90deg, rgba(120,140,170,.13) 25%, rgba(120,140,170,.28) 50%, rgba(120,140,170,.13) 75%) !important; background-size:400px 100% !important; animation:hubShimmer 1.05s linear infinite; }
.hub-skel-num{ display:inline-block; min-width:54px; height:.86em; vertical-align:middle; }
.hub-skel{ min-height:15px; }

@media (prefers-reduced-motion: reduce){
  .main,.sidebar,.hub-rise,.hub-side-item{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hub-topbar::before,.hub-skel,.hub-skel-num{ animation:none !important; }
  .hub-dock-item{ transition:none !important; }
}

/* ===== DOCK mobile (estilo Apple): navegação horizontal fixa embaixo ===== */
.hub-dock{ display:none; }
@media (max-width:900px){
  /* some com a sidebar vertical empilhada -> vira app nativo */
  .sidebar{ display:none !important; }
  .app{ grid-template-columns:1fr !important; }
  .main{ padding-bottom:calc(98px + env(safe-area-inset-bottom)) !important; }
  /* dock: barra de fundo cheia, mostra ~5, rola na horizontal com snap */
  .hub-dock{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:block;
    background:#061629;   /* fundo navy sólido: sem backdrop-filter -> sem borrão/smear no GPU */
    border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -8px 24px rgba(0,0,0,.28);
    padding-bottom:env(safe-area-inset-bottom); }
  /* scroll totalmente livre (sem snap = mais sensível) + momentum do sistema */
  .hub-dock-track{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:none;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-padding:0; touch-action:pan-x; scroll-behavior:auto; }
  .hub-dock-track::-webkit-scrollbar{ display:none; }
  /* magnify é escrito por frame (rAF) -> transform NÃO entra na transição (senão borra).
     transição só p/ cor. A curva elástica fica na física do scroll/rAF. */
  .hub-dock-item{ flex:0 0 20vw; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; height:84px; padding:10px 2px; background:none; border:0; color:#9db4d6; font:inherit; cursor:pointer;
    -webkit-tap-highlight-color:transparent; outline:none; -webkit-appearance:none; appearance:none;   /* sem quadrado de toque */
    will-change:transform; transform-origin:center center;   /* escala no lugar (não sobe) */
    transition:color .28s ease; }
  .hub-dock-item:focus, .hub-dock-item:focus-visible{ outline:none; background:none; }
  .hub-dock-ic{ position:relative; display:inline-flex; align-items:center; justify-content:center; font-size:26px; line-height:0; }
  .hub-dock-ic .hub-ic svg{ width:27px; height:27px; position:relative; z-index:1; }
  .hub-dock-lb{ font-size:10px; font-weight:600 !important; max-width:19vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hub-dock-item.active{ color:#fff; transform:scale(1.12); }   /* só escala leve, sem subir */
  /* luz VIVA no selecionado: mesmo azul do sabre de carregamento (--blue #0b66ff) */
  .hub-dock-ic::before{ content:""; position:absolute; inset:-11px; border-radius:50%;
    background:radial-gradient(circle, rgba(11,102,255,.34) 0%, rgba(11,102,255,.14) 45%, transparent 70%);
    opacity:0; transform:scale(.6); transition:opacity .28s ease, transform .28s ease; pointer-events:none; z-index:0; }
  .hub-dock-item.active .hub-dock-ic::before{ opacity:1; transform:scale(1); }
  .hub-dock-item.active .hub-dock-ic{ filter:drop-shadow(0 0 10px rgba(11,102,255,.36)) drop-shadow(0 3px 8px rgba(11,102,255,.22)); }
  .hub-dock-item:active{ transform:scale(.92); }
  /* dica de swipe fica acima do dock */
  .hub-swipe-hint{ bottom:calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .hub-dock-item.active{ transform:none; }
}

/* ===== MODO APP mobile: frame fixo, vertical travado, encaixe dos widgets ===== */
@media (max-width:900px){
  /* app travado no zoom, mas ELÁSTICO ao arrastar (rubber-band + pull-to-refresh) */
  html,body{ height:100%; overflow:hidden !important; overscroll-behavior:auto; }
  body{ touch-action:manipulation; }
  .app{ grid-template-columns:1fr !important; height:100dvh !important; overflow:hidden !important; }
  /* miolo = ÚNICO scroller vertical (entre header fixo e dock fixo). whatsapp tem layout próprio -> excluído */
  html:not([data-scr="whatsapp"]) .main{
    height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch; overscroll-behavior:auto;
    padding:14px 14px calc(98px + env(safe-area-inset-bottom)) !important;
  }
  /* cabeçalho fixo no topo do miolo */
  html:not([data-scr="whatsapp"]) .main>.header{
    position:sticky; top:0; z-index:6; background:var(--bg);
    margin:-14px -14px 12px !important; padding:12px 14px !important;
    box-shadow:0 1px 0 var(--border);
  }
  /* nada estoura a largura; tabelas/kanban/funil rolam DENTRO do widget (ilha de scroll) */
  html:not([data-scr="whatsapp"]) .main img,
  html:not([data-scr="whatsapp"]) .main table{ max-width:100%; }
  html:not([data-scr="whatsapp"]) .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  html:not([data-scr="whatsapp"]) .panel{ max-width:100%; }
  /* ===== encaixe dos widgets: 2 colunas de KPI + grades em 1 coluna ===== */
  html:not([data-scr="whatsapp"]) .kpis{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  html:not([data-scr="whatsapp"]) .kpi{ padding:13px !important; }
  html:not([data-scr="whatsapp"]) .kpi .value{ font-size:22px !important; }
  html:not([data-scr="whatsapp"]) .kpi-ic{ width:34px !important; height:34px !important; }
  html:not([data-scr="whatsapp"]) .grid2,
  html:not([data-scr="whatsapp"]) .grid2b,
  html:not([data-scr="whatsapp"]) .grid3,
  html:not([data-scr="whatsapp"]) .layout,
  html:not([data-scr="whatsapp"]) .cards,
  html:not([data-scr="whatsapp"]) .res{ grid-template-columns:1fr !important; gap:12px !important; }
  html:not([data-scr="whatsapp"]) .headline h1{ font-size:21px !important; }
}

/* ===== padronização visual (status, botões, PTR, FAB, dock, whatsapp) ===== */
/* status = bolinha viva piscando (texto some, tooltip fica).
   Mira por id também: o JS de integrações reescreve className/innerHTML e apagaria a classe. */
.hub-statdot,
#statusPill, #cfg-statuspill, #b-wa, #b-ai, #b-db, #b-web{ font-size:0 !important; gap:4px !important; }
.hub-statdot .dot, .hub-statdot .d,
#statusPill .dot, #cfg-statuspill .dot, #b-wa .d, #b-ai .d, #b-db .d, #b-web .d{ animation:hubPulse 1.8s ease-in-out infinite; }
@keyframes hubPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.4); opacity:.5 } }

/* botões minimalistas: "＋" e ícones de linha */
.btn.btn-plus{ width:34px; padding:0 !important; justify-content:center; font-size:19px !important; line-height:1; }
.btn-ic{ display:inline-grid !important; place-items:center; }
.btn-ic .hub-ic svg{ width:16px; height:16px; }

/* pull-to-refresh (indicador no topo) */
.hub-ptr{ position:fixed; top:0; left:0; right:0; height:0; z-index:70; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
.hub-ptr-spin{ width:22px; height:22px; margin-top:10px; border-radius:50%; border:2.5px solid rgba(11,102,255,.25); border-top-color:var(--blue,#0b66ff); }
.hub-ptr.ready .hub-ptr-spin, .hub-ptr.go .hub-ptr-spin{ animation:hubSpin .7s linear infinite; }
@keyframes hubSpin{ to{ transform:rotate(360deg) } }

/* FAB do agente (flutuante) */
.hub-fab{ position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:90; width:52px; height:52px; border:0; border-radius:50%; background:var(--accent-dk,#1b306e); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 26px rgba(6,22,41,.4); transition:transform .16s ease; -webkit-tap-highlight-color:transparent; }
.hub-fab:hover{ transform:translateY(-2px); } .hub-fab:active{ transform:scale(.94); }
.hub-fab .hub-ic svg{ width:24px; height:24px; position:relative; z-index:1; }
/* luzinha circular fininha girando devagar, discreta */
.hub-fab::before{ content:""; position:absolute; inset:-3px; border-radius:50%; pointer-events:none; z-index:0;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(59,130,246,.15) 72%, rgba(59,130,246,.95) 84%, rgba(59,130,246,.15) 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:hubFabSpin 3.4s linear infinite; }
@keyframes hubFabSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .hub-fab::before{ animation:none; } }

/* box do agente (abre ao clicar no FAB) */
.hub-agent-box{ position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:95;
  width:min(300px, calc(100vw - 32px)); background:#0f1f3a; color:#e8eefb; border:1px solid rgba(255,255,255,.10);
  border-radius:16px; box-shadow:0 20px 48px rgba(0,0,0,.42); overflow:hidden;
  opacity:0; transform:translateY(10px) scale(.97); transform-origin:bottom right; pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,.61,.36,1); }
.hub-agent-box.open{ opacity:1; transform:none; pointer-events:auto; }
.hab-head{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.hab-head strong{ font-size:14px; flex:1; font-weight:700; }
.hab-ic{ width:28px; height:28px; border-radius:8px; background:#0b66ff; display:grid; place-items:center; flex:none; }
.hab-ic .hub-ic svg{ width:17px; height:17px; }
.hab-x{ background:none; border:0; color:#9db4d6; font-size:20px; line-height:1; cursor:pointer; padding:0 2px; -webkit-tap-highlight-color:transparent; }
.hab-x:hover{ color:#fff; }
.hab-body{ padding:13px 14px; font-size:12.5px; color:#c3d0e6; line-height:1.55; }
@media (max-width:900px){ .hub-agent-box{ bottom:calc(160px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion:reduce){ .hub-statdot .dot,.hub-statdot .d,.hub-ptr-spin{ animation:none !important; } }

@media (max-width:900px){
  /* dock: caixa de ícone uniforme -> proporção estável ao crescer no magnify */
  .hub-dock-ic{ width:30px; height:30px; }
  .hub-dock-ic .hub-ic{ width:100%; height:100%; }
  .hub-dock-ic .hub-ic svg{ width:26px !important; height:26px !important; }
  .hub-dock-item[data-slug="whatsapp"] .hub-ic svg{ width:23px !important; height:23px !important; }  /* WA é filled */
  /* FAB acima do dock */
  .hub-fab{ bottom:calc(104px + env(safe-area-inset-bottom)); width:48px; height:48px; }
  /* dentro da conversa do WhatsApp o dock some (padrão de app de chat) */
  body.wa-thread .hub-dock{ display:none !important; }
  body.wa-thread .hub-fab{ display:none !important; }
}

/* ===== sidebar em coluna: perfil no topo, rodapé colado embaixo ===== */
.sidebar{ display:flex; flex-direction:column; }
.sidebar .brand{ flex:0 0 auto; }
.sidebar .hub-gav{ flex:0 1 auto; }
/* perfil no topo (logo após a marca): separador embaixo em vez de acima */
.sidebar > .profile{ margin-top:2px; padding:0 4px 16px; border-top:0; border-bottom:1px solid rgba(255,255,255,.08); }
/* rodapé da sidebar: recolher (<) + sair */
/* rodape destacado (visual XORA): grupo inferior em painel translucido suave */
.hub-sb-footer{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); border-radius:12px; }
.hub-sb-footer > .profile{ display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:0; border:0; }
.hub-sb-footer .sb-toggle{ margin:0 !important; align-self:flex-start; }
.hub-sb-footer .hub-logout{ margin:0 0 0 auto !important; }
.app.sb-collapsed .hub-sb-footer{ align-items:center; gap:10px; }
.app.sb-collapsed .hub-sb-footer > .profile{ justify-content:center; }
.app.sb-collapsed .hub-sb-footer .sb-toggle{ align-self:center; }
.app.sb-collapsed .hub-sb-footer .sb-toggle,
.app.sb-collapsed .hub-sb-footer .hub-logout{ margin:0 !important; }

/* ===== olho de privacidade (borra/abre todos os valores) ===== */
.hub-eye{ flex:none; width:32px; height:32px; margin-left:auto; padding:0; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#cddcf5; border-radius:9px; display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .12s; -webkit-tap-highlight-color:transparent; }
.hub-eye:hover{ background:rgba(255,255,255,.12); color:#fff; }
.hub-eye:active{ transform:scale(.9); }
.hub-eye svg{ width:17px; height:17px; }
.app.sb-collapsed .hub-eye-side{ display:none; }

/* ===== valores desfocados por padrão (privacidade) + transição suave ===== */
.value,.num,.count,.kpi .value,.kpi strong,.metric strong,.donut .num{ transition:filter .28s ease; }
body.hub-values-hidden .value,
body.hub-values-hidden .num,
body.hub-values-hidden .count,
body.hub-values-hidden .kpi .value,
body.hub-values-hidden .kpi strong,
body.hub-values-hidden .metric strong,
body.hub-values-hidden .donut .num{ filter:blur(7px); -webkit-user-select:none; user-select:none; }

/* ===== legenda de carregamento (frase rápida por tela) ===== */
.hub-loadhint{ position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:9998; padding:5px 14px; border-radius:999px; background:rgba(6,22,41,.92); color:#dce8ff; font-size:12px; font-weight:600 !important; letter-spacing:.2px; box-shadow:0 6px 18px rgba(6,22,41,.28); pointer-events:none; opacity:1; transition:opacity .3s ease, transform .3s ease; white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis; }
.hub-loadhint.done{ opacity:0; transform:translateX(-50%) translateY(-6px); }
@media (prefers-reduced-motion:reduce){ .hub-loadhint{ transition:none; } }

/* ===== barra mobile: avatar + olho no topo (sidebar some no mobile) ===== */
.hub-mtop{ display:none; }
@media (max-width:900px){
  .hub-mtop{ display:flex; align-items:center; gap:9px; position:fixed; top:calc(9px + env(safe-area-inset-top)); right:12px; z-index:75; }
  .hub-mtop .hub-eye{ margin:0; width:34px; height:34px; background:rgba(6,22,41,.92); border-color:rgba(255,255,255,.16); color:#dce8ff; box-shadow:0 4px 14px rgba(6,22,41,.28); }
  .hub-mtop-av{ width:32px; height:32px; border-radius:50%; background:#0b66ff; color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; box-shadow:0 4px 14px rgba(6,22,41,.3); background-size:cover; background-position:center; }
  /* abre espaço no cabeçalho para não colidir com os controles do topo */
  html:not([data-scr="whatsapp"]) .main>.header{ padding-right:92px !important; }
}