/**
 * Unendliches Scrollen für Thread-Ansichten – Styles
 *
 * Alle Farben stammen ausschließlich aus den CSS-Variablen, die WoltLab Suite
 * pro aktivem Style (Theme) automatisch auf :root ausgibt (--wcfContent…,
 * --wcfButton…, --wcfContentLink …). Damit übernimmt dieses Plugin automatisch
 * die Farben des vorhandenen Themes – inklusive Dark-Scheme-Umschaltung,
 * ohne dass der Administrator etwas einstellen muss.
 *
 * Alle Klassen sind mit "wis" (WoltLab Infinity Scroll) präfixiert.
 */

/* Sentinel unterhalb der Beitragsliste */
.wisSentinel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem 0 2.5rem;
	color: var(--wcfContentDimmedText, #666);
	font-size: var(--wcfFontSizeSmall, 0.875rem);
}

/* Lade-Indikator */
.wisLoading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* display:flex wurde sonst gegen das hidden-Attribut durchgesetzt */
.wisLoading[hidden],
.wisButton[hidden] {
	display: none;
}

.wisSpinner {
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--wcfContentBorder, #ddd);
	border-top-color: var(--wcfContentHeadlineText, #333);
	border-radius: 50%;
	animation: wisRotate 0.9s linear infinite;
}

@keyframes wisRotate {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wisSpinner {
		animation-duration: 2.4s;
	}
}

/* „Mehr laden“-Schaltfläche (Modus: manuell) – nutzt WoltLabs Button-Optik */
.wisButton {
	min-width: 14rem;
}

/* Ende-Meldung */
.wisEnd {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.25rem;
	color: var(--wcfContentDimmedText, #666);
}

.wisEndLink {
	color: var(--wcfContentLink, inherit);
	text-decoration: underline;
}

.wisEndLink:hover,
.wisEndLink:focus-visible {
	color: var(--wcfContentLinkActive, inherit);
}

/* Kurz-Hervorhebung eines angesteuerten Beitrags */
.wisHighlight > article,
article.wisHighlight {
	box-shadow: 0 0 0 3px var(--wcfContentBorderInner, rgba(0, 0, 0, 0.1));
	transition: box-shadow 0.6s ease;
}

/* „Nach oben“ */
.wisBackToTop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wcfContentBorder, #ddd);
	border-radius: 50%;
	background: var(--wcfButtonBackground, #fff);
	color: var(--wcfButtonText, #333);
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 140ms ease-out, transform 80ms ease-out;
}

.wisBackToTop[hidden] {
	display: none;
}

.wisBackToTop:hover {
	opacity: 1;
	background: var(--wcfButtonBackgroundActive, var(--wcfButtonBackground, #fff));
	color: var(--wcfButtonTextActive, var(--wcfButtonText, #333));
}

.wisBackToTop:active {
	transform: scale(0.96);
}

.wisBackToTop:focus-visible {
	outline: 2px solid var(--wcfContentLink, #337ab7);
	outline-offset: 2px;
}

/* Zugänglichkeits-Assistent: Text nur für Screenreader */
.wisVisuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Fortschrittsleiste rechts (Discourse-artig): Track mit Fuellstand,
 * Seitenzaehler und Datumsbeschriftung. Farben ausschliesslich aus den
 * WoltLab-Style-Variablen -> passt sich jedem Theme an.
 */
.wisRail {
	position: fixed;
	top: 50%;
	/* Horizontale Position setzt das Script: schwebt im rechten
	   Innenabstand der Beitragskarten (siehe positionRail()). */
	left: 0;
	transform: translateY(-50%);
	opacity: 0.85;
	transition: opacity 150ms ease-out;
	z-index: 49;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wcfFontSizeSmall, 0.8rem);
	color: var(--wcfContentDimmedText, #777);
	user-select: none;
}

.wisRail[hidden] {
	display: none;
}

.wisRailCounter {
	font-weight: 600;
	color: var(--wcfContentText, #333);
	background: var(--wcfContentBackground, #fff);
	border: 1px solid var(--wcfContentBorder, #ddd);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	white-space: nowrap;
}

.wisRailDate {
	white-space: nowrap;
	max-width: 5.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wisRailTrack {
	position: relative;
	width: 4px;
	height: 34vh;
	min-height: 120px;
	border-radius: 2px;
	background: var(--wcfContentBorderInner, #eee);
	cursor: pointer;
	/* Auf Touch-Geraeten: ziehen statt seitlich scrollen */
	touch-action: none;
}

/* Griff am Fuellstand-Ende: Signal "hier kann man ziehen" */
.wisRailThumb {
	position: absolute;
	left: 50%;
	top: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wcfContentLink, #0a6fb1);
	border: 2px solid var(--wcfContentBackground, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%) scale(0.7);
	transition: transform 120ms ease-out;
	pointer-events: none;
}

.wisRailTrack:hover .wisRailThumb,
.wisRailTrack.isDragging .wisRailThumb {
	transform: translate(-50%, -50%) scale(1);
}

/* Sprechblase mit der ca.-Beitragsnummer beim Ziehen */
.wisRailTip {
	position: absolute;
	right: 14px;
	top: 0;
	transform: translateY(-50%);
	background: var(--wcfContentText, #333);
	color: var(--wcfContentBackground, #fff);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.28rem 0.45rem;
	border-radius: 5px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.wisRailTip[hidden] {
	display: none;
}

.wisRailTrack.isDragging {
	width: 6px;
}

.wisRailFill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2%;
	border-radius: 2px;
	background: var(--wcfContentLink, #0a6fb1);
	transition: height 120ms linear;
}

.wisRailTrack:hover .wisRailFill {
	background: var(--wcfContentLinkActive, var(--wcfContentLink, #0a6fb1));
}

/* Kleine Rundbuttons in der Leiste (Beitrag zurueck/vor, Anfang/Ende) */
.wisRailBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--wcfContentBorder, #ddd);
	background: var(--wcfContentBackground, #fff);
	color: var(--wcfContentText, #333);
	cursor: pointer;
	transition: background 120ms ease-out, color 120ms ease-out;
}

.wisRailBtn:hover {
	background: var(--wcfButtonBackgroundActive, #eee);
	color: var(--wcfButtonTextActive, #000);
}

.wisRailBtn:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Wahrend „Zum Ende“ den Rest nachlaedt, dreht sich der Button-Rand */
.wisRailLast.isBusy {
	animation: wisRailSpin 1s linear infinite;
}

@keyframes wisRailSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Auf schmalen Bildschirmen und im Druck keinen Platz wegnehmen */
@media (max-width: 1100px) {
	.wisRail {
		display: none;
	}
}

@media print {
	.wisRail {
		display: none !important;
	}
}

/*
 * Original-Pagination ausblenden – NUR wenn das Script lief (body.wisActive).
 * Ohne JavaScript (oder auf Seiten, die das Plugin ignoriert) bleibt die
 * klassische Seitennavigation vollständig sichtbar.
 */
body.wisActive .messageListPagination,
body.wisActive .contentInteractionPagination.paginationTop {
	display: none;
}