.container {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-anchor: none;

	/* ── Fluxer chat scrollbar ────────────────────────────────────
	   Exact copy of Fluxer's `Scroller.module.css` rules. The track
	   gets pinned to `--background-secondary-lighter` (same override
	   Fluxer's Messages.module.css uses) so the thumb has a matching
	   surface to ride on. Firefox fallback uses `scrollbar-color`.

	   The 4px transparent border + `background-clip: padding-box`
	   trick is what gives the thumb its visible inset — the element
	   is 16px wide total but only 8px of thumb renders inside the
	   border, floating in the middle of the gutter. */
	--scrollbar-track-bg: var(--background-secondary-lighter);
	scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

.container::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

.container::-webkit-scrollbar-corner {
	background-color: transparent;
}

.container::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-bg);
	min-height: 40px;
}

.container::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-bg-hover);
}

.container::-webkit-scrollbar-thumb,
.container::-webkit-scrollbar-track {
	border: 4px solid transparent;
	background-clip: padding-box;
	border-radius: 8px;
}

.container::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-bg);
}

.scroller {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100%;
	padding-bottom: 8px;
	overflow-anchor: none;
}

/* ── Day divider ─────────────────────────────────────────────────
   Horizontal rule with the date centered on it, mirroring fluxer's
   per-day separator between message groups. The rule uses flex
   pseudo-elements so the line fills every remaining pixel on both
   sides of the label regardless of how wide the date string is. */
.dayDivider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 1rem 0.5rem;
	color: var(--text-tertiary);
	font-size: 0.75rem;
	font-weight: 600;
	user-select: none;
}

.dayDivider::before,
.dayDivider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--background-modifier-accent);
}

.pollWrapper {
	padding: 0.25rem 1rem 0.25rem 4.5rem;
}

/* ── Day divider ──────────────────────────────────────────────────
   Renders between message groups whenever the calendar day changes.
   Centred date label with thin horizontal lines on both sides — the
   `flex: 1` pseudo-elements grow to fill whatever the label doesn't. */
.dayDivider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 1rem 0.5rem;
	color: var(--text-tertiary);
	font-size: 0.75rem;
	font-weight: 600;
	user-select: none;
}

.dayDivider::before,
.dayDivider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--background-modifier-accent);
}

/* ── New-messages divider ─────────────────────────────────────────
   Red hairline with a "NEW" pill on the right edge. Rendered between
   the last message the user has already read and the first unread
   one. The divider anchor is snapshotted on channel open so it stays
   put during the session — live new messages arriving while the user
   is reading don't push it further down the list. */
.newDivider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 1rem 0.5rem;
	color: var(--status-danger, #ed4245);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	user-select: none;
}

.newDivider::before {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--status-danger, #ed4245);
}

.newDividerBadge {
	padding: 2px 6px;
	border-radius: 4px;
	background-color: var(--status-danger, #ed4245);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ── Jump highlight ───────────────────────────────────────────────
   Pulsed background applied to a message row by the
   `brycord:scroll-to-message` listener. Class is added globally
   (via `.messageJumpHighlight`) so it can target the
   `[data-message-id]` node from MessageGroup, which sits inside
   `.scroller` but uses its own module class names. */
:global(.messageJumpHighlight) {
	background-color: rgba(88, 101, 242, 0.16);
	box-shadow: inset 2px 0 0 var(--brand-primary, #5865f2);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
