:root{--p:#4f46e5;--c:#06b6d4;--bg:#f5f7fb;--dark:#111827;--muted:#6b7280}
body{background:var(--bg);color:var(--dark);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.login-bg{min-height:100vh;background:radial-gradient(circle at 20% 20%,rgba(79,70,229,.35),transparent 30%),radial-gradient(circle at 80% 10%,rgba(6,182,212,.30),transparent 25%),linear-gradient(135deg,#eef2ff,#ecfeff)}
.login-card{width:440px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-radius:32px;padding:42px;border:1px solid rgba(255,255,255,.8)}
.brand-bubble,.empty-call-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:26px;color:white;font-size:34px;background:linear-gradient(135deg,var(--p),var(--c));box-shadow:0 18px 45px rgba(79,70,229,.3)}
.crm-navbar{background:linear-gradient(135deg,#111827,#312e81);box-shadow:0 10px 30px rgba(17,24,39,.18)}
.crm-sidebar{width:250px;min-height:calc(100vh - 56px);background:white;border-right:1px solid #e5e7eb;padding:22px 14px;position:sticky;top:56px}
.crm-sidebar a{display:flex;align-items:center;gap:12px;text-decoration:none;color:#374151;padding:13px 16px;border-radius:18px;margin-bottom:6px;font-weight:700;transition:.18s}
.crm-sidebar a:hover{background:#eef2ff;color:var(--p);transform:translateX(4px)}
.crm-main{flex:1;padding:32px}.page-header,.agent-topbar,.agent-record-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}
h1{font-weight:850}.page-header p,.agent-topbar p,.agent-record-header p{color:var(--muted);margin:0}
.soft-card,.client-card,.result-card{background:white;border-radius:28px;padding:24px;border:1px solid #eef0f6;box-shadow:0 16px 45px rgba(15,23,42,.06);animation:rise .35s ease both}
.client-card{background:linear-gradient(135deg,#fff,#eef2ff)}.result-card{background:linear-gradient(135deg,#fff,#ecfeff);position:sticky;top:85px}
.metric-card{border-radius:28px;padding:24px;color:white;min-height:150px;background:linear-gradient(135deg,var(--p),#7c3aed);box-shadow:0 20px 45px rgba(79,70,229,.25)}
.metric-card.green{background:linear-gradient(135deg,#10b981,#059669)}.metric-card.orange{background:linear-gradient(135deg,#f59e0b,#ea580c)}.metric-card.purple{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.metric-card i{font-size:32px}.metric-card span{display:block;font-size:42px;font-weight:850;margin-top:12px}.metric-card small{font-weight:700}
.mini-stat{background:white;border-radius:22px;padding:18px;box-shadow:0 12px 32px rgba(15,23,42,.06);border-left:6px solid #64748b}.mini-stat strong{font-size:28px;display:block}.mini-stat span{color:var(--muted)}.mini-stat.ok{border-color:#10b981}.mini-stat.warn{border-color:#f59e0b}.mini-stat.danger{border-color:#ef4444}.mini-stat.purple{border-color:#8b5cf6}.mini-stat.orange{border-color:#fb923c}
.data-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px dashed #dbe1ea}.data-line span{color:var(--muted)}.data-line strong{text-align:right}
.script-block,.objection-block,.recording-text{background:#f8fafc;border-radius:20px;padding:18px;margin-bottom:14px;border:1px solid #e5e7eb}.objection-block{border-left:5px solid #f59e0b}
.json-box{background:#0f172a;color:#d1fae5;border-radius:20px;padding:18px;max-height:480px}.recording-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px;border-radius:18px;background:#f8fafc;margin-bottom:10px}
.timeline-item{border-left:4px solid var(--p);padding-left:16px;margin-bottom:18px}.timeline-item span{color:var(--muted);font-size:12px;display:block}.btn{font-weight:750}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:992px){.crm-sidebar{display:none}.crm-main{padding:18px}.page-header,.agent-topbar,.agent-record-header{flex-direction:column;align-items:flex-start}}


.crm-record-overlay-header {
  height: 56px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crm-record-overlay {
  position: fixed;
  inset: 72px 18px 18px 18px;
  z-index: 5000;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .35);
  overflow: hidden;
}

.crm-record-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #f6f7fb;
}


.crm-record-overlay{
  z-index:5000;
}

.agent-workspace-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:24px;
  align-items:start;
}

.agent-main-zone{
  min-width:0;
}

.agent-hero{
  background:linear-gradient(135deg,#111827,#312e81 58%,#0891b2);
  color:#fff;
  padding:24px;
  border-radius:30px;
  box-shadow:0 20px 55px rgba(15,23,42,.18);
}

.agent-hero h1{
  color:#fff;
  margin-bottom:6px;
}

.agent-hero p{
  color:rgba(255,255,255,.76);
}

.agent-kicker{
  display:inline-flex;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
  font-size:12px;
  margin-bottom:8px;
}

.agent-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.agent-status-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:22px;
  margin-top:22px;
}

.agent-call-card{
  min-height:520px;
}

.agent-state-card{
  align-self:start;
  position:sticky;
  top:78px;
}

.active-call-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#ecfeff,#eef2ff);
  border:1px solid #dbeafe;
  text-align:left;
}

.active-call-mini strong,
.active-call-mini span,
.active-call-mini small{
  display:block;
}

.agent-side-panel{
  position:sticky;
  top:78px;
  height:calc(100vh - 96px);
  background:rgba(255,255,255,.96);
  border:1px solid #e5e7eb;
  border-radius:30px;
  box-shadow:0 22px 60px rgba(15,23,42,.10);
  overflow:hidden;
  z-index:900;
}

.crm-record-overlay{
  z-index:5000;
}

.agent-side-header{
  padding:12px 14px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.agent-side-header span{
  display:block;
  font-size:10px;
  opacity:.78;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.agent-side-header strong{
  display:block;
  font-size:16px;
  font-weight:900;
}

.agent-side-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:7px;
  background:#f8fafc;
  border-bottom:1px solid #eef0f5;
}

.agent-side-tab{
  border:0;
  border-radius:12px;
  padding:8px 6px;
  background:#eef2ff;
  color:#4338ca;
  font-weight:800;
  font-size:11px;
  transition:.15s ease;
}

.agent-side-tab.active{
  background:#4f46e5;
  color:#fff;
  box-shadow:0 6px 14px rgba(79,70,229,.18);
}

.agent-side-content{
  padding:8px;
  overflow:auto;
  height:calc(100% - 92px);
}

.agent-side-item{
  background:#fff;
  border:1px solid #eef0f5;
  border-radius:14px;
  padding:8px 9px;
  margin-bottom:7px;
  box-shadow:0 3px 10px rgba(15,23,42,.035);
  transition:.12s ease;
}

.agent-side-item:hover{
  border-color:#c7d2fe;
  transform:translateY(-1px);
  box-shadow:0 7px 16px rgba(79,70,229,.07);
}

.agent-side-item strong{
  display:block;
  font-weight:800;
  color:#111827;
  margin-bottom:2px;
  font-size:12px;
  line-height:1.15;
}

.agent-side-meta{
  color:#6b7280;
  font-size:10.5px;
  line-height:1.15;
  margin-bottom:1px;
}

.agent-side-phone{
  font-weight:700;
  color:#0f172a;
  font-size:11.5px;
  line-height:1.15;
  margin-top:2px;
}

.agent-side-item .btn{
  padding:3px 8px;
  font-size:10.5px;
  border-radius:999px;
  margin-top:5px !important;
}

.agent-side-empty{
  padding:10px;
  border-radius:14px;
  background:#f8fafc;
  color:#6b7280;
  text-align:center;
  font-size:11px;
  font-weight:700;
}

@media(max-width:1320px){
  .agent-workspace-shell{
    grid-template-columns:1fr;
  }

  .agent-side-panel{
    position:relative;
    top:auto;
    height:auto;
    max-height:520px;
  }

  .agent-status-grid{
    grid-template-columns:1fr;
  }

  .agent-state-card{
    position:relative;
    top:auto;
  }
}