/* ==========================================================================
   AI Inbound page: demo components on top of assets/css/product-demo.css.
   Everything inside the demo windows is sized in em (the window's font size
   is set from --td-font-scale). Classes are prefixed ib- to stay clear of the
   shared layer and pages.css.
   ========================================================================== */

/* Call timers tick up while their scene is showing (a registered integer
   animated in seconds, printed as m:ss). Browsers without mod()/round() keep
   the static text inside the element. */
@property --ib-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.ib-timer {
  --ib-s: var(--from);
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@supports (width: calc(mod(7px, 3px) + round(down, 7px, 3px))) {
  .ib-timer > span {
    display: none;
  }

  /* The counters are set on the element itself: --ib-s doesn't inherit, so
     ::after would only ever see its initial value. */
  .ib-timer {
    counter-reset: ib-m round(down, var(--ib-s) / 60, 1) ib-sec mod(var(--ib-s), 60);
  }

  .ib-timer::after {
    content: counter(ib-m) ":" counter(ib-sec, decimal-leading-zero);
  }

  .td-scene.is-current .ib-timer:not([data-on]),
  .td-scene.is-current .ib-timer.is-on {
    animation: ib-tick 600s linear forwards;
  }
}

@keyframes ib-tick {
  to { --ib-s: calc(var(--from) + 600); }
}

/* --------------------------------------------------------------- icons ---- */

.ib-icon--handoff {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16 10h6m-2.5-2.5L22 10l-2.5 2.5'/%3E%3C/svg%3E");
}

.ib-icon--script {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 11h7M9 15h7M9 7h4'/%3E%3C/svg%3E");
}

.ib-icon--text {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E");
}

/* Count on the Handoffs nav item once a call needs a rep. */
.ib-nav-count {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: oklch(74% 0.15 62);
  color: white;
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 300ms var(--ease-out-quart),
    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ib-nav-count.is-on {
  opacity: 1;
  transform: none;
}

/* Shared small text colors. */
.ib-muted {
  color: var(--color-ink-500);
}

.ib-good {
  color: var(--color-success);
  font-weight: 600;
}

/* ---------------------------------------------------------- scene: live ---- */

.ib-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ib-calls {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ib-call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 11.5em 6.2em 3.2em;
  align-items: center;
  gap: 0.8em;
  padding: 0.5em 0.4em;
  border-bottom: 1px solid oklch(94% 0.006 262);
  border-radius: 0.5em;
  font-size: 0.95em;
}

.ib-call__who b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.ib-call__who small {
  display: block;
  overflow: hidden;
  color: var(--color-ink-500);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ib-call__intent {
  justify-self: start;
  padding: 0.2em 0.6em;
  border-radius: 0.45em;
  background: oklch(96% 0.008 262);
  color: var(--color-ink-700);
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.ib-call__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-ink-700);
  font-size: 0.88em;
  white-space: nowrap;
}

.ib-call__state.td-swap {
  display: inline-grid;
}

.ib-call__state.td-swap > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  justify-self: start;
}

.ib-timer {
  text-align: right;
}

/* The row the cursor opens. */
.ib-call[data-cursor] {
  background: color-mix(in oklch, var(--color-accent-050) 55%, white);
}

/* A new call slides into the top of the board. */
.ib-call--new {
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  opacity: 0;
  transition:
    max-height 520ms var(--ease-out-quart),
    padding 520ms var(--ease-out-quart),
    opacity 420ms var(--ease-out-quart) 120ms,
    border-color 520ms var(--ease-out-quart);
}

.ib-call--new.is-on {
  max-height: 4em;
  padding-block: 0.5em;
  border-bottom-color: oklch(94% 0.006 262);
  opacity: 1;
}

/* Tiny three-bar meter: the AI agent is on the call. */
.ib-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.12em;
  width: 0.85em;
  height: 0.8em;
}

.ib-eq i {
  flex: 1;
  height: 100%;
  border-radius: 0.1em;
  background: var(--color-accent-600);
  transform-origin: bottom;
  animation: ib-eq 900ms var(--ease-in-out) infinite alternate;
}

.ib-eq i:nth-child(2) { animation-delay: -300ms; animation-duration: 700ms; }
.ib-eq i:nth-child(3) { animation-delay: -600ms; animation-duration: 1100ms; }

@keyframes ib-eq {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}

/* -------------------------------------------------- scene: conversation ---- */

.ib-verified {
  justify-self: center;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-success) 11%, white);
  color: var(--color-success);
  font-size: 0.82em;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 380ms var(--ease-out-quart),
    transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ib-verified.is-on {
  opacity: 1;
  transform: none;
}

.ib-facts {
  display: grid;
  margin: 0;
}

.ib-facts > div {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 0.6em;
  padding: 0.42em 0;
  border-bottom: 1px solid oklch(94% 0.006 262);
  font-size: 0.92em;
}

.ib-facts dt {
  color: var(--color-ink-500);
}

.ib-facts dd {
  margin: 0;
  color: var(--color-ink-900);
}

.ib-facts dd.td-swap > * {
  justify-self: start;
}

/* ------------------------------------------------------ scene: resolved ---- */

.ib-time {
  align-content: center;
}

.ib-time .qa-stat__value {
  font-size: 2em;
  font-variant-numeric: tabular-nums;
}

.td-dial.ib-dial {
  --td-score: 71;
}

.td-dial.ib-dial.is-on {
  --td-score: 84;
}

.td-dial.ib-dial b {
  font-size: 1.2em;
}

.td-dial.ib-dial b::after {
  content: counter(td-score) "%";
}

.ib-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  margin-top: 1.1em;
  padding: 0.7em 0.9em;
  border: 1px solid oklch(62% 0.2 25);
  border-radius: 0.8em;
  background: white;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.ib-alert.is-on {
  opacity: 1;
  transform: none;
}

.ib-alert__icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: oklch(58% 0.21 25);
  color: white;
  font-weight: 800;
}

.ib-alert__text b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.ib-alert__text small {
  display: block;
  overflow: hidden;
  color: var(--color-ink-700);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------- scene: handoff ---- */

.ib-transfer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.3em;
  padding: 0.7em 0.85em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.8em;
  background: oklch(98.8% 0.003 262);
}

.ib-transfer .loop-avatar {
  background: linear-gradient(135deg, oklch(72% 0.09 300), oklch(52% 0.12 280));
}

.ib-transfer__who b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.ib-transfer__who small {
  display: block;
  color: var(--color-ink-500);
  font-size: 0.85em;
}

.ib-transfer__state {
  font-size: 0.9em;
  white-space: nowrap;
}

.ib-transfer__state > * {
  justify-self: end;
}

.ib-summary {
  align-self: start;
  padding: 0.9em 1em;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 18%, white);
  border-radius: 0.8em;
  background: color-mix(in oklch, var(--color-accent-050) 70%, white);
}

.ib-summary .ib-facts > div {
  grid-template-columns: 5.4em minmax(0, 1fr);
  border-bottom-color: color-mix(in oklch, var(--color-accent-600) 10%, white);
}

.ib-summary .ib-facts > div:last-child {
  border-bottom: 0;
}

/* Reveal motion for the handoff pieces. */
.ib-transfer,
.ib-summary,
.ib-summary .ib-facts > div {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.ib-transfer.is-on,
.ib-summary.is-on,
.ib-summary .ib-facts > div.is-on {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- loop: answer ---- */

/* The incoming-call card rings first; when the AI agent picks up it gives
   way to the live call in the same spot. */
.td-scene.ib-answer {
  display: grid;
}

.ib-answer > .ib-incoming,
.ib-answer > .ib-live {
  grid-area: 1 / 1;
}

.ib-incoming {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  text-align: center;
  transition:
    opacity 360ms var(--ease-out-quart),
    transform 360ms var(--ease-out-quart),
    visibility 0s linear 360ms;
}

.ib-incoming.is-on {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
}

.ib-incoming__avatar {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 1.1em;
}

.ib-incoming__avatar .loop-avatar {
  position: relative;
  z-index: 1;
  font-size: 2em;
}

/* Two rings pulse out from the avatar while the phone rings. */
.ib-incoming__avatar::before,
.ib-incoming__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in oklch, var(--color-accent-600) 55%, white);
  border-radius: 50%;
  animation: ib-pulse 1.8s var(--ease-out-quart) infinite;
}

.ib-incoming__avatar::after {
  animation-delay: 0.9s;
}

@keyframes ib-pulse {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.1);
  }
}

.ib-incoming b {
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.45em;
  font-weight: 600;
}

.ib-incoming small {
  color: var(--color-ink-500);
}

.ib-ring {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.9em;
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-accent-600) 9%, white);
  color: var(--color-accent-700);
  font-weight: 600;
}

.ib-ring .td-icon {
  animation: ib-ring 1.2s var(--ease-in-out) infinite;
}

@keyframes ib-ring {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-14deg); }
  20%, 40% { transform: rotate(14deg); }
}

.ib-live {
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6em);
  transition:
    opacity 480ms var(--ease-out-quart) 150ms,
    transform 480ms var(--ease-out-quart) 150ms,
    visibility 0s linear 630ms;
}

.ib-live.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 150ms, 150ms, 0s;
}

.ib-lcall .loop-call__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ib-lcall__time {
  font-size: 0.92em;
  font-weight: 600;
}

/* The call's waveform comes alive once the AI agent picks up. */
.ib-lwave .loop-wave__base {
  display: none;
}

.ib-lwave .loop-wave__played {
  clip-path: none;
}

.ib-lwave .loop-wave__played i {
  background: oklch(90% 0.02 262);
  transform: scaleY(0.12);
  transition:
    transform 500ms var(--ease-out-quart),
    background 500ms var(--ease-out-quart);
}

.ib-lwave.is-on .loop-wave__played i {
  background: var(--color-accent-600);
  transform: scaleY(1);
  animation: ib-talk 1.3s var(--ease-in-out) infinite alternate;
}

.ib-lwave.is-on .loop-wave__played i:nth-child(3n) { animation-delay: -0.4s; }
.ib-lwave.is-on .loop-wave__played i:nth-child(3n + 1) { animation-delay: -0.9s; }
.ib-lwave.is-on .loop-wave__played i:nth-child(4n) { animation-duration: 0.9s; }
.ib-lwave.is-on .loop-wave__played i:nth-child(5n) { animation-duration: 1.6s; }

@keyframes ib-talk {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

.ib-sms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7em;
  margin-top: 1em;
  padding: 0.75em 0.9em;
  border-radius: 0.9em 0.9em 0.9em 0.25em;
  background: oklch(96% 0.008 262);
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.ib-sms.is-on {
  opacity: 1;
  transform: none;
}

.ib-sms .td-icon {
  padding-top: 0.2em;
  color: var(--color-accent-700);
}

.ib-sms p {
  max-width: none;
  margin: 0;
  color: var(--color-ink-900);
  font-size: 0.92em;
}

/* -------------------------------------------------------- loop: escalate ---- */

.ib-handoff {
  margin-top: 1.1em;
  padding: 1em 1.1em;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 18%, white);
  border-radius: 0.9em;
  background: color-mix(in oklch, var(--color-accent-050) 70%, white);
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.ib-handoff.is-on {
  opacity: 1;
  transform: none;
}

.ib-handoff__head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.7em;
}

.ib-handoff__head .loop-avatar {
  background: linear-gradient(135deg, oklch(72% 0.09 300), oklch(52% 0.12 280));
}

.ib-handoff__notes {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ib-handoff__notes li {
  position: relative;
  padding-left: 1em;
  color: var(--color-ink-700);
  font-size: 0.92em;
}

.ib-handoff__notes li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0.1em;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--color-accent-600);
}

.ib-handoff__done {
  display: block;
  margin-top: 0.8em;
  opacity: 0;
  transition: opacity 420ms var(--ease-out-quart);
}

.ib-handoff__done.is-on {
  opacity: 1;
}

/* --------------------------------------------------------- breakpoints ---- */

@media (min-width: 48rem) {
  .ib-handoff-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Phones: two stats, no status column, and the handoff summary stacks under
   the transcript. */
@media (max-width: 47.99rem) {
  .ib-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ib-stats .qa-stat:nth-child(3),
  .ib-stats .qa-stat:nth-child(4) {
    display: none;
  }

  .ib-call {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 0.1em;
  }

  .ib-call .loop-avatar {
    grid-row: span 2;
  }

  .ib-call__who small {
    display: none;
  }

  .ib-call__intent {
    grid-area: 2 / 2;
    padding: 0;
    background: none;
    color: var(--color-ink-500);
  }

  .ib-timer {
    grid-area: 1 / 3 / span 2;
  }

  .ib-call__state {
    display: none;
  }

  .ib-call__state.td-swap {
    display: none;
  }

  .ib-summary {
    margin-top: 0.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ib-nav-count,
  .ib-call--new,
  .ib-verified,
  .ib-alert,
  .ib-transfer,
  .ib-summary,
  .ib-summary .ib-facts > div,
  .ib-lwave .loop-wave__played i,
  .ib-sms,
  .ib-incoming,
  .ib-live,
  .ib-handoff,
  .ib-handoff__done {
    transition: none;
  }

  .ib-eq i,
  .ib-ring .td-icon,
  .ib-incoming__avatar::before,
  .ib-incoming__avatar::after,
  .ib-lwave.is-on .loop-wave__played i,
  .td-scene.is-current .ib-timer {
    animation: none !important;
  }

  .ib-eq i {
    transform: scaleY(0.7);
  }
}

/* ------------------------------------------------------------------ cta ---- */

/* This page's CTA heading is longer than the others; widen it so it sets on
   two lines instead of three. */
body[data-page="ai-call-center-agents"] .home-cta__content h2 {
  max-width: 20ch;
}