/*
 * Chat-transcript slides — pairs with chat.js. Loaded only by decks that
 * present conversation excerpts; everything every deck wants stays in deck.css.
 *
 * The look is styled after the Claude Code panel on the black theme: user
 * messages in a filled box behind a ❯, assistant replies as flowing markdown
 * behind an accent ●, tool calls as compact pill rows.
 */
:root {
  --chat-ok: #58c469; /*   light: #1a7f37 */
  --chat-err: #e5534b; /*  light: #cf222e */
}

/* The scrolling viewport. position:relative is load-bearing: chat.js reads
   message offsetTop as shell-relative for its scroll targets. */
.reveal .chat-shell {
  position: relative;
  height: 540px;
  overflow-y: auto;
  overflow-x: hidden; /* the vertical scrollbar's width otherwise trips a 2px horizontal one */
  background: var(--ece-panel);
  border: 1px solid var(--ece-panel-edge);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 0.5em;
  line-height: 1.45;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--ece-panel-edge) transparent;
}

/* Optional banner from the excerpt's "heading" field — session context
   (model, client) above the first message, scrolling with the transcript. */
.reveal .chat-heading {
  text-align: center;
  color: var(--ece-muted);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ece-panel-edge);
  margin-bottom: 18px;
}

/* ---------- messages ---------- */
.reveal .chat-msg {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  margin-bottom: 18px;
}

/* Blocks are the fragments; the message chrome (bubble, glyph, leading gap)
   is not — it materializes with its first revealed block, so a message never
   costs a keypress just to show an empty bubble. */
.reveal .chat-msg:not(:has(.fragment.visible)) {
  visibility: hidden;
}

/* A mid-body elision shows once the content after the cut has arrived. */
.reveal .chat-body .chat-gap {
  visibility: hidden;
}

.reveal .chat-body .chat-gap:has(~ .fragment.visible) {
  visibility: visible;
}

.reveal .chat-msg .chat-glyph {
  color: var(--ece-muted);
  font-weight: 700;
  user-select: none;
}

.reveal .chat-msg.assistant .chat-glyph {
  color: var(--ece-accent);
}

.reveal .chat-msg.user .chat-glyph {
  padding-top: 10px; /* aligns with the bubble's padding */
}

.reveal .chat-msg.user .chat-body {
  background: var(--ece-chip);
  border: 1px solid var(--ece-panel-edge);
  border-radius: 8px;
  padding: 10px 16px;
}

.reveal .chat-msg.compact .chat-body {
  color: var(--ece-muted);
  font-style: italic;
}

/* Elision divider: between messages (grid row) or inside a body. */
.reveal .chat-gap {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ece-muted);
  letter-spacing: 0.35em;
  margin: 2px 0 14px;
  user-select: none;
}

/* ---------- tool pills ---------- */
.reveal .chat-tool {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82em;
  color: var(--ece-muted);
  background: var(--ece-chip);
  border: 1px solid var(--ece-panel-edge);
  border-radius: 6px;
  padding: 4px 12px;
  margin: 10px 0;
}

/* A pill leading a message keeps the row's top edge — otherwise its own top
   margin drops it below the glyph, which then floats above the message. */
.reveal .chat-body > .chat-tool:first-child {
  margin-top: 0;
}

.reveal .chat-tool .status.ok {
  color: var(--chat-ok);
}

.reveal .chat-tool .status.err {
  color: var(--chat-err);
}

.reveal .chat-tool .name {
  font-weight: 600;
}

.reveal .chat-tool .value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- markdown inside a message ----------
   Chat prose is small; reveal's theme sizes headings/quotes/code for slides,
   so everything a transcript can contain gets resized down here. */
.reveal .chat-body p {
  margin: 0 0 0.6em;
}

.reveal .chat-body p:last-child {
  margin-bottom: 0;
}

.reveal .chat-body ul,
.reveal .chat-body ol {
  display: block;
  margin: 0 0 0.6em 1.2em;
}

.reveal .chat-body li {
  margin: 0.15em 0;
}

.reveal .chat-body h1,
.reveal .chat-body h2,
.reveal .chat-body h3,
.reveal .chat-body h4 {
  font-size: 1.1em;
  margin: 0.5em 0 0.3em;
  color: inherit;
  text-shadow: none;
}

.reveal .chat-body pre {
  width: auto;
  font-size: 0.9em;
  margin: 0.4em 0 0.7em;
  border: 1px solid var(--ece-panel-edge);
  border-radius: 5px;
  box-shadow: none;
}

.reveal .chat-body pre code {
  padding: 10px 14px;
  max-height: none;
  overflow-x: auto;
}

.reveal .chat-body blockquote {
  width: auto;
  margin: 0.4em 0 0.7em;
  padding: 4px 14px;
  border-left: 3px solid var(--ece-panel-edge);
  background: none;
  box-shadow: none;
  font-style: normal;
  font-size: 0.95em;
  color: var(--ece-muted);
}

.reveal .chat-body table {
  font-size: 0.9em;
  margin: 0.4em 0 0.7em;
}

.reveal .chat-context {
  font-size: 0.85em;
}

/* ---------- PDF export ----------
   A scrolling viewport clips in print; let the conversation flow down the page.
   Print also forces fragments visible without necessarily adding .visible
   (see deck.css's diagram note), so the :has()-gated chrome must be forced
   on or every bubble and elision would print blank. */
html.print-pdf .reveal .chat-shell,
html.reveal-print .reveal .chat-shell {
  height: auto;
  overflow: visible;
}

html.print-pdf .reveal .chat-msg,
html.reveal-print .reveal .chat-msg,
html.print-pdf .reveal .chat-body .chat-gap,
html.reveal-print .reveal .chat-body .chat-gap {
  visibility: visible !important;
}