/* ==========================================================================
   Thread modal (review/komentar detail) + report modal + footer aksi kartu.
   Numpang sistem .dn-gloss; 100% token dn-design. Dipakai novel + chapter.
   ========================================================================== */

/* ---- Sheet: kolom flex, body scroll, foot sticky ---- */
.dn-thread__sheet { display: flex; flex-direction: column; width: min(560px, 94vw); max-height: 85vh; padding: 0; }
.dn-thread__sheet .dn-gloss__head { padding: var(--dn-space-lg) var(--dn-space-xl); border-bottom: 1px solid var(--dn-border); margin: 0; }
.dn-thread__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dn-space-lg) var(--dn-space-xl); }
.dn-thread__load, .dn-thread__empty { text-align: center; color: var(--dn-text-faint); padding: var(--dn-space-xl) 0; }

/* ---- Lead (komentar/review yang dibuka) ---- */
.dn-thread__lead { padding-bottom: var(--dn-space-lg); border-bottom: 1px solid var(--dn-border); margin-bottom: var(--dn-space-md); }
.dn-thread__lead .rv-text { margin: var(--dn-space-sm) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Header "N replies" ---- */
.dn-thread__count { font-family: var(--dn-font-head); font-weight: var(--dn-fw-bold); font-size: var(--dn-fs-sm); color: var(--dn-text); margin-bottom: var(--dn-space-md); }

/* ---- Replies ---- */
.dn-thread__replies { display: flex; flex-direction: column; gap: var(--dn-space-md); }
.dn-thread__reply { display: flex; gap: var(--dn-space-sm); }
.dn-thread__rava { flex: none; width: 32px; height: 32px; border-radius: var(--dn-radius-pill); object-fit: cover; }
.dn-thread__rmain { min-width: 0; flex: 1; }
.dn-thread__rhead { display: flex; align-items: baseline; gap: var(--dn-space-sm); }
.dn-thread__rhead strong { font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); color: var(--dn-text); }
.dn-thread__rhead small { margin-left: auto; flex: none; color: var(--dn-text-faint); font-size: var(--dn-fs-xs); }   /* tanggal reply rata KANAN */
.dn-thread__rmain p { margin: 2px 0 0; color: var(--dn-text); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- Foot: add reply (sticky) ---- */
/* Komposer balasan: textarea full (baris 1) → Spoiler kecil kiri (baris 2) →
   baris aksi Cancel+Reply ke kanan (baris 3). Wrap membuat spoiler & aksi turun
   baris sendiri (spoiler tak sejajar dgn tombol Cancel/Reply). */
.dn-thread__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dn-space-xs) var(--dn-space-sm); padding: var(--dn-space-md) var(--dn-space-xl); border-top: 1px solid var(--dn-border); background: var(--dn-surface); }
.dn-thread__foot textarea { flex: 1 1 100%; width: 100%; min-width: 0; resize: none; box-sizing: border-box; min-height: 44px; max-height: 120px; padding: var(--dn-space-sm) var(--dn-space-md); font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text); background: var(--dn-surface-2); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); }
.dn-thread__foot textarea:focus-visible { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
/* Baris aksi = lebar penuh (turun baris sendiri) → tombol rata kanan, submit paling kanan. */
.dn-rep-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: var(--dn-space-sm); }
.dn-rep-actions .dn-gloss__btn { flex: none; width: auto; }
.dn-thread__login { margin: 0; color: var(--dn-text-muted); font-size: var(--dn-fs-sm); }

/* ==========================================================================
   Header kartu review/komentar — GLOBAL (kartu list, kartu owner, modal;
   modal juga tampil di halaman chapter → jangan taruh di inline loader-novel).
   Baris 1: username ↔ waktu. Baris 2: bintang ↔ status baca.
   ========================================================================== */
.rv-head { display: flex; align-items: flex-start; gap: var(--dn-space-sm); }
.rv-head .rev-img { flex: none; width: 40px; height: 40px; border-radius: var(--dn-radius-pill); float: none; object-fit: cover; } /* menang atas img.rev-img 32px global */
.dn-thread__lead .rv-head .rev-img { width: 48px; height: 48px; }
/* Komentar biasa (tanpa rating/chapter) → nama+tanggal ter-center vertikal thd avatar. */
.dn-thread__lead--nometa .rv-head { align-items: center; }
.rv-main { flex: 1; min-width: 0; }
.rv-r1, .rv-r2 { display: flex; align-items: center; justify-content: space-between; gap: var(--dn-space-sm); line-height: 1.25; }
.rv-r2 { margin-top: 3px; }
.rv-name { font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); color: var(--dn-text); overflow-wrap: anywhere; }
.rv-date { flex: none; font-size: var(--dn-fs-xs); color: var(--dn-text-muted); }
/* Bintang: rapat (tanpa flex-gap antar ★/☆), terisi orange · kosong abu lembut. */
.rv-stars { white-space: nowrap; font-size: var(--dn-fs-base); line-height: 1; letter-spacing: 1px; color: var(--dn-star-empty); }
.rv-stars .orange { color: var(--dn-star); letter-spacing: 1px; }
.rv-stars .nid-rev-pending { margin-left: var(--dn-space-sm); letter-spacing: normal; }
.rv-status { flex: none; font-size: var(--dn-fs-xs); color: var(--dn-text-faint); }

/* Placeholder WAJIB eksplisit — style theme lama bikin placeholder putih di light mode. */
.dn-thread__foot textarea::placeholder,
.dn-rv-repform textarea::placeholder,
#dn-report-detail::placeholder { color: var(--dn-text-faint); opacity: 1; }

/* Tombol sibuk (kirim reply/report): teks transparan + spinner brand. */
.dn-gloss__btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.dn-gloss__btn.is-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--dn-brand-tint); border-top-color: currentColor; border-top-color: var(--dn-on-brand, #fff);
  border-radius: var(--dn-radius-pill); animation: nidThreadSpin .6s linear infinite;
}
.dn-gloss__btn--ghost.is-busy::after { border-top-color: var(--dn-brand); }
@keyframes nidThreadSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dn-gloss__btn.is-busy::after { animation: none; } }

/* ==========================================================================
   Footer aksi bersama (kartu review list + modal): like 👍 · report · reply
   ========================================================================== */
.rv-foot { display: flex; align-items: center; gap: var(--dn-space-md); margin-top: var(--dn-space-sm); flex-wrap: wrap; }

/* Tombol pill netral (like/report/view/reply) */
.nid-like, .nid-report, .nid-viewthread, .nid-replybtn, .nid-editbtn, .rv-foot .dn-rv-replybtn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border: 1px solid var(--dn-border); background: var(--dn-surface); color: var(--dn-text-muted);
  border-radius: var(--dn-radius-pill); cursor: pointer; transition: var(--dn-transition);
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-xs); line-height: 1;
}
/* Samakan tinggi semua pill footer → Reply (tanpa ikon) tak lebih pendek. Kecil 1 tingkat: 26px. */
.rv-foot .nid-like, .rv-foot .nid-viewthread, .rv-foot .nid-report, .rv-foot .dn-rv-replybtn { min-height: 26px; box-sizing: border-box; }
.nid-like:hover, .nid-report:hover, .nid-viewthread:hover, .nid-replybtn:hover, .nid-editbtn:hover, .rv-foot .dn-rv-replybtn:hover { border-color: var(--dn-brand); color: var(--dn-brand-ink); }
.nid-like:focus-visible, .nid-report:focus-visible, .nid-viewthread:focus-visible, .nid-replybtn:focus-visible, .nid-editbtn:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.nid-like .nid-like-ic, .nid-report svg, .nid-viewthread svg, .nid-replybtn svg, .nid-editbtn svg, .rv-foot .dn-rv-replybtn svg { flex: none; fill: currentColor; width: 13px; height: 13px; }
.nid-like svg { transition: transform var(--dn-transition); }

/* Like ON = jempol biru terisi */
.nid-like.is-on { border-color: var(--dn-brand); color: var(--dn-brand); background: var(--dn-brand-tint); }
.nid-like.is-on svg { transform: translateY(-1px); }
.nid-like:disabled { opacity: .55; pointer-events: none; }

/* View replies = aksen brand tipis (ajakan klik) */
.nid-viewthread { color: var(--dn-brand-ink); }
.nid-viewthread[hidden] { display: none; }

/* Report ke kanan */
.rv-foot .nid-report { margin-left: auto; }

[data-theme="dark"] .nid-like, [data-theme="dark"] .nid-report, [data-theme="dark"] .nid-viewthread, [data-theme="dark"] .nid-replybtn, [data-theme="dark"] .nid-editbtn, [data-theme="dark"] .rv-foot .dn-rv-replybtn { background: var(--dn-surface-2); }

/* ==========================================================================
   Edit komentar sendiri — editor inline + marker "(edited)"
   ========================================================================== */
.nid-edited { font-size: var(--dn-fs-xs); color: var(--dn-text-faint); font-style: italic; }
.nid-editbox { margin-top: var(--dn-space-xs); display: flex; flex-wrap: wrap; gap: var(--dn-space-xs) var(--dn-space-sm); }
.nid-editbox textarea {
  flex: 1 1 100%; width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  padding: var(--dn-space-sm) var(--dn-space-md); font-family: var(--dn-font-body); font-size: var(--dn-fs-sm);
  color: var(--dn-text); background: var(--dn-surface-2); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
}
.nid-editbox textarea:focus-visible { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }

/* ==========================================================================
   Report modal — daftar alasan
   ========================================================================== */
.dn-report__reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--dn-space-md); }
.dn-report__reason { display: flex; align-items: center; gap: var(--dn-space-sm); padding: var(--dn-space-sm) var(--dn-space-md); border-radius: var(--dn-radius-control); cursor: pointer; transition: var(--dn-transition); }
.dn-report__reason:hover { background: var(--dn-surface-2); }
.dn-report__reason input { accent-color: var(--dn-brand); }
.dn-report__reason span { font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); color: var(--dn-text); }
#dn-report-detail { width: 100%; box-sizing: border-box; resize: vertical; padding: var(--dn-space-sm) var(--dn-space-md); font-family: var(--dn-font-body); font-size: var(--dn-fs-sm); color: var(--dn-text); background: var(--dn-surface-2); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); }
#dn-report-detail:focus-visible { outline: none; border-color: var(--dn-brand); box-shadow: var(--dn-ring); }
.dn-report__actions { display: flex; justify-content: flex-end; gap: var(--dn-space-sm); margin-top: var(--dn-space-md); }

@media (max-width: 560px) {
  .dn-thread__sheet { width: 100%; max-height: 90vh; }
  .nid-report span { display: none; } /* Report = ikon bendera saja di HP (review card + komentar + reply modal); aria-label tetap "Report". */

  /* Pills lebih kecil di HP — review + komen + modal (base rule + tinggi + ikon). */
  .nid-like, .nid-report, .nid-viewthread, .nid-replybtn, .nid-editbtn, .rv-foot .dn-rv-replybtn { padding: 2px 7px; gap: 3px; }
  .rv-foot .nid-like, .rv-foot .nid-viewthread, .rv-foot .nid-report, .rv-foot .dn-rv-replybtn,
  #comments .comment-body .reply .nid-like, #comments .comment-body .reply .nid-viewthread, #comments .comment-body .reply .nid-report, #comments .comment-body .reply .nid-replybtn { min-height: 23px; }
  .nid-like .nid-like-ic, .nid-report svg, .nid-viewthread svg, .nid-replybtn svg, .nid-editbtn svg, .rv-foot .dn-rv-replybtn svg { width: 12px; height: 12px; }
  /* Teks review = ukuran teks komentar di HP (dulu 16px/lh1.8 → .95rem/lh1.55). */
  .rv-text { font-size: .95rem; line-height: 1.55; }

  /* Komposer balasan di HP: textarea sudah full (base wrap); baris aksi TETAP
     jejer (Cancel kiri, submit kanan) bagi rata lebar — bukan stack atas-bawah.
     Menang atas rule global .dn-gloss__btn{width:100%} via spesifisitas. */
  .dn-rep-actions .dn-gloss__btn { flex: 1 1 0; width: auto; }
  /* Report: dua tombol TETAP jejer spt desktop (cancel kiri, Send report hijau
     kanan), bagi rata lebar. Jangan stack atas-bawah. */
  .dn-report__actions { flex-direction: row; }
  .dn-report__actions .dn-gloss__btn { flex: 1 1 0; width: auto; }
}