/* ==========================================================================
   ASK  ·  the Engine page's band 4
   ==========================================================================
   THE BAND SAYS ONE THING: you do not have to learn the whole system to get
   an answer out of it.

   IT IS A CHAT, AND IT IS DELIBERATELY NOT THE PRODUCT SHELL. Every other
   surface on this site wears .pd — sidebar, breadcrumb, tab strip, status
   line, dense monospace — because every other surface is a console being
   demonstrated. This one is an assistant being talked to. Dressed as a
   console it read as a terminal transcript, which is the wrong register for a
   conversation and an obvious borrow from every other observability site.

   So it wears the register a reader already knows from the assistants they
   use: a plain window, two kinds of turn, a composer at the foot, and enough
   air that the answer is the only thing on screen. That is also why the
   tokens below are declared locally rather than inherited — this surface
   stands outside the product system on purpose. Do not "harmonise" it back
   into .pd.

   WHAT IT KEEPS FROM THE PRODUCT SIDE: monospace, on the evidence only. A
   cited log line is machine output and has to look like one. Everything
   PULSAR says in its own voice is set in the page's sans.

   AN ANSWER HAS FOUR PARTS AND THE FIRST THREE ARE NOT OPTIONAL:
     1  the verdict — one line, the whole answer if the reader stops there
     2  the reasoning — at most three points, components linked to the
        Explorer
     3  the evidence — cited inline against the sentence it backs, opening to
        the line itself when pressed
     4  where to go next — the questions worth asking from here
   Part 3 is what separates this from the thing band 2 argues against. A point
   with no citation on it would make that band a lie.

   THE QUESTIONS ARE CANNED. A free field promises a live model this page has
   not got, and every miss reads as the product failing.
   ========================================================================== */

.iaq {
  /* Surfaces. Two, not four: a chat has a window and the things in it. */
  --q-win: #0f1a2b;
  --q-raised: #18253a;
  --q-well: #0a1220;
  --q-line: rgba(141, 153, 174, 0.16);

  --q-text: #eceef2;
  --q-soft: #b3bccb;
  --q-dim: #7b8799;

  --q-data: #4ecdc4;
  --q-live: #a78bfa;
  --q-live-soft: rgba(167, 139, 250, 0.16);
  --q-live-line: rgba(167, 139, 250, 0.5);

  --q-sans: var(--font-sans, "DM Sans", system-ui, sans-serif);
  --q-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);

  --q-t: 320ms;
  --q-ease: cubic-bezier(0.22, 0.8, 0.28, 1);

  display: block;
}

/* The band is dark and the window is dark, and without this the panel had no
   edge to speak of — it read as a hole in the page rather than as a thing on
   it. The frame is the same device the product demos use: an inset panel
   reads as something being presented, a full-bleed one as a diagram drawn
   into the band. */
.iaq__frame {
  padding: clamp(14px, 2vw, 28px);
  border-radius: 26px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(78, 205, 196, 0.22) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(91, 159, 212, 0.2) 0%, transparent 60%),
    linear-gradient(150deg, #16344e 0%, #102338 55%, #111d31 100%);
}

.iaq__win {
  overflow: hidden;
  border: 1px solid var(--q-line);
  /* Softer than the product panels on purpose: a chat window is a document
     you talk into, not an instrument. */
  border-radius: 18px;
  background: var(--q-win);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
  color: var(--q-text);
  font-family: var(--q-sans);
}

/* — The bar. A name and a context line, and nothing else. There is nowhere to
     navigate, so there is no navigation. — */
.iaq__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--q-line);
}

/* Says "Ask", not "PULSAR". The bar sits about thirty pixels above the first
   turn, which carries the assistant's name and avatar — two wordmarks that
   close together read as a rendering mistake. The bar names the surface; the
   turn names who is speaking. */
.iaq__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--q-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.iaq__brand::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--q-data);
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.16);
}

.iaq__ctx {
  margin: 0 0 0 auto;
  font-size: 0.76rem;
  color: var(--q-dim);
}

/* --------------------------------------------------------------------------
   THE THREAD
   -------------------------------------------------------------------------- */

.iaq__thread {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Grows with the conversation, up to a ceiling, then scrolls.

     THE FLOOR IS DELIBERATELY GENEROUS. Sized tight to the opening turn the
     panel read as a notice with a button under it; a chat is a room you are
     going to have a conversation in, and it has to look like one before the
     conversation starts. It is not so tall that it becomes the void it
     replaced — the opening turn plus its questions very nearly fills it.

     The ceiling keeps a long thread from pushing the composer off screen. */
  min-height: 300px;
  max-height: 460px;
  padding: 28px 24px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .iaq__thread { scroll-behavior: auto; }
}

.iaq__turn { display: flex; flex-direction: column; gap: 10px; }

/* The reader's turn: right-aligned and in a bubble, which is the one chat
   convention worth borrowing whole — it costs nothing to read and says
   instantly which side spoke. */
.iaq__turn--you { align-items: flex-end; }

.iaq__you {
  max-width: 78%;
  margin: 0;
  padding: 11px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--q-raised);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* PULSAR's turn is NOT in a bubble. A bubble makes an answer look like a
   remark; this one is a piece of work with evidence under it, and it gets the
   full width to be that. */
.iaq__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--q-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--q-dim);
}

.iaq__who::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--q-data), #5b9fd4);
  opacity: 0.9;
}

/* Each part of an answer arrives on its own, so the reveal reads as an answer
   being composed rather than a panel being switched. */
.iaq__part {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--q-t) var(--q-ease), transform var(--q-t) var(--q-ease);
}

.iaq__part.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .iaq__part { transition: none; }
}

/* — 1 · the verdict — */
.iaq__verdict {
  margin: 0;
  max-width: 62ch;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* — 2 · the reasoning. Paragraphs, not a bulleted list: an assistant explains
     in sentences, and the dots were the last thing making this read as a
     readout rather than a reply. — */
.iaq__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 68ch;
}

.iaq__points li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--q-soft);
}

.iaq__points strong { color: var(--q-text); font-weight: 600; }

/* — 3 · the evidence, cited INLINE against the sentence it backs. A block of
     log lines under an answer sat the same distance from all three points and
     supported none of them in particular. Pressing a citation shows the line;
     nothing is claimed that is not shown. — */
.iaq__cite {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--q-mono);
  font-size: 0.68rem;
  color: var(--q-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--q-ease);
}

.iaq__cite span { border-bottom: 1px dotted currentColor; }
.iaq__cite::before { content: "["; }
.iaq__cite::after { content: "]"; }
.iaq__cite:hover,
.iaq__cite[aria-expanded="true"] { color: var(--q-data); }

.iaq__cite:focus-visible { outline: 1px solid var(--q-data); outline-offset: 2px; }

.iaq__line {
  display: block;
  margin: 10px 0 2px;
  padding: 10px 14px;
  border-left: 2px solid var(--q-data);
  border-radius: 0 8px 8px 0;
  background: var(--q-well);
  font-family: var(--q-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--q-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.iaq__line[hidden] { display: none; }

/* A component named in the answer is a link into the Explorer. DELIBERATELY
   NOT VIOLET: violet marks a control that acts on the surface in front of the
   reader, and these reach a band away. As inline links they read as the
   assistant naming its subject, which is true wherever the band is used. */
.iaq__ref {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--q-data);
  font-weight: 600;
  border-bottom: 1px solid rgba(78, 205, 196, 0.35);
  cursor: pointer;
  transition: border-color 160ms var(--q-ease);
}

.iaq__ref:hover { border-bottom-color: var(--q-data); }
.iaq__ref:focus-visible { outline: 1px solid var(--q-data); outline-offset: 2px; }

/* — Asked before. Band 2 used to carry determinism as a figure, and a number
     sitting still cannot show what happens when you ask twice. Set quietly:
     the line is evidence that nothing changed, and a product proud of being
     consistent is usually a product that is not. — */
.iaq__again {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--q-dim);
}

.iaq__again::before { content: "↻"; color: var(--q-data); }

/* — 4 · where to go next. The follow-ups keep the violet: pressing one really
     does ask it, on this surface, every time. — */
/* The gap above is larger than the gap between the parts of an answer, on
   purpose: everything above is the agent talking, and this is the reader's
   turn to act. The change of speaker deserves the space. */
.iaq__next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.iaq__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--q-live-line);
  border-radius: 999px;
  background: transparent;
  color: var(--q-soft);
  font-family: var(--q-sans);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background 160ms var(--q-ease), color 160ms var(--q-ease);
}

.iaq__act:hover { background: var(--q-live-soft); color: var(--q-text); }
.iaq__act:focus-visible { outline: 2px solid var(--q-live); outline-offset: 2px; }

/* THE NEWEST QUESTIONS BREATHE, so what can be pressed says so without a
   label saying it. A ring rather than a fill: the chip's own colour already
   marks it as live, and pulsing the fill would make the text move against a
   shifting ground. Only the latest set carries it — every chip pulsing at
   once asks for attention everywhere, which is the same as asking for it
   nowhere. */
.iaq__act.is-live {
  animation: iaq-breathe 2.8s var(--q-ease) infinite;
}

@keyframes iaq-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.45); }
  55%      { box-shadow: 0 0 0 7px rgba(167, 139, 250, 0); }
}

/* Once pressed, the conversation has moved on and the ring belongs to the
   next set. */
.iaq__act.is-live:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .iaq__act.is-live { animation: none; border-color: var(--q-live); }
}

.iaq__act--ask::before {
  content: "?";
  font-family: var(--q-mono);
  color: var(--q-live);
}

/* — The thinking indicator. A surface that answers instantly reads as a
     lookup table; one that answers after a beat reads as something working. — */
.iaq__thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.86rem;
  color: var(--q-dim);
}

.iaq__dots { display: inline-flex; gap: 4px; }

.iaq__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--q-data);
  animation: iaq-blink 1.1s var(--q-ease) infinite;
}

.iaq__dots i:nth-child(2) { animation-delay: 0.18s; }
.iaq__dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes iaq-blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .iaq__dots i { animation: none; opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   THE FOOT
   The reader never types here — pressing a question types into it. A readout
   dressed as an input, which is the honest shape: the text really is the
   question that was asked, and nothing is promised that is not delivered.
   -------------------------------------------------------------------------- */

.iaq__foot {
  padding: 18px 22px 20px;
  border-top: 1px solid var(--q-line);
}

.iaq__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  background: var(--q-raised);
  transition: border-color var(--q-t) var(--q-ease);
}

.iaq__composer:has(.is-typing) { border-color: var(--q-live-line); }

.iaq__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--q-text);
}

.iaq__placeholder { color: var(--q-dim); }

.iaq__caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  background: var(--q-live);
  vertical-align: text-bottom;
  animation: iaq-caret 1s steps(1) infinite;
}

.iaq__caret[hidden] { display: none; }

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

@media (prefers-reduced-motion: reduce) {
  .iaq__caret { animation: none; }
}

/* Round, because every composer a reader has used is. It arms rather than
   activates: nothing is clickable here, and it never pretends to be. */
.iaq__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--q-well);
  color: var(--q-dim);
  transition: background var(--q-t) var(--q-ease), color var(--q-t) var(--q-ease);
}

.iaq__send svg { width: 16px; height: 16px; }

.iaq__send.is-armed { background: var(--q-live); color: #14112b; }

@media (max-width: 760px) {
  .iaq__thread { height: 320px; padding: 20px 16px; gap: 22px; }
  .iaq__bar, .iaq__foot { padding-left: 16px; padding-right: 16px; }
  .iaq__you { max-width: 100%; }
  .iaq__ctx { display: none; }
  .iaq__verdict { font-size: 1rem; }
}