/* ── Member List — matches Fluxer ─────────────────────────────────────── */

.container {
	width: var(--layout-member-list-width);
	min-width: var(--layout-member-list-width);
	background-color: var(--background-secondary-lighter);
	overflow-y: auto;
	padding-top: 0.625rem;
	padding-left: var(--spacing-2);
	padding-right: var(--spacing-2);
	padding-bottom: var(--spacing-4);
	/* Hide the scrollbar but keep wheel + drag scrolling so the
	   member list stays clean against the lighter sidebar surface. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.container::-webkit-scrollbar {
	display: none;
}

/* Fallback for tablet/narrow viewports — the useIsNarrowScreen hook in
   ChannelView.tsx already prevents the panel from rendering below
   1024px, but this CSS-only guard ensures that if it ever does leak
   into the DOM (e.g. a different surface, drawer variant excluded) it
   won't squish the chat column on a narrow window. The drawer variant
   is explicitly opted back in because it intentionally displays inside
   a mobile sheet. */
@media (max-width: 1024px) {
	.container:not(.containerDrawer) {
		display: none;
	}
}

/* Drawer variant — used inside ChannelDetailsDrawer on mobile. Removes
   the panel background and width constraint, then wraps each section's
   member list in a rounded `--background-secondary-alt` card so the
   layout matches the Fluxer mobile reference screenshot. */

.containerDrawer {
	width: 100%;
	min-width: 0;
	background-color: transparent;
	overflow-y: visible;
	padding: 0;
}

.containerDrawer .section + .section {
	margin-top: 0.75rem;
}

.containerDrawer .sectionHeader {
	padding: 0 0.25rem 0.5rem;
}

.containerDrawer .membersList {
	background-color: var(--background-secondary-alt);
	border-radius: 0.75rem;
	padding: 0;
	gap: 0;
}

.containerDrawer .memberItem {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
}

/* Drawer variant uses a 40px avatar, so the default 32px fixed row
   height clips it. Zero the grid padding (the parent .memberItem
   already owns horizontal/vertical padding) and let the row grow
   to fit the avatar naturally. */
.containerDrawer .memberGrid {
	height: auto;
	padding: 0;
}

/* ── Section / Group ─────────────────────────────────────────────────── */

.section {
	display: flex;
	flex-direction: column;
}

.section + .section {
	margin-top: 0.25rem;
}

.sectionHeader {
	display: flex;
	align-items: flex-end;
	gap: 0.375rem;
	padding: 0.75rem 0.5rem 0.25rem;
	box-sizing: border-box;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1rem;
	color: var(--text-primary-muted);
}

.sectionLabel {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sectionCount {
	flex-shrink: 0;
}

/* ── Member Item ─────────────────────────────────────────────────────── */

.membersList {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.memberItem {
	position: relative;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	border-radius: 0.375rem;
	color: var(--text-chat, var(--text-secondary));
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	font-family: inherit;
	transition: background-color 0.15s;
}

.memberItem:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

.memberItemOffline {
	opacity: 0.3;
}

.memberItemOffline:hover {
	opacity: 1;
}

.memberGrid {
	display: grid;
	height: 32px;
	min-width: 0;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.25rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.memberContent {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 0.625rem;
	font-weight: 500;
}

.memberAvatar {
	flex-shrink: 0;
}

.memberInfo {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	flex-grow: 1;
}

.memberName {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.25rem;
	max-height: 1.25rem;
	color: inherit;
}

.crownIcon {
	flex-shrink: 0;
	color: hsl(39, 57%, 64%);
}

.memberItem:hover .memberName {
	color: var(--text-primary);
}

.memberStatus {
	max-width: 100%;
	color: var(--text-primary-muted);
	font-size: 0.6875rem;
	line-height: 0.875rem;
	font-weight: 500;
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
