/* MessageViewPage — one open conversation (header, message list,
   composer). `.ag-chat-header*`, `.ag-msg*`, `.ag-msg-group*`,
   `.ag-msg-ticks`, `.ag-reactions`, `.ag-reaction-chip*`,
   `.ag-reply-preview*`, `.ag-composer*`, `.ag-avatar*`, `.ag-alert*` all
   come from argentum-ui.css — only page-level layout wrappers, the
   photo/media placeholders (this design system has no generic one), and
   the local avatar palette live here. */

.ag-message-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.ag-message-view__list {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ag-space-4);
}

.ag-message-view__older {
  display: flex;
  justify-content: center;
  padding-block: var(--ag-space-1);
}

.ag-message-view__status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--ag-space-6);
  color: var(--ag-text-subtle);
  font-size: var(--ag-text-sm);
}

.ag-message-view__photo {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border-radius: var(--ag-radius-md);
}

.ag-message-view__photo--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 8rem;
  background: var(--ag-surface-sunken);
  color: var(--ag-text-subtle);
  font-size: var(--ag-text-sm);
}

.ag-message-view__media-placeholder {
  padding-block: var(--ag-space-1);
  color: var(--ag-text-muted);
  font-size: var(--ag-text-sm);
  font-style: italic;
}

.ag-message-view__error {
  margin: 0 var(--ag-space-4);
}

/* Same deterministic per-peer palette `chatspage.css`/`storiespage.css`
   use — ported here, not shared, so a peer's avatar reads with the same
   colour on every page. */
.avatar-color-0 {
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}

.avatar-color-1 {
  background: linear-gradient(135deg, #f7b733, #fc4a1a);
}

.avatar-color-2 {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.avatar-color-3 {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}

.avatar-color-4 {
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

.avatar-color-5 {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.avatar-color-6 {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.avatar-color-7 {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}