/* Comments – theme-switch aware */

/* Avatar */
img.emoji{ max-width:100% !important; }
.avatar-wrapper{ --avt:48px; position:relative; width:var(--avt); height:var(--avt); }
.avatar-img{
  width:var(--avt); height:var(--avt);
  object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; border-radius:50%;
  border:1px solid var(--line);
  background:var(--base-3);
}
.avatar-frame{
  width:var(--avt); height:var(--avt); object-fit:contain;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; pointer-events:none;
}

/* Badge */
.rank-background{
  display:inline-block; padding:2px 8px; border-radius:8px; font-weight:700; font-size:12px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 70%, #14b8a6 30%), color-mix(in srgb, var(--brand) 40%, #8b5cf6 60%));
  color:#fff; max-width:100%; text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

/* Comment content */
.comment-item{ margin-bottom:1.5rem; }
.comment-content{ font-size:15px; line-height:1.5; word-wrap:break-word; color:var(--text); }
.name-rank{ padding-left:15px; color:var(--text); }

/* Comment actions */
.comment-actions{ font-size:13px; gap:1rem; flex-wrap:wrap; color:var(--muted); }
.vote-wrap{ cursor:pointer; }
.vote-wrap:hover .vote-btn{ text-decoration:underline; }
.vote-count{ font-weight:600; color:var(--brand); }

/* Reply form */
.reply-form textarea{
  font-size:14px; resize:vertical;
  background:var(--base-2); color:var(--text); border:1px solid var(--line);
}
.reply-form textarea::placeholder{ color:var(--muted); }

/* Emoji buttons */
.emoji-box{ display:flex; gap:.5rem; flex-wrap:wrap; }
.emoji-btn{
  font-size:18px; padding:3px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--base-3);
  cursor:pointer; transition:transform .2s, background .2s, border-color .2s;
  color:var(--text);
}
.emoji-btn:hover{ transform:translateY(-1px); }
.emoji-btn.active-emoji{
  background-color: color-mix(in srgb, var(--brand) 12%, var(--base-3) 88%);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
}
.emoji-btn.animate-react{ animation:pop-react .3s ease; }
@keyframes pop-react{ 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* Emoji summary */
.emoji-summary span{ display:inline-block; margin-right:10px; font-size:15px; color:var(--text); }

/* Sorting UI */
#sort-comments{
  min-width:140px;
  background:var(--base-2);
  color:var(--text);
  border:1px solid var(--line);
}

/* Load more */
#load-more-btn{
  padding:6px 16px;
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:8px;
}
#load-more-btn:hover{ opacity:.9; }

/* Highlight new comment */
.comment-item.new-comment{
  animation:highlightFade 2s ease-in-out;
  background: color-mix(in srgb, var(--brand) 10%, var(--base-2) 90%);
  border-left:3px solid var(--brand);
  padding-left:10px;
}
@keyframes highlightFade{ 0%{ background-color: color-mix(in srgb, var(--brand) 18%, var(--base-2) 82%);} 100%{ background-color: transparent; } }

/* Comment count bar */
.comment-count-bar{
  width:100%; height:4px; background:var(--base-3);
  border-radius:4px; margin-top:4px;
}
.comment-count-bar-inner{
  width:50%; height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 70%, #00c6ff 30%), color-mix(in srgb, var(--brand) 40%, #0072ff 60%));
  animation:loadbar 3s infinite linear;
  border-radius:4px;
}
@keyframes loadbar{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }

/* Responsive */
@media (max-width:576px){
  .avatar-wrapper{ --avt:40px; }
  .comment-content{ font-size:14px; }
  .emoji-btn{ font-size:16px; }
  .comment-actions{ font-size:12px; }
  .rank-background{ font-size:11px; }
}