/**
 * Обсуждение под статьёй.
 *
 * Значения и анимации взяты из макета «Страница статьи.dc.html»:
 * карточка #FFF / border #EAE9E6 / radius 16 / padding 24 / gap 20,
 * ховеры — scale(1.06) у чипов, rotate(90deg) у «+», translateY(-1px)
 * у кнопки отправки, всё на .2s ease.
 *
 * Кегли в px: в теме плавающий rem (--main-font-size во vw), и на 1440px
 * текст комментариев провалился бы до 11px.
 */

/* Своя ширина, без класса .wrap темы — он растягивает блок
   на всю ширину страницы и теряется колонка для чтения. */
.art-comments {
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	/* Родитель .main-content — flex-контейнер, поэтому margin:auto
	   не центрирует; ширину и выравнивание задаём явно. */
	align-self: center;
	margin: 48px auto 0;
	padding: 0 16px;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #16171a;
}

@media (min-width: 760px) {
	.art-comments { padding: 0; }
}

/* ═══════════════ Оценка статьи ═══════════════ */
/* Блок должен быть заметным: это единственное место, где читатель
   даёт обратную связь одним движением. Мелкие звёзды его просто
   не замечали. */
.art-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding: 24px 28px;
	border: 1px solid #eae9e6;
	border-radius: 16px;
	background: linear-gradient(180deg, #fffefb 0%, #faf8f4 100%);
}

.art-rating__label {
	font-size: 18px;
	font-weight: 700;
	color: #1a1830;
}

.art-rating__stars {
	display: flex;
	gap: 5px;
	margin-left: auto;
}

.art-rating__star {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: #e2ddd2;
	cursor: pointer;
	transition: color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}

.art-rating__star svg { fill: currentColor; display: block; }
.art-rating__star:hover { transform: scale(1.18) rotate(-4deg); }

/* Наведение закрашивает звезду и все левее неё */
.art-rating__stars:hover .art-rating__star { color: #d9b962; }
.art-rating__stars .art-rating__star:hover ~ .art-rating__star { color: #e2ddd2; }

.art-rating__star.is-filled { color: #c9a961; }

.art-rating__meta {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 74px;
	line-height: 1.1;
}

/* Средняя оценка — крупной цифрой: её ищут глазами первой */
.art-rating__value {
	font-family: 'Forum', Georgia, serif;
	font-size: 34px;
	font-weight: 400;
	color: #1a1830;
}

.art-rating__votes {
	font-size: 14px;
	color: #8b8794;
}

/* Ответ на клик по звезде: подсказка гостю или подтверждение оценки */
.art-rating__msg {
	flex-basis: 100%;
	font-size: 14px;
	color: #2f5c4a;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity .22s ease, transform .22s ease;
}

.art-rating__msg.is-visible {
	opacity: 1;
	transform: none;
}

.art-rating__msg.is-error { color: #a8322d; }

.art-rating__login {
	font-size: 13px;
	font-weight: 700;
	color: #2f5c4a;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.art-rating__login:hover { color: #c9774a; }

/* ═══════════════ Карточка обсуждения ═══════════════ */
.art-comments__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 14px;
	padding: 24px;
	border: 1px solid #eae9e6;
	border-radius: 16px;
	background: #fff;
}

/* ── Призыв ── */
.art-comments__prompt {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.art-comments__prompt-text {
	margin: 0;
	font-family: 'Forum', Georgia, serif;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 400;
	color: #1a1830;
}

/* Пояснение под призывом: без него неясно, что писать —
   вопрос, историю или мнение. */
.art-comments__prompt-desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #6e6a63;
}

/* ═══════════════ Композер ═══════════════ */
/* Раскрытие композера.
   max-height не годится: элемент упирается в реальную высоту в первые
   15% времени перехода, и раскрытие выглядит рывком. Анимируем
   grid-template-rows 0fr → 1fr — так высота едет «по контенту».
   Строки задаются каждой панели отдельно: если повесить их на общий
   контейнер, строка 1fr растягивает свёрнутую кнопку на всю высоту
   блока — поле «Написать комментарий» раздувалось втрое. */
.art-composer__pane {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1);
}

.art-composer.is-open .art-composer__pane--closed,
.art-composer:not(.is-open) .art-composer__pane--open {
	grid-template-rows: 0fr;
	/* Схлопывание короче раскрытия: убрать с глаз можно быстрее,
	   чем показать. */
	transition-duration: .32s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.art-composer__closed,
.art-composer__open {
	min-height: 0;
	overflow: hidden;
	transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}

/* Пока идёт раскрытие, overflow обязателен — иначе контент вылезает
   за пределы схлопнутой строки. Но после него панель смайликов
   всплывает наружу и обрезалась бы. Класс ставит JS по завершении
   перехода. */
.art-composer.is-settled .art-composer__pane--open,
.art-composer.is-settled .art-composer__open { overflow: visible; }

/* Свёрнуто */
.art-composer:not(.is-open) .art-composer__open {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.art-composer:not(.is-open) .art-composer__closed {
	opacity: 1;
	transform: none;
}

/* Развёрнуто */
.art-composer.is-open .art-composer__closed {
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
}

.art-composer.is-open .art-composer__open {
	opacity: 1;
	transform: none;
}

/* Внутренности проявляются чуть позже самой «шторки» — раскрытие
   читается как одно движение, а не как рывок готового блока. */
.art-composer__field > * {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s ease .12s, transform .3s ease .12s;
}

.art-composer.is-open .art-composer__field > * {
	opacity: 1;
	transform: none;
}

.art-composer__closed {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 6px 6px 6px 20px;
	border: 0;
	border-radius: 26px;
	background: #f2f1ef;
	font-family: inherit;
	text-align: left;
	cursor: text;
}

.art-composer__closed:hover { background: #eae8e4; }

.art-composer__placeholder {
	flex: 1;
	font-size: 15px;
	color: #9c968c;
}

.art-composer__send {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #3f5f4c;
	color: #fff;
	transition: background .2s ease, transform .2s ease;
}

.art-composer__closed:hover .art-composer__send {
	background: #2f4a3a;
	transform: scale(1.08);
}

/* ── Развёрнутый ── */
.art-composer__open {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.art-composer__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(140deg, #d8e0d6, #9fbba6);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.art-composer__field {
	position: relative;
	transition: box-shadow .25s ease, border-color .25s ease;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 16px;
	border: 1.5px solid #3f5f4c;
	border-radius: 14px;
	box-shadow: 0 0 0 3px rgba(63, 95, 76, .08);
}

.art-composer__reply {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #f2f1ef;
	font-size: 13px;
	color: #6e6a63;
}

.art-composer__reply-cancel {
	margin-left: auto;
	padding: 0 3px;
	border: 0;
	background: none;
	font-size: 17px;
	line-height: 1;
	color: #8a857c;
	cursor: pointer;
	transition: color .2s ease;
}

.art-composer__reply-cancel:hover { color: #a8322d; }

.art-composer__textarea {
	width: 100%;
	min-height: 78px;
	border: 0;
	outline: none;
	resize: vertical;
	font-family: 'Manrope', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: #24242a;
	background: transparent;
}

.art-composer__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.art-composer__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid #efeeeb;
}

.art-composer__hint {
	font-size: 12px;
	color: #a9a39a;
}

.art-composer__buttons {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.art-composer__cancel {
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #6e6a63;
	cursor: pointer;
	transition: background .2s ease;
}

.art-composer__cancel:hover { background: #f2f1ef; }

.art-composer__submit {
	padding: 10px 22px;
	border: 0;
	border-radius: 10px;
	background: #3f5f4c;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.art-composer__submit:hover {
	background: #2f4a3a;
	transform: translateY(-1px);
}

.art-composer__submit:disabled { opacity: .6; transform: none; cursor: default; }

.art-composer__error {
	margin: 0;
	font-size: 13px;
	color: #a8322d;
}


/* ── Гостю ── */
.art-comments__guest {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	padding: 14px 16px;
	border-radius: 26px;
	background: #f2f1ef;
}

.art-comments__guest-text {
	font-size: 15px;
	color: #6e6a63;
}

.art-comments__guest-btn {
	margin-left: auto;
	padding: 10px 22px;
	border-radius: 999px;
	background: #3f5f4c;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.art-comments__guest-btn:hover {
	background: #2f4a3a;
	color: #fff;
	transform: translateY(-1px);
}

/* Композер, перенесённый под комментарий для ответа: отделяем его
   от реплики, чтобы не слипалось. */
.art-comment .art-composer {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(26, 24, 48, .07);
}

.art-comment .art-composer__closed { display: none; }

/* ═══════════════ Счётчик и сортировка ═══════════════ */
.art-comments__bar {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.art-comments__title {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #16171a;
}

.art-comments__sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #6e6a63;
	cursor: pointer;
	transition: color .2s ease;
}

.art-comments__sort:hover { color: #16171a; }

.art-comments__sort svg { transition: transform .25s ease; }
.art-comments__sort[data-sort="new"] svg { transform: rotate(180deg); }

/* Смена порядка — короткое затухание списка, чтобы перестановка
   не выглядела как мигание. */
.art-comments__list { transition: opacity .2s ease; }
.art-comments__list.is-swapping { opacity: .35; }

/* ═══════════════ Лента ═══════════════ */
/* Плашка комментария — как карточка отзыва (sass/layouts/product-reviews.scss):
   кремовый фон #F8F5F0, radius 16, мягкая тень на hover. Это один и тот же
   элемент сайта, разводить два разных вида «мнение читателя» незачем. */
.art-comments__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.art-comments__empty {
	margin: 0;
	padding: 22px;
	border-radius: 16px;
	background: #f8f5f0;
	font-size: 15px;
	color: #8b8794;
	text-align: center;
}

.art-comment {
	display: flex;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid transparent;
	border-radius: 16px;
	background: #f8f5f0;
	transition: box-shadow .4s ease, border-color .4s ease;
}

.art-comment:hover {
	border-color: rgba(26, 24, 48, .06);
	box-shadow: 0 4px 14px rgba(15, 14, 23, .04);
}

/* Не выцветаем сильно: человек должен спокойно перечитать,
   что он отправил, а не всматриваться в бледный текст. */
.art-comment.is-pending {
	background: #fbf9f4;
	border-color: rgba(201, 169, 97, .28);
	border-style: dashed;
}

.art-comment__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* Цвет приходит инлайном из палитры отзывов — у каждого автора свой */
	background: #5a7a8c;
	color: #fff;
	font-family: 'Forum', Georgia, serif;
	font-size: 20px;
	line-height: 1;
}

.art-comment__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.art-comment__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.art-comment__author {
	font-family: 'Forum', Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	color: #1a1830;
}

.art-comment__time {
	font-size: 13px;
	letter-spacing: .02em;
	color: #8b8794;
}

.art-comment__badge-author {
	padding: 3px 8px;
	border-radius: 5px;
	background: #2f5c4a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Комментарий на проверке виден только автору (и админу в Filament):
   API отдаёт чужие pending лишь их владельцу. */
.art-comment__pending-note {
	margin: 0;
	font-size: 12px;
	color: #8b8794;
}

.art-comment__badge-pending {
	padding: 3px 8px;
	border-radius: 5px;
	background: #f3ead4;
	color: #8a6a1f;
	font-size: 11px;
	font-weight: 700;
}

.art-comment__text {
	font-size: 16px;
	line-height: 1.6;
	color: #1a1830;
	overflow-wrap: anywhere;
}

.art-comment__text--deleted { color: #a9a39a; font-style: italic; }

/* Обращение к собеседнику в начале реплики */
.art-comment__mention { color: #a8322d; }

/* Длинный текст сворачивается, «ещё» разворачивает */
.art-comment__text.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* «ещё» — в потоке текста, по левому краю: по центру оно читается
   как отдельный элемент интерфейса, а это продолжение реплики. */
.art-comment__expand {
	align-self: flex-start;
	margin-top: -2px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: #8b8794;
	cursor: pointer;
	transition: color .2s ease;
}

.art-comment__expand:hover { color: #c9774a; }



/* ── Действия ── */
.art-comment__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 2px;
}

.art-comment__reply {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #5a5466;
	cursor: pointer;
	transition: color .2s ease;
}

.art-comment__reply:hover { color: #c9774a; }

/* Реакции: чипы показываются только у тех, что кто-то поставил */
.art-comment__reactions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.art-comment__reaction {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid rgba(26, 24, 48, .08);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #6e6a63;
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease, transform .18s ease;
}

.art-comment__reaction:hover {
	border-color: rgba(201, 119, 74, .35);
	background: rgba(201, 119, 74, .05);
	transform: scale(1.05);
}

/* Своя реакция — подсвечена, повторный клик снимает */
.art-comment__reaction.is-active {
	border-color: rgba(201, 119, 74, .45);
	background: rgba(201, 119, 74, .1);
	color: #a8552d;
}

.art-comment__reaction-char { font-size: 14px; line-height: 1; }

/* Выбор реакции: «+» из макета */
.art-comment__picker { position: relative; }

.art-comment__picker-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(26, 24, 48, .08);
	border-radius: 50%;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: #8b8794;
	cursor: pointer;
	transition: background .25s ease, transform .22s ease, border-color .25s ease, color .25s ease;
}

.art-comment__picker-btn:hover {
	background: rgba(201, 119, 74, .06);
	border-color: rgba(201, 119, 74, .35);
	color: #c9774a;
	transform: rotate(90deg);
}

.art-comment__picker.is-open .art-comment__picker-btn {
	background: #1a1830;
	border-color: #1a1830;
	color: #fff;
	transform: rotate(45deg);
}

.art-comment__picker-panel {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	z-index: 20;
	width: 340px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid #e4e0d8;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(30, 25, 15, .22), 0 2px 8px rgba(30, 25, 15, .08);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px) scale(.94);
	transform-origin: bottom center;
	transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility .24s;
}

.art-comment__picker.is-open .art-comment__picker-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}

/* Вкладки категорий — pill-таб с активным зелёным фоном (как в дизайне композера) */
.art-picker__tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.art-picker__tab {
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: #F2F1EF;
	color: #4A473F;
	font: 700 13px/1 'Manrope', sans-serif;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
.art-picker__tab:hover { background: #E9E7E2; }
.art-picker__tab.is-active {
	background: #3F5F4C;
	color: #FFFFFF;
}

/* Тело — контейнер трёх групп; активна одна за раз */
.art-picker__body { display: block; }
.art-picker__cat {
	display: none;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}
.art-picker__cat.is-active { display: grid; }

.art-comment__picker-item {
	width: 100%;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #FAF8F4;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .16s ease, transform .16s ease;
}
.art-comment__picker-item:hover {
	background: #F1F5F1;
	transform: scale(1.16);
}

/* Хинт снизу — одна реакция на комментарий */
.art-comment__picker-panel::after {
	content: "Одна реакция на комментарий";
	margin-top: 4px;
	font: 400 12px/1.3 'Manrope', sans-serif;
	color: #8A857C;
	text-align: center;
}

/* «…» — жалоба и удаление */
.art-comment__more { position: relative; }

.art-comment__more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(26, 24, 48, .08);
	border-radius: 50%;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #8b8794;
	cursor: pointer;
	transition: background .25s ease, transform .2s ease, border-color .25s ease, color .25s ease;
}

.art-comment__more-btn:hover {
	background: rgba(201, 119, 74, .05);
	border-color: rgba(201, 119, 74, .35);
	color: #c9774a;
}

.art-comment__menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 3;
	min-width: 150px;
	padding: 6px;
	border: 1px solid #eae9e6;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(30, 25, 15, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.art-comment__more.is-open .art-comment__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.art-comment__menu-item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: #4a473f;
	text-align: left;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.art-comment__menu-item:hover { background: #f7f6f4; color: #a8322d; }

/* ── Ветка ответов ── */
.art-comment__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #3a3833;
	cursor: pointer;
	transition: color .2s ease;
}

.art-comment__toggle:hover { color: #a8322d; }

.art-comment__toggle-line {
	width: 14px;
	height: 1px;
	background: #dddcd8;
}

.art-comment__replies {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 10px;
	padding-left: 22px;
}

/* Ветка сворачивается переходом, а не display:none */
.art-comment__replies {
	border-left: 2px solid rgba(26, 24, 48, .07);
	overflow: hidden;
	transition: max-height .32s cubic-bezier(.2, .7, .3, 1), opacity .22s ease, margin-top .32s ease;
	max-height: 4000px;
	opacity: 1;
}

.art-comment__replies.is-collapsed {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	pointer-events: none;
}

/* Ответ внутри плашки — своей подложки не имеет, иначе карточка
   в карточке выглядит как ошибка вёрстки. */
.art-comment--reply {
	gap: 11px;
	padding: 0;
	border: 0;
	background: none;
}

.art-comment--reply:hover { box-shadow: none; border-color: transparent; }

.art-comment--reply .art-comment__avatar {
	width: 34px;
	height: 34px;
	font-size: 16px;
}

.art-comment--reply .art-comment__author { font-size: 17px; }
.art-comment--reply .art-comment__text { font-size: 15px; }
.art-comment--reply .art-comment__body { gap: 5px; }

/* Появление нового комментария — короткое и без прыжка раскладки */
@keyframes ig-comment-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.art-comment.is-new { animation: ig-comment-in .28s ease both; }

@media (max-width: 580px) {
	/* На телефоне блок идёт во всю ширину контента: свои боковые
	   отступы не нужны — их уже даёт обёртка статьи, а вместе они
	   съедали место под текст. */
	.art-comments {
		margin-top: 36px;
		padding: 0;
	}

	/* Внешняя карточка на телефоне только сужает контент. Комментарии
	   и так в своих плашках, второй рамки вокруг не нужно. */
	.art-comments__card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		gap: 18px;
	}

	.art-rating {
		padding: 18px;
		gap: 10px 16px;
	}

	.art-rating__label {
		flex-basis: 100%;
		font-size: 16px;
	}

	/* На телефоне звёзды крупнее: попасть пальцем в мелкую невозможно */
	.art-rating__stars { margin-left: 0; gap: 6px; }
	.art-rating__star svg { width: 38px; height: 38px; }

	.art-rating__meta { margin-left: auto; align-items: flex-end; }
	.art-rating__value { font-size: 32px; }

	/* Кегли крупнее: на телефоне читают с рук, 13-14px мелко */
	.art-comments__prompt-text { font-size: 24px; }
	.art-comments__prompt-desc { font-size: 15px; }
	.art-comments__title { font-size: 20px; }
	.art-comments__sort { font-size: 14px; }

	.art-composer__placeholder { font-size: 16px; }
	.art-composer__open { gap: 8px; }
	.art-composer__avatar { display: none; }

	.art-comments__guest-text { font-size: 15px; }

	.art-comment {
		padding: 16px;
		gap: 12px;
	}

	.art-comment__avatar { width: 40px; height: 40px; font-size: 18px; }
	.art-comment__author { font-size: 18px; }
	.art-comment__time { font-size: 14px; }
	.art-comment__text { font-size: 16px; line-height: 1.6; }
	.art-comment__reply { font-size: 14px; }
	.art-comment__reaction { font-size: 14px; padding: 6px 11px; }
	.art-comment__reaction-char { font-size: 15px; }
	.art-comment__picker-btn { width: 30px; height: 30px; }
	.art-comment__picker-item { font-size: 22px; }
	.art-comment__more-btn { width: 30px; height: 30px; }
	.art-comment__toggle { font-size: 14px; }

	.art-comment__replies { padding-left: 12px; }
	.art-comment--reply .art-comment__author { font-size: 16px; }
	.art-comment--reply .art-comment__text { font-size: 15px; }

	.art-empty { padding: 26px 18px; }
	.art-empty__title { font-size: 21px; }
	.art-empty__text { font-size: 15px; }
}

/* ═══════════════ Пусто ═══════════════ */
/* В духе блока «Станьте первой» на странице отзывов: объясняем,
   зачем писать, вместо сухой констатации пустоты. */
.art-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 24px;
	border-radius: 16px;
	background: linear-gradient(180deg, #faf8f4 0%, #f8f5f0 100%);
	text-align: center;
}

.art-empty__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 2px;
	border: 1px dashed rgba(201, 169, 97, .5);
	border-radius: 50%;
	color: #c9a961;
}

.art-empty__title {
	margin: 0;
	font-family: 'Forum', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: #1a1830;
}

.art-empty__text {
	max-width: 420px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #6e6a63;
}

.art-empty__btn {
	margin-top: 8px;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: #1a1830;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}

.art-empty__btn:hover {
	background: #2f2b4a;
	color: #fff;
	transform: translateY(-1px);
}

@media (max-width: 580px) {
	.art-empty { padding: 26px 18px; }
	.art-empty__title { font-size: 21px; }
}

/* Гостю поле выглядит так же, но набирать в нём нечего —
   клик открывает лайтбокс. */
.art-composer.is-guest .art-composer__closed { cursor: pointer; }

/* ═══════════════ Смайлики ═══════════════ */
/* По макету: круглая кнопка в футере поля, панель всплывает над ней.
   Набор разбит на группы и прокручивается: в коротком списке человек
   не находит нужного смайлика и бросает затею. */
.art-composer__emoji { position: relative; }

.art-composer__emoji-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #f2f1ef;
	color: #6e6a63;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, color .2s ease;
}

.art-composer__emoji-btn:hover {
	background: #e6e4e0;
	color: #1a1830;
	transform: scale(1.06);
}

.art-composer__emoji.is-open .art-composer__emoji-btn {
	background: #1a1830;
	color: #fff;
}

.art-composer__emoji-panel {
	position: absolute;
	left: 0;
	bottom: calc(100% + 12px);
	z-index: 30;
	display: flex;
	flex-direction: column;
	width: 328px;
	border: 1px solid #e4e0d8;
	border-radius: 16px;
	background: #fff;
	/* Тень плотнее, чем у прочих всплывашек: панель ложится поверх
	   светлого поля и без неё сливается с ним. */
	box-shadow: 0 20px 48px rgba(30, 25, 15, .2), 0 2px 8px rgba(30, 25, 15, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(.96);
	transform-origin: bottom left;
	transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
	overflow: hidden;
}

.art-composer__emoji.is-open .art-composer__emoji-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.art-composer__emoji-head {
	padding: 12px 14px;
	border-bottom: 1px solid #f0ede7;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a857c;
	background: #fbfaf8;
}

.art-composer__emoji-scroll {
	max-height: 268px;
	padding: 10px 12px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #d8d4cc transparent;
}

.art-composer__emoji-scroll::-webkit-scrollbar { width: 6px; }
.art-composer__emoji-scroll::-webkit-scrollbar-thumb {
	background: #d8d4cc;
	border-radius: 3px;
}

.art-composer__emoji-group + .art-composer__emoji-group { margin-top: 12px; }

.art-composer__emoji-title {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a9a39a;
}

.art-composer__emoji-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.art-composer__emoji-item {
	padding: 6px 0;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 21px;
	line-height: 1.15;
	cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}

.art-composer__emoji-item:hover {
	background: #f2f1ef;
	transform: scale(1.2);
}

@media (max-width: 580px) {
	.art-composer__emoji-panel { width: min(328px, calc(100vw - 48px)); }
	.art-composer__emoji-scroll { max-height: 230px; }
}

/* ─────────────────────────────────────────────────────────────
   МОБИЛЬНАЯ ВЕРСИЯ 1:1 по макету «Обсуждение — мобильная (офлайн).html»
   Только визуал (типографика, цвета, радиусы, паддинги),
   логика/HTML не трогаются.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {

	/* Внешняя обёртка карточки: убираем двойной padding — колонка статьи
	   уже даёт свой отступ, .art-comments должен занимать всю ширину. */
	.art-comments {
		max-width: 100%;
		padding: 0;
		margin: 32px 0 0;
	}
	.art-comments__card {
		background: #FFFFFF;
		border: 1px solid #E1E0DD;
		border-radius: 26px;
		padding: 20px 16px;
		box-shadow: none;
	}

	/* ── Оценка статьи ── */
	.art-rating {
		display: flex;
		align-items: center;
		gap: 14px;
		background: #FBFAF8;
		border: 1px solid #EFEEEB;
		border-radius: 16px;
		padding: 16px;
		margin: 0 0 20px;
	}
	.art-rating__label {
		flex: 1 1 0;
		min-width: 0;
		font: 800 15px/1.25 'Manrope', sans-serif;
		color: #16171A;
		margin: 0 0 8px;
	}
	.art-rating__stars { gap: 4px; }
	.art-rating__star {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
		color: #DDDCD8;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		transition: color .16s ease;
	}
	.art-rating__star.is-filled,
	.art-rating__stars:hover .art-rating__star { color: #B4903C; }
	.art-rating__stars .art-rating__star:hover ~ .art-rating__star { color: #DDDCD8; }
	.art-rating__meta {
		flex: 0 0 auto;
		width: 104px;
		padding-left: 14px;
		border-left: 1px solid #EAE8E4;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}
	.art-rating__value,
	.art-rating .js-rating-average {
		font: 400 34px/1 'Forum', Georgia, serif;
		color: #16171A;
	}
	.art-rating__votes {
		font: 400 13px/1.2 'Manrope', sans-serif;
		color: #8A857C;
		white-space: nowrap;
	}
	.art-rating__msg { display: none; }
	/* Левая колонка = label + stars стеком */
	.art-rating > :first-child { display: contents; }
	.art-rating .art-rating__label,
	.art-rating .art-rating__stars {
		flex: none;
	}
	/* Если у нас первая нода — просто label, а stars — сестра, соберём в колонку */
	.art-rating {
		flex-wrap: wrap;
	}
	.art-rating__label { flex-basis: calc(100% - 118px); }
	.art-rating__stars { flex-basis: calc(100% - 118px); }

	/* ── Заголовок «Обсуждение» + подпись ── */
	.art-comments__prompt {
		display: block;
		margin: 0 0 12px;
		padding: 0;
		background: transparent;
		border: 0;
	}
	.art-comments__prompt-avatar { display: none; }
	.art-comments__prompt-name { display: none; }
	.art-comments__prompt-text {
		font: 400 26px/1.15 'Forum', Georgia, serif;
		color: #16171A;
		margin: 0 0 8px;
	}
	.art-comments__prompt-desc {
		font: 400 15px/1.5 'Manrope', sans-serif;
		color: #6E6A63;
		margin: 0 0 16px;
	}

	/* ── Компактная строка ввода (свёрнутый composer) ──
	   В шаблоне composer.php внутри свёрнутого состояния только placeholder + send.
	   Аватара в DOM нет — добавляем через ::before на pane-обёртке. */
	.art-composer__pane--closed {
		display: flex;
		align-items: center;
		gap: 10px;
		max-height: none !important; /* убираем grid-row анимационное ограничение */
		overflow: visible !important;
	}
	/* Аватар слева от pill — на телефоне скрываем, поле «Написать комментарий»
	   расширяется на всю доступную ширину. */
	.art-composer__pane--closed::before { content: none; display: none; }
	.art-composer__closed {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		background: #F2F1EF;
		border: 0;
		border-radius: 999px;
		padding: 6px 6px 6px 18px;
		cursor: text;
		text-align: left;
		transition: background .2s ease;
	}
	.art-composer__closed:hover { background: #EDEBE7; }
	.art-composer__placeholder {
		flex: 1 1 0;
		font: 400 15px/1.35 'Manrope', sans-serif;
		color: #9C968C;
		text-align: left;
	}
	.art-composer__send {
		width: 40px; height: 40px;
		flex: 0 0 auto;
		border-radius: 50%;
		background: #3F5F4C;
		color: #FFFFFF;
		border: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.art-composer__send svg { display: block; }

	/* Подсказка «Ctrl + Enter — отправить» — на телефоне физ. клавиатуры нет,
	   скрываем чтобы не занимала место в тесном composer. */
	.art-composer__hint { display: none !important; }

	/* ── Бар «Комментарии + сортировка» —
	   без бокового padding, только вертикальный, чтобы «Комментарии» и чип
	   не переносились на две строки на узком экране. */
	.art-comments__bar {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 20px 0 12px;
		margin: 0;
		border: 0;
		flex-wrap: nowrap;
	}
	.art-comments__title { white-space: nowrap; }
	.art-comments__sort { white-space: nowrap; flex: 0 0 auto; }
	.art-comments__sort .js-comments-sort-label { white-space: nowrap; }
	.art-comments__title {
		font: 800 15px/1 'Manrope', sans-serif;
		color: #16171A;
	}
	.art-comments__title .js-comments-count { color: #A9A39A; margin-left: 6px; }
	.art-comments__sort {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: #F2F1EF;
		color: #4A473F;
		border: 0;
		border-radius: 999px;
		padding: 9px 14px;
		font: 700 14px/1 'Manrope', sans-serif;
		cursor: pointer;
	}

	/* ── Список комментариев ──
	   Явно фиксируем полную ширину списка и его детей + border-box,
	   чтобы никакие узкие правила (padding/rem-масштаб темы) не сжимали
	   карточку меньше внутреннего контента. */
	.art-comments__list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 0;
		margin: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.art-comments__list > * { width: 100%; box-sizing: border-box; }

	/* ── Карточка комментария ──
	   В шаблоне item.php прямые дети .art-comment: [.art-comment__avatar] + [.art-comment__body].
	   Поэтому корень — flex row (avatar слева, body занимает остальное). */
	.art-comment {
		position: relative;                 /* якорь для ⋯-меню (см. .art-comment__more ниже) */
		background: #FBFAF8;
		border: 1px solid #EFEEEB;
		border-radius: 18px;
		/* Боковой padding убран — контент прибит к правому и левому краям карточки.
		   Аватар и body получают собственные margin/padding, чтобы не залипать. */
		padding: 14px 0 14px 0;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.art-comment > .art-comment__avatar { margin-left: 14px; }
	.art-comment > .art-comment__body {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;   /* правый край body = правый край карточки — «Ответить» прибит к правому краю */
	}
	.art-comment__head { padding-right: 42px; }  /* оставляем место под абсолютное ⋯ */
	.art-comment__text { padding-right: 14px; }
	.art-comment__actions {
		/* Растягиваем actions за пределы body слева — так реакции прижимаются к левому краю карточки,
		   а «Ответить» (margin-left:auto) — к правому краю карточки. */
		margin: 4px 0 0 -46px;   /* 34 (avatar) + 12 (gap) */
		padding: 0 8px 0 4px;
		display: flex;
		align-items: center;
		gap: 4px;
		flex-wrap: nowrap;
	}
	/* Ужимаем внутренние кнопки, чтобы влез весь ряд + «Ответить» справа */
	.art-comment__vote { padding: 0 6px !important; height: 34px !important; gap: 4px !important; }
	.art-comment__reaction { padding: 0 8px !important; height: 34px !important; gap: 4px !important; }
	.art-comment__picker-btn { width: 28px !important; height: 28px !important; font-size: 16px !important; }
	.art-comment__reply { padding: 8px 12px !important; }

	/* ── Композер, переехавший внутрь карточки после «Ответить» ──
	   JS через body.appendChild(composer) переносит его сюда и вызывает
	   openComposer(). Здесь принудительно показываем форму ввода независимо
	   от is-open (иначе на мобилке из-за display:flex на pane--closed
	   grid-template-rows:0fr не срабатывает и пользователь ничего не видит). */
	.art-comment .art-composer {
		margin: 12px 0 0 -46px;                  /* тянем к левому краю карточки за пределы аватара + gap */
		padding: 12px 14px 4px;
		border-top: 1px solid #EFEEEB;
		animation: bzArtReplySlide .28s ease-out both;
		display: block;
	}
	.art-comment .art-composer__pane--closed { display: none !important; }
	/* Пере­записываем grid-анимацию базового CSS: внутри карточки форма
	   должна быть сразу видна, без transition из 0fr → 1fr. */
	.art-comment .art-composer__pane {
		display: block !important;
		grid-template-rows: none !important;
		transition: none !important;
	}
	.art-comment .art-composer__pane--open {
		max-height: none !important;
		overflow: visible !important;
	}
	.art-comment .art-composer__open {
		opacity: 1 !important;
		transform: none !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		overflow: visible !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		pointer-events: auto !important;
	}
	.art-comment .art-composer__avatar { display: none; }
	.art-comment .art-composer__field {
		background: #FFFFFF;
		border: 1px solid #E1E0DD;
		border-radius: 14px;
		padding: 12px 14px;
	}
	.art-comment .art-composer__textarea {
		min-height: 88px;
		border: 0;
		background: transparent;
		padding: 0;
		font: 400 15px/1.45 'Manrope', sans-serif;
		color: #16171A;
		width: 100%;
		resize: vertical;
	}
	/* Плашка «Ответ <имя>» с крестиком отмены — снимет привязку ответа,
	   composer вернётся наверх, где будет обычным комментарием. */
	.art-comment .art-composer__reply {
		margin: 0 0 8px;
		padding: 6px 10px 6px 12px;
		background: #F2F1EF;
		border-radius: 999px;
		font: 500 13px/1.3 'Manrope', sans-serif;
		color: #4A473F;
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.art-comment .art-composer__reply b { color: #16171A; font-weight: 700; }
	.art-comment .art-composer__reply-cancel {
		width: 22px; height: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.06);
		border: 0;
		border-radius: 50%;
		color: #4A473F;
		font: 500 16px/1 'Manrope', sans-serif;
		cursor: pointer;
		padding: 0;
		margin-left: 4px;
		transition: background .15s ease;
	}
	.art-comment .art-composer__reply-cancel:hover { background: rgba(0,0,0,.12); }
	@keyframes bzArtReplySlide {
		from { opacity: 0; transform: translateY(-8px); }
		to { opacity: 1; transform: none; }
	}

	/* Inline-composer рендерится через свою секцию ниже (вне мобильного media),
	   чтобы одинаково выглядеть на ПК и мобилке. */

	/* Старая guest-composer сохраняем — не удаляем чтобы не сломать возможные старые ссылки */
	.art-guest-composer {
		margin: 12px 0 0 -46px;
		padding: 12px 14px;
		border-top: 1px solid #EFEEEB;
		display: flex;
		flex-direction: column;
		gap: 10px;
		animation: bzArtReplySlide .24s ease-out both;
	}
	.art-guest-composer__tag {
		font: 500 13px/1.3 'Manrope', sans-serif;
		color: #6E6A63;
	}
	.art-guest-composer__tag b { color: #16171A; font-weight: 700; }
	.art-guest-composer__ta {
		width: 100%;
		min-height: 72px;
		max-height: 240px;
		padding: 12px 14px;
		border: 1px solid #E1E0DD;
		border-radius: 12px;
		background: #FFFFFF;
		font: 400 15px/1.45 'Manrope', sans-serif;
		color: #16171A;
		resize: none;
		outline: none;
		transition: border-color .16s ease;
		box-sizing: border-box;
	}
	.art-guest-composer__ta:focus { border-color: #3F5F4C; }
	.art-guest-composer__ta::placeholder { color: #9C968C; }
	.art-guest-composer__actions {
		display: flex;
		gap: 8px;
		justify-content: flex-end;
	}
	.art-guest-composer__btn {
		padding: 10px 18px;
		border-radius: 999px;
		font: 700 14px/1 'Manrope', sans-serif;
		border: 0;
		background: transparent;
		color: #4A473F;
		cursor: pointer;
		transition: background .16s ease;
	}
	.art-guest-composer__btn:hover { background: #F5F3EF; }
	.art-guest-composer__btn--primary {
		background: #3F5F4C;
		color: #FFFFFF;
	}
	.art-guest-composer__btn--primary:hover { background: #34503F; }
	.art-comment__avatar {
		width: 34px; height: 34px;
		border-radius: 50%;
		color: #FFFFFF;
		font: 800 14px/1 'Manrope', sans-serif;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		/* background задаётся inline в item.php через ig_comment_avatar_color() */
	}
	.art-comment__body {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.art-comment__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}
	.art-comment__head .art-comment__badge-author,
	.art-comment__head .art-comment__badge-pending { margin-top: 2px; }
	.art-comment__author {
		font: 700 15px/1.2 'Manrope', sans-serif;
		color: #16171A;
	}
	.art-comment__time {
		font: 400 13px/1.2 'Manrope', sans-serif;
		color: #A9A39A;
	}
	.art-comment__text,
	.art-comment__body {
		font: 400 16px/1.5 'Manrope', sans-serif;
		color: #24242A;
		margin: 0;
	}
	.art-comment__actions {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-top: 2px;
		flex-wrap: wrap;
	}
	/* Порядок: [👍][👎][реакции][+пикер] ... [«Ответить» справа]. */
	.art-comment__reply { order: 20; margin-left: auto; }
	.art-comment__vote { order: 1; }
	.art-comment__vote--dislike { order: 2; }
	.art-comment__reactions { display: contents; }
	.art-comment__reaction { order: 5; }
	/* «+» пикер реакции — маленькая круглая кнопка рядом с реакциями */
	.art-comment__picker { order: 10; position: static; }
	.art-comment__picker-btn {
		width: 32px; height: 32px;
		border-radius: 50%;
		background: #F2F1EF;
		color: #6E6A63;
		border: 0;
		font: 400 20px/1 'Manrope', sans-serif;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		flex: 0 0 auto;
		transition: background .16s ease;
	}
	.art-comment__picker-btn:hover,
	.art-comment__picker.is-open .art-comment__picker-btn { background: #E4E1DC; }
	/* На мобилке panel превращаем в bottom-sheet: фикс к нижнему краю,
	   табы сверху, категория ниже, ручка + затемнение. */
	.art-comment__picker-panel {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100vw;
		max-width: 100vw;
		margin: 0;
		padding: 28px 16px calc(22px + env(safe-area-inset-bottom, 0px));
		border-radius: 22px 22px 0 0;
		border: 0;
		box-shadow: 0 -20px 60px rgba(20, 15, 12, .28);
		transform: translateY(100%);
		transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s ease, visibility .3s;
	}
	.art-comment__picker.is-open .art-comment__picker-panel {
		transform: translateY(0);
	}
	/* Ручка сверху */
	.art-comment__picker-panel > .art-picker__tabs { position: relative; }
	.art-comment__picker-panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 42px;
		height: 4px;
		border-radius: 999px;
		background: #E5DAC5;
	}
	/* Подложка-затемнение при открытой шторке */
	.art-comment__picker.is-open::after {
		content: "";
		position: fixed;
		inset: 0;
		bottom: 0;
		background: rgba(20, 15, 12, .48);
		z-index: 19;
		animation: bzPickerFadeIn .2s ease-out both;
	}
	.art-picker__cat {
		grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
		gap: 6px !important;
	}
	.art-comment__picker-item {
		height: 56px;
		font-size: 30px;
	}
	.art-picker__tab { padding: 10px 16px; font-size: 14px; }
	@keyframes bzPickerFadeIn { from { opacity: 0 } to { opacity: 1 } }
	/* ⋯ меню — крепим в верхний правый угол карточки (padding-right у .art-comment оставлен под неё). */
	.art-comment__more {
		position: absolute;
		top: 12px;
		right: 10px;
		order: unset;
		margin: 0;
	}
	.art-comment__more-btn {
		width: 30px; height: 30px;
		border-radius: 50%;
		background: transparent;
		border: 0;
		color: #A9A39A;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		padding: 0;
	}
	.art-comment__more-btn:hover { background: rgba(0,0,0,.04); color: #6E6A63; }
	.art-comment__more-btn svg { display: block; }
	/* Dropdown menu — оставляем поведение из основной части CSS (открывается через .is-open),
	   тут только позиционируем над правым краем карточки. */
	.art-comment__more .art-comment__menu {
		top: 34px;
		right: 0;
	}
	.art-comment__reaction {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		padding: 0 14px;
		border-radius: 999px;
		background: #F2F1EF;
		color: #4A473F;
		border: 0;
		font: 700 14px/1 'Manrope', sans-serif;
		cursor: pointer;
		white-space: nowrap;
		flex: 0 0 auto;
		transition: background .18s ease, color .18s ease;
	}
	.art-comment__reaction.is-active { background: #FBE9E7; color: #A8322D; }
	.art-comment__reaction-char { font-size: 15px; }
	.art-comment__reaction-count { font-variant-numeric: tabular-nums; }
	.art-comment__reply {
		margin-left: auto;
		font: 700 14px/1 'Manrope', sans-serif;
		color: #3F5F4C;
		background: transparent;
		border: 1px solid #C9D6CB;
		border-radius: 999px;
		padding: 9px 14px;
		cursor: pointer;
		transition: background .18s ease;
	}
	.art-comment__reply:hover { background: #F1F5F1; }

	/* Автор-бейдж */
	.art-comment__badge-author {
		font: 800 11px/1 'Manrope', sans-serif;
		color: #FFFFFF;
		background: #3F5F4C;
		border-radius: 5px;
		padding: 3px 7px;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
	.art-comment__badge-pending {
		font: 700 11px/1 'Manrope', sans-serif;
		color: #8A6A1E;
		background: #F6EEDC;
		border-radius: 5px;
		padding: 3px 7px;
	}

	/* Ветка ответов внутри карточки */
	.art-comment__replies {
		padding-left: 14px;
		border-left: 2px solid #E6E4E0;
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 2px;
	}
	.art-comment--reply {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
		gap: 6px;
	}
	.art-comment--reply .art-comment__avatar { width: 30px; height: 30px; font-size: 13px; }
	.art-comment--reply .art-comment__author { font-size: 14px; }
	.art-comment--reply .art-comment__text,
	.art-comment--reply .art-comment__body { font-size: 15px; }
	.art-comment--reply .art-comment__reply {
		border: 0;
		padding: 0;
		color: #4A473F;
		background: transparent;
	}

	/* Свёрнутая ветка «Показать N ответов» */
	.art-comment__toggle {
		align-self: flex-start;
		font: 700 14px/1 'Manrope', sans-serif;
		color: #3F5F4C;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
	.art-comment__toggle-line { display: none; }

	/* «Ещё N комментариев» — большая серая кнопка внизу */
}

/* На узких экранах отдельно — увеличенная зона для тапа звёзд */
@media (max-width: 420px) {
	.art-rating { padding: 14px; }
	.art-rating__meta { width: 92px; padding-left: 10px; }
	.art-rating__value,
	.art-rating .js-rating-average { font-size: 30px; }
	.art-comments__card { padding: 18px 14px; border-radius: 22px; }
	/* Padding на карточке комментария не ужимаем — «дыхание» важнее.
	   ⋯ меню всё равно помещается в правый верхний угол при 46px reserved. */
}

/* ═══════════════ Inline-composer «Ответить» ═══════════════
   Единая форма для гостя и авторизованного. Белая, от края до края
   комментария, плавно раскрывается снизу. Не зависит от media query. */

/* ═══════════════════════════════════════════════════════════════════
   Inline-composer «Ответить» — единая чистая версия

   Логика: JS добавляет .art-composer--inline как прямой потомок
   .art-comment. Карточка использует flex-wrap, форма занимает
   отдельную строку во всю ширину (flex-basis: 100%). Пока форма
   открыта, .art-comment фон становится белым через :has().
   ═══════════════════════════════════════════════════════════════════ */

/* Форма занимает свою flex-row на всю ширину карточки */
.art-comment:has(> .art-composer--inline) { flex-wrap: wrap; }
.art-comment > .art-composer--inline { flex: 0 0 100%; width: 100%; }

/* Карточка становится белой пока форма открыта — убирает бежевый фон */
.art-comment:has(.art-composer--inline.is-mounted) {
	background: #FFFFFF;
	border-color: #EAE9E6;
}

/* Обёртка формы: анимация max-height + opacity + margin-top */
.art-composer--inline {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	border-top: 1px solid transparent;
	transition:
		max-height   .34s cubic-bezier(.2, .8, .3, 1),
		opacity      .22s ease,
		margin-top   .34s ease,
		padding-top  .34s ease,
		border-color .34s ease;
}
.art-composer--inline.is-mounted {
	max-height: 520px;
	opacity: 1;
	margin-top: 14px;
	padding-top: 14px;
	border-top-color: #EFEEEB;
}
.art-composer--inline.is-closing {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	border-top-color: transparent;
}

/* Внутренние обнуления: убиваем базовые стили main composer'а */
.art-composer--inline > .art-composer__pane,
.art-composer--inline .art-composer__open,
.art-composer--inline .art-composer__field {
	all: unset;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Чип «Ответ Александр» */
.art-composer--inline .art-composer__reply {
	all: unset;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: #F1F5F1;
	color: #2C5D43;
	border-radius: 999px;
	font: 500 12px/1.2 'Manrope', sans-serif;
}
.art-composer--inline .art-composer__reply b {
	color: #16171A;
	font-weight: 700;
}

/* Textarea во всю ширину */
.art-composer--inline .art-composer__textarea {
	all: unset;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 96px;
	max-height: 240px;
	padding: 12px 14px;
	border: 1px solid #E1E0DD;
	border-radius: 10px;
	background: #FBFAF8;
	font: 400 15px/1.45 'Manrope', sans-serif;
	color: #16171A;
	resize: none;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.art-composer--inline .art-composer__textarea:focus {
	border-color: #3F5F4C;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(63, 95, 76, .12);
}
.art-composer--inline .art-composer__textarea::placeholder {
	color: #9C968C;
}

/* Footer — Ctrl+Enter слева, кнопки справа */
.art-composer--inline .art-composer__foot {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.art-composer--inline .art-composer__hint {
	font: 500 12px/1.3 'Manrope', sans-serif;
	color: #8A857C;
}
.art-composer--inline .art-composer__buttons {
	all: unset;
	display: flex;
	gap: 8px;
}
.art-composer--inline .art-composer__cancel,
.art-composer--inline .art-composer__submit {
	all: unset;
	cursor: pointer;
	padding: 9px 18px;
	border-radius: 999px;
	font: 700 13px/1 'Manrope', sans-serif;
	transition: background .16s ease, color .16s ease;
}
.art-composer--inline .art-composer__cancel {
	color: #4A473F;
}
.art-composer--inline .art-composer__cancel:hover {
	background: #F2F1EF;
}
.art-composer--inline .art-composer__submit {
	background: #3F5F4C;
	color: #FFFFFF;
}
.art-composer--inline .art-composer__submit:hover {
	background: #34503F;
}
.art-composer--inline .art-composer__submit:disabled {
	opacity: .55;
	cursor: default;
}
.art-composer--inline .art-composer__error {
	font: 500 13px/1.3 'Manrope', sans-serif;
	color: #A8322D;
	margin: 0;
}

/* На мобилке скрываем подсказку Ctrl+Enter — физ. клавиатуры нет */
@media (max-width: 820px) {
	.art-composer--inline .art-composer__hint { display: none; }
	.art-composer--inline.is-mounted { margin-top: 12px; padding-top: 12px; }
	.art-composer--inline .art-composer__textarea { min-height: 84px; padding: 10px 12px; font-size: 14px; }
	.art-composer--inline .art-composer__cancel,
	.art-composer--inline .art-composer__submit { padding: 8px 14px; font-size: 13px; }
}

/* ═══════════════ «Нравится / Не нравится» — отдельный слот голоса ═══════════════
   Кастомная SVG-иконка в бордовом цвете, всегда видимая. Не эмодзи — не превращается
   Safari в цветной стикер. Слот независим от эмодзи-реакций (см. CommentService.php:
   isVote → отдельный запрос по (like,dislike), эмодзи-реакции не затрагивает). */
.art-comment__vote {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #9E2B1E;
	font: 700 14px/1 'Manrope', sans-serif;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background .18s ease, color .18s ease, transform .12s ease;
}
.art-comment__vote:hover { background: rgba(158, 43, 30, .08); }
.art-comment__vote:active { transform: scale(.94); }
.art-comment__vote-ico { display: block; }
.art-comment__vote-count { font-variant-numeric: tabular-nums; color: inherit; }
.art-comment__vote.is-active {
	background: rgba(158, 43, 30, .12);
	color: #7E211D;
}
.art-comment__vote .art-comment__vote-ico { opacity: .55; transition: opacity .16s ease; }
.art-comment__vote:hover .art-comment__vote-ico,
.art-comment__vote.is-active .art-comment__vote-ico { opacity: 1; }
.art-comment__vote--dislike { color: #6E6A63; }
.art-comment__vote--dislike:hover { background: rgba(110, 106, 99, .1); color: #4A473F; }
.art-comment__vote--dislike.is-active {
	background: rgba(74, 71, 63, .12);
	color: #24242A;
}

/* ═══════════════ Bottom-sheet «Как показывать комментарии» ═══════════════
   Открывается кликом по сортировочному чипу. На ПК центрируется, на мобилке
   приезжает снизу как panel-sheet. */
.art-sort-sheet[hidden] { display: none !important; }
.art-sort-sheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.art-sort-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 15, 12, .48);
	opacity: 0;
	transition: opacity .22s ease;
}
.art-sort-sheet.is-open .art-sort-sheet__backdrop { opacity: 1; }
.art-sort-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #FFFDF8;
	border-radius: 22px 22px 0 0;
	padding: 22px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.2,.8,.3,1);
	box-shadow: 0 -20px 60px rgba(20, 15, 12, .28);
	max-height: 88dvh;
	overflow-y: auto;
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.art-sort-sheet.is-open .art-sort-sheet__panel { transform: none; }
.art-sort-sheet__grip {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: #E5DAC5;
}
.art-sort-sheet__title {
	font: 800 15px/1.25 'Manrope', sans-serif;
	color: #16171A;
	margin: 8px 4px 8px;
}
.art-sort-sheet__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid #EFEEEB;
	color: #16171A;
	cursor: pointer;
	text-align: left;
	transition: background .16s ease, border-color .16s ease;
	font-family: inherit;
}
.art-sort-sheet__opt:hover { background: #FAF8F4; }
.art-sort-sheet__opt.is-active {
	background: #F1F5F1;
	border-color: #C9D6CB;
}
.art-sort-sheet__opt-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.art-sort-sheet__opt-t {
	font: 700 16px/1.25 'Manrope', sans-serif;
	color: #16171A;
}
.art-sort-sheet__opt-d {
	font: 400 13px/1.35 'Manrope', sans-serif;
	color: #6E6A63;
}
.art-sort-sheet__check {
	width: 26px; height: 26px;
	border-radius: 50%;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: transparent;
	transition: background .16s ease, color .16s ease;
}
.art-sort-sheet__opt.is-active .art-sort-sheet__check {
	background: #3F5F4C;
	color: #FFFFFF;
}
.art-sort-sheet__cancel {
	margin-top: 4px;
	padding: 14px;
	border-radius: 14px;
	background: #F2F1EF;
	color: #3A3833;
	border: 0;
	font: 700 15px/1 'Manrope', sans-serif;
	cursor: pointer;
	transition: background .16s ease;
}
.art-sort-sheet__cancel:hover { background: #EDEBE7; }
body.art-sort-sheet-locked { overflow: hidden; }

/* На ПК показываем как центрированный modal, не bottom-sheet */
@media (min-width: 821px) {
	.art-sort-sheet { align-items: center; }
	.art-sort-sheet__panel {
		max-width: 420px;
		border-radius: 22px;
		transform: translateY(14px) scale(.98);
	}
	.art-sort-sheet.is-open .art-sort-sheet__panel { transform: none; }
	.art-sort-sheet__grip { display: none; }
	.art-sort-sheet__panel { padding: 20px 18px 18px; }
}