.body {
	display: flex;
	gap: 12px;
	min-height: 320px;
	max-height: 480px;
	padding: 4px 4px 16px;
}

/* ── Emoji column ───────────────────────────────────────────── */

.emojiColumn {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 96px;
	flex-shrink: 0;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
}

.emojiChip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: var(--background-tertiary);
	color: var(--text-primary);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.1s, border-color 0.1s;
}

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

.emojiChipActive {
	background-color: var(--background-modifier-selected, var(--background-modifier-hover));
	border-color: var(--brand-primary, #5865f2);
}

.emojiChipImage {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.emojiCount {
	color: var(--text-secondary);
}

/* ── Users column ───────────────────────────────────────────── */

.usersColumn {
	flex: 1;
	min-width: 0;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--background-tertiary);
	overflow-y: auto;
	scrollbar-width: thin;
}

.userRow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	transition: background-color 0.1s;
}

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

.userAvatar {
	flex-shrink: 0;
}

.userMeta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.userDisplayName {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.userTag {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.removeButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--text-tertiary);
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s;
	flex-shrink: 0;
}

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