/* ═══════════════════════════════════════════════════════════════════════════
   TELEGRAM

   Its own file, and everything in it prefixed `bot-`, because the Telegram
   screen is the newest thing here and the oldest rule still holds: it borrows
   the tokens and adds no colours of its own. Ink on paper, square corners, one
   grotesque. The only hue is `--brand`, and it is used the way it is used
   everywhere else — to mark the thing the institution is saying — plus the red,
   which still means only that something is wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the health checks ──────────────────────────────────────────────────── */

.bot-check {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.bot-check:last-of-type { border-bottom: 0; }
.bot-check svg { align-self: center; }
.bot-check.ok svg { color: var(--ink-2); }
.bot-check.no svg { color: var(--red); }
.bot-check span { font-weight: 500; }
.bot-check small {
  color: var(--ink-2);
  text-align: right;
  overflow-wrap: anywhere;
}
.bot-check.no small { color: var(--red); }

/* ── the settings ───────────────────────────────────────────────────────── */

.bot-field { display: block; margin-bottom: var(--sp-4); }
.bot-field > span {
  display: block;
  font-size: var(--t-13);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.bot-field select { width: 100%; }
.bot-field small {
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--t-13);
  line-height: 1.4;
}

/* ── the conversation list ──────────────────────────────────────────────── */

.bot-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bot-row:last-child { border-bottom: 0; }
.bot-row:hover { background: var(--paper-2); }
/* The open conversation is marked by a rule, not a fill: the row is still a
   row, and a filled row reads as a selected cell in a spreadsheet. */
.bot-row.on { box-shadow: inset 3px 0 0 var(--brand); }
.bot-row b { grid-column: 1; }
.bot-row small { color: var(--ink-2); font-size: var(--t-13); }
.bot-row small:nth-of-type(1) { grid-column: 1; }
.bot-row small:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ── the record ─────────────────────────────────────────────────────────── */

.bot-stream { margin-top: var(--sp-4); }

.bot-ev {
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-left: 3px solid var(--rule);
  font-size: var(--t-13);
}
.bot-ev p { margin: var(--sp-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bot-ev .who { color: var(--ink-2); font-size: var(--t-11); }

/* What the person said is on paper; what the bot said is the institution
   speaking, so it takes the brand rule — the same distinction the reader makes
   between a learner's answer and the material. */
.bot-ev.in { background: var(--paper-2); border-left-color: var(--ink); }
.bot-ev.out { border-left-color: var(--brand); }

/* Instruments and model accounting are apparatus, not conversation. They are
   set quieter on purpose so a thread still reads as a thread. */
.bot-ev.tool,
.bot-ev.model {
  color: var(--ink-2);
  border-left-color: var(--rule);
  font-size: var(--t-11);
}
.bot-ev.model { padding-block: var(--sp-2); }
.bot-ev.bad { border-left-color: var(--red); color: var(--red); }
.bot-ev .bad { color: var(--red); }

.bot-ev.tool summary { cursor: pointer; color: var(--ink-2); }
.bot-ev.tool summary:hover { color: var(--brand); }
.bot-ev.tool pre {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow-y: auto;
}

@media (max-width: 40rem) {
  .bot-row { grid-template-columns: 1fr; }
  .bot-row small:nth-of-type(2) { grid-column: 1; grid-row: auto; }
}