*{box-sizing:border-box;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:#94a3b8;cursor:pointer;transition:all .15s;text-decoration:none;}
.nav-item:hover{background:#1e293b;color:#e2e8f0;}
.nav-item.active{background:#4f46e5;color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.35);}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.stat-card{background:#fff;border-radius:14px;padding:20px;border:1px solid #f1f5f9;box-shadow:0 1px 4px rgba(0,0,0,.04);}
table{width:100%;border-collapse:collapse;}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.06em;background:#f8fafc;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{background:#f1f5f9;color:#4f46e5;}
td{padding:11px 14px;font-size:13.5px;color:#374151;border-bottom:1px solid #f1f5f9;}
tr:hover td{background:#f8fafc;}
tr.selected td{background:#eef2ff;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s;white-space:nowrap;}
.btn-primary{background:#4f46e5;color:#fff;}.btn-primary:hover{background:#4338ca;}.btn-primary:disabled{background:#a5b4fc;cursor:not-allowed;}
.btn-green{background:#16a34a;color:#fff;}.btn-green:hover{background:#15803d;}.btn-green:disabled{background:#86efac;cursor:not-allowed;}
.btn-ghost{background:transparent;color:#64748b;}.btn-ghost:hover{background:#f1f5f9;}
.btn-danger{background:#ef4444;color:#fff;}.btn-danger:hover{background:#dc2626;}
.btn-sm{padding:4px 10px;font-size:12px;}
input,select,textarea{border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:13.5px;color:#111827;width:100%;outline:none;transition:border .15s,box-shadow .15s;background:#fff;}
input:focus,select:focus,textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12);}
textarea{resize:vertical;font-family:inherit;line-height:1.6;}
input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#4f46e5;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;z-index:100;}
.modal-box{background:#fff;border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.2);width:100%;max-width:500px;max-height:82vh;overflow-y:auto;}
.progress-bar{height:6px;border-radius:999px;background:#e2e8f0;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;transition:width .3s;}
#toast{position:fixed;bottom:80px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;}
.toast-item{padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:500;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.15);animation:slideIn .25s ease;}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.label{font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:5px;}
.field-group{margin-bottom:16px;}
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:#f1f5f9;}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;}
.tag-item{display:inline-flex;align-items:center;gap:5px;background:#eef2ff;color:#4338ca;border-radius:6px;padding:3px 10px;font-size:12.5px;font-weight:500;}
.tag-item button{background:none;border:none;color:#6366f1;cursor:pointer;padding:0;font-size:14px;line-height:1;}
/* Sessao 047: pilha de barras de status — antes #status-bar era um elemento
   unico compartilhado por todos os processos em segundo plano (mineracao,
   disparo, acoes em lote...). Agora e um container de pilha (#status-bar-stack)
   que recebe 1 linha (.status-bar-row) por processo ativo, criada
   dinamicamente pelo ui.js. Fechar uma linha nao afeta as outras, e a de
   baixo sobe sozinha por ser fluxo normal de bloco (sem position fixed). */
#status-bar-stack{flex-shrink:0;display:flex;flex-direction:column;}
.status-bar-row{background:#0f172a;padding:9px 24px;display:flex;align-items:center;gap:10px;border-bottom:3px solid transparent;transition:border-color .3s;}
.sb-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background .3s;}
@keyframes dotPulse{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(99,102,241,.8);}55%{transform:scale(1.5);opacity:.7;box-shadow:0 0 0 8px rgba(99,102,241,0);}100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(99,102,241,0);}}
.sb-dot.pulsing{animation:dotPulse .85s ease-in-out infinite;}
.sb-progress-wrap{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden;margin:0 4px;}
.sb-progress-fill{height:100%;border-radius:999px;background:#4f46e5;transition:width 1s linear;}
#bulk-bar{position:fixed;bottom:0;left:232px;right:0;background:#0f172a;border-top:2px solid #4f46e5;padding:14px 24px;display:none;align-items:center;gap:12px;z-index:50;box-shadow:0 -8px 32px rgba(0,0,0,.25);}
.sugestao-btn{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;font-size:12px;color:#64748b;cursor:pointer;transition:all .15s;white-space:nowrap;}
.sugestao-btn:hover{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe;}
.info-row{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid #f1f5f9;}
.info-row:last-child{border-bottom:none;}
.info-label{font-size:11px;font-weight:600;color:#94a3b8;letter-spacing:.04em;text-transform:uppercase;}
.info-value{font-size:13.5px;color:#1e293b;}
/* Sessao 039: chat-out ficou mais claro (indigo-200) — o fundo escuro antigo
   (#4f46e5) deixava os tiquinhos de status (enviado/entregue/lido) quase
   invisiveis. Texto escuro sobre fundo claro resolve o contraste. */
.chat-out{background:#c7d2fe;color:#1e293b;border-radius:14px 14px 2px 14px;padding:10px 14px;max-width:70%;font-size:13px;line-height:1.5;}
.chat-in{background:#f1f5f9;color:#1e293b;border-radius:14px 14px 14px 2px;padding:10px 14px;max-width:70%;font-size:13px;line-height:1.5;}
.row-actions{opacity:0;transition:opacity .12s;}
tr:hover .row-actions{opacity:1;}
@keyframes spinOnce{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin-once{animation:spinOnce .5s linear;}

/* ── Sessao 029: distincao visual de leads ja abordados vs prontos vs na fila ── */
tr.lead-abordado{opacity:.5;transition:opacity .15s;}
tr.lead-abordado:hover{opacity:.88;}
tr.lead-abordado.selected{opacity:1;}
tr.lead-pronto td{background:#faf5ff;}
tr.lead-pronto:hover td{background:#f3e8ff;}
tr.lead-fila td{background:#fffbeb;}
tr.lead-fila:hover td{background:#fef3c7;}
tr.selected.lead-pronto td,tr.selected.lead-fila td{background:#eef2ff;}