/* Shared visual tokens for chat / design messages and layout.
   Keep comments ASCII-only. Prefer these variables over magic numbers. */

:root {
    --msg-max-width: min(80%, 560px);
    --msg-user-padding: 11px 15px;
    --msg-user-radius: 20px;
    /* Elevated cool surface so user bubbles lift off the page canvas. */
    --msg-user-bg: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary));
    --msg-user-fg: var(--text-primary);
    --msg-user-border: color-mix(in srgb, var(--accent) 28%, var(--border));
    /* AI body reads as primary document text; meta stays muted. */
    --msg-ai-fg: var(--text-primary);
    --msg-ai-muted: var(--text-secondary);
    --msg-thread-max-width: min(780px, 100%);
    --msg-thread-gap: 20px;
}

[data-theme="light"] {
    --msg-user-bg: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
    --msg-user-fg: var(--text-primary);
    --msg-user-border: color-mix(in srgb, var(--accent) 22%, var(--border));
    --msg-ai-fg: var(--text-primary);
    --msg-ai-muted: var(--text-secondary);
}