/* Personal Notes — pinned row at the very top of the DM sidebar.
   Matches DMListItem's row dimensions (3.25rem height, 0.5rem
   horizontal padding) so the rounded square avatar + label sits
   flush with the rest of the DM list. The avatar is a brand-primary
   square (not a circle like regular DM avatars) to visually mark it
   as a special "pinned" slot, matching the Fluxer reference. */

.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;
	-webkit-tap-highlight-color: transparent;
}

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

.itemSelected {
	/* Same translucent wash DMListItem uses so selection reads as
	   consistent between the pinned row and the rest of the list. */
	background-color: color-mix(
		in srgb,
		var(--surface-interactive-selected-bg) 35%,
		transparent
	);
}

.icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* Default state matches the empty server-list icon in GuildList
	   (`--guild-list-foreground`) so a non-selected Personal Notes
	   row reads as a quiet neutral bubble. Selected state switches
	   to the brand color to match the active state of other DM
	   rows. */
	background-color: var(--guild-list-foreground);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.15s, color 0.15s;
}

.itemSelected .icon {
	background-color: var(--brand-primary);
	color: #fff;
}

.label {
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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