/* Post reactions — a row of small emoji buttons in the post footer, next to
   Quote/Reply. Sized to sit inline in .post-content__footer (12px context)
   without adding any height to the post card — no wrapping, no separate row. */

.post-reactions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

.post-reaction-btn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: transparent;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
	color: var(--muted);
	transition: background 0.1s ease, border-color 0.1s ease, transform 0.15s ease;
}

.post-reaction-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* Deliberately more than a tint here — a first pass at this used a subtle
   16%-opacity background and it read as "did that even register?" at a
   glance. A solid fill plus a brief pop on the click itself (see .just-set
   below) is meant to be unmissable without adding any height. */
.post-reaction-btn.active {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--maroon-dark);
	font-weight: 600;
}

.post-reaction-btn.just-set { animation: post-reaction-pop 0.25s ease; }

@keyframes post-reaction-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.post-reaction-count { font-size: 10px; font-weight: 700; }

/* Below ~480px the footer already stacks (see the .post-card mobile block
   further down this file) — trim the padding a touch so five buttons don't
   crowd a narrow phone screen. */
@media (max-width: 480px) {
	.post-reaction-btn { padding: 1px 5px; font-size: 12px; }
}