/* ===== COMMENTS ===== */
#comments {
  background: #12121c;
  padding: 1rem;
  border-radius: 12px;
}
#comments textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: #1e1e2f;
  color: #fff;
  resize: none;
}
#commentListWrapper {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
#commentListWrapper::-webkit-scrollbar {
  width: 6px;
}
#commentListWrapper::-webkit-scrollbar-thumb {
  background: #4facfe;
  border-radius: 999px;
}

.comment-item {
  display:flex;
  gap:12px;
  margin-bottom:1rem;
}
.comment-item img {
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}
.comment-item .comment-body {
  background:#2a2a40;
  padding:12px;
  border-radius:12px;
  width:100%;
}
.comment-item .comment-body strong { display:block; }
.comment-item .comment-body .meta { font-size:0.8rem; color:#aaa; }
.comment-item .comment-body .reply-form { display:none; margin-top:8px; }
.comment-item .comment-body .reply-form textarea {
  width:100%;
  padding:8px;
  border-radius:8px;
  border:none;
  resize:none;
  background:#12121c;
  color:#fff;
}
.comment-item .comment-body .reply-form button {
  margin-top:5px;
  padding:6px 12px;
  border:none;
  border-radius:999px;
  background:#4facfe;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.comment-body button.reply-btn {
  cursor:pointer;
  background:none;
  border:none;
  color:#4facfe;
  font-size:0.8rem;
  margin-top:8px;
}

/* Nested replies */
.comment-reply {
  display: flex;
  gap: 10px;
  margin-left: 50px; /* indent replies */
  margin-top: 8px;
}
.comment-reply img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-reply .reply-body {
  background: #1f1f32;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
}
.comment-reply .reply-body strong {
  display: block;
  font-size: 0.9rem;
}
.comment-reply .reply-body .meta {
  font-size: 0.75rem;
  color: #aaa;
}
.comment-reply .reply-body div { margin-top: 4px; }

/* Optional hover effects */
.comment-item:hover .comment-body { background: #333354; }
.comment-reply:hover .reply-body { background: #2a2a4a; }

/* Make comment list responsive with scaling */
#comments, #commentListWrapper {
  width: 100%;
  box-sizing: border-box;
}

#commentListWrapper {
  max-height: 400px; /* adjust if needed */
  overflow-y: auto;
}

/* Ensure nested replies don't overflow */
.comment-reply {
  max-width: 100%;
  box-sizing: border-box;
}