/* Shared v2 patterns, specced once and reused across surfaces.
   Segmented control: forum filters, activity tabs, member status, room
   settings tabs. List row: DM list, members, browse, activity, bookmarks. */

/* --- segmented control ------------------------------------------------ */
.segmented-control {
  align-items: center;
  background-color: var(--color-border);
  border-radius: var(--border-radius-pill);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.segmented-control__btn {
  border-radius: var(--border-radius-pill);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 14px;
  text-decoration: none;
  white-space: nowrap;

  @media (any-hover: hover) {
    &:where(:not(.segmented-control__btn--active, [aria-selected="true"])):hover {
      color: var(--color-text);
    }
  }
}

/* Selected state: by class, or by aria-selected for JS-driven controls
   (theme picker) */
.segmented-control__btn--active,
.segmented-control .segmented-control__btn[aria-selected="true"] {
  background-color: var(--color-bg);
  box-shadow: var(--shadow-raise);
  color: var(--color-text);
}

/* --- list row ---------------------------------------------------------- */
/* One rhythm for every people/room list: 32px avatar, 11px gap, title over
   subtitle, optional trailing control, hairline divider that skips the last
   row. */
.list-row {
  align-items: center;
  border-block-end: 1px solid var(--color-border);
  color: inherit;
  display: flex;
  gap: 11px;
  padding: 11px 15px;
  text-decoration: none;

  &:last-child {
    border-block-end: 0;
  }
}

a.list-row,
button.list-row {
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

.list-row__avatar {
  --avatar-size: 32px;

  flex: none;
}

.list-row__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-inline-size: 0;
}

.list-row__title {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__subtitle {
  color: var(--color-text-subtle);
  font-size: 0.78125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__trailing {
  flex: none;
  margin-inline-start: auto;
}

/* --- empty state ------------------------------------------------------- */
/* No illustration. The heading is the fact, the sentence is the cause or the
   fix, and the action appears only when there is something to press. Every
   "nothing here yet" surface shares this — rooms, forums, inboxes, search,
   members, browse. The parent supplies the centering context (a tall
   message-area or a bordered card); this owns the inner rhythm. */
.empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 64px 24px;
  text-align: center;
}

.empty-state__title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.empty-state__body {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  max-inline-size: 34ch;
}

.empty-state__action {
  margin-block-start: 14px;
}

/* A full-page host for an empty state that owns the whole content area (a
   styled 403, say) rather than sitting inside a card or message list. */
.empty-state-page {
  display: grid;
  min-block-size: 72vh;
  place-content: center;
}