/* ==========================================================================
   The assistant: the frame, the transcript, the composer, the card.

   Every colour is a token from tokens.css, so the page has a dark theme for
   free; what is drawn literally is a picture of something else — a phone, a
   WhatsApp bubble — and stays as that thing looks.

   The layout is a fixed app shell: the transcript is the only thing that
   scrolls, and the composer is pinned. A chat where the input drifts up the
   page as the conversation grows is one people lose the input in.

   Restyled 2026-10-15 on Dsquares' palette, with Nura's own mark and motion;
   the accessibility rules of the 2026-10-05 audit are kept, with their notes.

   One stylesheet until 2026-10-15, now these files, numbered in the order
   index.html loads them — the order the rules always had, so the cascade is
   unchanged (checked element by element, both themes). A rule that overrides
   another must stay in a later file: 08-motion and 11-a11y in particular
   adjust what comes before them.
   ========================================================================== */

.chat {
  display: flex;
  flex-direction: column;
  flex: 1;                /* #view is a flex column; height:100% alone is fragile */
  height: 100%;
  min-height: 0;          /* lets the transcript actually shrink and scroll */
}

/* --------------------------------------------------------------------------
   Transcript
   -------------------------------------------------------------------------- */

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 0 12px;
  scroll-behavior: smooth;
  /* The containing block for the .sr-only labels inside it. Without one they
     are positioned against the page, escape this box's scroll clipping, and
     make the document as tall as the conversation — which body's
     overflow:hidden then lets focus() and find-in-page scroll, pushing the
     whole chat up with no way back down. */
  position: relative;
}

/* The transcript takes focus so it can be scrolled from the keyboard. The ring
   is drawn inside it: #view clips anything outside. */
.transcript:focus-visible {
  outline-offset: -2px;
}

.msg {
  width: min(var(--column), 100%);
  margin: 0 auto 30px;
  padding: 0 24px;
}

/* The operator's own turn, set apart by alignment and a pale brand wash —
   they know what they typed; it does not need emphasis. */
.msg-user .msg-body {
  margin-left: auto;
  width: fit-content;      /* hug the text; a three-word turn is not a banner */
  max-width: 78%;
  background: var(--accent-soft);
  /* Transparent, so high-contrast mode — which drops backgrounds — still
     draws the bubble's edge. */
  border: 1px solid transparent;
  border-radius: var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl);
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-strong);
}

.msg-user .msg-body p {
  white-space: pre-wrap;       /* the operator's own line breaks survive */
  word-break: break-word;
  unicode-bidi: plaintext;     /* each typed line takes its own direction */
}

.msg-who {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -.005em;
}

.msg-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.nura-mark { display: inline-flex; line-height: 0; }

/* Nura's light: noon's dot and its halo, which breathe while Nura works —
   in an answer's avatar while it is being worked out, in the story of a
   turn, and on the screen that opens the conversation (2026-10-15). */
.nura-light, .nura-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.is-working .nura-light,
.msg.is-pending .msg-avatar .nura-light {
  animation: nura-breathe 1.6s ease-in-out infinite;
}

.is-working .nura-glow,
.msg.is-pending .msg-avatar .nura-glow {
  animation: nura-halo 1.6s ease-in-out infinite;
}

.msg.is-pending .msg-avatar {
  animation: nura-glow 1.6s ease-in-out infinite;
}

@keyframes nura-breathe {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .6;  transform: scale(.8); }
}

/* The halo swells as the dot draws in: a light, breathing. */
@keyframes nura-halo {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes nura-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nura-light) 0%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--nura-light) 28%, transparent); }
}

.msg-assistant .msg-body {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text);
}

.msg-assistant .msg-body > * + * {
  margin-top: 12px;
}

/* Under an answer: Listen and Visualize, quiet until they are wanted. */
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 8px 0 0 -6px;
}

/* --------------------------------------------------------------------------
   Markdown inside a reply
   -------------------------------------------------------------------------- */

.md-h {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

/* The indent is on each item, on its own start side, because each item takes
   its direction from its own text: an Arabic item's marker sits on the right,
   and an indent on the list's left would leave it hanging off the edge. */
.md-list {
  padding: 0;
}

.md-list li {
  margin-inline-start: 20px;
  padding-inline-start: 2px;
}

.md-list li::marker { color: var(--text-faint); }

.md-list li + li {
  margin-top: 5px;
}

.msg-body strong {
  color: var(--text-strong);
  font-weight: 650;
}

.msg-body code {
  font-family: var(--font-mono);
  font-size: .87em;
  background: var(--surface-sunken);
  border-radius: 5px;
  padding: 1.5px 5px;
}

.md-quote {
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  padding: 10px 14px;
  color: var(--text-body);
}

.md-rule {
  border: none;
  border-top: 1px solid var(--border);
}

/* A table is how most answers about tiers and SKUs arrive, so it gets real
   attention. It hugs its columns — stretched to the column, three short
   columns sat a hand's width apart — and scrolls on its own when wider. */
.md-table-wrap {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.md-table-wrap:focus-visible {
  outline-offset: 1px;
}

.md-table {
  border-collapse: collapse;
  min-width: 320px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.md-table th,
.md-table td {
  padding: 9px 18px 9px 14px;
  text-align: start;      /* an Arabic cell reads from the right; columns keep their order */
  white-space: nowrap;
}

.md-table thead th {
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}

.md-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.md-table tbody tr:hover td {
  background: var(--surface-raised);
}

.md-table td {
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   Waiting

   A turn takes 15-79 seconds, so this is the difference between "working"
   and "broken". The counter is the honest part: it says the wait is known,
   not that it is over. The steps below it say what the time is going on.
   -------------------------------------------------------------------------- */

.pending {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

/* In an answer's own bubble the avatar's light says Nura is working; the
   dots are for the screen before the conversation opens. */
.msg.is-pending .pending .dots { display: none; }

.pending-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

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

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.3s infinite ease-in-out;
}

.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }

@keyframes blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

/* `hidden` must win over the display these set — `.flow { display: flex }`
   otherwise keeps the diagram on screen after the answer starts. */
.flow[hidden], .pending[hidden] { display: none; }

/* The answer while it is written: the same text styles as a reply, with a
   caret that blinks at the end until the final reply replaces it. */
.live-answer > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--accent);
  animation: caret 1s steps(2) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .live-answer > :last-child::after { animation: none; }
}

/* The page before its conversation is open — so it is never blank: the mark,
   its light breathing, and what is happening. */
.connecting {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  animation: arrive-fade .3s ease-out both;
}

.connecting-mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nura-light) 24%, transparent), transparent 68%);
}

.connecting-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text-strong);
}

.connecting-line {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Next questions — what the operator might ask next, as buttons that ask it
   -------------------------------------------------------------------------- */

/* Docked above the message box (2026-10-16): the latest answer's follow-ups,
   centred, where the eye and the hand already are. */
.composer-suggestions {
  width: min(calc(var(--column) - 48px), 100%);
  margin: 0 auto 10px;
}

.composer-suggestions[hidden] { display: none; }

.next-questions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.next-question {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: start;
  box-shadow: var(--shadow-sm);
  transition: background .15s, border-color .15s, color .15s;
  animation: flow-in .3s ease-out both;
}

.next-question.is-chart svg { color: var(--accent); }

/* A phone: one row that scrolls sideways, so the questions never push the
   box up the screen. */
@media (max-width: 600px) {
  .next-questions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .next-question { flex: none; white-space: nowrap; }
}

.next-question:hover, .next-question:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* A message reached with Alt+↑/↓ (views/shortcuts.js): ringed where it is. */
.msg:focus { outline: none; }
.msg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--r-md);
}