/* Detail-page examples — the real UI each library's own demo page shows,
   sitting above the mini playground. Ported from those pages so the two
   stay the same thing; the light-theme rules are dropped, since this site
   is dark-only.

   The mock chrome reads these tokens; without them every fill, border and
   label resolved to nothing and the mocks rendered as empty boxes. Values
   are the beam site's dark theme. */
:root {
  --c-mock-bg: #1d1d1d;
  --c-mock-border: rgba(44, 47, 54, 0.52);
  --c-mock-chip-bg: rgba(255, 255, 255, 0.04);
  --c-mock-chip-line: rgba(255, 255, 255, 0.02);
  --c-mock-chip-top: rgba(255, 255, 255, 0.04);
  --c-mock-glow: rgba(255, 255, 255, 0.02);
  --c-mock-placeholder: #4e4e4e;
  --c-mock-search-text: #565656;
  --c-mock-square: rgba(217, 217, 217, 0.8);
  --c-mock-tag-text: #caccd2;
  --c-mock-text: #c0c0c0;
  --c-mock-text-strong: #ffffff;
  --shimmer-band: 400%;
  /* The orb demo site's own shimmer ink (sites/orbs/styles.css), so a
     label reads the same here as on the page these pills come from. */
  --shimmer-base: rgba(251, 251, 251, 0.5);
  --shimmer-dur: 2000ms;
  --shimmer-ease: linear;
  --shimmer-highlight: #ffffff;
}

/* The examples block and the playground beneath it. */
.detail-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.detail-playground-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 14px;
  color: #fbfbfb;
  margin-bottom: 12px;
}

/* ── Beam (ported from sites/beam/src/styles.css) ── */
.example-row-full {
  width: 100%;
  height: 370px;
  border-radius: 16px;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  overflow: hidden;
  position: relative;
}


.example-row-split {
  display: grid;
  grid-template-columns: 271fr 552fr;
  gap: 12px;
  width: 100%;
}

.example-cell {
  border-radius: 16px;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  min-height: 314px;
  overflow: hidden;
}


/* ─── Mock UI: Chat input ──────────────────────────────────── */

.mock-chat {
  width: 348px;
  max-width: 100%;
  border-radius: 20px;
  border: none;
  background: var(--c-mock-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-border),
    inset 0 0 50px 0 var(--c-mock-glow);
  overflow: hidden;
  position: relative;
}

.mock-chat-inner {
  padding: 7px 7px 8px;
  display: flex;
  flex-direction: column;
  height: 122px;
}

.mock-chat .pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 24px;
  padding: 0 4px;
  margin-left: 1px;
  border-radius: 36px;
  background: var(--c-mock-chip-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-chip-line),
    inset 0 1px 0 0 var(--c-mock-chip-top);
}

.mock-chat .pill svg {
  width: 16px;
  height: 16px;
}

.mock-chat .placeholder {
  font-size: 13px;
  line-height: 16px;
  color: var(--c-mock-placeholder);
  padding: 16px 4px 0;
}

.mock-chat .bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  /* Above the effect's layers (z 1–4). */
  position: relative;
  z-index: 5;
}

.mock-chat .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px 0 8px;
  border-radius: 36px;
  background: var(--c-mock-chip-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-chip-line),
    inset 0 1px 0 0 var(--c-mock-chip-top);
  font-size: 12px;
  line-height: 14px;
  color: var(--c-mock-tag-text);
}

/* Keep the Agent/Auto cluster inset symmetric with the bottom inset (8px). */
.mock-chat .bottom-row .tag:first-child {
  margin-left: 1px;
}

.mock-chat .tag svg {
  width: 16px;
  height: 16px;
}

.mock-chat .send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 36px;
  background: var(--c-mock-chip-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-chip-line),
    inset 0 1px 0 0 var(--c-mock-chip-top);
  margin-left: auto;
  cursor: default;
  padding: 0 8px;
}

.mock-chat .send-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

/* ─── Mock UI: Working task list ───────────────────────────── */

.mock-working {
  width: 295px;
  max-width: 100%;
  border-radius: 20px;
  border: none;
  background: var(--c-mock-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-border),
    inset 0 0 50px 0 var(--c-mock-glow);
  padding: 18px 20px 20px;
  position: relative;
}

.mock-working-header {
  font-size: 13px;
  line-height: 16px;
  color: var(--shimmer-base);
}

/* transitions.dev — shimmer text (loading "Working..." label) */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

.mock-working-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.mock-working-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mock-working-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mock-working-row span {
  font-size: 13px;
  line-height: 16px;
  color: var(--c-mock-text);
  white-space: nowrap;
}

/* ─── Mock UI: Subscribe button ────────────────────────────── */

.mock-subscribe {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 48px;
  border: none;
  background: var(--c-mock-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-border),
    inset 0 0 50px 0 var(--c-mock-glow);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--c-mock-text-strong);
}

/* ─── Mock UI: Icon button ─────────────────────────────────── */

.mock-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 20px;
  border: none;
  background: var(--c-mock-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-border),
    inset 0 0 50px 0 var(--c-mock-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-icon-btn-square {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--c-mock-square);
}

/* ─── Mock UI: Search bar ──────────────────────────────────── */

.mock-search {
  width: 366px;
  max-width: 100%;
  height: 42px;
  border-radius: 64px;
  overflow: hidden;
  position: relative;
}

.mock-search-inner {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: none;
  background: var(--c-mock-bg);
  box-shadow:
    inset 0 0 0 1px var(--c-mock-border),
    inset 0 0 50px 0 var(--c-mock-glow);
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 10px;
}

.mock-search svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.4;
}

.mock-search span {
  font-size: 15px;
  line-height: 18px;
  color: var(--c-mock-search-text);
}

/* ─── Light theme: match the Figma playground mock UI precisely ─
   Floating white cards with a 1px near-black ring + soft drop
   shadows, neutral-gray text and raised white pills. */
/* The drop shadow lives on the BorderBeam wrapper (.beam-host) rather than the
   inner card: the wrapper's overflow:hidden clips a child's box-shadow, but
   never an element's own. The inner cards stay flat white in light mode. */


/* Pill-style host (e.g. Subscribe) uses the lighter chip shadow, not the
   bigger floating-card shadow. */

/* Pulse-outside tuning preset (mirrors the subscribe controls defaults):
   X=2px, Y=1px, core blur=7px, bloom blur=19px, glow opacity=200%. */

/* ── Orb / Metal / Image example mocks ────────────────────────
   Their own demo pages are Tailwind-based and this site is not, so
   these are the same mocks rebuilt in plain CSS rather than a verbatim
   port: the status pills and chat chrome those pages show, on the
   example chrome above. */
/* Figma 1480:40970: a translucent dark fill with a cool-grey border,
   rather than the white-tint-plus-inset-ring the other example chrome
   uses. The border is drawn as a ring rather than a real border so the
   pill's height and padding stay as authored, and at 1px rather than the
   frame's 2px — the frame is drawn at 2x. */
.ex-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 74px;
  padding: 0 32px 0 9px;
  border-radius: 50px;
  background: rgba(29, 29, 29, 0.5);
  box-shadow: inset 0 0 0 1px rgba(44, 47, 54, 0.22);
  color: #ededed;
  font-size: 18px;
  line-height: 24px;
}
/* Same surface as the pill above. */
.ex-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 8px;
  border-radius: 50px;
  background: rgba(29, 29, 29, 0.5);
  box-shadow: inset 0 0 0 1px rgba(44, 47, 54, 0.22);
  color: #cfcfcf;
  font-size: 13px;
  line-height: 14px;
}
.ex-stack { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

/* Orb showcase: the demo page's full nine-state layout (sites/orbs/
   components/Examples.tsx). Two hero pills on top, then a grid whose
   151px auto-rows let the large states span two rows and the compact
   chips one, so the mixed heights tile with no gaps. Row spans rather
   than CSS multi-column: Safari mishandles break-inside on fixed-height
   multicol items. */
.ex-orb-heroes,
.ex-orb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.ex-orb-grid { grid-auto-rows: 151px; }
.ex-orb-cell {
  border-radius: 16px;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}
.ex-orb-cell--hero { height: 314px; padding: 48px 40px; }
.ex-orb-cell--lg { grid-row: span 2; }
@media (max-width: 860px) {
  .ex-orb-heroes,
  .ex-orb-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .ex-orb-cell,
  .ex-orb-cell--lg { grid-row: auto; min-height: 200px; height: auto; }
}

/* Metal: the demo page's pill and circle controls. */
.ex-metal-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 140px; height: 40px;
  border-radius: 20px;
  background: #1d1d1d;
  color: #ededed;
  font-size: 14px; font-weight: 500;
}
.ex-metal-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 20px;
  background: #1d1d1d;
  color: #ededed;
}

/* Image: the loader's card slot, at the demo page's proportions. */
.ex-image-card { width: 320px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; }
.ex-image-card--sm { width: 180px; }

/* ── Gooey demos: the live demo page's prototypes, verbatim ──
   Ported from sites/gooey/playground (styles.css + demo.css) with the
   dark-theme token values inlined; --gd-ink (set by the island) stands
   in for --btn-text so light fills flip the ink. */

/* Morph: plus menu (live .pm). */
.pm { position: relative; width: 200px; height: 140px; }
.pm-slot { position: absolute; left: 80px; top: 80px; }
.pm-btn {
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--gd-ink, #fbfbfb);
  -webkit-tap-highlight-color: transparent;
}
.pm-btn:focus-visible { outline: 2px solid #ededed; outline-offset: 2px; }
.pm-sat { pointer-events: none; }
.pm-open .pm-sat { pointer-events: auto; }
.pm-open .pm-sat:hover { background: rgba(255, 255, 255, 0.06); }
/* Icons hold back while the blob is merged, then materialise with a soft
   cross-blur as the satellite pulls clear. */
.pm-sat-icon {
  display: grid;
  place-items: center;
  opacity: 0;
  filter: blur(2px);
  transition: opacity 120ms ease, filter 120ms ease;
}
.pm-open .pm-sat-icon {
  opacity: 1;
  filter: blur(0);
  transition-duration: var(--pm-icon-dur, 180ms);
}
/* Close anticipation: the whole liquid layer — and the main button riding
   it — dips toward the returning satellites' momentum, then settles.
   Longhands on purpose: WebKit mis-parses var() inside the `animation`
   shorthand and falls back to 0s. */
@keyframes pm-anticipate {
  0% { transform: translateY(0); }
  30% { transform: translateY(var(--pm-anticip, 5px)); }
  100% { transform: translateY(0); }
}
.pm-anticipating [data-gooey-svg],
.pm-anticipating .pm-main {
  animation-name: pm-anticipate;
  animation-duration: var(--pm-anticip-dur, 700ms);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.pm-plus {
  display: grid;
  place-items: center;
  transform: rotate(0deg);
  transition: transform 250ms ease-in-out;
}
.pm-open .pm-plus { transform: rotate(45deg); }

/* Move: liquid slider (live .sl). */
.sl { position: relative; width: 240px; height: 80px; }
.sl-track {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 38px;
  height: 8px;
  border-radius: 4px;
  background: rgba(115, 115, 115, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  /* Below the goo layer (svg sits at z -1): the liquid thumb and its
     tail must paint OVER the track, not be sliced by it. */
  z-index: -2;
}
/* The thumb element itself must stay unstyled: its surface AND shadow
   are the liquid blob below. */
.sl-thumb {
  position: absolute;
  left: 14px;
  top: 30px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sl-thumb:active { cursor: grabbing; }
.sl-thumb:focus-visible { outline: 2px solid #ededed; outline-offset: 4px; }

/* Bend: drag card (live .dgc — Figma 1221:5117 "Dropdown", 261×46 r54).
   The pill VISUAL is the liquid blob; this box only sizes and lays out
   the crisp content. */
.dgc {
  width: 100%;
  max-width: 640px;
  height: 210px;
  position: relative;
  margin: 0 auto;
}
.dgc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 261px;
  height: 46px;
  margin: -23px 0 0 -130.5px;
  border-radius: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 8px;
  color: var(--gd-ink, #fbfbfb);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dgc-card:active { cursor: grabbing; }
.dgc-chip {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dgc-chip svg { width: 16px; height: 16px; display: block; }
.dgc-title { font-size: 13px; font-weight: 500; white-space: nowrap; }
.dgc-count { font-size: 13px; opacity: 0.5; white-space: nowrap; }
/* Content DEFORMS with the liquid bend: each piece rides the arc
   (translate, middle most), rotates onto the arc's local tangent and
   shears with the horizontal cap deformation — driven by the engine's
   --lg-bend vars, scaled by the Content bend knob (--dgc-cb). */
.dgc-card > * {
  --dgc-k: calc(var(--dgc-cb, 0) * var(--dgc-arc, 1));
  transform: translate(
      calc(var(--lg-bend-x, 0px) * var(--dgc-k) * 2.4),
      calc(var(--lg-bend-y, 0px) * var(--dgc-k) * 2.4)
    )
    rotate(calc(var(--lg-bend-yn, 0) * var(--dgc-rot, 0) * var(--dgc-cb, 0) * 1deg))
    skewX(calc(var(--lg-bend-xn, 0) * var(--dgc-cb, 0) * -0.55deg))
    scaleX(calc(1 - var(--lg-bend-xn, 0) * var(--dgc-cb, 0) * var(--dgc-sqx, 0.006)))
    scaleY(calc(1 + var(--lg-bend-yn, 0) * var(--dgc-cb, 0) * var(--dgc-sqy, 0)));
  transform-origin: center;
}
.dgc-card > :nth-child(1) { --dgc-arc: 0.45; --dgc-rot: 1.6; --dgc-sqx: 0.014; }
.dgc-card > :nth-child(2) { --dgc-arc: 1; --dgc-rot: 0; --dgc-sqy: 0.01; }
.dgc-card > :nth-child(3) { --dgc-arc: 0.6; --dgc-rot: -1.6; }

/* Melt: two draggable photos running molten together (live .mp). */
.mp { position: relative; margin: 0 auto; }
.mp-card {
  position: absolute;
  /* width/height come from the component — see MeltDemo. */
  border-radius: 16px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.mp-card:active { cursor: grabbing; }
.mp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pm-plus,
  .pm-sat-icon {
    transition: none !important;
  }
  .pm-anticipating [data-gooey-svg],
  .pm-anticipating .pm-main {
    animation: none !important;
  }
}

/* ── Metal examples: the metal-fx demo page's rows (mx-*) ─────
   Translated from that demo's Tailwind; values are its dark tokens. */
.mx-row { height: 314px; position: relative; }
.mx-row--toolbar { height: 370px; padding-left: 40px; padding-right: 80px; }
.mx-chat {
  width: 448px;
  max-width: 100%;
  border-radius: 20px;
  background: rgba(29, 29, 29, 0.7);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
}
.mx-chat-input {
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  outline: none;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  resize: none;
  overflow: hidden;
}
.mx-chat-input::placeholder { color: #4e4e4e; }
.mx-chat-bottom { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.mx-spacer { flex: 1; }
.mx-plus {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  color: #caccd2;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.mx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 10px 0 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  color: #caccd2;
  font-size: 12px; line-height: 14px;
  cursor: default;
}
.mx-chip svg { width: 16px; height: 16px; color: #8e8e8e; transform: rotate(90deg); }
.mx-circle,
.mx-dots {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(44, 47, 54, 0.52);
  border-radius: 50%;
  background: #1d1d1d;
  box-shadow: inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
  color: #f8f8f8;
  cursor: pointer;
  padding: 0;
}
.mx-dots svg { width: 20px; height: 20px; opacity: 0.7; transition: opacity 200ms; }
.mx-dots:hover svg { opacity: 1; }
.mx-toolbar-backdrop {
  position: absolute;
  left: -22px;
  top: 144px;
  width: 663px;
  height: 234px;
  border-radius: 20px;
  background: rgba(29, 29, 29, 0.7);
  border: 1px solid rgba(44, 47, 54, 0.52);
  pointer-events: none;
}
.mx-toolbar { position: relative; z-index: 10; display: flex; align-items: center; gap: 12px; }
.mx-search {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  width: 235px; height: 40px;
  border-radius: 999px;
  padding: 10px 2px 10px 12px;
  background: #1d1d1d;
  border: 1px solid rgba(44, 47, 54, 0.52);
  box-shadow: inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
  color: #f8f8f8;
  font-size: 14px; font-weight: 500; line-height: 17.938px;
  cursor: text;
}
.mx-search svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #8b8b8b; fill: none; }
.mx-search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  font: inherit; color: inherit;
  outline: none;
}
.mx-search-input::placeholder { color: currentColor; opacity: 0.3; }
.mx-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 140px; height: 40px;
  border: 1px solid rgba(44, 47, 54, 0.52);
  border-radius: 20px;
  background: #1d1d1d;
  box-shadow: inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
  color: #f8f8f8;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; line-height: 17.938px;
  white-space: nowrap;
  cursor: pointer;
  padding: 0;
}

/* ── Metal v2 examples: the two 170px cards + the composer tweaks ── */
.mx-chat-input--short { width: 70%; }
.mx-circle--send { cursor: default; }
.mx-row--card {
  height: 170px;
  border-radius: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
}
.mx-card-line { display: flex; align-items: center; gap: 12px; }
.mx-card-line--plan { align-items: baseline; gap: 6px; }
.mx-plan {
  font: 500 24px/1.2 Inter, var(--font-sans), sans-serif;
  color: rgba(153, 153, 153, 0.6);
  white-space: nowrap;
}
.mx-live {
  font: 400 20px/1.2 Inter, var(--font-sans), sans-serif;
  color: #999999;
  white-space: nowrap;
}
.metal-pill--send { cursor: default; }


/* ── Chat mock (Studio) ─────────────────────────────────────────────── */

/* Shared mock icons: the mic and chevron are masks so each theme
   paints them; the plus is two 1.5px bars (Figma's export of the glyph
   collapsed to a 1px path), and the close is the same plus turned 45°. */
.mk-ico {
  position: relative;
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}
.mk-ico-mic {
  -webkit-mask: url("/assets/icons/mic-16.svg") center / 16px 16px no-repeat;
  mask: url("/assets/icons/mic-16.svg") center / 16px 16px no-repeat;
}
.mk-ico-chevron {
  transform: rotate(90deg);
  -webkit-mask: url("/assets/icons/chevron-16.svg") center / 16px 16px no-repeat;
  mask: url("/assets/icons/chevron-16.svg") center / 16px 16px no-repeat;
}
.mk-ico-plus::before,
.mk-ico-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  border-radius: 1px;
  background: currentColor;
}
.mk-ico-plus::after { transform: rotate(90deg); }
.mk-ico-x { transform: rotate(45deg); }

/* Chat input — Figma 1561:44249 (dark) / 1567:44998 (light). */
.mock-vchat {
  position: relative;
  width: 371px;
  max-width: 100%;
  height: 104px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(48, 48, 48, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(44, 47, 54, 0.52),
    inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
  font-family: Inter, var(--font-sans);
}
/* The field: the design's placeholder text (14px at 14 / 20), typable;
   a transparent box so the glow shows through it. Above the beam layers
   like the buttons. */
.mock-vchat-input {
  position: absolute;
  left: 14px;
  top: 20px;
  right: 14px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #eaeaea;
  caret-color: #eaeaea;
  z-index: 5;
}
.mock-vchat-input::placeholder {
  color: #4e4e4e;
  opacity: 1;
}
.mock-vchat-row {
  position: absolute;
  left: 11px;
  right: 13px;
  bottom: 13px;
  height: 36px;
  display: flex;
  align-items: center;
  /* Above the effect's layers (z 1–4). */
  z-index: 5;
}
.mock-vchat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mock-vchat-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 36px;
  /* The recording pill's stop button (Figma 1561:44277): a 10% white
     fill with a hairline ring and a brighter top edge, no drop. */
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #eaeaea;
  box-sizing: border-box;
  /* Real buttons: reset the UA look, keep the design's, and give a press.
     Hover is a 2% wash over the fill (white on dark, black on light). */
  position: relative;
  overflow: hidden;
  border: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.mock-vchat-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  transition: background 0.15s ease;
  pointer-events: none;
}
.mock-vchat-btn:hover::after { background: rgba(255, 255, 255, 0.02); }
.mock-vchat-btn:active { transform: scale(0.96); }
.mock-vchat-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.35); outline-offset: 2px; }
.mock-vchat-agent {
  padding: 0 10px 0 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #caccd2;
  white-space: nowrap;
}
.mock-vchat .mk-ico-mic { background: #b2b2b2; }
.mock-vchat .mk-ico-chevron {
  background: rgba(255, 255, 255, 0.4);
  /* The chat chip's chevron is the design's 1.5px stroke (the phone's is 2px). */
  -webkit-mask-image: url("/assets/icons/chevron-15.svg");
  mask-image: url("/assets/icons/chevron-15.svg");
}

/* ── Chat mock — light theme (Studio) ───────────────────────────────── */
/* The chat input mock's tokens are dark-only (the beam demo page ships
   dark); the Studio's light theme flips them here so the beam is judged
   on a white card. */
html[data-theme="light"] .mock-chat {
  --c-mock-bg: #ffffff;
  --c-mock-border: rgba(0, 0, 0, 0.08);
  --c-mock-chip-bg: rgba(0, 0, 0, 0.04);
  --c-mock-chip-line: rgba(0, 0, 0, 0.03);
  --c-mock-chip-top: rgba(255, 255, 255, 0.6);
  --c-mock-glow: rgba(0, 0, 0, 0.015);
  --c-mock-placeholder: #9a9a9a;
  --c-mock-search-text: #7a7a7a;
  --c-mock-square: rgba(0, 0, 0, 0.35);
  --c-mock-tag-text: #3f434a;
  --c-mock-text: #303030;
  --c-mock-text-strong: #111111;
}

html[data-theme="light"] .mock-vchat {
  background: #ffffff;
  box-shadow:
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .mock-vchat-input {
  left: 15px;
  top: 21px;
  right: 15px;
  color: #1a1a1a;
  caret-color: #1a1a1a;
}
html[data-theme="light"] .mock-vchat-input::placeholder {
  color: #4e4e4e;
  opacity: 0.5;
}
html[data-theme="light"] .mock-vchat-btn:hover::after { background: rgba(0, 0, 0, 0.02); }
html[data-theme="light"] .mock-vchat-btn:focus-visible { outline-color: rgba(0, 0, 0, 0.25); }
html[data-theme="light"] .mock-vchat-row {
  left: 12px;
  right: 12px;
  bottom: 12px;
}
html[data-theme="light"] .mock-vchat-btn {
  border-radius: 54px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  color: #3c3c3c;
}
html[data-theme="light"] .mock-vchat-agent { color: #252525; }
html[data-theme="light"] .mock-vchat-close { color: #3d3d3d; }
html[data-theme="light"] .mock-vchat .mk-ico-mic { background: #515151; }
html[data-theme="light"] .mock-vchat .mk-ico-chevron { background: rgba(17, 17, 17, 0.4); }

/* The card shadow's outer half, on the beam root that hosts the mock
   (the root clips its children, so drops can't live on the card); the
   inset ring and bottom line sit on the card itself above. */
html[data-theme="light"] .pg-stage [data-beam]:has(> .mock-vchat) {
  box-shadow:
    0 2px 6px 0 rgba(0, 0, 0, 0.02),
    0 4px 42px 0 rgba(0, 0, 0, 0.04);
}

/* ── Voice mocks (Studio and the detail page) ───────────────────────── */

/* Sidebar / docs icon in the light theme. */
html[data-theme="light"] .docs-link-icon[src*="figma-voice"],
html[data-theme="light"] .st-lib-ico img[src*="figma-voice"] { content: url("/assets/icons/figma-voice-light.png"); }

/* Studio bench colour rows: nine discs (eight variants + the picker)
   on one line inside the 273px panel — 24px discs at a 5px gap. */
.vb-colors .pg-swatches { flex-wrap: nowrap; gap: 5px; }
.vb-colors .pg-swatch { width: 24px; height: 24px; flex: 0 0 24px; }

/* Recording pill — Figma 1561:44248 (dark) / 1567:44991 (light). */
.mock-pill {
  position: relative;
  width: 149px;
  height: 44px;
  border-radius: 106px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  font-family: Inter, var(--font-sans);
}
.mock-pill-mic {
  position: absolute;
  left: 13px;
  top: 14px;
  background: #b2b2b2;
  z-index: 5;
}
.mock-pill-time {
  position: absolute;
  left: 51px;
  top: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: #878787;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 5;
}
.mock-pill-stop {
  position: absolute;
  left: 111px;
  top: 7px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-pill-stop::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #d9d9d9;
  opacity: 0.6;
}

/* Phone screen — Figma 1561:44294, 402×874. The stage shows the bottom
   60% of it (the top 40% is cropped away), scaled 0.68 so the crop fills
   the stage: 402×524 → 273×357. The scale and crop sit OUTSIDE the beam,
   so the glow layers still measure the full screen. */
.mock-phone-scale {
  width: 273px;
  height: 357px;
  position: relative;
  overflow: hidden;
}
/* The beam wraps the crop, not the screen behind it: its layers raster
   273×357 instead of 402×874, 3.6× fewer pixels, with \`scale\` 0.68 of the
   phone's own so the glow is the same picture. Its root is the flex item:
   flush with the stage's top edge (the stage pads 48px; the crop reads as
   the screen running on past the card) with room below for Play. The
   crop's top is mid-screen, so only the bottom corners round — the
   screen's own, at 66 × 0.68. */
.mock-phone-host {
  align-self: flex-start;
  margin-top: -48px;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.mock-phone-scale-inner {
  width: 402px;
  transform: translateY(-237.7px) scale(0.68);
  transform-origin: top left;
}
.mock-phone {
  position: relative;
  width: 402px;
  height: 874px;
  border-radius: 66px;
  overflow: hidden;
  /* The chat input's dark card (Figma 1561:44249) — its hairline ring and
     wide soft inner glow — over a solid screen fill. */
  background: #111111;
  box-shadow:
    inset 0 0 0 1px rgba(44, 47, 54, 0.52),
    inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
  font-family: Inter, var(--font-sans);
}
/* Both text layers share the prompt's spot (design y = 664, baseline
   kept; longer transcripts grow upward). They cross-blur: 5px of blur
   and out, over 320 ms on the smooth ease-out. */
.mock-phone-text {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 194px;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mock-phone-text[data-hidden] {
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
}
.mock-phone-prompt {
  margin: 0;
  text-align: center;
  /* Greedy wrapping: the site's `text-wrap: pretty` re-flows earlier
     words to avoid a short last line, which bounces a word between
     lines as the transcript grows. */
  text-wrap: wrap;
  font-size: 21px;
  font-weight: 400;
  line-height: 28px;
  color: #b2b2b2;
  opacity: 0.6;
}
.mock-phone-prompt--live {
  color: #e6e6e6;
  opacity: 0.9;
}
.mock-word {
  display: inline-block;
  animation: mock-word-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* A word arrives by fade and blur only; the only movement is the slide
   a settled word makes when a new one lands (an inline `transform`,
   see BlurWords), which this animation leaves alone. */
@keyframes mock-word-in {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mock-word { animation: none; }
}
.mock-phone-row {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 781px;
  height: 44px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Figma 1561:44299 / 1561:44344: a plain rgba(255,255,255,0.08) fill,
   radius 70. Dark adds the site's secondary-button shadow: a 0.5px ring,
   a short drop, and a soft white edge light inset on all four sides. */
html[data-theme="dark"] .mock-phone-agent,
html[data-theme="dark"] .mock-phone-btn {
  box-shadow:
    0 2px 2px -2px rgba(0, 0, 0, 0.04),
    0 2px 6px -1px rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    1px 2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    -1px -2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    0 -2px 1px -2px rgba(255, 255, 255, 0.24) inset;
}

.mock-phone-agent {
  height: 44px;
  padding: 0 16px 0 20px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: #caccd2;
  white-space: nowrap;
  letter-spacing: 0;
}
.mock-phone-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.4);
  -webkit-mask: url("/assets/icons/chevron-16.svg") center / 16px 16px no-repeat;
  mask: url("/assets/icons/chevron-16.svg") center / 16px 16px no-repeat;
}
.mock-phone-actions {
  display: flex;
  gap: 18px;
}
.mock-phone-btn {
  width: 44px;
  height: 44px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-phone-btn img {
  display: block;
}
.mock-phone-close {
  position: relative;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
}
.mock-phone-close::before,
.mock-phone-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: #efefef;
}
.mock-phone-close::after {
  transform: rotate(90deg);
}

/* Light chat and pill sit on white cards with the design's outer
   shadow. The card itself is the beam's root (it clips its children, so
   the shadow must live on it): see the [data-voice-type] rules below. */
html[data-theme="light"] .mock-pill {
  background: #ffffff;
  box-shadow:
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .mock-pill-mic { background: #676767; }
html[data-theme="light"] .mock-pill-time { color: rgba(29, 29, 29, 0.7); }
html[data-theme="light"] .mock-pill-stop {
  border-radius: 54px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.04),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .mock-pill-stop::after {
  background: #0f0f0f;
  opacity: 0.8;
}

/* The card shadow's outer half, on the beam root that hosts the mock
   (the root clips its children, so drops can't live on the card); the
   inset ring and bottom line sit on the card itself. */
html[data-theme="light"] .pg-stage [data-voice-type="default"],
html[data-theme="light"] .pg-stage [data-voice-type="pill"] {
  box-shadow:
    0 2px 6px 0 rgba(0, 0, 0, 0.02),
    0 4px 42px 0 rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .mock-phone {
  background: #fbfbfc;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .mock-phone-prompt { color: #6a6a6a; }
html[data-theme="light"] .mock-phone-prompt--live { color: #1f1f1f; }
/* Figma 1567:44762 / 1567:44767: an #fcfcfc button at 30% so the glow
   reads through, with the same secondary-button shadow as dark (0.5px
   ring, short drop, white edge light inset); near-black text and icons,
   the chevron at 40% black (dark uses 40% white). */
html[data-theme="light"] .mock-phone-agent,
html[data-theme="light"] .mock-phone-btn {
  background: rgba(252, 252, 252, 0.3);
  box-shadow:
    0 2px 2px -2px rgba(0, 0, 0, 0.04),
    0 2px 6px -1px rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    1px 2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    -1px -2px 1px -2px rgba(255, 255, 255, 0.24) inset,
    0 -2px 1px -2px rgba(255, 255, 255, 0.24) inset;
}
html[data-theme="light"] .mock-phone-agent { color: #0d0d0d; }
html[data-theme="light"] .mock-phone-chevron { background: rgba(0, 0, 0, 0.4); }
html[data-theme="light"] .mock-phone-btn img { filter: invert(1) brightness(0.15); }
html[data-theme="light"] .mock-phone-close::before,
html[data-theme="light"] .mock-phone-close::after { background: #0d0d0d; }