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

package/dist/index.mjs

@@ -1,20 +1,16 @@
 "use client";
 
-import { A as GenerativeUIError, B as renderSlot, C as issueKey, D as getMarkdownSurfaceSource, E as containsDynamicValue, F as toJsonSchema, G as useShallowStableRef, H as CopilotChatConfigurationProvider, I as defineToolCallRenderer, K as StreamingMarkdownDefaultRenderer, L as MarkdownRendererProvider, M as catalogIdsOf, N as componentCatalogIds, O as BASIC_FUNCTIONS, R as useMarkdownRenderer, S as isAsyncIssue, T as withoutRejectedNulls, U as CopilotChatDefaultLabels, V as ControlledModalOpenScope, W as useCopilotChatConfiguration, a as GenerativeUIToolCallRenderer, i as GenerativeUIChatSlotContext, j as isRecord, k as ExpressionError, o as createGenerativeUIActivityRenderer, s as createGenerativeUIFunctionCallActivityRenderer, t as MarkdownSurfaces, v as GenerativeUIRuntimeContext, w as validateSchemaSync, x as formatIssues, y as useGenerativeUIRuntime, z as isReactComponentType } from "./MarkdownSurfaces-ChSlVYOk.mjs";
-import "./index.css";
+import { A as GenerativeUIError, B as renderSlot, C as issueKey, D as getMarkdownSurfaceSource, E as containsDynamicValue, F as toJsonSchema, G as useCopilotChatConfiguration, H as ControlledModalOpenScope, I as defineToolCallRenderer, K as useShallowStableRef, L as MarkdownRendererProvider, M as catalogIdsOf, N as componentCatalogIds, O as BASIC_FUNCTIONS, R as useMarkdownRenderer, S as isAsyncIssue, T as withoutRejectedNulls, U as CopilotChatConfigurationProvider, V as cn, W as CopilotChatDefaultLabels, a as GenerativeUIToolCallRenderer, i as GenerativeUIChatSlotContext, j as isRecord, k as ExpressionError, o as createGenerativeUIActivityRenderer, q as StreamingMarkdownDefaultRenderer, s as createGenerativeUIFunctionCallActivityRenderer, t as MarkdownSurfaces, v as GenerativeUIRuntimeContext, w as validateSchemaSync, x as formatIssues, y as useGenerativeUIRuntime, z as isReactComponentType } from "./MarkdownSurfaces-Bd--93O1.mjs";
 import { A2UI_FENCE_LANGUAGE, AgentRegistry, AgentThreadLockedError, ContextStore, CopilotKitCore, CopilotKitCore as CopilotKitCore$1, CopilotKitCoreErrorCode, CopilotKitCoreErrorCode as CopilotKitCoreErrorCode$1, CopilotKitCoreRuntimeConnectionStatus, CopilotKitCoreRuntimeConnectionStatus as CopilotKitCoreRuntimeConnectionStatus$1, CopilotKitHeaderResolutionError, INSPECTOR_THREAD_BRIDGE_PLUGIN_ID, IntelligenceAgent, MEMORY_ERROR_REGISTRY, MemoryError, ProxiedCopilotRuntimeAgent, ProxiedCopilotRuntimeAgent as ProxiedCopilotRuntimeAgent$1, RunHandler, StateManager, SuggestionEngine, ToolCallStatus, ToolCallStatus as ToolCallStatus$1, WebMCPRegistry, classifySurfaceCards, completePartialMarkdown, createActionGroup, createEffect, createInspectorThreadRequestId, createReducer, createSelector, createStore, emitInspectorActiveThread, emitInspectorActiveThread as emitInspectorActiveThread$1, emitInspectorStopViewing, emitInspectorViewThread, emitInspectorViewThreadResult, emitInspectorViewThreadResult as emitInspectorViewThreadResult$1, empty, ensureObjectArgs, extractCompleteArrayItems, extractFenceOperations, extractStringField, flattenInformationalCards, getMarkdownOperationSurfaceId, getWebMCPModelContext, isAbortError, isInspectorThreadBridgeEnabled, isInspectorThreadBridgeEnabled as isInspectorThreadBridgeEnabled$1, isRunCompletionAware, isRunCompletionAware as isRunCompletionAware$1, ofType, on, onInspectorActiveThread, onInspectorStopViewing, onInspectorStopViewing as onInspectorStopViewing$1, onInspectorViewThread, onInspectorViewThread as onInspectorViewThread$1, onInspectorViewThreadResult, parseMarkdown, parseMarkdown as parseMarkdown$1, parseToolArguments, prepareSurfaceOperations, props, segmentSurfaceProse, select, splitA2UIMarkdown, ɵCOPILOTKIT_FEATURES, ɵInterruptState, ɵInterruptState as ɵInterruptState$1, ɵMAX_SOCKET_RETRIES, ɵRUNTIME_PROBE_TIMEOUT_MS, ɵTHREAD_REQUEST_TIMEOUT_MS, ɵclearAgentInterruptState, ɵclearAgentInterruptState as ɵclearAgentInterruptState$1, ɵcreateMemoryStore, ɵcreateThreadSelectors, ɵcreateThreadStore, ɵcreateThreadStore as ɵcreateThreadStore$1, ɵgetAgentInterruptState, ɵgetAgentInterruptState as ɵgetAgentInterruptState$1, ɵisCopilotKitFeature, ɵisHttpAgent, ɵisHttpAgent as ɵisHttpAgent$1, ɵisRetryableMemoryStatus, ɵjoinPhoenixChannel$, ɵmapMemoryMetadataEvent, ɵmemoryAdapterEvents, ɵmemoryDomainEvents, ɵmemoryReducer, ɵmemoryRestEvents, ɵobservePhoenixEvent$, ɵobservePhoenixJoinOutcome$, ɵobservePhoenixSocketHealth$, ɵobservePhoenixSocketSignals$, ɵphoenixChannel$, ɵphoenixSocket$, ɵselectFetchMoreError, ɵselectFetchMoreError as ɵselectFetchMoreError$1, ɵselectHasNextPage, ɵselectHasNextPage as ɵselectHasNextPage$1, ɵselectIsFetchingNextPage, ɵselectIsFetchingNextPage as ɵselectIsFetchingNextPage$1, ɵselectIsMutating, ɵselectIsMutating as ɵselectIsMutating$1, ɵselectMemories, ɵselectMemories as ɵselectMemories$1, ɵselectMemoriesAvailable, ɵselectMemoriesAvailable as ɵselectMemoriesAvailable$1, ɵselectMemoriesError, ɵselectMemoriesError as ɵselectMemoriesError$1, ɵselectMemoriesIsLoading, ɵselectMemoriesIsLoading as ɵselectMemoriesIsLoading$1, ɵselectMemoriesIsMutating, ɵselectMemoriesRealtimeStatus, ɵselectMemoriesRealtimeStatus as ɵselectMemoriesRealtimeStatus$1, ɵselectThreads, ɵselectThreads as ɵselectThreads$1, ɵselectThreadsError, ɵselectThreadsError as ɵselectThreadsError$1, ɵselectThreadsIsLoading, ɵselectThreadsIsLoading as ɵselectThreadsIsLoading$1, ɵthreadAdapterEvents, ɵwithHeaderDefaults, ɵwithHeaderDefaults as ɵwithHeaderDefaults$1 } from "@copilotkit/core";
 import { ACTIVITY_HISTORY_METADATA, AGUIConnectNotImplementedError, AGUIError, AGUI_METADATA_KEY, AbstractAgent, BackwardCompatibility_0_0_39, BackwardCompatibility_0_0_45, BackwardCompatibility_0_0_57, CompatibilityBoundary, DebugLogger, EventType, FilterToolCallsMiddleware, FunctionMiddleware, HttpAgent, Middleware, PROTOCOL_VERSION, aggregateTokenUsage, authoritativeActivityTypes, buildResumeArray, compactEvents, contentHasMedia, contentToText, convertToLegacyEvents, createDebugLogger, defaultApplyEvents, enforceEvents, enforceOutgoingInput, getRunOutcome, isInterruptExpired, isRecognizedEvent, mergeMetadata, omitOptionalNulls, parseProtoStream, parseSSEStream, randomUUID, randomUUID as randomUUID$1, resolveAgentDebugConfig, resolveDebugLogger, runHttpRequest, structuredClone_, tokenUsageFromAiSdkUsage, tokenUsageFromLangChainMetadata, transformChunks, transformHttpEventStream, verifyEvents, withAuthoritativeActivityTypes } from "@ag-ui/client";
 import { ActivityDeltaEventSchema, ActivityMessageSchema, ActivitySnapshotEventSchema, AddOperationSchema, AgentCapabilitiesSchema, AssistantMessageSchema, AttributableSchema, AudioInputContentSchema, AudioInputPartSchema, AudioPartSchema, BaseEventSchema, BaseMessageSchema, ContentPartSchema, ContextSchema, CopyOperationSchema, CustomEventSchema, DataSourceSchema, DeveloperMessageSchema, DocumentInputContentSchema, DocumentInputPartSchema, DocumentPartSchema, EventSchema, EventSchemas, EventTypeSchema, ExecutionCapabilitiesSchema, FileSourceSchema, FunctionCallSchema, HumanInTheLoopCapabilitiesSchema, IdentityCapabilitiesSchema, ImageInputContentSchema, ImageInputPartSchema, ImagePartSchema, InputContentDataSourceSchema, InputContentSchema, InputContentSourceSchema, InputContentUrlSourceSchema, InterruptSchema, JsonPatchOperationSchema, JsonPatchSchema, JsonPointerSchema, MessageSchema, MessagesSnapshotEventSchema, MetadataSchema, MoveOperationSchema, MultiAgentCapabilitiesSchema, MultimodalCapabilitiesSchema, MultimodalInputCapabilitiesSchema, MultimodalOutputCapabilitiesSchema, OptionalMetadataSchema, OutputCapabilitiesSchema, PartSourceSchema, RawEventSchema, ReasoningCapabilitiesSchema, ReasoningEncryptedValueEventSchema, ReasoningEncryptedValueSubtypeSchema, ReasoningEndEventSchema, ReasoningMessageChunkEventSchema, ReasoningMessageContentEventSchema, ReasoningMessageEndEventSchema, ReasoningMessageSchema, ReasoningMessageStartEventSchema, ReasoningStartEventSchema, RemoveOperationSchema, ReplaceOperationSchema, ResumeEntrySchema, RoleSchema, RunAgentInputSchema, RunErrorEventSchema, RunFinishedCancelledOutcomeSchema, RunFinishedEventSchema, RunFinishedInterruptOutcomeSchema, RunFinishedOutcomeSchema, RunFinishedSuccessOutcomeSchema, RunStartedEventSchema, StateCapabilitiesSchema, StateDeltaEventSchema, StateSchema, StateSnapshotEventSchema, StepFinishedEventSchema, StepStartedEventSchema, SubagentErrorEventSchema, SubagentFinishedEventSchema, SubagentFinishedOutcomeSchema, SubagentFinishedSuccessOutcomeSchema, SubagentFinishedSuspendedOutcomeSchema, SubagentInfoSchema, SubagentRunIdSchema, SubagentStartedEventSchema, SystemMessageSchema, TestOperationSchema, TextInputContentSchema, TextMessageChunkEventSchema, TextMessageContentEventSchema, TextMessageEndEventSchema, TextMessageRoleSchema, TextMessageStartEventSchema, TextPartSchema, TokenUsageSchema, ToolCallArgsEventSchema, ToolCallChunkEventSchema, ToolCallEndEventSchema, ToolCallResultEventSchema, ToolCallSchema, ToolCallStartEventSchema, ToolMessageSchema, ToolSchema, ToolsCapabilitiesSchema, TransportCapabilitiesSchema, UrlSourceSchema, UserMessageSchema, VideoInputContentSchema, VideoInputPartSchema, VideoPartSchema } from "@ag-ui/core/schemas";
 import * as React$1 from "react";
-import React, { Fragment, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import React, { Fragment, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, version } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { extendTailwindMerge, twMerge } from "tailwind-merge";
 import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, Circle, Copy, Edit, EyeOff, Loader2, MessageCircle, Mic, PanelLeftOpen, Play, Plus, RefreshCw, Square, ThumbsDown, ThumbsUp, Upload, Volume2, Wrench, X } from "lucide-react";
 import { A2UI_COMPONENT_ENVELOPE_KEYS, A2UI_DEFAULT_DESIGN_GUIDELINES, A2UI_DEFAULT_GENERATION_GUIDELINES, A2UI_VERSION, COPILOTKIT_FORWARDED_PROPS_KEY, COPILOTKIT_UI_ENVELOPE_FORMAT, DEFAULT_AGENT_ID, GENERATE_SANDBOXED_UI_DESCRIPTION, GENERATIVE_UI_ACTIVITY_TYPE, GENERATIVE_UI_AGENT_FUNCTION_CALLS, GENERATIVE_UI_AGENT_FUNCTION_CALLS_OFF_REASON, GENERATIVE_UI_CHAT_TARGET, GENERATIVE_UI_FUNCTIONS, GENERATIVE_UI_FUNCTION_CALL_ACTIVITY_TYPE, GENERATIVE_UI_MARKDOWN_GUIDELINES_DESCRIPTION, GENERATIVE_UI_MARKDOWN_SCHEMA_CONTEXT_DESCRIPTION, GENERATIVE_UI_MAX_REJECTION_LENGTH, GENERATIVE_UI_MAX_SUMMARY_REJECTIONS, TranscriptionErrorCode, TranscriptionErrorCode as TranscriptionErrorCode$1, buildGenerativeUIMarkdownGuidelines, buildGenerativeUIPrompt, callerProblem, childRefKind, commitRowKeyStore, copyToClipboard, createAttachmentContent, createLicenseContextValue, createRowKeyStore, envelopeToManifest, exceedsMaxSize, formatFileSize, functionCallers, generateVideoThumbnail, generativeUIGuideFeatures, getDocumentIcon, getModalityFromMimeType, getOperationKind, getOperationSurfaceId, getSourceUrl, matchesAcceptFilter, partialJSONParse, randomUUID as randomUUID$2, readFileAsBase64, resolveRowRenderKeysById, schemaToJsonSchema, shouldEnableInspector, toA2UIActionMessage, validateOperation } from "@copilotkit/shared";
 import { CopilotKitAgentIdContext, CopilotKitContext, LicenseContext, useCopilotKit, useCopilotKit as useCopilotKit$1, useDefaultAgentId, useLicenseContext, useLicenseContext as useLicenseContext$1 } from "@copilotkit/react-core/context";
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { clsx } from "clsx";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { contentToText as contentToText$1 } from "@ag-ui/core";
@@ -23,6 +19,7 @@ import { MCPAppsActivityContentSchema, MCPAppsActivityType, ɵrunMcpFollowUp } f
 import { A2UIProvider, A2UIRenderer, A2UI_SCHEMA_CONTEXT_DESCRIPTION, Catalog, DEFAULT_SURFACE_ID, ROOT_COMPONENT_ID, buildCatalogContextValue, defaultTheme as a2uiDefaultTheme, extractCatalogComponentSchemas, filterCatalog, initializeDefaultCatalog, injectStyles, useA2UIActions, useA2UIError, viewerTheme } from "@copilotkit/a2ui-renderer";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import { Catalog as Catalog$1, ComponentModel, DataModel, SurfaceModel } from "@a2ui/web_core/v0_9";
+import { stylesheet } from "@copilotkit/core/styles";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { createPortal, flushSync } from "react-dom";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -63,7 +60,7 @@ function renderInline(tokens) {
 			case "em": return /* @__PURE__ */ jsx("em", { children: renderInline(token.tokens) }, i);
 			case "del": return /* @__PURE__ */ jsx("del", { children: renderInline(token.tokens) }, i);
 			case "codespan": return /* @__PURE__ */ 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__ */ jsx("br", {}, i);
@@ -81,7 +78,7 @@ function renderInline(tokens) {
 				return /* @__PURE__ */ jsx("img", {
 					src: sanitizeImgSrc(img.href),
 					alt: img.text,
-					className: "cpk:max-w-full"
+					className: "cpk-markdown-image"
 				}, i);
 			}
 			case "escape": return token.text;
@@ -101,7 +98,7 @@ function BlockToken({ token }) {
 		case "code": {
 			const c = token;
 			return /* @__PURE__ */ 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__ */ jsx("code", {
 					"data-language": c.lang || void 0,
 					children: c.text
@@ -120,7 +117,7 @@ function BlockToken({ token }) {
 		case "table": {
 			const tbl = token;
 			return /* @__PURE__ */ jsx("div", {
-				className: "cpk:overflow-x-auto",
+				className: "cpk-markdown-table-container",
 				children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tbl.header.map((cell, i) => /* @__PURE__ */ jsx("th", { children: renderInline(cell.tokens) }, i)) }) }), /* @__PURE__ */ jsx("tbody", { children: tbl.rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => /* @__PURE__ */ jsx("td", { children: renderInline(cell.tokens) }, j)) }, i)) })] })
 			});
 		}
@@ -133,85 +130,43 @@ function BlockToken({ token }) {
 }
 BasicMarkdownRenderer.displayName = "BasicMarkdownRenderer";
 
-//#endregion
-//#region src/lib/utils.ts
-const twMerge$1 = extendTailwindMerge({ prefix: "cpk" });
-function cn(...inputs) {
-	return twMerge$1(clsx(inputs));
-}
-
 //#endregion
 //#region src/components/ui/button.tsx
-const buttonVariants = 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$1.forwardRef(function Button({ className, variant, size, asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
 		ref,
 		"data-slot": "button",
-		className: cn(buttonVariants({
+		className: buttonVariants({
 			variant,
 			size,
 			className
-		})),
+		}),
 		...props
 	});
 });
@@ -243,9 +198,9 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 		"data-copilotkit": true,
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance", className),
+		className: cn("cpk-tooltip", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.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__ */ jsx(TooltipPrimitive.Arrow, { className: "cpk-tooltip-arrow" })]
 	}) });
 }
 
@@ -269,7 +224,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 		"data-copilotkit": true,
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md", className),
+		className: cn("cpk-dropdown-menu-content", className),
 		...props
 	}) });
 }
@@ -278,7 +233,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("cpk-dropdown-menu-item", className),
 		...props
 	});
 }
@@ -286,14 +241,14 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.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__ */ jsx(DropdownMenuPrimitive.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
 	});
 }
@@ -307,15 +262,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.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__ */ jsx(ChevronRightIcon, { className: "cpk:ml-auto cpk:size-4" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cpk-dropdown-menu-sub-trigger-icon" })]
 	});
 }
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.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
 	});
 }
@@ -510,11 +465,11 @@ const CopilotChatAudioRecorder = forwardRef((props, ref) => {
 		cleanup
 	]);
 	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("cpk:w-full cpk:py-3 cpk:px-5", className),
+		className: cn("cpk-audio-recorder", className),
 		...divProps,
 		children: /* @__PURE__ */ jsx("canvas", {
 			ref: canvasRef,
-			className: "cpk:block cpk:w-full cpk:h-[26px]"
+			className: "cpk-audio-recorder-canvas"
 		})
 	});
 });
@@ -735,7 +690,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			isComposingRef.current = false;
 		},
 		autoFocus,
-		className: 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;
@@ -753,7 +708,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		onClick: handleSendButtonClick,
 		disabled: isProcessing ? !canStop : !canSend,
 		"aria-label": showsStop ? labels.chatInputToolbarStopButtonLabel : labels.chatInputToolbarSendButtonLabel,
-		children: showsStop ? /* @__PURE__ */ jsx(Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
+		children: showsStop ? /* @__PURE__ */ jsx(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 });
@@ -968,10 +923,10 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		role: "listbox",
 		"aria-label": labels.chatInputSlashMenuLabel,
 		ref: slashMenuRef,
-		className: "cpk:absolute cpk:bottom-full cpk:left-0 cpk:right-0 cpk:z-30 cpk:mb-2 cpk:max-h-64 cpk:overflow-y-auto cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]",
+		className: "cpk-chat-input-slash-menu",
 		style: { maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px` },
 		children: filteredCommands.length === 0 ? /* @__PURE__ */ 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;
@@ -981,7 +936,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				"aria-selected": isActive,
 				"data-active": isActive ? "true" : void 0,
 				"data-slash-index": index,
-				className: 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();
@@ -993,29 +948,29 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	}) : null;
 	const inputPill = /* @__PURE__ */ jsx("div", {
 		"data-testid": "copilot-chat-input",
-		className: 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__ */ jsxs("div", {
 			ref: gridRef,
-			className: 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__ */ jsx("div", {
 					ref: addButtonContainerRef,
-					className: 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__ */ jsx("div", {
-					className: 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__ */ jsx("div", {
-						className: "cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5",
-						children: /* @__PURE__ */ jsx(Loader2, { className: "cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground" })
+						className: "cpk-chat-input-processing",
+						children: /* @__PURE__ */ jsx(Loader2, { className: "cpk-chat-input-processing-spinner" })
 					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [BoundTextArea, slashMenu] })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					ref: actionsContainerRef,
-					className: 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__ */ jsxs(Fragment$1, { children: [onCancelTranscribe && BoundCancelTranscribeButton, onFinishTranscribe && BoundFinishTranscribeButton] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [onStartTranscribe && BoundStartTranscribeButton, BoundSendButton] })
 				})
 			]
@@ -1055,7 +1010,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	return /* @__PURE__ */ 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",
@@ -1063,7 +1018,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		},
 		...props,
 		children: [/* @__PURE__ */ 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]
 	});
@@ -1072,16 +1027,16 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	_CopilotChatInput.SendButton = ({ className, children, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ jsx("div", {
-			className: "cpk:mr-[10px]",
+			className: "cpk-chat-input-send",
 			children: /* @__PURE__ */ 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__ */ jsx(ArrowUp, { className: "cpk:size-[18px]" })
+				children: children ?? /* @__PURE__ */ jsx(ArrowUp, { className: "cpk-chat-input-send-icon" })
 			})
 		});
 	};
@@ -1093,7 +1048,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				type: "button",
 				variant: "chatInputToolbarSecondary",
 				size: "chatInputToolbarIcon",
-				className: twMerge(defaultClassName, className),
+				className: cn(defaultClassName, className),
 				"aria-label": labels[labelKey],
 				...props,
 				children: icon
@@ -1105,23 +1060,23 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	};
 	_CopilotChatInput.StartTranscribeButton = (props) => /* @__PURE__ */ jsx(ToolbarButton, {
 		"data-testid": "copilot-start-transcribe-button",
-		icon: /* @__PURE__ */ jsx(Mic, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(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__ */ jsx(ToolbarButton, {
 		"data-testid": "copilot-cancel-transcribe-button",
-		icon: /* @__PURE__ */ jsx(X, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(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__ */ jsx(ToolbarButton, {
 		"data-testid": "copilot-finish-transcribe-button",
-		icon: /* @__PURE__ */ jsx(Check, { className: "cpk:size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(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 }) => {
@@ -1163,11 +1118,11 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			"data-testid": "copilot-add-menu-button",
 			variant: "chatInputToolbarSecondary",
 			size: "chatInputToolbarIcon",
-			className: twMerge("cpk:ml-1", className),
+			className: cn("cpk-chat-input-add-menu-button", className),
 			disabled: isDisabled,
 			"aria-label": labels.chatInputToolbarAddButtonLabel,
 			...props,
-			children: /* @__PURE__ */ jsx(Plus, { className: "cpk:size-[20px]" })
+			children: /* @__PURE__ */ jsx(Plus, { className: "cpk-chat-input-add-menu-icon" })
 		});
 		if (!mounted) return button;
 		return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
@@ -1179,9 +1134,9 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		}), /* @__PURE__ */ jsx(TooltipContent, {
 			side: "bottom",
 			children: /* @__PURE__ */ 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__ */ jsx("span", { children: labels.chatInputToolbarAddButtonLabel }), /* @__PURE__ */ 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: "/"
 				})]
 			})
@@ -1202,7 +1157,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 			ref: internalTextareaRef,
 			"data-testid": "copilot-chat-textarea",
 			placeholder: placeholder ?? labels.chatInputPlaceholder,
-			className: 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",
@@ -1216,7 +1171,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	_CopilotChatInput.Disclaimer = ({ className, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ 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
 		});
@@ -1367,7 +1322,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "2.0.0-rc.1";
+var version$1 = "2.0.0-rc.3";
 
 //#endregion
 //#region src/components/CopilotKitInspector.tsx
@@ -1394,7 +1349,7 @@ const CopilotKitInspector = ({ core, openRequest, onVisibilityChange }) => {
 			mod.configureWebInspectorElement(inspector, latestCoreRef.current, {
 				development: process.env.NODE_ENV === "development",
 				framework: "react",
-				sdkVersion: version
+				sdkVersion: version$1
 			});
 			inspector.addEventListener("cpk-inspector-visibility-change", handleVisibilityChange);
 			mountRef.current.appendChild(inspector);
@@ -2218,14 +2173,14 @@ function A2UIRetryingState({ content, showAfterMs, showAfterAttempts, debugExpos
 /** failed: a clean hard-failure card that replaces the skeleton in place. */
 function A2UIRecoveryFailure({ content, debugExposure }) {
 	return /* @__PURE__ */ 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__ */ jsx("div", {
-				className: "cpk:font-medium",
+				className: "cpk-a2ui-recovery-failure-title",
 				children: "Couldn't generate the UI"
 			}),
 			/* @__PURE__ */ 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__ */ jsx(A2UIDebugDetails, {
@@ -2484,12 +2439,12 @@ function A2UIGeneratingSkeleton({ label, tokens, children }) {
 function A2UIDebugDetails({ label, open, payload }) {
 	return /* @__PURE__ */ jsxs("details", {
 		open,
-		className: "cpk:mt-2 cpk:text-xs",
+		className: "cpk-a2ui-debug-details",
 		children: [/* @__PURE__ */ jsx("summary", {
-			className: "cpk:cursor-pointer cpk:text-gray-500",
+			className: "cpk-a2ui-debug-details-summary",
 			children: label
 		}), /* @__PURE__ */ 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)
 		})]
@@ -2720,7 +2675,7 @@ function createA2UIMessageRenderer(options) {
 			}, [hasOps]);
 			if (!hasOps) return renderLifecycle(content);
 			const surfaces = /* @__PURE__ */ 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__ */ jsx(ReactSurfaceHost, {
 					surfaceId,
 					operations: ops,
@@ -2791,7 +2746,7 @@ async function runA2UIAction({ message, agent, copilotkit, onAction }) {
 */
 function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, catalog, onAction, onReady }) {
 	return /* @__PURE__ */ 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__ */ jsxs(A2UIProvider, {
 			onAction: useCallback((message) => runA2UIAction({
 				message,
@@ -2820,12 +2775,12 @@ function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit, cat
 function A2UISurfaceOrError({ surfaceId }) {
 	const error = useA2UIError();
 	if (error) return /* @__PURE__ */ 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__ */ jsx(A2UIRenderer, {
 		surfaceId,
-		className: "cpk:flex cpk:flex-1"
+		className: "cpk-a2ui-message-surface"
 	});
 }
 /**
@@ -4903,6 +4858,43 @@ var CopilotKitCoreReact = class extends CopilotKitCore$1 {
 	}
 };
 
+//#endregion
+//#region src/styles/copilot-kit-styles.tsx
+const StyleOptionsContext = createContext({ inject: true });
+/** React 19 moves a `<style precedence>` into `<head>` and keeps one copy. */
+const hoistsStyles = Number.parseInt(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 } = useContext(StyleOptionsContext);
+	if (!inject) return null;
+	if (nonce || !hoistsStyles) return /* @__PURE__ */ jsx("style", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: stylesheet }
+	});
+	return /* @__PURE__ */ jsx("style", {
+		href: "copilotkit",
+		precedence: "copilotkit",
+		children: stylesheet
+	});
+}
+
 //#endregion
 //#region src/providers/CopilotKitProvider.tsx
 const zodToJsonSchemaAdapter = (schema, options) => {
@@ -4949,7 +4941,7 @@ function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
 	return value;
 }
 /** Provide a shared core instance and synchronize runtime, tool, and UI configuration. */
-const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, markdownRenderer, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, generativeUI, mcpApps, defaultThrottleMs, debug, learning }) => {
+const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY_HEADERS, credentials, nonce, injectStyles = true, messageFilter, publicApiKey, publicLicenseKey, licenseToken, properties = EMPTY_PROPERTIES, agents__unsafe_dev_only: agents = EMPTY_AGENTS, selfManagedAgents = EMPTY_AGENTS, renderToolCalls, renderActivityMessages, renderCustomMessages, markdownRenderer, frontendTools, humanInTheLoop, openGenerativeUI, enableInspector, agentId, showIntelligenceIndicator = true, useSingleEndpoint, onError, a2ui, generativeUI, mcpApps, defaultThrottleMs, debug, learning }) => {
 	const learningConfig = useMemo(() => toLearningConfig(learning), [learning]);
 	const [shouldRenderInspector, setShouldRenderInspector] = useState(false);
 	const [inspectorVisible, setInspectorVisible] = useState(false);
@@ -5428,41 +5420,47 @@ const CopilotKitProvider = ({ children, runtimeUrl, headers: headersProp = EMPTY
 		runtimeLicenseStatus
 	]);
 	const runtimeLicenseWarningStatus = runtimeEntitlementRetryInProgress ? void 0 : licenseContextValue.status ?? void 0;
-	return /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
-		value: sandboxFunctionsList,
-		children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
-			value: contextValue,
-			children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
-				value: licenseContextValue,
-				children: [
-					a2uiActive && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
-					generativeUIActive && /* @__PURE__ */ jsx(GenerativeUIToolCallRenderer, {}),
-					a2uiActive && /* @__PURE__ */ jsx(A2UICatalogContext, {
-						catalog: filteredCatalog,
-						includeSchema: a2ui?.includeSchema
-					}),
-					/* @__PURE__ */ jsx(MarkdownRendererProvider, {
-						renderer: markdownRenderer,
-						children: /* @__PURE__ */ jsxs(CopilotKitInspectorContextProvider, {
-							value: inspectorContextValue,
-							children: [/* @__PURE__ */ jsx(CopilotKitAgentIdContext.Provider, {
-								value: agentId,
-								children: /* @__PURE__ */ jsx(GenerativeUIRuntimeContext.Provider, {
-									value: generativeUIRuntime,
-									children
-								})
-							}), shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, {
-								core: copilotkit,
-								openRequest: inspectorOpenRequest,
-								onVisibilityChange: setInspectorVisible
-							}) : null]
-						})
-					}),
-					runtimeLicenseWarningStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
-					runtimeLicenseWarningStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
-					runtimeLicenseWarningStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
-					runtimeLicenseWarningStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
-				]
+	return /* @__PURE__ */ jsx(CopilotStyleOptionsProvider, {
+		value: useMemo(() => ({
+			nonce,
+			inject: injectStyles
+		}), [nonce, injectStyles]),
+		children: /* @__PURE__ */ jsx(SandboxFunctionsContext.Provider, {
+			value: sandboxFunctionsList,
+			children: /* @__PURE__ */ jsx(CopilotKitContext.Provider, {
+				value: contextValue,
+				children: /* @__PURE__ */ jsxs(LicenseContext.Provider, {
+					value: licenseContextValue,
+					children: [
+						a2uiActive && /* @__PURE__ */ jsx(A2UIBuiltInToolCallRenderer, {}),
+						generativeUIActive && /* @__PURE__ */ jsx(GenerativeUIToolCallRenderer, {}),
+						a2uiActive && /* @__PURE__ */ jsx(A2UICatalogContext, {
+							catalog: filteredCatalog,
+							includeSchema: a2ui?.includeSchema
+						}),
+						/* @__PURE__ */ jsx(MarkdownRendererProvider, {
+							renderer: markdownRenderer,
+							children: /* @__PURE__ */ jsxs(CopilotKitInspectorContextProvider, {
+								value: inspectorContextValue,
+								children: [/* @__PURE__ */ jsx(CopilotKitAgentIdContext.Provider, {
+									value: agentId,
+									children: /* @__PURE__ */ jsx(GenerativeUIRuntimeContext.Provider, {
+										value: generativeUIRuntime,
+										children
+									})
+								}), shouldRenderInspector ? /* @__PURE__ */ jsx(CopilotKitInspector, {
+									core: copilotkit,
+									openRequest: inspectorOpenRequest,
+									onVisibilityChange: setInspectorVisible
+								}) : null]
+							})
+						}),
+						runtimeLicenseWarningStatus === "none" && !resolvedPublicKey && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "no_license" }),
+						runtimeLicenseWarningStatus === "expired" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expired" }),
+						runtimeLicenseWarningStatus === "invalid" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "invalid" }),
+						runtimeLicenseWarningStatus === "expiring" && /* @__PURE__ */ jsx(LicenseWarningBanner, { type: "expiring" })
+					]
+				})
 			})
 		})
 	});
@@ -5961,10 +5959,10 @@ function Collapsible({ open, id, className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		id,
-		className: 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__ */ jsx("div", {
-			className: "cpk:min-h-0 cpk:overflow-hidden",
+			className: "cpk-collapsible-content",
 			children
 		})
 	});
@@ -5978,20 +5976,20 @@ function StatusIcon({ status, className }) {
 	}[status];
 	return /* @__PURE__ */ jsx(Icon, {
 		"aria-hidden": "true",
-		className: 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__ */ jsx(ChevronRight, {
 		"aria-hidden": "true",
-		className: 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__ */ jsxs("span", {
-		className: "cpk:shrink-0 cpk:text-destructive",
+		className: "cpk-tool-call-failed-count",
 		children: [failed, " failed"]
 	});
 }
@@ -6014,10 +6012,10 @@ function stringifyPayload(value) {
 }
 function Payload({ label, value }) {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ 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__ */ 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)
 	})] });
 }
@@ -6027,7 +6025,7 @@ function Payload({ label, value }) {
 */
 function ToolCallPayloads({ parameters, result, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("cpk:grid cpk:gap-3", className),
+		className: cn("cpk-tool-call-payloads", className),
 		children: [/* @__PURE__ */ jsx(Payload, {
 			label: "Arguments",
 			value: parameters ?? {}
@@ -6046,36 +6044,35 @@ function ToolCallRow({ name, parameters, result, status, appearance, className,
 	const [open, setOpen] = useState(false);
 	const detailsId = useId();
 	const preview = argumentPreview(parameters);
-	const line = appearance === "line";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-copilotkit": true,
-		className: 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__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": open,
 			"aria-controls": detailsId,
 			onClick: () => setOpen((value) => !value),
-			className: 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__ */ jsx(StatusIcon, { status }),
 				/* @__PURE__ */ jsx("span", {
 					"data-testid": "copilot-tool-render-name",
-					className: 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__ */ 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__ */ jsx("span", {
 					"data-testid": "copilot-tool-render-status",
-					className: "cpk:sr-only",
+					className: "cpk-tool-call-row-status",
 					children: statusLabels[status]
 				}),
 				/* @__PURE__ */ jsx(Chevron, {
 					open,
-					className: 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__ */ jsx(Collapsible, {
@@ -6084,7 +6081,7 @@ function ToolCallRow({ name, parameters, result, status, appearance, className,
 			children: /* @__PURE__ */ 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"
 			})
 		})]
 	});
@@ -6126,16 +6123,16 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 		...props
 	};
 	const runningLabel = current && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
 			...groupProps,
-			className: twMerge("cpk:my-2", className),
+			className: cn("cpk-tool-call-group cpk-tool-call-group-line cpk-tool-call-group-single", className),
 			children: /* @__PURE__ */ jsx(ToolCallGroupContext.Provider, {
 				value: {
 					appearance: "line",
@@ -6147,20 +6144,20 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 		});
 		return /* @__PURE__ */ jsxs("div", {
 			...groupProps,
-			className: twMerge("cpk:my-3", className),
+			className: cn("cpk-tool-call-group cpk-tool-call-group-line", className),
 			children: [/* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsxs("span", {
-						className: "cpk:shrink-0 cpk:font-medium",
+						className: "cpk-tool-call-group-line-summary",
 						children: ["Used ", pluralize(calls.length, "tool")]
 					}),
 					/* @__PURE__ */ 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__ */ jsx(FailedCount, { calls })
@@ -6169,7 +6166,7 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 				open,
 				id: bodyId,
 				children: /* @__PURE__ */ 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")
 				})
 			})]
@@ -6177,22 +6174,22 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 	}
 	if (appearance === "stack") {
 		const behind = open ? 0 : Math.min(calls.length - 1, 2);
-		const layer = "cpk:rounded-xl cpk:border cpk:border-border cpk:bg-card cpk:text-card-foreground";
+		const layer = "cpk-tool-call-group-stack-layer";
 		const latestStatus = entryStatus(latest, isActive);
 		const latestPreview = entryPreview(latest);
 		return /* @__PURE__ */ jsxs("div", {
 			...groupProps,
-			className: 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__ */ jsxs("div", {
-				className: "cpk:relative cpk:isolate",
+				className: "cpk-tool-call-group-stack-pile",
 				children: [
 					Array.from({ length: behind }, (_, index) => /* @__PURE__ */ jsx("div", {
 						"aria-hidden": "true",
-						className: 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,
@@ -6204,58 +6201,58 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 						"aria-expanded": open,
 						"aria-controls": open ? bodyId : void 0,
 						onClick: () => setOpen((value) => !value),
-						className: 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" : 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__ */ jsxs(Fragment$1, { children: [
 							pluralize(calls.length, "tool call"),
 							/* @__PURE__ */ jsx(FailedCount, { calls }),
 							/* @__PURE__ */ 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__ */ jsx(Chevron, {
 									open: true,
-									className: "cpk:-rotate-90"
+									className: "cpk-tool-call-group-stack-collapse-icon"
 								})]
 							})
 						] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(StatusIcon, { status: latestStatus }),
 								/* @__PURE__ */ jsx("span", {
-									className: 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__ */ 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__ */ jsx("span", {
-									className: "cpk:sr-only",
+									className: "cpk-tool-call-group-stack-status",
 									children: statusLabels[latestStatus]
 								})
 							]
 						}, latest.toolCall.id), /* @__PURE__ */ 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__ */ jsx(FailedCount, { calls }),
 								/* @__PURE__ */ jsx("span", {
-									className: "cpk:tabular-nums",
+									className: "cpk-tool-call-group-stack-count",
 									children: pluralize(calls.length, "call")
 								}),
 								/* @__PURE__ */ jsx(Chevron, {
 									open: false,
-									className: "cpk:rotate-90"
+									className: "cpk-tool-call-group-stack-expand-icon"
 								})
 							]
 						})] })
 					}),
 					/* @__PURE__ */ 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__ */ jsx("div", {
 				id: bodyId,
-				className: "cpk:grid cpk:gap-1.5",
+				className: "cpk-tool-call-group-stack-items",
 				children: /* @__PURE__ */ jsx(ToolCallGroupContext.Provider, {
 					value: {
 						appearance: "stack",
@@ -6263,7 +6260,7 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 						active: isActive
 					},
 					children: calls.map((call, index) => /* @__PURE__ */ jsx("div", {
-						className: 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))
@@ -6273,26 +6270,26 @@ function CopilotChatToolCallGroup({ calls, renderCall, appearance = "card", isAc
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...groupProps,
-		className: 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__ */ 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__ */ jsx(StatusIcon, { status }),
 				runningLabel || /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(FailedCount, { calls }) : /* @__PURE__ */ jsx("span", {
-						className: "cpk:tabular-nums",
+						className: "cpk-tool-call-group-card-status",
 						children: status !== "running" ? statusLabels[status] : done > 0 && `${done} done`
 					}), /* @__PURE__ */ jsx(Chevron, { open })]
 				})
@@ -6428,8 +6425,7 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 		appearance: group.appearance
 	});
 	const statusLabel = isActive ? "Running" : isComplete ? "Done" : status;
-	const dotClassName = isActive ? "cpk:bg-amber-500" : isComplete ? "cpk:bg-emerald-500" : "cpk:bg-zinc-400";
-	const badgeClassName = isActive ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400" : isComplete ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400" : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
+	const tone = isActive ? "running" : isComplete ? "done" : "other";
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "copilot-tool-render",
 		"data-tool-name": name,
@@ -6437,20 +6433,20 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 		"data-status": status,
 		"data-args": safeStringifyForAttr(parameters),
 		"data-result": safeStringifyForAttr(result),
-		className: "cpk:mt-2 cpk:pb-2",
+		className: "cpk-default-tool-call",
 		children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
-					className: "cpk:flex cpk:min-w-0 cpk:items-center cpk:gap-2",
+					className: "cpk-default-tool-call-title",
 					children: [
 						/* @__PURE__ */ 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,
@@ -6461,31 +6457,31 @@ function DefaultToolCallRenderer({ name, toolCallId, parameters, status, result
 								d: "M8.25 4.5l7.5 7.5-7.5 7.5"
 							})
 						}),
-						/* @__PURE__ */ jsx("span", { className: `cpk:inline-block cpk:h-2 cpk:w-2 cpk:flex-shrink-0 cpk:rounded-full ${dotClassName}` }),
+						/* @__PURE__ */ jsx("span", { className: `cpk-default-tool-call-dot cpk-default-tool-call-dot-${tone}` }),
 						/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
-				className: "cpk:mt-3 cpk:grid cpk:gap-3",
+				className: "cpk-default-tool-call-details",
 				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ 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__ */ 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)
 				})] })]
 			})]
@@ -8328,9 +8324,9 @@ function CopilotChatToolCallsView({ message, messages = [], display: displayProp
 			const failedIds = new Set(segment.calls.filter((call) => call.toolMessage?.error).map((call) => call.toolCall.id));
 			return /* @__PURE__ */ jsx(Collapsible, {
 				open: workOpen ?? true,
-				className: "cpk:-mx-2",
+				className: "cpk-tool-calls-view-turn",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "cpk:px-2 cpk:py-1.5",
+					className: "cpk-tool-calls-view-turn-rows",
 					children: /* @__PURE__ */ jsx(ToolCallGroupContext.Provider, {
 						value: {
 							appearance: "line",
@@ -8375,7 +8371,7 @@ function InspectorKiteIcon({ className, ...props }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		...props,
 		"aria-hidden": "true",
-		className: 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: [
@@ -8523,7 +8519,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 				size: "icon",
 				"data-testid": "copilot-inspector-button",
 				"aria-label": `${labels.assistantMessageToolbarInspectorTitle} (${labels.assistantMessageToolbarInspectorLocalOnlyLabel.toLowerCase()})`,
-				className: twMerge("cpk:size-8 cpk:p-1.5", className),
+				className: cn("cpk-inspector-button", className),
 				onPointerEnter: (event) => {
 					onPointerEnter?.(event);
 					if (!disabled && event.pointerType !== "touch") {
@@ -8553,7 +8549,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 				},
 				children: /* @__PURE__ */ jsx(Wrench, {
 					"aria-hidden": "true",
-					className: "cpk:size-4",
+					className: "cpk-inspector-button-icon",
 					"data-testid": "copilot-inspector-icon"
 				})
 			})
@@ -8561,7 +8557,7 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 			align: "start",
 			side: "top",
 			sideOffset: 6,
-			className: 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: () => {
@@ -8576,9 +8572,9 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 			onFocusOutside: () => changeOpen(false),
 			children: [
 				/* @__PURE__ */ 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__ */ jsx("span", {
-						className: "cpk:text-xs cpk:font-medium",
+						className: "cpk-inspector-button-menu-title",
 						children: labels.assistantMessageToolbarInspectorTitle
 					}), /* @__PURE__ */ jsxs(Tooltip, {
 						delayDuration: 1e3,
@@ -8586,13 +8582,13 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 							asChild: true,
 							children: /* @__PURE__ */ 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__ */ jsx(TooltipContent, {
 							side: "top",
 							sideOffset: 6,
-							className: 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
@@ -8605,27 +8601,27 @@ function CopilotChatInspectorButton({ title, className, onClick, onPointerDown,
 					children: /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick,
-						className: "cpk:w-full cpk:cursor-pointer cpk:items-start cpk:text-left",
-						children: [/* @__PURE__ */ jsx(InspectorKiteIcon, { className: "cpk:mt-0.5" }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-							className: "cpk:block",
+						className: "cpk-inspector-button-menu-item cpk-inspector-button-inspect-item",
+						children: [/* @__PURE__ */ jsx(InspectorKiteIcon, { className: "cpk-inspector-button-menu-item-icon" }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+							className: "cpk-inspector-button-menu-item-label",
 							children: primaryLabel
 						}), /* @__PURE__ */ jsx("span", {
-							className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+							className: "cpk-inspector-button-menu-item-description",
 							children: labels.assistantMessageToolbarInspectorDescription
 						})] })]
 					})
 				}),
 				/* @__PURE__ */ jsxs(DropdownMenuItem, {
 					onSelect: hideShortcuts,
-					className: "cpk:cursor-pointer cpk:items-start",
+					className: "cpk-inspector-button-menu-item cpk-inspector-button-hide-item",
 					children: [/* @__PURE__ */ jsx(EyeOff, {
 						"aria-hidden": "true",
-						className: "cpk:mt-0.5"
+						className: "cpk-inspector-button-menu-item-icon"
 					}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-						className: "cpk:block",
+						className: "cpk-inspector-button-menu-item-label",
 						children: labels.assistantMessageToolbarInspectorHideLabel
 					}), /* @__PURE__ */ jsx("span", {
-						className: "cpk:block cpk:text-xs cpk:text-muted-foreground",
+						className: "cpk-inspector-button-menu-item-description",
 						children: labels.assistantMessageToolbarInspectorHideDescription
 					})] })]
 				})
@@ -8659,7 +8655,7 @@ const PopoverContent = React$1.forwardRef(({ className, align = "start", sideOff
 	"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";
@@ -8954,9 +8950,9 @@ function WorkText({ messageId, children }) {
 	const open = context.workTextOpen.get(messageId);
 	return /* @__PURE__ */ jsx(Collapsible, {
 		open: open ?? true,
-		className: "cpk:-mx-2",
+		className: "cpk-assistant-message-work-text",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "cpk:px-2",
+			className: "cpk-assistant-message-work-text-content",
 			"data-work-text": open === void 0 ? "reply" : "narration",
 			children
 		})
@@ -9062,7 +9058,7 @@ function FeedbackCommentPopover({ feedbackComment, comment, savedComment, rating
 			},
 			onPointerEnter: () => comment.enter("pointer"),
 			onPointerLeave: () => comment.leave("pointer"),
-			className: "cpk:z-[1300]",
+			className: "cpk-assistant-message-feedback-popover",
 			children: /* @__PURE__ */ jsx(Fragment, { children: renderSlot(feedbackComment, CopilotChatAssistantMessage.FeedbackComment, {
 				value: comment.draft,
 				savedComment,
@@ -9189,7 +9185,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	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__ */ 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,
@@ -9254,14 +9250,14 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 		ref: root,
 		"data-copilotkit": true,
 		"data-testid": "copilot-assistant-message",
-		className: twMerge("copilotKitMessage copilotKitAssistantMessage", className),
+		className: cn("copilotKitMessage copilotKitAssistantMessage", className),
 		...props,
 		"data-message-id": message.id,
 		children: [
 			/* @__PURE__ */ jsx(WorkText, {
 				messageId: message.id,
 				children: /* @__PURE__ */ 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
 				})
 			}),
@@ -9289,7 +9285,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 	};
 	_CopilotChatAssistantMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 		"data-testid": "copilot-assistant-toolbar",
-		className: 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 }) => {
@@ -9342,7 +9338,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			onClick: handleClick,
 			className,
 			...props,
-			children: copied ? /* @__PURE__ */ jsx(Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ jsx(Copy, { className: "cpk:size-[18px]" })
+			children: copied ? /* @__PURE__ */ jsx(Check, { className: "cpk-assistant-message-toolbar-icon" }) : /* @__PURE__ */ jsx(Copy, { className: "cpk-assistant-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatAssistantMessage.InspectorButton = CopilotChatInspectorButton;
@@ -9353,7 +9349,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			title: title || labels.assistantMessageToolbarThumbsUpLabel,
 			...props,
 			children: /* @__PURE__ */ jsx(ThumbsUp, {
-				className: "cpk:size-[18px]",
+				className: "cpk-assistant-message-toolbar-icon",
 				fill: props["aria-pressed"] === true ? "currentColor" : "none"
 			})
 		});
@@ -9365,7 +9361,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			title: title || labels.assistantMessageToolbarThumbsDownLabel,
 			...props,
 			children: /* @__PURE__ */ jsx(ThumbsDown, {
-				className: "cpk:size-[18px]",
+				className: "cpk-assistant-message-toolbar-icon",
 				fill: props["aria-pressed"] === true ? "currentColor" : "none"
 			})
 		});
@@ -9375,7 +9371,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 		const changed = value.trim() !== savedComment;
 		return /* @__PURE__ */ jsxs("form", {
 			"data-testid": "copilot-feedback-comment",
-			className: 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();
@@ -9395,13 +9391,13 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 				onChange: (event) => onChange(event.target.value),
 				placeholder: labels.assistantMessageFeedbackCommentPlaceholder,
 				"aria-label": labels.assistantMessageFeedbackCommentPlaceholder,
-				className: "cpk:min-w-0 cpk:flex-1 cpk:bg-transparent cpk:py-1 cpk:text-foreground cpk:outline-none cpk:placeholder:text-muted-foreground"
+				className: "cpk-assistant-message-feedback-comment-input"
 			}), changed && /* @__PURE__ */ jsx(Button, {
 				type: "submit",
 				variant: "assistantMessageToolbarButton",
 				"aria-label": labels.assistantMessageFeedbackCommentSubmitLabel,
 				title: labels.assistantMessageFeedbackCommentSubmitLabel,
-				children: /* @__PURE__ */ jsx(ArrowUp, { className: "cpk:size-[16px]" })
+				children: /* @__PURE__ */ jsx(ArrowUp, { className: "cpk-assistant-message-feedback-comment-submit-icon" })
 			})]
 		});
 	};
@@ -9411,7 +9407,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-read-aloud-button",
 			title: title || labels.assistantMessageToolbarReadAloudLabel,
 			...props,
-			children: /* @__PURE__ */ jsx(Volume2, { className: "cpk:size-[20px]" })
+			children: /* @__PURE__ */ jsx(Volume2, { className: "cpk-assistant-message-read-aloud-icon" })
 		});
 	};
 	_CopilotChatAssistantMessage.RegenerateButton = ({ title, ...props }) => {
@@ -9420,7 +9416,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, o
 			"data-testid": "copilot-regenerate-button",
 			title: title || labels.assistantMessageToolbarRegenerateLabel,
 			...props,
-			children: /* @__PURE__ */ jsx(RefreshCw, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ jsx(RefreshCw, { className: "cpk-assistant-message-toolbar-icon" })
 		});
 	};
 })(CopilotChatAssistantMessage || (CopilotChatAssistantMessage = {}));
@@ -9453,13 +9449,13 @@ function Lightbox({ onClose, children }) {
 	}, [onClose]);
 	if (typeof document === "undefined") return null;
 	return createPortal(/* @__PURE__ */ 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__ */ 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__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
+			children: /* @__PURE__ */ jsx(X, { className: "cpk-attachment-lightbox-close-icon" })
 		}), /* @__PURE__ */ jsx("div", {
 			onClick: (e) => e.stopPropagation(),
 			children
@@ -9517,14 +9513,14 @@ const ImageAttachment = memo(function ImageAttachment({ src, className }) {
 	const [error, setError] = useState(false);
 	const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
 	if (error) return /* @__PURE__ */ 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__ */ jsx("span", { children: "Failed to load image" })
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(Lightbox, {
@@ -9533,20 +9529,20 @@ const ImageAttachment = memo(function ImageAttachment({ src, className }) {
 			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 = memo(function AudioAttachment({ src, filename, className }) {
 	return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", {
-			className: "cpk:text-xs cpk:text-muted-foreground cpk:truncate cpk:max-w-[300px]",
+			className: "cpk-attachment-renderer-audio-filename",
 			children: filename
 		})]
 	});
@@ -9556,7 +9552,7 @@ const VideoAttachment = memo(function VideoAttachment({ src, className }) {
 		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 = memo(function DocumentAttachment({ src, source, filename, className }) {
@@ -9567,12 +9563,12 @@ const DocumentAttachment = memo(function DocumentAttachment({ src, source, filen
 		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__ */ jsx("span", {
-			className: "cpk:text-xs cpk:font-bold cpk:uppercase",
+			className: "cpk-attachment-renderer-document-icon",
 			children: getDocumentIcon(source.mimeType ?? "")
 		}), /* @__PURE__ */ jsx("span", {
-			className: "cpk:text-sm cpk:text-muted-foreground cpk:truncate",
+			className: "cpk-attachment-renderer-document-name",
 			children: filename || source.mimeType || "Unknown type"
 		})]
 	});
@@ -9637,7 +9633,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 	});
 	const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
 	const BoundToolbar = renderSlot(toolbar, CopilotChatUserMessage.Toolbar, { children: /* @__PURE__ */ jsxs("div", {
-		className: "cpk:flex cpk:items-center cpk:gap-1 cpk:justify-end",
+		className: "cpk-user-message-toolbar-items",
 		children: [
 			additionalToolbarItems,
 			BoundCopyButton,
@@ -9663,12 +9659,12 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 	return /* @__PURE__ */ jsxs("div", {
 		"data-copilotkit": true,
 		"data-testid": "copilot-user-message",
-		className: 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__ */ 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__ */ jsx(CopilotChatAttachmentRenderer, {
 					type: part.type,
 					source: part.source,
@@ -9682,17 +9678,17 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 }
 (function(_CopilotChatUserMessage) {
 	_CopilotChatUserMessage.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
-		className: 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__ */ jsx("div", {
-		className: 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__ */ jsx("div", {
 		"data-testid": "copilot-user-toolbar",
-		className: 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 }) => {
@@ -9702,7 +9698,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 				type: "button",
 				variant: "assistantMessageToolbarButton",
 				"aria-label": title,
-				className: twMerge(className),
+				className,
 				...props,
 				children
 			})
@@ -9728,7 +9724,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 			onClick: handleClick,
 			className,
 			...props,
-			children: copied ? /* @__PURE__ */ jsx(Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ jsx(Copy, { className: "cpk:size-[18px]" })
+			children: copied ? /* @__PURE__ */ jsx(Check, { className: "cpk-user-message-toolbar-icon" }) : /* @__PURE__ */ jsx(Copy, { className: "cpk-user-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatUserMessage.EditButton = ({ className, title, ...props }) => {
@@ -9738,7 +9734,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 			title: title || labels.userMessageToolbarEditMessageLabel,
 			className,
 			...props,
-			children: /* @__PURE__ */ jsx(Edit, { className: "cpk:size-[18px]" })
+			children: /* @__PURE__ */ jsx(Edit, { className: "cpk-user-message-toolbar-icon" })
 		});
 	};
 	_CopilotChatUserMessage.BranchNavigation = ({ className, currentBranch = 0, numberOfBranches = 1, onSwitchToBranch, message, ...props }) => {
@@ -9748,7 +9744,7 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 		const canGoNext = currentBranch < numberOfBranches - 1;
 		return /* @__PURE__ */ jsxs("div", {
 			"data-testid": "copilot-branch-navigation",
-			className: twMerge("cpk:flex cpk:items-center cpk:gap-1", className),
+			className: cn("cpk-user-message-branch-navigation", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(Button, {
@@ -9760,12 +9756,12 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 						message
 					}),
 					disabled: !canGoPrev,
-					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					className: "cpk-user-message-branch-button",
 					"aria-label": labels.userMessageToolbarPreviousBranchLabel,
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "cpk:size-[20px]" })
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "cpk-user-message-branch-icon" })
 				}),
 				/* @__PURE__ */ 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,
 						"/",
@@ -9781,9 +9777,9 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
 						message
 					}),
 					disabled: !canGoNext,
-					className: "cpk:h-6 cpk:w-6 cpk:p-0",
+					className: "cpk-user-message-branch-button",
 					"aria-label": labels.userMessageToolbarNextBranchLabel,
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: "cpk:size-[20px]" })
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "cpk-user-message-branch-icon" })
 				})
 			]
 		});
@@ -9879,7 +9875,7 @@ function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: i
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: twMerge("cpk:my-1", className),
+		className: cn("cpk-reasoning-message", className),
 		"data-message-id": message.id,
 		...props,
 		children: [boundHeader, boundToggle]
@@ -9890,47 +9886,47 @@ function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: i
 		const isExpandable = !!hasContent;
 		return /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: 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__ */ jsx("span", {
-					className: "cpk:font-medium",
+					className: "cpk-reasoning-message-label",
 					children: label
 				}),
 				isStreaming && !hasContent && /* @__PURE__ */ jsx("span", {
-					className: "cpk:inline-flex cpk:items-center cpk:ml-1",
-					children: /* @__PURE__ */ 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__ */ jsx("span", { className: "cpk-reasoning-message-indicator-dot" })
 				}),
 				headerChildren,
-				isExpandable && /* @__PURE__ */ jsx(ChevronRight, { className: twMerge("cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200", isOpen && "cpk:rotate-90") })
+				isExpandable && /* @__PURE__ */ jsx(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__ */ jsx("div", {
-			className: twMerge("cpk:pb-2 cpk:pt-1", className),
+			className: cn("cpk-reasoning-message-content", className),
 			...contentProps,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "cpk:text-sm cpk:text-muted-foreground",
+				className: "cpk-reasoning-message-text",
 				children: [/* @__PURE__ */ jsx(StreamingMarkdownDefaultRenderer, {
 					content: typeof contentChildren === "string" ? contentChildren : "",
 					isStreaming
 				}), isStreaming && hasContent && /* @__PURE__ */ jsx("span", {
-					className: "cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle",
-					children: /* @__PURE__ */ 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__ */ jsx("span", { className: "cpk-reasoning-message-cursor-dot" })
 				})]
 			})
 		});
 	};
 	_CopilotChatReasoningMessage.Toggle = ({ isOpen, className, children: toggleChildren, ...toggleProps }) => {
 		return /* @__PURE__ */ jsx("div", {
-			className: 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__ */ jsx("div", {
-				className: "cpk:overflow-hidden",
+				className: "cpk-reasoning-message-toggle-content",
 				children: toggleChildren
 			})
 		});
@@ -9943,8 +9939,6 @@ var CopilotChatReasoningMessage_default = CopilotChatReasoningMessage;
 
 //#endregion
 //#region src/components/chat/CopilotChatSuggestionPill.tsx
-const baseClasses = "group cpk:inline-flex cpk:h-7 cpk:sm:h-8 cpk:items-center cpk:gap-1 cpk:sm:gap-1.5 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:sm:px-3 cpk:text-[11px] cpk:sm:text-xs cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto";
-const labelClasses = "cpk:whitespace-nowrap cpk:font-medium cpk:leading-none";
 const CopilotChatSuggestionPill = React.forwardRef(function CopilotChatSuggestionPill({ className, children, icon, isLoading, type, ...props }, ref) {
 	const showIcon = !isLoading && icon;
 	return /* @__PURE__ */ jsxs("button", {
@@ -9952,22 +9946,22 @@ const CopilotChatSuggestionPill = React.forwardRef(function CopilotChatSuggestio
 		"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__ */ 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__ */ jsx(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__ */ 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__ */ jsx("span", {
-			className: labelClasses,
+			className: "cpk-suggestion-pill-label",
 			children
 		})]
 	});
@@ -9981,7 +9975,7 @@ const DefaultContainer = React.forwardRef(function DefaultContainer({ className,
 		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
 	});
 });
@@ -10111,30 +10105,30 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 		"data-testid": "copilot-work-summary",
 		"data-state": isWorking ? "working" : "done",
 		"aria-expanded": isOpen,
-		className: 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "cpk:font-medium cpk-shimmer",
+			className: "cpk-work-summary-label cpk-shimmer",
 			children: "Working"
 		}), liveMs !== void 0 && /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "cpk:font-medium",
+				className: "cpk-work-summary-label",
 				children: duration ? `Worked for ${duration}` : `Used ${pluralize(calls.length, "tool")}`
 			}),
 			duration && /* @__PURE__ */ jsx("span", {
-				className: "cpk:text-xs cpk:opacity-70",
+				className: "cpk-work-summary-detail",
 				children: pluralize(calls.length, "tool")
 			}),
 			failed > 0 && /* @__PURE__ */ jsxs("span", {
-				className: "cpk:text-destructive",
+				className: "cpk-work-summary-failed",
 				children: [failed, " failed"]
 			})
 		] }), /* @__PURE__ */ jsx(ChevronRight, {
 			"aria-hidden": "true",
-			className: 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")
 		})]
 	});
 }
@@ -10151,7 +10145,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 * checkmark — whose geometry lives in each path's `d` ATTRIBUTE so it
 * renders in every browser (the CSS `d:` property is Chrome-only).
 *
-* Two states, driven by the `data-status` attribute (see globals.css
+* Two states, driven by the `data-status` attribute (see styles/css/intelligence-indicator.css
 * for the exact timing):
 *  1. **In-progress.** The arc spins (CSS rotation) inside the pill and
 *     the checkmark is hidden. Label + icon are a saturated purple.
@@ -10165,7 +10159,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 *     — the static check plus the color/slant shift carry the "done"
 *     meaning, so no wording change is needed.
 *
-* All motion is gated behind `prefers-reduced-motion` (globals.css):
+* All motion is gated behind `prefers-reduced-motion` (styles/css/intelligence-indicator.css):
 * when reduced motion is requested the arc does not spin and the two
 * states swap instantly, without transitions.
 *
@@ -10176,7 +10170,7 @@ function CopilotChatWorkSummary({ isWorking, isOpen, calls, elapsedMs, workingSi
 */
 function IntelligenceIndicatorView({ message, status, label, className, ...rest }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: twMerge("cpk-intelligence-indicator", className),
+		className: cn("cpk-intelligence-indicator", className),
 		role: "status",
 		"aria-live": "polite",
 		"data-testid": `cpk-intelligence-indicator-${message.id}`,
@@ -10748,7 +10742,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return /* @__PURE__ */ jsx(Collapsible, {
 			open: working || calls.length > 0,
 			children: /* @__PURE__ */ jsx("div", {
-				className: "cpk:pt-1 cpk:pb-2",
+				className: "cpk-message-view-work-summary",
 				children: renderSlot(workSummary, CopilotChatWorkSummary, {
 					isWorking: working,
 					isOpen: open,
@@ -11119,7 +11113,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			children: /* @__PURE__ */ jsxs("div", {
 				"data-copilotkit": true,
 				"data-testid": "copilot-message-list",
-				className: twMerge("copilotKitMessages cpk:flex cpk:flex-col", className),
+				className: cn("copilotKitMessages cpk-message-view", className),
 				...props,
 				children: [
 					shouldVirtualize ? /* @__PURE__ */ jsx("div", {
@@ -11147,7 +11141,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 					interruptElement,
 					pendingWorkSummary && renderWorkSummary(latestTurnKey, []),
 					showCursor && /* @__PURE__ */ jsx("div", {
-						className: "cpk:mt-2",
+						className: "cpk-message-view-cursor-container",
 						children: renderSlot(cursor, CopilotChatMessageView.Cursor, {})
 					})
 				]
@@ -11158,7 +11152,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "copilot-loading-cursor",
-		className: 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
 	});
 };
@@ -11174,17 +11168,16 @@ const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className
 	if (attachments.length === 0) return null;
 	return /* @__PURE__ */ 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__ */ 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__ */ jsx(UploadingOverlay, {}),
 					/* @__PURE__ */ jsx(AttachmentPreview, { attachment }),
 					/* @__PURE__ */ 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: "✕"
 					})
@@ -11195,12 +11188,12 @@ const CopilotChatAttachmentQueue = ({ attachments, onRemoveAttachment, className
 };
 function UploadingOverlay() {
 	return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "cpk-attachment-queue-uploading-spinner" })
 	});
 }
 function AttachmentPreview({ attachment }) {
-	if (attachment.status === "uploading") return /* @__PURE__ */ jsx("div", { className: "cpk:w-full cpk:h-full" });
+	if (attachment.status === "uploading") return /* @__PURE__ */ jsx("div", { className: "cpk-attachment-queue-placeholder" });
 	switch (attachment.type) {
 		case "image": return /* @__PURE__ */ jsx(ImagePreview, { attachment });
 		case "audio": return /* @__PURE__ */ jsx(AudioPreview, { attachment });
@@ -11215,7 +11208,7 @@ function ImagePreview({ attachment }) {
 		ref: thumbnailRef,
 		src,
 		alt: attachment.filename || "Image attachment",
-		className: "cpk:w-full cpk:h-full cpk:object-cover cpk:cursor-pointer",
+		className: "cpk-attachment-queue-image",
 		onClick: openLightbox
 	}), open && /* @__PURE__ */ jsx(Lightbox, {
 		onClose: closeLightbox,
@@ -11223,20 +11216,20 @@ function ImagePreview({ attachment }) {
 			style: { viewTransitionName: vtName },
 			src,
 			alt: attachment.filename || "Image attachment",
-			className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
+			className: "cpk-attachment-queue-lightbox-image"
 		})
 	})] });
 }
 function AudioPreview({ attachment }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "cpk:flex cpk:flex-col cpk:gap-1 cpk:w-full",
+		className: "cpk-attachment-queue-audio",
 		children: [/* @__PURE__ */ jsx("audio", {
 			src: getSourceUrl(attachment.source),
 			controls: true,
 			preload: "metadata",
-			className: "cpk:w-full cpk:h-8"
+			className: "cpk-attachment-queue-audio-player"
 		}), attachment.filename && /* @__PURE__ */ 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
 		})]
 	});
@@ -11253,25 +11246,25 @@ function VideoPreview({ attachment }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			ref: thumbnailRef,
-			className: "cpk:w-full cpk:h-full",
+			className: "cpk-attachment-queue-video",
 			children: attachment.thumbnail ? /* @__PURE__ */ 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__ */ jsx("video", {
 				src,
 				preload: "metadata",
 				muted: true,
-				className: "cpk:w-full cpk:h-full cpk:object-cover"
+				className: "cpk-attachment-queue-video-thumbnail"
 			})
 		}),
 		/* @__PURE__ */ 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__ */ 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__ */ jsx(Play, { className: "cpk:w-4 cpk:h-4 cpk:text-white cpk:ml-0.5" })
+				className: "cpk-attachment-queue-video-play-badge",
+				children: /* @__PURE__ */ jsx(Play, { className: "cpk-attachment-queue-video-play-icon" })
 			})
 		}),
 		open && /* @__PURE__ */ jsx(Lightbox, {
@@ -11281,7 +11274,7 @@ function VideoPreview({ attachment }) {
 				src,
 				controls: true,
 				autoPlay: true,
-				className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:rounded-lg"
+				className: "cpk-attachment-queue-lightbox-video"
 			})
 		})
 	] });
@@ -11332,7 +11325,7 @@ function DocumentLightboxContent({ attachment, vtName }) {
 			style: { viewTransitionName: vtName },
 			src: blobUrl,
 			title: attachment.filename || "PDF preview",
-			className: "cpk:w-[90vw] cpk:h-[90vh] cpk:max-w-[1000px] cpk:rounded-lg cpk:bg-white"
+			className: "cpk-attachment-queue-pdf-preview"
 		});
 	}
 	if (isText(mimeType)) {
@@ -11345,40 +11338,40 @@ function DocumentLightboxContent({ attachment, vtName }) {
 		})() : null;
 		return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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: getDocumentIcon(mimeType ?? "")
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "cpk:text-center",
+				className: "cpk-attachment-queue-document-card-details",
 				children: [/* @__PURE__ */ 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__ */ 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 && ` · ${formatFileSize(attachment.size)}`]
 				})]
 			}),
 			/* @__PURE__ */ 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"
 			})
 		]
@@ -11390,18 +11383,18 @@ function DocumentPreview({ attachment }) {
 	const previewable = canPreviewInBrowser(mimeType);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ 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: getDocumentIcon(mimeType ?? "")
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "cpk:flex cpk:flex-col cpk:min-w-0",
+			className: "cpk-attachment-queue-document-info",
 			children: [/* @__PURE__ */ 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__ */ jsx("span", {
-				className: "cpk:text-[11px] cpk:text-muted-foreground",
+				className: "cpk-attachment-queue-document-size",
 				children: formatFileSize(attachment.size)
 			})]
 		})]
@@ -11537,11 +11530,11 @@ function computeOffsetTop(el, stopAt) {
 const SCROLL_BUTTON_OFFSET = 16;
 function DropOverlay() {
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
-			className: "cpk:flex cpk:flex-col cpk:items-center cpk:gap-2 cpk:text-primary/70",
-			children: [/* @__PURE__ */ jsx(Upload, { className: "cpk:w-8 cpk:h-8" }), /* @__PURE__ */ jsx("span", {
-				className: "cpk:text-sm cpk:font-medium",
+			className: "cpk-chat-view-drop-overlay-content",
+			children: [/* @__PURE__ */ jsx(Upload, { className: "cpk-chat-view-drop-overlay-icon" }), /* @__PURE__ */ jsx("span", {
+				className: "cpk-chat-view-drop-overlay-label",
 				children: "Drop files here"
 			})]
 		})
@@ -11620,7 +11613,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		suggestions,
 		loadingIndexes: suggestionLoadingIndexes,
 		onSelectSuggestion,
-		className: "cpk:mb-3 cpk:lg:ml-4 cpk:lg:mr-4 cpk:ml-0 cpk:mr-0"
+		className: "cpk-chat-view-suggestion-view"
 	}) : null;
 	const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
 		autoScroll,
@@ -11631,9 +11624,9 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			"data-testid": "copilot-scroll-content",
 			style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` },
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "cpk:max-w-3xl cpk:mx-auto",
+				className: "cpk-chat-view-feed",
 				children: [BoundMessageView, hasSuggestions ? /* @__PURE__ */ jsx("div", {
-					className: "cpk:pl-0 cpk:pr-4 cpk:@3xl:px-0 cpk:mt-4",
+					className: "cpk-chat-view-suggestions",
 					children: BoundSuggestionView
 				}) : null]
 			})
@@ -11658,11 +11651,11 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		const welcomeScreenSlot = welcomeScreen === true ? void 0 : welcomeScreen;
 		const inputWithAttachments = /* @__PURE__ */ jsxs("div", {
-			className: "cpk:w-full",
+			className: "cpk-chat-view-welcome-input-group",
 			children: [attachments && attachments.length > 0 && /* @__PURE__ */ 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, {
@@ -11676,7 +11669,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			onDragOver,
 			onDragLeave,
 			onDrop,
-			className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("copilotKitChat cpk-chat-view", className),
 			...props,
 			children: [dragOver && /* @__PURE__ */ jsx(DropOverlay, {}), BoundWelcomeScreen]
 		});
@@ -11698,7 +11691,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		onDragOver,
 		onDragLeave,
 		onDrop,
-		className: cn("copilotKitChat cpk:@container cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+		className: cn("copilotKitChat cpk-chat-view", className),
 		...props,
 		children: [
 			dragOver && /* @__PURE__ */ jsx(DropOverlay, {}),
@@ -11706,13 +11699,13 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			/* @__PURE__ */ 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__ */ jsx("div", {
-					className: "cpk:max-w-3xl cpk:mx-auto cpk:w-full cpk:pointer-events-auto",
+					className: "cpk-chat-view-attachments",
 					children: /* @__PURE__ */ jsx(CopilotChatAttachmentQueue, {
 						attachments,
 						onRemoveAttachment: (id) => onRemoveAttachment?.(id),
-						className: "cpk:px-4"
+						className: "cpk-chat-view-attachment-queue"
 					})
 				}), BoundInput]
 			})
@@ -11823,19 +11816,19 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				value: state.isAtBottom,
 				children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(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__ */ 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__ */ 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() })
 					})
@@ -11855,15 +11848,15 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		return /* @__PURE__ */ jsx(ScrollElementContext.Provider, {
 			value: nonAutoScrollEl,
 			children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", {
 							ref: spacerRef,
@@ -11877,7 +11870,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 					}),
 					BoundFeather,
 					showScrollButton && !isResizing && /* @__PURE__ */ 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() })
 					})
@@ -11923,9 +11916,9 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			};
 		}, [nonAutoScrollEl, mode]);
 		if (!hasMounted) return /* @__PURE__ */ 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__ */ 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
 			})
 		});
@@ -11935,17 +11928,17 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 				value: nonAutoScrollEl,
 				children: /* @__PURE__ */ 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__ */ 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__ */ 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() })
 						})
@@ -11969,7 +11962,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			children
 		});
 		return /* @__PURE__ */ jsx(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,
@@ -11989,10 +11982,10 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 			"data-testid": "copilot-scroll-to-bottom",
 			variant: "outline",
 			size: "sm",
-			className: 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__ */ jsx(ChevronDown, { className: "cpk:w-4 cpk:h-4 cpk:text-gray-600 cpk:dark:text-white" })
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "cpk-chat-view-scroll-to-bottom-icon" })
 		});
 	};
 	_CopilotChatView.Feather = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
@@ -12002,7 +11995,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 	_CopilotChatView.WelcomeMessage = ({ className, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ 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
 		});
@@ -12022,21 +12015,21 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
 		});
 		return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
-						className: "cpk:mb-6",
+						className: "cpk-chat-view-welcome-screen-message",
 						children: BoundWelcomeMessage
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: "cpk:w-full",
+						className: "cpk-chat-view-welcome-screen-input",
 						children: input
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: "cpk:mt-4 cpk:flex cpk:justify-center",
+						className: "cpk-chat-view-welcome-screen-suggestions",
 						children: suggestionView
 					})
 				]
@@ -12914,6 +12907,7 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 			ref: chatContainerRef,
 			style: { display: "contents" },
 			children: [
+				/* @__PURE__ */ jsx(CopilotKitStyles, {}),
 				attachmentsEnabled && /* @__PURE__ */ jsx("input", {
 					type: "file",
 					multiple: true,
@@ -12958,22 +12952,22 @@ function CopilotChat({ agentId, threadId, labels, inspectorTools, chatView, isMo
 
 //#endregion
 //#region src/components/chat/CopilotChatToggleButton.tsx
+const ICON_CLASS = "cpk-chat-toggle-button-icon";
 const DefaultOpenIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(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__ */ jsx(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.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
 	const { onClick, type, disabled, ...restProps } = buttonProps;
 	const configuration = useCopilotChatConfiguration();
@@ -12988,19 +12982,19 @@ const CopilotChatToggleButton = React.forwardRef(function CopilotChatToggleButto
 		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__ */ 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,
@@ -13011,7 +13005,7 @@ const CopilotChatToggleButton = React.forwardRef(function CopilotChatToggleButto
 	const closeIconElement = /* @__PURE__ */ 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,
@@ -13026,7 +13020,7 @@ const CopilotChatToggleButton = React.forwardRef(function CopilotChatToggleButto
 		"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,
@@ -13120,21 +13114,21 @@ function CopilotModalHeader({ title, titleContent, closeButton, drawerLauncher,
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
-			className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
+			className: "cpk-modal-header-content",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-start",
+					className: "cpk-modal-header-start",
 					children: BoundDrawerLauncher ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-center cpk:text-center",
+					className: "cpk-modal-header-center",
 					children: BoundTitle
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "cpk:flex cpk:flex-1 cpk:justify-end",
+					className: "cpk-modal-header-end",
 					children: BoundCloseButton
 				})
 			]
@@ -13145,7 +13139,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 (function(_CopilotModalHeader) {
 	_CopilotModalHeader.Title = ({ children, className, ...props }) => /* @__PURE__ */ 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
 	});
@@ -13154,11 +13148,11 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 		return /* @__PURE__ */ 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__ */ jsx(X, {
-				className: "cpk:h-4 cpk:w-4",
+				className: "cpk-modal-header-close-icon",
 				"aria-hidden": "true"
 			})
 		});
@@ -13168,11 +13162,11 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
 		return /* @__PURE__ */ 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__ */ jsx(PanelLeftOpen, {
-				className: "cpk:h-4 cpk:w-4",
+				className: "cpk-modal-header-drawer-launcher-icon",
 				"aria-hidden": "true"
 			})
 		});
@@ -13263,13 +13257,13 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, position = "r
 		position
 	]);
 	const headerElement = renderSlot(header, CopilotModalHeader, {});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk:left-6 cpk:right-auto" } : {}), /* @__PURE__ */ jsx("aside", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderSlot(toggleButton, CopilotChatToggleButton, position === "left" ? { className: "cpk-sidebar-view-toggle-button-left" } : {}), /* @__PURE__ */ 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)",
@@ -13279,9 +13273,9 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, position = "r
 		"aria-label": configuration?.labels.sidebarLabel ?? CopilotChatDefaultLabels.sidebarLabel,
 		role: "complementary",
 		children: /* @__PURE__ */ 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__ */ jsx("div", {
-				className: "cpk:flex-1 cpk:overflow-hidden",
+				className: "cpk-sidebar-view-chat",
 				"data-sidebar-chat": true,
 				children: /* @__PURE__ */ jsx(CopilotChatView_default, { ...props })
 			})]
@@ -13304,17 +13298,17 @@ CopilotSidebarView.displayName = "CopilotSidebarView";
 			})
 		});
 		return /* @__PURE__ */ jsxs("div", {
-			className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("cpk-sidebar-view-welcome-screen", className),
 			...props,
 			children: [/* @__PURE__ */ 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__ */ jsx("div", {
-				className: "cpk:px-8 cpk:pb-4",
+				className: "cpk-sidebar-view-welcome-screen-footer",
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "cpk:max-w-3xl cpk:mx-auto",
+					className: "cpk-sidebar-view-welcome-screen-content",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "cpk:mb-4 cpk:flex cpk:justify-center",
+						className: "cpk-sidebar-view-welcome-screen-suggestions",
 						children: suggestionView
 					}), input]
 				})
@@ -13428,10 +13422,9 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 		paddingLeft: "env(safe-area-inset-left)",
 		paddingRight: "env(safe-area-inset-right)"
 	}), [resolvedHeight, resolvedWidth]);
-	const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [toggleButtonElement, isRendered ? /* @__PURE__ */ 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__ */ jsxs("div", {
 			ref: containerRef,
 			tabIndex: -1,
@@ -13439,14 +13432,14 @@ function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOu
 			"aria-label": labels.modalHeaderTitle,
 			"data-testid": "copilot-popup",
 			"data-copilot-popup": true,
-			className: cn("copilotKitPopup copilotKitWindow", "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
+			className: cn("copilotKitPopup copilotKitWindow cpk-popup-view-window", isPopupOpen && !isAnimatingOut && "cpk-popup-view-window-open"),
 			style: popupStyle,
 			children: [headerElement, /* @__PURE__ */ jsx("div", {
-				className: "cpk:flex-1 cpk:overflow-hidden",
+				className: "cpk-popup-view-chat",
 				"data-popup-chat": true,
 				children: /* @__PURE__ */ jsx(CopilotChatView_default, {
 					...restProps,
-					className: cn("cpk:h-full cpk:min-h-0", className)
+					className: cn("cpk-popup-view-chat-view", className)
 				})
 			})]
 		})
@@ -13468,13 +13461,13 @@ CopilotPopupView.displayName = "CopilotPopupView";
 			})
 		});
 		return /* @__PURE__ */ jsxs("div", {
-			className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
+			className: cn("cpk-popup-view-welcome-screen", className),
 			...props,
 			children: [/* @__PURE__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-				className: "cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4",
+				className: "cpk-popup-view-welcome-screen-suggestions",
 				children: suggestionView
 			}), input] })]
 		});
@@ -13926,5 +13919,5 @@ const WildcardToolCallRender = defineToolCallRenderer({
 });
 
 //#endregion
-export { A2UI_FENCE_LANGUAGE, ACTIVITY_HISTORY_METADATA, AGUIConnectNotImplementedError, AGUIError, AGUI_METADATA_KEY, AbstractAgent, ActivityDeltaEventSchema, ActivityMessageSchema, ActivitySnapshotEventSchema, AddOperationSchema, AgentCapabilitiesSchema, AgentRegistry, AgentThreadLockedError, AssistantMessageSchema, AttributableSchema, AudioInputContentSchema, AudioInputPartSchema, AudioPartSchema, AudioRecorderError, BackwardCompatibility_0_0_39, BackwardCompatibility_0_0_45, BackwardCompatibility_0_0_57, BaseEventSchema, BaseMessageSchema, BasicMarkdownRenderer, CompatibilityBoundary, ContentPartSchema, ContextSchema, ContextStore, CopilotChat, CopilotChatAssistantMessage_default as CopilotChatAssistantMessage, CopilotChatAttachmentQueue, CopilotChatAttachmentRenderer, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatInput_default as CopilotChatInput, CopilotChatMessageView, CopilotChatReasoningMessage_default as CopilotChatReasoningMessage, CopilotChatSuggestionPill, CopilotChatSuggestionView, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToolCallGroup, CopilotChatToolCallsView, CopilotChatUserMessage_default as CopilotChatUserMessage, CopilotChatView_default as CopilotChatView, CopilotChatWorkSummary, CopilotKitCore, CopilotKitCoreErrorCode, CopilotKitCoreReact, CopilotKitCoreRuntimeConnectionStatus, CopilotKitHeaderResolutionError, CopilotKitInspector, CopilotKitProvider, CopilotModalHeader, CopilotPopup, CopilotPopupView, CopilotSidebar, CopilotSidebarView, CopilotThreadsDrawer, CopyOperationSchema, CustomEventSchema, DataSourceSchema, DebugLogger, DeveloperMessageSchema, DocumentInputContentSchema, DocumentInputPartSchema, DocumentPartSchema, EventSchema, EventSchemas, EventType, EventTypeSchema, ExecutionCapabilitiesSchema, FileSourceSchema, FilterToolCallsMiddleware, FunctionCallSchema, FunctionMiddleware, GenerateSandboxedUiArgsSchema, HttpAgent, HumanInTheLoopCapabilitiesSchema, INSPECTOR_THREAD_BRIDGE_PLUGIN_ID, INTELLIGENCE_TURN_HEAD, INTERRUPT_EVENT_NAME, IdentityCapabilitiesSchema, ImageInputContentSchema, ImageInputPartSchema, ImagePartSchema, InputContentDataSourceSchema, InputContentSchema, InputContentSourceSchema, InputContentUrlSourceSchema, IntelligenceAgent, IntelligenceIndicator, IntelligenceIndicatorView, InterruptSchema, JsonPatchOperationSchema, JsonPatchSchema, JsonPointerSchema, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, MEMORY_ERROR_REGISTRY, MarkdownRendererProvider, MemoryError, MessageSchema, MessagesSnapshotEventSchema, MetadataSchema, Middleware, MoveOperationSchema, MultiAgentCapabilitiesSchema, MultimodalCapabilitiesSchema, MultimodalInputCapabilitiesSchema, MultimodalOutputCapabilitiesSchema, OpenGenerativeUIActivityRenderer, OpenGenerativeUIActivityType, OpenGenerativeUIContentSchema, OpenGenerativeUIToolRenderer, OptionalMetadataSchema, OutputCapabilitiesSchema, PROTOCOL_VERSION, PartSourceSchema, ProxiedCopilotRuntimeAgent, RawEventSchema, ReasoningCapabilitiesSchema, ReasoningEncryptedValueEventSchema, ReasoningEncryptedValueSubtypeSchema, ReasoningEndEventSchema, ReasoningMessageChunkEventSchema, ReasoningMessageContentEventSchema, ReasoningMessageEndEventSchema, ReasoningMessageSchema, ReasoningMessageStartEventSchema, ReasoningStartEventSchema, RemoveOperationSchema, ReplaceOperationSchema, ResumeEntrySchema, RoleSchema, RunAgentInputSchema, RunErrorEventSchema, RunFinishedCancelledOutcomeSchema, RunFinishedEventSchema, RunFinishedInterruptOutcomeSchema, RunFinishedOutcomeSchema, RunFinishedSuccessOutcomeSchema, RunHandler, RunStartedEventSchema, SandboxFunctionsContext, StateCapabilitiesSchema, StateDeltaEventSchema, StateManager, StateSchema, StateSnapshotEventSchema, StepFinishedEventSchema, StepStartedEventSchema, StreamingMarkdownDefaultRenderer, SubagentErrorEventSchema, SubagentFinishedEventSchema, SubagentFinishedOutcomeSchema, SubagentFinishedSuccessOutcomeSchema, SubagentFinishedSuspendedOutcomeSchema, SubagentInfoSchema, SubagentRunIdSchema, SubagentStartedEventSchema, SuggestionEngine, SystemMessageSchema, TestOperationSchema, TextInputContentSchema, TextMessageChunkEventSchema, TextMessageContentEventSchema, TextMessageEndEventSchema, TextMessageRoleSchema, TextMessageStartEventSchema, TextPartSchema, TokenUsageSchema, ToolCallArgsEventSchema, ToolCallChunkEventSchema, ToolCallEndEventSchema, ToolCallResultEventSchema, ToolCallSchema, ToolCallStartEventSchema, ToolCallStatus, ToolMessageSchema, ToolSchema, ToolsCapabilitiesSchema, TransportCapabilitiesSchema, UrlSourceSchema, UseAgentUpdate, UserMessageSchema, VideoInputContentSchema, VideoInputPartSchema, VideoPartSchema, WebMCPRegistry, WildcardToolCallRender, a2uiDefaultTheme, aggregateTokenUsage, authoritativeActivityTypes, buildResumeArray, classifySurfaceCards, compactEvents, completePartialMarkdown, contentHasMedia, contentToText, convertToLegacyEvents, createA2UIMessageRenderer, createActionGroup, createDebugLogger, createEffect, createInspectorThreadRequestId, createReducer, createSelector, createStore, defaultApplyEvents, defineToolCallRenderer, emitInspectorActiveThread, emitInspectorStopViewing, emitInspectorViewThread, emitInspectorViewThreadResult, empty, enforceEvents, enforceOutgoingInput, ensureObjectArgs, extractCompleteArrayItems, extractFenceOperations, extractStringField, flattenInformationalCards, getIntelligenceTurnAnchors, getMarkdownOperationSurfaceId, getRunOutcome, getWebMCPModelContext, isAbortError, isInspectorThreadBridgeEnabled, isInterruptExpired, isRecognizedEvent, isRunCompletionAware, mergeMetadata, messageGroup, messageRow, ofType, omitOptionalNulls, on, onInspectorActiveThread, onInspectorStopViewing, onInspectorViewThread, onInspectorViewThreadResult, parseMarkdown, parseProtoStream, parseSSEStream, parseToolArguments, prepareSurfaceOperations, props, randomUUID, resolveAgentDebugConfig, resolveDebugLogger, runHttpRequest, segmentSurfaceProse, select, splitA2UIMarkdown, structuredClone_, tokenUsageFromAiSdkUsage, tokenUsageFromLangChainMetadata, transformChunks, transformHttpEventStream, useAgent, useAgentContext, useAttachments, useCapabilities, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useFrontendTools, useHumanInTheLoop, useInterrupt, useLearnFromUserAction, useLearnFromUserActionInCurrentThread, useLearningContainers, useLearningContainersInCurrentThread, useLicenseContext, useMarkdownRenderer, useMemories, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSandboxFunctions, useSuggestions, useThreads, verifyEvents, withAuthoritativeActivityTypes, ɵCOPILOTKIT_FEATURES, ɵInterruptState, ɵMAX_SOCKET_RETRIES, ɵRUNTIME_PROBE_TIMEOUT_MS, ɵTHREAD_REQUEST_TIMEOUT_MS, ɵclearAgentInterruptState, ɵcreateMemoryStore, ɵcreateThreadSelectors, ɵcreateThreadStore, ɵgetAgentInterruptState, ɵisCopilotKitFeature, ɵisHttpAgent, ɵisRetryableMemoryStatus, ɵjoinPhoenixChannel$, ɵmapMemoryMetadataEvent, ɵmemoryAdapterEvents, ɵmemoryDomainEvents, ɵmemoryReducer, ɵmemoryRestEvents, ɵobservePhoenixEvent$, ɵobservePhoenixJoinOutcome$, ɵobservePhoenixSocketHealth$, ɵobservePhoenixSocketSignals$, ɵphoenixChannel$, ɵphoenixSocket$, ɵrunMcpFollowUp, ɵselectFetchMoreError, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesIsMutating, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading, ɵthreadAdapterEvents, ɵwithHeaderDefaults };
+export { A2UI_FENCE_LANGUAGE, ACTIVITY_HISTORY_METADATA, AGUIConnectNotImplementedError, AGUIError, AGUI_METADATA_KEY, AbstractAgent, ActivityDeltaEventSchema, ActivityMessageSchema, ActivitySnapshotEventSchema, AddOperationSchema, AgentCapabilitiesSchema, AgentRegistry, AgentThreadLockedError, AssistantMessageSchema, AttributableSchema, AudioInputContentSchema, AudioInputPartSchema, AudioPartSchema, AudioRecorderError, BackwardCompatibility_0_0_39, BackwardCompatibility_0_0_45, BackwardCompatibility_0_0_57, BaseEventSchema, BaseMessageSchema, BasicMarkdownRenderer, CompatibilityBoundary, ContentPartSchema, ContextSchema, ContextStore, CopilotChat, CopilotChatAssistantMessage_default as CopilotChatAssistantMessage, CopilotChatAttachmentQueue, CopilotChatAttachmentRenderer, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatInput_default as CopilotChatInput, CopilotChatMessageView, CopilotChatReasoningMessage_default as CopilotChatReasoningMessage, CopilotChatSuggestionPill, CopilotChatSuggestionView, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToolCallGroup, CopilotChatToolCallsView, CopilotChatUserMessage_default as CopilotChatUserMessage, CopilotChatView_default as CopilotChatView, CopilotChatWorkSummary, CopilotKitCore, CopilotKitCoreErrorCode, CopilotKitCoreReact, CopilotKitCoreRuntimeConnectionStatus, CopilotKitHeaderResolutionError, CopilotKitInspector, CopilotKitProvider, CopilotKitStyles, CopilotModalHeader, CopilotPopup, CopilotPopupView, CopilotSidebar, CopilotSidebarView, CopilotThreadsDrawer, CopyOperationSchema, CustomEventSchema, DataSourceSchema, DebugLogger, DeveloperMessageSchema, DocumentInputContentSchema, DocumentInputPartSchema, DocumentPartSchema, EventSchema, EventSchemas, EventType, EventTypeSchema, ExecutionCapabilitiesSchema, FileSourceSchema, FilterToolCallsMiddleware, FunctionCallSchema, FunctionMiddleware, GenerateSandboxedUiArgsSchema, HttpAgent, HumanInTheLoopCapabilitiesSchema, INSPECTOR_THREAD_BRIDGE_PLUGIN_ID, INTELLIGENCE_TURN_HEAD, INTERRUPT_EVENT_NAME, IdentityCapabilitiesSchema, ImageInputContentSchema, ImageInputPartSchema, ImagePartSchema, InputContentDataSourceSchema, InputContentSchema, InputContentSourceSchema, InputContentUrlSourceSchema, IntelligenceAgent, IntelligenceIndicator, IntelligenceIndicatorView, InterruptSchema, JsonPatchOperationSchema, JsonPatchSchema, JsonPointerSchema, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, MEMORY_ERROR_REGISTRY, MarkdownRendererProvider, MemoryError, MessageSchema, MessagesSnapshotEventSchema, MetadataSchema, Middleware, MoveOperationSchema, MultiAgentCapabilitiesSchema, MultimodalCapabilitiesSchema, MultimodalInputCapabilitiesSchema, MultimodalOutputCapabilitiesSchema, OpenGenerativeUIActivityRenderer, OpenGenerativeUIActivityType, OpenGenerativeUIContentSchema, OpenGenerativeUIToolRenderer, OptionalMetadataSchema, OutputCapabilitiesSchema, PROTOCOL_VERSION, PartSourceSchema, ProxiedCopilotRuntimeAgent, RawEventSchema, ReasoningCapabilitiesSchema, ReasoningEncryptedValueEventSchema, ReasoningEncryptedValueSubtypeSchema, ReasoningEndEventSchema, ReasoningMessageChunkEventSchema, ReasoningMessageContentEventSchema, ReasoningMessageEndEventSchema, ReasoningMessageSchema, ReasoningMessageStartEventSchema, ReasoningStartEventSchema, RemoveOperationSchema, ReplaceOperationSchema, ResumeEntrySchema, RoleSchema, RunAgentInputSchema, RunErrorEventSchema, RunFinishedCancelledOutcomeSchema, RunFinishedEventSchema, RunFinishedInterruptOutcomeSchema, RunFinishedOutcomeSchema, RunFinishedSuccessOutcomeSchema, RunHandler, RunStartedEventSchema, SandboxFunctionsContext, StateCapabilitiesSchema, StateDeltaEventSchema, StateManager, StateSchema, StateSnapshotEventSchema, StepFinishedEventSchema, StepStartedEventSchema, StreamingMarkdownDefaultRenderer, SubagentErrorEventSchema, SubagentFinishedEventSchema, SubagentFinishedOutcomeSchema, SubagentFinishedSuccessOutcomeSchema, SubagentFinishedSuspendedOutcomeSchema, SubagentInfoSchema, SubagentRunIdSchema, SubagentStartedEventSchema, SuggestionEngine, SystemMessageSchema, TestOperationSchema, TextInputContentSchema, TextMessageChunkEventSchema, TextMessageContentEventSchema, TextMessageEndEventSchema, TextMessageRoleSchema, TextMessageStartEventSchema, TextPartSchema, TokenUsageSchema, ToolCallArgsEventSchema, ToolCallChunkEventSchema, ToolCallEndEventSchema, ToolCallResultEventSchema, ToolCallSchema, ToolCallStartEventSchema, ToolCallStatus, ToolMessageSchema, ToolSchema, ToolsCapabilitiesSchema, TransportCapabilitiesSchema, UrlSourceSchema, UseAgentUpdate, UserMessageSchema, VideoInputContentSchema, VideoInputPartSchema, VideoPartSchema, WebMCPRegistry, WildcardToolCallRender, a2uiDefaultTheme, aggregateTokenUsage, authoritativeActivityTypes, buildResumeArray, classifySurfaceCards, compactEvents, completePartialMarkdown, contentHasMedia, contentToText, convertToLegacyEvents, createA2UIMessageRenderer, createActionGroup, createDebugLogger, createEffect, createInspectorThreadRequestId, createReducer, createSelector, createStore, defaultApplyEvents, defineToolCallRenderer, emitInspectorActiveThread, emitInspectorStopViewing, emitInspectorViewThread, emitInspectorViewThreadResult, empty, enforceEvents, enforceOutgoingInput, ensureObjectArgs, extractCompleteArrayItems, extractFenceOperations, extractStringField, flattenInformationalCards, getIntelligenceTurnAnchors, getMarkdownOperationSurfaceId, getRunOutcome, getWebMCPModelContext, isAbortError, isInspectorThreadBridgeEnabled, isInterruptExpired, isRecognizedEvent, isRunCompletionAware, mergeMetadata, messageGroup, messageRow, ofType, omitOptionalNulls, on, onInspectorActiveThread, onInspectorStopViewing, onInspectorViewThread, onInspectorViewThreadResult, parseMarkdown, parseProtoStream, parseSSEStream, parseToolArguments, prepareSurfaceOperations, props, randomUUID, resolveAgentDebugConfig, resolveDebugLogger, runHttpRequest, segmentSurfaceProse, select, splitA2UIMarkdown, structuredClone_, tokenUsageFromAiSdkUsage, tokenUsageFromLangChainMetadata, transformChunks, transformHttpEventStream, useAgent, useAgentContext, useAttachments, useCapabilities, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useFrontendTools, useHumanInTheLoop, useInterrupt, useLearnFromUserAction, useLearnFromUserActionInCurrentThread, useLearningContainers, useLearningContainersInCurrentThread, useLicenseContext, useMarkdownRenderer, useMemories, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSandboxFunctions, useSuggestions, useThreads, verifyEvents, withAuthoritativeActivityTypes, ɵCOPILOTKIT_FEATURES, ɵInterruptState, ɵMAX_SOCKET_RETRIES, ɵRUNTIME_PROBE_TIMEOUT_MS, ɵTHREAD_REQUEST_TIMEOUT_MS, ɵclearAgentInterruptState, ɵcreateMemoryStore, ɵcreateThreadSelectors, ɵcreateThreadStore, ɵgetAgentInterruptState, ɵisCopilotKitFeature, ɵisHttpAgent, ɵisRetryableMemoryStatus, ɵjoinPhoenixChannel$, ɵmapMemoryMetadataEvent, ɵmemoryAdapterEvents, ɵmemoryDomainEvents, ɵmemoryReducer, ɵmemoryRestEvents, ɵobservePhoenixEvent$, ɵobservePhoenixJoinOutcome$, ɵobservePhoenixSocketHealth$, ɵobservePhoenixSocketSignals$, ɵphoenixChannel$, ɵphoenixSocket$, ɵrunMcpFollowUp, ɵselectFetchMoreError, ɵselectHasNextPage, ɵselectIsFetchingNextPage, ɵselectIsMutating, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesIsMutating, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading, ɵthreadAdapterEvents, ɵwithHeaderDefaults };
 //# sourceMappingURL=index.mjs.map