.comments-section {
	background: #1e2128;
	border-radius: 16px;
	padding: 1.25rem;
	box-sizing: border-box;
}

	.comments-section .fw-bold {
		color: #f1f1f1;
	}

.comment-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 12px;
	background: #262a33;
	border: 1px solid #3a3f4b;
	max-width: 100%;
	box-sizing: border-box;
	transition: background .15s ease;
}

	.comment-item:hover {
		background: #2a2e38;
	}

.comment-avatar img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #3a3f4b;
	flex-shrink: 0;
}

.comment-body {
	flex-grow: 1;
	min-width: 0;
}

.comment-header {
	display: block; /* убираем space-between */
}

.comment-author {
	font-weight: 600;
	color: #f1f1f1;
	margin-right: 6px;
}

.comment-text {
	display: inline;
	white-space: pre-wrap;
	line-height: 1.4;
	color: #cfd3da;
	overflow-wrap: break-word;
	word-break: break-word;
}

.comment-date {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: #6c7280;
}

.comments-section .text-muted {
	color: #6c7280 !important;
}

/* ── Поле добавления комментария ── */
.add-comment textarea {
	resize: vertical;
	background: #262a33;
	border: 1px solid #3a3f4b;
	color: #ffffff;
	border-radius: 10px;
}

	.add-comment textarea::placeholder {
		color: #6c7280;
	}

	.add-comment textarea:focus {
		outline: none;
		border-color: #20c9c9;
		background: #2a2e38;
		box-shadow: none;
	}

.add-comment .btn-primary {
	background: #20c9c9;
	border: none;
	color: #0d1b1b;
	font-weight: 600;
	transition: background .15s ease;
}

	.add-comment .btn-primary:hover {
		background: #4fe0e0;
		color: #0d1b1b;
	}

.add-comment textarea.form-control {
	resize: vertical;
	background: #262a33 !important;
	border: 1px solid #3a3f4b !important;
	color: #ffffff !important;
	border-radius: 10px;
}

.comment-item--mine {
	background: rgba(32, 201, 201, 0.1);
	border-color: #20c9c9;
}

	.comment-item--mine:hover {
		background: rgba(32, 201, 201, 0.15);
	}

	.comment-item--mine .comment-avatar img {
		border-color: #20c9c9;
	}