/* ===== Announcement emoji reactions ===== */
:root {
	--ann-react-bg: #f1f4f8;
	--ann-react-pill-bg: #e3e8ef;
	--ann-react-pill-text: #475569;
	--ann-react-pill-hover: #d5dce6;
	--ann-react-active-bg: rgba(13, 170, 127, 0.14);
	--ann-react-active-text: #067a5c;
	--ann-react-active-border: rgba(13, 170, 127, 0.38);
	--ann-react-add-bg: #e3e8ef;
	--ann-react-add-text: #64748b;
	--ann-react-add-hover-bg: #d5dce6;
	--ann-react-add-hover-text: #334155;
	--ann-react-divider: rgba(15, 23, 42, 0.1);
	--ann-react-hint: #94a3b8;
	--ann-react-pick-bg: #e8ecf2;
	--ann-react-pick-hover: #d5dce6;
}
.dark_mode {
	--ann-react-bg: #213743;
	--ann-react-pill-bg: rgba(255, 255, 255, 0.08);
	--ann-react-pill-text: #b8c9d4;
	--ann-react-pill-hover: rgba(255, 255, 255, 0.13);
	--ann-react-active-bg: rgba(13, 170, 127, 0.24);
	--ann-react-active-text: #7ddeb8;
	--ann-react-active-border: rgba(13, 170, 127, 0.5);
	--ann-react-add-bg: rgba(255, 255, 255, 0.08);
	--ann-react-add-text: #8fa3b0;
	--ann-react-add-hover-bg: rgba(255, 255, 255, 0.14);
	--ann-react-add-hover-text: #c5d4dc;
	--ann-react-divider: rgba(255, 255, 255, 0.1);
	--ann-react-hint: #7d919e;
	--ann-react-pick-bg: rgba(255, 255, 255, 0.06);
	--ann-react-pick-hover: rgba(255, 255, 255, 0.12);
}
/* ===== Announcement emoji reactions ===== */
.announcement-view-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--ann-react-pill-bg);
	color: var(--ann-react-pill-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	margin-right: 2px;
}

.announcement-view-count .fa-eye {
	font-size: 11px;
	opacity: 0.85;
}

.announcement-view-count__num {
	min-width: 10px;
	text-align: center;
}

.announcement-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	padding: 8px 10px;
	background: var(--ann-react-bg);
	border: 1px solid var(--ann-react-divider);
	border-radius: 10px;
}

.announcement-reaction-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: none;
	border-radius: 999px;
	background: var(--ann-react-pill-bg);
	color: var(--ann-react-pill-text);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.announcement-reaction-pill:hover {
	background: var(--ann-react-pill-hover);
	transform: translateY(-1px);
}

.announcement-reaction-pill.is-active {
	background: var(--ann-react-active-bg);
	color: var(--ann-react-active-text);
	box-shadow: inset 0 0 0 1px var(--ann-react-active-border);
}

.announcement-reaction-pill.is-zero .announcement-reaction-count {
	opacity: 0.45;
}

.announcement-reaction-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--ann-react-add-bg);
	color: var(--ann-react-add-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.announcement-reaction-add:hover {
	background: var(--ann-react-add-hover-bg);
	color: var(--ann-react-add-hover-text);
}

.announcement-reaction-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 100%;
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--ann-react-divider);
}

.announcement-reaction-picker[hidden] {
	display: none !important;
}

.announcement-reaction-pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: var(--ann-react-pick-bg);
	font-size: 18px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.announcement-reaction-pick:hover {
	background: var(--ann-react-pick-hover);
	transform: scale(1.08);
}

.announcement-reaction-pick.is-active {
	background: var(--ann-react-active-bg);
	box-shadow: inset 0 0 0 1px var(--ann-react-active-border);
}

.announcement-reaction-hint {
	font-size: 12px;
	color: var(--ann-react-hint);
	margin-right: 4px;
}

.announcement-reaction-bonus-active {
	color: var(--bch-primary-darker);
	font-weight: 600;
}

.dark_mode .announcement-reaction-bonus-active {
	color: #7ddeb8;
}

.announcement-reaction-pill:disabled,
.announcement-reaction-pick:disabled,
.announcement-reaction-add:disabled {
	opacity: 0.6;
	cursor: wait;
}

.announcement-reaction-emoji {
	font-size: 15px;
}

.announcement-reaction-count {
	font-size: 12px;
	font-weight: 600;
	min-width: 10px;
	text-align: center;
}

#modal-mask .center-content .announcement-reactions {
	max-width: 100%;
}

/* Floating reaction fx (👍 ❤️ 🔥) */
#announcement-reaction-fx,
#announcement-heart-fx {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 2147483647 !important;
}

.announcement-floating-reaction {
	position: absolute;
	bottom: -40px;
	line-height: 1;
	user-select: none;
	will-change: transform, opacity;
	animation-name: announcement-reaction-float;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

.announcement-floating-reaction--like {
	filter: drop-shadow(0 2px 6px rgba(3, 169, 244, 0.4));
}

.announcement-floating-reaction--heart {
	filter: drop-shadow(0 2px 6px rgba(220, 38, 38, 0.35));
}

.announcement-floating-reaction--fire {
	filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.45));
}

@keyframes announcement-reaction-float {
	0% {
		transform: translate3d(0, 0, 0) scale(0.5) rotate(-8deg);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	70% {
		opacity: 0.9;
	}
	100% {
		transform: translate3d(var(--reaction-drift, 0px), -115vh, 0) scale(1.15) rotate(12deg);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.announcement-floating-reaction {
		animation: none !important;
		display: none !important;
	}
}