.choose-participants-modal {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 16px 0;
  border-radius: 32px 32px 0 0;
  background-color: var(--background-fade-scrim);
  transition: transform var(--transition-standard);
}

/* Figma has no gap here — the title row's own 32px bottom padding is the
   entire space before the search/select-all box, and the scrollable
   content's first section-header supplies its own 40px top padding as the
   only space after it. A blanket flex `gap` would double up with both. */
.choose-participants-modal > .modal-title-row {
  margin-bottom: 32px;
}

/* margin-right cancels the parent's 12px inset so this box's own right edge
   (where the scrollbar paints) reaches the modal's true edge instead of
   sitting 12px in from it; padding-right puts that same 12px back as space
   between the scrollbar and the actual content, so the content itself stays
   at the same visual inset as everything else while the scrollbar moves to
   the other side of it. */
.choose-participants-modal__content {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-right: -16px;
  padding-right: 16px;
  padding-bottom: 24px;
  overflow-x: hidden;
  overflow-y: auto;
}