/* Voting, voter lists and comment reactions. */
:where(.mnc-comments) .mnc-votes { display: inline-flex; align-items: center; gap: .65rem; }
:where(.mnc-comments) .mnc-vote-group { display: inline-flex; align-items: center; gap: .25rem; }
:where(.mnc-comments) .mnc-vote {
	display: inline-flex;
	align-items: center;
	gap: .28rem;
	min-height: 24px;
	padding: .1rem 0;
	border: 0;
	border-radius: 0;
	color: var(--mnc-muted);
	background: transparent;
	font-size: .74rem;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: color .15s;
}
:where(.mnc-comments) .mnc-vote__icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
:where(.mnc-comments) .mnc-vote__custom-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; }
:where(.mnc-comments) .mnc-vote__custom-icon svg { display: block; width: 15px; height: 15px; }
:where(.mnc-comments) .mnc-vote:hover { color: var(--mnc-accent); }
:where(.mnc-comments) .mnc-vote[data-mnc-vote="upvote"].is-selected { color: var(--mnc-accent); }
:where(.mnc-comments) .mnc-vote[data-mnc-vote="downvote"].is-selected { color: #000; }
:where(.mnc-comments) .mnc-vote[aria-disabled="true"] { opacity: .55; cursor: wait; }
:where(.mnc-comments) .mnc-reaction-picker { position: relative; display: inline-flex; align-items: center; min-height: 28px; }
:where(.mnc-comments) .mnc-comment:has(.mnc-reaction-picker.is-open) { z-index: 45; }
:where(.mnc-comments) .mnc-reaction-picker__trigger { display: inline-flex; align-items: center; min-height: 26px; padding: 0; border: 0; color: var(--mnc-muted); background: transparent; font-size: .74rem; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; }
:where(.mnc-comments) .mnc-reaction-picker__trigger:hover { color: var(--mnc-text); }
:where(.mnc-comments) .mnc-reaction-picker__empty, :where(.mnc-comments) .mnc-reaction-picker__summary { display: inline-flex; align-items: center; gap: .3rem; }
:where(.mnc-comments) .mnc-reaction-picker__empty[hidden], :where(.mnc-comments) .mnc-reaction-picker__summary[hidden] { display: none !important; }
:where(.mnc-comments) .mnc-reaction-picker__empty-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px; }
:where(.mnc-comments) .mnc-reaction-picker__stack { display: inline-flex; align-items: center; padding-inline-start: 5px; }
:where(.mnc-comments) .mnc-reaction-picker__stack-item { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-start: -5px; border-radius: 50%; }
:where(.mnc-comments) .mnc-reaction-picker__stack-item:first-child { margin-inline-start: 0; }
:where(.mnc-comments) .mnc-reaction-picker__stack-item .mnc-reaction__icon { width: 24px; height: 24px; }
:where(.mnc-comments) .mnc-reaction-picker__total { color: var(--mnc-muted); font-size: .74rem; font-weight: 500; }
:where(.mnc-comments) .mnc-reaction-picker__popover { position: absolute; z-index: 35; inset-block-end: calc(100% + .35rem); inset-inline-start: 0; display: flex; align-items: flex-start; gap: .2rem; width: max-content; max-width: calc(100vw - 2rem); padding: .35rem .4rem .3rem; border: 1px solid var(--mnc-border); border-radius: 7px; color: var(--mnc-text); background: var(--mnc-bg); box-shadow: 0 6px 18px rgba(28, 30, 33, .14); }
:where(.mnc-comments) .mnc-reaction-picker__popover[hidden] { display: none !important; }
:where(.mnc-comments) .mnc-reaction-picker__option { position: relative; display: grid; justify-items: center; gap: .1rem; min-width: 40px; margin: 0; padding: 0; border: 0; outline: 0; color: var(--mnc-text); background: transparent; font: inherit; cursor: pointer; user-select: none; }
:where(.mnc-comments) .mnc-reaction-picker__icon-wrap { display: grid; place-items: center; width: 39px; height: 39px; border: 2px solid transparent; border-radius: 50%; transition: transform .12s ease, border-color .12s ease; }
:where(.mnc-comments) .mnc-reaction-picker__icon-wrap .mnc-reaction__icon { width: 35px; height: 35px; }
:where(.mnc-comments) .mnc-reaction-picker__option:hover .mnc-reaction-picker__icon-wrap, :where(.mnc-comments) .mnc-reaction-picker__option:focus-visible .mnc-reaction-picker__icon-wrap { transform: translateY(-2px) scale(1.06); }
:where(.mnc-comments) .mnc-reaction-picker__option.is-selected .mnc-reaction-picker__icon-wrap { border-color: var(--mnc-accent); }
:where(.mnc-comments) .mnc-reaction-picker__option[aria-disabled="true"] { opacity: .55; cursor: wait; }
/* Reaction tooltip */
:where(.mnc-comments) .mnc-reaction-picker__option[data-mnc-tooltip]::before {
	content: attr(data-mnc-tooltip);
	position: absolute;
	bottom: calc(100% + .35rem);
	inset-inline-start: 50%;
	transform: translateX(-50%) translateY(4px);
	background: rgba(28, 30, 33, .88);
	color: #fff;
	font-size: .67rem;
	font-weight: 600;
	line-height: 1;
	padding: .28rem .5rem;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .13s ease, transform .13s ease;
	box-shadow: 0 3px 10px rgba(0,0,0,.18);
	z-index: 10;
}
:where(.mnc-comments) .mnc-reaction-picker__option[data-mnc-tooltip]:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
:where(.mnc-comments) .mnc-reaction-picker__count { color: var(--mnc-muted); font-size: .68rem; font-weight: 500; line-height: 1; }
:where(.mnc-comments) .mnc-reaction__icon { display: block; width: 24px; height: 24px; fill: none; stroke: none; }
:where(.mnc-comments) .mnc-reaction--care .mnc-reaction__icon > rect:first-of-type { fill: #EFB4BF; }
:where(.mnc-comments) .mnc-reaction--helpful .mnc-reaction__icon > rect:first-of-type { fill: #B2D6A0; }
:where(.mnc-comments) .mnc-reaction--surprising .mnc-reaction__icon > rect:first-of-type { fill: #ACC5E7; }
:where(.mnc-comments) .mnc-reaction--care .mnc-reaction__icon > rect:nth-of-type(2),
:where(.mnc-comments) .mnc-reaction--helpful .mnc-reaction__icon > rect:nth-of-type(2),
:where(.mnc-comments) .mnc-reaction--surprising .mnc-reaction__icon > rect:nth-of-type(2) { fill: none; stroke: #fff; }
:where(.mnc-comments) .mnc-voters { position: relative; display: inline-flex; align-items: center; }
:where(.mnc-comments) .mnc-voters[hidden] { display: none !important; }
:where(.mnc-comments) .mnc-comment:has(.mnc-voters.is-open) { z-index: 40; }
:where(.mnc-comments) .mnc-voters__trigger {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0;
	border: 0;
	color: var(--mnc-muted);
	background: transparent;
	cursor: pointer;
	user-select: none;
}
:where(.mnc-comments) .mnc-voters__stack { display: inline-flex; align-items: center; padding-inline-start: 0; }
:where(.mnc-comments) .mnc-voters__avatar, :where(.mnc-comments) .mnc-voters__more {
	position: relative;
	width: var(--mnc-voter-avatar);
	height: var(--mnc-voter-avatar);
	margin-inline-start: 0;
	border: 2px solid var(--mnc-bg);
	border-radius: 50%;
	background: var(--mnc-surface);
}
:where(.mnc-comments) .mnc-voters__stack:has(> :nth-child(2)) { padding-inline-start: 9px; }
:where(.mnc-comments) .mnc-voters__stack:has(> :nth-child(2)) > .mnc-voters__avatar,
:where(.mnc-comments) .mnc-voters__stack:has(> :nth-child(2)) > .mnc-voters__more { margin-inline-start: -9px; }
:where(.mnc-comments) .mnc-voters__avatar { object-fit: cover; }
:where(.mnc-comments) .mnc-voters__more { display: inline-grid; place-items: center; color: var(--mnc-muted); font-size: .65rem; font-weight: 700; }
:where(.mnc-comments) .mnc-voters__trigger:hover .mnc-voters__avatar,
:where(.mnc-comments) .mnc-voters__trigger:hover .mnc-voters__more { border-color: color-mix(in srgb, var(--mnc-accent) 35%, var(--mnc-bg)); }
:where(.mnc-comments) .mnc-voters__popover {
	position: absolute;
	border: 1px solid #ebeef5;
	z-index: 50;
	top: calc(100% + .75rem);
	inset-inline-start: 50%;
	width: max-content;
	min-width: 180px;
	max-width: 200px;
	margin-inline-start: max(-85px, -50%);
	border-radius: 8px;
	background: var(--mnc-bg);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	transform: translateX(-50%) translateY(-10px);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	padding: 12px;
}
:where(.mnc-comments) .mnc-voters__popover::before {
	content: '';
	position: absolute;
	top: -6px;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--mnc-bg);
	border-top: 1px solid #ebeef5;
	border-inline-start: 1px solid #ebeef5;
}
:where(.mnc-comments) .mnc-voters.is-open .mnc-voters__popover { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
:where(.mnc-comments) .mnc-voters__popover[hidden] { display: none !important; }
:where(.mnc-comments) .mnc-voters__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block-end: 8px; margin-block-end: 4px; }
:where(.mnc-comments) .mnc-voters__header strong { font-size: 15px; font-weight: 500; color: var(--mnc-text); line-height: 1; }
:where(.mnc-comments) .mnc-voters__close { display: none; }
:where(.mnc-comments) .mnc-voters__list { max-height: 240px; padding: 0; overflow-y: auto; }
:where(.mnc-comments) .mnc-voters__person { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .3rem 0; }
:where(.mnc-comments) .mnc-voters__person:hover { opacity: 0.8; }
:where(.mnc-comments) .mnc-voters__person .mnc-voters__avatar { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--mnc-surface); font-size: 9px; display: grid; place-items: center; }
:where(.mnc-comments) .mnc-voters__person > span:not(.mnc-voters__avatar) { min-width: 0; overflow: hidden; color: var(--mnc-text); font-size: 14px; line-height: 1.2; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
:where(.mnc-comments) .mnc-voters__skeleton { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; animation: mnc-skeleton-pulse 1.4s ease-in-out infinite; }
:where(.mnc-comments) .mnc-voters__skeleton-avatar, :where(.mnc-comments) .mnc-voters__skeleton-name { display: block; background: var(--mnc-skeleton-bg); border-radius: 999px; }
:where(.mnc-comments) .mnc-voters__skeleton-avatar { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; }
:where(.mnc-comments) .mnc-voters__skeleton-name { width: 58%; height: .7rem; }
:where(.mnc-comments) .mnc-voters__status { margin: 0; padding: .7rem; color: var(--mnc-muted); font-size: .78rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {

	:where(.mnc-comments) .mnc-voters__skeleton { animation: none; }
}

:where(.mnc-comments) .mnc-voters__load-more { display: block; width: 100%; margin-top: .35rem; padding: .45rem .6rem; border: 1px solid var(--mnc-border); border-radius: 7px; color: var(--mnc-text); background: var(--mnc-bg); cursor: pointer; }
:where(.mnc-comments) .mnc-voters__load-more:hover, :where(.mnc-comments) .mnc-voters__load-more:focus-visible { border-color: var(--mnc-accent); color: var(--mnc-accent); }
:where(.mnc-comments) .mnc-voters__load-more:disabled { opacity: .6; cursor: wait; }

:where(.mnc-comments) .mnc-votes--unified {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--mnc-surface);
	padding: .15rem .5rem;
	border-radius: 20px;
}
:where(.mnc-comments) .mnc-votes--unified .mnc-vote {
	min-height: auto;
	padding: 0;
}
:where(.mnc-comments) .mnc-vote-count--unified {
	font-size: .74rem;
	font-weight: 700;
	color: var(--mnc-text);
	user-select: none;
	min-width: 1rem;
	text-align: center;
}

/* Keep text avatars centered when image-oriented component rules also apply. */
:where(.mnc-comments) .mnc-avatar-stack__img.mnc-avatar-initials,
:where(.mnc-comments) .mnc-voters__avatar.mnc-avatar-initials,
:where(.mnc-comments) .mnc-mention-avatar.mnc-avatar-initials,
:where(.mnc-comments) .mnc-thread-toggle__avatar.mnc-avatar-initials,
:where(.mnc-comments) .mnc-main-trigger-avatar.mnc-avatar-initials,
:where(.mnc-comments) .mnc-form__avatar.mnc-avatar-initials {
	display: inline-grid;
	place-items: center;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	line-height: 1;
	text-align: center;
	text-indent: 0;
}

:where(.mnc-comments) .mnc-voters__person .mnc-voters__avatar.mnc-avatar-initials {
	min-width: 20px;
	min-height: 20px;
	overflow: hidden;
	font-size: 9px;
	line-height: 1;
	white-space: normal;
}

/* Compact initials avatars use the same administrator-configured colors as comment avatars. */
:where(.mnc-comments) .mnc-voters__avatar.mnc-avatar-initials,
:where(.mnc-comments) .mnc-thread-toggle__avatar.mnc-avatar-initials {
	background-color: var(--mnc-avatar-initials-bg, #dddddd);
	color: var(--mnc-avatar-initials-text, #161616);
}