/* HOAi Voice kiosk: layout and components. Sizes come from tokens.css only;
   layout coordinates are design px (the 1640 x 2360 artboards) x --u. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background-color: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* Kiosk hardening: no zoom, no text selection, no long-press callouts, no
   pull-to-refresh or rubber-band scrolling. */
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

img, video, canvas { display: block; }
p, h1, h2, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; }

/* ---------- Stage ---------- */

.app {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.screen {
  position: relative;
  grid-area: 1 / 1;
  width: calc(1640 * var(--u));
  height: calc(2360 * var(--u));
  overflow: visible;
  animation: screen-in var(--dur) var(--ease-out) both;
}
.screen[hidden] { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(calc(24 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

/* Background glows reach past the stage to the screen edges. */
.glow { position: absolute; border-radius: 50%; pointer-events: none; }
.glow--teal {
  left: calc(-400 * var(--u)); top: calc(-300 * var(--u));
  width: calc(1200 * var(--u)); height: calc(1000 * var(--u));
  background: radial-gradient(closest-side, var(--c-glow-teal), transparent);
}
.glow--blue {
  right: calc(-500 * var(--u)); bottom: calc(-400 * var(--u));
  width: calc(1400 * var(--u)); height: calc(1200 * var(--u));
  background: radial-gradient(closest-side, var(--c-glow-blue), transparent);
}

/* ---------- Shared primitives ---------- */

.eyebrow {
  font-size: var(--fs-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}

.title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

.brand { display: flex; align-items: center; }
.brand__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--c-tile);
}
.brand__mark { height: auto; pointer-events: none; }
.brand__name {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: var(--bw-focus) solid var(--c-focus); outline-offset: var(--s-2); }

.btn--primary {
  background-color: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: var(--fw-bold);
}
.btn--primary:hover { background-color: var(--c-accent-hover); }

.btn--ghost {
  height: calc(104 * var(--u));
  padding: 0 var(--s-12);
  background: transparent;
  border: var(--bw) solid var(--c-rule-strong);
  color: var(--c-ink);
  font-size: var(--fs-l);
  font-weight: var(--fw-semibold);
}
.btn--ghost:hover { border-color: var(--c-ink-muted); }

.btn--large {
  height: calc(160 * var(--u));
  padding: 0 var(--s-20);
  gap: var(--s-7);
  font-size: var(--fs-2xl);
}
.btn--large .icon { font-size: var(--s-14); }

/* ---------- Waveform canvases ---------- */

.wave { position: absolute; left: 0; pointer-events: none; }
.wave--hero   { top: calc(730 * var(--u)); width: calc(1640 * var(--u)); height: calc(900 * var(--u)); }
.wave--choose { top: calc(330 * var(--u)); width: calc(1640 * var(--u)); height: calc(500 * var(--u)); }

/* ---------- 1 · Activate ---------- */

.brand--hero {
  position: absolute;
  left: 0; top: calc(200 * var(--u));
  width: 100%;
  flex-direction: column;
  gap: var(--s-12);
}
.brand--hero .brand__tile { width: calc(260 * var(--u)); height: calc(260 * var(--u)); border-radius: var(--r-xl); }
.brand--hero .brand__mark { width: calc(130 * var(--u)); }
.brand--hero .brand__name { font-size: var(--fs-6xl); }

.activate {
  position: absolute;
  left: 0; top: calc(1080 * var(--u));
  width: 100%;
  display: flex;
  justify-content: center;
}
.btn--hero {
  height: calc(200 * var(--u));
  padding: 0 var(--s-22);
  gap: var(--s-9);
  font-size: var(--fs-3xl);
  letter-spacing: -0.01em;
  box-shadow:
    0 0 0 calc(16 * var(--u)) var(--c-accent-tint),
    0 0 0 calc(36 * var(--u)) rgba(126, 222, 206, 0.07);
  animation: hero-breathe 2.8s var(--ease-in-out) infinite alternate;
}
.btn--hero .icon { font-size: var(--s-18); }
@keyframes hero-breathe {
  from { box-shadow: 0 0 0 calc(16 * var(--u)) var(--c-accent-tint), 0 0 0 calc(36 * var(--u)) rgba(126, 222, 206, 0.07); }
  to   { box-shadow: 0 0 0 calc(22 * var(--u)) var(--c-accent-tint), 0 0 0 calc(52 * var(--u)) rgba(126, 222, 206, 0.05); }
}

.activate__hint {
  position: absolute;
  left: 0; top: calc(1458 * var(--u));
  width: 100%;
  text-align: center;
  font-size: var(--fs-l);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
}

/* ---------- 2 · Starting points ---------- */

.brand--row { gap: var(--s-9); }
.brand--choose {
  position: absolute;
  left: 0; top: calc(120 * var(--u));
  width: 100%;
  justify-content: center;
}
.brand--choose .brand__tile { width: calc(140 * var(--u)); height: calc(140 * var(--u)); border-radius: var(--r-m); }
.brand--choose .brand__mark { width: calc(70 * var(--u)); }
.brand--choose .brand__name { font-size: var(--fs-4xl); }

.choose__head {
  position: absolute;
  left: var(--s-30); top: calc(880 * var(--u));
  width: calc(1400 * var(--u));
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.choose__grid {
  position: absolute;
  left: var(--s-30); top: calc(1180 * var(--u));
  width: calc(1400 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-10);
}

.card {
  height: calc(440 * var(--u));
  padding: var(--s-14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  background-color: var(--c-surface);
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.card:hover { border-color: var(--c-rule-strong); }
.card:active { transform: scale(0.98); background-color: var(--c-surface-active); }
.card:focus-visible { outline: var(--bw-focus) solid var(--c-focus); outline-offset: var(--s-2); }

.card__icon {
  width: calc(128 * var(--u));
  height: calc(128 * var(--u));
  border-radius: 50%;
  background-color: var(--c-accent-tint);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-16);
}
.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
}
.card__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--ls-title);
}
.card__arrow { color: var(--c-accent); font-size: var(--s-14); }

/* ---------- 3 · Listening ---------- */

.listen__bar {
  position: absolute;
  left: var(--s-20); top: var(--s-20);
  width: calc(1480 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand--listen { gap: var(--s-7); }
.brand--listen .brand__tile { width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: var(--r-s); }
.brand--listen .brand__mark { width: calc(52 * var(--u)); }
.brand--listen .brand__name { font-size: var(--fs-3xl); }

.call {
  position: absolute;
  left: var(--s-20); top: calc(264 * var(--u));
  width: calc(1480 * var(--u));
  height: calc(1688 * var(--u));
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.call__context {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  padding-bottom: var(--s-10);
  border-bottom: var(--bw) solid var(--c-rule);
}
.call__icon {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--c-accent-tint);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-12);
}
.call__summary {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
}

/* The transcript fills the space and scrolls itself; older lines fade out
   under the top edge. */
.transcript {
  list-style: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-16) 0 var(--s-8);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(160 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(160 * var(--u)));
}

.line {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: calc(1180 * var(--u));
  animation: line-in var(--dur) var(--ease-out) both;
  transition: opacity var(--dur-slow) ease;
}
.line--hoai { align-self: flex-start; align-items: flex-start; }
.line--caller { align-self: flex-end; align-items: flex-end; }
.line.is-past { opacity: 0.5; }

@keyframes line-in {
  from { opacity: 0; transform: translateY(calc(32 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

.line__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-faint);
}
.line--hoai .line__who { color: var(--c-accent); }

/* Three bars that move while that line is being spoken. */
.speaking {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: var(--s-6);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.speaking i {
  width: calc(5 * var(--u));
  height: 100%;
  border-radius: var(--r-pill);
  background-color: currentColor;
  transform-origin: center;
  animation: speak 0.9s var(--ease-in-out) infinite alternate;
}
.speaking i:nth-child(2) { animation-delay: -0.3s; }
.speaking i:nth-child(3) { animation-delay: -0.6s; }
.line.is-active .speaking { opacity: 1; }
@keyframes speak { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

.line__bubble {
  padding: var(--s-9) var(--s-12);
  border-radius: var(--r-l);
  border: var(--bw) solid transparent;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
}
.line--hoai .line__bubble { background-color: var(--c-surface); border-color: var(--c-rule); border-top-left-radius: var(--s-2); }
.line--caller .line__bubble { background-color: var(--c-accent-tint); border-top-right-radius: var(--s-2); }
.line--hoai.is-active .line__bubble { background-color: var(--c-surface-active); border-color: var(--c-accent); }
.line--caller.is-active .line__bubble { background-color: var(--c-accent-tint-strong); }

/* What HOAi did in the system during the call. */
.event {
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-8) var(--s-5) var(--s-6);
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-s);
  animation: line-in var(--dur) var(--ease-out) both;
}
.event .icon { font-size: var(--s-10); color: var(--c-accent); }
.event__label { font-weight: var(--fw-semibold); }
.event__detail { color: var(--c-ink-faint); font-weight: var(--fw-medium); }
.event__detail::before { content: ""; display: inline-block; width: var(--bw); height: 0.9em; margin-right: var(--s-4); vertical-align: -0.1em; background-color: var(--c-rule-strong); }

.player {
  position: absolute;
  left: var(--s-20); top: calc(2016 * var(--u));
  width: calc(1480 * var(--u));
  height: calc(240 * var(--u));
  padding: 0 var(--s-18);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  background-color: var(--c-surface);
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.player__label { display: flex; flex-direction: column; gap: var(--s-2); flex-shrink: 0; }
.player__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.player__title { font-size: var(--fs-l); font-weight: var(--fw-semibold); }
.wave--player { position: relative; flex: 1 1 auto; min-width: 0; height: calc(200 * var(--u)); }
.player__time {
  flex-shrink: 0;
  font-size: var(--fs-m);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-faint);
}

/* ---------- 4 · Wrap-up ---------- */

.wrap__video {
  position: absolute;
  left: var(--s-30); top: calc(200 * var(--u));
  width: calc(1400 * var(--u));
  height: calc(700 * var(--u));
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--r-m);
  overflow: hidden;
  background-color: var(--c-video);
}
.wrap__video video { width: 100%; height: 100%; object-fit: cover; }

.wrap__qr {
  position: absolute;
  left: var(--s-30); top: calc(980 * var(--u));
  width: calc(1400 * var(--u));
  padding: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-18);
  background-color: var(--c-surface);
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--r-m);
}
.wrap__qr-tile {
  width: calc(440 * var(--u));
  height: calc(440 * var(--u));
  flex-shrink: 0;
  padding: var(--s-7);
  background-color: var(--c-ink);
  border-radius: var(--r-s);
}
.wrap__qr-tile img { width: 100%; height: 100%; object-fit: contain; }
.wrap__qr-copy { display: flex; flex-direction: column; gap: var(--s-7); }
.wrap__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.wrap__sub { font-size: var(--fs-l); line-height: var(--lh-body); color: var(--c-ink-muted); }
.wrap__code {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-7);
  border-top: var(--bw) solid var(--c-rule);
}
.wrap__code-label { font-size: var(--fs-s); line-height: var(--lh-snug); color: var(--c-ink-faint); }
.wrap__code-value { font-size: var(--fs-l); line-height: var(--lh-snug); font-weight: var(--fw-medium); }
.wrap__code-value strong { font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--c-accent); }

.wrap__foot {
  position: absolute;
  left: var(--s-30); top: calc(1700 * var(--u));
  width: calc(1400 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
}
.wrap__station {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-align: center;
}
.wrap__station .icon { font-size: var(--s-18); color: var(--c-accent); }

/* ---------- Staff info (long-press the logo on the first screen) ---------- */

.staff {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-12));
  transform: translateX(-50%);
  padding: var(--s-5) var(--s-10);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  border: var(--bw) solid var(--c-rule);
  font-size: var(--fs-s);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.staff[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn--hero, .speaking i { animation: none; }
  .screen, .line, .event { animation: none; }
}