/* ==========================================================================
   Комментарии — оформление под тему hentaro
   --------------------------------------------------------------------------
   Подключается ПОСЛЕ styles222.css: там комментарии свёрстаны на float'ах
   с рамками #111 и десятипиксельным шрифтом. Селекторы здесь такие же
   одноклассовые (0,1,0), поэтому побеждают порядком загрузки, а не
   !important — если понадобится вернуть старый вид, достаточно убрать
   один <link>.
   ========================================================================== */

.comm-wrap, #dle-comments-list { }

/* --- Карточка ------------------------------------------------------------ */

.comm-item {
	display: flex;
	gap: 14px;
	/* Сбрасываем float-раскладку styles222 целиком: остатки padding-left:80px
	   и margin-left:-60px в flex-контексте дают съехавший аватар */
	float: none;
	padding: 16px;
	margin: 0 0 12px;
	border: 1px solid var(--glass-border, rgba(255,255,255,.09));
	border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.09));
	border-radius: var(--r-md, 14px);
	background: var(--glass-light, rgba(255,255,255,.045));
	font-size: 14px;
	color: var(--fg, #eef0f5);
	transition: border-color var(--t-fast, .16s);
}
.comm-item:hover { border-color: var(--glass-hi, rgba(255,255,255,.16)); }
.comm-item:last-child { margin-bottom: 0; }

/* --- Аватар -------------------------------------------------------------- */

.comm-left {
	flex: 0 0 auto;
	float: none;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--glass, rgba(28,31,40,.62));
}
.comm-left img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	display: block;
}

/* --- Правая часть -------------------------------------------------------- */

.comm-right {
	flex: 1 1 auto;
	float: none;
	width: auto;
	min-width: 0;
	padding: 0;
}

.comm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 10px;
	margin-bottom: 7px;
	padding: 0;
}

.comm-author {
	float: none;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg, #eef0f5);
}
.comm-author a { color: inherit; text-decoration: none; }
.comm-author a:hover { color: var(--accent, #ff2f52); }

.comm-group {
	padding: 2px 8px;
	border-radius: var(--r-pill, 999px);
	background: rgba(255,255,255,.07);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fg-muted, #a2a8b8);
}
/* Пустая группа не должна оставлять висящую пилюлю */
.comm-group:empty { display: none; }

.comm-date {
	float: none;
	margin-left: auto;
	font-size: 12px;
	color: var(--fg-dim, #6f7686);
	white-space: nowrap;
}

/* --- Текст --------------------------------------------------------------- */

.comm-text { margin: 0; min-height: 0; }

.comm-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fg, #eef0f5);
	overflow-wrap: anywhere;   /* длинная ссылка не должна распирать карточку */
}
.comm-body a { color: var(--accent, #ff2f52); }
.comm-body img { max-width: 100%; height: auto; border-radius: var(--r-sm, 10px); }

.signature {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--glass-border, rgba(255,255,255,.09));
	font-size: 12px;
	line-height: 1.45;
	color: var(--fg-dim, #6f7686);
}

/* --- Действия ------------------------------------------------------------ */
/* Появляются по наведению на карточку: пять ссылок под каждым комментарием
   перетягивают внимание с самого текста. На тач-устройствах наведения нет,
   поэтому там они видны всегда — см. медиазапрос ниже. */

.comm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 10px;
	opacity: 0;
	transition: opacity var(--t-fast, .16s);
}
.comm-item:hover .comm-actions,
.comm-item:focus-within .comm-actions { opacity: 1; }

.comm-act { font-size: 12px; color: var(--fg-dim, #6f7686); }
.comm-act:empty { display: none; }
.comm-act a { color: var(--fg-muted, #a2a8b8); text-decoration: none; }
.comm-act a:hover { color: var(--fg, #eef0f5); }
.comm-act.is-danger a:hover { color: var(--accent, #ff2f52); }
.comm-act i { margin-right: 5px; }

/* --- Форма добавления ---------------------------------------------------- */

.comm-item + #dle-comments-form,
#dle-comments-form { margin-top: 18px; }

/* --- Прочее -------------------------------------------------------------- */

.last-comm-link {
	margin-bottom: 8px;
	font-size: 12.5px;
	color: var(--fg-muted, #a2a8b8);
}
.last-comm-link a { color: var(--accent, #ff2f52); }

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (hover: none) {
	/* Без мыши раскрыть действия нечем */
	.comm-actions { opacity: 1; }
}

@media (max-width: 560px) {
	.comm-item { padding: 12px; gap: 10px; }
	.comm-left { width: 36px; height: 36px; }
	.comm-date { margin-left: 0; width: 100%; }
	.comm-body { font-size: 13.5px; }
}