/* =========================================================
   MOW Comment Reactions v1.2
   PNG reactions + user tooltip
   ========================================================= */

.mow-reactions{
	--mowr-green:#6b9637;
	--mowr-green-light:#8fbd58;
	position:relative;
	display:inline-flex;
	align-items:center;
	min-width:0;
	margin-left:2px;
	font-family:inherit;
	z-index:20;
}

.mow-reactions__chips{
	display:inline-flex;
	align-items:center;
	flex-wrap:wrap;
	gap:5px;
}

.mow-reaction-chip,
.mow-reaction-add{
	appearance:none;
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:29px;
	box-sizing:border-box;
	border-radius:4px;
	cursor:pointer;
	transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.mow-reaction-chip{
	gap:4px;
	min-width:42px;
	padding:0 7px;
	background:#303238;
	border:1px solid #42454c;
	color:#b9bdc4;
	font:600 11px/1 inherit;
}

.mow-reaction-chip:hover{
	background:#393c42;
	border-color:#59605f;
	color:#fff;
	transform:translateY(-1px);
}

.mow-reaction-chip--active{
	background:rgba(107,150,55,.16);
	border-color:#6b9637;
	color:#e2ecd8;
}

.mow-reaction-chip__icon{
	display:block;
	width:21px;
	height:21px;
	object-fit:contain;
	pointer-events:none;
}

.mow-reaction-chip__count{
	min-width:8px;
	text-align:center;
}

/* Who reacted */
.mow-reaction-chip[data-users]:hover::after{
	content:attr(data-users);
	position:absolute;
	left:50%;
	bottom:calc(100% + 8px);
	transform:translateX(-50%);
	z-index:1200;
	width:max-content;
	max-width:260px;
	padding:7px 9px;
	background:#1f2125;
	border:1px solid #474b52;
	border-radius:5px;
	box-shadow:0 8px 22px rgba(0,0,0,.38);
	color:#e4e6e8;
	font:500 11px/1.35 Arial,sans-serif;
	white-space:normal;
	pointer-events:none;
}

.mow-reaction-chip[data-users]:hover::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:calc(100% + 4px);
	z-index:1201;
	width:7px;
	height:7px;
	background:#1f2125;
	border-right:1px solid #474b52;
	border-bottom:1px solid #474b52;
	transform:translateX(-50%) rotate(45deg);
	pointer-events:none;
}

.mow-reaction-add{
	gap:5px;
	padding:0 9px;
	background:rgba(107,150,55,.08);
	border:1px solid #4f6736;
	color:#8fbd58;
	font:600 11px/1 inherit;
}

.mow-reaction-add:hover,
.mow-reactions--open .mow-reaction-add{
	background:rgba(107,150,55,.18);
	border-color:#6b9637;
	color:#e1edcf;
	transform:translateY(-1px);
}

.mow-reaction-add>span{
	font-size:17px;
	font-weight:400;
	line-height:1;
}

.mow-reaction-add>b{
	font-size:10px;
	font-weight:600;
}

/* Once reactions exist, leave only a compact + */
.mow-reactions--has-reactions .mow-reaction-add{
	width:30px;
	min-width:30px;
	padding:0;
}
.mow-reactions--has-reactions .mow-reaction-add>b{display:none}

/* Picker: icons only */
.mow-reaction-picker{
	position:absolute;
	left:0;
	bottom:calc(100% + 10px);
	display:grid;
	grid-template-columns:repeat(6,64px);
	gap:7px;
	width:max-content;
	padding:9px;
	background:#24262a;
	border:1px solid #44484f;
	border-radius:7px;
	box-shadow:0 12px 32px rgba(0,0,0,.42);
	box-sizing:border-box;
	z-index:1000;
	transform-origin:22px bottom;
	animation:mowReactionPickerIn .14s ease-out;
}

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

.mow-reaction-picker::after{
	content:"";
	position:absolute;
	left:18px;
	bottom:-5px;
	width:8px;
	height:8px;
	background:#24262a;
	border-right:1px solid #44484f;
	border-bottom:1px solid #44484f;
	transform:rotate(45deg);
}

.mow-reaction-option{
	appearance:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	padding:5px;
	background:#2b2d32;
	border:1px solid #3b3f46;
	border-radius:7px;
	cursor:pointer;
	box-sizing:border-box;
	transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.mow-reaction-option img{
	display:block;
	width:50px;
	height:50px;
	object-fit:contain;
	pointer-events:none;
	filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
	transition:transform .15s ease;
}

.mow-reaction-option:hover{
	background:#35383e;
	border-color:#59605f;
	transform:translateY(-2px);
}

.mow-reaction-option:hover img{transform:scale(1.08)}

.mow-reaction-option--active{
	background:rgba(107,150,55,.14);
	border-color:#6b9637;
	box-shadow:inset 0 0 0 1px rgba(143,189,88,.12);
}

.mow-reactions--loading{
	opacity:.55;
	pointer-events:none;
}

@keyframes mowReactionPickerIn{
	from{opacity:0;transform:translateY(5px) scale(.98)}
	to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:700px){
	.mow-reaction-picker{
		position:fixed;
		left:10px;
		right:10px;
		bottom:15px;
		grid-template-columns:repeat(6,minmax(48px,1fr));
		gap:5px;
		width:auto;
		padding:8px;
	}
	.mow-reaction-picker::after{display:none}
	.mow-reaction-option{width:100%;height:60px}
	.mow-reaction-option img{width:46px;height:46px}
}

@media(max-width:430px){
	.mow-reaction-picker{left:6px;right:6px;bottom:8px;gap:4px;padding:6px}
	.mow-reaction-option{height:54px;padding:4px}
	.mow-reaction-option img{width:42px;height:42px}
}