/* css/chat-frame.css - the persona journey's "framed window" look. The middle panel
   becomes a SPARKS-SIX brand backdrop; the chat floats inside as a labelled window
   that keeps the AI-tool skin. So the brand owns the wrapper (top bar, timeline,
   backdrop) while the chat stays the person's tool - it reads as "SPARKS-SIX showing
   someone use their AI tool", not "this whole page is the tool". ?quiz=1 neutralises
   the frame (the snapshot is not a tool chat). ASCII dashes only. */

/* Brand the wrapper surfaces: re-point the generic tokens to --brand-* so the top bar
   and timeline adopt the SPARKS-SIX identity. The chat frame deliberately does NOT
   re-point, so the global skin tokens still apply inside it. --brand-* always resolve
   (brand.css defines them per [data-brand], which the theme A/B always assigns). */
.top-bar,
.left-panel {
  --bg:        var(--brand-bg);
  --bg-elev:   var(--brand-raised);
  --fg:        var(--brand-ink);
  --accent:    var(--brand-accent);
  --border:    var(--brand-line);
  --font-base: var(--brand-sans);
}

/* Middle panel = brand backdrop behind the floating window. */
.middle-panel {
  background: var(--brand-bg);
  background-image: var(--brand-glow);
  padding: 14px;
  align-items: center; /* centre the frame on the cross-axis (column flex) */
}

/* The chat window: keeps the AI-tool skin (no token re-point here). */
.chat-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  /* Two layers: a tight edge so the window reads as lifted even on the light
     Editorial paper backdrop (where frame bg ~= backdrop), plus a soft drop for
     depth. On dark Atelier the white frame already pops against the backdrop. */
  box-shadow: 0 2px 10px rgba(40, 34, 20, 0.07), 0 26px 64px -30px rgba(0, 0, 0, 0.5);
}

/* Window chrome: traffic-light dots + the person's tool name (set on scenario load). */
.chat-frame__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.chat-frame__dots { display: inline-flex; gap: 6px; }
.chat-frame__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.chat-frame__tool {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  opacity: 0.72;
}

/* The message list fills the frame (the frame is the centred column now). */
.chat-frame .message-list {
  max-width: none;
  margin-inline: 0;
  min-height: 0;
}

@media (max-width: 1023px) {
  .middle-panel { padding: 8px; }
  .chat-frame { border-radius: 12px; }
}

/* ?quiz=1 is the SPARKS-SIX snapshot, not a tool chat: drop the window chrome and the
   frame chrome so the quiz card sits directly on the brand backdrop as before. */
html[data-quiz="1"] .chat-frame__bar { display: none; }
html[data-quiz="1"] .chat-frame {
  max-width: 760px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-quiz="1"] .middle-panel { padding: 0; }