:root {
  --message-user-gap: var(--space-2);
  --message-assistant-gap: var(--message-user-gap);
  --message-user-font: var(--font-type-body-large);
  --message-assistant-font: var(--message-user-font);
  --message-user-metadata-font: var(--font-type-caption);
  --message-assistant-metadata-font: var(--message-user-metadata-font);
  --message-title-font: var(--font-type-heading-small);
  --message-copy-font: var(--font-type-label-small-strong);
  --message-transparent-surface: var(--color-clear);
  --message-user-body-background: var(--color-identity-surface);
  --message-user-body-padding: var(--space-4) var(--space-5);
  --message-user-body-radius: var(--radius-14);
  --message-user-body-width: var(--size-560);
  --message-assistant-width: var(--size-760);
  --message-assistant-padding: var(--message-user-body-padding);
  --message-assistant-radius: var(--message-user-body-radius);
  --message-assistant-border: var(--control-border-width) solid var(--color-border);
  --message-content-gap: var(--space-3);
  --message-metadata-gap: var(--space-1);
  --message-attachment-gap: var(--space-2);
  --message-code-font: var(--font-type-code);
  --message-code-padding: var(--space-3);
  --message-code-radius: var(--radius-8);
  --message-code-border: var(--control-border-width) solid var(--color-border);
  --message-list-indent: var(--space-6);
  --message-quote-border: var(--space-0-75) solid var(--color-border);
  --message-quote-inset: var(--space-4);
}

.chat-message {
  --message-gap: var(--message-user-gap);
  --message-font: var(--message-user-font);
  --message-metadata-font: var(--message-user-metadata-font);
  --message-align: flex-end;
  --message-width: 100%;
  --message-background: var(--message-transparent-surface);
  --message-padding: 0;
  --message-border: 0;
  --message-radius: 0;
  --message-body-width: var(--message-user-body-width);
  --message-body-background: var(--message-user-body-background);
  --message-body-padding: var(--message-user-body-padding);
  --message-body-radius: var(--message-user-body-radius);
  --message-body-border: 0;
  --message-metadata-order: 3;
  --message-attachments-order: 1;
}

.chat-message--assistant {
  --message-gap: var(--message-assistant-gap);
  --message-font: var(--message-assistant-font);
  --message-metadata-font: var(--message-assistant-metadata-font);
  --message-align: flex-start;
  --message-body-width: var(--message-assistant-width);
  --message-body-background: var(--color-surface);
  --message-body-padding: var(--message-assistant-padding);
  --message-body-radius: var(--message-assistant-radius);
  --message-body-border: var(--message-assistant-border);
}

.chat-message {
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: var(--message-align);
  gap: var(--message-gap);
  inline-size: var(--message-width);
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: var(--message-padding);
  border: var(--message-border);
  border-radius: var(--message-radius);
  background: var(--message-background);
  color: var(--color-surface-foreground);
  font: var(--message-font);
  overflow-wrap: anywhere;
}

.chat-message__metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--message-metadata-gap);
  order: var(--message-metadata-order);
  max-inline-size: 100%;
  color: var(--color-muted-foreground);
  font: var(--message-metadata-font);
}

.chat-message__body {
  box-sizing: border-box;
  display: grid;
  gap: var(--message-content-gap);
  order: 2;
  grid-template-columns: minmax(0, 1fr);
  inline-size: fit-content;
  max-inline-size: min(100%, var(--message-body-width));
  padding: var(--message-body-padding);
  border: var(--message-body-border);
  border-radius: var(--message-body-radius);
  background: var(--message-body-background);
}
.chat-message--user > .chat-message__body { color: var(--color-identity-foreground); }
.chat-message__title { margin: 0; font: var(--message-title-font); white-space: pre-wrap; }
.chat-message__text { margin: 0; font: inherit; white-space: pre-wrap; }
.chat-message__attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--message-align);
  gap: var(--message-attachment-gap);
  order: var(--message-attachments-order);
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-message__attachments > li { display: block; min-inline-size: 0; max-inline-size: 100%; }

.chat-message__markdown { min-inline-size: 0; font: inherit; overflow-wrap: anywhere; }
.chat-message__markdown .markdown-fallback { white-space: pre-wrap; }
/* One-direction flow keeps earlier blocks stable when streamed blocks append. */
.chat-message__markdown :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table) { margin-block: 0; }
.chat-message__markdown > * + *,
.chat-message__markdown :is(li, blockquote) > * + * { margin-block-start: var(--message-content-gap); }
.chat-message__markdown :is(h1, h2, h3, h4, h5, h6) { font: var(--message-title-font); letter-spacing: normal; }
.chat-message__markdown :is(ul, ol) { padding-inline-start: var(--message-list-indent); }
.chat-message__markdown blockquote { margin-inline: 0; border-inline-start: var(--message-quote-border); padding-inline-start: var(--message-quote-inset); }
.chat-message__markdown :is(pre, table) { display: block; max-inline-size: 100%; overflow: auto; }
.chat-message__markdown table { border-collapse: collapse; }
.chat-message__markdown pre {
  padding: var(--message-code-padding);
  border-radius: var(--message-code-radius);
  background: var(--color-muted);
  font: var(--message-code-font);
  white-space: pre;
  overflow-wrap: normal;
}
.chat-message__markdown code { background: var(--color-muted); color: var(--color-foreground); font: var(--message-code-font); }
.chat-message__markdown pre code { padding: 0; overflow-wrap: normal; }
.chat-message__markdown :is(th, td) { border: var(--message-code-border); padding: var(--message-code-padding); text-align: start; }
.chat-message__markdown a { color: var(--color-link); }
.chat-message__markdown .copy-code { --button-foreground: var(--color-link); --button-font: var(--message-copy-font); }