/*
 * Home (board 20A to 20C) v2, in the Agents list's own parts: ag-tiles,
 * ag-card with ag-card__head / ag-card__name, ag-well panels with the faint
 * label, ag-stats with dark bars, ag-chip, ag-face, ag-btn (agents.css). The
 * alert icon square and the "All good" tick are the Alerts page's (al-*), the
 * red problem tag is Conversations' (cl-alert-tag). Prefix hm-.
 * The first block (card heads, rows, counts) is shared with Analytics & Quality.
 * Also loaded by customers, conversations, agent and live-calls pages (the Customer 360
 * window reuses hm-chip and hm-avatar[data-tint]): keep those class names stable.
 */

/* ---------- shared with Analytics & Quality ---------- */
.hm-cardhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.hm-h {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ag-ink);
}
.hm-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ag-well);
  border: 1px solid var(--ag-well-line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ag-ink-2);
  font-variant-numeric: tabular-nums;
}
.hm-link {
  font-size: 13.5px;
  white-space: nowrap;
}
.hm-muted {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ag-muted);
}
.hm-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ag-line);
}
.hm-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.hm-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-who__name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ag-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.hm-agentlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-row--call {
  cursor: pointer;
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 10px;
}
.hm-row--call:hover {
  background: var(--ag-hover);
}
.hm-time {
  flex: none;
  width: 48px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ag-muted);
}
.hm-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.hm-dot--red {
  background: var(--ag-red);
}
.hm-dot--green {
  background: var(--ag-live);
}

/* ---------- the page ---------- */
.hm-page {
  gap: 22px;
}
.hm-page .ag-head {
  align-items: center;
}
.ap-skin .hm-btn {
  gap: 8px;
}
/* a quiet count beside a card's name (the Agents list's setup chips) */
.hm-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--ag-set);
  border: 1px solid var(--ag-set-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ag-ink-2);
  white-space: nowrap;
}
.hm-card {
  min-width: 0;
}
.hm-wells {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Today: the summary tiles open Analytics ---------- */
.hm-tile {
  display: block;
  color: var(--ag-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hm-tile:hover {
  border-color: var(--ag-btn-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.hm-tile .ag-tile__in {
  gap: 10px;
  height: 100%;
}
.hm-tile__extra {
  min-height: 18px;
  margin-top: -6px;
  padding-inline-start: 2px;
  font-size: 13px;
  color: var(--ag-muted);
}
.hm-tile__extra.is-red {
  color: var(--ag-red);
}

/* ---------- Needs attention: one soft panel per alert ---------- */
.hm-attn {
  gap: 16px;
}
.hm-alertchip {
  pointer-events: none;
}
.hm-alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* one alert: a two-column grid; the 36px marks on the start, every text line on one edge */
.hm-alert {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
  padding: 16px 18px 18px;
}
.hm-alert__mark {
  width: 36px;
  height: 36px;
}
.hm-alert__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 36px;
}
.hm-alert__name {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ag-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.hm-alert__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-alert__who .ag-chip,
.hm-alert__who .hm-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
}
.hm-alert__since {
  flex: none;
  font-size: 12.5px;
  color: var(--ag-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hm-alert__rule {
  grid-column: 1 / -1;
  height: 1px;
  margin: 14px 0;
  background: var(--ag-well-line);
}
.hm-faces {
  position: relative;
  width: 36px;
  height: 36px;
}
.hm-faces .hm-face {
  position: absolute;
  width: 26px !important;
  height: 26px !important;
  box-shadow: 0 0 0 2px var(--ag-well);
}
.hm-faces .hm-face:first-child {
  inset-inline-start: 0;
  top: 0;
}
.hm-faces .hm-face + .hm-face {
  inset-inline-end: 0;
  bottom: 0;
}
/* the alert's icon: the summary tiles' white square; red or amber on the mark only */
.hm-alert__icon {
  align-self: start;
}
.hm-alert__icon--red { color: var(--ag-red); }
.hm-alert__icon--amber { color: var(--ag-i-amber); }
.hm-alert__icon--done { color: var(--ag-faint); }
.hm-alert__text {
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* the title's first line sits on the icon's middle */
  padding-top: 7px;
}
.hm-alert__title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ag-ink);
}
.hm-alert__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-alert.is-done .hm-alert__title {
  color: var(--ag-ink-2);
}
.hm-alert__cause {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ag-ink-2);
}
/* the counts and the fix sit on the bottom, on the text's edge */
.hm-alert__foot {
  grid-column: 2;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  margin-top: 16px;
}
.hm-alert__split {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hm-alert__split .ag-set {
  height: 26px;
  font-size: 12.5px;
  color: var(--ag-ink-2);
}
.hm-alert__go {
  flex: none;
  margin-inline-start: auto;
}
.ap-skin .hm-alert__go .ag-btn {
  gap: 6px;
}
.hm-done {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ag-muted);
}
.hm-done svg {
  color: var(--ag-live);
}

/* ---------- All good ---------- */
.hm-good {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.hm-good__icon {
  margin: 0;
  width: 48px;
  height: 48px;
  flex: none;
}
.hm-good__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hm-good__text .ag-card__name {
  white-space: normal;
}

/* ---------- Live now and Agents, side by side ---------- */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.hm-stats3,
.hm-tallies {
  column-gap: 24px;
}
.hm-stats3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hm-tallies {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hm-tally {
  color: var(--ag-ink);
  border-radius: 8px;
}
.hm-tally:hover .ag-stat__ctext {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-fill--live { background: var(--ag-live); }
.hm-fill--test { background: var(--ag-test); }
.hm-fill--paused { background: var(--ag-ink-2); }
.hm-fill--draft { background: var(--ag-dot); }
.hm-calm {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ag-ink-2);
}

/* a row in a soft panel: mark or face, name and line, then what it is, when, the button */
.hm-person {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 60px;
}
a.hm-agent {
  color: var(--ag-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
a.hm-agent:hover,
.hm-person--call:hover {
  border-color: var(--ag-btn-line);
  background: var(--ag-hover);
}
.hm-person--call {
  cursor: pointer;
}
.hm-face {
  flex: none;
}
/* a customer's initials on a light colour of their own (the tint stays with the person) */
.hm-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  --t: var(--ag-i-blue);
  color: color-mix(in srgb, var(--t) 80%, var(--ag-ink));
  background: color-mix(in srgb, var(--t) 14%, var(--ag-card));
}
.hm-avatar[data-tint="2"] { --t: var(--ag-i-green); }
.hm-avatar[data-tint="3"] { --t: var(--ag-i-violet); }
.hm-avatar[data-tint="4"] { --t: var(--ag-i-amber); }
.hm-avatar[data-tint="5"] { --t: var(--ag-whatsapp-cut); }
.hm-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ag-ink-2);
  white-space: nowrap;
}
.hm-kind--missed .hm-dot {
  background: var(--ag-red);
}
.hm-kind--case .hm-dot {
  background: var(--ag-test);
}
.hm-kind--ok .hm-dot {
  background: var(--ag-live);
}
.hm-more {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--ag-muted);
}
.hm-when {
  flex: none;
  min-width: 52px;
  font-size: 13px;
  color: var(--ag-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.hm-outcome {
  flex: none;
  font-size: 13.5px;
  color: var(--ag-ink-2);
}

/* Get started (5 Oct 2026): a timeline with a soft colour per step (--ob-hue-N), and Your workspace beside it. Prefix hs-. */
/* while the workspace is being set up the navigation waits, blurred */
.sidebar > * {
  transition: filter 0.6s ease, opacity 0.6s ease;
}
body[data-setup="busy"] .sidebar {
  pointer-events: none;
  user-select: none;
}
body[data-setup="busy"] .sidebar > * {
  filter: blur(4px);
  opacity: 0.5;
}

.hs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

/* the hue of a node, a bar segment, the industry mark */
.hs-card [data-hue="1"], .hs-ws [data-hue="1"] { --h: var(--ob-hue-1); }
.hs-card [data-hue="2"], .hs-ws [data-hue="2"] { --h: var(--ob-hue-2); }
.hs-card [data-hue="3"], .hs-ws [data-hue="3"] { --h: var(--ob-hue-3); }
.hs-card [data-hue="4"], .hs-ws [data-hue="4"] { --h: var(--ob-hue-4); }
.hs-card [data-hue="5"], .hs-ws [data-hue="5"] { --h: var(--ob-hue-5); }
.hs-card [data-hue="6"], .hs-ws [data-hue="6"] { --h: var(--ob-hue-6); }
.hs-card [data-hue="7"], .hs-ws [data-hue="7"] { --h: var(--ob-hue-7); }
.hs-card [data-hue="8"], .hs-ws [data-hue="8"] { --h: var(--ob-hue-8); }

/* progress: a segment per step, a soft wash of its colour once done */
.hs-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
}
.hs-bar i {
  height: 5px;
  border-radius: 5px;
  background: var(--ag-track);
  transition: background 0.5s;
}
.hs-bar i[data-on] {
  background: color-mix(in srgb, var(--h) 55%, var(--ag-card));
}

/*
 * The timeline (v2, 5 Oct 2026, Ameer: alignment and softer colours).
 * Every row is the same grid: a 36px node, then the words and the button on
 * one 36px line, so nodes, titles and buttons share one axis. The step to take
 * next is a soft panel across the whole row (node included), not a box beside it.
 * The line between nodes sits in the node column, from one node to the next.
 * Colour stays on the marks: soft tints, never solid fills.
 */
.hs-list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.hs-row {
  --pad: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  padding: var(--pad) 12px;
  margin-inline: -12px;
  border-radius: 14px;
  transition: background 0.3s;
}
.hs-row + .hs-row {
  margin-top: 6px;
}
.hs-row[data-s="now"] {
  background: var(--ag-well);
  box-shadow: inset 0 0 0 1px var(--ag-line);
}
/* the line down to the next node: under this node to the top of the next one */
.hs-row:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(12px + 17px);
  top: calc(var(--pad) + 36px + 4px);
  bottom: calc(-1 * var(--pad) - 6px + 4px);
  width: 2px;
  border-radius: 2px;
  background: var(--ag-track);
}
.hs-row[data-s="done"]::before {
  background: color-mix(in srgb, var(--ag-live) 28%, var(--ag-card));
}
.hs-node {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: color-mix(in srgb, var(--h) 80%, var(--ag-ink));
  background: color-mix(in srgb, var(--h) 11%, var(--ag-card));
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.hs-node[data-s="now"] {
  background: color-mix(in srgb, var(--h) 18%, var(--ag-card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--h) 45%, var(--ag-card));
}
.hs-node[data-s="done"] {
  color: color-mix(in srgb, var(--ag-live) 85%, var(--ag-ink));
  background: color-mix(in srgb, var(--ag-live) 12%, var(--ag-card));
}
.hs-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--h) 25%, transparent);
  border-top-color: color-mix(in srgb, var(--h) 80%, var(--ag-ink));
  animation: hs-spin 0.8s linear infinite;
}
@keyframes hs-spin {
  to {
    transform: rotate(360deg);
  }
}
.hs-body {
  min-width: 0;
}
.hs-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.hs-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ag-ink-2);
}
.hs-row[data-s="now"] .hs-title,
.hs-row[data-s="busy"] .hs-title {
  font-weight: 600;
  color: var(--ag-ink);
}
.hs-row[data-s="done"] .hs-title {
  color: var(--ag-muted);
}
.hs-detail {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ag-muted);
}
.hs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* done: the word stays quiet, the tick on the node carries the colour */
.hs-done {
  font-size: 13px;
  font-weight: 500;
  color: var(--ag-faint);
}
.hs-btn {
  flex: none;
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}
.hs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* the three lines under Setting up your workspace */
.hs-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
}
.hs-sub li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ag-faint);
  transition: color 0.3s;
}
.hs-sub li:not([data-s="next"]) {
  color: var(--ag-ink-2);
}
.hs-dot {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--ag-dot);
  color: transparent;
}
.hs-sub li[data-s="busy"] .hs-dot {
  border-color: var(--ag-ink-2);
  border-top-color: transparent;
  animation: hs-spin 0.8s linear infinite;
}
.hs-sub li[data-s="done"] .hs-dot {
  border-color: transparent;
  background: color-mix(in srgb, var(--ag-live) 14%, var(--ag-card));
  color: color-mix(in srgb, var(--ag-live) 85%, var(--ag-ink));
}

/* Your workspace */
.hs-ws {
  gap: 16px;
}
.hs-ws[data-ready="false"] > :not(.ag-card__head) {
  opacity: 0.35;
  filter: blur(2px);
}
.hs-ws > * {
  transition: opacity 0.5s, filter 0.5s;
}
.hs-ws__org {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hs-ws__mono {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* the organisation's initials on a soft wash of its industry's colour */
  background: color-mix(in srgb, var(--h) 14%, var(--ag-card));
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in srgb, var(--h) 85%, var(--ag-ink));
}
.hs-ws__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ag-ink);
}
.hs-ws__well {
  gap: 12px;
  padding: 14px 16px;
}
.hs-ws__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hs-ws__val {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ag-ink);
  text-align: end;
}
.hs-ws__ind {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: color-mix(in srgb, var(--h) 85%, var(--ag-ink));
  background: color-mix(in srgb, var(--h) 13%, var(--ag-card));
}
.hs-ws__chip {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--ag-set);
  border: 1px solid var(--ag-set-line);
  font-size: 12px;
}
.hs-ws__edit {
  align-self: flex-start;
  gap: 8px;
}

@media (max-width: 1100px) {
  .hs-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479px) {
  /* the button goes under the step's words */
  .hs-line {
    flex-wrap: wrap;
  }
  .hs-text {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hs-spin,
  .hs-sub li[data-s="busy"] .hs-dot {
    animation: none;
  }
}

/* ---------- narrow screens ---------- */
@media (max-width: 1180px) {
  .hm-alerts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1080px) {
  .hm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .hm-page .ag-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hm-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .hm-alert__foot {
    flex-wrap: wrap;
  }
  .hm-kind,
  .hm-when {
    display: none;
  }
  .hm-tallies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }
  .hm-good {
    flex-wrap: wrap;
  }
}

/* a row's second line stays on one line */
.hm-person .hm-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the Agents list grows its panels on narrow screens (flex: 1 1 260px); Home's panels keep their own height */
.hm-page .ag-well {
  flex: none;
}

/* ---------- the top of Live now and Agents: total, one split bar, a key ---------- */
.hm-sum {
  gap: 12px;
  padding: 16px 18px;
}
.hm-sum__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hm-sum__n {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hm-sum__word {
  font-size: 14px;
  color: var(--ag-muted);
}
.hm-sum__bar {
  display: flex;
  gap: 3px;
  height: 8px;
}
.hm-sum__seg {
  min-width: 6px;
  border-radius: 999px;
}
.hm-sum__key {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.hm-sum__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ag-ink-2);
}
.hm-sum__item b {
  font-weight: 600;
  color: var(--ag-ink);
  font-variant-numeric: tabular-nums;
}
a.hm-sum__item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-sum__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.hm-tone--red { background: var(--ag-red); }
.hm-tone--green { background: var(--ag-live); }
.hm-tone--amber { background: var(--ag-test); }
.hm-tone--ink { background: var(--ag-ink-2); }
.hm-tone--grey { background: var(--ag-dot); }
.hm-tone--none { background: var(--ag-track); }
/* calls are going on: a small green mark that breathes, beside the card's name */
.hm-pulse {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ag-live);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-live) 45%, transparent);
  animation: hm-pulse 2s ease-out infinite;
}
@keyframes hm-pulse {
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ag-live) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-live) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-pulse { animation: none; }
}

/* the problem tag on a soft panel: white, so it still reads as a chip */
.hm-page .ag-well .cl-alert-tag {
  background: var(--ag-card);
}

/* rows that open something: the whole panel, a chevron at the end */
.hm-person--go {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hm-person--go:hover {
  border-color: var(--ag-btn-line);
  background: var(--ag-hover);
}
.hm-go {
  flex: none;
  color: var(--ag-faint);
  transition: color 0.15s ease, transform 0.15s ease;
}
.hm-person--go:hover .hm-go,
a.hm-agent:hover .hm-go {
  color: var(--ag-ink-2);
}
a.hm-sublink {
  width: fit-content;
  max-width: 100%;
}
a.hm-sublink:hover {
  color: var(--ag-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.hm-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}
a.hm-more:hover {
  color: var(--ag-ink);
}

/* Analyst and Viewer, no live agent yet (7 Oct 2026): a calm card where Get started would be. Prefix hs-wait. */
.hs-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: 48px;
  text-align: center;
}
.hs-wait__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-block-end: 6px;
}
.hs-wait__title {
  max-width: 28ch;
}
.hs-wait__line {
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ag-muted);
}
.hs-wait__btn {
  margin-block-start: 8px;
}