@agentiffai/design 1.3.28 → 1.4.0

package/dist/index.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
 var React4 = require('react');
-var styled57 = require('styled-components');
+var styled58 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var reactAria = require('react-aria');
 var button = require('@react-aria/button');
 var reactAriaComponents = require('react-aria-components');
+var reactDom = require('react-dom');
 var meter = require('@react-aria/meter');
 var tabs$1 = require('@react-aria/tabs');
 var collections = require('@react-stately/collections');
@@ -16,73 +17,51 @@ var textfield = require('@react-aria/textfield');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React4__default = /*#__PURE__*/_interopDefault(React4);
-var styled57__default = /*#__PURE__*/_interopDefault(styled57);
+var styled58__default = /*#__PURE__*/_interopDefault(styled58);
 
 // src/components/AssistantThinking/AssistantThinking.tsx
 
 // 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",
@@ -93,40 +72,41 @@ 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"
     },
-    // Scrollbar colors
+    category: {
+      setup: "#459FB9",
+      integration: "#8B5CF6",
+      generation: "#2CB0AB",
+      image: "#EC4899",
+      scheduling: "#F59E0B",
+      completion: "#4EB999",
+      processing: "#459FB9",
+      custom: "#6B7280",
+      notion: "#6B7280"
+    },
     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",
@@ -149,21 +129,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,
@@ -180,34 +152,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",
@@ -239,6 +198,19 @@ var tokens = {
       exit: "cubic-bezier(0.4, 0, 1, 1)",
       smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
       linear: "linear"
+    },
+    overlay: {
+      duration: "200ms",
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    typewriter: {
+      speed: "50ms"
+    },
+    spinner: {
+      duration: "1000ms"
+    },
+    pulse: {
+      duration: "2000ms"
     }
   },
   zIndex: {
@@ -260,7 +232,7 @@ var tokens = {
 };
 
 // src/components/AssistantThinking/AssistantThinking.styles.ts
-var dotPulse = styled57.keyframes`
+var dotPulse = styled58.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -270,7 +242,7 @@ var dotPulse = styled57.keyframes`
     transform: scale(1);
   }
 `;
-var pulse = styled57.keyframes`
+var pulse = styled58.keyframes`
   0%, 100% {
     opacity: 0.5;
     transform: scale(1);
@@ -280,7 +252,7 @@ var pulse = styled57.keyframes`
     transform: scale(1.2);
   }
 `;
-var wave = styled57.keyframes`
+var wave = styled58.keyframes`
   0%, 40%, 100% {
     transform: translateY(0);
   }
@@ -317,7 +289,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container = styled57__default.default.div`
+var Container = styled58__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -329,7 +301,7 @@ var Container = styled57__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled57__default.default.div`
+var Avatar = styled58__default.default.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -340,23 +312,23 @@ var Avatar = styled57__default.default.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled57__default.default.svg`
+var HeadphonesIcon = styled58__default.default.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled57__default.default.div`
+var Content = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots = styled57__default.default.div`
+var LoadingDots = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled57__default.default.span`
+var Dot = styled58__default.default.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -374,7 +346,7 @@ var Dot = styled57__default.default.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message = styled57__default.default.span`
+var Message = styled58__default.default.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -434,7 +406,7 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var StyledContainer = styled57__default.default.div`
+var StyledContainer = styled58__default.default.div`
   display: flex;
   width: 100%;
   height: 52px;
@@ -443,7 +415,7 @@ var StyledContainer = styled57__default.default.div`
   padding: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
 `;
-var StyledOption = styled57__default.default.button`
+var StyledOption = styled58__default.default.button`
   flex: 1;
   height: 44px;
   background: ${({ $isActive }) => $isActive ? tokens.colors.primary : tokens.colors.background.light};
@@ -461,14 +433,14 @@ var StyledOption = styled57__default.default.button`
     opacity: 0.9;
   }
 `;
-var StyledLabel = styled57__default.default.span`
+var StyledLabel = styled58__default.default.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__default.default.span`
+var StyledBadge = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -520,64 +492,64 @@ function BillingToggle({
     )
   ] });
 }
-var StyledCard = styled57__default.default.div`
+var StyledCard = styled58__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.md};
   width: 100%;
   padding: 10px 12px;
   position: relative;
 `;
-var StyledHeader = styled57__default.default.div`
+var StyledHeader = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2px;
 `;
-var StyledBadge2 = styled57__default.default.span`
+var StyledBadge2 = styled58__default.default.span`
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-size: 13px;
   line-height: 1.4;
   color: ${tokens.colors.primary};
 `;
-var StyledLabel2 = styled57__default.default.span`
+var StyledLabel2 = styled58__default.default.span`
   font-weight: ${tokens.typography.fontWeight.bold};
   font-size: 14px;
   line-height: 1.4;
   color: ${tokens.colors.text.primary};
 `;
-var StyledDescription = styled57__default.default.p`
+var StyledDescription = styled58__default.default.p`
   font-size: 12px;
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin: 0 0 6px 0;
 `;
-var StyledDivider = styled57__default.default.div`
+var StyledDivider = styled58__default.default.div`
   width: 100%;
   height: 1px;
   background: ${tokens.colors.border.default};
   margin-bottom: 6px;
 `;
-var StyledFooter = styled57__default.default.div`
+var StyledFooter = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
-var StyledCredits = styled57__default.default.div`
+var StyledCredits = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: 6px;
 `;
-var StyledCheckIcon = styled57__default.default.svg`
+var StyledCheckIcon = styled58__default.default.svg`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 `;
-var StyledCreditsText = styled57__default.default.span`
+var StyledCreditsText = styled58__default.default.span`
   font-size: 13px;
   line-height: 1.4;
   color: ${tokens.colors.text.primary};
 `;
-var StyledExecutions = styled57__default.default.span`
+var StyledExecutions = styled58__default.default.span`
   font-size: 11px;
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
@@ -621,7 +593,7 @@ function TrialPlanCard({
     ] })
   ] });
 }
-var ChatInputContainer = styled57__default.default.div`
+var ChatInputContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -637,7 +609,7 @@ var ChatInputContainer = styled57__default.default.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled57__default.default.div`
+var SuggestionsWrapper = styled58__default.default.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -646,7 +618,7 @@ var SuggestionsWrapper = styled57__default.default.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled57__default.default.button`
+var SuggestionButton = styled58__default.default.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -685,7 +657,7 @@ var SuggestionButton = styled57__default.default.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled57__default.default.div`
+var InputWrapper = styled58__default.default.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -703,7 +675,7 @@ var InputWrapper = styled57__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled57__default.default.textarea`
+var InputField = styled58__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -728,7 +700,7 @@ var InputField = styled57__default.default.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled57__default.default.button`
+var SubmitButton = styled58__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1050,30 +1022,30 @@ var TagInput = ({
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { "data-testid": testId ? `${testId}-error` : void 0, children: error })
   ] });
 };
-var Container2 = styled57__default.default.div`
+var Container2 = styled58__default.default.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var LabelWrapper = styled57__default.default.div`
+var LabelWrapper = styled58__default.default.div`
   display: flex;
   align-items: center;
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StyledLabel3 = styled57__default.default.span`
+var StyledLabel3 = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var Required = styled57__default.default.span`
+var Required = styled58__default.default.span`
   color: ${tokens.colors.error};
   margin-left: ${tokens.spacing.xs};
 `;
-var Description = styled57__default.default.p`
+var Description = styled58__default.default.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__default.default.div`
+var TagGroupContainer = styled58__default.default.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -1091,15 +1063,15 @@ var TagGroupContainer = styled57__default.default.div`
     border-color: ${(props) => props.$hasError ? tokens.colors.error : tokens.colors.border.focus};
   }
 `;
-var StyledTagGroup = styled57__default.default(reactAriaComponents.TagGroup)`
+var StyledTagGroup = styled58__default.default(reactAriaComponents.TagGroup)`
   display: contents;
 `;
-var StyledTagList = styled57__default.default(reactAriaComponents.TagList)`
+var StyledTagList = styled58__default.default(reactAriaComponents.TagList)`
   display: flex;
   flex-wrap: wrap;
   gap: ${tokens.spacing.xs};
 `;
-var StyledTag = styled57__default.default(reactAriaComponents.Tag)`
+var StyledTag = styled58__default.default(reactAriaComponents.Tag)`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1126,13 +1098,13 @@ var StyledTag = styled57__default.default(reactAriaComponents.Tag)`
     background: ${tokens.colors.accent}30;
   }
 `;
-var TagText = styled57__default.default.span`
+var TagText = styled58__default.default.span`
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var RemoveButton = styled57__default.default(reactAriaComponents.Button)`
+var RemoveButton = styled58__default.default(reactAriaComponents.Button)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1167,14 +1139,14 @@ var RemoveIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.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__default.default.div`
+var InputWrapper2 = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 120px;
 `;
-var StyledInput = styled57__default.default.input`
+var StyledInput = styled58__default.default.input`
   flex: 1;
   min-width: 80px;
   padding: ${tokens.spacing.xs} 0;
@@ -1198,7 +1170,7 @@ var StyledInput = styled57__default.default.input`
     cursor: not-allowed;
   }
 `;
-var AddButton = styled57__default.default.button`
+var AddButton = styled58__default.default.button`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   background: ${tokens.colors.accent};
   border: none;
@@ -1218,18 +1190,18 @@ var AddButton = styled57__default.default.button`
     cursor: not-allowed;
   }
 `;
-var HintText = styled57__default.default.p`
+var HintText = styled58__default.default.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__default.default.div`
+var ErrorMessage = styled58__default.default.div`
   margin-top: ${tokens.spacing.xs};
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
 `;
-var shimmer = styled57.keyframes`
+var shimmer = styled58.keyframes`
   0% {
     background-position: -200% 0;
   }
@@ -1237,7 +1209,7 @@ var shimmer = styled57.keyframes`
     background-position: 200% 0;
   }
 `;
-var indeterminateAnimation = styled57.keyframes`
+var indeterminateAnimation = styled58.keyframes`
   0% {
     left: -35%;
     right: 100%;
@@ -1251,12 +1223,12 @@ var indeterminateAnimation = styled57.keyframes`
     right: -90%;
   }
 `;
-var Container3 = styled57__default.default.div`
+var Container3 = styled58__default.default.div`
 	padding: ${tokens.spacing.lg};
 	width: 100%;
 	box-sizing: border-box;
 `;
-var SkeletonBox = styled57__default.default.div`
+var SkeletonBox = styled58__default.default.div`
 	width: 100%;
 	height: 200px;
 	background: linear-gradient(
@@ -1269,10 +1241,10 @@ var SkeletonBox = styled57__default.default.div`
 	animation: ${shimmer} 1.5s ease-in-out infinite;
 	border-radius: ${tokens.borderRadius.md};
 `;
-var ProgressSection = styled57__default.default.div`
+var ProgressSection = styled58__default.default.div`
 	margin-top: ${tokens.spacing.md};
 `;
-var ProgressBarContainer = styled57__default.default.div`
+var ProgressBarContainer = styled58__default.default.div`
 	width: 100%;
 	height: 4px;
 	background: ${tokens.colors.background.dark};
@@ -1280,7 +1252,7 @@ var ProgressBarContainer = styled57__default.default.div`
 	overflow: hidden;
 	position: relative;
 `;
-var ProgressBarFill = styled57__default.default.div`
+var ProgressBarFill = styled58__default.default.div`
 	height: 100%;
 	background: linear-gradient(
 		90deg,
@@ -1290,20 +1262,20 @@ var ProgressBarFill = styled57__default.default.div`
 	border-radius: ${tokens.borderRadius.sm};
 	transition: width ${tokens.transitions.normal};
 
-	${({ $indeterminate, $percentage }) => $indeterminate ? styled57.css`
+	${({ $indeterminate, $percentage }) => $indeterminate ? styled58.css`
 		position: absolute;
 		width: 35%;
 		animation: ${indeterminateAnimation} 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-	` : styled57.css`
+	` : styled58.css`
 		width: ${$percentage}%;
 	`}
 `;
-var ActivityText = styled57__default.default.div`
+var ActivityText = styled58__default.default.div`
 	margin-top: ${tokens.spacing.sm};
 	font-size: ${tokens.typography.fontSize.sm};
 	color: ${tokens.colors.text.secondary};
 `;
-var StepCounter = styled57__default.default.div`
+var StepCounter = styled58__default.default.div`
 	margin-top: ${tokens.spacing.xs};
 	font-size: ${tokens.typography.fontSize.xs};
 	color: ${tokens.colors.text.tertiary};
@@ -1350,7 +1322,7 @@ function WorkflowLoadingSkeleton({
     ] })
   ] });
 }
-var StyledButton = styled57__default.default.button`
+var StyledButton = styled58__default.default.button`
   min-height: 44px; /* Touch-friendly sizing for mobile */
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
@@ -1417,7 +1389,7 @@ var StyledButton = styled57__default.default.button`
     font-size: 0.9375rem;
   }
 `;
-var LoadingSpinner = styled57__default.default.span`
+var LoadingSpinner = styled58__default.default.span`
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -1471,7 +1443,7 @@ var AuthButton = ({
     }
   );
 };
-var StyledTextField = styled57__default.default(reactAriaComponents.TextField)`
+var StyledTextField = styled58__default.default(reactAriaComponents.TextField)`
   display: flex;
   flex-direction: column;
   margin-bottom: 0.25rem;
@@ -1544,11 +1516,11 @@ var StyledTextField = styled57__default.default(reactAriaComponents.TextField)`
     }
   }
 `;
-var ErrorMessageContainer = styled57__default.default.div`
+var ErrorMessageContainer = styled58__default.default.div`
   min-height: 1.25rem; /* Reserve space for error message to prevent shifting */
   margin-top: 0.375rem;
 `;
-var ErrorMessage2 = styled57__default.default.span`
+var ErrorMessage2 = styled58__default.default.span`
   color: ${tokens.colors.error};
   font-size: 0.875rem;
   display: block;
@@ -1628,11 +1600,11 @@ var AuthInput = ({
     }
   );
 };
-var PasswordContainer = styled57__default.default.div`
+var PasswordContainer = styled58__default.default.div`
   position: relative;
   width: 100%;
 `;
-var ToggleButton = styled57__default.default.button`
+var ToggleButton = styled58__default.default.button`
   position: absolute;
   right: 0.5rem;
   top: calc(0.875rem + 1.5rem);
@@ -1670,7 +1642,7 @@ var ToggleButton = styled57__default.default.button`
     height: 20px;
   }
 `;
-var HintText2 = styled57__default.default.span`
+var HintText2 = styled58__default.default.span`
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
   opacity: 0.8;
@@ -1745,32 +1717,37 @@ var SuccessToast = ({
     }
   }, [message, autoDismiss, autoDismissDelay, onDismiss]);
   if (!message) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContent, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, { children: "\u2713" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Message2, { "data-testid": "success-toast-message", children: message }),
-    /* @__PURE__ */ jsxRuntime.jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
-  ] }) });
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, { children: "\u2713" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Message2, { "data-testid": "success-toast-message", children: message }),
+      /* @__PURE__ */ jsxRuntime.jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
+    ] }) }),
+    document.body
+  );
 };
-var ToastContainer = styled57__default.default.div`
+var ToastContainer = styled58__default.default.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;
@@ -1779,27 +1756,28 @@ var ToastContainer = styled57__default.default.div`
   }
 
   @media (max-width: 640px) {
-    max-width: 85%;
+    min-width: 90%;
+    max-width: 90%;
   }
 `;
-var ToastContent = styled57__default.default.div`
+var ToastContent = styled58__default.default.div`
   display: flex;
   align-items: center;
-  gap: ${tokens.spacing.sm};
+  gap: ${tokens.spacing.md};
 `;
-var CheckmarkIcon = styled57__default.default.span`
+var CheckmarkIcon = styled58__default.default.span`
   color: ${tokens.colors.primary};
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.bold};
   flex-shrink: 0;
 `;
-var Message2 = styled57__default.default.div`
+var Message2 = styled58__default.default.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__default.default.button`
+var DismissButton = styled58__default.default.button`
   background: none;
   border: none;
   color: ${tokens.colors.text.tertiary};
@@ -1837,7 +1815,7 @@ var WarningIconSvg = () => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
-var BannerContainer = styled57__default.default.div`
+var BannerContainer = styled58__default.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -1847,12 +1825,12 @@ var BannerContainer = styled57__default.default.div`
   pointer-events: ${(props) => props.$isVisible ? "auto" : "none"};
   transition: opacity 0.3s ease-in-out;
 `;
-var StatusBarSpacer = styled57__default.default.div`
+var StatusBarSpacer = styled58__default.default.div`
   height: var(--safe-area-top, 0);
   background-color: ${tokens.colors.background.darkest}cc;
   backdrop-filter: blur(10px);
 `;
-var MessageContainer = styled57__default.default.div`
+var MessageContainer = styled58__default.default.div`
   background-color: ${tokens.colors.background.darkest}d9;
   backdrop-filter: blur(10px);
   color: ${tokens.colors.text.primary};
@@ -1865,13 +1843,13 @@ var MessageContainer = styled57__default.default.div`
   font-weight: 500;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 `;
-var WarningIcon = styled57__default.default.span`
+var WarningIcon = styled58__default.default.span`
   font-size: 18px;
   line-height: 1;
   display: flex;
   align-items: center;
 `;
-var Message3 = styled57__default.default.span`
+var Message3 = styled58__default.default.span`
   line-height: 1.4;
 `;
 var ErrorBanner = ({
@@ -1887,7 +1865,182 @@ var ErrorBanner = ({
     ] })
   ] });
 };
-var NavigationContainer = styled57__default.default.div`
+var ErrorToast = ({
+  title,
+  message,
+  correlationId,
+  accentColor = tokens.colors.error,
+  icon,
+  onDismiss,
+  onRetry,
+  onReconnect,
+  onCopy,
+  extraActions
+}) => {
+  const [copied, setCopied] = React4.useState(false);
+  const handleCopy = async () => {
+    if (!onCopy) return;
+    const success = await onCopy();
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(ToastContainer2, { $accentColor: accentColor, "data-testid": "error-toast", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ToastContent2, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(MessageWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CategoryLabel, { $accentColor: accentColor, "data-testid": "error-toast-title", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(Message4, { "data-testid": "error-toast-message", children: message }),
+          correlationId && /* @__PURE__ */ jsxRuntime.jsxs(CorrelationId, { "data-testid": "error-toast-correlation-id", children: [
+            "Ref: ",
+            correlationId
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsWrapper, { children: [
+        onCopy && /* @__PURE__ */ jsxRuntime.jsx(
+          CopyButton,
+          {
+            onClick: handleCopy,
+            "data-testid": "error-toast-copy",
+            title: "Copy error details for support",
+            children: copied ? "Copied" : "Copy"
+          }
+        ),
+        extraActions,
+        onReconnect && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: onReconnect, "data-testid": "error-toast-reconnect", children: "Reconnect" }),
+        onRetry && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: onRetry, "data-testid": "error-toast-retry", children: "Retry" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DismissButton2, { onClick: onDismiss, children: "Dismiss" })
+      ] })
+    ] }),
+    document.body
+  );
+};
+var ToastContainer2 = styled58__default.default.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__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.md};
+  margin-bottom: ${tokens.spacing.md};
+`;
+var IconWrapper = styled58__default.default.div`
+  flex-shrink: 0;
+
+  img {
+    filter: brightness(0) invert(0.7);
+  }
+`;
+var MessageWrapper = styled58__default.default.div`
+  flex: 1;
+`;
+var CategoryLabel = styled58__default.default.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__default.default.div`
+  font-size: ${tokens.typography.fontSize.sm};
+  line-height: ${tokens.typography.lineHeight.normal};
+`;
+var CorrelationId = styled58__default.default.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__default.default.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+  justify-content: flex-end;
+`;
+var BaseButton = styled58__default.default.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__default.default(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__default.default(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__default.default(BaseButton)`
+  background: ${tokens.colors.primary};
+  color: ${tokens.colors.text.primary};
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var NavigationContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1904,7 +2057,7 @@ var NavigationContainer = styled57__default.default.div`
     box-shadow: none !important;
   }
 `;
-var CategoryGroup = styled57__default.default.div`
+var CategoryGroup = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1916,7 +2069,7 @@ var CategoryGroup = styled57__default.default.div`
     border-radius: 0 !important;
   }
 `;
-var CategoryButton = styled57__default.default.button`
+var CategoryButton = styled58__default.default.button`
   width: 48px;
   height: 48px;
   border: none;
@@ -1941,7 +2094,7 @@ var CategoryButton = styled57__default.default.button`
     outline-offset: 2px;
   }
 `;
-var CategoryLabel = styled57__default.default.span`
+var CategoryLabel2 = styled58__default.default.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
@@ -1951,7 +2104,7 @@ var CategoryLabel = styled57__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SubItemList = styled57__default.default.div`
+var SubItemList = styled58__default.default.div`
   display: ${({ $expanded }) => $expanded ? "flex" : "none"};
   flex-direction: column;
   align-items: center;
@@ -1959,7 +2112,7 @@ var SubItemList = styled57__default.default.div`
   margin-top: ${tokens.spacing.xs};
   width: 100%;
 `;
-var SubItemButton = styled57__default.default.button`
+var SubItemButton = styled58__default.default.button`
   width: 32px;
   height: 32px;
   border: none;
@@ -1983,7 +2136,7 @@ var SubItemButton = styled57__default.default.button`
     outline-offset: 2px;
   }
 `;
-var CountBadge = styled57__default.default.span`
+var CountBadge = styled58__default.default.span`
   position: absolute;
   top: -2px;
   right: -2px;
@@ -1999,7 +2152,7 @@ var CountBadge = styled57__default.default.span`
   justify-content: center;
   padding: 0 ${tokens.spacing.xs};
 `;
-var filterBadgeIn = styled57.keyframes`
+var filterBadgeIn = styled58.keyframes`
   from {
     opacity: 0;
     transform: scale(0.5);
@@ -2009,7 +2162,7 @@ var filterBadgeIn = styled57.keyframes`
     transform: scale(1);
   }
 `;
-var FilterBadge = styled57__default.default.div`
+var FilterBadge = styled58__default.default.div`
   position: absolute;
   bottom: -${tokens.spacing.xs};
   right: -${tokens.spacing.xs};
@@ -2028,13 +2181,13 @@ var FilterBadge = styled57__default.default.div`
     fill: ${tokens.colors.text.primary};
   }
 `;
-var CategoryIconImg = styled57__default.default.img`
+var CategoryIconImg = styled58__default.default.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__default.default.img`
+var SubItemIconImg = styled58__default.default.img`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
@@ -2129,7 +2282,7 @@ function CategoryNav({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(CategoryLabel, { children: category.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(CategoryLabel2, { children: category.label }),
       category.subItems && category.subItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SubItemList, { $expanded: isExpanded, children: category.subItems.map((subItem) => {
         const isSubItemActive = selectedSubItem === subItem.id;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2140,6 +2293,7 @@ function CategoryNav({
             "aria-label": subItem.name,
             title: subItem.name,
             "data-testid": `${testIdPrefix}-subitem-${subItem.id}`,
+            "data-active": isSubItemActive,
             children: renderSubItemIcon(subItem, isSubItemActive)
           },
           subItem.id
@@ -2149,7 +2303,7 @@ function CategoryNav({
   }) });
 }
 CategoryNav.displayName = "CategoryNav";
-var IconWrapper = styled57__default.default.span`
+var IconWrapper2 = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2246,10 +2400,10 @@ function Icon({
   ...imgProps
 }) {
   const iconPath = getIconPath(name);
-  return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconWrapper2, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
 }
 Icon.displayName = "Icon";
-var Container4 = styled57__default.default.nav`
+var Container4 = styled58__default.default.nav`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -2269,7 +2423,7 @@ var Container4 = styled57__default.default.nav`
     background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled57__default.default.div`
+var ContentWrapper = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2287,7 +2441,7 @@ var ContentWrapper = styled57__default.default.div`
     padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
-var UserStatusSlot = styled57__default.default.div`
+var UserStatusSlot = styled58__default.default.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -2300,7 +2454,7 @@ var UserStatusSlot = styled57__default.default.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled57__default.default.div`
+var ActionButtonsSlot = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -2323,7 +2477,7 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var Container5 = styled57__default.default.nav`
+var Container5 = styled58__default.default.nav`
   position: absolute;
   top: 0;
   left: 0;
@@ -2352,7 +2506,7 @@ var Container5 = styled57__default.default.nav`
     width: 60px;
   }
 `;
-var TopSection = styled57__default.default.div`
+var TopSection = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2365,7 +2519,7 @@ var TopSection = styled57__default.default.div`
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled57__default.default.button`
+var BackButton = styled58__default.default.button`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -2401,12 +2555,12 @@ var BackButton = styled57__default.default.button`
     outline-offset: 2px;
   }
 `;
-styled57__default.default.span`
+styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xl};
   line-height: ${tokens.typography.lineHeight.tight};
   font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled57__default.default.div`
+var Separator = styled58__default.default.div`
   width: 32px;
   height: 2px;
   background-color: ${tokens.colors.background.light};
@@ -2414,7 +2568,7 @@ var Separator = styled57__default.default.div`
   margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled57__default.default.div`
+var FolderGroupsSlot = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2442,7 +2596,7 @@ var FolderGroupsSlot = styled57__default.default.div`
     padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
-var BottomSection = styled57__default.default.div`
+var BottomSection = styled58__default.default.div`
   flex: 0 1 auto; /* Natural size, can shrink when no space */
   min-height: 48px; /* At least one button visible */
   display: flex;
@@ -2470,7 +2624,7 @@ var BottomSection = styled57__default.default.div`
   scrollbar-width: thin;
   scrollbar-color: ${tokens.colors.border.default} transparent;
 `;
-var BottomButton = styled57__default.default.button`
+var BottomButton = styled58__default.default.button`
   width: 40px;
   height: 40px;
   border-radius: ${tokens.borderRadius.full};
@@ -2566,7 +2720,7 @@ function NavVertical({
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container6 = styled57__default.default.div`
+var Container6 = styled58__default.default.div`
   position: relative;
   width: 100%;
   height: 100vh;
@@ -2579,7 +2733,7 @@ var Container6 = styled57__default.default.div`
     position: relative;
   }
 `;
-var BackgroundPane = styled57__default.default.div`
+var BackgroundPane = styled58__default.default.div`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -2620,7 +2774,7 @@ var BackgroundPane = styled57__default.default.div`
     left: 60px; /* Smaller nav on mobile */
   }
 `;
-var MainPane = styled57__default.default.main`
+var MainPane = styled58__default.default.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -2698,13 +2852,13 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container7 = styled57__default.default.div`
+var Container7 = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled57__default.default.button`
+var ActionButton2 = styled58__default.default.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
@@ -2731,12 +2885,12 @@ var ActionButton = styled57__default.default.button`
     opacity: 0.8;
   }
 
-  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled57.css`
+  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled58.css`
       background-color: ${tokens.colors.surface.overlay};
       color: ${tokens.colors.text.primary};
     `}
 
-  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled57.css`
+  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled58.css`
       background-color: ${tokens.colors.secondary};
       color: ${tokens.colors.text.primary};
     `}
@@ -2761,7 +2915,7 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
     ref
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ActionButton,
+    ActionButton2,
     {
       ...buttonProps,
       ref,
@@ -2809,7 +2963,7 @@ var statusColors = {
   busy: tokens.colors.status.busy,
   offline: tokens.colors.status.offline
 };
-var Container8 = styled57__default.default.button`
+var Container8 = styled58__default.default.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -2848,7 +3002,7 @@ var Container8 = styled57__default.default.button`
     opacity: 0.9;
   }
 `;
-var IconWrapper2 = styled57__default.default.div`
+var IconWrapper3 = styled58__default.default.div`
   position: relative;
   width: 36px;
   height: 36px;
@@ -2859,13 +3013,13 @@ var IconWrapper2 = styled57__default.default.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var WorkflowInfo = styled57__default.default.div`
+var WorkflowInfo = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled57__default.default.span`
+var WorkflowName = styled58__default.default.span`
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -2874,14 +3028,14 @@ var WorkflowName = styled57__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled57__default.default.span`
+var WorkflowStatus = styled58__default.default.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__default.default.span`
+var WorkflowSubtitle = styled58__default.default.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -2891,7 +3045,7 @@ var WorkflowSubtitle = styled57__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var StatusIndicatorOuter = styled57__default.default.span`
+var StatusIndicatorOuter = styled58__default.default.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -2903,7 +3057,7 @@ var StatusIndicatorOuter = styled57__default.default.span`
   align-items: center;
   justify-content: center;
 `;
-var StatusIndicatorInner = styled57__default.default.span`
+var StatusIndicatorInner = styled58__default.default.span`
   width: 8px;
   height: 8px;
   border-radius: ${tokens.borderRadius.full};
@@ -2937,7 +3091,7 @@ function WorkflowStatusCard({
     ref
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(Container8, { ...buttonProps, ref, className, $isDisabled: isDisabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(IconWrapper2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(IconWrapper3, { children: [
       icon,
       /* @__PURE__ */ jsxRuntime.jsx(StatusIndicatorOuter, { $status: status, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIndicatorInner, { $status: status }) })
     ] }),
@@ -2949,7 +3103,7 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var DarkNotificationCardContainer = styled57__default.default.div`
+var DarkNotificationCardContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   padding: ${tokens.spacing.xs};
@@ -2960,7 +3114,7 @@ var DarkNotificationCardContainer = styled57__default.default.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled57__default.default.button`
+var DarkSectionHeader = styled58__default.default.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2986,7 +3140,7 @@ var DarkSectionHeader = styled57__default.default.button`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled57__default.default.span`
+var DarkChevronIcon = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3004,7 +3158,7 @@ var DarkChevronIcon = styled57__default.default.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled57__default.default.div`
+var DarkSectionContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -3013,7 +3167,7 @@ var DarkSectionContent = styled57__default.default.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled57__default.default.button`
+var DarkNotificationItemWrapper = styled58__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3052,7 +3206,7 @@ var DarkNotificationItemWrapper = styled57__default.default.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled57__default.default.span`
+var DarkItemIcon = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3077,7 +3231,7 @@ var DarkItemIcon = styled57__default.default.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var DarkItemText = styled57__default.default.span`
+var DarkItemText = styled58__default.default.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
@@ -3089,7 +3243,7 @@ var DarkItemText = styled57__default.default.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled57__default.default.button`
+var DarkMenuButton = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3123,7 +3277,7 @@ var DarkMenuButton = styled57__default.default.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled57__default.default.span`
+var DarkTimestamp = styled58__default.default.span`
   font-size: 10px;
   color: ${tokens.colors.text.tertiary};
   white-space: normal;
@@ -3308,7 +3462,7 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var Container9 = styled57__default.default.div`
+var Container9 = styled58__default.default.div`
   width: 100%;
   height: 100%;
   background-color: ${tokens.colors.background.dark};
@@ -3318,7 +3472,7 @@ var Container9 = styled57__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled57__default.default.div`
+var TabListWrapper = styled58__default.default.div`
   display: flex;
   border-bottom: 2px solid ${tokens.colors.border.default};
   background-color: ${tokens.colors.surface.subtle};
@@ -3338,7 +3492,7 @@ var TabListWrapper = styled57__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled57__default.default.button`
+var TabButton = styled58__default.default.button`
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
@@ -3382,7 +3536,7 @@ var TabButton = styled57__default.default.button`
     }
   `}
 `;
-var TabPanelWrapper = styled57__default.default.div`
+var TabPanelWrapper = styled58__default.default.div`
   flex: 1;
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
@@ -3420,7 +3574,7 @@ var TabPanelWrapper = styled57__default.default.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled57__default.default.div`
+var RunsContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.lg};
@@ -3433,7 +3587,7 @@ var RunsContainer = styled57__default.default.div`
     gap: ${tokens.spacing.md};
   }
 `;
-styled57__default.default.button`
+styled58__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -3470,7 +3624,7 @@ styled57__default.default.button`
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled57__default.default(reactAriaComponents.DisclosureGroup)`
+var StyledDisclosureGroup = styled58__default.default(reactAriaComponents.DisclosureGroup)`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -3479,7 +3633,7 @@ var StyledDisclosureGroup = styled57__default.default(reactAriaComponents.Disclo
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled57__default.default(reactAriaComponents.Disclosure)`
+var CategoryDisclosure = styled58__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -3497,7 +3651,7 @@ var CategoryDisclosure = styled57__default.default(reactAriaComponents.Disclosur
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled57__default.default(reactAriaComponents.Button)`
+var CategoryHeader = styled58__default.default(reactAriaComponents.Button)`
   width: 100%;
   padding: ${tokens.spacing.xs} 0;
   background: none;
@@ -3527,7 +3681,7 @@ var CategoryHeader = styled57__default.default(reactAriaComponents.Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled57__default.default.div`
+var CategoryTitle = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -3536,7 +3690,7 @@ var CategoryTitle = styled57__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-styled57__default.default.img`
+styled58__default.default.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
@@ -3547,7 +3701,7 @@ styled57__default.default.img`
     height: 14px;
   }
 `;
-var HashtagIcon = styled57__default.default.img`
+var HashtagIcon = styled58__default.default.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -3558,7 +3712,7 @@ var HashtagIcon = styled57__default.default.img`
     height: 12px;
   }
 `;
-var ChevronIcon = styled57__default.default.div`
+var ChevronIcon = styled58__default.default.div`
   display: flex;
   align-items: center;
   transition: transform ${tokens.transitions.normal};
@@ -3579,7 +3733,7 @@ var ChevronIcon = styled57__default.default.div`
     }
   }
 `;
-var CategoryDisclosurePanel = styled57__default.default(reactAriaComponents.DisclosurePanel)`
+var CategoryDisclosurePanel = styled58__default.default(reactAriaComponents.DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -3608,7 +3762,7 @@ var CategoryDisclosurePanel = styled57__default.default(reactAriaComponents.Disc
     }
   }
 `;
-var ItemContainer = styled57__default.default.div`
+var ItemContainer = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -3628,7 +3782,7 @@ var ItemContainer = styled57__default.default.div`
     background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled57__default.default(reactAriaComponents.Disclosure)`
+var ItemDisclosure = styled58__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
   margin-bottom: ${tokens.spacing.xs};
   display: flex;
@@ -3643,7 +3797,7 @@ var ItemDisclosure = styled57__default.default(reactAriaComponents.Disclosure)`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled57__default.default(reactAriaComponents.Button)`
+var ItemHeader = styled58__default.default(reactAriaComponents.Button)`
   width: 100%;
   padding: 0;
   background: none;
@@ -3661,7 +3815,7 @@ var ItemHeader = styled57__default.default(reactAriaComponents.Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled57__default.default(reactAriaComponents.DisclosurePanel)`
+var ItemDisclosurePanel = styled58__default.default(reactAriaComponents.DisclosurePanel)`
   padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -3691,7 +3845,7 @@ var ItemDisclosurePanel = styled57__default.default(reactAriaComponents.Disclosu
     }
   }
 `;
-var ItemIcon = styled57__default.default.img`
+var ItemIcon = styled58__default.default.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
@@ -3702,7 +3856,7 @@ var ItemIcon = styled57__default.default.img`
     height: 18px;
   }
 `;
-var ItemName = styled57__default.default.span`
+var ItemName = styled58__default.default.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -3720,7 +3874,7 @@ var ItemName = styled57__default.default.span`
     color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled57__default.default.span`
+var RunStatus = styled58__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3752,13 +3906,13 @@ var RunStatus = styled57__default.default.span`
     font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled57__default.default.div`
+styled58__default.default.div`
   margin-bottom: ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled57__default.default.button`
+styled58__default.default.button`
   width: 100%;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.surface.overlay};
@@ -3794,13 +3948,13 @@ styled57__default.default.button`
     margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled57__default.default.span`
+styled58__default.default.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__default.default.div`
+styled58__default.default.div`
   padding: ${tokens.spacing.md};
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
@@ -3820,17 +3974,17 @@ styled57__default.default.div`
     }
   }
 `;
-var MeterContainer = styled57__default.default.div`
+var MeterContainer = styled58__default.default.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled57__default.default.div`
+var MeterLabel = styled58__default.default.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__default.default.div`
+var MeterBar = styled58__default.default.div`
   width: 100%;
   height: 24px;
   background-color: ${tokens.colors.background.darker};
@@ -3839,7 +3993,7 @@ var MeterBar = styled57__default.default.div`
   position: relative;
   margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled57__default.default.div`
+var MeterFill = styled58__default.default.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -3867,7 +4021,7 @@ var MeterFill = styled57__default.default.div`
     }
   }
 `;
-var MeterStats = styled57__default.default.div`
+var MeterStats = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   text-align: center;
@@ -3878,18 +4032,18 @@ var MeterStats = styled57__default.default.div`
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled57__default.default.div`
+var ConnectionsContainer = styled58__default.default.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled57__default.default.p`
+var ConnectionDescription = styled58__default.default.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__default.default.button`
+var GoogleButton = styled58__default.default.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: ${tokens.typography.fontSize.sm};
@@ -4403,7 +4557,7 @@ function PaneMenus({
     /* @__PURE__ */ jsxRuntime.jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var Container10 = styled57__default.default.header`
+var Container10 = styled58__default.default.header`
   position: relative;
   width: 100%;
   height: 56px;
@@ -4466,7 +4620,7 @@ var Container10 = styled57__default.default.header`
     background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled57__default.default.img`
+var BrandLogo = styled58__default.default.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -4481,7 +4635,7 @@ var BrandLogo = styled57__default.default.img`
     max-height: 32px;
   }
 `;
-var SettingsButton = styled57__default.default.button`
+var SettingsButton = styled58__default.default.button`
   position: absolute;
   top: 50%;
   right: ${tokens.spacing.md};
@@ -4535,7 +4689,7 @@ var SettingsButton = styled57__default.default.button`
     right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled57__default.default.button`
+var BackButton2 = styled58__default.default.button`
   position: absolute;
   top: 50%;
   left: ${tokens.spacing.md};
@@ -4642,7 +4796,7 @@ function PaneSectionHeader({
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var Container11 = styled57__default.default.button`
+var Container11 = styled58__default.default.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
@@ -4691,7 +4845,7 @@ var Container11 = styled57__default.default.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled57__default.default.img`
+var LogoImage = styled58__default.default.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -4710,7 +4864,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Container11, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
 }
 ServiceIcon.displayName = "ServiceIcon";
-var NotificationCardContainer = styled57__default.default.div`
+var NotificationCardContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -4721,7 +4875,7 @@ var NotificationCardContainer = styled57__default.default.div`
   box-shadow: ${tokens.shadows.card};
   gap: ${tokens.spacing.md};
 `;
-var SectionHeader = styled57__default.default.button`
+var SectionHeader = styled58__default.default.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4747,7 +4901,7 @@ var SectionHeader = styled57__default.default.button`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ChevronIcon2 = styled57__default.default.span`
+var ChevronIcon2 = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4765,14 +4919,14 @@ var ChevronIcon2 = styled57__default.default.span`
     height: 16px;
   }
 `;
-var SectionContent = styled57__default.default.div`
+var SectionContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding-left: 0;
   margin-top: ${tokens.spacing.xs};
 `;
-var NotificationItemWrapper = styled57__default.default.button`
+var NotificationItemWrapper = styled58__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -4809,7 +4963,7 @@ var NotificationItemWrapper = styled57__default.default.button`
     opacity: 0.5;
   }
 `;
-var ItemIcon2 = styled57__default.default.span`
+var ItemIcon2 = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4834,7 +4988,7 @@ var ItemIcon2 = styled57__default.default.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var ItemText = styled57__default.default.span`
+var ItemText = styled58__default.default.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 15px;
@@ -4843,7 +4997,7 @@ var ItemText = styled57__default.default.span`
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
 `;
-var MenuButton = styled57__default.default.button`
+var MenuButton = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5053,7 +5207,7 @@ var NotificationItemComponent = ({
   );
 };
 NotificationCard.displayName = "NotificationCard";
-var StyledUserMessage = styled57__default.default.button`
+var StyledUserMessage = styled58__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -5123,7 +5277,7 @@ var StyledUserMessage = styled57__default.default.button`
     }
   }
 
-  ${({ $isPressed }) => $isPressed && styled57.css`
+  ${({ $isPressed }) => $isPressed && styled58.css`
       transform: translateY(0) scale(0.98);
       box-shadow: ${tokens.shadows.sm};
 
@@ -5241,7 +5395,7 @@ var darkTheme = {
   zIndex: tokens.zIndex,
   breakpoints: tokens.breakpoints
 };
-var GlobalStyle = styled57.createGlobalStyle`
+var GlobalStyle = styled58.createGlobalStyle`
   /* Universal tap highlight removal - nuclear option for Android WebKit */
   * {
     -webkit-tap-highlight-color: transparent !important;
@@ -5393,7 +5547,7 @@ var ConnectionStatusBadge = ({
   );
 };
 ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
-var Badge = styled57__default.default.span`
+var Badge = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -5416,7 +5570,7 @@ var IntegrationCard = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className, "data-testid": "integration-card", children: [
     status && /* @__PURE__ */ jsxRuntime.jsx(StatusRow, { children: status }),
     /* @__PURE__ */ jsxRuntime.jsxs(ContentHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconImage, { src: icon, alt: name }) : icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper4, { children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconImage, { src: icon, alt: name }) : icon }),
       /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
         description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })
@@ -5429,7 +5583,7 @@ var IntegrationCard = ({
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
-var Card = styled57__default.default.div`
+var Card = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -5449,11 +5603,11 @@ var Card = styled57__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var StatusRow = styled57__default.default.div`
+var StatusRow = styled58__default.default.div`
   display: flex;
   align-items: center;
 `;
-var ContentHeader = styled57__default.default.div`
+var ContentHeader = styled58__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -5462,7 +5616,7 @@ var ContentHeader = styled57__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var IconWrapper3 = styled57__default.default.div`
+var IconWrapper4 = styled58__default.default.div`
   width: 40px;
   height: 40px;
   display: flex;
@@ -5472,32 +5626,32 @@ var IconWrapper3 = styled57__default.default.div`
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
-var IconImage = styled57__default.default.img`
+var IconImage = styled58__default.default.img`
   width: 24px;
   height: 24px;
   object-fit: contain;
 `;
-var Info = styled57__default.default.div`
+var Info = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   flex: 1;
 `;
-var Name = styled57__default.default.h3`
+var Name = styled58__default.default.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__default.default.p`
+var Description2 = styled58__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ActionsRow = styled57__default.default.div`
+var ActionsRow = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -5555,14 +5709,14 @@ var SecretInput = ({
   ] });
 };
 SecretInput.displayName = "SecretInput";
-var Container12 = styled57__default.default.div`
+var Container12 = styled58__default.default.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   min-width: 0;
 `;
-var Input = styled57__default.default.input`
+var Input = styled58__default.default.input`
   width: 100%;
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   padding-right: 40px;
@@ -5588,7 +5742,7 @@ var Input = styled57__default.default.input`
     cursor: not-allowed;
   }
 `;
-var VisibilityToggle = styled57__default.default.button`
+var VisibilityToggle = styled58__default.default.button`
   position: absolute;
   right: ${tokens.spacing.sm};
   top: 50%;
@@ -5724,7 +5878,7 @@ function parseInlineMarkdown(text, startKey) {
   }
   return { elements, nextKey: key };
 }
-var Container13 = styled57__default.default.div`
+var Container13 = styled58__default.default.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
@@ -5789,7 +5943,7 @@ var Container13 = styled57__default.default.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__default.default.span`
+var Cursor = styled58__default.default.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -5845,7 +5999,7 @@ var StreamingTextBase = ({
 };
 var StreamingText = React4.memo(StreamingTextBase);
 StreamingText.displayName = "StreamingText";
-var MessageContainer2 = styled57__default.default.div`
+var MessageContainer2 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -5855,20 +6009,20 @@ var MessageContainer2 = styled57__default.default.div`
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled57__default.default.div`
+var AvatarContainer = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled57__default.default.img`
+var Avatar2 = styled58__default.default.img`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled57__default.default.div`
+var AvatarInitials = styled58__default.default.div`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
@@ -5886,16 +6040,16 @@ var AvatarInitials = styled57__default.default.div`
     object-fit: contain;
   }
 `;
-var AvatarLabel = styled57__default.default.span`
+var AvatarLabel = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var ContentContainer = styled57__default.default.div`
+var ContentContainer = styled58__default.default.div`
   width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled57__default.default.div`
+var MessageContent = styled58__default.default.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm};
@@ -5909,7 +6063,7 @@ var MessageContent = styled57__default.default.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots2 = styled57__default.default.div`
+var LoadingDots2 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
@@ -5918,7 +6072,7 @@ var LoadingDots2 = styled57__default.default.div`
   border-radius: ${tokens.borderRadius.lg};
   width: fit-content;
 `;
-var pulse2 = styled57.keyframes`
+var pulse2 = styled58.keyframes`
   0%, 100% {
     opacity: 0.4;
   }
@@ -5926,7 +6080,7 @@ var pulse2 = styled57.keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled57__default.default.div`
+var LoadingDot = styled58__default.default.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -5935,7 +6089,7 @@ var LoadingDot = styled57__default.default.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled57__default.default.div`
+var FileAttachmentContainer = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5971,7 +6125,7 @@ var FileAttachmentContainer = styled57__default.default.div`
     }
   `}
 `;
-var FileIconContainer = styled57__default.default.div`
+var FileIconContainer = styled58__default.default.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -5981,14 +6135,14 @@ var FileIconContainer = styled57__default.default.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled57__default.default.div`
+var FileInfo = styled58__default.default.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled57__default.default.div`
+var FileTitle = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -5998,7 +6152,7 @@ var FileTitle = styled57__default.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled57__default.default.div`
+var FileMetadata = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6008,7 +6162,7 @@ var FileMetadata = styled57__default.default.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled57__default.default.span`
+var FileSubtitle = styled58__default.default.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -6064,13 +6218,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled57__default.default.div`
+var AttachmentsContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton2 = styled57__default.default.button`
+var ActionButton3 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6094,19 +6248,19 @@ var ActionButton2 = styled57__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer = styled57__default.default.div`
+var ActionsContainer = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled57__default.default.time`
+var MessageTime = styled58__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled57__default.default.span`
+var StreamingIndicator = styled58__default.default.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -6163,7 +6317,7 @@ var AssistantMessageBase = ({
       ] }),
       attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) }),
       timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime, { children: timestamp }),
-      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton2, { onClick: action.onClick, children: [
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton3, { onClick: action.onClick, children: [
         action.icon,
         action.label
       ] }, index)) })
@@ -6202,11 +6356,11 @@ function stripToolCallMarkers(content) {
   stripped = stripped.replace(/[",]*\s*"[a-z_]+":\s*"[^"]*"\s*\}["]?/gi, "");
   return stripped.trim();
 }
-var GenerativeUIContainer = styled57__default.default.div`
+var GenerativeUIContainer = styled58__default.default.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-styled57__default.default.div`
+styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -6218,12 +6372,12 @@ styled57__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-styled57__default.default.span`
+styled58__default.default.span`
   display: flex;
   align-items: center;
   color: ${tokens.colors.primary};
 `;
-styled57__default.default.span`
+styled58__default.default.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
@@ -6283,7 +6437,7 @@ var AssistantMessageAdapterBase = ({
 var AssistantMessageAdapter = React4.memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
 var variantStyles = {
-  primary: styled57.css`
+  primary: styled58.css`
     background-color: ${tokens.colors.primary};
     color: ${tokens.colors.text.primary};
     border: none;
@@ -6303,7 +6457,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  secondary: styled57.css`
+  secondary: styled58.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: 1px solid ${tokens.colors.border.default};
@@ -6322,7 +6476,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  icon: styled57.css`
+  icon: styled58.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: none;
@@ -6345,26 +6499,26 @@ var variantStyles = {
   `
 };
 var sizeStyles = {
-  small: styled57.css`
+  small: styled58.css`
     padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
     font-size: ${tokens.typography.fontSize.sm};
     min-width: 60px;
     height: 28px;
   `,
-  medium: styled57.css`
+  medium: styled58.css`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.base};
     min-width: 80px;
     height: 36px;
   `,
-  large: styled57.css`
+  large: styled58.css`
     padding: ${tokens.spacing.md} ${tokens.spacing.lg};
     font-size: ${tokens.typography.fontSize.lg};
     min-width: 100px;
     height: 44px;
   `
 };
-var StyledButton2 = styled57__default.default.button`
+var StyledButton2 = styled58__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -6385,19 +6539,19 @@ var StyledButton2 = styled57__default.default.button`
   ${({ $size, $variant }) => $variant !== "icon" && sizeStyles[$size]}
 
   /* Icon variant size overrides */
-  ${({ $variant, $size }) => $variant === "icon" && styled57.css`
+  ${({ $variant, $size }) => $variant === "icon" && styled58.css`
       width: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
       height: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
       border-radius: ${tokens.borderRadius.sm};
     `}
 
   /* Pressed state */
-  ${({ $isPressed }) => $isPressed && styled57.css`
+  ${({ $isPressed }) => $isPressed && styled58.css`
       transform: scale(0.98);
     `}
 
   /* Loading state */
-  ${({ $isLoading }) => $isLoading && styled57.css`
+  ${({ $isLoading }) => $isLoading && styled58.css`
       cursor: wait;
       opacity: 0.7;
     `}
@@ -6447,15 +6601,15 @@ function Button2({
   );
 }
 Button2.displayName = "Button";
-var ActionsContainer2 = styled57__default.default.div`
+var ActionsContainer2 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
 
-  ${({ $layout }) => $layout === "horizontal" ? styled57.css`
+  ${({ $layout }) => $layout === "horizontal" ? styled58.css`
           flex-direction: row;
           flex-wrap: wrap;
-        ` : styled57.css`
+        ` : styled58.css`
           flex-direction: column;
           align-items: stretch;
 
@@ -6481,7 +6635,7 @@ function Actions({ actions, layout = "horizontal", className }) {
   )) });
 }
 Actions.displayName = "Actions";
-var dotPulse2 = styled57.keyframes`
+var dotPulse2 = styled58.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -6491,7 +6645,7 @@ var dotPulse2 = styled57.keyframes`
     transform: scale(1);
   }
 `;
-var fadeIn = styled57.keyframes`
+var fadeIn = styled58.keyframes`
   from {
     opacity: 0;
   }
@@ -6499,7 +6653,7 @@ var fadeIn = styled57.keyframes`
     opacity: 1;
   }
 `;
-var blink = styled57.keyframes`
+var blink = styled58.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -6507,7 +6661,7 @@ var blink = styled57.keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled57__default.default.div`
+var ResponseContainer = styled58__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -6519,13 +6673,13 @@ var ResponseContainer = styled57__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots3 = styled57__default.default.div`
+var LoadingDots3 = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled57__default.default.span`
+var Dot2 = styled58__default.default.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -6533,7 +6687,7 @@ var Dot2 = styled57__default.default.span`
   animation: ${dotPulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled57__default.default.div`
+var TypingIndicator = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6546,14 +6700,14 @@ var TypingIndicator = styled57__default.default.div`
     animation: ${dotPulse2} 1.4s ease-in-out infinite;
   }
 `;
-var Message4 = styled57__default.default.span`
+var Message5 = styled58__default.default.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__default.default.div`
+var StreamingText2 = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -6586,7 +6740,7 @@ var Response = ({
         /* @__PURE__ */ jsxRuntime.jsx(Dot2, { delay: 0.15 }),
         /* @__PURE__ */ jsxRuntime.jsx(Dot2, { delay: 0.3 })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Message4, { children: message })
+      /* @__PURE__ */ jsxRuntime.jsx(Message5, { children: message })
     ] });
   }
   if (isTyping) {
@@ -6596,7 +6750,7 @@ var Response = ({
         /* @__PURE__ */ jsxRuntime.jsx(Dot2, { delay: 0.15 }),
         /* @__PURE__ */ jsxRuntime.jsx(Dot2, { delay: 0.3 })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Message4, { children: message })
+      /* @__PURE__ */ jsxRuntime.jsx(Message5, { children: message })
     ] });
   }
   if (isStreaming && streamingContent) {
@@ -6604,7 +6758,7 @@ var Response = ({
   }
   return null;
 };
-var dotPulse3 = styled57.keyframes`
+var dotPulse3 = styled58.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -6614,7 +6768,7 @@ var dotPulse3 = styled57.keyframes`
     transform: scale(1);
   }
 `;
-var shake = styled57.keyframes`
+var shake = styled58.keyframes`
   0%, 100% {
     transform: translateX(0);
   }
@@ -6625,7 +6779,7 @@ var shake = styled57.keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled57__default.default.div`
+var AgentStateContainer = styled58__default.default.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -6639,35 +6793,35 @@ var AgentStateContainer = styled57__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled57__default.default.div`
+var StateContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled57__default.default.div`
+var IdleIndicator = styled58__default.default.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__default.default.div`
+var ErrorIndicator = styled58__default.default.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__default.default.span`
+var StateLabel = styled58__default.default.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__default.default.p`
+styled58__default.default.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -6675,7 +6829,7 @@ styled57__default.default.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled57__default.default.div`
+var ProgressBar = styled58__default.default.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -6683,7 +6837,7 @@ var ProgressBar = styled57__default.default.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill2 = styled57__default.default.div`
+var ProgressBarFill2 = styled58__default.default.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%);
@@ -6712,7 +6866,7 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var FooterContainer = styled57__default.default.footer`
+var FooterContainer = styled58__default.default.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6721,7 +6875,7 @@ var FooterContainer = styled57__default.default.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled57__default.default.div`
+var FooterContent = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6734,13 +6888,13 @@ var FooterContent = styled57__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled57__default.default.div`
+var FooterBranding = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled57__default.default.div`
+var FooterStatus = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6750,7 +6904,7 @@ var FooterStatus = styled57__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled57__default.default.a`
+var FooterLink = styled58__default.default.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -6798,7 +6952,7 @@ var Footer = ({
   ] }) });
 };
 Footer.displayName = "Footer";
-var pulse3 = styled57.keyframes`
+var pulse3 = styled58.keyframes`
   0%, 100% {
     opacity: 1;
     transform: scale(1);
@@ -6808,7 +6962,7 @@ var pulse3 = styled57.keyframes`
     transform: scale(1.1);
   }
 `;
-var Container14 = styled57__default.default.div`
+var Container14 = styled58__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -6824,7 +6978,7 @@ var Container14 = styled57__default.default.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled57__default.default.div`
+var StatusDot = styled58__default.default.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -6885,7 +7039,7 @@ var StatusDot = styled57__default.default.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled57__default.default.span`
+var Label = styled58__default.default.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -6912,7 +7066,7 @@ var Label = styled57__default.default.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled57__default.default.div`
+var BadgeContainer = styled58__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -6989,7 +7143,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Container14, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled57__default.default.header`
+var HeaderContainer = styled58__default.default.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -7005,14 +7159,14 @@ var HeaderContainer = styled57__default.default.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled57__default.default.div`
+var HeaderContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled57__default.default.h1`
+var HeaderTitle = styled58__default.default.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -7023,7 +7177,7 @@ var HeaderTitle = styled57__default.default.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled57__default.default.p`
+var HeaderSubtitle = styled58__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -7033,13 +7187,13 @@ var HeaderSubtitle = styled57__default.default.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled57__default.default.div`
+var HeaderActions = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton3 = styled57__default.default.button`
+var ActionButton4 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7121,7 +7275,7 @@ var Header = ({
       subtitle && /* @__PURE__ */ jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(HeaderActions, { children: [
-      onMinimize && /* @__PURE__ */ jsxRuntime.jsx(ActionButton3, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      onMinimize && /* @__PURE__ */ jsxRuntime.jsx(ActionButton4, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "16",
@@ -7136,7 +7290,7 @@ var Header = ({
           ]
         }
       ) }),
-      onClose && /* @__PURE__ */ jsxRuntime.jsx(ActionButton3, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(ActionButton4, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "16",
@@ -7156,13 +7310,13 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var InputContainer = styled57__default.default.div`
+var InputContainer = styled58__default.default.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper3 = styled57__default.default.div`
+var InputWrapper3 = styled58__default.default.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -7182,7 +7336,7 @@ var InputWrapper3 = styled57__default.default.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled57__default.default.textarea`
+var TextArea = styled58__default.default.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -7228,7 +7382,7 @@ var TextArea = styled57__default.default.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled57__default.default.button`
+var SendButton = styled58__default.default.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -7358,7 +7512,7 @@ var Input2 = ({
     )
   ] }) });
 };
-var MessagesContainer = styled57__default.default.div`
+var MessagesContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7387,7 +7541,7 @@ var Messages = ({
   return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var MessagesListContainer = styled57__default.default.div`
+var MessagesListContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -7427,7 +7581,7 @@ var MessagesListContainer = styled57__default.default.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled57__default.default.div`
+var MessagesListContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -7543,7 +7697,7 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled57__default.default.div`
+var StyledUserMessage2 = styled58__default.default.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -7551,7 +7705,7 @@ var StyledUserMessage2 = styled57__default.default.div`
   padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled57__default.default.div`
+var MessageBubble = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   max-width: 85%;
@@ -7578,7 +7732,7 @@ var MessageBubble = styled57__default.default.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled57__default.default.p`
+var MessageContent2 = styled58__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -7587,13 +7741,13 @@ var MessageContent2 = styled57__default.default.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled57__default.default.time`
+var MessageTime2 = styled58__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton4 = styled57__default.default.button`
+var ActionButton5 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -7617,12 +7771,12 @@ var ActionButton4 = styled57__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled57__default.default.div`
+var ActionsContainer3 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var Avatar3 = styled57__default.default.img`
+var Avatar3 = styled58__default.default.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -7653,7 +7807,7 @@ var UserMessage2 = ({
         }
       ) }),
       timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime2, { children: timestamp }),
-      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton4, { onClick: action.onClick, children: [
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton5, { onClick: action.onClick, children: [
         action.icon,
         action.label
       ] }, index)) })
@@ -7661,7 +7815,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled57__default.default.div`
+var ErrorContainer = styled58__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -7675,7 +7829,7 @@ var ErrorContainer = styled57__default.default.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled57__default.default.div`
+var IconContainer = styled58__default.default.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -7692,29 +7846,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.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__default.default.div`
+var Content2 = styled58__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage3 = styled57__default.default.div`
+var ErrorMessage3 = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled57__default.default.div`
+var ErrorDetails = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled57__default.default.div`
+var Actions2 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button3 = styled57__default.default.button`
+var Button3 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -7743,7 +7897,7 @@ var Button3 = styled57__default.default.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled57__default.default.button`
+var CloseButton = styled58__default.default.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -7802,7 +7956,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled57__default.default.div`
+var SuggestionsContainer = styled58__default.default.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -7835,7 +7989,7 @@ var SuggestionsContainer = styled57__default.default.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled57__default.default.button`
+var StyledSuggestion = styled58__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -7868,7 +8022,7 @@ var StyledSuggestion = styled57__default.default.button`
     box-shadow: none;
   }
 
-  ${({ $isPressed }) => $isPressed && styled57.css`
+  ${({ $isPressed }) => $isPressed && styled58.css`
       transform: scale(0.98);
     `}
 
@@ -7908,7 +8062,7 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
-var WindowContainer = styled57__default.default.div`
+var WindowContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -7927,7 +8081,7 @@ var WindowContainer = styled57__default.default.div`
   height: ${({ $height }) => $height};
 
   /* Fullscreen state */
-  ${({ $isFullscreen }) => $isFullscreen && styled57.css`
+  ${({ $isFullscreen }) => $isFullscreen && styled58.css`
       width: 100vw;
       height: 100vh;
       border-radius: 0;
@@ -7939,7 +8093,7 @@ var WindowContainer = styled57__default.default.div`
     `}
 
   /* Minimized state */
-  ${({ $isMinimized }) => $isMinimized && styled57.css`
+  ${({ $isMinimized }) => $isMinimized && styled58.css`
       height: 60px;
       width: 300px;
       box-shadow: ${tokens.shadows.sm};
@@ -7958,7 +8112,7 @@ var WindowContainer = styled57__default.default.div`
 
   /* Responsive behavior for smaller screens */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled57.css`
+    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled58.css`
         width: 100vw;
         height: 100vh;
         border-radius: 0;
@@ -8087,7 +8241,7 @@ function FacebookIcon({
   ) });
 }
 FacebookIcon.displayName = "FacebookIcon";
-var StyledIconWrapper = styled57__default.default.button`
+var StyledIconWrapper = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -8357,7 +8511,7 @@ function InstagramIcon({
   ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
-var StyledIconWrapper2 = styled57__default.default.button`
+var StyledIconWrapper2 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -8493,7 +8647,7 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
-var StyledIconWrapper3 = styled57__default.default.button`
+var StyledIconWrapper3 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9130,7 +9284,7 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
-var StyledXIcon = styled57__default.default.svg`
+var StyledXIcon = styled58__default.default.svg`
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
@@ -9518,9 +9672,9 @@ var PostApprovalControls = ({
         ) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Actions3, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ActionButton5, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ActionButton6, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
         onSave && /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton5,
+          ActionButton6,
           {
             $variant: "save",
             onClick: handleSave,
@@ -9529,7 +9683,7 @@ var PostApprovalControls = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton5,
+          ActionButton6,
           {
             $variant: "approve",
             onClick: handleApprove,
@@ -9539,14 +9693,14 @@ var PostApprovalControls = ({
         )
       ] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Actions3, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ActionButton5, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ActionButton5, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ActionButton5, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
+      /* @__PURE__ */ jsxRuntime.jsx(ActionButton6, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ActionButton6, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ActionButton6, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
     ] }) })
   ] });
 };
 PostApprovalControls.displayName = "PostApprovalControls";
-var Container15 = styled57__default.default.div`
+var Container15 = styled58__default.default.div`
   display: grid;
   gap: 0;
   background: ${tokens.colors.background.dark};
@@ -9556,7 +9710,7 @@ var Container15 = styled57__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header2 = styled57__default.default.div`
+var Header2 = styled58__default.default.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -9570,7 +9724,7 @@ var Header2 = styled57__default.default.div`
     background: ${tokens.colors.background.light};
   }
 `;
-var StatusBadge = styled57__default.default.span`
+var StatusBadge = styled58__default.default.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -9581,23 +9735,23 @@ var StatusBadge = styled57__default.default.span`
   color: ${({ $color }) => $color};
   white-space: nowrap;
 `;
-var MetaInfo = styled57__default.default.div`
+var MetaInfo = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   min-width: 0;
 `;
-var PostId = styled57__default.default.span`
+var PostId = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   font-family: ${tokens.typography.fontFamily.monospace};
 `;
-var ErrorText = styled57__default.default.span`
+var ErrorText = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CollapseIcon = styled57__default.default.span`
+var CollapseIcon = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.medium};
@@ -9607,17 +9761,17 @@ var CollapseIcon = styled57__default.default.span`
   align-items: center;
   justify-content: center;
 `;
-var Content3 = styled57__default.default.div`
+var Content3 = styled58__default.default.div`
   display: grid;
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.default};
 `;
-var EditSection = styled57__default.default.div`
+var EditSection = styled58__default.default.div`
   display: grid;
   gap: ${tokens.spacing.xs};
 `;
-var EditLabel = styled57__default.default.label`
+var EditLabel = styled58__default.default.label`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -9626,7 +9780,7 @@ var EditLabel = styled57__default.default.label`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CharCount = styled57__default.default.span`
+var CharCount = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.monospace};
@@ -9636,7 +9790,7 @@ var CharCount = styled57__default.default.span`
   return tokens.colors.success;
 }};
 `;
-var EditTextarea = styled57__default.default.textarea`
+var EditTextarea = styled58__default.default.textarea`
   width: 100%;
   min-height: 100px;
   padding: ${tokens.spacing.sm};
@@ -9666,14 +9820,14 @@ var EditTextarea = styled57__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var ProgressBar2 = styled57__default.default.div`
+var ProgressBar2 = styled58__default.default.div`
   width: 100%;
   height: 3px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressFill = styled57__default.default.div`
+var ProgressFill = styled58__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -9684,12 +9838,12 @@ var ProgressFill = styled57__default.default.div`
   return tokens.colors.success;
 }};
 `;
-var Actions3 = styled57__default.default.div`
+var Actions3 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   justify-content: flex-end;
 `;
-var ActionButton5 = styled57__default.default.button`
+var ActionButton6 = styled58__default.default.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.md};
   font-size: ${tokens.typography.fontSize.sm};
@@ -9913,7 +10067,7 @@ var PostPreviewCard = ({
   );
 };
 PostPreviewCard.displayName = "PostPreviewCard";
-var fadeIn2 = styled57.keyframes`
+var fadeIn2 = styled58.keyframes`
   from {
     opacity: 0;
     transform: translate(2px, 2px);
@@ -9923,7 +10077,7 @@ var fadeIn2 = styled57.keyframes`
     transform: translateY(0);
   }
 `;
-var CardContainer = styled57__default.default.div`
+var CardContainer = styled58__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
@@ -9936,7 +10090,7 @@ var CardContainer = styled57__default.default.div`
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
   }
 `;
-var PlatformHeader = styled57__default.default.div`
+var PlatformHeader = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -9944,7 +10098,7 @@ var PlatformHeader = styled57__default.default.div`
   padding-bottom: ${tokens.spacing.sm};
   border-bottom: 1px solid ${tokens.colors.border.default};
 `;
-var PlatformIcon = styled57__default.default.span`
+var PlatformIcon = styled58__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9956,13 +10110,13 @@ var PlatformIcon = styled57__default.default.span`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var PlatformName = styled57__default.default.span`
+var PlatformName = styled58__default.default.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var CharacterBadge = styled57__default.default.span`
+var CharacterBadge = styled58__default.default.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
   font-size: 11px;
@@ -9974,10 +10128,10 @@ var CharacterBadge = styled57__default.default.span`
   return tokens.colors.success;
 }};
 `;
-var ContentSection = styled57__default.default.div`
+var ContentSection = styled58__default.default.div`
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PostContent = styled57__default.default.div`
+var PostContent = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.base};
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: 1.6;
@@ -9989,7 +10143,7 @@ var PostContent = styled57__default.default.div`
   /* Smooth fade-in animation when content appears */
   animation: ${fadeIn2} 0.4s ease-out;
 `;
-var PostContentEditable = styled57__default.default.textarea`
+var PostContentEditable = styled58__default.default.textarea`
   width: 100%;
   min-height: 180px;
   max-height: 300px;
@@ -10018,12 +10172,12 @@ var PostContentEditable = styled57__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var HashtagsContainer = styled57__default.default.div`
+var HashtagsContainer = styled58__default.default.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 `;
-var HashtagPill = styled57__default.default.span`
+var HashtagPill = styled58__default.default.span`
   display: inline-block;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
@@ -10040,17 +10194,17 @@ var HashtagPill = styled57__default.default.span`
     color: ${tokens.colors.primary};
   }
 `;
-var ProgressBarContainer2 = styled57__default.default.div`
+var ProgressBarContainer2 = styled58__default.default.div`
   margin-top: ${tokens.spacing.sm};
 `;
-var ProgressBarTrack = styled57__default.default.div`
+var ProgressBarTrack = styled58__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill3 = styled57__default.default.div`
+var ProgressBarFill3 = styled58__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -10061,7 +10215,7 @@ var ProgressBarFill3 = styled57__default.default.div`
   return tokens.colors.success;
 }};
 `;
-var ImageChangeButton = styled57__default.default.button`
+var ImageChangeButton = styled58__default.default.button`
   display: block;
   width: 100%;
   padding: 0;
@@ -10070,21 +10224,21 @@ var ImageChangeButton = styled57__default.default.button`
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 `;
-var ImagePreviewContainer = styled57__default.default.div`
+var ImagePreviewContainer = styled58__default.default.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__default.default.img`
+var ImagePreview = styled58__default.default.img`
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   display: block;
 `;
-var ImageOverlay = styled57__default.default.div`
+var ImageOverlay = styled58__default.default.div`
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -10103,12 +10257,12 @@ var ImageOverlay = styled57__default.default.div`
     opacity: 0.6;
   }
 `;
-var OverlayText = styled57__default.default.span`
+var OverlayText = styled58__default.default.span`
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var ImagePlaceholder = styled57__default.default.div`
+var ImagePlaceholder = styled58__default.default.div`
   width: 100%;
   height: 200px;
   background: linear-gradient(
@@ -10138,7 +10292,7 @@ var ImagePlaceholder = styled57__default.default.div`
     }
   `}
 `;
-var PlaceholderIcon = styled57__default.default.div`
+var PlaceholderIcon = styled58__default.default.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
@@ -10152,7 +10306,7 @@ var PlaceholderIcon = styled57__default.default.div`
     height: 24px;
   }
 `;
-var shimmer2 = styled57.keyframes`
+var shimmer2 = styled58.keyframes`
   0% {
     background-position: -200% 0;
   }
@@ -10160,13 +10314,13 @@ var shimmer2 = styled57.keyframes`
     background-position: 200% 0;
   }
 `;
-var SkeletonContent = styled57__default.default.div`
+var SkeletonContent = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm} 0;
 `;
-var SkeletonLine = styled57__default.default.div`
+var SkeletonLine = styled58__default.default.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -10267,13 +10421,13 @@ var PlatformCarousel = ({
   ] });
 };
 PlatformCarousel.displayName = "PlatformCarousel";
-var CarouselContainer = styled57__default.default.div`
+var CarouselContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: ${tokens.spacing.md};
 `;
-var TabsContainer = styled57__default.default.div`
+var TabsContainer = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
@@ -10287,7 +10441,7 @@ var TabsContainer = styled57__default.default.div`
     display: none;
   }
 `;
-var PlatformTab = styled57__default.default.button`
+var PlatformTab = styled58__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -10313,17 +10467,17 @@ var PlatformTab = styled57__default.default.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var PlatformIcon2 = styled57__default.default.span`
+var PlatformIcon2 = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.base};
   color: ${({ $platformColor }) => $platformColor};
   transition: color ${tokens.transitions.fast};
 `;
-var ContentContainer2 = styled57__default.default.div`
+var ContentContainer2 = styled58__default.default.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
 `;
-var Slide = styled57__default.default.div`
+var Slide = styled58__default.default.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
   top: 0;
   left: 0;
@@ -10336,13 +10490,13 @@ var Slide = styled57__default.default.div`
     transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
   pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
 `;
-var NavigationDotsContainer = styled57__default.default.div`
+var NavigationDotsContainer = styled58__default.default.div`
   display: flex;
   justify-content: center;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
 `;
-var NavigationDot = styled57__default.default.button`
+var NavigationDot = styled58__default.default.button`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -10362,7 +10516,7 @@ var NavigationDot = styled57__default.default.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var EmptyState = styled57__default.default.div`
+var EmptyState = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10421,7 +10575,7 @@ var PlatformGrid = ({
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
-var Grid = styled57__default.default.div`
+var Grid = styled58__default.default.div`
   display: grid;
   gap: ${tokens.spacing.md};
   width: 100%;
@@ -10441,7 +10595,7 @@ var Grid = styled57__default.default.div`
     grid-template-columns: repeat(3, 1fr);
   }
 `;
-var GridCell = styled57__default.default.div`
+var GridCell = styled58__default.default.div`
   min-width: 0; /* Prevent grid blowout with long content */
   cursor: pointer;
   border-radius: ${tokens.borderRadius.lg};
@@ -10451,7 +10605,7 @@ var GridCell = styled57__default.default.div`
     transform: translateY(-2px);
   }
 `;
-var EmptyState2 = styled57__default.default.div`
+var EmptyState2 = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10460,12 +10614,12 @@ var EmptyState2 = styled57__default.default.div`
   border: 1px dashed ${tokens.colors.border.hover};
   border-radius: ${tokens.borderRadius.lg};
 `;
-var EmptyStateText = styled57__default.default.p`
+var EmptyStateText = styled58__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var Container16 = styled57__default.default.div`
+var Container16 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -10479,7 +10633,7 @@ var Container16 = styled57__default.default.div`
   );
   overflow: auto;
 `;
-var Header3 = styled57__default.default.div`
+var Header3 = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10505,7 +10659,7 @@ var Header3 = styled57__default.default.div`
     pointer-events: none;
   }
 `;
-var Title = styled57__default.default.h2`
+var Title = styled58__default.default.h2`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -10515,12 +10669,12 @@ var Title = styled57__default.default.h2`
   text-overflow: ellipsis;
   min-width: 0;
 `;
-var ViewToggle = styled57__default.default.div`
+var ViewToggle = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var ToggleButton2 = styled57__default.default.button`
+var ToggleButton2 = styled58__default.default.button`
   padding: ${tokens.spacing.xs};
   width: 32px;
   height: 32px;
@@ -10548,7 +10702,7 @@ var ToggleButton2 = styled57__default.default.button`
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
   }
 `;
-var Content4 = styled57__default.default.div`
+var Content4 = styled58__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -10557,7 +10711,7 @@ var Content4 = styled57__default.default.div`
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;
-var EmptyState3 = styled57__default.default.div`
+var EmptyState3 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10585,7 +10739,7 @@ var EmptyState3 = styled57__default.default.div`
     font-size: ${tokens.typography.fontSize.sm};
   }
 `;
-var PostCount = styled57__default.default.span`
+var PostCount = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -10836,7 +10990,19 @@ var renderSimpleMarkdown = (text) => {
     }
     if (segment.startsWith("{{CODE:")) {
       const content = segment.slice(7, -2);
-      return /* @__PURE__ */ jsxRuntime.jsx("code", { style: { background: "rgba(255,255,255,0.1)", padding: "0 4px", borderRadius: "3px", fontFamily: "monospace" }, children: content }, i);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "code",
+        {
+          style: {
+            background: "rgba(255,255,255,0.1)",
+            padding: "0 4px",
+            borderRadius: "3px",
+            fontFamily: "monospace"
+          },
+          children: content
+        },
+        i
+      );
     }
     return segment;
   });
@@ -10949,16 +11115,21 @@ var RedditOpportunityCard = ({
           ] }),
           !condensed && opportunity.postContent && /* @__PURE__ */ jsxRuntime.jsx(PostContent2, { children: truncateText(opportunity.postContent, 300) }),
           /* @__PURE__ */ jsxRuntime.jsxs(PostAuthor, { children: [
-            "Posted by u/",
-            opportunity.postAuthor || "unknown",
-            opportunity.flair && /* @__PURE__ */ jsxRuntime.jsx(PostFlair, { children: opportunity.flair })
+            /* @__PURE__ */ jsxRuntime.jsxs(PostAuthorLine, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Posted by" }),
+              opportunity.flair && /* @__PURE__ */ jsxRuntime.jsx(PostFlair, { children: opportunity.flair })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PostAuthorName, { children: [
+              "u/",
+              opportunity.postAuthor || "unknown"
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(ReplySection, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ReplySectionHeader, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ReplyLabel, { children: "Your Draft Reply" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ReplyMeta, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ReplyMetaRow, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(ToneBadge, { tone: opportunity.toneMatch }),
               /* @__PURE__ */ jsxRuntime.jsxs(CharacterCount, { $color: charLimitColor, children: [
                 charCount,
@@ -10990,7 +11161,7 @@ var RedditOpportunityCard = ({
   );
 };
 RedditOpportunityCard.displayName = "RedditOpportunityCard";
-var fadeIn3 = styled57.keyframes`
+var fadeIn3 = styled58.keyframes`
   from {
     opacity: 0;
     transform: translateY(8px);
@@ -11000,17 +11171,17 @@ var fadeIn3 = styled57.keyframes`
     transform: translateY(0);
   }
 `;
-var shimmer3 = styled57.keyframes`
+var shimmer3 = styled58.keyframes`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 `;
-var Icon2 = styled57__default.default.img`
+var Icon2 = styled58__default.default.img`
   width: 14px;
   height: 14px;
   vertical-align: middle;
   opacity: 0.8;
 `;
-var CardContainer2 = styled57__default.default.div`
+var CardContainer2 = styled58__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.lg};
@@ -11028,7 +11199,7 @@ var CardContainer2 = styled57__default.default.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var CardHeader = styled57__default.default.div`
+var CardHeader = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11041,12 +11212,12 @@ var CardHeader = styled57__default.default.div`
     align-items: flex-start;
   }
 `;
-var HeaderLeft = styled57__default.default.div`
+var HeaderLeft = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var SubredditBadgeContainer = styled57__default.default.span`
+var SubredditBadgeContainer = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11058,15 +11229,20 @@ var SubredditBadgeContainer = styled57__default.default.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__default.default.a`
+var SubredditLink = styled58__default.default.a`
   text-decoration: none;
 
   &:hover ${SubredditBadgeContainer} {
     background: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ScoreBadgeContainer = styled57__default.default.div`
+var ScoreBadgeContainer = styled58__default.default.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
@@ -11074,43 +11250,55 @@ var ScoreBadgeContainer = styled57__default.default.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__default.default.span`
+var ScoreValue = styled58__default.default.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__default.default.span`
+var ScoreMax = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
 `;
-var ScoreLabel = styled57__default.default.span`
+var ScoreLabel = styled58__default.default.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__default.default.div`
+var StatsContainer = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatItem = styled57__default.default.span`
+var StatItem = styled58__default.default.span`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatValue = styled57__default.default.span`
+var StatValue = styled58__default.default.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__default.default.span`
+var StatDivider = styled58__default.default.span`
   color: ${tokens.colors.text.tertiary};
 `;
-var PostPreviewSection = styled57__default.default.div`
+var PostPreviewSection = styled58__default.default.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var PostTitle = styled57__default.default.a`
+var PostTitle = styled58__default.default.a`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -11120,63 +11308,117 @@ var PostTitle = styled57__default.default.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__default.default.span`
+var ExternalLinkIcon = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   flex-shrink: 0;
 `;
-var PostContent2 = styled57__default.default.p`
+var PostContent2 = styled58__default.default.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__default.default.div`
+var PostAuthor = styled58__default.default.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__default.default.span`
-  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+var PostAuthorLine = styled58__default.default.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__default.default.span`
+  color: ${tokens.colors.text.secondary};
+`;
+var PostFlair = styled58__default.default.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__default.default.hr`
+var Divider = styled58__default.default.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__default.default.div``;
-var ReplySectionHeader = styled57__default.default.div`
+var ReplySection = styled58__default.default.div``;
+var ReplySectionHeader = styled58__default.default.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 ReplyMetaRow = styled58__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    gap: ${tokens.spacing.xs};
+  }
 `;
-var ReplyLabel = styled57__default.default.span`
+var ReplyLabel = styled58__default.default.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__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: ${tokens.spacing.sm};
-`;
-var ToneBadgeContainer = styled57__default.default.span`
+var ToneBadgeContainer = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11186,21 +11428,23 @@ var ToneBadgeContainer = styled57__default.default.span`
   background: ${({ $color }) => `${$color}20`};
   color: ${({ $color }) => $color};
 `;
-var ToneIcon = styled57__default.default.img`
+var ToneIcon = styled58__default.default.img`
   width: 12px;
   height: 12px;
 `;
-var CharacterCount = styled57__default.default.span`
+var CharacterCount = styled58__default.default.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__default.default.div`
+var ReplyContent = styled58__default.default.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};
@@ -11208,8 +11452,14 @@ var ReplyContent = styled57__default.default.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__default.default.textarea`
+var ReplyTextarea = styled58__default.default.textarea`
   width: 100%;
   min-height: 150px;
   max-height: 400px;
@@ -11226,6 +11476,13 @@ var ReplyTextarea = styled57__default.default.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;
@@ -11235,7 +11492,7 @@ var ReplyTextarea = styled57__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var StrategyHint = styled57__default.default.div`
+var StrategyHint = styled58__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -11244,40 +11501,40 @@ var StrategyHint = styled57__default.default.div`
   border-radius: ${tokens.borderRadius.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StrategyIconImg = styled57__default.default.img`
+var StrategyIconImg = styled58__default.default.img`
   width: 16px;
   height: 16px;
   opacity: 0.8;
 `;
-var StrategyText = styled57__default.default.span`
+var StrategyText = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   font-style: italic;
 `;
-var ProgressBarContainer3 = styled57__default.default.div`
+var ProgressBarContainer3 = styled58__default.default.div`
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarTrack2 = styled57__default.default.div`
+var ProgressBarTrack2 = styled58__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill4 = styled57__default.default.div`
+var ProgressBarFill4 = styled58__default.default.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__default.default.div`
+var SkeletonContent2 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var SkeletonLine2 = styled57__default.default.div`
+var SkeletonLine2 = styled58__default.default.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -11340,9 +11597,9 @@ var RedditEngagementControls = ({
         " Editing Mode"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(EditModeActions, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ActionButton6, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ActionButton7, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "save",
             onClick: () => onSaveEdit(currentReply),
@@ -11370,7 +11627,7 @@ var RedditEngagementControls = ({
     !isEditing && isPending && /* @__PURE__ */ jsxRuntime.jsxs(MainActions, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(SecondaryActions, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "tertiary",
             onClick: handleRegenerate,
@@ -11383,7 +11640,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "edit",
             onClick: onToggleEdit,
@@ -11396,7 +11653,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "skip",
             onClick: handleSkip,
@@ -11411,7 +11668,7 @@ var RedditEngagementControls = ({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(PrimaryActions, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: isEngaged && !copiedFeedback ? "engaged" : "primary",
             onClick: handleCopyAndOpen,
@@ -11425,7 +11682,7 @@ var RedditEngagementControls = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          ActionButton6,
+          ActionButton7,
           {
             $variant: "success",
             onClick: onMarkPosted,
@@ -11442,7 +11699,7 @@ var RedditEngagementControls = ({
   ] });
 };
 RedditEngagementControls.displayName = "RedditEngagementControls";
-var pulse4 = styled57.keyframes`
+var pulse4 = styled58.keyframes`
   0%, 100% {
     box-shadow: 0 0 0 0 ${tokens.colors.primary}66;
   }
@@ -11450,7 +11707,7 @@ var pulse4 = styled57.keyframes`
     box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
   }
 `;
-var ControlsContainer = styled57__default.default.div`
+var ControlsContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
@@ -11459,7 +11716,7 @@ var ControlsContainer = styled57__default.default.div`
   border-radius: ${tokens.borderRadius.lg};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var EditModeSection = styled57__default.default.div`
+var EditModeSection = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11468,25 +11725,25 @@ var EditModeSection = styled57__default.default.div`
   border: 1px solid ${tokens.colors.status.editing}40;
   border-radius: ${tokens.borderRadius.md};
 `;
-var EditModeLabel = styled57__default.default.span`
+var EditModeLabel = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.status.editing};
 `;
-var EditModeActions = styled57__default.default.div`
+var EditModeActions = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var InputSection = styled57__default.default.div`
+var InputSection = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
 `;
-var InputLabel = styled57__default.default.label`
+var InputLabel = styled58__default.default.label`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var InputRow = styled57__default.default.div`
+var InputRow = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
@@ -11495,7 +11752,7 @@ var InputRow = styled57__default.default.div`
     flex-direction: column;
   }
 `;
-var TextInput = styled57__default.default.input`
+var TextInput = styled58__default.default.input`
   flex: 1;
   min-width: 0;
   padding: ${tokens.spacing.sm};
@@ -11519,7 +11776,7 @@ var TextInput = styled57__default.default.input`
     width: 100%;
   }
 `;
-var SmallButton = styled57__default.default.button`
+var SmallButton = styled58__default.default.button`
   padding: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.tertiary};
@@ -11534,12 +11791,12 @@ var SmallButton = styled57__default.default.button`
     background: ${tokens.colors.surface.overlay};
   }
 `;
-var MainActions = styled57__default.default.div`
+var MainActions = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
 `;
-var SecondaryActions = styled57__default.default.div`
+var SecondaryActions = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -11550,7 +11807,7 @@ var SecondaryActions = styled57__default.default.div`
     }
   }
 `;
-var PrimaryActions = styled57__default.default.div`
+var PrimaryActions = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -11561,12 +11818,12 @@ var PrimaryActions = styled57__default.default.div`
     }
   }
 `;
-var Icon3 = styled57__default.default.img`
+var Icon3 = styled58__default.default.img`
   width: 16px;
   height: 16px;
   vertical-align: middle;
 `;
-var ActionButton6 = styled57__default.default.button`
+var ActionButton7 = styled58__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11590,7 +11847,7 @@ var ActionButton6 = styled57__default.default.button`
   ${({ $variant }) => {
   switch ($variant) {
     case "primary":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.primary};
           color: white;
           &:hover:not(:disabled) {
@@ -11601,7 +11858,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "success":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.success};
           color: white;
           &:hover:not(:disabled) {
@@ -11612,7 +11869,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "skip":
-      return styled57.css`
+      return styled58.css`
           background: transparent;
           color: ${tokens.colors.text.secondary};
           border: 1px solid ${tokens.colors.border.default};
@@ -11622,7 +11879,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "edit":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.status.editing}20;
           color: ${tokens.colors.status.editing};
           border: 1px solid ${tokens.colors.status.editing}40;
@@ -11631,7 +11888,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "tertiary":
-      return styled57.css`
+      return styled58.css`
           background: transparent;
           color: ${tokens.colors.accent};
           border: 1px solid ${tokens.colors.accent}40;
@@ -11640,7 +11897,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "cancel":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.error}15;
           color: ${tokens.colors.error};
           border: 1px solid ${tokens.colors.error}30;
@@ -11649,7 +11906,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "save":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.success};
           color: white;
           &:hover:not(:disabled) {
@@ -11657,7 +11914,7 @@ var ActionButton6 = styled57__default.default.button`
           }
         `;
     case "engaged":
-      return styled57.css`
+      return styled58.css`
           background: ${tokens.colors.text.tertiary};
           color: ${tokens.colors.background.darker};
           cursor: default;
@@ -11670,7 +11927,7 @@ var ActionButton6 = styled57__default.default.button`
   }
 }}
 
-  ${({ $pulse }) => $pulse && styled57.css`
+  ${({ $pulse }) => $pulse && styled58.css`
       animation: ${pulse4} 2s ease-in-out infinite;
     `}
 `;
@@ -11793,7 +12050,7 @@ function TokenUsageCard({
     onViewAll && transactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
   ] });
 }
-var Card2 = styled57__default.default.div`
+var Card2 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
@@ -11802,7 +12059,7 @@ var Card2 = styled57__default.default.div`
   height: 100%;
   overflow: hidden;
 `;
-var Header4 = styled57__default.default.div`
+var Header4 = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11812,65 +12069,65 @@ var Header4 = styled57__default.default.div`
   min-height: 48px;
   flex-shrink: 0;
 `;
-var Title2 = styled57__default.default.h3`
+var Title2 = styled58__default.default.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__default.default.span`
+var Period = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var UsageSection = styled57__default.default.div`
+var UsageSection = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var UsageStats = styled57__default.default.div`
+var UsageStats = styled58__default.default.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
 `;
-var CurrentUsage = styled57__default.default.span`
+var CurrentUsage = styled58__default.default.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__default.default.span`
+var UsageSeparator = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var MaxUsage = styled57__default.default.span`
+var MaxUsage = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var ProgressContainer = styled57__default.default.div`
+var ProgressContainer = styled58__default.default.div`
   width: 100%;
   height: 8px;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var ProgressBar3 = styled57__default.default.div`
+var ProgressBar3 = styled58__default.default.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__default.default.span`
+var PercentageLabel = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $level }) => usageLevelColors[$level]};
 `;
-var TransactionsSection = styled57__default.default.div`
+var TransactionsSection = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -11880,19 +12137,19 @@ var TransactionsSection = styled57__default.default.div`
   overflow-y: auto;
   min-height: 0;
 `;
-var TransactionsHeader = styled57__default.default.h4`
+var TransactionsHeader = styled58__default.default.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__default.default.div`
+var TransactionsList = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var TransactionItem = styled57__default.default.div`
+var TransactionItem = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -11909,7 +12166,7 @@ var TransactionItem = styled57__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var TransactionIcon = styled57__default.default.span`
+var TransactionIcon = styled58__default.default.span`
   width: 24px;
   height: 24px;
   display: flex;
@@ -11931,12 +12188,12 @@ var TransactionIcon = styled57__default.default.span`
 }};
   }
 `;
-var TransactionInfo = styled57__default.default.div`
+var TransactionInfo = styled58__default.default.div`
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var TransactionDescription = styled57__default.default.div`
+var TransactionDescription = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
@@ -11944,7 +12201,7 @@ var TransactionDescription = styled57__default.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var TransactionMeta = styled57__default.default.div`
+var TransactionMeta = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -11958,21 +12215,21 @@ var TransactionMeta = styled57__default.default.div`
     white-space: nowrap;
   }
 `;
-var TransactionTokens = styled57__default.default.span`
+var TransactionTokens = styled58__default.default.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__default.default.div`
+var EmptyState4 = styled58__default.default.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__default.default.button`
+var ViewAllButton = styled58__default.default.button`
   margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
@@ -11990,11 +12247,11 @@ var ViewAllButton = styled57__default.default.button`
     color: ${tokens.colors.text.primary};
   }
 `;
-var pulse5 = styled57.keyframes`
+var pulse5 = styled58.keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
 `;
-var SkeletonBlock = styled57__default.default.div`
+var SkeletonBlock = styled58__default.default.div`
   width: ${({ $width }) => $width};
   height: ${({ $height }) => $height};
   background: ${tokens.colors.background.light};
@@ -12082,7 +12339,7 @@ var WorkflowCard = ({
   );
 };
 WorkflowCard.displayName = "WorkflowCard";
-var Card3 = styled57__default.default.button`
+var Card3 = styled58__default.default.button`
   display: grid;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
@@ -12113,7 +12370,7 @@ var Card3 = styled57__default.default.button`
     cursor: not-allowed;
   }
 `;
-var WorkflowName2 = styled57__default.default.h3`
+var WorkflowName2 = styled58__default.default.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -12124,7 +12381,7 @@ var WorkflowName2 = styled57__default.default.h3`
   white-space: nowrap;
   min-width: 0;
 `;
-var Description3 = styled57__default.default.p`
+var Description3 = styled58__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
@@ -12136,7 +12393,7 @@ var Description3 = styled57__default.default.p`
   word-break: break-word;
   min-width: 0;
 `;
-var CardFooter = styled57__default.default.div`
+var CardFooter = styled58__default.default.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -12145,13 +12402,13 @@ var CardFooter = styled57__default.default.div`
   border-top: 1px solid ${tokens.colors.border.subtle};
   width: 100%;
 `;
-var IntegrationList = styled57__default.default.div`
+var IntegrationList = styled58__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var IntegrationIconWrapper = styled57__default.default.span`
+var IntegrationIconWrapper = styled58__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12173,12 +12430,12 @@ var IntegrationIconWrapper = styled57__default.default.span`
     }
   `}
 `;
-var IntegrationIcon = styled57__default.default.img`
+var IntegrationIcon = styled58__default.default.img`
   width: 16px;
   height: 16px;
   object-fit: contain;
 `;
-var Indicators = styled57__default.default.div`
+var Indicators = styled58__default.default.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -12186,7 +12443,7 @@ var Indicators = styled57__default.default.div`
   margin-left: auto;
   min-width: 0;
 `;
-var IndicatorPill = styled57__default.default.span`
+var IndicatorPill = styled58__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -12195,14 +12452,14 @@ var IndicatorPill = styled57__default.default.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__default.default.span`
+var IndicatorDot = styled58__default.default.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__default.default.span`
+var IndicatorText = styled58__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
@@ -12213,7 +12470,7 @@ var severityColors = {
   warning: tokens.colors.warning,
   info: tokens.colors.info
 };
-var AlertContainer = styled57__default.default.div`
+var AlertContainer = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => {
@@ -12231,7 +12488,7 @@ var AlertContainer = styled57__default.default.div`
   max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ModalOverlay = styled57__default.default.div`
+var ModalOverlay = styled58__default.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -12244,53 +12501,53 @@ var ModalOverlay = styled57__default.default.div`
   z-index: ${tokens.zIndex.modal};
   padding: ${tokens.spacing.lg};
 `;
-var ModalContent = styled57__default.default.div`
+var ModalContent = styled58__default.default.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__default.default.div`
+var Header5 = styled58__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
 `;
-var IconContainer2 = styled57__default.default.div`
+var IconContainer2 = styled58__default.default.div`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   color: ${(props) => severityColors[props.severity]};
 `;
-var Content5 = styled57__default.default.div`
+var Content5 = styled58__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var Title3 = styled57__default.default.div`
+var Title3 = styled58__default.default.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__default.default.div`
+var ErrorMessage4 = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var ErrorCode = styled57__default.default.div`
+var ErrorCode = styled58__default.default.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__default.default.div`
+var Timestamp = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Details = styled57__default.default.details`
+var Details = styled58__default.default.details`
   margin-top: ${tokens.spacing.md};
   cursor: pointer;
 
@@ -12313,12 +12570,12 @@ var Details = styled57__default.default.details`
     }
   }
 `;
-var DetailsIcon = styled57__default.default.span`
+var DetailsIcon = styled58__default.default.span`
   display: inline-block;
   transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
 `;
-var StackTrace = styled57__default.default.pre`
+var StackTrace = styled58__default.default.pre`
   margin: ${tokens.spacing.sm} 0 0 0;
   padding: ${tokens.spacing.md};
   background-color: ${tokens.colors.surface.subtle};
@@ -12331,12 +12588,12 @@ var StackTrace = styled57__default.default.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions4 = styled57__default.default.div`
+var Actions4 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
 `;
-var Button4 = styled57__default.default.button`
+var Button4 = styled58__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -12365,7 +12622,7 @@ var Button4 = styled57__default.default.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton2 = styled57__default.default.button`
+var CloseButton2 = styled58__default.default.button`
   position: absolute;
   top: ${tokens.spacing.md};
   right: ${tokens.spacing.md};
@@ -12526,7 +12783,7 @@ var WorkflowErrorAlert = ({
   return alertContent;
 };
 WorkflowErrorAlert.displayName = "WorkflowErrorAlert";
-var indeterminate = styled57.keyframes`
+var indeterminate = styled58.keyframes`
   0% {
     transform: translateX(-100%);
   }
@@ -12534,7 +12791,7 @@ var indeterminate = styled57.keyframes`
     transform: translateX(400%);
   }
 `;
-var rotate = styled57.keyframes`
+var rotate = styled58.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -12549,14 +12806,14 @@ var statusColors2 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var Container17 = styled57__default.default.div`
+var Container17 = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   width: 100%;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled57__default.default.div`
+var ProgressMessage = styled58__default.default.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12571,13 +12828,13 @@ var ProgressMessage = styled57__default.default.div`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled57__default.default.div`
+var ProgressInfo = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled57__default.default.span`
+var PercentageText = styled58__default.default.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12592,7 +12849,7 @@ var PercentageText = styled57__default.default.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled57__default.default.div`
+var LinearTrack = styled58__default.default.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
@@ -12610,7 +12867,7 @@ var LinearTrack = styled57__default.default.div`
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled57__default.default.div`
+var LinearFill = styled58__default.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -12621,12 +12878,12 @@ var LinearFill = styled57__default.default.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__default.default.div`
+var CircularContainer = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled57__default.default.svg`
+var CircularSvg = styled58__default.default.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -12662,12 +12919,12 @@ var getCircularSize = (size) => {
       return { radius: 26, strokeWidth: 4 };
   }
 };
-var CircularTrack = styled57__default.default.circle`
+var CircularTrack = styled58__default.default.circle`
   fill: none;
   stroke: ${tokens.colors.border.default};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
 `;
-var CircularFill = styled57__default.default.circle`
+var CircularFill = styled58__default.default.circle`
   fill: none;
   stroke: ${(props) => statusColors2[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -12685,7 +12942,7 @@ var CircularFill = styled57__default.default.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__default.default.text`
+var CircularPercentage = styled58__default.default.text`
   fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
@@ -12786,7 +13043,7 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled57__default.default.div`
+var Panel = styled58__default.default.div`
   display: flex;
   flex-direction: column;
   background-color: ${tokens.colors.surface.overlay};
@@ -12795,7 +13052,7 @@ var Panel = styled57__default.default.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header6 = styled57__default.default.div`
+var Header6 = styled58__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -12809,7 +13066,7 @@ var Header6 = styled57__default.default.div`
     background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title4 = styled57__default.default.div`
+var Title4 = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -12817,11 +13074,11 @@ var Title4 = styled57__default.default.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions5 = styled57__default.default.div`
+var Actions5 = styled58__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled57__default.default.button`
+var IconButton = styled58__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12850,7 +13107,7 @@ var IconButton = styled57__default.default.button`
     height: 16px;
   }
 `;
-var CollapseIcon2 = styled57__default.default.div`
+var CollapseIcon2 = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12863,7 +13120,7 @@ var CollapseIcon2 = styled57__default.default.div`
     height: 16px;
   }
 `;
-var Content6 = styled57__default.default.div`
+var Content6 = styled58__default.default.div`
   padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
@@ -12891,7 +13148,7 @@ var Content6 = styled57__default.default.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled57__default.default.pre`
+var JsonView = styled58__default.default.pre`
   margin: 0;
   font-family: ${tokens.typography.fontFamily.monospace};
   font-size: ${tokens.typography.fontSize.sm};
@@ -12900,12 +13157,12 @@ var JsonView = styled57__default.default.pre`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled57__default.default.div`
+var FormattedView = styled58__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled57__default.default.table`
+var TableView = styled58__default.default.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${tokens.typography.fontSize.sm};
@@ -12929,7 +13186,7 @@ var TableView = styled57__default.default.table`
     border-bottom: none;
   }
 `;
-var EmptyState5 = styled57__default.default.div`
+var EmptyState5 = styled58__default.default.div`
   padding: ${tokens.spacing.xl};
   text-align: center;
   color: ${tokens.colors.text.tertiary};
@@ -13011,7 +13268,7 @@ var WorkflowResultPanel = ({
   );
 };
 WorkflowResultPanel.displayName = "WorkflowResultPanel";
-var spin = styled57.keyframes`
+var spin = styled58.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -13019,7 +13276,7 @@ var spin = styled57.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse6 = styled57.keyframes`
+var pulse6 = styled58.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -13034,7 +13291,7 @@ var statusColors3 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var BadgeContainer2 = styled57__default.default.div`
+var BadgeContainer2 = styled58__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -13088,7 +13345,7 @@ var BadgeContainer2 = styled57__default.default.div`
   color: ${(props) => statusColors3[props.$status]};
   line-height: 1.4;
 `;
-var IconContainer3 = styled57__default.default.div`
+var IconContainer3 = styled58__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13167,7 +13424,7 @@ var TimeoutIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
 );
-var Label2 = styled57__default.default.span`
+var Label2 = styled58__default.default.span`
   white-space: nowrap;
 `;
 var getDefaultLabel = (status) => {
@@ -13459,6 +13716,7 @@ exports.ConnectionStatusBadge = ConnectionStatusBadge;
 exports.CopilotUserMessage = UserMessage2;
 exports.DarkNotificationCard = DarkNotificationCard;
 exports.ErrorBanner = ErrorBanner;
+exports.ErrorToast = ErrorToast;
 exports.FacebookIcon = FacebookIcon;
 exports.FileAttachment = FileAttachment;
 exports.Footer = Footer;