/* ==========================================================================
   Playground — layout only. Every colour, radius, spacing step and control
   here is a design-system token; this file exists for the one shape the
   system has no component for: a three-pane console (settings / chat /
   code) that collapses to one column, and the chat transcript inside it.
   ========================================================================== */

/* ── Three-pane grid ──────────────────────────────────────────────────────
   Single column until the app breakpoint (62rem, matching .app / .docs
   elsewhere in this codebase), three columns above it: a fixed-width rail,
   a flexible transcript, a fixed-width code panel.
   ──────────────────────────────────────────────────────────────────────── */

.pg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 62rem) {
  .pg-layout { grid-template-columns: 18rem minmax(0, 1fr) 22rem; }
}

.pg-rail, .pg-chat, .pg-code { min-inline-size: 0; }

/* Skeleton placeholders while the model catalogue loads. */
.pg-skel-field { block-size: var(--h-md); border-radius: var(--r-md); }
.pg-skel-pane { block-size: 24rem; border-radius: var(--r-md); }

/* ── Rail ─────────────────────────────────────────────────────────────── */

.pg-rail__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.pg-rail__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* ── Conversation pane ────────────────────────────────────────────────── */

.pg-chat { display: flex; flex-direction: column; min-block-size: 30rem; }
.pg-chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-block-size: 22rem;
  max-block-size: 62vh;
}
.pg-chat__composer {
  flex-shrink: 0;
  border-block-start: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: var(--s-4) var(--s-5);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* One message. Bubbles align to the side that reads as "sent" in the
   current direction — inline-end for the caller, inline-start for the
   model — using logical properties so RTL flips it for free. */
.pg-msg { display: flex; flex-direction: column; gap: var(--s-2); max-inline-size: 88%; }
.pg-msg--user { align-self: flex-end; align-items: flex-end; }
.pg-msg--assistant, .pg-msg--error { align-self: flex-start; align-items: flex-start; }

.pg-msg__role {
  font-size: var(--fs-3xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.pg-msg__bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-inline-size: 100%;
}
.pg-msg--user .pg-msg__bubble {
  background: var(--accent-soft); color: var(--accent-soft-fg);
  border-end-end-radius: var(--r-sm);
}
.pg-msg--assistant .pg-msg__bubble {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-end-start-radius: var(--r-sm);
}
.pg-msg--error .pg-msg__bubble { padding: 0; background: none; border: 0; inline-size: 100%; }
.pg-msg__image {
  max-inline-size: 14rem; max-block-size: 14rem; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border);
}
.pg-msg__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--fs-3xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* The streaming caret: a small block that blinks after the last character
   arrived so far, so a slow first token still reads as "working" rather
   than "stuck". Removed the instant the stream ends. */
.pg-caret {
  display: inline-block; inline-size: 0.5em; block-size: 1em;
  margin-inline-start: 1px; vertical-align: text-bottom;
  background: currentColor; animation: pg-blink 1s step-end infinite;
}
@keyframes pg-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-caret { animation: none; opacity: 0.6; } }

/* ── Composer ─────────────────────────────────────────────────────────── */

.pg-attachments { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-composer__row { display: flex; align-items: flex-end; gap: var(--s-3); }
.pg-composer__input { flex: 1 1 auto; min-inline-size: 0; }
.pg-composer__tools { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ── Code pane ────────────────────────────────────────────────────────── */

.pg-code .card__head { align-items: center; }