@copilotkit/react-core 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/index.cjs

@@ -1,20 +1,16 @@
 "use client";
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_MarkdownSurfaces = require('./MarkdownSurfaces-C2XZISKn.cjs');
-require("./index.css");
+const require_MarkdownSurfaces = require('./MarkdownSurfaces-S4wfUl3J.cjs');
 let _copilotkit_core = require("@copilotkit/core");
 let _ag_ui_client = require("@ag-ui/client");
 let react = require("react");
 react = require_MarkdownSurfaces.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let tailwind_merge = require("tailwind-merge");
 let lucide_react = require("lucide-react");
 let _copilotkit_shared = require("@copilotkit/shared");
 let _copilotkit_react_core_context = require("@copilotkit/react-core/context");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
-let class_variance_authority = require("class-variance-authority");
-let clsx = require("clsx");
 let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
 _radix_ui_react_tooltip = require_MarkdownSurfaces.__toESM(_radix_ui_react_tooltip);
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
@@ -25,6 +21,7 @@ let _copilotkit_mcp_apps_renderer_activity = require("@copilotkit/mcp-apps-rende
 let _copilotkit_a2ui_renderer = require("@copilotkit/a2ui-renderer");
 let zod_to_json_schema = require("zod-to-json-schema");
 let _a2ui_web_core_v0_9 = require("@a2ui/web_core/v0_9");
+let _copilotkit_core_styles = require("@copilotkit/core/styles");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 _radix_ui_react_popover = require_MarkdownSurfaces.__toESM(_radix_ui_react_popover);
 let react_dom = require("react-dom");
@@ -67,7 +64,7 @@ function renderInline(tokens) {
 			case "em": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: renderInline(token.tokens) }, i);
 			case "del": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("del", { children: renderInline(token.tokens) }, i);
 			case "codespan": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-				className: "cpk:rounded cpk:bg-black/5 cpk:px-1 cpk:py-0.5",
+				className: "cpk-markdown-inline-code",
 				children: token.text
 			}, i);
 			case "br": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}, i);
@@ -85,7 +82,7 @@ function renderInline(tokens) {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 					src: sanitizeImgSrc(img.href),
 					alt: img.text,
-					className: "cpk:max-w-full"
+					className: "cpk-markdown-image"
 				}, i);
 			}
 			case "escape": return token.text;
@@ -105,7 +102,7 @@ function BlockToken({ token }) {
 		case "code": {
 			const c = token;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "cpk:overflow-x-auto cpk:rounded-lg cpk:bg-muted cpk:text-foreground cpk:p-3",
+				className: "cpk-markdown-code-block",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 					"data-language": c.lang || void 0,
 					children: c.text
@@ -124,7 +121,7 @@ function BlockToken({ token }) {
 		case "table": {
 			const tbl = token;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:overflow-x-auto",
+				className: "cpk-markdown-table-container",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: tbl.header.map((cell, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: renderInline(cell.tokens) }, i)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: tbl.rows.map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: row.map((cell, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: renderInline(cell.tokens) }, j)) }, i)) })] })
 			});
 		}
@@ -137,85 +134,43 @@ function BlockToken({ token }) {
 }
 BasicMarkdownRenderer.displayName = "BasicMarkdownRenderer";
 
-//#endregion
-//#region src/lib/utils.ts
-const twMerge$11 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
-function cn(...inputs) {
-	return twMerge$11((0, clsx.clsx)(inputs));
-}
-
 //#endregion
 //#region src/components/ui/button.tsx
-const buttonVariants = (0, class_variance_authority.cva)("cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:rounded-md cpk:text-sm cpk:font-medium cpk:transition-all cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg:not([class*='size-'])]:size-4 cpk:shrink-0 cpk:[&_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive", {
-	variants: {
-		variant: {
-			default: "cpk:bg-primary cpk:text-primary-foreground cpk:shadow-xs cpk:hover:bg-primary/90",
-			destructive: "cpk:bg-destructive cpk:text-white cpk:shadow-xs cpk:hover:bg-destructive/90 cpk:focus-visible:ring-destructive/20 cpk:dark:focus-visible:ring-destructive/40 cpk:dark:bg-destructive/60",
-			outline: "cpk:border cpk:bg-background cpk:shadow-xs cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:bg-input/30 cpk:dark:border-input cpk:dark:hover:bg-input/50",
-			secondary: "cpk:bg-secondary cpk:text-secondary-foreground cpk:shadow-xs cpk:hover:bg-secondary/80",
-			ghost: "cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:hover:bg-accent/50 cpk:cursor-pointer",
-			link: "cpk:text-primary cpk:underline-offset-4 cpk:hover:underline",
-			assistantMessageToolbarButton: [
-				"cpk:cursor-pointer",
-				"cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8]",
-				"cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]",
-				"cpk:h-8 cpk:w-8",
-				"cpk:transition-colors",
-				"cpk:hover:text-[rgb(93,93,93)]",
-				"cpk:dark:hover:text-[rgb(243,243,243)]"
-			],
-			chatInputToolbarPrimary: [
-				"cpk:cursor-pointer",
-				"cpk:bg-black cpk:text-white",
-				"cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white",
-				"cpk:rounded-full",
-				"cpk:transition-colors",
-				"cpk:focus:outline-none",
-				"cpk:hover:opacity-70 cpk:disabled:hover:opacity-100",
-				"cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)]",
-				"cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white "
-			],
-			chatInputToolbarSecondary: [
-				"cpk:cursor-pointer",
-				"cpk:bg-transparent cpk:text-[#444444]",
-				"cpk:dark:text-white cpk:dark:border-[#404040]",
-				"cpk:rounded-full",
-				"cpk:transition-colors",
-				"cpk:focus:outline-none",
-				"cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333]",
-				"cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]",
-				"cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50",
-				"cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444]",
-				"cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]"
-			]
-		},
-		size: {
-			default: "cpk:h-9 cpk:px-4 cpk:py-2 cpk:has-[>svg]:px-3",
-			sm: "cpk:h-8 cpk:rounded-md cpk:gap-1.5 cpk:px-3 cpk:has-[>svg]:px-2.5",
-			lg: "cpk:h-10 cpk:rounded-md cpk:px-6 cpk:has-[>svg]:px-4",
-			icon: "cpk:size-9",
-			chatInputToolbarIcon: ["cpk:h-9 cpk:w-9 cpk:rounded-full"],
-			chatInputToolbarIconLabel: [
-				"cpk:h-9 cpk:px-3 cpk:rounded-full",
-				"cpk:gap-2",
-				"cpk:font-normal"
-			]
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
+const variantClasses = {
+	default: "cpk-button-default",
+	destructive: "cpk-button-destructive",
+	outline: "cpk-button-outline",
+	secondary: "cpk-button-secondary",
+	ghost: "cpk-button-ghost",
+	link: "cpk-button-link",
+	assistantMessageToolbarButton: "cpk-button-assistant-message-toolbar",
+	chatInputToolbarPrimary: "cpk-button-chat-input-toolbar-primary",
+	chatInputToolbarSecondary: "cpk-button-chat-input-toolbar-secondary"
+};
+const sizeClasses = {
+	default: "cpk-button-size-default",
+	sm: "cpk-button-size-sm",
+	lg: "cpk-button-size-lg",
+	icon: "cpk-button-size-icon",
+	chatInputToolbarIcon: "cpk-button-size-chat-input-toolbar-icon",
+	chatInputToolbarIconLabel: "cpk-button-size-chat-input-toolbar-icon-label"
+};
+/**
+* Returns the class names for a button with the given variant and size,
+* followed by `className`.
+*/
+function buttonVariants({ variant, size, className, class: classProp } = {}) {
+	return require_MarkdownSurfaces.cn("cpk-button", variant !== null && variantClasses[variant ?? "default"], size !== null && sizeClasses[size ?? "default"], classProp, className);
+}
 const Button = react.forwardRef(function Button({ className, variant, size, asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
 		ref,
 		"data-slot": "button",
-		className: cn(buttonVariants({
+		className: buttonVariants({
 			variant,
 			size,
 			className
-		})),
+		}),
 		...props
 	});
 });
@@ -247,9 +202,9 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		"data-copilotkit": true,
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance", className),
+		className: require_MarkdownSurfaces.cn("cpk-tooltip", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "cpk-tooltip-arrow" })]
 	}) });
 }
 
@@ -273,7 +228,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 		"data-copilotkit": true,
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-content", className),
 		...props
 	}) });
 }
@@ -282,7 +237,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-item", className),
 		...props
 	});
 }
@@ -290,14 +245,14 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Label, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:font-medium cpk:data-[inset]:pl-8", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-label", className),
 		...props
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-separator", className),
 		...props
 	});
 }
@@ -311,15 +266,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.SubTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-sub-trigger", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "cpk:ml-auto cpk:size-4" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "cpk-dropdown-menu-sub-trigger-icon" })]
 	});
 }
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg", className),
+		className: require_MarkdownSurfaces.cn("cpk-dropdown-menu-sub-content", className),
 		...props
 	});
 }
@@ -514,11 +469,11 @@ const CopilotChatAudioRecorder = (0, react.forwardRef)((props, ref) => {
 		cleanup
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:py-3 cpk:px-5", className),
+		className: require_MarkdownSurfaces.cn("cpk-audio-recorder", className),
 		...divProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 			ref: canvasRef,
-			className: "cpk:block cpk:w-full cpk:h-[26px]"
+			className: "cpk-audio-recorder-canvas"
 		})
 	});
 });
@@ -739,7 +694,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			isComposingRef.current = false;
 		},
 		autoFocus,
-		className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:py-3", isExpanded ? "cpk:px-5" : "cpk:pr-5")
+		className: isExpanded ? "cpk-chat-input-textarea-expanded" : "cpk-chat-input-textarea-compact"
 	});
 	const isProcessing = mode !== "transcribe" && isRunning;
 	const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
@@ -757,7 +712,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		onClick: handleSendButtonClick,
 		disabled: isProcessing ? !canStop : !canSend,
 		"aria-label": showsStop ? labels.chatInputToolbarStopButtonLabel : labels.chatInputToolbarSendButtonLabel,
-		children: showsStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
+		children: showsStop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Square, { className: "cpk-chat-input-stop-icon" }) : void 0
 	});
 	const BoundStartTranscribeButton = require_MarkdownSurfaces.renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, { onClick: onStartTranscribe });
 	const BoundCancelTranscribeButton = require_MarkdownSurfaces.renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, { onClick: onCancelTranscribe });
@@ -972,10 +927,10 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		role: "listbox",
 		"aria-label": labels.chatInputSlashMenuLabel,
 		ref: slashMenuRef,
-		className: "cpk:absolute cpk:bottom-full cpk:left-0 cpk:right-0 cpk:z-30 cpk:mb-2 cpk:max-h-64 cpk:overflow-y-auto cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]",
+		className: "cpk-chat-input-slash-menu",
 		style: { maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px` },
 		children: filteredCommands.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground",
+			className: "cpk-chat-input-slash-menu-empty",
 			children: labels.chatInputSlashMenuEmptyText
 		}) : filteredCommands.map((item, index) => {
 			const isActive = index === slashHighlightIndex;
@@ -985,7 +940,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				"aria-selected": isActive,
 				"data-active": isActive ? "true" : void 0,
 				"data-slash-index": index,
-				className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:px-3 cpk:py-2 cpk:text-left cpk:text-sm cpk:transition-colors", "cpk:hover:bg-muted cpk:dark:hover:bg-[#2f2f2f]", isActive ? "cpk:bg-muted cpk:dark:bg-[#2f2f2f]" : "cpk:bg-transparent"),
+				className: "cpk-chat-input-slash-menu-item",
 				onMouseEnter: () => setSlashHighlightIndex(index),
 				onMouseDown: (event) => {
 					event.preventDefault();
@@ -997,29 +952,29 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	}) : null;
 	const inputPill = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-chat-input",
-		className: (0, tailwind_merge.twMerge)("copilotKitInput", "cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
+		className: "copilotKitInput cpk-chat-input-pill",
 		onClick: handleContainerClick,
 		"data-layout": isExpanded ? "expanded" : "compact",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: gridRef,
-			className: (0, tailwind_merge.twMerge)("cpk:grid cpk:w-full cpk:gap-x-3 cpk:gap-y-3 cpk:px-3 cpk:py-2", isExpanded ? "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:grid-rows-[auto_auto]" : "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:items-center"),
+			className: "cpk-chat-input-grid",
 			"data-layout": isExpanded ? "expanded" : "compact",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: addButtonContainerRef,
-					className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center", isExpanded ? "cpk:row-start-2" : "cpk:row-start-1", "cpk:col-start-1"),
+					className: "cpk-chat-input-start",
 					children: BoundAddMenuButton
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, tailwind_merge.twMerge)("cpk:relative cpk:flex cpk:min-w-0 cpk:flex-col cpk:min-h-[50px] cpk:justify-center", isExpanded ? "cpk:col-span-3 cpk:row-start-1" : "cpk:col-start-2 cpk:row-start-1"),
+					className: "cpk-chat-input-field",
 					children: mode === "transcribe" ? BoundAudioRecorder : mode === "processing" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground" })
+						className: "cpk-chat-input-processing",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "cpk-chat-input-processing-spinner" })
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [BoundTextArea, slashMenu] })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: actionsContainerRef,
-					className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center cpk:justify-end cpk:gap-2", isExpanded ? "cpk:col-start-3 cpk:row-start-2" : "cpk:col-start-3 cpk:row-start-1"),
+					className: "cpk-chat-input-actions",
 					children: mode === "transcribe" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onCancelTranscribe && BoundCancelTranscribeButton, onFinishTranscribe && BoundFinishTranscribeButton] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [onStartTranscribe && BoundStartTranscribeButton, BoundSendButton] })
 				})
 			]
@@ -1059,7 +1014,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-copilotkit": true,
 		ref: containerRef,
-		className: cn("cpk:pointer-events-none cpk:relative cpk:z-20", positioning === "absolute" && "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0", className),
+		className: require_MarkdownSurfaces.cn("cpk-chat-input", positioning === "absolute" && "cpk-chat-input-absolute", className),
 		style: {
 			transform: keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : void 0,
 			transition: "transform 0.2s ease-out",
@@ -1067,7 +1022,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		},
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto",
+			className: "cpk-chat-input-wrapper",
 			children: inputPill
 		}), shouldShowDisclaimer && BoundDisclaimer]
 	});
@@ -1076,16 +1031,16 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	_CopilotChatInput.SendButton = ({ className, children, ...props }) => {
 		const labels = require_MarkdownSurfaces.useCopilotChatConfiguration()?.labels ?? require_MarkdownSurfaces.CopilotChatDefaultLabels;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:mr-[10px]",
+			className: "cpk-chat-input-send",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 				type: "button",
 				"data-testid": "copilot-send-button",
 				variant: "chatInputToolbarPrimary",
 				size: "chatInputToolbarIcon",
-				className,
+				className: require_MarkdownSurfaces.cn("cpk-chat-input-send-button", className),
 				"aria-label": labels.chatInputToolbarSendButtonLabel,
 				...props,
-				children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[18px]" })
+				children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk-chat-input-send-icon" })
 			})
 		});
 	};
@@ -1097,7 +1052,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				type: "button",
 				variant: "chatInputToolbarSecondary",
 				size: "chatInputToolbarIcon",
-				className: (0, tailwind_merge.twMerge)(defaultClassName, className),
+				className: require_MarkdownSurfaces.cn(defaultClassName, className),
 				"aria-label": labels[labelKey],
 				...props,
 				children: icon
@@ -1109,23 +1064,23 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	};
 	_CopilotChatInput.StartTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 		"data-testid": "copilot-start-transcribe-button",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mic, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mic, { className: "cpk-chat-input-toolbar-icon" }),
 		labelKey: "chatInputToolbarStartTranscribeButtonLabel",
-		defaultClassName: "cpk:mr-2",
+		defaultClassName: "cpk-chat-input-start-transcribe-button",
 		...props
 	});
 	_CopilotChatInput.CancelTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 		"data-testid": "copilot-cancel-transcribe-button",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk-chat-input-toolbar-icon" }),
 		labelKey: "chatInputToolbarCancelTranscribeButtonLabel",
-		defaultClassName: "cpk:mr-2",
+		defaultClassName: "cpk-chat-input-cancel-transcribe-button",
 		...props
 	});
 	_CopilotChatInput.FinishTranscribeButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
 		"data-testid": "copilot-finish-transcribe-button",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk-chat-input-toolbar-icon" }),
 		labelKey: "chatInputToolbarFinishTranscribeButtonLabel",
-		defaultClassName: "cpk:mr-[10px]",
+		defaultClassName: "cpk-chat-input-finish-transcribe-button",
 		...props
 	});
 	_CopilotChatInput.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
@@ -1167,11 +1122,11 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			"data-testid": "copilot-add-menu-button",
 			variant: "chatInputToolbarSecondary",
 			size: "chatInputToolbarIcon",
-			className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-input-add-menu-button", className),
 			disabled: isDisabled,
 			"aria-label": labels.chatInputToolbarAddButtonLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk:size-[20px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "cpk-chat-input-add-menu-icon" })
 		});
 		if (!mounted) return button;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
@@ -1183,9 +1138,9 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 			side: "bottom",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
+				className: "cpk-chat-input-add-menu-tooltip",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels.chatInputToolbarAddButtonLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-					className: "cpk:rounded cpk:bg-[#4a4a4a] cpk:px-1 cpk:py-[1px] cpk:font-mono cpk:text-[11px] cpk:text-white cpk:dark:bg-[#e0e0e0] cpk:dark:text-black",
+					className: "cpk-chat-input-add-menu-shortcut",
 					children: "/"
 				})]
 			})
@@ -1206,7 +1161,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			ref: internalTextareaRef,
 			"data-testid": "copilot-chat-textarea",
 			placeholder: placeholder ?? labels.chatInputPlaceholder,
-			className: (0, tailwind_merge.twMerge)("cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:font-regular cpk:leading-relaxed cpk:text-[16px] cpk:placeholder:text-[#00000077] cpk:dark:placeholder:text-[#fffc]", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-input-textarea", className),
 			style: {
 				overflow: "auto",
 				resize: "none",
@@ -1220,7 +1175,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	_CopilotChatInput.Disclaimer = ({ className, ...props }) => {
 		const labels = require_MarkdownSurfaces.useCopilotChatConfiguration()?.labels ?? require_MarkdownSurfaces.CopilotChatDefaultLabels;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("cpk:text-center cpk:text-xs cpk:text-muted-foreground cpk:py-3 cpk:px-4 cpk:max-w-3xl cpk:mx-auto", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-input-disclaimer", className),
 			...props,
 			children: labels.chatDisclaimerText
 		});
@@ -1371,7 +1326,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "2.0.0-rc.1";
+var version$1 = "2.0.0-rc.3";
 
 //#endregion
 //#region src/components/CopilotKitInspector.tsx
@@ -1398,7 +1353,7 @@ const CopilotKitInspector = ({ core, openRequest, onVisibilityChange }) => {
 			mod.configureWebInspectorElement(inspector, latestCoreRef.current, {
 				development: process.env.NODE_ENV === "development",
 				framework: "react",
-				sdkVersion: version
+				sdkVersion: version$1
 			});
 			inspector.addEventListener("cpk-inspector-visibility-change", handleVisibilityChange);
 			mountRef.current.appendChild(inspector);
@@ -2222,14 +2177,14 @@ function A2UIRetryingState({ content, showAfterMs, showAfterAttempts, debugExpos
 /** failed: a clean hard-failure card that replaces the skeleton in place. */
 function A2UIRecoveryFailure({ content, debugExposure }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:rounded-lg cpk:border cpk:border-amber-200 cpk:bg-amber-50 cpk:p-3 cpk:text-sm cpk:text-amber-800",
+		className: "cpk-a2ui-recovery-failure",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:font-medium",
+				className: "cpk-a2ui-recovery-failure-title",
 				children: "Couldn't generate the UI"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mt-1 cpk:text-xs cpk:text-amber-700",
+				className: "cpk-a2ui-recovery-failure-description",
 				children: "Something went wrong rendering this. You can keep chatting and try again."
 			}),
 			debugExposure !== "hidden" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIDebugDetails, {
@@ -2488,12 +2443,12 @@ function A2UIGeneratingSkeleton({ label, tokens, children }) {
 function A2UIDebugDetails({ label, open, payload }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
 		open,
-		className: "cpk:mt-2 cpk:text-xs",
+		className: "cpk-a2ui-debug-details",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
-			className: "cpk:cursor-pointer cpk:text-gray-500",
+			className: "cpk-a2ui-debug-details-summary",
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-			className: "cpk:mt-1 cpk:overflow-auto cpk:rounded cpk:bg-gray-100 cpk:p-2 cpk:text-gray-700",
+			className: "cpk-a2ui-debug-details-payload",
 			style: { fontSize: 11 },
 			children: JSON.stringify(payload, null, 2)
 		})]
@@ -2724,7 +2679,7 @@ function createA2UIMessageRenderer(options) {
 			}, [hasOps]);
 			if (!hasOps) return renderLifecycle(content);
 			const surfaces = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6",
+				className: "cpk-a2ui-message-surfaces",
 				children: Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactSurfaceHost, {
 					surfaceId,
 					operations: ops,
@@ -2795,7 +2750,7 @@ async function runA2UIAction({ message, agent, copilotkit, onAction }) {
 */
 function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onAction, onReady }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
+		className: "cpk-a2ui-message-surface-host",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
 			onAction: (0, react.useCallback)((message) => runA2UIAction({
 				message,
@@ -2824,12 +2779,12 @@ function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, cat
 function A2UISurfaceOrError({ surfaceId }) {
 	const error = (0, _copilotkit_a2ui_renderer.useA2UIError)();
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:rounded-lg cpk:border cpk:border-red-200 cpk:bg-red-50 cpk:p-3 cpk:text-sm cpk:text-red-700",
+		className: "cpk-a2ui-message-error",
 		children: ["A2UI render error: ", error]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_a2ui_renderer.A2UIRenderer, {
 		surfaceId,
-		className: "cpk:flex cpk:flex-1"
+		className: "cpk-a2ui-message-surface"
 	});
 }
 /**
@@ -4907,6 +4862,43 @@ var CopilotKitCoreReact = class extends _copilotkit_core.CopilotKitCore {
 	}
 };
 
+//#endregion
+//#region src/styles/copilot-kit-styles.tsx
+const StyleOptionsContext = (0, react.createContext)({ inject: true });
+/** React 19 moves a `<style precedence>` into `<head>` and keeps one copy. */
+const hoistsStyles = Number.parseInt(react.version, 10) >= 19;
+/** Passes the provider's style options to `<CopilotKitStyles>`. */
+const CopilotStyleOptionsProvider = StyleOptionsContext.Provider;
+/**
+* Renders the CSS for CopilotKit's UI, so apps never import a stylesheet.
+* `CopilotChat` (and so `CopilotPopup` and `CopilotSidebar`) renders it for
+* you. Render it yourself only when you build a layout from the chat parts
+* without `CopilotChat`.
+*
+* React 19 moves the tag into `<head>` and keeps one copy, including in the
+* server HTML. React 18 renders it in place, one copy per `CopilotChat`.
+* Each copy holds the same CSS, so a second copy changes nothing.
+*
+* With a CSP nonce the tag always renders in place. React only adds a nonce to
+* a hoisted style when the app renders with `nonce: { style }`, and Next.js
+* passes a plain string, so a hoisted tag would be blocked.
+*
+* Renders nothing when `CopilotKitProvider` has `injectStyles={false}`.
+*/
+function CopilotKitStyles() {
+	const { nonce, inject } = (0, react.useContext)(StyleOptionsContext);
+	if (!inject) return null;
+	if (nonce || !hoistsStyles) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: _copilotkit_core_styles.stylesheet }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
+		href: "copilotkit",
+		precedence: "copilotkit",
+		children: _copilotkit_core_styles.stylesheet
+	});
+}
+
 //#endregion
 //#region src/providers/CopilotKitProvider.tsx
 const zodToJsonSchemaAdapter = (schema, options) => {
@@ -4953,7 +4945,7 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	return value;
 }
 /** Provide a shared core instance and synchronize runtime, tool, and UI configuration. */
-const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, markdownRenderer, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, generativeUI, mcpApps, defaultThrottleMs, debug, learning }) => {
+const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, nonce, injectStyles = true, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, markdownRenderer, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, generativeUI, mcpApps, defaultThrottleMs, debug, learning }) => {
 	const learningConfig = (0, react.useMemo)(() => toLearningConfig(learning), [learning]);
 	const [shouldRenderInspector, setShouldRenderInspector] = (0, react.useState)(false);
 	const [inspectorVisible, setInspectorVisible] = (0, react.useState)(false);
@@ -5432,41 +5424,47 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		runtimeLicenseStatus
 	]);
 	const runtimeLicenseWarningStatus = runtimeEntitlementRetryInProgress ? void 0 : licenseContextValue.status ?? void 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxFunctionsContext.Provider, {
-		value: sandboxFunctionsList,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_react_core_context.CopilotKitContext.Provider, {
-			value: contextValue,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_react_core_context.LicenseContext.Provider, {
-				value: licenseContextValue,
-				children: [
-					a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
-					generativeUIActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.GenerativeUIToolCallRenderer, {}),
-					a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
-						catalog: filteredCatalog,
-						includeSchema: a2ui?.includeSchema
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.MarkdownRendererProvider, {
-						renderer: markdownRenderer,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitInspectorContextProvider, {
-							value: inspectorContextValue,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_react_core_context.CopilotKitAgentIdContext.Provider, {
-								value: agentId,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.GenerativeUIRuntimeContext.Provider, {
-									value: generativeUIRuntime,
-									children
-								})
-							}), shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
-								core: copilotkit,
-								openRequest: inspectorOpenRequest,
-								onVisibilityChange: setInspectorVisible
-							}) : null]
-						})
-					}),
-					runtimeLicenseWarningStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
-					runtimeLicenseWarningStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
-					runtimeLicenseWarningStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
-					runtimeLicenseWarningStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
-				]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotStyleOptionsProvider, {
+		value: (0, react.useMemo)(() => ({
+			nonce,
+			inject: injectStyles
+		}), [nonce, injectStyles]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SandboxFunctionsContext.Provider, {
+			value: sandboxFunctionsList,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_react_core_context.CopilotKitContext.Provider, {
+				value: contextValue,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_react_core_context.LicenseContext.Provider, {
+					value: licenseContextValue,
+					children: [
+						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
+						generativeUIActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.GenerativeUIToolCallRenderer, {}),
+						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
+							catalog: filteredCatalog,
+							includeSchema: a2ui?.includeSchema
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.MarkdownRendererProvider, {
+							renderer: markdownRenderer,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitInspectorContextProvider, {
+								value: inspectorContextValue,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_copilotkit_react_core_context.CopilotKitAgentIdContext.Provider, {
+									value: agentId,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.GenerativeUIRuntimeContext.Provider, {
+										value: generativeUIRuntime,
+										children
+									})
+								}), shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, {
+									core: copilotkit,
+									openRequest: inspectorOpenRequest,
+									onVisibilityChange: setInspectorVisible
+								}) : null]
+							})
+						}),
+						runtimeLicenseWarningStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "no_license" }),
+						runtimeLicenseWarningStatus === "expired" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expired" }),
+						runtimeLicenseWarningStatus === "invalid" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "invalid" }),
+						runtimeLicenseWarningStatus === "expiring" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseWarningBanner, { type: "expiring" })
+					]
+				})
 			})
 		})
 	});
@@ -5965,10 +5963,10 @@ function Collapsible({ open, id, className, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		id,
-		className: (0, tailwind_merge.twMerge)("cpk:grid cpk:transition-[grid-template-rows] cpk:duration-300 cpk:ease-[cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:transition-none", className),
+		className: require_MarkdownSurfaces.cn("cpk-collapsible", className),
 		style: { gridTemplateRows: open ? "1fr" : "0fr" },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:min-h-0 cpk:overflow-hidden",
+			className: "cpk-collapsible-content",
 			children
 		})
 	});
@@ -5982,20 +5980,20 @@ function StatusIcon({ status, className }) {
 	}[status];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		"aria-hidden": "true",
-		className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:text-muted-foreground", status === "running" && "cpk:animate-spin", status === "failed" && "cpk:text-destructive", className)
+		className: require_MarkdownSurfaces.cn("cpk-tool-call-status-icon", status === "running" && "cpk-tool-call-status-icon-running", status === "failed" && "cpk-tool-call-status-icon-failed", className)
 	});
 }
 function Chevron({ open, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
 		"aria-hidden": "true",
-		className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", open && "cpk:rotate-90", className)
+		className: require_MarkdownSurfaces.cn("cpk-tool-call-chevron", open && "cpk-tool-call-chevron-open", className)
 	});
 }
 function FailedCount({ calls }) {
 	const failed = calls.filter((call) => call.toolMessage?.error).length;
 	if (!failed) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "cpk:shrink-0 cpk:text-destructive",
+		className: "cpk-tool-call-failed-count",
 		children: [failed, " failed"]
 	});
 }
@@ -6018,10 +6016,10 @@ function stringifyPayload(value) {
 }
 function Payload({ label, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "cpk:text-[11px] cpk:font-medium cpk:uppercase cpk:tracking-wide cpk:text-muted-foreground",
+		className: "cpk-tool-call-payload-label",
 		children: label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-		className: "cpk:m-0 cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-lg cpk:bg-muted cpk:p-2.5 cpk:font-mono cpk:text-xs cpk:leading-relaxed cpk:text-foreground cpk:whitespace-pre-wrap cpk:break-words",
+		className: "cpk-tool-call-payload-code",
 		children: stringifyPayload(value)
 	})] });
 }
@@ -6031,7 +6029,7 @@ function Payload({ label, value }) {
 */
 function ToolCallPayloads({ parameters, result, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, tailwind_merge.twMerge)("cpk:grid cpk:gap-3", className),
+		className: require_MarkdownSurfaces.cn("cpk-tool-call-payloads", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Payload, {
 			label: "Arguments",
 			value: parameters ?? {}
@@ -6050,36 +6048,35 @@ function ToolCallRow({ name, parameters, result, status, appearance, className,
 	const [open, setOpen] = (0, react.useState)(false);
 	const detailsId = (0, react.useId)();
 	const preview = argumentPreview(parameters);
-	const line = appearance === "line";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-copilotkit": true,
-		className: (0, tailwind_merge.twMerge)(appearance === "card" && "cpk:border-t cpk:border-border", className),
+		className: require_MarkdownSurfaces.cn("cpk-tool-call-row", `cpk-tool-call-row-${appearance}`, className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			"aria-expanded": open,
 			"aria-controls": detailsId,
 			onClick: () => setOpen((value) => !value),
-			className: (0, tailwind_merge.twMerge)("cpk:group/row cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2 cpk:border-none cpk:bg-transparent cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring", line ? "cpk:-mx-1.5 cpk:w-[calc(100%+0.75rem)] cpk:rounded-md cpk:px-1.5 cpk:py-1" : appearance === "stack" ? "cpk:w-full cpk:px-3.5 cpk:py-2.5" : "cpk:w-full cpk:px-3.5 cpk:py-2"),
+			className: "cpk-tool-call-row-button",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-testid": "copilot-tool-render-name",
-					className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:text-[13px] cpk:font-medium cpk:text-foreground", status === "running" && "cpk-shimmer"),
+					className: require_MarkdownSurfaces.cn("cpk-tool-call-row-name", status === "running" && "cpk-shimmer"),
 					children: name
 				}),
 				preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-[13px] cpk:text-muted-foreground",
+					className: "cpk-tool-call-row-preview",
 					children: preview
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-testid": "copilot-tool-render-status",
-					className: "cpk:sr-only",
+					className: "cpk-tool-call-row-status",
 					children: statusLabels[status]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
 					open,
-					className: (0, tailwind_merge.twMerge)("cpk:ml-auto cpk:text-muted-foreground", !open && "cpk:opacity-0 cpk:group-hover/row:opacity-100 cpk:group-focus-visible/row:opacity-100")
+					className: "cpk-tool-call-row-chevron"
 				})
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
@@ -6088,7 +6085,7 @@ function ToolCallRow({ name, parameters, result, status, appearance, className,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallPayloads, {
 				parameters,
 				result,
-				className: line ? "cpk:mt-1 cpk:mb-2 cpk:ml-5.5" : "cpk:px-3.5 cpk:pt-1 cpk:pb-3"
+				className: "cpk-tool-call-row-payloads"
 			})
 		})]
 	});
@@ -6130,16 +6127,16 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 		...props
 	};
 	const runningLabel = current && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: "cpk:shrink-0 cpk:font-medium cpk-shimmer",
+		className: "cpk-tool-call-group-running cpk-shimmer",
 		children: ["Running ", current.toolCall.function.name]
 	}), preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:opacity-70",
+		className: "cpk-tool-call-group-preview",
 		children: preview
 	})] });
 	if (appearance === "line") {
 		if (calls.length === 1 && !current) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...groupProps,
-			className: (0, tailwind_merge.twMerge)("cpk:my-2", className),
+			className: require_MarkdownSurfaces.cn("cpk-tool-call-group cpk-tool-call-group-line cpk-tool-call-group-single", className),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
 				value: {
 					appearance: "line",
@@ -6151,20 +6148,20 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...groupProps,
-			className: (0, tailwind_merge.twMerge)("cpk:my-3", className),
+			className: require_MarkdownSurfaces.cn("cpk-tool-call-group cpk-tool-call-group-line", className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				"aria-expanded": open,
 				"aria-controls": bodyId,
 				onClick: () => setOpen((value) => !value),
-				className: "cpk:m-0 cpk:inline-flex cpk:max-w-full cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:hover:text-foreground cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring",
+				className: "cpk-tool-call-group-line-toggle",
 				children: [runningLabel || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "cpk:shrink-0 cpk:font-medium",
+						className: "cpk-tool-call-group-line-summary",
 						children: ["Used ", pluralize(calls.length, "tool")]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:opacity-70",
+						className: "cpk-tool-call-group-line-names",
 						children: toolNames(calls)
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls })
@@ -6173,7 +6170,7 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 				open,
 				id: bodyId,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:mt-1 cpk:ml-1 cpk:border-l-2 cpk:border-border cpk:py-0.5 cpk:pl-3",
+					className: "cpk-tool-call-group-line-body",
 					children: rows("line")
 				})
 			})]
@@ -6181,22 +6178,22 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 	}
 	if (appearance === "stack") {
 		const behind = open ? 0 : Math.min(calls.length - 1, 2);
-		const layer = "cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground";
+		const layer = "cpk-tool-call-group-stack-layer";
 		const latestStatus = entryStatus(latest, isActive);
 		const latestPreview = entryPreview(latest);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...groupProps,
-			className: (0, tailwind_merge.twMerge)("cpk:my-3", className),
+			className: require_MarkdownSurfaces.cn("cpk-tool-call-group cpk-tool-call-group-stack", className),
 			style: {
 				paddingBottom: behind * 6,
 				...props.style
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:relative cpk:isolate",
+				className: "cpk-tool-call-group-stack-pile",
 				children: [
 					Array.from({ length: behind }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"aria-hidden": "true",
-						className: (0, tailwind_merge.twMerge)(layer, "cpk:absolute cpk:inset-0"),
+						className: require_MarkdownSurfaces.cn(layer, "cpk-tool-call-group-stack-behind"),
 						style: {
 							transform: `translateY(${(index + 1) * 6}px) scaleX(${1 - (index + 1) * .045})`,
 							zIndex: -1 - index,
@@ -6208,58 +6205,58 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 						"aria-expanded": open,
 						"aria-controls": open ? bodyId : void 0,
 						onClick: () => setOpen((value) => !value),
-						className: (0, tailwind_merge.twMerge)("cpk:relative cpk:m-0 cpk:flex cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:text-left cpk:transition-colors cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", open ? "cpk:mb-1.5 cpk:w-full cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-xs cpk:text-muted-foreground cpk:hover:text-foreground" : (0, tailwind_merge.twMerge)(layer, "cpk:w-full cpk:gap-2 cpk:px-3.5 cpk:py-2.5 cpk:text-[13px] cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:hover:bg-accent")),
+						className: require_MarkdownSurfaces.cn("cpk-tool-call-group-stack-toggle", open ? "cpk-tool-call-group-stack-toggle-open" : [layer, "cpk-tool-call-group-stack-toggle-closed"]),
 						children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 							pluralize(calls.length, "tool call"),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "cpk:ml-auto cpk:inline-flex cpk:items-center cpk:gap-1",
+								className: "cpk-tool-call-group-stack-collapse",
 								children: ["Collapse", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
 									open: true,
-									className: "cpk:-rotate-90"
+									className: "cpk-tool-call-group-stack-collapse-icon"
 								})]
 							})
 						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cpk:flex cpk:min-w-0 cpk:flex-1 cpk:items-center cpk:gap-2 cpk:animate-[cpk-stack-drop_260ms_cubic-bezier(0.16,1,0.3,1)] cpk:motion-reduce:animate-none",
+							className: "cpk-tool-call-group-stack-latest",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status: latestStatus }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: (0, tailwind_merge.twMerge)("cpk:shrink-0 cpk:font-mono cpk:font-medium cpk:text-foreground", latestStatus === "running" && "cpk-shimmer"),
+									className: require_MarkdownSurfaces.cn("cpk-tool-call-group-stack-name", latestStatus === "running" && "cpk-shimmer"),
 									children: latest.toolCall.function.name
 								}),
 								latestPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-muted-foreground",
+									className: "cpk-tool-call-group-stack-preview",
 									children: latestPreview
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cpk:sr-only",
+									className: "cpk-tool-call-group-stack-status",
 									children: statusLabels[latestStatus]
 								})
 							]
 						}, latest.toolCall.id), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "cpk:ml-2 cpk:inline-flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:text-xs cpk:text-muted-foreground",
+							className: "cpk-tool-call-group-stack-meta",
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cpk:tabular-nums",
+									className: "cpk-tool-call-group-stack-count",
 									children: pluralize(calls.length, "call")
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, {
 									open: false,
-									className: "cpk:rotate-90"
+									className: "cpk-tool-call-group-stack-expand-icon"
 								})
 							]
 						})] })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						"aria-live": "polite",
-						className: "cpk:sr-only",
+						className: "cpk-tool-call-group-stack-live",
 						children: open ? "" : `${latest.toolCall.function.name}: ${statusLabels[latestStatus]}`
 					})
 				]
 			}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				id: bodyId,
-				className: "cpk:grid cpk:gap-1.5",
+				className: "cpk-tool-call-group-stack-items",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
 					value: {
 						appearance: "stack",
@@ -6267,7 +6264,7 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 						active: isActive
 					},
 					children: calls.map((call, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, tailwind_merge.twMerge)(layer, "cpk:overflow-hidden cpk:shadow-[0_1px_2px_rgb(0_0_0/0.04)] cpk:animate-[cpk-stack-fan_240ms_cubic-bezier(0.16,1,0.3,1)_both] cpk:motion-reduce:animate-none"),
+						className: require_MarkdownSurfaces.cn(layer, "cpk-tool-call-group-stack-item"),
 						style: { animationDelay: `${index * 30}ms` },
 						children: renderCall(call)
 					}, call.toolCall.id))
@@ -6277,26 +6274,26 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		...groupProps,
-		className: (0, tailwind_merge.twMerge)("cpk:my-3 cpk:overflow-hidden cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground", className),
+		className: require_MarkdownSurfaces.cn("cpk-tool-call-group cpk-tool-call-group-card", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			"aria-expanded": open,
 			"aria-controls": bodyId,
 			onClick: () => setOpen((value) => !value),
-			className: "cpk:m-0 cpk:flex cpk:w-full cpk:min-w-0 cpk:cursor-pointer cpk:items-center cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:px-3.5 cpk:py-2.5 cpk:text-left cpk:text-[13px] cpk:text-inherit cpk:transition-colors cpk:hover:bg-accent/60 cpk:focus-visible:outline-2 cpk:focus-visible:-outline-offset-2 cpk:focus-visible:outline-ring",
+			className: "cpk-tool-call-group-card-toggle",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusIcon, { status }),
 				runningLabel || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "cpk:shrink-0 cpk:font-medium cpk:text-foreground",
+					className: "cpk-tool-call-group-card-summary",
 					children: ["Used ", pluralize(calls.length, "tool")]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:min-w-0 cpk:truncate cpk:font-mono cpk:text-xs cpk:text-muted-foreground",
+					className: "cpk-tool-call-group-card-names",
 					children: toolNames(calls)
 				})] }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "cpk:ml-auto cpk:flex cpk:shrink-0 cpk:items-center cpk:gap-2 cpk:pl-2 cpk:text-xs cpk:text-muted-foreground",
+					className: "cpk-tool-call-group-card-meta",
 					children: [status === "failed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FailedCount, { calls }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cpk:tabular-nums",
+						className: "cpk-tool-call-group-card-status",
 						children: status !== "running" ? statusLabels[status] : done > 0 && `${done} done`
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { open })]
 				})
@@ -6432,8 +6429,7 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 		appearance: group.appearance
 	});
 	const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
-	const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
-	const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
+	const tone = isActive ? "running" : isComplete ? "done" : "other";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-tool-render",
 		"data-tool-name": name,
@@ -6441,20 +6437,20 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 		"data-status": status,
 		"data-args": safeStringifyForAttr(parameters),
 		"data-result": safeStringifyForAttr(result),
-		className: "cpk:mt-2 cpk:pb-2",
+		className: "cpk-default-tool-call",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:bg-white/70 cpk:p-4 cpk:shadow-sm cpk:backdrop-blur cpk:dark:border-zinc-800/60 cpk:dark:bg-zinc-900/50",
+			className: "cpk-default-tool-call-card",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
 				"aria-expanded": isExpanded,
 				onClick: () => setIsExpanded(!isExpanded),
-				className: "cpk:flex cpk:w-full cpk:cursor-pointer cpk:select-none cpk:items-center cpk:justify-between cpk:gap-2.5 cpk:border-none cpk:bg-transparent cpk:p-0 cpk:m-0 cpk:text-left cpk:text-inherit",
+				className: "cpk-default-tool-call-header",
 				style: { font: "inherit" },
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
+					className: "cpk-default-tool-call-title",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							className: `cpk:h-3.5 cpk:w-3.5 cpk:flex-shrink-0 cpk:text-zinc-500 cpk:transition-transform cpk:dark:text-zinc-400 ${isExpanded ? "cpk:rotate-90" : ""}`,
+							className: require_MarkdownSurfaces.cn("cpk-default-tool-call-chevron", isExpanded && "cpk-default-tool-call-chevron-open"),
 							fill: "none",
 							viewBox: "0 0 24 24",
 							strokeWidth: 2,
@@ -6465,31 +6461,31 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
 							})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `cpk-default-tool-call-dot cpk-default-tool-call-dot-${tone}` }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							"data-testid": "copilot-tool-render-name",
-							className: "cpk:truncate cpk:text-[13px] cpk:font-semibold cpk:text-zinc-900 cpk:dark:text-zinc-100",
+							className: "cpk-default-tool-call-name",
 							children: name
 						})
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"data-testid": "copilot-tool-render-status",
-					className: `cpk:inline-flex cpk:flex-shrink-0 cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-0.5 cpk:text-[11px] cpk:font-medium ${badgeClassName}`,
+					className: `cpk-default-tool-call-badge cpk-default-tool-call-badge-${tone}`,
 					children: statusLabel
 				})]
 			}), isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:mt-3 cpk:grid cpk:gap-3",
+				className: "cpk-default-tool-call-details",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+					className: "cpk-default-tool-call-label",
 					children: "Arguments"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-					className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
+					className: "cpk-default-tool-call-code",
 					children: safeStringifyForPre(parameters ?? {})
 				})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:text-[10px] cpk:uppercase cpk:text-zinc-500 cpk:dark:text-zinc-400",
+					className: "cpk-default-tool-call-label",
 					children: "Result"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-					className: "cpk:mt-1.5 cpk:max-h-[200px] cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-100 cpk:p-2.5 cpk:text-[11px] cpk:leading-relaxed cpk:text-zinc-800 cpk:whitespace-pre-wrap cpk:break-words cpk:dark:bg-zinc-800/60 cpk:dark:text-zinc-200",
+					className: "cpk-default-tool-call-code",
 					children: typeof result === "string" ? result : safeStringifyForPre(result)
 				})] })]
 			})]
@@ -8332,9 +8328,9 @@ function CopilotChatToolCallsView({ message, messages = [], display: displayProp
 			const failedIds = new Set(segment.calls.filter((call) => call.toolMessage?.error).map((call) => call.toolCall.id));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
 				open: workOpen ?? true,
-				className: "cpk:-mx-2",
+				className: "cpk-tool-calls-view-turn",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:px-2 cpk:py-1.5",
+					className: "cpk-tool-calls-view-turn-rows",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolCallGroupContext.Provider, {
 						value: {
 							appearance: "line",
@@ -8379,7 +8375,7 @@ function InspectorKiteIcon({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		...props,
 		"aria-hidden": "true",
-		className: (0, tailwind_merge.twMerge)("cpk:size-4", className),
+		className: require_MarkdownSurfaces.cn("cpk-inspector-button-kite-icon", className),
 		viewBox: "4.57 3.36 17.8 17.8",
 		fill: "none",
 		children: [
@@ -8527,7 +8523,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 				size: "icon",
 				"data-testid": "copilot-inspector-button",
 				"aria-label": `${labels.assistantMessageToolbarInspectorTitle} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel.toLowerCase()})`,
-				className: (0, tailwind_merge.twMerge)("cpk:size-8 cpk:p-1.5", className),
+				className: require_MarkdownSurfaces.cn("cpk-inspector-button", className),
 				onPointerEnter: (event) => {
 					onPointerEnter?.(event);
 					if (!disabled && event.pointerType !== "touch") {
@@ -8557,7 +8553,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Wrench, {
 					"aria-hidden": "true",
-					className: "cpk:size-4",
+					className: "cpk-inspector-button-icon",
 					"data-testid": "copilot-inspector-icon"
 				})
 			})
@@ -8565,7 +8561,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 			align: "start",
 			side: "top",
 			sideOffset: 6,
-			className: (0, tailwind_merge.twMerge)("cpk:w-64 cpk:p-1 cpk:text-sm", dark && "dark"),
+			className: require_MarkdownSurfaces.cn("cpk-inspector-button-menu", dark && "dark"),
 			onPointerEnter: cancelClose,
 			onPointerLeave: scheduleClose,
 			onKeyDown: () => {
@@ -8580,9 +8576,9 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 			onFocusOutside: () => changeOpen(false),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuLabel, {
-					className: "cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:px-2 cpk:py-2",
+					className: "cpk-inspector-button-menu-header",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cpk:text-xs cpk:font-medium",
+						className: "cpk-inspector-button-menu-title",
 						children: labels.assistantMessageToolbarInspectorTitle
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, {
 						delayDuration: 1e3,
@@ -8590,13 +8586,13 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 							asChild: true,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								tabIndex: 0,
-								className: "cpk:cursor-help cpk:rounded cpk:bg-muted cpk:px-1.5 cpk:py-0.5 cpk:text-[10px] cpk:font-normal cpk:text-muted-foreground",
+								className: "cpk-inspector-button-local-badge",
 								children: labels.assistantMessageToolbarInspectorLocalOnlyLabel
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
 							side: "top",
 							sideOffset: 6,
-							className: (0, tailwind_merge.twMerge)("cpk:max-w-48 cpk:text-wrap", dark && "dark"),
+							className: require_MarkdownSurfaces.cn("cpk-inspector-button-local-tooltip", dark && "dark"),
 							onPointerEnter: cancelClose,
 							onPointerLeave: scheduleClose,
 							children: labels.assistantMessageToolbarInspectorLocalOnlyDescription
@@ -8609,27 +8605,27 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						onClick,
-						className: "cpk:w-full cpk:cursor-pointer cpk:items-start cpk:text-left",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorKiteIcon, { className: "cpk:mt-0.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cpk:block",
+						className: "cpk-inspector-button-menu-item cpk-inspector-button-inspect-item",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorKiteIcon, { className: "cpk-inspector-button-menu-item-icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "cpk-inspector-button-menu-item-label",
 							children: primaryLabel
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+							className: "cpk-inspector-button-menu-item-description",
 							children: labels.assistantMessageToolbarInspectorDescription
 						})] })]
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuItem, {
 					onSelect: hideShortcuts,
-					className: "cpk:cursor-pointer cpk:items-start",
+					className: "cpk-inspector-button-menu-item cpk-inspector-button-hide-item",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeOff, {
 						"aria-hidden": "true",
-						className: "cpk:mt-0.5"
+						className: "cpk-inspector-button-menu-item-icon"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cpk:block",
+						className: "cpk-inspector-button-menu-item-label",
 						children: labels.assistantMessageToolbarInspectorHideLabel
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+						className: "cpk-inspector-button-menu-item-description",
 						children: labels.assistantMessageToolbarInspectorHideDescription
 					})] })]
 				})
@@ -8663,7 +8659,7 @@ const PopoverContent = react.forwardRef(({ className, align = "start", sideOffse
 	"data-slot": "popover-content",
 	align,
 	sideOffset,
-	className: cn("cpk:z-50 cpk:outline-none cpk:data-[state=open]:animate-in cpk:data-[state=open]:fade-in-0 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-1 cpk:data-[side=top]:slide-in-from-bottom-1", className),
+	className: require_MarkdownSurfaces.cn("cpk-popover", className),
 	...props
 }) }));
 PopoverContent.displayName = "PopoverContent";
@@ -8958,9 +8954,9 @@ function WorkText({ messageId, children }) {
 	const open = context.workTextOpen.get(messageId);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
 		open: open ?? true,
-		className: "cpk:-mx-2",
+		className: "cpk-assistant-message-work-text",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:px-2",
+			className: "cpk-assistant-message-work-text-content",
 			"data-work-text": open === void 0 ? "reply" : "narration",
 			children
 		})
@@ -9066,7 +9062,7 @@ function FeedbackCommentPopover({ feedbackComment, comment, savedComment, rating
 			},
 			onPointerEnter: () => comment.enter("pointer"),
 			onPointerLeave: () => comment.leave("pointer"),
-			className: "cpk:z-[1300]",
+			className: "cpk-assistant-message-feedback-popover",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: require_MarkdownSurfaces.renderSlot(feedbackComment, CopilotChatAssistantMessage.FeedbackComment, {
 				value: comment.draft,
 				savedComment,
@@ -9193,7 +9189,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	const boundReadAloudButton = require_MarkdownSurfaces.renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud ? () => onReadAloud(message) : void 0 });
 	const boundRegenerateButton = require_MarkdownSurfaces.renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate ? () => onRegenerate(message) : void 0 });
 	const boundToolbar = require_MarkdownSurfaces.renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-1",
+		className: "cpk-assistant-message-toolbar-items",
 		children: [
 			boundCopyButton,
 			(onThumbsUp || thumbsUpButton || feedback) && boundThumbsUpButton,
@@ -9258,14 +9254,14 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 		ref: root,
 		"data-copilotkit": true,
 		"data-testid": "copilot-assistant-message",
-		className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitAssistantMessage", className),
+		className: require_MarkdownSurfaces.cn("copilotKitMessage copilotKitAssistantMessage", className),
 		...props,
 		"data-message-id": message.id,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkText, {
 				messageId: message.id,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert",
+					className: "cpk-markdown cpk-assistant-message-markdown",
 					children: boundMarkdownRenderer
 				})
 			}),
@@ -9293,7 +9289,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	};
 	_CopilotChatAssistantMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-assistant-toolbar",
-		className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:-ml-[5px] cpk:-mt-[0px]", className),
+		className: require_MarkdownSurfaces.cn("cpk-assistant-message-toolbar", className),
 		...props
 	});
 	const ToolbarButton = _CopilotChatAssistantMessage.ToolbarButton = ({ title, tooltip, tooltipClassName, children, ...props }) => {
@@ -9346,7 +9342,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			onClick: handleClick,
 			className,
 			...props,
-			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk:size-[18px]" })
+			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk-assistant-message-toolbar-icon" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk-assistant-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatAssistantMessage.InspectorButton = CopilotChatInspectorButton;
@@ -9357,7 +9353,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			title: title || labels.assistantMessageToolbarThumbsUpLabel,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsUp, {
-				className: "cpk:size-[18px]",
+				className: "cpk-assistant-message-toolbar-icon",
 				fill: props["aria-pressed"] === true ? "currentColor" : "none"
 			})
 		});
@@ -9369,7 +9365,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			title: title || labels.assistantMessageToolbarThumbsDownLabel,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ThumbsDown, {
-				className: "cpk:size-[18px]",
+				className: "cpk-assistant-message-toolbar-icon",
 				fill: props["aria-pressed"] === true ? "currentColor" : "none"
 			})
 		});
@@ -9379,7 +9375,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 		const changed = value.trim() !== savedComment;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 			"data-testid": "copilot-feedback-comment",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:w-80 cpk:max-w-[calc(100vw-1rem)] cpk:items-center cpk:gap-1 cpk:rounded-full cpk:border cpk:border-border cpk:bg-background cpk:py-0.5 cpk:pl-3 cpk:pr-0.5 cpk:text-sm cpk:shadow-md", className),
+			className: require_MarkdownSurfaces.cn("cpk-assistant-message-feedback-comment", className),
 			onSubmit: (event) => {
 				event.preventDefault();
 				onSubmit();
@@ -9399,13 +9395,13 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 				onChange: (event) => onChange(event.target.value),
 				placeholder: labels.assistantMessageFeedbackCommentPlaceholder,
 				"aria-label": labels.assistantMessageFeedbackCommentPlaceholder,
-				className: "cpk:min-w-0 cpk:flex-1 cpk:bg-transparent cpk:py-1 cpk:text-foreground cpk:outline-none cpk:placeholder:text-muted-foreground"
+				className: "cpk-assistant-message-feedback-comment-input"
 			}), changed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 				type: "submit",
 				variant: "assistantMessageToolbarButton",
 				"aria-label": labels.assistantMessageFeedbackCommentSubmitLabel,
 				title: labels.assistantMessageFeedbackCommentSubmitLabel,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk:size-[16px]" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUp, { className: "cpk-assistant-message-feedback-comment-submit-icon" })
 			})]
 		});
 	};
@@ -9415,7 +9411,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-read-aloud-button",
 			title: title || labels.assistantMessageToolbarReadAloudLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "cpk:size-[20px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Volume2, { className: "cpk-assistant-message-read-aloud-icon" })
 		});
 	};
 	_CopilotChatAssistantMessage.RegenerateButton = ({ title, ...props }) => {
@@ -9424,7 +9420,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-regenerate-button",
 			title: title || labels.assistantMessageToolbarRegenerateLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RefreshCw, { className: "cpk-assistant-message-toolbar-icon" })
 		});
 	};
 })(CopilotChatAssistantMessage || (CopilotChatAssistantMessage = {}));
@@ -9457,13 +9453,13 @@ function Lightbox({ onClose, children }) {
 	}, [onClose]);
 	if (typeof document === "undefined") return null;
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
+		className: "cpk-attachment-lightbox",
 		onClick: onClose,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			onClick: onClose,
-			className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
+			className: "cpk-attachment-lightbox-close-button",
 			"aria-label": labels.attachmentPreviewCloseButtonLabel,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk:w-5 cpk:h-5" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "cpk-attachment-lightbox-close-icon" })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			onClick: (e) => e.stopPropagation(),
 			children
@@ -9521,14 +9517,14 @@ const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, classNam
 	const [error, setError] = (0, react.useState)(false);
 	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground", className),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-renderer cpk-attachment-renderer-image-error", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Failed to load image" })
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		ref: thumbnailRef,
 		src,
 		alt: "Image attachment",
-		className: cn("cpk:max-w-[80px] cpk:max-h-[80px] cpk:w-auto cpk:h-auto cpk:rounded-xl cpk:object-cover cpk:cursor-pointer cpk:bg-muted", className),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-renderer cpk-attachment-renderer-image", className),
 		onClick: openLightbox,
 		onError: () => setError(true)
 	}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
@@ -9537,20 +9533,20 @@ const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, classNam
 			style: { viewTransitionName: vtName },
 			src,
 			alt: "Image attachment",
-			className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+			className: "cpk-attachment-renderer-lightbox-image"
 		})
 	})] });
 });
 const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("cpk:flex cpk:flex-col cpk:gap-1", className),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-renderer cpk-attachment-renderer-audio", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
 			src,
 			controls: true,
 			preload: "metadata",
-			className: "cpk:max-w-[300px] cpk:w-full cpk:h-10"
+			className: "cpk-attachment-renderer-audio-player"
 		}), filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]",
+			className: "cpk-attachment-renderer-audio-filename",
 			children: filename
 		})]
 	});
@@ -9560,7 +9556,7 @@ const VideoAttachment = (0, react.memo)(function VideoAttachment({ src, classNam
 		src,
 		controls: true,
 		preload: "metadata",
-		className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
+		className: require_MarkdownSurfaces.cn("cpk-attachment-renderer cpk-attachment-renderer-video", className)
 	});
 });
 const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ src, source, filename, className }) {
@@ -9571,12 +9567,12 @@ const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ src, so
 		target: "_blank",
 		rel: "noopener noreferrer",
 		"aria-label": label,
-		className: cn("cpk:inline-flex cpk:max-w-full cpk:items-center cpk:gap-2 cpk:px-3 cpk:py-2 cpk:border cpk:border-border cpk:rounded-lg cpk:bg-muted", className),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-renderer cpk-attachment-renderer-document", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:text-xs cpk:font-bold cpk:uppercase",
+			className: "cpk-attachment-renderer-document-icon",
 			children: (0, _copilotkit_shared.getDocumentIcon)(source.mimeType ?? "")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:text-sm cpk:text-muted-foreground cpk:truncate",
+			className: "cpk-attachment-renderer-document-name",
 			children: filename || source.mimeType || "Unknown type"
 		})]
 	});
@@ -9641,7 +9637,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 	});
 	const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
 	const BoundToolbar = require_MarkdownSurfaces.renderSlot(toolbar, CopilotChatUserMessage.Toolbar, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:flex cpk:items-center cpk:gap-1 cpk:justify-end",
+		className: "cpk-user-message-toolbar-items",
 		children: [
 			additionalToolbarItems,
 			BoundCopyButton,
@@ -9667,12 +9663,12 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-copilotkit": true,
 		"data-testid": "copilot-user-message",
-		className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitUserMessage cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
+		className: require_MarkdownSurfaces.cn("copilotKitMessage copilotKitUserMessage cpk-user-message", className),
 		"data-message-id": message.id,
 		...props,
 		children: [
 			mediaParts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex cpk:flex-row cpk:flex-wrap cpk:max-w-full cpk:justify-end cpk:gap-2 cpk:mb-2",
+				className: "cpk-user-message-attachments",
 				children: mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentRenderer, {
 					type: part.type,
 					source: part.source,
@@ -9686,17 +9682,17 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 }
 (function(_CopilotChatUserMessage) {
 	_CopilotChatUserMessage.Container = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col cpk:items-end cpk:group", className),
+		className: require_MarkdownSurfaces.cn("cpk-user-message-container", className),
 		...props,
 		children
 	});
 	_CopilotChatUserMessage.MessageRenderer = ({ content, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, tailwind_merge.twMerge)("cpk:prose cpk:dark:prose-invert cpk:bg-muted cpk:relative cpk:max-w-[80%] cpk:rounded-[18px] cpk:px-4 cpk:py-1.5 cpk:data-[multiline]:py-3 cpk:inline-block cpk:whitespace-pre-wrap", className),
+		className: require_MarkdownSurfaces.cn("cpk-user-message-bubble", className),
 		children: content
 	});
 	_CopilotChatUserMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-user-toolbar",
-		className: (0, tailwind_merge.twMerge)("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:justify-end cpk:-mr-[5px] cpk:mt-[4px] cpk:invisible cpk:group-hover:visible", className),
+		className: require_MarkdownSurfaces.cn("cpk-user-message-toolbar", className),
 		...props
 	});
 	const ToolbarButton = _CopilotChatUserMessage.ToolbarButton = ({ title, children, className, ...props }) => {
@@ -9706,7 +9702,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 				type: "button",
 				variant: "assistantMessageToolbarButton",
 				"aria-label": title,
-				className: (0, tailwind_merge.twMerge)(className),
+				className,
 				...props,
 				children
 			})
@@ -9732,7 +9728,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 			onClick: handleClick,
 			className,
 			...props,
-			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk:size-[18px]" })
+			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "cpk-user-message-toolbar-icon" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "cpk-user-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatUserMessage.EditButton = ({ className, title, ...props }) => {
@@ -9742,7 +9738,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 			title: title || labels.userMessageToolbarEditMessageLabel,
 			className,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Edit, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Edit, { className: "cpk-user-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatUserMessage.BranchNavigation = ({ className, currentBranch = 0, numberOfBranches = 1, onSwitchToBranch, message, ...props }) => {
@@ -9752,7 +9748,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		const canGoNext = currentBranch < numberOfBranches - 1;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-testid": "copilot-branch-navigation",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:items-center cpk:gap-1", className),
+			className: require_MarkdownSurfaces.cn("cpk-user-message-branch-navigation", className),
 			...props,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -9764,12 +9760,12 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 						message
 					}),
 					disabled: !canGoPrev,
-					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					className: "cpk-user-message-branch-button",
 					"aria-label": labels.userMessageToolbarPreviousBranchLabel,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "cpk:size-[20px]" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "cpk-user-message-branch-icon" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "cpk:text-sm cpk:text-muted-foreground cpk:px-0 cpk:font-medium",
+					className: "cpk-user-message-branch-counter",
 					children: [
 						currentBranch + 1,
 						"/",
@@ -9785,9 +9781,9 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 						message
 					}),
 					disabled: !canGoNext,
-					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					className: "cpk-user-message-branch-button",
 					"aria-label": labels.userMessageToolbarNextBranchLabel,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "cpk:size-[20px]" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "cpk-user-message-branch-icon" })
 				})
 			]
 		});
@@ -9883,7 +9879,7 @@ function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: i
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, tailwind_merge.twMerge)("cpk:my-1", className),
+		className: require_MarkdownSurfaces.cn("cpk-reasoning-message", className),
 		"data-message-id": message.id,
 		...props,
 		children: [boundHeader, boundToggle]
@@ -9894,47 +9890,47 @@ function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: i
 		const isExpandable = !!hasContent;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: (0, tailwind_merge.twMerge)("cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none", isExpandable ? "cpk:hover:text-foreground cpk:cursor-pointer" : "cpk:cursor-default", className),
+			className: require_MarkdownSurfaces.cn("cpk-reasoning-message-header", isExpandable && "cpk-reasoning-message-header-expandable", className),
 			"aria-expanded": isExpandable ? isOpen : void 0,
 			...headerProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:font-medium",
+					className: "cpk-reasoning-message-label",
 					children: label
 				}),
 				isStreaming && !hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:inline-flex cpk:items-center cpk:ml-1",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse" })
+					className: "cpk-reasoning-message-indicator",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk-reasoning-message-indicator-dot" })
 				}),
 				headerChildren,
-				isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", isOpen && "cpk:rotate-90") })
+				isExpandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: require_MarkdownSurfaces.cn("cpk-reasoning-message-chevron", isOpen && "cpk-reasoning-message-chevron-open") })
 			]
 		});
 	};
 	_CopilotChatReasoningMessage.Content = ({ isStreaming, hasContent, className, children: contentChildren, ...contentProps }) => {
 		if (!hasContent && !isStreaming) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("cpk:pb-2 cpk:pt-1", className),
+			className: require_MarkdownSurfaces.cn("cpk-reasoning-message-content", className),
 			...contentProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:text-sm cpk:text-muted-foreground",
+				className: "cpk-reasoning-message-text",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownSurfaces.StreamingMarkdownDefaultRenderer, {
 					content: typeof contentChildren === "string" ? contentChildren : "",
 					isStreaming
 				}), isStreaming && hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk:w-2 cpk:h-2 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse-cursor" })
+					className: "cpk-reasoning-message-cursor",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cpk-reasoning-message-cursor-dot" })
 				})]
 			})
 		});
 	};
 	_CopilotChatReasoningMessage.Toggle = ({ isOpen, className, children: toggleChildren, ...toggleProps }) => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, tailwind_merge.twMerge)("cpk:grid cpk:transition-[grid-template-rows] cpk:duration-200 cpk:ease-in-out", className),
+			className: require_MarkdownSurfaces.cn("cpk-reasoning-message-toggle", className),
 			style: { gridTemplateRows: isOpen ? "1fr" : "0fr" },
 			...toggleProps,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:overflow-hidden",
+				className: "cpk-reasoning-message-toggle-content",
 				children: toggleChildren
 			})
 		});
@@ -9947,8 +9943,6 @@ var CopilotChatReasoningMessage_default = CopilotChatReasoningMessage;
 
 //#endregion
 //#region src/components/chat/CopilotChatSuggestionPill.tsx
-const baseClasses = "group cpk:inline-flex cpk:h-7 cpk:sm:h-8 cpk:items-center cpk:gap-1 cpk:sm:gap-1.5 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:sm:px-3 cpk:text-[11px] cpk:sm:text-xs cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto";
-const labelClasses = "cpk:whitespace-nowrap cpk:font-medium cpk:leading-none";
 const CopilotChatSuggestionPill = react.default.forwardRef(function CopilotChatSuggestionPill({ className, children, icon, isLoading, type, ...props }, ref) {
 	const showIcon = !isLoading && icon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -9956,22 +9950,22 @@ const CopilotChatSuggestionPill = react.default.forwardRef(function CopilotChatS
 		"data-copilotkit": true,
 		"data-testid": "copilot-suggestion",
 		"data-slot": "suggestion-pill",
-		className: cn(baseClasses, className),
+		className: className ? `cpk-suggestion-pill ${className}` : "cpk-suggestion-pill",
 		type: type ?? "button",
 		"aria-busy": isLoading || void 0,
 		disabled: isLoading || props.disabled,
 		...props,
 		children: [isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground",
+			className: "cpk-suggestion-pill-icon",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, {
-				className: "cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:animate-spin",
+				className: "cpk-suggestion-pill-spinner",
 				"aria-hidden": "true"
 			})
 		}) : showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground",
+			className: "cpk-suggestion-pill-icon",
 			children: icon
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: labelClasses,
+			className: "cpk-suggestion-pill-label",
 			children
 		})]
 	});
@@ -9985,7 +9979,7 @@ const DefaultContainer = react.default.forwardRef(function DefaultContainer({ cl
 		ref,
 		"data-copilotkit": true,
 		"data-testid": "copilot-suggestions",
-		className: cn("cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:sm:gap-2 cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:pointer-events-none", className),
+		className: require_MarkdownSurfaces.cn("cpk-suggestion-view", className),
 		...props
 	});
 });
@@ -10115,30 +10109,30 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 		"data-testid": "copilot-work-summary",
 		"data-state": isWorking ? "working" : "done",
 		"aria-expanded": isOpen,
-		className: (0, tailwind_merge.twMerge)("cpk:m-0 cpk:inline-flex cpk:max-w-full cpk:cursor-pointer cpk:items-center cpk:gap-1.5 cpk:rounded-md cpk:border-none cpk:bg-transparent cpk:p-0 cpk:py-0.5 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:hover:text-foreground cpk:focus-visible:outline-2 cpk:focus-visible:outline-ring", className),
+		className: require_MarkdownSurfaces.cn("cpk-work-summary", className),
 		...props,
 		children: [isWorking ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:font-medium cpk-shimmer",
+			className: "cpk-work-summary-label cpk-shimmer",
 			children: "Working"
 		}), liveMs !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:text-xs cpk:tabular-nums cpk:opacity-70",
+			className: "cpk-work-summary-detail cpk-work-summary-timer",
 			children: formatDuration(liveMs)
 		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "cpk:font-medium",
+				className: "cpk-work-summary-label",
 				children: duration ? `Worked for ${duration}` : `Used ${pluralize(calls.length, "tool")}`
 			}),
 			duration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "cpk:text-xs cpk:opacity-70",
+				className: "cpk-work-summary-detail",
 				children: pluralize(calls.length, "tool")
 			}),
 			failed > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "cpk:text-destructive",
+				className: "cpk-work-summary-failed",
 				children: [failed, " failed"]
 			})
 		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
 			"aria-hidden": "true",
-			className: (0, tailwind_merge.twMerge)("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", isOpen && "cpk:rotate-90")
+			className: require_MarkdownSurfaces.cn("cpk-work-summary-chevron", isOpen && "cpk-work-summary-chevron-open")
 		})]
 	});
 }
@@ -10155,7 +10149,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 * checkmark — whose geometry lives in each path's `d` ATTRIBUTE so it
 * renders in every browser (the CSS `d:` property is Chrome-only).
 *
-* Two states, driven by the `data-status` attribute (see globals.css
+* Two states, driven by the `data-status` attribute (see styles/css/intelligence-indicator.css
 * for the exact timing):
 *  1. **In-progress.** The arc spins (CSS rotation) inside the pill and
 *     the checkmark is hidden. Label + icon are a saturated purple.
@@ -10169,7 +10163,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 *     — the static check plus the color/slant shift carry the "done"
 *     meaning, so no wording change is needed.
 *
-* All motion is gated behind `prefers-reduced-motion` (globals.css):
+* All motion is gated behind `prefers-reduced-motion` (styles/css/intelligence-indicator.css):
 * when reduced motion is requested the arc does not spin and the two
 * states swap instantly, without transitions.
 *
@@ -10180,7 +10174,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 */
 function IntelligenceIndicatorView({ message, status, label, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: (0, tailwind_merge.twMerge)("cpk-intelligence-indicator", className),
+		className: require_MarkdownSurfaces.cn("cpk-intelligence-indicator", className),
 		role: "status",
 		"aria-live": "polite",
 		"data-testid": `cpk-intelligence-indicator-${message.id}`,
@@ -10752,7 +10746,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible, {
 			open: working || calls.length > 0,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:pt-1 cpk:pb-2",
+				className: "cpk-message-view-work-summary",
 				children: require_MarkdownSurfaces.renderSlot(workSummary, CopilotChatWorkSummary, {
 					isWorking: working,
 					isOpen: open,
@@ -11123,7 +11117,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-copilotkit": true,
 				"data-testid": "copilot-message-list",
-				className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
+				className: require_MarkdownSurfaces.cn("copilotKitMessages cpk-message-view", className),
 				...props,
 				children: [
 					shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -11151,7 +11145,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 					interruptElement,
 					pendingWorkSummary && renderWorkSummary(latestTurnKey, []),
 					showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:mt-2",
+						className: "cpk-message-view-cursor-container",
 						children: require_MarkdownSurfaces.renderSlot(cursor, CopilotChatMessageView.Cursor, {})
 					})
 				]
@@ -11162,7 +11156,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-loading-cursor",
-		className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
+		className: require_MarkdownSurfaces.cn("cpk-message-view-cursor", className),
 		...props
 	});
 };
@@ -11178,17 +11172,16 @@ const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className
 	if (attachments.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-attachment-queue",
-		className: cn("cpk:flex cpk:flex-wrap cpk:gap-2 cpk:p-2", className),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-queue", className),
 		children: attachments.map((attachment) => {
-			const isMedia = attachment.type === "image" || attachment.type === "video";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("cpk:relative cpk:inline-flex cpk:rounded-lg cpk:overflow-hidden cpk:border cpk:border-border", isMedia ? "cpk:w-[72px] cpk:h-[72px]" : attachment.type === "audio" ? "cpk:min-w-[200px] cpk:max-w-[280px] cpk:flex-col cpk:p-1 cpk:pr-8" : "cpk:p-2 cpk:px-3 cpk:pr-8 cpk:max-w-[240px]"),
+				className: require_MarkdownSurfaces.cn("cpk-attachment-queue-item", attachment.type === "image" || attachment.type === "video" ? "cpk-attachment-queue-item-media" : attachment.type === "audio" ? "cpk-attachment-queue-item-audio" : "cpk-attachment-queue-item-document"),
 				children: [
 					attachment.status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadingOverlay, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { attachment }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						onClick: () => onRemoveAttachment(attachment.id),
-						className: cn("cpk:absolute cpk:bg-black/60 cpk:text-white cpk:border-none cpk:rounded-full cpk:w-5 cpk:h-5 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:text-[10px] cpk:z-20", isMedia ? "cpk:top-1 cpk:right-1" : "cpk:top-1.5 cpk:right-1.5"),
+						className: "cpk-attachment-queue-remove-button",
 						"aria-label": labels.attachmentRemoveButtonLabel,
 						children: "✕"
 					})
@@ -11199,12 +11192,12 @@ const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className
 };
 function UploadingOverlay() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/40 cpk:z-10",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-5 cpk:h-5 cpk:border-2 cpk:border-white cpk:border-t-transparent cpk:rounded-full cpk:animate-spin" })
+		className: "cpk-attachment-queue-uploading-overlay",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk-attachment-queue-uploading-spinner" })
 	});
 }
 function AttachmentPreview({ attachment }) {
-	if (attachment.status === "uploading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk:w-full cpk:h-full" });
+	if (attachment.status === "uploading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cpk-attachment-queue-placeholder" });
 	switch (attachment.type) {
 		case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePreview, { attachment });
 		case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioPreview, { attachment });
@@ -11219,7 +11212,7 @@ function ImagePreview({ attachment }) {
 		ref: thumbnailRef,
 		src,
 		alt: attachment.filename || "Image attachment",
-		className: "cpk:w-full cpk:h-full cpk:object-cover cpk:cursor-pointer",
+		className: "cpk-attachment-queue-image",
 		onClick: openLightbox
 	}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
 		onClose: closeLightbox,
@@ -11227,20 +11220,20 @@ function ImagePreview({ attachment }) {
 			style: { viewTransitionName: vtName },
 			src,
 			alt: attachment.filename || "Image attachment",
-			className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+			className: "cpk-attachment-queue-lightbox-image"
 		})
 	})] });
 }
 function AudioPreview({ attachment }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full",
+		className: "cpk-attachment-queue-audio",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
 			src: (0, _copilotkit_shared.getSourceUrl)(attachment.source),
 			controls: true,
 			preload: "metadata",
-			className: "cpk:w-full cpk:h-8"
+			className: "cpk-attachment-queue-audio-player"
 		}), attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "cpk:text-xs cpk:font-medium cpk:overflow-hidden cpk:text-ellipsis cpk:whitespace-nowrap",
+			className: "cpk-attachment-queue-audio-filename",
 			children: attachment.filename
 		})]
 	});
@@ -11257,25 +11250,25 @@ function VideoPreview({ attachment }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: thumbnailRef,
-			className: "cpk:w-full cpk:h-full",
+			className: "cpk-attachment-queue-video",
 			children: attachment.thumbnail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 				src: attachment.thumbnail,
 				alt: attachment.filename || "Video thumbnail",
-				className: "cpk:w-full cpk:h-full cpk:object-cover"
+				className: "cpk-attachment-queue-video-thumbnail"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
 				src,
 				preload: "metadata",
 				muted: true,
-				className: "cpk:w-full cpk:h-full cpk:object-cover"
+				className: "cpk-attachment-queue-video-thumbnail"
 			})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			onClick: openLightbox,
-			className: "cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:z-10 cpk:cursor-pointer cpk:bg-black/20 cpk:border-none cpk:p-0",
+			className: "cpk-attachment-queue-video-play-button",
 			"aria-label": labels.attachmentPlayVideoButtonLabel,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:w-8 cpk:h-8 cpk:rounded-full cpk:bg-black/60 cpk:flex cpk:items-center cpk:justify-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
+				className: "cpk-attachment-queue-video-play-badge",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "cpk-attachment-queue-video-play-icon" })
 			})
 		}),
 		open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
@@ -11285,7 +11278,7 @@ function VideoPreview({ attachment }) {
 				src,
 				controls: true,
 				autoPlay: true,
-				className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
+				className: "cpk-attachment-queue-lightbox-video"
 			})
 		})
 	] });
@@ -11336,7 +11329,7 @@ function DocumentLightboxContent({ attachment, vtName }) {
 			style: { viewTransitionName: vtName },
 			src: blobUrl,
 			title: attachment.filename || "PDF preview",
-			className: "cpk:w-[90vw] cpk:h-[90vh] cpk:max-w-[1000px] cpk:rounded-lg cpk:bg-white"
+			className: "cpk-attachment-queue-pdf-preview"
 		});
 	}
 	if (isText(mimeType)) {
@@ -11349,40 +11342,40 @@ function DocumentLightboxContent({ attachment, vtName }) {
 		})() : null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: { viewTransitionName: vtName },
-			className: "cpk:w-[90vw] cpk:max-w-[800px] cpk:max-h-[90vh] cpk:overflow-auto cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900 cpk:p-6",
+			className: "cpk-attachment-queue-text-preview",
 			children: [attachment.filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:text-sm cpk:font-medium cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mb-4 cpk:pb-2 cpk:border-b cpk:border-gray-200 cpk:dark:border-gray-700",
+				className: "cpk-attachment-queue-text-preview-filename",
 				children: attachment.filename
 			}), textContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "cpk:text-sm cpk:whitespace-pre-wrap cpk:break-words cpk:text-gray-800 cpk:dark:text-gray-200 cpk:font-mono cpk:m-0",
+				className: "cpk-attachment-queue-text-preview-content",
 				children: textContent
 			}) : blobUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
 				src: blobUrl,
 				title: attachment.filename || "Text preview",
-				className: "cpk:w-full cpk:h-[80vh] cpk:border-none"
+				className: "cpk-attachment-queue-text-preview-frame"
 			}) : null]
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: { viewTransitionName: vtName },
-		className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-4 cpk:p-8 cpk:rounded-lg cpk:bg-white cpk:dark:bg-gray-900",
+		className: "cpk-attachment-queue-document-card",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:w-16 cpk:h-16 cpk:rounded-xl cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-xl cpk:font-bold",
+				className: "cpk-attachment-queue-document-card-icon",
 				children: (0, _copilotkit_shared.getDocumentIcon)(mimeType ?? "")
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:text-center",
+				className: "cpk-attachment-queue-document-card-details",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:text-base cpk:font-medium cpk:text-gray-800 cpk:dark:text-gray-200",
+					className: "cpk-attachment-queue-document-card-name",
 					children: attachment.filename || "Document"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:text-sm cpk:text-gray-500 cpk:dark:text-gray-400 cpk:mt-1",
+					className: "cpk-attachment-queue-document-card-meta",
 					children: [mimeType || "Unknown type", attachment.size != null && ` · ${(0, _copilotkit_shared.formatFileSize)(attachment.size)}`]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:text-xs cpk:text-gray-400 cpk:dark:text-gray-500",
+				className: "cpk-attachment-queue-document-card-note",
 				children: "No preview available for this file type"
 			})
 		]
@@ -11394,18 +11387,18 @@ function DocumentPreview({ attachment }) {
 	const previewable = canPreviewInBrowser(mimeType);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: thumbnailRef,
-		className: cn("cpk:flex cpk:items-center cpk:gap-2", previewable && "cpk:cursor-pointer"),
+		className: require_MarkdownSurfaces.cn("cpk-attachment-queue-document", previewable && "cpk-attachment-queue-document-previewable"),
 		onClick: previewable ? openLightbox : void 0,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:w-8 cpk:h-8 cpk:rounded-md cpk:bg-primary cpk:text-primary-foreground cpk:flex cpk:items-center cpk:justify-center cpk:text-[10px] cpk:font-semibold cpk:shrink-0",
+			className: "cpk-attachment-queue-document-icon",
 			children: (0, _copilotkit_shared.getDocumentIcon)(mimeType ?? "")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:flex cpk:flex-col cpk:min-w-0",
+			className: "cpk-attachment-queue-document-info",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "cpk:text-xs cpk:font-medium cpk:break-all cpk:leading-tight",
+				className: "cpk-attachment-queue-document-name",
 				children: attachment.filename || "Document"
 			}), attachment.size != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "cpk:text-[11px] cpk:text-muted-foreground",
+				className: "cpk-attachment-queue-document-size",
 				children: (0, _copilotkit_shared.formatFileSize)(attachment.size)
 			})]
 		})]
@@ -11541,11 +11534,11 @@ function computeOffsetTop(el, stopAt) {
 const SCROLL_BUTTON_OFFSET = 16;
 function DropOverlay() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("cpk:absolute cpk:inset-0 cpk:z-50 cpk:pointer-events-none", "cpk:flex cpk:items-center cpk:justify-center", "cpk:bg-primary/5 cpk:backdrop-blur-[2px]", "cpk:border-2 cpk:border-dashed cpk:border-primary/40 cpk:rounded-lg cpk:m-2"),
+		className: "cpk-chat-view-drop-overlay",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "cpk:w-8 cpk:h-8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "cpk:text-sm cpk:font-medium",
+			className: "cpk-chat-view-drop-overlay-content",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Upload, { className: "cpk-chat-view-drop-overlay-icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cpk-chat-view-drop-overlay-label",
 				children: "Drop files here"
 			})]
 		})
@@ -11624,7 +11617,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		suggestions,
 		loadingIndexes: suggestionLoadingIndexes,
 		onSelectSuggestion,
-		className: "cpk:mb-3 cpk:lg:ml-4 cpk:lg:mr-4 cpk:ml-0 cpk:mr-0"
+		className: "cpk-chat-view-suggestion-view"
 	}) : null;
 	const BoundScrollView = require_MarkdownSurfaces.renderSlot(scrollView, CopilotChatView.ScrollView, {
 		autoScroll,
@@ -11635,9 +11628,9 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			"data-testid": "copilot-scroll-content",
 			style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:max-w-3xl cpk:mx-auto",
+				className: "cpk-chat-view-feed",
 				children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:mt-4",
+					className: "cpk-chat-view-suggestions",
 					children: BoundSuggestionView
 				}) : null]
 			})
@@ -11662,11 +11655,11 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		const welcomeScreenSlot = welcomeScreen === true ? void 0 : welcomeScreen;
 		const inputWithAttachments = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:w-full",
+			className: "cpk-chat-view-welcome-input-group",
 			children: [attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
 				attachments,
 				onRemoveAttachment: (id) => onRemoveAttachment?.(id),
-				className: "cpk:mb-2"
+				className: "cpk-chat-view-welcome-attachment-queue"
 			}), BoundInputForWelcome]
 		});
 		const BoundWelcomeScreen = require_MarkdownSurfaces.renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
@@ -11680,7 +11673,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			onDragOver,
 			onDragLeave,
 			onDrop,
-			className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			className: require_MarkdownSurfaces.cn("copilotKitChat cpk-chat-view", className),
 			...props,
 			children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 		});
@@ -11702,7 +11695,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onDragOver,
 		onDragLeave,
 		onDrop,
-		className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+		className: require_MarkdownSurfaces.cn("copilotKitChat cpk-chat-view", className),
 		...props,
 		children: [
 			dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
@@ -11710,13 +11703,13 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: setInputContainerEl,
 				"data-testid": "copilot-input-overlay",
-				className: "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none",
+				className: "cpk-chat-view-input-overlay",
 				children: [attachments && attachments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full cpk:pointer-events-auto",
+					className: "cpk-chat-view-attachments",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentQueue, {
 						attachments,
 						onRemoveAttachment: (id) => onRemoveAttachment?.(id),
-						className: "cpk:px-4"
+						className: "cpk-chat-view-attachment-queue"
 					})
 				}), BoundInput]
 			})
@@ -11827,19 +11820,19 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				value: state.isAtBottom,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom.Content, {
-						className: "cpk:overflow-y-auto cpk:overflow-x-hidden",
+						className: "cpk-chat-view-scroll-viewport",
 						style: {
 							flex: "1 1 0%",
 							minHeight: 0
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk-chat-view-scroll-content",
 							children
 						})
 					}),
 					BoundFeather,
 					!isAtBottom && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+						className: "cpk-chat-view-scroll-to-bottom",
 						style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 						children: require_MarkdownSurfaces.renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => startBottomPin() })
 					})
@@ -11859,15 +11852,15 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollElementContext.Provider, {
 			value: nonAutoScrollEl,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:relative", className),
+				className: require_MarkdownSurfaces.cn("cpk-chat-view-scroll-area", className),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: nonAutoScrollRefCallback,
-						className: "cpk:flex-1 cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
+						className: "cpk-chat-view-scroll-viewport",
 						...props,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: contentRef,
-							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk-chat-view-scroll-content",
 							children
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: spacerRef,
@@ -11881,7 +11874,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					}),
 					BoundFeather,
 					showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+						className: "cpk-chat-view-scroll-to-bottom",
 						style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 						children: require_MarkdownSurfaces.renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 					})
@@ -11927,9 +11920,9 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			};
 		}, [nonAutoScrollEl, mode]);
 		if (!hasMounted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden",
+			className: "cpk-chat-view-scroll-area cpk-chat-view-scroll-viewport",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+				className: "cpk-chat-view-scroll-content",
 				children
 			})
 		});
@@ -11939,17 +11932,17 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				value: nonAutoScrollEl,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: nonAutoScrollRefCallback,
-					className: cn("cpk:h-full cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0 cpk:overflow-y-auto cpk:overflow-x-hidden cpk:relative", className),
+					className: require_MarkdownSurfaces.cn("cpk-chat-view-scroll-area cpk-chat-view-scroll-viewport", className),
 					...props,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							ref: contentRef,
-							className: "cpk:px-4 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-6",
+							className: "cpk-chat-view-scroll-content",
 							children
 						}),
 						BoundFeather,
 						showScrollButton && !isResizing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cpk:absolute cpk:inset-x-0 cpk:flex cpk:justify-center cpk:z-30 cpk:pointer-events-none",
+							className: "cpk-chat-view-scroll-to-bottom",
 							style: { bottom: `${inputContainerHeight + SCROLL_BUTTON_OFFSET}px` },
 							children: require_MarkdownSurfaces.renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 						})
@@ -11973,7 +11966,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			children
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(use_stick_to_bottom.StickToBottom, {
-			className: cn("cpk:flex-1 cpk:max-h-full cpk:flex cpk:flex-col cpk:min-h-0", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-view-scroll-view", className),
 			resize: "smooth",
 			initial: "smooth",
 			...props,
@@ -11993,10 +11986,10 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			"data-testid": "copilot-scroll-to-bottom",
 			variant: "outline",
 			size: "sm",
-			className: (0, tailwind_merge.twMerge)("cpk:rounded-full cpk:w-10 cpk:h-10 cpk:p-0 cpk:pointer-events-auto", "cpk:bg-white cpk:dark:bg-gray-900", "cpk:shadow-lg cpk:border cpk:border-gray-200 cpk:dark:border-gray-700", "cpk:hover:bg-gray-50 cpk:dark:hover:bg-gray-800", "cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-view-scroll-to-bottom-button", className),
 			"aria-label": labels.chatScrollToBottomLabel,
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "cpk-chat-view-scroll-to-bottom-icon" })
 		});
 	};
 	_CopilotChatView.Feather = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -12006,7 +11999,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 	_CopilotChatView.WelcomeMessage = ({ className, ...props }) => {
 		const labels = require_MarkdownSurfaces.useCopilotChatConfiguration()?.labels ?? require_MarkdownSurfaces.CopilotChatDefaultLabels;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: cn("cpk:text-xl cpk:sm:text-2xl cpk:font-medium cpk:text-foreground cpk:text-center", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-view-welcome-message", className),
 			...props,
 			children: labels.welcomeMessageText
 		});
@@ -12026,21 +12019,21 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-welcome-screen",
-			className: cn("cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4", className),
+			className: require_MarkdownSurfaces.cn("cpk-chat-view-welcome-screen", className),
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "cpk:w-full cpk:max-w-3xl cpk:flex cpk:flex-col cpk:items-center",
+				className: "cpk-chat-view-welcome-screen-content",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:mb-6",
+						className: "cpk-chat-view-welcome-screen-message",
 						children: BoundWelcomeMessage
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:w-full",
+						className: "cpk-chat-view-welcome-screen-input",
 						children: input
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:mt-4 cpk:flex cpk:justify-center",
+						className: "cpk-chat-view-welcome-screen-suggestions",
 						children: suggestionView
 					})
 				]
@@ -12918,6 +12911,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 			ref: chatContainerRef,
 			style: { display: "contents" },
 			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitStyles, {}),
 				attachmentsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "file",
 					multiple: true,
@@ -12962,22 +12956,22 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 
 //#endregion
 //#region src/components/chat/CopilotChatToggleButton.tsx
+const ICON_CLASS = "cpk-chat-toggle-button-icon";
 const DefaultOpenIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MessageCircle, {
-	className: cn("cpk:h-6 cpk:w-6", className),
+	className: className ?? ICON_CLASS,
 	strokeWidth: 1.75,
 	fill: "currentColor",
 	...props
 });
 const DefaultCloseIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-	className: cn("cpk:h-6 cpk:w-6", className),
+	className: className ?? ICON_CLASS,
 	strokeWidth: 1.75,
 	...props
 });
 DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
 DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
 const ICON_TRANSITION_STYLE = Object.freeze({ transition: "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" });
-const ICON_WRAPPER_BASE = "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
-const BUTTON_BASE_CLASSES = cn("copilotKitButton", "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
+const ICON_WRAPPER_CLASS = "cpk-chat-toggle-button-icon-wrapper";
 const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
 	const { onClick, type, disabled, ...restProps } = buttonProps;
 	const configuration = require_MarkdownSurfaces.useCopilotChatConfiguration();
@@ -12992,19 +12986,19 @@ const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatTog
 		setModalOpen(!isOpen);
 	};
 	const renderedOpenIcon = require_MarkdownSurfaces.renderSlot(openIcon, DefaultOpenIcon, {
-		className: "cpk:h-6 cpk:w-6",
+		className: ICON_CLASS,
 		"aria-hidden": true,
 		focusable: false
 	});
 	const renderedCloseIcon = require_MarkdownSurfaces.renderSlot(closeIcon, DefaultCloseIcon, {
-		className: "cpk:h-6 cpk:w-6",
+		className: ICON_CLASS,
 		"aria-hidden": true,
 		focusable: false
 	});
 	const openIconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
 		"data-slot": "chat-toggle-button-open-icon",
-		className: ICON_WRAPPER_BASE,
+		className: ICON_WRAPPER_CLASS,
 		style: {
 			...ICON_TRANSITION_STYLE,
 			opacity: isOpen ? 0 : 1,
@@ -13015,7 +13009,7 @@ const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatTog
 	const closeIconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
 		"data-slot": "chat-toggle-button-close-icon",
-		className: ICON_WRAPPER_BASE,
+		className: ICON_WRAPPER_CLASS,
 		style: {
 			...ICON_TRANSITION_STYLE,
 			opacity: isOpen ? 1 : 0,
@@ -13030,7 +13024,7 @@ const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatTog
 		"data-testid": "copilot-chat-toggle",
 		"data-slot": "chat-toggle-button",
 		"data-state": isOpen ? "open" : "closed",
-		className: cn(BUTTON_BASE_CLASSES, className),
+		className: require_MarkdownSurfaces.cn("copilotKitButton cpk-chat-toggle-button", className),
 		"aria-label": isOpen ? labels.chatToggleCloseLabel : labels.chatToggleOpenLabel,
 		"aria-pressed": isOpen,
 		disabled,
@@ -13124,21 +13118,21 @@ function CopilotModalHeader({ title, titleContent, closeButton, drawerLauncher,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 		"data-testid": "copilot-modal-header",
 		"data-slot": "copilot-modal-header",
-		className: cn("copilotKitHeader", "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4", "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80", className),
+		className: require_MarkdownSurfaces.cn("copilotKitHeader cpk-modal-header", className),
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
+			className: "cpk-modal-header-content",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-start",
+					className: "cpk-modal-header-start",
 					children: BoundDrawerLauncher ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
+					className: "cpk-modal-header-center",
 					children: BoundTitle
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-end",
+					className: "cpk-modal-header-end",
 					children: BoundCloseButton
 				})
 			]
@@ -13149,7 +13143,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 (function(_CopilotModalHeader) {
 	_CopilotModalHeader.Title = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-testid": "copilot-header-title",
-		className: cn("cpk:w-full cpk:text-base cpk:font-medium cpk:leading-none cpk:tracking-tight cpk:text-foreground", className),
+		className: require_MarkdownSurfaces.cn("cpk-modal-header-title", className),
 		...props,
 		children
 	});
@@ -13158,11 +13152,11 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"data-testid": "copilot-close-button",
-			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+			className: require_MarkdownSurfaces.cn("cpk-modal-header-close-button", className),
 			"aria-label": labels.modalHeaderCloseButtonLabel,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-				className: "cpk:h-4 cpk:w-4",
+				className: "cpk-modal-header-close-icon",
 				"aria-hidden": "true"
 			})
 		});
@@ -13172,11 +13166,11 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
 			"data-testid": "copilot-threads-drawer-launcher",
-			className: cn("cpk:inline-flex cpk:size-8 cpk:items-center cpk:justify-center cpk:rounded-full cpk:text-muted-foreground cpk:transition cpk:cursor-pointer", "cpk:hover:bg-muted cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring", className),
+			className: require_MarkdownSurfaces.cn("cpk-modal-header-drawer-launcher", className),
 			"aria-label": labels.modalHeaderThreadsButtonLabel,
 			...props,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {
-				className: "cpk:h-4 cpk:w-4",
+				className: "cpk-modal-header-drawer-launcher-icon",
 				"aria-hidden": "true"
 			})
 		});
@@ -13267,13 +13261,13 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, position = "r
 		position
 	]);
 	const headerElement = require_MarkdownSurfaces.renderSlot(header, CopilotModalHeader, {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [require_MarkdownSurfaces.renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [require_MarkdownSurfaces.renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk-sidebar-view-toggle-button-left" } : {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 		ref: sidebarRef,
 		"data-copilotkit": true,
 		"data-testid": "copilot-sidebar",
 		"data-copilot-sidebar": true,
 		"data-position": position,
-		className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:top-0 cpk:z-[1200] cpk:flex", position === "left" ? "cpk:left-0" : "cpk:right-0", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", position === "left" ? "cpk:border-r" : "cpk:border-l", "cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : position === "left" ? "cpk:-translate-x-full cpk:pointer-events-none" : "cpk:translate-x-full cpk:pointer-events-none"),
+		className: require_MarkdownSurfaces.cn("copilotKitSidebar copilotKitWindow cpk-sidebar-view", !isSidebarOpen && "cpk-sidebar-view-closed"),
 		style: {
 			"--sidebar-width": widthToCss(sidebarWidth),
 			paddingTop: "env(safe-area-inset-top)",
@@ -13283,9 +13277,9 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, position = "r
 		"aria-label": configuration?.labels.sidebarLabel ?? require_MarkdownSurfaces.CopilotChatDefaultLabels.sidebarLabel,
 		role: "complementary",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden",
+			className: "cpk-sidebar-view-panel",
 			children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex-1 cpk:overflow-hidden",
+				className: "cpk-sidebar-view-chat",
 				"data-sidebar-chat": true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatView_default, { ...props })
 			})]
@@ -13308,17 +13302,17 @@ CopilotSidebarView.displayName = "CopilotSidebarView";
 			})
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+			className: require_MarkdownSurfaces.cn("cpk-sidebar-view-welcome-screen", className),
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
+				className: "cpk-sidebar-view-welcome-screen-message",
 				children: BoundWelcomeMessage
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:px-8 cpk:pb-4",
+				className: "cpk-sidebar-view-welcome-screen-footer",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "cpk:max-w-3xl cpk:mx-auto",
+					className: "cpk-sidebar-view-welcome-screen-content",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "cpk:mb-4 cpk:flex cpk:justify-center",
+						className: "cpk-sidebar-view-welcome-screen-suggestions",
 						children: suggestionView
 					}), input]
 				})
@@ -13432,10 +13426,9 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 		paddingLeft: "env(safe-area-inset-left)",
 		paddingRight: "env(safe-area-inset-right)"
 	}), [resolvedHeight, resolvedWidth]);
-	const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [toggleButtonElement, isRendered ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
-		className: cn("cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch cpk:bg-transparent", "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"),
+		className: "cpk-popup-view",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			ref: containerRef,
 			tabIndex: -1,
@@ -13443,14 +13436,14 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 			"aria-label": labels.modalHeaderTitle,
 			"data-testid": "copilot-popup",
 			"data-copilot-popup": true,
-			className: cn("copilotKitPopup copilotKitWindow", "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
+			className: require_MarkdownSurfaces.cn("copilotKitPopup copilotKitWindow cpk-popup-view-window", isPopupOpen && !isAnimatingOut && "cpk-popup-view-window-open"),
 			style: popupStyle,
 			children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex-1 cpk:overflow-hidden",
+				className: "cpk-popup-view-chat",
 				"data-popup-chat": true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatView_default, {
 					...restProps,
-					className: cn("cpk:h-full cpk:min-h-0", className)
+					className: require_MarkdownSurfaces.cn("cpk-popup-view-chat-view", className)
 				})
 			})]
 		})
@@ -13472,13 +13465,13 @@ CopilotPopupView.displayName = "CopilotPopupView";
 			})
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+			className: require_MarkdownSurfaces.cn("cpk-popup-view-welcome-screen", className),
 			...props,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
+				className: "cpk-popup-view-welcome-screen-message",
 				children: BoundWelcomeMessage
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4",
+				className: "cpk-popup-view-welcome-screen-suggestions",
 				children: suggestionView
 			}), input] })]
 		});
@@ -14145,6 +14138,7 @@ Object.defineProperty(exports, 'CopilotKitHeaderResolutionError', {
 });
 exports.CopilotKitInspector = CopilotKitInspector;
 exports.CopilotKitProvider = CopilotKitProvider;
+exports.CopilotKitStyles = CopilotKitStyles;
 Object.defineProperty(exports, 'CopilotModalHeader', {
   enumerable: true,
   get: function () {