/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg-base:     #0a0e14;
  --bg-surface:  #0f1520;
  --bg-raised:   #151d2b;
  --bg-hover:    #1a2438;

  --border:      rgba(255,255,255,0.07);
  --border-md:   rgba(255,255,255,0.12);

  --accent-green:  #00e5a0;
  --accent-blue:   #3b9eff;
  --accent-amber:  #f5a623;
  --accent-red:    #ff4d6a;
  --accent-purple: #a78bfa;

  --text-primary:   #e2eaf5;
  --text-secondary: #7a8fa8;
  --text-muted:     #3d5068;

  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'IBM Plex Sans', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-sans); font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }

/* ── App Shell ─────────────────────────────────────────── */
.app-shell { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar { width:214px; min-height:100vh; background:var(--bg-surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-logo { display:flex; align-items:center; gap:10px; padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.logo-icon { width:30px; height:30px; border-radius:6px; background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.25); display:flex; align-items:center; justify-content:center; font-size:14px; }
.logo-name { font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:-.3px; }
.logo-sub  { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.sidebar-nav { flex:1; padding:10px 8px; }
.nav-item { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:6px; margin-bottom:2px; font-size:13px; font-weight:500; color:var(--text-secondary); transition:all .15s; }
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { background:rgba(0,229,160,.08); color:var(--accent-green); }
.nav-icon { font-size:14px; width:18px; text-align:center; }
.sidebar-footer { padding:10px 8px; border-top:1px solid var(--border); }
.user-info { padding:6px 9px 10px; }
.user-name { font-size:12px; font-weight:500; }
.user-role { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }
.btn-logout { display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:6px; font-size:12px; color:var(--text-muted); transition:all .15s; }
.btn-logout:hover { background:rgba(255,77,106,.08); color:var(--accent-red); }

/* ── Main content ──────────────────────────────────────── */
.main-content { flex:1; overflow:auto; }

/* ── Page ──────────────────────────────────────────────── */
.page { padding:22px; max-width:1200px; }
.page-split { display:flex; gap:16px; height:100vh; overflow:hidden; padding:22px; max-width:none; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.page-title { font-size:18px; font-weight:600; font-family:var(--font-mono); letter-spacing:-.5px; }
.page-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.split-main { flex:1; overflow:auto; min-width:0; }
.split-sidebar { flex-shrink:0; overflow-y:auto; }
.split-panel { width:360px; flex-shrink:0; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:auto; }

/* ── Cards ─────────────────────────────────────────────── */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.card-title { font-size:13px; font-weight:600; }
.card-sub { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.card-link { font-size:11px; color:var(--accent-green); }

/* ── Stat cards ────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat-card { position:relative; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; overflow:hidden; }
.stat-label { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.stat-value { font-size:26px; font-weight:600; font-family:var(--font-mono); line-height:1; letter-spacing:-1px; }
.stat-sub { font-size:11px; color:var(--text-muted); margin-top:5px; }
.stat-icon { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.stat-icon.blue   { background:rgba(59,158,255,.1);  border:1px solid rgba(59,158,255,.2); }
.stat-icon.green  { background:rgba(0,229,160,.1);   border:1px solid rgba(0,229,160,.2); }
.stat-icon.amber  { background:rgba(245,166,35,.1);  border:1px solid rgba(245,166,35,.2); }
.stat-icon.purple { background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.2); }

/* ── Grids ─────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Badges ────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:100px; font-size:10px; font-weight:500; font-family:var(--font-mono); white-space:nowrap; border:1px solid; }
.badge-green  { background:rgba(0,229,160,.1);   color:var(--accent-green);  border-color:rgba(0,229,160,.25); }
.badge-blue   { background:rgba(59,158,255,.1);  color:var(--accent-blue);   border-color:rgba(59,158,255,.25); }
.badge-amber  { background:rgba(245,166,35,.1);  color:var(--accent-amber);  border-color:rgba(245,166,35,.25); }
.badge-red    { background:rgba(255,77,106,.1);  color:var(--accent-red);    border-color:rgba(255,77,106,.25); }
.badge-purple { background:rgba(167,139,250,.1); color:var(--accent-purple); border-color:rgba(167,139,250,.25); }
.badge-gray   { background:rgba(255,255,255,.05); color:var(--text-secondary); border-color:var(--border-md); }

/* ── Pills (day pickers / filters) ────────────────────── */
.days-picker,.filter-pills { display:flex; gap:4px; }
.btn-pill { padding:4px 11px; border-radius:5px; font-size:11px; font-family:var(--font-mono); color:var(--text-muted); background:var(--bg-raised); border:1px solid var(--border-md); transition:all .15s; }
.btn-pill.active { background:rgba(0,229,160,.1); color:var(--accent-green); border-color:rgba(0,229,160,.25); }
.btn-pill:hover:not(.active) { color:var(--text-primary); border-color:var(--border-md); }

/* ── Tables ────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:9px 14px; text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); font-family:var(--font-mono); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:10px 14px; font-size:12px; border-bottom:1px solid var(--border); }
.clickable-row { cursor:pointer; transition:background .15s; }
.clickable-row:hover { background:var(--bg-hover); }
.empty-cell { text-align:center; padding:32px; color:var(--text-muted); }
.pagination { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-top:1px solid var(--border); }

/* ── Buttons ───────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--border-md); background:var(--bg-raised); color:var(--text-primary); transition:all .15s; text-decoration:none; }
.btn:hover { border-color:var(--border-md); background:var(--bg-hover); }
.btn-primary { background:rgba(0,229,160,.1); color:var(--accent-green); border-color:rgba(0,229,160,.3); }
.btn-primary:hover { background:rgba(0,229,160,.15); }
.btn-full { width:100%; justify-content:center; padding:10px; font-size:13px; font-weight:600; font-family:var(--font-mono); }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:11px; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.form-input { width:100%; padding:8px 11px; background:var(--bg-raised); border:1px solid var(--border-md); border-radius:6px; color:var(--text-primary); font-size:13px; font-family:var(--font-sans); outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--accent-green); }

/* ── Bars ──────────────────────────────────────────────── */
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label { font-size:11px; color:var(--text-secondary); min-width:60px; }
.bar-track { flex:1; height:6px; background:var(--bg-raised); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.bar-fill.green  { background:var(--accent-green); }
.bar-fill.red    { background:var(--accent-red); }
.bar-fill.blue   { background:var(--accent-blue); }
.bar-fill.amber  { background:var(--accent-amber); }
.bar-fill.purple { background:var(--accent-purple); }
.bar-value { font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); min-width:30px; text-align:right; }

/* ── Call rows ─────────────────────────────────────────── */
.call-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); transition:background .15s; cursor:pointer; }
.call-row:hover { background:var(--bg-hover); }
.call-row-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.call-row-icon.ai    { background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.2); color:var(--accent-purple); }
.call-row-icon.human { background:rgba(59,158,255,.1); border:1px solid rgba(59,158,255,.2); color:var(--accent-blue); }
.call-row-info { flex:1; min-width:0; }
.call-number { font-size:12px; font-family:var(--font-mono); }
.call-agent  { font-size:11px; color:var(--text-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-row-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.call-duration { font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); }

/* ── Agent cards (sidebar) ────────────────────────────── */
.agent-card { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:8px; margin-bottom:6px; border:1px solid var(--border); transition:all .15s; }
.agent-card:hover,.agent-card.active { border-color:rgba(0,229,160,.25); background:rgba(0,229,160,.04); }
.agent-card-icon { width:34px; height:34px; border-radius:7px; background:var(--bg-raised); border:1px solid var(--border-md); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.agent-card-icon.on { background:rgba(0,229,160,.1); border-color:rgba(0,229,160,.25); color:var(--accent-green); }
.agent-card-body { flex:1; min-width:0; }
.agent-card-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-card-engines { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.tag { font-size:10px; font-family:var(--font-mono); color:var(--text-muted); background:var(--bg-raised); padding:1px 5px; border-radius:3px; border:1px solid var(--border); }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.dot-green { background:var(--accent-green); box-shadow:0 0 6px var(--accent-green); }
.dot-gray  { background:var(--text-muted); }

/* ── Agent row (dashboard) ────────────────────────────── */
.agent-row { display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:1px solid var(--border); }
.agent-icon { width:32px; height:32px; border-radius:7px; background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.18); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.agent-info { flex:1; min-width:0; }
.agent-name    { font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-engines { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); margin-top:1px; }
.agent-status  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.agent-status.on  { background:var(--accent-green); box-shadow:0 0 5px var(--accent-green); }
.agent-status.off { background:var(--text-muted); }

/* ── Detail panel ─────────────────────────────────────── */
.detail-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:10px; color:var(--text-muted); font-size:12px; }
.detail-panel { height:100%; }
.detail-header { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--border); }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:4px 0; padding:12px 15px; border-bottom:1px solid var(--border); }
.meta-row { padding:7px 0; }
.meta-key { display:block; font-size:10px; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.meta-val { font-size:12px; color:var(--text-primary); }
.quality-bar-wrap { display:flex; align-items:center; gap:8px; padding:10px 15px; border-bottom:1px solid var(--border); }
.quality-track { flex:1; height:4px; background:var(--bg-raised); border-radius:2px; overflow:hidden; }
.quality-fill { height:100%; background:var(--accent-green); border-radius:2px; }
.conv-header { padding:10px 15px 6px; font-size:10px; color:var(--text-muted); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.conv-list { padding:0 10px 14px; display:flex; flex-direction:column; gap:7px; }
.turn { padding:8px 10px; border-radius:6px; }
.turn-user  { background:var(--bg-raised); border:1px solid var(--border); }
.turn-agent { background:rgba(0,229,160,.05); border:1px solid rgba(0,229,160,.12); }
.turn-meta { font-size:9px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; }
.turn-user  .turn-meta { color:var(--accent-blue); }
.turn-agent .turn-meta { color:var(--accent-green); }
.turn-text { font-size:12px; line-height:1.5; }

/* ── Config rows ───────────────────────────────────────── */
.cfg-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.cfg-key { font-size:11px; color:var(--text-muted); }
.cfg-val { font-size:11px; font-family:var(--font-mono); font-weight:500; }
.cfg-val.blue   { color:var(--accent-blue); }
.cfg-val.green  { color:var(--accent-green); }
.cfg-val.purple { color:var(--accent-purple); }
.cfg-val.amber  { color:var(--accent-amber); }
.cfg-val.gray   { color:var(--text-primary); }

/* ── Code block ────────────────────────────────────────── */
.code-block { font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); line-height:1.7; background:var(--bg-raised); padding:12px 14px; border-radius:6px; border:1px solid var(--border); white-space:pre-wrap; max-height:180px; overflow-y:auto; }

/* ── Alerts ────────────────────────────────────────────── */
.alert { padding:10px 14px; border-radius:6px; font-size:12px; margin:12px; }
.alert-error   { background:rgba(255,77,106,.08); border:1px solid rgba(255,77,106,.2); color:var(--accent-red); }
.alert-success { background:rgba(0,229,160,.08);  border:1px solid rgba(0,229,160,.2);  color:var(--accent-green); }

/* ── Login page ────────────────────────────────────────── */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-base); }
.grid-bg { position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%); }
.login-wrap { position:relative; width:100%; max-width:370px; padding:0 20px; }
.login-logo { text-align:center; margin-bottom:32px; }
.login-icon { width:48px; height:48px; border-radius:12px; background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.3); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 14px; }
.login-title { font-size:20px; font-weight:600; font-family:var(--font-mono); letter-spacing:-.5px; }
.login-sub   { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); margin-top:4px; }
.login-form  { background:var(--bg-surface); border:1px solid var(--border-md); border-radius:12px; padding:26px; }

/* ── Utils ─────────────────────────────────────────────── */
.mono      { font-family:var(--font-mono); }
.text-muted{ color:var(--text-secondary); }
.empty-state { padding:28px; text-align:center; color:var(--text-muted); font-size:12px; }
.animate-in { animation:slide-in-up .2s ease; }
@keyframes slide-in-up { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spin { to{transform:rotate(360deg)} }