.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-bottom: var(--spacing-2);
	width: 100%;
}

.guildItem {
	position: relative;
	display: flex;
	height: 48px;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: calc((48px - var(--guild-icon-size)) / 2);
	box-sizing: border-box;
}

.guildIcon {
	width: var(--guild-icon-size);
	height: var(--guild-icon-size);
	border-radius: var(--radius-full);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-radius 70ms ease-out, background-color 70ms ease-out, color 70ms ease-out;
	background-color: var(--guild-list-foreground);
	color: var(--text-primary);
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	font-weight: 600;
	font-size: 1.25rem;
	background-size: cover;
	background-position: center;
	container-type: size;
}

.guildIcon:hover {
	border-radius: 30%;
	background-color: var(--brand-primary);
	color: #fff;
}

.guildIcon.selected {
	border-radius: 30%;
	background-color: var(--brand-primary);
	color: #fff;
}

.homeIcon {
	background-color: var(--guild-list-foreground);
	color: var(--text-primary);
}

.homeIcon:hover,
.homeIcon.selected {
	background-color: var(--brand-primary);
	color: #fff;
}

.guildImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guildInitials {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1;
	color: inherit;
	font-weight: 600;
	font-size: clamp(0.85rem, 45cqi, 1.35rem);
	letter-spacing: 0.06em;
	user-select: none;
}

.addServer {
	border-radius: var(--radius-full);
	border: 2px dashed var(--background-modifier-accent);
	background-color: transparent;
	color: var(--text-primary);
	transition: border-radius 70ms ease-out, border-color 70ms ease-out;
}

.addServer:hover {
	border-color: var(--text-primary);
	border-radius: 30%;
	background-color: transparent;
	color: var(--text-primary);
}

.divider {
	width: 2rem;
	height: 0.125rem;
	background-color: var(--background-modifier-hover);
	border-radius: 1px;
	flex-shrink: 0;
	margin-top: 6px;
	margin-bottom: 6px;
}

/* Guild selection indicator — left pill */
.guildIndicator {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 0.5rem;
	pointer-events: none;
}

.guildIndicatorBar {
	display: block;
	width: 0.3rem;
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
	background-color: var(--text-primary);
}

/* Show a small indicator on hover for unselected items */
.guildItem:hover .guildIndicatorBar {
	height: 20px !important;
}

/* Unread / pending count badge overlaid on a guild icon. Currently
   used on the DM home bubble to surface pending stranger DMs, but
   the class is generic enough to drop onto any server icon later
   (e.g. for unread counts). Positioned at the bottom-right corner
   of the 48px guildItem so it hangs off the icon edge, with a
   border cut-out from the sidebar background so it reads cleanly
   against darker icons. */
.guildBadge {
	position: absolute;
	bottom: -4px;
	right: 4px;
	box-sizing: border-box;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Rounded square, not pill — matches the Fluxer server-list
	   badge treatment. The outer 3px ring is drawn as a box-shadow
	   instead of a border so it doesn't affect the badge's hitbox
	   or layout calculations. The --guild-badge-surface custom
	   property lets future theming override the cut-out color. */
	border-radius: var(--radius-md);
	background-color: var(--status-danger);
	box-shadow: 0 0 0 3px var(--guild-badge-surface, var(--background-secondary));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
	z-index: 1;
}
