/* ======================================
FAVX CRM — GLOBAL STYLES
Design: Brand Blue primary · degradês secundários (roxo/laranja/branco)
Sidebar em navy · superfícies claras
====================================== */
:root {
/* ── Backgrounds ─────────────────────────── */
--color-bg: #eaf0f9;
--color-surface: #ffffff;
--color-surface-2: #f3f7fc;
--color-bg-2: #e6edf7;
/* Vidro claro — containers translúcidos sobre os halos de luz */
--glass: rgba(255, 255, 255, 0.74);
--glass-2: rgba(255, 255, 255, 0.58);
/* ── Borders ─────────────────────────────── */
--color-border: #d7e1ee;
--color-border-2: #b8ccdf;
/* ── Text ────────────────────────────────── */
--color-text-1: #0d1b2a;
--color-text-2: #2d4a6b;
--color-text-3: #6b8aaa;
--color-text-inv: #ffffff;
/* ── Midnight Navy (brand) ───────────────── */
--color-black: #0d1b2a;
--color-black-2: #122236;
--color-black-3: #1a3558;
/* ── Accent = Brand Blue (primary) ───────── */
--color-accent: #2563eb;
--color-accent-h: #1d4ed8;
--color-accent-lite:#dce7fd;
/* ── Secondary accents (degradê) ─────────── */
--color-purple: #8b7bf0;
--color-purple-lite: #ece9fd;
--color-orange: #f97316;
--color-orange-lite: #ffedd5;
/* ── Gradients ───────────────────────────── */
--gradient-brand: linear-gradient(135deg, #2563eb 0%, #4f7ef7 100%);
--gradient-brand-h: linear-gradient(135deg, #1d4ed8 0%, #3f6ff0 100%);
--gradient-accent: linear-gradient(135deg, #2563eb 0%, #6d6ff0 52%, #f97316 122%);
--gradient-cool: linear-gradient(135deg, #2f6bf6 0%, #8b7bf0 100%);
--gradient-warm: linear-gradient(135deg, #3b82f6 0%, #f97316 128%);
--gradient-sheen: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%);
--shadow-accent: 0 4px 14px rgba(37,99,235,0.28);
/* ── Glow (claro: halos suaves e azulados) ── */
--glow-blue: 0 0 18px rgba(37, 99, 235, 0.30);
--glow-purple: 0 0 18px rgba(139, 92, 246, 0.28);
--glow-orange: 0 0 18px rgba(249, 115, 22, 0.28);
--glow-soft: 0 1px 2px rgba(13,27,42,.04), 0 8px 28px rgba(37,99,235,.10);
/* ── Functional colours ──────────────────── */
--color-green: #10b981;
--color-green-lite: #d1fae5;
--color-red: #ef4444;
--color-red-lite: #fee2e2;
--color-yellow: #f59e0b;
--color-yellow-lite:#fef3c7;
--color-blue: #3b82f6;
--color-blue-lite: #dbeafe;
/* ── Chat (leitura no estilo WhatsApp, em azul) ──
O chat tem uma paleta própria: o balão precisa de contraste com o papel de
parede, não com o fundo dos cards. Ficam aqui para os dois temas mudarem
no mesmo lugar. */
--chat-fundo: #e9eef7;
--chat-in-bg: #ffffff;
--chat-in-fg: #0d1b2a;
--chat-out-bg: #d3e5ff;
--chat-out-fg: #0b2949;
--chat-meta: rgba(13, 27, 42, .45);
--chat-meta-out: rgba(11, 41, 73, .52);
--chat-painel: #ffffff;
--chat-tique: #2b8ce8;
--chat-sombra: 0 1px 1px rgba(13, 27, 42, .12);
/* ── Layout ──────────────────────────────── */
--sidebar-w: 240px;
--sidebar-w-collapsed: 64px;
--topbar-h: 60px;
--radius-sm: 8px;
--radius-md: 11px;
--radius-lg: 18px;
--radius-xl: 22px;
--shadow-sm: 0 1px 3px rgba(13,27,42,0.08);
--shadow-md: 0 4px 16px rgba(13,27,42,0.12);
--shadow-lg: 0 8px 32px rgba(13,27,42,0.16);
--transition: 0.18s ease;
}
/* ======================================
DARK MODE
====================================== */
[data-theme="dark"] {
/* ── Backgrounds (deep space navy) ───────── */
/* Superfícies SÓLIDAS — modais, dropdowns e painéis criados via JS
dependem destas variáveis; mantê-las opacas garante legibilidade. */
--color-bg: #05070e;
--color-surface: #111a2b;
--color-surface-2: #0d1523;
--color-bg-2: #1b2438;
/* Vidro — aplicado explicitamente nos containers translúcidos */
--glass: rgba(18, 26, 44, 0.42);
--glass-2: rgba(12, 18, 32, 0.42);
--color-solid: #0c111d;
--color-solid-2: #131b2d;
/* ── Borders ─────────────────────────────── */
--color-border: rgba(255, 255, 255, 0.07);
--color-border-2: rgba(255, 255, 255, 0.14);
/* ── Text ────────────────────────────────── */
--color-text-1: #eaf1ff;
--color-text-2: #9db1d4;
--color-text-3: #64789d;
--color-text-inv: #05070e;
/* ── Surface shades (replaces "black" tokens) */
--color-black: #0a0f1a;
--color-black-2: #111828;
--color-black-3: #1a2438;
/* ── Accent = electric blue ──────────────── */
--color-accent: #4d8dff;
--color-accent-h: #6ba0ff;
--color-accent-lite:rgba(77, 141, 255, 0.16);
/* ── Secondary accents (degradê) ─────────── */
--color-purple: #a78bfa;
--color-purple-lite: rgba(167, 139, 250, 0.16);
--color-orange: #fb923c;
--color-orange-lite: rgba(251, 146, 60, 0.15);
--color-cyan: #38bdf8;
/* ── Gradients (dark) ────────────────────── */
--gradient-brand: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
--gradient-brand-h: linear-gradient(135deg, #4d8dff 0%, #7cb2ff 100%);
--gradient-accent: linear-gradient(135deg, #38bdf8 0%, #4d8dff 45%, #a78bfa 100%);
--gradient-cool: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%);
--gradient-warm: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #ef4444 120%);
--gradient-sheen: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
--shadow-accent: 0 0 0 1px rgba(77,141,255,.30), 0 6px 22px rgba(59,130,246,.38);
/* ── Glow ────────────────────────────────── */
--glow-blue: 0 0 22px rgba(77, 141, 255, 0.45);
--glow-purple: 0 0 22px rgba(167, 139, 250, 0.40);
--glow-orange: 0 0 22px rgba(251, 146, 60, 0.40);
--glow-soft: 0 0 0 1px rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.45);
/* ── Functional colours ──────────────────── */
--color-green-lite: rgba(16, 185, 129, 0.15);
--color-red-lite: rgba(239, 68, 68, 0.15);
--color-yellow-lite:rgba(245, 158, 11, 0.15);
--color-blue-lite: rgba(59, 130, 246, 0.16);
/* ── Chat (versão escura) ────────────────── */
--chat-fundo: #060b14;
--chat-in-bg: #16202f;
--chat-in-fg: #eaf1ff;
--chat-out-bg: #0f4677;
--chat-out-fg: #eaf3ff;
--chat-meta: rgba(234, 241, 255, .45);
--chat-meta-out: rgba(234, 241, 255, .60);
--chat-painel: #101a2a;
--chat-tique: #53bdeb;
--chat-sombra: 0 1px 2px rgba(0, 0, 0, .35);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
--shadow-md: 0 8px 28px rgba(0,0,0,0.50);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.62);
}
/* ── Fundo ambiente com halos de luz (referência premium) ── */
[data-theme="dark"] body::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(42vw 38vw at 82% 2%, rgba(56, 132, 255, 0.50) 0%, transparent 66%),
radial-gradient(34vw 46vw at 99% 42%, rgba(249, 115, 22, 0.34) 0%, transparent 64%),
radial-gradient(38vw 40vw at 90% 86%, rgba(139, 92, 246, 0.30) 0%, transparent 66%),
radial-gradient(46vw 40vw at 2% 96%, rgba(37, 99, 235, 0.20) 0%, transparent 64%);
pointer-events: none;
}
/* Vinheta suave para aprofundar os cantos sem apagar os halos */
[data-theme="dark"] body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background: radial-gradient(140% 120% at 40% 40%, transparent 55%, rgba(0,0,0,.40) 100%);
pointer-events: none;
}
/* ══════════════════════════════════════════
TEMA CLARO — mesma linguagem (halos + vidro + glow)
══════════════════════════════════════════ */
/* Halos de luz suaves sobre a base clara */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(44vw 38vw at 84% 0%, rgba(59, 130, 246, 0.26) 0%, transparent 66%),
radial-gradient(32vw 42vw at 100% 46%, rgba(249, 115, 22, 0.15) 0%, transparent 64%),
radial-gradient(36vw 36vw at 92% 90%, rgba(139, 92, 246, 0.16) 0%, transparent 66%),
radial-gradient(44vw 38vw at 0% 98%, rgba(56, 189, 248, 0.14) 0%, transparent 64%);
pointer-events: none;
}
/* Containers translúcidos */
.card,
.stat-card,
.conversations-layout,
.table-wrapper,
.settings-sidebar,
.agent-card {
background: var(--glass);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.conv-sidebar, .chat-area, .conv-info-panel { background: transparent; }
.funnel-column {
background: var(--glass-2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.topbar { background: rgba(255,255,255,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
/* Reflexo de luz na borda superior + sombra suave */
.card, .stat-card { position: relative; box-shadow: var(--glow-soft); }
.card::after, .stat-card::after {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
border-radius: inherit;
background: linear-gradient(90deg, transparent 6%, rgba(255,255,255,.9) 50%, transparent 94%);
pointer-events: none;
}
.stat-card:hover { box-shadow: 0 1px 2px rgba(13,27,42,.05), 0 12px 34px rgba(37,99,235,.16); }
/* Glow discreto nos ícones de indicadores */
.stat-icon.black { box-shadow: var(--glow-blue); }
.stat-icon.blue { box-shadow: var(--glow-blue); }
.stat-icon.purple { box-shadow: var(--glow-purple); }
.stat-icon.orange { box-shadow: var(--glow-orange); }
/* Foco com anel azul */
input:focus, textarea:focus, .settings-input:focus, .search-wrapper:focus-within {
border-color: rgba(37,99,235,.45);
box-shadow: 0 0 0 3px rgba(37,99,235,.12);
outline: none;
}
/* Conversas: item ativo com realce */
.conv-item.active { box-shadow: inset 2px 0 0 var(--color-accent); }
/* ── GLASS: superfícies translúcidas com desfoque (tema escuro) ── */
[data-theme="dark"] .sidebar {
background: linear-gradient(185deg, rgba(14,21,37,.72) 0%, rgba(10,15,26,.80) 100%);
border: 1px solid var(--color-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--glow-soft);
}
[data-theme="dark"] .topbar { border-bottom: 1px solid var(--color-border); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Containers translúcidos (o resto — modais/dropdowns — segue sólido) */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .conversations-layout,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .settings-sidebar,
[data-theme="dark"] .agent-card {
background: var(--glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .conv-sidebar,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .conv-info-panel { background: transparent; }
/* Brilho de borda superior nos cards — reflexo de luz */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card {
position: relative;
box-shadow: var(--glow-soft);
}
[data-theme="dark"] .card::after,
[data-theme="dark"] .stat-card::after {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
border-radius: inherit;
background: linear-gradient(90deg, transparent 6%, rgba(255,255,255,.22) 50%, transparent 94%);
pointer-events: none;
}
[data-theme="dark"] .stat-card:hover {
border-color: var(--color-border-2);
box-shadow: 0 0 0 1px rgba(77,141,255,.18), 0 12px 36px rgba(0,0,0,.5);
}
/* Superfícies sólidas onde o glass prejudicaria a leitura */
[data-theme="dark"] .topbar {
background: rgba(8, 12, 22, 0.72);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
[data-theme="dark"] .mention-dropdown,
[data-theme="dark"] .notif-dropdown,
[data-theme="dark"] .sub-menu {
background: var(--color-solid-2);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ── Navegação: item ativo brilhante (azul elétrico) ── */
[data-theme="dark"] .nav-item.active {
background: linear-gradient(135deg, rgba(77,141,255,.26) 0%, rgba(56,189,248,.14) 100%);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(120,175,255,.34), var(--glow-blue);
}
[data-theme="dark"] .nav-item.active i { color: #8fc0ff; }
[data-theme="dark"] .nav-item.active .nav-badge {
background: rgba(255,255,255,.16);
color: #cfe2ff;
}
[data-theme="dark"] .sidebar-section-label { color: rgba(255,255,255,.26); }
/* ── Glow nos ícones de indicadores ── */
[data-theme="dark"] .stat-icon.black { box-shadow: var(--glow-blue); }
[data-theme="dark"] .stat-icon.blue { box-shadow: var(--glow-blue); }
[data-theme="dark"] .stat-icon.purple { box-shadow: var(--glow-purple); }
[data-theme="dark"] .stat-icon.orange { box-shadow: var(--glow-orange); }
/* ── Texto grande com leve brilho ── */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .page-title { text-shadow: 0 0 24px rgba(120,170,255,.18); }
/* ── Inputs no glass ── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .settings-input,
[data-theme="dark"] .search-wrapper {
background: rgba(255,255,255,.04);
border-color: var(--color-border-2);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .settings-input:focus,
[data-theme="dark"] .search-wrapper:focus-within {
border-color: rgba(77,141,255,.55);
box-shadow: 0 0 0 3px rgba(77,141,255,.14);
outline: none;
}
/* ── Botões ── */
[data-theme="dark"] .btn-secondary {
background: rgba(255,255,255,.05);
border-color: var(--color-border-2);
color: var(--color-text-1);
}
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,.09); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.07); }
/* ── Tabelas ── */
[data-theme="dark"] thead th { background: rgba(255,255,255,.03); }
[data-theme="dark"] tbody tr:hover { background: rgba(255,255,255,.035); }
/* ── Chat no tema escuro ──
Papel de parede: a camada de cor por cima da imagem é o que segura o desenho
no fundo — sem ela o traço branco disputa a leitura com o texto das
mensagens. Aqui o desenho já é claro sobre fundo escuro e basta escurecer;
a inversão por blend existe só no tema claro. Dois planos no mesmo
background evitam um pseudo-elemento e, com attachment padrão, o desenho
fica parado enquanto as mensagens rolam. */
[data-theme="dark"] .chat-messages {
background-color: var(--chat-fundo);
background-image:
linear-gradient(rgba(5, 7, 14, 0.80), rgba(5, 7, 14, 0.80)),
url('../img/chat-bg-dark.jpg');
background-blend-mode: normal, normal;
background-size: cover, 620px auto;
background-position: center, center;
background-repeat: no-repeat, repeat;
}
/* As cores dos balões vêm dos tokens --chat-* (definidos por tema), então não
há mais o que sobrescrever aqui. */
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input-area {
background: rgba(12, 19, 32, .78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ── Funil: colunas e cards com glass + glow ── */
[data-theme="dark"] .funnel-column {
background: var(--glass-2);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .funnel-col-header { background: rgba(255,255,255,.04); }
[data-theme="dark"] .funnel-card {
background: rgba(255,255,255,.05);
border-color: var(--color-border);
}
[data-theme="dark"] .funnel-card:hover {
border-color: rgba(77,141,255,.45);
box-shadow: 0 0 0 1px rgba(77,141,255,.20), 0 8px 26px rgba(0,0,0,.45);
}
/* ── Conversas: item ativo com realce brilhante ── */
[data-theme="dark"] .conv-item.active {
background: linear-gradient(90deg, rgba(77,141,255,.16) 0%, rgba(77,141,255,.05) 100%);
box-shadow: inset 2px 0 0 var(--color-accent);
}
[data-theme="dark"] .conv-item:hover:not(.active) { background: rgba(255,255,255,.04); }
/* ── Controles segmentados (Conversas|Modelos, filtro do funil) ── */
[data-theme="dark"] .conv-mode-switch,
[data-theme="dark"] .funnel-status-filter,
[data-theme="dark"] .conv-tabs { background: rgba(255,255,255,.04); border-color: var(--color-border); }
[data-theme="dark"] .conv-mode-btn.active,
[data-theme="dark"] .funnel-status-btn.active {
background: rgba(77,141,255,.20);
color: #cfe2ff;
box-shadow: inset 0 0 0 1px rgba(120,175,255,.30);
}
[data-theme="dark"] .conv-tab.active { box-shadow: var(--glow-blue); }
/* ── Barra de rolagem discreta ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
/* Inputs e textareas no dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: var(--color-surface-2);
color: var(--color-text-1);
border-color: var(--color-border);
}
/* Theme toggle button */
.theme-toggle-btn {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-2);
transition: background var(--transition), color var(--transition);
}
.theme-toggle-btn:hover {
background: var(--color-accent-lite);
color: var(--color-text-1);
}
@keyframes theme-burst {
0% { transform: scale(1) rotate(0deg); opacity: 1; }
35% { transform: scale(1.55) rotate(18deg); opacity: 0.85; }
50% { transform: scale(1.55) rotate(-8deg); opacity: 0.85; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.theme-toggle-btn.theme-animating #themeIcon {
animation: theme-burst 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--color-bg);
color: var(--color-text-1);
display: flex;
height: 100vh;
overflow: hidden;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
/* ======================================
SCROLLBAR
====================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-2); border-radius: 99px; }
/* ======================================
SIDEBAR
====================================== */
.sidebar {
width: var(--sidebar-w);
min-width: var(--sidebar-w);
height: calc(100vh - 20px);
margin: 10px 0 10px 10px;
border-radius: var(--radius-lg);
background: linear-gradient(185deg, #0d1b2a 0%, #10233b 55%, #122942 100%);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width var(--transition), min-width var(--transition);
position: relative;
z-index: 100;
flex-shrink: 0;
}
.sidebar.collapsed {
width: var(--sidebar-w-collapsed);
min-width: var(--sidebar-w-collapsed);
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px;
border-bottom: 1px solid rgba(255,255,255,0.07);
flex-shrink: 0;
min-height: 64px;
position: relative;
}
.logo-icon { flex-shrink: 0; display: flex; align-items: center; }
.logo-text {
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: 0.08em;
white-space: nowrap;
transition: opacity var(--transition), width var(--transition);
}
.sidebar.collapsed .logo-text { opacity: 0; width: 0; overflow: hidden; }
/* Encolhido: oculta a logo e centraliza a seta, garantindo que ela fique
visível/clicável para reexpandir o menu ao tamanho original. */
.sidebar.collapsed .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .logo-icon { display: none; }
.sidebar.collapsed .sidebar-toggle { margin-left: 0; }
.sidebar.collapsed .sidebar-section-label { opacity: 0; }
.sidebar.collapsed .nav-item span:not(.nav-badge):not(.nav-badge-green) { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-badge-green { display: none; }
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .user-card i[data-lucide] { display: none; }
.sidebar-toggle {
margin-left: auto;
color: rgba(255,255,255,0.4);
padding: 4px;
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
flex-shrink: 0;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar-toggle i { display: block; }
.sidebar.collapsed .sidebar-toggle i {
transform: rotate(180deg);
}
.sidebar-section-label {
font-size: 10px;
font-weight: 600;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 16px 16px 6px;
white-space: nowrap;
transition: opacity var(--transition);
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 8px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-md);
color: rgba(255,255,255,0.6);
font-size: 13px;
font-weight: 500;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
position: relative;
}
.nav-item:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.nav-item.active {
background: #fff;
color: var(--color-accent);
font-weight: 600;
}
.nav-item.active i { color: var(--color-accent); }
.nav-item i {
flex-shrink: 0;
width: 18px;
height: 18px;
color: inherit;
}
.nav-item span:first-of-type {
flex: 1;
transition: opacity var(--transition), width var(--transition);
}
.nav-badge {
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.9);
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
flex-shrink: 0;
}
.nav-item.active .nav-badge {
background: rgba(37,99,235,0.14);
color: var(--color-accent);
}
.nav-badge-green {
background: rgba(16,185,129,0.2);
color: #10b981;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
flex-shrink: 0;
}
.nav-item.active .nav-badge-green {
background: rgba(16,185,129,0.15);
color: var(--color-green);
}
.sidebar-footer {
margin-top: auto;
padding: 12px 8px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.user-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition);
}
.user-card:hover { background: rgba(255,255,255,0.08); }
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
color: var(--color-black);
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.user-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
transition: opacity var(--transition);
}
.user-name {
font-size: 12px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role {
font-size: 10px;
color: rgba(255,255,255,0.4);
}
.user-card i {
color: rgba(255,255,255,0.4);
flex-shrink: 0;
}
/* ======================================
MAIN WRAPPER
====================================== */
.main-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
/* ======================================
TOPBAR
====================================== */
.topbar {
height: var(--topbar-h);
min-height: var(--topbar-h);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
gap: 16px;
flex-shrink: 0;
}
.topbar-left {
display: flex;
align-items: center;
gap: 12px;
}
.mobile-menu-btn {
display: none;
color: var(--color-text-2);
padding: 6px;
border-radius: var(--radius-sm);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 600;
color: var(--color-text-1);
}
.topbar-right {
display: flex;
align-items: center;
gap: 8px;
}
.search-wrapper {
display: flex;
align-items: center;
gap: 8px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 7px 14px;
min-width: 260px;
transition: border-color var(--transition);
}
.search-wrapper:focus-within { border-color: var(--color-accent); }
.search-wrapper i { color: var(--color-text-3); flex-shrink: 0; }
.search-wrapper input {
background: none;
border: none;
outline: none;
font-size: 13px;
color: var(--color-text-1);
width: 100%;
}
.search-wrapper input::placeholder { color: var(--color-text-3); }
.topbar-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-2);
transition: background var(--transition), color var(--transition);
}
.topbar-btn:hover { background: var(--color-bg); color: var(--color-text-1); }
.notif-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
border-radius: 8px;
background: var(--color-red);
color: #fff;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1.5px solid var(--color-surface);
line-height: 1;
pointer-events: none;
}
.notif-item {
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background 0.12s;
}
.notif-item:hover { background: var(--color-bg); }
.notif-item:last-child { border-bottom: none; }
.topbar-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--gradient-accent);
color: #fff;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow: var(--shadow-accent);
}
/* ======================================
PAGE CONTENT
====================================== */
.page-content {
flex: 1;
overflow-y: auto;
padding: 28px 28px;
}
/* ======================================
REUSABLE COMPONENTS
====================================== */
/* Page Header */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.page-title {
font-size: 22px;
font-weight: 700;
color: var(--color-text-1);
line-height: 1.2;
}
.page-subtitle {
font-size: 13px;
color: var(--color-text-3);
margin-top: 4px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
transition: background var(--transition), color var(--transition), opacity var(--transition);
white-space: nowrap;
}
.btn-primary {
background: var(--gradient-brand);
color: #fff;
box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--gradient-brand-h); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-text-1);
border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); }
.btn-ghost {
background: transparent;
color: var(--color-text-2);
padding: 7px 12px;
}
.btn-ghost:hover { background: var(--color-bg); }
.btn-danger {
background: var(--color-red);
color: #fff;
}
.btn-danger:hover { opacity: 0.88; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
/* Card */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.card-title {
font-size: 14px;
font-weight: 600;
color: var(--color-text-1);
}
.card-subtitle {
font-size: 12px;
color: var(--color-text-3);
margin-top: 2px;
}
/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* Stat Card */
.stat-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-icon.black { background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-accent); position: relative; }
.stat-icon.black::after,
.stat-icon.blue::after,
.stat-icon.purple::after,
.stat-icon.orange::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: var(--gradient-sheen); pointer-events: none;
}
.stat-icon.green { background: var(--color-green-lite); color: var(--color-green); }
.stat-icon.blue { background: var(--gradient-brand); color: #fff; position: relative; }
.stat-icon.purple{ background: var(--gradient-cool); color: #fff; position: relative; }
.stat-icon.orange{ background: var(--gradient-warm); color: #fff; position: relative; }
.stat-icon.yellow{ background: var(--color-yellow-lite); color: var(--color-yellow); }
.stat-icon.red { background: var(--color-red-lite); color: var(--color-red); }
.stat-delta {
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
gap: 3px;
}
.stat-delta.up { color: var(--color-green); }
.stat-delta.down { color: var(--color-red); }
.stat-value {
font-size: 28px;
font-weight: 800;
color: var(--color-text-1);
line-height: 1;
}
.stat-label {
font-size: 12px;
color: var(--color-text-3);
font-weight: 500;
}
/* Badge / Pill */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 99px;
font-size: 11px;
font-weight: 600;
}
.badge-black { background: var(--color-accent); color: #fff; }
.badge-green { background: var(--color-green-lite); color: var(--color-green); }
.badge-red { background: var(--color-red-lite); color: var(--color-red); }
.badge-yellow { background: var(--color-yellow-lite); color: var(--color-yellow); }
.badge-blue { background: var(--color-blue-lite); color: var(--color-blue); }
.badge-gray { background: var(--color-bg); color: var(--color-text-3); }
.badge-purple { background: rgba(139,92,246,.12); color: #7c3aed; }
/* Toggle Switch */
.toggle {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-border-2);
border-radius: 99px;
transition: background 0.22s;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 16px;
width: 16px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.22s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--color-accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
/* Table */
.table-wrapper {
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface);
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
background: var(--color-surface-2);
font-size: 11px;
font-weight: 600;
color: var(--color-text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
tbody td {
padding: 13px 16px;
font-size: 13px;
color: var(--color-text-2);
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--color-surface-2); }
/* Avatar group */
.avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-bg);
border: 2px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--color-text-2);
flex-shrink: 0;
}
/* ======================================
DASHBOARD PAGE
====================================== */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.dashboard-charts {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.chart-area {
position: relative;
height: 220px;
}
/* Dashboard — extensões avançadas */
.stat-sub {
font-size: 11px;
color: var(--color-text-3);
margin-top: -8px;
}
.dash-section-title {
font-size: 11px;
font-weight: 700;
color: var(--color-text-3);
text-transform: uppercase;
letter-spacing: .08em;
margin: 24px 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
.dash-section-title::before {
content: '';
width: 3px;
height: 13px;
border-radius: 2px;
background: var(--gradient-accent);
flex-shrink: 0;
}
/* Funil visual */
.dash-funnel {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.dash-funnel-header {
display: grid;
grid-template-columns: 160px 1fr 72px;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-border);
margin-bottom: 4px;
}
.dash-funnel-col-label { font-size: 10px; font-weight: 700; color: var(--color-text-3); text-transform: uppercase; letter-spacing: .06em; }
.dash-funnel-col-bar { font-size: 10px; }
.dash-funnel-col-conv { font-size: 10px; font-weight: 700; color: var(--color-text-3); text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.dash-funnel-row {
display: grid;
grid-template-columns: 160px 1fr 72px;
gap: 10px;
align-items: center;
min-height: 44px;
}
.dash-funnel-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-2);
display: flex;
align-items: center;
gap: 5px;
justify-content: flex-end;
text-align: right;
}
.dash-funnel-cfg-btn {
background: none;
border: none;
cursor: pointer;
padding: 2px;
border-radius: 4px;
color: var(--color-text-3);
display: flex;
align-items: center;
flex-shrink: 0;
opacity: .6;
transition: opacity var(--transition), background var(--transition);
}
.dash-funnel-cfg-btn:hover { opacity: 1; background: var(--color-bg); }
.dash-funnel-bar-wrap {
display: flex;
align-items: center;
height: 40px;
}
.dash-funnel-bar {
height: 100%;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
min-width: 50px;
transition: width .5s ease;
}
.dash-funnel-bar--empty { opacity: .55; }
.dash-funnel-bar-val {
font-size: 12px;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.dash-funnel-meta {
display: flex;
justify-content: flex-end;
align-items: center;
}
.dash-funnel-conv {
font-size: 11px;
font-weight: 700;
color: var(--color-text-3);
}
.dash-funnel-select {
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 600;
background: var(--color-surface);
color: var(--color-text-1);
cursor: pointer;
min-width: 140px;
}
/* Funil Espelho (pirâmide centrada) */
.funnel-mirror {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 0;
}
.funnel-mirror-row {
display: grid;
grid-template-columns: 1fr 52px;
align-items: center;
gap: 4px;
}
.funnel-mirror-bar-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 48px;
}
.funnel-mirror-bar {
height: 100%;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
min-width: 64px;
transition: width .55s ease;
overflow: hidden;
}
.funnel-mirror-label {
font-size: 12px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.funnel-mirror-count {
font-size: 14px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
margin-left: 12px;
}
.funnel-mirror-conv {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--color-text-3);
gap: 1px;
height: 48px;
}
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 4px;
flex-shrink: 0;
}
.activity-text {
font-size: 12px;
color: var(--color-text-2);
flex: 1;
line-height: 1.5;
}
.activity-text strong { color: var(--color-text-1); font-weight: 600; }
.activity-time {
font-size: 11px;
color: var(--color-text-3);
white-space: nowrap;
}
/* ======================================
CONVERSATIONS PAGE
====================================== */
.conversations-layout {
display: grid;
grid-template-columns: 320px 1fr 312px;
gap: 0;
height: calc(100vh - var(--topbar-h) - 56px);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface);
}
/* A altura acima era uma conta fixa que ignorava o cabeçalho da página: o
bloco terminava abaixo da janela e o campo de escrever ficava fora da
dobra. Aqui a página inteira vira uma coluna e o bloco recebe o que
sobrou — rolam as colunas de dentro, nunca a página. */
.page-content:has(.conversations-layout) {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 16px 28px 12px;
}
.page-content:has(.conversations-layout) > .page-header {
flex-shrink: 0;
margin-bottom: 10px !important; /* vence o style inline do cabeçalho */
}
.page-content:has(.conversations-layout) > .conversations-layout,
.page-content:has(.conversations-layout) > #templatesView {
flex: 1;
min-height: 0;
height: auto;
}
.conv-sidebar {
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.conv-sidebar-header {
padding: 16px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.conv-tabs {
display: flex;
gap: 4px;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.conv-tab {
flex: 1;
padding: 6px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
color: var(--color-text-3);
text-align: center;
transition: background var(--transition), color var(--transition);
}
.conv-tab.active { background: var(--color-accent); color: #fff; }
.conv-tab:hover:not(.active) { background: var(--color-bg); color: var(--color-text-1); }
/* Seletor Conversas | Modelos (topo da aba Conversas) */
.conv-mode-switch {
display: inline-flex;
gap: 2px;
background: var(--color-bg-2);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 3px;
}
.conv-mode-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: none;
background: none;
cursor: pointer;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-3);
transition: background var(--transition), color var(--transition);
}
.conv-mode-btn:hover:not(.active) { color: var(--color-text-1); }
.conv-mode-btn.active { background: var(--color-surface); color: var(--color-text-1); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#templatesView { overflow-y: auto; height: calc(100vh - var(--topbar-h) - 56px); padding: 4px 2px 32px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
/* display:grid do layout sobrepõe o atributo [hidden] — força o ocultamento */
.conversations-layout[hidden] { display: none !important; }
.conv-list {
flex: 1;
overflow-y: auto;
}
/* Linha da lista no formato do WhatsApp: foto, nome e hora em cima, prévia da
última mensagem e não-lidas embaixo. O traço separador começa depois da foto
— atravessar a linha inteira fatiava a lista. */
.conv-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
cursor: pointer;
transition: background var(--transition);
position: relative;
}
.conv-item::after {
content: '';
position: absolute;
left: 68px;
right: 0;
bottom: 0;
height: 1px;
background: var(--color-border);
}
.conv-item:last-child::after { display: none; }
.conv-item:hover { background: var(--color-bg); }
.conv-item.active { background: var(--color-accent-lite); }
/* As duas linhas de dentro: cada uma com o texto à esquerda e o dado curto
(hora, não-lidas) à direita. */
.conv-linha {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.conv-linha + .conv-linha { margin-top: 2px; }
.conv-linha > .conv-name,
.conv-linha > .conv-preview { flex: 1; min-width: 0; }
.conv-previa-tique {
display: inline-flex;
vertical-align: -3px;
margin-right: 3px;
}
/* Apagar conversa — aparece só ao passar o mouse sobre o item, para não
poluir a lista nem convidar ao clique acidental. */
.conv-delete-btn {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-3);
cursor: pointer;
opacity: 0;
transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.conv-item:hover .conv-delete-btn { opacity: 1; }
.conv-delete-btn:hover { color: var(--color-red); background: var(--color-red-lite); }
/* O botão ocupa o mesmo canto do contador de não lidas — esconde o contador
enquanto o mouse está sobre o item para os dois não se sobreporem. O :has
garante que isso só aconteça quando o botão existe (ou seja, para admin). */
.conv-item:hover:has(.conv-delete-btn) .conv-unread-count { visibility: hidden; }
/* Em telas de toque não há hover — mantém o botão sempre visível. */
@media (hover: none) {
.conv-delete-btn { opacity: 1; }
}
.conv-item.unread .conv-name { font-weight: 700; color: var(--color-text-1); }
.conv-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--color-bg);
border: 1.5px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
color: var(--color-text-2);
flex-shrink: 0;
position: relative;
}
.conv-online-dot {
position: absolute;
bottom: 1px;
right: 1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-green);
border: 2px solid var(--color-surface);
}
.conv-info { flex: 1; min-width: 0; }
.conv-name {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-preview {
font-size: 12.5px;
color: var(--color-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.conv-time { font-size: 11px; color: var(--color-text-3); flex-shrink: 0; }
/* Conversa com mensagem nova: hora em azul e contador do lado da prévia — o
par que o WhatsApp usa para dizer "é aqui que falta responder". */
.conv-item.unread .conv-time { color: var(--color-accent); font-weight: 700; }
.conv-unread-count {
min-width: 19px;
height: 19px;
padding: 0 6px;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-size: 10.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Chat area */
.chat-area {
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Barra de cima do chat: painel opaco sobre o papel de parede, como no
WhatsApp — o cabeçalho transparente deixava o desenho passar por trás do
nome do contato. */
.chat-header {
padding: 10px 16px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
background: rgba(255, 255, 255, .78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { font-size: 14.5px; font-weight: 700; }
.chat-header-status {
font-size: 12px;
color: var(--color-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Papel de parede do chat. É o mesmo desenho do tema escuro, invertido aqui
pelo blend `difference` contra um plano branco (branco − imagem = negativo)
e depois lavado por uma camada clara: sem essa lavagem o traço preto
disputaria a leitura com o texto das mensagens. */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px 30px 16px;
display: flex;
flex-direction: column-reverse;
gap: 2px;
overflow-anchor: none;
background-color: var(--chat-fundo);
background-image:
linear-gradient(rgba(233,238,247,.93), rgba(233,238,247,.93)),
linear-gradient(#fff, #fff),
url('../img/chat-bg-dark.jpg');
background-blend-mode: normal, difference, normal;
background-size: cover, cover, 620px auto;
background-position: center, center, center;
background-repeat: no-repeat, no-repeat, repeat;
}
/* Duas distâncias, como no WhatsApp: 12px entre blocos de quem fala e 2px
entre mensagens seguidas da mesma pessoa (o gap do container). */
.msg-row {
display: flex;
align-items: flex-end;
gap: 8px;
width: 100%;
margin-top: 10px;
}
.msg-row.agrupada { margin-top: 0; }
.msg-row.outgoing { flex-direction: row-reverse; }
.msg-content {
display: flex;
flex-direction: column;
gap: 3px;
max-width: 65%;
min-width: 0;
}
.msg-row.incoming .msg-content { align-items: flex-start; }
.msg-row.outgoing .msg-content { align-items: flex-end; }
.msg-bubble {
position: relative;
padding: 6px 9px 7px;
border-radius: 9px;
font-size: 13.5px;
line-height: 1.45;
word-break: break-word;
box-shadow: var(--chat-sombra);
}
/* Quebra de linha da mensagem é conteúdo, não sobra de formatação: o texto sai
do WhatsApp com parágrafos e chegava aqui num bloco só. Vale só para balão
de texto — no de áudio e no de imagem o espaço em branco do template
apareceria na tela. */
.msg-bubble.texto { white-space: pre-wrap; }
.msg-row.incoming .msg-bubble {
background: var(--chat-in-bg);
color: var(--chat-in-fg);
border-top-left-radius: 0;
border: none;
}
.msg-row.outgoing .msg-bubble {
background: var(--chat-out-bg);
color: var(--chat-out-fg);
border-top-right-radius: 0;
}
/* Rabinha do balão — o triângulo que aponta para quem falou. Só na primeira
mensagem do bloco: repetida em todas, a coluna vira uma serra. */
.msg-row .msg-bubble::after {
content: '';
position: absolute;
top: 0;
width: 8px;
height: 12px;
}
.msg-row.incoming .msg-bubble::after {
left: -7px;
background: var(--chat-in-bg);
clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.msg-row.outgoing .msg-bubble::after {
right: -7px;
background: var(--chat-out-bg);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.msg-row.agrupada .msg-bubble::after { display: none; }
.msg-row.agrupada.incoming .msg-bubble { border-top-left-radius: 9px; }
.msg-row.agrupada.outgoing .msg-bubble { border-top-right-radius: 9px; }
/* Hora e tique dentro do balão, no canto de baixo. O float é o que faz o texto
contornar: mensagem curta fica na mesma linha, longa empurra a hora para
baixo — exatamente o comportamento do WhatsApp. */
.msg-bubble .msg-time {
float: right;
display: inline-flex;
align-items: center;
gap: 3px;
margin: 7px -2px -2px 10px;
font-size: 10.5px;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--chat-meta);
}
.msg-row.outgoing .msg-bubble .msg-time { color: var(--chat-meta-out); }
/* Áudio e imagem não têm texto para contornar: a hora vira uma linha própria
embaixo (na imagem, sobre o canto, com fundo para se ler em qualquer foto). */
.msg-bubble.audio .msg-time {
float: none;
display: flex;
justify-content: flex-end;
margin: 2px 0 0;
}
/* Documento: uma faixa clicável dentro do balão, com ícone, nome e o tipo e
tamanho embaixo — o suficiente para decidir se vale baixar. */
.msg-doc {
display: flex;
align-items: center;
gap: 10px;
min-width: 210px;
max-width: 280px;
padding: 8px 10px;
border-radius: 7px;
background: rgba(13, 27, 42, .06);
color: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--transition);
}
.msg-doc:hover { background: rgba(13, 27, 42, .11); }
.msg-doc.sem-arquivo { cursor: default; opacity: .8; }
.msg-doc.sem-arquivo:hover { background: rgba(13, 27, 42, .06); }
[data-theme="dark"] .msg-doc { background: rgba(255, 255, 255, .09); }
[data-theme="dark"] .msg-doc:hover { background: rgba(255, 255, 255, .15); }
[data-theme="dark"] .msg-doc.sem-arquivo:hover { background: rgba(255, 255, 255, .09); }
.msg-doc > svg { flex-shrink: 0; opacity: .85; }
.msg-doc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.msg-doc-nome {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.msg-doc-sub { font-size: 11px; opacity: .65; }
.msg-bubble.documento .msg-time { float: right; margin-top: 4px; }
.msg-bubble.imagem { padding: 3px; }
.msg-bubble.imagem img {
max-width: 250px;
max-height: 320px;
border-radius: 7px;
display: block;
cursor: pointer;
}
.msg-bubble.imagem .msg-legenda { font-size: 13.5px; padding: 4px 6px 2px; }
.msg-bubble.imagem .msg-time {
position: absolute;
right: 8px;
bottom: 8px;
margin: 0;
padding: 2px 6px;
border-radius: 999px;
background: rgba(0,0,0,.45);
color: #fff;
}
.msg-bubble.imagem:has(.msg-legenda) .msg-time {
position: static;
float: right;
background: none;
color: var(--chat-meta-out);
margin: 3px 4px 2px 10px;
}
/* ---- Áudio dentro do balão ---- */
/* As cores vêm do balão que o contém, para o player pertencer à mensagem em
vez de parecer um controle do navegador colado por cima dela. */
.msg-bubble.audio { padding: 7px 9px 5px; }
/* O que foi dito, debaixo do player. Fica em segundo plano de propósito: o
áudio é a mensagem, a transcrição é a ajuda para quem não pode ouvir. */
.msg-bubble.audio .msg-legenda.transcricao {
font-size: 13px;
line-height: 1.45;
opacity: .82;
padding: 6px 2px 0;
margin-top: 5px;
border-top: 1px solid currentColor;
border-top-color: color-mix(in srgb, currentColor 18%, transparent);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.msg-row.incoming .msg-bubble.audio {
--aud-fg: #1d4ed8;
--aud-on: #ffffff;
--aud-line: rgba(29, 78, 216, .20);
--aud-dim: var(--chat-meta);
}
/* O balão enviado deixou de ser azul sólido e virou azul claro, como no
WhatsApp: o player que era branco sobre azul agora é azul sobre claro. */
.msg-row.outgoing .msg-bubble.audio {
--aud-fg: #1d4ed8;
--aud-on: #ffffff;
--aud-line: rgba(29, 78, 216, .26);
--aud-dim: var(--chat-meta-out);
}
.msg-row .msg-bubble.internal.audio {
--aud-fg: #6d28d9;
--aud-on: #ede9fe;
--aud-line: rgba(109, 40, 217, .25);
--aud-dim: rgba(76, 29, 149, .7);
}
/* No escuro os dois balões são fundos escuros: o botão passa a ser claro e a
trilha, branca a baixa opacidade. */
[data-theme="dark"] .msg-row.outgoing .msg-bubble.audio {
--aud-fg: #ffffff;
--aud-on: var(--chat-out-bg);
--aud-line: rgba(255, 255, 255, .26);
--aud-dim: var(--chat-meta-out);
}
[data-theme="dark"] .msg-row.incoming .msg-bubble.audio {
--aud-fg: var(--color-accent);
--aud-on: #06101f;
--aud-line: rgba(255, 255, 255, .16);
--aud-dim: var(--chat-meta);
}
/* A nota interna tem balão próprio (roxo escuro) também no tema escuro; o
player acompanha essa cor em vez da dos balões de mensagem. */
[data-theme="dark"] .msg-row .msg-bubble.internal.audio {
--aud-fg: #c4b5fd;
--aud-on: #241a41;
--aud-line: rgba(196, 181, 253, .28);
--aud-dim: rgba(221, 211, 255, .60);
}
.aud {
display: flex;
align-items: center;
gap: 11px;
width: 232px;
max-width: 100%;
}
.aud-el { display: none; }
.aud-play {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
padding: 0;
border: none;
border-radius: 50%;
background: var(--aud-fg);
color: var(--aud-on);
cursor: pointer;
transition: transform var(--transition);
}
.aud-play:hover { transform: scale(1.07); }
.aud-play:active { transform: scale(.96); }
.aud-play svg { width: 15px; height: 15px; }
/* O triângulo de play tem o peso à esquerda: sem o empurrão ele parece
descentralizado dentro do círculo. O de pausa é simétrico e não precisa. */
.aud:not(.playing) .aud-play svg { margin-left: 2px; }
.aud-mid { flex: 1; min-width: 0; }
/* `.aud .aud-seek` e não só `.aud-seek`: o tema escuro pinta o fundo de todo
input, e essa regra passava por cima da trilha, deixando uma faixa escura
no lugar da barra. */
.aud .aud-seek {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 12px; /* área de clique confortável; a trilha é fina */
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.aud-seek::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(to right,
var(--aud-fg) var(--p, 0%), var(--aud-line) var(--p, 0%));
}
.aud-seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px;
height: 11px;
margin-top: -3.5px;
border: none;
border-radius: 50%;
background: var(--aud-fg);
}
.aud-seek::-moz-range-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(to right,
var(--aud-fg) var(--p, 0%), var(--aud-line) var(--p, 0%));
}
.aud-seek::-moz-range-thumb {
width: 11px;
height: 11px;
border: none;
border-radius: 50%;
background: var(--aud-fg);
}
.aud-seek:focus-visible { outline: 2px solid var(--aud-fg); outline-offset: 3px; }
.aud-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 3px;
font-size: 10.5px;
font-variant-numeric: tabular-nums; /* o tempo não dança ao correr */
color: var(--aud-dim);
}
.aud-rate {
height: 16px;
padding: 0 6px;
border: 1px solid var(--aud-line);
border-radius: 999px;
background: none;
color: var(--aud-dim);
font-size: 9.5px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: color var(--transition), border-color var(--transition);
}
.aud-rate:hover { color: var(--aud-fg); border-color: var(--aud-fg); }
@media (prefers-reduced-motion: reduce) {
.aud-play, .aud-play:hover, .aud-play:active { transition: none; transform: none; }
}
/* Hora do registro de ligação, que não tem balão colorido para ficar dentro. */
.msg-time.fora {
font-size: 10px;
color: var(--color-text-3);
flex-shrink: 0;
margin-bottom: 2px;
}
/* Divisor de dia: uma pastilha centrada sobre o papel de parede, como no
WhatsApp — a linha horizontal atravessando a tela cortava a conversa. */
.chat-date-divider {
display: flex;
justify-content: center;
margin: 14px 0 4px;
}
.chat-date-divider span {
background: var(--chat-painel);
border-radius: 8px;
padding: 5px 12px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
color: var(--chat-meta);
box-shadow: var(--chat-sombra);
}
/* Coluna, não linha: o que vem antes da linha do campo — prévia da imagem e
barra de "respondendo a" — precisa ficar ACIMA dele. Em linha, esses blocos
viravam colunas vizinhas do campo e apareciam encolhidos no canto de baixo. */
.chat-input-area {
padding: 9px 16px 11px;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
flex-shrink: 0;
background: rgba(255, 255, 255, .78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
transition: background 0.2s, border-color 0.2s;
}
/* A linha de sempre: botões, campo, microfone e enviar. */
.chat-input-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.chat-input-area.internal-mode {
background: rgba(124, 58, 237, 0.05);
border-top-color: #7c3aed;
}
.chat-input-area.internal-mode .chat-input {
border-color: #7c3aed;
}
.chat-input-area.internal-mode .chat-input:focus {
border-color: #6d28d9;
}
.chat-input-area.internal-mode .chat-send-btn {
background: #7c3aed;
}
.chat-input-area.internal-mode .chat-send-btn:hover {
background: #6d28d9;
}
/* ── Botão "+" do campo de mensagem ──
Anexo, modelo e nota interna moram aqui dentro: são escolhas ocasionais que
ocupavam três botões permanentes ao lado do campo. */
.chat-mais { position: relative; flex-shrink: 0; }
.chat-mais-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 2px;
border: none;
border-radius: 50%;
background: none;
color: var(--color-text-2);
cursor: pointer;
transition: background var(--transition), color var(--transition), transform var(--transition);
}
.chat-mais-btn:hover { background: var(--color-bg-2); color: var(--color-text-1); }
.chat-mais-btn.aberto { background: var(--color-accent-lite); color: var(--color-accent); transform: rotate(45deg); }
/* Em nota interna o campo inteiro fica roxo; o "+" acompanha para o estado não
depender só da cor de fundo da barra. */
.chat-input-area.internal-mode .chat-mais-btn { color: #7c3aed; }
.chat-mais-menu {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
z-index: 320;
min-width: 236px;
padding: 6px;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.chat-mais-menu[hidden] { display: none; }
.chat-mais-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
border: none;
border-radius: 8px;
background: none;
color: var(--color-text-1);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.chat-mais-item:hover { background: var(--color-bg); }
.chat-mais-item i,
.chat-mais-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-3); }
.chat-mais-item:hover i,
.chat-mais-item:hover svg { color: var(--color-accent); }
/* A nota interna é a única opção com estado — o rótulo à direita diz se está
ligada sem precisar abrir o menu duas vezes para descobrir. */
.chat-mais-estado {
margin-left: auto;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-3);
}
.chat-mais-interno.active { color: #7c3aed; background: rgba(124,58,237,.08); }
.chat-mais-interno.active svg,
.chat-mais-interno.active .chat-mais-estado { color: #7c3aed; }
[data-theme="dark"] .chat-mais-interno.active { color: #c4b5fd; background: rgba(167,139,250,.14); }
[data-theme="dark"] .chat-mais-interno.active svg,
[data-theme="dark"] .chat-mais-interno.active .chat-mais-estado { color: #c4b5fd; }
/* Nota interna: continua lilás, porque não é mensagem — é recado entre quem
atende, e precisa ser reconhecível de longe no meio dos balões azuis. */
.msg-row .msg-bubble.internal {
background: #ede9fe;
color: #4c1d95;
border: 1px solid #c4b5fd;
}
.msg-row .msg-bubble.internal::after { background: #ede9fe; }
.msg-row .msg-bubble.internal .msg-time { color: rgba(76, 29, 149, .6); }
[data-theme="dark"] .msg-row .msg-bubble.internal {
background: #2b1f4d;
color: #ddd3ff;
border-color: rgba(167, 139, 250, .35);
}
[data-theme="dark"] .msg-row .msg-bubble.internal::after { background: #2b1f4d; }
[data-theme="dark"] .msg-row .msg-bubble.internal .msg-time { color: rgba(221, 211, 255, .6); }
.internal-note-label {
font-size: 10px;
font-weight: 700;
color: #7c3aed;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="dark"] .internal-note-label { color: #c4b5fd; }
/* ── Clara AI — mensagens do bot / automação ───────────────────
O balão da IA é o mesmo das mensagens enviadas: para o cliente aquilo saiu
daqui, e é assim que a conversa se lê. Quem separa é o rótulo dentro do
balão, no azul da marca — antes era um balão verde inteiro, que fazia
parecer um terceiro participante. */
.ai-label {
font-size: 10px;
font-weight: 700;
color: var(--color-accent-h);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 4px;
}
[data-theme="dark"] .ai-label { color: #8fc0ff; }
.mention-dropdown {
position: absolute;
bottom: 100%;
left: 16px;
right: 16px;
margin-bottom: 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
padding: 4px;
z-index: 300;
max-height: 180px;
overflow-y: auto;
}
.mention-opt {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: none;
background: none;
cursor: pointer;
border-radius: 6px;
font-size: 13px;
color: var(--color-text-1);
text-align: left;
}
.mention-opt:hover { background: var(--color-bg); }
.mention-opt.slash-active { background: var(--color-accent-lite); }
/* Campo em cápsula, sem moldura, como o do WhatsApp: o que delimita é o fundo,
não uma borda de formulário. */
.chat-input {
flex: 1;
border: 1px solid transparent;
border-radius: 21px;
padding: 10px 16px;
font-size: 13.5px;
line-height: 1.4;
color: var(--color-text-1);
background: var(--chat-painel);
box-shadow: var(--chat-sombra);
resize: none;
outline: none;
transition: border-color var(--transition);
max-height: 120px;
min-height: 42px;
}
.chat-input:focus { border-color: var(--color-accent); }
.chat-input::placeholder { color: var(--color-text-3); }
[data-theme="dark"] .chat-input { background: var(--chat-painel); }
.chat-send-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition), transform var(--transition);
}
.chat-send-btn:hover { background: var(--color-accent-h); transform: scale(1.05); }
.chat-send-btn:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
.chat-send-btn, .chat-send-btn:hover, .chat-send-btn:active { transition: none; transform: none; }
}
/* Info panel — proprietário e seguidores */
.conv-info-panel {
border-left: 1px solid var(--color-border);
display: flex;
flex-direction: row;
overflow: hidden;
background: var(--color-surface);
}
.conv-info-content {
flex: 1;
min-width: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.conv-info-rail {
width: 52px;
flex-shrink: 0;
border-left: 1px solid var(--color-border);
background: var(--color-bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0;
gap: 4px;
}
.conv-info-tab {
width: 38px;
height: 38px;
border-radius: 10px;
border: none;
background: none;
color: var(--color-text-3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.15s, color 0.15s;
}
.conv-info-tab:hover { background: var(--color-bg-2); color: var(--color-text-1); }
.conv-info-tab.active { background: var(--color-accent-lite); color: var(--color-accent); }
.conv-info-tab .conv-info-soon-dot {
position: absolute;
top: 5px;
right: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-red);
}
.conv-info-section {
padding: 16px;
border-bottom: 1px solid var(--color-border);
}
.conv-info-section-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-3);
margin-bottom: 10px;
}
/* Interruptor da IA por lead, no card do contato em Conversas. A linha inteira
é o label: o alvo de clique é a frase, não só os 40px do interruptor. */
.conv-ia-linha {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
cursor: pointer;
}
.conv-ia-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.conv-ia-titulo {
font-size: 13px;
font-weight: 600;
color: var(--color-text-1);
}
.conv-ia-nota {
font-size: 11px;
line-height: 1.45;
color: var(--color-text-3);
}
.conv-ia-linha .toggle { margin-top: 2px; }
/* Leitura da conversa pela IA: botão, fase apurada e resumo. */
.conv-leitura-btn { margin-top: 12px; width: 100%; justify-content: center; gap: 6px; }
.conv-esquecer {
margin-top: 12px;
width: 100%;
justify-content: center;
gap: 6px;
color: var(--color-red);
}
.conv-esquecer:hover { background: var(--color-red-lite); }
.conv-leitura {
margin-top: 12px;
padding: 10px 11px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
}
.conv-leitura-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 7px;
}
.conv-leitura-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.conv-leitura-acao {
border: none;
background: none;
cursor: pointer;
color: var(--color-text-3);
padding: 3px 4px;
border-radius: 4px;
line-height: 1;
}
.conv-leitura-acao:hover { background: var(--color-border-2); color: var(--color-text-1); }
.conv-leitura-texto {
font-size: 12px;
line-height: 1.55;
color: var(--color-text-2);
white-space: pre-wrap;
margin-bottom: 5px;
}
.conv-leitura.lendo { opacity: .6; }
/* O que a IA sabe sobre a pessoa, em etiquetas. */
.conv-fatos {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}
.conv-fato {
display: inline-flex;
align-items: baseline;
gap: 5px;
max-width: 100%;
padding: 2px 8px;
border: 1px solid var(--color-border);
border-radius: 99px;
font-size: 11px;
line-height: 1.6;
}
.conv-fato-chave { color: var(--color-text-3); flex-shrink: 0; }
.conv-fato-valor {
color: var(--color-text-1);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.conv-leitura-spin {
display: inline-block;
width: 11px;
height: 11px;
border: 2px solid var(--color-border-2);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* A fase do lead. As cores seguem a temperatura da negociação: cinza no
começo, azul enquanto se investiga, âmbar quando trava, verde quando anda. */
.ia-fase {
display: inline-block;
padding: 2px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
background: var(--color-border-2);
color: var(--color-text-2);
}
.ia-fase-diagnostico,
.ia-fase-efeito { background: var(--color-blue-lite); color: var(--color-blue); }
.ia-fase-fechamento { background: var(--color-green-lite); color: var(--color-green); }
.ia-fase-fechado { background: var(--color-green); color: #fff; }
.ia-fase-objecao { background: rgba(245,158,11,.15); color: #b45309; }
.ia-fase-sem_interesse { background: var(--color-red-lite); color: var(--color-red); }
.ia-fase-suporte { background: rgba(139,92,246,.12); color: #7c3aed; }
.conv-ia-linha input:disabled + .toggle-slider { opacity: .5; cursor: progress; }
.assign-user-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: var(--radius-sm);
}
.assign-user-row:hover { background: var(--color-bg); }
.assign-mini-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-accent-lite);
color: var(--color-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
/* ======================================
FUNNELS PAGE
====================================== */
/* Filtro de status do funil (Abertos | Ganhos | Perdidos) */
.funnel-status-filter {
display: inline-flex;
gap: 2px;
background: var(--color-bg-2);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 3px;
}
.funnel-status-btn {
padding: 6px 12px;
border: none;
background: none;
cursor: pointer;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-3);
transition: background var(--transition), color var(--transition);
}
.funnel-status-btn:hover:not(.active) { color: var(--color-text-1); }
.funnel-status-btn.active { background: var(--color-surface); color: var(--color-text-1); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.funnel-pipeline {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 12px;
min-height: 500px;
align-items: flex-start;
}
.funnel-column {
min-width: 260px;
width: 260px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0;
background: var(--color-surface-2);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
}
.funnel-col-header {
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.funnel-col-title {
font-size: 13px;
font-weight: 700;
color: var(--color-text-1);
display: flex;
align-items: center;
gap: 8px;
}
.funnel-col-count {
font-size: 11px;
font-weight: 600;
background: var(--color-border);
color: var(--color-text-3);
padding: 2px 8px;
border-radius: 99px;
}
.funnel-col-sum {
font-size: 11px;
color: var(--color-text-3);
font-weight: 500;
}
.funnel-col-cards {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
flex: 1;
overflow-y: auto;
max-height: 460px;
}
/* Drag handle icon inside each card */
.funnel-drag-handle {
color: var(--color-text-3);
opacity: 0.25;
cursor: grab;
transition: opacity 0.15s;
flex-shrink: 0;
}
.funnel-card:hover .funnel-drag-handle { opacity: 0.65; }
/* Card being dragged */
.funnel-card.is-dragging {
opacity: 0.35;
cursor: grabbing;
}
/* Column highlighted during drag-over */
.funnel-col-cards.drag-over {
background: rgba(59,130,246,.05);
outline: 2px dashed #3b82f6;
outline-offset: -2px;
border-radius: var(--radius-md);
}
/* Empty column drop zone */
.funnel-empty-drop {
font-size: 12px;
color: var(--color-text-3);
text-align: center;
padding: 18px;
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-md);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.funnel-empty-drop.drag-over {
background: rgba(59,130,246,.06);
border-color: #3b82f6;
color: #3b82f6;
}
.funnel-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 14px;
cursor: grab;
transition: box-shadow var(--transition), border-color var(--transition);
}
.funnel-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.funnel-card-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 4px;
}
.funnel-card-value {
font-size: 12px;
font-weight: 700;
color: var(--color-text-1);
margin-bottom: 8px;
}
.funnel-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.funnel-card-source {
font-size: 11px;
color: var(--color-text-3);
}
.funnel-add-col {
min-width: 52px;
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
border: 2px dashed var(--color-border-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-3);
cursor: pointer;
transition: border-color var(--transition), color var(--transition);
align-self: flex-start;
margin-top: 0;
}
.funnel-add-col:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* ======================================
AI AGENTS PAGE
====================================== */
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.agent-card {
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow var(--transition), border-color var(--transition);
}
.agent-card:hover { box-shadow: var(--shadow-md); }
.agent-card.active { border-color: var(--color-accent); }
.agent-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.agent-icon {
width: 46px;
height: 46px;
border-radius: var(--radius-md);
background: var(--color-accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.agent-name {
font-size: 14px;
font-weight: 700;
color: var(--color-text-1);
}
.agent-type {
font-size: 11px;
color: var(--color-text-3);
margin-top: 2px;
}
.agent-description {
font-size: 12px;
color: var(--color-text-3);
line-height: 1.6;
}
.agent-stats {
display: flex;
gap: 16px;
}
.agent-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.agent-stat-val {
font-size: 16px;
font-weight: 800;
color: var(--color-text-1);
}
.agent-stat-lbl {
font-size: 10px;
color: var(--color-text-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.agent-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.agent-status-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-3);
}
.agent-card.active .agent-status-label { color: var(--color-green); }
/* ======================================
AI DASHBOARD PAGE
====================================== */
.ai-metrics-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.ai-chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.ai-log-table tbody tr td:first-child { font-family: monospace; font-size: 11px; }
/* ======================================
SETTINGS PAGE
====================================== */
.settings-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
}
.settings-sidebar {
display: flex;
flex-direction: column;
gap: 2px;
}
.settings-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 500;
color: var(--color-text-2);
transition: background var(--transition), color var(--transition);
cursor: pointer;
}
.settings-nav-item:hover { background: var(--color-bg); color: var(--color-text-1); }
.settings-nav-item.active { background: var(--color-accent); color: #fff; }
.stg-admin-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
padding: 2px 6px;
border-radius: 99px;
background: rgba(139,92,246,.15);
color: #7c3aed;
flex-shrink: 0;
}
.settings-nav-item.active .stg-admin-badge {
background: rgba(255,255,255,.2);
color: #fff;
}
.settings-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.settings-label {
font-size: 12px;
font-weight: 600;
color: var(--color-text-2);
}
.settings-input {
padding: 9px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--color-text-1);
outline: none;
transition: border-color var(--transition);
background: var(--color-surface);
}
.settings-input:focus { border-color: var(--color-accent); }
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info .label { font-size: 13px; font-weight: 600; color: var(--color-text-1); }
.settings-row-info .desc { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
/* ======================================
INTEGRATIONS PAGE
====================================== */
.integration-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.integration-card {
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
transition: box-shadow var(--transition);
}
.integration-card:hover { box-shadow: var(--shadow-md); }
.integration-card.connected { border-color: var(--color-green); }
.integration-card.integration-soon { opacity: 0.55; }
.integration-card.integration-soon:hover { box-shadow: none; opacity: 0.7; }
/* Integração que já funciona: o card inteiro leva para onde ela é
configurada, então precisa parecer clicável. */
.integration-card.integration-live { cursor: pointer; }
.integration-card.integration-live:hover { border-color: var(--color-accent); }
.integration-card.integration-live:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.integration-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.integration-name {
font-size: 14px;
font-weight: 700;
color: var(--color-text-1);
}
.integration-desc {
font-size: 12px;
color: var(--color-text-3);
line-height: 1.5;
}
.integration-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
}
/* ======================================
EMPTY STATE
====================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
text-align: center;
gap: 12px;
}
.empty-state-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: var(--color-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-3);
margin-bottom: 4px;
}
.empty-state-title {
font-size: 15px;
font-weight: 700;
color: var(--color-text-1);
}
.empty-state-text {
font-size: 13px;
color: var(--color-text-3);
max-width: 300px;
line-height: 1.6;
}
/* ======================================
LOADING SKELETON
====================================== */
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 800px 100%;
animation: shimmer 1.4s infinite;
border-radius: var(--radius-sm);
}
/* ======================================
RESPONSIVE
====================================== */
@media (max-width: 1100px) {
.dashboard-stats { grid-template-columns: repeat(2, 1fr); }
.dashboard-charts { grid-template-columns: 1fr; }
.ai-metrics-row { grid-template-columns: repeat(2, 1fr); }
.ai-chart-row { grid-template-columns: 1fr; }
}
/* ======================================
SUBACCOUNT PICKER
====================================== */
#subPickerOverlay {
overflow-y: auto;
}
@keyframes subcard-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.sub-picker-card {
animation: subcard-in .28s ease both;
}
.sub-picker-card:nth-child(1) { animation-delay: .05s; }
.sub-picker-card:nth-child(2) { animation-delay: .10s; }
.sub-picker-card:nth-child(3) { animation-delay: .15s; }
.sub-picker-card:nth-child(4) { animation-delay: .20s; }
.sub-picker-card:nth-child(5) { animation-delay: .25s; }
.sub-picker-card:nth-child(6) { animation-delay: .30s; }
#btnPickerCreate:hover {
border-color: var(--color-accent) !important;
color: var(--color-accent) !important;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
/* ====================================== */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -100%;
transition: left var(--transition);
z-index: 200;
}
.sidebar.mobile-open { left: 0; }
.mobile-menu-btn { display: flex; }
.main-wrapper { width: 100%; }
.page-content { padding: 16px; }
.topbar { padding: 0 16px; }
.search-wrapper { display: none; }
.conversations-layout { grid-template-columns: 1fr; }
.page-content:has(.conversations-layout) { padding: 12px 16px; }
.conv-sidebar { display: none; }
.conv-info-panel { display: none; }
.settings-layout { grid-template-columns: 1fr; }
.dashboard-stats { grid-template-columns: 1fr 1fr; }
}
/* ======================================
DASHBOARD TABS
====================================== */
.dash-tabs {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 20px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 0;
flex-wrap: wrap;
}
.dash-tab {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-3);
cursor: pointer;
border: none;
background: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.dash-tab:hover { color: var(--color-text-1); }
.dash-tab.active { color: var(--color-text-1); border-bottom-color: var(--color-text-1); }
.dash-tab-new {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-3);
cursor: pointer;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
background: none;
margin-left: 6px;
transition: color var(--transition), border-color var(--transition);
}
.dash-tab-new:hover { color: var(--color-text-1); border-color: var(--color-border-2); }
/* ======================================
CUSTOM DASHBOARD TOOLBAR
====================================== */
.dash-custom-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 18px;
gap: 12px;
}
/* Loading state */
.dash-load-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 24px;
color: var(--color-text-3);
font-size: 13px;
}
.dash-load-spin {
width: 28px;
height: 28px;
border: 3px solid var(--color-border);
border-top-color: var(--color-text-1);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* Empty dashboard */
.dash-empty-widgets {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
gap: 10px;
text-align: center;
}
.dash-empty-icon {
width: 60px;
height: 60px;
border-radius: var(--radius-lg);
background: var(--color-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-3);
margin-bottom: 4px;
}
.dash-empty-title {
font-size: 15px;
font-weight: 700;
color: var(--color-text-1);
}
.dash-empty-text {
font-size: 13px;
color: var(--color-text-3);
max-width: 320px;
line-height: 1.6;
}
/* ======================================
WIDGET CANVAS — posicionamento livre
====================================== */
/* Canvas de posição livre: cada widget é absolutamente posicionado dentro
dele (left/top/width em px, vindos de pos_x/pos_y/width_px), permitindo
arrastar para qualquer lugar e deixar espaços vazios entre widgets. A
altura mínima é recalculada em JS (_growCanvasIfNeeded) conforme os
widgets são movidos/redimensionados perto da borda inferior. */
.widget-canvas {
position: relative;
width: 100%;
overflow-x: auto;
}
.widget-card {
position: absolute;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow var(--transition);
}
.widget-card:hover { box-shadow: var(--shadow-sm); }
.widget-card.widget-resizing { transition: none; box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-md); }
.widget-card.widget-dragging {
transition: none;
z-index: 50;
box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-lg);
opacity: 0.95;
}
/* Aplicada só durante "Organizar automaticamente" — anima o encaixe nas
novas posições. Não fica ligada durante o arrasto manual (deixaria o
card "atrasado" em relação ao mouse). */
.widget-card.widget-arranging {
transition: left 0.28s ease, top 0.28s ease;
}
/* Alça de redimensionamento — no canto inferior direito, arraste na
diagonal para ajustar largura e altura (ambas livres, em px) ao
mesmo tempo. */
.widget-resize-handle {
position: absolute;
right: 0;
bottom: 0;
width: 18px;
height: 18px;
cursor: nwse-resize;
z-index: 4;
user-select: none;
}
.widget-resize-handle::after {
content: '';
position: absolute;
right: 4px;
bottom: 4px;
width: 9px;
height: 9px;
border-right: 2px solid var(--color-border-2);
border-bottom: 2px solid var(--color-border-2);
border-radius: 0 0 2px 0;
opacity: 0;
transition: opacity var(--transition), border-color var(--transition);
}
.widget-card:hover .widget-resize-handle::after { opacity: 1; }
.widget-resize-handle:hover::after,
.widget-card.widget-resizing .widget-resize-handle::after {
border-color: var(--color-accent);
opacity: 1;
}
/* Enquanto arrasta (mover ou redimensionar), impede seleção de
texto/conteúdo do card inteiro — sem isso, um drag real (diferente de
eventos sintéticos de teste) pode iniciar seleção nativa do navegador
e fazer o gesto "não colar". */
.widget-card.widget-resizing, .widget-card.widget-resizing *,
.widget-card.widget-dragging, .widget-card.widget-dragging * {
user-select: none;
}
.widget-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 14px 9px;
border-bottom: 1px solid var(--color-border);
gap: 8px;
cursor: move;
}
.widget-card-meta {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.widget-card-title {
font-size: 12px;
font-weight: 600;
color: var(--color-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
}
/* Mensagem salva no CRM que não chegou ao contato. */
.msg-failed {
display: flex;
align-items: center;
gap: 4px;
margin-top: 3px;
font-size: 11px;
font-weight: 500;
color: var(--color-red);
}
.widget-menu-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: var(--radius-sm);
color: var(--color-text-3);
transition: color var(--transition), background var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.widget-menu-btn:hover { color: var(--color-text-1); background: var(--color-bg); }
/* Popup do menu "..." — vive no (position:fixed) porque o card tem
overflow:hidden e cortaria um dropdown posicionado dentro dele. */
.widget-menu-popup {
position: fixed;
z-index: 3500;
min-width: 168px;
padding: 5px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: 1px;
}
.widget-menu-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 10px;
background: none;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
font-family: inherit;
color: var(--color-text-2);
text-align: left;
transition: color var(--transition), background var(--transition);
}
.widget-menu-item:hover { background: var(--color-bg); color: var(--color-text-1); }
.widget-menu-item--danger { color: var(--color-red); }
.widget-menu-item--danger:hover { background: var(--color-red-lite); color: var(--color-red); }
.widget-menu-sep {
height: 1px;
background: var(--color-border);
margin: 4px 2px;
}
.widget-card-body {
padding: 16px 14px;
box-sizing: border-box;
/* --widget-h é setada inline (px) quando o widget tem altura
customizada pelo redimensionamento; sem ela, altura automática. */
min-height: var(--widget-h, auto);
/* Clicável: abre a lista dos registros que o widget mede. */
cursor: pointer;
}
/* ── Drill-down: lista dos registros medidos pelo widget ── */
.wrec-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.wrec-dialog {
background: var(--color-surface);
border-radius: 14px;
width: 900px;
max-width: 100%;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0,0,0,.3);
}
.wrec-header {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.wrec-title { font-size: 15px; font-weight: 700; color: var(--color-text-1); }
.wrec-sub { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.wrec-close {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-3);
padding: 6px;
border-radius: var(--radius-sm);
display: flex;
flex-shrink: 0;
transition: color var(--transition), background var(--transition);
}
.wrec-close:hover { color: var(--color-text-1); background: var(--color-bg); }
/* A tabela rola dentro do próprio container (nunca a página inteira). */
.wrec-body {
overflow: auto;
padding: 0 4px 4px;
flex: 1;
min-height: 0;
}
.wrec-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.wrec-table th {
position: sticky;
top: 0;
background: var(--color-surface);
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-3);
padding: 10px 12px;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.wrec-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-2);
white-space: nowrap;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
}
.wrec-table tbody tr:hover td { background: var(--color-bg); }
.wrec-table tbody tr:last-child td { border-bottom: none; }
/* KPI */
.widget-kpi {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 0;
}
.widget-kpi-value {
font-size: 34px;
font-weight: 800;
color: var(--color-text-1);
line-height: 1;
}
.widget-kpi-label {
font-size: 11px;
color: var(--color-text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Chart */
.widget-chart-wrap {
position: relative;
height: calc(var(--widget-h, 232px) - 32px);
}
/* Table */
.widget-table-wrap {
overflow-x: auto;
}
.widget-table {
width: 100%;
font-size: 12px;
border-collapse: collapse;
}
.widget-table th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-3);
padding: 4px 6px 6px;
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.widget-table td {
padding: 6px 6px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-2);
}
.widget-table tr:last-child td { border-bottom: none; }
/* Error / empty states inside widget */
.widget-error,
.widget-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px;
font-size: 12px;
color: var(--color-text-3);
}
.widget-error { color: var(--color-red); }
/* ======================================
WIDGET BUILDER MODAL
====================================== */
.wbuild-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.wbuild-section-title {
font-size: 11px;
font-weight: 700;
color: var(--color-text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.wbuild-btn-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.wbuild-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-2);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.wbuild-btn:hover { border-color: var(--color-border-2); color: var(--color-text-1); }
.wbuild-btn.active {
border-color: var(--color-text-1);
background: var(--color-text-1);
color: var(--color-text-inv);
}
/* Condition rows */
.wbuild-cond-row {
display: flex;
align-items: flex-start;
gap: 6px;
flex-wrap: wrap;
padding: 8px;
background: var(--color-bg);
border-radius: var(--radius-sm);
margin-bottom: 6px;
}
.wbuild-cond-remove {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 7px;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--color-text-3);
transition: color var(--transition), border-color var(--transition);
align-self: center;
}
.wbuild-cond-remove:hover { color: var(--color-red); border-color: var(--color-red); }
.wbuild-add-cond {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
background: none;
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--color-text-3);
transition: color var(--transition), border-color var(--transition);
}
.wbuild-add-cond:hover { color: var(--color-text-1); border-color: var(--color-border-2); }
.wbuild-multicheck {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
max-height: 130px;
overflow-y: auto;
flex: 1;
min-width: 160px;
}
.wbuild-check-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--color-text-2);
cursor: pointer;
white-space: nowrap;
}
.wbuild-check-item input { cursor: pointer; }
/* ── Pillar picker (widget builder step 1) ─────────────────── */
.wpillar-picker {
padding: 36px 28px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.wpillar-picker-hint {
font-size: 13px;
color: var(--color-text-3);
text-align: center;
margin: 0;
}
.wpillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
width: 100%;
}
.wpillar-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
padding: 30px 16px 22px;
border-radius: 14px;
border: 2px solid var(--color-border);
background: var(--color-bg);
cursor: pointer;
text-align: center;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.wpillar-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.wpillar-card--funnels:hover { border-color: #8B5CF6; background: rgba(139,92,246,.06); }
.wpillar-card--contacts:hover { border-color: #3B82F6; background: rgba(59,130,246,.06); }
.wpillar-card--conversations:hover { border-color: #10B981; background: rgba(16,185,129,.06); }
.wpillar-icon-wrap {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.18s ease;
}
.wpillar-card:hover .wpillar-icon-wrap { transform: scale(1.1); }
.wpillar-icon-wrap--funnels { background: rgba(139,92,246,.14); color: #8B5CF6; }
.wpillar-icon-wrap--contacts { background: rgba(59,130,246,.14); color: #3B82F6; }
.wpillar-icon-wrap--conversations { background: rgba(16,185,129,.14); color: #10B981; }
.wpillar-label {
font-size: 15px;
font-weight: 700;
color: var(--color-text-1);
}
.wpillar-desc {
font-size: 12px;
color: var(--color-text-3);
line-height: 1.5;
}
.wpillar-arrow {
position: absolute;
bottom: 12px;
right: 14px;
color: var(--color-text-3);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.wpillar-card:hover .wpillar-arrow { opacity: 1; transform: translateX(0); }
.wpillar-card--funnels:hover .wpillar-arrow { color: #8B5CF6; }
.wpillar-card--contacts:hover .wpillar-arrow { color: #3B82F6; }
.wpillar-card--conversations:hover .wpillar-arrow { color: #10B981; }
/* Pillar badge (form step, new widget) */
.wpillar-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 1px solid;
}
.wpillar-badge--funnels { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #8B5CF6; }
.wpillar-badge--contacts { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #3B82F6; }
.wpillar-badge--conversations { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #10B981; }
@media (max-width: 520px) {
.wpillar-grid { grid-template-columns: 1fr; }
}
/* AND/OR connector toggle */
.wbuild-conn-toggle {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
align-self: center;
}
.wbuild-conn-btn {
padding: 2px 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-3);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.wbuild-conn-btn:hover { border-color: var(--color-border-2); color: var(--color-text-2); }
.wbuild-conn-btn.active {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
/* OR separator between condition groups */
.wbuild-or-sep {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 2px;
color: var(--color-text-3);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
}
.wbuild-or-sep::before,
.wbuild-or-sep::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
@media (max-width: 600px) {
.dash-tabs { gap: 0; }
.dash-tab { padding: 6px 12px; font-size: 12px; }
}
/* ======================================
AUTOMATIONS — visual workflow builder
====================================== */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.auto-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.auto-card-title {
font-size: 14px;
font-weight: 700;
color: var(--color-text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auto-trigger-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 99px;
font-size: 11px;
font-weight: 600;
background: rgba(168, 85, 247, .12);
color: #a855f7;
width: fit-content;
}
.auto-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--color-text-3);
}
.auto-card-actions {
display: flex;
align-items: center;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--color-border);
}
/* ======================================
CONFIGURAÇÕES DE CONVERSA
====================================== */
.cvcfg { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cvcfg-card { padding: 0; overflow: hidden; }
.cvcfg-head {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 18px;
}
.cvcfg-title { font-size: 15px; font-weight: 700; color: var(--color-text-1); }
.cvcfg-sub {
font-size: 12.5px;
color: var(--color-text-3);
line-height: 1.45;
margin-top: 3px;
max-width: 58ch;
}
.cvcfg-head .toggle { flex-shrink: 0; margin-left: auto; }
.cvcfg-body { padding: 0 18px 18px; border-top: 1px solid var(--color-border); padding-top: 14px; }
/* padding vira 0 quando escondido — o border-top não pode sobrar sozinho */
.cvcfg-body[hidden] { display: none; }
.cvcfg-card[hidden] { display: none; }
.cvcfg-label {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
color: var(--color-text-3);
margin-bottom: 8px;
}
.cvcfg-users { display: flex; flex-direction: column; gap: 4px; }
.cvcfg-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.cvcfg-user:hover { background: var(--color-surface-2); }
.cvcfg-user.on { border-color: var(--color-accent); background: var(--color-accent-lite); }
.cvcfg-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-bg-2);
font-size: 11px;
font-weight: 700;
color: var(--color-text-2);
}
.cvcfg-user-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text-1); }
.cvcfg-pct { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--color-text-3); }
.cvcfg-pct-input {
width: 58px;
padding: 5px 7px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-1);
font-size: 12.5px;
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
}
.cvcfg-pct-input:disabled { opacity: .4; }
.cvcfg-sum { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--color-yellow); }
.cvcfg-sum.ok { color: var(--color-green); }
.cvcfg-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cvcfg-time-in { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-3); }
.cvcfg-time-in input {
width: 76px;
padding: 7px 9px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-1);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cvcfg-hint { font-size: 11.5px; color: var(--color-text-3); line-height: 1.4; margin-top: 5px; }
.cvcfg-note {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 14px;
font-size: 12px;
color: var(--color-text-3);
line-height: 1.45;
}
/* Piscada de chegada: quem veio de Integrações precisa achar o bloco do
WhatsApp no meio da página sem procurar. */
.cvcfg-destaque {
animation: cvcfgDestaque 1.6s ease-out;
}
@keyframes cvcfgDestaque {
0%, 60% { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-md); }
100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.cvcfg-destaque { animation: none; box-shadow: 0 0 0 2px var(--color-accent); }
}
.cvcfg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cvcfg-msg { font-size: 12.5px; font-weight: 600; }
.cvcfg-msg.ok { color: var(--color-green); }
.cvcfg-msg.erro { color: var(--color-red); }
/* ── Aviso vermelho da fila ── */
.conv-queue-alert {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 20px;
flex-shrink: 0;
background: var(--color-red-lite);
color: #991b1b;
border-bottom: 1px solid var(--color-red);
font-size: 12.5px;
font-weight: 600;
}
[data-theme="dark"] .conv-queue-alert { background: rgba(239,68,68,.14); color: #fca5a5; }
.conv-queue-alert strong { font-variant-numeric: tabular-nums; }
.conv-queue-chip {
padding: 1px 6px;
border-radius: 999px;
background: var(--color-red);
color: #fff;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
/* Pulsa devagar: é para chamar o olho sem virar pisca-pisca. */
animation: convQueuePulse 1.6s ease-in-out infinite;
}
@keyframes convQueuePulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .conv-queue-chip { animation: none; } }
/* ======================================
AGENTES DE IA (aba de Automações)
====================================== */
.ai-agent-list { display: flex; flex-direction: column; gap: 10px; }
.ai-agent-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color var(--transition), opacity var(--transition);
}
.ai-agent-card:hover { border-color: var(--color-border-2); }
/* Desligada ainda se lê — só perde a cor, para a lista mostrar de relance
o que está no ar e o que não está. */
.ai-agent-card.off { opacity: .62; }
.ai-agent-card.off .ai-agent-mark { filter: grayscale(1); }
.ai-agent-mark {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 12px;
color: #fff;
}
.ai-agent-mark.nexus { background: linear-gradient(135deg, #3b82f6 0%, #a855f7 100%); }
.ai-agent-mark.flow { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); }
.ai-agent-body { flex: 1; min-width: 0; }
.ai-agent-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ai-agent-name {
font-size: 14px;
font-weight: 700;
color: var(--color-text-1);
border-radius: 5px;
padding: 1px 3px;
margin-left: -3px;
}
.ai-agent-name.editing {
outline: 2px solid var(--color-accent);
background: var(--color-surface-2);
}
.ai-agent-rename {
display: inline-flex;
padding: 3px;
border: none;
border-radius: 5px;
background: none;
color: var(--color-text-3);
cursor: pointer;
opacity: 0;
transition: opacity var(--transition), color var(--transition);
}
.ai-agent-card:hover .ai-agent-rename { opacity: 1; }
.ai-agent-rename:hover { color: var(--color-accent); background: var(--color-surface-2); }
@media (hover: none) { .ai-agent-rename { opacity: 1; } }
.ai-agent-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
}
.ai-agent-badge.nexus { background: var(--color-accent-lite); color: var(--color-accent); }
.ai-agent-badge.flow { background: var(--color-purple-lite); color: var(--color-purple); }
.ai-agent-state { font-size: 11px; font-weight: 600; margin-left: auto; }
.ai-agent-state.on { color: var(--color-green); }
.ai-agent-state.off { color: var(--color-text-3); }
.ai-agent-desc {
font-size: 12.5px;
color: var(--color-text-3);
line-height: 1.45;
margin-top: 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ai-agent-meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 7px;
font-size: 11.5px;
color: var(--color-text-3);
}
.ai-agent-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ai-agent-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ai-agent-empty {
display: flex;
align-items: center;
gap: 14px;
padding: 22px;
border: 1px dashed var(--color-border-2);
border-radius: var(--radius-md);
color: var(--color-text-3);
}
.ai-agent-empty strong { font-size: 13px; color: var(--color-text-2); }
.ai-agent-empty p { font-size: 12.5px; margin-top: 2px; }
/* Caixa de desligamento do Nexus — o aviso é o conteúdo principal, não um
detalhe de rodapé. */
.ai-power-box { max-width: 460px; }
.ai-power-warn {
display: flex;
gap: 12px;
padding: 14px;
border: 1px solid var(--color-yellow);
border-radius: var(--radius-md);
background: var(--color-yellow-lite);
color: #7c4a03;
}
[data-theme="dark"] .ai-power-warn { background: rgba(245,158,11,.10); color: #f5c56b; }
.ai-power-warn strong { font-size: 13px; }
.ai-power-warn p { font-size: 12.5px; margin-top: 4px; }
.ai-power-warn ul { margin: 6px 0 0 16px; font-size: 12.5px; line-height: 1.5; }
.ai-power-box code {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 1px 5px;
font-weight: 700;
}
.btn.ai-power-go { background: var(--color-red); border-color: var(--color-red); }
.btn.ai-power-go:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn.ai-power-go:disabled { opacity: .45; cursor: not-allowed; }
/* ── Builder shell — "workflow studio", inspirado em diagramas de
arquitetura: nós e conexões com glow em azul/laranja/vermelho/roxo.
Os tokens ficam no :root, e não em .auto-builder, porque o menu
"+ Adicionar" é montado no (para não ser cortado pelo canvas) e
precisa das mesmas cores. ─────────────────────────────────────────── */
:root {
--ab-bg: #060810;
--ab-bg-2: #0a0d18;
--ab-surface: #0e1220;
--ab-surface-2: #131829;
--ab-border: #1e2438;
--ab-border-2: #2a3150;
--ab-text-1: #f1f3fa;
--ab-text-2: #aab0cc;
--ab-text-3: #6b7292;
--ab-blue: #3b82f6;
--ab-blue-glow: rgba(59,130,246,.5);
--ab-orange: #f97316;
--ab-orange-glow:rgba(249,115,22,.5);
--ab-red: #ef4444;
--ab-red-glow: rgba(239,68,68,.5);
--ab-purple: #a855f7;
--ab-purple-glow:rgba(168,85,247,.5);
/* Cores que antes estavam soltas nas regras. Viraram tokens porque são
justamente as que precisam mudar entre o tema claro e o escuro. */
--ab-dot: rgba(255,255,255,.10); /* grade de pontos do canvas */
--ab-edge: #4f5680; /* linha das conexões */
--ab-edge-glow: rgba(120,140,255,.35);
--ab-hover: #3a4166; /* borda do nó sob o mouse */
--ab-hover-soft: rgba(255,255,255,.06); /* fundo de item de lista */
--ab-port-hover: #fff; /* ponta do If/Else sob o mouse */
--ab-shadow: 0 6px 20px rgba(0,0,0,.35);
--ab-shadow-lg: 0 16px 40px rgba(0,0,0,.5);
--ab-halos:
radial-gradient(38vw 32vw at 12% 8%, rgba(168,85,247,.10) 0%, transparent 65%),
radial-gradient(34vw 30vw at 88% 20%, rgba(59,130,246,.12) 0%, transparent 65%),
radial-gradient(32vw 30vw at 20% 95%, rgba(249,115,22,.07) 0%, transparent 65%),
radial-gradient(30vw 28vw at 95% 90%, rgba(239,68,68,.07) 0%, transparent 65%);
}
/* No tema claro o estúdio acompanha o resto do CRM: papel claro, tinta
escura. As cores dos nós continuam as mesmas — são elas que identificam
cada tipo de node — só perdem o brilho, que só existe sobre fundo escuro. */
:root[data-theme="light"] {
--ab-bg: #eef3fa;
--ab-bg-2: #ffffff;
--ab-surface: #ffffff;
--ab-surface-2: #f3f7fc;
--ab-border: #dbe4f0;
--ab-border-2: #c3d3e6;
--ab-text-1: #0d1b2a;
--ab-text-2: #3c5a7d;
--ab-text-3: #6b8aaa;
--ab-blue: #2563eb;
--ab-blue-glow: rgba(37,99,235,.25);
--ab-orange: #ea6a0c;
--ab-orange-glow:rgba(234,106,12,.25);
--ab-red: #dc2626;
--ab-red-glow: rgba(220,38,38,.22);
--ab-purple: #7c3aed;
--ab-purple-glow:rgba(124,58,237,.24);
--ab-dot: rgba(13,27,42,.10);
--ab-edge: #94a9c4;
--ab-edge-glow: rgba(37,99,235,.18);
--ab-hover: #9db6d4;
--ab-hover-soft: rgba(13,27,42,.05);
--ab-port-hover: #0d1b2a;
--ab-shadow: 0 4px 14px rgba(13,27,42,.10);
--ab-shadow-lg: 0 16px 40px rgba(13,27,42,.16);
--ab-halos:
radial-gradient(38vw 32vw at 12% 8%, rgba(124,58,237,.07) 0%, transparent 65%),
radial-gradient(34vw 30vw at 88% 20%, rgba(37,99,235,.09) 0%, transparent 65%),
radial-gradient(32vw 30vw at 20% 95%, rgba(249,115,22,.06) 0%, transparent 65%),
radial-gradient(30vw 28vw at 95% 90%, rgba(239,68,68,.05) 0%, transparent 65%);
}
.auto-builder {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
overflow: hidden;
background: var(--ab-bg);
color: var(--ab-text-1);
}
.auto-builder-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--ab-border);
background: linear-gradient(180deg, var(--ab-surface) 0%, var(--ab-bg) 100%);
}
.auto-builder-header .btn-ghost { color: var(--ab-text-2); }
.auto-builder-header .btn-ghost:hover { background: var(--ab-surface-2); color: var(--ab-text-1); }
.auto-builder-header .btn-secondary { background: var(--ab-surface-2); color: var(--ab-text-1); border: 1px solid var(--ab-border-2); }
.auto-builder-header .btn-secondary:hover { background: var(--ab-border-2); }
.auto-builder-header .btn-primary { background: linear-gradient(135deg, var(--ab-blue) 0%, var(--ab-purple) 100%); box-shadow: 0 0 18px var(--ab-blue-glow); }
.auto-name-input {
font-size: 14px;
font-weight: 700;
border: 1px solid transparent;
background: none;
border-radius: var(--radius-sm);
padding: 6px 8px;
color: var(--ab-text-1);
min-width: 160px;
}
.auto-name-input:hover, .auto-name-input:focus { border-color: var(--ab-border-2); background: var(--ab-surface-2); outline: none; }
.auto-builder-body {
flex: 1;
display: flex;
overflow: hidden;
position: relative;
min-height: 0;
}
/* Menu "+ Adicionar" (Acionador / Nó) — substitui a paleta fixa antiga.
Ancorado sob o botão, com navegação em 2 níveis (categoria → tipo). */
.auto-add-menu {
position: fixed;
width: 260px;
max-height: 70vh;
overflow-y: auto;
background: var(--ab-bg-2);
border: 1px solid var(--ab-border-2);
border-radius: 12px;
box-shadow: var(--ab-shadow-lg);
padding: 6px;
z-index: 4100;
}
.auto-add-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 9px;
border-radius: 9px;
cursor: pointer;
border: none;
background: none;
text-align: left;
transition: background .12s;
}
.auto-add-menu-item:hover { background: var(--ab-hover-soft); }
.auto-add-menu-item + .auto-add-menu-item { margin-top: 2px; }
.auto-add-menu-back { border-bottom: 1px solid var(--ab-border); border-radius: 0; padding-bottom: 10px; margin-bottom: 4px; }
.auto-add-menu-text { min-width: 0; flex: 1; }
.auto-add-menu-title { font-size: 12px; font-weight: 600; color: var(--ab-text-1); }
.auto-add-menu-desc { font-size: 11px; color: var(--ab-text-3); margin-top: 1px; }
.auto-node-icon {
width: 26px;
height: 26px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
position: relative;
}
.auto-node-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
pointer-events: none;
}
/* ── Canvas: fundo preto com halos de luz sutis + grade de pontos ── */
.auto-canvas-wrap {
flex: 1;
/* hidden, não auto: a vista é controlada por transform. Com rolagem nativa
ligada as duas competiriam pelo mesmo gesto. */
overflow: hidden;
position: relative;
background-color: var(--ab-bg);
background-image:
radial-gradient(1px 1px at center, var(--ab-dot) 1px, transparent 1px);
background-size: 24px 24px;
}
.auto-canvas-wrap::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: var(--ab-halos);
}
.auto-canvas {
position: relative;
width: 2600px;
height: 1700px;
z-index: 1;
}
.auto-canvas-empty-hint {
position: absolute;
top: 40px;
left: 40px;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--ab-surface);
border: 1px solid var(--ab-border-2);
color: var(--ab-text-2);
border-radius: var(--radius-md);
font-size: 12px;
font-weight: 600;
max-width: 320px;
box-shadow: 0 0 24px rgba(59,130,246,.10);
}
.auto-edges {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.auto-edges path.auto-edge-line {
fill: none;
stroke: var(--ab-edge);
stroke-width: 2;
filter: drop-shadow(0 0 4px var(--ab-edge-glow));
}
.auto-edges path.auto-edge-preview {
fill: none;
stroke: var(--ab-blue);
stroke-width: 2;
stroke-dasharray: 5 4;
filter: drop-shadow(0 0 6px var(--ab-blue-glow));
}
.auto-edges .auto-edge-hit {
fill: none;
stroke: transparent;
stroke-width: 16;
pointer-events: stroke;
cursor: pointer;
}
.auto-edges .auto-edge-del {
pointer-events: all;
cursor: pointer;
}
.auto-edges .auto-edge-del circle { fill: var(--ab-surface-2); stroke: var(--ab-border-2); stroke-width: 1.5; }
.auto-edges .auto-edge-del:hover circle { fill: var(--ab-red); stroke: var(--ab-red); filter: drop-shadow(0 0 6px var(--ab-red-glow)); }
.auto-edges .auto-edge-del text { fill: var(--ab-text-3); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.auto-edges .auto-edge-del:hover text { fill: #fff; } /* o círculo vira vermelho nos dois temas */
/* ── Nós do canvas ─────────────────────────────────────────────
Três formas: padrão (quadrado, ícone + nome), If/Else (losango —
"duas pontas", uma por condição) e Timer (círculo com relógio). */
.auto-node {
position: absolute;
width: 108px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px 10px;
border-radius: 16px;
border: 1.5px solid var(--ab-border-2);
background: linear-gradient(180deg, var(--ab-surface-2) 0%, var(--ab-surface) 100%);
box-shadow: var(--ab-shadow);
cursor: grab;
user-select: none;
z-index: 2;
}
.auto-node:hover { border-color: var(--ab-hover); }
.auto-node:active { cursor: grabbing; }
.auto-node.auto-node-selected { border-color: var(--ab-blue); box-shadow: 0 0 0 3px var(--ab-blue-glow), var(--ab-shadow); z-index: 3; }
.auto-node.auto-node-trigger { border-color: var(--ab-purple-glow); box-shadow: 0 0 22px var(--ab-purple-glow), var(--ab-shadow); }
.auto-node.auto-node-trigger.auto-node-selected { border-color: var(--ab-purple); box-shadow: 0 0 0 3px var(--ab-purple-glow), var(--ab-shadow); }
/* Badge com o ícone — quadrado por padrão */
.auto-node-badge {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
position: relative;
}
.auto-node-badge::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
pointer-events: none;
}
/* If/Else — losango ("bracket" com duas pontas, uma por condição) */
.auto-node.auto-node-if { background: none; border: none; box-shadow: none; padding-top: 4px; }
.auto-node.auto-node-if:hover .auto-node-badge,
.auto-node.auto-node-if.auto-node-selected .auto-node-badge { outline: 2px solid var(--ab-red); outline-offset: 3px; }
.auto-node.auto-node-if .auto-node-badge {
border-radius: 11px;
transform: rotate(45deg);
}
.auto-node.auto-node-if .auto-node-badge i { transform: rotate(-45deg); }
/* Timer — círculo com relógio */
.auto-node.auto-node-timer { background: none; border: none; box-shadow: none; padding-top: 4px; }
.auto-node.auto-node-timer:hover .auto-node-badge,
.auto-node.auto-node-timer.auto-node-selected .auto-node-badge { outline: 2px solid var(--ab-orange); outline-offset: 3px; }
.auto-node.auto-node-timer .auto-node-badge { border-radius: 50%; }
.auto-node-name {
font-size: 11px;
font-weight: 600;
text-align: center;
color: var(--ab-text-1);
line-height: 1.3;
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.auto-node-del {
position: absolute;
top: -7px;
right: -7px;
width: 20px;
height: 20px;
background: var(--ab-surface-2);
border: 1.5px solid var(--ab-border-2);
border-radius: 50%;
cursor: pointer;
color: var(--ab-text-3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .12s, background .12s, color .12s;
z-index: 6;
}
.auto-node:hover .auto-node-del { opacity: 1; }
.auto-node-del:hover { background: rgba(239,68,68,.18); color: var(--ab-red); border-color: var(--ab-red); }
.auto-port {
position: absolute;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--ab-surface);
border: 2.5px solid var(--ab-text-3);
cursor: crosshair;
z-index: 5;
transition: border-color .12s, box-shadow .12s, transform .12s;
}
.auto-port:hover { border-color: var(--ab-blue); background: var(--ab-surface-2); box-shadow: 0 0 10px var(--ab-blue-glow); transform: translateY(-50%) scale(1.3); }
.auto-port-in { left: -7px; top: 50%; transform: translateY(-50%); }
.auto-port-out { right: -7px; top: 50%; transform: translateY(-50%); }
.auto-port-out.auto-port-true { top: 38%; border-color: var(--ab-blue); }
.auto-port-out.auto-port-false { top: 78%; border-color: var(--ab-red); }
/* No If/Else, os dois outputs viram pontas triangulares — reforça a
leitura de "bracket com duas pontas" pedida no design. */
.auto-node-if .auto-port-out {
width: 15px;
height: 15px;
border: none;
border-radius: 0;
background: var(--ab-blue);
clip-path: polygon(0% 15%, 70% 50%, 0% 85%);
}
.auto-node-if .auto-port-out.auto-port-false { background: var(--ab-red); }
.auto-node-if .auto-port-out:hover { background: var(--ab-port-hover); transform: translateY(-50%) scale(1.3); box-shadow: 0 0 10px var(--ab-blue-glow); }
.auto-config-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
background: var(--ab-bg-2);
border-left: 1px solid var(--ab-border);
box-shadow: -12px 0 32px rgba(0,0,0,.14);
overflow-y: auto;
padding: 16px;
z-index: 20;
color: var(--ab-text-1);
}
.auto-config-panel .settings-label { display: block; margin-bottom: 5px; color: var(--ab-text-3); }
.auto-config-panel .settings-field { margin-bottom: 12px; }
.auto-config-panel .settings-input,
.auto-config-panel input,
.auto-config-panel select,
.auto-config-panel textarea {
background: var(--ab-surface) !important;
border: 1px solid var(--ab-border-2) !important;
color: var(--ab-text-1) !important;
}
.auto-config-panel .settings-input:focus,
.auto-config-panel input:focus,
.auto-config-panel select:focus,
.auto-config-panel textarea:focus {
border-color: var(--ab-blue) !important;
box-shadow: 0 0 0 3px var(--ab-blue-glow);
outline: none;
}
.auto-config-panel code {
background: var(--ab-surface-2);
border: 1px solid var(--ab-border-2);
border-radius: 4px;
padding: 1px 5px;
font-size: 10px;
color: var(--ab-purple);
}
.auto-config-panel .btn-secondary { background: var(--ab-surface); color: var(--ab-text-1); border: 1px solid var(--ab-border-2); }
.auto-config-panel .btn-secondary:hover { background: var(--ab-surface-2); }
.auto-config-panel .btn-ghost { color: var(--ab-text-2); }
.auto-config-panel .btn-ghost:hover { background: var(--ab-surface-2); color: var(--ab-text-1); }
.auto-stage-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
/* ======================================
DOCUMENTOS
====================================== */
.doc-trail {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
min-width: 0;
}
.doc-crumb {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-2);
transition: background 0.15s, color 0.15s;
}
.doc-crumb:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.doc-crumb:last-child { color: var(--color-text-1); }
.doc-crumb-sep { width: 13px; height: 13px; color: var(--color-text-3); flex: none; }
.doc-dropzone { position: relative; min-height: 260px; }
.doc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
padding: 16px;
}
.doc-card {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
min-width: 0;
/* Altura fixa: sem isso, um card com selo de restrição estica a linha
inteira e a grade fica com degraus. */
min-height: 74px;
}
.doc-card:hover {
border-color: var(--color-accent);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.doc-card-icon { flex: none; display: flex; align-items: center; }
.doc-card-icon i { width: 26px; height: 26px; }
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-card-meta {
font-size: 11.5px;
color: var(--color-text-3);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
}
.doc-badge-lock { background: var(--color-surface-2); color: var(--color-text-2); }
.doc-card-file .doc-card-body:has(.doc-badge) .doc-card-meta { margin-bottom: 0; }
.doc-kebab {
flex: none;
background: none;
border: none;
cursor: pointer;
padding: 5px;
border-radius: var(--radius-sm);
color: var(--color-text-3);
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
.doc-card:hover .doc-kebab { opacity: 1; }
.doc-kebab:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.doc-kebab i { width: 15px; height: 15px; display: block; }
.doc-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 56px 20px;
text-align: center;
}
.doc-empty i { width: 34px; height: 34px; color: var(--color-text-3); margin-bottom: 6px; }
.doc-empty-title { font-size: 14px; font-weight: 700; color: var(--color-text-1); }
.doc-empty-sub { font-size: 12.5px; color: var(--color-text-3); max-width: 380px; line-height: 1.6; }
.doc-drop-overlay {
position: absolute;
inset: 8px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border: 2px dashed var(--color-accent);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-accent);
font-size: 13px;
font-weight: 600;
pointer-events: none;
z-index: 5;
}
.doc-drop-overlay.active { display: flex; }
.doc-drop-overlay i { width: 30px; height: 30px; }
/* ---- Bandeja de uploads ---- */
.doc-tray {
position: fixed;
right: 20px;
bottom: 20px;
width: 320px;
max-width: calc(100vw - 40px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 3500;
}
/* display:flex venceria o atributo hidden e a bandeja vazia ficaria visível. */
.doc-tray[hidden] { display: none; }
.doc-tray-row { display: flex; align-items: center; gap: 10px; }
.doc-tray-name {
font-size: 12px;
font-weight: 600;
color: var(--color-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-tray-bar {
height: 4px;
border-radius: 999px;
background: var(--color-surface-2);
margin-top: 5px;
overflow: hidden;
}
.doc-tray-bar span {
display: block;
height: 100%;
background: var(--color-accent);
transition: width 0.2s;
}
.doc-tray-pct { font-size: 11px; font-weight: 600; color: var(--color-text-3); flex: none; min-width: 46px; text-align: right; }
/* ---- Menu de opções ---- */
.doc-menu-popup {
position: fixed;
z-index: 4200;
min-width: 190px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
padding: 5px;
display: flex;
flex-direction: column;
}
.doc-menu-item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
background: none;
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-1);
text-align: left;
transition: background 0.12s;
}
.doc-menu-item:hover { background: var(--color-surface-2); }
.doc-menu-item i { width: 14px; height: 14px; flex: none; color: var(--color-text-3); }
.doc-menu-item.danger { color: var(--color-red); }
.doc-menu-item.danger i { color: var(--color-red); }
/* ---- Visualizador ---- */
.doc-preview-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.doc-preview-box {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 1000px;
max-width: 100%;
height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3);
}
.doc-preview-head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--color-border);
}
.doc-preview-title {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 700;
color: var(--color-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-preview-body {
flex: 1;
min-height: 0;
background: var(--color-surface-2);
display: flex;
align-items: center;
justify-content: center;
}
.doc-preview-body iframe { width: 100%; height: 100%; border: none; }
.doc-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* ---- Formulários (nova pasta, renomear, mover, acesso) ---- */
.doc-form-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 4100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.doc-form-box {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 440px;
max-width: 100%;
max-height: 86vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
}
.doc-form-head {
display: flex;
align-items: center;
gap: 9px;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
font-weight: 700;
color: var(--color-text-1);
}
.doc-form-body { padding: 18px 20px; overflow-y: auto; }
.doc-form-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--color-border);
}
.doc-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--color-text-2);
margin-bottom: 6px;
}
.doc-input {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
color: var(--color-text-1);
}
.doc-hint { font-size: 11.5px; color: var(--color-text-3); line-height: 1.6; margin-top: 10px; }
.doc-radio {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 8px;
cursor: pointer;
font-size: 12.5px;
color: var(--color-text-1);
}
.doc-radio:hover { border-color: var(--color-accent); }
.doc-radio input { margin-top: 2px; flex: none; }
.doc-user-list {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 6px;
max-height: 200px;
overflow-y: auto;
margin-bottom: 4px;
}
.doc-user-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 12.5px;
color: var(--color-text-1);
}
.doc-user-item:hover { background: var(--color-surface-2); }
.doc-warn {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 13px 16px;
margin-bottom: 14px;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-red);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: 12.5px;
line-height: 1.65;
color: var(--color-text-2);
}
.doc-warn i { width: 17px; height: 17px; color: var(--color-red); flex: none; margin-top: 1px; }
.doc-warn strong { color: var(--color-text-1); display: block; margin-bottom: 2px; }
.doc-warn code {
background: var(--color-surface-2);
padding: 1px 5px;
border-radius: 4px;
font-size: 11.5px;
}
.doc-tray-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11.5px;
font-weight: 700;
color: var(--color-text-2);
padding: 0 2px 2px;
}
.doc-tray-close {
background: none;
border: none;
cursor: pointer;
padding: 2px;
border-radius: 4px;
color: var(--color-text-3);
display: flex;
}
.doc-tray-close:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.doc-tray-close i { width: 13px; height: 13px; }
.doc-tray-err {
font-size: 11px;
color: var(--color-red);
line-height: 1.5;
margin-top: 4px;
}
/* Um botão desabilitado precisa parecer desabilitado — sem isso ele continua
convidando o clique. */
.btn:disabled,
.btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
/* ======================================
RESPONSÁVEL E SEGUIDORES
====================================== */
.asg-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 4300;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.asg-box {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 440px;
max-width: 100%;
max-height: 86vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
}
.asg-loading { padding: 48px; text-align: center; font-size: 13px; color: var(--color-text-3); }
.asg-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
}
.asg-title { font-size: 14px; font-weight: 700; color: var(--color-text-1); }
.asg-sub {
font-size: 12px;
color: var(--color-text-3);
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
.asg-close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 6px;
color: var(--color-text-3);
display: flex;
flex: none;
}
.asg-close:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.asg-close i { width: 16px; height: 16px; }
.asg-body { padding: 18px 20px; overflow-y: auto; }
.asg-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
color: var(--color-text-3);
margin-bottom: 7px;
}
.asg-select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
color: var(--color-text-1);
}
.asg-hint { font-size: 11.5px; color: var(--color-text-3); line-height: 1.6; margin-top: 8px; }
.asg-list {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 5px;
display: flex;
flex-direction: column;
gap: 2px;
}
.asg-empty { font-size: 12px; color: var(--color-text-3); padding: 10px; text-align: center; }
.asg-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
border-radius: var(--radius-sm);
}
.asg-item:hover { background: var(--color-surface-2); }
.asg-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-bg-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex: none;
color: var(--color-text-1);
}
.asg-name {
flex: 1;
min-width: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asg-email {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--color-text-3);
}
.asg-remove {
background: none;
border: none;
cursor: pointer;
padding: 3px;
border-radius: 5px;
color: var(--color-text-3);
display: flex;
flex: none;
}
.asg-remove:hover { background: var(--color-red-lite); color: var(--color-red); }
.asg-remove i { width: 13px; height: 13px; }
.asg-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
border-top: 1px solid var(--color-border);
}
.asg-err { flex: 1; font-size: 12px; color: var(--color-red); }
/* ======================================
TAGS
====================================== */
.tag-chips {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 3px;
}
.tag-chip {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
/* A cor vem da tag; o fundo é a mesma cor bem diluída, para o chip
funcionar tanto no tema claro quanto no escuro. */
color: var(--tag, #6B7280);
background: color-mix(in srgb, var(--tag, #6B7280) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--tag, #6B7280) 35%, transparent);
}
.tag-chip-more { cursor: pointer; flex-shrink: 0; }
/* Balão com as tags que não couberam. Fica no , acima de tudo, porque
as listas onde os chips aparecem rolam por dentro e o cortariam. */
.tag-pop {
position: fixed;
z-index: 4600;
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 260px;
padding: 7px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}
/* Na lista de conversas o espaço é estreito: uma linha só, sem encolher os
chips — quem decide quantos aparecem é favxTagsFit, medindo a coluna. O
overflow esconde os chips a mais no instante entre desenhar e medir. */
.conv-tags { margin-top: 4px; min-width: 0; }
.conv-tags .tag-chips {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
margin-top: 0;
max-width: 100%;
}
.conv-tags .tag-chip { flex-shrink: 0; }
/* Aplicada por favxTagsFit no chip que precisou ser cortado. */
.tag-chip-cut { display: block; overflow: hidden; text-overflow: ellipsis; }
.tag-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 4400;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.tag-box {
background: var(--color-surface);
border-radius: var(--radius-lg);
width: 440px;
max-width: 100%;
max-height: 86vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.25);
}
.tag-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
}
.tag-title { font-size: 14px; font-weight: 700; color: var(--color-text-1); }
.tag-close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 6px;
color: var(--color-text-3);
display: flex;
}
.tag-close:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.tag-close i { width: 16px; height: 16px; }
.tag-body { padding: 16px 20px; overflow-y: auto; }
.tag-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--color-border);
min-height: 46px;
}
.tag-err { flex: 1; font-size: 12px; color: var(--color-red); }
.tag-empty { font-size: 12.5px; color: var(--color-text-3); padding: 14px; text-align: center; }
.tag-hint { font-size: 11.5px; color: var(--color-text-3); line-height: 1.6; margin-top: 12px; }
.tag-input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
color: var(--color-text-1);
}
.tag-new { display: flex; gap: 8px; margin-top: 12px; }
.tag-pick-list {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 300px;
overflow-y: auto;
}
.tag-pick {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.tag-pick:hover { background: var(--color-surface-2); }
.tag-count { margin-left: auto; font-size: 11px; color: var(--color-text-3); flex: none; }
.tag-manage-list { display: flex; flex-direction: column; gap: 2px; }
.tag-manage-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 4px;
}
.tag-swatch {
width: 16px;
height: 16px;
border-radius: 5px;
flex: none;
border: 1px solid rgba(0, 0, 0, 0.12);
}
.tag-icon-btn {
background: none;
border: none;
cursor: pointer;
padding: 5px;
border-radius: 6px;
color: var(--color-text-3);
display: flex;
flex: none;
}
.tag-icon-btn:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.tag-icon-btn i { width: 14px; height: 14px; }
.tag-del-btn:hover { background: var(--color-red-lite); color: var(--color-red); }
.tag-palette {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 4px 12px 28px;
}
/* display:flex venceria o atributo hidden e toda paleta ficaria aberta. */
.tag-palette[hidden] { display: none; }
.tag-swatch-pick { cursor: pointer; width: 20px; height: 20px; }
.tag-swatch-pick:hover { transform: scale(1.12); }
/* Seletor de tags dentro do painel de configuração das automações */
.auto-tag-picker {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--ab-border);
border-radius: var(--radius-sm);
padding: 6px;
}
.auto-tag-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
border-radius: 5px;
cursor: pointer;
}
.auto-tag-opt:hover { background: var(--ab-hover-soft); }
/* ── Canvas das automações: pan e zoom ── */
.auto-canvas {
/* A origem no canto é o que faz translate+scale se comportar como câmera:
com o padrão (centro), ampliar desloca o conteúdo sozinho. */
transform-origin: 0 0;
will-change: transform;
}
.auto-canvas-wrap { cursor: grab; }
.auto-canvas-wrap.auto-panning { cursor: grabbing; }
/* Enquanto arrasta a vista, o cursor não pode virar seleção de texto ao
passar por cima dos nomes dos nodes. */
.auto-canvas-wrap.auto-panning * { cursor: grabbing !important; user-select: none; }
.auto-node { cursor: grab; }
.auto-zoom-bar {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 6;
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 10px;
background: var(--ab-surface);
border: 1px solid var(--ab-border-2);
box-shadow: var(--ab-shadow);
}
.auto-zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 7px;
background: none;
cursor: pointer;
color: var(--ab-text-2);
transition: background 0.12s, color 0.12s;
}
.auto-zoom-btn:hover { background: var(--ab-surface-2); color: var(--ab-text-1); }
.auto-zoom-btn i { width: 15px; height: 15px; }
.auto-zoom-level {
min-width: 52px;
height: 28px;
border: none;
border-radius: 7px;
background: none;
cursor: pointer;
color: var(--ab-text-1);
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.auto-zoom-level:hover { background: var(--ab-surface-2); }
.auto-zoom-sep {
width: 1px;
height: 18px;
background: var(--ab-border-2);
margin: 0 3px;
}
.auto-canvas-tip {
position: absolute;
left: 16px;
bottom: 58px;
z-index: 5;
font-size: 11px;
color: var(--ab-text-3);
pointer-events: none;
opacity: 0.75;
}
/* ── Busca em conversas ── */
/* O botão vive dentro de .search-wrapper, que não era posicionado — sem isso
o absolute se ancorava na página e o ✕ ia parar fora do campo. */
.conv-sidebar-header .search-wrapper { position: relative; padding-right: 30px; }
.conv-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 3px;
border-radius: 5px;
color: var(--color-text-3);
display: flex;
}
.conv-search-clear[hidden] { display: none; }
.conv-search-clear:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.conv-search-clear i { width: 13px; height: 13px; }
.conv-hl {
background: color-mix(in srgb, var(--color-accent) 26%, transparent);
color: inherit;
border-radius: 3px;
padding: 0 1px;
}
.conv-list[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }
/* ══════════════════════════════════════════
SUBCONTAS — cards arrastáveis sobre aurora desfocada
══════════════════════════════════════════ */
.sa-stage {
position: relative;
isolation: isolate; /* prende o z-index dos blobs a este palco */
border-radius: var(--radius-xl);
padding: 18px;
margin: 0 -18px; /* a luz vaza até a borda do conteúdo */
overflow: hidden;
}
/* Fundo desfocado em movimento. Fica atrás dos cards (z-index negativo dentro
do palco isolado) para nunca capturar cliques. */
.sa-aurora {
position: absolute;
inset: -20%;
z-index: -1;
pointer-events: none;
filter: blur(72px) saturate(125%);
opacity: .38; /* luz de fundo, não protagonista: o card é que tem de ler */
}
.sa-blob {
position: absolute;
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
will-change: transform;
}
.sa-blob-1 {
left: 4%; top: 6%;
background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
animation: sa-drift-1 26s ease-in-out infinite;
}
.sa-blob-2 {
right: 2%; top: 24%;
background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%);
animation: sa-drift-2 32s ease-in-out infinite;
}
.sa-blob-3 {
left: 38%; bottom: 0%;
background: radial-gradient(circle, var(--color-orange) 0%, transparent 72%);
animation: sa-drift-3 38s ease-in-out infinite;
opacity: .7;
}
[data-theme="dark"] .sa-aurora { opacity: .5; }
@keyframes sa-drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(22%, 14%) scale(1.18); }
66% { transform: translate(-8%, 26%) scale(.92); }
}
@keyframes sa-drift-2 {
0%, 100% { transform: translate(0, 0) scale(1.05); }
40% { transform: translate(-26%, 18%) scale(.88); }
70% { transform: translate(-10%, -14%) scale(1.2); }
}
@keyframes sa-drift-3 {
0%, 100% { transform: translate(0, 0) scale(.95); }
50% { transform: translate(18%, -22%) scale(1.15); }
}
.sa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
.sa-empty {
grid-column: 1 / -1;
color: var(--color-text-3);
font-size: 13px;
padding: 24px 0;
}
/* ── Card ── */
.sa-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--glass);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
box-shadow: var(--glow-soft);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
touch-action: pan-y; /* deixa a página rolar; o arrasto é horizontal */
}
.sa-grid[data-sortable] .sa-card { cursor: grab; }
.sa-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-2);
box-shadow: 0 12px 34px rgba(13, 27, 42, .16);
}
[data-theme="dark"] .sa-card:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.sa-card:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
/* Fio de cor no topo, no tom da própria subconta */
.sa-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(90deg,
hsl(var(--sa-hue, 220) 78% 58%),
hsl(calc(var(--sa-hue, 220) + 40) 74% 52%));
opacity: .85;
}
.sa-card-current { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.sa-card-head { display: flex; align-items: center; gap: 10px; }
.sa-grip {
display: flex;
align-items: center;
margin-left: -4px;
color: var(--color-text-3);
opacity: .45;
transition: opacity .15s;
}
.sa-card:hover .sa-grip { opacity: 1; }
.sa-grip i { width: 15px; height: 15px; }
.sa-avatar {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; letter-spacing: .02em;
color: #fff;
background: linear-gradient(140deg,
hsl(var(--sa-hue, 220) 72% 56%),
hsl(calc(var(--sa-hue, 220) + 42) 68% 44%));
box-shadow: 0 4px 14px hsl(var(--sa-hue, 220) 70% 50% / .35);
}
.sa-ident { min-width: 0; flex: 1; }
.sa-name {
font-size: 14px; font-weight: 700; color: var(--color-text-1);
margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sa-slug {
font-size: 12px; color: var(--color-text-3);
font-variant-numeric: tabular-nums;
}
/* ── Setas de ordenação ── */
.sa-move {
display: flex;
gap: 2px;
padding: 2px;
border-radius: 99px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
opacity: 0;
transition: opacity .15s;
}
.sa-card:hover .sa-move,
.sa-card:focus-within .sa-move,
.sa-card:focus-visible .sa-move { opacity: 1; }
.sa-arrow {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
border: none; border-radius: 99px;
background: none; cursor: pointer;
color: var(--color-text-2);
transition: background .15s, color .15s;
}
.sa-arrow:hover:not(:disabled) { background: var(--color-accent-lite); color: var(--color-accent); }
.sa-arrow:disabled { opacity: .3; cursor: default; }
.sa-arrow i { width: 13px; height: 13px; }
/* ── Chips ── */
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600;
padding: 3px 9px;
border-radius: 99px;
border: 1px solid var(--color-border);
color: var(--color-text-2);
}
.sa-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sa-chip-on { color: var(--color-green); background: var(--color-green-lite); border-color: transparent; }
.sa-chip-off { color: var(--color-text-3); background: var(--color-bg-2); border-color: transparent; }
.sa-chip-current { color: var(--color-accent); background: var(--color-accent-lite); border-color: transparent; }
.sa-chip-quiet { color: var(--color-text-3); font-variant-numeric: tabular-nums; }
/* ── Números ── */
.sa-stats { display: flex; gap: 18px; }
.sa-stat {
display: flex; align-items: baseline; gap: 5px;
font-size: 12px; color: var(--color-text-3);
}
.sa-stat i { width: 13px; height: 13px; align-self: center; opacity: .7; }
.sa-stat b {
font-size: 15px; font-weight: 700; color: var(--color-text-1);
font-variant-numeric: tabular-nums;
}
.sa-actions {
display: flex; align-items: center; gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
margin-top: auto; /* cards de alturas diferentes alinham os botões embaixo */
}
.sa-here {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; color: var(--color-accent);
}
.sa-here i { width: 13px; height: 13px; }
/* ── Estados do arrasto ── */
body.sa-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.sa-dragging .sa-card { cursor: grabbing; }
/* O original vira o espaço reservado; quem segue o cursor é o clone. */
.sa-card.sa-holding {
opacity: .35;
transform: none !important;
box-shadow: none;
border-style: dashed;
}
.sa-card.sa-holding > * { visibility: hidden; }
.sa-ghost {
z-index: 2000;
pointer-events: none;
margin: 0;
transform-origin: center;
rotate: -1.5deg;
box-shadow: 0 22px 48px rgba(13, 27, 42, .28);
border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
[data-theme="dark"] .sa-ghost { box-shadow: 0 24px 56px rgba(0, 0, 0, .7); }
.sa-ghost .sa-move { opacity: 0; }
/* ── Aviso de gravação da ordem ── */
.sa-status {
margin-left: 8px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 99px;
}
.sa-status-wait { color: var(--color-text-3); background: var(--color-bg-2); }
.sa-status-ok { color: var(--color-green); background: var(--color-green-lite); }
.sa-status-err { color: var(--color-red); background: var(--color-red-lite); }
@media (prefers-reduced-motion: reduce) {
.sa-blob { animation: none; }
.sa-card { transition: none; }
}
/* ══════════════════════════════════════════
TELEFONIA (TWILIO) — configuração, botão e painel da ligação
══════════════════════════════════════════ */
.tel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 16px;
}
.tel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.tel-field { display: flex; flex-direction: column; gap: 5px; }
.tel-input {
width: 100%;
padding: 8px 10px;
font-size: 13px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-1);
}
.tel-check {
display: flex; align-items: center; gap: 8px;
margin-top: 14px;
font-size: 13px; color: var(--color-text-2);
cursor: pointer;
}
.tel-urls { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.tel-url {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
font-size: 12px;
}
.tel-url > span { color: var(--color-text-3); white-space: nowrap; }
.tel-url > code {
flex: 1; min-width: 0;
overflow-x: auto; /* URL longa rola dentro da linha, não estica a página */
white-space: nowrap;
font-size: 11.5px;
color: var(--color-text-1);
}
.tel-copy.ok { color: var(--color-green); }
.tel-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tel-checks { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.tel-check-line {
display: flex; align-items: center; gap: 7px;
font-size: 12.5px;
color: var(--color-text-2);
}
.tel-check-line.ok { color: var(--color-green); }
.tel-check-line.nao { color: var(--color-yellow); }
/* ── Botão "Ligar" no cabeçalho da conversa ── */
.call-split { position: relative; display: flex; }
.call-split-main { gap: 5px; font-size: 12px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.call-split-more {
padding: 6px 5px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-left: -1px;
}
.call-menu {
position: absolute;
top: calc(100% + 5px); right: 0;
min-width: 220px;
z-index: 400;
padding: 4px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.call-menu[hidden] { display: none; }
.call-menu button {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 8px 10px;
border: none; background: none; cursor: pointer;
border-radius: var(--radius-sm);
font-size: 13px; text-align: left;
color: var(--color-text-1);
}
.call-menu button:hover:not(:disabled) { background: var(--color-surface-2); }
.call-menu button:disabled { opacity: .45; cursor: default; }
/* ── Registro da ligação na linha do tempo ── */
.msg-row.call-row .msg-content { max-width: 320px; }
.call-bubble {
display: flex; align-items: center; gap: 9px;
padding: 9px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-surface-2);
color: var(--color-text-2);
}
.call-bubble.ok { border-color: color-mix(in srgb, var(--color-green) 40%, transparent); color: var(--color-text-1); }
.call-bubble.ruim { border-color: color-mix(in srgb, var(--color-red) 40%, transparent); color: var(--color-text-1); }
.call-bubble.ok i { color: var(--color-green); }
.call-bubble.ruim i { color: var(--color-red); }
/* A hora de uma mensagem enviada é clara porque acompanha o balão colorido;
o registro de ligação não tem esse fundo, então volta ao tom normal. */
.msg-row.outgoing.call-row .msg-time { color: var(--color-text-3); }
.call-bubble-title { font-size: 13px; font-weight: 600; }
.call-bubble-sub {
font-size: 11.5px; color: var(--color-text-3);
font-variant-numeric: tabular-nums;
}
/* ── Painel da ligação em curso ── */
.call-panel {
position: fixed;
right: 24px; bottom: 24px;
width: 290px;
z-index: 4000;
padding: 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
animation: call-in .22s cubic-bezier(.2,.8,.25,1);
}
.call-panel[hidden] { display: none; }
@keyframes call-in {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: none; }
}
.call-panel.ligado { border-color: color-mix(in srgb, var(--color-green) 45%, transparent); }
.call-panel.mini .call-panel-status,
.call-panel.mini .call-panel-acts,
.call-panel.mini .call-keys { display: none; }
.call-panel-head { display: flex; align-items: center; gap: 10px; }
.call-panel-avatar {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; color: #fff;
background: var(--gradient-brand);
}
.call-panel-name {
font-size: 14px; font-weight: 700; color: var(--color-text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.call-panel-num { font-size: 12px; color: var(--color-text-3); font-variant-numeric: tabular-nums; }
.call-min {
background: none; border: none; cursor: pointer;
color: var(--color-text-3); padding: 4px; border-radius: 6px; display: flex;
}
.call-min:hover { background: var(--color-surface-2); }
.call-min i { width: 15px; height: 15px; }
.call-panel-status {
display: flex; align-items: center; justify-content: space-between;
margin: 12px 0;
font-size: 12.5px; color: var(--color-text-2);
}
.call-timer {
font-size: 13px; font-weight: 700; color: var(--color-text-1);
font-variant-numeric: tabular-nums;
}
/* Ponto pulsando enquanto a ligação está de pé */
.call-panel.ligado .call-panel-status::before {
content: '';
width: 7px; height: 7px; border-radius: 50%;
background: var(--color-green);
margin-right: 7px;
animation: call-pulse 1.4s ease-in-out infinite;
}
@keyframes call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.call-panel-acts { display: flex; gap: 8px; }
.call-btn {
flex: 1;
height: 40px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-2);
color: var(--color-text-1);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.call-btn:hover:not(:disabled) { background: var(--color-bg-2); }
.call-btn:disabled { opacity: .4; cursor: default; }
.call-btn.on { background: var(--color-accent-lite); border-color: transparent; color: var(--color-accent); }
.call-btn i { width: 17px; height: 17px; }
.call-btn-end { background: var(--color-red); border-color: transparent; color: #fff; }
.call-btn-end:hover { filter: brightness(1.08); }
.call-keys {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 12px;
}
.call-keys[hidden] { display: none; }
.call-key {
height: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-text-1);
font-size: 14px; font-weight: 600;
cursor: pointer;
}
.call-key:hover { background: var(--color-bg-2); }
@media (max-width: 640px) {
.call-panel { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
.call-panel { animation: none; }
.call-panel.ligado .call-panel-status::before { animation: none; }
}
/* ══════════════════════════════════════════
NEXUS VOICE AI — card na lista de agentes e painel de configuração
══════════════════════════════════════════ */
/* Coral/vermelho: a mesma família de cor da telefonia, para o olho ligar as
duas coisas sem precisar ler. */
.ai-agent-mark.voice { background: linear-gradient(135deg, #fb7185 0%, #f22f46 100%); }
.ai-agent-badge.voice { background: color-mix(in srgb, #f22f46 16%, transparent); color: #f2566b; }
.ai-agent-pend {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 5px 9px;
border-radius: var(--radius-sm);
background: var(--color-yellow-lite);
color: var(--color-yellow);
font-size: 11.5px;
font-weight: 600;
}
/* ── Painel de configuração ── */
.voice-box { width: min(620px, 94vw); }
.voice-body { max-height: min(70vh, 620px); overflow-y: auto; }
.voice-preview {
display: flex;
gap: 10px;
padding: 11px 13px;
margin-bottom: 16px;
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-purple) 35%, transparent);
background: var(--color-purple-lite);
color: var(--color-text-1);
}
.voice-preview strong { font-size: 12.5px; }
.voice-preview p { font-size: 12px; color: var(--color-text-2); line-height: 1.55; margin-top: 3px; }
.voice-area {
width: 100%;
resize: vertical;
font-family: inherit;
line-height: 1.55;
}
.voice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-top: 14px;
}
.voice-min { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-3); }
/* .tag-input traz flex:1 — sem travar o crescimento, o campo de minutos ficaria
do tamanho da coluna inteira. */
.voice-min input { width: 80px; flex: 0 0 80px; }
.voice-check {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 13px;
color: var(--color-text-2);
cursor: pointer;
}
.voice-sep {
margin: 20px 0 4px;
padding-top: 14px;
border-top: 1px solid var(--color-border);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
color: var(--color-text-3);
}
.voice-line {
display: flex;
align-items: center;
gap: 7px;
margin-top: 16px;
font-size: 12px;
color: var(--color-text-2);
}
.voice-line i { color: var(--color-text-3); }
/* ══════════════════════════════════════════
FOTO DE PERFIL DO CONTATO (WhatsApp)
══════════════════════════════════════════ */
/* A inicial fica sempre no HTML, embaixo; a foto entra por cima. Se a URL do
WhatsApp caducar, o ![]()
se remove sozinho e a letra reaparece. */
.avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
.avatar, .conv-avatar, .assign-mini-avatar { position: relative; }
/* Botão de rebuscar a foto, no avatar grande do painel da conversa */
.conv-avatar-big { overflow: visible; }
.avatar-sync {
position: absolute;
right: -4px;
bottom: -4px;
width: 22px;
height: 22px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
border: 2px solid var(--color-surface);
background: var(--color-bg-2);
color: var(--color-text-2);
cursor: pointer;
opacity: 0;
transition: opacity .15s, background .15s;
}
.conv-avatar-big:hover .avatar-sync,
.avatar-sync:focus-visible { opacity: 1; }
.avatar-sync:hover { background: var(--color-accent-lite); color: var(--color-accent); }
.avatar-sync:disabled { cursor: default; }
.avatar-sync i { width: 11px; height: 11px; }
.girando i, i.girando { animation: avatar-spin 1s linear infinite; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
.avatar-sync-msg {
font-size: 11.5px;
font-weight: 600;
color: var(--color-text-3);
white-space: nowrap;
}
.avatar-sync-msg.ok { color: var(--color-green); }
.avatar-sync-msg.erro { color: var(--color-red); }
.avatar-sync-msg[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.girando i, i.girando { animation: none; }
}
/* ══════════════════════════════════════════
TASKLY — projetos, pastas (colunas) e demandas
══════════════════════════════════════════ */
/* ── Lista de projetos ── */
.tk-projetos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.tk-projeto {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 16px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--glass);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: var(--glow-soft);
cursor: pointer;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tk-projeto:hover {
transform: translateY(-2px);
border-color: var(--color-border-2);
box-shadow: 0 12px 30px rgba(13, 27, 42, .16);
}
[data-theme="dark"] .tk-projeto:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .5); }
.tk-projeto:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.tk-projeto-cor { position: absolute; inset: 0 0 auto 0; height: 3px; }
.tk-projeto-topo { display: flex; align-items: flex-start; gap: 8px; }
.tk-projeto-nome {
flex: 1; min-width: 0; margin: 0;
font-size: 14.5px; font-weight: 700; color: var(--color-text-1);
}
.tk-projeto-menu, .tk-coluna-menu {
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border: none; border-radius: 6px;
background: none; cursor: pointer;
color: var(--color-text-3);
opacity: 0;
transition: opacity .15s, background .15s, color .15s;
}
.tk-projeto:hover .tk-projeto-menu,
.tk-coluna:hover .tk-coluna-menu,
.tk-projeto-menu:focus-visible,
.tk-coluna-menu:focus-visible { opacity: 1; }
.tk-projeto-menu:hover, .tk-coluna-menu:hover { background: var(--color-surface-2); color: var(--color-text-1); }
.tk-projeto-desc {
font-size: 12.5px; line-height: 1.5; color: var(--color-text-3);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── Barra de progresso ──
A mesma peça no cartão, no projeto fixado e no painel lateral: a cor conta o
estágio antes de alguém ler o número. */
.tk-barra {
display: block;
height: 5px; border-radius: 99px;
background: var(--color-bg-2);
overflow: hidden;
}
.tk-barra > span {
display: block; height: 100%;
border-radius: 99px;
background: var(--color-accent);
transition: width .3s ease;
}
.tk-barra.parado > span { background: var(--color-text-3); }
.tk-barra.andando > span { background: var(--color-blue); }
.tk-barra.quase > span { background: var(--color-orange); }
.tk-barra.pronto > span { background: var(--color-green); }
.tk-barra.vazio { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .tk-barra > span { transition: none; } }
/* ── Tela de projetos: conteúdo + painel de andamento ── */
.tk-painel {
display: grid;
grid-template-columns: minmax(0, 1fr) 296px;
gap: 20px;
align-items: start;
}
.tk-painel-main { min-width: 0; }
.tk-secao { margin-bottom: 26px; }
.tk-secao-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 14px;
color: var(--color-text-3);
}
.tk-secao-head h2 {
margin: 0;
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--color-text-2);
}
.tk-secao-conta {
padding: 1px 7px; border-radius: 99px;
background: var(--color-bg-2);
font-size: 11px; font-weight: 700; color: var(--color-text-3);
}
/* Fixados: cartões curtos numa faixa, para caberem vários na primeira dobra. */
.tk-fixados {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 12px;
}
.tk-fixado {
display: flex; flex-direction: column; gap: 9px;
padding: 13px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--glass);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: var(--glow-soft);
cursor: pointer;
transition: transform .18s ease, border-color .15s, box-shadow .18s;
}
.tk-fixado:hover { transform: translateY(-2px); border-color: var(--color-border-2); }
.tk-fixado:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.tk-fixado-topo { display: flex; align-items: center; justify-content: space-between; }
.tk-fixado-marca {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px;
color: #fff; font-size: 14px; font-weight: 700;
}
.tk-desafixar {
display: flex; padding: 5px;
border: none; border-radius: 6px;
background: none; cursor: pointer;
color: var(--color-text-3);
opacity: 0;
transition: opacity .15s, background .15s, color .15s;
}
.tk-fixado:hover .tk-desafixar, .tk-desafixar:focus-visible { opacity: 1; }
.tk-desafixar:hover { background: var(--color-surface-2); color: var(--color-text-1); }
@media (hover: none) { .tk-desafixar { opacity: 1; } }
.tk-fixado-nome {
margin: 0;
font-size: 13.5px; font-weight: 700; color: var(--color-text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-fixado-pe {
display: flex; align-items: baseline; justify-content: space-between;
font-size: 11px; color: var(--color-text-3);
}
.tk-fixado-pe strong { font-size: 12.5px; color: var(--color-text-2); }
.tk-selo-fixado { display: flex; color: var(--color-accent); flex-shrink: 0; }
/* ── Painel lateral de andamento ── */
.tk-lateral {
display: flex; flex-direction: column; gap: 14px;
position: sticky; top: 12px;
}
.tk-lat-card {
padding: 15px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--glass);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: var(--glow-soft);
}
.tk-lat-titulo {
display: block; margin-bottom: 10px;
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--color-text-3);
}
.tk-lat-geral .tk-barra { margin-top: 10px; }
.tk-lat-numero {
font-size: 32px; font-weight: 800; line-height: 1;
color: var(--color-text-1);
font-variant-numeric: tabular-nums;
}
.tk-lat-numero small { font-size: 15px; font-weight: 700; color: var(--color-text-3); margin-left: 2px; }
.tk-lat-linha-num {
display: flex; justify-content: space-between; gap: 10px;
margin-top: 10px;
font-size: 11.5px; color: var(--color-text-3);
}
.tk-lat-linha-num strong { color: var(--color-text-1); font-size: 13px; }
.tk-lat-lista {
display: flex; flex-direction: column;
max-height: 340px; overflow-y: auto;
margin: 0 -6px;
}
.tk-lat-item {
display: flex; align-items: center; gap: 9px;
width: 100%; padding: 7px 6px;
border: none; background: none; cursor: pointer;
border-radius: var(--radius-sm);
text-align: left;
}
.tk-lat-item:hover { background: var(--color-surface-2); }
.tk-lat-cor { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-lat-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tk-lat-nome {
display: flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 600; color: var(--color-text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-lat-nome svg { color: var(--color-accent); flex-shrink: 0; }
.tk-lat-pct {
display: flex; flex-direction: column; align-items: flex-end;
font-size: 12px; font-weight: 700; color: var(--color-text-2);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.tk-lat-pct small { font-size: 10px; font-weight: 500; color: var(--color-text-3); }
.tk-lat-vazio { font-size: 12px; color: var(--color-text-3); }
/* Abaixo de 1100px o painel vira uma faixa no fim da página: em tela estreita
ele espremia os cartões de projeto a ponto de caber um por linha. */
@media (max-width: 1100px) {
.tk-painel { grid-template-columns: 1fr; }
.tk-lateral { position: static; flex-direction: row; flex-wrap: wrap; }
.tk-lat-card { flex: 1; min-width: 260px; }
}
.tk-projeto-meta {
display: flex; gap: 14px;
font-size: 11.5px; color: var(--color-text-3);
}
.tk-projeto-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tk-vazio {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 60px 20px; text-align: center;
color: var(--color-text-3);
}
.tk-vazio strong { display: block; font-size: 14px; color: var(--color-text-1); }
.tk-vazio p { font-size: 12.5px; margin-top: 4px; max-width: 420px; line-height: 1.55; }
/* ── Quadro ── */
.page-content:has(.tk-board) { display: flex; flex-direction: column; overflow: hidden; }
.tk-quadro-header { flex-shrink: 0; }
.tk-quadro-cor { width: 10px; height: 30px; border-radius: 99px; flex-shrink: 0; }
.tk-board {
flex: 1;
min-height: 0;
display: flex;
align-items: flex-start;
gap: 14px;
overflow-x: auto; /* o quadro rola de lado; a página, nunca */
overflow-y: hidden;
padding-bottom: 12px;
}
.tk-coluna {
width: 290px;
flex-shrink: 0;
max-height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--glass-2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.tk-coluna-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 12px 10px;
cursor: grab; /* a coluna inteira se move pela cabeça */
user-select: none;
}
.tk-coluna-marca { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-coluna-nome {
flex: 1; min-width: 0; margin: 0;
font-size: 13px; font-weight: 700; color: var(--color-text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-coluna-conta {
flex-shrink: 0;
font-size: 11px; font-weight: 700;
color: var(--color-text-3);
background: var(--color-bg-2);
padding: 1px 7px; border-radius: 99px;
}
.tk-cards {
flex: 1;
min-height: 24px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 10px 4px;
}
.tk-coluna-vazia {
padding: 18px 10px;
text-align: center;
font-size: 12px;
color: var(--color-text-3);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
}
.tk-card {
padding: 10px 11px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tk-card:hover {
border-color: var(--color-border-2);
box-shadow: var(--shadow-sm);
}
.tk-card.feita { opacity: .55; }
.tk-card.feita .tk-card-titulo { text-decoration: line-through; }
.tk-card-topo { display: flex; align-items: flex-start; gap: 8px; }
.tk-card-titulo {
flex: 1; min-width: 0;
font-size: 13px; line-height: 1.45; color: var(--color-text-1);
word-break: break-word;
}
.tk-check {
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 1px;
display: flex; align-items: center; justify-content: center;
padding: 0;
border: 1.5px solid var(--color-border-2);
border-radius: 50%;
background: none;
cursor: pointer;
color: transparent;
transition: background .15s, border-color .15s, color .15s;
}
.tk-check:hover { border-color: var(--color-green); color: var(--color-green); }
.tk-check.on {
background: var(--color-green);
border-color: var(--color-green);
color: #fff;
}
.tk-card-pe {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-top: 9px;
}
.tk-prio {
font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
padding: 2px 7px; border-radius: 99px;
}
.tk-prio.baixa { background: var(--color-bg-2); color: var(--color-text-3); }
.tk-prio.media { background: var(--color-blue-lite); color: var(--color-blue); }
.tk-prio.alta { background: var(--color-orange-lite); color: var(--color-orange); }
.tk-prio.urgente { background: var(--color-red-lite); color: var(--color-red); }
.tk-prazo {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600;
color: var(--color-text-3);
font-variant-numeric: tabular-nums;
}
.tk-prazo.atrasada { color: var(--color-red); }
.tk-prazo.hoje { color: var(--color-orange); }
.tk-prazo.perto { color: var(--color-yellow); }
.tk-tem-desc { color: var(--color-text-3); }
.tk-dono {
margin-left: auto;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 9.5px; font-weight: 700; color: #fff;
background: var(--gradient-brand);
}
.tk-add-card {
margin: 4px 10px 10px;
padding: 8px;
display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
background: none;
font-size: 12px; color: var(--color-text-3);
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.tk-add-card:hover {
border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
color: var(--color-accent);
background: var(--color-accent-lite);
}
/* ── Compositor de tarefa ──
Título e descrição em texto grande e sem moldura, como se escreve num
documento; o resto vira pastilha, que só ganha cor quando alguém mexe.
Campo rotulado empilhado fazia toda tarefa parecer um formulário de
cadastro, sendo que quase sempre só se escreve o título. */
.tk-compor-box { width: min(660px, 96vw); }
.tk-compor-topo {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px 0;
}
.tk-compor-aba {
font-size: 14px; font-weight: 700; color: var(--color-text-1);
padding-bottom: 9px;
border-bottom: 2px solid var(--color-accent);
}
.tk-compor-corpo {
padding: 16px 20px 18px;
border-top: 1px solid var(--color-border);
margin-top: -1px;
overflow-y: auto;
display: flex; flex-direction: column;
}
.tk-compor-barra { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 11px;
border: 1px solid var(--color-border-2);
border-radius: 9px;
background: var(--color-surface);
color: var(--color-text-2);
font-size: 12.5px; font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.tk-pill:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-text-1); }
.tk-pill:disabled { opacity: .5; cursor: default; }
.tk-pill.on { color: var(--color-text-1); }
.tk-pill.pede { border-style: dashed; }
/* O lucide troca o por um