.commentsPanel {
	margin: 38px 0 0;
	border: 1px solid #e6e0ea;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(45, 31, 56, .06);
	overflow: hidden;
}

.commentsPanelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 20px;
}

.commentsPanelHeading {
	min-width: 0;
}

.commentsTitleLine {
	display: flex;
	align-items: center;
	gap: 8px;
}

.commentsTitle {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	line-height: 22px;
	font-weight: 700;
}

.commentsTitle::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: 1px 9px 0 0;
	vertical-align: top;
	background: no-repeat center / 19px 19px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}

.commentsCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: #f0eaf5;
	color: #604276;
	font-size: 12px;
	line-height: 22px;
	font-weight: 700;
}

.commentsSubtitle {
	margin: 5px 0 0;
	color: #6f6675;
	font-size: 13px;
	line-height: 18px;
}

.commentsPanelAction {
	flex: 0 0 auto;
}

.commentsPrimaryButton,
.commentsSecondaryButton,
.commentsSubmitButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.commentsPrimaryButton {
	width: auto;
	padding: 10px 16px;
	border: 1px solid #8e65ad;
	background: #fff;
	color: #49305b;
}

.commentsPrimaryButton:hover {
	border-color: #6e32a5;
	background: #f7f1fb;
	color: #3c214f;
}

.commentsLoginButton {
	border-bottom: 1px solid #8e65ad;
}

.commentsPrimaryButton:focus-visible,
.commentsSecondaryButton:focus-visible,
.commentsSubmitButton:focus-visible,
.commentAction:focus-visible,
.commentToolButton:focus-visible,
.commentReplyReference:focus-visible,
.commentReplyCancel:focus-visible,
.commentTextarea:focus-visible {
	outline: 3px solid rgba(126, 78, 160, .22);
	outline-offset: 2px;
}

.commentsList {
	border-top: 1px solid #eee9f1;
	transition: opacity .18s ease;
}

.commentsList.isLoading {
	opacity: .52;
	pointer-events: none;
}

.commentsEmpty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	padding: 20px;
	text-align: center;
	background: #fcfbfd;
}

.commentsEmpty::before {
	content: '';
	width: 34px;
	height: 34px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: #f0eaf5 no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23604276' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}

.commentsEmpty strong {
	font-size: 14px;
	line-height: 19px;
}

.commentsEmpty span {
	margin-top: 4px;
	color: #756c7b;
	font-size: 12px;
	line-height: 17px;
}

.commentRow {
	position: relative;
	margin: 0;
	padding: 20px;
	border-bottom: 1px solid #eee9f1;
	background: #fff;
	transition: background-color .18s ease, box-shadow .18s ease;
}

.commentRow:last-child {
	border-bottom: 0;
}

.commentRow.commentLevel--2 {
	margin-left: 38px;
	border-left: 2px solid #eee7f2;
}

.commentRow.commentLevel--3 {
	margin-left: 76px;
	border-left: 2px solid #eee7f2;
}

.commentRow.isHighlighted {
	background: #fffbea;
	box-shadow: inset 3px 0 0 #c9aa2f;
}

.commentRow.isDeleted {
	background: #fafafa;
}

.commentHeader {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: start;
	gap: 11px;
}

.commentAvatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #7d4d9e;
	color: #fff;
	font-size: 14px;
	line-height: 36px;
	font-weight: 700;
	text-transform: uppercase;
}

.commentRow.isOwner .commentAvatar {
	background: #326846;
}

.commentRow.isDeleted .commentAvatar {
	background: #c7c7c7;
	color: #555;
}

.commentMeta {
	min-width: 0;
}

.commentAuthorLine {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 19px;
}

.commentAuthorName {
	font-size: 14px;
	line-height: 19px;
	font-weight: 700;
	word-break: break-word;
}

.commentOwnerLabel {
	display: inline-flex;
	align-items: center;
	height: 19px;
	padding: 0 7px;
	border-radius: 999px;
	background: #e9f4ed;
	color: #326846;
	font-size: 10px;
	line-height: 19px;
	font-weight: 700;
	text-transform: uppercase;
}

.commentDate {
	display: block;
	margin-top: 3px;
	color: #8a828f;
	font-size: 11px;
	line-height: 16px;
}

.commentActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 32px;
}

.commentAction,
.commentReplyReference {
	width: auto;
	height: auto;
	min-height: 30px;
	padding: 5px 9px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #665b6d;
	font-family: inherit;
	font-size: 11px;
	line-height: 16px;
	text-transform: none;
	cursor: pointer;
}

.commentAction:hover,
.commentReplyReference:hover {
	border-color: #e2d9e7;
	background: #f8f4fa;
	color: #4b315e;
}

.commentReplyReference {
	min-height: 24px;
	padding: 3px 7px;
	background: #f6f3f8;
}

.commentText {
	margin: 12px 0 0 49px;
	color: #262128;
	font-size: 14px;
	line-height: 21px;
	overflow-wrap: anywhere;
}

.commentText p {
	margin: 0;
}

.commentText strong,
.commentText b {
	font-weight: 700;
}

.commentText pre {
	max-width: 100%;
	margin: 10px 0 0;
	padding: 13px 15px;
	border: 1px solid #e0e3e6;
	border-radius: 9px;
	background: #f7f9fa;
	color: #202428;
	font-size: 12px;
	line-height: 18px;
	white-space: pre;
	overflow: auto;
}

.commentText pre code {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
}

.commentDeletedText {
	color: #8a828f;
	font-style: italic;
}

.commentsComposer {
	padding: 18px 20px;
	border-top: 1px solid #eee9f1;
	background: #fcfbfd;
}

.commentsComposer[hidden] {
	display: none;
}

.commentsPanel.isComposerOpen .commentsEmpty {
	display: none;
}

.commentsPanel.isComposerOpen .commentsList {
	border-top-color: transparent;
}

.newCommentForm {
	margin: 0;
	padding: 0;
	border: 0;
}

.commentReplyBar {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	padding: 8px 10px;
	border-radius: 9px;
	background: #f0eaf5;
	color: #5d496c;
	font-size: 12px;
	line-height: 17px;
}

.commentReplyBar[hidden] {
	display: none;
}

.commentReplyBar .showCommentBtn {
	width: auto;
	height: 26px;
	padding: 3px 7px;
	border: 1px solid #d8cae0;
	border-radius: 7px;
	background: #fff;
	color: #56366e;
	font-size: 11px;
	line-height: 18px;
	cursor: pointer;
}

.commentReplyCancel {
	width: 28px;
	height: 28px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #5d496c;
	font-size: 20px;
	line-height: 28px;
	cursor: pointer;
}

.commentReplyCancel:hover {
	background: #e4d9ea;
}

.commentFormHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.commentFormLabel {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #28212c;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	text-align: left;
}

.commentTools {
	display: flex;
	align-items: center;
	gap: 5px;
}

.commentToolButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #ded7e2;
	border-radius: 8px;
	background: #fff;
	color: #4f4654;
	cursor: pointer;
}

.commentToolButton:hover {
	border-color: #bca8c8;
	background: #f7f2fa;
	color: #57316f;
}

.commentToolButton svg {
	fill: currentColor;
}

.commentTextarea {
	display: block;
	width: 100%;
	height: 104px;
	min-height: 88px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #d8d1dc;
	border-radius: 10px;
	background: #fff;
	color: #252027;
	font-family: inherit;
	font-size: 14px;
	line-height: 21px;
	resize: vertical;
}

.commentTextarea::placeholder {
	color: #9b939f;
}

.commentTextarea:focus {
	border-color: #9b76b4;
	box-shadow: 0 0 0 3px rgba(126, 78, 160, .12);
}

.commentFormFooter {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-top: 12px;
}

.commentFormMeta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #817786;
	font-size: 11px;
	line-height: 16px;
}

.commentFormMeta code {
	padding: 1px 5px;
	border-radius: 4px;
	background: #f0eaf5;
	color: #604276;
	font-size: 10px;
	line-height: 15px;
}

.commentCounter {
	font-variant-numeric: tabular-nums;
}

.commentCounter.isLimitClose {
	color: #a33d4f;
	font-weight: 700;
}

.commentFormActions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.commentsSecondaryButton,
.commentsSubmitButton {
	width: auto;
	padding: 10px 15px;
}

.commentsSecondaryButton {
	border: 1px solid #ded7e2;
	background: #fff;
	color: #605665;
}

.commentsSecondaryButton:hover {
	border-color: #c3b5ca;
	background: #f8f5fa;
}

.newCommentForm button.commentsSubmitButton {
	width: auto;
	height: auto;
	min-height: 40px;
	padding: 10px 18px;
	border: 1px solid #6e32a5;
	border-radius: 10px;
	background: #6e32a5;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none !important;
}

.newCommentForm button.commentsSubmitButton:hover {
	background: #5c258f;
	color: #fff;
}

.newCommentForm.isBusy {
	opacity: .7;
}

.newCommentForm.isBusy .commentsSubmitButton {
	cursor: wait;
}

.newCommentForm .commentTextarea[readonly] {
	background: #f7f5f8;
	cursor: wait;
}

.commentFormStatus:empty,
.commentsGlobalStatus:empty {
	display: none;
}

.commentFormStatus {
	margin-top: 12px;
}

.commentsGlobalStatus {
	border-top: 1px solid #eee9f1;
}

.commentNotice {
	margin: 0;
	padding: 11px 14px;
	border-radius: 9px;
	font-size: 12px;
	line-height: 17px;
	text-align: left;
}

.commentsGlobalStatus .commentNotice {
	border-radius: 0;
}

.commentNotice--success {
	background: #eaf6ee;
	color: #285d3a;
}

.commentNotice--error {
	background: #fff0f2;
	color: #8c3042;
}

@media (max-width: 700px) {
	.commentsPanelHeader {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.commentsPanelAction,
	.commentsPrimaryButton {
		width: 100%;
	}

	.commentRow {
		padding: 17px 15px;
	}

	.commentRow.commentLevel--2,
	.commentRow.commentLevel--3 {
		margin-left: 14px;
	}

	.commentHeader {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 9px;
	}

	.commentAvatar {
		width: 32px;
		height: 32px;
		font-size: 12px;
		line-height: 32px;
	}

	.commentActions {
		grid-column: 2;
		justify-content: flex-start;
		min-height: 0;
		margin-top: 4px;
	}

	.commentAction {
		padding-left: 0;
	}

	.commentText {
		margin-left: 43px;
	}

	.commentsComposer {
		padding: 16px 15px;
	}

	.commentTextarea {
		height: 96px;
	}

	.commentFormFooter {
		align-items: stretch;
		flex-direction: column;
	}

	.commentFormActions,
	.commentsSecondaryButton,
	.commentsSubmitButton {
		width: 100%;
	}

	.commentsSecondaryButton,
	.newCommentForm button.commentsSubmitButton {
		flex: 1 1 50%;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.commentsPanel *,
	.commentsPanel *::before,
	.commentsPanel *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}