/* ZHAEND Comments CSS - bootstrap friendly, cards, reactions, spinner */

#zhaend-comment-form { background:#fff; border-radius:.6rem; padding:1rem; box-shadow:0 6px 18px rgba(0,0,0,0.03); }
#zhaend-toolbar button { margin-right:.35rem; }
#zhaend-editor { border:1px solid #e9ecef; border-radius:.35rem; padding:.6rem; }
#zhaend-editor:focus { outline:none; box-shadow:0 0 0 0.15rem rgba(13,110,253,0.08); border-color:#cfe2ff; }

#zhaend-uploads img { width:90px; height:90px; object-fit:cover; border-radius:.5rem; margin-right:.5rem; margin-bottom:.5rem; border:1px solid rgba(0,0,0,0.06); }

.zhaend-comment { background: #fff; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,0.04); padding:0.85rem; }
.zhaend-comment .comment-content img { max-width:100%; display:block; margin-top:.5rem; border-radius:.4rem; }

.zhaend-react-btn { display:inline-flex; align-items:center; gap:.35rem; }
.zhaend-count { font-weight:600; margin-left:.25rem; }

.zhaend-floating-spinner { position: fixed; top: 18px; right: 18px; z-index:2000; /*background: rgba(255,255,255,0.95);*/ padding:6px; /*border-radius:8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);*/ }
.zhaend-floating-spinner img { width:38px; height:auto; }

/* small fade animation */
.zhaend-fade-in { animation: zhaendFade .28s ease both; }
@keyframes zhaendFade { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }

@media (max-width:767px) {
  #zhaend-uploads img { width:72px; height:72px; }
  .zhaend-floating-spinner { top:12px; right:12px; }
}