/* ============================================================
   Live agent mockup styles (hero + product demo)
   ============================================================ */
.agent-window{
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  width:100%;
}
.aw-bar{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--navy-line);background:rgba(255,255,255,.02);
}
.aw-dots{display:flex;gap:6px}
.aw-dots i{width:11px;height:11px;border-radius:50%;background:#33415c;display:block}
.aw-dots i:nth-child(1){background:#ff5f57}.aw-dots i:nth-child(2){background:#febc2e}.aw-dots i:nth-child(3){background:#28c840}
.aw-title{color:var(--on-navy);font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.aw-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#34D399;
  background:rgba(52,211,153,.12);padding:3px 9px;border-radius:999px;margin-left:auto}
.aw-live .pulse{width:7px;height:7px;border-radius:50%;background:#34D399;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* phase rail */
.phases{display:flex;gap:0;padding:0 16px;border-bottom:1px solid var(--navy-line);background:rgba(255,255,255,.015)}
.phase{flex:1;padding:11px 4px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#5b6781;position:relative;transition:color .3s}
.phase.on{color:#fff}
.phase::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:2px;background:transparent;border-radius:2px;transition:background .3s}
.phase.on::after{background:linear-gradient(90deg,var(--primary),var(--sky))}

.feed{padding:16px;display:flex;flex-direction:column;gap:11px;min-height:336px;max-height:336px;overflow:hidden}

.ev{background:var(--navy-3);border:1px solid var(--navy-line);border-radius:12px;padding:13px 14px;color:var(--on-navy)}
.ev.fi{opacity:0;transform:translateY(10px) scale(.99);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.ev.fi.vis{opacity:1;transform:none}
.ev-label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#8ea2c4;margin-bottom:9px;letter-spacing:.02em}

/* message */
.ev-msg .ev-top{display:flex;align-items:center;gap:10px}
.ev-msg .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(140deg,#7C3AED,#2563EB);
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ev-msg .who{display:flex;flex-direction:column;line-height:1.25}
.ev-msg .who b{font-size:14px}
.ev-msg .who span{font-size:11.5px;color:var(--on-navy-muted)}
.ev-msg .ch{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:#cfe9d6;background:rgba(22,163,74,.14);padding:4px 8px;border-radius:999px}
.ev-msg .subj{margin-top:11px;font-size:13.5px;color:#dbe2ee;line-height:1.5;font-style:italic}

/* triage */
.tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.t-badge.red{background:rgba(220,38,38,.16);color:#FCA5A5}
.t-badge.violet{background:rgba(124,58,237,.18);color:#C4B5FD}
.conf{flex:1;min-width:60px;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;position:relative}
.conf i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--sky),var(--primary));border-radius:99px;
  animation:fillbar .9s .15s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fillbar{to{right:8%}}
.conf-n{font-size:12.5px;font-weight:800;color:#fff}

/* intelligence */
.intel-row{display:flex;gap:16px;align-items:center}
.health{flex:none;width:150px}
.hbar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.hbar .from{position:absolute;inset:0 22% 0 0;background:#22c55e;border-radius:99px;opacity:.35;transition:inset .8s}
.hbar .to{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,#f59e0b,#ef4444);border-radius:99px;transition:inset 1s cubic-bezier(.16,1,.3,1)}
.hbar.drop .to{inset:0 59% 0 0}
.hmeta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--on-navy-muted)}
.hmeta b{color:#fff;font-weight:800}
.signals{flex:1;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.sig{font-size:11.5px;color:#dbe2ee;background:rgba(255,255,255,.06);padding:4px 9px;border-radius:999px;border:1px solid var(--navy-line)}
.mrr{margin-left:auto;font-size:18px;font-weight:800;color:#FCA5A5}
.mrr small{font-size:11px;font-weight:600;color:var(--on-navy-muted);margin-left:2px}

/* recommendation */
.ev-reco{border-color:rgba(96,165,250,.35);background:linear-gradient(180deg,rgba(37,99,235,.10),var(--navy-3))}
.reco-body{font-size:13.5px;line-height:1.55;color:#e7edf6}
.reco-body b{color:#fff}
.reco-actions{display:flex;align-items:center;gap:9px;margin-top:12px}
.mini-btn{font-family:var(--font);font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 16px;border:1px solid transparent;cursor:pointer;transition:.2s}
.mini-btn.primary{background:var(--primary);color:#fff}
.mini-btn.primary.done{background:rgba(22,163,74,.22);color:#86EFAC;border-color:rgba(22,163,74,.4)}
.mini-btn.ghost{background:transparent;color:#cbd5e1;border-color:var(--navy-line)}
.reco-why{margin-left:auto;font-size:12px;font-weight:600;color:#93c5fd}

/* act */
.ev-act{background:transparent;border:none;padding:0}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.done-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#86EFAC;
  background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.28);padding:6px 11px;border-radius:999px}
.measure{font-size:11.5px;color:var(--on-navy-muted);margin-top:10px;padding-left:2px}