/*
 * Live calls (canvas board 15). The list is the Conversations page's
 * (cl-*, cv-*: search, filters, table, two-line cells); Watch a call is the
 * call drawer (cl-drawer). Only what is new lives here. Prefix lv-.
 */

/* ---------- head: a quiet live pulse before the count ---------- */
.lv-sub[hidden] {
  display: none;
}
.lv-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lv-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ag-live);
}
.lv-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ag-live);
  animation: lv-ring 1.8s ease-out infinite;
}
@keyframes lv-ring {
  from {
    transform: scale(1);
    opacity: 0.5;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ---------- the list ---------- */
.lv-bar {
  margin-top: 0;
}
.lv-search {
  flex: 0 1 300px;
}
.lv-caller {
  font-weight: 500;
  color: var(--ag-ink);
  /* a masked number reads left to right in Arabic too: +971 56 ••• 7612 */
  direction: ltr;
  unicode-bidi: isolate;
}
.cv-table td.lv-watchcell,
.lv-watchcell {
  width: 1%;
  padding-inline: 4px 8px;
  text-align: end;
}
.ap-skin .lv-watch {
  height: 34px;
  gap: 6px;
  padding: 0 12px;
  font-size: 13.5px;
}
/* a new call slides in; an ended one dims, then leaves */
.lv-row--new td {
  animation: lv-in 0.5s ease-out both;
}
@keyframes lv-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.lv-row--ended td {
  color: var(--ag-muted);
  transition: opacity 0.4s ease;
}
.lv-row--ended {
  cursor: default;
}
.lv-row--ended:hover td {
  background: transparent;
}
.lv-row--ended .cv-dot {
  opacity: 0.55;
}

/* Now: the word in ink, the colour on its dot (a soft pulse while it is going on) */
.lv-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ag-ink);
  white-space: nowrap;
}
.lv-now__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ag-live);
  animation: kb-pulse 1.4s ease-in-out infinite;
}
.lv-now--running .lv-now__dot {
  background: var(--ag-test);
}
/* going to a person: the blue of "Sent to a person" in Conversations */
.lv-now--transfer .lv-now__dot {
  background: var(--ag-i-blue);
}
.lv-now--ringing .lv-now__dot {
  background: var(--ag-dot);
}
.lv-now--ended {
  color: var(--ag-muted);
}
.lv-now--ended .lv-now__dot {
  background: var(--ag-dot);
  animation: none;
}

/* ---------- Watch a call ---------- */
.lv-agent {
  color: var(--ag-ink-2);
}
.lv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  padding: 0 8px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--ag-line);
  background: var(--ag-card);
  font-size: 12px;
  font-weight: 500;
  color: var(--ag-ink);
}
.lv-live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-red);
  animation: kb-pulse 1.2s ease-in-out infinite;
}
.lv-live--ended .lv-live__dot {
  background: var(--ag-dot);
  animation: none;
}
.lv-body {
  gap: 16px;
}
/* no tabs under the head here: the facts sit close under it */
.lv-drawer .cl-drawer__body {
  padding-top: 6px;
}
.lv-body > [data-ended]:empty {
  display: none;
}
/* the call's facts, a hairline under them, then the transcript */
.lv-meta {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ag-line);
}
.lv-lines .cl-line {
  cursor: default;
}
.lv-in {
  animation: lv-in 0.35s ease-out both;
}
.lv-spin {
  animation: lv-spin 0.9s linear infinite;
  color: var(--ag-muted);
}
@keyframes lv-spin {
  to {
    transform: rotate(360deg);
  }
}
.lv-running {
  border-style: solid;
  background: var(--ag-well);
}
/* who speaks next: three soft dots */
.lv-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  padding-inline-start: 52px;
  font-size: 13px;
  color: var(--ag-muted);
}
.lv-next[hidden] {
  display: none;
}
.lv-dots {
  display: inline-flex;
  gap: 3px;
}
.lv-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ag-faint);
  animation: lv-dot 1.2s ease-in-out infinite;
}
.lv-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.lv-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes lv-dot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.lv-ended {
  margin-bottom: 8px;
}
.ap-skin .lv-ended__go,
.lv-ended__go {
  flex: none;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
.lv-drawer .drawer__foot {
  align-items: center;
}
.lv-readonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-inline-end: auto;
  font-size: 13px;
  color: var(--ag-muted);
}

@media (prefers-reduced-motion: reduce) {
  .lv-pulse::after,
  .lv-now__dot,
  .lv-live__dot,
  .lv-dots i,
  .lv-spin,
  .lv-row--new td,
  .lv-in {
    animation: none;
  }
}

/* ---------- the list, agent first (2 Oct 2026): an agent's row, its calls under it ---------- */
.lv-group th {
  padding: 18px 12px 8px;
  text-align: start;
  font-weight: 400;
  border-bottom: 1px solid var(--ag-line);
}
.lv-group:first-child th {
  padding-top: 6px;
}
.lv-group__in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ag-face.lv-face {
  width: 30px;
  height: 30px;
  flex: none;
}
.lv-group__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ag-ink);
}
.lv-group__v {
  flex: none;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.lv-group__count {
  margin-inline-start: auto;
  flex: none;
  font-size: 13px;
  color: var(--ag-muted);
}
/* the calls sit a step in from their agent */
.lv-table td.lv-callercell {
  padding-inline-start: 52px;
}

/* ---------- Watch a call: head ---------- */
.ag-face.lv-hface {
  width: 44px;
  height: 44px;
  flex: none;
  margin-top: 1px;
}
.lv-drawer .drawer__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
}
.lv-drawer .lv-live {
  margin-inline-start: 12px;
}
.lv-hsub {
  gap: 4px;
}
.lv-hsub .lv-caller {
  font-weight: 500;
  color: var(--ag-ink-2);
}

/* the call's facts: four quiet tiles, then the transcript */
.lv-tiles {
  display: grid;
  /* Channel (disc + Inbound) · Version · Now ("Running: Check card status · 1:23" needs the room) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.8fr);
  gap: 8px;
  margin: 0 0 4px;
}
.lv-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
}
.lv-tile dt {
  font-size: 12px;
  color: var(--ag-muted);
}
.lv-tile dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ag-ink);
  white-space: nowrap;
}
.lv-tile dd svg {
  flex: none;
  color: var(--ag-muted);
}
/* the channel disc keeps its own colours (the rule above greys loose icons only) */
.lv-tile dd .cv-dot svg {
  color: inherit;
}
.lv-tile .cv-channel {
  gap: 6px;
}
@media (max-width: 559px) {
  .lv-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lv-table td.lv-callercell {
    padding-inline-start: 12px;
  }
}
/* screen-reader-only labels in the head stay inside the scrolling frame (no page-wide scroll on phones) */
.lv-page .cl-frame {
  position: relative;
}

/* Now: what is happening, then how long ("Talking · 1:23"), 3 Oct 2026 */
.lv-nowcell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.lv-nowcell__sep {
  color: var(--ag-muted);
}
.lv-nowcell__len {
  color: var(--ag-ink-2);
  font-variant-numeric: tabular-nums;
}
.lv-tile [data-tstate] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Watch a call: head and status card (3 Oct 2026, the call drawer's shape) ---------- */
.lv-drawer .drawer__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.lv-htitle {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  direction: ltr;
  unicode-bidi: isolate;
}
.lv-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--ag-btn-line);
  background: var(--ag-card);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ag-ink-2);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
a.lv-pill:hover {
  background: var(--ag-hover);
  border-color: var(--ag-dot);
  color: var(--ag-ink);
}
.lv-pill--first {
  color: var(--ag-muted);
}
.lv-drawer .lv-live {
  margin-inline-start: 0;
}
.lv-hline {
  gap: 8px;
  margin-top: 2px;
}
.lv-hline .cv-channel {
  gap: 6px;
  color: var(--ag-ink-2);
  font-weight: 400;
}
.lv-hline .cv-dot {
  width: 18px;
  height: 18px;
}
.lv-hline .cv-dot svg {
  width: 9px;
  height: 9px;
}
.lv-hv {
  color: var(--ag-faint);
}

/* the status card: what is happening and for how long, then three facts */
.lv-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
}
.lv-card__now {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lv-card__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ag-live);
  animation: kb-pulse 1.4s ease-in-out infinite;
}
.lv-live--ended ~ .lv-card__dot,
.lv-card--ended .lv-card__dot {
  background: var(--ag-dot);
  animation: none;
}
.lv-card__state {
  font-size: 15px;
  font-weight: 600;
  color: var(--ag-ink);
}
.lv-card__len {
  margin-inline-start: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--ag-ink);
}
.lv-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.lv-card__meta dt {
  font-size: 12px;
  color: var(--ag-muted);
}
.lv-card__meta dd {
  margin: 4px 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ag-ink);
}
.lv-card__sub {
  font-weight: 400;
  color: var(--ag-muted);
}
.lv-card__meta .cv-channel {
  gap: 6px;
}
.lv-card__meta .cv-dot {
  width: 18px;
  height: 18px;
}
.lv-card__meta .cv-dot svg {
  width: 9px;
  height: 9px;
}
@media (prefers-reduced-motion: reduce) {
  .lv-card__dot {
    animation: none;
  }
}
@media (max-width: 559px) {
  .lv-card__meta {
    grid-template-columns: 1fr 1fr;
  }
}
.lv-card {
  gap: 4px;
  padding: 14px 18px;
}
.lv-card__since {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 12.5px;
  color: var(--ag-muted);
}

/* ---------- one flat list (3 Oct 2026, Ameer's reference) ----------
   Call (disc + arrow) · Agent (name, faint version) · Caller · Now · Length (to the end) */
.lv-table td.lv-callcell,
.lv-table th:first-child {
  width: 72px;
}
.lv-agent {
  color: var(--ag-ink);
  font-weight: 500;
}
.lv-v {
  margin-inline-start: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ag-muted);
}
.lv-caller {
  font-weight: 400;
  color: var(--ag-ink-2);
}
.lv-table th:nth-child(4) {
  width: 34%;
}
.lv-table th:nth-child(5),
.lv-table td.lv-lencell {
  width: 80px;
  text-align: end;
}
.lv-lencell .cv-mono {
  color: var(--ag-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Watch a call in the big window (3 Oct 2026): the same window as a
   conversation and Customer 360 (views.css); only what is live is styled here ---------- */
.lv-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lv-state__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ag-red);
  animation: kb-pulse 1.2s ease-in-out infinite;
}
.lv-win--ended .lv-state__dot {
  background: var(--ag-dot);
  animation: none;
}
.lv-win .lv-scroll > [data-ended]:empty {
  display: none;
}
.lv-win .lv-lines {
  margin: 0;
}
.lv-win .lv-lines .cl-line {
  cursor: default;
}
.lv-win .cd-at {
  cursor: default;
}
.lv-win .lv-next {
  margin-top: 14px;
  padding-inline-start: 38px;
}
.lv-win .lv-running {
  background: var(--ag-well);
}
.lv-cust {
  margin: 4px 0 0;
  font-size: 13.5px;
}
.lv-win .lv-readonly {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--ag-line);
}
@media (prefers-reduced-motion: reduce) {
  .lv-state__dot {
    animation: none;
  }
}

/* ---------- problems now (3 Oct 2026, actionable alerts) ---------- */
/* the Now cell: what is happening, the red tag under it */
.lv-nowcell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.lv-nowcell .cl-alert-tag {
  font-variant-numeric: tabular-nums;
}
/* "2 calls have a problem now. Show them" above the table */
.lv-problems {
  margin-bottom: 12px;
}
/* in line, not yet over the limit: a quiet dot, like Ringing */
.lv-now--waiting .lv-now__dot {
  background: var(--ag-dot);
}
/* Watch: the red line at the top of the transcript, its cause and the fix */
.lv-problem {
  margin-bottom: 12px;
}
.lv-problem:empty {
  display: none;
}
.lv-problem .cl-alert-banner {
  margin: 0;
}
.lv-problem .cl-alert-banner__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ap-skin .lv-problem .ag-btn,
.lv-problem .ag-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  flex: none;
}
.lv-problem__alert {
  flex: none;
  font-size: 13px;
  font-weight: 500;
}