@agentiffai/design 1.3.29 → 1.4.0

package/dist/index.js

@@ -1,9 +1,10 @@
 import React4, { memo, useRef, useEffect, useMemo, useState, useCallback, useId } from 'react';
-import styled57, { keyframes, css, createGlobalStyle } from 'styled-components';
+import styled58, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useButton as useButton$1 } from 'react-aria';
 import { useButton } from '@react-aria/button';
 import { TagGroup, TagList, Tag, Button, TextField, DisclosureGroup, Disclosure, DisclosurePanel, Heading } from 'react-aria-components';
+import { createPortal } from 'react-dom';
 import { useMeter } from '@react-aria/meter';
 import { useTabList, useTabPanel, useTab } from '@react-aria/tabs';
 import { Item } from '@react-stately/collections';
@@ -16,66 +17,44 @@ import { useTextField } from '@react-aria/textfield';
 // src/theme/tokens.ts
 var tokens = {
   colors: {
-    // Brand colors
     primary: "#2CB0AB",
-    // Teal (main brand color)
     secondary: "#264E68",
-    // Deep Blue
     accent: "#459FB9",
-    // Sky Blue
     seaGreen: "#4EB999",
-    // Sea Green (additional brand color)
-    // Backgrounds - dark theme optimized
     background: {
       darkest: "#0a1b2a",
-      // Darkest Blue (brand color)
       darker: "#151a26",
-      // Discord gray (preserved)
       dark: "#1b2230",
-      // Discord surface gray (preserved)
       light: "#252d3d"
-      // Discord border gray (preserved)
     },
-    // Text hierarchy
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
       tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
-    // Semantic colors
     success: "#2CB0AB",
-    // Teal (brand aligned)
     error: "#EF4444",
     warning: "#F59E0B",
     info: "#459FB9",
-    // Sky Blue (brand aligned)
-    // Status colors (for workflow/SSE events)
     status: {
       pending: "#6B7280",
       editing: "#3B82F6",
       idle: "#6B7280",
       running: "#459FB9",
-      // Sky Blue (brand aligned)
       completed: "#2CB0AB",
-      // Teal (brand aligned)
       failed: "#EF4444",
       timeout: "#F59E0B",
-      // Badge status (online/offline pattern)
       online: "#2CB0AB",
       offline: "#EF4444",
       busy: "#459FB9"
     },
-    // Connection status
     connection: {
       connected: "#2CB0AB",
-      // Teal (brand aligned)
       streaming: "#459FB9",
-      // Sky Blue (brand aligned)
       disconnected: "#EF4444",
       reconnecting: "#F59E0B"
     },
-    // Surface variants (for overlays, cards, panels)
     surface: {
       base: "#1b2230",
       elevated: "#252d3d",
@@ -86,16 +65,13 @@ var tokens = {
       glass: "rgba(255, 255, 255, 0.26)",
       glassBorder: "rgba(255, 255, 255, 0.3)"
     },
-    // UI Element colors
     border: {
       default: "rgba(255, 255, 255, 0.1)",
       subtle: "rgba(255, 255, 255, 0.05)",
       hover: "rgba(255, 255, 255, 0.2)",
       focus: "#2CB0AB",
-      // Teal (brand aligned)
       error: "#EF4444"
     },
-    // Category colors (for workflow progress badges)
     category: {
       setup: "#459FB9",
       integration: "#8B5CF6",
@@ -107,31 +83,23 @@ var tokens = {
       custom: "#6B7280",
       notion: "#6B7280"
     },
-    // Scrollbar colors
     scrollbar: {
       track: "transparent",
       thumb: "rgba(255, 255, 255, 0.2)",
       thumbHover: "rgba(255, 255, 255, 0.3)"
     },
-    // Message bubbles
     message: {
       user: "#264E68",
-      // Deep Blue (brand color)
       ai: "#1b2230",
-      // Dark background
       system: "#151a26"
-      // Darker background
     },
-    // Overlays and backdrops
     overlay: "rgba(0, 0, 0, 0.5)",
     backdrop: "rgba(27, 34, 48, 0.95)",
-    // Icon colors
     icon: {
       default: "#B4B8C5",
       muted: "#6B7280",
       active: "#2CB0AB"
     },
-    // Platform brand colors (for social media icons)
     platform: {
       facebook: "#1877F2",
       instagram: "#E4405F",
@@ -154,21 +122,13 @@ var tokens = {
     },
     fontSize: {
       xs: "0.875rem",
-      // 14px (was 12px, increased for better readability)
       sm: "1rem",
-      // 16px (was 14px, increased for better readability)
       base: "1.125rem",
-      // 18px (was 16px, increased for better readability)
       lg: "1.125rem",
-      // 18px (heading size, unchanged)
       xl: "1.25rem",
-      // 20px (heading size, unchanged)
       "2xl": "1.5rem",
-      // 24px (heading size, unchanged)
       "3xl": "1.875rem",
-      // 30px (heading size, unchanged)
       "4xl": "2.25rem"
-      // 36px (heading size, unchanged)
     },
     fontWeight: {
       light: 300,
@@ -185,34 +145,21 @@ var tokens = {
   },
   spacing: {
     xs: "0.25rem",
-    // 4px
     sm: "0.5rem",
-    // 8px
     md: "1rem",
-    // 16px
     lg: "1.5rem",
-    // 24px
     xl: "2rem",
-    // 32px
     "2xl": "3rem",
-    // 48px
     "3xl": "4rem"
-    // 64px
   },
   borderRadius: {
     none: "0",
     sm: "0.25rem",
-    // 4px
     md: "0.5rem",
-    // 8px
     lg: "0.75rem",
-    // 12px
     xl: "1rem",
-    // 16px
     "2xl": "1.5rem",
-    // 24px
     full: "9999px"
-    // Fully rounded
   },
   shadows: {
     none: "none",
@@ -335,7 +282,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container = styled57.div`
+var Container = styled58.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -347,7 +294,7 @@ var Container = styled57.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled57.div`
+var Avatar = styled58.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -358,23 +305,23 @@ var Avatar = styled57.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled57.svg`
+var HeadphonesIcon = styled58.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled57.div`
+var Content = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots = styled57.div`
+var LoadingDots = styled58.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled57.span`
+var Dot = styled58.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -392,7 +339,7 @@ var Dot = styled57.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message = styled57.span`
+var Message = styled58.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -452,7 +399,7 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var StyledContainer = styled57.div`
+var StyledContainer = styled58.div`
   display: flex;
   width: 100%;
   height: 52px;
@@ -461,7 +408,7 @@ var StyledContainer = styled57.div`
   padding: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
 `;
-var StyledOption = styled57.button`
+var StyledOption = styled58.button`
   flex: 1;
   height: 44px;
   background: ${({ $isActive }) => $isActive ? tokens.colors.primary : tokens.colors.background.light};
@@ -479,14 +426,14 @@ var StyledOption = styled57.button`
     opacity: 0.9;
   }
 `;
-var StyledLabel = styled57.span`
+var StyledLabel = styled58.span`
   font-family: Inter, sans-serif;
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-size: 14px;
   line-height: 1.5714285714285714em;
   color: ${tokens.colors.text.primary};
 `;
-var StyledBadge = styled57.span`
+var StyledBadge = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -538,64 +485,64 @@ function BillingToggle({
     )
   ] });
 }
-var StyledCard = styled57.div`
+var StyledCard = styled58.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.md};
   width: 100%;
   padding: 10px 12px;
   position: relative;
 `;
-var StyledHeader = styled57.div`
+var StyledHeader = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2px;
 `;
-var StyledBadge2 = styled57.span`
+var StyledBadge2 = styled58.span`
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-size: 13px;
   line-height: 1.4;
   color: ${tokens.colors.primary};
 `;
-var StyledLabel2 = styled57.span`
+var StyledLabel2 = styled58.span`
   font-weight: ${tokens.typography.fontWeight.bold};
   font-size: 14px;
   line-height: 1.4;
   color: ${tokens.colors.text.primary};
 `;
-var StyledDescription = styled57.p`
+var StyledDescription = styled58.p`
   font-size: 12px;
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin: 0 0 6px 0;
 `;
-var StyledDivider = styled57.div`
+var StyledDivider = styled58.div`
   width: 100%;
   height: 1px;
   background: ${tokens.colors.border.default};
   margin-bottom: 6px;
 `;
-var StyledFooter = styled57.div`
+var StyledFooter = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
-var StyledCredits = styled57.div`
+var StyledCredits = styled58.div`
   display: flex;
   align-items: center;
   gap: 6px;
 `;
-var StyledCheckIcon = styled57.svg`
+var StyledCheckIcon = styled58.svg`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 `;
-var StyledCreditsText = styled57.span`
+var StyledCreditsText = styled58.span`
   font-size: 13px;
   line-height: 1.4;
   color: ${tokens.colors.text.primary};
 `;
-var StyledExecutions = styled57.span`
+var StyledExecutions = styled58.span`
   font-size: 11px;
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
@@ -639,7 +586,7 @@ function TrialPlanCard({
     ] })
   ] });
 }
-var ChatInputContainer = styled57.div`
+var ChatInputContainer = styled58.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -655,7 +602,7 @@ var ChatInputContainer = styled57.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled57.div`
+var SuggestionsWrapper = styled58.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -664,7 +611,7 @@ var SuggestionsWrapper = styled57.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled57.button`
+var SuggestionButton = styled58.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -703,7 +650,7 @@ var SuggestionButton = styled57.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled57.div`
+var InputWrapper = styled58.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -721,7 +668,7 @@ var InputWrapper = styled57.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled57.textarea`
+var InputField = styled58.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -746,7 +693,7 @@ var InputField = styled57.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled57.button`
+var SubmitButton = styled58.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1068,30 +1015,30 @@ var TagInput = ({
     error && /* @__PURE__ */ jsx(ErrorMessage, { "data-testid": testId ? `${testId}-error` : void 0, children: error })
   ] });
 };
-var Container2 = styled57.div`
+var Container2 = styled58.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var LabelWrapper = styled57.div`
+var LabelWrapper = styled58.div`
   display: flex;
   align-items: center;
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StyledLabel3 = styled57.span`
+var StyledLabel3 = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var Required = styled57.span`
+var Required = styled58.span`
   color: ${tokens.colors.error};
   margin-left: ${tokens.spacing.xs};
 `;
-var Description = styled57.p`
+var Description = styled58.p`
   margin: ${tokens.spacing.xs} 0 ${tokens.spacing.sm} 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var TagGroupContainer = styled57.div`
+var TagGroupContainer = styled58.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -1109,15 +1056,15 @@ var TagGroupContainer = styled57.div`
     border-color: ${(props) => props.$hasError ? tokens.colors.error : tokens.colors.border.focus};
   }
 `;
-var StyledTagGroup = styled57(TagGroup)`
+var StyledTagGroup = styled58(TagGroup)`
   display: contents;
 `;
-var StyledTagList = styled57(TagList)`
+var StyledTagList = styled58(TagList)`
   display: flex;
   flex-wrap: wrap;
   gap: ${tokens.spacing.xs};
 `;
-var StyledTag = styled57(Tag)`
+var StyledTag = styled58(Tag)`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1144,13 +1091,13 @@ var StyledTag = styled57(Tag)`
     background: ${tokens.colors.accent}30;
   }
 `;
-var TagText = styled57.span`
+var TagText = styled58.span`
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var RemoveButton = styled57(Button)`
+var RemoveButton = styled58(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1185,14 +1132,14 @@ var RemoveIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
   }
 );
-var InputWrapper2 = styled57.div`
+var InputWrapper2 = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 120px;
 `;
-var StyledInput = styled57.input`
+var StyledInput = styled58.input`
   flex: 1;
   min-width: 80px;
   padding: ${tokens.spacing.xs} 0;
@@ -1216,7 +1163,7 @@ var StyledInput = styled57.input`
     cursor: not-allowed;
   }
 `;
-var AddButton = styled57.button`
+var AddButton = styled58.button`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   background: ${tokens.colors.accent};
   border: none;
@@ -1236,13 +1183,13 @@ var AddButton = styled57.button`
     cursor: not-allowed;
   }
 `;
-var HintText = styled57.p`
+var HintText = styled58.p`
   margin: ${tokens.spacing.xs} 0 0 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${(props) => props.$warning ? tokens.colors.warning : tokens.colors.text.tertiary};
   font-style: italic;
 `;
-var ErrorMessage = styled57.div`
+var ErrorMessage = styled58.div`
   margin-top: ${tokens.spacing.xs};
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
@@ -1269,12 +1216,12 @@ var indeterminateAnimation = keyframes`
     right: -90%;
   }
 `;
-var Container3 = styled57.div`
+var Container3 = styled58.div`
 	padding: ${tokens.spacing.lg};
 	width: 100%;
 	box-sizing: border-box;
 `;
-var SkeletonBox = styled57.div`
+var SkeletonBox = styled58.div`
 	width: 100%;
 	height: 200px;
 	background: linear-gradient(
@@ -1287,10 +1234,10 @@ var SkeletonBox = styled57.div`
 	animation: ${shimmer} 1.5s ease-in-out infinite;
 	border-radius: ${tokens.borderRadius.md};
 `;
-var ProgressSection = styled57.div`
+var ProgressSection = styled58.div`
 	margin-top: ${tokens.spacing.md};
 `;
-var ProgressBarContainer = styled57.div`
+var ProgressBarContainer = styled58.div`
 	width: 100%;
 	height: 4px;
 	background: ${tokens.colors.background.dark};
@@ -1298,7 +1245,7 @@ var ProgressBarContainer = styled57.div`
 	overflow: hidden;
 	position: relative;
 `;
-var ProgressBarFill = styled57.div`
+var ProgressBarFill = styled58.div`
 	height: 100%;
 	background: linear-gradient(
 		90deg,
@@ -1316,12 +1263,12 @@ var ProgressBarFill = styled57.div`
 		width: ${$percentage}%;
 	`}
 `;
-var ActivityText = styled57.div`
+var ActivityText = styled58.div`
 	margin-top: ${tokens.spacing.sm};
 	font-size: ${tokens.typography.fontSize.sm};
 	color: ${tokens.colors.text.secondary};
 `;
-var StepCounter = styled57.div`
+var StepCounter = styled58.div`
 	margin-top: ${tokens.spacing.xs};
 	font-size: ${tokens.typography.fontSize.xs};
 	color: ${tokens.colors.text.tertiary};
@@ -1368,7 +1315,7 @@ function WorkflowLoadingSkeleton({
     ] })
   ] });
 }
-var StyledButton = styled57.button`
+var StyledButton = styled58.button`
   min-height: 44px; /* Touch-friendly sizing for mobile */
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
@@ -1435,7 +1382,7 @@ var StyledButton = styled57.button`
     font-size: 0.9375rem;
   }
 `;
-var LoadingSpinner = styled57.span`
+var LoadingSpinner = styled58.span`
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -1489,7 +1436,7 @@ var AuthButton = ({
     }
   );
 };
-var StyledTextField = styled57(TextField)`
+var StyledTextField = styled58(TextField)`
   display: flex;
   flex-direction: column;
   margin-bottom: 0.25rem;
@@ -1562,11 +1509,11 @@ var StyledTextField = styled57(TextField)`
     }
   }
 `;
-var ErrorMessageContainer = styled57.div`
+var ErrorMessageContainer = styled58.div`
   min-height: 1.25rem; /* Reserve space for error message to prevent shifting */
   margin-top: 0.375rem;
 `;
-var ErrorMessage2 = styled57.span`
+var ErrorMessage2 = styled58.span`
   color: ${tokens.colors.error};
   font-size: 0.875rem;
   display: block;
@@ -1646,11 +1593,11 @@ var AuthInput = ({
     }
   );
 };
-var PasswordContainer = styled57.div`
+var PasswordContainer = styled58.div`
   position: relative;
   width: 100%;
 `;
-var ToggleButton = styled57.button`
+var ToggleButton = styled58.button`
   position: absolute;
   right: 0.5rem;
   top: calc(0.875rem + 1.5rem);
@@ -1688,7 +1635,7 @@ var ToggleButton = styled57.button`
     height: 20px;
   }
 `;
-var HintText2 = styled57.span`
+var HintText2 = styled58.span`
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   opacity: 0.8;
@@ -1763,32 +1710,37 @@ var SuccessToast = ({
     }
   }, [message, autoDismiss, autoDismissDelay, onDismiss]);
   if (!message) return null;
-  return /* @__PURE__ */ jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxs(ToastContent, { children: [
-    /* @__PURE__ */ jsx(CheckmarkIcon, { children: "\u2713" }),
-    /* @__PURE__ */ jsx(Message2, { "data-testid": "success-toast-message", children: message }),
-    /* @__PURE__ */ jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
-  ] }) });
+  return createPortal(
+    /* @__PURE__ */ jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+      /* @__PURE__ */ jsx(CheckmarkIcon, { children: "\u2713" }),
+      /* @__PURE__ */ jsx(Message2, { "data-testid": "success-toast-message", children: message }),
+      /* @__PURE__ */ jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
+    ] }) }),
+    document.body
+  );
 };
-var ToastContainer = styled57.div`
+var ToastContainer = styled58.div`
   position: fixed;
-  top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px));
+  top: calc(${tokens.spacing.md} + var(--safe-area-top, 0px));
   left: 50%;
   transform: translateX(-50%);
-  max-width: 340px;
-  background-color: ${tokens.colors.background.dark};
+  min-width: min(400px, 90vw);
+  max-width: min(600px, 95vw);
+  background: ${tokens.colors.background.darker};
   border: 1px solid ${tokens.colors.border.default};
-  color: white;
-  border-radius: ${tokens.borderRadius.md};
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  z-index: ${tokens.zIndex.toast || 1e4};
+  border-left: 3px solid ${tokens.colors.primary};
+  color: ${tokens.colors.text.primary};
+  border-radius: ${tokens.borderRadius.lg};
+  box-shadow: ${tokens.shadows.xl};
+  padding: ${tokens.spacing.md};
+  z-index: ${tokens.zIndex.toast};
   font-family: ${tokens.typography.fontFamily.primary};
-  animation: slideDown 0.3s ease-out;
+  animation: slideDown ${tokens.animation.duration.short} ${tokens.animation.easing.enter};
 
   @keyframes slideDown {
     from {
       opacity: 0;
-      transform: translateX(-50%) translateY(-12px);
+      transform: translateX(-50%) translateY(-20px);
     }
     to {
       opacity: 1;
@@ -1797,27 +1749,28 @@ var ToastContainer = styled57.div`
   }
 
   @media (max-width: 640px) {
-    max-width: 85%;
+    min-width: 90%;
+    max-width: 90%;
   }
 `;
-var ToastContent = styled57.div`
+var ToastContent = styled58.div`
   display: flex;
   align-items: center;
-  gap: ${tokens.spacing.sm};
+  gap: ${tokens.spacing.md};
 `;
-var CheckmarkIcon = styled57.span`
+var CheckmarkIcon = styled58.span`
   color: ${tokens.colors.primary};
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.bold};
   flex-shrink: 0;
 `;
-var Message2 = styled57.div`
+var Message2 = styled58.div`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
-  line-height: ${tokens.typography.lineHeight.tight};
+  line-height: ${tokens.typography.lineHeight.normal};
 `;
-var DismissButton = styled57.button`
+var DismissButton = styled58.button`
   background: none;
   border: none;
   color: ${tokens.colors.text.tertiary};
@@ -1855,7 +1808,7 @@ var WarningIconSvg = () => /* @__PURE__ */ jsx(
     )
   }
 );
-var BannerContainer = styled57.div`
+var BannerContainer = styled58.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -1865,12 +1818,12 @@ var BannerContainer = styled57.div`
   pointer-events: ${(props) => props.$isVisible ? "auto" : "none"};
   transition: opacity 0.3s ease-in-out;
 `;
-var StatusBarSpacer = styled57.div`
+var StatusBarSpacer = styled58.div`
   height: var(--safe-area-top, 0);
   background-color: ${tokens.colors.background.darkest}cc;
   backdrop-filter: blur(10px);
 `;
-var MessageContainer = styled57.div`
+var MessageContainer = styled58.div`
   background-color: ${tokens.colors.background.darkest}d9;
   backdrop-filter: blur(10px);
   color: ${tokens.colors.text.primary};
@@ -1883,13 +1836,13 @@ var MessageContainer = styled57.div`
   font-weight: 500;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 `;
-var WarningIcon = styled57.span`
+var WarningIcon = styled58.span`
   font-size: 18px;
   line-height: 1;
   display: flex;
   align-items: center;
 `;
-var Message3 = styled57.span`
+var Message3 = styled58.span`
   line-height: 1.4;
 `;
 var ErrorBanner = ({
@@ -1905,7 +1858,182 @@ var ErrorBanner = ({
     ] })
   ] });
 };
-var NavigationContainer = styled57.div`
+var ErrorToast = ({
+  title,
+  message,
+  correlationId,
+  accentColor = tokens.colors.error,
+  icon,
+  onDismiss,
+  onRetry,
+  onReconnect,
+  onCopy,
+  extraActions
+}) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!onCopy) return;
+    const success = await onCopy();
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(ToastContainer2, { $accentColor: accentColor, "data-testid": "error-toast", children: [
+      /* @__PURE__ */ jsxs(ToastContent2, { children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { children: icon }),
+        /* @__PURE__ */ jsxs(MessageWrapper, { children: [
+          /* @__PURE__ */ jsx(CategoryLabel, { $accentColor: accentColor, "data-testid": "error-toast-title", children: title }),
+          /* @__PURE__ */ jsx(Message4, { "data-testid": "error-toast-message", children: message }),
+          correlationId && /* @__PURE__ */ jsxs(CorrelationId, { "data-testid": "error-toast-correlation-id", children: [
+            "Ref: ",
+            correlationId
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsWrapper, { children: [
+        onCopy && /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            onClick: handleCopy,
+            "data-testid": "error-toast-copy",
+            title: "Copy error details for support",
+            children: copied ? "Copied" : "Copy"
+          }
+        ),
+        extraActions,
+        onReconnect && /* @__PURE__ */ jsx(ActionButton, { onClick: onReconnect, "data-testid": "error-toast-reconnect", children: "Reconnect" }),
+        onRetry && /* @__PURE__ */ jsx(ActionButton, { onClick: onRetry, "data-testid": "error-toast-retry", children: "Retry" }),
+        /* @__PURE__ */ jsx(DismissButton2, { onClick: onDismiss, children: "Dismiss" })
+      ] })
+    ] }),
+    document.body
+  );
+};
+var ToastContainer2 = styled58.div`
+  position: fixed;
+  top: calc(${tokens.spacing.md} + var(--safe-area-top, 0px));
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: min(400px, 90vw);
+  max-width: min(600px, 95vw);
+  background: ${tokens.colors.background.darker};
+  border: 1px solid ${tokens.colors.border.default};
+  border-left: 3px solid ${(props) => props.$accentColor};
+  border-right: 3px solid ${(props) => props.$accentColor};
+  color: ${tokens.colors.text.primary};
+  border-radius: ${tokens.borderRadius.lg};
+  box-shadow: ${tokens.shadows.xl};
+  padding: ${tokens.spacing.md};
+  z-index: ${tokens.zIndex.toast};
+  font-family: ${tokens.typography.fontFamily.primary};
+  animation: slideDown ${tokens.animation.duration.short} ${tokens.animation.easing.enter};
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  @media (max-width: 640px) {
+    min-width: 90%;
+    max-width: 90%;
+  }
+`;
+var ToastContent2 = styled58.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.md};
+  margin-bottom: ${tokens.spacing.md};
+`;
+var IconWrapper = styled58.div`
+  flex-shrink: 0;
+
+  img {
+    filter: brightness(0) invert(0.7);
+  }
+`;
+var MessageWrapper = styled58.div`
+  flex: 1;
+`;
+var CategoryLabel = styled58.div`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: ${tokens.spacing.xs};
+  color: ${({ $accentColor }) => $accentColor || tokens.colors.text.secondary};
+`;
+var Message4 = styled58.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+`;
+var CorrelationId = styled58.div`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-family: ${tokens.typography.fontFamily.monospace};
+  opacity: 0.7;
+  margin-top: ${tokens.spacing.xs};
+  word-break: break-all;
+`;
+var ButtonsWrapper = styled58.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+  justify-content: flex-end;
+`;
+var BaseButton = styled58.button`
+  padding: ${tokens.spacing.sm} ${tokens.spacing.lg};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  font-family: ${tokens.typography.fontFamily.primary};
+  border: none;
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  transition: all ${tokens.transitions.normal};
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var ActionButton = styled58(BaseButton)`
+  background: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.primary};
+  border: 1px solid ${tokens.colors.border.default};
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+
+  &:hover {
+    background: ${tokens.colors.background.dark};
+    border-color: ${tokens.colors.border.focus};
+  }
+`;
+var CopyButton = styled58(BaseButton)`
+  background: transparent;
+  color: ${tokens.colors.text.secondary};
+  font-size: ${tokens.typography.fontSize.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  border: 1px solid ${tokens.colors.border.default};
+
+  &:hover {
+    color: ${tokens.colors.text.primary};
+    border-color: ${tokens.colors.border.focus};
+  }
+`;
+var DismissButton2 = styled58(BaseButton)`
+  background: ${tokens.colors.primary};
+  color: ${tokens.colors.text.primary};
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var NavigationContainer = styled58.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1922,7 +2050,7 @@ var NavigationContainer = styled57.div`
     box-shadow: none !important;
   }
 `;
-var CategoryGroup = styled57.div`
+var CategoryGroup = styled58.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1934,7 +2062,7 @@ var CategoryGroup = styled57.div`
     border-radius: 0 !important;
   }
 `;
-var CategoryButton = styled57.button`
+var CategoryButton = styled58.button`
   width: 48px;
   height: 48px;
   border: none;
@@ -1959,7 +2087,7 @@ var CategoryButton = styled57.button`
     outline-offset: 2px;
   }
 `;
-var CategoryLabel = styled57.span`
+var CategoryLabel2 = styled58.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
@@ -1969,7 +2097,7 @@ var CategoryLabel = styled57.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SubItemList = styled57.div`
+var SubItemList = styled58.div`
   display: ${({ $expanded }) => $expanded ? "flex" : "none"};
   flex-direction: column;
   align-items: center;
@@ -1977,7 +2105,7 @@ var SubItemList = styled57.div`
   margin-top: ${tokens.spacing.xs};
   width: 100%;
 `;
-var SubItemButton = styled57.button`
+var SubItemButton = styled58.button`
   width: 32px;
   height: 32px;
   border: none;
@@ -2001,7 +2129,7 @@ var SubItemButton = styled57.button`
     outline-offset: 2px;
   }
 `;
-var CountBadge = styled57.span`
+var CountBadge = styled58.span`
   position: absolute;
   top: -2px;
   right: -2px;
@@ -2027,7 +2155,7 @@ var filterBadgeIn = keyframes`
     transform: scale(1);
   }
 `;
-var FilterBadge = styled57.div`
+var FilterBadge = styled58.div`
   position: absolute;
   bottom: -${tokens.spacing.xs};
   right: -${tokens.spacing.xs};
@@ -2046,13 +2174,13 @@ var FilterBadge = styled57.div`
     fill: ${tokens.colors.text.primary};
   }
 `;
-var CategoryIconImg = styled57.img`
+var CategoryIconImg = styled58.img`
   width: ${({ $size }) => $size || 24}px;
   height: ${({ $size }) => $size || 24}px;
   object-fit: contain;
   filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
 `;
-var SubItemIconImg = styled57.img`
+var SubItemIconImg = styled58.img`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
@@ -2147,7 +2275,7 @@ function CategoryNav({
           ]
         }
       ),
-      /* @__PURE__ */ jsx(CategoryLabel, { children: category.label }),
+      /* @__PURE__ */ jsx(CategoryLabel2, { children: category.label }),
       category.subItems && category.subItems.length > 0 && /* @__PURE__ */ jsx(SubItemList, { $expanded: isExpanded, children: category.subItems.map((subItem) => {
         const isSubItemActive = selectedSubItem === subItem.id;
         return /* @__PURE__ */ jsx(
@@ -2168,7 +2296,7 @@ function CategoryNav({
   }) });
 }
 CategoryNav.displayName = "CategoryNav";
-var IconWrapper = styled57.span`
+var IconWrapper2 = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2265,10 +2393,10 @@ function Icon({
   ...imgProps
 }) {
   const iconPath = getIconPath(name);
-  return /* @__PURE__ */ jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
+  return /* @__PURE__ */ jsx(IconWrapper2, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
 }
 Icon.displayName = "Icon";
-var Container4 = styled57.nav`
+var Container4 = styled58.nav`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -2288,7 +2416,7 @@ var Container4 = styled57.nav`
     background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled57.div`
+var ContentWrapper = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2306,7 +2434,7 @@ var ContentWrapper = styled57.div`
     padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
-var UserStatusSlot = styled57.div`
+var UserStatusSlot = styled58.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -2319,7 +2447,7 @@ var UserStatusSlot = styled57.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled57.div`
+var ActionButtonsSlot = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -2342,7 +2470,7 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var Container5 = styled57.nav`
+var Container5 = styled58.nav`
   position: absolute;
   top: 0;
   left: 0;
@@ -2371,7 +2499,7 @@ var Container5 = styled57.nav`
     width: 60px;
   }
 `;
-var TopSection = styled57.div`
+var TopSection = styled58.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2384,7 +2512,7 @@ var TopSection = styled57.div`
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled57.button`
+var BackButton = styled58.button`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -2420,12 +2548,12 @@ var BackButton = styled57.button`
     outline-offset: 2px;
   }
 `;
-styled57.span`
+styled58.span`
   font-size: ${tokens.typography.fontSize.xl};
   line-height: ${tokens.typography.lineHeight.tight};
   font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled57.div`
+var Separator = styled58.div`
   width: 32px;
   height: 2px;
   background-color: ${tokens.colors.background.light};
@@ -2433,7 +2561,7 @@ var Separator = styled57.div`
   margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled57.div`
+var FolderGroupsSlot = styled58.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2461,7 +2589,7 @@ var FolderGroupsSlot = styled57.div`
     padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
-var BottomSection = styled57.div`
+var BottomSection = styled58.div`
   flex: 0 1 auto; /* Natural size, can shrink when no space */
   min-height: 48px; /* At least one button visible */
   display: flex;
@@ -2489,7 +2617,7 @@ var BottomSection = styled57.div`
   scrollbar-width: thin;
   scrollbar-color: ${tokens.colors.border.default} transparent;
 `;
-var BottomButton = styled57.button`
+var BottomButton = styled58.button`
   width: 40px;
   height: 40px;
   border-radius: ${tokens.borderRadius.full};
@@ -2585,7 +2713,7 @@ function NavVertical({
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container6 = styled57.div`
+var Container6 = styled58.div`
   position: relative;
   width: 100%;
   height: 100vh;
@@ -2598,7 +2726,7 @@ var Container6 = styled57.div`
     position: relative;
   }
 `;
-var BackgroundPane = styled57.div`
+var BackgroundPane = styled58.div`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -2639,7 +2767,7 @@ var BackgroundPane = styled57.div`
     left: 60px; /* Smaller nav on mobile */
   }
 `;
-var MainPane = styled57.main`
+var MainPane = styled58.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -2717,13 +2845,13 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container7 = styled57.div`
+var Container7 = styled58.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled57.button`
+var ActionButton2 = styled58.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
@@ -2780,7 +2908,7 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
     ref
   );
   return /* @__PURE__ */ jsx(
-    ActionButton,
+    ActionButton2,
     {
       ...buttonProps,
       ref,
@@ -2828,7 +2956,7 @@ var statusColors = {
   busy: tokens.colors.status.busy,
   offline: tokens.colors.status.offline
 };
-var Container8 = styled57.button`
+var Container8 = styled58.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -2867,7 +2995,7 @@ var Container8 = styled57.button`
     opacity: 0.9;
   }
 `;
-var IconWrapper2 = styled57.div`
+var IconWrapper3 = styled58.div`
   position: relative;
   width: 36px;
   height: 36px;
@@ -2878,13 +3006,13 @@ var IconWrapper2 = styled57.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var WorkflowInfo = styled57.div`
+var WorkflowInfo = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled57.span`
+var WorkflowName = styled58.span`
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -2893,14 +3021,14 @@ var WorkflowName = styled57.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled57.span`
+var WorkflowStatus = styled58.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
   line-height: ${tokens.typography.lineHeight.tight};
   text-transform: capitalize;
 `;
-var WorkflowSubtitle = styled57.span`
+var WorkflowSubtitle = styled58.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -2910,7 +3038,7 @@ var WorkflowSubtitle = styled57.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var StatusIndicatorOuter = styled57.span`
+var StatusIndicatorOuter = styled58.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -2922,7 +3050,7 @@ var StatusIndicatorOuter = styled57.span`
   align-items: center;
   justify-content: center;
 `;
-var StatusIndicatorInner = styled57.span`
+var StatusIndicatorInner = styled58.span`
   width: 8px;
   height: 8px;
   border-radius: ${tokens.borderRadius.full};
@@ -2956,7 +3084,7 @@ function WorkflowStatusCard({
     ref
   );
   return /* @__PURE__ */ jsxs(Container8, { ...buttonProps, ref, className, $isDisabled: isDisabled, children: [
-    /* @__PURE__ */ jsxs(IconWrapper2, { children: [
+    /* @__PURE__ */ jsxs(IconWrapper3, { children: [
       icon,
       /* @__PURE__ */ jsx(StatusIndicatorOuter, { $status: status, children: /* @__PURE__ */ jsx(StatusIndicatorInner, { $status: status }) })
     ] }),
@@ -2968,7 +3096,7 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var DarkNotificationCardContainer = styled57.div`
+var DarkNotificationCardContainer = styled58.div`
   display: flex;
   flex-direction: column;
   padding: ${tokens.spacing.xs};
@@ -2979,7 +3107,7 @@ var DarkNotificationCardContainer = styled57.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled57.button`
+var DarkSectionHeader = styled58.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3005,7 +3133,7 @@ var DarkSectionHeader = styled57.button`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled57.span`
+var DarkChevronIcon = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3023,7 +3151,7 @@ var DarkChevronIcon = styled57.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled57.div`
+var DarkSectionContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -3032,7 +3160,7 @@ var DarkSectionContent = styled57.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled57.button`
+var DarkNotificationItemWrapper = styled58.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3071,7 +3199,7 @@ var DarkNotificationItemWrapper = styled57.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled57.span`
+var DarkItemIcon = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3096,7 +3224,7 @@ var DarkItemIcon = styled57.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var DarkItemText = styled57.span`
+var DarkItemText = styled58.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
@@ -3108,7 +3236,7 @@ var DarkItemText = styled57.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled57.button`
+var DarkMenuButton = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3142,7 +3270,7 @@ var DarkMenuButton = styled57.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled57.span`
+var DarkTimestamp = styled58.span`
   font-size: 10px;
   color: ${tokens.colors.text.tertiary};
   white-space: normal;
@@ -3327,7 +3455,7 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var Container9 = styled57.div`
+var Container9 = styled58.div`
   width: 100%;
   height: 100%;
   background-color: ${tokens.colors.background.dark};
@@ -3337,7 +3465,7 @@ var Container9 = styled57.div`
   font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled57.div`
+var TabListWrapper = styled58.div`
   display: flex;
   border-bottom: 2px solid ${tokens.colors.border.default};
   background-color: ${tokens.colors.surface.subtle};
@@ -3357,7 +3485,7 @@ var TabListWrapper = styled57.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled57.button`
+var TabButton = styled58.button`
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
@@ -3401,7 +3529,7 @@ var TabButton = styled57.button`
     }
   `}
 `;
-var TabPanelWrapper = styled57.div`
+var TabPanelWrapper = styled58.div`
   flex: 1;
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
@@ -3439,7 +3567,7 @@ var TabPanelWrapper = styled57.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled57.div`
+var RunsContainer = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.lg};
@@ -3452,7 +3580,7 @@ var RunsContainer = styled57.div`
     gap: ${tokens.spacing.md};
   }
 `;
-styled57.button`
+styled58.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -3489,7 +3617,7 @@ styled57.button`
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled57(DisclosureGroup)`
+var StyledDisclosureGroup = styled58(DisclosureGroup)`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -3498,7 +3626,7 @@ var StyledDisclosureGroup = styled57(DisclosureGroup)`
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled57(Disclosure)`
+var CategoryDisclosure = styled58(Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -3516,7 +3644,7 @@ var CategoryDisclosure = styled57(Disclosure)`
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled57(Button)`
+var CategoryHeader = styled58(Button)`
   width: 100%;
   padding: ${tokens.spacing.xs} 0;
   background: none;
@@ -3546,7 +3674,7 @@ var CategoryHeader = styled57(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled57.div`
+var CategoryTitle = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -3555,7 +3683,7 @@ var CategoryTitle = styled57.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-styled57.img`
+styled58.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
@@ -3566,7 +3694,7 @@ styled57.img`
     height: 14px;
   }
 `;
-var HashtagIcon = styled57.img`
+var HashtagIcon = styled58.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -3577,7 +3705,7 @@ var HashtagIcon = styled57.img`
     height: 12px;
   }
 `;
-var ChevronIcon = styled57.div`
+var ChevronIcon = styled58.div`
   display: flex;
   align-items: center;
   transition: transform ${tokens.transitions.normal};
@@ -3598,7 +3726,7 @@ var ChevronIcon = styled57.div`
     }
   }
 `;
-var CategoryDisclosurePanel = styled57(DisclosurePanel)`
+var CategoryDisclosurePanel = styled58(DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -3627,7 +3755,7 @@ var CategoryDisclosurePanel = styled57(DisclosurePanel)`
     }
   }
 `;
-var ItemContainer = styled57.div`
+var ItemContainer = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -3647,7 +3775,7 @@ var ItemContainer = styled57.div`
     background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled57(Disclosure)`
+var ItemDisclosure = styled58(Disclosure)`
   background-color: transparent;
   margin-bottom: ${tokens.spacing.xs};
   display: flex;
@@ -3662,7 +3790,7 @@ var ItemDisclosure = styled57(Disclosure)`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled57(Button)`
+var ItemHeader = styled58(Button)`
   width: 100%;
   padding: 0;
   background: none;
@@ -3680,7 +3808,7 @@ var ItemHeader = styled57(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled57(DisclosurePanel)`
+var ItemDisclosurePanel = styled58(DisclosurePanel)`
   padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -3710,7 +3838,7 @@ var ItemDisclosurePanel = styled57(DisclosurePanel)`
     }
   }
 `;
-var ItemIcon = styled57.img`
+var ItemIcon = styled58.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
@@ -3721,7 +3849,7 @@ var ItemIcon = styled57.img`
     height: 18px;
   }
 `;
-var ItemName = styled57.span`
+var ItemName = styled58.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -3739,7 +3867,7 @@ var ItemName = styled57.span`
     color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled57.span`
+var RunStatus = styled58.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3771,13 +3899,13 @@ var RunStatus = styled57.span`
     font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled57.div`
+styled58.div`
   margin-bottom: ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled57.button`
+styled58.button`
   width: 100%;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.surface.overlay};
@@ -3813,13 +3941,13 @@ styled57.button`
     margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled57.span`
+styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
   transition: transform ${tokens.transitions.normal};
   transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
 `;
-styled57.div`
+styled58.div`
   padding: ${tokens.spacing.md};
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
@@ -3839,17 +3967,17 @@ styled57.div`
     }
   }
 `;
-var MeterContainer = styled57.div`
+var MeterContainer = styled58.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled57.div`
+var MeterLabel = styled58.div`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
   margin-bottom: ${tokens.spacing.md};
   color: ${tokens.colors.text.primary};
 `;
-var MeterBar = styled57.div`
+var MeterBar = styled58.div`
   width: 100%;
   height: 24px;
   background-color: ${tokens.colors.background.darker};
@@ -3858,7 +3986,7 @@ var MeterBar = styled57.div`
   position: relative;
   margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled57.div`
+var MeterFill = styled58.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -3886,7 +4014,7 @@ var MeterFill = styled57.div`
     }
   }
 `;
-var MeterStats = styled57.div`
+var MeterStats = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   text-align: center;
@@ -3897,18 +4025,18 @@ var MeterStats = styled57.div`
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled57.div`
+var ConnectionsContainer = styled58.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled57.p`
+var ConnectionDescription = styled58.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.relaxed};
   margin-bottom: ${tokens.spacing.lg};
 `;
-var GoogleButton = styled57.button`
+var GoogleButton = styled58.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: ${tokens.typography.fontSize.sm};
@@ -4422,7 +4550,7 @@ function PaneMenus({
     /* @__PURE__ */ jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var Container10 = styled57.header`
+var Container10 = styled58.header`
   position: relative;
   width: 100%;
   height: 56px;
@@ -4485,7 +4613,7 @@ var Container10 = styled57.header`
     background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled57.img`
+var BrandLogo = styled58.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -4500,7 +4628,7 @@ var BrandLogo = styled57.img`
     max-height: 32px;
   }
 `;
-var SettingsButton = styled57.button`
+var SettingsButton = styled58.button`
   position: absolute;
   top: 50%;
   right: ${tokens.spacing.md};
@@ -4554,7 +4682,7 @@ var SettingsButton = styled57.button`
     right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled57.button`
+var BackButton2 = styled58.button`
   position: absolute;
   top: 50%;
   left: ${tokens.spacing.md};
@@ -4661,7 +4789,7 @@ function PaneSectionHeader({
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var Container11 = styled57.button`
+var Container11 = styled58.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
@@ -4710,7 +4838,7 @@ var Container11 = styled57.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled57.img`
+var LogoImage = styled58.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -4729,7 +4857,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
   return /* @__PURE__ */ jsx(Container11, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
 }
 ServiceIcon.displayName = "ServiceIcon";
-var NotificationCardContainer = styled57.div`
+var NotificationCardContainer = styled58.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -4740,7 +4868,7 @@ var NotificationCardContainer = styled57.div`
   box-shadow: ${tokens.shadows.card};
   gap: ${tokens.spacing.md};
 `;
-var SectionHeader = styled57.button`
+var SectionHeader = styled58.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4766,7 +4894,7 @@ var SectionHeader = styled57.button`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ChevronIcon2 = styled57.span`
+var ChevronIcon2 = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4784,14 +4912,14 @@ var ChevronIcon2 = styled57.span`
     height: 16px;
   }
 `;
-var SectionContent = styled57.div`
+var SectionContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding-left: 0;
   margin-top: ${tokens.spacing.xs};
 `;
-var NotificationItemWrapper = styled57.button`
+var NotificationItemWrapper = styled58.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -4828,7 +4956,7 @@ var NotificationItemWrapper = styled57.button`
     opacity: 0.5;
   }
 `;
-var ItemIcon2 = styled57.span`
+var ItemIcon2 = styled58.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4853,7 +4981,7 @@ var ItemIcon2 = styled57.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var ItemText = styled57.span`
+var ItemText = styled58.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 15px;
@@ -4862,7 +4990,7 @@ var ItemText = styled57.span`
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
 `;
-var MenuButton = styled57.button`
+var MenuButton = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5072,7 +5200,7 @@ var NotificationItemComponent = ({
   );
 };
 NotificationCard.displayName = "NotificationCard";
-var StyledUserMessage = styled57.button`
+var StyledUserMessage = styled58.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -5412,7 +5540,7 @@ var ConnectionStatusBadge = ({
   );
 };
 ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
-var Badge = styled57.span`
+var Badge = styled58.span`
   display: inline-flex;
   align-items: center;
   padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -5435,7 +5563,7 @@ var IntegrationCard = ({
   return /* @__PURE__ */ jsxs(Card, { className, "data-testid": "integration-card", children: [
     status && /* @__PURE__ */ jsx(StatusRow, { children: status }),
     /* @__PURE__ */ jsxs(ContentHeader, { children: [
-      /* @__PURE__ */ jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImage, { src: icon, alt: name }) : icon }),
+      /* @__PURE__ */ jsx(IconWrapper4, { children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImage, { src: icon, alt: name }) : icon }),
       /* @__PURE__ */ jsxs(Info, { children: [
         /* @__PURE__ */ jsx(Name, { children: name }),
         description && /* @__PURE__ */ jsx(Description2, { children: description })
@@ -5448,7 +5576,7 @@ var IntegrationCard = ({
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
-var Card = styled57.div`
+var Card = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -5468,11 +5596,11 @@ var Card = styled57.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var StatusRow = styled57.div`
+var StatusRow = styled58.div`
   display: flex;
   align-items: center;
 `;
-var ContentHeader = styled57.div`
+var ContentHeader = styled58.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -5481,7 +5609,7 @@ var ContentHeader = styled57.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var IconWrapper3 = styled57.div`
+var IconWrapper4 = styled58.div`
   width: 40px;
   height: 40px;
   display: flex;
@@ -5491,32 +5619,32 @@ var IconWrapper3 = styled57.div`
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
-var IconImage = styled57.img`
+var IconImage = styled58.img`
   width: 24px;
   height: 24px;
   object-fit: contain;
 `;
-var Info = styled57.div`
+var Info = styled58.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   flex: 1;
 `;
-var Name = styled57.h3`
+var Name = styled58.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var Description2 = styled57.p`
+var Description2 = styled58.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ActionsRow = styled57.div`
+var ActionsRow = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -5574,14 +5702,14 @@ var SecretInput = ({
   ] });
 };
 SecretInput.displayName = "SecretInput";
-var Container12 = styled57.div`
+var Container12 = styled58.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   min-width: 0;
 `;
-var Input = styled57.input`
+var Input = styled58.input`
   width: 100%;
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   padding-right: 40px;
@@ -5607,7 +5735,7 @@ var Input = styled57.input`
     cursor: not-allowed;
   }
 `;
-var VisibilityToggle = styled57.button`
+var VisibilityToggle = styled58.button`
   position: absolute;
   right: ${tokens.spacing.sm};
   top: 50%;
@@ -5743,7 +5871,7 @@ function parseInlineMarkdown(text, startKey) {
   }
   return { elements, nextKey: key };
 }
-var Container13 = styled57.div`
+var Container13 = styled58.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
@@ -5808,7 +5936,7 @@ var Container13 = styled57.div`
   h3 { font-size: 1.05em; font-weight: ${tokens.typography.fontWeight.semibold}; }
   h4 { font-size: 1em; font-weight: ${tokens.typography.fontWeight.semibold}; }
 `;
-var Cursor = styled57.span`
+var Cursor = styled58.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -5864,7 +5992,7 @@ var StreamingTextBase = ({
 };
 var StreamingText = memo(StreamingTextBase);
 StreamingText.displayName = "StreamingText";
-var MessageContainer2 = styled57.div`
+var MessageContainer2 = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -5874,20 +6002,20 @@ var MessageContainer2 = styled57.div`
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled57.div`
+var AvatarContainer = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled57.img`
+var Avatar2 = styled58.img`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled57.div`
+var AvatarInitials = styled58.div`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
@@ -5905,16 +6033,16 @@ var AvatarInitials = styled57.div`
     object-fit: contain;
   }
 `;
-var AvatarLabel = styled57.span`
+var AvatarLabel = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var ContentContainer = styled57.div`
+var ContentContainer = styled58.div`
   width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled57.div`
+var MessageContent = styled58.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm};
@@ -5928,7 +6056,7 @@ var MessageContent = styled57.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots2 = styled57.div`
+var LoadingDots2 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
@@ -5945,7 +6073,7 @@ var pulse2 = keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled57.div`
+var LoadingDot = styled58.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -5954,7 +6082,7 @@ var LoadingDot = styled57.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled57.div`
+var FileAttachmentContainer = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5990,7 +6118,7 @@ var FileAttachmentContainer = styled57.div`
     }
   `}
 `;
-var FileIconContainer = styled57.div`
+var FileIconContainer = styled58.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -6000,14 +6128,14 @@ var FileIconContainer = styled57.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled57.div`
+var FileInfo = styled58.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled57.div`
+var FileTitle = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -6017,7 +6145,7 @@ var FileTitle = styled57.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled57.div`
+var FileMetadata = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6027,7 +6155,7 @@ var FileMetadata = styled57.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled57.span`
+var FileSubtitle = styled58.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -6083,13 +6211,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled57.div`
+var AttachmentsContainer = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton2 = styled57.button`
+var ActionButton3 = styled58.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6113,19 +6241,19 @@ var ActionButton2 = styled57.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer = styled57.div`
+var ActionsContainer = styled58.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled57.time`
+var MessageTime = styled58.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled57.span`
+var StreamingIndicator = styled58.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -6182,7 +6310,7 @@ var AssistantMessageBase = ({
       ] }),
       attachments.length > 0 && /* @__PURE__ */ jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) }),
       timestamp && /* @__PURE__ */ jsx(MessageTime, { children: timestamp }),
-      actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton2, { onClick: action.onClick, children: [
+      actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton3, { onClick: action.onClick, children: [
         action.icon,
         action.label
       ] }, index)) })
@@ -6221,11 +6349,11 @@ function stripToolCallMarkers(content) {
   stripped = stripped.replace(/[",]*\s*"[a-z_]+":\s*"[^"]*"\s*\}["]?/gi, "");
   return stripped.trim();
 }
-var GenerativeUIContainer = styled57.div`
+var GenerativeUIContainer = styled58.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-styled57.div`
+styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -6237,12 +6365,12 @@ styled57.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-styled57.span`
+styled58.span`
   display: flex;
   align-items: center;
   color: ${tokens.colors.primary};
 `;
-styled57.span`
+styled58.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
@@ -6383,7 +6511,7 @@ var sizeStyles = {
     height: 44px;
   `
 };
-var StyledButton2 = styled57.button`
+var StyledButton2 = styled58.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -6466,7 +6594,7 @@ function Button2({
   );
 }
 Button2.displayName = "Button";
-var ActionsContainer2 = styled57.div`
+var ActionsContainer2 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
@@ -6526,7 +6654,7 @@ var blink = keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled57.div`
+var ResponseContainer = styled58.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -6538,13 +6666,13 @@ var ResponseContainer = styled57.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots3 = styled57.div`
+var LoadingDots3 = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled57.span`
+var Dot2 = styled58.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -6552,7 +6680,7 @@ var Dot2 = styled57.span`
   animation: ${dotPulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled57.div`
+var TypingIndicator = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6565,14 +6693,14 @@ var TypingIndicator = styled57.div`
     animation: ${dotPulse2} 1.4s ease-in-out infinite;
   }
 `;
-var Message4 = styled57.span`
+var Message5 = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.primary};
   font-weight: ${tokens.typography.fontWeight.regular};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-var StreamingText2 = styled57.div`
+var StreamingText2 = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -6605,7 +6733,7 @@ var Response = ({
         /* @__PURE__ */ jsx(Dot2, { delay: 0.15 }),
         /* @__PURE__ */ jsx(Dot2, { delay: 0.3 })
       ] }),
-      /* @__PURE__ */ jsx(Message4, { children: message })
+      /* @__PURE__ */ jsx(Message5, { children: message })
     ] });
   }
   if (isTyping) {
@@ -6615,7 +6743,7 @@ var Response = ({
         /* @__PURE__ */ jsx(Dot2, { delay: 0.15 }),
         /* @__PURE__ */ jsx(Dot2, { delay: 0.3 })
       ] }),
-      /* @__PURE__ */ jsx(Message4, { children: message })
+      /* @__PURE__ */ jsx(Message5, { children: message })
     ] });
   }
   if (isStreaming && streamingContent) {
@@ -6644,7 +6772,7 @@ var shake = keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled57.div`
+var AgentStateContainer = styled58.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -6658,35 +6786,35 @@ var AgentStateContainer = styled57.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled57.div`
+var StateContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled57.div`
+var IdleIndicator = styled58.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.status.idle};
   border-radius: ${tokens.borderRadius.full};
   animation: ${dotPulse3} 2s infinite ease-in-out;
 `;
-var ErrorIndicator = styled57.div`
+var ErrorIndicator = styled58.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.error};
   border-radius: ${tokens.borderRadius.full};
   animation: ${shake} 0.5s ease-in-out;
 `;
-var StateLabel = styled57.span`
+var StateLabel = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.regular};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-styled57.p`
+styled58.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -6694,7 +6822,7 @@ styled57.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled57.div`
+var ProgressBar = styled58.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -6702,7 +6830,7 @@ var ProgressBar = styled57.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill2 = styled57.div`
+var ProgressBarFill2 = styled58.div`
   height: 100%;
   width: ${(props) => Math.min(Math.max(props.progress, 0), 100)}%;
   background: linear-gradient(135deg, ${tokens.colors.accent} 0%, ${tokens.colors.primary} 100%);
@@ -6731,7 +6859,7 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var FooterContainer = styled57.footer`
+var FooterContainer = styled58.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6740,7 +6868,7 @@ var FooterContainer = styled57.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled57.div`
+var FooterContent = styled58.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6753,13 +6881,13 @@ var FooterContent = styled57.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled57.div`
+var FooterBranding = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled57.div`
+var FooterStatus = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6769,7 +6897,7 @@ var FooterStatus = styled57.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled57.a`
+var FooterLink = styled58.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -6827,7 +6955,7 @@ var pulse3 = keyframes`
     transform: scale(1.1);
   }
 `;
-var Container14 = styled57.div`
+var Container14 = styled58.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -6843,7 +6971,7 @@ var Container14 = styled57.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled57.div`
+var StatusDot = styled58.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -6904,7 +7032,7 @@ var StatusDot = styled57.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled57.span`
+var Label = styled58.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -6931,7 +7059,7 @@ var Label = styled57.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled57.div`
+var BadgeContainer = styled58.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -7008,7 +7136,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsx(Container14, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled57.header`
+var HeaderContainer = styled58.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -7024,14 +7152,14 @@ var HeaderContainer = styled57.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled57.div`
+var HeaderContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled57.h1`
+var HeaderTitle = styled58.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -7042,7 +7170,7 @@ var HeaderTitle = styled57.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled57.p`
+var HeaderSubtitle = styled58.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -7052,13 +7180,13 @@ var HeaderSubtitle = styled57.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled57.div`
+var HeaderActions = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton3 = styled57.button`
+var ActionButton4 = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7140,7 +7268,7 @@ var Header = ({
       subtitle && /* @__PURE__ */ jsx(HeaderSubtitle, { children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs(HeaderActions, { children: [
-      onMinimize && /* @__PURE__ */ jsx(ActionButton3, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxs(
+      onMinimize && /* @__PURE__ */ jsx(ActionButton4, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxs(
         "svg",
         {
           width: "16",
@@ -7155,7 +7283,7 @@ var Header = ({
           ]
         }
       ) }),
-      onClose && /* @__PURE__ */ jsx(ActionButton3, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxs(
+      onClose && /* @__PURE__ */ jsx(ActionButton4, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxs(
         "svg",
         {
           width: "16",
@@ -7175,13 +7303,13 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var InputContainer = styled57.div`
+var InputContainer = styled58.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper3 = styled57.div`
+var InputWrapper3 = styled58.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -7201,7 +7329,7 @@ var InputWrapper3 = styled57.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled57.textarea`
+var TextArea = styled58.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -7247,7 +7375,7 @@ var TextArea = styled57.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled57.button`
+var SendButton = styled58.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -7377,7 +7505,7 @@ var Input2 = ({
     )
   ] }) });
 };
-var MessagesContainer = styled57.div`
+var MessagesContainer = styled58.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7406,7 +7534,7 @@ var Messages = ({
   return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var MessagesListContainer = styled57.div`
+var MessagesListContainer = styled58.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -7446,7 +7574,7 @@ var MessagesListContainer = styled57.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled57.div`
+var MessagesListContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -7562,7 +7690,7 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled57.div`
+var StyledUserMessage2 = styled58.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -7570,7 +7698,7 @@ var StyledUserMessage2 = styled57.div`
   padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled57.div`
+var MessageBubble = styled58.div`
   display: flex;
   flex-direction: column;
   max-width: 85%;
@@ -7597,7 +7725,7 @@ var MessageBubble = styled57.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled57.p`
+var MessageContent2 = styled58.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -7606,13 +7734,13 @@ var MessageContent2 = styled57.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled57.time`
+var MessageTime2 = styled58.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton4 = styled57.button`
+var ActionButton5 = styled58.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -7636,12 +7764,12 @@ var ActionButton4 = styled57.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled57.div`
+var ActionsContainer3 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var Avatar3 = styled57.img`
+var Avatar3 = styled58.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -7672,7 +7800,7 @@ var UserMessage2 = ({
         }
       ) }),
       timestamp && /* @__PURE__ */ jsx(MessageTime2, { children: timestamp }),
-      actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton4, { onClick: action.onClick, children: [
+      actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton5, { onClick: action.onClick, children: [
         action.icon,
         action.label
       ] }, index)) })
@@ -7680,7 +7808,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled57.div`
+var ErrorContainer = styled58.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -7694,7 +7822,7 @@ var ErrorContainer = styled57.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled57.div`
+var IconContainer = styled58.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -7711,29 +7839,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
   }
 );
-var Content2 = styled57.div`
+var Content2 = styled58.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage3 = styled57.div`
+var ErrorMessage3 = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled57.div`
+var ErrorDetails = styled58.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled57.div`
+var Actions2 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button3 = styled57.button`
+var Button3 = styled58.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -7762,7 +7890,7 @@ var Button3 = styled57.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled57.button`
+var CloseButton = styled58.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -7821,7 +7949,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled57.div`
+var SuggestionsContainer = styled58.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -7854,7 +7982,7 @@ var SuggestionsContainer = styled57.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled57.button`
+var StyledSuggestion = styled58.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -7927,7 +8055,7 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
-var WindowContainer = styled57.div`
+var WindowContainer = styled58.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -8106,7 +8234,7 @@ function FacebookIcon({
   ) });
 }
 FacebookIcon.displayName = "FacebookIcon";
-var StyledIconWrapper = styled57.button`
+var StyledIconWrapper = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -8376,7 +8504,7 @@ function InstagramIcon({
   ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
-var StyledIconWrapper2 = styled57.button`
+var StyledIconWrapper2 = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -8512,7 +8640,7 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
-var StyledIconWrapper3 = styled57.button`
+var StyledIconWrapper3 = styled58.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9149,7 +9277,7 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
-var StyledXIcon = styled57.svg`
+var StyledXIcon = styled58.svg`
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
@@ -9537,9 +9665,9 @@ var PostApprovalControls = ({
         ) })
       ] }),
       /* @__PURE__ */ jsxs(Actions3, { children: [
-        /* @__PURE__ */ jsx(ActionButton5, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
+        /* @__PURE__ */ jsx(ActionButton6, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
         onSave && /* @__PURE__ */ jsx(
-          ActionButton5,
+          ActionButton6,
           {
             $variant: "save",
             onClick: handleSave,
@@ -9548,7 +9676,7 @@ var PostApprovalControls = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          ActionButton5,
+          ActionButton6,
           {
             $variant: "approve",
             onClick: handleApprove,
@@ -9558,14 +9686,14 @@ var PostApprovalControls = ({
         )
       ] })
     ] }) : /* @__PURE__ */ jsxs(Actions3, { children: [
-      /* @__PURE__ */ jsx(ActionButton5, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
-      /* @__PURE__ */ jsx(ActionButton5, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
-      /* @__PURE__ */ jsx(ActionButton5, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
+      /* @__PURE__ */ jsx(ActionButton6, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
+      /* @__PURE__ */ jsx(ActionButton6, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
+      /* @__PURE__ */ jsx(ActionButton6, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
     ] }) })
   ] });
 };
 PostApprovalControls.displayName = "PostApprovalControls";
-var Container15 = styled57.div`
+var Container15 = styled58.div`
   display: grid;
   gap: 0;
   background: ${tokens.colors.background.dark};
@@ -9575,7 +9703,7 @@ var Container15 = styled57.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header2 = styled57.div`
+var Header2 = styled58.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -9589,7 +9717,7 @@ var Header2 = styled57.div`
     background: ${tokens.colors.background.light};
   }
 `;
-var StatusBadge = styled57.span`
+var StatusBadge = styled58.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -9600,23 +9728,23 @@ var StatusBadge = styled57.span`
   color: ${({ $color }) => $color};
   white-space: nowrap;
 `;
-var MetaInfo = styled57.div`
+var MetaInfo = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   min-width: 0;
 `;
-var PostId = styled57.span`
+var PostId = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   font-family: ${tokens.typography.fontFamily.monospace};
 `;
-var ErrorText = styled57.span`
+var ErrorText = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CollapseIcon = styled57.span`
+var CollapseIcon = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.medium};
@@ -9626,17 +9754,17 @@ var CollapseIcon = styled57.span`
   align-items: center;
   justify-content: center;
 `;
-var Content3 = styled57.div`
+var Content3 = styled58.div`
   display: grid;
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.default};
 `;
-var EditSection = styled57.div`
+var EditSection = styled58.div`
   display: grid;
   gap: ${tokens.spacing.xs};
 `;
-var EditLabel = styled57.label`
+var EditLabel = styled58.label`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -9645,7 +9773,7 @@ var EditLabel = styled57.label`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CharCount = styled57.span`
+var CharCount = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.monospace};
@@ -9655,7 +9783,7 @@ var CharCount = styled57.span`
   return tokens.colors.success;
 }};
 `;
-var EditTextarea = styled57.textarea`
+var EditTextarea = styled58.textarea`
   width: 100%;
   min-height: 100px;
   padding: ${tokens.spacing.sm};
@@ -9685,14 +9813,14 @@ var EditTextarea = styled57.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var ProgressBar2 = styled57.div`
+var ProgressBar2 = styled58.div`
   width: 100%;
   height: 3px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressFill = styled57.div`
+var ProgressFill = styled58.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -9703,12 +9831,12 @@ var ProgressFill = styled57.div`
   return tokens.colors.success;
 }};
 `;
-var Actions3 = styled57.div`
+var Actions3 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   justify-content: flex-end;
 `;
-var ActionButton5 = styled57.button`
+var ActionButton6 = styled58.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.md};
   font-size: ${tokens.typography.fontSize.sm};
@@ -9942,7 +10070,7 @@ var fadeIn2 = keyframes`
     transform: translateY(0);
   }
 `;
-var CardContainer = styled57.div`
+var CardContainer = styled58.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
@@ -9955,7 +10083,7 @@ var CardContainer = styled57.div`
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
   }
 `;
-var PlatformHeader = styled57.div`
+var PlatformHeader = styled58.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -9963,7 +10091,7 @@ var PlatformHeader = styled57.div`
   padding-bottom: ${tokens.spacing.sm};
   border-bottom: 1px solid ${tokens.colors.border.default};
 `;
-var PlatformIcon = styled57.span`
+var PlatformIcon = styled58.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9975,13 +10103,13 @@ var PlatformIcon = styled57.span`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var PlatformName = styled57.span`
+var PlatformName = styled58.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var CharacterBadge = styled57.span`
+var CharacterBadge = styled58.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
   font-size: 11px;
@@ -9993,10 +10121,10 @@ var CharacterBadge = styled57.span`
   return tokens.colors.success;
 }};
 `;
-var ContentSection = styled57.div`
+var ContentSection = styled58.div`
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PostContent = styled57.div`
+var PostContent = styled58.div`
   font-size: ${tokens.typography.fontSize.base};
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: 1.6;
@@ -10008,7 +10136,7 @@ var PostContent = styled57.div`
   /* Smooth fade-in animation when content appears */
   animation: ${fadeIn2} 0.4s ease-out;
 `;
-var PostContentEditable = styled57.textarea`
+var PostContentEditable = styled58.textarea`
   width: 100%;
   min-height: 180px;
   max-height: 300px;
@@ -10037,12 +10165,12 @@ var PostContentEditable = styled57.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var HashtagsContainer = styled57.div`
+var HashtagsContainer = styled58.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 `;
-var HashtagPill = styled57.span`
+var HashtagPill = styled58.span`
   display: inline-block;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
@@ -10059,17 +10187,17 @@ var HashtagPill = styled57.span`
     color: ${tokens.colors.primary};
   }
 `;
-var ProgressBarContainer2 = styled57.div`
+var ProgressBarContainer2 = styled58.div`
   margin-top: ${tokens.spacing.sm};
 `;
-var ProgressBarTrack = styled57.div`
+var ProgressBarTrack = styled58.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill3 = styled57.div`
+var ProgressBarFill3 = styled58.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -10080,7 +10208,7 @@ var ProgressBarFill3 = styled57.div`
   return tokens.colors.success;
 }};
 `;
-var ImageChangeButton = styled57.button`
+var ImageChangeButton = styled58.button`
   display: block;
   width: 100%;
   padding: 0;
@@ -10089,21 +10217,21 @@ var ImageChangeButton = styled57.button`
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 `;
-var ImagePreviewContainer = styled57.div`
+var ImagePreviewContainer = styled58.div`
   position: relative;
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
   border: 1px solid ${tokens.colors.border.default};
 `;
-var ImagePreview = styled57.img`
+var ImagePreview = styled58.img`
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   display: block;
 `;
-var ImageOverlay = styled57.div`
+var ImageOverlay = styled58.div`
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -10122,12 +10250,12 @@ var ImageOverlay = styled57.div`
     opacity: 0.6;
   }
 `;
-var OverlayText = styled57.span`
+var OverlayText = styled58.span`
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var ImagePlaceholder = styled57.div`
+var ImagePlaceholder = styled58.div`
   width: 100%;
   height: 200px;
   background: linear-gradient(
@@ -10157,7 +10285,7 @@ var ImagePlaceholder = styled57.div`
     }
   `}
 `;
-var PlaceholderIcon = styled57.div`
+var PlaceholderIcon = styled58.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
@@ -10179,13 +10307,13 @@ var shimmer2 = keyframes`
     background-position: 200% 0;
   }
 `;
-var SkeletonContent = styled57.div`
+var SkeletonContent = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm} 0;
 `;
-var SkeletonLine = styled57.div`
+var SkeletonLine = styled58.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -10286,13 +10414,13 @@ var PlatformCarousel = ({
   ] });
 };
 PlatformCarousel.displayName = "PlatformCarousel";
-var CarouselContainer = styled57.div`
+var CarouselContainer = styled58.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: ${tokens.spacing.md};
 `;
-var TabsContainer = styled57.div`
+var TabsContainer = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
@@ -10306,7 +10434,7 @@ var TabsContainer = styled57.div`
     display: none;
   }
 `;
-var PlatformTab = styled57.button`
+var PlatformTab = styled58.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -10332,17 +10460,17 @@ var PlatformTab = styled57.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var PlatformIcon2 = styled57.span`
+var PlatformIcon2 = styled58.span`
   font-size: ${tokens.typography.fontSize.base};
   color: ${({ $platformColor }) => $platformColor};
   transition: color ${tokens.transitions.fast};
 `;
-var ContentContainer2 = styled57.div`
+var ContentContainer2 = styled58.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
 `;
-var Slide = styled57.div`
+var Slide = styled58.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
   top: 0;
   left: 0;
@@ -10355,13 +10483,13 @@ var Slide = styled57.div`
     transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
   pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
 `;
-var NavigationDotsContainer = styled57.div`
+var NavigationDotsContainer = styled58.div`
   display: flex;
   justify-content: center;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
 `;
-var NavigationDot = styled57.button`
+var NavigationDot = styled58.button`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -10381,7 +10509,7 @@ var NavigationDot = styled57.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var EmptyState = styled57.div`
+var EmptyState = styled58.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10440,7 +10568,7 @@ var PlatformGrid = ({
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
-var Grid = styled57.div`
+var Grid = styled58.div`
   display: grid;
   gap: ${tokens.spacing.md};
   width: 100%;
@@ -10460,7 +10588,7 @@ var Grid = styled57.div`
     grid-template-columns: repeat(3, 1fr);
   }
 `;
-var GridCell = styled57.div`
+var GridCell = styled58.div`
   min-width: 0; /* Prevent grid blowout with long content */
   cursor: pointer;
   border-radius: ${tokens.borderRadius.lg};
@@ -10470,7 +10598,7 @@ var GridCell = styled57.div`
     transform: translateY(-2px);
   }
 `;
-var EmptyState2 = styled57.div`
+var EmptyState2 = styled58.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10479,12 +10607,12 @@ var EmptyState2 = styled57.div`
   border: 1px dashed ${tokens.colors.border.hover};
   border-radius: ${tokens.borderRadius.lg};
 `;
-var EmptyStateText = styled57.p`
+var EmptyStateText = styled58.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var Container16 = styled57.div`
+var Container16 = styled58.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -10498,7 +10626,7 @@ var Container16 = styled57.div`
   );
   overflow: auto;
 `;
-var Header3 = styled57.div`
+var Header3 = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10524,7 +10652,7 @@ var Header3 = styled57.div`
     pointer-events: none;
   }
 `;
-var Title = styled57.h2`
+var Title = styled58.h2`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -10534,12 +10662,12 @@ var Title = styled57.h2`
   text-overflow: ellipsis;
   min-width: 0;
 `;
-var ViewToggle = styled57.div`
+var ViewToggle = styled58.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var ToggleButton2 = styled57.button`
+var ToggleButton2 = styled58.button`
   padding: ${tokens.spacing.xs};
   width: 32px;
   height: 32px;
@@ -10567,7 +10695,7 @@ var ToggleButton2 = styled57.button`
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
   }
 `;
-var Content4 = styled57.div`
+var Content4 = styled58.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -10576,7 +10704,7 @@ var Content4 = styled57.div`
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;
-var EmptyState3 = styled57.div`
+var EmptyState3 = styled58.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10604,7 +10732,7 @@ var EmptyState3 = styled57.div`
     font-size: ${tokens.typography.fontSize.sm};
   }
 `;
-var PostCount = styled57.span`
+var PostCount = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -10855,7 +10983,19 @@ var renderSimpleMarkdown = (text) => {
     }
     if (segment.startsWith("{{CODE:")) {
       const content = segment.slice(7, -2);
-      return /* @__PURE__ */ jsx("code", { style: { background: "rgba(255,255,255,0.1)", padding: "0 4px", borderRadius: "3px", fontFamily: "monospace" }, children: content }, i);
+      return /* @__PURE__ */ jsx(
+        "code",
+        {
+          style: {
+            background: "rgba(255,255,255,0.1)",
+            padding: "0 4px",
+            borderRadius: "3px",
+            fontFamily: "monospace"
+          },
+          children: content
+        },
+        i
+      );
     }
     return segment;
   });
@@ -10968,16 +11108,21 @@ var RedditOpportunityCard = ({
           ] }),
           !condensed && opportunity.postContent && /* @__PURE__ */ jsx(PostContent2, { children: truncateText(opportunity.postContent, 300) }),
           /* @__PURE__ */ jsxs(PostAuthor, { children: [
-            "Posted by u/",
-            opportunity.postAuthor || "unknown",
-            opportunity.flair && /* @__PURE__ */ jsx(PostFlair, { children: opportunity.flair })
+            /* @__PURE__ */ jsxs(PostAuthorLine, { children: [
+              /* @__PURE__ */ jsx("span", { children: "Posted by" }),
+              opportunity.flair && /* @__PURE__ */ jsx(PostFlair, { children: opportunity.flair })
+            ] }),
+            /* @__PURE__ */ jsxs(PostAuthorName, { children: [
+              "u/",
+              opportunity.postAuthor || "unknown"
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs(ReplySection, { children: [
           /* @__PURE__ */ jsxs(ReplySectionHeader, { children: [
             /* @__PURE__ */ jsx(ReplyLabel, { children: "Your Draft Reply" }),
-            /* @__PURE__ */ jsxs(ReplyMeta, { children: [
+            /* @__PURE__ */ jsxs(ReplyMetaRow, { children: [
               /* @__PURE__ */ jsx(ToneBadge, { tone: opportunity.toneMatch }),
               /* @__PURE__ */ jsxs(CharacterCount, { $color: charLimitColor, children: [
                 charCount,
@@ -11023,13 +11168,13 @@ var shimmer3 = keyframes`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 `;
-var Icon2 = styled57.img`
+var Icon2 = styled58.img`
   width: 14px;
   height: 14px;
   vertical-align: middle;
   opacity: 0.8;
 `;
-var CardContainer2 = styled57.div`
+var CardContainer2 = styled58.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.lg};
@@ -11047,7 +11192,7 @@ var CardContainer2 = styled57.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var CardHeader = styled57.div`
+var CardHeader = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11060,12 +11205,12 @@ var CardHeader = styled57.div`
     align-items: flex-start;
   }
 `;
-var HeaderLeft = styled57.div`
+var HeaderLeft = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var SubredditBadgeContainer = styled57.span`
+var SubredditBadgeContainer = styled58.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11077,15 +11222,20 @@ var SubredditBadgeContainer = styled57.span`
   color: ${({ $color }) => $color};
   border: 1px solid ${({ $color }) => `${$color}40`};
   transition: all ${tokens.transitions.fast};
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.xs};
+    padding: 2px ${tokens.spacing.xs};
+  }
 `;
-var SubredditLink = styled57.a`
+var SubredditLink = styled58.a`
   text-decoration: none;
 
   &:hover ${SubredditBadgeContainer} {
     background: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ScoreBadgeContainer = styled57.div`
+var ScoreBadgeContainer = styled58.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
@@ -11093,43 +11243,55 @@ var ScoreBadgeContainer = styled57.div`
   border-radius: ${tokens.borderRadius.md};
   background: ${({ $color }) => `${$color}20`};
   border: 1px solid ${({ $color }) => `${$color}40`};
+
+  @media (max-width: 480px) {
+    padding: 2px ${tokens.spacing.xs};
+  }
 `;
-var ScoreValue = styled57.span`
+var ScoreValue = styled58.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-weight: ${tokens.typography.fontWeight.bold};
   color: ${tokens.colors.text.primary};
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.sm};
+  }
 `;
-var ScoreMax = styled57.span`
+var ScoreMax = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
 `;
-var ScoreLabel = styled57.span`
+var ScoreLabel = styled58.span`
   margin-left: ${tokens.spacing.xs};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var StatsContainer = styled57.div`
+var StatsContainer = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatItem = styled57.span`
+var StatItem = styled58.span`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatValue = styled57.span`
+var StatValue = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.xs};
+  }
 `;
-var StatDivider = styled57.span`
+var StatDivider = styled58.span`
   color: ${tokens.colors.text.tertiary};
 `;
-var PostPreviewSection = styled57.div`
+var PostPreviewSection = styled58.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var PostTitle = styled57.a`
+var PostTitle = styled58.a`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -11139,63 +11301,117 @@ var PostTitle = styled57.a`
   text-decoration: none;
   line-height: ${tokens.typography.lineHeight.tight};
   margin-bottom: ${tokens.spacing.sm};
+  word-break: break-word;
+  overflow-wrap: break-word;
 
   &:hover {
     color: ${tokens.colors.primary};
   }
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.base};
+  }
 `;
-var ExternalLinkIcon = styled57.span`
+var ExternalLinkIcon = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   flex-shrink: 0;
 `;
-var PostContent2 = styled57.p`
+var PostContent2 = styled58.p`
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.relaxed};
   margin-bottom: ${tokens.spacing.sm};
   white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.sm};
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+  }
 `;
-var PostAuthor = styled57.div`
+var PostAuthor = styled58.div`
   display: flex;
-  align-items: center;
-  gap: ${tokens.spacing.sm};
+  flex-direction: column;
+  gap: 2px;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.xs};
+  }
 `;
-var PostFlair = styled57.span`
-  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+var PostAuthorLine = styled58.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    gap: ${tokens.spacing.xs};
+  }
+`;
+var PostAuthorName = styled58.span`
+  color: ${tokens.colors.text.secondary};
+`;
+var PostFlair = styled58.span`
+  padding: 2px ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.sm};
   background: ${tokens.colors.surface.overlay};
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
+  white-space: nowrap;
 `;
-var Divider = styled57.hr`
+var Divider = styled58.hr`
   border: none;
   height: 1px;
   background: ${tokens.colors.border.default};
   margin: ${tokens.spacing.md} 0;
+
+  @media (max-width: 480px) {
+    margin: ${tokens.spacing.sm} 0;
+  }
 `;
-var ReplySection = styled57.div``;
-var ReplySectionHeader = styled57.div`
+var ReplySection = styled58.div``;
+var ReplySectionHeader = styled58.div`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
   margin-bottom: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    margin-bottom: ${tokens.spacing.xs};
+  }
 `;
-var ReplyLabel = styled57.span`
+var ReplyMetaRow = styled58.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    gap: ${tokens.spacing.xs};
+  }
+`;
+var ReplyLabel = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.secondary};
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  white-space: nowrap;
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.xs};
+  }
 `;
-var ReplyMeta = styled57.div`
-  display: flex;
-  align-items: center;
-  gap: ${tokens.spacing.sm};
-`;
-var ToneBadgeContainer = styled57.span`
+var ToneBadgeContainer = styled58.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11205,21 +11421,23 @@ var ToneBadgeContainer = styled57.span`
   background: ${({ $color }) => `${$color}20`};
   color: ${({ $color }) => $color};
 `;
-var ToneIcon = styled57.img`
+var ToneIcon = styled58.img`
   width: 12px;
   height: 12px;
 `;
-var CharacterCount = styled57.span`
+var CharacterCount = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-family: ${tokens.typography.fontFamily.monospace};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${({ $color }) => $color};
 `;
-var ReplyContent = styled57.div`
+var ReplyContent = styled58.div`
   font-size: ${tokens.typography.fontSize.base};
   line-height: ${tokens.typography.lineHeight.relaxed};
   color: ${tokens.colors.text.primary};
   white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.darker};
   border-radius: ${tokens.borderRadius.sm};
@@ -11227,8 +11445,14 @@ var ReplyContent = styled57.div`
   margin-bottom: ${tokens.spacing.sm};
   min-height: 100px;
   animation: ${fadeIn3} 0.3s ease-out;
+
+  @media (max-width: 480px) {
+    font-size: ${tokens.typography.fontSize.sm};
+    padding: ${tokens.spacing.sm};
+    min-height: 60px;
+  }
 `;
-var ReplyTextarea = styled57.textarea`
+var ReplyTextarea = styled58.textarea`
   width: 100%;
   min-height: 150px;
   max-height: 400px;
@@ -11245,6 +11469,13 @@ var ReplyTextarea = styled57.textarea`
   box-sizing: border-box;
   transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
 
+  @media (max-width: 480px) {
+    min-height: 120px;
+    max-height: 250px;
+    font-size: ${tokens.typography.fontSize.sm};
+    padding: ${tokens.spacing.sm};
+  }
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 3px ${tokens.colors.primary}30;
@@ -11254,7 +11485,7 @@ var ReplyTextarea = styled57.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var StrategyHint = styled57.div`
+var StrategyHint = styled58.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -11263,40 +11494,40 @@ var StrategyHint = styled57.div`
   border-radius: ${tokens.borderRadius.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StrategyIconImg = styled57.img`
+var StrategyIconImg = styled58.img`
   width: 16px;
   height: 16px;
   opacity: 0.8;
 `;
-var StrategyText = styled57.span`
+var StrategyText = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   font-style: italic;
 `;
-var ProgressBarContainer3 = styled57.div`
+var ProgressBarContainer3 = styled58.div`
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarTrack2 = styled57.div`
+var ProgressBarTrack2 = styled58.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill4 = styled57.div`
+var ProgressBarFill4 = styled58.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
   transition: width 0.3s ease, background-color 0.3s ease;
   background: ${({ $color }) => $color};
 `;
-var SkeletonContent2 = styled57.div`
+var SkeletonContent2 = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var SkeletonLine2 = styled57.div`
+var SkeletonLine2 = styled58.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -11359,9 +11590,9 @@ var RedditEngagementControls = ({
         " Editing Mode"
       ] }),
       /* @__PURE__ */ jsxs(EditModeActions, { children: [
-        /* @__PURE__ */ jsx(ActionButton6, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
+        /* @__PURE__ */ jsx(ActionButton7, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
         /* @__PURE__ */ jsx(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "save",
             onClick: () => onSaveEdit(currentReply),
@@ -11389,7 +11620,7 @@ var RedditEngagementControls = ({
     !isEditing && isPending && /* @__PURE__ */ jsxs(MainActions, { children: [
       /* @__PURE__ */ jsxs(SecondaryActions, { children: [
         /* @__PURE__ */ jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "tertiary",
             onClick: handleRegenerate,
@@ -11402,7 +11633,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "edit",
             onClick: onToggleEdit,
@@ -11415,7 +11646,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "skip",
             onClick: handleSkip,
@@ -11430,7 +11661,7 @@ var RedditEngagementControls = ({
       ] }),
       /* @__PURE__ */ jsxs(PrimaryActions, { children: [
         /* @__PURE__ */ jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: isEngaged && !copiedFeedback ? "engaged" : "primary",
             onClick: handleCopyAndOpen,
@@ -11444,7 +11675,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "success",
             onClick: onMarkPosted,
@@ -11469,7 +11700,7 @@ var pulse4 = keyframes`
     box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
   }
 `;
-var ControlsContainer = styled57.div`
+var ControlsContainer = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
@@ -11478,7 +11709,7 @@ var ControlsContainer = styled57.div`
   border-radius: ${tokens.borderRadius.lg};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var EditModeSection = styled57.div`
+var EditModeSection = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11487,25 +11718,25 @@ var EditModeSection = styled57.div`
   border: 1px solid ${tokens.colors.status.editing}40;
   border-radius: ${tokens.borderRadius.md};
 `;
-var EditModeLabel = styled57.span`
+var EditModeLabel = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.status.editing};
 `;
-var EditModeActions = styled57.div`
+var EditModeActions = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var InputSection = styled57.div`
+var InputSection = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
 `;
-var InputLabel = styled57.label`
+var InputLabel = styled58.label`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var InputRow = styled57.div`
+var InputRow = styled58.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
@@ -11514,7 +11745,7 @@ var InputRow = styled57.div`
     flex-direction: column;
   }
 `;
-var TextInput = styled57.input`
+var TextInput = styled58.input`
   flex: 1;
   min-width: 0;
   padding: ${tokens.spacing.sm};
@@ -11538,7 +11769,7 @@ var TextInput = styled57.input`
     width: 100%;
   }
 `;
-var SmallButton = styled57.button`
+var SmallButton = styled58.button`
   padding: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.tertiary};
@@ -11553,12 +11784,12 @@ var SmallButton = styled57.button`
     background: ${tokens.colors.surface.overlay};
   }
 `;
-var MainActions = styled57.div`
+var MainActions = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
 `;
-var SecondaryActions = styled57.div`
+var SecondaryActions = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -11569,7 +11800,7 @@ var SecondaryActions = styled57.div`
     }
   }
 `;
-var PrimaryActions = styled57.div`
+var PrimaryActions = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -11580,12 +11811,12 @@ var PrimaryActions = styled57.div`
     }
   }
 `;
-var Icon3 = styled57.img`
+var Icon3 = styled58.img`
   width: 16px;
   height: 16px;
   vertical-align: middle;
 `;
-var ActionButton6 = styled57.button`
+var ActionButton7 = styled58.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11812,7 +12043,7 @@ function TokenUsageCard({
     onViewAll && transactions.length > 0 && /* @__PURE__ */ jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
   ] });
 }
-var Card2 = styled57.div`
+var Card2 = styled58.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
@@ -11821,7 +12052,7 @@ var Card2 = styled57.div`
   height: 100%;
   overflow: hidden;
 `;
-var Header4 = styled57.div`
+var Header4 = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11831,65 +12062,65 @@ var Header4 = styled57.div`
   min-height: 48px;
   flex-shrink: 0;
 `;
-var Title2 = styled57.h3`
+var Title2 = styled58.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.lg};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
 `;
-var Period = styled57.span`
+var Period = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var UsageSection = styled57.div`
+var UsageSection = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var UsageStats = styled57.div`
+var UsageStats = styled58.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
 `;
-var CurrentUsage = styled57.span`
+var CurrentUsage = styled58.span`
   font-size: ${tokens.typography.fontSize["2xl"]};
   font-weight: ${tokens.typography.fontWeight.bold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
 `;
-var UsageSeparator = styled57.span`
+var UsageSeparator = styled58.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var MaxUsage = styled57.span`
+var MaxUsage = styled58.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var ProgressContainer = styled57.div`
+var ProgressContainer = styled58.div`
   width: 100%;
   height: 8px;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var ProgressBar3 = styled57.div`
+var ProgressBar3 = styled58.div`
   height: 100%;
   width: ${({ $percentage }) => $percentage}%;
   background: ${({ $level }) => usageLevelColors[$level]};
   border-radius: ${tokens.borderRadius.full};
   transition: width ${tokens.transitions.normal}, background ${tokens.transitions.normal};
 `;
-var PercentageLabel = styled57.span`
+var PercentageLabel = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $level }) => usageLevelColors[$level]};
 `;
-var TransactionsSection = styled57.div`
+var TransactionsSection = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -11899,19 +12130,19 @@ var TransactionsSection = styled57.div`
   overflow-y: auto;
   min-height: 0;
 `;
-var TransactionsHeader = styled57.h4`
+var TransactionsHeader = styled58.h4`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var TransactionsList = styled57.div`
+var TransactionsList = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var TransactionItem = styled57.div`
+var TransactionItem = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -11928,7 +12159,7 @@ var TransactionItem = styled57.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var TransactionIcon = styled57.span`
+var TransactionIcon = styled58.span`
   width: 24px;
   height: 24px;
   display: flex;
@@ -11950,12 +12181,12 @@ var TransactionIcon = styled57.span`
 }};
   }
 `;
-var TransactionInfo = styled57.div`
+var TransactionInfo = styled58.div`
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var TransactionDescription = styled57.div`
+var TransactionDescription = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
@@ -11963,7 +12194,7 @@ var TransactionDescription = styled57.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var TransactionMeta = styled57.div`
+var TransactionMeta = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -11977,21 +12208,21 @@ var TransactionMeta = styled57.div`
     white-space: nowrap;
   }
 `;
-var TransactionTokens = styled57.span`
+var TransactionTokens = styled58.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $type }) => typeColors[$type]};
   flex-shrink: 0;
 `;
-var EmptyState4 = styled57.div`
+var EmptyState4 = styled58.div`
   text-align: center;
   padding: ${tokens.spacing.lg} ${tokens.spacing.md};
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var ViewAllButton = styled57.button`
+var ViewAllButton = styled58.button`
   margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
@@ -12013,7 +12244,7 @@ var pulse5 = keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
 `;
-var SkeletonBlock = styled57.div`
+var SkeletonBlock = styled58.div`
   width: ${({ $width }) => $width};
   height: ${({ $height }) => $height};
   background: ${tokens.colors.background.light};
@@ -12101,7 +12332,7 @@ var WorkflowCard = ({
   );
 };
 WorkflowCard.displayName = "WorkflowCard";
-var Card3 = styled57.button`
+var Card3 = styled58.button`
   display: grid;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
@@ -12132,7 +12363,7 @@ var Card3 = styled57.button`
     cursor: not-allowed;
   }
 `;
-var WorkflowName2 = styled57.h3`
+var WorkflowName2 = styled58.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -12143,7 +12374,7 @@ var WorkflowName2 = styled57.h3`
   white-space: nowrap;
   min-width: 0;
 `;
-var Description3 = styled57.p`
+var Description3 = styled58.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
@@ -12155,7 +12386,7 @@ var Description3 = styled57.p`
   word-break: break-word;
   min-width: 0;
 `;
-var CardFooter = styled57.div`
+var CardFooter = styled58.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -12164,13 +12395,13 @@ var CardFooter = styled57.div`
   border-top: 1px solid ${tokens.colors.border.subtle};
   width: 100%;
 `;
-var IntegrationList = styled57.div`
+var IntegrationList = styled58.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var IntegrationIconWrapper = styled57.span`
+var IntegrationIconWrapper = styled58.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12192,12 +12423,12 @@ var IntegrationIconWrapper = styled57.span`
     }
   `}
 `;
-var IntegrationIcon = styled57.img`
+var IntegrationIcon = styled58.img`
   width: 16px;
   height: 16px;
   object-fit: contain;
 `;
-var Indicators = styled57.div`
+var Indicators = styled58.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -12205,7 +12436,7 @@ var Indicators = styled57.div`
   margin-left: auto;
   min-width: 0;
 `;
-var IndicatorPill = styled57.span`
+var IndicatorPill = styled58.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -12214,14 +12445,14 @@ var IndicatorPill = styled57.span`
   background: ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}15` : `${tokens.colors.info}15`};
   border: 1px solid ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}30` : `${tokens.colors.info}30`};
 `;
-var IndicatorDot = styled57.span`
+var IndicatorDot = styled58.span`
   width: 6px;
   height: 6px;
   border-radius: ${tokens.borderRadius.full};
   background: ${({ $variant }) => $variant === "warning" ? tokens.colors.warning : tokens.colors.info};
   flex-shrink: 0;
 `;
-var IndicatorText = styled57.span`
+var IndicatorText = styled58.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
@@ -12232,7 +12463,7 @@ var severityColors = {
   warning: tokens.colors.warning,
   info: tokens.colors.info
 };
-var AlertContainer = styled57.div`
+var AlertContainer = styled58.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => {
@@ -12250,7 +12481,7 @@ var AlertContainer = styled57.div`
   max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ModalOverlay = styled57.div`
+var ModalOverlay = styled58.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -12263,53 +12494,53 @@ var ModalOverlay = styled57.div`
   z-index: ${tokens.zIndex.modal};
   padding: ${tokens.spacing.lg};
 `;
-var ModalContent = styled57.div`
+var ModalContent = styled58.div`
   background-color: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
   max-width: 500px;
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header5 = styled57.div`
+var Header5 = styled58.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
 `;
-var IconContainer2 = styled57.div`
+var IconContainer2 = styled58.div`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   color: ${(props) => severityColors[props.severity]};
 `;
-var Content5 = styled57.div`
+var Content5 = styled58.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var Title3 = styled57.div`
+var Title3 = styled58.div`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var ErrorMessage4 = styled57.div`
+var ErrorMessage4 = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var ErrorCode = styled57.div`
+var ErrorCode = styled58.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
   font-family: ${tokens.typography.fontFamily.monospace};
   margin-top: ${tokens.spacing.xs};
 `;
-var Timestamp = styled57.div`
+var Timestamp = styled58.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Details = styled57.details`
+var Details = styled58.details`
   margin-top: ${tokens.spacing.md};
   cursor: pointer;
 
@@ -12332,12 +12563,12 @@ var Details = styled57.details`
     }
   }
 `;
-var DetailsIcon = styled57.span`
+var DetailsIcon = styled58.span`
   display: inline-block;
   transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
 `;
-var StackTrace = styled57.pre`
+var StackTrace = styled58.pre`
   margin: ${tokens.spacing.sm} 0 0 0;
   padding: ${tokens.spacing.md};
   background-color: ${tokens.colors.surface.subtle};
@@ -12350,12 +12581,12 @@ var StackTrace = styled57.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions4 = styled57.div`
+var Actions4 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
 `;
-var Button4 = styled57.button`
+var Button4 = styled58.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -12384,7 +12615,7 @@ var Button4 = styled57.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton2 = styled57.button`
+var CloseButton2 = styled58.button`
   position: absolute;
   top: ${tokens.spacing.md};
   right: ${tokens.spacing.md};
@@ -12568,14 +12799,14 @@ var statusColors2 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var Container17 = styled57.div`
+var Container17 = styled58.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   width: 100%;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled57.div`
+var ProgressMessage = styled58.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12590,13 +12821,13 @@ var ProgressMessage = styled57.div`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled57.div`
+var ProgressInfo = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled57.span`
+var PercentageText = styled58.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12611,7 +12842,7 @@ var PercentageText = styled57.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled57.div`
+var LinearTrack = styled58.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
@@ -12629,7 +12860,7 @@ var LinearTrack = styled57.div`
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled57.div`
+var LinearFill = styled58.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -12640,12 +12871,12 @@ var LinearFill = styled57.div`
   transition: ${(props) => props.animated && !props.indeterminate ? `width ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? indeterminate : "none"} 1.5s ease-in-out infinite;
 `;
-var CircularContainer = styled57.div`
+var CircularContainer = styled58.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled57.svg`
+var CircularSvg = styled58.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12681,12 +12912,12 @@ var getCircularSize = (size) => {
       return { radius: 26, strokeWidth: 4 };
   }
 };
-var CircularTrack = styled57.circle`
+var CircularTrack = styled58.circle`
   fill: none;
   stroke: ${tokens.colors.border.default};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
 `;
-var CircularFill = styled57.circle`
+var CircularFill = styled58.circle`
   fill: none;
   stroke: ${(props) => statusColors2[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -12704,7 +12935,7 @@ var CircularFill = styled57.circle`
   transition: ${(props) => props.animated && !props.indeterminate ? `stroke-dashoffset ${tokens.transitions.normal}` : "none"};
   animation: ${(props) => props.indeterminate ? rotate : "none"} 1.5s linear infinite;
 `;
-var CircularPercentage = styled57.text`
+var CircularPercentage = styled58.text`
   fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
@@ -12805,7 +13036,7 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled57.div`
+var Panel = styled58.div`
   display: flex;
   flex-direction: column;
   background-color: ${tokens.colors.surface.overlay};
@@ -12814,7 +13045,7 @@ var Panel = styled57.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header6 = styled57.div`
+var Header6 = styled58.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -12828,7 +13059,7 @@ var Header6 = styled57.div`
     background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title4 = styled57.div`
+var Title4 = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -12836,11 +13067,11 @@ var Title4 = styled57.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions5 = styled57.div`
+var Actions5 = styled58.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled57.button`
+var IconButton = styled58.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12869,7 +13100,7 @@ var IconButton = styled57.button`
     height: 16px;
   }
 `;
-var CollapseIcon2 = styled57.div`
+var CollapseIcon2 = styled58.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12882,7 +13113,7 @@ var CollapseIcon2 = styled57.div`
     height: 16px;
   }
 `;
-var Content6 = styled57.div`
+var Content6 = styled58.div`
   padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
@@ -12910,7 +13141,7 @@ var Content6 = styled57.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled57.pre`
+var JsonView = styled58.pre`
   margin: 0;
   font-family: ${tokens.typography.fontFamily.monospace};
   font-size: ${tokens.typography.fontSize.sm};
@@ -12919,12 +13150,12 @@ var JsonView = styled57.pre`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled57.div`
+var FormattedView = styled58.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled57.table`
+var TableView = styled58.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${tokens.typography.fontSize.sm};
@@ -12948,7 +13179,7 @@ var TableView = styled57.table`
     border-bottom: none;
   }
 `;
-var EmptyState5 = styled57.div`
+var EmptyState5 = styled58.div`
   padding: ${tokens.spacing.xl};
   text-align: center;
   color: ${tokens.colors.text.tertiary};
@@ -13053,7 +13284,7 @@ var statusColors3 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var BadgeContainer2 = styled57.div`
+var BadgeContainer2 = styled58.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -13107,7 +13338,7 @@ var BadgeContainer2 = styled57.div`
   color: ${(props) => statusColors3[props.$status]};
   line-height: 1.4;
 `;
-var IconContainer3 = styled57.div`
+var IconContainer3 = styled58.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13186,7 +13417,7 @@ var TimeoutIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
 );
-var Label2 = styled57.span`
+var Label2 = styled58.span`
   white-space: nowrap;
 `;
 var getDefaultLabel = (status) => {
@@ -13462,6 +13693,6 @@ var isMobileDevice = () => {
   return hasTouch && isMobileUA || hasTouch && window.innerWidth <= 768;
 };
 
-export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, AuthButton, AuthInput, BillingToggle, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, ErrorBanner, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PasswordInput, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, SuccessToast, Suggestions, TagInput, TelegramIcon, TokenUsageCard, TrialPlanCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowLoadingSkeleton, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };
+export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, AuthButton, AuthInput, BillingToggle, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, ErrorBanner, ErrorToast, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PasswordInput, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, SuccessToast, Suggestions, TagInput, TelegramIcon, TokenUsageCard, TrialPlanCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowLoadingSkeleton, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map