.vertical-action-btn .icon {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.icon-like {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-like1 {
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	width: 14px;
	width: 14px;
}

.icon-like.liked {
	background-color: white;
}

.icon-report {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='12 0 269.4 300' fill='white' stroke='none'%3E%3Cpath d='M218 255L20 58Q14 114 29 163Q42 204 68 238Q88 264 115 284Q125 291 134.50 295.50Q144 300 150 300Q156 300 166 295.50Q176 291 185 284Q203 271 218 255ZM250 212L59 21Q77 16 95 11Q134 0 150 0Q166 0 205 10Q229 17 259 27Q267 29 272.50 35.50Q278 42 279 50Q285 98 276 142Q268 179 250 212ZM256 269L12 25L25 12L269 256Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-share {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -256 1791.9230769230771 1792' fill='white' stroke='none'%3E%3Cpath d='M1764-245Q1797-221 1791-181L1535 1355Q1530 1384 1503 1400Q1489 1408 1472 1408Q1461 1408 1448 1403L995 1218L753 1513Q735 1536 704 1536Q691 1536 682 1532Q663 1525 651.50 1508.50Q640 1492 640 1472L640 1123L1504 64L435 989L40 827Q3 813 0 772Q-2 732 32 713L1696-247Q1711-256 1728-256Q1748-256 1764-245Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-view {
	background-color: white;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='21 96 470 320' fill='white' stroke='none'%3E%3Cpath d='M211 211Q230 192 256 192Q282 192 301 211Q320 230 320 256Q320 282 301 301Q282 320 256 320Q230 320 211 301Q192 282 192 256Q192 230 211 211ZM180.50 331.50Q212 363 256 363Q300 363 331.50 331.50Q363 300 363 256Q363 212 331.50 180.50Q300 149 256 149Q212 149 180.50 180.50Q149 212 149 256Q149 300 180.50 331.50ZM113 140Q177 96 256 96Q335 96 399 140Q463 184 491 256Q463 328 399 372Q335 416 256 416Q177 416 113 372Q49 328 21 256Q49 184 113 140Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon-comment {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='426' height='426' viewBox='43 43 426 426'%3E%3Cpath d='M363 235L363 192L320 192L320 235ZM277 235L277 192L235 192L235 235ZM192 235L192 192L149 192L149 235ZM85 43L427 43Q444 43 456.50 55.50Q469 68 469 85L469 341Q469 358 456.50 371Q444 384 427 384L128 384L43 469L43 85Q43 68 55.50 55.50Q68 43 85 43Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: white;
}

.like-button .icon-like {
	transition: opacity 0.2s ease;
}

.like-button:hover .icon-like {
	opacity: 0.9;
}

.comment-stat .icon-comment,
.topic-actions .icon-comment,
.reply-actions-inline .icon-comment,
.comment-reply-action .icon-comment,
.reply-delete .icon-comment {
	width: 14px;
	height: 14px;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	color: var(--text-lighter);
}

.comment-stat .icon-like,
.comment-stat .icon-like1,
.topic-actions .icon-like,
.topic-actions .icon-like1,
.reply-actions-inline .icon-like,
.reply-actions-inline .icon-like1,
.comment-reply-action .icon-like,
.comment-reply-action .icon-like1,
.comment-like .icon-like,
.comment-like .icon-like1,
.reply-like .icon-like,
.reply-like .icon-like1 {
	width: 14px;
	height: 14px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-bottom: 3px
}

.comment-stat .icon-like.liked,
.comment-stat .icon-like1.liked,
.comment-actions .icon-like.liked,
.comment-actions .icon-like1.liked,
.topic-actions .icon-like.liked,
.topic-actions .icon-like1.liked,
.reply-actions-inline .icon-like.liked,
.reply-actions-inline .icon-like1.liked,
.comment-reply-action .icon-like.liked,
.comment-reply-action .icon-like1.liked,
.comment-like .icon-like.liked,
.comment-like .icon-like1.liked,
.reply-like .icon-like.liked,
.reply-like .icon-like1.liked {
	background-color: #ff4444;
}

.comment-report .icon-report {
	width: 14px;
	height: 14px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='12 0 269.4 300' fill='white' stroke='none'%3E%3Cpath d='M218 255L20 58Q14 114 29 163Q42 204 68 238Q88 264 115 284Q125 291 134.50 295.50Q144 300 150 300Q156 300 166 295.50Q176 291 185 284Q203 271 218 255ZM250 212L59 21Q77 16 95 11Q134 0 150 0Q166 0 205 10Q229 17 259 27Q267 29 272.50 35.50Q278 42 279 50Q285 98 276 142Q268 179 250 212ZM256 269L12 25L25 12L269 256Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.comment-actions .icon-like {
	width: 16px;
	height: 16px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='21 64 470 427' fill='white' stroke='none'%3E%3Cpath d='M491 256L491 299Q491 307 488 315L423 465Q413 491 384 491L192 491Q175 491 162 478Q149 465 149 448L149 235Q149 218 162 205L302 64L325 87Q334 96 334 109L334 116L313 214L448 214Q465 214 478 226.50Q491 239 491 256ZM21 491L21 235L107 235L107 491Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.comment-actions .icon-report {
	width: 16px;
	height: 16px;
	background-color: var(--text-lighter);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='12 0 269.4 300' fill='white' stroke='none'%3E%3Cpath d='M218 255L20 58Q14 114 29 163Q42 204 68 238Q88 264 115 284Q125 291 134.50 295.50Q144 300 150 300Q156 300 166 295.50Q176 291 185 284Q203 271 218 255ZM250 212L59 21Q77 16 95 11Q134 0 150 0Q166 0 205 10Q229 17 259 27Q267 29 272.50 35.50Q278 42 279 50Q285 98 276 142Q268 179 250 212ZM256 269L12 25L25 12L269 256Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.icon.clock2 {
	background-color: var(--text-lighter, #999);
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 141 998 966'%3E%3Cpath d='M1065 1001Q1075 1011 1075 1024Q1075 1037 1065 1047L1015 1097Q1005 1107 992 1107Q979 1107 969 1097L576 704L183 1097Q173 1107 160 1107Q147 1107 137 1097L87 1047Q77 1037 77 1024Q77 1011 87 1001L553 535Q563 525 576 525Q589 525 599 535L1065 1001ZM1065 617Q1075 627 1075 640Q1075 653 1065 663L1015 713Q1005 723 992 723Q979 723 969 713L576 320L183 713Q173 723 160 723Q147 723 137 713L87 663Q77 653 77 640Q77 627 87 617L553 151Q563 141 576 141Q589 141 599 151L1065 617Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 141 998 966'%3E%3Cpath d='M1065 1001Q1075 1011 1075 1024Q1075 1037 1065 1047L1015 1097Q1005 1107 992 1107Q979 1107 969 1097L576 704L183 1097Q173 1107 160 1107Q147 1107 137 1097L87 1047Q77 1037 77 1024Q77 1011 87 1001L553 535Q563 525 576 525Q589 525 599 535L1065 1001ZM1065 617Q1075 627 1075 640Q1075 653 1065 663L1015 713Q1005 723 992 723Q979 723 969 713L576 320L183 713Q173 723 160 723Q147 723 137 713L87 663Q77 653 77 640Q77 627 87 617L553 151Q563 141 576 141Q589 141 599 151L1065 617Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 12px;
	height: 12px;
	transform: translateZ(0)
}

.icon.fire1 {
	background-color: var(--text-lighter, #999);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 173 998 966'%3E%3Cpath d='M1065 617Q1075 627 1075 640Q1075 653 1065 663L599 1129Q589 1139 576 1139Q563 1139 553 1129L87 663Q77 653 77 640Q77 627 87 617L137 567Q147 557 160 557Q173 557 183 567L576 960L969 567Q979 557 992 557Q1005 557 1015 567L1065 617ZM1065 233Q1075 243 1075 256Q1075 269 1065 279L599 745Q589 755 576 755Q563 755 553 745L87 279Q77 269 77 256Q77 243 87 233L137 183Q147 173 160 173Q173 173 183 183L576 576L969 183Q979 173 992 173Q1005 173 1015 183L1065 233Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='998' height='966' viewBox='77 173 998 966'%3E%3Cpath d='M1065 617Q1075 627 1075 640Q1075 653 1065 663L599 1129Q589 1139 576 1139Q563 1139 553 1129L87 663Q77 653 77 640Q77 627 87 617L137 567Q147 557 160 557Q173 557 183 567L576 960L969 567Q979 557 992 557Q1005 557 1015 567L1065 617ZM1065 233Q1075 243 1075 256Q1075 269 1065 279L599 745Q589 755 576 755Q563 755 553 745L87 279Q77 269 77 256Q77 243 87 233L137 183Q147 173 160 173Q173 173 183 183L576 576L969 183Q979 173 992 173Q1005 173 1015 183L1065 233Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	margin-right: 3px;
	width: 12px;
	height: 12px
}

.replied-comment-label {
	font-weight: 500;
	color: var(--text-light);
}

.replied-comment-text {
	word-break: break-word;
}

.comment-reply-item {
	margin-top: 12px;
	margin-left: 75px;
	padding: 0px;
	position: relative;
	max-width: calc(100% - 40px);
}

.reply-avatar img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.comment-reply-header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.comment-reply-avatar-container {
	position: relative;
	display: inline-block;
	margin-right: 8px;
}

.comment-reply-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 8px;
	object-fit: cover;
}

.comment-reply-username {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	margin-right: 8px;
}

.reply-header span {
	font-size: 14px;
	color: var(--text-light);
}

.comment-reply-content {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	word-wrap: break-word;
	padding-left: 0;
	margin-bottom: 8px;
}

.comment-reply-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 8px;
	font-size: 12px;
	color: #999;
	position: relative;
}

.comment-reply-action {
	margin-left: 16px;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	gap: 4px;
}

.comment-reply-action:hover {
	color: var(--theme-color, #ff4d4f);
}

.floor-indicator {
	position: absolute !important;
	top: -5px !important;
	right: -5px !important;
	background-color: var(--theme-color, #ff4d4f) !important;
	color: white !important;
	font-size: 10px !important;
	font-weight: bold !important;
	border-radius: 50% !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><rect x="3" y="13" width="18" height="8" rx="1"/><line x1="3" y1="13" x2="3" y2="11"/><line x1="21" y1="13" x2="21" y2="11"/><rect x="7" y="5" width="10" height="6" rx="1"/></svg>') !important;
	background-size: 12px 12px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid white;
}

.replied-comment-container {
	background-color: #ffffff;
	border: none;
	border-radius: 6px;
	position: relative;
}

.comment-item-removing {
	height: 0 !important;
	opacity: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	transition: all 0.3s ease;
}

.replied-comment-container.hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

.replied-comment-container.show {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
	margin: 0 0 25px 0 !important;
	padding: 12px !important;
	background-color: var(--bg-secondary);
	border: none;
}

.action-buttons {
	display: flex;
	gap: 15px;
	margin: 20px 0;
}

.action-button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background-color: #f8f9fa;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	color: var(--text-secondary);
	transition: all 0.3s;
}

.action-button:hover {
	background-color: #e9ecef;
	color: var(--primary-color);
}

.action-button.liked {
	background-color: rgba(67, 97, 238, 0.1);
	color: var(--primary-color);
}

.comments-section {
	background-color: var(--background-color);
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comments-title {
	font-size: 20px;
	margin-bottom: 20px;
}

.comment-input {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	resize: vertical;
	min-height: 100px;
	font-size: 14px;
	background: #f8fafc
}

.comment-submit {
	margin-top: 20px;
	width: 100%;
	height: 40px;
}

.comments-filter {
	display: flex;
	margin-bottom: 20px;
	background-color: #f8f9fa;
	border-radius: 6px;
	padding: 5px;
}


.topic-content1 {
	flex: 1;
	min-width: 0;
}

.topic-content1 p {
	font-size: 15px;

	line-height: 26px;
}


.filter-button {
	flex: 1;
	padding: 8px 16px;
	background-color: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s;
	color: #666;
}

.filter-button.active {
	background-color: #ff4757;
	color: white;
}

.filter-button:hover:not(.active) {
	background-color: rgba(0, 0, 0, 0.05);
}

.topic-item .comment-author-avatar img,
.comment-item .comment-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.topic-item .comment-content,
.comment-item .comment-content {
	flex: 1;
	min-width: 0;
}

.topic-item .comment-header-row,
.comment-item .comment-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.topic-item .comment-meta,
.comment-item .comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topic-item .comment-author,
.comment-item .comment-author {
	font-weight: 600;
	color: #333;
	text-decoration: none;
}

.topic-item .comment-author:hover,
.comment-item .comment-author:hover {
	color: #ddd;
}

.topic-item .comment-time,
.comment-item .comment-time {
	font-size: 12px;
	color: #999;
}

.topic-item .topic-footer,
.comment-item .topic-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

.comment-author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.comment-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.comment-author {
	font-weight: 600;
	color: #333;
	text-decoration: none;
}

.comment-author:hover {
	color: #ddd;
}

.comment-time {
	font-size: 12px;
	color: #999;
}

.topic-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

.topic-actions {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.avatar-container {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-right: 10px;
	margin-top: -5px;
}



.avatar-container img:hover{transform: scale(1.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}



.user-level-tag {
	text-align: center;
	font-size: 12px;
	margin-top: 15px;
	color: var(--text-lighter);
}

.topic-actions button {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-lighter);
	font-size: 14px;
	padding: 0;
	margin: 0;
}

.topic-actions button .icon {
	color: var(--text-lighter);
}

.topic-actions button:hover {
	color: var(--text-lighter);
	opacity: 0.8;
}

.comment-tags {
	display: flex;
	gap: 8px;
}

.comment-tag {
	background-color: #f0f0f0;
	color: #666;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 4px;
}

.comment-text {
	margin-bottom: 12px;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: #333;
	line-height: 1.6;
	font-size: 14px;
}

.comment-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.comment-stats {
	display: flex;
	gap: 16px;
}

.comment-stat {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #999;
}

.comment-stat .icon {
	display: inline-block;
	vertical-align: middle;
}

.comment-actions {
	display: flex;
	gap: 12px;
}

.comment-like,
.comment-delete,
.comment-report,
.reply-like,
.reply-delete,
.like-button {
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	color: var(--text-light);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	transition: color 0.3s;
	padding: 0;
	margin: 0;
}

.comment-like {
	transform: translateY(2px);
}

.comment-reply-item::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 20px;
	bottom: 0;
	width: 2px;
	background-color: #ddd;
	z-index: 0;
}

.reply-avatar {
	position: relative;
	margin-right: 15px;
	z-index: 1;
}

.reply-number {
	position: absolute;
	left: -33px;
	top: 13;
	width: 20px;
	height: 20px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	z-index: 2;
}

.reply-actions {
	display: none;
}

.reply-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0px;
	font-size: 14px;
	width: 100%;
}

.reply-header>div:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.reply-header>div:last-child {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: flex-end;
	margin-left: auto;
}

.reply-actions-inline {
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: flex-end;
	width: auto;
}

.reply-author {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-light);
}

.reply-time {
	color: var(--text-light);
	font-size: 12px;
}

.reply-to {
	color: var(--text-light);
	font-size: 12px;
}

.reply-body p {
	margin: 0;
	color: #333;
	line-height: 1.6;
	font-size: 14px;
}

.comment-like.liked,
.reply-like.liked {
	color: #ff4444;
}

.icon.liked {
	fill: var(--primary);
	color: var(--primary);
	stroke: var(--primary);
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background-color: white;
	border-radius: 12px;
	max-width: 500px;
	width: 90%;
	transform: translateY(-20px);
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
}

.close-modal {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--text-secondary);
}

.form-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.form-control {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	font-size: 14px;
}

.textarea {
	resize: vertical;
	min-height: 100px;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.btn-secondary {
	background-color: #f0f0f0;
	color: var(--text-primary);
}

.btn-secondary:hover {
	background-color: #e0e0e0;
}

:root {
	--toast-bg: rgba(0, 0, 0, 0.75);
}

#toast-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.toast {
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	max-width: 400px;
	white-space: normal;
	text-align: center;
	line-height: 1.5;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.3s ease, transform 0.3s ease;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.toast.toast-visible {
	opacity: 1;
	transform: translateX(0);
}

.toast.toast-error {
	background-color: rgba(255, 69, 0, 0.85);
}

.vertical-actions {
	position: fixed;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 100;
}

.vertical-action-btn {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.count-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: white;
	font-size: 11px;
	padding: 0px 4px;
	border-radius: 400px;
	min-width: 12px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	border: 1px solid;
	font-weight: 600;
}

.like-button .count-badge {
	border-color: #3B82F6;
	color: #3B82F6;
}

.share-button .count-badge {
	border-color: #10B981;
	color: #10B981;
}

.report-button .count-badge {
	border-color: #F59E0B;
	color: #F59E0B;
}

.view-button .count-badge {
	border-color: #6366F1;
	color: #6366F1;
}

.comment-button .count-badge {
	border-color: #ff5722;
	color: #ff5722;
}

.vertical-action-btn.like-button {
	background-color: #3B82F6;
}

.vertical-action-btn.share-button {
	background-color: #10B981;
}

.vertical-action-btn.report-button {
	background-color: #F59E0B;
}

.vertical-action-btn.view-button {
	background-color: #6366F1;
}

.vertical-action-btn.comment-button {
	background-color: #ff5722;
}

.vertical-action-btn.comment-button .icon {
	width: 18px;
	height: 18px;
}

.vertical-action-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-tooltip {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 101;
}

.action-tooltip::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.8);
}

.vertical-action-btn:hover .action-tooltip {
	opacity: 1;
	visibility: visible;
	margin-left: 15px;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease
}

.modal.modal-visible {
	opacity: 1;
	visibility: visible
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	transition: opacity 0.3s ease
}

.modal-content {
	position: relative;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	width: 100%;
	max-width: 550px;
	max-height: 650px;
	overflow-y: auto;
	transform: scale(0.95);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease
}

.modal.modal-visible .modal-content {
	transform: scale(1);
	opacity: 1
}

.modal-header {
	padding: 10px 20px;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--text-primary)
}

.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	transition: background-color 0.2s ease;
	margin-top: 5px
}

.modal-close:hover {
	background-color: #f5f5f5
}

.modal-body {
	padding: 0px 30px;
	margin-bottom: 20px;
}

.modal-actions {
	padding: 16px 30px 35px 30px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	box-sizing: border-box
}

.form-group {
	margin-bottom: 0px
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	color: #2d3748;
	font-size: 14px
}

.form-control {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 14px;
	transition: border-color 0.2s ease;
	box-sizing: border-box
}

textarea.form-control {
	resize: vertical;
	min-height: 140px;
	font-family: inherit;
}

.submit-button {
	width: 100% !important;
	padding: 12px;
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
	box-sizing: border-box
}

.submit-button:hover {
	filter: alpha(opacity:90);
	opacity: 0.9;
}

.modal-open {
	overflow: hidden;
	position: relative;
}

#modal-comment-input.form-control {
	border: 1px solid #d1d5db;
	outline: none;
	color: var(--text);
	line-height: 26px;
}

.replied-comment-container::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--primary-color);
	border-radius: 3px 0 0 3px;
}

.replied-comment-label {
	font-weight: 600;
	font-size: 14px;
	color: #666;
	display: inline-block;
	margin-right: 0px;
}

.replied-comment-text {
	font-size: 14px;
	color: var(--text-light);
	line-height: 1.5;
	word-wrap: break-word;
	display: inline;
}

.post01 {
	padding: 0.5px;
	display: block;
	width: 99%;
	box-sizing: border-box;
	color: var(--text);
	line-height: 26px;
	min-height: 40px;
	border-left: 3px solid var(--primary-color);
	border-radius: 8px 0px 0px 8px;
	padding-left: 15px;
	font-size: 15px;
	margin-top: 15px;
	margin-left: 10px;
	word-break: break-word !important;
	word-break: break-word !important;
	font-size: inherit !important;
}

.reply-body {
	font-size: 14px;
	color: var(--text);
}

.comment-text .ql-size-small {
	font-size: 0.75em !important;
}

.comment-text .ql-size-large {
	font-size: 1.5em !important;
}

.comment-text .ql-size-huge {
	font-size: 1.2em !important;
}

.topic-content p {
	color: var(--text);
}

.comment-text p,
.comment-text span,
.comment-text strong,
.comment-text em,
.comment-text u {
	font-size: inherit !important;
	line-height: inherit;
}

.comment-text {
	display: block;
	position: relative;
	z-index: 1;
}

.topic-author {
	color: var(--text-light)
}

.reply-number img {
	width: 28px;
	height: 28px;
	border-radius: 28px;
	margin-top: 10px;
}

.content {
	padding: 40px;
	padding-top: 20px;
	line-height: 30px;
	font-size: 16px;
	color: #444;
	padding-top: 30px;
	border-top-color: var(--primary);
	border-top-width: 4px;
}

.content img {
	max-width: min(100%, 790px);
	height: auto !important;
	display: block;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.content p,
.content div,
.content ul,
.content ol {
	margin-top: 8px;
	margin-bottom: 8px;
}

.content a {
	margin-top: 5px;
	margin-bottom: 5px;
}

.avatar-container {
	position: relative;
	display: inline-block;
}

.post1 {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--spacing-sm);
	border: 3px solid var(--primary);
	margin-top: 5px;
}

.post2 {
	font-weight: 700;
	color: var(--primary);
	border-color: var(--primary);
	border: 2px solid var(--primary);
	background-color: var(--bg);
	font-size: 14px;
	text-align: center;
	height: 34px;
	border-radius: 400px;
	line-height: 34px;
	float: right;
	text-decoration: none;
	padding: 0px 20px
}

.post2:hover {
	background: var(--primary);
	color: #fff
}

.post01 .ql-size-small {
	font-size: 0.75em !important;
}

.post01 .ql-size-large {
	font-size: 1.5em !important;
}

.post01 .ql-size-huge {
	font-size: 2.5em !important;
}

.post01 span {
	display: inline !important;
}

.ql-editor img {
	position: relative;
	cursor: pointer;
}

.ql-editor img.selected {
	outline: 2px solid #4285f4;
	outline-offset: 1px;
}

.image-resize-handle {
	position: absolute !important;
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	background-color: #ff4757 !important;
	border: 3px solid #fff !important;
	border-radius: 50% !important;
	z-index: 999999 !important;
	bottom: -40px !important;
	right: -40px !important;
	cursor: se-resize !important;
	color: #fff !important;
	font-size: 24px !important;
	font-weight: bold !important;
	line-height: 34px !important;
	text-align: center !important;
	user-select: none !important;
	box-shadow: 0 0 15px rgba(255, 71, 87, 0.6) !important;
	opacity: 1 !important;
	transition: none !important;
	pointer-events: auto !important;
	overflow: visible !important;
	transform: none !important;
}

.post01 img {
	max-width: min(100%, 790px);
	height: auto;
	object-fit: contain;
}

.custom-tooltip {
	position: absolute;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 1000;
	transform: translateX(-50%);
}

.quill-resize-handle {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--primary);
	border-top: none;
	border-left: none;
	cursor: se-resize;
}

.ql-editor img.selected {
	position: relative !important;
	outline: 2px solid #4285f4;
	outline-offset: 1px;
}

.main-content {
	padding-top: 0 !important;
}

.reply-body {
	word-break: break-word !important;
}

.text-center {
	text-align: center !important;
}

.author-title {
	margin: 10px 10px 0px 0px !important;
}

.author-home-btn {
	width: 120px !important;
	margin-bottom: 10px !important;
}

.spaced-item {
	margin-top: 20px !important;
}

#comment-quill-editor {
	height: 130px;
	position: relative;
}

#comment-input {
	display: none !important;
}

.comment-author-date {
	color: var(--text-light) !important;
	font-size: 16px !important;
}

.comment-content img,
.post01 img {
	max-width: min(100%, 790px);
	height: auto;
	display: block;
	margin: 10px 0;
	border-radius: 4px;
	box-sizing: border-box;
}

.comment-content img[style*="width: 100%"],
.post01 img[style*="width: 100%"] {
	margin: 10px auto;
}

.comment-content {
	padding: 0 10px;
	overflow-x: hidden;
}

.no-user-select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}