/* Shared chat transcript — the Proving Ground's bout page AND its exhibit.
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ============================================================
   Shared chat transcript — used by BOTH the bout page and the
   show page's exhibit (section 02). Rendered by the reusable
   _chat_exchange partial (customer_message/tool_calls/agent_reply
   locals, no Proving Ground literals in that file). Bubbles carry
   a "tail" corner sharp on the side nearest the speaker; tool
   calls are borderless icon+text rows, not cards, so they read as
   quiet log lines above the reply.
   ============================================================ */
.pg-chat { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.pg-chat-row { display: flex; flex-direction: column; gap: 6px; max-width: 78%; min-width: 0; }
.pg-chat-row-customer { align-items: flex-start; margin-right: auto; }
.pg-chat-row-agent { align-items: flex-end; margin-left: auto; }
@media (max-width: 680px) {
  .pg-chat-row { max-width: 92%; }
}
.pg-chat-speaker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 4px;
}
.pg-chat-bubble {
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow-wrap: break-word;
  min-width: 0;
}
.pg-chat-bubble-customer {
  background: var(--bg);
  color: var(--ink);
  border-bottom-left-radius: 3px;
  font-family: var(--font-sans);
}
.pg-chat-bubble-agent {
  background: #F4F9FF;
  border-color: #DCE9FB;
  color: var(--ink);
  border-bottom-right-radius: 3px;
  font-family: var(--font-sans);
}
/* Nested markdown (render_markdown) inside the agent bubble — compact version of .mb-brief's rules */
.pg-chat-bubble-agent p { margin: 0; }
.pg-chat-bubble-agent p + p { margin-top: 10px; }
.pg-chat-bubble-agent strong { font-weight: 600; }
.pg-chat-bubble-agent em { font-style: italic; }
.pg-chat-bubble-agent ul,
.pg-chat-bubble-agent ol { margin: 8px 0 0; padding-left: 20px; }
.pg-chat-bubble-agent li { margin: 3px 0; }
.pg-chat-bubble-agent a { color: var(--ink); text-decoration: underline; }

/* Tool-call rows — collapsed-by-default disclosures (same expand pattern as
   Monday Brief's action/observation trace, .mb-trace-action), but borderless:
   icon + muted-gray description + chevron, no card. Stacked right-aligned
   above the reply bubble, under the turn's single "Agent" speaker label. */
.pg-chat-actions { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
/* text-align: right (not flex + justify-content) — .pg-chat-action-item wraps
   both the trigger button AND its collapsed detail panel; making the item a
   flex row put those two side by side, and the detail's hidden-but-still
   horizontally-laid-out width (max-height only collapses the vertical axis)
   ate space and pushed the button left. text-align only affects inline-level
   boxes (the inline-flex button), so the block-level detail panel underneath
   is unaffected and still stacks/expands downward as normal. */
.pg-chat-action-item { text-align: right; width: 100%; min-width: 0; }
.pg-chat-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 4px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pg-action-icon-svg { display: block; color: var(--ink-faint); }
.pg-chat-action-label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.pg-chat-action:hover .pg-chat-action-label,
.pg-chat-action:hover .pg-action-icon-svg { color: var(--ink-muted); }
.pg-chat-action .lp-step-chevron { color: var(--ink-faint); flex: 0 0 auto; transition: transform 0.15s; }
.pg-chat-action[aria-expanded="true"] .lp-step-chevron { transform: rotate(90deg); }

.pg-chat-action-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg-chat-action-json {
  /* inline-block (not the <pre> default of block) so the box shrinks to fit
     its own content instead of always stretching the row's full width — a
     one-line {"tool": "check_account"} call shouldn't render as wide as a
     multi-field search query. text-align:right on the ancestor .pg-chat-
     action-item then positions this shrunk box at the right edge, matching
     the trigger button above it. */
  display: inline-block;
  max-width: 100%;
  margin: 4px 4px 6px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.pg-json-key { color: #1D4ED8; }
.pg-json-string { color: #047857; }

.pg-bout-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}