/* portal-messages: styles owned by the Messages screen. Tokens and base components are in portal.css;
   the change request list (.requests, .request, .badge-progress, .badge-declined) is in portal-review.css. */

.msg-jump { margin: -12px 0 28px; color: var(--muted); }

/* The conversation: theirs on the right, ours on the left. Plain boxes, no motion. */
.thread { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.msg { min-width: 0; max-width: min(88%, 36rem); padding: 12px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); scroll-margin-top: 16px; }
.msg-you { justify-self: end; background: var(--card-2); border-color: color-mix(in srgb, var(--spark) 30%, var(--line)); border-bottom-right-radius: 4px; }
.msg-studio { justify-self: start; border-bottom-left-radius: 4px; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.msg-who { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.msg-studio .msg-who { color: var(--accent-text); }
.msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-empty { margin: 0 0 20px; }

/* The reply box and Ask for a change */
.msg-flash { margin: 0 0 20px; }
.msg-form, .msg-changes { scroll-margin-top: 16px; }
.msg-requests { margin-top: 28px; }
.msg-requests h3 { margin-bottom: 12px; }