/* Tweaks for chat components that can't live in Bootstrap classes.

   Named BEM-style around one block: `chat-turn`, a single message card in the
   thread — `chat-turn__*` for its parts, `chat-turn--*` for its role and error
   states. Its innards are written in three places (app/ai/chat/_turn.html.twig,
   _stream_open.html.twig, and ChatAnswerExtension, which renders the assistant's
   answer body), so the names have to survive being spelled out in PHP too.

   Tabler `card`, `spinner-border` and the `d-*`/`text-*` utilities keep their own
   names — they're Bootstrap's, not ours. */

/* The inline SVG ChatAnswerExtension puts next to a live query's caption: sits on
   the text baseline, and never shrinks when it's a flex item. Was `svg.ti`, a
   Tabler icon-font class the markup borrowed — Tabler defines no rules for it,
   and nothing else in the app emits one. */
.chat-turn__icon {
  vertical-align: -.18em;
  flex: 0 0 auto;
}

/* Raw text (user message, error, live-streaming tokens) keeps its newlines. */
.chat-turn__body--streaming,
.chat-turn--user .chat-turn__body,
.chat-turn--error .chat-turn__body {
  white-space: pre-wrap;
}

.chat-turn__body--streaming::after {
  content: '▍';
  color: var(--tblr-primary);
  animation: chat-turn-caret 1s steps(2) infinite;
}

/* While the loader is up (waiting on queries) hide the typing caret. */
.chat-turn__body--streaming:has(.chat-turn__loader)::after {
  content: none;
}

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

/* Chart.js needs a positioned, fixed-height container to size into. */
.chat-turn__chart {
  position: relative;
  height: 320px;
}

/* Wide tables scroll sideways rather than overflowing the narrow sidebar. */
.chat-turn__table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.chat-turn__table {
  border-collapse: collapse;
  margin: .6rem 0;
}

/* Ruled like every other table: --lens-row-rule on the TOP edge only, and no
   vertical borders -- a full grid boxes every cell, which Ledger reserves for
   form controls. Matches .table in app.css. */
.chat-turn__table th,
.chat-turn__table td {
  border-top: 1px solid var(--lens-row-rule);
  padding: .35rem .7rem;
  text-align: left;
}

/* Flush to the column edge, so the figures line up with the text above. */
.chat-turn__table th:first-child,
.chat-turn__table td:first-child {
  padding-left: 0;
}

.chat-turn__table th {
  border-top: 0;
  border-bottom: 1px solid var(--lens-rule);
  color: var(--lens-tertiary);
  font-size: var(--tblr-font-size-h6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* The AI answers in figures; they line up down the column like any other. */
.chat-turn__table td {
  font-variant-numeric: tabular-nums;
}