/* AI Training "Meet Sam": the poster card and the #sam-intro modal it opens.
   Timing lives in assets/js/sam-intro.js, which sets data-scene/data-layout
   on the stage, .is-active on the current scene, .is-on on each [data-at]
   element once its second arrives, and data-speaker while someone talks. */

.sam-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Sam himself --------------------------------------------------------- */
.sam {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sam__eyes,
.sam__arc {
  transform-box: fill-box;
  transform-origin: center;
}

.sam__eyes {
  animation: sam-blink 4.6s infinite;
}

.sam__arc {
  opacity: 0.55;
}

.sam__arc--outer {
  transform-origin: center bottom;
}

@keyframes sam-blink {
  0%,
  92%,
  100% {
    transform: none;
  }

  95% {
    transform: scaleY(0.2);
  }
}

@keyframes sam-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4%);
  }
}

@keyframes sam-talk {
  from {
    opacity: 0.35;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes sam-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-7deg);
  }

  45% {
    transform: rotate(6deg);
  }

  70% {
    transform: rotate(-4deg);
  }
}

/* ---- Poster card ---------------------------------------------------------- */
.sam-card__screen {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, white, oklch(97.5% 0.012 262));
  color: var(--color-ink-950);
  font: inherit;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out-quart);
}

.sam-card__screen:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 0.3rem;
}

.sam-card__bot {
  width: 44%;
  margin-top: -6%;
  animation: sam-bob 3.4s var(--ease-in-out) infinite;
}

.sam--card .sam__arc {
  animation: sam-talk 0.9s var(--ease-in-out) infinite alternate;
}

.sam--card .sam__arc--inner {
  animation-delay: 0.3s;
}

.sam-card__bubble {
  position: absolute;
  top: 11%;
  right: 8%;
  padding: 0.5em 0.85em;
  border-radius: 1em 1em 1em 0.25em;
  background: var(--color-ink-950);
  color: white;
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.86rem);
  font-weight: 600;
  box-shadow: 0 10px 24px oklch(24% 0.02 248 / 0.18);
}

/* Phones and small tablets: the card spans the screen, so the bubble grows
   with the card's width. */
@media (max-width: 47.99rem) {
  .sam-card__screen {
    container-type: inline-size;
  }

  .sam-card__bubble {
    top: 9%;
    right: 7%;
    font-size: clamp(0.95rem, 4.4cqi, 1.8rem);
  }
}

/* A plain round play button: a blue disc in a white ring. */
.sam-card__play {
  position: absolute;
  bottom: 8%;
  left: 50%;
  display: grid;
  place-items: center;
  padding: 0.3rem;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 10px 26px oklch(30% 0.03 262 / 0.14),
    0 0 0 1px oklch(90% 0.01 262);
  transform: translateX(-50%);
  transition: transform var(--duration-base) var(--ease-out-quart);
}

/* --play sizes the disc; the triangle is measured in em, so it scales too. */
.sam-card__play-icon {
  --play: clamp(3.1rem, 2.7rem + 1.2vw, 3.7rem);
  display: grid;
  place-items: center;
  width: var(--play);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent-600);
  font-size: calc(var(--play) * 0.4);
}

.sam-card__play-icon::before {
  content: "";
  margin-left: 0.2em;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.8em solid white;
}

.sam-card__screen:hover .sam-card__play {
  transform: translateX(-50%) scale(1.05);
}

/* Phones and small tablets: the play button grows with the card (the
   container is set on .sam-card__screen above). */
@media (max-width: 47.99rem) {
  .sam-card__play-icon {
    --play: clamp(3.4rem, 16cqi, 6rem);
  }
}

/* ---- Modal ---------------------------------------------------------------- */
html.sam-modal-open {
  overflow: hidden;
}

.sam-modal {
  width: min(100% - 1.6rem, 62rem);
  max-width: none;
  max-height: calc(100dvh - 1.6rem);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--color-ink-900);
}

.sam-modal::backdrop {
  background: oklch(18% 0.03 262 / 0.62);
  backdrop-filter: blur(6px);
  animation: sam-fade 320ms var(--ease-out-quart);
}

.sam-modal.is-closing::backdrop {
  animation: sam-fade 240ms var(--ease-in-out) reverse forwards;
}

@keyframes sam-fade {
  from {
    opacity: 0;
  }
}

.sam-modal__panel {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  max-height: calc(100dvh - 1.6rem);
  padding: clamp(0.8rem, 2vw, 1.3rem);
  overflow: auto;
  border-radius: 1.6rem;
  background: white;
  box-shadow: 0 40px 90px oklch(18% 0.04 262 / 0.4);
}

.sam-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 0.3rem;
}

.sam-modal__title {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
}

.sam-modal__close {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-100);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart);
}

.sam-modal__close::before,
.sam-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-ink-950);
  transform: translate(-50%, -50%) rotate(45deg);
}

.sam-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sam-modal__close:hover {
  background: var(--color-surface-200);
}

.sam-modal__close:focus-visible,
.sam-modal__toggle:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

/* sam-intro.js sets a min-height for the longest line; shorter ones sit in
   the middle of that space. */
.sam-modal__caption {
  display: grid;
  align-content: center;
  max-width: 40rem;
  min-height: 2.9em;
  margin-inline: auto;
  color: var(--color-ink-950);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.22rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

.sam-modal__controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-inline: 0.3rem;
}

.sam-modal__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink-950);
  color: white;
  cursor: pointer;
}

/* Pause bars while playing, a play triangle when paused, a replay arrow at
   the end. */
.sam-modal__toggle::before {
  content: "";
}

.sam-modal__toggle[data-state="playing"]::before {
  width: 0.72rem;
  height: 0.85rem;
  border-inline: 0.24rem solid white;
}

.sam-modal__toggle[data-state="paused"]::before {
  margin-left: 0.2rem;
  border-top: 0.46rem solid transparent;
  border-bottom: 0.46rem solid transparent;
  border-left: 0.74rem solid white;
}

.sam-modal__toggle[data-state="done"]::before {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid white;
  border-right-color: transparent;
  border-radius: 50%;
}

.sam-modal__toggle[data-state="done"]::after {
  content: "";
  position: absolute;
  top: 0.78rem;
  right: 0.8rem;
  border-left: 0.26rem solid transparent;
  border-right: 0.26rem solid transparent;
  border-top: 0.32rem solid white;
  transform: rotate(-20deg);
}

.sam-modal__progress {
  flex: 1;
  height: 0.3rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-100);
}

.sam-modal__progress i {
  display: block;
  height: 100%;
  background: var(--color-accent-600);
  transform: scaleX(0);
  transform-origin: left;
}

.sam-modal__time {
  color: var(--color-ink-500);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Stage ---------------------------------------------------------------- */
/* Sam sits centered for the hello, "I love it" and goodbye beats, and moves
   left (up on phones) to make room for a scene card on the others. */
.sam-stage {
  --sam-width: 28%;
  --sam-center: translate(-50%, -58%);
  --sam-side: translate(-160%, -54%) scale(0.84);
  --sam-outro: translate(-50%, -64%);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 22% 30%, oklch(97.5% 0.014 262 / 0.9), transparent 45%),
    linear-gradient(145deg, oklch(95% 0.02 262), oklch(89% 0.042 274));
  font-size: clamp(0.62rem, 1.5cqi, 1rem);
  cursor: pointer;
}

.sam-stage__bot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sam-width);
  transform: var(--sam-center);
  transition: transform 0.9s var(--ease-out-quart);
}

.sam-stage[data-layout="side"] .sam-stage__bot {
  transform: var(--sam-side);
}

.sam-stage__wiggle {
  transform-origin: 50% 90%;
}

.sam--stage {
  animation: sam-bob 3.4s var(--ease-in-out) infinite;
}

.sam-stage[data-scene="hello"] .sam-stage__wiggle,
.sam-stage[data-scene="outro"] .sam-stage__wiggle {
  animation: sam-wave 1.4s var(--ease-in-out) 0.3s 2;
}

.sam-stage[data-scene="love"] .sam-stage__wiggle {
  animation: sam-wave 1.1s var(--ease-in-out) 0.2s 1;
}

/* Sam's antenna pulses only while he is the one talking. */
.sam-stage[data-speaker="sam"] .sam-stage__bot:not(.sam-stage__bot--guest) .sam__arc {
  animation: sam-talk 0.34s var(--ease-in-out) infinite alternate;
}

.sam-stage[data-speaker="sam"] .sam-stage__bot:not(.sam-stage__bot--guest) .sam__arc--inner {
  animation-delay: 0.17s;
}

.sam-stage.is-paused *,
.sam-stage.is-paused *::before,
.sam-stage.is-paused *::after {
  animation-play-state: paused !important;
}

/* Name tag under Sam, for the hello and goodbye beats. */
.sam-tag {
  position: absolute;
  top: 104%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.2em;
  min-width: max-content;
  translate: -50% 0;
  visibility: hidden;
  font-size: 1.3em;
  text-align: center;
}

.sam-tag b {
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
}

.sam-tag > span {
  color: var(--color-ink-700);
  font-size: 0.85em;
}

.sam-stage[data-scene="hello"] .sam-tag,
.sam-stage[data-scene="outro"] .sam-tag {
  visibility: visible;
}

/* Lifted a little for the goodbye so the buttons fit underneath. */
.sam-stage[data-scene="outro"] .sam-stage__bot {
  transform: var(--sam-outro);
}

/* Hearts float up around Sam on "I love what I get to do". */
.sam-hearts i {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  opacity: 0;
  background: oklch(66% 0.2 15);
  clip-path: polygon(50% 92%, 8% 50%, 4% 30%, 12% 12%, 30% 6%, 50% 22%, 70% 6%, 88% 12%, 96% 30%, 92% 50%);
}

.sam-hearts i:nth-child(1) {
  top: 10%;
  left: -10%;
}

.sam-hearts i:nth-child(2) {
  top: -8%;
  left: 78%;
  width: 15%;
}

.sam-hearts i:nth-child(3) {
  top: 30%;
  left: 102%;
  width: 10%;
}

.sam-stage[data-scene="love"] .sam-hearts i {
  animation: sam-heart 2.2s var(--ease-out-quart) both;
}

.sam-stage[data-scene="love"] .sam-hearts i:nth-child(2) {
  animation-delay: 0.3s;
}

.sam-stage[data-scene="love"] .sam-hearts i:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes sam-heart {
  0% {
    opacity: 0;
    transform: translateY(40%) scale(0.4);
  }

  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-120%) scale(0.9);
  }
}

/* ---- Scenes ---------------------------------------------------------------- */
.sam-scenes {
  position: absolute;
  inset: 9% 5% 9% 38%;
  display: grid;
  pointer-events: none;
}

.sam-scene {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(1.2em);
  transition:
    opacity 0.45s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
}

.sam-scene.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.sam-ui {
  position: relative;
  display: grid;
  gap: 1em;
  width: 100%;
  max-width: 30em;
  padding: 1.5em 1.6em;
  border-radius: 1.1em;
  background: white;
  box-shadow:
    0 1.4em 3em oklch(30% 0.04 262 / 0.14),
    0 0 0 1px oklch(90% 0.012 262 / 0.8);
  color: var(--color-ink-700);
  font-size: 1.12em;
  line-height: 1.35;
}

.sam-ui h3 {
  color: var(--color-ink-950);
  font-size: 1.3em;
  line-height: 1.15;
}

/* Generic "fade up when its second arrives". */
.sam-in {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 0.45s var(--ease-out-quart),
    transform 0.55s var(--ease-out-quart);
}

.sam-in.is-on {
  opacity: 1;
  transform: none;
}

/* Rows with a label, a bar and a value. */
.sam-row {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr) 3.4em;
  align-items: center;
  gap: 0.8em;
}

.sam-row--grade {
  grid-template-columns: 6.6em minmax(0, 1fr) 1.9em;
}

.sam-row .sam-chip {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: -0.4em;
}

.sam-row__label {
  color: var(--color-ink-700);
}

.sam-row__value {
  color: var(--color-ink-950);
  font-weight: 600;
}

.sam-bar {
  display: block;
  height: 0.7em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-100);
}

.sam-bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-600);
  transition:
    width 1.2s var(--ease-out-quart),
    background 0.6s var(--ease-out-quart);
}

.sam-bar--muted i {
  background: oklch(78% 0.02 262);
}

.sam-shrink {
  --w: 100%;
}

.sam-shrink.is-on {
  --w: 20%;
}

.sam-grow {
  --w: var(--from);
}

.sam-grow.is-on {
  --w: var(--to);
}

.sam-fill.is-on {
  --w: 100%;
  transition-duration: 1.8s;
  transition-timing-function: linear;
}

.sam-row--weak .sam-bar i:not(.is-on) {
  background: oklch(76% 0.14 70);
}

/* Two values stacked in one cell; .is-on shows the second. */
.sam-swap {
  display: inline-grid;
}

.sam-swap > span {
  grid-area: 1 / 1;
  transition:
    opacity 0.35s var(--ease-out-quart),
    transform 0.45s var(--ease-out-quart);
}

.sam-swap > span:last-child,
.sam-swap.is-on > span:first-child {
  opacity: 0;
  transform: translateY(-0.4em);
}

.sam-swap.is-on > span:last-child {
  opacity: 1;
  transform: none;
}

.sam-grade {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.5em;
  background: var(--color-surface-100);
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-weight: 700;
}

.sam-grade.is-on {
  background: color-mix(in oklch, var(--color-success) 16%, white);
  color: var(--color-success);
}

.sam-chip {
  display: inline-block;
  padding: 0.22em 0.7em;
  border-radius: var(--radius-pill);
  background: oklch(95% 0.05 75);
  color: oklch(52% 0.13 60);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.sam-chip--good {
  background: color-mix(in oklch, var(--color-success) 14%, white);
  color: var(--color-success);
}

/* Onboarding checklist */
.sam-checks {
  display: grid;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sam-checks li {
  display: flex;
  align-items: center;
  gap: 0.65em;
  color: var(--color-ink-500);
  transition: color 0.3s var(--ease-out-quart);
}

.sam-checks li.is-on {
  color: var(--color-ink-950);
}

.sam-tick {
  position: relative;
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--color-line);
}

.sam-tick::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.3s var(--ease-out-quart),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-on > .sam-tick::after {
  opacity: 1;
  transform: none;
}

.sam-ready {
  justify-self: start;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-success) 14%, white);
  color: var(--color-success);
  font-weight: 600;
}

/* Onboarding: once every box is ticked, the checklist gives way to one big
   centered "Ready". */
.sam-ui--onboard {
  display: grid;
}

.sam-onboard,
.sam-bigcheck {
  grid-area: 1 / 1;
}

.sam-onboard {
  display: grid;
  gap: 1em;
  transition: opacity 0.35s var(--ease-out-quart);
}

.sam-onboard.is-on {
  opacity: 0;
}

.sam-bigcheck {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6em;
  color: var(--color-ink-950);
  font-size: 1.35em;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.35s var(--ease-out-quart),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sam-bigcheck.is-on {
  opacity: 1;
  transform: none;
}

.sam-bigcheck b {
  font-weight: 600;
}

.sam-bigcheck__mark {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 1.3em;
  font-weight: 700;
}

/* Call review: a highlight sweeps down the transcript, then tags land. */
.sam-lines {
  display: grid;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sam-lines li {
  display: grid;
  gap: 0.15em;
  padding: 0.55em 0.75em;
  border-radius: 0.6em;
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
}

.sam-lines b {
  color: var(--color-ink-950);
  font-size: 0.85em;
}

.sam-lines .sam-chip {
  justify-self: start;
  margin-top: 0.25em;
}

.sam-scan {
  position: absolute;
  inset: 3.6em 1.2em auto;
  height: 2.4em;
  border-radius: 0.6em;
  background: linear-gradient(180deg, transparent, oklch(62% 0.12 250 / 0.16), transparent);
  box-shadow: 0 1px 0 oklch(62% 0.12 250 / 0.5);
  opacity: 0;
  pointer-events: none;
}

.sam-scene.is-active .sam-scan {
  animation: sam-scan 1.6s var(--ease-in-out) 0.5s both;
}

@keyframes sam-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  15%,
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(9em);
  }
}

/* Coaching message from Sam */
.sam-coach__head {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.sam-coach__head img {
  width: 2.4em;
  height: 2.4em;
}

.sam-coach__bubble {
  max-width: none;
  padding: 0.75em 1em;
  border-radius: 0.3em 1em 1em 1em;
  background: var(--color-accent-050);
  box-shadow: inset 0 0 0 1px var(--color-accent-100);
  color: var(--color-ink-900);
}

.sam-coach .sam-chip {
  justify-self: start;
}

/* Practice calls / tutorials / 24/7: three tiles that light up in turn. */
.sam-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
  width: 100%;
}

.sam-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.5em;
  padding: 1.4em 0.8em;
  border-radius: 1.1em;
  background: white;
  box-shadow: 0 0 0 1px oklch(90% 0.012 262 / 0.8);
  color: var(--color-ink-500);
  font-size: 1.1em;
  text-align: center;
  opacity: 0.4;
  transform: scale(0.94);
  transition:
    opacity 0.45s var(--ease-out-quart),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.45s var(--ease-out-quart);
}

.sam-tile.is-on {
  opacity: 1;
  transform: none;
  box-shadow:
    0 1.2em 2.6em oklch(30% 0.04 262 / 0.14),
    0 0 0 2px var(--color-accent-600);
}

.sam-tile b {
  color: var(--color-ink-950);
  font-size: 1.05em;
  line-height: 1.2;
}

.sam-tile small {
  font-size: 0.82em;
  line-height: 1.3;
}

.sam-tile__icon {
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

.sam-tile__icon svg {
  width: 1.3em;
  height: 1.3em;
}

/* Smaller text, same circle as the other icons (2.8em at the tile's size). */
.sam-tile__icon--text {
  width: calc(2.8em / 0.86);
  height: calc(2.8em / 0.86);
  font-family: var(--font-display);
  font-size: 0.86em;
  font-weight: 700;
}

/* Goodbye buttons */
.sam-stage__cta {
  position: absolute;
  bottom: 7%;
  left: 50%;
  display: flex;
  gap: 0.6rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.8rem);
  transition:
    opacity 0.45s var(--ease-out-quart),
    transform 0.55s var(--ease-out-quart),
    visibility 0s 0.55s;
}

.sam-stage__cta.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* ---- Phones: a taller stage, Sam on top, the scene card underneath -------- */
@media (max-width: 40rem) {
  .sam-stage {
    --sam-width: 40%;
    --sam-center: translate(-50%, -85%);
    --sam-side: translate(-50%, -205%) scale(0.62);
    --sam-outro: translate(-50%, -95%);
    aspect-ratio: 3 / 5;
    font-size: clamp(0.56rem, 3.1cqi, 0.9rem);
  }

  .sam-scenes {
    inset: 27% 5% 4% 5%;
  }

  .sam-ui {
    padding: 1.2em 1.2em;
  }

  .sam-tiles {
    gap: 0.5em;
  }

  .sam-tile {
    padding: 1.1em 0.4em;
  }

  .sam-stage__cta {
    bottom: 6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sam__eyes,
  .sam-card__bot,
  .sam--card .sam__arc,
  .sam--stage,
  .sam-stage__wiggle,
  .sam-stage[data-speaker] .sam__arc,
  .sam-hearts i,
  .sam-scan {
    animation: none !important;
  }

  .sam-stage__bot {
    transition: none;
  }

  .sam-scene,
  .sam-in,
  .sam-tile,
  .sam-bigcheck {
    transform: none !important;
  }
}

/* ==== Practice call (#sam-practice) ====================================== */
/* Sam's lead-in uses the shared stage; from 19.4s the call window
   (.sam-call) takes over, with a live transcript, both voices, and Sam's
   coaching checklist. */

/* Poster: Sam and Rebecca with a voice wave between them. */
.sam-card__duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  width: 78%;
  margin-top: -6%;
}

.sam-card__duo .sam-card__bot {
  width: 38%;
  margin: 0;
}

.sam-card__duo .sam-card__bot--rebecca {
  animation-delay: -1.7s;
}

.sam-card__wave {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  height: 2.4rem;
}

.sam-card__wave i {
  width: 0.26rem;
  height: 100%;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-accent-600) 55%, oklch(62% 0.18 295));
  animation: sam-bars 1.1s var(--ease-in-out) infinite alternate;
}

.sam-card__wave i:nth-child(2) { animation-delay: -0.3s; }
.sam-card__wave i:nth-child(3) { animation-delay: -0.6s; }
.sam-card__wave i:nth-child(4) { animation-delay: -0.15s; }
.sam-card__wave i:nth-child(5) { animation-delay: -0.45s; }

@keyframes sam-bars {
  from {
    transform: scaleY(0.25);
  }

  to {
    transform: scaleY(1);
  }
}

/* Rebecca joins Sam for the hand-off. */
.sam-stage__bot--guest {
  opacity: 0;
  transform: translate(10%, -58%) scale(0.5);
  transition:
    opacity 0.5s var(--ease-out-quart),
    transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.sam-stage[data-layout="duo"] .sam-stage__bot {
  transform: translate(-112%, -58%) scale(0.86);
}

.sam-stage[data-layout="duo"] .sam-stage__bot--guest.is-on {
  opacity: 1;
  transform: translate(12%, -58%) scale(0.86);
}

.sam-stage[data-layout="call"] .sam-stage__bot {
  opacity: 0;
  transform: translate(-50%, -58%) scale(0.7);
  transition:
    opacity 0.4s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
}

/* In the practice call and debrief, name tags stay up for the whole lead-in
   (so Sam's doesn't blink off and back on), and leave with the bots. */
.sam-stage--practice:not([data-layout="call"]) .sam-tag {
  visibility: visible;
}

/* Rebecca's signal only shows while she is talking. */
.sam-stage__bot--guest .sam__signal,
.sam-person--rebecca .sam__signal {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out-quart);
}

.sam-stage[data-speaker="rebecca"] .sam-person--rebecca .sam__signal {
  opacity: 1;
}

.sam-stage[data-speaker="rebecca"] .sam-person--rebecca .sam__arc {
  animation: sam-talk 0.34s var(--ease-in-out) infinite alternate;
}

/* Lead-in: the missed disclosure on Reid's last call. */
.sam-tick--miss::after {
  content: "\2715";
  background: oklch(60% 0.19 25);
}

.sam-miss.is-on .sam-tick--miss::after {
  opacity: 1;
  transform: none;
}

.sam-checks li .sam-chip {
  margin-left: auto;
}

.sam-chip--bad {
  background: oklch(95% 0.03 25);
  color: oklch(52% 0.18 25);
}

.sam-starting {
  position: absolute;
  bottom: 9%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  background: white;
  box-shadow: 0 0.8em 2em oklch(30% 0.04 262 / 0.14);
  color: var(--color-ink-950);
  font-size: 1.1em;
  font-weight: 600;
  translate: -50% 0;
}

.sam-starting i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--color-success);
  animation: sam-blink-dot 1s var(--ease-in-out) infinite;
}

.sam-stage[data-layout="call"] .sam-starting {
  opacity: 0;
}

@keyframes sam-blink-dot {
  50% {
    opacity: 0.25;
  }
}

/* The call window */
.sam-call {
  position: absolute;
  inset: 5%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1em;
  background: white;
  box-shadow:
    0 1.6em 3.4em oklch(30% 0.04 262 / 0.18),
    0 0 0 1px oklch(90% 0.012 262 / 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5em) scale(0.97);
  transition:
    opacity 0.5s var(--ease-out-quart),
    transform 0.7s var(--ease-out-quart),
    visibility 0s 0.7s;
}

.sam-call.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}

.sam-call__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.8em 1.2em;
  border-bottom: 1px solid var(--color-surface-200);
  background: var(--color-surface-050);
}

.sam-call__title {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  min-width: 0;
  white-space: nowrap;
}

.sam-call__title b {
  color: var(--color-ink-950);
  font-size: 1.05em;
}

.sam-call__title span {
  overflow: hidden;
  color: var(--color-ink-500);
  text-overflow: ellipsis;
}

.sam-call__status {
  color: var(--color-ink-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sam-call__status .sam-swap > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.sam-call__live {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: oklch(62% 0.2 25);
  animation: sam-blink-dot 1.2s var(--ease-in-out) infinite;
}

.sam-call__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  min-height: 0;
}

/* Live transcript: lines appear as they start, words brighten as spoken. */
/* Older lines scroll up under a soft fade instead of a hard cut. */
.sam-call__transcript {
  min-height: 0;
  padding: 1em 1.2em;
  overflow: hidden;
  scrollbar-width: none;
  mask-image: linear-gradient(transparent, black 1.6em);
}

.sam-msgs {
  display: grid;
  gap: 0.7em;
  margin: 0;
  padding: 0 0 0.4em;
  list-style: none;
}

.sam-msg {
  display: grid;
  gap: 0.25em;
  justify-items: start;
  max-width: 88%;
}

.sam-msg:not(.is-on) {
  display: none;
}

.sam-msg.is-on {
  animation: sam-msg-in 0.4s var(--ease-out-quart);
}

.sam-msg--reid {
  justify-self: end;
  justify-items: end;
}

.sam-msg b {
  color: var(--color-ink-500);
  font-size: 0.8em;
  font-weight: 600;
}

.sam-msg p {
  max-width: none;
  padding: 0.6em 0.85em;
  border-radius: 0.3em 1em 1em 1em;
  background: color-mix(in oklch, oklch(62% 0.18 295) 9%, white);
  color: var(--color-ink-900);
  line-height: 1.4;
}

.sam-msg--reid p {
  border-radius: 1em 0.3em 1em 1em;
  background: var(--color-accent-050);
  box-shadow: inset 0 0 0 1px var(--color-accent-100);
}

.sam-msg p span {
  opacity: 0.22;
  transition: opacity 0.2s linear;
}

.sam-msg p span.is-on {
  opacity: 1;
}

@keyframes sam-msg-in {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
}

/* People on the call, and Sam's checklist */
.sam-call__side {
  display: grid;
  align-content: start;
  gap: 0.7em;
  padding: 1em 1.2em;
  border-left: 1px solid var(--color-surface-200);
  background: oklch(98.5% 0.006 262);
}

.sam-person {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0.75em;
  border-radius: 0.8em;
  background: white;
  box-shadow: 0 0 0 1px var(--color-surface-200);
  transition: box-shadow 0.3s var(--ease-out-quart);
}

.sam-stage[data-speaker="rebecca"] .sam-person--rebecca {
  box-shadow: 0 0 0 2px oklch(62% 0.18 295);
}

.sam-stage[data-speaker="reid"] .sam-person--reid {
  box-shadow: 0 0 0 2px var(--color-accent-600);
}

.sam-person__avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
}

.sam-person__avatar--initials {
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(78% 0.08 60), oklch(58% 0.1 30));
  color: white;
  font-weight: 700;
}

.sam-person__text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sam-person__text b {
  color: var(--color-ink-950);
}

.sam-person__text small {
  color: var(--color-ink-500);
  font-size: 0.85em;
}

.sam-meter {
  display: flex;
  align-items: center;
  gap: 0.18em;
  height: 1.2em;
}

.sam-meter i {
  width: 0.22em;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-surface-200);
  transform: scaleY(0.3);
}

.sam-stage[data-speaker="rebecca"] .sam-person--rebecca .sam-meter i,
.sam-stage[data-speaker="reid"] .sam-person--reid .sam-meter i {
  animation: sam-bars 0.45s var(--ease-in-out) infinite alternate;
}

.sam-person--rebecca .sam-meter i {
  background: oklch(62% 0.18 295);
}

.sam-person--reid .sam-meter i {
  background: var(--color-accent-600);
}

.sam-meter i:nth-child(2) { animation-delay: -0.2s !important; }
.sam-meter i:nth-child(3) { animation-delay: -0.35s !important; }
.sam-meter i:nth-child(4) { animation-delay: -0.1s !important; }

.sam-stage:not([data-speaker="rebecca"]) .sam-person--rebecca .sam-meter i,
.sam-stage:not([data-speaker="reid"]) .sam-person--reid .sam-meter i {
  background: var(--color-surface-200);
}

.sam-coachpanel {
  display: grid;
  gap: 0.7em;
  margin-top: 0.3em;
  padding: 0.85em 0.9em;
  border-radius: 0.8em;
  background: white;
  box-shadow: 0 0 0 1px var(--color-surface-200);
}

.sam-coachpanel__head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--color-ink-950);
}

.sam-coachpanel__sam {
  width: 1.9em;
}

.sam--avatar .sam__arc {
  opacity: 0.8;
}

.sam-coachpanel .sam-checks {
  gap: 0.5em;
  font-size: 0.92em;
}

/* The disclosure is this call's point: its tick lands with a glow. */
.sam-checks__key.is-on {
  animation: sam-key 1.4s var(--ease-out-quart);
  border-radius: 0.5em;
}

@keyframes sam-key {
  0% {
    background: color-mix(in oklch, var(--color-success) 22%, white);
    box-shadow: 0 0 0 0.35em color-mix(in oklch, var(--color-success) 22%, white);
  }

  100% {
    background: transparent;
    box-shadow: 0 0 0 0.35em transparent;
  }
}

/* Wrap-up card over the finished call */
.sam-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 7%;
  background: oklch(95% 0.02 262 / 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease-out-quart),
    visibility 0s 0.5s;
}

.sam-done.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.sam-done .sam-ui {
  max-width: 24em;
}

@media (max-width: 40rem) {
  .sam-stage[data-layout="duo"] .sam-stage__bot {
    transform: translate(-100%, -95%) scale(0.8);
  }

  .sam-stage[data-layout="duo"] .sam-stage__bot--guest.is-on {
    transform: translate(0%, -95%) scale(0.8);
  }

  .sam-stage__bot--guest {
    transform: translate(0%, -95%) scale(0.5);
  }

  .sam-call {
    inset: 3%;
  }

  .sam-call__title span {
    display: none;
  }

  /* Stacked: the two people up top, transcript, then the checklist. */
  .sam-call__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sam-call__side {
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    padding: 0.7em;
    border-bottom: 1px solid var(--color-surface-200);
    border-left: 0;
  }

  .sam-person {
    padding: 0.45em 0.5em;
    gap: 0.45em;
  }

  .sam-person__text small {
    display: none;
  }

  .sam-coachpanel {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .sam-coachpanel .sam-checks {
    grid-template-columns: 1fr 1fr;
    font-size: 0.88em;
  }

  .sam-coachpanel .sam-chip {
    display: none;
  }

  .sam-call__transcript {
    padding: 0.8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sam-card__wave i,
  .sam-meter i,
  .sam-msg.is-on,
  .sam-checks__key.is-on,
  .sam-call__live,
  .sam-starting i {
    animation: none !important;
  }

  .sam-call,
  .sam-stage__bot--guest {
    transition: opacity 0.2s linear;
  }
}

/* ==== Debrief (#sam-debrief) ============================================= */
/* Same stage and session window as the practice call; Reid (a person, so an
   initials avatar rather than a bot) joins Sam, and Sam's session notes fill
   in as he talks. */

.sam-reid {
  display: grid;
  place-items: center;
  width: 74%;
  aspect-ratio: 1;
  margin: 12% auto 6%;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(78% 0.08 60), oklch(58% 0.1 30));
  box-shadow: 0 1em 2.4em oklch(40% 0.08 40 / 0.22);
  color: white;
  font-family: var(--font-display);
  font-size: 5em;
  font-weight: 700;
  line-height: 1;
}

.sam-card__bot--reid {
  animation-delay: -1.7s;
}

.sam-card__bot--reid .sam-reid {
  margin: 0 auto;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

/* Poster: note lines being written between Sam and Reid. */
.sam-card__notes {
  display: grid;
  gap: 0.3rem;
}

.sam-card__notes i {
  display: block;
  width: 1.8rem;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-accent-600) 50%, white);
  transform-origin: left;
  animation: sam-note 2.6s var(--ease-out-quart) infinite;
}

.sam-card__notes i:nth-child(2) {
  width: 1.3rem;
  animation-delay: 0.3s;
}

.sam-card__notes i:nth-child(3) {
  width: 1.55rem;
  animation-delay: 0.6s;
}

@keyframes sam-note {
  0% {
    transform: scaleX(0);
  }

  40%,
  85% {
    transform: scaleX(1);
    opacity: 1;
  }

  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Lead-in: practice, debrief, improve. */
.sam-steps {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sam-step {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.7em;
  border-radius: 0.8em;
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
  color: var(--color-ink-500);
  font-weight: 600;
  opacity: 0.55;
  transition:
    opacity 0.4s var(--ease-out-quart),
    background 0.4s var(--ease-out-quart),
    box-shadow 0.4s var(--ease-out-quart),
    color 0.4s var(--ease-out-quart);
}

.sam-step span {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-surface-200);
  color: var(--color-ink-700);
  font-size: 0.85em;
  transition: background 0.4s var(--ease-out-quart), color 0.4s var(--ease-out-quart);
}

.sam-step.is-on {
  background: var(--color-accent-050);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600);
  color: var(--color-ink-950);
  opacity: 1;
}

.sam-step.is-on span {
  background: var(--color-accent-600);
  color: white;
}

.sam-motions {
  justify-self: start;
  color: var(--color-ink-500);
}

.sam-motions s {
  text-decoration-color: oklch(60% 0.19 25);
  text-decoration-thickness: 2px;
}

.sam-motions::before {
  content: "\2715";
  margin-right: 0.5em;
  color: oklch(60% 0.19 25);
  font-weight: 700;
}

/* Guest joining Sam: a person needs no antenna pulse. */
.sam-stage__bot--guest .sam-reid {
  font-size: 4.6em;
}

/* Chat colors: Sam blue, Rebecca violet, Reid neutral. */
.sam-msg--sam p {
  background: var(--color-accent-050);
  box-shadow: inset 0 0 0 1px var(--color-accent-100);
}

.sam-msg--reid p {
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
}

.sam-stage[data-speaker="sam"] .sam-person--sam {
  box-shadow: 0 0 0 2px var(--color-accent-600);
}

.sam-person--sam .sam-meter i {
  background: var(--color-accent-600);
}

.sam-person--reid .sam-meter i {
  background: oklch(62% 0.1 40);
}

.sam-stage[data-speaker="sam"] .sam-person--sam .sam-meter i {
  animation: sam-bars 0.45s var(--ease-in-out) infinite alternate;
}

.sam-stage:not([data-speaker="sam"]) .sam-person--sam .sam-meter i {
  background: var(--color-surface-200);
}

.sam-stage[data-speaker="sam"] .sam-person--sam .sam__arc {
  animation: sam-talk 0.34s var(--ease-in-out) infinite alternate;
}

.sam-stage[data-speaker="reid"] .sam-person--reid {
  box-shadow: 0 0 0 2px oklch(62% 0.1 40);
}

/* Session notes, written as Sam talks. */
/* The notes panel is the tallest thing in the side column, so the debrief
   tightens the column's spacing to keep it all in view. */
#sam-debrief .sam-call__side,
#inbound-escalate .sam-call__side,
#inbound-spanish .sam-call__side {
  gap: 0.55em;
  padding: 0.85em 1em;
}

#sam-debrief .sam-person,
#inbound-escalate .sam-person,
#inbound-spanish .sam-person {
  padding: 0.45em 0.7em;
}

#sam-debrief .sam-coachpanel,
#inbound-escalate .sam-coachpanel,
#inbound-spanish .sam-coachpanel {
  margin-top: 0;
}

#inbound-escalate .sam-coachpanel,
#inbound-spanish .sam-coachpanel {
  gap: 0.55em;
}

.sam-notes {
  gap: 0.6em;
}

.sam-notes__group {
  display: grid;
  gap: 0.45em;
}

.sam-notes__label {
  color: var(--color-success);
  font-size: 0.9em;
  font-weight: 600;
}

.sam-notes__label--work {
  color: oklch(52% 0.13 60);
}

.sam-notes__list {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92em;
}

.sam-notes__list li {
  display: flex;
  gap: 0.55em;
  color: var(--color-ink-900);
}

.sam-notes__list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  margin-top: 0.45em;
  border-radius: 50%;
  background: oklch(72% 0.14 70);
}

.sam-tick--next::after {
  content: "\2192";
  background: oklch(72% 0.14 70);
  opacity: 1;
  transform: none;
}

@media (max-width: 40rem) {
  .sam-stage__bot--guest .sam-reid {
    font-size: 3.4em;
  }

  /* Compact notes on phones: what went well, and the one thing to work on
     (its details and the closing chips are left to the transcript). */
  .sam-notes__list {
    display: none;
  }

  .sam-notes .sam-checks {
    grid-template-columns: 1fr;
  }

  .sam-notes .sam-chip {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sam-card__notes i {
    animation: none !important;
  }
}

/* ==== AI Inbound calls (#inbound-reschedule, #inbound-escalate) ========== */
/* The call window from the practice call, from the business's side: the
   caller on the left, the AI agent (Sam's shape in teal) on the right, and
   its actions filling in as it handles the request. */

.sam-msg--agent {
  justify-self: end;
  justify-items: end;
}

.sam-msg--agent p {
  border-radius: 1em 0.3em 1em 1em;
  background: color-mix(in oklch, oklch(66% 0.12 180) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(66% 0.12 180) 22%, white);
}

.sam-msg--caller p {
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
}

.sam-person--agent .sam-meter i {
  background: oklch(62% 0.12 180);
}

.sam-person--caller .sam-meter i {
  background: oklch(62% 0.1 40);
}

.sam-stage[data-speaker="agent"] .sam-person--agent {
  box-shadow: 0 0 0 2px oklch(62% 0.12 180);
}

.sam-stage[data-speaker="caller"] .sam-person--caller {
  box-shadow: 0 0 0 2px oklch(62% 0.1 40);
}

.sam-stage[data-speaker="agent"] .sam-person--agent .sam-meter i,
.sam-stage[data-speaker="caller"] .sam-person--caller .sam-meter i {
  animation: sam-bars 0.45s var(--ease-in-out) infinite alternate;
}

.sam-stage:not([data-speaker="agent"]) .sam-person--agent .sam-meter i,
.sam-stage:not([data-speaker="caller"]) .sam-person--caller .sam-meter i {
  background: var(--color-surface-200);
}

/* The agent's signal shows only while it talks. */
.sam-person--agent .sam__signal {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out-quart);
}

.sam-stage[data-speaker="agent"] .sam-person--agent .sam__signal {
  opacity: 1;
}

.sam-stage[data-speaker="agent"] .sam-person--agent .sam__arc {
  animation: sam-talk 0.34s var(--ease-in-out) infinite alternate;
}

.sam-person__avatar--initials {
  font-size: 0.85em;
}

/* "Ringing..." before the agent picks up. */
.sam-call__status .sam-swap > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.sam-call__ring {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--color-success);
  animation: sam-blink-dot 0.7s var(--ease-in-out) infinite;
}

/* The appointment the agent finds, then moves. */
.sam-appt {
  display: grid;
  gap: 0.3em;
  padding: 0.7em 0.8em;
  border-radius: 0.7em;
  background: var(--color-surface-050);
  box-shadow: inset 0 0 0 1px var(--color-surface-200);
  font-size: 0.92em;
}

.sam-appt__what {
  color: var(--color-ink-950);
  font-weight: 600;
}

.sam-appt__row {
  color: var(--color-ink-700);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease-out-quart);
}

.sam-appt__old.is-on {
  color: var(--color-ink-500);
  text-decoration: line-through;
  text-decoration-color: oklch(60% 0.19 25);
}

.sam-appt__new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  color: var(--color-ink-950);
  font-weight: 600;
}

.sam-appt__new .sam-chip {
  margin: 0;
}

/* People without a name on screen get a person glyph, not initials. */
.sam-person__avatar--icon svg {
  width: 52%;
  height: 52%;
}

.sam-person__avatar--icon {
  background: linear-gradient(135deg, oklch(74% 0.03 250), oklch(56% 0.04 250));
}

/* Inbound posters: a caller (a face) rings the agent down a line, the phone
   riding along it. The escalation card's caller is angry and fuming; the
   bilingual card's is puzzled. */
.sam-card__call {
  display: flex;
  align-items: center;
  width: 84%;
  margin-top: -6%;
}

.sam-card__caller {
  flex-shrink: 0;
  width: 30%;
}

.sam-face {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 0.5rem 0.9rem oklch(55% 0.1 60 / 0.25));
}

.sam-card__call .sam-card__bot {
  flex-shrink: 0;
  width: 34%;
  margin: 0;
  /* Line up the bot's head, not its whole box (antenna and signal included),
     with the caller and the line: the body's middle sits 119 of the viewBox's
     670 units below the box's middle. */
  translate: 0 -17.8%;
  animation: none;
}

.sam-card__line {
  position: relative;
  flex: 1;
  height: 0.2rem;
  margin: 0 3%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, oklch(70% 0.1 180) 0 0.4rem, transparent 0.4rem) 0 0 / 0.75rem 100% repeat-x;
  animation: sam-dash 0.8s linear infinite;
}

.sam-card__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(1.9rem, 1.6rem + 0.9vw, 2.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b3a0, #0e9f90);
  box-shadow: 0 0.4rem 1rem oklch(55% 0.1 180 / 0.35);
  color: white;
  translate: -50% -50%;
  animation: sam-ring 1.7s var(--ease-in-out) infinite;
}

.sam-card__phone svg {
  width: 52%;
  height: 52%;
}

@keyframes sam-dash {
  to {
    background-position: 0.75rem 0;
  }
}

@keyframes sam-ring {
  0%,
  40%,
  100% {
    rotate: 0deg;
  }

  8%,
  24% {
    rotate: -14deg;
  }

  16%,
  32% {
    rotate: 14deg;
  }
}

/* Angry: a quicker red line and fuming marks. */
.sam-card__call--angry .sam-card__line {
  background-image: linear-gradient(90deg, oklch(66% 0.17 25) 0 0.4rem, transparent 0.4rem);
  animation-duration: 0.45s;
}

.sam-card__call--angry .sam-card__phone {
  animation-duration: 0.9s;
}

.sam-face__fume {
  animation: sam-fume 0.9s steps(1) infinite;
}

.sam-face__huh {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sam-huh 2.4s var(--ease-in-out) infinite;
}

@keyframes sam-huh {
  0%,
  100% {
    rotate: -8deg;
  }

  50% {
    rotate: 8deg;
  }
}

@keyframes sam-fume {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* Bilingual poster: a lilac caller, and the bubble trading Hello / ¡Hola!. */
.sam-card__bubble--swap {
  display: grid;
}

.sam-card__bubble--swap > span {
  grid-area: 1 / 1;
  text-align: center;
  animation: sam-hello 4.4s var(--ease-in-out) infinite;
}

.sam-card__bubble--swap > span + span {
  animation-delay: -2.2s;
}

@keyframes sam-hello {
  0%,
  48%,
  100% {
    opacity: 0;
  }

  4%,
  44% {
    opacity: 1;
  }
}

/* The call's language: English, then Español once the agent switches. */
.sam-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  font-size: 0.92em;
}

.sam-lang__pills {
  display: flex;
  gap: 0.3em;
}

.sam-lang__pills i {
  padding: 0.15em 0.6em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, oklch(66% 0.12 180) 14%, white);
  color: oklch(42% 0.09 180);
  font-style: normal;
  font-weight: 600;
  transition:
    background 0.4s var(--ease-out-quart),
    color 0.4s var(--ease-out-quart);
}

.sam-lang__pills i[data-at]:not(.is-on),
.sam-lang__pills i:has(+ .is-on) {
  background: var(--color-surface-100);
  color: var(--color-ink-500);
  font-weight: 500;
}

/* English under a Spanish line, once it has been said. */
.sam-msg__tr {
  max-width: 100%;
  color: var(--color-ink-500);
  font-size: 0.85em;
  font-style: italic;
  line-height: 1.35;
}

.sam-msg--agent .sam-msg__tr {
  text-align: right;
}

/* Caller mood: three bars that fill and warm as the caller gets upset. */
.sam-mood {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6em;
  font-size: 0.92em;
}

.sam-mood__label {
  color: var(--color-ink-700);
}

.sam-mood__bar {
  display: flex;
  gap: 0.2em;
}

.sam-mood__bar i {
  flex: 1;
  height: 0.4em;
  border-radius: var(--radius-pill);
  background: var(--color-surface-200);
  transition: background 0.5s var(--ease-out-quart);
}

.sam-mood__bar i.is-on {
  background: oklch(78% 0.13 85);
}

.sam-mood__bar i:nth-child(2).is-on {
  background: oklch(70% 0.15 55);
}

.sam-mood__bar i:nth-child(3).is-on {
  background: oklch(60% 0.19 25);
}

/* Only the latest mood word shows. */
.sam-mood__value {
  display: grid;
  justify-items: end;
  min-width: 5.2em;
  color: var(--color-ink-950);
}

.sam-mood__word {
  grid-area: 1 / 1;
  transition: opacity 0.3s var(--ease-out-quart);
}

.sam-mood__word:has(~ .sam-mood__word.is-on),
.sam-mood__word[data-at]:not(.is-on) {
  opacity: 0;
}

/* The note the agent writes for the manager as the caller explains. */
.sam-note__line {
  display: flex;
  gap: 0.5em;
  color: var(--color-ink-900);
}

.sam-note__line::before {
  content: "";
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  margin-top: 0.5em;
  border-radius: 50%;
  background: oklch(62% 0.12 180);
}

@media (max-width: 40rem) {
  .sam-actions .sam-checks {
    grid-template-columns: 1fr;
  }

  #inbound-reschedule .sam-actions .sam-checks li:first-child {
    display: none;
  }

  .sam-actions .sam-chip {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sam-call__ring,
  .sam-card__line,
  .sam-card__phone,
  .sam-face__fume,
  .sam-face__huh,
  .sam-card__bubble--swap > span {
    animation: none !important;
  }

  .sam-card__bubble--swap > span + span {
    display: none;
  }
}