.demo-page {
  width: min(960px, 100%);
  padding-bottom: 80px;
}

.demo-header {
  max-width: 760px;
  padding: 54px 0 38px;
}

.demo-header h1 { margin-bottom: 14px; }
.demo-header .trust-line { margin-top: 10px; }

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 54px;
}

/* The chat comes first in the document, because on a phone the athlete panel is a wall of
   background a visitor would have to scroll past before they can ask anything. Wide enough
   for two columns, `order` puts the athlete back on the left where it reads as context
   beside the conversation rather than ahead of it. */
@media (min-width: 781px) {
  .demo-athlete { order: 1; }
  .demo-chat { order: 2; }
}

.demo-athlete,
.demo-chat {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.demo-athlete { padding: 22px; }
.demo-athlete h2,
.demo-chat h2 { margin: 8px 0 14px; font-size: 1.35rem; }

.demo-facts {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.demo-fact {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel);
}

.demo-fact strong,
.demo-fact span { display: block; }
.demo-fact span { margin-top: 4px; color: var(--ink-soft); font-size: 0.92rem; }
.demo-disclosure { margin: 20px 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.demo-chat { padding: 22px; }
.demo-prompts { display: grid; gap: 10px; margin: 16px 0 22px; }

.demo-prompt {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.demo-prompt:hover { border-color: var(--ink); background: var(--paper); }
.demo-prompt:focus-visible,
.demo-input:focus-visible,
.demo-send:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* A column of turns rather than a stack of blocks: each turn takes the width its own text
   needs and is pushed to its own side, which is what says who is speaking before a word of
   it is read. The label above each one stays, because a colour and a side are a convention
   a first visitor has not been taught yet. */
.demo-transcript {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 220px;
  max-height: 520px;
  overflow-y: auto;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}

/* The page's own voice inside the transcript: what it says is about the conversation, not
   about training, so it is not a turn and is not attributed to anyone. */
.demo-notice { align-self: stretch; margin: 0; padding: 11px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-soft); font-size: 0.92rem; }
/* `white-space` belongs on the body of a turn, not on the turn: the visitor's own words are
   shown exactly as typed, and the coach's are rendered. On the wrapper it also turned the
   indentation of the one turn written by hand -- the opening below -- into blank lines. */
.demo-turn { max-width: 100%; margin: 0; padding: 14px 16px; border-radius: 14px; }
/* The visitor's own words sit on the right and stay narrow -- a question is a sentence or
   two, and a question stretched across the full column reads like a second answer. */
.demo-turn.user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-right-radius: 5px;
}
/* The coach answers on the left and is allowed the width, because its replies carry
   headings, lists and the occasional table. */
.demo-turn.coach {
  align-self: flex-start;
  max-width: 94%;
  background: var(--panel);
  border-left: 5px solid var(--aqua);
  border-bottom-left-radius: 5px;
}
.demo-turn strong { display: block; margin-bottom: 5px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.demo-turn.user strong { text-align: right; color: var(--ink-soft); }

/* The coach's turn before it has any words in it. A reply takes ten to thirty seconds, and
   for all of that the transcript used to show nothing at all -- the only sign of life was a
   line of text below the send button, off screen on a phone the moment a question was
   added. This is that sign, in the place a reader is already looking: the next turn, on the
   coach's side, saying it is being written. */
.demo-turn.pending { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.demo-turn.pending strong { flex-basis: 100%; margin-bottom: 0; }
.demo-pending-wait { color: var(--ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

.demo-dots { display: inline-flex; gap: 5px; align-items: center; }
.demo-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: 0.35; animation: demo-dot 1.25s infinite ease-in-out; }
.demo-dots i:nth-child(2) { animation-delay: 0.16s; }
.demo-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes demo-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-dots i { animation: none; opacity: 0.55; }
}
.demo-turn.user .demo-body { white-space: pre-wrap; }
.demo-turn.coach .demo-body { white-space: normal; }
.demo-turn.coach.streaming .demo-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-body p { margin: 0 0 10px; }
.demo-body p:last-child, .demo-body ul:last-child { margin-bottom: 0; }
.demo-body h4, .demo-body h5 { margin: 15px 0 6px; font-size: 0.97rem; line-height: 1.35; }
.demo-body h4:first-child, .demo-body h5:first-child { margin-top: 0; }
.demo-body ul { margin: 0 0 10px; padding-left: 20px; }
.demo-body li { margin: 0 0 5px; }
.demo-body strong.demo-inline { display: inline; margin: 0; font-size: inherit; text-transform: none; letter-spacing: normal; }
/* The coach reaches for a table when it compares sessions. It is the one thing in a reply
   allowed to be wider than the column, so it gets its own scroller rather than pushing the
   page sideways on a phone. */
.demo-table-scroll { overflow-x: auto; margin: 0 0 12px; }
.demo-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.demo-table th, .demo-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.demo-table th { font-weight: 900; }
.demo-table tr:last-child td { border-bottom: 0; }
/* Hidden until the first coach reply arrives; demo.js reveals it. It sits after the box you
   type in, so nothing stands between an answer and the next question -- the conversation is
   the demo, and this is the one line offering the way out of it. */
.demo-handoff { margin: 14px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.demo-handoff[hidden] { display: none; }
.demo-handoff a { font-weight: 700; }
.demo-form { display: grid; gap: 10px; }

.demo-input {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-send { min-height: 46px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 14px; color: var(--paper); background: var(--ink); cursor: pointer; font: inherit; font-weight: 900; }
.demo-send[disabled],
.demo-prompt[disabled] { cursor: not-allowed; opacity: 0.55; }
.demo-status { min-height: 1.5em; margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.demo-status.error { color: #8b2f27; font-weight: 700; }
.demo-elapsed { font-variant-numeric: tabular-nums; }

.demo-exit {
  margin-top: 26px;
  padding: 22px 24px;
  border-left: 6px solid var(--banana);
  border-radius: 14px;
  background: var(--paper);
}

.demo-exit p { margin: 6px 0 16px; color: var(--ink-soft); }

@media (max-width: 780px) {
  .demo-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .demo-page { padding-bottom: 56px; }
  .demo-header { padding: 38px 0 28px; }
  .demo-athlete,
  .demo-chat { padding: 18px; }
  .demo-transcript { min-height: 180px; }
  /* Narrow enough that holding a turn back from the edge costs more than the side is
     worth: the question keeps its side and gives up the inset. */
  .demo-turn.user { max-width: 92%; }
  .demo-turn.coach { max-width: 100%; }
}