/*
 * ai-chatboxes reader chat: "early-print" skin (skaryna.ai, hub#5670).
 * Loaded only when aic_reader_chat['skin'] = 'early-print'. Tokens follow the skaryna child theme:
 * paper #F7F2E6 / parchment #f3e8cf, ink #111, cinnabar #7A0F1A, display "Fedorovsk CS",
 * text "Source Serif 4". The deep-chat shadow DOM is skinned by aic-reader-early-print.js.
 */
:root {
	--aic-ep-paper: #f7f2e6;
	--aic-ep-parchment: #f3e8cf;
	--aic-ep-ink: #1b1712;
	--aic-ep-muted: #6b5d48;
	--aic-ep-rule: #c9b48a;
	--aic-ep-red: #7a0f1a;
	/* D34 (owner, 2026-10-30): the three parallel chats are told apart by COLOUR, as on
	 * vania-novikau.me, not by a number. VNM uses its own pastels (#ffcbe6, #53ffbc,
	 * #80ebff) which are three candy tones on a white page and have nothing to do with a
	 * 1517 print, so the hues are re-cut as the inks such a book was actually finished in:
	 * cinnabar (already the skin's accent), verdigris and azurite. Dark on paper, clearly
	 * three different hues, and each one keeps its own light tint for the marked passage. */
	--aic-ep-c1: #7a0f1a;   /* cinnabar  - chat 1 */
	--aic-ep-c1-edge: #5b0a13;
	--aic-ep-c1-wash: rgba(122, 15, 26, .15);
	--aic-ep-c2: #3f6b4f;   /* verdigris - chat 2 */
	--aic-ep-c2-edge: #2d4f39;
	--aic-ep-c2-wash: rgba(63, 107, 79, .18);
	--aic-ep-c3: #2f4f7a;   /* azurite   - chat 3 */
	--aic-ep-c3-edge: #22395a;
	--aic-ep-c3-wash: rgba(47, 79, 122, .18);
	--aic-ep-text: "Source Serif 4", "Fedorovsk CS", Georgia, "Times New Roman", serif;
	--aic-ep-display: "Fedorovsk CS", "Old Standard TT", Georgia, serif;
	--pix-main-font: var(--aic-ep-text);

	/* D34 (owner, 2026-10-30): a real paper ground for the chat panels instead of a flat
	 * fill. Three layers, all procedural - no image request, no CDN, ~1 KB of CSS, and it
	 * tiles at any panel size:
	 *   grain  - feTurbulence fractal noise as a data: URI, stitchTiles so the 200px tile
	 *            repeats seamlessly; this is the fibre of the sheet
	 *   laid   - the close horizontal lines a mould's wires leave in handmade paper
	 *   chain  - the wider verticals where the laid wires are tied down, ~27px apart
	 * Each is blended multiply over the parchment and the foxing stains, at single-digit
	 * alpha: the panel still has to be read through. */
	--aic-ep-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
	/* The grain is multiplied, so it DARKENS the sheet - measured, the ground's mean fell
	 * from 241,229,203 to 226,214,188 and took the hint line from 4.81:1 to 4.12:1, under
	 * AA. The ground therefore starts from a lighter parchment than the flat one, so that
	 * after the multiply it lands back on the colour the panel always had. Texture, not
	 * tinting. */
	--aic-ep-parchment-lit: #fbf3e2;
	--aic-ep-laid: repeating-linear-gradient(0deg, rgba(120, 92, 48, .055) 0 1px, transparent 1px 3px);
	--aic-ep-chain: repeating-linear-gradient(90deg, rgba(120, 92, 48, .05) 0 1px, transparent 1px 27px);
	/* Foxing stays at the strength it had before the texture, and the third stain is
	 * barely there. Measured: raising these to .12/.14/.07 dropped the hint line
	 * (--aic-ep-muted on the bare ground) from 5.25:1 to 3.56:1, under AA. The grain and
	 * the laid lines cost almost no luminance; the stains are what darken a patch. */
	--aic-ep-foxing:
		radial-gradient(ellipse at 12% 8%, rgba(160, 120, 60, .10), transparent 55%),
		radial-gradient(ellipse at 90% 95%, rgba(140, 100, 50, .12), transparent 50%),
		radial-gradient(ellipse at 70% 20%, rgba(150, 110, 55, .04), transparent 40%);
	--aic-ep-paper-ground:
		var(--aic-ep-grain), var(--aic-ep-laid), var(--aic-ep-chain),
		var(--aic-ep-foxing), var(--aic-ep-parchment-lit);
	--aic-ep-paper-blend: multiply, multiply, multiply, normal, normal, normal, normal;
}

/* The pix layout parks the panel in an absolute, page-top box with a sticky child; on a block
 * theme that box scrolls away. Pin the panel to the viewport instead. */
body.aic-chat-mode #aic-ai-chat-wrapper {
	position: fixed !important;
	inset: auto 0 0 auto !important;
	width: 0 !important;
	height: 0 !important;
	overflow: visible !important;
	pointer-events: none;
	z-index: 99990;
}
body.aic-chat-mode #aic-ai-unified-chat {
	position: fixed !important;
	top: auto !important;
	left: auto !important;
	right: 20px !important;
	bottom: 20px !important;
	width: min(460px, calc(100vw - 40px)) !important;
	max-width: none !important;
	height: min(72vh, 660px) !important;
	margin: 0 !important;
	pointer-events: auto;
	z-index: 99991 !important;
}
/*
 * D34 (owner, 2026-10-28): "closer to content, and the image hides when it appears,
 * as it works on vnm", then "make it wider and middle screen position".
 *
 * On vania-novikau.me the panel is a sticky child of the solutech sidebar column
 * (.pix-container-boxed > .row:first-child > .col-xl-4...), so it stands in the
 * article's right column beside the text, centred on the viewport like the picture
 * it replaces (#aic-ai-gallery is fixed at top:50% with translateY(-50%)), and that
 * picture goes to opacity 0 under body.aic-chat-mode (aic-ai-mode.css). Measured
 * live: chat 947x413 inside .wp-block-group.col-xl-4, gallery opacity 0.
 *
 * skaryna has neither half. The arneiron-skaryna-child block theme matches no
 * sidebar selector, so aic-ai-chat.js appends the panel to <body> and the rules
 * above park it in the viewport corner, on top of the right rail; and the rail holds
 * real figures (.l1-figure, .l0-folio-fig), not a gallery the bundle can fade.
 *
 * aic-reader-early-print.js measures the space beside the reading column and
 * publishes it as --aic-ep-chat-left / --aic-ep-chat-w with .aic-ep-rail-dock on
 * <html>. Here the panel takes that space, centred in the window, and the figure
 * behind it yields. The panel is as wide as the layout allows (323px at 1081,
 * 350 at 1280, 432 at 1440, capped at 460), not the 300px width of the figure rail.
 * The rail only exists above 1081px (aic-l0-early-print.css); below that the JS
 * drops the class and the corner rules above stand unchanged, as does the phone
 * sheet at the end of this file.
 */
html.aic-ep-rail-dock body.aic-chat-mode #aic-ai-unified-chat {
	/* 92px keeps the top clear of the sticky site header (84px) on short windows,
	 * and the same figure caps the height, so a centred panel never runs off either
	 * edge: at 700px tall it is 584 high and sits at 92, exactly filling the room. */
	--aic-ep-chat-h: min(calc(100vh - 92px - 24px), 660px);
	top: max(92px, calc(50% - var(--aic-ep-chat-h) / 2)) !important;
	left: var(--aic-ep-chat-left) !important;
	right: auto !important;
	bottom: auto !important;
	width: var(--aic-ep-chat-w) !important;
	height: var(--aic-ep-chat-h) !important;
}
/* Opacity, not display: the figures are sticky right floats, so removing their
 * boxes would reflow the reading column under the open chat.
 * :has(#aic-ai-unified-chat) because body.aic-chat-mode is also set with NO panel
 * present - on load, when sessionStorage remembers "chat" and the D29 guard in
 * aic-reader-early-print.js holds the stored chat back. Without it the rail would
 * go blank on a page that never opened a chat. */
html.aic-ep-rail-dock body.aic-chat-mode:has(#aic-ai-unified-chat) figure.l1-figure,
html.aic-ep-rail-dock body.aic-chat-mode:has(#aic-ai-unified-chat) figure.l0-folio-fig,
html.aic-ep-rail-dock body.aic-chat-mode:has(#aic-ai-unified-chat) .reading-aside {
	opacity: 0 !important;
	pointer-events: none !important;
}
figure.l1-figure,
figure.l0-folio-fig,
.reading-aside {
	transition: opacity .3s ease;
}

body.aic-chat-mode #aic-ai-unified-chat .pix-chat-container {
	height: 100% !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: var(--aic-ep-paper-ground) !important;
	background-blend-mode: var(--aic-ep-paper-blend) !important;
	border: 1px solid var(--aic-ep-rule) !important;
	outline: 3px double rgba(122, 15, 26, .35);
	outline-offset: -7px;
	border-radius: 3px !important;
	box-shadow: 0 18px 48px rgba(40, 25, 10, .28), 0 2px 6px rgba(40, 25, 10, .18) !important;
	color: var(--aic-ep-ink);
	font-family: var(--aic-ep-text);
}
body.aic-chat-mode #aic-ai-unified-chat .pix-chat-body-wrapper,
body.aic-chat-mode #aic-ai-unified-chat .pix-chat-pane.active {
	flex: 1 1 auto;
	min-height: 0;
	height: 100% !important;
}
body.aic-chat-mode #aic-ai-unified-chat deep-chat {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--aic-ep-text);
}
#aic-ai-unified-chat .pix-chat-header,
#aic-ai-unified-chat .pix-chat-tabs-header {
	background: transparent !important;
	border-bottom: 1px solid var(--aic-ep-rule) !important;
	font-family: var(--aic-ep-display) !important;
	color: var(--aic-ep-red) !important;
	letter-spacing: .02em;
}
/* No font-family here any more: the tabs carry numerals since D34 and the display
 * face has oldstyle figures. The rule further down sets the text face for both
 * states; it must, because `.pix-chat-tab.active` outranks a bare `.pix-chat-tab`
 * and the active tab would otherwise keep the display face and sit crooked. */
/* D34: no colour/background here any more - the tabs are filled discs in the three chat
 * inks, set further down. Only the open-tab underline stays, and it follows the ink. */
#aic-ai-unified-chat .pix-chat-tab.active {
	box-shadow: 0 2px 0 var(--aic-ep-rule);
}
#aic-ai-unified-chat .pix-chat-close-btn {
	color: var(--aic-ep-red) !important;
	background: transparent !important;
}

/* Selection affordance: the "Ask AI" circles, one ink each, on paper.
 * aic-ai-chat.js builds exactly three circles from a fixed list and stamps the base colour
 * on each as data-color, so the attribute is the handle; the hex strings below are those
 * three, not a choice made here. */
.aic-ai-circle {
	background: var(--aic-ep-c1) !important;
	color: var(--aic-ep-paper) !important;
	border: 1px solid var(--aic-ep-c1-edge) !important;
	box-shadow: 0 2px 8px rgba(60, 10, 15, .3) !important;
}
.aic-ai-circle[data-color="#53ffbc"] {
	background: var(--aic-ep-c2) !important;
	border-color: var(--aic-ep-c2-edge) !important;
	box-shadow: 0 2px 8px rgba(30, 60, 40, .3) !important;
}
.aic-ai-circle[data-color="#80ebff"] {
	background: var(--aic-ep-c3) !important;
	border-color: var(--aic-ep-c3-edge) !important;
	box-shadow: 0 2px 8px rgba(25, 45, 75, .3) !important;
}
.aic-ai-actions,
.aic-ai-action-btn,
.aic-ai-ask-btn {
	font-family: var(--aic-ep-text) !important;
}
.aic-ai-action-btn,
.aic-ai-ask-btn {
	background: var(--aic-ep-paper) !important;
	color: var(--aic-ep-red) !important;
	border: 1px solid var(--aic-ep-rule) !important;
}
/* The marked passage wears its chat's ink, so a reader can see which conversation belongs
 * to which sentence - the point of three chats. aic-ai-chat.js sets the pastel inline as
 * style.backgroundColor and repeats it as data-color, so each wash needs !important to
 * win over the inline declaration. */
.aic-ai-highlight {
	background: var(--aic-ep-c1-wash) !important;
	box-shadow: 0 1px 0 var(--aic-ep-c1);
}
.aic-ai-highlight[data-color="#53ffbc"] {
	background: var(--aic-ep-c2-wash) !important;
	box-shadow: 0 1px 0 var(--aic-ep-c2);
}
.aic-ai-highlight[data-color="#80ebff"] {
	background: var(--aic-ep-c3-wash) !important;
	box-shadow: 0 1px 0 var(--aic-ep-c3);
}
/* the passage whose chat is open reads a shade stronger, not a different hue */
.aic-ai-highlight.active { background: rgba(122, 15, 26, .28) !important; }
.aic-ai-highlight.active[data-color="#53ffbc"] { background: rgba(63, 107, 79, .32) !important; }
.aic-ai-highlight.active[data-color="#80ebff"] { background: rgba(47, 79, 122, .32) !important; }

/* D29 / D3: the base CSS hides the circle's label (font-size:0) until hover, which never
 * happens on a phone, and draws an icon-font quote the site does not load; the skin swaps
 * that glyph for an inline SVG and keeps the row's own label shown
 * (aic-reader-early-print.js).
 *
 * D34 (owner, 2026-10-30): the circles are plain coloured discs - the colour IS the
 * identity, as on vania-novikau.me. They carried numerals for a day; the numerals, their
 * lining-figure handling and their optical nudge are gone with them. The localized
 * "Ask AI n" stays on each circle as title/aria-label: a screen reader cannot see a hue,
 * so the accessible name still has to tell the three apart. */
.aic-ai-actions {
	min-width: 0 !important;
	padding: 4px 6px !important;
	background: var(--aic-ep-paper) !important;
	border: 1px solid var(--aic-ep-rule);
	border-radius: 999px !important;
	gap: 6px !important;
}
.aic-ai-actions .aic-ai-circle,
.aic-ai-actions .aic-ai-circle:hover {
	width: 22px !important;
	height: 22px !important;
	min-height: 22px;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
}
.aic-ai-actions .aic-ai-circle:hover { transform: scale(1.12); }
.aic-ai-actions .aic-ai-circle:focus-visible {
	outline: 2px solid var(--aic-ep-ink);
	outline-offset: 2px;
}
/* the span inside each circle is empty now; keep it from reserving a line box */
.aic-ai-actions .aic-ai-circle span {
	display: none !important;
}
/* D34 (owner, 2026-10-29): the row's label, after the circles. A label, not a fourth
 * button - the circles are the buttons - so it takes no pointer events; clicks inside
 * .aic-ai-actions are already ignored by the selection-dismiss guard in aic-ai-chat.js,
 * so the selection survives a stray tap on the words either way. */
.aic-ai-actions .aic-ep-ask-label {
	display: inline-block;
	padding: 0 8px 0 4px;
	color: var(--aic-ep-red);
	font-family: var(--aic-ep-text);
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.aic-ai-actions .aic-ai-logo-wrapper { color: var(--aic-ep-red); }
.aic-ai-actions .aic-ai-logo-wrapper i.icon-quote-700 { display: none !important; }
.aic-ai-actions .aic-ep-quote { display: block; margin-left: 4px; color: var(--aic-ep-red); }

/* The same numerals on the panel's tabs. The tab id is derived from the colour
 * (getChatIdFromColor: 'aic-chat-' + hex without '#'), so the attribute selector is the
 * only stable handle; the three hexes are fixed in aic-ai-chat.js. */
/* The panel's tabs are the same three inks, so an open chat reads back to the circle it
 * came from. The tab id is derived from the base colour (getChatIdFromColor:
 * 'aic-chat-' + hex without '#'), so the attribute selector is the only stable handle. */
#aic-ai-unified-chat .pix-chat-tab,
#aic-ai-unified-chat .pix-chat-tab.active {
	background: var(--aic-ep-c1) !important;
	border-color: var(--aic-ep-c1-edge) !important;
}
#aic-ai-unified-chat .pix-chat-tab[data-target="aic-chat-53ffbc"],
#aic-ai-unified-chat .pix-chat-tab.active[data-target="aic-chat-53ffbc"] {
	background: var(--aic-ep-c2) !important;
	border-color: var(--aic-ep-c2-edge) !important;
}
#aic-ai-unified-chat .pix-chat-tab[data-target="aic-chat-80ebff"],
#aic-ai-unified-chat .pix-chat-tab.active[data-target="aic-chat-80ebff"] {
	background: var(--aic-ep-c3) !important;
	border-color: var(--aic-ep-c3-edge) !important;
}
/* the open one is the one with the paper ring and the rule under it */
#aic-ai-unified-chat .pix-chat-tab { opacity: .7; }   /* still clearly its own ink, just quieter */
#aic-ai-unified-chat .pix-chat-tab.active {
	opacity: 1;
	border-color: var(--aic-ep-paper) !important;
}

/* The launcher drawer ("Помощник чтения", the bottom-left pill) is the site's other
 * chatbox: give it the same sheet. Its own file keeps a flat parchment so the launcher
 * stays generic for any skin; this override is the skaryna one. !important because the
 * launcher stylesheet may load after this one. */
.aic-rl-panel {
	background: var(--aic-ep-paper-ground) !important;
	background-blend-mode: var(--aic-ep-paper-blend) !important;
}

/* The history toggle and the usage chip are fixed bottom-right too; keep them clear of the
 * open drawer (left of it on desktop, hidden behind the sheet's edge on phones). */
.aic-hp-toggle,
.aic-usage__chip {
	background: var(--aic-ep-paper) !important;
	color: var(--aic-ep-red) !important;
	border: 1px solid var(--aic-ep-rule) !important;
	font-family: var(--aic-ep-text) !important;
	box-shadow: 0 2px 8px rgba(40, 25, 10, .18) !important;
}
/* D29 / D4: shifting them LEFT of the drawer put them over the article text (x~700-780 at
 * 1280px). Stack them ABOVE the open drawer, at the page edge, instead. Only while a drawer
 * exists: body.aic-chat-mode alone is also set with no drawer (phones, sessionStorage). */
body.aic-chat-mode:has(#aic-ai-unified-chat) .aic-hp-toggle {
	right: 20px !important;
	bottom: calc(min(72vh, 660px) + 32px) !important;
}
body.aic-chat-mode:has(#aic-ai-unified-chat) .aic-usage {
	right: 20px !important;
	bottom: calc(min(72vh, 660px) + 80px) !important;
}
/* Docked in the rail, the panel no longer covers the corner: put them back. */
html.aic-ep-rail-dock body.aic-chat-mode:has(#aic-ai-unified-chat) .aic-hp-toggle {
	right: 16px !important;
	bottom: 16px !important;
}
html.aic-ep-rail-dock body.aic-chat-mode:has(#aic-ai-unified-chat) .aic-usage {
	right: 16px !important;
	bottom: 84px !important;
}

@media (max-width: 700px) {
	body.aic-chat-mode #aic-ai-unified-chat {
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 74vh !important;
		height: 74dvh !important;
	}
	body.aic-chat-mode #aic-ai-unified-chat .pix-chat-container {
		border-radius: 10px 10px 0 0 !important;
		border-bottom: 0 !important;
	}
	body.aic-chat-mode .aic-hp-toggle,
	body.aic-chat-mode .aic-usage {
		display: none !important;
	}
}