:root{--bg:#f4f6f9;--panel:#fff;--line:#e3e7ee;--text:#1d2433;--muted:#6b7487;--accent:#1f6feb;--accent-weak:#e8f0fe;
--ok:#1a7f37;--warn:#b26a00;--bad:#cf222e;--in:#f1f3f7;--out:#dbeafe;--fb:#1877f2;--ig:#d62976;--wa:#25d366;--r:6px;
font:13px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--text);background:var(--bg)}
[data-theme=dark]{--bg:#0f1420;--panel:#171d2b;--line:#273044;--text:#e6e9f0;--muted:#8d97ab;--accent:#4c8dff;--accent-weak:#1b2a47;--in:#202839;--out:#1d3357}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{display:flex;flex-direction:column;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
.topbar{height:42px;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:600}.brand.big{font-size:18px;justify-content:center;margin-bottom:8px}
.logo{background:var(--accent);color:#fff;border-radius:5px;padding:2px 6px;font-size:11px;font-weight:700}
.tabs{display:flex;gap:2px;margin-left:8px}.tab{border:0;background:none;padding:6px 10px;border-radius:var(--r);cursor:pointer;color:var(--muted)}
.tab.active,.tab:hover{background:var(--accent-weak);color:var(--accent)}.tab .n{margin-left:4px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)}.sm{font-size:12px}.xs{font-size:11px}
.btn{border:1px solid var(--line);background:var(--panel);padding:5px 10px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:none}.btn.danger{color:var(--bad)}.btn.sm{padding:3px 8px;font-size:12px}.btn:disabled{opacity:.5;cursor:default}
.icon-btn{border:0;background:none;cursor:pointer;font-size:15px;color:var(--muted)}
.pill{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--in);color:var(--muted);white-space:nowrap}
.pill.ok{background:#dcfce7;color:var(--ok)}.pill.warn{background:#fff4d6;color:var(--warn)}.pill.bad{background:#ffe1e1;color:var(--bad)}
.pill.blue{background:var(--accent-weak);color:var(--accent)}
[data-theme=dark] .pill.ok{background:#12351f}[data-theme=dark] .pill.warn{background:#3a2c0b}[data-theme=dark] .pill.bad{background:#3d1518}
main{flex:1;min-height:0;overflow:auto}
input,select,textarea{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:5px 8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-weak);border-color:var(--accent)}
/* inbox */
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr) 270px;height:100%}
.pane{background:var(--panel);border-right:1px solid var(--line);min-height:0;display:flex;flex-direction:column}
.pane:last-child{border-right:0;border-left:1px solid var(--line)}.center{background:var(--bg);border-right:0}
.filters{padding:8px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;border:0;background:none;padding:4px 2px;cursor:pointer;font-size:12px;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--accent-weak);color:var(--accent);font-weight:600}
.chips{display:flex;gap:4px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:none;border-radius:99px;padding:2px 8px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;color:var(--muted)}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-weak)}
.list{overflow:auto;flex:1}
.conv{display:grid;grid-template-columns:28px 1fr auto;gap:2px 8px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.conv:hover{background:var(--in)}.conv.sel{background:var(--accent-weak);box-shadow:inset 3px 0 var(--accent)}
.conv .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv.unread .nm::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:5px;vertical-align:middle}
.conv .pv{grid-column:2/4;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .meta{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.conv .ic{grid-row:1/3}
.badge{background:var(--accent);color:#fff;border-radius:99px;font-size:10px;padding:0 6px;min-width:18px;text-align:center;font-weight:600}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;background:var(--in);color:var(--muted)}
.chi{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}.chi svg{width:14px;height:14px;fill:#fff}
.chi.sm{width:16px;height:16px}.chi.sm svg{width:9px;height:9px}
.chi.facebook{background:var(--fb)}.chi.instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}.chi.whatsapp{background:var(--wa)}
.chi.comment{position:relative}.chi .cm{position:absolute;right:-3px;bottom:-3px;background:var(--panel);border-radius:50%;font-size:9px;line-height:1;padding:1px}
.thead{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line);min-height:44px}
.thead .t{font-weight:600;font-size:14px}.thead .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.thead select{padding:3px 6px;font-size:12px}
.thread{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.day{align-self:center;font-size:11px;color:var(--muted);margin:6px 0}
.b{max-width:70%;padding:6px 10px;border-radius:10px;background:var(--in);white-space:pre-wrap;word-wrap:break-word;align-self:flex-start;border:1px solid var(--line)}
.b.out{align-self:flex-end;background:var(--out);border-color:transparent}.b .ft{font-size:10px;color:var(--muted);margin-top:2px;display:flex;gap:6px;justify-content:flex-end}
.b.failed{border:1px solid var(--bad)}.b.dry_run{border:1px dashed var(--warn)}
.draft{align-self:flex-end;max-width:75%;border:1px dashed var(--accent);background:var(--panel);border-radius:10px;padding:8px 10px}
.draft textarea{width:100%;min-height:76px;resize:vertical;margin:4px 0}.draft .row{display:flex;gap:6px;justify-content:flex-end}
.composer{background:var(--panel);border-top:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.composer textarea{width:100%;resize:none;min-height:56px;max-height:160px}
.composer .bar{display:flex;gap:6px;align-items:center}.composer .bar .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.canned{position:relative}.menu{position:absolute;bottom:30px;left:0;width:330px;max-height:260px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:5}
.menu div{padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--line)}.menu div:hover,.menu div.hl{background:var(--accent-weak)}
.menu b{color:var(--accent);margin-right:6px}
.side{overflow:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.side .card{padding:8px 10px}.card h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kv{display:grid;grid-template-columns:90px 1fr;gap:3px 6px;font-size:12px}.kv span:nth-child(odd){color:var(--muted)}
.who{display:flex;gap:8px;align-items:center}.who .av{width:36px;height:36px;font-size:13px;background:var(--accent-weak);color:var(--accent)}
.empty{display:grid;place-items:center;height:100%;color:var(--muted)}
/* pages */
.page{padding:12px;display:flex;flex-direction:column;gap:10px;max-width:1200px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.kpi span{color:var(--muted);font-size:12px}.kpi strong{display:block;font-size:20px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:top}th{color:var(--muted);font-weight:600}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}.form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:0}dialog::backdrop{background:rgba(10,15,25,.5)}
.login{display:flex;flex-direction:column;gap:10px;padding:22px;width:300px}.login label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.err{color:var(--bad);margin:0;min-height:16px;font-size:12px}
.toast{position:fixed;bottom:14px;right:14px;background:var(--text);color:var(--panel);padding:7px 12px;border-radius:var(--r);font-size:12px;z-index:20}
@media (max-width:1100px){.inbox{grid-template-columns:260px 1fr}.inbox .pane:last-child{display:none}.kpis{grid-template-columns:repeat(3,1fr)}}