/* Slice 5: message threads, translations, notifications, buyouts. */
@layer components {
  .message-thread { display: grid; gap: var(--space-3); }
  .message { padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); max-inline-size: 42rem; min-inline-size: 0; }
  /* A long token (a tracking number) wraps instead of widening the thread past a phone screen; reset.css sets break-word on p. */
  .message, .message p { overflow-wrap: anywhere; }
  .message--mine { margin-inline-start: auto; background: var(--color-canvas); }
  .message__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin-block-end: var(--space-2); }
  .message__body p:last-child { margin-block-end: 0; }
  .message__voice-note audio { inline-size: 100%; margin-block: var(--space-2); }
  .message-form textarea { inline-size: 100%; }

  .contact-hidden { padding: 0 var(--space-1); border-radius: 0.25rem; background: var(--color-warning-bg); color: var(--color-warning); font-size: 0.9em; white-space: nowrap; }
  .translated__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-1) 0 0; font-size: 0.85rem; }

  .notification-list { list-style: none; padding: 0; margin: 0; }
  .notification { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--color-line); }
  .notification--unread .notification__link { font-weight: 600; }
  .notification__link { text-align: start; }
  .badge { display: inline-block; min-inline-size: 1.25rem; padding: 0 var(--space-1); border-radius: 999px; background: var(--color-brand); color: var(--color-brand-ink); font-size: 0.75rem; text-align: center; }

  .notice-bar--warning { background: var(--color-warning-bg); color: var(--color-warning); }

  .pill--flagged, .pill--payment_failed { background: var(--color-danger-bg); color: var(--color-danger); }
  .pill--dismissed, .pill--none { background: var(--color-canvas); color: var(--color-muted); }
  .pill--confirmed { background: var(--color-warning-bg); color: var(--color-warning); }
}