/**
 * FPS Forum Comments — embedded XenForo discussion styling
 *
 * Uses the same design tokens as the rest of the plugin
 * (surface #2c2c2c, border #444, text #e8e8e8, accent #007cba).
 */

/* ── Outer wrapper ────────────────────────────────────────────── */
.fps-forum-comments {
	margin-top: 48px;
	border-top: 1px solid #444;
	padding-top: 32px;
	font-family: inherit;
	color: #e8e8e8;
}

/* ── Section header ───────────────────────────────────────────── */
.fps-forum-comments__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.fps-forum-comments__title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: #e8e8e8;
}

.fps-forum-comments__join-btn {
	display: inline-flex;
	align-items: center;
	background: #2c2c2c;
	border: 1px solid #444;
	border-radius: 4px;
	color: #9a9a9a;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	text-decoration: none;
	transition: border-color 0.12s, color 0.12s;
	white-space: nowrap;
}

.fps-forum-comments__join-btn:hover {
	border-color: #007cba;
	color: #007cba;
}

/* ── Comment list ─────────────────────────────────────────────── */
.fps-forum-comments__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Single comment ───────────────────────────────────────────── */
.fps-forum-comment {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	padding: 20px 0;
	border-bottom: 1px solid #333;
}

.fps-forum-comment:last-child {
	border-bottom: none;
}

/* ── Avatar ───────────────────────────────────────────────────── */
.fps-forum-comment__avatar img,
.fps-forum-comment__avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.fps-forum-comment__avatar-placeholder {
	background: #3a3a3a;
	border: 1px solid #444;
	color: #9a9a9a;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}

/* ── Comment meta ─────────────────────────────────────────────── */
.fps-forum-comment__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.fps-forum-comment__author {
	font-size: 14px;
	font-weight: 600;
	color: #0a8ed4;
}

.fps-forum-comment__date {
	font-size: 12px;
	color: #9a9a9a;
}

.fps-forum-comment__date a {
	color: inherit;
	text-decoration: none;
}

.fps-forum-comment__date a:hover {
	color: #007cba;
}

.fps-forum-comment__reactions {
	font-size: 12px;
	color: #9a9a9a;
	margin-left: auto;
}

/* ── Comment body ─────────────────────────────────────────────── */
.fps-forum-comment__body {
	font-size: 14px;
	line-height: 1.65;
	color: #e8e8e8;
	word-break: break-word;
}

.fps-forum-comment__body p {
	margin: 0 0 10px;
}

.fps-forum-comment__body p:last-child {
	margin-bottom: 0;
}

.fps-forum-comment__body a {
	color: #0a8ed4;
	text-decoration: none;
}

.fps-forum-comment__body a:hover {
	text-decoration: underline;
}

/* ── Quoted text ────────────────────────────────────────────────*/
.fps-forum-comment__body .fps-xf-quote {
	background: #333;
	border-left: 3px solid #007cba;
	border-radius: 0 4px 4px 0;
	margin: 8px 0;
	padding: 10px 14px;
}

.fps-forum-comment__body .fps-xf-quote cite {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #9a9a9a;
	margin-bottom: 6px;
	font-style: normal;
}

.fps-forum-comment__body .fps-xf-quote p {
	margin: 0;
	color: #9a9a9a;
	font-size: 13px;
}

/* ── Inline code / code blocks ───────────────────────────────── */
.fps-forum-comment__body .fps-xf-code {
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 3px;
	color: #c9d1d9;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	padding: 2px 6px;
}

.fps-forum-comment__body pre.fps-xf-code {
	display: block;
	padding: 12px 14px;
	overflow-x: auto;
	line-height: 1.5;
}

/* ── Images ──────────────────────────────────────────────────── */
.fps-forum-comment__body .fps-xf-img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 6px 0;
}

/* ── Spoilers ─────────────────────────────────────────────────── */
.fps-forum-comment__body .fps-xf-spoiler {
	background: #333;
	border: 1px solid #444;
	border-radius: 4px;
	margin: 8px 0;
}

.fps-forum-comment__body .fps-xf-spoiler summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: #9a9a9a;
	padding: 8px 12px;
	user-select: none;
}

.fps-forum-comment__body .fps-xf-spoiler > div {
	padding: 8px 12px 12px;
}

/* ── Lists ────────────────────────────────────────────────────── */
.fps-forum-comment__body ul,
.fps-forum-comment__body ol {
	margin: 6px 0;
	padding-left: 22px;
}

.fps-forum-comment__body li {
	margin-bottom: 4px;
}

/* ── Empty / more states ──────────────────────────────────────── */
.fps-forum-comments__empty {
	padding: 20px 0;
}

.fps-forum-comments__empty p {
	color: #9a9a9a;
	font-size: 14px;
	margin: 0;
}

.fps-forum-comments__empty a {
	color: #0a8ed4;
	text-decoration: none;
}

.fps-forum-comments__more {
	padding: 20px 0 4px;
	text-align: center;
}

.fps-forum-comments__more a {
	color: #9a9a9a;
	font-size: 13px;
	text-decoration: none;
}

.fps-forum-comments__more a:hover {
	color: #007cba;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.fps-forum-comment {
		grid-template-columns: 1fr;
	}

	.fps-forum-comment__avatar {
		display: none;
	}

	.fps-forum-comments__header {
		flex-direction: column;
		align-items: flex-start;
	}
}