/* ai.css — the assistant page. Builds on guides/guide.css: tokens, chrome and
   .article layout come from there, only the conversation is described here.

   The column is narrower than the site's data pages on purpose. Answers are
   prose, and prose stops being readable past roughly 75 characters a line —
   the leaderboard needs 1440px because eleven columns must be comparable side
   by side, a paragraph needs the opposite. */

.chat {
  max-width: 840px;
  margin: 0 auto;
}

/* Dialogue header, not an intro screen.
   On a page built around a chat window a tall promotional block steals room from
   the dialogue itself and promises reading where an answer is expected. So the
   heading is squeezed to one line, the subtitle to a single small one, and a thin
   rule below reads as the edge of an app panel. */
.chat-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.chat-head h1 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  margin: 0 0 6px;
}
.chat-head p {
  margin: 0;
  max-width: 68ch;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- conversation ------------------------------------------------------- */

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Keeps the input at the bottom while there is no conversation — otherwise it
     would sit right under the prompts and the page would read as a form, not a
     chat. Smaller than before the prompts moved up: now they stand above the
     window. */
  min-height: 34vh;
  margin: 18px 0 0;
}

.chat-msg {
  max-width: 88%;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.62;
  overflow-wrap: anywhere;      /* addresses and long tickers must not widen the page */
}

.chat-msg-you {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(255,168,5,0.13), rgba(255,168,5,0.06));
  border-color: rgba(255,168,5,0.28);
}

.chat-msg-bot {
  align-self: flex-start;
  background: var(--surface);
}

.chat-msg p        { margin: 0 0 .7em; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ol,
.chat-msg ul       { margin: .3em 0 .8em; padding-left: 1.35em; }
.chat-msg li       { margin: .25em 0; }
.chat-msg strong   { color: #fff; }
.chat-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: rgba(255,255,255,0.06);
  padding: .1em .35em;
  border-radius: 6px;
}

/* Which tools produced the answer. Small, muted, always shown: an assistant
   that cites nothing is indistinguishable from one that invented the figure,
   and this page's whole claim is that it did not. */
.chat-src {
  align-self: flex-start;
  margin-top: -10px;
  font-size: .78rem;
  color: var(--muted-2);
  letter-spacing: .01em;
}
.chat-src b { color: var(--muted); font-weight: 500; }

.chat-err {
  align-self: flex-start;
  border-color: rgba(255,120,120,0.3);
  background: rgba(255,80,80,0.07);
  color: #ffc9c9;
}

/* --- thinking indicator -------------------------------------------------- */

.chat-wait {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 16px 18px;
}
.chat-wait i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted-2);
  animation: chat-bounce 1.25s infinite ease-in-out;
}
.chat-wait i:nth-child(2) { animation-delay: .16s; }
.chat-wait i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-bounce {
  0%, 70%, 100% { transform: translateY(0);    opacity: .45; }
  35%           { transform: translateY(-5px); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .chat-wait i { animation: none; opacity: .6; }
}

/* Cursor while text streams in, so a slow answer does not look like a stall. */
.chat-msg-live::after {
  content: "";
  display: inline-block;
  width: .55em; height: 1.05em;
  margin-left: .1em;
  vertical-align: -.18em;
  background: var(--gold);
  opacity: .8;
  animation: chat-caret 1s steps(1) infinite;
}
@keyframes chat-caret { 50% { opacity: 0; } }

/* --- composer ------------------------------------------------------------ */

.chat-form {
  position: sticky;
  bottom: 14px;
  margin-top: 22px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(12,16,20,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.85);
}

.chat-input {
  flex: 1;
  resize: none;
  max-height: 168px;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--muted-2); }

.chat-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: var(--gold);
  color: #1a1205;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-send:disabled { opacity: .38; cursor: default; }
.chat-send svg { width: 19px; height: 19px; }

/* --- starter questions --------------------------------------------------- */

/* Sit directly under the header, above the dialogue window: while there is no
   conversation they ARE the page content. The script removes them after the
   first question. */
.chat-seed {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}
.chat-seed button {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit; font-size: .88rem;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
.chat-seed button:hover { border-color: var(--line-strong); color: var(--text); }

.chat-foot {
  margin-top: 16px;
  font-size: .82rem;
  color: var(--muted-2);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .chat-msg  { max-width: 96%; }
  .chat-form { bottom: 8px; }
  .chat-log  { min-height: 30vh; }
}