/* ask.css — page 2, the composer demo (js/sections/ask.js). */

.ask {
  height: 190vh;
}

.ask__stage {
  display: grid;
  place-items: center;
  /*
   * How far the panel drops once the conversation appears, and how far the
   * conversation's bottom edge sits above the panel's centre. Both the panel
   * and the thread's anchor read --ask-rise, so the two move together and the
   * clearance between them stays put however far the panel travels.
   *
   * The default here is the fallback: ask.js replaces it with the value that
   * centres the thread+panel group for the answer's real height, because a
   * fixed drop leaves the group sitting low when the answer is short (see
   * centreRise in ask.js).
   */
  --ask-rise: min(30vh, 260px);
  --ask-gap: 96px;
}

/* ── dock: composer + crawler ── */

.ask__dock {
  --dock-w: min(760px, calc(100vw - 32px));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dock-w);
  transform: translate(-50%, -50%);
  transition: transform 0.9s var(--ease-brand);
  z-index: 2;
}

.ask.is-sent .ask__dock {
  transform: translate(-50%, calc(-50% + var(--ask-rise)));
}

.ask__crawler {
  margin: 0 20px -2px;
}

.ask__composer {
  /* accent washes; light mode retunes them for a dark plate (see below) */
  --ask-tint-a: rgb(186 230 253 / 0.55);
  --ask-tint-b: rgb(253 226 243 / 0.45);
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 14px 10px;
  border-radius: 20px;
  color: var(--ui-ink);
  background:
    radial-gradient(120% 140% at 85% 0%, var(--ask-tint-a), transparent 55%),
    radial-gradient(90% 120% at 10% 100%, var(--ask-tint-b), transparent 60%),
    var(--ui-surface);
  border: 1px solid var(--ui-line);
  box-shadow:
    0 30px 80px var(--shadow),
    0 0 0 1px rgb(236 0 140 / 0.12);
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(100deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

/* gradient-mask entrance */
.ask.is-live .ask__composer {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition:
    opacity 0.4s ease,
    -webkit-mask-position 1.1s var(--ease-out),
    mask-position 1.1s var(--ease-out);
}

/*
 * The chat-mock palette (both this panel and the answer bubbles) is set by the
 * --ui-* tokens in styles.css: light mode gives them a dark plate, the inverse
 * of the dark theme. Only the accent washes are specific to the composer, so
 * they drop to a faint cast here — at their dark-theme strength they would turn
 * the grey plate into a coloured one.
 */
:root[data-theme='light'] .ask__composer {
  --ask-tint-a: rgb(186 230 253 / 0.12);
  --ask-tint-b: rgb(253 226 243 / 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .ask__composer {
    --ask-tint-a: rgb(186 230 253 / 0.12);
    --ask-tint-b: rgb(253 226 243 / 0.08);
  }
}

.ask__input {
  position: relative;
  min-height: 52px;
  padding: 4px 4px 0;
  font-size: 15px;
  line-height: 1.5;
}

/* absolutely placed so the caret sits at the start of an empty input, like a real one */
.ask__placeholder {
  position: absolute;
  left: 4px;
  top: 4px;
  color: var(--ui-muted);
  pointer-events: none;
}

.ask__text:empty {
  display: none;
}

.ask__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--ui-ink);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.ask__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
}

.ask__tools,
.ask__right {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ui-muted);
  font-size: 12px;
}

.ask-i {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.ask-i svg {
  width: 100%;
  height: 100%;
}

.ask__shield {
  color: #f59e0b;
  display: inline-flex;
}

.ask__model,
.ask__ctx {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ask__ctx .ask-i {
  width: 12px;
  height: 12px;
}

.ask__ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ui-line);
  border-top-color: var(--ui-muted);
}

.ask__send {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: oklch(0.637 0.237 25.331);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

.ask__send:hover {
  transform: scale(1.06);
}

/* click hint: a soft ring pulsing out of the button */
.ask__send.is-hinting::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid oklch(0.637 0.237 25.331);
  animation: send-hint 1.4s ease-out infinite;
}

@keyframes send-hint {
  from {
    transform: scale(0.9);
    opacity: 0.9;
  }

  to {
    transform: scale(1.9);
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .ask__model span:not(.ask-i),
  .ask__ctx {
    display: none;
  }
}

/* ── iris rings ── */

.ask__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.ask__iris {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* alternating shades give the stack its depth, darkest outside */
.ask__iris--0 {
  background: radial-gradient(circle, rgb(0 0 0 / 0.1) 55%, rgb(0 0 0 / 0.55) 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}

.ask__iris--1 {
  background: rgb(20 20 22 / 0.55);
  box-shadow: inset 0 0 60px rgb(0 0 0 / 0.6);
}

.ask__iris--2 {
  background: rgb(60 60 64 / 0.45);
  box-shadow: inset 0 0 40px rgb(0 0 0 / 0.5);
}

.ask__iris--3 {
  background: rgb(10 10 11 / 0.75);
}

.ask__iris--4 {
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 40px rgb(255 255 255 / 0.4);
}

.ask__send--proxy {
  position: absolute;
  pointer-events: none;
}

:root[data-theme='light'] .ask__iris--0 {
  background: radial-gradient(circle, rgb(0 0 0 / 0.04) 55%, rgb(0 0 0 / 0.22) 100%);
}

:root[data-theme='light'] .ask__iris--1 {
  background: rgb(0 0 0 / 0.16);
}

:root[data-theme='light'] .ask__iris--2 {
  background: rgb(255 255 255 / 0.4);
}

:root[data-theme='light'] .ask__iris--3 {
  background: rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .ask__iris--0 {
    background: radial-gradient(circle, rgb(0 0 0 / 0.04) 55%, rgb(0 0 0 / 0.22) 100%);
  }

  :root:not([data-theme='dark']) .ask__iris--1 {
    background: rgb(0 0 0 / 0.16);
  }

  :root:not([data-theme='dark']) .ask__iris--2 {
    background: rgb(255 255 255 / 0.4);
  }

  :root:not([data-theme='dark']) .ask__iris--3 {
    background: rgb(0 0 0 / 0.35);
  }
}

/* ── cursor ── */

.ask__cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.ask__cursor {
  position: absolute;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.45));
}

.ask__cursor svg {
  width: 100%;
  height: 100%;
}

.ask__cursor--ghost {
  filter: blur(1.5px);
}

.ask__cursor.is-hinting {
  animation: cursor-nudge 1.4s var(--ease-brand) infinite;
}

@keyframes cursor-nudge {
  0%,
  100% {
    transform: translate(0, 0);
  }

  40% {
    transform: translate(-5px, -5px);
  }
}

/* ── thread ── */

/* Anchored by its bottom edge above the lowered panel, so a long answer grows
   upward instead of running into it. */
.ask__thread {
  position: absolute;
  left: 50%;
  bottom: calc(50% - var(--ask-rise) + var(--ask-gap));
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100% - 140px);
  transform: translateX(-50%);
  display: grid;
  align-content: end;
  gap: 18px;
  z-index: 1;
}

/* A throwaway copy of the finished thread, laid out in the same box so ask.js
   can measure how tall the conversation will be before it streams. */
.ask__thread--probe {
  visibility: hidden;
  pointer-events: none;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: msg-in 0.6s var(--ease-brand) both;
}

.msg--user {
  justify-content: flex-end;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

/* Bare mark: both avatars are cut-out artwork, so no plate, ring or inset —
   the spare 2px came from the plate's edge and would only shrink the image. */
.msg__avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
}

.msg__bubble {
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 15px;
  box-shadow: 0 10px 30px var(--shadow);
  border: 1px solid var(--ui-line);
}

.msg__bubble--answer {
  display: grid;
  gap: 8px;
  line-height: 1.6;
}

.msg__bubble--answer p:first-child {
  font-weight: 600;
}

.ask__replay {
  position: absolute;
  right: var(--gutter);
  bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
}

.ask__replay:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.ask__replay[hidden] {
  display: none;
}

/* no JS: nothing here is meaningful, collapse the pin */
html:not(.js) .ask {
  display: none;
}