/* Novel-page comment feed (views/discussion/_book_feed.php, _feed_items.php). On top of discussion.css — comments
 * themselves keep the chapter thread's look. Theme tokens from nb.css only. Prefix .nb-bc-. */

/* ------------------------------------------------------------ head: title, chips */
.nb-bc-head { row-gap: 10px; }
.nb-bc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.nb-bc-seg {
	display: inline-flex; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; background: var(--card);
}
.nb-bc-seg a {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; white-space: nowrap;
	font-size: 12.5px; font-weight: 550; line-height: 1.45; color: var(--muted-foreground);
	transition: background .15s, color .15s;
}
.nb-bc-seg a + a { border-left: 1px solid var(--border); }
.nb-bc-seg a:hover { background: var(--muted); color: var(--foreground); text-decoration: none; }
.nb-bc-seg a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.nb-bc-seg a.on { background: var(--primary); color: var(--primary-foreground); }
.nb-bc-seg a small { font-size: 11px; font-weight: 600; color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.nb-bc-seg a.on small { opacity: .85; }
/* phones: both chip groups on one row — the total is already next to the title */
@media (max-width: 520px) {
	.nb-bc-seg a { padding: 5px 10px; }
	.nb-bc-seg a small[data-bc-count="live"] { display: none; }
}

/* ------------------------------------------------------------ threads */
.nb-bc-list { transition: opacity .15s; }
.nb-bc.is-reloading .nb-bc-list { opacity: .45; pointer-events: none; }
.nb-bc-list > .nb-bc-item { padding: 16px 0; min-width: 0; }
.nb-bc-list > .nb-bc-item:first-child, .nb-bc-list > .nb-d-linked:first-child + .nb-bc-item { padding-top: 0; }
.nb-bc-list > .nb-bc-item + .nb-bc-item, .nb-bc-list > .nb-d + .nb-bc-item { border-top: 1px solid var(--border); }
/* an article directly in the list = a comment discussion.js has just inserted, wrapped a moment later */
.nb-bc-list > .nb-bc-item > .nb-d { padding: 0; border: 0; }

/* "on Chapter 12 - Title": where the thread lives */
.nb-bc-ctx {
	display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 8px 46px;
	font-size: 12px; line-height: 1.5; color: var(--muted-foreground);
}
.nb-bc-ctx svg { flex: none; opacity: .75; }
.nb-bc-ctx a, .nb-bc-ctx span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-bc-ctx a { color: var(--muted-foreground); font-weight: 600; }
.nb-bc-ctx a:hover { color: var(--foreground); }
.nb-bc-ctx.is-novel span { font-weight: 600; }
@media (max-width: 520px) { .nb-bc-ctx { margin-left: 0; } }

/* the first two direct replies; the rest behind "Show N more replies" (JS only — without JS all are shown) */
.nb-bc.is-js .nb-bc-item.is-collapsed > .nb-d > .nb-d-replies > .nb-d:nth-child(n+3) { display: none; }
.nb-bc:not(.is-js) .nb-bc-more-replies { display: none; }
.nb-bc-more-replies { margin-left: 16px; padding: 8px 0 0 11px; border-left: 2px solid var(--border); }
.nb-bc-more-replies .nb-d-act { color: var(--foreground); font-weight: 600; }
.nb-bc-more-replies .nb-d-act svg { color: var(--muted-foreground); }
@media (max-width: 640px) { .nb-bc-more-replies { margin-left: 4px; padding-left: 3px; } }

/* ------------------------------------------------------------ paging */
.nb-bc-more-wrap { text-align: center; margin-top: 20px; }
.nb-bc-more span:empty { display: none; }
.nb-bc-more.is-loading { opacity: .6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .nb-bc-list { transition: none; } }

/* ------------------------------------------------------------ touch screens and phones
   The chip groups were 29 px tall; the "on Chapter N" link gets a taller hit area without moving the line. */
@media (max-width: 760px), (pointer: coarse) {
	.nb-bc-seg a { min-height: 38px; box-sizing: border-box; }
	.nb-bc-ctx a { display: inline-block; padding: 9px 0; margin: -9px 0; max-width: 100%; }
	.nb-bc-more-replies { padding-top: 4px; }
}