/* =====================================================================
   Scrollbars — the ONE place scrollbars are defined in this app.

   Fat, square-cornered, with stepper arrows at both ends: the classic
   desktop bar you can actually hit with a mouse without aiming.

   Global on purpose — no opt-in class, so every scroll area (chat,
   sidebar, cabinet, harbor panes, tables, code blocks) gets the same
   bar. This replaces four older definitions that fought each other with
   !important: App.css .custom-scrollbar (itself broken — width:100px,
   border:100px), sea.css .theme-sea, liquid.css .theme-liquid and
   harbor.css .ck-scroll. Those are gone; retune here and nowhere else.
   ===================================================================== */

:root {
	--sb-size: 18px;
	/* classic Windows was ~17px */
	--sb-track: #d6dbe1;
	--sb-thumb: #7d8794;
	--sb-thumb-hover: #5c6672;
	--sb-thumb-active: #414a55;
	--sb-line: #aeb6bf;
	--sb-btn-hover: #c2c8cf;
	--sb-btn-active: #a9b1b9;
}

/* On a phone 18px eats real estate; 16 is still a finger-sized target. */
@media (max-width: 640px) {
	:root {
		--sb-size: 16px;
	}
}

/* ---------- Firefox ----------
   `auto`, never `thin` — on Windows that is the OS bar, arrows included.
   Firefox has no ::-webkit-scrollbar equivalent, so this is all we get
   there, and it is already the fat one.

   ⚠️ The @supports wrapper is load-bearing, not decoration. Chrome 121+
   implements the standard scrollbar-width/-color, and the moment either
   one is set on an element Chrome switches to the standard path and
   IGNORES every ::-webkit-scrollbar rule below — arrows included. Left
   unscoped, this block silently reverts the whole file to a 15px stock
   bar (measured, that is exactly what happened). Firefox does not
   support selector(), so `not` is true there and only there. */
@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: auto;
		scrollbar-color: var(--sb-thumb) var(--sb-track);
	}
}

/* ---------- WebKit / Blink: Chrome, Edge, Safari, Android ---------- */
::-webkit-scrollbar {
	width: var(--sb-size);
	height: var(--sb-size);
	background: var(--sb-track);
}

::-webkit-scrollbar-track {
	background: var(--sb-track);
	border-radius: 0;
	box-shadow: none;
}

::-webkit-scrollbar-thumb {
	background: var(--sb-thumb);
	border: 1px solid var(--sb-line);
	border-radius: 0;
	/* never let a long chat shrink the thumb to an unclickable sliver */
	min-height: 48px;
	min-width: 48px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--sb-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
	background: var(--sb-thumb-active);
}

::-webkit-scrollbar-corner {
	background: var(--sb-track);
}

/* ---------- stepper arrows ----------
   Chrome draws the button box but no glyph, so each arrow is an inline
   SVG. The fill colour is baked into the data URI (%233a424c) because a
   url() cannot read a CSS variable — change it in all four if you
   retune the palette above. Angle brackets are percent-encoded so the
   build's CSS minifier cannot mangle them. */
::-webkit-scrollbar-button {
	background-color: var(--sb-track);
	border: 1px solid var(--sb-line);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px 9px;
}

::-webkit-scrollbar-button:hover {
	background-color: var(--sb-btn-hover);
}

::-webkit-scrollbar-button:active {
	background-color: var(--sb-btn-active);
}

/* One button at each end. Without the second rule Chrome also places a
   phantom button at the wrong end of each track. */
::-webkit-scrollbar-button:single-button {
	display: block;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
	display: none;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: var(--sb-size);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,22 92,78 8,78' fill='%233a424c'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
	height: var(--sb-size);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,78 92,22 8,22' fill='%233a424c'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
	width: var(--sb-size);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='22,50 78,92 78,8' fill='%233a424c'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
	width: var(--sb-size);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='78,50 22,92 22,8' fill='%233a424c'/%3E%3C/svg%3E");
}