/* ═══ التعليقات والردود ═══
   الفقاعة للكلام وحده: صورةٌ صغيرة، ثمّ اسمٌ فوق نصّه في فقاعةٍ تحيط الكلام
   ولا تمتدّ فارغة إلى آخر السطر. وتحتها سطرٌ من نصٍّ صغير خافت للأفعال
   والوقت — إطارٌ حول كلّ فعلٍ يجعل السطر شريطَ أزرارٍ يزاحم الكلام فوقه.
   والردّ يقع تحت أصله يصله خيطٌ ينزل وينعطف، بمستوىً واحد لا أكثر:
   تداخلٌ بلا حدّ يصيّر الكلام عموداً من حرفين على شاشة هاتف. */

/* ── الإيقاع ─────────────────────────────────────────────────────── */
.acf-comments-list{ gap:13px; }
.acf-comment-thread{ display:grid; gap:0; }
.acf-comments-list > .acf-comment-thread + .acf-comment-thread,
.comments-list > .acf-comment-thread + .acf-comment-thread{ margin-top:14px; }

.acf-comment-card{ gap:3px; padding:4px 2px; border:0; background:none; }

/* ── الفقاعة ─────────────────────────────────────────────────────── */
/* الخلفية والإطار من الرموز والإعداد، وهنا الشكل وحده: الفقاعة تأخذ
   عرض كلامها ولا تمتدّ فارغةً إلى آخر السطر. */
.acf-comment-bubble{
  width:fit-content;
  max-width:100%;
  min-width:0;
}

.acf-comment-bubble{ gap:2px; }
.acf-comment-top{ margin-bottom:0; }
.acf-comment-author-copy a,
.acf-comment-author-copy span{ font-size:12.5px; font-weight:900; }
.acf-comment-author-copy small{ font-size:11px; opacity:.6; font-weight:600; }
.acf-comment-body{ font-size:14px; line-height:1.6; }

/* غلاف التعديل يضمّ الفقاعة وسطرها، فلا يزيد بينهما فراغاً */
.acf-comment-main > .acf-own-edit{ margin-top:0; }

/* ── سطر الأفعال تحت الفقاعة ─────────────────────────────────────── */
.acf-comment-actions{
  display:flex;
  align-items:center;
  gap:12px;
  /* لا يلتفّ: سطرٌ ينكسر نصفين لم يعد سطراً */
  flex-wrap:nowrap;
  margin-top:4px;
  margin-bottom:2px;
  font-size:11.5px;
  line-height:1;
}
/* في نمط الفقاعة وحده يُزاح ليحاذي كلامها؛ في flat الكلام يبدأ من الحافة */
.acf-comments-list.is-comment-style-bubble .acf-comment-actions{
  padding-inline-start:13px;
}

/* كلّ فعلٍ نصٌّ خافت: بلا إطارٍ ولا خلفيةٍ ولا حبّة.
   البادئة .acf-comment-card ليست زينة: ورقة الوضع الفاتح المولَّدة تكتب
   html[data-theme="light"] .acf-own-edit-btn.is-inline وخصوصيتها أعلى من
   محدِّدٍ من صنفين، فكان الإطار يعود في الوضع الفاتح وحده. */
.acf-comment-card .acf-comment-actions .acf-own-edit-btn,
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-inline,
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-icon{
  padding:0;
  margin:0;
  width:auto;
  height:auto;
  min-width:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:11.5px;
  font-weight:800;
  opacity:.62;
}
.acf-comment-card .acf-comment-actions .acf-own-edit-btn:hover,
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-inline:hover{
  opacity:1;
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* التسطير للكلمات: خطٌّ تحت رمزٍ يبدو عطلاً لا إشارةَ تمرير */
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-glyph:hover{
  text-decoration:none;
}
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-danger{ color:inherit; }
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-danger:hover{ color:var(--post-danger); }
/* «عدّل» و«احذف» رمزان بلا نصّ: فعلان على ما كتبتُه أنا يقفان معاً، و«ردّ»
   وحده كلمةٌ لأنه دعوةٌ لغيري لا أمرٌ على كلامي. */
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-glyph{
  width:16px;
  justify-content:center;
  gap:0;
}
.acf-comment-card .acf-comment-actions .acf-own-edit-btn.is-glyph svg{
  display:block;
  width:13px;
  height:13px;
  flex:none;
  stroke-width:1.9;
}

/* سطرٌ واحدٌ فعلاً: الرموز والأرقام والكلمات مقاييسها مختلفة، فتُقاس كلّها
   إلى ارتفاعٍ واحد ويُلغى أثر خطّ الأساس، وإلّا بدت تطفو فوق بعضها. */
.acf-comment-card .acf-comment-actions > *,
.acf-comment-card .acf-comment-actions .acf-comment-reactions > *{
  display:inline-flex;
  align-items:center;
  height:16px;
  line-height:1;
  vertical-align:middle;
}
.acf-comment-card .acf-comment-actions .acf-comment-react b{
  font-size:11.5px;
  font-weight:800;
  line-height:1;
}
.acf-comment-card .acf-comment-actions .acf-comment-react b:empty{ display:none; }

.acf-reply-btn.is-active{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* التفاعلات فعلٌ مثل «ردّ»، فتقف في السطر نفسه بلا إطارات */
.acf-comment-card .acf-comment-actions .acf-comment-reactions{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 !important;
  padding:0;
  border:0;
}
.acf-comment-card .acf-comment-actions .acf-comment-react{
  padding:0;
  border:0;
  background:none;
  min-height:0;
  height:16px;
  /* لونٌ واحد للسطر: ورقة الوضع الفاتح تلوّن هذه الكبسة وحدها بلونٍ
     أدكن، فكان الرمزان يبدوان من عائلةٍ أخرى. */
  color:inherit;
  gap:4px;
  font-size:11.5px;
  font-weight:800;
  opacity:.62;
}
.acf-comment-card .acf-comment-actions .acf-comment-react:hover{ opacity:1; }
.acf-comment-card .acf-comment-actions .acf-comment-react.is-active{ opacity:1; color:var(--post-primary); }
.acf-comment-card .acf-comment-actions .acf-comment-react-icon{
  width:13px;
  height:13px;
  opacity:1;
  flex:none;
  stroke-width:1.9;
}

.acf-comment-when{ opacity:.5; font-size:11px; }

/* ── الردود والخيط ──────────────────────────────────────────────── */

/* الخيط ينزل من تحت صورة صاحب الأصل مباشرةً، لا من تحت سطر أفعاله: الفراغ
   بين الصورة وأوّل الخيط يقطع الصلة التي وُجد الخيط ليقولها. يُرسم على
   البطاقة نفسها فينتهي عند حدّها، وحدّها هو أوّل صندوق الردود، فيتّصل
   الخطّان بلا حساب ارتفاعٍ متغيّر. */
.acf-comment-thread:has([data-replies]) > .acf-comment-card{ position:relative; }
.acf-comment-thread:has([data-replies]) > .acf-comment-card::after{
  content:'';
  position:absolute;
  inset-inline-start:calc(var(--post-comment-avatar-size, 38px) / 2 + 1px);
  top:calc(var(--post-comment-avatar-size, 38px) + 8px);
  bottom:0;
  width:2px;
  border-radius:2px;
  background:var(--post-line-strong);
}

.acf-comment-replies{
  display:grid;
  gap:6px;
  /* يحاذي مركز الصورة كي يكون الخطّان خطّاً واحداً */
  margin-inline-start:calc(var(--post-comment-avatar-size, 38px) / 2 + 1px);
  padding-inline-start:20px;
  padding-top:9px;
  /* يقصّ ما يعلو الصندوق من خيوط الردود فلا يتسلّل خطٌّ فوق أصله */
  overflow:hidden;
}

/* الخيط يُرسم من كلّ ردٍّ صعوداً إلى أعلى الصندوق ثمّ ينعطف إليه، لا خطّاً
   واحداً ممدوداً على الصندوق: ذاك يتدلّى تحت آخر ردٍّ في الفراغ، وهذا
   ينتهي عند انعطافة آخر ردٍّ من نفسه. */
.acf-comment-reply{ position:relative; }
.acf-comment-reply::before{
  content:'';
  position:absolute;
  inset-inline-start:-20px;
  top:-999px;
  width:18px;
  height:1025px;
  border-inline-start:2px solid var(--post-line-strong);
  border-bottom:2px solid var(--post-line-strong);
  border-end-start-radius:12px;
}

.acf-comment-reply .acf-comment-avatar,
.acf-comment-reply .acf-avatar-wrap{ width:26px; height:26px; }

.acf-comment-reply .acf-comment-body{ font-size:13.5px; }
.acf-comment-reply.is-folded{ display:none; }

.acf-replies-more{
  justify-self:start;
  margin-inline-start:calc(var(--post-comment-avatar-size, 38px) / 2 + 1px);
  padding:2px 0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  opacity:.62;
}
.acf-replies-more::before{ content:'↳'; margin-inline-end:6px; opacity:.7; }
.acf-replies-more:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* ── شريط «ردّاً على» فوق مربّع الكتابة ─────────────────────────── */
.acf-reply-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin-bottom:8px;
  padding:7px 12px;
  border:1px solid rgba(124,58,237,.34);
  border-radius:999px;
  background:rgba(124,58,237,.11);
  font-size:12px;
  line-height:1.7;
}
.acf-reply-strip[hidden]{ display:none; }
.acf-reply-strip b{ font-weight:900; }
.acf-reply-strip button{
  border:0;
  background:none;
  color:inherit;
  font-size:17px;
  line-height:1;
  padding:0 2px;
  cursor:pointer;
  opacity:.65;
}
.acf-reply-strip button:hover{ opacity:1; }

/* ── القادم من إشعار: إبرازٌ يخفت وحده فيجد تعليقه بين عشرة ─────── */
.acf-comment-card.is-highlighted{ animation:acf-comment-flash 2.6s ease-out; }
@keyframes acf-comment-flash{
  0%, 22%  { background:rgba(124,58,237,.20); }
  100%     { background:transparent; }
}
@media (prefers-reduced-motion: reduce){
  .acf-comment-card.is-highlighted{ animation:none; outline:2px solid rgba(124,58,237,.5); }
}