/* Dofus-like comments (V21.1)
   Only used on news.php
*/

.comments-block{
  margin-top: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
}

.comments-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.comments-title{
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.comments-count{
  color: #a9b4d6;
  font-weight: 700;
}

.comment-form{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

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

.comment-avatar{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}
.comment-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }

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

.comment-form textarea{
  width:100%;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #e9eefc;
  outline: none;
}
.comment-form textarea:focus{ border-color: rgba(74,163,255,.55); box-shadow: 0 0 0 3px rgba(74,163,255,.12); }

.comment-form__tools{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
  flex-wrap: wrap;
}

.comment-form__tools .hint{ color:#a9b4d6; font-size: 12px; }

.comment-form__tools .actions{ display:flex; gap: 10px; align-items:center; }

.comment-form input[type=file]{
  color:#a9b4d6;
  font-size: 12px;
}

.comment-replying{
  color:#a9b4d6;
  font-size: 12px;
  margin-top: 6px;
}
.comment-replying button{
  background:none;
  border:0;
  color:#e9eefc;
  text-decoration: underline;
  cursor:pointer;
  padding:0;
}

.comments-list{ padding: 4px 0; }

.comment-item{
  display:flex;
  gap: 12px;
  margin: 10px 12px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.comment-item:hover{
  border-color: rgba(74,163,255,.26);
  background: rgba(255,255,255,.04);
}

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

.comment-meta{
  display:flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.comment-user{
  font-weight: 900;
  letter-spacing: .01em;
}

.comment-date{
  color: #a9b4d6;
  font-size: 12px;
}

.comment-text{
  margin-top: 6px;
  line-height: 1.45;
  color: #e9eefc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Actions (reply/report/edit/delete) */
.comment-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.comment-actions a,
.comment-actions button{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: #dbe6ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.comment-actions a:hover,
.comment-actions button:hover{
  border-color: rgba(74,163,255,.38);
  box-shadow: 0 0 0 3px rgba(74,163,255,.10);
}

.comment-actions .danger{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.10);
}

.comment-actions .danger:hover{
  border-color: rgba(255,90,90,.55);
  box-shadow: 0 0 0 3px rgba(255,90,90,.10);
}

/* Replies: slightly indented and more compact */
.comment-item.is-reply{
  margin-left: 54px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}

.comment-item.is-reply .comment-avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.comment-user{
  font-weight: 900;
  color: #d7e2ff;
}

.comment-date{
  color: #a9b4d6;
  font-size: 12px;
}

.comment-text{
  margin-top: 6px;
  color: #e9eefc;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-image{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  max-width: 640px;
}
.comment-image img{ width:100%; height:auto; display:block; }

.comment-actions{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  align-items:center;
}

.comment-actions button,
.comment-actions a{
  background:none;
  border:0;
  color:#a9b4d6;
  cursor:pointer;
  padding:0;
  font-weight: 700;
}
.comment-actions button:hover,
.comment-actions a:hover{ color:#e9eefc; }

.comment-replies{
  margin-top: 10px;
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,.08);
}

.comment-item.reply{
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.comments-more{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:center;
}

@media (max-width: 768px){
  .comment-form__row{ gap: 10px; }
  .comment-avatar{ width: 40px; height: 40px; border-radius: 12px; }
  .comment-replies{ padding-left: 12px; }
}


/* Admin moderation controls (admin only) */
.adminActions{margin-left:10px; display:inline-flex; gap:10px; align-items:center;}
.linkBtn{background:none; border:0; padding:0; color:rgba(255,255,255,.75); cursor:pointer; font-size:12px;}
.linkBtn:hover{color:#fff; text-decoration:underline;}
.linkBtn.danger{color:rgba(255,120,120,.9);}
.banSelect{background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85); border-radius:8px; padding:2px 6px; font-size:12px;}

/* New badges + admin box (V21.3+) */
.comment-badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:rgba(255,255,255,.85)}
.badge-hidden{color:rgba(255,220,130,.95)}
.badge-deleted{color:rgba(255,160,160,.95)}
.badge-shadow{color:rgba(180,200,255,.95)}
.badge-report{color:rgba(255,200,255,.95)}

.comment-admin{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.comment-admin button,
.comment-admin a{font-size:12px;font-weight:700;background:none;border:0;padding:0;color:rgba(255,255,255,.75);cursor:pointer}
.comment-admin button:hover,
.comment-admin a:hover{color:#fff;text-decoration:underline}
.comment-admin .danger{color:rgba(255,120,120,.95)}
.comment-admin select{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85);border-radius:8px;padding:2px 6px;font-size:12px}


.reports-list { padding-left: 18px; }
.reports-list li { margin: 6px 0; font-size: 13px; color:#ddd; }

.btn-mini.warn{border-color:rgba(255,180,0,.6);}

/* Live image preview in comment composer */
.comment-image-preview{margin-top:10px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.25)}
.comment-image-preview.hidden{display:none}
.comment-image-preview .preview-row{display:flex;gap:10px;align-items:center}
.comment-image-preview .preview-thumb{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.10)}
.comment-image-preview .preview-meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.comment-image-preview .preview-name{font-size:13px;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}