/**
 * @file turn.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description One thing said: the person's words on the sun, the agent's with a coral spine, the time and
 *   model under it, and a turn that could not run. Drawn by components/Turn.js. Reads only the
 *   tokens in theme.css and the shapes in poster.css; a page never styles it from outside.
 * @usage Linked from public/spa.html in the component block, whose order keeps the order these
 *   rules had when they were one sheet.
 * @version-history
 *   v1.4.0 — 2026-09-27 — Your turn's Markdown parts, quote, table lines and tags take the turn's own
 *     words' colour (inherit) instead of --on-sun: the same ink on the sun in AIMEAT, and readable in
 *     Pebble's dark mode, which draws your turn on a dark ground with light words.
 *   v1.3.0 — 2026-09-26 — The name line outside the words goes: who wrote a message is inside it again
 *     (css/components/message.css .message-who), as main has it.
 *   v1.2.0 — 2026-09-26 — The name line above the words, the line under a turn that wraps, and your
 *     words in Markdown at the turn's size with ink on the sun (moved from inbox-poster.css, the same
 *     values): Messages draws a message as this turn (Jouni's decision "Message").
 *   v1.1.0 — 2026-09-24 — The corners and frames read the theme's shape values (a move).
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

/* ── One turn ── */
.poster-turn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 82%;
}
.poster-turn--user { align-self: flex-end; align-items: flex-end; }
.poster-turn--agent { align-self: flex-start; }
.poster-turn-body {
  padding: 0;
  border-radius: var(--shape-corner-control);
  background: none;
  border: 0;
  line-height: 1.55;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
/* What the person said: a sun block, bold, its own words. */
.poster-turn--user .poster-turn-body {
  background: var(--sun);
  color: var(--text);
  padding: 10px 16px;
  font-weight: var(--weight-heavy);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
/* The agent's side gets the accent as a spine rather than a fill: readable at any length, and it
   makes the two speakers tellable apart at a glance instead of by position alone. */
.poster-turn--agent .poster-turn-body { border-left: 6px solid var(--accent-border); padding-left: 18px; }
.poster-turn--live .poster-turn-body { border-left-color: var(--accent); }
.poster-turn-said { margin: 0; white-space: pre-wrap; }
/* A wide table scrolls inside the bubble instead of crushing its columns until "Versio" wraps
   mid-word. Layout containment is the view's concern (markdown.css owns typography, not where a
   bubble puts its overflow). */
.poster-turn-body .md-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.poster-turn-thinking {
  margin: 0;
  color: var(--text-dim);
  font-style: italic;
}
.poster-turn-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.poster-turn--agent .poster-turn-meta { padding-left: 24px; }
/* The line under a turn wraps on a narrow screen, so nothing in it falls off the edge. */
.poster-turn-meta { flex-wrap: wrap; row-gap: 4px; }
/* Your words written in Markdown (Messages): the turn's own size and weight, and the words' colour of
   the turn all the way down (ink on the sun in AIMEAT). .md-body sets its own size and colour, which
   the dark theme makes near-white: 1.52:1 on the sun, so the parts inherit the turn's colour; a
   style that draws your turn on its own ground and words (Pebble) is then followed down too. The
   code plate inverts rather than takes the ink, because its ground stays dark. */
.poster-turn--user .poster-turn-body .md-body { font-size: inherit; }
.poster-turn--user .poster-turn-body .md-body,
.poster-turn--user .poster-turn-body .md-body p,
.poster-turn--user .poster-turn-body .md-body li,
.poster-turn--user .poster-turn-body .md-body h1,
.poster-turn--user .poster-turn-body .md-body h2,
.poster-turn--user .poster-turn-body .md-body h3,
.poster-turn--user .poster-turn-body .md-body h4,
.poster-turn--user .poster-turn-body .md-body h5,
.poster-turn--user .poster-turn-body .md-body h6,
.poster-turn--user .poster-turn-body .md-body strong,
.poster-turn--user .poster-turn-body .md-body em,
.poster-turn--user .poster-turn-body .md-body a,
.poster-turn--user .poster-turn-body .md-body .md-wikilink { color: inherit; }
.poster-turn--user .poster-turn-body .md-body h1,
.poster-turn--user .poster-turn-body .md-body h2,
.poster-turn--user .poster-turn-body .md-body hr,
.poster-turn--user .poster-turn-body .md-body th,
.poster-turn--user .poster-turn-body .md-body td { border-color: currentColor; }
.poster-turn--user .poster-turn-body .md-body .md-code { background: var(--on-sun); border-color: var(--on-sun); color: var(--sun); }
.poster-turn--user .poster-turn-body .md-body .md-pre { background: var(--on-sun); border-color: var(--on-sun); }
.poster-turn--user .poster-turn-body .md-body .md-pre .md-code { color: var(--sun); }
.poster-turn--user .poster-turn-body .md-body blockquote { background: transparent; color: inherit; border-left-color: currentColor; }
.poster-turn--user .poster-turn-body .md-body th,
.poster-turn--user .poster-turn-body .md-body tbody tr:nth-child(even) { background: transparent; }
/* A Tag on your words (an agent's Chat tab marks a slash command) takes the ink on the sun too. */
.poster-turn--user .poster-turn-body .poster-chip { border-color: currentColor; color: inherit; }
.poster-turn-model { font-family: var(--font-mono); }
/* Copy and Listen are the text tone of the action link (poster.css .poster-action--text). */
/* ── A turn that could not run ── */
.poster-turn-error {
  align-self: stretch;
  border: var(--shape-frame) solid var(--accent);
  border-radius: var(--shape-corner-control);
  background: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.poster-turn-error-msg {
  margin: 0;
  flex: 1 1 240px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}
.poster-turn-images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.poster-turn-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: var(--shape-frame) solid var(--shape-rule-colour);
  border-radius: var(--shape-corner-control);
  background: var(--bg-surface);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: inherit;
  text-decoration: none;
}
.poster-turn-file:hover { color: var(--accent); }
/* The read-aloud control sits with the timestamp rather than on the bubble: it is about the turn,
   not part of what was said. */
@media (max-width: 760px) {

  .poster-turn { max-width: 92%; }
  .poster-turn--user .poster-turn-body { font-size: var(--text-md); padding: 9px 13px; }
  .poster-turn--agent .poster-turn-body { border-left-width: 5px; padding-left: 11px; }
  .poster-turn--agent .poster-turn-meta { padding-left: 16px; }
}
.poster-turn--user .poster-turn-body { color: var(--on-sun); }