@agentiffai/design 0.1.10 → 0.1.12

package/dist/{Window-CF5y1_Og.d.cts → Window-BcTRumpc.d.cts}

@@ -217,7 +217,7 @@ declare const FileAttachment: React__default.FC<FileAttachmentProps>;
 interface ActionButtonType$1 {
     label: string;
     onClick: () => void;
-    icon?: React__default.ReactNode;
+    icon?: React.ReactNode;
 }
 interface AssistantMessageProps {
     /** Message content to display */
@@ -241,20 +241,7 @@ interface AssistantMessageProps {
     /** Action buttons to display */
     actions?: ActionButtonType$1[];
 }
-/**
- * AssistantMessage component displays AI assistant messages with avatar
- *
- * Features:
- * - Avatar with image or initials fallback
- * - Loading state with animated dots
- * - Streaming state indicator
- * - Markdown support (optional)
- * - Dark gray bubble (#2D2D3D) from Figma design
- * - Left-aligned layout
- * - Action buttons support
- * - Timestamp display
- */
-declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
+declare const AssistantMessage: React$1.NamedExoticComponent<AssistantMessageProps>;
 
 interface MessagesProps {
     /**
@@ -440,17 +427,7 @@ interface StreamingTextProps {
     /** Additional CSS class name */
     className?: string;
 }
-/**
- * StreamingText component with typewriter animation
- *
- * Features:
- * - Character-by-character streaming animation
- * - Configurable typing speed
- * - Optional blinking cursor
- * - Code and markdown variants
- * - Completion callback
- */
-declare const StreamingText: React.FC<StreamingTextProps>;
+declare const StreamingText: React$1.NamedExoticComponent<StreamingTextProps>;
 
 /**
  * StreamStatusIndicator Component

package/dist/{Window-CF5y1_Og.d.ts → Window-BcTRumpc.d.ts}

@@ -217,7 +217,7 @@ declare const FileAttachment: React__default.FC<FileAttachmentProps>;
 interface ActionButtonType$1 {
     label: string;
     onClick: () => void;
-    icon?: React__default.ReactNode;
+    icon?: React.ReactNode;
 }
 interface AssistantMessageProps {
     /** Message content to display */
@@ -241,20 +241,7 @@ interface AssistantMessageProps {
     /** Action buttons to display */
     actions?: ActionButtonType$1[];
 }
-/**
- * AssistantMessage component displays AI assistant messages with avatar
- *
- * Features:
- * - Avatar with image or initials fallback
- * - Loading state with animated dots
- * - Streaming state indicator
- * - Markdown support (optional)
- * - Dark gray bubble (#2D2D3D) from Figma design
- * - Left-aligned layout
- * - Action buttons support
- * - Timestamp display
- */
-declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
+declare const AssistantMessage: React$1.NamedExoticComponent<AssistantMessageProps>;
 
 interface MessagesProps {
     /**
@@ -440,17 +427,7 @@ interface StreamingTextProps {
     /** Additional CSS class name */
     className?: string;
 }
-/**
- * StreamingText component with typewriter animation
- *
- * Features:
- * - Character-by-character streaming animation
- * - Configurable typing speed
- * - Optional blinking cursor
- * - Code and markdown variants
- * - Completion callback
- */
-declare const StreamingText: React.FC<StreamingTextProps>;
+declare const StreamingText: React$1.NamedExoticComponent<StreamingTextProps>;
 
 /**
  * StreamStatusIndicator Component

package/dist/copilotkit/index.cjs

@@ -4,8 +4,8 @@ var button = require('@react-aria/button');
 var react = require('react');
 var styled4 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
-var textfield = require('@react-aria/textfield');
 var reactUi = require('@copilotkit/react-ui');
+var textfield = require('@react-aria/textfield');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -133,6 +133,8 @@ var tokens = {
     lg: "0.75rem",
     // 12px
     xl: "1rem",
+    // 16px
+    "2xl": "1.5rem",
     // 24px
     full: "9999px"
     // Fully rounded
@@ -633,7 +635,16 @@ var ActionExecutionAdapter = ({ message, inProgress }) => {
     return null;
   }
   const toolName = message.name;
-  const toolArgs = message.arguments || {};
+  let toolArgs = {};
+  if (typeof message.arguments === "string") {
+    try {
+      toolArgs = JSON.parse(message.arguments);
+    } catch {
+      toolArgs = {};
+    }
+  } else if (message.arguments && typeof message.arguments === "object") {
+    toolArgs = message.arguments;
+  }
   const state = inProgress ? "thinking" : "responding";
   const statusMessage = getToolMessage(toolName, toolArgs);
   return /* @__PURE__ */ jsxRuntime.jsxs(Container, { "data-testid": "action-execution-message", children: [
@@ -821,6 +832,9 @@ var Container3 = styled4__default.default.div`
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
+  /* Performance optimizations for streaming text */
+  text-rendering: optimizeSpeed;
+  contain: content;
 `;
 var Cursor = styled4__default.default.span`
   display: inline-block;
@@ -842,7 +856,7 @@ var Cursor = styled4__default.default.span`
     }
   }
 `;
-var StreamingText2 = ({
+var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
@@ -852,25 +866,27 @@ var StreamingText2 = ({
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = react.useState("");
+  const [displayedText, setDisplayedText] = react.useState(content);
+  const wasStreamingRef = react.useRef(isStreaming);
+  const completionCalledRef = react.useRef(false);
   react.useEffect(() => {
-    if (isStreaming) {
-      setDisplayedText(content);
-      return;
+    setDisplayedText(content);
+    if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
+      completionCalledRef.current = true;
+      onStreamComplete?.();
     }
-    if (!isStreaming && displayedText !== content) {
-      setDisplayedText(content);
-      if (onStreamComplete) {
-        onStreamComplete();
-      }
+    if (isStreaming) {
+      completionCalledRef.current = false;
     }
-  }, [content, isStreaming, onStreamComplete, displayedText]);
+    wasStreamingRef.current = isStreaming;
+  }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
 };
+var StreamingText2 = react.memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
 var MessageContainer = styled4__default.default.div`
   display: flex;
@@ -878,20 +894,9 @@ var MessageContainer = styled4__default.default.div`
   align-items: flex-start;
   padding: ${tokens.spacing.sm} 0;
   max-width: 100%;
-
-  /* Fade in and slide up animation */
-  animation: fadeInSlideUp ${tokens.animation.duration.medium} ease-out;
-
-  @keyframes fadeInSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  /* GPU acceleration hint for smooth rendering during streaming */
+  will-change: contents;
+  contain: content;
 `;
 var AvatarContainer = styled4__default.default.div`
   flex-shrink: 0;
@@ -926,9 +931,8 @@ var ContentContainer = styled4__default.default.div`
   min-width: 0;
 `;
 var MessageContent = styled4__default.default.div`
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance during streaming */
+  background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
@@ -938,24 +942,25 @@ var MessageContent = styled4__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   word-wrap: break-word;
   white-space: pre-wrap;
+  /* Optimize text rendering */
+  text-rendering: optimizeSpeed;
 `;
 var LoadingDots3 = styled4__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  background-color: ${tokens.colors.surface.glass};
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  /* Use solid color instead of backdrop-filter for performance */
+  background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
   border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
-var bounce = styled4.keyframes`
-  0%, 60%, 100% {
-    transform: translateY(0);
+var pulse2 = styled4.keyframes`
+  0%, 100% {
+    opacity: 0.4;
   }
-  30% {
-    transform: translateY(-${tokens.spacing.sm});
+  50% {
+    opacity: 1;
   }
 `;
 var LoadingDot = styled4__default.default.div`
@@ -963,7 +968,8 @@ var LoadingDot = styled4__default.default.div`
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
   background-color: ${tokens.colors.text.tertiary};
-  animation: ${bounce} 1.4s ease-in-out infinite;
+  /* Use simple opacity animation instead of transform bounce */
+  animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
 var FileAttachmentContainer = styled4__default.default.div`
@@ -1158,7 +1164,7 @@ var StreamingIndicator = styled4__default.default.span`
     }
   }
 `;
-var AssistantMessage = ({
+var AssistantMessageBase = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
@@ -1205,7 +1211,9 @@ var AssistantMessage = ({
     /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { children: renderContent() })
   ] });
 };
-var AssistantMessageAdapter = ({
+var AssistantMessage = react.memo(AssistantMessageBase);
+AssistantMessage.displayName = "AssistantMessage";
+var AssistantMessageAdapterBase = ({
   message,
   isLoading,
   isGenerating
@@ -1235,6 +1243,7 @@ var AssistantMessageAdapter = ({
     }
   );
 };
+var AssistantMessageAdapter = react.memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
 var ChatInputContainer = styled4__default.default.div`
   display: flex;
@@ -1268,7 +1277,7 @@ var SuggestionButton = styled4__default.default.button`
   font-weight: ${tokens.typography.fontWeight.regular};
   text-align: center;
   border: 1px solid ${tokens.colors.border.default};
-  border-radius: 20px;
+  border-radius: ${tokens.borderRadius.full};
   cursor: pointer;
   transition: all ${tokens.transitions.fast};
   white-space: nowrap;
@@ -1302,9 +1311,9 @@ var SuggestionButton = styled4__default.default.button`
 `;
 var InputWrapper = styled4__default.default.div`
   display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  align-items: flex-end; /* Align button to bottom when textarea expands */
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background-color: rgba(25, 25, 25, 0.4);
   border: 1px solid ${tokens.colors.border.subtle};
   border-radius: ${tokens.borderRadius.lg};
@@ -1318,7 +1327,7 @@ var InputWrapper = styled4__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled4__default.default.input`
+var InputField = styled4__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -1326,6 +1335,13 @@ var InputField = styled4__default.default.input`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   background: transparent;
+  resize: none; /* Disable manual resize, we auto-resize */
+  min-height: 24px; /* Single line height */
+  max-height: 150px; /* Max ~6 lines before scrolling */
+  overflow-y: auto;
+  line-height: 1.5;
+  padding: 0;
+  margin: 0;
 
   &::placeholder {
     color: ${tokens.colors.text.tertiary};
@@ -1381,31 +1397,29 @@ var ChatInput = ({
   isReadOnly = false,
   autoFocus = false,
   className,
-  "aria-label": ariaLabel = "Chat message input",
-  ...ariaProps
+  "aria-label": ariaLabel = "Chat message input"
+  // Note: Additional AriaTextFieldProps are accepted but not spread to textarea
+  // since useTextField is not compatible with textarea elements
 }) => {
   const [internalValue, setInternalValue] = react.useState(value);
   const inputRef = react.useRef(null);
   const currentValue = value !== void 0 ? value : internalValue;
   const setValue = onChange || setInternalValue;
-  const { inputProps } = textfield.useTextField(
-    {
-      ...ariaProps,
-      "aria-label": ariaLabel,
-      value: currentValue,
-      onChange: (newValue) => {
-        setValue(newValue);
-      },
-      isDisabled,
-      isReadOnly
-    },
-    inputRef
-  );
+  const autoResize = react.useCallback(() => {
+    const textarea = inputRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+  react.useEffect(() => {
+    autoResize();
+  }, [currentValue, autoResize]);
   const handleDirectChange = (e) => {
     setValue(e.target.value);
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
@@ -1414,6 +1428,9 @@ var ChatInput = ({
     if (currentValue.trim() && onSubmit && !isDisabled && !isReadOnly) {
       onSubmit(currentValue.trim());
       setValue("");
+      if (inputRef.current) {
+        inputRef.current.style.height = "auto";
+      }
       inputRef.current?.focus();
     }
   };
@@ -1437,16 +1454,16 @@ var ChatInput = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         InputField,
         {
-          ...inputProps,
           ref: inputRef,
-          type: "text",
+          "aria-label": ariaLabel,
           placeholder,
           onKeyDown: handleKeyDown,
           onChange: handleDirectChange,
           autoFocus,
           disabled: isDisabled,
           readOnly: isReadOnly,
-          value: currentValue
+          value: currentValue,
+          rows: 1
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1594,7 +1611,7 @@ var StyledUserMessage = styled4__default.default.button`
   && {
     background: ${tokens.colors.message.user} !important;
     color: ${tokens.colors.text.primary} !important;
-    border-radius: ${tokens.borderRadius.full} !important; /* Pill shape - fully rounded ends */
+    border-radius: ${tokens.borderRadius["2xl"]} !important; /* Rounded corners that work for multi-line */
   }
 
   /* Subtle shadow and glow effect */
@@ -1674,7 +1691,7 @@ var StyledUserMessage = styled4__default.default.button`
     }
   }
 `;
-function UserMessage({
+function UserMessageBase({
   children,
   className,
   isPressed = false,
@@ -1705,28 +1722,17 @@ function UserMessage({
     }
   );
 }
+var UserMessage = react.memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
 var UserMessageWrapper = styled4__default.default.div`
   display: flex;
   justify-content: flex-end;
   width: 100%;
   padding: ${tokens.spacing.sm} 0;
-
-  /* Fade in and slide up animation */
-  animation: fadeInSlideUp ${tokens.animation.duration.medium} ease-out;
-
-  @keyframes fadeInSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+  /* Performance optimization - isolate layout/paint */
+  contain: content;
 `;
-var UserMessageAdapter = ({
+var UserMessageAdapterBase = ({
   message,
   ImageRenderer
 }) => {
@@ -1736,8 +1742,9 @@ var UserMessageAdapter = ({
   const content = message?.content || "";
   return /* @__PURE__ */ jsxRuntime.jsx(UserMessageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { children: content }) });
 };
+var UserMessageAdapter = react.memo(UserMessageAdapterBase);
 UserMessageAdapter.displayName = "UserMessageAdapter";
-var pulse2 = styled4.keyframes`
+var pulse3 = styled4.keyframes`
   0%, 100% {
     opacity: 1;
     transform: scale(1);
@@ -1821,7 +1828,7 @@ var StatusDot = styled4__default.default.div`
       return tokens.colors.connection.reconnecting;
   }
 }};
-  animation: ${(props) => props.status === "streaming" ? pulse2 : "none"} 2s ease-in-out infinite;
+  animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
 var Label = styled4__default.default.span`
@@ -2337,8 +2344,8 @@ var StyledChatButton = styled4__default.default.button`
   height: 36px;
   border-radius: 18px;
   border: none;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
+  box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2348,7 +2355,7 @@ var StyledChatButton = styled4__default.default.button`
 
   &:hover {
     transform: scale(1.05);
-    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
+    box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
   }
 
   &:active {
@@ -2460,16 +2467,24 @@ var CustomCopilotSidebar = ({
 };
 CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
 var GlobalSidebarStyles2 = styled4.createGlobalStyle`
+  /* Override CopilotKit's content wrapper to respect safe areas in landscape */
+  @media (orientation: landscape) {
+    .copilotKitSidebarContentWrapper {
+      right: env(safe-area-inset-right, 0px) !important;
+      left: env(safe-area-inset-left, 0px) !important;
+    }
+  }
+
   /* Override CopilotKit's default positioning - keep sidebar container in place */
   /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
   .copilotKitSidebar {
     position: fixed !important;
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
+    top: calc(var(--safe-area-top, 0px) + 8px) !important;
+    right: calc(var(--safe-area-right, 0px) + 8px) !important;
+    bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+    left: calc(var(--safe-area-left, 0px) + 8px) !important;
+    width: auto !important;
+    height: auto !important;
     pointer-events: none !important;
     z-index: ${tokens.zIndex.fixed} !important;
   }
@@ -2484,16 +2499,19 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
   .copilotKitSidebar [role="dialog"] {
     /* Override CopilotKit defaults for mobile */
     position: fixed !important;
-    top: ${tokens.spacing.sm} !important;
-    right: ${tokens.spacing.sm} !important;
-    /* Reserve space for Android nav buttons - matches NavHorizontal approach */
-    bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
-    left: ${tokens.spacing.sm} !important;
-    width: calc(100vw - ${tokens.spacing.lg}) !important;
-    /* Adjust height to account for bottom safe area */
-    height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
-    max-width: calc(100vw - ${tokens.spacing.lg}) !important;
-    max-height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+    /* TOP: Account for status bar safe area (Android notch/status bar) */
+    top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+    /* RIGHT: Account for landscape notch on right side */
+    right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px)) !important;
+    /* BOTTOM: Account for horizontal navbar (52px) + safe area for Android nav buttons */
+    bottom: calc(52px + ${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px)) !important;
+    /* LEFT: Account for landscape notch on left side */
+    left: calc(${tokens.spacing.sm} + env(safe-area-inset-left, 0px)) !important;
+    width: calc(100vw - ${tokens.spacing.lg} - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
+    /* Adjust height to account for top, bottom safe areas, and navbar */
+    height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
+    max-width: calc(100vw - ${tokens.spacing.lg} - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
+    max-height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
     margin: 0 !important;
     border-radius: ${tokens.borderRadius.xl} !important;
 
@@ -2529,16 +2547,18 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
   @media (min-width: ${tokens.breakpoints.mobile}px) {
     .copilotKitSidebar [role="dialog"] {
       inset: auto !important;
-      top: ${tokens.spacing.sm} !important;
-      right: ${tokens.spacing.sm} !important;
-      /* Reserve space for Android nav buttons on desktop too */
-      bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
+      /* TOP: Account for status bar safe area */
+      top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+      /* RIGHT: Account for landscape notch on right side */
+      right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px)) !important;
+      /* BOTTOM: Account for horizontal navbar (52px) + safe area */
+      bottom: calc(52px + ${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px)) !important;
       left: auto !important;
       width: 28rem !important;
-      /* Adjust height to account for bottom safe area */
-      height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+      /* Adjust height to account for top, bottom safe areas, and navbar */
+      height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
       max-width: 28rem !important;
-      max-height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+      max-height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
     }
   }
 
@@ -2558,25 +2578,27 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
     }
   }
 
+  /* Position chat button with safe area on landscape (right side for Android controls) */
+  @media (orientation: landscape) {
+    .copilotKitSidebarContentWrapper {
+      button[aria-label="Open chat"],
+      button[aria-label="Close chat"] {
+        bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+        right: calc(var(--safe-area-right, 0px) + 8px) !important;
+        z-index: 2000 !important;
+      }
+    }
+  }
+
   /* Fix messages container background */
   .copilotKitMessages {
     background-color: transparent !important;
   }
 
-  /* Fade-in animation for new messages */
-  @keyframes messagesFadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(${tokens.spacing.sm});
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
+  /* Performance optimization for messages - no animations to reduce jitter during streaming */
   .copilotKitMessage {
-    animation: messagesFadeIn 0.3s ease-out;
+    /* contain: content isolates layout/paint to this element */
+    contain: content;
   }
 
   /* Override CopilotKit suggestions to be single-row with horizontal scroll */
@@ -2628,8 +2650,8 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
 `;
 var StyledChatButton2 = styled4__default.default.button`
   position: fixed;
-  bottom: ${tokens.spacing.sm};
-  right: ${tokens.spacing.sm};
+  bottom: calc(${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px));
+  right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px));
   width: 36px;
   height: 36px;
   border-radius: ${tokens.borderRadius.full};