/* Operate › Leads, live (admin-leadslive.js, docs/LEADS_LIVE.md). The
   colours are the live floor's (live.css): every tone is a style.css token,
   so both themes work. A state sets --c (strong: border, dot), --c-soft
   (row tint, pill) and --c-text (text on the tint). */
[data-ll="hopper"] { --c: var(--pause); --c-soft: var(--pause-soft); --c-text: var(--pause-text); }
[data-ll="preview"] { --c: var(--accent); --c-soft: var(--accent-soft); --c-text: var(--accent-strong); }
[data-ll="dialing"], [data-ll="amd"], [data-ll="bot"] { --c: var(--machine); --c-soft: var(--machine-soft); --c-text: var(--machine-text); }
[data-ll="waiting"], [data-ll="connecting"], [data-ll="talking"] { --c: var(--call); --c-soft: var(--call-soft); --c-text: var(--call-text); }
[data-ll="hold"], [data-ll="wrap_up"] { --c: var(--warn); --c-soft: var(--warn-soft); --c-text: var(--warn-text); }
[data-ll="ending"] { --c: var(--border-strong); --c-soft: var(--panel-2); --c-text: var(--muted); }

.pill.ll-pill { background: var(--c-soft); color: var(--c-text); display: inline-flex; align-items: center; gap: 6px; }
.pill.ll-hidden { display: none; }
.ll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
[data-ll="dialing"] .ll-dot, [data-ll="amd"] .ll-dot { animation: ll-pulse 1.1s ease-in-out infinite; }
[data-ll="hold"] .ll-dot { animation: ll-pulse 2.4s ease-in-out infinite; }
@keyframes ll-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .35; } }

/* The row on a call stands out: its state's tint and a left bar. The
   hopper is marked lightly (the bar only). */
.leads-grid tr.ll-row td:first-child { box-shadow: inset 4px 0 0 var(--c); }
.leads-grid tr.ll-row:not([data-ll="hopper"]):not([data-ll="preview"]) td { background: var(--c-soft); }
.leads-grid tr.ll-row:not([data-ll="hopper"]):not([data-ll="preview"]) td:first-child strong { color: var(--c-text); }
.ll-sub { font-variant-numeric: tabular-nums; }
/* The live pill may be wider than the stored one: let the status cell wrap
   (the risk pill goes below) rather than widen the table. */
.leads-grid tr.ll-row .lead-status { flex-wrap: wrap; }
.leads-grid tr.ll-row .ll-sub { white-space: normal; }
.ll-stuck { color: var(--bad-text); font-weight: 700; }

/* A row that just changed flashes once. */
.leads-grid tr.ll-flash td { animation: ll-flash 1.2s ease-out; }
@keyframes ll-flash { 0% { background: var(--accent-soft); } 100% { } }

/* Live indicator, in the table's heading. */
.ll-ind { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800;
  padding: 3px 10px; border-radius: var(--pill); background: var(--pause-soft); color: var(--pause-text); white-space: nowrap; }
.ll-ind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ll-ind[data-state="live"] { background: var(--ok-soft); color: var(--ok-text); }
.ll-ind[data-state="live"]::before { background: var(--ok); animation: ll-pulse 1.6s ease-in-out infinite; }
.ll-ind[data-state="error"] { background: var(--warn-soft); color: var(--warn-text); }

/* "Now dialling": the leads in progress, above the table. */
.ll-strip { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px; background: var(--panel); }
.ll-strip.ll-off { padding: 4px 10px; }
.ll-strip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ll-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; cursor: pointer; }
.ll-empty { margin: 6px 0 2px; }
.ll-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-height: 220px; overflow-y: auto; }
.ll-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; padding: 6px 10px; border-radius: 10px;
  background: var(--c-soft); box-shadow: inset 4px 0 0 var(--c); cursor: pointer; }
.ll-item:focus-visible { outline: none; box-shadow: inset 4px 0 0 var(--c), var(--focus); }
.ll-item .pill.ll-pill { background: var(--panel); }
.ll-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ll-time { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ll-dot, .ll-ind::before, .leads-grid tr.ll-flash td { animation: none !important; }
}
/* On a tinted row the pill sits on the panel colour, so it stays a pill. */
.leads-grid tr.ll-row:not([data-ll="hopper"]):not([data-ll="preview"]) .pill.ll-pill { background: var(--panel); }