diff --git a/packages/ui/src/components/reactions/reactions.tsx b/packages/ui/src/components/reactions/reactions.tsx
index 8e058c9a..0b7ec18a 100644
--- a/packages/ui/src/components/reactions/reactions.tsx
+++ b/packages/ui/src/components/reactions/reactions.tsx
@@ -99,12 +99,11 @@ function name(reaction: Event.Message.Reaction, me?: CurrentUser): string {
 const SIZE = {
 	wide: "w-14 px-2",
 	mid: "w-12 px-2",
-	pair: "w-9 px-1.5",
-	single: "size-5.5 p-0",
+	digit: "w-9 px-1.5",
 } as const;
 const STACK = {
-	right: { wide: "-mr-10", mid: "-mr-8", pair: "-mr-5", single: "-mr-2.5" },
-	left: { wide: "-ml-10", mid: "-ml-8", pair: "-ml-5", single: "-ml-2.5" },
+	right: { wide: "-mr-10", mid: "-mr-8", digit: "-mr-5" },
+	left: { wide: "-ml-10", mid: "-ml-8", digit: "-ml-5" },
 } as const;
 const SLIDE = {
 	right: "group-hover/reactions:mr-0.5 group-data-[popup-open]/reactions:mr-0.5",
@@ -114,8 +113,7 @@ const SLIDE = {
 function tier(count: number): keyof typeof SIZE {
 	if (count > 99) return "wide";
 	if (count > 9) return "mid";
-	if (count > 1) return "pair";
-	return "single";
+	return "digit";
 }
 
 function size(count: number): string {
@@ -178,9 +176,7 @@ function Reactions(
 							}
 						>
 							<EmojiGlyph emoji={emoji} />
-							{count > 1 && (
-								<span className="text-foreground/70 font-semibold tabular-nums">{count}</span>
-							)}
+							<span className="text-foreground/70 font-semibold tabular-nums">{count}</span>
 						</TooltipTrigger>
 						<TooltipContent>{reactors(users, currentUser)}</TooltipContent>
 					</Tooltip>
diff --git a/packages/ui/src/ui/emoji-picker.tsx b/packages/ui/src/ui/emoji-picker.tsx
index 3dd0332f..990f4e08 100644
--- a/packages/ui/src/ui/emoji-picker.tsx
+++ b/packages/ui/src/ui/emoji-picker.tsx
@@ -22,11 +22,16 @@ const TONES = [
 	{ emoji: "👋🏿", label: "Dark skin tone" },
 ] as const;
 
-/** Converts a CSS color value to an "R, G, B" triplet string for emoji-mart's --rgb-* vars. */
-function toRGB(color: string) {
+/**
+ * Paints CSS colors over each other into an "R, G, B" triplet for emoji-mart's --rgb-* vars, which
+ * take no alpha: a translucent token alone would read as its opaque base color.
+ */
+function toRGB(...colors: string[]) {
 	let ctx = document.createElement("canvas").getContext("2d")!;
-	ctx.fillStyle = color;
-	ctx.fillRect(0, 0, 1, 1);
+	for (let color of colors) {
+		ctx.fillStyle = color;
+		ctx.fillRect(0, 0, 1, 1);
+	}
 	let [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
 	return `${r}, ${g}, ${b}`;
 }
@@ -37,7 +42,7 @@ function resolveVars(el: HTMLElement) {
 	let get = (name: string) => s.getPropertyValue(name).trim();
 	return {
 		"--rgb-background": toRGB(get("--popover")),
-		"--rgb-input": toRGB(get("--input")),
+		"--rgb-input": toRGB(get("--popover"), get("--input")),
 		"--rgb-color": toRGB(get("--popover-foreground")),
 		"--rgb-accent": toRGB(get("--accent")),
 		"--color-border": get("--border"),