/* ============ RESET & BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0d1117;
--bg-secondary:#161b22;
--text:#e6edf3;
--text-muted:#8b949e;
--border:#30363d;
--primary:#1f6feb;
--bubble-user:#21262d;
--bubble-me:#1a3a2e;
--toast-bg:#f1f5f9;
--toast-fg:#0f172a;
--toast-border:rgba(0,0,0,.18);
}
html[data-theme="dark"],
body.theme-dark{
--bg:#0d1117;
--bg-secondary:#161b22;
--surface-muted:#21262d;
--surface-panel:#0b141a;
--text:#e6edf3;
--text-muted:#8b949e;
--text-soft:#c1cad4;
--text-inverse:#ffffff;
--border:#30363d;
--primary:#1f6feb;
--primary-hover:#3b82f6;
--primary-soft:rgba(31,111,235,.12);
--primary-soft-strong:rgba(31,111,235,.14);
--primary-soft-hover:rgba(31,111,235,.08);
--success:#238636;
--success-hover:#2ea043;
--success-soft:rgba(35,134,54,.2);
--success-soft-strong:rgba(37,211,102,.15);
--success-soft-hover:rgba(37,211,102,.28);
--danger:#da3633;
--danger-soft:rgba(218,54,51,.2);
--danger-soft-strong:rgba(218,54,51,.15);
--danger-soft-hover:rgba(248,113,113,.2);
--danger-text:#ff7b72;
--warning:#d29922;
--warning-soft:rgba(210,153,34,.2);
--warning-soft-strong:rgba(210,153,34,.1);
--warning-soft-hover:rgba(210,153,34,.18);
--accent-success:#25d366;
--accent-success-soft:rgba(37,211,102,.12);
--accent-success-soft-strong:rgba(37,211,102,.08);
--surface-hover:rgba(255,255,255,.04);
--surface-hover-strong:rgba(255,255,255,.07);
--surface-hover-soft:rgba(255,255,255,.02);
--surface-faint:rgba(255,255,255,.03);
--surface-fainter:rgba(255,255,255,.05);
--surface-contrast:rgba(255,255,255,.06);
--surface-contrast-strong:rgba(255,255,255,.12);
--overlay-backdrop:rgba(0,0,0,.65);
--overlay-backdrop-strong:rgba(0,0,0,.72);
--overlay-backdrop-max:rgba(0,0,0,.92);
--shadow-popover:0 8px 24px rgba(0,0,0,.35);
--shadow-modal:0 14px 30px rgba(0,0,0,.25);
--shadow-panel:0 6px 24px rgba(0,0,0,.5);
--bubble-user:#21262d;
--bubble-me:#1a3a2e;
--toast-bg:#f1f5f9;
--toast-fg:#0f172a;
--toast-border:rgba(0,0,0,.18);
}
html[data-theme="light"],
body.theme-light{
--bg:#f4f7fb;
--bg-secondary:#ffffff;
--surface-muted:#eef3f8;
--surface-panel:#f7fafc;
--text:#16202a;
--text-muted:#667789;
--text-soft:#4f6174;
--text-inverse:#ffffff;
--border:#d8e0ea;
--primary:#2563eb;
--primary-hover:#1d4ed8;
--primary-soft:rgba(37,99,235,.12);
--primary-soft-strong:rgba(37,99,235,.16);
--primary-soft-hover:rgba(37,99,235,.08);
--success:#1f8f4e;
--success-hover:#18733f;
--success-soft:rgba(31,143,78,.16);
--success-soft-strong:rgba(34,197,94,.16);
--success-soft-hover:rgba(34,197,94,.26);
--danger:#c24141;
--danger-soft:rgba(194,65,65,.16);
--danger-soft-strong:rgba(194,65,65,.12);
--danger-soft-hover:rgba(194,65,65,.18);
--danger-text:#b42318;
--warning:#b7791f;
--warning-soft:rgba(183,121,31,.16);
--warning-soft-strong:rgba(183,121,31,.12);
--warning-soft-hover:rgba(183,121,31,.16);
--accent-success:#22c55e;
--accent-success-soft:rgba(34,197,94,.14);
--accent-success-soft-strong:rgba(34,197,94,.1);
--surface-hover:rgba(22,32,42,.04);
--surface-hover-strong:rgba(37,99,235,.1);
--surface-hover-soft:rgba(22,32,42,.03);
--surface-faint:rgba(22,32,42,.03);
--surface-fainter:rgba(22,32,42,.05);
--surface-contrast:rgba(22,32,42,.06);
--surface-contrast-strong:rgba(22,32,42,.12);
--overlay-backdrop:rgba(15,23,42,.28);
--overlay-backdrop-strong:rgba(15,23,42,.36);
--overlay-backdrop-max:rgba(15,23,42,.6);
--shadow-popover:0 8px 24px rgba(15,23,42,.12);
--shadow-modal:0 14px 30px rgba(15,23,42,.14);
--shadow-panel:0 6px 24px rgba(15,23,42,.12);
--bubble-user:#eef3f8;
--bubble-me:#dff3e7;
--toast-bg:#1e293b;
--toast-fg:#f1f5f9;
--toast-border:rgba(255,255,255,.18);
}
body.theme-dark,
body.theme-light{
--s1:var(--bg-secondary);
--s2:var(--surface-muted);
--b:var(--border);
--tx:var(--text);
--mt:var(--text-muted);
--pr:var(--success);
--ph:var(--success-hover);
--ac:var(--primary);
--dg:var(--danger);
--wn:var(--warning);
--wa:var(--accent-success);
}
/* Zoom UX: --zoom acompanha o style.zoom aplicado no (botões +/- do topo).
Sem dividir 100dvh/100vh por --zoom, viewport não acompanha o fator visual e
sobra/falta espaço (chat sobe ou cria gap embaixo) — bug confirmado em Chrome. */
:root{--zoom:1}
body{
font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--bg);color:var(--text);font-size:13px;
height:calc(100dvh / var(--zoom));overflow:hidden;display:flex;flex-direction:column;
transition:background .2s ease,color .2s ease;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
/* Inputs precisam de fonte ≥16px pra iOS Safari não fazer zoom automático ao focar.
Em mobile, padroniza pra 16px nos campos editáveis (UX padrão de PWA). */
@media(max-width:700px){
body input,body textarea,body select{font-size:16px}
}
/* Safe-area shortcuts: vars CSS root pra reuso fácil. Funcionam em iOS Safari
com viewport-fit=cover (já no ) E em PWA standalone. */
:root{
--sat:env(safe-area-inset-top);
--sab:env(safe-area-inset-bottom);
--sal:env(safe-area-inset-left);
--sar:env(safe-area-inset-right);
}
html.display-standalone body{
padding-top:var(--sat);
}
html.display-standalone .app,
html.display-standalone .admin-wrap{
height:calc((100dvh - var(--sat)) / var(--zoom));
}
/* Barra de envio: fundo se estende até o fim da tela, padding interno protege
conteúdo do home indicator (iOS) — mesmo padrão do WhatsApp. */
/* .envio e .nav-right respeitam safe-area-bottom SEMPRE (iOS Safari, PWA standalone, etc).
Isso garante que o input não cole no home indicator do iPhone — mesmo sem PWA instalado. */
@media(max-width:700px){
.envio{padding-bottom:max(10px, var(--sab))}
.nav-right{padding-bottom:max(10px, var(--sab))}
/* Chat-header respeita safe-area-top quando não há body padding (Safari não-standalone) */
html:not(.display-standalone) .chat-header{padding-top:max(0px, var(--sat))}
}
html.display-standalone .envio{
padding-bottom:max(10px, var(--sab));
}
html.display-standalone .nav-right{
padding-bottom:max(10px, var(--sab));
}
/* Mobile/PWA: oculta itens de sidebar de uso menos frequente (admin abre pelo desktop)
pra dar mais espaço aos itens essenciais (Chats, Métricas, Contatos, Contratos, Canais). */
@media (max-width:700px){
.nav-right a[href$="monitor.php"],
.nav-right a[href$="slugs.php"],
.nav-right a[href$="chatbot.php"]{display:none}
}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b);border-radius:4px}
/* ============ ADMIN LAYOUT ============ */
.admin-wrap{display:flex;flex:1;height:calc(100dvh / var(--zoom));overflow:hidden}
/* Sidebar esquerda */
.admin-sidebar{
width:210px;background:var(--s1);border-right:1px solid var(--b);
display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto
}
.admin-logo{
display:flex;align-items:center;gap:10px;
padding:0 16px;height:46px;border-bottom:1px solid var(--b);
font-size:15px;font-weight:700;letter-spacing:-.02em;flex-shrink:0
}
.admin-logo .badge-admin{
background:var(--danger-soft);color:var(--dg);
font-size:10px;font-weight:600;padding:2px 7px;
border-radius:6px;letter-spacing:.04em
}
.nav-section{padding:16px 10px 4px;font-size:10px;font-weight:600;
color:var(--mt);text-transform:uppercase;letter-spacing:.08em}
.nav-item{
display:flex;align-items:center;gap:9px;
padding:8px 14px;font-size:13px;color:var(--mt);
border-left:3px solid transparent;cursor:pointer;
transition:background .12s,color .12s;border-radius:0 6px 6px 0;margin:1px 6px 1px 0
}
.nav-item:hover{background:var(--s2);color:var(--tx)}
.nav-item.active{background:var(--s2);color:var(--tx);border-left-color:var(--wa)}
.nav-item .ni{font-size:15px;width:20px;text-align:center}
/* Header fixo */
.admin-header{
height:46px;background:var(--s1);border-bottom:1px solid var(--b);
display:flex;align-items:center;justify-content:space-between;
padding:0 20px;flex-shrink:0
}
.admin-header-left{display:flex;align-items:center;gap:12px}
.admin-header-left h2{font-size:14px;font-weight:600}
.admin-user{display:flex;align-items:center;gap:10px;color:var(--mt);font-size:13px}
/* Conteúdo */
.admin-content{flex:1;overflow-y:auto;padding:24px}
/* ============ PAINEL CHAT LAYOUT ============ */
.app{display:flex;height:calc(100dvh / var(--zoom));overflow:hidden}
.sidebar{
width:320px;background:var(--s1);
border-right:1px solid var(--b);
display:flex;flex-direction:column;flex-shrink:0;
position:relative
}
/* FAB "+" pra novo contato — sobreposto à lista, canto inf-direito, translúcido */
.fab-novo-contato{
position:absolute;bottom:16px;right:16px;z-index:50;
width:42px;height:42px;border-radius:50%;
background:rgba(37,211,102,.55);color:#fff;border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
box-shadow:0 2px 8px rgba(0,0,0,.18);
opacity:.78;
transition:opacity .18s ease, transform .15s ease, background .15s ease, box-shadow .15s ease
}
.fab-novo-contato:hover{
opacity:1;
background:var(--wa);
transform:translateY(-2px) scale(1.04);
box-shadow:0 4px 14px rgba(37,211,102,.4)
}
.fab-novo-contato:active{transform:scale(.96)}
.fab-novo-contato i,.fab-novo-contato svg{width:20px;height:20px;stroke-width:2.5}
.painel-sidebar-toggle{
display:none;
position:fixed;
left:10px;
top:calc(env(safe-area-inset-top) + 10px);
width:38px;
height:38px;
border:none;
border-radius:12px;
background:var(--s1);
color:var(--tx);
font-size:18px;
line-height:1;
align-items:center;
justify-content:center;
box-shadow:var(--shadow-popover);
z-index:90;
cursor:pointer;
}
.painel-sidebar-toggle:hover{background:var(--s2)}
.topbar{
display:flex;justify-content:space-between;align-items:center;
padding:0 14px;height:46px;border-bottom:1px solid var(--b);flex-shrink:0
}
.topbar strong{font-size:14px;font-weight:700;letter-spacing:-.02em}
.topbar small{display:block;color:var(--mt);font-size:11px;margin-top:1px}
.hint-seta{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fbbf24;margin-left:14px;position:relative}
.hint-seta::after{display:none}
#hintBalao[data-placement="right"]{display:flex;align-items:center}
#hintBalao[data-placement="right"] .hint-seta{border:none;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #fbbf24;margin:0}
#hintBalao[data-placement="right"] .hint-corpo{animation:peSlideInRight .4s ease}
#hintBalao[data-placement="right"] .hint-corpo .hint-arrow{display:none}
#hintBalao[data-placement="left"]{display:flex;align-items:center;flex-direction:row-reverse}
#hintBalao[data-placement="left"] .hint-seta{border:none;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #fbbf24;margin:0}
#hintBalao[data-placement="left"] .hint-corpo{animation:peSlideInRight .4s ease}
#hintBalao[data-style="minimal"] .hint-seta{display:none}
#hintBalao[data-style="minimal"] .hint-corpo{padding:6px 9px;font-size:11.5px;width:auto;max-width:280px;box-shadow:0 2px 8px rgba(120,80,15,.12);background:linear-gradient(90deg,#fef9e1,#fef3c7);border-color:#fcd34d}
#hintBalao[data-style="minimal"] .hint-arrow{display:none}
#hintBalao[data-style="minimal"] .hint-close{font-size:13px;padding:0 6px;line-height:1.4}
@keyframes peSlideInRight{from{transform:translateX(-6px);opacity:0}to{transform:translateX(0);opacity:1}}
.hint-corpo{background:linear-gradient(90deg,#fef3c7,#fde68a);border:1px solid #fbbf24;border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.4;width:260px;pointer-events:all;box-shadow:0 4px 20px rgba(120,80,15,.18);color:#78350f;display:flex;align-items:flex-start;gap:8px;animation:peSlideIn .4s ease}
.hint-corpo strong{color:#78350f}
.hint-corpo .hint-text{flex:1}
.hint-corpo .hint-arrow{display:inline-block;animation:peNudge .9s ease-in-out infinite;font-weight:700}
.hint-corpo .hint-close{background:rgba(0,0,0,.06);border:0;border-radius:6px;color:#78350f;font-size:16px;cursor:pointer;padding:0 8px;line-height:1.6;flex-shrink:0;font-weight:700}
.hint-corpo .hint-close:hover{background:rgba(0,0,0,.14)}
@keyframes peSlideIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes peNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes pePulseHeader{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}50%{box-shadow:0 0 0 4px rgba(251,191,36,.35)}}
.hint-target-pulse{animation:pePulseHeader 1.6s ease-in-out infinite;border-radius:8px;position:relative;z-index:1}
/* 2026-05-21: novidade "áudio rápido cadastrável" — anel amarelo expandindo
ao redor do #btnRR (mesmo padrão de #btnChatbot.bot-ativo::after, linha 1030).
2 camadas defasadas em .9s pra efeito contínuo de onda. */
#btnRR.rr-tem-novidade{position:relative}
#btnRR.rr-tem-novidade::before,
#btnRR.rr-tem-novidade::after{
content:'';position:absolute;inset:0;
border:2px solid #e8b339;border-radius:50%;
pointer-events:none;opacity:0;
animation:botRing 1.8s ease-out infinite
}
#btnRR.rr-tem-novidade::after{animation-delay:.9s}
.atalhos-filtro-bar{display:flex;gap:5px;padding:6px 10px;border-bottom:1px solid var(--b);flex-wrap:wrap;flex-shrink:0;max-height:120px;overflow:hidden;position:relative;transition:max-height .35s ease, padding .35s ease, border-bottom-color .35s ease}
/* peek-collapsed: vira lasca discreta com indicador "N atalhos" centralizado */
.atalhos-filtro-bar.peek-collapsed{max-height:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent;overflow:hidden}
.atalhos-filtro-bar.peek-collapsed > .atalho-chip,
.atalhos-filtro-bar.peek-collapsed > *{opacity:0;pointer-events:none;transition:opacity .2s ease}
/* Lasca azul fina permanece como zona de hover (4px clicável) — sinaliza que tem
* algo ali sem ocupar espaço. Hover expande de volta. */
.atalhos-filtro-bar.peek-collapsed::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,transparent,var(--ac) 50%,transparent);opacity:.45;transition:opacity .25s ease}
.atalhos-filtro-bar.peek-collapsed:hover::before{opacity:0}
.atalhos-filtro-bar.peek-collapsed{padding-top:4px}
/* 2026-05-20: zona de hover invisível pra facilitar mouseover na lasca de 4px.
* Visual permanece o mesmo (gradiente azul de 4px); detection area = 20px.
* overflow:visible necessário pro ::after sair do box (bar tem max-height:0). */
.atalhos-filtro-bar.peek-collapsed{overflow:visible}
.atalhos-filtro-bar.peek-collapsed::after{content:'';position:absolute;left:0;right:0;top:-8px;height:24px;pointer-events:auto;z-index:2;background:transparent}
.atalhos-filtro-bar.peek-collapsed:hover::after{display:none}
.atalhos-filtro-bar:hover{max-height:400px;padding:6px 10px;border-bottom-color:var(--b);transition-delay:0s}
.atalhos-filtro-bar.views-list:hover{padding:8px 8px 6px}
.atalhos-filtro-bar:hover > .atalho-chip,
.atalhos-filtro-bar:hover > *{opacity:1;pointer-events:auto;transition-delay:.1s}
/* Nota educativa ANCORADA na lasca — aparece 1x quando auto-colapsa pela primeira vez.
* Position fixed com top/left calculados via JS (getBoundingClientRect da bar). Triângulo
* CSS aponta pra cima (pra lasca azul). Dedo emoji ☝️ pulsando reforça. */
.atalhos-peek-edu{position:fixed;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;padding:10px 12px;border-radius:8px;border:1px solid #fbbf24;box-shadow:0 6px 20px rgba(0,0,0,.3);font-size:12px;font-weight:500;line-height:1.4;max-width:260px;z-index:9999;display:flex;align-items:flex-start;gap:8px;animation:atalhosEduSlide .4s ease}
.atalhos-peek-edu::before{content:'';position:absolute;top:-7px;left:22px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fbbf24}
.atalhos-peek-edu::after{content:'';position:absolute;top:-6px;left:23px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fde68a}
.atalhos-peek-edu .atalhos-peek-edu-x{background:rgba(0,0,0,.06);border:none;cursor:pointer;color:#78350f;font-size:14px;line-height:1;padding:2px 7px;border-radius:5px;flex-shrink:0;margin-top:-1px}
.atalhos-peek-edu .atalhos-peek-edu-x:hover{background:rgba(0,0,0,.14)}
.atalhos-peek-edu-finger{font-size:16px;line-height:1;flex-shrink:0;animation:atalhosFingerBounce 1s ease-in-out infinite}
@keyframes atalhosFingerBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes atalhosEduSlide{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
/* 2026-05-18: barra antiga de filtros ativos (filtroAtivoBarra) removida —
redundante com VIEWS em cima + dropdown ⚙. Chips removíveis dos filtros
aplicados ficam dentro do dropdown ⚙ (que já mostra cada filtro com toggle). */
#filtroAtivoBarra{display:none!important}
/* 2026-05-18: VIEWS — atalhos como lista vertical sempre visível, com ★ default.
Substitui o modo "chips horizontais + colapso 3s" pra atalhos. CSS legado de
.peek-collapsed continua acima (não remover — outros componentes podem usar). */
.atalhos-filtro-bar.views-list{display:block!important;max-height:400px;overflow:hidden;padding:8px 8px 6px;background:rgba(88,166,255,.04)}
/* Combo views-list + peek-collapsed: força colapso (specificity tie sem essa regra deixava max-height:400 vencer). */
/* 2026-05-21 (refactor click-toggle): peek-collapsed agora é estado fechado puro —
* só header visível e CLICÁVEL. Sem hover-expand, sem fade-mask, sem auto-collapse.
* User clica no header pra abrir/fechar. Click fora fecha (handler JS). */
.atalhos-filtro-bar.views-list.peek-collapsed{max-height:26px!important;padding:4px 8px 0!important;overflow:hidden!important;background:linear-gradient(90deg,rgba(88,166,255,.06) 0%,rgba(88,166,255,0) 60%)!important}
/* Esconde itens (views) — só header continua visível e clicável */
.atalhos-filtro-bar.views-list.peek-collapsed > *:not(.views-list-hdr){opacity:0!important;pointer-events:none!important;transition:opacity .2s ease}
.atalhos-filtro-bar.views-list.peek-collapsed > .views-list-hdr{opacity:.85!important;padding:0 4px!important;margin:0!important;height:18px;display:flex;align-items:center}
.atalhos-filtro-bar.views-list .views-list-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;cursor:pointer;user-select:none}
.atalhos-filtro-bar.views-list .views-list-hdr:hover .views-list-label{color:var(--tx)}
.atalhos-filtro-bar.views-list .views-list-label{transition:color .15s}
.atalhos-filtro-bar.views-list .views-list-label{font-size:10px;font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:5px}
.atalhos-filtro-bar.views-list .views-hdr-actions{display:flex;align-items:center;gap:6px}
.atalhos-filtro-bar.views-list .views-pin-btn{background:transparent;border:1px solid var(--b);color:var(--mt);cursor:pointer;padding:2px 5px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s}
.atalhos-filtro-bar.views-list .views-pin-btn svg{width:11px;height:11px;stroke-width:2}
.atalhos-filtro-bar.views-list .views-pin-btn:hover{color:var(--ac);border-color:var(--ac)}
.atalhos-filtro-bar.views-list .views-pin-btn.on{color:var(--ac);border-color:var(--ac);background:rgba(88,166,255,.10)}
.atalhos-filtro-bar.views-list .views-pin-btn.on svg{fill:var(--ac)}
.atalhos-filtro-bar.views-list .views-add-btn{background:transparent;border:1px dashed var(--b);color:var(--ac);font-size:10.5px;cursor:pointer;padding:2px 8px;border-radius:5px;display:flex;align-items:center;gap:3px;font-weight:600}
.atalhos-filtro-bar.views-list .views-add-btn:hover{border-color:var(--ac);background:rgba(88,166,255,.08)}
.atalhos-filtro-bar.views-list .views-add-btn svg{width:11px;height:11px}
.atalhos-filtro-bar.views-list .view-item{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--tx);position:relative}
.atalhos-filtro-bar.views-list .view-item:hover{background:var(--s2)}
.atalhos-filtro-bar.views-list .view-item.active{background:rgba(88,166,255,.12)}
.atalhos-filtro-bar.views-list .view-star{color:var(--mt);cursor:pointer;width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,transform .12s}
.atalhos-filtro-bar.views-list .view-star svg{width:13px;height:13px;stroke-width:2;fill:none}
.atalhos-filtro-bar.views-list .view-star:hover{transform:scale(1.2)}
.atalhos-filtro-bar.views-list .view-star.on{color:#f1c40f}
.atalhos-filtro-bar.views-list .view-star.on svg{fill:#f1c40f}
.atalhos-filtro-bar.views-list .view-ico{color:var(--mt);flex-shrink:0;width:18px;display:flex;align-items:center;justify-content:center;opacity:.9}
.atalhos-filtro-bar.views-list .view-ico svg{width:13px;height:13px;stroke-width:2}
.atalhos-filtro-bar.views-list .view-item.active .view-ico{color:var(--ac);opacity:1}
.atalhos-filtro-bar.views-list .view-nome-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.atalhos-filtro-bar.views-list .view-del{background:transparent;border:none;color:var(--mt);cursor:pointer;padding:2px 4px;line-height:1;opacity:0;transition:opacity .15s,color .15s;border-radius:3px;display:flex;align-items:center;justify-content:center}
.atalhos-filtro-bar.views-list .view-del svg{width:13px;height:13px;stroke-width:2.4}
.atalhos-filtro-bar.views-list .view-item:hover .view-del{opacity:.65}
.atalhos-filtro-bar.views-list .view-del:hover{opacity:1!important;color:#da3633}
/* Cheat-sheet de teclado (modal aberto via "?") */
.kbd-cheat-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999}
.kbd-cheat-modal.open{display:flex}
.kbd-cheat-card{background:var(--s1);border:1px solid var(--b);border-radius:10px;padding:20px 24px;max-width:380px;width:90%}
.kbd-cheat-card h3{font-size:14px;margin:0 0 14px;color:var(--tx);display:flex;align-items:center;gap:8px}
.kbd-cheat-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--b);font-size:12.5px;color:var(--mt)}
.kbd-cheat-row:last-child{border-bottom:0}
.kbd-cheat-row .keys{display:flex;gap:4px;align-items:center}
.kbd-cheat-row kbd{background:var(--s2);border:1px solid var(--b);padding:2px 8px;border-radius:4px;font-family:ui-monospace,SF Mono,monospace;font-size:11px;color:var(--tx)}
.atalho-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 7px;border-radius:999px;background:var(--s2);border:1px solid var(--b);font-size:11px;font-weight:600;color:var(--mt);cursor:pointer;white-space:nowrap;transition:.15s, opacity .2s ease;user-select:none}
.atalho-chip:hover{border-color:var(--ac);color:var(--ac)}
.atalho-del{background:none;border:none;cursor:pointer;color:var(--mt);padding:0 0 0 2px;font-size:14px;line-height:1;transition:.15s}
.atalho-del:hover{color:var(--pr)}
.filtro-salvar-btn{margin-left:auto;padding:2px 10px;border-radius:999px;background:none;border:1px dashed var(--b);font-size:10px;font-weight:700;color:var(--mt);cursor:pointer;white-space:nowrap;transition:.15s;flex-shrink:0}
.filtro-salvar-btn:hover{border-color:var(--ac);color:var(--ac)}
.search-wrap{padding:8px 10px;border-bottom:1px solid var(--b);flex-shrink:0;display:flex;flex-direction:row;gap:6px;align-items:center;position:relative}
.busca-wrap{flex:1;position:relative;display:flex;align-items:center}
.busca-wrap input{
width:100%;padding:8px 30px 8px 12px;border-radius:8px;
border:1px solid var(--b);background:var(--s2);
color:var(--tx);font-size:13px;outline:none
}
.busca-wrap input:focus{border-color:var(--ac)}
.busca-clear{
position:absolute;right:8px;background:none;border:none;cursor:pointer;
color:var(--mt);font-size:13px;line-height:1;padding:2px;display:none
}
.busca-clear:hover{color:var(--tx)}
.filtro-btn{
flex-shrink:0;width:34px;height:34px;border-radius:8px;border:1px solid var(--b);
background:var(--s2);color:var(--mt);cursor:pointer;display:flex;align-items:center;
justify-content:center;font-size:15px;transition:background .15s,color .15s,border-color .15s
}
.filtro-btn:hover,.filtro-btn.ativo{background:var(--ac);color:var(--text-inverse);border-color:var(--ac)}
.filtro-drop{
position:absolute;top:calc(100% - 2px);left:10px;background:var(--s1);border:1px solid var(--b);
border-radius:12px;min-width:260px;max-width:300px;z-index:200;padding:8px;
box-shadow:var(--shadow-modal);display:none;
/* 2026-05-18: clamp em vez de calc puro — garante altura mínima de 280px (lista
usável em telas pequenas) e máxima de 70vh. Antes 100vh-140px ficava negativo
em telas curtas + lista interna 100vh-240px sumia. */
max-height:clamp(280px, 70vh, 640px);overflow:hidden;
}
.filtro-drop.open{display:flex;flex-direction:column}
.filtro-drop > div:first-child{flex-shrink:0}
.filtro-drop [id^="filtro"][id$="Lista"]{
/* Altura da lista interna escalável: mínimo 160px (cabe ~5 itens visíveis),
máximo 50vh. Overflow Y sempre auto — scrollbar mostra que há mais. */
max-height:clamp(160px, 50vh, 440px);overflow-y:auto;
/* Scrollbar visível pra atendente perceber que há mais itens (problema
reportado 18/05: "ta ficando escondido lá pra baixo"). */
scrollbar-width:thin;scrollbar-color:var(--mt) transparent;
}
.filtro-drop [id^="filtro"][id$="Lista"]::-webkit-scrollbar{width:8px}
.filtro-drop [id^="filtro"][id$="Lista"]::-webkit-scrollbar-thumb{background:var(--b);border-radius:4px}
.filtro-drop [id^="filtro"][id$="Lista"]::-webkit-scrollbar-thumb:hover{background:var(--mt)}
.filtro-drop-item{
display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
font-size:12px;cursor:pointer;color:var(--tx);transition:background .1s
}
.filtro-drop-item:hover{background:var(--s2)}
.filtro-drop-item.sel{background:var(--primary-soft);font-weight:600}
.filtro-etiqueta-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.lista-chats{overflow-y:auto;flex:1}
/* 2026-05-19: modo de seleção em massa — adiciona checkbox no início de cada item.
Estado controlado por .selecao-modo na .lista-chats (toggle via JS). Click no
item nesse modo deve marcar/desmarcar a seleção, não abrir o chat. */
.lista-chats.selecao-modo .chat-item{padding-left:38px}
.lista-chats.selecao-modo .chat-item::before{
content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
width:16px;height:16px;border:2px solid var(--mt);border-radius:4px;background:transparent;
transition:all .12s
}
.lista-chats.selecao-modo .chat-item.selecionado::before{
background:var(--ac);border-color:var(--ac);
background-image:url("data:image/svg+xml;utf8,");
background-position:center;background-repeat:no-repeat
}
.lista-chats.selecao-modo .chat-item.selecionado{background:rgba(31,111,235,.08)}
/* Chat item — estilo WhatsApp */
.chat-item{
display:flex;align-items:center;gap:12px;
padding:10px 16px;border-bottom:1px solid var(--surface-hover);
cursor:pointer;transition:background .12s;position:relative;user-select:none;
/* iOS WebKit (Safari + Chrome iOS): sem isso explícito no elemento clicável,
o 1º tap é tratado como "hover acquisition" (mesmo com @media(hover:none)
neutralizando o visual) e o click só dispara no 2º tap. touch-action não
herda do body. -webkit-touch-callout suprime o popup de long-press. */
touch-action:manipulation;
-webkit-touch-callout:none
}
.chat-item:hover{background:var(--surface-hover)}
.chat-item.active{background:var(--surface-hover-strong)}
.chat-item.fixado-item .chat-avatar-wrap::after{
content:'📌';position:absolute;bottom:-2px;right:-2px;font-size:10px;
background:var(--s1);border-radius:50%;width:14px;height:14px;
display:flex;align-items:center;justify-content:center;line-height:1
}
/* Comunidade: bolinha verde de "cliente online" no canto sup-direito do avatar.
Usa ::before (o ::after já é o 📌 do fixado). Ligada via classe .com-online pelo
poller leads_online no painel.js (schema v136). */
.chat-item.com-online .chat-avatar-wrap::before{
content:'';position:absolute;top:-1px;right:-1px;z-index:3;
width:12px;height:12px;border-radius:50%;
background:#22c55e;border:2px solid var(--s1)
}
.chat-avatar-wrap{position:relative;flex-shrink:0}
.chat-avatar{border-radius:50%;flex-shrink:0;object-fit:cover;width:46px;height:46px;display:block}
.avatar-initials{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--text-inverse)}
.chat-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.chat-item-row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-item-row2{display:flex;align-items:center;justify-content:space-between;gap:6px}
.chat-nome{
flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:14px;font-weight:500;color:var(--tx);line-height:1.2
}
.chat-nome-edit-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.chat-nome-edit-input{
flex:1;min-width:0;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--b);
background:var(--s1);color:var(--tx);font-size:13px;font-weight:600;outline:none
}
.chat-nome-edit-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--accent-ring)}
.chat-nome-edit-btn{
width:24px;height:24px;border:none;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
background:var(--surface-faint);color:var(--mt);cursor:pointer;transition:.15s;flex-shrink:0;padding:0
}
.chat-nome-edit-btn:hover{background:var(--surface-hover);color:var(--tx)}
.chat-nome-edit-btn.save{color:var(--pr)}
.chat-nome-edit-btn.cancel{color:var(--dg)}
.chat-meta-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-item-row1 > .chat-meta-right{flex-direction:row !important;align-items:center !important;gap:4px !important}
.chat-item-row2 > .chat-meta-right{flex-direction:row !important;align-items:center !important;gap:6px !important}
.chat-item-row2 > .chat-meta-right > .chat-resp-mini{margin-left:-12px;position:relative;z-index:0}
.chat-item-row2 > .chat-meta-right > .row2-badge-nl{position:relative;z-index:2}
.chat-time{font-size:11px;color:var(--mt);white-space:nowrap}
.chat-ctx-btn-row1{
background:none;border:none;cursor:pointer;color:var(--mt);
padding:0;margin:0;font-size:13px;line-height:11px;border-radius:4px;
opacity:.6;transition:opacity .15s,color .15s;flex-shrink:0;
display:inline-flex;align-items:center;height:11px;min-width:10px
}
.chat-item:hover .chat-ctx-btn-row1{opacity:1;color:var(--tx)}
.chat-time.tem-nao-lido{color:var(--wa)}
.chat-preview-row{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
.chat-tags-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chat-tag-chip{
--tag-color:var(--ac);
display:inline-flex;align-items:center;gap:6px;max-width:100%;
background:color-mix(in srgb, var(--tag-color) 40%, transparent);
border:1px solid color-mix(in srgb, var(--tag-color) 60%, transparent);
color:var(--tx);border-radius:999px;padding:2px 9px 2px 7px;font-size:11px;font-weight:600;line-height:1
}
.chat-tag-dot{width:8px;height:8px;border-radius:50%;background:var(--tag-color);flex-shrink:0}
/* Largura fixa do texto = "Banido" (base) → todo chip de etiqueta tem o mesmo tamanho.
Nomes maiores cortam com … (nome completo no title/hover). */
.chat-tag-text{flex:0 0 44px;width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-tag-remove{
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
width:14px;height:14px;border:none;border-radius:50%;cursor:pointer;
background:var(--surface-contrast);color:var(--tx);font-size:11px;line-height:1;padding:0
}
.chat-tag-remove:hover{background:var(--surface-contrast-strong)}
.chat-preview{
flex:1;color:var(--mt);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;font-size:12px;line-height:1.3
}
.chat-preview-img-inline{display:flex;align-items:center;gap:4px;color:var(--mt);font-size:12px;flex:1;min-width:0}
.chat-preview-thumb-sm{width:18px;height:18px;border-radius:3px;object-fit:cover;flex-shrink:0}
.chat-icons{display:flex;align-items:center;gap:4px;color:var(--mt);font-size:12px}
/* Badge não lidos — verde WhatsApp */
.badge-nao-lido{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:999px;
background:var(--wa);color:var(--text-inverse);font-size:10px;font-weight:700;line-height:1;flex-shrink:0
}
.badge-nao-lido.silenciado{background:var(--mt)}
.chat-meta-slot{
position:relative;display:flex;align-items:center;justify-content:flex-end;
min-width:24px;min-height:18px;
}
/* Menu de contexto */
.chat-ctx-btn{
opacity:0;position:absolute;right:0;top:50%;transform:translateY(-50%);
flex-shrink:0;background:none;border:none;cursor:pointer;
color:var(--mt);padding:0 2px;font-size:16px;line-height:1;border-radius:4px;transition:opacity .15s
}
.chat-item:hover .chat-meta-slot .chat-ctx-btn{opacity:1}
.chat-item:hover .chat-meta-slot .badge-nao-lido{opacity:0}
.chat-meta-slot .badge-nao-lido{transition:opacity .15s}
/* Touch/mobile: neutralizar :hover do chat-item. Sticky hover do iOS Safari
(e em menor grau Chrome Android) combina com mudança visual no hover
(background, badge sumindo, ctx-btn aparecendo) e força 2 toques pra abrir
— 1º "ativa hover", 2º dispara click. Mesmo padrão de rr-popup-item/msg-menu.
Comma = OR: (hover:none) catches phones; (pointer:coarse) catches touch laptops
e PWA em desktop com touchscreen onde hover:hover ainda é reportado. */
@media(hover:none), (pointer:coarse){
.chat-item:hover{background:transparent}
.chat-item.active:hover{background:var(--surface-hover-strong)}
.chat-item:hover .chat-meta-slot .chat-ctx-btn{opacity:0}
.chat-item:hover .chat-meta-slot .badge-nao-lido{opacity:1}
/* ctx-btn-row1 do ⋮ na linha do nome — adicionado depois do @media original.
Faltava neutralizar: .6→1 + cor cinza→tx era o último gatilho de sticky-hover. */
.chat-item:hover .chat-ctx-btn-row1{opacity:.6;color:var(--mt)}
}
/* Avatar overlays: ícone WA (esq) e badge de não-lidas (dir) */
.avatar-badge-nl{
position:absolute;bottom:-2px;right:-2px;
min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:var(--wa);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-size:9px;font-weight:700;line-height:1;
border:2px solid var(--s1);pointer-events:none;z-index:1
}
.avatar-badge-nl.silenciado{background:var(--mt)}
/* Badge MOVIDO 17/05: do avatar pra row2 (alinhado direita com ult msg). UX mais limpa:
avatar fica só com foto, contador fica horizontal com preview da última msg.
Translucido: bg rgba 18% + texto verde + border leve — mesmo pattern do chip "NA CONVERSA". */
.row2-badge-nl{
min-width:22px;height:18px;padding:0 6px;border-radius:999px;
background:rgba(37,211,102,.18);color:#25d366;
border:1px solid rgba(37,211,102,.35);
display:inline-flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;line-height:1;
margin-left:6px;flex-shrink:0;
box-sizing:border-box
}
.row2-badge-nl.silenciado{
background:rgba(125,133,144,.18);color:var(--mt);
border-color:rgba(125,133,144,.35)
}
/* Iniciais do responsável no meta-right */
.resp-initials{
display:inline-flex;align-items:center;justify-content:center;
width:15px;height:15px;border-radius:50%;
background:color-mix(in srgb,var(--ac) 18%,transparent);
color:var(--ac);font-size:8px;font-weight:700;flex-shrink:0;line-height:1
}
/* Linha subinfo abaixo do preview */
.chat-subinfo-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:2px;flex-wrap:nowrap;min-width:0;overflow:hidden}
.subinfo-tags{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden}
.subinfo-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;min-width:0;max-width:90px}
.setor-text{font-size:10px;color:var(--mt);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
/* Avatar mini do atendente — row1, à direita da hora (paridade Umbler) */
.chat-resp-mini{
width:22px;height:22px;border-radius:50%;
object-fit:cover;flex-shrink:0;
border:1px solid color-mix(in srgb,var(--mt) 25%,transparent);
display:inline-block
}
.chat-resp-mini-fallback{
display:inline-flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--mt) 14%,transparent);
color:var(--mt)
}
.chat-resp-mini-fallback svg{display:block}
/* Tick checkmark no preview (estilo WhatsApp) — sent/delivered/read/error */
.preview-tick{
display:inline-flex;align-items:center;flex-shrink:0;margin-right:4px;
vertical-align:middle
}
.preview-tick svg{display:block}
/* No rodapé da bolha (chat unificado) o tick vem DEPOIS da hora — sem a margem-direita
pensada pro layout da sidebar (tick antes do texto). Mantém a MESMA aparência da sidebar. */
.msg-footer .preview-tick{margin-right:0}
.preview-tick-sent,.preview-tick-delivered{color:var(--mt)}
.preview-tick-read{color:#3b82f6}
.preview-tick-error{color:#ef4444;font-weight:700;font-size:13px;line-height:1}
/* Chip "+N" pras etiquetas extras — accent destacado (paridade Umbler) */
.tag-extras-chip{
display:inline-flex;align-items:center;flex-shrink:0;
padding:2px 8px;border-radius:999px;
background:color-mix(in srgb,var(--ac) 22%,transparent);
border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);
color:var(--ac);font-size:11px;font-weight:700;
line-height:1;cursor:help
}
/* Chip do setor (alinhado à direita) — pill cinza neutro, só texto, sem ícone.
Mostra nome completo quando cabe. Quando aperta, CSS trunca com ellipsis.
Tooltip (title) mostra nome cheio em qualquer caso. */
.setor-chip{
display:inline-flex;align-items:center;
margin-left:auto;flex-shrink:1;min-width:0;
max-width:120px;
padding:1px 8px;border-radius:999px;
background:color-mix(in srgb,var(--mt) 14%,transparent);
color:var(--mt);font-size:10px;font-weight:500;
line-height:1.4;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
cursor:help
}
/* Chip de atendente responsável — paridade visual com .tag-first-chip
(mesmo formato pill). Icone lucide user + nome com ellipsis. */
.resp-chip{
display:inline-flex;align-items:center;gap:4px;
min-width:0;max-width:100%;
padding:1px 7px 1px 5px;
border-radius:999px;
background:color-mix(in srgb,var(--mt) 8%,transparent);
border:1px solid color-mix(in srgb,var(--mt) 28%,transparent);
color:var(--mt);font-size:10px;font-weight:500;
line-height:1.4;white-space:nowrap;overflow:hidden
}
.resp-chip .resp-ico{flex:0 0 auto;display:inline-flex;align-items:center}
.resp-chip .resp-ico svg{display:block;width:11px;height:11px;opacity:.85}
.resp-chip .resp-ico img{display:block;width:14px;height:14px;border-radius:50%;object-fit:cover}
.resp-chip .resp-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
min-width:5ch
}
/* Chip da primeira etiqueta (sem botão remover) */
.tag-first-chip{
--tag-color:var(--ac);
display:inline-flex;align-items:center;gap:6px;
background:color-mix(in srgb,var(--tag-color) 40%,transparent);
border:1px solid color-mix(in srgb,var(--tag-color) 60%,transparent);
color:var(--tx);border-radius:999px;padding:2px 9px 2px 7px;
font-size:11px;font-weight:600;line-height:1;white-space:nowrap;max-width:130px;overflow:hidden
}
.chat-ctx-menu{
position:fixed;background:var(--s1);border:1px solid var(--b);
border-radius:10px;min-width:200px;z-index:999;padding:6px;
box-shadow:var(--shadow-popover);display:none
}
.chat-ctx-menu.open{display:block}
.chat-ctx-item{
display:flex;align-items:center;gap:10px;padding:8px 12px;
border-radius:7px;font-size:13px;cursor:pointer;color:var(--tx);transition:background .1s
}
.chat-ctx-item:hover{background:var(--s2)}
.chat-ctx-item.danger{color:var(--dg)}
.chat-ctx-item.danger:hover{background:var(--danger-soft-strong)}
.chat-ctx-sep{height:1px;background:var(--b);margin:4px 0}
/* Divisor Fixados */
.chat-section-label{
padding:6px 16px 4px;font-size:11px;font-weight:700;
color:var(--mt);text-transform:uppercase;letter-spacing:.06em
}
/* Seções da BUSCA (Conversas/Mensagens) — estilo WhatsApp Web: verde, sem maiúscula. */
.chat-section-label.sec-busca{
color:var(--wa);text-transform:none;font-weight:600;font-size:12px;letter-spacing:0;
padding-top:12px
}
/* ── Respostas rápidas popup ─────────────────────────────── */
.rr-popup{
position:absolute;bottom:calc(100% + 8px);left:0;right:0;
width:100%;max-width:100%;box-sizing:border-box;
background:var(--s1);border:1px solid var(--b);border-radius:14px;
box-shadow:var(--shadow-popover);z-index:300;
max-height:380px;display:flex;flex-direction:column;overflow:hidden
}
.rr-popup-header{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px 6px;border-bottom:1px solid var(--b);flex-shrink:0
}
.rr-popup-title{font-size:12px;font-weight:700;color:var(--mt);display:flex;align-items:center;gap:6px}
.rr-popup-close{background:none;border:none;color:var(--mt);cursor:pointer;font-size:16px;line-height:1;padding:2px}
.rr-popup-list{overflow-y:auto;flex:1}
.rr-popup-cat{
padding:5px 14px 3px;font-size:10px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--mt);
background:var(--s2);border-bottom:1px solid var(--b)
}
.rr-popup-cat-sugeridas{color:#c8922a;background:rgba(200,146,42,.08)}
/* Premium minimalista — contorno neon azul, sem gold, sem padding extra */
.rr-popup-item-premium{
box-shadow:inset 2px 0 0 var(--ac), inset 0 0 18px -10px rgba(31,111,235,.4)
}
.rr-popup-item-premium:hover{background:rgba(31,111,235,.04)}
.rr-popup-item-premium.rr-selected{background:var(--primary-soft)}
.rr-popup-rank{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;border-radius:50%;
background:transparent;border:1px solid var(--ac);color:var(--ac);
font-size:9px;font-weight:800;line-height:1;flex-shrink:0;
text-shadow:0 0 4px rgba(31,111,235,.6)
}
.rr-popup-uso{
font-size:10px;font-weight:700;color:var(--mt);
background:var(--s2);border:1px solid var(--b);
border-radius:4px;padding:1px 6px;line-height:1.3;flex-shrink:0
}
.rr-popup-criador{
font-size:10px;font-weight:500;color:var(--mt);opacity:.65;
line-height:1.3;flex-shrink:0;white-space:nowrap;
max-width:90px;overflow:hidden;text-overflow:ellipsis
}
.rr-popup-criador-legado{font-style:italic;opacity:.5}
.rr-popup-ocultas{border-top:1px dashed var(--b);background:var(--s2)}
.rr-popup-ocultas-bar{
display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
font-size:11px;font-weight:600;color:var(--mt);user-select:none;transition:color .15s
}
.rr-popup-ocultas-bar:hover{color:var(--tx)}
.rr-popup-ocultas-arrow{margin-left:auto;font-size:10px}
.rr-popup-ocultas-list{padding:0 14px 10px;display:flex;flex-direction:column;gap:6px}
.rr-popup-oculta-item{
display:flex;align-items:center;gap:8px;padding:6px 8px;
background:var(--s1);border:1px solid var(--b);border-radius:6px;font-size:11px
}
.rr-popup-oculta-titulo{
flex:1;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0
}
.rr-popup-restaurar{
background:transparent;border:1px solid var(--ac);color:var(--ac);
border-radius:5px;padding:2px 8px;font-size:10px;font-weight:600;
cursor:pointer;flex-shrink:0;transition:.15s
}
.rr-popup-restaurar:hover{background:var(--ac);color:var(--text-inverse)}
.rr-popup-item{
display:flex;flex-direction:column;gap:4px;padding:10px 14px;
cursor:pointer;transition:background .1s;border-bottom:1px solid var(--surface-faint)
}
.rr-item-top{display:flex;align-items:center;width:100%;gap:8px;min-width:0}
.rr-popup-item:hover,.rr-popup-item.rr-selected{background:var(--surface-contrast)}
.rr-popup-item.rr-selected{background:var(--primary-soft)}
.rr-popup-atalho{
font-size:12px;font-weight:700;color:var(--ac);
background:var(--primary-soft);padding:2px 8px;border-radius:5px;
white-space:nowrap;flex-shrink:0;margin-top:1px
}
.rr-popup-body{flex:1;min-width:0}
.rr-popup-item-title{font-size:13px;font-weight:500;color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.rr-uso-count{font-size:10px;font-weight:700;color:var(--ac);background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.2);border-radius:4px;padding:1px 5px;flex-shrink:0;line-height:1.4}
.rr-popup-preview{font-size:12px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.rr-popup-actions{display:flex;gap:6px;align-items:center;opacity:1;margin-left:auto;flex-shrink:0}
.rr-popup-btn{
background:transparent;border:none;color:var(--mt);cursor:pointer;
padding:3px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
transition:color .15s;flex-shrink:0
}
.rr-popup-send:hover{color:var(--wa)}
.rr-popup-edit:hover{color:var(--ac)}
.rr-popup-hide:hover{color:var(--wn)}
.rr-popup-del:hover{color:var(--dg)}
.rr-popup-empty{padding:24px;text-align:center;color:var(--mt);font-size:13px}
/* v94: filter row (Tudo / Texto / Áudio).
PEGADINHA DE ESPECIFICIDADE: `.envio button` na linha 899 tem especificidade
(0,0,1,1) IGUAL a `button.rr-filter-btn` (0,0,1,1) MAS vem DEPOIS no arquivo,
então vencia o tiebreaker e aplicava `background:var(--wa)` (verde WA) em
todos botões inativos. O `.active` ganhava só porque adiciona uma classe
extra (especificidade 0,0,2,1). Solução: usar `.rr-filter-row button.rr-filter-btn`
(especificidade 0,0,2,1) — empata com .active mas vence `.envio button`. */
.rr-filter-row{
display:flex;gap:6px;padding:6px 14px;
border-bottom:1px solid var(--b);flex-shrink:0
}
.rr-filter-row button.rr-filter-btn{
display:inline-flex;align-items:center;gap:5px;
background:transparent;border:1px solid var(--b);color:var(--mt);
border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;
cursor:pointer;transition:.15s
}
.rr-filter-row button.rr-filter-btn:hover{color:var(--tx);border-color:var(--tx)}
.rr-filter-row button.rr-filter-btn.active{background:var(--primary-soft);border-color:var(--ac);color:var(--ac)}
/* Lucide icons mais delicados — stroke-width:1.75 igual .h-ico (resto do sistema) */
.rr-filter-row button.rr-filter-btn i,.rr-filter-row button.rr-filter-btn svg{width:12px;height:12px;stroke-width:1.75}
.rr-filter-count{font-size:9px;font-weight:700;opacity:.7;margin-left:2px}
/* v94: botão "Gravar áudio" no header — mesma pegadinha da .envio button (vide nota acima) */
.rr-popup button.rr-grav-audio-btn{
display:inline-flex;align-items:center;gap:5px;
background:transparent;border:1px solid var(--b);color:var(--mt);
border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;
cursor:pointer;transition:.15s
}
.rr-popup button.rr-grav-audio-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--primary-soft)}
.rr-popup button.rr-grav-audio-btn i,.rr-popup button.rr-grav-audio-btn svg{width:13px;height:13px;stroke-width:1.75}
/* v94: ícone diferenciador audio/texto no item */
.rr-tipo-ico{
width:16px;height:16px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;color:var(--mt)
}
.rr-tipo-ico.audio{color:#e8b339}
.rr-tipo-ico i,.rr-tipo-ico svg{width:13px;height:13px;stroke-width:1.75}
/* v94: player inline pra item de áudio.
button.rr-audio-play OBRIGATÓRIO (vide pegadinha .envio button linha 899). */
.rr-audio-player{
display:flex;align-items:center;gap:8px;
background:var(--s2);border:1px solid var(--b);border-radius:6px;
padding:4px 8px;margin-top:3px;width:100%
}
.rr-audio-player button.rr-audio-play{
background:var(--ac);border:none;color:#fff;cursor:pointer;
width:22px;height:22px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;transition:.15s
}
.rr-audio-player button.rr-audio-play:hover{background:#3a85fa;transform:scale(1.05)}
.rr-audio-player button.rr-audio-play.playing{background:#e8b339}
.rr-audio-player button.rr-audio-play svg{width:11px;height:11px;margin-left:1px}
.rr-audio-bar{
flex:1;height:3px;background:var(--b);border-radius:2px;position:relative;overflow:hidden
}
.rr-audio-bar-fill{
position:absolute;left:0;top:0;bottom:0;width:0;
background:linear-gradient(90deg,var(--ac),#3a85fa);border-radius:2px;
transition:width .1s linear
}
.rr-audio-dur{font-size:11px;font-weight:600;color:var(--mt);flex-shrink:0;min-width:32px;text-align:right}
/* v94: gravador modal */
.rr-grav-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;
display:flex;align-items:center;justify-content:center
}
.rr-grav-card{
background:var(--s1);border:1px solid var(--b);border-radius:12px;
width:90%;max-width:420px;display:flex;flex-direction:column;
box-shadow:0 12px 40px rgba(0,0,0,.5)
}
.rr-grav-header{
padding:12px 14px;border-bottom:1px solid var(--b);
display:flex;align-items:center;gap:8px;flex-shrink:0;
font-size:13px;font-weight:600;color:var(--tx)
}
.rr-grav-header i{width:14px;height:14px;color:var(--mt)}
.rr-grav-header .rr-popup-close{margin-left:auto}
.rr-grav-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.rr-grav-footer{
padding:10px 14px;border-top:1px solid var(--b);
display:flex;justify-content:flex-end;gap:8px;flex-shrink:0
}
.rr-grav-control{
background:var(--s2);border:1px solid var(--b);border-radius:8px;
padding:10px;margin-top:4px;display:flex;flex-direction:column;gap:6px
}
/* v94: todos botões do gravador modal precisam de specificity bump pra vencer
`.envio button { background:var(--wa) }` (linha 899). Padrão: `.rr-grav-overlay button.X`
eleva pra (0,0,2,1+). Vale pra .rr-grav-rec, .btn.bs, .btn.bp, .rr-popup-close. */
.rr-grav-overlay button.rr-grav-rec{
background:transparent;border:1px solid var(--b);color:var(--tx);
border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;
cursor:pointer;transition:.15s;
display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.rr-grav-overlay button.rr-grav-rec:hover{border-color:var(--ac);color:var(--ac)}
.rr-grav-overlay button.rr-grav-rec.recording{background:#e8313140;border-color:#e83131;color:#e83131}
.rr-grav-overlay button.rr-grav-rec i,.rr-grav-overlay button.rr-grav-rec svg{width:14px;height:14px;stroke-width:1.75}
/* v94: Cancelar/Salvar/Regravar do modal gravador — re-aplica os bg corretos pra
sobrescrever a regra .envio button verde WA herdada. */
.rr-grav-overlay button.btn.bs{background:var(--s2);color:var(--mt)}
.rr-grav-overlay button.btn.bs:hover{color:var(--tx)}
.rr-grav-overlay button.btn.bp{background:var(--pr);color:var(--text-inverse)}
.rr-grav-overlay button.btn.bp:hover{background:var(--ph)}
.rr-grav-overlay button.btn.bp:disabled{opacity:.5;cursor:not-allowed}
/* v94: X de fechar do modal gravador — está em .rr-grav-overlay, fora do escopo
.rr-popup do override !important existente (linha 1920+). */
.rr-grav-overlay button.rr-popup-close{
background:transparent;border:none;color:var(--mt);cursor:pointer;padding:2px
}
.rr-grav-overlay button.rr-popup-close:hover{color:var(--tx)}
.rr-grav-timer{
display:flex;align-items:center;justify-content:center;gap:8px;
font-size:13px;font-weight:700;color:var(--mt);padding:4px
}
.rr-hint{font-size:11px;color:var(--mt);padding:6px 14px;border-top:1px solid var(--b);flex-shrink:0;display:flex;gap:10px}
.rr-hint kbd{
display:inline-block;padding:1px 5px;border-radius:4px;
font-size:10px;border:1px solid var(--b);background:var(--s2);color:var(--tx);font-family:inherit
}
/* Mobile: botões sempre visíveis (sem hover real), alvos maiores, popup
encaixa com teclado aberto, preview legível, hint de teclado some.
Neutralizar :hover do item: em touch o hover gruda após o toque e pintava
tudo de verde (--primary-soft). Fica só o .rr-selected (navegação real). */
@media(hover:none){
.rr-popup{max-height:min(420px,60dvh)}
.rr-popup-item:hover{background:transparent}
.rr-hint{display:none}
}
@media(max-width:600px){
.rr-popup{left:0;right:0;border-radius:10px}
.rr-popup-item{padding:8px 10px}
.rr-popup-atalho{font-size:11px;padding:2px 6px}
.rr-popup-preview{font-size:11px}
}
/* ─────────────────────────────────────────────────────────── */
/* Chat area */
.main{flex:1;display:flex;flex-direction:column;background:var(--surface-panel);min-width:0;position:relative}
.chat-jump-btn{position:absolute;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.12);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:30;backdrop-filter:blur(4px);transition:opacity .18s ease,transform .18s ease,background .18s ease}
.chat-jump-btn.show{display:flex;animation:chatJumpFade .22s ease}
.chat-jump-btn:hover{background:rgba(0,0,0,.78);transform:translateX(-50%) scale(1.08)}
.chat-jump-up{top:78px}
/* .chat-jump-down: bottom é setado em runtime via _chatJumpAlign() —
altura do form muda (recording, multi-line, modo nota, reply preview) */
@keyframes chatJumpFade{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.chat-header{
padding:0 16px;height:46px;display:flex;align-items:center;
border-bottom:1px solid var(--b);background:var(--s1);flex-shrink:0
}
.chat-header strong{font-size:13px;font-weight:600}
#headerAv{position:relative;cursor:pointer}
.chat-mobile-back{
display:none;
width:34px;
height:34px;
border:none;
border-radius:10px;
background:var(--s2);
color:var(--tx);
font-size:18px;
line-height:1;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
}
.chat-mobile-back:hover{background:var(--b)}
.mensagens{flex:1;overflow-y:auto;padding:16px}
.msg{display:flex;margin-bottom:6px}
.msg.from-me{justify-content:flex-end}
.msg.from-user{justify-content:flex-start}
.bubble{max-width:62%;padding:8px 12px;border-radius:10px;line-height:1.5;font-size:13px}
.from-me .bubble{background:var(--bubble-me);border-bottom-right-radius:3px}
.from-user .bubble{background:var(--bubble-user);border-bottom-left-radius:3px}
/* Bolha enviada em chat Instagram — plum/roxo (não o verde do WhatsApp). #mensagens
recebe data-canal-envio='ig' via _sincronizarCorBtnEnviar (painel.js). */
#mensagens[data-canal-envio="ig"] .from-me .bubble{background:#3a2236}
html[data-theme="light"] #mensagens[data-canal-envio="ig"] .from-me .bubble,
body.theme-light #mensagens[data-canal-envio="ig"] .from-me .bubble{background:#fbe3f1}
.bubble small{display:block;margin-top:4px;font-size:10px;color:var(--mt);text-align:right}
.envio{display:flex;flex-direction:column;padding:10px 14px;background:var(--s1);border-top:1px solid var(--b);flex-shrink:0;gap:6px}
.envio-card{display:flex;flex-direction:column;border:1.5px solid var(--b);border-radius:12px;background:var(--s2);transition:border-color .2s,box-shadow .2s}
.envio-card:focus-within{border-color:var(--ac)}
.envio-card.modo-nota{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.10)}
.envio-card.modo-nota:focus-within{border-color:#d97706;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.envio-input-wrap{position:relative;overflow:visible;display:flex;align-items:flex-end;padding:10px 12px 4px 12px}
.envio-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px 8px;gap:8px}
.envio-toolbar-left{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
/* Pill unificado: Mensagem | Nota | sep | Enviar */
.envio-pill{display:flex;align-items:center;flex-shrink:0;border:1px solid var(--b);border-radius:24px;overflow:hidden;background:var(--s1)}
.envio-pill-sep{width:1px;height:22px;background:var(--b);flex-shrink:0}
.envio input,.envio textarea{
flex:1;padding:6px 8px;border-radius:0;
border:none;background:transparent;
color:var(--tx);font-size:13px;outline:none
}
.envio textarea{
resize:none;overflow-y:auto;line-height:1.5;
min-height:72px;max-height:calc(1.5em * 8 + 12px);font-family:inherit;
box-sizing:border-box;display:block;width:100%
}
.envio input:focus,.envio textarea:focus{border-color:transparent}
.envio button{
padding:0 18px;border:0;border-radius:8px;
background:var(--wa);color:var(--text-inverse);font-weight:600;font-size:13px;cursor:pointer
}
.envio button:hover{opacity:.85}
#btnEnviar{
display:flex;align-items:center;justify-content:center;gap:6px;
padding:0 16px;height:36px;border-radius:0;
background:var(--wa);color:var(--text-inverse);font-size:13px;font-weight:600;
border:none;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s;
white-space:nowrap
}
#btnEnviar svg{width:14px;height:14px;stroke-width:2;display:block}
#btnEnviar:hover{background:var(--success-hover);opacity:1}
/* 2026-05-17: cor do botão Enviar reflete o canal real do envio.
data-canal-envio setado por _sincronizarCorBtnEnviar (painel.js) em abrirChat
+ abrirLead + toggle do seletor. UX: atendente vê CLARAMENTE por qual canal
a próxima msg vai sair antes de clicar. */
#btnEnviar[data-canal-envio="wa"]{background:var(--wa)}
#btnEnviar[data-canal-envio="wa"]:hover{background:var(--success-hover)}
#btnEnviar[data-canal-envio="widget"]{
background:linear-gradient(135deg,#1f6feb,#7c3aed);
}
#btnEnviar[data-canal-envio="widget"]:hover{
background:linear-gradient(135deg,#3b82f6,#8b5cf6);opacity:1;
}
#btnEnviar[data-canal-envio="tg"]{background:#229ED9}
#btnEnviar[data-canal-envio="tg"]:hover{background:#1c89bd;opacity:1}
#btnEnviar[data-canal-envio="ig"]{background:linear-gradient(135deg,#fa7e1e,#d62976 55%,#962fbf)}
#btnEnviar[data-canal-envio="ig"]:hover{background:linear-gradient(135deg,#fb8c3a,#e23a85 55%,#a23fcf);opacity:1}
/* Header (#topoChat) também muda cor conforme canal — tint sutil + border colorida.
Refoça visualmente por qual canal a próxima msg vai. Mesma paleta do botão Enviar.
Border-bottom 2px substitui o 1px var(--b) default; bg fica translúcido (8%) pra
não competir com conteúdo. Transition smoothie pra mudança ao toggle do seletor. */
#topoChat[data-canal-envio]{transition:background .2s,border-bottom-color .2s}
#topoChat[data-canal-envio="wa"]{
background:rgba(37,211,102,.06);border-bottom:2px solid #25d366;
}
#topoChat[data-canal-envio="widget"]{
background:linear-gradient(135deg,rgba(31,111,235,.06),rgba(124,58,237,.06));
border-bottom:2px solid #7c3aed;
}
#topoChat[data-canal-envio="tg"]{
background:rgba(34,158,217,.06);border-bottom:2px solid #229ED9;
}
#topoChat[data-canal-envio="ig"]{
background:linear-gradient(135deg,rgba(214,41,118,.06),rgba(150,47,191,.06));
border-bottom:2px solid #d62976;
}
/* 2026-05-18: cor dos botões de gravação de áudio (.rec-bigenviar = enviar,
.rec-play = play/pause) também acompanha o canal. CSS inline em painel.php
define background:var(--wa) default (verde WA); estes seletores sobrescrevem
quando data-canal-envio é setado pelo JS (_sincronizarCorBtnEnviar). */
.rec-bigenviar[data-canal-envio="widget"],
.rec-play[data-canal-envio="widget"]{
background:linear-gradient(135deg,#1f6feb,#7c3aed);
box-shadow:0 2px 10px rgba(124,58,237,.35);
}
.rec-bigenviar[data-canal-envio="tg"],
.rec-play[data-canal-envio="tg"]{
background:#229ED9;
box-shadow:0 2px 10px rgba(34,158,217,.35);
}
.rec-bigenviar[data-canal-envio="ig"],
.rec-play[data-canal-envio="ig"]{
background:linear-gradient(135deg,#fa7e1e,#d62976,#962fbf);
box-shadow:0 2px 10px rgba(214,41,118,.35);
}
/* 2026-05-19: btnEnviarMidia (overlay de preview de anexo) também acompanha
canal. HTML tem `class="btn bwa"` (verde WA padrão); estes seletores
sobrescrevem quando data-canal-envio=widget|tg. Specificity via #id + !important
pra vencer a regra base `.bwa{background:var(--wa)}`. */
#btnEnviarMidia[data-canal-envio="widget"]{
background:linear-gradient(135deg,#1f6feb,#7c3aed)!important;
color:#fff;
}
#btnEnviarMidia[data-canal-envio="widget"]:hover{
background:linear-gradient(135deg,#3b82f6,#8b5cf6)!important;
opacity:1;
}
#btnEnviarMidia[data-canal-envio="tg"]{background:#229ED9!important;color:#fff}
#btnEnviarMidia[data-canal-envio="tg"]:hover{background:#1c89bd!important;opacity:1}
#btnEnviarMidia[data-canal-envio="ig"]{background:linear-gradient(135deg,#fa7e1e,#d62976 55%,#962fbf)!important;color:#fff}
#btnEnviarMidia[data-canal-envio="ig"]:hover{opacity:.92}
/* Instagram = atendimento humano: esconde o botão de chatbot (automação).
btnChatbot recebe data-canal-envio='ig' via _sincronizarCorBtnEnviar. CSS é
à prova de timing (não depende da ordem de execução do JS). */
#btnChatbot[data-canal-envio="ig"]{display:none!important}
/* 2026-05-18: ícones da barra de envio (mídia/áudio/emoji/chatbot/RR) tingem
conforme canal — só o ícone (color do SVG via currentColor), background fica
neutro pra não saturar. WA = sem override (mantém var(--mt) cinza default).
Specificity alta (!important) pra vencer a regra base de `color:var(--mt)`. */
#btnMidia[data-canal-envio="widget"],#btnAudio[data-canal-envio="widget"],#btnEmoji[data-canal-envio="widget"],#btnChatbot[data-canal-envio="widget"],#btnBaixarMidia[data-canal-envio="widget"],#btnRR[data-canal-envio="widget"],#btnContrato[data-canal-envio="widget"],#btnDitar[data-canal-envio="widget"]{
color:#a78bfa!important;
}
#btnMidia[data-canal-envio="tg"],#btnAudio[data-canal-envio="tg"],#btnEmoji[data-canal-envio="tg"],#btnChatbot[data-canal-envio="tg"],#btnBaixarMidia[data-canal-envio="tg"],#btnRR[data-canal-envio="tg"],#btnContrato[data-canal-envio="tg"],#btnDitar[data-canal-envio="tg"]{
color:#229ED9!important;
}
/* Anéis verdes pulsando ao redor do ícone do chatbot quando há sessão ativa.
Ícone fica fixo; pseudos animam scale+opacity criando ondas concêntricas. */
#btnChatbot.bot-ativo{position:relative}
#btnChatbot.bot-ativo::before,
#btnChatbot.bot-ativo::after{
content:'';
position:absolute;
inset:0;
border:2px solid var(--wa);
border-radius:50%;
pointer-events:none;
animation:botRing 1.8s ease-out infinite;
opacity:0;
}
#btnChatbot.bot-ativo::after{animation-delay:.9s}
@keyframes botRing{
0%{transform:scale(.85);opacity:.75}
100%{transform:scale(2.1);opacity:0}
}
/* Botões ícone da barra de envio */
#btnMidia,#btnBaixarMidia,#btnRR,#btnChatbot,#btnAudio,#btnEmoji,#btnContrato,#btnDitar{
padding:0!important;width:36px;height:36px;border-radius:50%!important;
background:var(--s2)!important;border:1px solid var(--b)!important;
color:var(--mt)!important;line-height:1;display:flex!important;
align-items:center;justify-content:center;flex-shrink:0;
transition:background .15s,color .15s;cursor:pointer
}
#btnContrato.hidden{display:none!important}
#btnContrato:hover{color:var(--tx)!important;background:var(--b)!important}
/* Pulso "emitindo bolhas" até o atendente clicar a 1ª vez nesse lead (mesmo botRing
do #btnChatbot.bot-ativo / #btnRR.rr-tem-novidade). 2 anéis defasados = onda contínua. */
#btnContrato.pulsando{position:relative}
#btnContrato.pulsando::before,
#btnContrato.pulsando::after{
content:'';position:absolute;inset:0;
border:2px solid var(--ac);border-radius:50%;
pointer-events:none;opacity:0;
animation:botRing 1.8s ease-out infinite
}
#btnContrato.pulsando::after{animation-delay:.9s}
#btnMidia{font-size:20px}
#btnBaixarMidia{font-size:16px}
#btnRR,#btnChatbot{font-size:17px}
#btnMidia:hover,#btnBaixarMidia:hover:not(:disabled),#btnRR:hover,#btnAudio:hover,#btnEmoji:hover,#btnDitar:hover{background:var(--b)!important;color:var(--tx)!important;opacity:1!important}
/* Ditado por voz: estado "ouvindo" — vermelho pulsante (não confundir com o #btnAudio de gravar áudio) */
#btnDitar.rec{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important;animation:ditarPulse 1.1s ease-in-out infinite}
@keyframes ditarPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
/* Só desktop — no celular o teclado já dita. Esconde também via JS se o navegador não suportar (.ditar-indisponivel) */
@media(max-width:980px){#btnDitar{display:none!important}}
#btnDitar.ditar-indisponivel{display:none!important}
#btnChatbot:hover{background:var(--b)!important;opacity:1!important}
#btnBaixarMidia:disabled{opacity:.4!important;cursor:not-allowed!important}
.envio-acoes{display:flex;gap:8px;align-items:center;flex-shrink:0}
#btnMidiaWrap{display:flex;align-items:center}
/* Pill: Mensagem | Nota | Enviar */
.btn-tipo{
padding:0 14px!important;height:36px;border-radius:0!important;
font-size:12px!important;font-weight:600!important;
background:transparent!important;border:none!important;
color:var(--mt)!important;transition:background .15s,color .15s;
white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:6px
}
.btn-tipo svg{width:14px;height:14px;flex-shrink:0}
.btn-tipo:hover{color:var(--tx)!important;background:var(--b)!important;opacity:1!important}
.btn-tipo.active{background:var(--s2)!important;color:var(--tx)!important;font-weight:700!important}
.btn-tipo.active-nota{background:var(--s2)!important;color:var(--tx)!important;font-weight:700!important}
/* Input sem padding extra (mic saiu) */
.envio-input-wrap input,.envio-input-wrap textarea{flex:1}
/* ── Lucide icon sizing ── */
#btnMidia svg,#btnBaixarMidia svg,#btnRR svg,#btnChatbot svg,#btnEmoji svg,#btnContrato svg,#btnDitar svg{width:17px;height:17px;stroke-width:1.75;display:block}
#btnAudio svg{width:18px;height:18px;stroke-width:1.75;display:block}
[data-theme-icon] svg{width:15px;height:15px;stroke-width:1.75;display:block}
.reply-preview-icon svg{width:16px;height:16px;stroke-width:1.75;display:block}
.reply-preview-cancel svg,.biblioteca-close svg,.rr-popup-close svg,.busca-clear svg{width:14px;height:14px;stroke-width:2.2;display:block}
.painel-sidebar-toggle svg{width:20px;height:20px;stroke-width:1.75;display:block}
.filtro-btn svg{width:16px;height:16px;stroke-width:1.75;display:block}
.h-ico{width:16px;height:16px;display:inline-block;vertical-align:middle;stroke-width:1.75;margin-right:5px}
.h-ico svg{width:16px;height:16px;stroke-width:1.75;display:block}
.icon-btn svg{width:14px;height:14px;stroke-width:1.75;display:block}
/* Badge de reação aplicada */
.msg-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:4px}
.msg-footer small{margin-top:0}
.reacao-badge{font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;background:var(--s2);border:1px solid var(--b);border-radius:12px;padding:1px 5px;cursor:default}
@keyframes reacao-pop{0%{transform:scale(0.4)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.reacao-animar{animation:reacao-pop .35s ease-out}
/* Download overlay em imagens */
.img-download-btn{opacity:0;transition:opacity .2s}
.msg:hover .img-download-btn{opacity:1}
/* Nota interna na conversa */
.msg.nota{justify-content:flex-end}
.nota .bubble{background:var(--warning-soft-strong);border:1px solid var(--warning-soft);border-bottom-right-radius:3px}
.nota-label{font-size:10px;font-weight:600;color:var(--wn);margin-bottom:4px;display:block}
.msg-tick{display:inline-flex;align-items:center;gap:3px;margin-left:3px;vertical-align:middle;line-height:1}
.tick-pending svg{color:rgba(255,255,255,.5)}
.tick-sent svg{color:rgba(255,255,255,.6)}
.tick-delivered svg{color:rgba(255,255,255,.6)}
.tick-read svg{color:#53bdeb}
.tick-error{color:#f55;cursor:pointer;padding:1px 5px;border-radius:5px;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.25);transition:.15s}
.tick-error:hover{background:rgba(255,80,80,.22);border-color:rgba(255,80,80,.5)}
.tick-error svg{color:#f55}
.tick-error-label{font-size:10px;font-weight:700;letter-spacing:.02em}
.from-user .msg-tick svg{color:var(--mt)}
.lt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mt);animation:lt-blink 1.2s infinite}
.lt-dot:nth-child(2){animation-delay:.2s}.lt-dot:nth-child(3){animation-delay:.4s}
@keyframes lt-blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.msg-system-canal{display:flex;align-items:center;gap:8px;margin:10px 4px;user-select:none}
.msc-line{flex:1;height:1px;background:var(--warning-soft)}
.msc-box{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background:var(--warning-soft-strong);border:1px solid var(--warning-soft);border-radius:10px;max-width:420px;flex-shrink:0}
/* Variante CROSS-SETOR (azul info) — diferencia visualmente do amarelo (notas/troca) */
.msg-system-canal.msc-cross .msc-line{background:rgba(59,130,246,.25)}
.msg-system-canal.msc-cross .msc-box{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.32)}
.msg-system-canal.msc-cross .msc-body strong{color:#3b82f6}
/* Banner cross-setor compacto + expansível (UX 2026-05-12) */
.msc-cs{margin:10px 4px;border-radius:10px;overflow:hidden;border:1px solid rgba(59,130,246,.32);background:rgba(59,130,246,.08);max-width:560px;cursor:pointer;transition:background .12s}
.msc-cs:hover .msc-cs-head{background:rgba(59,130,246,.05)}
.msc-cs-head{display:flex;align-items:center;gap:10px;padding:8px 12px;user-select:none;transition:background .12s}
.msc-cs-ico{font-size:16px;line-height:1;flex-shrink:0}
.msc-cs-resumo{flex:1;font-size:12.5px;line-height:1.45;color:var(--tx)}
.msc-cs-resumo strong{font-weight:700;color:#3b82f6}
.msc-cs-resumo .sep{color:var(--mt);margin:0 5px}
.msc-cs-chevron{font-size:11px;color:#3b82f6;font-weight:700;padding:3px 9px;background:rgba(59,130,246,.15);border-radius:999px;display:flex;align-items:center;gap:4px;flex-shrink:0}
.msc-cs-chevron svg{width:11px;height:11px;transition:transform .2s}
.msc-cs.open .msc-cs-chevron svg{transform:rotate(180deg)}
.msc-cs.open .msc-cs-chevron-txt::before{content:'recolher'}
.msc-cs.open .msc-cs-chevron-txt{font-size:0}
.msc-cs.open .msc-cs-chevron-txt::before{font-size:11px}
.msc-cs-body{display:none;padding:14px 16px 14px 38px;border-top:1px solid rgba(59,130,246,.2);background:rgba(59,130,246,.04);font-size:12.5px;line-height:1.6;color:var(--tx)}
.msc-cs.open .msc-cs-body{display:block}
.msc-cs-body p{margin:0 0 10px}
.msc-cs-body strong{color:var(--tx);font-weight:600}
.msc-cs-body ul{margin:0 0 10px;padding-left:18px;color:var(--mt)}
.msc-cs-body ul li{margin-bottom:4px}
.msc-cs-body ul li strong{color:var(--tx)}
.msc-cs-foot{font-size:11.5px;color:var(--mt);font-style:italic;margin-top:8px}
.msc-icon{font-size:16px;line-height:1;margin-top:1px}
.msc-body{display:flex;flex-direction:column;gap:2px}
.msc-body strong{font-size:11px;font-weight:700;color:var(--wn);text-transform:uppercase;letter-spacing:.04em}
.msc-body span{font-size:11px;color:var(--mt);line-height:1.45}
.msc-body span b{color:var(--tx);font-weight:600}
.msc-time{font-size:10px;color:var(--mt);white-space:nowrap;margin-top:2px;margin-left:4px;align-self:flex-end}
.msg-system-canal.msc-collapsed{margin:2px 4px}
.msg-system-canal.msc-collapsed .msc-box{display:none}
.msg-system-canal.msc-collapsed .msc-line:last-child{display:none}
.msg-system-canal.msc-collapsed .msc-line{opacity:.35}
.filtro-data-btn{padding:4px 10px;font-size:11px;font-weight:600;border-radius:20px;border:1.5px solid var(--b);background:transparent;color:var(--mt);cursor:pointer;transition:.15s}
.filtro-data-btn:hover{border-color:var(--ac);color:var(--tx)}
.filtro-data-btn.ativo{border-color:var(--ac);background:var(--ac);color:#fff}
.msc-avisar-btn{position:relative}
.msc-avisar-btn.msc-pendente::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--dg);border:2px solid var(--bg);animation:peNudge 1s ease-in-out infinite}
.msc-avisar-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.msc-avisar-grupo .msc-avisar-label{font-size:11px;color:var(--mt);font-weight:600;width:100%;margin-bottom:2px}
.msc-avisar-grupo .msc-avisar-btn:disabled{opacity:.55;cursor:default}
.msc-edu{display:block;align-self:stretch;margin-top:6px;padding:6px 10px 6px 12px;border-left:3px solid #fbbf24;background:transparent;color:var(--mt);font-size:11px;line-height:1.5;font-weight:400;max-width:560px}
.msc-edu strong{color:var(--text);font-weight:600}
.msc-edu.msc-edu-historico{border-left-color:var(--border);color:var(--mt)}
.msc-edu.msc-edu-historico strong{color:var(--mt)}
/* Nav direita */
.nav-right{
width:60px;background:var(--s1);border-left:1px solid var(--b);
display:flex;flex-direction:column;align-items:center;
padding:10px 0;gap:2px;flex-shrink:0
}
.nav-icon{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;width:48px;padding:8px 4px;border-radius:8px;
cursor:pointer;color:var(--mt);font-size:10px;
text-align:center;text-decoration:none;transition:background .15s,color .15s
}
.nav-icon:hover,.nav-icon.active{background:var(--s2);color:var(--wa)}
.nav-icon .ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.nav-icon .ico svg{width:22px;height:22px;stroke-width:1.6}
.nav-sep{width:32px;height:1px;background:var(--b);margin:4px 0}
.nav-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:2px}
/* ============ BOTÕES ============ */
.btn{padding:7px 16px;border-radius:7px;font-size:13px;font-weight:500;border:0;cursor:pointer;transition:opacity .15s,background .15s}
.bp{background:var(--pr);color:var(--text-inverse)}.bp:hover{background:var(--ph)}
.bd{background:transparent;border:1px solid var(--dg)!important;color:var(--dg)}
.bs{background:var(--s2);border:1px solid var(--b)!important;color:var(--mt)}.bs:hover{color:var(--tx)}
.bwa{background:var(--wa);color:var(--text-inverse)}.bwa:hover{opacity:.85}
.bsm{padding:4px 10px;font-size:12px}
.theme-toggle{
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:124px;
}
.theme-toggle [data-theme-icon]{font-size:14px;line-height:1}
.theme-toggle [data-theme-label]{white-space:nowrap}
/* ============ BADGES ============ */
.badge{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
.bg{background:var(--success-soft);color:var(--ph)}
.by{background:var(--warning-soft);color:var(--wn)}
.br{background:var(--danger-soft);color:var(--dg)}
.bb{background:var(--primary-soft);color:var(--ac)}
.bwa-badge{background:var(--success-soft-strong);color:var(--wa)}
/* ============ TABELAS ============ */
.tbl-wrap{background:var(--s1);border:1px solid var(--b);border-radius:10px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--s2);padding:9px 14px;font-size:11px;font-weight:600;color:var(--mt);text-transform:uppercase;letter-spacing:.05em;text-align:left}
td{padding:10px 14px;border-top:1px solid var(--b);color:var(--tx)}
tr:hover td{background:var(--surface-hover-soft)}
/* ============ INPUTS GLOBAIS ============ */
input,select,textarea{
background:var(--s2);border:1px solid var(--b);border-radius:8px;
padding:9px 12px;color:var(--tx);font-size:13px;outline:none;font-family:inherit
}
input:focus,select:focus,textarea:focus{border-color:var(--ac)}
/* ============ MODAL ============ */
.modal-bg{display:none;position:fixed;inset:0;background:var(--overlay-backdrop);z-index:999;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal-box{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:26px;width:400px;max-width:94vw}
.modal-box h3{font-size:14px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.modal-box label{display:block;font-size:11px;font-weight:600;color:var(--mt);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 5px}
.modal-box input,.modal-box select{width:100%}
.tr-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--s2);border-radius:10px;padding:3px}
.tr-tab{
flex:1;border:none;background:transparent;color:var(--mt);
border-radius:8px;padding:8px 6px;font-size:12px;font-weight:600;cursor:pointer;
transition:background .15s,color .15s
}
.tr-tab:hover{color:var(--tx)}
.tr-tab.active{background:var(--s1);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tr-lista{
min-height:220px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;
gap:8px;padding-right:2px
}
.tr-lista.is-loading{opacity:.6;pointer-events:none}
.tr-item{
width:100%;display:flex;align-items:center;gap:12px;text-align:left;
background:var(--s2);border:1px solid var(--b);border-radius:12px;
padding:12px;cursor:pointer;color:var(--tx);transition:transform .12s, border-color .12s, background .12s
}
.tr-item:hover{border-color:var(--ac);transform:translateY(-1px);background:var(--primary-soft-hover)}
.tr-item-icon{
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:var(--s2);border:1px solid var(--b);font-size:16px;flex-shrink:0
}
.tr-item-avatar{
width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.tr-item-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.tr-item-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-item-main small{font-size:11px;color:var(--mt);line-height:1.4}
.tr-item-status{
flex-shrink:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:var(--mt);padding:4px 7px;border-radius:999px;border:1px solid var(--b)
}
.tr-item-status.is-online{color:var(--wa);border-color:var(--success-soft-strong);background:var(--accent-success-soft-strong)}
.tr-empty{
min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;
color:var(--mt);font-size:12px;padding:20px
}
.modal-footer{display:flex;gap:8px;margin-top:20px;justify-content:flex-end}
.modal-footer button{flex:0 0 auto}
/* ============ PAGE LAYOUT ============ */
.pg{padding:24px;max-width:920px;margin:0 auto}
.pg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pg-top h2{font-size:17px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.pg-sub{color:var(--mt);font-size:13px;margin-bottom:20px}
.pg-toolbar{display:flex;gap:8px;margin-bottom:16px;align-items:center}
.pg-toolbar input{flex:1}
/* ============ LOGIN ============ */
.login-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh / var(--zoom));background:var(--bg)}
.login-box{width:360px;background:var(--s1);padding:40px;border-radius:12px;border:1px solid var(--b)}
.login-box h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.login-box p{color:var(--mt);margin-bottom:22px;font-size:13px}
.login-box input{width:100%;margin-bottom:10px;display:block}
.login-box button{
width:100%;padding:10px;border-radius:8px;border:0;
background:var(--pr);color:var(--text-inverse);font-weight:600;font-size:14px;cursor:pointer
}
.login-box button:hover{background:var(--ph)}
#retorno{margin-top:12px;font-size:13px;padding:10px 14px;border-radius:8px;
background:var(--danger-soft-strong);border:1px solid var(--danger-soft);color:var(--danger-text)}
/* ============ PAGINAÇÃO ============ */
.paginacao{display:flex;justify-content:center;gap:6px;margin-top:20px}
.paginacao button{background:var(--s2);border:1px solid var(--b);color:var(--mt);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:13px}
.paginacao button.ativo,.paginacao button:hover{background:var(--s2);color:var(--tx);border-color:var(--wa)}
body.painel-mobile .app{
width:100%;
position:relative;
}
body.painel-mobile .nav-right{
/* mantém sidebar sempre visível, mesmo no PWA mobile (fixa à esquerda).
`top`/`bottom` respeitam safe-area pra não invadir notch nem home indicator. */
display:flex;
width:48px;
flex-shrink:0;
position:fixed;
top:env(safe-area-inset-top);
left:0;
bottom:env(safe-area-inset-bottom);
z-index:90;
background:var(--s1);
border-right:1px solid var(--b);
}
body.painel-mobile .main{
margin-left:48px;
}
body.painel-mobile .sidebar,
body.painel-mobile .main{
width:calc(100% - 48px);
flex:1 0 calc(100% - 48px);
}
body.painel-mobile .sidebar{
position:absolute;
inset:0 auto 0 48px;
width:calc(100% - 48px);
max-width:calc(100% - 48px);
height:100%;
border-right:1px solid var(--b);
z-index:80;
transform:translateX(0);
transition:transform .18s ease-out;
box-shadow:var(--shadow-panel);
opacity:1;
pointer-events:auto;
}
body.painel-mobile.chat-mobile-open .sidebar{
transform:translateX(calc(-100% - 12px));
box-shadow:none;
opacity:0;
pointer-events:none;
}
body.painel-mobile .main{
display:none;
width:100%;
}
body.painel-mobile.chat-mobile-open .main{
display:flex;
}
body.painel-mobile.chat-mobile-open .painel-sidebar-toggle{
display:inline-flex;
}
body.painel-mobile .chat-mobile-back{
display:inline-flex;
}
body.painel-mobile .chat-header{
min-height:54px;
height:auto;
padding:8px 12px;
}
body.painel-mobile .chat-header-left{
max-width:none;
flex:1;
}
body.painel-mobile .chat-header-right{
gap:4px;
position:relative;
}
/* Mobile/PWA: esconde ícones de ação por padrão. Botão ⋮ abre dropdown. */
.chat-hdr-toggle-mobile{
display:none;width:36px;height:36px;border:none;background:transparent;
color:var(--mt);border-radius:8px;cursor:pointer;
align-items:center;justify-content:center;flex-shrink:0;transition:.15s;
}
.chat-hdr-toggle-mobile:hover{background:var(--surface-hover);color:var(--tx)}
.chat-hdr-toggle-mobile i{width:18px;height:18px}
body.painel-mobile .chat-hdr-toggle-mobile{display:inline-flex}
body.painel-mobile .chat-hdr-actions{display:none}
body.painel-mobile .chat-header-right.open .chat-hdr-actions{
display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;
position:absolute;top:calc(100% + 6px);right:0;
background:var(--s1);border:1px solid var(--b);
border-radius:10px;padding:6px;
z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.35);
animation:hdrDropIn .18s ease;
}
@keyframes hdrDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Telefone e etiquetas inline ocultos em mobile/PWA — deixa o nome do lead "livre" */
body.painel-mobile .chat-header-num{display:none}
body.painel-mobile .chat-header-center{display:none}
body.painel-mobile .chat-header-status{
overflow-x:auto;
max-width:100%;
}
body.painel-mobile .envio{
padding:8px;
}
body.painel-mobile .envio-toolbar{
flex-wrap:wrap;
gap:6px;
}
body.painel-mobile .envio-toolbar-left{
gap:6px;
flex:1;
min-width:0;
}
body.painel-mobile .envio-pill{
flex-shrink:0;
}
body.painel-mobile .envio-input-wrap{
min-width:0;
width:100%;
}
body.painel-mobile #mensagemInput,
body.painel-mobile .envio-input-wrap input,
body.painel-mobile .envio input,
body.painel-mobile textarea,
body.painel-mobile select{
font-size:16px !important;
}
body.painel-mobile .btn-tipo{
flex:1 1 0;
justify-content:center;
padding:0 12px !important;
height:34px;
font-size:11px !important;
}
body.painel-mobile #btnEnviar{
width:34px;
min-width:34px;
height:34px;
min-height:34px;
padding:0;
border-radius:50%;
font-size:0;
gap:0;
flex-shrink:0;
}
body.painel-mobile #btnEnviar::after{
content:'➤';
font-size:13px;
line-height:1;
}
body.painel-mobile #btnMidia,
body.painel-mobile #btnBaixarMidia,
body.painel-mobile #btnRR,
body.painel-mobile #btnChatbot,
body.painel-mobile #btnAudio{
width:34px;
height:34px;
min-width:34px;
min-height:34px;
border-radius:12px !important;
}
body.painel-mobile #btnBaixarMidia{font-size:15px}
body.painel-mobile .envio-input-wrap input,
body.painel-mobile .envio-input-wrap textarea{
min-height:40px;
padding-left:8px !important;
padding-right:8px !important;
}
@media(max-width:900px){
body.painel-mobile .app{
width:100%;
position:relative;
}
body.painel-mobile .nav-right{
display:flex;
width:48px;
flex-shrink:0;
}
body.painel-mobile .sidebar,
body.painel-mobile .main{
width:100%;
flex:1 0 100%;
}
body.painel-mobile .sidebar{
position:absolute;
inset:0 auto 0 48px;
width:100%;
max-width:100%;
height:100%;
border-right:1px solid var(--b);
z-index:80;
transform:translateX(0);
transition:transform .18s ease-out;
box-shadow:var(--shadow-panel);
}
body.painel-mobile.chat-mobile-open .sidebar{
transform:translateX(calc(-100% - 12px));
}
body.painel-mobile.chat-mobile-open .main{
display:flex;
}
body.painel-mobile .main{
display:none;
width:100%;
}
body.painel-mobile.chat-mobile-open .painel-sidebar-toggle{
display:inline-flex;
}
body.painel-mobile .chat-mobile-back{
display:inline-flex;
}
body.painel-mobile .chat-header{
min-height:54px;
height:auto;
padding:8px 12px;
}
body.painel-mobile .chat-header-left{
max-width:none;
flex:1;
}
body.painel-mobile .chat-header-right{
gap:4px;
}
body.painel-mobile .chat-header-status{
overflow-x:auto;
max-width:100%;
}
body.painel-mobile .envio{
padding:8px;
gap:4px;
}
/* Mobile (web E PWA): mantém os botões Mensagem/Nota visíveis mas só com
ÍCONE — economiza espaço sem perder a função. Antes (até 2026-05-08) escondia
ambos via display:none, daí operadores não conseguiam alternar pra nota
interna no celular. */
body.painel-mobile .btn-tipo .btn-tipo-label{
display:none;
}
body.painel-mobile .envio-pill .btn-tipo{
padding:0 10px !important;
min-width:36px;
justify-content:center;
}
/* Esconde botão de download em massa de mídias no celular/PWA — feature de
desktop (zip de muitas mídias é pesado, navegação mobile não acomoda). */
body.painel-mobile #btnBaixarMidia{
display:none !important;
}
/* Mobile/PWA: durante gravação de áudio, .rec-play e .rec-bigenviar saem do
verde chamativo (var(--wa)) e ficam neutros igual aos outros ícones do
toolbar (msg rápida, chatbot, emoji) — visual mais limpo no celular onde
a tela é apertada. Texto "Enviar" do bigenviar some — só o ícone send. */
body.painel-mobile .rec-play,
body.painel-mobile .rec-bigenviar,
body.painel-mobile .rec-trash{
background:var(--s2) !important;
border:1px solid var(--b) !important;
color:var(--mt) !important;
box-shadow:none !important;
}
body.painel-mobile .rec-bigenviar{
width:36px;height:36px;min-width:36px;
padding:0 !important;
border-radius:50% !important;
justify-content:center;
}
body.painel-mobile .rec-bigenviar > span{
display:none;
}
/* Lixeira: mantém o vermelho discreto APENAS no hover, pra sinalizar ação destrutiva
sem competir visualmente com os outros ícones em estado neutro. */
body.painel-mobile .rec-trash:hover{
background:rgba(218,54,51,.12) !important;
color:var(--dg) !important;
}
body.painel-mobile #btnEnviar{
border-radius:50%;
width:36px;min-width:36px;height:36px;min-height:36px;
}
.sidebar{width:260px}
.bubble{max-width:80%}
.nav-right{width:48px}
.admin-sidebar{width:180px}
}
/* Abas */
.abas{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--b);flex-shrink:0}
.aba{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;color:var(--mt);border:1px solid var(--b);background:transparent;transition:.15s;white-space:nowrap}
.aba:hover{color:var(--tx);border-color:var(--tx)}
.aba.active{background:var(--ac);color:var(--text-inverse);border-color:var(--ac)}
.aba .cnt{display:inline-block;background:var(--surface-contrast-strong);border-radius:10px;padding:0px 5px;font-size:10px;margin-left:3px}
/* Fix abas não cortarem */
.abas{overflow-x:auto;flex-wrap:nowrap}
.abas::-webkit-scrollbar{height:3px}
.aba{white-space:nowrap;flex-shrink:0}
/* ===== MSG MENU (⋯) ===== */
.msg{align-items:center}
/* desktop: aparece no hover */
.msg-menu{
display:flex;align-items:center;justify-content:center;
flex-shrink:0;position:relative;
opacity:0;transition:opacity .15s;
}
.msg:hover .msg-menu{opacity:1}
/* mobile: sempre visível */
@media(hover:none){.msg-menu{opacity:1}}
.from-me .msg-menu{margin-right:6px}
.from-user .msg-menu{margin-left:6px}
/* botão circular */
.msg-menu-btn{
display:flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:50%;
background:transparent;border:none;
color:var(--mt);font-size:15px;line-height:1;
cursor:pointer;transition:background .12s,color .12s;
padding:0;letter-spacing:-.5px;
}
.msg-menu-btn:hover,.msg-menu-btn:focus{background:var(--s2);color:var(--tx);outline:none}
/* dropdown */
.msg-menu-drop{
display:none;position:absolute;
background:var(--s1);border:1px solid var(--b);
border-radius:10px;min-width:155px;z-index:200;
padding:4px;box-shadow:var(--shadow-panel);
}
/* abre para cima, centralizado no botão */
.msg-menu-drop{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.msg-menu-drop.open{display:block}
.mmd-item{
display:flex;align-items:center;gap:8px;
padding:8px 12px;font-size:13px;border-radius:6px;
cursor:pointer;white-space:nowrap;color:var(--tx);
transition:background .1s;
}
.mmd-item:hover{background:var(--s2)}
.mmd-danger{color:var(--dg)}
.mmd-danger:hover{background:var(--danger-soft-strong)}
.mmd-sep{height:1px;background:var(--b);margin:2px 6px}
.mmd-emojis{
display:flex;align-items:center;justify-content:space-around;
padding:8px 12px;border-radius:6px;gap:2px;
}
.mmd-emojis span{
font-size:18px;cursor:pointer;border-radius:4px;
padding:2px 4px;transition:transform .15s,background .1s;
line-height:1;
}
.mmd-emojis span:hover{transform:scale(1.35);background:var(--s2)}
.mmd-emoji-mais{font-size:14px !important;color:var(--mt);background:var(--s2);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600}
.mmd-emoji-mais:hover{color:var(--ac);background:var(--s1) !important}
/* ========== EMOJI PICKER (input + reactions) ========== */
.emoji-picker{
display:none;position:fixed;z-index:9999;
width:340px;max-height:380px;
background:var(--s1);border:1px solid var(--b);border-radius:12px;
box-shadow:var(--shadow-modal);padding:10px;
flex-direction:column;
}
.emoji-picker.open{display:flex;animation:emoji-slide .18s ease-out}
@keyframes emoji-slide{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.emoji-search{
width:100%;background:var(--s2);border:1px solid var(--b);border-radius:6px;
padding:7px 10px;color:var(--tx);font-size:12px;outline:none;margin-bottom:8px;
font-family:inherit;
}
.emoji-search:focus{border-color:var(--ac)}
.emoji-tabs{
display:flex;gap:2px;border-bottom:1px solid var(--b);padding-bottom:6px;margin-bottom:6px;
flex-shrink:0;
}
.emoji-tabs .emoji-tab{
flex:1;text-align:center;padding:5px 0;font-size:16px;cursor:pointer;
border-radius:6px;opacity:.55;transition:.12s;line-height:1;
}
.emoji-tabs .emoji-tab.active,.emoji-tabs .emoji-tab:hover{background:var(--s2);opacity:1}
.emoji-body{
overflow-y:auto;flex:1;min-height:200px;
scrollbar-width:thin;scrollbar-color:var(--b) transparent;
scrollbar-gutter:stable;padding-right:2px;
}
.emoji-body::-webkit-scrollbar{width:6px}
.emoji-body::-webkit-scrollbar-track{background:transparent}
.emoji-body::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.emoji-body::-webkit-scrollbar-thumb:hover{background:var(--mt)}
.emoji-section-label{
font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;
font-weight:600;margin:6px 4px 4px;
}
.emoji-grid{
display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
}
.emoji-grid span{
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
font-size:20px;border-radius:5px;cursor:pointer;transition:transform .1s,background .1s;
user-select:none;line-height:1;
}
.emoji-grid span:hover{background:var(--s2);transform:scale(1.2)}
.emoji-empty{padding:20px;text-align:center;color:var(--mt);font-size:12px}
/* ========== CHATBOT POPOVER (estilo emoji-picker) ========== */
.chatbot-popover{
display:none;position:fixed;z-index:9999;
width:360px;max-height:440px;
background:var(--s1);border:1px solid var(--b);border-radius:12px;
box-shadow:var(--shadow-modal);padding:12px;
flex-direction:column;
}
.chatbot-popover.open{display:flex;animation:emoji-slide .18s ease-out}
.chatbot-popover-header{
display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
color:var(--tx);padding:0 2px 8px;border-bottom:1px solid var(--b);
margin-bottom:10px;flex-shrink:0;
}
.chatbot-popover-header svg{width:15px;height:15px;stroke-width:1.85}
.chatbot-popover-sessao{
margin-bottom:10px;padding:9px 12px;border-radius:8px;
background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.3);
flex-shrink:0;
}
.chatbot-popover-sessao-label{
font-size:10px;font-weight:700;color:#25d366;text-transform:uppercase;
letter-spacing:.04em;display:flex;align-items:center;gap:5px;
}
.chatbot-popover-pulse{
width:7px;height:7px;border-radius:50%;background:#25d366;display:inline-block;
}
.chatbot-popover-sessao-nome{font-size:12px;font-weight:600;margin-top:3px;color:var(--tx)}
.chatbot-popover-section-label{
font-size:10px;font-weight:700;color:var(--mt);text-transform:uppercase;
letter-spacing:.04em;margin-bottom:6px;padding:0 2px;flex-shrink:0;
}
.chatbot-popover-lista{
display:flex;flex-direction:column;gap:5px;
overflow-y:auto;flex:1;min-height:60px;
scrollbar-width:thin;scrollbar-color:var(--b) transparent;
scrollbar-gutter:stable;padding-right:2px;
}
.chatbot-popover-lista::-webkit-scrollbar{width:6px}
.chatbot-popover-lista::-webkit-scrollbar-track{background:transparent}
.chatbot-popover-lista::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.chatbot-popover-lista::-webkit-scrollbar-thumb:hover{background:var(--mt)}
.cbp-fluxo-item{
display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--s2);border:1px solid var(--b);border-radius:8px;
padding:8px 12px;cursor:pointer;color:var(--tx);
transition:border-color .12s, background .12s;user-select:none;
}
.cbp-fluxo-item:hover{border-color:var(--ac);background:var(--primary-soft-hover)}
.cbp-fluxo-item.ativo{cursor:default;opacity:.95}
.cbp-fluxo-item.ativo:hover{border-color:var(--b);background:var(--s2)}
.cbp-fluxo-nome{
font-size:12px;font-weight:600;min-width:0;flex:1;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:flex;align-items:center;gap:6px;
}
.cbp-fluxo-bot{font-size:14px;flex-shrink:0}
.cbp-fluxo-status-ativo{
font-size:10px;font-weight:700;color:var(--wa);
background:var(--accent-success-soft);border:1px solid var(--success-soft);
padding:3px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0;
display:inline-flex;align-items:center;gap:4px;
}
.cbp-fluxo-cta{
font-size:11px;font-weight:600;color:var(--ac);
white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:3px;
opacity:0;transition:opacity .12s;
}
.cbp-fluxo-item:hover .cbp-fluxo-cta{opacity:1}
/* ========== MIDIA POPOVER (anexar arquivo) ========== */
.midia-popover{
display:none;position:fixed;z-index:9999;
width:340px;
background:var(--s1);border:1px solid var(--b);border-radius:12px;
box-shadow:var(--shadow-modal);padding:12px;
flex-direction:column;
}
.midia-popover.open{display:flex;animation:emoji-slide .18s ease-out}
.midia-popover-header{
display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
color:var(--tx);padding:0 2px 8px;border-bottom:1px solid var(--b);
margin-bottom:10px;
}
.midia-popover-header svg{width:15px;height:15px;stroke-width:1.85}
.midia-popover-section-label{
font-size:10px;font-weight:700;color:var(--mt);text-transform:uppercase;
letter-spacing:.04em;margin-bottom:6px;padding:0 2px;
}
.midia-popover-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;
min-height:80px;
}
.midia-popover-thumb{
position:relative;aspect-ratio:1;background:var(--s2);border:1px solid var(--b);
border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .12s,border-color .12s;
}
.midia-popover-thumb:hover{transform:scale(1.04);border-color:var(--ac)}
.midia-popover-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.midia-popover-thumb-uso{
position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.65);color:#fff;
font-size:10px;font-weight:600;padding:1px 5px;border-radius:8px;line-height:1.4;
}
.midia-popover-loading,.midia-popover-empty{
grid-column:1/-1;text-align:center;padding:18px 6px;
color:var(--mt);font-size:12px;
}
.midia-popover-actions{
display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--b);padding-top:8px;
}
.midia-popover-action{
display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
border:none;background:transparent;color:var(--tx);font-size:13px;
border-radius:7px;cursor:pointer;text-align:left;white-space:nowrap;
transition:background .12s;
}
.midia-popover-action:hover{background:var(--s2)}
.midia-popover-action svg{width:15px;height:15px;stroke-width:1.85;flex-shrink:0;color:var(--mt)}
/* ========== BIBLIOTECA — modo "Ver de todos" (admin) ========== */
.bib-todos-toggle{margin-left:auto}
.bib-grupo{margin-bottom:18px}
.bib-grupo-header{
display:flex;align-items:center;justify-content:space-between;
padding:6px 10px;margin-bottom:8px;
background:var(--s2);border:1px solid var(--b);border-radius:8px;
font-size:12px;font-weight:600;color:var(--tx);
position:sticky;top:0;z-index:1;
}
.bib-grupo-nome{display:flex;align-items:center;gap:6px}
.bib-grupo-count{font-size:11px;color:var(--mt);font-weight:500}
.bib-grupo-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
}
.bib-uso{
position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;
font-size:11px;font-weight:600;padding:1px 6px;border-radius:8px;line-height:1.4;
pointer-events:none;
}
.bib-item{position:relative}
/* ========== RR POPOVER (resposta rápida — criar/editar) ========== */
.rr-popover{
display:none;position:fixed;z-index:9999;
width:400px;max-height:560px;
background:var(--s1);border:1px solid var(--b);border-radius:12px;
box-shadow:var(--shadow-modal);
flex-direction:column;
}
.rr-popover.open{display:flex;animation:emoji-slide .18s ease-out}
.rr-popover-header{
display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
color:var(--tx);padding:12px 14px;border-bottom:1px solid var(--b);
flex-shrink:0;
}
.rr-popover-header svg{width:15px;height:15px;stroke-width:1.85}
.rr-popover-body{
padding:10px 14px;overflow-y:auto;flex:1;min-height:0;
scrollbar-width:thin;scrollbar-color:var(--b) transparent;
scrollbar-gutter:stable;
}
.rr-popover-body::-webkit-scrollbar{width:6px}
.rr-popover-body::-webkit-scrollbar-track{background:transparent}
.rr-popover-body::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
.rr-popover-body::-webkit-scrollbar-thumb:hover{background:var(--mt)}
.rr-popover-label{
display:block;font-size:11px;font-weight:600;color:var(--mt);
margin:8px 0 4px;text-transform:uppercase;letter-spacing:.04em;
}
.rr-popover-input{
width:100%;padding:7px 10px;border-radius:7px;border:1px solid var(--b);
background:var(--s2);color:var(--tx);font-size:12px;outline:none;
box-sizing:border-box;font-family:inherit;
}
.rr-popover-input:focus{border-color:var(--ac)}
.rr-popover-vars{
background:var(--s2);border:1px solid var(--b);border-radius:7px;
padding:7px 10px;margin-bottom:5px;display:flex;flex-wrap:wrap;gap:4px;
}
.rr-popover-vars-hint{font-size:10px;color:var(--mt);width:100%;margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.rr-popover-var-chip{
font-size:11px;font-family:monospace;background:var(--success-soft-strong);
color:var(--wa);border:1px solid var(--success-soft);
border-radius:4px;padding:2px 7px;cursor:pointer;transition:.12s;
}
.rr-popover-var-chip:hover{background:var(--success-soft);transform:scale(1.05)}
.rr-popover-textarea{
width:100%;min-height:90px;max-height:200px;padding:8px 10px;border-radius:7px;
border:1px solid var(--b);background:var(--s2);color:var(--tx);font-size:12px;
outline:none;resize:vertical;box-sizing:border-box;font-family:inherit;line-height:1.5;
}
.rr-popover-textarea:focus{border-color:var(--ac)}
.rr-popover-footer{
display:flex;gap:6px;justify-content:flex-end;
padding:10px 14px;border-top:1px solid var(--b);flex-shrink:0;
}
/* ===== REPLY QUOTE (dentro do bubble) ===== */
.reply-quote{background:var(--surface-hover-strong);border-left:3px solid var(--wa);border-radius:6px;padding:6px 10px;margin-bottom:6px;cursor:pointer;transition:background .15s;max-width:100%;overflow:hidden}
.reply-quote:hover{background:var(--surface-contrast-strong)}
.reply-quote strong{display:block;font-size:11px;color:var(--wa);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote span{display:block;font-size:12px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote-deleted{border-left-color:var(--mt)}
.reply-quote-deleted span{font-style:italic}
.msg-apagada .bubble{border-left:3px solid #e06c4a}
.msg-apagada-label{display:block;font-size:11px;font-style:italic;color:#e06c4a;margin-bottom:4px}
.msg-apagada-texto{font-style:italic;color:var(--mt)}
/* ===== MSG HIGHLIGHT (scroll destino) ===== */
@keyframes msgHighlight{0%,100%{background:transparent}30%{background:var(--success-soft-strong)}}
.msg-highlight .bubble{animation:msgHighlight 1.5s ease}
/* ===== REPLY PREVIEW BAR (acima do input) ===== */
.reply-preview-bar{background:var(--s2);border-top:1px solid var(--b);padding:8px 14px;flex-shrink:0}
.reply-preview-inner{display:flex;align-items:center;gap:10px}
.reply-preview-icon{font-size:15px;color:var(--wa);flex-shrink:0}
.reply-preview-text{flex:1;min-width:0;border-left:3px solid var(--wa);padding-left:8px}
.reply-preview-text strong{display:block;font-size:11px;color:var(--wa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview-text span{display:block;font-size:12px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview-cancel{background:none;border:none;color:var(--mt);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px;flex-shrink:0;transition:color .1s}
.reply-preview-cancel:hover{color:var(--tx)}
/* Dropdown menu do botão + */
.midia-menu{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:var(--s1);border:1px solid var(--b);border-radius:10px;padding:4px;min-width:168px;z-index:300;box-shadow:var(--shadow-panel)}
.midia-menu.open{display:block}
.midia-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none!important;background:transparent!important;color:var(--tx)!important;font-size:13px;border-radius:7px;cursor:pointer;text-align:left;white-space:nowrap}
.midia-menu-item:hover{background:var(--s2)!important;opacity:1!important}
/* Biblioteca modal */
.biblioteca-overlay{position:fixed;inset:0;background:var(--overlay-backdrop-strong);z-index:600;display:flex;align-items:center;justify-content:center}
.biblioteca-box{background:var(--s1);border:1px solid var(--b);border-radius:14px;width:min(660px,96vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.biblioteca-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--b);font-size:14px;font-weight:600;color:var(--tx);flex-shrink:0}
.biblioteca-close{background:transparent!important;border:none!important;color:var(--mt)!important;font-size:16px;cursor:pointer;padding:4px 8px!important;border-radius:6px!important;line-height:1}
.biblioteca-close:hover{background:var(--s2)!important;color:var(--tx)!important;opacity:1!important}
.biblioteca-filtros{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--b);flex-shrink:0;flex-wrap:wrap}
.bib-filtro{padding:4px 14px!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;background:var(--s2)!important;border:1px solid var(--b)!important;color:var(--mt)!important;cursor:pointer;transition:all .15s;height:auto!important}
.bib-filtro:hover{background:var(--b)!important;color:var(--tx)!important;opacity:1!important}
.bib-filtro.active{background:var(--ac)!important;border-color:var(--ac)!important;color:var(--text-inverse)!important}
.biblioteca-grid{overflow-y:auto;padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;flex:1;min-height:120px}
.bib-item{border:2px solid var(--b);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s;background:var(--s2)}
.bib-item:hover{border-color:var(--ac);transform:scale(1.03)}
.bib-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.bib-thumb-doc{width:100%;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;box-sizing:border-box}
.bib-thumb-doc .bib-icon{font-size:30px;line-height:1}
.bib-thumb-doc .bib-name{font-size:10px;color:var(--mt);text-align:center;word-break:break-all;line-height:1.3;max-height:2.6em;overflow:hidden}
.bib-status{grid-column:1/-1;text-align:center;color:var(--mt);padding:36px 0;font-size:13px}
.bib-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--overlay-backdrop)!important;border:none!important;color:var(--text-inverse)!important;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0!important;opacity:0;transition:opacity .15s;z-index:2}
.bib-item:hover .bib-del{opacity:1}
.bib-del:hover{background:var(--dg)!important;opacity:1!important}
/* ===== AUDIO PLAYER ===== */
.audio-player{display:flex;align-items:center;gap:10px;background:none;border-radius:30px;padding:4px 0;min-width:0;width:100%;max-width:260px;cursor:pointer}
.audio-btn{border:none;color:var(--text-inverse);font-size:14px;cursor:pointer;width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1}
.audio-track{flex:1;display:flex;flex-direction:column;gap:4px}
.audio-bar{height:3px;background:var(--surface-contrast-strong);border-radius:3px;overflow:hidden;cursor:pointer}
.audio-prog{height:100%;width:0%;background:var(--wa);border-radius:3px;transition:width .1s}
.audio-time{font-size:10px;color:var(--mt)}
.audio-speed{flex-shrink:0;font-size:10px;font-weight:700;color:var(--mt);background:transparent;border:1px solid var(--b);border-radius:10px;padding:2px 7px;cursor:pointer;line-height:1;font-feature-settings:"tnum" 1;transition:all .15s;min-width:30px;text-align:center}
.audio-speed:hover{border-color:var(--wa);color:var(--wa)}
.audio-speed.is-fast{background:var(--wa);color:var(--text-inverse);border-color:var(--wa)}
/* Override final: garante botões do popup sempre transparentes (qualquer cor herdada some) */
.rr-popup .rr-popup-btn,
.rr-popup .rr-popup-send,
.rr-popup .rr-popup-edit,
.rr-popup .rr-popup-hide,
.rr-popup .rr-popup-del,
.rr-popup .rr-popup-close {
background-color: transparent !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.rr-popup .rr-popup-close{color:var(--mt) !important;transition:color .15s}
.rr-popup .rr-popup-close:hover{color:var(--tx) !important}
/* ── Widget-msg interleaved no painel WA (Onda 2 flatten) ────────────────
Cada msg do widget vira um .msg próprio, ordenado por data-ts entre as msgs WA.
Visual: bolha herda from-me/from-user, tag '💬 site' indica fonte. */
.widget-bubble{
position:relative;
border-left:3px solid rgba(124,58,237,.55) !important;
/* Background distinto do WA pra evitar confusão visual — msgs do widget
NÃO devem parecer com msg WA. Roxo bem leve em vez do branco/cinza do WA. */
background:rgba(124,58,237,.06) !important;
}
.msg.widget-msg.from-me .widget-bubble{
border-left:0 !important;
border-right:3px solid rgba(124,58,237,.55) !important;
/* From-me widget: roxo claro em vez do verde do WA. Sinaliza inequivocamente
que a msg saiu via canal=widget (lead recebe no chat do site), não via WA. */
background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(31,111,235,.18)) !important;
color:var(--tx) !important;
}
.wm-header{
display:flex;align-items:center;gap:6px;
margin-bottom:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.wm-autor{color:var(--tx);opacity:.85;display:inline-flex;align-items:center;gap:4px}
.wm-autor-ic{width:13px;height:13px;display:inline-block;vertical-align:middle}
.wm-autor-ic svg{width:13px;height:13px;display:block}
.wm-autor-nome{line-height:1}
.wm-text{white-space:pre-wrap;word-break:break-word}
.wms-ic{width:11px;height:11px;display:inline-block;vertical-align:middle}
.wms-ic svg{width:11px;height:11px;display:block}
.wms-tag{
display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
font-size:9.5px;font-weight:700;letter-spacing:.05em;
color:#a78bfa;background:rgba(124,58,237,.12);
padding:2px 7px;border-radius:8px;
border:1px solid rgba(124,58,237,.3);
text-transform:uppercase;line-height:1.2;
}
.wms-tag svg{stroke:#a78bfa}
.widget-msg-sys{
text-align:center;font-size:11px;color:var(--mt);
padding:6px 12px;margin:4px 0;
border-top:1px dashed rgba(124,58,237,.2);
border-bottom:1px dashed rgba(124,58,237,.2);
}
/* Mini-badge de canal (WA verde, TG azul, Widget gradient). No header do chat aberto
(#topoChat) fica no canto inferior-ESQUERDO do avatar (a pedido 2026-06-05) — lado
oposto à linha de etiquetas, pra não encostar nelas. `right:auto;left` sobrepõem o
inline `right:-3px` do _canalBadge (precisa de !important pra vencer o inline). */
#topoChat .canal-badge { right:auto !important; left:-3px !important; bottom:-3px !important; }
/* Chat unificado: toggle de canal em DOIS cantos do avatar — WhatsApp reusa o
`.canal-badge` (esquerda) e o Widget é o `.canal-badge-wg` (direita). Mesmo tamanho.
Estado ativo/inativo (cor/opacidade/realce) é aplicado via JS em _estiloCanalToggle. */
.canal-badge-wg{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;border:1px solid var(--bg);display:flex;align-items:center;justify-content:center;z-index:2}
.canal-badge-wg svg{display:block}
.canal-badge-toggle{transition:transform .12s, box-shadow .15s}
.canal-badge-toggle:hover{transform:scale(1.18)}
/* Banner [NOTIF_WA]: alinhado à DIREITA (como msg do atendente). Atendente vê,
lead não (filtrado server-side em lead_poll/lead_historico). Texto + tick
+ botão Explicar (toggle de details). */
.notif-wa-banner{
display:block;text-align:left;border-top:0;border-bottom:0;
background:rgba(31,111,235,.06);border-radius:8px;
padding:8px 12px;margin:8px 12px 8px auto;max-width:65%;
border:1px solid rgba(31,111,235,.18);
}
.notif-wa-banner .nwb-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--tx)}
.notif-wa-banner .nwb-ico{font-size:14px}
.notif-wa-banner .nwb-txt{flex:1;line-height:1.3}
.notif-wa-banner .msg-tick{display:inline-flex;align-items:center}
.notif-wa-banner .nwb-btn{
background:transparent;border:1px solid rgba(31,111,235,.4);color:#58a6ff;
padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;
transition:.15s;font-family:inherit
}
.notif-wa-banner .nwb-btn:hover{background:rgba(31,111,235,.12)}
.notif-wa-banner .nwb-details{
display:none;width:100%;margin-top:8px;padding-top:8px;
border-top:1px solid rgba(31,111,235,.18);font-size:11.5px;color:var(--tx);line-height:1.45
}
.notif-wa-banner .nwb-details.open{display:block}
.notif-wa-banner .nwb-details p{margin:4px 0}
.notif-wa-banner .nwb-details ul{margin:6px 0 6px 18px;padding:0}
.notif-wa-banner .nwb-details li{margin:3px 0;list-style:none}
/* Bridge Onda 2: badge "via widget" no avatar do header */
.widget-badge-dot{
position:absolute;
right:-2px;
bottom:-2px;
width:18px;
height:18px;
border-radius:50%;
background:linear-gradient(135deg,#1f6feb,#7c3aed);
border:2px solid var(--bg);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 1px 3px rgba(0,0,0,.4);
cursor:help;
pointer-events:auto;
z-index:2;
}
.widget-badge-dot svg{display:block}
/* Bridge Onda 2: detalhes do sistema "Lead encaminhado" */
.wbm-sys-detalhes{margin-top:6px;border-top:1px dashed var(--b);padding-top:6px}
.wbm-sys-detalhes summary{
cursor:pointer;
font-size:11px;
color:var(--ac);
font-style:normal;
list-style:none;
user-select:none;
padding:2px 0;
display:inline-flex;
align-items:center;
gap:4px;
font-weight:600;
}
.wbm-sys-detalhes summary::-webkit-details-marker{display:none}
.wbm-sys-detalhes summary::before{content:'▾';font-size:9px;margin-right:2px;transition:transform .15s}
.wbm-sys-detalhes:not([open]) summary::before{transform:rotate(-90deg)}
.wbm-sys-detalhes summary:hover{color:var(--tx)}
.wbm-sys-detalhes-body{
margin-top:8px;
padding:10px 12px;
background:rgba(31,111,235,.06);
border:1px solid rgba(31,111,235,.25);
border-radius:8px;
color:var(--tx);
font-style:normal;
text-align:left;
font-size:12px;
line-height:1.55;
}
.wbm-sys-detalhes-body b{color:var(--ac)}
.wbm-sys-detalhes-body ul{margin:6px 0 0;padding-left:18px}
.wbm-sys-detalhes-body li{margin-bottom:4px}
.wbm-sys-detalhes-body li:last-child{margin-bottom:0}
/* Bridge Onda 2: msg sistema "Lead encaminhado" no abrirLead (sessões widget) */
.lead-sys-encaminhamento{
margin:14px auto;
padding:10px 14px;
max-width:90%;
background:linear-gradient(180deg, rgba(124,58,237,.08), rgba(31,111,235,.05));
border:1px solid rgba(124,58,237,.3);
border-radius:10px;
text-align:center;
}
.lead-sys-encaminhamento .lse-line{
font-size:12.5px;
color:var(--tx);
font-weight:600;
margin-bottom:6px;
}
.lead-sys-encaminhamento .wbm-sys-detalhes{
border-top:1px dashed rgba(124,58,237,.3);
padding-top:6px;
margin-top:6px;
text-align:left;
}
/* ── Seletor de canal (WA ↔ Widget) no header do chat ────────────────────── */
.canal-selector{
position:absolute;
right:-12px;
bottom:-8px;
display:flex;
gap:2px;
align-items:flex-end;
z-index:3;
}
.canal-selector .csel-btn{
width:18px;
height:18px;
border-radius:50%;
border:2px solid var(--bg);
background:rgba(255,255,255,.12);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
transition:width .15s, height .15s, transform .12s, box-shadow .15s;
flex-shrink:0;
}
.canal-selector .csel-btn:hover{transform:translateY(-1px)}
.canal-selector .csel-btn svg{width:9px;height:9px;display:block}
/* Inativo: pequeno + opaco */
.canal-selector .csel-btn:not(.csel-ativo){opacity:.6;background:var(--s2)}
/* Ativo: maior (24px) + destaque + cor do canal */
.canal-selector .csel-btn.csel-ativo{
width:24px;
height:24px;
opacity:1;
box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.canal-selector .csel-btn.csel-ativo svg{width:13px;height:13px}
.canal-selector .csel-wa.csel-ativo{background:#25d366;color:#fff}
.canal-selector .csel-widget.csel-ativo{background:linear-gradient(135deg,#1f6feb,#7c3aed)}
/* Disabled: contato sem instancia_id WA. Mostra cinza riscado, sem hover, sem click */
.canal-selector .csel-btn.csel-disabled{opacity:.3;cursor:not-allowed;background:var(--s2)}
.canal-selector .csel-btn.csel-disabled:hover{transform:none}