/* ============================================================
   COMMENTS — themed, threaded, AJAX
   Loaded on top of tmohentai-polish.css
   ============================================================ */

.tmo-cmts {
	background: var(--tmo-bg-2);
	border: 1px solid var(--tmo-line);
	border-radius: 12px;
	padding: 22px 22px 18px;
	margin-top: 28px;
}

.tmo-cmts-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tmo-line);
	margin-bottom: 16px;
}
.tmo-cmts-head h2 {
	color: var(--tmo-ink);
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.tmo-cmts-head h2 .cmts-count {
	background: var(--tmo-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 9px;
	border-radius: 9999px;
	min-width: 22px;
	text-align: center;
	letter-spacing: 0;
}
.tmo-cmts-head .cmts-closed-pill {
	margin-left: auto;
	font-size: 11px;
	color: var(--tmo-ink-3);
	background: var(--tmo-bg-3);
	padding: 3px 10px;
	border-radius: 9999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Login prompt */
.tmo-cmts-loginprompt {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: rgba(217, 58, 58, 0.08);
	border: 1px solid rgba(217, 58, 58, 0.32);
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 13px;
	color: var(--tmo-ink-2);
	margin-bottom: 18px;
}
.tmo-cmts-loginprompt > i {
	color: var(--tmo-accent);
	font-size: 16px;
}
.tmo-cmts-loginprompt a {
	color: var(--tmo-accent);
	font-weight: 700;
	text-decoration: underline;
}
.tmo-cmts-loginprompt .tmo-cmts-cta {
	margin-left: auto;
	background: var(--tmo-accent);
	color: #fff !important;
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: background 0.15s;
}
.tmo-cmts-loginprompt .tmo-cmts-cta:hover { background: var(--tmo-accent-hover); }

/* Form */
.tmo-cmts-form { margin-bottom: 22px; }
.cmts-form-row { display: flex; gap: 12px; align-items: flex-start; }
.cmts-form-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--tmo-accent);
	object-fit: cover;
}
.cmts-form-input { flex: 1; min-width: 0; }
.cmts-form-input textarea {
	width: 100%;
	background: var(--tmo-bg);
	border: 1px solid var(--tmo-line);
	color: var(--tmo-ink);
	border-radius: 8px;
	padding: 11px 13px;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
	min-height: 78px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.cmts-form-input textarea:focus {
	border-color: var(--tmo-accent);
	box-shadow: 0 0 0 3px rgba(217, 58, 58, 0.18);
}
.cmts-form-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.cmts-form-as { color: var(--tmo-ink-3); font-size: 11px; }
.cmts-form-as strong { color: var(--tmo-ink); }
.cmts-form-actions { display: flex; gap: 8px; }

.tmo-cmts-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tmo-bg-3);
	border: 1px solid var(--tmo-line);
	color: var(--tmo-ink);
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.tmo-cmts-btn:hover { background: var(--tmo-bg); }
.tmo-cmts-btn-primary {
	background: var(--tmo-accent);
	border-color: var(--tmo-accent);
	color: #fff;
}
.tmo-cmts-btn-primary:hover { background: var(--tmo-accent-hover); border-color: var(--tmo-accent-hover); }
.tmo-cmts-btn-cancel:hover { color: var(--tmo-accent); border-color: var(--tmo-accent); }
.tmo-cmts-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.tmo-cmts-msg {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}
.tmo-cmts-msg.is-error   { color: #f87171; background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.32); }
.tmo-cmts-msg.is-success { color: #4ade80; background: rgba(40,167,69,.12); border: 1px solid rgba(40,167,69,.32); }

/* List */
.tmo-cmts-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tmo-cmts-list .children {
	list-style: none;
	padding-left: 24px;
	margin: 0;
	border-left: 2px solid var(--tmo-line);
	margin-left: 18px;
	margin-top: 4px;
}

.tmo-cmt {
	padding: 14px 0;
	border-bottom: 1px dashed var(--tmo-line);
}
.tmo-cmts-list > .tmo-cmt:last-child { border-bottom: none; }
.tmo-cmts-list .children > .tmo-cmt:last-child { border-bottom: none; }

.cmt-row { display: flex; gap: 12px; align-items: flex-start; }
.cmt-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--tmo-bg-3);
	object-fit: cover;
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
	font-size: 12px;
}
.cmt-author {
	color: var(--tmo-ink);
	font-weight: 700;
	font-size: 13px;
}
.cmt-author.is-staff { color: var(--tmo-accent); }
.cmt-staff-badge {
	background: var(--tmo-accent);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	padding: 1px 6px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cmt-time {
	color: var(--tmo-ink-3);
	font-size: 11px;
	font-weight: 500;
}
.cmt-pending {
	color: #fbbf24;
	background: rgba(251, 191, 36, 0.12);
	border: 1px solid rgba(251, 191, 36, 0.32);
	padding: 1px 8px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cmt-content {
	color: var(--tmo-ink-2);
	line-height: 1.55;
	font-size: 14px;
	word-break: break-word;
}
.cmt-content p { margin: 0 0 8px; }
.cmt-content p:last-child { margin-bottom: 0; }
.cmt-content a { color: var(--tmo-accent); text-decoration: underline; }

.cmt-actions {
	margin-top: 8px;
	display: flex;
	gap: 8px;
}
.cmt-reply-btn {
	background: transparent;
	border: none;
	color: var(--tmo-ink-3);
	padding: 4px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color 0.15s, background 0.15s;
}
.cmt-reply-btn:hover { color: var(--tmo-accent); background: var(--tmo-bg-3); }

/* Empty state */
.tmo-cmts-empty {
	text-align: center;
	color: var(--tmo-ink-3);
	padding: 30px 14px;
	font-size: 13px;
}
.tmo-cmts-empty > i {
	font-size: 28px;
	display: block;
	margin-bottom: 6px;
	opacity: 0.4;
}

/* Animation: new comment appears */
@keyframes tmo-cmt-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
.tmo-cmt.is-new {
	animation: tmo-cmt-fade-in 0.32s ease;
	background: rgba(217, 58, 58, 0.05);
	border-radius: 8px;
	margin: 0 -8px;
	padding: 14px 8px;
}

/* Mobile */
@media (max-width: 600px) {
	.tmo-cmts { padding: 18px 14px; }
	.cmt-avatar, .cmts-form-avatar { width: 34px; height: 34px; }
	.tmo-cmts-list .children { padding-left: 16px; margin-left: 12px; }
	.cmt-meta { gap: 6px; }
	.cmt-content { font-size: 13px; }
}