.save-btn.save-active { color: var(--color-primary); }
.save-btn.save-active:hover { background-color: color-mix(in oklch, var(--color-primary) 12%, transparent); }
.save-btn.save-idle { color: color-mix(in oklch, var(--color-base-content) 35%, transparent); }
.save-btn.save-idle:hover { color: var(--color-primary); background-color: color-mix(in oklch, var(--color-primary) 10%, transparent); }

.comment-quill-wrap .ql-toolbar.ql-snow { border-radius: 0.625rem 0.625rem 0 0; border-color: var(--color-base-300); background: var(--color-base-200); padding: 6px 10px; }
.comment-quill-wrap .ql-container.ql-snow { border-radius: 0 0 0.625rem 0.625rem; border-color: var(--color-base-300); font-size: 0.9375rem; line-height: 1.75; font-family: inherit; min-height: 96px; }
.comment-quill-wrap .ql-editor { min-height: 96px; padding: 10px 14px; }
.comment-quill-wrap .ql-editor.ql-blank::before { font-style: normal; color: color-mix(in oklch, var(--color-base-content) 35%, transparent); }
.comment-quill-wrap .ql-toolbar .ql-formats { margin-right: 10px; }
/* Quill's snow icons are dark strokes; follow the theme text colour instead */
.comment-quill-wrap .ql-snow .ql-stroke { stroke: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.comment-quill-wrap .ql-snow .ql-fill { fill: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.comment-quill-wrap .ql-snow .ql-picker { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
.comment-quill-wrap .ql-editor blockquote { border-left: 4px solid var(--color-primary); background: var(--color-base-200); padding: 0.4em 0.75em; margin: 0.4em 0; border-radius: 0 0.375rem 0.375rem 0; color: color-mix(in oklch, var(--color-base-content) 80%, transparent); font-style: italic; }
.comment-quill-wrap .ql-editor a { color: var(--color-primary); text-decoration: underline; }
/* Allow tooltip to overflow the editor container */
.comment-quill-wrap .ql-container { overflow: visible; }
.comment-quill-wrap .ql-tooltip { z-index: 50; white-space: nowrap; }
.comment-quill-wrap .ql-tooltip.ql-editing { min-width: 220px; }

/* ── Prevent horizontal overflow from comment content ───────────────────────── */
.prose { overflow-wrap: break-word; word-break: break-word; }
.prose img { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; max-width: 100%; }
.prose table { overflow-x: auto; display: block; max-width: 100%; }
.comment-quill-wrap .ql-editor { overflow-wrap: break-word; word-break: break-word; }
.comment-quill-wrap .ql-editor img { max-width: 100%; height: auto; }
.comment-quill-wrap .ql-tooltip { max-width: min(90vw, 360px); }

/* ── Comment card hover elevation ──────────────────────────────────────────── */
.comment-card { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.comment-card:hover { border-color: color-mix(in oklch, var(--color-primary) 25%, var(--color-base-300)); }

/* ── Inline reply panel collapse / expand ───────────────────────────────────── */
.reply-panel {
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.reply-panel-closed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.reply-panel:not(.reply-panel-closed) {
  max-height: 540px;
  opacity: 1;
  /* Allow Quill link tooltip to escape the panel boundary */
  overflow: visible;
}