.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--background-secondary);
}

/* ── Header ─────────────────────────────────────────────────────────
   "Messages" title on the left, search icon + "Add Friends" pill
   button on the right. Replaces the old full-width search input with
   a layout that matches the Fluxer mobile DM home view. */

.header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px;
	flex-shrink: 0;
}

.headerTitle {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.headerActions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.iconButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background-color: var(--guild-list-foreground);
	color: var(--text-primary);
	cursor: pointer;
	transition: filter 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.iconButton:hover,
.iconButton:active {
	filter: brightness(1.15);
}

.addFriendsButton {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background-color: var(--guild-list-foreground);
	border: none;
	border-radius: 999px;
	color: var(--text-primary);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.addFriendsButton:hover,
.addFriendsButton:active {
	filter: brightness(1.15);
}

/* Red pending-request badge in the top-right corner of the button,
   same style as the navbar unread dot. Hidden when count is 0 —
   we simply don't render the element in JSX. */
.badge {
	position: absolute;
	top: -6px;
	right: -6px;
	box-sizing: border-box;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Perfect circle for single-digit counts (min-width == height),
	   stretches horizontally into a rounded pill for "99+". The
	   full radius keeps both ends fully round at any width. */
	border-radius: var(--radius-full);
	background-color: var(--status-danger);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* ── List ───────────────────────────────────────────────────────────*/

.list {
	flex: 1;
	overflow-y: auto;
	padding: 0 0.5rem;
}

.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--text-muted);
	font-size: 0.875rem;
}
