.comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #EEE; }
.comment-item-level2 .comment-avatar { width: 28px; height: 28px; }
.comment-item-level3 .comment-avatar { width: 24px; height: 24px; }

.comment-img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.comment-item-level2 .comment-img { width: 36px; height: 36px; }
.comment-item-level3 .comment-img { width: 28px; height: 28px; }

.comment-item { background: var(--color-white); border-radius: 8px; margin-bottom: 8px; padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transition: box-shadow 0.2s ease; }
.comment-item:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.comment-item-level1, .comment-item-level2, .comment-item-level3 { border-bottom: 1px solid var(--color-gray-light); }
.comment-item-level2 { background: var(--color-gray-light); padding: 8px; }
.comment-item-level3 { background: #fafafa; }

.comment-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.comment-user-info { display: flex; align-items: center; flex: 1; margin-right: 16px; }
.comment-user-content { display: flex; flex-direction: column; margin-left: 4px; justify-content: center; gap: 2px; }
.comment-username { font-size: 14px; color: #333; font-weight: 500; line-height: 1.0; white-space: wrap; }
.comment-username-container { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.comment-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--color-gray-dark); flex-shrink: 0; white-space: nowrap; }
.comment-author-tag { background: var(--color-danger); color: var(--color-white); font-size: 10px; padding: 1px 4px; border-radius: 4px; flex-shrink: 0; }
.comment-reply-count { color: var(--color-blue); }
.comment-ip { color: var(--color-gray-dark); font-size: 11px; opacity: 0.8; }

.comment-content { font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 4px; white-space: normal; word-break: break-all; }
.comment-emoji { width: 20px; height: 20px; vertical-align: middle; margin: 0 4px; border: none; border-radius: 4px; object-fit: contain; display: inline-block; background: var(--color-white); opacity: 1; }

.comment-image-single { margin: 8px 0; }
.comment-img-single { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; max-height: 200px; transition: transform 0.2s ease; }
.comment-img-single:hover { transform: scale(1.02); }
.comment-images { display: none !important; }

.comment-actions { display: flex; gap: 16px; font-size: 12px; color: var(--color-gray-dark); align-items: center; }
.comment-action-btn { color: var(--color-gray-dark); cursor: pointer; transition: color 0.3s; }
.comment-action-btn:hover { color: var(--color-blue); }
.comment-action-btn.liked { color: #EF4444; }

.comment-replies { margin-top: 8px; }
.reply-list { overflow: hidden; transition: 0.2s ease; }
.reply-item-hidden { display: none; }
.reply-collapse-btn { margin-top: 4px; padding-left: 16px; width: 100%; padding: 4px 0; margin: 4px 0; background: transparent; border: none; color: var(--color-primary); font-size: 12px; cursor: pointer; text-align: left; }
.reply-collapse-btn:hover { text-decoration: underline; }

.comment-input-container { display: flex; gap: 8px; margin-top: 16px; }
.comment-input { flex: 1; padding: 8px 16px; font-size: 12px; border: 1px solid #E5E7EB; border-radius: 6px; transition: border-color 0.2s ease; }
.comment-input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 2px rgba(59,130,246,0.1); }
.comment-submit-btn { padding: 0 16px; font-size: 12px; color: var(--color-white); background: var(--color-blue); border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; }
.comment-submit-btn:hover { background: #2563EB; }

.load-more-btn { width: 100%; padding: 8px; margin: 8px 0; background: var(--color-gray-light); border: none; border-radius: 8px; color: var(--color-gray-dark); font-size: 14px; cursor: pointer; display: none; }
.load-more-btn:disabled { background: #fafafa; color: #ccc; cursor: not-allowed; }

.loading-indicator { text-align: center; padding: 16px 4px; color: var(--color-gray-dark); font-size: 14px; display: none !important; }

.reply-skeleton { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-gray-light); }
.reply-skeleton-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.reply-skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.reply-skeleton-name { width: 80px; height: 12px; }
.reply-skeleton-text { width: 100%; height: 14px; }

.comment-skeleton { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-gray-light); }
.comment-skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.comment-skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.comment-skeleton-header { display: flex; justify-content: space-between; align-items: center; }
.comment-skeleton-name { width: 100px; height: 14px; }
.comment-skeleton-meta { width: 80px; height: 12px; }
.comment-skeleton-text { width: 90%; height: 14px; }

.no-comments-tip { text-align: center; padding: 32px 0; font-size: 12px; color: var(--color-gray-dark); background: var(--color-white); border-radius: 8px; margin: 8px 0; }

.unified-tip { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(10px); font-size: 10px; border-radius: 10px; padding: 4px 8px; z-index: 9999; transition: opacity 0.3s, transform 0.3s; opacity: 0; pointer-events: none; color: var(--color-white); }
.unified-tip--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.unified-tip--default { background: rgba(0,0,0,0.7); }
.unified-tip--error { background: rgba(220,38,38,0.8); }
.unified-tip--loading { background: rgba(0,0,0,0.7); }

.media-loading-tip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-white); background: rgba(0,0,0,0.7); padding: 4px 16px; border-radius: 8px; font-size: 14px; z-index: 999; display: flex; align-items: center; justify-content: center; }