/* ---------- mini call bar ----------
 * The component, shared by the lander, the preview page at /r/:token, and the
 * chatbot widget. See `mini-call-bar.js` for the morph that drives the transform.
 *
 * Where the bar is pinned is the host's business, not the component's: the
 * lander clears a toolbar, the preview page has none. Each host sets `top`,
 * `left`, `right` and `width` in its own stylesheet.
 */
.minicall {
  position: fixed;
  z-index: calc(var(--hs-layer-sticky) - 1);
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-3) var(--hs-space-3) var(--hs-space-3) var(--hs-space-4);
  color: #F9FAF2;
  /* No enter or exit animation. The transform and opacity are written on every
     scroll event by mountMiniCallBar(), which flies the bar from the call card
     to its pinned spot and back — a keyframe animation on the same two
     properties would win the cascade and cancel the travel. */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.minicall[hidden] { display: none; }
.minicall--select { cursor: pointer; }

/* The one time the bar animates itself. `dismiss()` stops following the scroll
   before adding this, so there is nothing left to fight over the property.
   Untappable on the way out: a hang-up under a fading finger is a call ended by
   accident. */
.minicall.is-going {
  transition: opacity 240ms var(--hs-ease-standard);
  pointer-events: none;
}

/* The surface, split off the bar so the two can move at different sizes: the
   shell stretches back out to the call card's footprint while the wave and the
   words stay pill-sized. Scaling the bar itself would blow the text up to twice
   its size on the way past, which reads as a zoom, not a morph. */
.minicall-shell {
  position: absolute; inset: 0; z-index: 0;
  border-radius: var(--hs-radius-pill);
  background: #0E1B11;
  /* The alpha rides the morph. A shadow is scaled along with the box that casts
     it, so a shell stretched to seven times its height threw an eighteen-pixel
     offset a hundred and thirty pixels down the page as a flat grey band —
     which reads as a second object below the blob, not as depth. */
  box-shadow: 0 18px 40px -18px rgba(14, 27, 17, var(--mini-shadow, 0.65));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Above the shell, and dimmed to --mini-content while the shell is still card
   shaped — a pill's worth of text floating in the middle of a card-sized blob is
   the one frame that gives the trick away. */
.minicall-wave,
.minicall-meta,
.minicall-end { position: relative; z-index: 1; opacity: var(--mini-content, 1); }

/* The bar's proof of life. A single pulsing dot said the same thing for the
   whole call, so a bar parked at the top of the page read as stuck; four bars
   that change pace and colour with whose turn it is read as a call. */
.minicall-wave {
  /* How far the bars swing, 0..1, driven off the call's real audio. */
  --mini-gain: 1;
  flex: none; display: flex; align-items: center; gap: 2px; height: 16px;
}
.minicall-wave span {
  --mini-floor: .22;
  --mini-peak: 1;
  display: block; width: 3px; height: 16px; border-radius: var(--hs-radius-pill);
  background: #43E5A4;
  transform: scaleY(var(--mini-floor));
  animation: miniWave 1.1s var(--hs-ease-standard) infinite;
}
.minicall-wave span:nth-child(2) { animation-delay: .13s; }
.minicall-wave span:nth-child(3) { animation-delay: .27s; }
.minicall-wave span:nth-child(4) { animation-delay: .4s; }
/* max() so a quiet moment shrinks the swing towards the floor and never below
   it — a peak under the floor would run the bars backwards. */
@keyframes miniWave {
  0%, 100% { transform: scaleY(var(--mini-floor)); }
  50%      { transform: scaleY(max(var(--mini-floor), calc(var(--mini-peak) * var(--mini-gain)))); }
}

/* Waiting on the handshake, and connected but quiet: alive, low, unhurried —
   but never so low that four bars read as four dots. */
.minicall[data-call="connecting"] .minicall-wave span {
  --mini-floor: .25; --mini-peak: .5; animation-duration: 1.8s; opacity: .6;
}
.minicall[data-call="live"] .minicall-wave span {
  --mini-floor: .3; --mini-peak: .62; animation-duration: 1.4s; opacity: .8;
}
.minicall[data-call="agent"] .minicall-wave span { --mini-peak: 1; animation-duration: .62s; }
/* The caller's turn reads in the bar's own foreground colour, not the agent's
   green, so a glance at the wave alone says who is talking. */
.minicall[data-call="you"] .minicall-wave span {
  --mini-peak: .88; animation-duration: .5s; background: #F9FAF2;
}
.minicall[data-call="you"] .minicall-meta b { color: #F9FAF2; }
.minicall[data-call="ended"] .minicall-wave span {
  animation: none; transform: scaleY(.22); background: rgba(249, 250, 242, .4);
}
.minicall[data-call="ended"] .minicall-meta b { color: rgba(249, 250, 242, .6); }

@media (prefers-reduced-motion: reduce) {
  /* Still four bars of different heights — the state stays readable without
     anything moving. */
  .minicall-wave span { animation: none; transform: scaleY(.4); }
  .minicall-wave span:nth-child(2) { transform: scaleY(.85); }
  .minicall-wave span:nth-child(3) { transform: scaleY(.6); }
  .minicall-wave span:nth-child(4) { transform: scaleY(.95); }
}

.minicall-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.minicall-meta b {
  font-family: var(--hs-font-ui); font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-bold); letter-spacing: var(--hs-tracking-caps);
  text-transform: uppercase; color: #43E5A4;
}
/* One line, always: the transcript keeps arriving and the bar must not grow. */
.minicall-meta i {
  font-style: normal; font-family: var(--hs-font-ui); font-size: var(--hs-text-sm);
  color: rgba(252, 251, 250, 0.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.minicall-end {
  flex: none; cursor: pointer; border: 0;
  padding: 8px 14px; border-radius: var(--hs-radius-pill);
  background: #3A1C1C; color: #FF9B9B;
  font-family: var(--hs-font-ui); font-size: var(--hs-text-sm); font-weight: var(--hs-weight-bold);
  white-space: nowrap;
}
.minicall-end:hover { filter: brightness(1.12); }
.minicall-end:focus-visible {
  outline: var(--hs-size-focus-ring) solid var(--hs-border-focus); outline-offset: 2px;
}