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

package/dist/index.umd.js

@@ -1,10 +1,10 @@
 "use client";
 
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('react/jsx-runtime'), require('@copilotkit/markdown-renderer/react'), require('@copilotkit/markdown-renderer'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('@ag-ui/core'), require('zod'), require('@copilotkit/mcp-apps-renderer/activity'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('@a2ui/web_core/v0_9'), require('@radix-ui/react-popover'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom'), require('@copilotkit/web-components/threads-drawer')) :
-  typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'react/jsx-runtime', '@copilotkit/markdown-renderer/react', '@copilotkit/markdown-renderer', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', '@ag-ui/core', 'zod', '@copilotkit/mcp-apps-renderer/activity', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', '@a2ui/web_core/v0_9', '@radix-ui/react-popover', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom', '@copilotkit/web-components/threads-drawer'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.src_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.ReactJsxRuntime,global.CopilotKitMarkdownRendererReact,global.CopilotKitMarkdownRenderer,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.AgUICore,global.Zod,global.CopilotKitMcpAppsRendererActivity,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global._a2ui_web_core_v0_9,global._radix_ui_react_popover,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom,global._copilotkit_web_components_threads_drawer));
-})(this, function(exports, src_index_css, _copilotkit_core, _ag_ui_client, react, react_jsx_runtime, _copilotkit_markdown_renderer_react, _copilotkit_markdown_renderer, tailwind_merge, lucide_react, _copilotkit_shared, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, _ag_ui_core, zod, _copilotkit_mcp_apps_renderer_activity, _copilotkit_a2ui_renderer, zod_to_json_schema, _a2ui_web_core_v0_9, _radix_ui_react_popover, react_dom, _tanstack_react_virtual, use_stick_to_bottom, _copilotkit_web_components_threads_drawer) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('react/jsx-runtime'), require('@copilotkit/markdown-renderer/react'), require('@copilotkit/markdown-renderer'), require('lucide-react'), require('@copilotkit/shared'), require('@radix-ui/react-slot'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('@ag-ui/core'), require('zod'), require('@copilotkit/mcp-apps-renderer/activity'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('@a2ui/web_core/v0_9'), require('@copilotkit/core/styles'), require('@radix-ui/react-popover'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom'), require('@copilotkit/web-components/threads-drawer')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@copilotkit/core', '@ag-ui/client', 'react', 'react/jsx-runtime', '@copilotkit/markdown-renderer/react', '@copilotkit/markdown-renderer', 'lucide-react', '@copilotkit/shared', '@radix-ui/react-slot', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', '@ag-ui/core', 'zod', '@copilotkit/mcp-apps-renderer/activity', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', '@a2ui/web_core/v0_9', '@copilotkit/core/styles', '@radix-ui/react-popover', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom', '@copilotkit/web-components/threads-drawer'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCore = {}), global.CopilotKitCore,global.AgUIClient,global.React,global.ReactJsxRuntime,global.CopilotKitMarkdownRendererReact,global.CopilotKitMarkdownRenderer,global.lucideReact,global.CopilotKitShared,global.RadixReactSlot,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.AgUICore,global.Zod,global.CopilotKitMcpAppsRendererActivity,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global._a2ui_web_core_v0_9,global._copilotkit_core_styles,global._radix_ui_react_popover,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom,global._copilotkit_web_components_threads_drawer));
+})(this, function(exports, _copilotkit_core, _ag_ui_client, react, react_jsx_runtime, _copilotkit_markdown_renderer_react, _copilotkit_markdown_renderer, lucide_react, _copilotkit_shared, _radix_ui_react_slot, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, _ag_ui_core, zod, _copilotkit_mcp_apps_renderer_activity, _copilotkit_a2ui_renderer, zod_to_json_schema, _a2ui_web_core_v0_9, _copilotkit_core_styles, _radix_ui_react_popover, react_dom, _tanstack_react_virtual, use_stick_to_bottom, _copilotkit_web_components_threads_drawer) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
 	var __create = Object.create;
@@ -72,7 +72,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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);
@@ -90,7 +90,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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;
@@ -110,7 +110,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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
@@ -129,7 +129,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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)) })] })
 				});
 			}
@@ -145,7 +145,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 //#endregion
 //#region src/components/chat/StreamingMarkdownDefaultRenderer.tsx
 	const defaultNodeRenderers = (0, _copilotkit_markdown_renderer_react.createStreamingMarkdownNodeRenderers)({ codeBlock: ({ node }) => /* @__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-code-info": node.info ?? void 0,
 			children: node.text
@@ -653,83 +653,63 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#endregion
 //#region src/lib/utils.ts
-	const twMerge$12 = (0, tailwind_merge.extendTailwindMerge)({ prefix: "cpk" });
+/**
+	* Joins class names, skipping falsy values. Takes the same inputs as `clsx`.
+	* Classes are not merged: every rule CopilotKit ships sits in `:where()`, so a
+	* class the app adds wins without removing ours.
+	*/
 	function cn(...inputs) {
-		return twMerge$12((0, clsx.clsx)(inputs));
+		const out = [];
+		for (const input of inputs) {
+			if (!input) continue;
+			if (typeof input === "string" || typeof input === "number" || typeof input === "bigint") out.push(String(input));
+			else if (Array.isArray(input)) {
+				const nested = cn(...input);
+				if (nested) out.push(nested);
+			} else if (typeof input === "object") {
+				for (const key in input) if (input[key]) out.push(key);
+			}
+		}
+		return out.join(" ");
 	}
 
 //#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 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
 		});
 	});
@@ -761,9 +741,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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: 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" })]
 		}) });
 	}
 
@@ -787,7 +767,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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: cn("cpk-dropdown-menu-content", className),
 			...props
 		}) });
 	}
@@ -796,7 +776,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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: cn("cpk-dropdown-menu-item", className),
 			...props
 		});
 	}
@@ -804,14 +784,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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: cn("cpk-dropdown-menu-separator", className),
 			...props
 		});
 	}
@@ -825,15 +805,15 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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: cn("cpk-dropdown-menu-sub-content", className),
 			...props
 		});
 	}
@@ -1028,11 +1008,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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"
 			})
 		});
 	});
@@ -1056,7 +1036,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			const existingClassName = props.className;
 			return react.default.createElement(DefaultComponent, {
 				...props,
-				className: (0, tailwind_merge.twMerge)(existingClassName, slot)
+				className: cn(existingClassName, slot)
 			});
 		}
 		if (isReactComponentType(slot)) return react.default.createElement(slot, props);
@@ -1314,7 +1294,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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;
@@ -1332,7 +1312,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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 = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, { onClick: onStartTranscribe });
 		const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, { onClick: onCancelTranscribe });
@@ -1547,10 +1527,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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;
@@ -1560,7 +1540,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					"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();
@@ -1572,29 +1552,29 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}) : 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] })
 					})
 				]
@@ -1634,7 +1614,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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",
@@ -1642,7 +1622,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			},
 			...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]
 		});
@@ -1651,16 +1631,16 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		_CopilotChatInput.SendButton = ({ className, children, ...props }) => {
 			const labels = useCopilotChatConfiguration()?.labels ?? 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: 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" })
 				})
 			});
 		};
@@ -1672,7 +1652,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					type: "button",
 					variant: "chatInputToolbarSecondary",
 					size: "chatInputToolbarIcon",
-					className: (0, tailwind_merge.twMerge)(defaultClassName, className),
+					className: cn(defaultClassName, className),
 					"aria-label": labels[labelKey],
 					...props,
 					children: icon
@@ -1684,23 +1664,23 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		};
 		_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 }) => {
@@ -1742,11 +1722,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"data-testid": "copilot-add-menu-button",
 				variant: "chatInputToolbarSecondary",
 				size: "chatInputToolbarIcon",
-				className: (0, tailwind_merge.twMerge)("cpk:ml-1", className),
+				className: 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, {
@@ -1758,9 +1738,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			}), /* @__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: "/"
 					})]
 				})
@@ -1781,7 +1761,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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: cn("cpk-chat-input-textarea", className),
 				style: {
 					overflow: "auto",
 					resize: "none",
@@ -1795,7 +1775,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		_CopilotChatInput.Disclaimer = ({ className, ...props }) => {
 			const labels = useCopilotChatConfiguration()?.labels ?? 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: cn("cpk-chat-input-disclaimer", className),
 				...props,
 				children: labels.chatDisclaimerText
 			});
@@ -1963,7 +1943,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#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
@@ -1990,7 +1970,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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);
@@ -2814,14 +2794,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	/** 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, {
@@ -3080,12 +3060,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	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)
 			})]
@@ -3316,7 +3296,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				}, [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,
@@ -3387,7 +3367,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*/
 	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,
@@ -3416,12 +3396,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	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"
 		});
 	}
 	/**
@@ -7966,10 +7946,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	function DefaultGenerativeUIChatCard({ surfaceId, isStreaming, error, children }) {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-generative-ui-chat-surface": surfaceId,
-			className: "cpk:my-2 cpk:w-full cpk:rounded-xl cpk:border cpk:border-gray-200 cpk:p-3",
+			className: "cpk-generative-ui-chat-card",
 			children: [children, error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "alert",
-				className: "cpk:mt-2 cpk:text-xs cpk:text-red-600",
+				className: "cpk-generative-ui-chat-card-error",
 				children: "Part of this UI couldn't be shown."
 			})]
 		});
@@ -8049,6 +8029,43 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		return null;
 	}
 
+//#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) => {
@@ -8095,7 +8112,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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);
@@ -8574,41 +8591,47 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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)(CopilotKitContext.Provider, {
-				value: contextValue,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
-					value: licenseContextValue,
-					children: [
-						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
-						generativeUIActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GenerativeUIToolCallRenderer, {}),
-						a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
-							catalog: filteredCatalog,
-							includeSchema: a2ui?.includeSchema
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownRendererProvider, {
-							renderer: markdownRenderer,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitInspectorContextProvider, {
-								value: inspectorContextValue,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitAgentIdContext.Provider, {
-									value: agentId,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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)(CopilotKitContext.Provider, {
+					value: contextValue,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LicenseContext.Provider, {
+						value: licenseContextValue,
+						children: [
+							a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UIBuiltInToolCallRenderer, {}),
+							generativeUIActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GenerativeUIToolCallRenderer, {}),
+							a2uiActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(A2UICatalogContext, {
+								catalog: filteredCatalog,
+								includeSchema: a2ui?.includeSchema
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownRendererProvider, {
+								renderer: markdownRenderer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitInspectorContextProvider, {
+									value: inspectorContextValue,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitAgentIdContext.Provider, {
+										value: agentId,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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" })
+						]
+					})
 				})
 			})
 		});
@@ -9107,10 +9130,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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
 			})
 		});
@@ -9124,20 +9147,20 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}[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: 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: 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"]
 		});
 	}
@@ -9160,10 +9183,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	}
 	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)
 		})] });
 	}
@@ -9173,7 +9196,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*/
 	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: cn("cpk-tool-call-payloads", className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Payload, {
 				label: "Arguments",
 				value: parameters ?? {}
@@ -9192,36 +9215,35 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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: 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, {
@@ -9230,7 +9252,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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"
 				})
 			})]
 		});
@@ -9272,16 +9294,16 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			...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: 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",
@@ -9293,20 +9315,20 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				...groupProps,
-				className: (0, tailwind_merge.twMerge)("cpk:my-3", className),
+				className: 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 })
@@ -9315,7 +9337,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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")
 					})
 				})]
@@ -9323,22 +9345,22 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}
 		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: 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: cn(layer, "cpk-tool-call-group-stack-behind"),
 							style: {
 								transform: `translateY(${(index + 1) * 6}px) scaleX(${1 - (index + 1) * .045})`,
 								zIndex: -1 - index,
@@ -9350,58 +9372,58 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 							"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: 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: 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",
@@ -9409,7 +9431,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 							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: cn(layer, "cpk-tool-call-group-stack-item"),
 							style: { animationDelay: `${index * 30}ms` },
 							children: renderCall(call)
 						}, call.toolCall.id))
@@ -9419,26 +9441,26 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}
 		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: 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 })]
 					})
@@ -9574,8 +9596,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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,
@@ -9583,20 +9604,20 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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: cn("cpk-default-tool-call-chevron", isExpanded && "cpk-default-tool-call-chevron-open"),
 								fill: "none",
 								viewBox: "0 0 24 24",
 								strokeWidth: 2,
@@ -9607,31 +9628,31 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 									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)
 					})] })]
 				})]
@@ -11474,9 +11495,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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",
@@ -11521,7 +11542,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 			...props,
 			"aria-hidden": "true",
-			className: (0, tailwind_merge.twMerge)("cpk:size-4", className),
+			className: cn("cpk-inspector-button-kite-icon", className),
 			viewBox: "4.57 3.36 17.8 17.8",
 			fill: "none",
 			children: [
@@ -11669,7 +11690,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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: cn("cpk-inspector-button", className),
 					onPointerEnter: (event) => {
 						onPointerEnter?.(event);
 						if (!disabled && event.pointerType !== "touch") {
@@ -11699,7 +11720,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					},
 					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"
 					})
 				})
@@ -11707,7 +11728,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				align: "start",
 				side: "top",
 				sideOffset: 6,
-				className: (0, tailwind_merge.twMerge)("cpk:w-64 cpk:p-1 cpk:text-sm", dark && "dark"),
+				className: cn("cpk-inspector-button-menu", dark && "dark"),
 				onPointerEnter: cancelClose,
 				onPointerLeave: scheduleClose,
 				onKeyDown: () => {
@@ -11722,9 +11743,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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,
@@ -11732,13 +11753,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 								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: cn("cpk-inspector-button-local-tooltip", dark && "dark"),
 								onPointerEnter: cancelClose,
 								onPointerLeave: scheduleClose,
 								children: labels.assistantMessageToolbarInspectorLocalOnlyDescription
@@ -11751,27 +11772,27 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 						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
 						})] })]
 					})
@@ -11838,10 +11859,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-generative-ui-chat-surface": surfaceId,
 			"data-a2ui-markdown-surface": surfaceId,
-			className: "cpk:relative cpk:my-4 cpk:flex cpk:w-full cpk:min-w-0 cpk:max-w-full cpk:flex-col",
+			className: "cpk-markdown-chat-surface",
 			children: [children, error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				role: "alert",
-				className: "cpk:mt-2 cpk:text-xs cpk:text-red-600",
+				className: "cpk-markdown-chat-surface-error",
 				children: "Part of this UI couldn't be shown."
 			})]
 		});
@@ -11952,7 +11973,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		"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: cn("cpk-popover", className),
 		...props
 	}) }));
 	PopoverContent.displayName = "PopoverContent";
@@ -12247,9 +12268,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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
 			})
@@ -12355,7 +12376,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				},
 				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: renderSlot(feedbackComment, CopilotChatAssistantMessage.FeedbackComment, {
 					value: comment.draft,
 					savedComment,
@@ -12482,7 +12503,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud ? () => onReadAloud(message) : void 0 });
 		const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate ? () => onRegenerate(message) : void 0 });
 		const boundToolbar = 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,
@@ -12547,14 +12568,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			ref: root,
 			"data-copilotkit": true,
 			"data-testid": "copilot-assistant-message",
-			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitAssistantMessage", className),
+			className: 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
 					})
 				}),
@@ -12582,7 +12603,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		};
 		_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: cn("cpk-assistant-message-toolbar", className),
 			...props
 		});
 		const ToolbarButton = _CopilotChatAssistantMessage.ToolbarButton = ({ title, tooltip, tooltipClassName, children, ...props }) => {
@@ -12635,7 +12656,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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;
@@ -12646,7 +12667,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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"
 				})
 			});
@@ -12658,7 +12679,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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"
 				})
 			});
@@ -12668,7 +12689,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: cn("cpk-assistant-message-feedback-comment", className),
 				onSubmit: (event) => {
 					event.preventDefault();
 					onSubmit();
@@ -12688,13 +12709,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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" })
 				})]
 			});
 		};
@@ -12704,7 +12725,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"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 }) => {
@@ -12713,7 +12734,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"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 = {}));
@@ -12746,13 +12767,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		}, [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
@@ -12810,14 +12831,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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: cn("cpk-attachment-renderer cpk-attachment-renderer-image", className),
 			onClick: openLightbox,
 			onError: () => setError(true)
 		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Lightbox, {
@@ -12826,20 +12847,20 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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: 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
 			})]
 		});
@@ -12849,7 +12870,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			src,
 			controls: true,
 			preload: "metadata",
-			className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
+			className: cn("cpk-attachment-renderer cpk-attachment-renderer-video", className)
 		});
 	});
 	const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ src, source, filename, className }) {
@@ -12860,12 +12881,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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"
 			})]
 		});
@@ -12930,7 +12951,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		});
 		const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
 		const BoundToolbar = 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,
@@ -12956,12 +12977,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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,
@@ -12975,17 +12996,17 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	}
 	(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: 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: 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: cn("cpk-user-message-toolbar", className),
 			...props
 		});
 		const ToolbarButton = _CopilotChatUserMessage.ToolbarButton = ({ title, children, className, ...props }) => {
@@ -12995,7 +13016,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					type: "button",
 					variant: "assistantMessageToolbarButton",
 					"aria-label": title,
-					className: (0, tailwind_merge.twMerge)(className),
+					className,
 					...props,
 					children
 				})
@@ -13021,7 +13042,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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 }) => {
@@ -13031,7 +13052,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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 }) => {
@@ -13041,7 +13062,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: cn("cpk-user-message-branch-navigation", className),
 				...props,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
@@ -13053,12 +13074,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 							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,
 							"/",
@@ -13074,9 +13095,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 							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" })
 					})
 				]
 			});
@@ -13172,7 +13193,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			})
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, tailwind_merge.twMerge)("cpk:my-1", className),
+			className: cn("cpk-reasoning-message", className),
 			"data-message-id": message.id,
 			...props,
 			children: [boundHeader, boundToggle]
@@ -13183,47 +13204,47 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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: 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: 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)(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: 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
 				})
 			});
@@ -13236,8 +13257,6 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#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", {
@@ -13245,22 +13264,22 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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
 			})]
 		});
@@ -13274,7 +13293,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: cn("cpk-suggestion-view", className),
 			...props
 		});
 	});
@@ -13404,30 +13423,30 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"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: 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: cn("cpk-work-summary-chevron", isOpen && "cpk-work-summary-chevron-open")
 			})]
 		});
 	}
@@ -13444,7 +13463,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	* 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.
@@ -13458,7 +13477,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*     — 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.
 	*
@@ -13469,7 +13488,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	*/
 	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: cn("cpk-intelligence-indicator", className),
 			role: "status",
 			"aria-live": "polite",
 			"data-testid": `cpk-intelligence-indicator-${message.id}`,
@@ -14041,7 +14060,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: renderSlot(workSummary, CopilotChatWorkSummary, {
 						isWorking: working,
 						isOpen: open,
@@ -14412,7 +14431,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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: cn("copilotKitMessages cpk-message-view", className),
 					...props,
 					children: [
 						shouldVirtualize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -14440,7 +14459,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 						interruptElement,
 						pendingWorkSummary && renderWorkSummary(latestTurnKey, []),
 						showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "cpk:mt-2",
+							className: "cpk-message-view-cursor-container",
 							children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
 						})
 					]
@@ -14451,7 +14470,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	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: cn("cpk-message-view-cursor", className),
 			...props
 		});
 	};
@@ -14467,17 +14486,16 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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: 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: "✕"
 						})
@@ -14488,12 +14506,12 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	};
 	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 });
@@ -14508,7 +14526,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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,
@@ -14516,20 +14534,20 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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
 			})]
 		});
@@ -14546,25 +14564,25 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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, {
@@ -14574,7 +14592,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					src,
 					controls: true,
 					autoPlay: true,
-					className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
+					className: "cpk-attachment-queue-lightbox-video"
 				})
 			})
 		] });
@@ -14625,7 +14643,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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)) {
@@ -14638,40 +14656,40 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			})() : 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"
 				})
 			]
@@ -14683,18 +14701,18 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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)
 				})]
 			})]
@@ -14830,11 +14848,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	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"
 				})]
 			})
@@ -14913,7 +14931,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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 = renderSlot(scrollView, CopilotChatView.ScrollView, {
 			autoScroll,
@@ -14924,9 +14942,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"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]
 				})
@@ -14951,11 +14969,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			});
 			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 = renderSlot(welcomeScreenSlot, CopilotChatView.WelcomeScreen, {
@@ -14969,7 +14987,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				onDragOver,
 				onDragLeave,
 				onDrop,
-				className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+				className: cn("copilotKitChat cpk-chat-view", className),
 				...props,
 				children: [dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}), BoundWelcomeScreen]
 			});
@@ -14991,7 +15009,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			onDragOver,
 			onDragLeave,
 			onDrop,
-			className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("copilotKitChat cpk-chat-view", className),
 			...props,
 			children: [
 				dragOver && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropOverlay, {}),
@@ -14999,13 +15017,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				/* @__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]
 				})
@@ -15116,19 +15134,19 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => startBottomPin() })
 						})
@@ -15148,15 +15166,15 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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,
@@ -15170,7 +15188,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 						}),
 						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: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 						})
@@ -15216,9 +15234,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				};
 			}, [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
 				})
 			});
@@ -15228,17 +15246,17 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 					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: 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: renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, { onClick: () => scrollToBottom() })
 							})
@@ -15262,7 +15280,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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: cn("cpk-chat-view-scroll-view", className),
 				resize: "smooth",
 				initial: "smooth",
 				...props,
@@ -15282,10 +15300,10 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"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: 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", {
@@ -15295,7 +15313,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		_CopilotChatView.WelcomeMessage = ({ className, ...props }) => {
 			const labels = useCopilotChatConfiguration()?.labels ?? 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: cn("cpk-chat-view-welcome-message", className),
 				...props,
 				children: labels.welcomeMessageText
 			});
@@ -15315,21 +15333,21 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			});
 			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: 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
 						})
 					]
@@ -16207,6 +16225,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				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,
@@ -16251,22 +16270,22 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 
 //#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 = useCopilotChatConfiguration();
@@ -16281,19 +16300,19 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			setModalOpen(!isOpen);
 		};
 		const renderedOpenIcon = renderSlot(openIcon, DefaultOpenIcon, {
-			className: "cpk:h-6 cpk:w-6",
+			className: ICON_CLASS,
 			"aria-hidden": true,
 			focusable: false
 		});
 		const renderedCloseIcon = 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,
@@ -16304,7 +16323,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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,
@@ -16319,7 +16338,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"data-testid": "copilot-chat-toggle",
 			"data-slot": "chat-toggle-button",
 			"data-state": isOpen ? "open" : "closed",
-			className: cn(BUTTON_BASE_CLASSES, className),
+			className: cn("copilotKitButton cpk-chat-toggle-button", className),
 			"aria-label": isOpen ? labels.chatToggleCloseLabel : labels.chatToggleOpenLabel,
 			"aria-pressed": isOpen,
 			disabled,
@@ -16413,21 +16432,21 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 		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: 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
 					})
 				]
@@ -16438,7 +16457,7 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 	(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: cn("cpk-modal-header-title", className),
 			...props,
 			children
 		});
@@ -16447,11 +16466,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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"
 				})
 			});
@@ -16461,11 +16480,11 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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: 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"
 				})
 			});
@@ -16556,13 +16575,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			position
 		]);
 		const headerElement = renderSlot(header, CopilotModalHeader, {});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [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: [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: cn("copilotKitSidebar copilotKitWindow cpk-sidebar-view", !isSidebarOpen && "cpk-sidebar-view-closed"),
 			style: {
 				"--sidebar-width": widthToCss(sidebarWidth),
 				paddingTop: "env(safe-area-inset-top)",
@@ -16572,9 +16591,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			"aria-label": configuration?.labels.sidebarLabel ?? 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 })
 				})]
@@ -16597,17 +16616,17 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				})
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+				className: 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]
 					})
@@ -16721,10 +16740,9 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 			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,
@@ -16732,14 +16750,14 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				"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: 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: cn("cpk-popup-view-chat-view", className)
 					})
 				})]
 			})
@@ -16761,13 +16779,13 @@ _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
 				})
 			});
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+				className: 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] })]
 			});
@@ -17434,6 +17452,7 @@ Object.defineProperty(exports, 'CopilotKitHeaderResolutionError', {
 });
 exports.CopilotKitInspector = CopilotKitInspector;
 exports.CopilotKitProvider = CopilotKitProvider;
+exports.CopilotKitStyles = CopilotKitStyles;
 Object.defineProperty(exports, 'CopilotModalHeader', {
   enumerable: true,
   get: function () {