/* The picker keeps its heading and expansion action visible while one foreground body owns touch scrolling. */
#memberPickerDialog {
  max-height: min(84vh, 680px);
  max-height: min(88dvh, 680px);
}

#memberPickerDialog[open] {
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.member-picker-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

#recommendedMembers {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#memberPickerDialog > .dialog-head,
#memberPickerDialog > .picker-expand {
  flex: 0 0 auto;
}

#memberPickerDialog > .picker-expand {
  margin-top: 12px;
}

@media (max-width: 420px) {
  #memberPickerDialog {
    max-height: 84vh;
    max-height: 88dvh;
  }
}