/* ===================== Comments — full-screen page ===================== */
.comments-page {
  background: var(--paper); bottom: 0; display: flex; flex-direction: column;
  left: 0; position: fixed; right: 0; top: 0; z-index: 96;
}
.comments-page.is-hidden { display: none; }

.comments-page-head {
  align-items: center; border-bottom: 1px solid var(--line); display: flex;
  flex: 0 0 auto; gap: 12px; padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
}
.comments-page-head h2 { color: var(--ink); font-size: 15px; margin: 0; }
.comments-count { color: #9299a8; font-size: 12px; font-weight: 600; }
.comments-back {
  align-items: center; background: #f2f3f7; border-radius: 9px;
  color: var(--ink); display: inline-flex; flex: 0 0 auto; height: 38px;
  justify-content: center; width: 38px;
}
.comments-back svg { height: 17px; width: 17px; }

.comments-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 18px; -webkit-overflow-scrolling: touch; }
.comments-empty {
  align-items: center; color: #9299a8; display: flex; flex-direction: column;
  gap: 8px; padding: 60px 20px; text-align: center;
}
.comments-empty span { font-size: 30px; }
.comments-empty p { font-size: 12px; margin: 0; max-width: 240px; }

.comments-row { display: flex; gap: 10px; padding: 14px 0; }
.comments-row.is-pinned { background: linear-gradient(90deg, rgba(118,73,247,.06), transparent 60%); border-radius: 12px; margin: 0 -10px; padding: 14px 10px; }
.comments-avatar { height: 32px; width: 32px; }
.comments-row-body { flex: 1; min-width: 0; }
.comments-row-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.comments-row-head strong { color: var(--ink); font-size: 12px; }
.comments-row-head small { color: #9299a8; font-size: 10.5px; }
.comments-pinned-tag {
  align-items: center; color: var(--purple); display: inline-flex; font-size: 9.5px;
  font-weight: 800; gap: 3px; letter-spacing: .02em; text-transform: uppercase;
}
.comments-pinned-tag svg { fill: none; height: 11px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 11px; }
.comments-row-text { color: #333a4c; font-size: 12.5px; line-height: 1.55; margin: 4px 0 6px; overflow-wrap: anywhere; white-space: pre-wrap; }

.comments-actions { display: flex; gap: 14px; }
.comments-action { color: #8d95a6; font-size: 10.5px; font-weight: 700; }
.comments-action:hover { color: var(--purple); }
.comments-action-delete:hover { color: #e05b78; }

.comments-replies { border-left: 2px solid var(--line); margin: 2px 0 0 16px; padding-left: 14px; }
.comments-replies .comments-row { padding: 10px 0; }
.comments-replies .comments-avatar { height: 26px; width: 26px; }

.comments-reply-context {
  align-items: center; background: #f6f7fb; border-top: 1px solid var(--line);
  display: flex; flex: 0 0 auto; font-size: 11px; font-weight: 700;
  justify-content: space-between; padding: 8px 16px;
}
.comments-reply-context.is-hidden { display: none; }
.comments-reply-context span { color: var(--purple); }
.comments-reply-context button { align-items: center; color: #8d95a6; display: inline-flex; height: 22px; justify-content: center; width: 22px; }
.comments-reply-context button svg { height: 13px; width: 13px; }

.comments-compose { flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }

body[data-theme="dark"] .comments-page { background: #0d0d0d; }
body[data-theme="dark"] .comments-page-head { border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .comments-page-head h2 { color: #f2f2f2; }
body[data-theme="dark"] .comments-back { background: rgba(255,255,255,.06); color: #d8d8d8; }
body[data-theme="dark"] .comments-row.is-pinned { background: linear-gradient(90deg, rgba(167,139,250,.1), transparent 60%); }
body[data-theme="dark"] .comments-row-text { color: #e6e6e6; }
body[data-theme="dark"] .comments-row-head small { color: #8a8a8a; }
body[data-theme="dark"] .comments-replies { border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .comments-reply-context { background: #181818; border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .comments-empty { color: #8a8a8a; }