/* agent/_message.html.erb — Figma active chat (137:4243).
 *
 * User messages are right-aligned surface-1 bubbles; assistant replies are
 * full-width prose (no bubble, no avatar) with grey body and primary headings. */

/* ---- Documentor notification (centered, muted) ---- */
.message-documentor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding-block: var(--spacing-8);
}

.message-documentor-icon {
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--symbol-default);
}

.message-documentor-button,
.message-documentor-text {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
}
.message-documentor-button:hover { color: var(--text-primary); }

.message-documentor-download {
  color: var(--symbol-default);

  &:hover { color: var(--text-primary); }
}

.message-documentor-download-icon {
  width: var(--spacing-16);
  height: var(--spacing-16);
}

/* ---- User message — right-aligned bubble ---- */
.message-user {
  display: flex;
  justify-content: flex-end;
}

.message-user-bubble {
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-xs);
  padding: var(--spacing-12);
  max-width: 30rem; /* Note: Figma user chat box = 480px */
}

.message-user-text {
  white-space: pre-wrap;
  font-size: var(--font-size-16);
  line-height: 1.25;
  color: var(--text-primary);
}

/* ---- Assistant message — full-width prose ---- */
/* `.prose` (gem) sets the base color to text-primary; the chat reply uses a
   grey body with primary headings/bold. Loaded after the gem, so this wins. */
.message-assistant {
  padding: var(--spacing-12);
  color: var(--text-secondary);
}
.message-assistant :is(h1, h2, h3, h4) { color: var(--text-primary); }
.message-assistant strong { color: var(--text-primary); }