:root {
	/* Light theme colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f6f8fa;
	--bg-tertiary: #ffffff;
	--text-primary: #24292e;
	--text-secondary: #666;
	--text-muted: #999;
	--border-color: #ddd;
	--border-light: #eee;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--shadow-hover: rgba(0, 0, 0, 0.15);
	--link-color: #0366d6;
	--link-external: #6f42c1;
	--link-hover: #8a63d2;
	--link-bg-hover: rgba(3, 102, 214, 0.08);
	--link-bg-active: rgba(3, 102, 214, 0.1);
	--error-bg: #fff8f8;
	--error-border: #ffcdd2;
	--error-content: #ffebee;
	--error-text: #cc0000;
	--toast-bg: #333;
	--toast-text: #fff;
	--unpublished-bg: rgba(128, 128, 128, 0.1);
	--unpublished-bg-hover: rgba(128, 128, 128, 0.15);
	--search-focus-shadow: rgba(3, 102, 214, 0.2);

	/* Code block colors */
	--code-bg: #f2f2f2;
	--code-border: #e0e0e0;
	--code-text: var(--text-primary);

	/* Callout colors */
	--callout-default: 8, 109, 221;
	--callout-warning: 236, 117, 0;
	--callout-tip: 0, 191, 188;
	--callout-caution: 213, 57, 132;
	--callout-important: 120, 82, 238;
	/* Full Obsidian palette (canonical types) */
	--callout-note: 8, 109, 221;
	--callout-abstract: 0, 191, 188;
	--callout-info: 8, 109, 221;
	--callout-todo: 8, 109, 221;
	--callout-success: 8, 185, 78;
	--callout-question: 236, 191, 0;
	--callout-failure: 233, 49, 71;
	--callout-danger: 233, 49, 71;
	--callout-bug: 233, 49, 71;
	--callout-example: 120, 82, 238;
	--callout-quote: 158, 158, 158;
	--callout-bg-opacity: 0.05;
}

/* Dark theme colors */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #0d1117;
		--bg-secondary: #161b22;
		--bg-tertiary: #21262d;
		--text-primary: #e6edf3;
		--text-secondary: #8b949e;
		--text-muted: #7d8590;
		--border-color: #30363d;
		--border-light: #21262d;
		--shadow-color: rgba(0, 0, 0, 0.3);
		--shadow-hover: rgba(0, 0, 0, 0.4);
		--link-color: #58a6ff;
		--link-external: #a5a3ff;
		--link-hover: #79c0ff;
		--link-bg-hover: rgba(88, 166, 255, 0.1);
		--link-bg-active: rgba(88, 166, 255, 0.15);
		--error-bg: #2d1b1b;
		--error-border: #6e2c2c;
		--error-content: #3c1f1f;
		--error-text: #ff6b6b;
		--toast-bg: #21262d;
		--toast-text: #e6edf3;
		--unpublished-bg: rgba(139, 148, 158, 0.1);
		--unpublished-bg-hover: rgba(139, 148, 158, 0.15);
		--search-focus-shadow: rgba(88, 166, 255, 0.3);

		/* Code block colors - dark mode */
		--code-bg: #1e2228;
		--code-border: #30363d;
		--code-text: var(--text-primary);

		/* Callout colors - dark mode */
		--callout-default: 88, 166, 255;
		--callout-warning: 255, 158, 67;
		--callout-tip: 56, 229, 225;
		--callout-caution: 255, 123, 183;
		--callout-important: 163, 139, 255;
		/* Full Obsidian palette (canonical types) - dark mode */
		--callout-note: 88, 166, 255;
		--callout-abstract: 56, 229, 225;
		--callout-info: 88, 166, 255;
		--callout-todo: 88, 166, 255;
		--callout-success: 73, 204, 121;
		--callout-question: 255, 213, 67;
		--callout-failure: 255, 99, 120;
		--callout-danger: 255, 99, 120;
		--callout-bug: 255, 99, 120;
		--callout-example: 163, 139, 255;
		--callout-quote: 158, 158, 158;
		--callout-bg-opacity: 0.1;
	}
}

/* Manual dark theme override */
[data-theme="dark"] {
	--bg-primary: #0d1117;
	--bg-secondary: #161b22;
	--bg-tertiary: #21262d;
	--text-primary: #e6edf3;
	--text-secondary: #8b949e;
	--text-muted: #7d8590;
	--border-color: #30363d;
	--border-light: #21262d;
	--shadow-color: rgba(0, 0, 0, 0.3);
	--shadow-hover: rgba(0, 0, 0, 0.4);
	--link-color: #58a6ff;
	--link-external: #a5a3ff;
	--link-hover: #79c0ff;
	--link-bg-hover: rgba(88, 166, 255, 0.1);
	--link-bg-active: rgba(88, 166, 255, 0.15);
	--error-bg: #2d1b1b;
	--error-border: #6e2c2c;
	--error-content: #3c1f1f;
	--error-text: #ff6b6b;
	--toast-bg: #21262d;
	--toast-text: #e6edf3;
	--unpublished-bg: rgba(139, 148, 158, 0.1);
	--unpublished-bg-hover: rgba(139, 148, 158, 0.15);
	--search-focus-shadow: rgba(88, 166, 255, 0.3);

	/* Code block colors */
	--code-bg: #1e2228;
	--code-border: #30363d;
	--code-text: var(--text-primary);

	/* Callout colors */
	--callout-default: 88, 166, 255;
	--callout-warning: 255, 158, 67;
	--callout-tip: 56, 229, 225;
	--callout-caution: 255, 123, 183;
	--callout-important: 163, 139, 255;
	/* Full Obsidian palette (canonical types) */
	--callout-note: 88, 166, 255;
	--callout-abstract: 56, 229, 225;
	--callout-info: 88, 166, 255;
	--callout-todo: 88, 166, 255;
	--callout-success: 73, 204, 121;
	--callout-question: 255, 213, 67;
	--callout-failure: 255, 99, 120;
	--callout-danger: 255, 99, 120;
	--callout-bug: 255, 99, 120;
	--callout-example: 163, 139, 255;
	--callout-quote: 158, 158, 158;
	--callout-bg-opacity: 0.1;
}

/* Manual light theme override */
[data-theme="light"] {
	--bg-primary: #ffffff;
	--bg-secondary: #f6f8fa;
	--bg-tertiary: #ffffff;
	--text-primary: #24292e;
	--text-secondary: #666;
	--text-muted: #999;
	--border-color: #ddd;
	--border-light: #eee;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--shadow-hover: rgba(0, 0, 0, 0.15);
	--link-color: #0366d6;
	--link-external: #6f42c1;
	--link-hover: #8a63d2;
	--link-bg-hover: rgba(3, 102, 214, 0.08);
	--link-bg-active: rgba(3, 102, 214, 0.1);
	--error-bg: #fff8f8;
	--error-border: #ffcdd2;
	--error-content: #ffebee;
	--error-text: #cc0000;
	--toast-bg: #333;
	--toast-text: #fff;
	--unpublished-bg: rgba(128, 128, 128, 0.1);
	--unpublished-bg-hover: rgba(128, 128, 128, 0.15);
	--search-focus-shadow: rgba(3, 102, 214, 0.2);

	/* Code block colors */
	--code-bg: #f2f2f2;
	--code-border: #e0e0e0;
	--code-text: var(--text-primary);

	/* Callout colors */
	--callout-default: 8, 109, 221;
	--callout-warning: 236, 117, 0;
	--callout-tip: 0, 191, 188;
	--callout-caution: 213, 57, 132;
	--callout-important: 120, 82, 238;
	/* Full Obsidian palette (canonical types) */
	--callout-note: 8, 109, 221;
	--callout-abstract: 0, 191, 188;
	--callout-info: 8, 109, 221;
	--callout-todo: 8, 109, 221;
	--callout-success: 8, 185, 78;
	--callout-question: 236, 191, 0;
	--callout-failure: 233, 49, 71;
	--callout-danger: 233, 49, 71;
	--callout-bug: 233, 49, 71;
	--callout-example: 120, 82, 238;
	--callout-quote: 158, 158, 158;
	--callout-bg-opacity: 0.05;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
	z-index: 1000;
	display: flex;
	align-items: center;
	padding: 0 20px;
	box-shadow: 0 1px 3px var(--shadow-color);
}

.header-left {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Code blocks */
code {
	background-color: var(--code-bg);
	border: 1px solid var(--code-border);
	border-radius: 3px;
	padding: 0.1em 0.3em;
	color: var(--code-text);
}

pre code {
	display: block;
	overflow: auto;
	padding: 1em;
}

/* Copy-to-clipboard button on rendered code fences. The button is anchored to
   the <pre> (which is position:relative) so it stays pinned to the top-right
   while the <code> scrolls horizontally under it. Hidden at rest, revealed on
   hover / keyboard focus; always visible on touch devices (no hover). */
.content pre {
	position: relative;
}

.copy-code-button {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	background-color: var(--code-bg);
	color: var(--text-secondary);
	border: 1px solid var(--code-border);
	border-radius: 4px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.copy-code-button:hover {
	color: var(--text-primary);
}

.content pre:hover .copy-code-button,
.copy-code-button:focus-visible {
	opacity: 1;
}

.copy-code-button.copied {
	color: rgb(var(--callout-success));
	border-color: rgb(var(--callout-success));
	opacity: 1;
}

/* No hover to reveal the button on touch devices — keep it always visible. */
@media (hover: none) {
	.copy-code-button {
		opacity: 1;
	}
}

/* Callout blocks. Static callouts render as <div>; foldable callouts
   ([!type]- / [!type]+) render as native <details>/<summary> (no JS). */
[data-callout-type] {
	background-color: rgba(var(--callout-color), var(--callout-bg-opacity));
	border-left: 5px solid rgb(var(--callout-color));
	padding: 10px;
	margin: 20px auto;
}

[data-callout-type] [data-callout-title] {
	color: rgb(var(--callout-color));
	font-weight: bold;
}

[data-callout-type] p {
	margin: 0;
}

/* Foldable callout title: clickable, hide the native disclosure marker. */
summary[data-callout-title] {
	cursor: pointer;
	list-style: none;
}

summary[data-callout-title]::-webkit-details-marker {
	display: none;
}

[data-callout-type] {
	--callout-color: var(--callout-default);
}

/* Backward-compat selectors (pre-expansion type names). */
[data-callout-type="warning"] {
	--callout-color: var(--callout-warning);
}

[data-callout-type="tip"] {
	--callout-color: var(--callout-tip);
}

[data-callout-type="caution"] {
	--callout-color: var(--callout-caution);
}

[data-callout-type="important"] {
	--callout-color: var(--callout-important);
}

/* Full Obsidian palette (canonical types). */
[data-callout-type="note"] {
	--callout-color: var(--callout-note);
}

[data-callout-type="abstract"] {
	--callout-color: var(--callout-abstract);
}

[data-callout-type="info"] {
	--callout-color: var(--callout-info);
}

[data-callout-type="todo"] {
	--callout-color: var(--callout-todo);
}

[data-callout-type="success"] {
	--callout-color: var(--callout-success);
}

[data-callout-type="question"] {
	--callout-color: var(--callout-question);
}

[data-callout-type="failure"] {
	--callout-color: var(--callout-failure);
}

[data-callout-type="danger"] {
	--callout-color: var(--callout-danger);
}

[data-callout-type="bug"] {
	--callout-color: var(--callout-bug);
}

[data-callout-type="example"] {
	--callout-color: var(--callout-example);
}

[data-callout-type="quote"] {
	--callout-color: var(--callout-quote);
}

/* Blockquotes (plain Markdown `> ...`; callouts are styled via [data-callout-type]) */
.content blockquote {
	margin: 1em 0;
	padding: 0.4em 1em;
	border-left: 4px solid var(--border-color);
	color: var(--text-secondary);
}

.content blockquote p {
	margin: 0.4em 0;
}

/* Tables */
.content table {
	border-collapse: collapse;
	margin: 1em 0;
	display: block;        /* enables horizontal scroll when wider than the panel */
	overflow-x: auto;
	max-width: 100%;
}

.content th,
.content td {
	border: 1px solid var(--border-color);
	padding: 6px 12px;
}

.content th {
	background: var(--bg-secondary);
	font-weight: 600;
	text-align: left;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Segoe UI", Arial, sans-serif;
	line-height: 1.2;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: var(--text-primary);
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.17em;
}

/* base link styles */
a {
	color: var(--link-color);
	text-decoration: none;
	transition: all 0.2s ease;
}

/* internal note links */
a[href^="#"] {
	border-bottom: 1px dotted var(--link-color);
	padding-bottom: 1px;
}

a[href^="#"]:hover {
	background-color: var(--link-bg-hover);
	border-bottom: 1px solid var(--link-color);
	text-decoration: none;
}

/* add dim highlighting when linked-to note already open */
a[href^="#"].note-opened {
	background-color: var(--link-bg-active);
	border-radius: 3px;
	padding: 2px 4px;
	margin: -2px -4px;
	border-bottom: none; /* remove the dotted border for opened notes */
}

a[href^="#"].note-opened:hover {
	background-color: var(--link-bg-hover);
	text-decoration: none;
}

/* brief flash applied to a heading when navigated to via a section link */
@keyframes heading-flash {
	0%   { background-color: var(--link-bg-active); }
	100% { background-color: transparent; }
}

.heading-target {
	animation: heading-flash 2s ease-out;
	border-radius: 3px;
}

/* unpublished note links */
.unpublished-link {
	background-color: var(--unpublished-bg);
	border-radius: 3px;
	padding: 2px 4px;
	margin: -2px -4px;
	color: var(--text-secondary);
	cursor: default;  /* regular cursor instead of pointer */
}

.unpublished-link:hover {
	background-color: var(--unpublished-bg-hover);
}

/* external links */
a:not([href^="#"]) {
	color: var(--link-external);
	position: relative;
}

a:not([href^="#"]):hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* add styles for the metadata */
.note-metadata {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	/* Breathing room below the flush sticky title so the metadata row has a natural
	   break from the header when the note is scrolled to the very top. */
	margin-top: 10px;
	margin-bottom: 20px;
	color: var(--text-secondary);
	font-size: 0.9em;
	line-height: 1.4;
}

.note-metadata a {
	color: var(--text-secondary);
	border-bottom: 1px dotted var(--text-secondary);
}

.note-metadata a:hover {
	color: var(--link-color);
	border-bottom-color: var(--link-color);
}

.permanent-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--text-secondary);
	cursor: pointer;
	border-bottom: 1px dotted var(--text-secondary);
	transition: all 0.2s ease;
}

.permanent-link:hover {
	color: var(--link-color);
	border-bottom-color: var(--link-color);
}

.permanent-link svg {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.permanent-link:hover svg {
	opacity: 1;
}

.prior-version-link,
.diff-prior-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--text-secondary);
	cursor: pointer;
	border-bottom: 1px dotted var(--text-secondary);
	transition: all 0.2s ease;
}

.prior-version-link:hover,
.diff-prior-link:hover {
	color: var(--link-color);
	border-bottom-color: var(--link-color);
}

.prior-version-link svg,
.diff-prior-link svg {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.prior-version-link:hover svg,
.diff-prior-link:hover svg {
	opacity: 1;
}

.toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--toast-bg);
	color: var(--toast-text);
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.toast.show {
	opacity: 1;
}

/* header link styles */
.header a {
	border-bottom: none;
	padding-bottom: 0;
	color: var(--text-primary);
}

.header a[href^="#"]:hover {
	background-color: transparent;
	color: var(--link-color);
}

.panels-container {
	position: fixed;
	top: 50px; /* matches header height */
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	display: flex;
	gap: 0;
	background-color: var(--bg-secondary);
}

.panel {
	flex: 0 0 600px;
	/* No top padding: the panel is its own scroll container and a sticky child sticks at
	   the container's content-box top. Any top padding here would leave a band above the
	   stuck header that the header's opaque background can't cover, letting scrolled body
	   text peek through. Top spacing lives in the sticky .panel-header itself (and in
	   .panel.error below, whose bare non-sticky h1 has no header to carry it). */
	padding: 0 20px 10px;
	background: var(--bg-primary);
	border-right: 1px solid var(--border-color);
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
	position: relative; /* adjust for close button positioning */
	font-size: 1rem;
	transition: all 0.3s ease;
	width: 600px;
	color: var(--text-primary);
	/* Deep-linked / backlink headings scroll via scrollIntoView({block:'start'});
	   this keeps them below the sticky panel header instead of hidden under it. */
	scroll-padding-top: 3em;
}

.panel.collapsing {
	transform-origin: right;
	transform: scaleX(0);
	width: 0 !important;          /* override any inline width set by resizing */
	flex-basis: 0 !important;     /* override any inline flex-basis set by resizing */
	padding: 0;
	margin: 0;
	border: none;
	overflow: hidden;
}

/* Disable the panel transition while actively dragging to resize so the width
   tracks the cursor instantly instead of easing behind it. */
.panel.resizing {
	transition: none;
}

/* Highlight the right edge when the cursor is in the drag-to-resize zone. */
.panel.resize-hover {
	box-shadow: inset -3px 0 0 -1px var(--link-color);
}

/* Keep the resize cursor and suppress text selection across the whole page
   while a drag is in progress (the pointer may stray off the panel). */
body.panel-resizing {
	cursor: col-resize;
	user-select: none;
}

.panel h1 {
	margin-top: 0;
	font-size: 1.8em;
	margin-right: 40px; /* adjust heading to accommodate close button */
}

/* Pin a header holding the close button + note title at the top of the panel's own
   scroll container so the reader always sees which note the panel holds — and can
   still close it — while the body scrolls under it. The metadata row is a sibling
   below this header, so it stays fully visible just beneath the sticky block.
   Excludes error panels (short markup, no long body — keep a plain non-sticky h1). */
.panel:not(.error):not(.diff-panel) > .panel-header,
.diff-panel > .panel-header {
	/* sticky also makes this the containing block for the absolutely-positioned
	   close button, so the × stays pinned to the header's top-right corner. */
	position: sticky;
	top: 0;
	z-index: 2;
	/* The panel has NO top padding, so the header's border-box top coincides exactly with
	   the scrollport top: pinned at top:0 it sits perfectly flush, with no band above it
	   for scrolled content to peek through. Negative side margins bleed the opaque
	   background across the panel's 20px side padding edge-to-edge; the header's own top
	   and bottom padding give the title breathing room and an opaque band beneath it.
	   Right padding keeps ×/title clearance. */
	margin: 0 -20px;
	padding: 12px 40px 8px 20px;
	background: var(--bg-primary); /* opaque so body doesn't bleed through */
	/* Soft edge as content slides under; box-shadow is drawn outside the box. */
	box-shadow: 0 6px 8px -6px var(--shadow-color);
}

/* Cap the title height so a very long title can't dominate the panel (~3-4 lines).
   Zero the inherited global h1 bottom margin so the header's bottom spacing is exactly
   its own 8px padding — a predictable opaque band rather than a transparent margin. */
.panel-header > h1 {
	margin-bottom: 0;
	/* Clamp to a few lines with an auto ellipsis so a long title stays compact in the
	   sticky header; the full title is available via the title="" hover tooltip. Clamps
	   at a line boundary (no mid-glyph cut). Mirrors .search-result-preview below. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.panel.error {
	background-color: var(--error-bg);
	/* Error panels render a bare, non-sticky h1 (no .panel-header), so restore the top
	   breathing room the base .panel no longer provides now that its top padding is gone. */
	padding-top: 10px;
}

.error-message {
	color: var(--error-text);
	padding: 20px;
	border: 1px solid var(--error-border);
	border-radius: 4px;
	background-color: var(--error-content);
	margin: 20px 0;
}

.backlinks {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
}

/* Collapsible "Referenced by" summary: styled like the old <h3>, native
   disclosure marker hidden in favor of a rotating chevron on the left. */
.backlinks > summary.backlinks-summary {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 1.17em;
	line-height: 1.2;
	font-weight: bold;
	color: var(--text-primary);
	margin: 0 0 0.5em;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.backlinks > summary.backlinks-summary::-webkit-details-marker {
	display: none;
}

.backlinks > summary.backlinks-summary::before {
	content: "\25B8"; /* ▸ */
	color: var(--text-secondary);
	font-size: 0.85em;
	transition: transform 0.2s ease;
}

details.backlinks[open] > summary.backlinks-summary::before {
	transform: rotate(90deg);
}

.backlinks-list {
	margin-top: 8px;
}

/* Comments (per-panel) */
.comments {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
}
.comments-heading {
	margin: 0 0 16px;
}
.comment-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-color);
}
.comment-replies {
	margin-top: 10px;
	padding-left: 16px;
	border-left: 2px solid var(--border-color);
}
.comment-reply-row {
	margin-top: 6px;
}
.comment-reply-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-secondary);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
}
.comment-reply-btn:hover {
	color: var(--text-primary);
}
.comment-reply-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}
.comment-meta {
	font-size: 12px;
	color: var(--text-secondary);
	margin-bottom: 4px;
}
.comment-author {
	font-weight: 600;
	color: var(--text-primary);
	margin-right: 8px;
}
.comment-body {
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}
.comment-body p {
	margin: 0 0 8px;
}
.comment-deleted {
	color: var(--text-secondary);
	font-style: italic;
}
.comment-edited {
	color: var(--text-secondary);
	font-size: 12px;
	margin-left: 8px;
}
.comment-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
.comment-action {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-secondary);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
}
.comment-action:hover {
	color: var(--text-primary);
}
.comment-action:disabled {
	opacity: 0.5;
	cursor: default;
}
.comment-edit-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}
.comment-empty {
	color: var(--text-secondary);
	font-size: 14px;
}
.comment-composer {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* position:relative so the absolutely-positioned [[ ]] autocomplete menu
   anchors to the textarea within each form (composer/reply/edit). */
.comment-composer,
.comment-reply-form,
.comment-edit-form {
	position: relative;
}
.comment-input {
	width: 100%;
	min-height: 70px;
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
}
.comment-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: var(--bg-secondary);
}
/* The active comment inputs are contenteditable divs (so note-links can render
   as inline chips). They reuse the .comment-input box above; these rules add the
   textarea behaviors a div lacks. The signed-out preview stays a real <textarea>
   and uses :disabled above. */
div.comment-input {
	overflow-y: auto;
	max-height: 300px;
	white-space: pre-wrap;
	word-break: break-word;
	cursor: text;
}
/* contenteditable has no native placeholder; show data-placeholder when empty. */
div.comment-input:empty:before {
	content: attr(data-placeholder);
	color: var(--text-secondary);
	pointer-events: none;
}
/* Committed [[UID]] note-link, shown as an atomic pill inside the editor. */
.comment-chip {
	display: inline-block;
	padding: 0 6px 0 4px;
	border-radius: 4px;
	background-color: var(--unpublished-bg);
	color: var(--link-color);
	font-size: 0.9em;
	line-height: 1.4;
	white-space: nowrap;
	user-select: all;
}
.comment-chip:before {
	content: "🔗";
	margin-right: 3px;
	font-size: 0.85em;
}
/* [[ ]] note-link autocomplete dropdown (positioned via JS under the editor).
   Modeled on .search-results. */
.comment-wikilink-menu {
	position: absolute;
	z-index: 1000;
	max-height: 220px;
	overflow-y: auto;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 4px 12px var(--shadow-color);
}
.comment-wikilink-menu-item {
	padding: 6px 12px;
	font-size: 14px;
	color: var(--text-primary);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.comment-wikilink-menu-item:hover,
.comment-wikilink-menu-item.active {
	background-color: var(--bg-secondary);
}
/* Resolved [[UID]] note-links inside comment bodies. */
.comment-body a.comment-wikilink {
	color: var(--link-color);
}
.comment-username-setup {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.comment-username-label {
	font-size: 13px;
	color: var(--text-secondary);
}
.comment-username-input {
	width: 100%;
	max-width: 260px;
	padding: 6px 8px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: inherit;
	font-size: 14px;
}
.comment-username-error {
	font-size: 12px;
	color: #d33;
}
.comment-submit {
	align-self: flex-start;
	padding: 6px 14px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	cursor: pointer;
	font-size: 14px;
}
.comment-submit:hover {
	opacity: 0.85;
}
.comment-submit:disabled {
	opacity: 0.5;
	cursor: default;
}
.comment-status {
	font-size: 12px;
	color: var(--text-secondary);
}
.comment-signin {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	text-decoration: none;
	font-size: 14px;
}

.close-button {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3; /* stay clickable above the sticky title header (z-index: 2) */
	width: 24px;
	height: 24px;
	padding: 0; /* zero default button padding so the box stays 24×24 with a larger glyph */
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
}

.close-button:hover {
	opacity: 1;
}

.search-container {
	position: relative;
}

#search-input {
	width: 200px;
	padding: 6px 12px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	font-size: 14px;
	transition: all 0.2s ease;
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

#search-input:focus {
	width: 300px;
	outline: none;
	border-color: var(--link-color);
	box-shadow: 0 0 0 2px var(--search-focus-shadow);
}

#search-input::placeholder {
	color: var(--text-muted);
}

.search-results {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 400px;
	max-height: 400px;
	overflow-y: auto;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 4px 12px var(--shadow-color);
	z-index: 1000;
	margin-top: 4px;
}

.search-result-item {
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-light);
	cursor: pointer;
}

.search-result-item:last-child {
	border-bottom: none;
}

.search-result-item:hover {
	background-color: var(--bg-secondary);
}

.search-result-title {
	font-weight: 500;
	color: var(--link-color);
	margin-bottom: 4px;
}

.search-result-preview {
	font-size: 13px;
	color: var(--text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-results.active {
	display: block;
}

/* Theme toggle button */
.theme-toggle {
	background: none;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 6px 8px;
	cursor: pointer;
	color: var(--text-primary);
	font-size: 16px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.theme-toggle:hover {
	background-color: var(--bg-secondary);
}

/* ===== Diff viewer (diff2html v3.4.56) ===================================
   The vendored diff2html stylesheet (base rules + its --d2h-* light vars),
   followed by a dark-mode repoint so it tracks the site's data-theme toggle,
   then the CPN diff-panel chrome. See npm run synth:site. */
:host,:root{--d2h-bg-color:#fff;--d2h-border-color:#ddd;--d2h-dim-color:rgba(0,0,0,.3);--d2h-line-border-color:#eee;--d2h-file-header-bg-color:#f7f7f7;--d2h-file-header-border-color:#d8d8d8;--d2h-empty-placeholder-bg-color:#f1f1f1;--d2h-empty-placeholder-border-color:#e1e1e1;--d2h-selected-color:#c8e1ff;--d2h-ins-bg-color:#dfd;--d2h-ins-border-color:#b4e2b4;--d2h-ins-highlight-bg-color:#97f295;--d2h-ins-label-color:#399839;--d2h-del-bg-color:#fee8e9;--d2h-del-border-color:#e9aeae;--d2h-del-highlight-bg-color:#ffb6ba;--d2h-del-label-color:#c33;--d2h-change-del-color:#fdf2d0;--d2h-change-ins-color:#ded;--d2h-info-bg-color:#f8fafd;--d2h-info-border-color:#d5e4f2;--d2h-change-label-color:#d0b44c;--d2h-moved-label-color:#3572b0;--d2h-dark-color:#e6edf3;--d2h-dark-bg-color:#0d1117;--d2h-dark-border-color:#30363d;--d2h-dark-dim-color:#6e7681;--d2h-dark-line-border-color:#21262d;--d2h-dark-file-header-bg-color:#161b22;--d2h-dark-file-header-border-color:#30363d;--d2h-dark-empty-placeholder-bg-color:hsla(215,8%,47%,.1);--d2h-dark-empty-placeholder-border-color:#30363d;--d2h-dark-selected-color:rgba(56,139,253,.1);--d2h-dark-ins-bg-color:rgba(46,160,67,.15);--d2h-dark-ins-border-color:rgba(46,160,67,.4);--d2h-dark-ins-highlight-bg-color:rgba(46,160,67,.4);--d2h-dark-ins-label-color:#3fb950;--d2h-dark-del-bg-color:rgba(248,81,73,.1);--d2h-dark-del-border-color:rgba(248,81,73,.4);--d2h-dark-del-highlight-bg-color:rgba(248,81,73,.4);--d2h-dark-del-label-color:#f85149;--d2h-dark-change-del-color:rgba(210,153,34,.2);--d2h-dark-change-ins-color:rgba(46,160,67,.25);--d2h-dark-info-bg-color:rgba(56,139,253,.1);--d2h-dark-info-border-color:rgba(56,139,253,.4);--d2h-dark-change-label-color:#d29922;--d2h-dark-moved-label-color:#3572b0}.d2h-wrapper{text-align:left}.d2h-file-header{background-color:#f7f7f7;background-color:var(--d2h-file-header-bg-color);border-bottom:1px solid #d8d8d8;border-bottom:1px solid var(--d2h-file-header-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;height:35px;padding:5px 10px}.d2h-file-header.d2h-sticky-header{position:sticky;top:0;z-index:1}.d2h-file-stats{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;margin-left:auto}.d2h-lines-added{border:1px solid #b4e2b4;border:1px solid var(--d2h-ins-border-color);border-radius:5px 0 0 5px;color:#399839;color:var(--d2h-ins-label-color);padding:2px;text-align:right;vertical-align:middle}.d2h-lines-deleted{border:1px solid #e9aeae;border:1px solid var(--d2h-del-border-color);border-radius:0 5px 5px 0;color:#c33;color:var(--d2h-del-label-color);margin-left:1px;padding:2px;text-align:left;vertical-align:middle}.d2h-file-name-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:15px;width:100%}.d2h-file-name{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.d2h-file-wrapper{border:1px solid #ddd;border:1px solid var(--d2h-border-color);border-radius:3px;margin-bottom:1em}.d2h-file-collapse{-webkit-box-pack:end;-ms-flex-pack:end;cursor:pointer;display:none;font-size:12px;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #ddd;border:1px solid var(--d2h-border-color);border-radius:3px;padding:4px 8px}.d2h-file-collapse.d2h-selected{background-color:#c8e1ff;background-color:var(--d2h-selected-color)}.d2h-file-collapse-input{margin:0 4px 0 0}.d2h-diff-table{border-collapse:collapse;font-family:Menlo,Consolas,monospace;font-size:13px;width:100%}.d2h-files-diff{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.d2h-file-diff{overflow-y:hidden}.d2h-file-diff.d2h-d-none,.d2h-files-diff.d2h-d-none{display:none}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;overflow-y:hidden;width:50%}.d2h-code-line{padding:0 8em;width:calc(100% - 16em)}.d2h-code-line,.d2h-code-side-line{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.d2h-code-side-line{padding:0 4.5em;width:calc(100% - 9em)}.d2h-code-line-ctn{background:none;display:inline-block;padding:0;word-wrap:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;vertical-align:middle;white-space:pre;width:100%}.d2h-code-line del,.d2h-code-side-line del{background-color:#ffb6ba;background-color:var(--d2h-del-highlight-bg-color)}.d2h-code-line del,.d2h-code-line ins,.d2h-code-side-line del,.d2h-code-side-line ins{border-radius:.2em;display:inline-block;margin-top:-1px;-webkit-text-decoration:none;text-decoration:none}.d2h-code-line ins,.d2h-code-side-line ins{background-color:#97f295;background-color:var(--d2h-ins-highlight-bg-color);text-align:left}.d2h-code-line-prefix{background:none;display:inline;padding:0;word-wrap:normal;white-space:pre}.line-num1{float:left}.line-num1,.line-num2{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;width:3.5em}.line-num2{float:right}.d2h-code-linenumber{background-color:#fff;background-color:var(--d2h-bg-color);border:solid #eee;border:solid var(--d2h-line-border-color);border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.3);color:var(--d2h-dim-color);cursor:pointer;display:inline-block;position:absolute;text-align:right;width:7.5em}.d2h-code-linenumber:after{content:"\200b"}.d2h-code-side-linenumber{background-color:#fff;background-color:var(--d2h-bg-color);border:solid #eee;border:solid var(--d2h-line-border-color);border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.3);color:var(--d2h-dim-color);cursor:pointer;display:inline-block;overflow:hidden;padding:0 .5em;position:absolute;text-align:right;text-overflow:ellipsis;width:4em}.d2h-code-side-linenumber:after{content:"\200b"}.d2h-code-side-emptyplaceholder,.d2h-emptyplaceholder{background-color:#f1f1f1;background-color:var(--d2h-empty-placeholder-bg-color);border-color:#e1e1e1;border-color:var(--d2h-empty-placeholder-border-color)}.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.d2h-code-linenumber,.d2h-code-side-linenumber{direction:rtl}.d2h-del{background-color:#fee8e9;background-color:var(--d2h-del-bg-color);border-color:#e9aeae;border-color:var(--d2h-del-border-color)}.d2h-ins{background-color:#dfd;background-color:var(--d2h-ins-bg-color);border-color:#b4e2b4;border-color:var(--d2h-ins-border-color)}.d2h-info{background-color:#f8fafd;background-color:var(--d2h-info-bg-color);border-color:#d5e4f2;border-color:var(--d2h-info-border-color);color:rgba(0,0,0,.3);color:var(--d2h-dim-color)}.d2h-file-diff .d2h-del.d2h-change{background-color:#fdf2d0;background-color:var(--d2h-change-del-color)}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded;background-color:var(--d2h-change-ins-color)}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{-webkit-text-decoration:none;text-decoration:none}.d2h-file-list-wrapper a,.d2h-file-list-wrapper a:visited{color:#3572b0;color:var(--d2h-moved-label-color)}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}.d2h-file-list{display:block;list-style:none;margin:0;padding:0}.d2h-file-list>li{border-bottom:1px solid #ddd;border-bottom:1px solid var(--d2h-border-color);margin:0;padding:5px 10px}.d2h-file-list>li:last-child{border-bottom:none}.d2h-file-switch{cursor:pointer;display:none;font-size:10px}.d2h-icon{fill:currentColor;margin-right:10px;vertical-align:middle}.d2h-deleted{color:#c33;color:var(--d2h-del-label-color)}.d2h-added{color:#399839;color:var(--d2h-ins-label-color)}.d2h-changed{color:#d0b44c;color:var(--d2h-change-label-color)}.d2h-moved{color:#3572b0;color:var(--d2h-moved-label-color)}.d2h-tag{background-color:#fff;background-color:var(--d2h-bg-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:10px;margin-left:5px;padding:0 2px}.d2h-deleted-tag{border:1px solid #c33;border:1px solid var(--d2h-del-label-color)}.d2h-added-tag{border:1px solid #399839;border:1px solid var(--d2h-ins-label-color)}.d2h-changed-tag{border:1px solid #d0b44c;border:1px solid var(--d2h-change-label-color)}.d2h-moved-tag{border:1px solid #3572b0;border:1px solid var(--d2h-moved-label-color)}

/* Repoint diff2html's light vars to its dark palette when the site is dark. */
[data-theme="dark"] {
	--d2h-bg-color: var(--d2h-dark-bg-color);
	--d2h-border-color: var(--d2h-dark-border-color);
	--d2h-dim-color: var(--d2h-dark-dim-color);
	--d2h-line-border-color: var(--d2h-dark-line-border-color);
	--d2h-file-header-bg-color: var(--d2h-dark-file-header-bg-color);
	--d2h-file-header-border-color: var(--d2h-dark-file-header-border-color);
	--d2h-empty-placeholder-bg-color: var(--d2h-dark-empty-placeholder-bg-color);
	--d2h-empty-placeholder-border-color: var(--d2h-dark-empty-placeholder-border-color);
	--d2h-selected-color: var(--d2h-dark-selected-color);
	--d2h-ins-bg-color: var(--d2h-dark-ins-bg-color);
	--d2h-ins-border-color: var(--d2h-dark-ins-border-color);
	--d2h-ins-highlight-bg-color: var(--d2h-dark-ins-highlight-bg-color);
	--d2h-ins-label-color: var(--d2h-dark-ins-label-color);
	--d2h-del-bg-color: var(--d2h-dark-del-bg-color);
	--d2h-del-border-color: var(--d2h-dark-del-border-color);
	--d2h-del-highlight-bg-color: var(--d2h-dark-del-highlight-bg-color);
	--d2h-del-label-color: var(--d2h-dark-del-label-color);
	--d2h-change-del-color: var(--d2h-dark-change-del-color);
	--d2h-change-ins-color: var(--d2h-dark-change-ins-color);
	--d2h-info-bg-color: var(--d2h-dark-info-bg-color);
	--d2h-info-border-color: var(--d2h-dark-info-border-color);
	--d2h-change-label-color: var(--d2h-dark-change-label-color);
	--d2h-moved-label-color: var(--d2h-dark-moved-label-color);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
	--d2h-bg-color: var(--d2h-dark-bg-color);
	--d2h-border-color: var(--d2h-dark-border-color);
	--d2h-dim-color: var(--d2h-dark-dim-color);
	--d2h-line-border-color: var(--d2h-dark-line-border-color);
	--d2h-file-header-bg-color: var(--d2h-dark-file-header-bg-color);
	--d2h-file-header-border-color: var(--d2h-dark-file-header-border-color);
	--d2h-empty-placeholder-bg-color: var(--d2h-dark-empty-placeholder-bg-color);
	--d2h-empty-placeholder-border-color: var(--d2h-dark-empty-placeholder-border-color);
	--d2h-selected-color: var(--d2h-dark-selected-color);
	--d2h-ins-bg-color: var(--d2h-dark-ins-bg-color);
	--d2h-ins-border-color: var(--d2h-dark-ins-border-color);
	--d2h-ins-highlight-bg-color: var(--d2h-dark-ins-highlight-bg-color);
	--d2h-ins-label-color: var(--d2h-dark-ins-label-color);
	--d2h-del-bg-color: var(--d2h-dark-del-bg-color);
	--d2h-del-border-color: var(--d2h-dark-del-border-color);
	--d2h-del-highlight-bg-color: var(--d2h-dark-del-highlight-bg-color);
	--d2h-del-label-color: var(--d2h-dark-del-label-color);
	--d2h-change-del-color: var(--d2h-dark-change-del-color);
	--d2h-change-ins-color: var(--d2h-dark-change-ins-color);
	--d2h-info-bg-color: var(--d2h-dark-info-bg-color);
	--d2h-info-border-color: var(--d2h-dark-info-border-color);
	--d2h-change-label-color: var(--d2h-dark-change-label-color);
	--d2h-moved-label-color: var(--d2h-dark-moved-label-color);
	}
}

/* CPN diff-panel chrome */
.diff-panel .diff-header {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	font-size: 0.85em;
	color: var(--text-secondary);
	margin-bottom: 0.75em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--border-color);
}
.diff-panel .diff-header .diff-side strong {
	color: var(--text-primary);
}
.diff-panel .diff-side-old::before { content: "− "; color: var(--d2h-del-label-color); }
.diff-panel .diff-side-new::before { content: "+ "; color: var(--d2h-ins-label-color); }
.diff-body { font-size: 0.95em; }
/* drawFileList:false still emits a per-file header; we show our own instead. */
.diff-body .d2h-file-header { display: none; }
/* Keep side-by-side columns scrollable when a panel is dragged narrow. */
.diff-body .d2h-file-side-diff { overflow-x: auto; }
.diff-notice {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	color: var(--text-secondary);
	font-size: 0.9em;
	margin: 0.75em 0;
	padding: 0.5em 0.75em;
}

/* LLM chat (site-wide, floating). Hidden until config enables chatEnabled. */
.cpn-chat-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	border: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border-radius: 999px;
	padding: 0.6em 1.1em;
	font-size: 0.95em;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.cpn-chat-launcher:hover { background-color: var(--bg-primary); }
.cpn-chat-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 901;
	width: min(420px, calc(100vw - 40px));
	height: min(560px, calc(100vh - 40px));
	/* Cap any drag-set inline size to the viewport; if the window later shrinks
	   the box is clamped by the browser without a JS resize listener. */
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	overflow: hidden;
}
/* Drag-to-resize grip. The panel is anchored bottom-right, so the free corner
   is top-left; dragging it up/left grows the box (see the resize handler). */
.cpn-chat-resize {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	cursor: nwse-resize;
	z-index: 1; /* above the header so the corner grip wins the pointer */
}
.cpn-chat-resize::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--text-secondary);
	border-left: 2px solid var(--text-secondary);
	opacity: 0.4;
}
.cpn-chat-panel:hover .cpn-chat-resize::before { opacity: 0.8; }
/* No height drag while collapsed — hide the grip so only the header bar shows. */
.cpn-chat-panel.cpn-chat-collapsed .cpn-chat-resize { display: none; }
/* Suppress selection + keep the resize cursor across the page during a drag
   (the pointer may stray off the grip). Mirrors body.panel-resizing. */
body.cpn-chat-resizing { cursor: nwse-resize; user-select: none; }
.cpn-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	font-weight: 600;
	cursor: pointer; /* slim collapsed bar is clickable to expand */
}
.cpn-chat-collapse {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}
/* Collapsed: shrink to just the header bar; hide the log + input but keep them
   in the DOM so the conversation and any typed text are preserved on expand. */
.cpn-chat-panel.cpn-chat-collapsed {
	height: auto;
}
.cpn-chat-panel.cpn-chat-collapsed .cpn-chat-log,
.cpn-chat-panel.cpn-chat-collapsed .cpn-chat-form {
	display: none;
}
.cpn-chat-panel.cpn-chat-collapsed .cpn-chat-header {
	border-bottom: none;
}
.cpn-chat-log {
	flex: 1;
	overflow-y: auto;
	padding: 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}
.cpn-chat-msg { max-width: 90%; padding: 0.55em 0.75em; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; }
.cpn-chat-msg.user { align-self: flex-end; background-color: var(--bg-secondary); }
.cpn-chat-msg.assistant { align-self: flex-start; background-color: var(--bg-secondary); }
.cpn-chat-citations { margin-top: 0.5em; font-size: 0.85em; }
.cpn-chat-citations a { display: inline-block; margin-right: 0.5em; }
.cpn-chat-form { display: flex; gap: 0.5em; padding: 0.75em; border-top: 1px solid var(--border-color); }
.cpn-chat-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	padding: 0.5em;
	font-family: inherit;
	font-size: 0.95em;
}
.cpn-chat-send {
	border: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	border-radius: 6px;
	padding: 0 0.9em;
	cursor: pointer;
}
.cpn-chat-send:disabled { opacity: 0.5; cursor: default; }

/* cpn extra-css slot */