/* Comment threads, people mentions and the Inbox (assets/js/ext/comments_notify.js). */
:root { --cn-mark: rgba(255, 203, 0, .22); --cn-mark-line: rgba(232, 168, 0, .8); --cn-mark-active: rgba(255, 203, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cn-mark: rgba(255, 203, 0, .16); --cn-mark-line: rgba(255, 203, 0, .55); --cn-mark-active: rgba(255, 203, 0, .32); }
}
:root[data-theme="dark"] { --cn-mark: rgba(255, 203, 0, .16); --cn-mark-line: rgba(255, 203, 0, .55); --cn-mark-active: rgba(255, 203, 0, .32); }

.comment-mark { background: var(--cn-mark); border-bottom: 2px solid var(--cn-mark-line); cursor: pointer; transition: background .15s; }
.export .comment-mark, .share-mode .comment-mark { background: none; border-bottom: 0; cursor: text; }
.mention-user { color: var(--fg-muted); font-weight: 500; white-space: nowrap; }
.content .mention-user { color: var(--fg); border-radius: 4px; padding: 0 2px; background: var(--bg-hover); }
.comment-body .mention-user { color: var(--accent); }

.cn-thread { padding: 6px 8px 8px; margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; cursor: default; }
.cn-thread.focused { border-color: var(--cn-mark-line); box-shadow: 0 0 0 1px var(--cn-mark-line); }
.cn-thread.resolved { opacity: .6; }
.cn-thread .comment { border-bottom: 0; padding: 6px 0 2px; }
.cn-quote { font-size: 13px; color: var(--fg-muted); border-left: 3px solid var(--cn-mark-line); padding: 1px 8px; margin: 2px 0 2px; cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cn-reply { display: flex; gap: 6px; align-items: flex-end; margin: 6px 0 0 30px; }
.cn-reply textarea { flex: 1; min-height: 32px; resize: vertical; font-size: 13px; }
.cn-anchor { align-self: stretch; display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.cn-quote-text { flex: 1; border-left: 3px solid var(--cn-mark-line); padding: 1px 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comment-new textarea { align-self: stretch; }

.cn-si { width: 28px; height: 28px; border: 0; background: none; }
.cn-people { width: 240px; max-height: 260px; overflow-y: auto; padding: 4px; }

.block.cn-flash { animation: cn-flash 1.6s ease-out; border-radius: 4px; }
@keyframes cn-flash { 0%, 30% { background: var(--cn-mark-active); } 100% { background: transparent; } }

.cn-inbox-btn { position: relative; }
.cn-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.cn-badge[hidden] { display: none; }
.cn-inbox { display: flex; flex-direction: column; max-height: min(560px, 80vh); }
.cn-inbox-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cn-inbox-head .spacer { flex: 1; }
.cn-list { overflow-y: auto; padding: 4px; }
.cn-list .spinner { margin: 20px auto; }
.cn-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 14px; position: relative; }
.cn-item:hover, .cn-item:focus-visible { background: var(--bg-hover); outline: none; }
.cn-item.unread::before { content: ''; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cn-item-main { flex: 1; min-width: 0; }
.cn-snippet { color: var(--fg-muted); font-size: 13px; margin: 2px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cn-read { opacity: 0; }
.cn-item:hover .cn-read, .cn-read:focus { opacity: 1; }
@media (hover: none) { .cn-read { opacity: 1; } }