.mcp-comments {
	--mcp-accent: #6C4CE0;
	--mcp-border: #e5e3f5;
	--mcp-bg: #ffffff;
	--mcp-text: #1d1d1f;
	--mcp-muted: #6b6b76;
	direction: rtl;
	text-align: right;
	max-width: 100%;
	box-sizing: border-box;
}

.mcp-comments *,
.mcp-comments *::before,
.mcp-comments *::after {
	box-sizing: border-box;
}

.mcp-comments__header {
	margin-bottom: 16px;
}

.mcp-comments__title {
	font-size: 1.3em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcp-comments__count {
	background: var(--mcp-accent);
	color: #fff;
	font-size: 0.6em;
	border-radius: 999px;
	padding: 2px 9px;
}

.mcp-comments__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mcp-comment {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	animation: mcp-fade-in .35s ease both;
}

.mcp-avatar {
	display: inline-block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
	background: #eee;
}

.mcp-avatar--circle {
	border-radius: 50%;
}

.mcp-avatar--square {
	border-radius: 0;
}

.mcp-avatar--rounded {
	border-radius: 10px;
}

.mcp-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mcp-accent);
	color: #fff;
	font-weight: 700;
	text-align: center;
}

.mcp-comment__body {
	flex: 1;
	min-width: 0;
}

.mcp-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.mcp-comment__identity {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.mcp-comment__name {
	font-weight: 700;
	color: var(--mcp-text);
	text-decoration: none;
}

a.mcp-comment__name:hover,
a.mcp-comment__name:focus {
	text-decoration: underline;
}

.mcp-comment__role {
	color: var(--mcp-muted);
	font-size: 0.85em;
}

.mcp-comment__badge {
	background: #ecebfb;
	color: var(--mcp-accent);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 0.75em;
	font-weight: 600;
}

.mcp-comment__date {
	color: var(--mcp-muted);
	font-size: 0.8em;
	margin-inline-start: auto;
}

.mcp-comment__content {
	line-height: 1.6;
	color: var(--mcp-text);
}

.mcp-comment__content p:first-child {
	margin-top: 0;
}

.mcp-comment__socials {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mcp-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f2f1fb;
	color: var(--mcp-accent);
	transition: transform .15s ease, background .15s ease;
}

.mcp-social-icon:hover,
.mcp-social-icon:focus-visible {
	background: var(--mcp-accent);
	color: #fff;
	transform: translateY(-1px);
	outline: 2px solid transparent;
}

.mcp-social-icon:focus-visible {
	outline: 2px solid var(--mcp-accent);
	outline-offset: 2px;
}

.mcp-comments__more {
	display: block;
	margin: 16px auto 0;
	padding: 8px 22px;
	background: none;
	border: 1px solid var(--mcp-accent);
	color: var(--mcp-accent);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.85em;
}

.mcp-comments__more:hover {
	background: var(--mcp-accent);
	color: #fff;
}

/* ---------- Style: cards ---------- */
.mcp-style-cards .mcp-comment {
	background: var(--mcp-bg);
	border: 1px solid var(--mcp-border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(20, 10, 60, .05);
}

/* ---------- Style: forum ---------- */
.mcp-style-forum .mcp-comment {
	border-bottom: 1px solid var(--mcp-border);
	padding-bottom: 16px;
}

/* ---------- Style: bubble ---------- */
.mcp-style-bubble .mcp-comment__body {
	background: #f5f4fc;
	border-radius: 16px;
	padding: 12px 16px;
	position: relative;
}

.mcp-style-bubble .mcp-comment__body::before {
	content: "";
	position: absolute;
	top: 14px;
	inset-inline-start: -6px;
	width: 12px;
	height: 12px;
	background: #f5f4fc;
	transform: rotate(45deg);
}

/* ---------- Style: timeline ---------- */
.mcp-style-timeline .mcp-comments__list {
	position: relative;
	padding-inline-start: 16px;
	border-inline-start: 2px solid var(--mcp-border);
}

.mcp-style-timeline .mcp-comment {
	position: relative;
	padding-inline-start: 22px;
}

.mcp-style-timeline .mcp-comment::before {
	content: "";
	position: absolute;
	inset-inline-start: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mcp-accent);
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--mcp-border);
}

/* ---------- Style: compact (great for WooCommerce) ---------- */
.mcp-style-compact .mcp-comment {
	padding: 8px 0;
	border-bottom: 1px solid var(--mcp-border);
}

.mcp-style-compact .mcp-comment__content {
	font-size: 0.92em;
}

/* ---------- Style: system ---------- */
.mcp-style-system .mcp-comment {
	background: #f7f6ff;
	border-inline-start: 4px solid var(--mcp-accent);
	border-radius: 8px;
	padding: 12px 16px;
}

.mcp-style-system .mcp-avatar {
	display: none;
}

/* Responsive */
@media (max-width: 600px) {
	.mcp-comment {
		gap: 8px;
	}

	.mcp-avatar {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
	}

	.mcp-comment__date {
		margin-inline-start: 0;
		flex-basis: 100%;
	}

	.mcp-comments__title {
		font-size: 1.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcp-comment {
		animation: none;
	}

	.mcp-social-icon {
		transition: none;
	}
}

@keyframes mcp-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}