.item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 3.25rem;
	padding: 0 0.5rem;
	border-radius: var(--radius-md);
	background: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s;
	text-align: left;
}

.item:hover {
	background-color: var(--background-modifier-hover);
}

.itemSelected {
	/* 35% mix of the interactive-selected surface with transparent —
	   matches the Fluxer selection highlight on the DM sidebar, a
	   soft translucent wash that stays visible on top of the
	   secondary surface behind it. */
	background-color: color-mix(
		in srgb,
		var(--surface-interactive-selected-bg) 35%,
		transparent
	);
}

.itemSelected .name {
	color: var(--text-primary);
}

.info {
	flex: 1;
	min-width: 0;
}

.name {
	font-size: 1rem;
	font-weight: 500;
	color: var(--channel-icon);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item:hover .name {
	color: var(--interactive-hover);
}

.time {
	font-size: 0.75rem;
	color: var(--text-muted);
	flex-shrink: 0;
}
