/* The Calls tab (biz-calls.js): a card per call, the way the product
   carousel's AI call card shows one. Uses base.css's --ink / --muted /
   --faint, voice-player.css for the recording, fraud-viz.css for the score. */
.cv-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.cv-seg{flex:0 0 auto}
.cv-search{position:relative;flex:1 1 260px;min-width:0;max-width:420px;margin-left:auto}
.cv-search[hidden]{display:none}
.cv-search .bi{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.cv-search input{width:100%;padding-left:36px}

.cv-list{display:flex;flex-direction:column;gap:10px}
.cv{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(147,197,253,.13);
  background:linear-gradient(180deg,rgba(22,26,52,.72),rgba(12,14,30,.72));
  transition:border-color .2s,box-shadow .25s}
.cv:hover{border-color:rgba(147,197,253,.26)}
.cv.open{border-color:rgba(129,140,248,.34);box-shadow:0 30px 70px -44px rgba(79,70,229,.75)}
.cv.is-live{border-color:rgba(45,212,191,.38);box-shadow:0 0 0 1px rgba(45,212,191,.08),0 30px 70px -44px rgba(45,212,191,.55)}
.cv.fresh{animation:cvIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes cvIn{from{opacity:0;transform:translateY(-6px)}}

.cv-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;width:100%;padding:14px 16px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.cv-head:focus-visible{outline:2px solid rgba(147,197,253,.6);outline-offset:-2px;border-radius:18px}
.cv-dir{flex:0 0 auto;padding:4px 8px;border-radius:7px;font:600 12px/1 'Geist',sans-serif;letter-spacing:.01em;color:#5EEAD4;background:rgba(45,212,191,.1)}
.cv-dir.out{color:#A5B4FC;background:rgba(129,140,248,.12)}
.cv-from{font:600 15px/1.2 'Geist',sans-serif;color:#F4F2FB;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-meta{min-width:0;flex:0 1 auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-head .pill{flex:0 0 auto}
.cv-head .pill:not(.fraud-pill){padding:3px 7px;border-radius:6px;text-transform:none;background:rgba(147,197,253,.08);border:1px solid rgba(147,197,253,.16)}
.cv-r{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-car{width:7px;height:7px;margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.cv.open .cv-car{transform:translateY(1px) rotate(225deg)}
.cv-snip{padding:0 16px 13px;margin-top:-4px;font-size:13px;line-height:1.5;color:var(--muted)}
.cv-snip mark,.cv-lines mark{background:rgba(250,204,21,.18);color:#FDE68A;border-radius:3px;padding:0 2px}

.cv-body{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;border-top:1px solid rgba(147,197,253,.1)}
.cv-body[hidden]{display:none}
.cv-norec{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.cv-norec .bi{width:15px;height:15px}

/* the fraud score, beside its curve */
.cv-fr{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:14px;padding:16px;border-radius:16px;border:1px solid rgba(147,197,253,.12);
  background:radial-gradient(120% 120% at 100% 0%,rgba(244,63,94,.07),transparent 60%),linear-gradient(180deg,rgba(13,10,28,.6),rgba(13,10,28,.3))}
.cv-fr[hidden]{display:none}
.cv-fs{display:flex;flex-direction:column;min-width:0}
.cv-fs.only{grid-column:1/-1;max-width:520px}
.cv-fk{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 'Geist',sans-serif;color:var(--muted)}
.cv-fk .bi{width:15px;height:15px;color:#FCA5A5}
.cv-fn{display:flex;align-items:baseline;gap:6px;margin:12px 0 2px}
.cv-fn b{font:700 46px/1 'Geist',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;transition:color .3s}
.cv-fn > span{font-size:14px;color:var(--faint)}
.cv-fn em{margin-left:6px;align-self:center;font:600 12px/1 'Geist',sans-serif;font-style:normal;padding:5px 9px;border-radius:100px;white-space:nowrap}
.cv-fn em:empty{display:none}
.cv-fn em.b-low{color:#6EE7B7;background:rgba(52,211,153,.12)}
.cv-fn em.b-elevated{color:#FCD34D;background:rgba(251,191,36,.12)}
.cv-fn em.b-high{color:#FDBA74;background:rgba(249,115,22,.14)}
.cv-fn em.b-critical{color:#FDA4AF;background:rgba(244,63,94,.16)}
.cv-fm{margin:12px 0 4px}
.cv-fsum{margin:10px 0 0;font-size:13px;line-height:1.5;color:#C9D2EE}
.cv-fsum[hidden]{display:none}
.cv-fc{min-width:0;align-self:center}
/* its own layer: the curve moves every frame while the call is on, and
   nothing around it has to be painted again for that */
.cv-plot{min-height:150px;will-change:transform}
.cv-plot .sfv{display:block;overflow:visible}

/* the transcript beside what the flow did */
.cv-cols{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:12px}
.cv-tr,.cv-ev{display:flex;flex-direction:column;min-width:0;border:1px solid rgba(147,197,253,.12);border-radius:14px;background:rgba(255,255,255,.02)}
.cv-trh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(147,197,253,.09);font:600 12.5px 'Geist',sans-serif;color:#F4F2FB}
.cv-trh .bi{width:15px;height:15px;color:#A5B4FC}
.cv-trh em{margin-left:auto;font-style:normal;font-weight:400;font-size:12px;color:var(--faint)}
.cv-lines,.cv-tl{list-style:none;margin:0;padding:6px;max-height:320px;overflow-y:auto;scrollbar-width:thin}
.cv-lines li{display:grid;grid-template-columns:34px 64px minmax(0,1fr);gap:8px;padding:6px 8px;border-radius:9px;font-size:12.5px;line-height:1.5;color:#D9DCEB;transition:opacity .25s,background .2s}
.cv-lines time{color:var(--faint);font-variant-numeric:tabular-nums}
.cv-lines b{font-weight:600;color:#A5B4FC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-lines li.sp1 b{color:#5EEAD4}
.cv-lines li.cv-wait{display:block;color:var(--faint);padding:10px}
/* transcripts are off in Settings: said where the transcript would be */
.cv-lines li.cv-off{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 12px;line-height:1.5}
.cv-lines li.cv-off b{color:#F4F2FB;white-space:normal}
.cv-lines li.cv-off span{color:var(--muted)}
.cv-lines li.cv-off .btn{margin-top:4px}
.cv-cols.seekable .cv-lines li[data-s]{cursor:pointer}
.cv-cols.seekable .cv-lines li[data-s]:hover{background:rgba(99,102,241,.08)}
.cv-tl li{display:grid;grid-template-columns:18px 36px minmax(0,1fr);column-gap:8px;align-items:start;padding:7px 8px;border-radius:9px;font-size:12.5px;line-height:1.45;transition:opacity .25s,background .2s}
.cv-tl li + li{border-top:1px solid rgba(147,197,253,.06)}
.cv-ic{display:grid;place-items:center;height:18px;color:#8E9AC6}
.cv-ic .bi{width:15px;height:15px}
.cv-tl li.ev-ok .cv-ic{color:#5EEAD4}
.cv-tl li.ev-ai .cv-ic{color:#C4B5FD}
.cv-tl li.ev-risk .cv-ic{color:#FB7185}
.cv-tl li.ev-end .cv-ic{color:var(--faint)}
.cv-t{padding-top:1px;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-x{min-width:0;color:#EEF1FA;overflow-wrap:anywhere}
.cv-x .pill{font-size:12px}
.cv-x .cc-sub{color:var(--faint)}
.cv-x .cc-note{display:block;margin-top:3px;color:var(--muted)}
/* playing back: what's been said and done so far is lit, the rest waits */
.cv-cols.following li[data-s]:not(.past){opacity:.38}
.cv-lines li.now,.cv-tl li.now{background:rgba(99,102,241,.13)}
.cv-lines li.new,.cv-tl li.new{animation:cvRow .45s cubic-bezier(.16,1,.3,1) both}
@keyframes cvRow{from{opacity:0;transform:translateY(6px)}}
.cv-tl li.ev-ai.new{animation:cvRow .45s cubic-bezier(.16,1,.3,1) both,cvAi 1.6s ease both}
@keyframes cvAi{0%{background:rgba(167,139,250,.18)}100%{background:transparent}}

.cv-pg:empty{display:none}
.cv-pg{margin-top:12px}
.cv-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:44px 20px;text-align:center;border:1px dashed rgba(147,197,253,.18);border-radius:18px}
.cv-empty .bi{width:30px;height:30px;color:#93C5FD;margin-bottom:6px}
.cv-empty b{font:600 15px 'Geist',sans-serif;color:var(--ink)}
.cv-empty span{font-size:13px;color:var(--muted);max-width:420px}

@media(max-width:820px){
  .cv-fr{grid-template-columns:minmax(0,1fr)}
  .cv-cols{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .cv-head{padding:13px 14px}
  .cv-meta{flex-basis:100%;order:5}
  .cv-r{flex-basis:100%;order:6;margin-left:0}
  .cv-car{margin-left:auto}
  .cv-body{padding:12px 12px 14px}
  .cv-search{max-width:none;flex-basis:100%}
  .cv-fn b{font-size:40px}
  .cv-lines li{grid-template-columns:32px minmax(0,1fr)}
  .cv-lines li b{grid-column:2}
  .cv-lines li span{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  .cv.fresh,.cv-lines li.new,.cv-tl li.new{animation:none}
}