/* G6M_REACTPLUS_FA_FIX_V553
   Root cause: reactions 7–10 were FA SVG icons that paint as purple squares
   in this theme stack. Converted to image assets; this CSS keeps FA/SVG
   usable as fallback and fixes the hollow reply glyph.
*/

/* Force FA reaction glyphs to paint (fallback if still FA) */
html body .th_reactplus_reaction-identifier--fa,
html body .th_reactplus_reaction-identifier--fa .fa--xf,
html body .th_reactplus_reaction-identifier--fa svg {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	overflow: visible !important;
	width: 1.15em !important;
	height: 1.15em !important;
	max-width: 28px !important;
	max-height: 28px !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

html body .th_reactplus_reaction-identifier--fa svg,
html body .th_reactplus_reaction-identifier--fa svg *,
html body .th_reactplus_reaction-identifier--fa svg path,
html body .th_reactplus_reaction-identifier--fa svg use {
	fill: currentColor !important;
	stroke: none !important;
	color: inherit !important;
}

html body .g6m-rp-bar .th_reactplus_reaction-identifier--fa,
html body .g6m-rp-bar .th_reactplus_reaction-identifier--fa .fa--xf,
html body .g6m-rp-bar .th_reactplus_reaction-identifier--fa svg {
	width: calc(var(--g6m-rpe-btn, 28px) - 6px) !important;
	height: calc(var(--g6m-rpe-btn, 28px) - 6px) !important;
}

/* Image reactions 7–10 must show like 1–6 */
html body .g6m-rp-bar .reaction--7 .reaction-image,
html body .g6m-rp-bar .reaction--8 .reaction-image,
html body .g6m-rp-bar .reaction--9 .reaction-image,
html body .g6m-rp-bar .reaction--10 .reaction-image,
html body .reactionSummary .reaction--7 .reaction-image,
html body .reactionSummary .reaction--8 .reaction-image,
html body .reactionSummary .reaction--9 .reaction-image,
html body .reactionSummary .reaction--10 .reaction-image,
html body .menu--emoji .reaction--7 .reaction-image,
html body .menu--emoji .reaction--8 .reaction-image,
html body .menu--emoji .reaction--9 .reaction-image,
html body .menu--emoji .reaction--10 .reaction-image,
html body .tooltip--reaction .reaction--7 .reaction-image,
html body .tooltip--reaction .reaction--8 .reaction-image,
html body .tooltip--reaction .reaction--9 .reaction-image,
html body .tooltip--reaction .reaction--10 .reaction-image {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: calc(var(--g6m-rpe-btn, 28px) - 4px) !important;
	height: calc(var(--g6m-rpe-btn, 28px) - 4px) !important;
	max-width: 28px !important;
	max-height: 28px !important;
	object-fit: contain !important;
}

/* Reply action: restore FA SVG paint (hollow purple square fix) */
html body .actionBar-action--reply .fa--xf,
html body .actionBar-action--reply svg {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 18px !important;
	max-height: 18px !important;
	vertical-align: -0.1em !important;
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

html body .actionBar-action--reply svg,
html body .actionBar-action--reply svg *,
html body .actionBar-action--reply svg path,
html body .actionBar-action--reply svg use {
	fill: currentColor !important;
	stroke: none !important;
}

/* If external <use> sprite still fails, paint reply via mask */
html body .actionBar-action--reply .fa--xf {
	position: relative !important;
}

html body .actionBar-action--reply .fa--xf::after {
	content: "" !important;
	display: none;
}

@supports (mask-size: contain) {
	html body .actionBar-action--reply .fa--xf svg:has(use) {
		opacity: 0 !important;
		width: 0 !important;
		height: 0 !important;
		position: absolute !important;
	}
	html body .actionBar-action--reply .fa--xf::after {
		display: inline-block !important;
		width: 1em !important;
		height: 1em !important;
		vertical-align: -0.1em !important;
		background-color: currentColor !important;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M8.3 232.4L149.6 91c7.5-7.5 19.8-2.2 19.8 8.5V176h112c97.2 0 176 78.8 176 176c0 113.3-81.5 163.9-100.2 174.1c-6.9 3.8-14.8-2.1-13.4-9.9C369.7 415.6 416 362.8 416 304c0-61.9-50.1-112-112-112H169.4v76.5c0 10.7-12.3 16-19.8 8.5L8.3 248.4c-4.4-4.4-4.4-11.5 0-16z'/%3E%3C/svg%3E") center / contain no-repeat !important;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M8.3 232.4L149.6 91c7.5-7.5 19.8-2.2 19.8 8.5V176h112c97.2 0 176 78.8 176 176c0 113.3-81.5 163.9-100.2 174.1c-6.9 3.8-14.8-2.1-13.4-9.9C369.7 415.6 416 362.8 416 304c0-61.9-50.1-112-112-112H169.4v76.5c0 10.7-12.3 16-19.8 8.5L8.3 248.4c-4.4-4.4-4.4-11.5 0-16z'/%3E%3C/svg%3E") center / contain no-repeat !important;
	}
}