@CHARSET "UTF-8";
.comment {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	background: transparent;
	margin: 0;
	padding-bottom: 0;
}
.comment input,.comment textarea{
	border: 1px solid var(--border-light, #ddd);
	border-radius: 10px;
}
.comment-card {
	background: var(--bg-card, #fff);
	border: 1.5px solid var(--border-light, #E1EBFA);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 2px 10px rgba(0,0,0,.04);
	overflow: hidden;
	margin: 12px var(--gap-md, 12px);
}
.comment_split_title {
	height: 44px;
	line-height: 44px;
	background: var(--bg-card, #fff);
	border-bottom: 1px solid var(--divider, #EEF2F7);
	padding: 0 16px;
	margin: 0;
	color: var(--text-primary, #1B2A4A);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.comment-count-badge { font-size: 12px; font-weight: 500; color: var(--text-light, #8A94A6); }

/* ============ 评论条目（大厂风） ============ */
.comment_list_row{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-align: left;
	padding: 16px var(--gap-md, 12px);
	margin: 0;
	color: var(--text-primary, #1B2A4A);
	background: var(--bg-card, #FFFFFF);
}
/* 条纹交替：奇数白、偶数极淡蓝，柔和不疲劳 */
.comment_list_row {
	border-left: 4px solid transparent;
	transition: border-color .15s, background .15s;
}
.comment_list_row:nth-child(even) {
	background: var(--bg-tint, #F6FAFF);
	border-left-color: var(--accent, #E0EAF8);
}
.comment_list_row:hover { background: var(--bg-sub, #EAF2FC); border-left-color: var(--accent, #2E7CF6); }
.comment_list_row + .comment_list_row { border-top: 1px solid var(--divider, #EEF2F7); }

/* 头像 */
.comment-avatar {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.comment-avatar-sm { width: 30px; height: 30px; font-size: 12px; }

/* 右侧主体 */
.comment-main { flex: 1; min-width: 0; }

/* 元信息行：昵称 + 时间 */
.comment-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.comment-nick { font-size: 14px; font-weight: 700; color: var(--text-primary, #1B2A4A); }
.comment-reply-to { font-size: 12px; color: var(--primary, #2E7CF6); background: var(--primary-light, #EAF2FE); padding: 1px 8px; border-radius: 10px; }
.comment-time { font-size: 12px; color: var(--text-light, #8A94A6); margin-left: auto; }

/* 内容 */
.comment_text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-main, #444);
	word-wrap: break-word;
	overflow-wrap: break-word;
	margin-bottom: 8px;
}

/* 图片区 */
.comment-gallery { margin: 4px 0 8px; }
.comment-pic-link a {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 13px; color: var(--primary, #2E7CF6);
	background: var(--primary-light, #EAF2FE);
	padding: 5px 12px; border-radius: 14px; text-decoration: none;
}
.comment-pic-link a:active { opacity: .8; }

/* 回复操作区 */
.comment-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 2px;
}
.comment-reply-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--text-secondary, #555);
	cursor: pointer;
	padding: 5px 12px;
	border-radius: 14px;
	background: var(--bg-light, #F0F4FA);
	transition: all .15s;
}
.comment-reply-btn:active { background: var(--primary-light, #EAF2FE); color: var(--primary, #2E7CF6); }
.comment-reply-icon { flex-shrink: 0; }
.comment-reply-text { line-height: 1; }

/* 回复嵌套区：左色条跟随父评论的主题色，一眼看出归属 */
.comment-replys { margin-top: 10px; }
.comment_list_replys {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--bg-sub, #F8FBFE);
	border-left: 3px solid var(--accent, #E0EAF8);
	border-radius: 0 10px 10px 0;
	margin: 8px 0;
	padding: 12px;
	font-size: 13px;
}
.comment_list_replys .comment_text { font-size: 14px; margin-bottom: 6px; }
.comment_list_replys .comment-replys { margin-left: 0; }
.comment_list_replys .comment_list_replys { margin-left: 10px; }

/* ============ 兼容旧类（历史数据） ============ */
.comment_list_index, .comment_list_nickname { display: none; }
.comment_list_time {
	display: none;
}
.comment_list_content, .comment_list_reply_content {
	word-wrap: break-word; overflow-wrap: break-word;
}
.comment_list_reply_index, .comment_list_reply_time, .comment_list_reply_nickname { display: none; }
.comment_list_reply_function { display: contents; }

/* 发表评论 底部浮动栏 */
.comment-float-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--bg-card, #fff);
	border-top: 1px solid var(--divider, #EEF2F7);
	box-shadow: 0 -2px 12px rgba(0,0,0,.05);
	padding: 10px var(--gap-md, 12px);
}
.comment-float-tip { flex: 1; min-width: 0; font-size: 12px; color: var(--text-light, #8A94A6); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.comment-float-btn {
	flex-shrink: 0; height: 38px; padding: 0 18px; border-radius: 19px;
	background: var(--primary, #2E7CF6); color: #fff; font-size: 14px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
.comment-float-btn:active { opacity: .85; }