/* What the room puts in the ds-panel-header: the avatar's link, the thread's way back to its room and the room's own buttons. */
.chat-room-header__face { display: inline-grid; flex-shrink: 0; border-radius: var(--ds-radius-full); text-decoration: none; }
.chat-room-header__parent { color: inherit; text-decoration: none; }
.chat-room-header__parent:hover { color: var(--ds-link); text-decoration: underline; }
.chat-room-header__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--ds-space-1); }

.chat-room-header__members {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px var(--ds-space-2) 2px 2px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill);
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
}

.chat-room-header__members:hover { background: var(--ds-fill-hover); }
.chat-room-header__members:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

/* v5: the icon circles are empty, so the space a person sees is between glyphs: the circles touch (16 px between
   16 px glyphs in 32 px circles), and the members pill keeps the same 16 px to the first glyph. */
:where(html[data-visual="v5"]) .chat-room-header__actions { gap: 0; }
:where(html[data-visual="v5"]) .chat-room-header__members { margin-inline-end: 8px; }

.chat-room__latest { position: absolute; inset-block-end: var(--ds-space-3); inset-inline-start: 50%; z-index: 20; translate: -50% 0; background: var(--ds-bg-pure); }
.chat-room__latest[hidden] { display: none; }

/* A group open to everyone has no one to pick: the picker only shows while "Só quem eu escolher" is checked. */
.chat-group-form:has(input[name="room[access]"][value="open"]:checked) .chat-group-form__members { display: none; }

.chat-stats { display: flex; flex-direction: column; gap: var(--ds-space-8); }
.chat-stats .ds-section-label { margin-block-end: var(--ds-space-2); }

/* The ds_loader a paging list shows above or below while the next page is on its way. */
.chat-page-loader { display: flex; justify-content: center; padding-block: var(--ds-space-3); }