/* Comments – theme-switch aware */
form#ajax-comment-form {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}

#comments .comment-guideline {
  border-radius: .5rem;
  line-height: 1.45;
}
#comments .comment-guideline i {
  flex: 0 0 auto;
}

#comment-form-box .alert.alert-info{
  display: inline-flex;        
  align-items: center;         
  gap: 8px;  
  flex-wrap: wrap;
  white-space: normal;           
  padding: .75rem 1rem;  
  margin: 0;
  width: 100%;
}
.card-body {
    padding: 0.2rem;
}
.alert-info {
    background: color-mix(in srgb,#0ea5e9 10%, var(--us-body-bg) 90%);
    color: color-mix(in srgb, #fff200 75%, #ff0000 25%);
    border-color: color-mix(in srgb,#0ea5e9 35%, transparent);
}

@media (max-width: 420px){
  #comment-form-box .alert.alert-info{
    justify-content: flex-start;
  }
}



/* 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;
  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(ps-bg);
  color:var(--brand);
  border:1px solid var(--ps-btn-fg);
}

/* 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; }
}

.form-select {
    width: auto;
}

/* User profile: nick, badge, rank */
.user-info{display:grid}
img.badge-icon{width:18px !important;height:18px !important;object-fit:contain;border-radius:0}
.nickname-mask-text{display:inline-block;font-weight:700;font-size:16px;background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;line-height:1.4;max-width:100%;font-family:'Parisienne',cursive}
.badge-text{font-family:cursive;font-weight:700;font-style:italic;letter-spacing:1px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.3)}
[class*="rank-"]{background-repeat:no-repeat;background-position:center;background-size:cover}
[class^="rank-"]{background-repeat:no-repeat;background-position:center;background-size:cover}

.rank-commoner{background-color:#898989}
.rank-dou-fighter{background-color:#d8a9d9}
.rank-dou-master{background-color:#a9d9cf}
.rank-dou-grandmaster{background-color:#67ca60}
.rank-dou-spirit{background-color:#e0e719}
.rank-dou-king{background-color:#2bff03}
.rank-dou-emperor{background-color:#ff0303}

.rank-dou-sect{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/dou-sect.gif')}
.rank-dou-venerate{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/dou-venerate.gif')}
.rank-dou-saint{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/dou-saint.gif')}
.rank-dou-god{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/dou-god.gif')}
.rank-heavenly-emperor{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/heavenly-emperor.gif')}
.rank-admin{background-image:url('/wp-content/themes/animestream-child/user-system/assets/gif/admin.gif')}

/* VIP offer highlight */
.vip-offer-highlight{display:inline-block;padding:8px 14px;font-weight:700;font-size:1rem;border-radius:10px;background:color-mix(in srgb,var(--brand) 8%,#fff 92%);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);text-decoration:none;animation:pulseZoom 1.5s ease-in-out infinite;transition:.3s}
.vip-offer-highlight:hover{background:color-mix(in srgb,var(--brand) 12%,#fff 88%);box-shadow:0 0 12px color-mix(in srgb,var(--brand) 35%,transparent);transform:scale(1.02)}
html[data-theme="dark"] .vip-offer-highlight{background:color-mix(in srgb,#ffd700 8%,var(--base-2) 92%);color:#ffdd33;border-color:color-mix(in srgb,#ffd700 25%,transparent)}

/* Avatar/frames */
.avatar-wrapper{width:48px;height:48px;position:relative;flex-shrink:0}
.avatar-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:none !important}
.avatar-wrapper::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250%;height:250%;background-size:cover;background-repeat:no-repeat;pointer-events:none;z-index:2}
.frame-basic::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/basic.png')}
.frame-silver::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/silver.png')}
.frame-gold::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/gold.png')}
.frame-platinum::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/platinum.png')}
.frame-diamond::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/diamond.png')}
.frame-legend::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/legend.png')}
.frame-admin::after{background-image:url('/wp-content/themes/animestream-child/user-system/assets/frames/admin.png')}

.vip-basic{background:linear-gradient(180deg,#f8fafc,#eef2f7);color:#0f172a;border-color:#e5e7eb}
.vip-basic .vip-dot{background:#9ca3af}
.vip-silver{background:linear-gradient(180deg,#f6f7fb,#e9edf5);color:#0f172a;border-color:#e5e7eb}
.vip-silver .vip-dot{background:#a1a1aa}
.vip-gold{background:linear-gradient(180deg,#fff4cc,#ffe3a7);color:#0f172a;border-color:#f5d27a}
.vip-gold .vip-dot{background:#f59e0b}
.vip-platinum{background:linear-gradient(180deg,#eef5ff,#dce8ff);color:#0f172a;border-color:#c7d7ff}
.vip-platinum .vip-dot{background:#60a5fa}
.vip-diamond{background:linear-gradient(180deg,#e6fbff,#ccf6ff);color:#0f172a;border-color:#99e9f8}
.vip-diamond .vip-dot{background:#06b6d4}
.vip-legend{background:linear-gradient(180deg,#fdf2ff,#f6d9ff);color:#0f172a;border-color:#e9b9ff}
.vip-legend .vip-dot{background:#a855f7}
.vip-admin{background:linear-gradient(180deg,#eef2ff,#dae2ff);color:#0f172a;border-color:#c7d2fe}
.vip-admin .vip-dot{background:#6366f1}

/* Avatar selection */
.avatar-select{width:17%;border:2px solid var(--brand);transition:transform .2s}
.avatar-select:hover{transform:scale(1.5);border:3px solid;border-image:linear-gradient(45deg,#ff00cc,#3333ff) 1}
.avatar-selected{transform:scale(1.5);border:3px solid;border-image:linear-gradient(45deg,#ff00cc,#3333ff) 1;box-shadow:0 0 6px rgba(0,0,0,.2);border-radius:10px}

/* Avatar rank */
.avatar-rank{position:relative;width:80px;height:80px;display:inline-block}
.avatar-img{width:100% !important;height:100% !important;border-radius:50%;object-fit:cover;border:2px solid transparent;z-index:1;position:relative}
.rank-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* VIP badge / button */
.vip-label{display:inline-block;padding:4px 12px;border-radius:20px;font-weight:700;box-shadow:0 0 0 1px currentColor inset}
.upgrade-vip-btn{background:linear-gradient(45deg,#fcb045,#fd1d1d);border:none;border-radius:10px;color:#fff}

/* Comments (user-system context) */
.comment-actions{gap:.25rem !important;color:var(--muted);font-size:14px}
.comment-content-box{padding:10px 14px;border-radius:8px;font-size:15px;background:var(--base-2);color:var(--text);border:1px solid var(--line)}
.comment-content-box.user-content{background:color-mix(in srgb,var(--brand) 10%,var(--base-2) 90%);border:1px solid var(--brand);color:var(--text)}
.comment-content-box.admin-content{background:color-mix(in srgb,#e74c3c 10%,var(--base-2) 90%);border:1px solid #e74c3c;color:color-mix(in srgb,#e74c3c 80%,#000 20%);font-weight:500}
.comment-content-box p{margin-bottom:0 !important}
.comment-admin{background:color-mix(in srgb,#e74c3c 8%,var(--base-2) 92%);border-left:4px solid #e74c3c;padding:12px;border-radius:8px;box-shadow:0 2px 4px rgba(231,76,60,.1)}
.comment-admin .nickname{color:#e74c3c;font-weight:700}
.comment-user{background:var(--base-3);border-left:4px solid var(--brand);padding:5px;border-radius:8px}
.like-btn-wrap.reacted .like-button{background:var(--brand);color:#fff}
.comment-children.mt-2{margin-left:-35px}

/* Emoji reactions */
.emoji-summary{font-size:16px;font-weight:500;color:var(--text);line-height:1}
.emoji-summary-stacked{font-size:16px;font-weight:500;color:var(--text);line-height:1}
.emoji-icons{font-size:18px;display:inline-block}
.emoji-count{font-size:14px;color:var(--muted);font-weight:700}
.emoji-stack-wrap{display:flex;align-items:center;position:relative}
.emoji-icon-stack{background:var(--base-2);border:1px solid var(--line);border-radius:50%;padding:2px;width:24px;height:24px;font-size:16px;display:flex;align-items:center;justify-content:center;position:relative;margin-left:-8px;box-shadow:0 0 1px rgba(0,0,0,.2)}
.emoji-icon-stack:first-child{margin-left:0;z-index:3}
.emoji-icon-stack:nth-child(2){z-index:2}
.emoji-icon-stack:nth-child(3){z-index:1}