/*
 * панель выбора пользователей: табы + поиск + подгружаемый список.
 * Используется панелью "Пригласить подписчиков" в /rooms/ и панелью пересылки в личке.
 * Позиционирование самой шторки остаётся у страницы (см. .room_invite_followers_panel в rooms.css)
 */
.members_panel__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: 8px 15px;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__title {
	font-size: 16px;
	font-weight: 500;
}
.members_panel__close {
	border: none;
	background: none;
	font-size: 35px;
	line-height: 1;
	cursor: pointer;
}
.members_panel__tabs {
	display: flex;
	flex-shrink: 0;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__tab {
	flex: 1;
	text-align: center;
	padding: 8px 0;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 500;
	color: #888D9A;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.members_panel__tab__active {
	color: #3B82F6;
	border-bottom-color: #3B82F6;
}
/* 4 таба с длинными подписями ("Пользователи"/"Сотрудники") не влезают равными
   долями в 360px, текст переносится и табы визуально слипаются - как и
   .rooms_header__tabs выше, на мобильном даём табам собственную ширину
   и прячем излишек в горизонтальный скролл вместо переноса */
.body__mobile .members_panel__tabs {
	overflow-x: auto;
}
.body__mobile .members_panel__tab {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 8px 10px;
	font-size: 13px;
}
.members_panel__search {
	flex-shrink: 0;
	padding: 10px 15px;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__search_input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #EFF1F4;
	border-radius: 8px;
	font-size: 14px;
	outline: none;
}
.members_panel__search_input:focus {
	border-color: #3B82F6;
}
.members_panel__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 15px 10px;
}
.members_panel__empty {
	padding: 20px 0;
	text-align: center;
	color: #888D9A;
	font-size: 14px;
}
.members_panel__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 0;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.members_panel__name {
	flex: 1;
	font-size: 14px;
}
.members_panel__city {
	font-size: 12px;
	color: #888D9A;
}
.members_panel__banner {
	flex-shrink: 0;
	padding: 8px 15px;
	font-size: 13px;
	color: #888D9A;
	border-bottom: 1px solid #EFF1F4;
}
.members_panel__load_more {
	flex-shrink: 0;
	margin: 10px 15px;
	width: calc(100% - 30px);
}