/* The AI generate button: a dark pill on a black page, with an aurora that lives inside it. The aurora is a WebGL
   shader on a canvas a little larger than the pill (the glow spills just past its edge); the pill's dark body is
   underneath, and the real button with the spark and the words is on top. */
:root {
  --page: #000000;          /* the page */
  --pill: #111116;          /* the body of the pill at rest */
  --rim: #2a2a33;           /* its edge */
  --ink: #e8e8ee;           /* the words and the spark at rest */
  --lit: #ffffff;           /* the words and the spark over the aurora */
  --muted: #7d7d88;         /* the line under the button */
  --violet: #8b5cf6;        /* the three colours of the aurora */
  --cyan: #22d3ee;
  --amber: #ffb224;
  --night: #07060d;         /* the darkest part of the aurora */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Onest Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 16px;
}

.spark {
  display: grid;
  justify-items: center;
  gap: 26px;
}

/* ---------------------------------------------------------------- the pill */
.spark__pill {
  position: relative;
  display: grid;
  -webkit-tap-highlight-color: transparent;
}

/* the dark body, under the aurora */
.spark__base {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #17171d, var(--pill) 60%);
  box-shadow:
    0 0 0 1px var(--rim),
    0 10px 30px -8px rgba(0, 0, 0, 0.9);
}

/* larger than the pill and centred on it: the shader masks the aurora to the pill and lets a glow spill round it */
.spark__aurora {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spark__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 58px;
  padding: 0 30px 0 25px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  /* the glass over the aurora: a light line along the top inside, a darker one along the bottom */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  transition: color 0.4s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.spark__btn.is-lit {
  color: var(--lit);
}

.spark__btn:focus-visible {
  outline: 2px solid var(--lit);
  outline-offset: 5px;
}

html[data-using='pointer'] .spark__btn:focus-visible {
  outline: none;
}

.spark__btn[aria-disabled='true'] {
  cursor: progress;
}

/* the spark: a four pointed star drawn as one path, which the script reshapes into a ring */
.spark__icon {
  flex: none;
  width: 22px;
  height: 22px;
  overflow: visible;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

.spark__glyph {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark__mini {
  fill: currentColor;
  transform-origin: 19.5px 4px;
}

.spark__words {
  display: inline-flex;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* each token is a span of its own as it streams in */
.spark__words span {
  display: inline-block;
  white-space: pre;
}

/* while it thinks, a light runs across the word */
.spark__words.is-thinking {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.62) 35%, #ffffff 50%, rgba(255, 255, 255, 0.62) 65%, rgba(255, 255, 255, 0.62) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.spark__hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.spark__hint span {
  display: inline-block;
}

/* without WebGL: a still aurora drawn with gradients, shown while the pill is lit */
.is-flat .spark__base::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(60% 120% at 25% 30%, var(--violet), transparent 70%),
    radial-gradient(50% 120% at 70% 70%, var(--cyan), transparent 70%),
    radial-gradient(40% 90% at 90% 20%, var(--amber), transparent 70%),
    var(--night);
  opacity: var(--on, 0);
}