/*
 * chat-responses.css — the main app's side of the shared reply presentation
 * (static/js/components/response-renderer.js + css/components/response-renderer.css).
 *
 * response-renderer.css reads only --rr-* tokens; this maps them onto the main app's
 * theme tokens once. Every theme in css/themes/ defines --text-color, --text-secondary,
 * --bg-color, --bg-secondary, --border-color, --accent-color and --text-color-inv. The
 * --warning-border / --danger-border pair is missing from two themes (growthguru,
 * lightlavender), so both fall back to a colour derived from the theme's own text.
 */
body {
  --rr-text: var(--bubble-assistant-text, var(--text-color));
  --rr-muted: var(--text-secondary);
  --rr-surface: var(--bg-color);
  --rr-surface-2: var(--bg-secondary);
  --rr-border: var(--border-color);
  --rr-accent: var(--accent-color);
  --rr-on-accent: var(--text-color-inv);
  --rr-good: color-mix(in srgb, #1f9d6b 78%, var(--text-color));
  --rr-warn: var(--warning-border, color-mix(in srgb, #d9912f 82%, var(--text-color)));
  --rr-danger: var(--danger-border, color-mix(in srgb, #c0392b 82%, var(--text-color)));
}

/* Follow-up chips sit under the reply body, above the timestamp. */
.message.assistant > .rr-chips { margin: 10px 0 4px; }

/* A follow-up link the model left mid-text: an ordinary link that fills the input. */
.message.assistant .content a.follow-up-link {
  color: var(--accent-color); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* The first and last block of a reply sit flush with the bubble's padding. */
.message .content > .rr-callout:first-child,
.message .content > .rr-skeleton:first-child { margin-top: 0; }
.message .content > .rr-callout:last-child,
.message .content > .rr-skeleton:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .message.assistant > .rr-chips .rr-chip { font-size: 13px; padding: 7px 12px; }
}