/*
 * views.css: one conversation and one customer in the same big window
 * (js/views/views.js, 3 Oct 2026). The transcript, rules and insights reuse
 * the call drawer's parts (cd-*, calls.css); the chips and cases Customer
 * 360's (cs-*, customers.css). Prefix vw-.
 */

/* ---------- the window ---------- */
.modal.vw {
  width: min(1380px, calc(100vw - 48px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  color: var(--ag-ink);
  font-family: var(--font-ui);
}

/* head: Back, where you are and who, the actions, Close */
.vw-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 16px 14px;
  padding-inline: 24px 20px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-head__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vw-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-crumbs__sep {
  color: var(--ag-dot);
}
.vw-crumbs__link {
  font: inherit;
  color: var(--ag-muted);
  border-radius: 4px;
}
.vw-crumbs__link:hover {
  color: var(--ag-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vw-crumbs__here {
  color: var(--ag-ink-2);
}
[translate="no"].vw-crumbs__link,
[translate="no"].vw-crumbs__here {
  font-family: var(--font-mono);
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
}
.vw-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.vw-h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.vw-h1[translate="no"],
.vw-caller {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.vw-caller {
  font: inherit;
  color: var(--ag-ink);
  border-radius: 4px;
}
button.vw-caller:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vw-meta {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  font-size: 13px;
  color: var(--ag-muted);
}
.vw-meta .cv-channel {
  gap: 6px;
}
.vw-meta .cv-dot,
.vw-tl__line .cv-dot {
  width: 18px;
  height: 18px;
}
.vw-meta .cv-dot svg,
.vw-tl__line .cv-dot svg {
  width: 9px;
  height: 9px;
}
.vw-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-skin .vw .ag-icon-btn,
.vw .ag-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.ap-skin .vw .vw-case,
.vw .vw-case {
  height: 36px;
  gap: 6px;
  padding: 0 12px;
  font-size: 13.5px;
}
.vw-back,
.vw-close {
  flex: none;
}

/* body: panes side by side, each scrolls on its own */
.vw-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.vw-grid {
  flex: 1;
  min-width: 0;
  display: grid;
}
.vw-grid--call {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
}
.vw-grid--cu {
  grid-template-columns: 280px minmax(0, 1.1fr) minmax(340px, 1fr);
}
.vw-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vw-pane + .vw-pane {
  border-inline-start: 1px solid var(--ag-line);
}
.vw-pane--who {
  background: var(--ag-well);
}
.vw-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 28px;
}
.vw-pane__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 0;
}
.vw-h {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ag-ink);
}
.vw-h--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vw-h--icon svg {
  color: var(--ag-muted);
}
.vw-tabs {
  flex: none;
  padding: 14px 22px 12px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-tabs .ag-tab {
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}
.vw-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vw-sec + .vw-sec {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ag-line);
}
.vw-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.vw-row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
}
.vw-row dt {
  font-size: 13px;
  color: var(--ag-muted);
}
.vw-row dd {
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ag-ink);
}
.vw-linkbtn {
  font: inherit;
  padding: 0;
  text-align: start;
}
.vw-alert {
  margin: 14px 22px 0;
}
.vw-missing {
  flex: 1;
  display: grid;
  place-items: center;
}

/* ---------- a call: the player and the transcript ---------- */
.vw-player {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--ag-line);
  background: var(--ag-card);
}
.vw-player .cd-play {
  width: 36px;
  height: 36px;
  flex: none;
}
.vw-player .cd-seek {
  flex: 1;
}
.vw-search {
  flex: 0 1 240px;
}
.vw .vw-search .cv-search__input {
  height: 34px;
  font-size: 13px;
}
.vw-scroll--tr {
  padding-top: 14px;
}
/* the transcript reads like a chat (calls.css cd-line), here inside the window */
.vw .cd-line {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  transition: opacity 0.15s ease;
}
.vw .cd-line--caller {
  justify-content: flex-end;
}
.vw .cd-line--event {
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.vw .cd-line.is-dim {
  opacity: 0.25;
}
.vw .cd-line.is-now .cd-bubble {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-ink) 14%, transparent);
}
.vw .cd-at {
  margin: 0;
  padding: 0 2px;
  background: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ag-faint);
  border-radius: 4px;
}
.vw .cd-at:hover {
  color: var(--ag-ink);
  text-decoration: underline;
}

/* a call: the Customer panel's card */
.vw-cucard {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
}
.vw-cucard__text {
  flex: 1;
  min-width: 0;
}
.vw-cucard__name {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.vw-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  color: var(--ag-ink-2);
}
.vw-avatar--lg {
  width: 56px;
  height: 56px;
}

/* ---------- a customer: who they are ---------- */
.vw-scroll--who {
  padding: 22px 20px 28px;
}
.vw-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 18px;
  text-align: center;
  border-bottom: 1px solid var(--ag-well-line);
}
.vw-who__name {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.vw-who__name[translate="no"],
.vw-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.vw-who__num {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: var(--ag-muted);
}
.vw .vw-who__num .ag-icon-btn {
  width: 28px;
  height: 28px;
}
.vw-who__chips {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.vw-rows--who {
  padding: 12px 0 4px;
}
.vw-rows--who .vw-row {
  grid-template-columns: 1fr auto;
}
.vw-rows--who .vw-row dd {
  text-align: end;
}
.vw-sec--who {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--ag-well-line);
}
.vw-caselist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-caseitem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  font-size: 13px;
}
.vw-caseitem .cv-mono {
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-caseitem__title {
  font-weight: 500;
}
.vw-caseitem .cl-outcome {
  grid-column: 2;
  font-size: 12.5px;
}

/* ---------- a customer: the timeline ---------- */
.vw-chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 22px 0;
}
.vw-tl {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-tl__item {
  display: grid;
  grid-template-columns: 40px 14px minmax(0, 1fr);
  gap: 0 10px;
  padding-bottom: 14px;
}
.vw-tl__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ag-muted);
}
.vw-tl__date b {
  font-size: 17px;
  font-weight: 600;
  color: var(--ag-ink);
}
/* the dotted line between calls, with a dot at each */
.vw-tl__rail {
  position: relative;
}
.vw-tl__rail::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -18px;
  inset-inline-start: 6px;
  border-inline-start: 1.5px dashed var(--ag-dot);
}
.vw-tl__item:last-child .vw-tl__rail::before {
  display: none;
}
.vw-tl__rail::after {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-start: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ag-card);
  border: 2px solid var(--ag-ink-2);
}
.vw-tl__card {
  min-width: 0;
  border-radius: 14px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vw-tl__card:hover {
  border-color: var(--ag-btn-line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.vw-tl__open {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 10px;
  text-align: start;
  font: inherit;
  color: inherit;
  border-radius: 14px;
}
.vw-tl__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vw-tl__title {
  font-size: 14px;
  font-weight: 600;
}
.vw-tl__len {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 12px;
  color: var(--ag-ink-2);
}
.vw-tl__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-tl__line .cv-channel {
  gap: 6px;
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-tl__agent {
  color: var(--ag-ink-2);
}
.vw-tl__tag {
  margin-block: 0;
  margin-inline: 4px 0;
}
.vw-tl__sum {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ag-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vw-tl__foot {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--ag-line);
  font-size: 12.5px;
}
.vw-none {
  padding: 20px 0;
}

/* ---------- a customer: insights and cases ---------- */
.vw-latest {
  padding: 14px;
  border-radius: 14px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
}
.vw-latest + .vw-sec {
  border-top: 0;
  padding-top: 0;
}
.vw-kases {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-kase {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--ag-line);
}
.vw-kase p {
  margin: 0;
}
.vw-kase__top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.vw-kase__title {
  font-size: 14px;
  font-weight: 600;
}
.vw-kase__desc {
  font-size: 13px;
}
.vw-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ---------- smaller screens: the panes stack ---------- */
@media (max-width: 1100px) {
  .vw-grid--cu {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .vw-grid--cu .vw-pane--side {
    display: none;
  }
}
@media (max-width: 860px) {
  .modal.vw {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .vw-body {
    overflow-y: auto;
  }
  .vw-grid--call,
  .vw-grid--cu {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .vw-grid--cu .vw-pane--side {
    display: flex;
  }
  .vw-pane + .vw-pane {
    border-inline-start: 0;
    border-top: 1px solid var(--ag-line);
  }
  .vw-scroll {
    overflow: visible;
  }
  .vw .vw-case {
    padding: 0 10px;
  }
  .vw .vw-case svg + * {
    display: none;
  }
}

/* fixes: the window sits outside the page's .ap, so give it what .ap gave */
.vw .ag-btn,
.vw .vw-case {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.vw .cv-search__input {
  width: 100%;
  padding-inline-start: 36px;
}
/* the old drawer's line box (grey fill, padding) is not used here */
.vw .cl-line,
.vw .cl-line.is-now {
  padding: 0;
  background: none;
  border-radius: 0;
}
.vw .cd-lines {
  gap: 14px;
}

/* ---------- the head, two rows (3 Oct 2026, Ameer's option B) ---------- */
.vw-head {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-block: 14px 18px;
  padding-inline: 24px 20px;
}
.vw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vw-bar .vw-crumbs {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}
.vw-bar [translate="no"].vw-crumbs__link,
.vw-bar [translate="no"].vw-crumbs__here {
  font-size: 13px;
}
.vw-bar .vw-crumbs__here {
  color: var(--ag-ink);
  font-weight: 500;
}
.vw-title {
  gap: 4px 10px;
}

/* a call: the customer on the start side, the call's facts on the end side */
.vw-callhead {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}
.vw-chwho {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.vw-chava {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 17px;
  font-weight: 600;
  color: var(--ag-ink-2);
}
.vw-chwho__text {
  min-width: 0;
}
.vw-chwho .vw-h1 {
  font-size: 22px;
  line-height: 28px;
}
.vw-chwho__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ag-muted);
}
.vw-chwho__num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.vw-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
}
.vw-fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block: 2px;
  padding-inline: 22px;
  border-inline-start: 1px solid var(--ag-line);
}
.vw-fact:last-child {
  padding-inline-end: 4px;
}
.vw-fact dt {
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-fact dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ag-ink);
  white-space: nowrap;
}
.vw-fact .cv-channel {
  gap: 7px;
}
.vw-fact .cv-dot {
  width: 20px;
  height: 20px;
}
.vw-fact .cv-dot svg {
  width: 10px;
  height: 10px;
}
.ag-face.vw-fact__face {
  width: 24px;
  height: 24px;
  flex: none;
}
@media (max-width: 1099px) {
  .vw-callhead {
    flex-direction: column;
    align-items: stretch;
  }
  .vw-facts {
    justify-content: flex-start;
  }
  .vw-fact:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}
@media (max-width: 639px) {
  .vw-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
  }
  .vw-fact {
    border-inline-start: 0;
    padding-inline: 0 12px;
  }
}

/* phone and small tablet (3 Oct 2026): the panes stack and the whole window
   scrolls; each pane is as tall as what it holds (they used to split the
   window's height and the transcript spilled over the pane under it) */
@media (max-width: 860px) {
  .vw-body {
    display: block;
  }
  .vw-grid {
    height: auto;
    align-content: start;
  }
  .vw-scroll {
    flex: none;
  }
}
/* the breadcrumb takes its own line above the buttons */
@media (max-width: 639px) {
  .vw-bar {
    flex-wrap: wrap;
  }
  .vw-bar .vw-crumbs {
    order: 3;
    flex-basis: 100%;
  }
  .vw-bar .vw-actions {
    margin-inline-start: auto;
  }
}
.lv-win .lv-readonly {
  display: flex;
}

/* ======================================================================
   One call (3 Oct 2026, Ameer's IA): a one-row top bar; the transcript on the
   start side (55%), Summary · Quality · Insights · Details on the end side (45%).
   ====================================================================== */
.modal.vw[data-kind="call"]:not(.lv-win) {
  width: min(1240px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  height: min(860px, calc(100dvh - 48px));
}
.vw[data-kind="call"]:not(.lv-win) .vw-head {
  padding-block: 14px;
}
/* the top bar: who, then the call's facts in one quiet line */
.vw-callbar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.vw-callbar__who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.vw-callbar__num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--ag-ink);
  border-radius: 4px;
}
.vw-callbar__name + .vw-callbar__num {
  font-weight: 500;
  color: var(--ag-ink-2);
}
a.vw-callbar__num:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vw-callbar__who .cd-count {
  font-size: 12.5px;
  font-weight: 500;
}
.vw-callbar__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 13px;
  color: var(--ag-ink-2);
}
.vw-callbar__sep {
  color: var(--ag-dot);
}
.vw-callbar__agent {
  color: var(--ag-ink);
  font-weight: 500;
}
.vw-callbar__v {
  margin-inline-start: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ag-muted);
}
.vw-dirmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vw-dirmark .cv-dot {
  width: 20px;
  height: 20px;
}
.vw-dirmark .cv-dot svg {
  width: 10px;
  height: 10px;
}
.vw-callbar__facts .cl-call__dir svg {
  width: 15px;
  height: 15px;
}
/* the call's Create service case is the secondary (white) button; the customer's stays dark */
.vw[data-kind="call"] .vw-actions .vw-case:not(.ag-btn--dark) {
  background: var(--ag-card);
}

/* the two panes: 55 / 45 */
.vw-grid--c2 {
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}
.vw-tab--tr {
  display: none;
}
/* the transcript's head: the title, and Search behind an icon */
.vw-trbar {
  min-height: 48px;
  padding-block: 8px 0;
}
.vw-trsearch {
  flex: 0 1 300px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vw-trsearch[hidden] {
  display: none;
}
.vw-trsearch .vw-search {
  flex: 1;
}
.vw-trsearch__n {
  flex: none;
  font-size: 12px;
  color: var(--ag-muted);
}
.vw .cd-line.is-hit .cd-bubble,
.vw .cd-line.is-hit .cd-event {
  box-shadow: 0 0 0 2px var(--ag-dot);
}
.vw .cd-line.is-hit-now .cd-bubble,
.vw .cd-line.is-hit-now .cd-event {
  box-shadow: 0 0 0 2px var(--ag-ink);
}
/* a turn reached from a jump button: lit for 2 s */
.vw .cd-line.is-flash .cd-bubble,
.vw .cd-line.is-flash .cd-event {
  animation: vw-flash 2s ease-out;
}
@keyframes vw-flash {
  0%,
  60% {
    box-shadow: 0 0 0 3px var(--ag-i-blue);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}
/* a silence between two turns: one quiet row */
.vw-silence {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-silence__line {
  flex: 1;
  height: 1px;
  background: var(--ag-line);
}
.vw-silence__text {
  flex: none;
  white-space: nowrap;
}
.vw-silence .cv-mono {
  font-size: 11.5px;
}

/* the end side's sections */
.vw-sec--c2 + .vw-sec--c2,
.vw-sec--c2 + .vw-fold,
.vw-fold + .vw-fold {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ag-line);
}
.vw-sec--c2 .vw-h {
  font-size: 13px;
  color: var(--ag-muted);
  font-weight: 600;
}
.vw-bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 21px;
  color: var(--ag-ink);
}
.vw-bullets li {
  padding-inline-start: 2px;
}
.vw-bullets li:has(.vw-jump) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vw-bullets li:has(.vw-jump)::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  margin-inline-start: -14px;
  margin-inline-end: 5px;
  border-radius: 50%;
  background: var(--ag-ink-2);
}
.vw-bullets:has(.vw-jump) {
  list-style: none;
}
.vw-bullets--took li::before {
  display: none;
}
.vw-bullets--took {
  padding-inline-start: 0;
}
.vw-bullets__text {
  flex: 1;
  min-width: 0;
}
.vw-jump {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ag-muted);
}
.vw-jump:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}
.vw-took {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: var(--ag-live);
}
.vw-took--fail {
  color: var(--ag-red);
}
.vw-took__name {
  font-weight: 500;
}
.vw-took__state {
  margin-inline-start: 8px;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-sub {
  margin: 10px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-muted);
}
.vw-critical {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ag-red);
}
.vw-notscored {
  margin-top: 20px;
}
/* Details */
.vw-copyid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vw-copy {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ag-muted);
}
.vw-copy:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}
.vw-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.vw-stack__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ag-muted);
}
.vw-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* below 900 px: full screen, one column, Transcript is the first tab */
@media (max-width: 899px) {
  .modal.vw[data-kind="call"]:not(.lv-win) {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  .vw-grid--c2 {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .vw-grid--c2 .vw-pane--side {
    order: 1;
    border-inline-start: 0;
  }
  .vw-grid--c2 .vw-pane--tr {
    order: 2;
  }
  .vw-tab--tr {
    display: inline-flex;
  }
  .vw-grid--c2:not([data-c2-tab="transcript"]) .vw-pane--tr {
    display: none;
  }
  .vw-grid--c2[data-c2-tab="transcript"] .vw-scroll--side {
    display: none;
  }
  .vw-grid--c2 .vw-tabs {
    overflow-x: auto;
  }
}
/* the top bar on a narrow window: the buttons on their own line at the end, who and the facts under them */
.vw-callbar__agent,
.vw-callbar__facts > span {
  white-space: nowrap;
}
@media (max-width: 899px) {
  .vw[data-kind="call"]:not(.lv-win) .vw-bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .vw[data-kind="call"]:not(.lv-win) .vw-callbar {
    order: 3;
    flex-basis: 100%;
  }
  .vw[data-kind="call"]:not(.lv-win) .vw-actions {
    margin-inline-start: auto;
  }
}
@media (max-width: 639px) {
  .vw-callbar__facts {
    gap: 6px 14px;
  }
  .vw-callbar__sep {
    display: none;
  }
}
@media (max-width: 899px) {
  .vw-grid--c2 .vw-tabs .ag-tabs {
    flex-wrap: nowrap;
    width: max-content;
  }
}

/* ---------- actionable alerts (3 Oct 2026): what went wrong on this call; a missed call ---------- */
.vw-problem {
  flex-wrap: wrap;
  row-gap: 8px;
}
.vw-problem .cl-alert-banner__text {
  min-width: 220px;
}
.vw-problem__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.ap-skin .vw-problem__fix,
.vw-problem__fix {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}
/* a missed call: nobody answered, so no player and no transcript */
.vw-missed {
  display: grid;
  place-items: start center;
  padding: 32px 24px;
  overflow: auto;
  height: 100%;
}
.vw-missed__card {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
}
.vw-missed__lead {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ag-ink);
}
.vw-missed__card .vw-rows {
  width: 100%;
}
.vw-missed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.vw-missed__alert {
  margin: 0;
  font-size: 13px;
  color: var(--ag-muted);
}

/* ======================================================================
   One call, redesigned (3 Oct 2026): the top bar leads with who the call was
   with; its facts sit under small labels. Quality opens with one verdict.
   ====================================================================== */
.vw[data-kind="call"]:not(.lv-win) .vw-head {
  padding-block: 16px;
}
.vw[data-kind="call"]:not(.lv-win) .vw-bar {
  align-items: center;
}
.vw-callbar {
  gap: 12px 32px;
  flex-wrap: nowrap;
}
.vw-cwho {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vw-cwho__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.vw-cwho__name {
  color: var(--ag-ink);
}
.vw-cwho__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.vw-cwho__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-cwho__sub .vw-cwho__num:hover,
.vw-cwho__calls:hover {
  color: var(--ag-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vw-cwho__calls {
  color: var(--ag-muted);
  border-radius: 4px;
}
/* the facts: label over value, a hairline between them */
.vw-cfacts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  row-gap: 10px;
}
.vw-cfact {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-inline: 18px;
  border-inline-start: 1px solid var(--ag-line);
}
.vw-cfact dt {
  font-size: 11.5px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.vw-cfact dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ag-ink);
  white-space: nowrap;
}
.vw-cfact .vw-callbar__v {
  margin-inline-start: 0;
}
.vw-cfact .cl-outcome {
  font-size: 13.5px;
}
@media (max-width: 1199px) {
  .vw-callbar {
    flex-wrap: wrap;
  }
  .vw-cfacts {
    flex-basis: 100%;
  }
  .vw-cfact:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}
@media (max-width: 639px) {
  .vw-cfacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vw-cfact {
    padding-inline: 0;
    border-inline-start: 0;
  }
  .vw-cfact dd {
    white-space: normal;
  }
}

/* ---------- Quality (v3): quiet cards, hairline rows, small numbers with a short thin bar ---------- */
.vw-q--green {
  color: var(--ag-live);
}
.vw-q--amber {
  color: var(--ag-note-ink);
}
.vw-q--red {
  color: var(--ag-red);
}
.vw-qcard {
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  background: var(--ag-card);
  overflow: hidden;
}
.vw-qcard + .vw-qcard {
  margin-top: 12px;
}
.vw-qcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-qcard__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ag-ink);
}
.vw-qcard__meta {
  font-size: 12.5px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.vw-qcard__meta [class*="vw-q--"] {
  font-family: var(--font-mono);
  font-weight: 600;
}
.vw-qrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 9px 16px;
  font-size: 13px;
}
.vw-qrow + .vw-qrow {
  border-top: 1px solid var(--ag-line);
}
.vw-qrow__label {
  min-width: 0;
  color: var(--ag-ink-2);
}
.vw-qrow__value {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ag-ink);
}
.vw-qrow--text {
  align-items: flex-start;
}
.vw-qrow--text .vw-qrow__value {
  flex: 1 1 auto;
  justify-content: flex-end;
  text-align: end;
  font-weight: 400;
}
/* a score: a short thin bar, then "8/10" */
.vw-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vw-meter__bar {
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--ag-track);
  overflow: hidden;
}
.vw-meter__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.vw-meter--green .vw-meter__bar i {
  background: var(--ag-live);
}
.vw-meter--amber .vw-meter__bar i {
  background: var(--ag-note-ink);
}
.vw-meter--red .vw-meter__bar i {
  background: var(--ag-red);
}
.vw-meter__n {
  min-width: 36px;
  text-align: end;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.vw-meter--green .vw-meter__n {
  color: var(--ag-live);
}
.vw-meter--amber .vw-meter__n {
  color: var(--ag-note-ink);
}
.vw-meter--red .vw-meter__n {
  color: var(--ag-red);
}
/* sentiment: a small dot and the word */
.vw-mood {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.vw-mood__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.vw-mood--positive .vw-mood__dot {
  background: var(--ag-live);
}
.vw-mood--neutral .vw-mood__dot {
  background: var(--ag-dot);
}
.vw-mood--negative .vw-mood__dot {
  background: var(--ag-red);
}
.vw-urg {
  font-weight: 500;
}
.vw-urg__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ag-muted);
}
/* rules: the mark, the name with its reason under it, and the severity of a failed one */
.vw-qrow--rule {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.vw-qrule__mark {
  flex: none;
  display: grid;
  margin-top: 2px;
  color: var(--ag-live);
}
.vw-qrow--rule.is-fail .vw-qrule__mark {
  color: var(--ag-red);
}
.vw-qrule__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vw-qrule__name {
  color: var(--ag-ink);
  font-weight: 500;
}
.vw-qrule__note {
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-qrule__sev {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--ag-red);
}
/* coaching: the heading with its mark, its points under it */
.vw-qrow--coach {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-block: 12px;
}
.vw-qcoach__h {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-muted);
}
.vw-qcoach__mark {
  display: grid;
}
.vw-qcoach__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-inline-start: 20px;
  font-size: 13px;
  line-height: 19px;
  color: var(--ag-ink);
}
.vw-qempty {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ag-muted);
}
/* the head in two lines: who and the actions, then the facts across the full width */
.vw[data-kind="call"]:not(.lv-win) .vw-bar {
  flex-wrap: wrap;
  row-gap: 14px;
}
.vw[data-kind="call"]:not(.lv-win) .vw-callbar {
  display: contents;
}
.vw[data-kind="call"]:not(.lv-win) .vw-back {
  order: 0;
}
.vw[data-kind="call"]:not(.lv-win) .vw-cwho {
  order: 1;
  flex: 1;
}
.vw[data-kind="call"]:not(.lv-win) .vw-actions {
  order: 2;
  margin-inline-start: auto;
}
.vw[data-kind="call"]:not(.lv-win) .vw-close {
  order: 3;
}
.vw[data-kind="call"]:not(.lv-win) .vw-cfacts {
  order: 4;
  flex: 1 1 100%;
  flex-wrap: nowrap;
  padding-top: 12px;
  border-top: 1px solid var(--ag-line);
}
.vw[data-kind="call"]:not(.lv-win) .vw-cfact {
  flex: 1 1 auto;
}
.vw[data-kind="call"]:not(.lv-win) .vw-cfact:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.vw-cfact .vw-callbar__agent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1199px) {
  .vw[data-kind="call"]:not(.lv-win) .vw-cfacts {
    flex-wrap: wrap;
  }
}
@media (max-width: 639px) {
  .vw[data-kind="call"]:not(.lv-win) .vw-cfacts {
    display: grid;
  }
}
@media (max-width: 639px) {
  .vw[data-kind="call"]:not(.lv-win) .vw-actions {
    order: 1;
  }
  .vw[data-kind="call"]:not(.lv-win) .vw-close {
    order: 2;
  }
  .vw[data-kind="call"]:not(.lv-win) .vw-cwho {
    order: 3;
    flex-basis: 100%;
  }
}
/* a reply slower than the Slow replies limit, in the transcript (class added by views.js) */
.cd-replied--slow {
  color: var(--ag-red);
  font-weight: 500;
}
@media (max-width: 899px) {
  /* the tab row scrolls inside the pane, the page never scrolls sideways */
  .vw-grid--c2 .vw-pane--side,
  .vw-grid--c2 .vw-tabs {
    min-width: 0;
    max-width: 100%;
  }
}

/* ======================================================================
   The call view as ONE component, and Customer 360 rebuilt (3 Oct 2026)
   ====================================================================== */
/* the mounted call view fills where it is put: its facts row, then the two panes */
.vw-call {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vw-call > .vw-grid {
  flex: 1;
  min-height: 0;
}
.vw-call > .vw-missed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.vw-callfacts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-callfacts .vw-cfacts {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 0;
  border: 0;
}
.vw-callfacts .vw-cfact {
  flex: none;
  padding-inline: 16px;
}
.vw-callfacts .vw-cfact:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.vw-callfacts__dl {
  flex: none;
  margin-inline-start: auto;
}
.vw-sentword {
  font-weight: 600;
}
.vw-sentword--positive {
  color: var(--ag-live);
}
.vw-sentword--neutral {
  color: var(--ag-muted);
}
.vw-sentword--negative {
  color: var(--ag-red);
}
/* the pop-up's head: who the call was with, then Create service case and Close */
.vw[data-kind="call"]:not(.lv-win) .vw-head {
  border-bottom: 1px solid var(--ag-line);
}
/* the player: back 10 s, play, forward 10 s */
.vw-skip {
  position: relative;
  flex: none;
}
.vw .vw-skip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.vw-skip__n {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-end: 2px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ag-muted);
}
/* the transcript's counts of what happened */
.vw-trbar__text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.vw-tcounts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-tcount {
  padding: 0 2px;
  border-radius: 4px;
  font: inherit;
  color: var(--ag-muted);
}
.vw-tcount:hover {
  color: var(--ag-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vw-tcount__sep {
  color: var(--ag-dot);
}
.vw-silence.is-flash .vw-silence__text {
  color: var(--ag-ink);
  font-weight: 600;
}

/* ---------- Customer 360: the top bar ---------- */
.vw[data-kind="customer"] .vw-head {
  gap: 6px;
}
.vw-cuhead {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.vw-cuhead__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  margin-inline-end: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}
.vw-cuhead__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ag-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.vw-cuhead__facts {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  font-size: 13px;
  color: var(--ag-muted);
}
.vw-cuhead__sep {
  color: var(--ag-dot);
}
.vw-cuhead__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ag-ink-2);
}
.vw[data-kind="customer"] .vw-actions .vw-case {
  background: var(--ag-card);
}

/* ---------- Customer 360: rail and main ---------- */
.vw-grid--c360 {
  grid-template-columns: 300px minmax(0, 1fr);
}
.vw-rail {
  min-height: 0;
  border-inline-end: 1px solid var(--ag-line);
  background: var(--ag-well);
}
.vw-rail + .vw-pane {
  border-inline-start: 0;
}
.vw-rail__top {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
}
.vw .vw-rail__search .cv-search__input {
  height: 34px;
  font-size: 13px;
  background: var(--ag-card);
}
.vw-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vw-rchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--ag-line);
  background: var(--ag-card);
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rchip:hover {
  color: var(--ag-ink);
}
.vw-rchip[aria-checked="true"] {
  border-color: var(--ag-dark);
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
}
.vw-rchip__n {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.75;
}
.vw-rail__day {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rail__day[hidden] {
  display: none;
}
.vw-rail__select {
  display: none;
}
.vw-rail__list {
  padding: 0 8px 16px;
}
.vw-rday {
  margin: 14px 8px 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ag-muted);
}
.vw-rrow {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-align: start;
  color: var(--ag-ink);
}
.vw-rrow:hover {
  background: var(--ag-hover);
}
.vw-rrow[aria-current="true"] {
  background: var(--ag-card);
  box-shadow: 0 0 0 1px var(--ag-line), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.vw-rrow--ov {
  align-items: center;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
}
.vw-rrow__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vw-rrow__l1,
.vw-rrow__l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.vw-rrow__l1 .cv-dot {
  width: 18px;
  height: 18px;
}
.vw-rrow__l1 .cv-dot svg {
  width: 9px;
  height: 9px;
}
.vw-rrow__l1 .cl-call__dir svg {
  width: 14px;
  height: 14px;
}
.vw-rrow__time {
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rrow__agent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.vw-rrow__l2 .cl-outcome {
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rrow__tag {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-rrow__end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.vw-rrow__len {
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-rrow__case {
  font-size: 11.5px;
  color: var(--ag-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.vw-c360main {
  min-width: 0;
  min-height: 0;
}
.vw-c360call {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---------- Overview ---------- */
.vw-ov {
  padding: 20px 24px 32px;
}
.vw-ovnums {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 0;
  row-gap: 12px;
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  background: var(--ag-card);
}
.vw-ovnum {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-inline: 18px;
  border-inline-start: 1px solid var(--ag-line);
}
.vw-ovnum:first-child {
  border-inline-start: 0;
}
.vw-ovnum dt {
  font-size: 11.5px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.vw-ovnum dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ag-ink);
  white-space: nowrap;
}
.vw-ovsec {
  margin-top: 22px;
}
.vw-ovsec__h {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ag-ink);
}
.vw-chart {
  position: relative;
  padding: 14px 16px 30px;
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  background: var(--ag-card);
}
.vw-chart__bars {
  height: 96px;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-chart__bar {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border-radius: 3px 3px 0 0;
}
.vw-chart__bar i {
  display: block;
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--ag-ink-2);
}
.vw-chart__bar:not(:disabled):hover i {
  background: var(--ag-ink);
}
.vw-chart__bar.is-zero i {
  background: var(--ag-track);
}
.vw-chart__bar:disabled {
  cursor: default;
}
.vw-chart__axis {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 8px;
  height: 16px;
}
.vw-chart__axis span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--ag-muted);
  white-space: nowrap;
}
[dir="rtl"] .vw-chart__axis span {
  transform: translateX(50%);
}
.vw-chart__axis span:first-child {
  transform: none;
}
.vw-chart__axis span:last-child {
  transform: translateX(-100%);
}
[dir="rtl"] .vw-chart__axis span:last-child {
  transform: translateX(100%);
}
.vw-ovlist {
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  background: var(--ag-card);
  overflow: hidden;
}
.vw-ovrow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ag-ink);
  text-align: start;
}
.vw-ovrow + .vw-ovrow {
  border-top: 1px solid var(--ag-line);
}
.vw-ovrow--btn:hover {
  background: var(--ag-hover);
}
.vw-ovrow__l {
  min-width: 0;
  color: var(--ag-ink-2);
}
.vw-ovrow__sep {
  margin-inline: 6px;
  color: var(--ag-dot);
}
.vw-ovrow__n {
  font-size: 12.5px;
  font-weight: 600;
}
.vw-ovcase__main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vw-ovcase__num {
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-ovcase__title {
  font-weight: 500;
}
.vw-ovcase__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.vw-ovcase.is-flash {
  animation: vw-flash-row 2s ease-out;
}
@keyframes vw-flash-row {
  0%,
  60% {
    background: var(--ag-hover);
  }
  100% {
    background: transparent;
  }
}

/* below 900 px: the rail is a select above the main area; the call view stacks as in Conversations */
@media (max-width: 899px) {
  .vw-grid--c360 {
    display: flex;
    flex-direction: column;
  }
  .vw-rail {
    flex: none;
    border-inline-end: 0;
    border-bottom: 1px solid var(--ag-line);
  }
  .vw-rail__list,
  .vw-rail__chips,
  .vw-rail__search {
    display: none;
  }
  .vw-rail__select {
    display: block;
    height: 38px;
  }
  .vw-ovnum {
    padding-inline: 14px;
  }
  .vw-callfacts {
    padding: 12px 16px;
    align-items: flex-start;
  }
  .vw-callfacts .vw-cfacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vw-callfacts .vw-cfact {
    padding-inline: 0;
    border-inline-start: 0;
  }
  .vw-ov {
    padding: 16px;
  }
  .vw-ovcase {
    flex-wrap: wrap;
  }
}

/* ======================================================================
   Customer 360 and the call view: the 8 fixes (3 Oct 2026)
   ====================================================================== */
/* (2) both windows: min(1440 px, the screen less 48 px) wide, the screen less 48 px tall */
.modal.vw[data-kind="call"]:not(.lv-win),
.modal.vw[data-kind="customer"] {
  width: min(1440px, calc(100vw - 48px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
}
/* (1) the rail: search, chips, Overview, then the calls filling the rest */
.vw-rail__search {
  flex: none;
}
.vw-rail {
  display: flex;
  flex-direction: column;
}
.vw-rail__top {
  padding-bottom: 6px;
}
.vw-rail__top .vw-rrow--ov {
  margin-top: 0;
}
.vw-rail__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 0;
}
.vw-rail__list .vw-rday:first-child {
  margin-top: 4px;
}
/* (6) the row's tag: short, never cut */
.vw-rrow__tag {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.vw-rrow__l2 {
  flex-wrap: wrap;
  row-gap: 4px;
}
/* (3) two columns; the end side is ONE scrolling column: the Issue, the tabs on one line, the tab */
.vw-pane--side {
  min-height: 0;
}
.vw-sidecol {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.vw-sidecol > .al-issue {
  margin: 16px 22px 0;
}
.vw-sidecol .vw-tabs {
  overflow-x: auto;
}
.vw-sidecol .vw-tabs .ag-tabs {
  flex-wrap: nowrap;
}
.vw-sidecol .vw-tabs .ag-tab {
  flex: none;
  white-space: nowrap;
}
.vw-sidepanel {
  padding: 18px 22px 28px;
}
.vw-c360call .vw-grid--c2 {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 45%);
}
/* (4) the call's facts: one row, smaller labels and gaps; Download at the end */
.vw-callfacts {
  padding-block: 10px;
  gap: 10px;
}
.vw-callfacts .vw-cfacts {
  flex-wrap: nowrap;
}
.vw-callfacts .vw-cfact {
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: 12px;
  gap: 2px;
}
.vw-callfacts .vw-cfact dt {
  font-size: 11px;
}
.vw-callfacts .vw-cfact dd {
  font-size: 13px;
}
.vw-callfacts .vw-cfact:first-child dd {
  min-width: 0;
}
.vw-callfacts .vw-callbar__agent {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1279px) {
  .vw-callfacts .vw-cfacts {
    flex-wrap: wrap;
  }
}
/* below 900 px: Transcript is a tab; its tab hides the Issue and the panel, not the tabs */
@media (max-width: 899px) {
  .vw-grid--c2[data-c2-tab="transcript"] .vw-scroll--side {
    display: block;
  }
  .vw-grid--c2[data-c2-tab="transcript"] .vw-sidepanel,
  .vw-grid--c2[data-c2-tab="transcript"] .vw-sidecol > .al-issue {
    display: none;
  }
  .vw-sidecol {
    overflow: visible;
  }
  .vw-c360call .vw-grid--c2 {
    grid-template-columns: none;
  }
  .vw-callfacts .vw-cfacts {
    flex-wrap: wrap;
  }
}
@media (max-width: 899px) {
  /* the select holds Overview too */
  .vw-rail [data-rov] {
    display: none;
  }
  .vw-cuhead {
    flex-wrap: wrap;
  }
  .vw-cuhead__name {
    flex-wrap: wrap;
    white-space: normal;
  }
}
@media (max-width: 899px) {
  /* a phone or a small tablet: both windows fill the screen */
  .modal.vw[data-kind="call"]:not(.lv-win),
  .modal.vw[data-kind="customer"] {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

/* ======================================================================
   Customer 360 window, redesigned (3 Oct 2026): the Home and Agents look.
   Cards are ag-card (white, soft border) with the 20 px ag-card__name, tiles
   are ag-tile, chips are hm-chip (home.css), Why they call is Analytics'
   aq-line panels (analytics.css). Only what is new lives here.
   ====================================================================== */
/* ---------- header: avatar, name, the number with Show and Copy; chips under it ---------- */
.vw-cuhead2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.hm-avatar.vw-cuava {
  width: 46px;
  height: 46px;
  font-size: 15px;
}
.vw-cuhead2__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vw-cuhead2__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}
.vw-cuhead2__name {
  margin: 0;
  margin-inline-end: 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.015em;
}
.vw-cuhead2__name[translate="no"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.vw-cuhead2__num {
  margin-inline-end: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ag-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.vw-cuhead2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hm-chip.vw-chip--amber {
  background: var(--ag-note);
  border-color: transparent;
  color: var(--ag-note-ink);
}
.hm-chip.vw-chip--green {
  background: color-mix(in srgb, var(--ag-live) 12%, transparent);
  border-color: transparent;
  color: var(--ag-live);
}
.hm-chip.vw-chip--live {
  gap: 6px;
}
.vw[data-kind="customer"] .vw-head {
  padding-block: 16px 18px;
}
/* Create service case is the primary (dark) button here */
.ap-skin .vw[data-kind="customer"] .vw-actions .vw-case.ag-btn--dark,
.vw[data-kind="customer"] .vw-actions .vw-case.ag-btn--dark {
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
  border-color: var(--ag-dark);
}

/* ---------- the calls column ---------- */
.vw-grid--c360 {
  grid-template-columns: 360px minmax(0, 1fr);
}
.vw-rail {
  background: var(--ag-card);
}
.vw-rail__top {
  gap: 10px;
  padding: 16px 16px 8px;
}
.vw-rail__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vw-rail__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.vw .vw-rail__find {
  width: 32px;
  height: 32px;
  margin-inline-start: auto;
}
.vw-rail__hint {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--ag-muted);
}
.vw-rail__hint[hidden],
.vw-rail__search[hidden] {
  display: none;
}
.vw-rail__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.vw-rchip {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border-color: var(--ag-set-line);
  background: var(--ag-set);
  font-size: 13px;
  font-weight: 500;
}
.vw-rchip[aria-checked="true"] {
  border-color: var(--ag-dark);
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
}
.vw-rail__day {
  gap: 10px;
}
.vw-rail__list {
  padding: 0 16px 20px;
}
.vw-rail__list .vw-rday {
  margin: 14px 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ag-muted);
}
/* a call (and Overview) as a row card that looks clickable */
.vw-rcard {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--ag-line);
  background: var(--ag-card);
  text-align: start;
  color: var(--ag-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vw-rcard:hover {
  background: var(--ag-hover);
  border-color: var(--ag-btn-line);
}
.vw-rcard[aria-current="true"] {
  background: var(--ag-hover);
  border-color: var(--ag-btn-line);
}
/* the chosen one: a 2 px bar on its start edge */
.vw-rcard[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: -1px;
  width: 2px;
  border-radius: 2px;
  background: var(--ag-dark);
}
.vw-rcard--ov {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.vw-rcard--ov[aria-current="true"] {
  font-weight: 700;
}
.vw-rcard__ovicon {
  display: grid;
  color: var(--ag-ink-2);
}
.vw-rcard__chev {
  flex: none;
  margin-inline-start: auto;
  color: var(--ag-faint);
}
.vw-rcard:hover .vw-rcard__chev {
  color: var(--ag-ink-2);
}
.vw-rcard__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vw-rcard__l1,
.vw-rcard__l2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  font-size: 13px;
}
.vw-rcard__l1 .cv-dot {
  width: 20px;
  height: 20px;
}
.vw-rcard__l1 .cv-dot svg {
  width: 10px;
  height: 10px;
}
.vw-rcard__time {
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rcard__agent {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-rcard__l2 .cl-outcome {
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.vw-rcard__missed,
.vw-rcard__l2 .vw-rcard__missed {
  color: var(--ag-red);
}
.vw-rcard__end {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.vw-rcard__len {
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-rcard__case {
  font-size: 11.5px;
  color: var(--ag-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Overview: grey page, white cards ---------- */
.vw-c360main {
  background: var(--ag-page);
}
.vw-ov {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 32px;
}
.vw-ovtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.vw-ovtile .ag-tile__in {
  gap: 10px;
  padding: 16px 18px;
  height: 100%;
}
.vw-ovtile .ag-tile__value {
  font-size: 26px;
  white-space: nowrap;
}
.vw-ovcard {
  gap: 16px;
}
/* the chart: one bar a day; the part with a problem in red at the bottom */
.vw-chart2__bars {
  height: 120px;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  border-bottom: 1px solid var(--ag-line);
}
.vw-chart2--few .vw-chart2__bars {
  grid-template-columns: repeat(var(--n), minmax(0, 56px));
  gap: 14px;
}
.vw-chart2__bar {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.vw-chart2__bar:disabled {
  cursor: default;
}
.vw-chart2__stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.vw-chart2__stack i {
  display: block;
  min-height: 3px;
  background: var(--ag-dark);
}
.vw-chart2__stack i.is-bad {
  background: var(--ag-red);
}
.vw-chart2__bar:not(:disabled):hover .vw-chart2__stack {
  opacity: 0.8;
}
.vw-chart2__axis {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ag-muted);
}
.vw-chart2--few .vw-chart2__axis {
  grid-template-columns: repeat(var(--n), minmax(0, 56px));
  gap: 14px;
}
.vw-chart2__axis span {
  white-space: nowrap;
  overflow: visible;
}
/* rows inside a card: soft panels, the whole panel opens the call */
.vw-ovrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vw-ovprob {
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: start;
  color: var(--ag-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vw-ovprob:hover {
  background: var(--ag-hover);
  border-color: var(--ag-btn-line);
}
.vw-ovprob__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.vw-ovprob__l1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.vw-ovprob__agent {
  font-weight: 600;
}
.vw-ovprob__open {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--ag-red);
}
.vw-why {
  width: 100%;
  text-align: start;
  cursor: pointer;
}
.vw-why:hover {
  background: var(--ag-hover);
  border-color: var(--ag-btn-line);
}
.vw-why .aq-rank__bar > span {
  background: var(--ag-dark);
}
.vw-ovcase2 {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.vw-ovcase2.is-flash {
  animation: vw-flash-row 2s ease-out;
}
.vw-ovcase2__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vw-ovcase2__l1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vw-ovcase2__num {
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-ovcase2__title {
  font-size: 14px;
  font-weight: 600;
}
.vw-ovcase2__meta {
  font-size: 12.5px;
  color: var(--ag-muted);
}

/* ---------- phone and small tablet: the calls above the Overview, the window scrolls ---------- */
@media (max-width: 899px) {
  .vw-grid--c360 {
    display: flex;
    flex-direction: column;
  }
  .vw-rail {
    border-inline-end: 0;
    border-bottom: 1px solid var(--ag-line);
  }
  .vw-rail [data-rov] {
    display: block;
  }
  .vw-rail__list,
  .vw-rail__chips {
    display: block;
  }
  .vw-rail__chips {
    display: flex;
  }
  .vw-rail__list {
    flex: none;
    max-height: none;
    overflow: visible;
  }
  .vw-rail__select {
    display: none;
  }
  .vw-ov {
    padding: 16px;
  }
  .vw-ovtiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vw-cuhead2__name {
    font-size: 20px;
  }
}
/* the header's buttons stay at the top-end corner, with or without the breadcrumb */
.vw[data-kind="customer"] .vw-actions {
  margin-inline-start: auto;
}
/* a tile's number stays left to right, placed at the start of the tile in Arabic too */
.vw-ovtile .ag-tile__value.vw-ltr {
  align-self: flex-start;
}

/* ======================================================================
   Customer 360, calmer (3 Oct 2026, Ameer: "too congested on the left,
   gaps on the right"): one balanced header row, a quiet calls list, a
   compact stats strip and the sections side by side.
   ====================================================================== */
/* ---------- header: who on the start side; facts, Create service case and Close on the end side ---------- */
.vw[data-kind="customer"] .vw-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding-block: 14px;
}
.vw[data-kind="customer"] .vw-bar {
  display: contents;
}
.vw[data-kind="customer"] .vw-crumbs {
  grid-row: 1;
  grid-column: 1 / -1;
}
.vw[data-kind="customer"] .vw-crumbs[hidden] {
  display: none;
}
.vw[data-kind="customer"] .vw-back {
  grid-row: 2;
  grid-column: 1;
}
.vw[data-kind="customer"] .vw-back[hidden] {
  display: none;
}
.vw[data-kind="customer"] .vw-title {
  grid-row: 2;
  grid-column: 2;
  min-width: 0;
}
.vw[data-kind="customer"] .vw-actions {
  grid-row: 2;
  grid-column: 3;
  margin: 0;
}
.vw[data-kind="customer"] .vw-close {
  grid-row: 2;
  grid-column: 4;
}
.vw-cuhead2 {
  align-items: center;
  gap: 12px;
}
.hm-avatar.vw-cuava {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.vw-cuhead2__text {
  flex: 1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.vw-cuhead2__name {
  font-size: 20px;
}
.vw-cuhead2__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--ag-muted);
}
.vw-cuhead2__sep {
  color: var(--ag-dot);
}
.vw-cuhead2__facts .hm-chip {
  height: 24px;
  margin-inline-start: 4px;
  font-size: 12.5px;
}
.vw-cuhead2 .cs-revealed {
  flex-basis: 100%;
}

/* ---------- calls column: a quiet list ---------- */
.vw-grid--c360 {
  grid-template-columns: 320px minmax(0, 1fr);
}
.vw-rail__top {
  gap: 12px;
  padding: 16px 12px 6px;
}
.vw-rail__head {
  padding-inline: 4px;
}
.vw-rail__title {
  font-size: 16px;
}
.vw-rail__head .hm-chip {
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
}
.vw-rail__chips {
  gap: 6px;
  padding-inline: 4px;
}
.vw-rchip {
  height: 26px;
  font-size: 12.5px;
}
.vw-rail__list {
  padding: 0 12px 16px;
}
.vw-rail__list .vw-rday {
  margin: 12px 8px 4px;
}
/* a row, not a box: a hover fill, a pointer, a faint chevron; the chosen one filled with its start bar */
.vw-rcard {
  margin-bottom: 2px;
  padding-block: 10px;
  padding-inline: 12px 10px;
  padding-inline: 12px 8px;
  border-color: transparent;
  background: transparent;
  border-radius: 10px;
}
.vw-rcard:hover {
  background: var(--ag-hover);
  border-color: transparent;
}
.vw-rcard[aria-current="true"] {
  background: var(--ag-hover);
  border-color: transparent;
}
.vw-rcard[aria-current="true"]::before {
  inset-block: 10px;
  inset-inline-start: 0;
}
.vw-rcard--ov {
  padding-block: 9px;
}
.vw-rcard__main {
  gap: 3px;
}
.vw-rcard__l1 {
  flex-wrap: nowrap;
  gap: 8px;
}
.vw-rcard__agent {
  font-weight: 500;
}
.vw-rcard__time {
  flex: none;
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-rcard__l2 {
  gap: 6px;
}
.vw-rcard__l2 .cl-outcome {
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-rcard__l2 .cl-alert-tag {
  height: 20px;
  font-size: 11.5px;
}
.vw-rcard__len {
  flex: none;
  align-self: flex-start;
  margin-top: 1px;
}
.vw-rcard__chev {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.vw-rcard:hover .vw-rcard__chev,
.vw-rcard[aria-current="true"] .vw-rcard__chev,
.vw-rcard:focus-visible .vw-rcard__chev {
  opacity: 1;
}
@media (hover: none) {
  .vw-rcard__chev {
    opacity: 1;
  }
}

/* ---------- Overview: a compact stats strip, smaller cards, sections side by side ---------- */
.vw-ov {
  gap: 14px;
  padding: 18px 20px 28px;
}
.ag-card.vw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin: 0;
  padding: 14px 4px;
}
.vw-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline: 18px;
  border-inline-start: 1px solid var(--ag-line);
}
.vw-stat:first-child {
  border-inline-start: 0;
}
.vw-stat dt {
  font-size: 12.5px;
  color: var(--ag-muted);
  white-space: nowrap;
}
.vw-stat dd {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vw-stat dd.vw-ltr {
  align-self: flex-start;
}
.ag-card.vw-ovcard {
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
}
.vw-ovcard .ag-card__name {
  font-size: 16px;
}
.vw-chart2__bars {
  height: 84px;
}
.vw-chart2--few .vw-chart2__bars,
.vw-chart2--few .vw-chart2__axis {
  grid-template-columns: repeat(var(--n), minmax(0, 40px));
}
.vw-ovpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.vw-ovpair .vw-ovcard {
  height: 100%;
}
.vw-ovrows,
.vw-ovcard .aq-lines {
  gap: 6px;
}
.vw-ovcard .ag-well {
  padding: 10px 12px;
}
.vw-ovcard .aq-line__icon {
  width: 28px;
  height: 28px;
}
@media (max-width: 1099px) {
  .vw-ovpair {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 899px) {
  .vw[data-kind="customer"] .vw-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .vw[data-kind="customer"] .vw-title {
    grid-row: 3;
    grid-column: 1 / -1;
  }
  .vw[data-kind="customer"] .vw-actions {
    grid-column: 2;
  }
  .vw[data-kind="customer"] .vw-close {
    grid-column: 3;
  }
  .vw-cuhead2__facts {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
  .ag-card.vw-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .vw-stat:nth-child(odd) {
    border-inline-start: 0;
  }
}
.vw-rcard__l2 .cl-outcome.vw-rcard__missed {
  color: var(--ag-red);
}
/* no name known: a quiet person icon in grey */
.hm-avatar.vw-cuava--anon {
  background: var(--ag-hover);
  color: var(--ag-muted);
}

/* the player's controls, calmer (3 Oct 2026): back 10 s, play, forward 10 s as one group;
   the skip buttons are plain icons with the "10" inside the arrow's circle */
.vw-player {
  gap: 14px;
}
.vw-ctrls {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.vw .vw-skip {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ag-ink-2);
  transition: background 0.15s ease, color 0.15s ease;
}
.vw .vw-skip:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}
.vw .vw-skip svg {
  grid-area: 1 / 1;
}
.vw .vw-skip__n {
  grid-area: 1 / 1;
  position: static;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}
.vw-player .cd-play {
  margin-inline: 2px;
}

/* ======================================================================
   Customer 360 calls column, v3 (3 Oct 2026): clear spacing, one rhythm.
   Every row: the time in its own column on the start side, the agent with
   the length on the end, one status line (outcome · problem in words),
   a faint chevron. The filters are a compact segmented row that fits.
   ====================================================================== */
.vw-grid--c360 {
  grid-template-columns: 340px minmax(0, 1fr);
}
.vw-rail__top {
  gap: 14px;
  padding: 18px 16px 10px;
}
.vw-rail__head {
  padding-inline: 4px 0;
}
.vw-rail__title {
  font-size: 16px;
  font-weight: 600;
}
/* filters: one row that always fits */
.vw-rail__chips {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-inline: 0;
  border-radius: 10px;
  background: var(--ag-set);
  border: 1px solid var(--ag-set-line);
  overflow: visible;
}
.vw-rseg {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ag-ink-2);
  white-space: nowrap;
}
.vw-rseg > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vw-rseg:hover {
  color: var(--ag-ink);
}
.vw-rseg[aria-checked="true"] {
  background: var(--ag-card);
  color: var(--ag-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--ag-line);
}
.vw-rseg__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ag-muted);
}
.vw-rail__list {
  padding: 4px 12px 20px;
}
.vw-rail__list .vw-rday {
  margin: 18px 12px 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ag-faint);
}
.vw-rail__list .vw-rday:first-child {
  margin-top: 8px;
}
[data-rov] {
  margin-inline: -4px;
}
/* the row */
.vw-rrow3 {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 16px;
  align-items: start;
  column-gap: 10px;
  min-height: 60px;
  padding-block: 11px;
  padding-inline: 12px 10px;
  padding-inline: 12px 10px;
  border-radius: 10px;
  text-align: start;
  color: var(--ag-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.vw-rrow3 + .vw-rrow3 {
  margin-top: 2px;
}
.vw-rrow3:hover {
  background: var(--ag-hover);
}
.vw-rrow3[aria-current="true"] {
  background: var(--ag-hover);
}
.vw-rrow3[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--ag-dark);
}
.vw-rrow3__time {
  padding-top: 1px;
  font-size: 12.5px;
  color: var(--ag-muted);
}
.vw-rrow3__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vw-rrow3__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.vw-rrow3__agent {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vw-rrow3__len {
  flex: none;
  font-size: 12px;
  color: var(--ag-muted);
}
.vw-rrow3__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ag-muted);
}
.vw-rrow3__status.is-bad {
  color: var(--ag-red);
}
.vw-rrow3__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-dot);
}
.vw-rrow3__dot--solved {
  background: var(--ag-live);
}
.vw-rrow3__dot--person {
  background: var(--ag-i-blue);
}
.vw-rrow3__dot--failed,
.vw-rrow3__dot--missed {
  background: var(--ag-red);
}
.vw-rrow3__sep {
  color: var(--ag-dot);
}
.vw-rrow3__prob {
  color: var(--ag-red);
  font-weight: 500;
}
.vw-rrow3__prob.is-done {
  color: var(--ag-muted);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: var(--ag-dot);
}
.vw-rrow3__chev {
  align-self: center;
  color: var(--ag-faint);
  transition: color 0.15s ease, transform 0.15s ease;
}
.vw-rrow3:hover .vw-rrow3__chev,
.vw-rrow3[aria-current="true"] .vw-rrow3__chev {
  color: var(--ag-ink-2);
}
/* Overview: the same row, its icon where the time goes */
.vw-rrow3--ov {
  min-height: 46px;
  align-items: center;
}
.vw-rrow3--ov .vw-rrow3__icon {
  display: grid;
  padding: 0;
  color: var(--ag-ink-2);
}
.vw-rrow3--ov[aria-current="true"] .vw-rrow3__agent {
  font-weight: 600;
}
@media (max-width: 899px) {
  .vw-rail__list {
    padding-bottom: 12px;
  }
}

/* the calls column: a hairline between the calls, flat rows (3 Oct 2026, Ameer: "some divider") */
.vw-rail__list {
  padding-inline: 0;
}
.vw-rail__list .vw-rday {
  margin: 0;
  padding: 18px 24px 8px;
}
.vw-rrow3 {
  border-radius: 0;
  padding-inline: 24px 16px;
}
.vw-rrow3 + .vw-rrow3 {
  margin-top: 0;
  border-top: 1px solid var(--ag-line);
}
/* the day's first call has a line above it too, so each group reads as a list */
.vw-rail__list .vw-rday + .vw-rrow3 {
  border-top: 1px solid var(--ag-line);
}
.vw-rail__list .vw-rrow3:last-child {
  border-bottom: 1px solid var(--ag-line);
}
.vw-rrow3[aria-current="true"]::before {
  inset-block: 0;
  width: 3px;
  border-radius: 0;
}
/* Overview: its own line under it */
[data-rov] {
  margin-inline: -16px;
  border-bottom: 1px solid var(--ag-line);
}
[data-rov] .vw-rrow3 {
  padding-inline: 24px 16px;
}
.vw-rail__list {
  padding-top: 0;
}
.vw-rail__list .vw-rday:first-child {
  padding-top: 14px;
}
/* the dividers a step darker, so they read on white (3 Oct 2026) */
.vw-rrow3 + .vw-rrow3,
.vw-rail__list .vw-rday + .vw-rrow3 {
  border-top-color: var(--ag-btn-line);
}
.vw-rail__list .vw-rrow3:last-child,
[data-rov] {
  border-bottom-color: var(--ag-btn-line);
}