.chapter-paragraph {
  position: relative;
  padding-right: 36px;
}

.paragraph-action {
  position: absolute;
  right: 4px;
  top: 0.35em;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--reader-panel-border, #d1d5db);
  background: var(--reader-control-bg, var(--reader-panel-bg, white));
  color: var(--reader-panel-text, var(--color-text));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.paragraph-action .paragraph-action-count {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.06);
  color: var(--reader-panel-text, #111);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: transform 0.12s ease, opacity 0.12s ease;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.paragraph-action.has-count .paragraph-action-count {
  display: inline-flex;
  opacity: 1;
}
@media (min-width: 769px) {
  .chapter-paragraph:hover .paragraph-action.has-count .paragraph-action-count {
    transform: translateY(-2px);
  }
}
.reader-body .paragraph-action.has-count .paragraph-action-count {
  background: var(--reader-accent, #7f2b3a);
  border-color: transparent;
  color: var(--reader-on-accent, #fff);
}

.chapter-paragraph:hover .paragraph-action,
.chapter-paragraph:focus-within .paragraph-action,
.paragraph-action:hover,
.paragraph-action:focus-visible,
.paragraph-action.has-count,
.paragraph-action.has-reaction {
  opacity: 1;
  pointer-events: auto;
}

.paragraph-action:hover,
.paragraph-action:focus-visible {
  background: var(--reader-control-hover, var(--reader-panel-hover, rgba(0,0,0,.06)));
  border-color: var(--reader-accent, var(--reader-panel-border, #d1d5db));
}

.paragraph-action:focus-visible {
  outline: 2px solid var(--reader-accent, #7f2b3a);
  outline-offset: 2px;
}

.paragraph-action.has-count {
  font-size: 12px;
  font-weight: 500;
}

.paragraph-action.has-reaction {
  font-size: 12px;
  font-weight: 500;
}

.paragraph-action.has-reaction .paragraph-action__reaction-indicator {
  opacity: 1;
  visibility: visible;
}

.paragraph-action__reaction-indicator {
  display: inline-flex;
  width: 0.75rem;
  height: 0.75rem;
  align-items: center;
  justify-content: center;
}

.paragraph-action__reaction-indicator svg {
  display: block;
  width: 100%;
  height: 100%;
}

.paragraph-comment-popup[hidden] {
  display: none;
}

.paragraph-comment-popup.is-open {
  display: block;
}

.paragraph-comment-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.paragraph-comment-panel {
  position: fixed;
  right: 24px;
  top: 80px;
  bottom: 40px;
  width: min(420px, calc(100vw - 32px));
  background: var(--reader-panel-bg, var(--color-surface));
  border: 1px solid var(--reader-panel-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--reader-panel-text, var(--color-text));
}

.paragraph-comment-header {
  padding: 16px;
  border-bottom: 1px solid var(--reader-panel-border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--reader-panel-text, var(--color-text));
}

.paragraph-comment-header button {
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--reader-panel-muted, #6b7280);
}

.paragraph-comment-quote {
  padding: 12px 16px;
  background: var(--reader-panel-hover, rgba(243, 244, 246, 1));
  font-size: 14px;
  color: var(--reader-panel-text, var(--color-text));
  border-bottom: 1px solid var(--reader-panel-border, #e5e7eb);
}

.paragraph-reaction-placeholder {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--reader-panel-border, #e5e7eb);
}

.paragraph-reaction-placeholder button {
  border: 1px solid var(--reader-panel-border, #d1d5db);
  border-radius: 8px;
  padding: 6px 12px;
  background: var(--reader-surface-bg, #ffffff);
  color: var(--reader-panel-text, var(--color-text));
  cursor: pointer;
  font-size: 16px;
}

.paragraph-reaction-button.is-active {
  font-weight: 700;
  border-color: var(--reader-panel-current-bg, rgba(248, 113, 113, 0.26));
}

 .reader-body .paragraph-comment-header button,
.reader-body .paragraph-reaction-placeholder button,
.reader-body .paragraph-comment-like,
.reader-body .paragraph-comment-reply-btn,
.reader-body .paragraph-comment-reply-actions button,
.reader-body .paragraph-comment-form textarea,
.reader-body .paragraph-comment-form-footer button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.reader-body .paragraph-comment-header button {
  color: var(--reader-panel-muted, var(--reader-panel-text, #6b7280));
}

.reader-body .paragraph-reaction-placeholder button,
.reader-body .paragraph-comment-like,
.reader-body .paragraph-comment-reply-btn,
.reader-body .paragraph-comment-reply-actions button,
.reader-body .paragraph-comment-form-footer button {
  border-color: var(--reader-panel-border, #d1d5db);
  background: var(--reader-control-bg, transparent);
  color: var(--reader-panel-text, var(--color-text));
}

.reader-body .paragraph-reaction-placeholder button:hover,
.reader-body .paragraph-comment-like:hover,
.reader-body .paragraph-comment-reply-btn:hover,
.reader-body .paragraph-comment-reply-actions button:hover,
.reader-body .paragraph-comment-form-footer button:hover {
  background: var(--reader-panel-hover, rgba(0,0,0,.06));
  border-color: var(--reader-accent, var(--reader-panel-border, #d1d5db));
}

.reader-body .paragraph-comment-like.is-liked {
  background: var(--reader-accent, #7f2b3a);
  border-color: var(--reader-accent, #7f2b3a);
  color: var(--reader-on-accent, #fff);
}

.reader-body .paragraph-comment-form textarea {
  background: var(--reader-control-bg, var(--reader-panel-bg, #fff));
  border-color: var(--reader-panel-border, #d1d5db);
  color: var(--reader-panel-text, var(--color-text));
}

.reader-body .paragraph-comment-form textarea:focus {
  border-color: var(--reader-accent, #7f2b3a);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-accent, #7f2b3a) 18%, transparent);
}

.reader-body .paragraph-comment-form textarea::placeholder {
  color: var(--reader-panel-muted, #6b7280);
}

.reader-body .paragraph-comment-form-footer button:disabled {
  opacity: 0.55;
}

.paragraph-comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: 14px;
}

.paragraph-comment-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--reader-panel-border, #f3f4f6);
}

.paragraph-comment-item.highlighted-comment {
  outline: 2px solid rgba(250, 204, 21, 0.7);
  outline-offset: -2px;
  background: rgba(250, 204, 21, 0.14);
}

.paragraph-comment-item[data-visual-depth="0"] {
  margin-left: 0;
}

.paragraph-comment-item[data-visual-depth="1"] {
  margin-left: 1.5rem;
}

.paragraph-comment-item[data-visual-depth]:not([data-visual-depth="0"]):not([data-visual-depth="1"]) {
  margin-left: 3rem;
}

.paragraph-comment-item:last-child {
  border-bottom: none;
}

.paragraph-comment-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.paragraph-comment-like,
.paragraph-comment-reply-btn,
.paragraph-comment-reply-actions button {
  border: 1px solid var(--reader-panel-border, #d1d5db);
  background: transparent;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.paragraph-comment-like.is-liked {
  background: var(--reader-primary, #2563eb);
  color: #fff;
  border-color: transparent;
}

.paragraph-comment-reply-form {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--reader-panel-border, #e5e7eb);
  border-radius: 12px;
  background: var(--reader-panel-hover, rgba(243, 244, 246, 1));
}

.paragraph-comment-reply-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid var(--reader-panel-border, #d1d5db);
  border-radius: 8px;
  resize: vertical;
  margin-bottom: 8px;
  background: var(--reader-surface-bg, #ffffff);
  color: var(--reader-panel-text, var(--color-text));
}

.paragraph-comment-reply-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.paragraph-comment-reply-actions button {
  padding: 6px 12px;
}

.paragraph-comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--reader-panel-muted, #6b7280);
  margin-bottom: 4px;
}

.paragraph-comment-meta strong {
  color: var(--reader-panel-text, var(--color-text));
  font-weight: 600;
}
.paragraph-comment-reply-context { margin-top:.25rem; font-size:.85rem; opacity:.8; }
.paragraph-comment-replies { margin-top:.5rem; }
.paragraph-comment-replies-toggle { display:block; margin:.25rem 0; font-weight:600; background:transparent; border:0; cursor:pointer; }

.paragraph-comment-content {
  color: var(--reader-panel-text, var(--color-text));
  line-height: 1.6;
}

.paragraph-comment-form {
  padding: 16px;
  border-top: 1px solid var(--reader-panel-border, #e5e7eb);
}

.paragraph-comment-form textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid var(--reader-panel-border, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
  background: var(--reader-surface-bg, #ffffff);
  color: var(--reader-panel-text, var(--color-text));
}

.paragraph-comment-form textarea::placeholder {
  color: var(--reader-panel-muted, #9ca3af);
}

.paragraph-comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paragraph-comment-form-footer small {
  color: var(--status-danger-text, var(--reader-accent, #ef4444));
}

.paragraph-comment-form-footer button {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: var(--reader-panel-current-bg, #2563eb);
  color: var(--reader-panel-current-text, white);
  cursor: pointer;
  font-size: 14px;
}

.paragraph-comment-login-note {
  padding: 16px;
  border-top: 1px solid var(--reader-panel-border, #e5e7eb);
  text-align: center;
  color: var(--reader-panel-muted, #6b7280);
  font-size: 14px;
}

@media (max-width: 768px) {
  body.reader-body .paragraph-action {
    opacity: 0;
    pointer-events: none;
    z-index: 10;
  }

  body.reader-body .paragraph-action.has-count,
  body.reader-body .paragraph-action.has-reaction,
  body.reader-body .chapter-paragraph.is-touch-visible .paragraph-action {
    opacity: 1;
    pointer-events: auto;
  }

  body.reader-body:has(.reader-settings-panel:not([hidden]))
    .paragraph-action {
    z-index: 1;
  }

  .paragraph-comment-panel {
    left: 12px;
    right: 12px;
    top: 60px;
    bottom: 20px;
    width: auto;
  }
}

@media (hover: none) {
  .paragraph-action {
    opacity: 0;
    pointer-events: none;
  }

  .paragraph-action.has-count,
  .paragraph-action.has-reaction,
  .chapter-paragraph.is-touch-visible .paragraph-action {
    opacity: 1;
    pointer-events: auto;
  }
}


.reader-body .paragraph-comment-form-footer small.is-error,
.reader-body .paragraph-reaction-message.is-error {
  color: var(--reader-content-text, #d2d2d2);
  background: color-mix(in srgb, #b91c1c 18%, var(--reader-panel-bg, transparent));
}

.reader-body .paragraph-comment-form-footer small.is-success,
.reader-body .paragraph-reaction-message.is-success {
  color: var(--reader-content-text, #d2d2d2);
  background: color-mix(in srgb, #0f9d58 16%, var(--reader-panel-bg, transparent));
}

.comment-image-preview{position:relative;width:min(220px,100%);margin-top:8px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px;overflow:hidden;background:color-mix(in srgb,currentColor 4%,transparent)}
.comment-image-preview[hidden]{display:none!important}.comment-image-preview img{display:block;width:100%;max-height:180px;object-fit:contain;background:rgba(0,0,0,.04)}.comment-image-preview button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* Comment author avatars: compact, role-aware and readable in every reader palette. */
.paragraph-comment-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  margin-bottom: .35rem;
}
.paragraph-comment-header .paragraph-comment-meta {
  min-width: 0;
  flex: 1 1 auto;
  margin-bottom: 0;
}
.comment-avatar {
  --comment-avatar-role: #64748b;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--reader-surface-bg, var(--reader-panel-bg, #fff));
  border: 2px solid var(--reader-surface-bg, var(--reader-panel-bg, #fff));
  box-shadow: 0 0 0 2px var(--comment-avatar-role), 0 1px 4px rgba(0,0,0,.18);
  color: var(--reader-panel-text, var(--color-text, #111827));
}
.comment-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.comment-avatar__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--comment-avatar-role) 18%, var(--reader-surface-bg, #fff));
  color: var(--reader-panel-text, var(--color-text, #111827));
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.comment-avatar--guest { --comment-avatar-role: var(--user-role-guest-fill, #55647A); }
.comment-avatar--member { --comment-avatar-role: var(--user-role-member-fill, #2F6FE0); }
.comment-avatar--smember { --comment-avatar-role: var(--user-role-smember-fill, #E0A83C); }
.comment-avatar--editor { --comment-avatar-role: var(--user-role-admin-fill, #7C4FE0); }
.comment-avatar--admin { --comment-avatar-role: var(--user-role-admin-fill, #7C4FE0); }

@media (max-width: 640px) {
  .comment-avatar { width: 1.85rem; height: 1.85rem; flex-basis: 1.85rem; }
  .paragraph-comment-header { gap: .55rem; }
}

/* Comment controls: keep readable contrast across every reader palette/theme. */
.reader-body .paragraph-comment-like,
.reader-body .paragraph-comment-reply-btn,
.reader-body .paragraph-comment-replies-toggle,
.reader-body .paragraph-comment-reply-actions button,
.reader-body .paragraph-comment-form-footer button {
  color: var(--reader-panel-text, var(--color-text, #1f2937));
  background: var(--reader-control-bg, rgba(127,127,127,.10));
  border: 1px solid var(--reader-panel-border, rgba(127,127,127,.36));
  opacity: 1;
  text-decoration: none;
}
.reader-body .paragraph-comment-replies-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  font-weight: 650;
}
.reader-body .paragraph-comment-like:hover,
.reader-body .paragraph-comment-reply-btn:hover,
.reader-body .paragraph-comment-replies-toggle:hover,
.reader-body .paragraph-comment-reply-actions button:hover,
.reader-body .paragraph-comment-form-footer button:hover,
.reader-body .paragraph-comment-like:focus-visible,
.reader-body .paragraph-comment-reply-btn:focus-visible,
.reader-body .paragraph-comment-replies-toggle:focus-visible,
.reader-body .paragraph-comment-reply-actions button:focus-visible,
.reader-body .paragraph-comment-form-footer button:focus-visible {
  color: var(--reader-panel-text, var(--color-text, #111827));
  background: var(--reader-panel-hover, rgba(127,127,127,.18));
  border-color: var(--reader-accent, var(--reader-panel-border, rgba(127,127,127,.55)));
  opacity: 1;
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reader-accent, #7f2b3a) 28%, transparent);
}
.reader-body .paragraph-comment-like.is-liked {
  color: var(--reader-on-accent, #fff);
  background: var(--reader-accent, #7f2b3a);
  border-color: var(--reader-accent, #7f2b3a);
}

/* Compact paragraph-comment image actions. */
.paragraph-comment-form-actions,.paragraph-comment-reply-actions{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap}
.paragraph-comment-form .comment-image-action{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid var(--reader-panel-border,#d1d5db);border-radius:8px;background:var(--reader-control-bg,rgba(127,127,127,.08));color:var(--reader-panel-text,var(--color-text));font:inherit;font-size:14px;line-height:1;cursor:pointer}
.paragraph-comment-form .comment-image-action:hover,.paragraph-comment-form .comment-image-action:focus-within{border-color:var(--reader-accent,#7f2b3a);background:color-mix(in srgb,var(--reader-accent,#7f2b3a) 10%,var(--reader-control-bg,transparent))}
.paragraph-comment-form .comment-image-action input[type="file"]{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.paragraph-comment-form .comment-image-preview{width:154px;height:112px;max-width:100%;margin:0 0 8px auto}
.paragraph-comment-form .comment-image-preview img{width:100%;height:100%;max-height:none;object-fit:contain;background:color-mix(in srgb,var(--reader-panel-text,currentColor) 4%,transparent)}