/* ChatsPage — two-pane chat shell (sidebar list + open conversation).
   `.ag-chat-shell`, `.ag-chat-list`, `.ag-chat-item*`, `.ag-avatar*`,
   `.ag-badge`, `.ag-alert*`, `.ag-search*`, `.ag-empty-state*` all come
   from argentum-ui.css — only page-level layout wrappers and the local
   avatar palette (that base kit does not assign one of its own) live
   here. */

.ag-chats__toolbar {
  display: flex;
  align-items: center;
  gap: var(--ag-space-2);
  padding: var(--ag-space-3);
}

.ag-chats__refresh {
  margin: 0 var(--ag-space-3) var(--ag-space-2);
}

/* `.ag-chat-list` sizes to its own content by default — this is the one
   layout decision specific to using it inside a flex-column sidebar that
   also holds the toolbar/refresh rows above it: let it fill and scroll
   the remaining height instead of pushing the sidebar taller than the
   viewport. */
.ag-chat-shell__sidebar .ag-chat-list {
  flex: 1 1 auto;
  min-height: 0;
}

.ag-chats__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);
}

/* Centres the "pick a chat" empty state in the main pane instead of
   leaving it pinned to the top. */
.ag-chat-shell__main .ag-empty-state {
  flex: 1;
  justify-content: center;
  padding: var(--ag-space-6);
}

/* Deterministic per-peer palette — the same literal values
   `storiespage.css`/`messageviewpage.css` use (ported, not shared: no
   page shares a CSS file with another), 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);
}