@agentiffai/design 1.3.24 → 1.3.26

package/dist/index.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
 var React4 = require('react');
-var styled48 = require('styled-components');
+var styled50 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
+var reactAria = require('react-aria');
 var button = require('@react-aria/button');
 var meter = require('@react-aria/meter');
 var tabs$1 = require('@react-aria/tabs');
@@ -15,7 +16,7 @@ var textfield = require('@react-aria/textfield');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React4__default = /*#__PURE__*/_interopDefault(React4);
-var styled48__default = /*#__PURE__*/_interopDefault(styled48);
+var styled50__default = /*#__PURE__*/_interopDefault(styled50);
 
 // src/components/AssistantThinking/AssistantThinking.tsx
 
@@ -46,7 +47,7 @@ var tokens = {
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
-      tertiary: "#6B7280",
+      tertiary: "#9CA3AF",
       disabled: "#4B5563"
     },
     // Semantic colors
@@ -259,7 +260,7 @@ var tokens = {
 };
 
 // src/components/AssistantThinking/AssistantThinking.styles.ts
-var dotPulse = styled48.keyframes`
+var dotPulse = styled50.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -269,7 +270,7 @@ var dotPulse = styled48.keyframes`
     transform: scale(1);
   }
 `;
-var pulse = styled48.keyframes`
+var pulse = styled50.keyframes`
   0%, 100% {
     opacity: 0.5;
     transform: scale(1);
@@ -279,7 +280,7 @@ var pulse = styled48.keyframes`
     transform: scale(1.2);
   }
 `;
-var wave = styled48.keyframes`
+var wave = styled50.keyframes`
   0%, 40%, 100% {
     transform: translateY(0);
   }
@@ -316,7 +317,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container = styled48__default.default.div`
+var Container = styled50__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -328,7 +329,7 @@ var Container = styled48__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled48__default.default.div`
+var Avatar = styled50__default.default.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -339,23 +340,23 @@ var Avatar = styled48__default.default.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled48__default.default.svg`
+var HeadphonesIcon = styled50__default.default.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled48__default.default.div`
+var Content = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots = styled48__default.default.div`
+var LoadingDots = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled48__default.default.span`
+var Dot = styled50__default.default.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -373,7 +374,7 @@ var Dot = styled48__default.default.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message = styled48__default.default.span`
+var Message = styled50__default.default.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -433,7 +434,194 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var ChatInputContainer = styled48__default.default.div`
+var StyledContainer = styled50__default.default.div`
+  display: flex;
+  width: 100%;
+  height: 52px;
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  padding: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.xs};
+`;
+var StyledOption = styled50__default.default.button`
+  flex: 1;
+  height: 44px;
+  background: ${({ $isActive }) => $isActive ? tokens.colors.primary : tokens.colors.background.light};
+  border: none;
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.xs};
+  padding: 0;
+  transition: background ${tokens.transitions.fast};
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var StyledLabel = styled50__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 = styled50__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  background: ${tokens.colors.surface.overlayHover};
+  border-radius: ${tokens.borderRadius.full};
+  font-family: Inter, sans-serif;
+  font-weight: ${tokens.typography.fontWeight.bold};
+  font-size: 11px;
+  line-height: 1.4545454545454546em;
+  color: ${tokens.colors.text.primary};
+`;
+function BillingToggle({
+  value,
+  onChange,
+  discountText = "30% Off"
+}) {
+  const monthlyRef = React4.useRef(null);
+  const yearlyRef = React4.useRef(null);
+  const monthlyProps = {
+    onPress: () => onChange?.("monthly")
+  };
+  const yearlyProps = {
+    onPress: () => onChange?.("yearly")
+  };
+  const { buttonProps: monthlyButtonProps } = reactAria.useButton(monthlyProps, monthlyRef);
+  const { buttonProps: yearlyButtonProps } = reactAria.useButton(yearlyProps, yearlyRef);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StyledOption,
+      {
+        ...monthlyButtonProps,
+        ref: monthlyRef,
+        $isActive: value === "monthly",
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { $isActive: value === "monthly", children: "Monthly" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledOption,
+      {
+        ...yearlyButtonProps,
+        ref: yearlyRef,
+        $isActive: value === "yearly",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { $isActive: value === "yearly", children: "Yearly" }),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { children: discountText })
+        ]
+      }
+    )
+  ] });
+}
+var StyledCard = styled50__default.default.div`
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.md};
+  width: 100%;
+  padding: 10px 12px;
+  position: relative;
+`;
+var StyledHeader = styled50__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2px;
+`;
+var StyledBadge2 = styled50__default.default.span`
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${tokens.colors.primary};
+`;
+var StyledLabel2 = styled50__default.default.span`
+  font-weight: ${tokens.typography.fontWeight.bold};
+  font-size: 14px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.primary};
+`;
+var StyledDescription = styled50__default.default.p`
+  font-size: 12px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.secondary};
+  margin: 0 0 6px 0;
+`;
+var StyledDivider = styled50__default.default.div`
+  width: 100%;
+  height: 1px;
+  background: ${tokens.colors.border.default};
+  margin-bottom: 6px;
+`;
+var StyledFooter = styled50__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var StyledCredits = styled50__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+var StyledCheckIcon = styled50__default.default.svg`
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+`;
+var StyledCreditsText = styled50__default.default.span`
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.primary};
+`;
+var StyledExecutions = styled50__default.default.span`
+  font-size: 11px;
+  line-height: 1.4;
+  color: ${tokens.colors.text.secondary};
+  text-align: right;
+`;
+function formatPrice(price, billingInterval = "monthly") {
+  if (price == null) return "Free";
+  if (billingInterval === "annual") return `$${(price * 12 * 0.7).toFixed(2)}/year`;
+  return `$${price.toFixed(2)}/mo`;
+}
+function TrialPlanCard({
+  badge = "Trial",
+  price = null,
+  billingInterval = "monthly",
+  description = "Explore the platform risk-free",
+  executions = "~ 100 executions",
+  credits = "1,000 credits"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledBadge2, { children: badge }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledLabel2, { children: formatPrice(price, billingInterval) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledDescription, { children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledDivider, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledCredits, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StyledCheckIcon, { viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.33 10L8.33 15L16.67 5",
+            stroke: "#FFFFFF",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StyledCreditsText, { children: credits })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledExecutions, { children: executions })
+    ] })
+  ] });
+}
+var ChatInputContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -449,7 +637,7 @@ var ChatInputContainer = styled48__default.default.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled48__default.default.div`
+var SuggestionsWrapper = styled50__default.default.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -458,7 +646,7 @@ var SuggestionsWrapper = styled48__default.default.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled48__default.default.button`
+var SuggestionButton = styled50__default.default.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -497,7 +685,7 @@ var SuggestionButton = styled48__default.default.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled48__default.default.div`
+var InputWrapper = styled50__default.default.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -515,7 +703,7 @@ var InputWrapper = styled48__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled48__default.default.textarea`
+var InputField = styled50__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -540,7 +728,7 @@ var InputField = styled48__default.default.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled48__default.default.button`
+var SubmitButton = styled50__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -721,7 +909,7 @@ var SubmitButtonComponent = ({
   ) });
 };
 ChatInput.displayName = "ChatInput";
-var NavigationContainer = styled48__default.default.div`
+var NavigationContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -738,7 +926,7 @@ var NavigationContainer = styled48__default.default.div`
     box-shadow: none !important;
   }
 `;
-var CategoryGroup = styled48__default.default.div`
+var CategoryGroup = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -750,7 +938,7 @@ var CategoryGroup = styled48__default.default.div`
     border-radius: 0 !important;
   }
 `;
-var CategoryButton = styled48__default.default.button`
+var CategoryButton = styled50__default.default.button`
   width: 48px;
   height: 48px;
   border: none;
@@ -775,7 +963,7 @@ var CategoryButton = styled48__default.default.button`
     outline-offset: 2px;
   }
 `;
-var CategoryLabel = styled48__default.default.span`
+var CategoryLabel = styled50__default.default.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
@@ -785,7 +973,7 @@ var CategoryLabel = styled48__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SubItemList = styled48__default.default.div`
+var SubItemList = styled50__default.default.div`
   display: ${({ $expanded }) => $expanded ? "flex" : "none"};
   flex-direction: column;
   align-items: center;
@@ -793,7 +981,7 @@ var SubItemList = styled48__default.default.div`
   margin-top: ${tokens.spacing.xs};
   width: 100%;
 `;
-var SubItemButton = styled48__default.default.button`
+var SubItemButton = styled50__default.default.button`
   width: 32px;
   height: 32px;
   border: none;
@@ -817,7 +1005,7 @@ var SubItemButton = styled48__default.default.button`
     outline-offset: 2px;
   }
 `;
-var CountBadge = styled48__default.default.span`
+var CountBadge = styled50__default.default.span`
   position: absolute;
   top: -2px;
   right: -2px;
@@ -833,7 +1021,7 @@ var CountBadge = styled48__default.default.span`
   justify-content: center;
   padding: 0 ${tokens.spacing.xs};
 `;
-var filterBadgeIn = styled48.keyframes`
+var filterBadgeIn = styled50.keyframes`
   from {
     opacity: 0;
     transform: scale(0.5);
@@ -843,7 +1031,7 @@ var filterBadgeIn = styled48.keyframes`
     transform: scale(1);
   }
 `;
-var FilterBadge = styled48__default.default.div`
+var FilterBadge = styled50__default.default.div`
   position: absolute;
   bottom: -${tokens.spacing.xs};
   right: -${tokens.spacing.xs};
@@ -862,13 +1050,13 @@ var FilterBadge = styled48__default.default.div`
     fill: ${tokens.colors.text.primary};
   }
 `;
-var CategoryIconImg = styled48__default.default.img`
+var CategoryIconImg = styled50__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 = styled48__default.default.img`
+var SubItemIconImg = styled50__default.default.img`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
@@ -983,7 +1171,7 @@ function CategoryNav({
   }) });
 }
 CategoryNav.displayName = "CategoryNav";
-var IconWrapper = styled48__default.default.span`
+var IconWrapper = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1038,7 +1226,8 @@ var IconNames = {
   HAMMER: "hammer-fill",
   ROCKET: "rocket-fill",
   TICKET: "coupon-2-fill",
-  CLIPBOARD: "clipboard-fill"
+  CLIPBOARD: "clipboard-fill",
+  QUESTION_CIRCLE: "question-circle-line"
 };
 var iconFiles = {
   "mic-fill": "Icon-mic-fill.svg",
@@ -1065,7 +1254,8 @@ var iconFiles = {
   "hammer-fill": "Icon-hammer-fill.svg",
   "rocket-fill": "Icon-rocket-fill.svg",
   "coupon-2-fill": "Icon-coupon-2-fill.svg",
-  "clipboard-fill": "Icon-clipboard-fill.svg"
+  "clipboard-fill": "Icon-clipboard-fill.svg",
+  "question-circle-line": "Icon-question-circle-line.svg"
 };
 function getIconPath(name) {
   return `${ICON_BASE_PATH}/${iconFiles[name]}`;
@@ -1081,7 +1271,7 @@ function Icon({
   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 }) });
 }
 Icon.displayName = "Icon";
-var Container2 = styled48__default.default.nav`
+var Container2 = styled50__default.default.nav`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1101,7 +1291,7 @@ var Container2 = styled48__default.default.nav`
     background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled48__default.default.div`
+var ContentWrapper = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1119,7 +1309,7 @@ var ContentWrapper = styled48__default.default.div`
     padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
-var UserStatusSlot = styled48__default.default.div`
+var UserStatusSlot = styled50__default.default.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -1132,7 +1322,7 @@ var UserStatusSlot = styled48__default.default.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled48__default.default.div`
+var ActionButtonsSlot = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1155,7 +1345,7 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var Container3 = styled48__default.default.nav`
+var Container3 = styled50__default.default.nav`
   position: absolute;
   top: 0;
   left: 0;
@@ -1165,17 +1355,10 @@ var Container3 = styled48__default.default.nav`
   display: flex;
   flex-direction: column;
   z-index: ${tokens.zIndex.base + 9}; /* Below horizontal nav and chat sidebar */
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none; /* Firefox */
+  overflow: hidden;
   /* Use CSS custom property for coordinated animations with MainPane */
   transition: transform var(--layout-transition-duration, 0.3s) var(--layout-transition-easing, ease-out);
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
@@ -1186,31 +1369,12 @@ var Container3 = styled48__default.default.nav`
     width: 60px; /* Match MainPane left offset on mobile */
   }
 
-  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  /* Mobile landscape */
   @media (orientation: landscape) and (max-height: 500px) {
     width: 60px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin; /* Firefox - show thin scrollbar */
-
-    /* Show thin scrollbar for Chrome, Safari */
-    &::-webkit-scrollbar {
-      display: block;
-      width: 3px;
-      height: 3px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: ${tokens.colors.border.default};
-      border-radius: 2px;
-    }
   }
 `;
-var TopSection = styled48__default.default.div`
+var TopSection = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1223,7 +1387,7 @@ var TopSection = styled48__default.default.div`
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled48__default.default.button`
+var BackButton = styled50__default.default.button`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1259,12 +1423,12 @@ var BackButton = styled48__default.default.button`
     outline-offset: 2px;
   }
 `;
-styled48__default.default.span`
+styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xl};
   line-height: ${tokens.typography.lineHeight.tight};
   font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled48__default.default.div`
+var Separator = styled50__default.default.div`
   width: 32px;
   height: 2px;
   background-color: ${tokens.colors.background.light};
@@ -1272,13 +1436,15 @@ var Separator = styled48__default.default.div`
   margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled48__default.default.div`
+var FolderGroupsSlot = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 0 ${tokens.spacing.md} 120px; /* Extra bottom padding to avoid overlap with BottomSection */
-  flex: 1;
+  padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
+  flex: 1 1 0%; /* Take remaining space but shrink aggressively */
+  min-height: 80px; /* At least show one category icon */
+  overflow: hidden; /* Let NavigationContainer inside handle its own scroll */
 
   /* Server/workspace icons styling */
   > * {
@@ -1295,40 +1461,38 @@ var FolderGroupsSlot = styled48__default.default.div`
 
   /* Responsive adjustments */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 6px 120px; /* Reduce horizontal padding on mobile */
-  }
-
-  /* Mobile landscape: remove extra padding since BottomSection flows with content */
-  @media (orientation: landscape) and (max-height: 500px) {
-    padding-bottom: ${tokens.spacing.md};
-    flex: 0 0 auto; /* Don't flex-grow, allow natural height */
+    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
-var BottomSection = styled48__default.default.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+var BottomSection = styled50__default.default.div`
+  flex: 0 1 auto; /* Natural size, can shrink when no space */
+  min-height: 48px; /* At least one button visible */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md} 0;
-  background-color: ${tokens.colors.background.darker};
+  overflow-y: auto;
+  overflow-x: hidden;
 
-  @media (prefers-color-scheme: dark) {
-    background-color: ${tokens.colors.background.darkest};
+  /* Match NavigationContainer scroll styling */
+  &::-webkit-scrollbar {
+    width: 3px;
   }
 
-  /* Mobile landscape: make bottom section flow with content instead of fixed */
-  @media (orientation: landscape) and (max-height: 500px) {
-    position: relative;
-    bottom: auto;
-    margin-top: auto; /* Push to bottom of flex container */
-    flex-shrink: 0;
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${tokens.colors.border.default};
+    border-radius: 2px;
   }
+
+  scrollbar-width: thin;
+  scrollbar-color: ${tokens.colors.border.default} transparent;
 `;
-var BottomButton = styled48__default.default.button`
+var BottomButton = styled50__default.default.button`
   width: 40px;
   height: 40px;
   border-radius: ${tokens.borderRadius.full};
@@ -1364,18 +1528,18 @@ var BottomButton = styled48__default.default.button`
 function NavVertical({
   onBackClick,
   onHomeClick,
+  onHelpClick,
   onSettingsClick,
   onLogoutClick,
-  onHelpClick,
   folderGroupsSlot,
   className,
   "aria-label": ariaLabel = "Vertical navigation sidebar"
 }) {
   const backButtonRef = React4.useRef(null);
   const homeButtonRef = React4.useRef(null);
+  const helpButtonRef = React4.useRef(null);
   const settingsButtonRef = React4.useRef(null);
   const logoutButtonRef = React4.useRef(null);
-  const helpButtonRef = React4.useRef(null);
   const { buttonProps: backButtonProps } = button.useButton(
     {
       onPress: onBackClick,
@@ -1390,6 +1554,13 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: helpButtonProps } = button.useButton(
+    {
+      onPress: onHelpClick,
+      "aria-label": "Help"
+    },
+    helpButtonRef
+  );
   const { buttonProps: settingsButtonProps } = button.useButton(
     {
       onPress: onSettingsClick,
@@ -1404,27 +1575,20 @@ function NavVertical({
     },
     logoutButtonRef
   );
-  const { buttonProps: helpButtonProps } = button.useButton(
-    {
-      onPress: onHelpClick,
-      "aria-label": "Help"
-    },
-    helpButtonRef
-  );
   const hasBottomButtons = onHelpClick || onSettingsClick || onLogoutClick;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, role: "navigation", "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
     hasBottomButtons && /* @__PURE__ */ jsxRuntime.jsxs(BottomSection, { children: [
-      onHelpClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...helpButtonProps, ref: helpButtonRef, "data-tour-help-button": true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "question-line", size: 24, color: "white" }) }),
+      onHelpClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...helpButtonProps, ref: helpButtonRef, "data-tour-help-button": true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "question-circle-line", size: 24, color: "white" }) }),
       onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
       onLogoutClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
     ] })
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container4 = styled48__default.default.div`
+var Container4 = styled50__default.default.div`
   position: relative;
   width: 100%;
   height: 100vh;
@@ -1437,7 +1601,7 @@ var Container4 = styled48__default.default.div`
     position: relative;
   }
 `;
-var BackgroundPane = styled48__default.default.div`
+var BackgroundPane = styled50__default.default.div`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1478,7 +1642,7 @@ var BackgroundPane = styled48__default.default.div`
     left: 60px; /* Smaller nav on mobile */
   }
 `;
-var MainPane = styled48__default.default.main`
+var MainPane = styled50__default.default.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1527,9 +1691,9 @@ function Layout({
   navHorizontalActionsSlot,
   onNavBackClick,
   onNavHomeClick,
+  onNavHelpClick,
   onNavSettingsClick,
   onNavLogoutClick,
-  onNavHelpClick,
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Container4, { className, children: [
@@ -1539,9 +1703,9 @@ function Layout({
         folderGroupsSlot: navVerticalSlot,
         onBackClick: onNavBackClick,
         onHomeClick: onNavHomeClick,
+        onHelpClick: onNavHelpClick,
         onSettingsClick: onNavSettingsClick,
-        onLogoutClick: onNavLogoutClick,
-        onHelpClick: onNavHelpClick
+        onLogoutClick: onNavLogoutClick
       }
     ),
     backgroundSlot && /* @__PURE__ */ jsxRuntime.jsx(BackgroundPane, { children: backgroundSlot }),
@@ -1556,13 +1720,13 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container5 = styled48__default.default.div`
+var Container5 = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled48__default.default.button`
+var ActionButton = styled50__default.default.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
@@ -1589,12 +1753,12 @@ var ActionButton = styled48__default.default.button`
     opacity: 0.8;
   }
 
-  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled48.css`
+  ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled50.css`
       background-color: ${tokens.colors.surface.overlay};
       color: ${tokens.colors.text.primary};
     `}
 
-  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled48.css`
+  ${({ $isActive, $isPrimary }) => $isActive && $isPrimary && styled50.css`
       background-color: ${tokens.colors.secondary};
       color: ${tokens.colors.text.primary};
     `}
@@ -1667,7 +1831,7 @@ var statusColors = {
   busy: tokens.colors.status.busy,
   offline: tokens.colors.status.offline
 };
-var Container6 = styled48__default.default.button`
+var Container6 = styled50__default.default.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -1706,7 +1870,7 @@ var Container6 = styled48__default.default.button`
     opacity: 0.9;
   }
 `;
-var IconWrapper2 = styled48__default.default.div`
+var IconWrapper2 = styled50__default.default.div`
   position: relative;
   width: 36px;
   height: 36px;
@@ -1717,13 +1881,13 @@ var IconWrapper2 = styled48__default.default.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var WorkflowInfo = styled48__default.default.div`
+var WorkflowInfo = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled48__default.default.span`
+var WorkflowName = styled50__default.default.span`
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -1732,14 +1896,14 @@ var WorkflowName = styled48__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled48__default.default.span`
+var WorkflowStatus = styled50__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 = styled48__default.default.span`
+var WorkflowSubtitle = styled50__default.default.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -1749,7 +1913,7 @@ var WorkflowSubtitle = styled48__default.default.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var StatusIndicatorOuter = styled48__default.default.span`
+var StatusIndicatorOuter = styled50__default.default.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -1761,7 +1925,7 @@ var StatusIndicatorOuter = styled48__default.default.span`
   align-items: center;
   justify-content: center;
 `;
-var StatusIndicatorInner = styled48__default.default.span`
+var StatusIndicatorInner = styled50__default.default.span`
   width: 8px;
   height: 8px;
   border-radius: ${tokens.borderRadius.full};
@@ -1807,7 +1971,7 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var DarkNotificationCardContainer = styled48__default.default.div`
+var DarkNotificationCardContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   padding: ${tokens.spacing.xs};
@@ -1818,7 +1982,7 @@ var DarkNotificationCardContainer = styled48__default.default.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled48__default.default.button`
+var DarkSectionHeader = styled50__default.default.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1844,7 +2008,7 @@ var DarkSectionHeader = styled48__default.default.button`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled48__default.default.span`
+var DarkChevronIcon = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1862,7 +2026,7 @@ var DarkChevronIcon = styled48__default.default.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled48__default.default.div`
+var DarkSectionContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -1871,7 +2035,7 @@ var DarkSectionContent = styled48__default.default.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled48__default.default.button`
+var DarkNotificationItemWrapper = styled50__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1910,7 +2074,7 @@ var DarkNotificationItemWrapper = styled48__default.default.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled48__default.default.span`
+var DarkItemIcon = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1935,7 +2099,7 @@ var DarkItemIcon = styled48__default.default.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var DarkItemText = styled48__default.default.span`
+var DarkItemText = styled50__default.default.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
@@ -1947,7 +2111,7 @@ var DarkItemText = styled48__default.default.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled48__default.default.button`
+var DarkMenuButton = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1981,7 +2145,7 @@ var DarkMenuButton = styled48__default.default.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled48__default.default.span`
+var DarkTimestamp = styled50__default.default.span`
   font-size: 10px;
   color: ${tokens.colors.text.tertiary};
   white-space: normal;
@@ -2166,17 +2330,17 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var Container7 = styled48__default.default.div`
+var Container7 = styled50__default.default.div`
   width: 100%;
   height: 100%;
-  background-color: transparent;
+  background-color: ${tokens.colors.background.dark};
   color: ${tokens.colors.text.primary};
   display: flex;
   flex-direction: column;
   font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled48__default.default.div`
+var TabListWrapper = styled50__default.default.div`
   display: flex;
   border-bottom: 2px solid ${tokens.colors.border.default};
   background-color: ${tokens.colors.surface.subtle};
@@ -2196,7 +2360,7 @@ var TabListWrapper = styled48__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled48__default.default.button`
+var TabButton = styled50__default.default.button`
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
@@ -2240,7 +2404,7 @@ var TabButton = styled48__default.default.button`
     }
   `}
 `;
-var TabPanelWrapper = styled48__default.default.div`
+var TabPanelWrapper = styled50__default.default.div`
   flex: 1;
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
@@ -2278,7 +2442,7 @@ var TabPanelWrapper = styled48__default.default.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled48__default.default.div`
+var RunsContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.lg};
@@ -2291,7 +2455,7 @@ var RunsContainer = styled48__default.default.div`
     gap: ${tokens.spacing.md};
   }
 `;
-styled48__default.default.button`
+styled50__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -2328,7 +2492,7 @@ styled48__default.default.button`
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled48__default.default(reactAriaComponents.DisclosureGroup)`
+var StyledDisclosureGroup = styled50__default.default(reactAriaComponents.DisclosureGroup)`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -2337,7 +2501,7 @@ var StyledDisclosureGroup = styled48__default.default(reactAriaComponents.Disclo
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled48__default.default(reactAriaComponents.Disclosure)`
+var CategoryDisclosure = styled50__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -2355,7 +2519,7 @@ var CategoryDisclosure = styled48__default.default(reactAriaComponents.Disclosur
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled48__default.default(reactAriaComponents.Button)`
+var CategoryHeader = styled50__default.default(reactAriaComponents.Button)`
   width: 100%;
   padding: ${tokens.spacing.xs} 0;
   background: none;
@@ -2385,7 +2549,7 @@ var CategoryHeader = styled48__default.default(reactAriaComponents.Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled48__default.default.div`
+var CategoryTitle = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2394,7 +2558,7 @@ var CategoryTitle = styled48__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-styled48__default.default.img`
+styled50__default.default.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
@@ -2405,7 +2569,7 @@ styled48__default.default.img`
     height: 14px;
   }
 `;
-var HashtagIcon = styled48__default.default.img`
+var HashtagIcon = styled50__default.default.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -2416,7 +2580,7 @@ var HashtagIcon = styled48__default.default.img`
     height: 12px;
   }
 `;
-var ChevronIcon = styled48__default.default.div`
+var ChevronIcon = styled50__default.default.div`
   display: flex;
   align-items: center;
   transition: transform ${tokens.transitions.normal};
@@ -2437,7 +2601,7 @@ var ChevronIcon = styled48__default.default.div`
     }
   }
 `;
-var CategoryDisclosurePanel = styled48__default.default(reactAriaComponents.DisclosurePanel)`
+var CategoryDisclosurePanel = styled50__default.default(reactAriaComponents.DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -2466,7 +2630,7 @@ var CategoryDisclosurePanel = styled48__default.default(reactAriaComponents.Disc
     }
   }
 `;
-var ItemContainer = styled48__default.default.div`
+var ItemContainer = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2486,7 +2650,7 @@ var ItemContainer = styled48__default.default.div`
     background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled48__default.default(reactAriaComponents.Disclosure)`
+var ItemDisclosure = styled50__default.default(reactAriaComponents.Disclosure)`
   background-color: transparent;
   margin-bottom: ${tokens.spacing.xs};
   display: flex;
@@ -2501,7 +2665,7 @@ var ItemDisclosure = styled48__default.default(reactAriaComponents.Disclosure)`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled48__default.default(reactAriaComponents.Button)`
+var ItemHeader = styled50__default.default(reactAriaComponents.Button)`
   width: 100%;
   padding: 0;
   background: none;
@@ -2519,7 +2683,7 @@ var ItemHeader = styled48__default.default(reactAriaComponents.Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled48__default.default(reactAriaComponents.DisclosurePanel)`
+var ItemDisclosurePanel = styled50__default.default(reactAriaComponents.DisclosurePanel)`
   padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -2549,7 +2713,7 @@ var ItemDisclosurePanel = styled48__default.default(reactAriaComponents.Disclosu
     }
   }
 `;
-var ItemIcon = styled48__default.default.img`
+var ItemIcon = styled50__default.default.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
@@ -2560,7 +2724,7 @@ var ItemIcon = styled48__default.default.img`
     height: 18px;
   }
 `;
-var ItemName = styled48__default.default.span`
+var ItemName = styled50__default.default.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -2578,7 +2742,7 @@ var ItemName = styled48__default.default.span`
     color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled48__default.default.span`
+var RunStatus = styled50__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2610,13 +2774,13 @@ var RunStatus = styled48__default.default.span`
     font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled48__default.default.div`
+styled50__default.default.div`
   margin-bottom: ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled48__default.default.button`
+styled50__default.default.button`
   width: 100%;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.surface.overlay};
@@ -2652,13 +2816,13 @@ styled48__default.default.button`
     margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled48__default.default.span`
+styled50__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)"};
 `;
-styled48__default.default.div`
+styled50__default.default.div`
   padding: ${tokens.spacing.md};
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
@@ -2678,17 +2842,17 @@ styled48__default.default.div`
     }
   }
 `;
-var MeterContainer = styled48__default.default.div`
+var MeterContainer = styled50__default.default.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled48__default.default.div`
+var MeterLabel = styled50__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 = styled48__default.default.div`
+var MeterBar = styled50__default.default.div`
   width: 100%;
   height: 24px;
   background-color: ${tokens.colors.background.darker};
@@ -2697,7 +2861,7 @@ var MeterBar = styled48__default.default.div`
   position: relative;
   margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled48__default.default.div`
+var MeterFill = styled50__default.default.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -2725,7 +2889,7 @@ var MeterFill = styled48__default.default.div`
     }
   }
 `;
-var MeterStats = styled48__default.default.div`
+var MeterStats = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   text-align: center;
@@ -2736,18 +2900,18 @@ var MeterStats = styled48__default.default.div`
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled48__default.default.div`
+var ConnectionsContainer = styled50__default.default.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled48__default.default.p`
+var ConnectionDescription = styled50__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 = styled48__default.default.button`
+var GoogleButton = styled50__default.default.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: ${tokens.typography.fontSize.sm};
@@ -3201,7 +3365,7 @@ function PaneMenus({
     /* @__PURE__ */ jsxRuntime.jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var Container8 = styled48__default.default.header`
+var Container8 = styled50__default.default.header`
   position: relative;
   width: 100%;
   height: 56px;
@@ -3264,7 +3428,7 @@ var Container8 = styled48__default.default.header`
     background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled48__default.default.img`
+var BrandLogo = styled50__default.default.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -3279,7 +3443,7 @@ var BrandLogo = styled48__default.default.img`
     max-height: 32px;
   }
 `;
-var SettingsButton = styled48__default.default.button`
+var SettingsButton = styled50__default.default.button`
   position: absolute;
   top: 50%;
   right: ${tokens.spacing.md};
@@ -3333,7 +3497,7 @@ var SettingsButton = styled48__default.default.button`
     right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled48__default.default.button`
+var BackButton2 = styled50__default.default.button`
   position: absolute;
   top: 50%;
   left: ${tokens.spacing.md};
@@ -3440,7 +3604,7 @@ function PaneSectionHeader({
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var Container9 = styled48__default.default.button`
+var Container9 = styled50__default.default.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
@@ -3489,7 +3653,7 @@ var Container9 = styled48__default.default.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled48__default.default.img`
+var LogoImage = styled50__default.default.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -3508,7 +3672,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Container9, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
 }
 ServiceIcon.displayName = "ServiceIcon";
-var NotificationCardContainer = styled48__default.default.div`
+var NotificationCardContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3519,7 +3683,7 @@ var NotificationCardContainer = styled48__default.default.div`
   box-shadow: ${tokens.shadows.card};
   gap: ${tokens.spacing.md};
 `;
-var SectionHeader = styled48__default.default.button`
+var SectionHeader = styled50__default.default.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3545,7 +3709,7 @@ var SectionHeader = styled48__default.default.button`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ChevronIcon2 = styled48__default.default.span`
+var ChevronIcon2 = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3563,14 +3727,14 @@ var ChevronIcon2 = styled48__default.default.span`
     height: 16px;
   }
 `;
-var SectionContent = styled48__default.default.div`
+var SectionContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding-left: 0;
   margin-top: ${tokens.spacing.xs};
 `;
-var NotificationItemWrapper = styled48__default.default.button`
+var NotificationItemWrapper = styled50__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -3607,7 +3771,7 @@ var NotificationItemWrapper = styled48__default.default.button`
     opacity: 0.5;
   }
 `;
-var ItemIcon2 = styled48__default.default.span`
+var ItemIcon2 = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3632,7 +3796,7 @@ var ItemIcon2 = styled48__default.default.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var ItemText = styled48__default.default.span`
+var ItemText = styled50__default.default.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 15px;
@@ -3641,7 +3805,7 @@ var ItemText = styled48__default.default.span`
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
 `;
-var MenuButton = styled48__default.default.button`
+var MenuButton = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3851,7 +4015,7 @@ var NotificationItemComponent = ({
   );
 };
 NotificationCard.displayName = "NotificationCard";
-var StyledUserMessage = styled48__default.default.button`
+var StyledUserMessage = styled50__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -3921,7 +4085,7 @@ var StyledUserMessage = styled48__default.default.button`
     }
   }
 
-  ${({ $isPressed }) => $isPressed && styled48.css`
+  ${({ $isPressed }) => $isPressed && styled50.css`
       transform: translateY(0) scale(0.98);
       box-shadow: ${tokens.shadows.sm};
 
@@ -4039,7 +4203,7 @@ var darkTheme = {
   zIndex: tokens.zIndex,
   breakpoints: tokens.breakpoints
 };
-var GlobalStyle = styled48.createGlobalStyle`
+var GlobalStyle = styled50.createGlobalStyle`
   /* Universal tap highlight removal - nuclear option for Android WebKit */
   * {
     -webkit-tap-highlight-color: transparent !important;
@@ -4191,7 +4355,7 @@ var ConnectionStatusBadge = ({
   );
 };
 ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
-var Badge = styled48__default.default.span`
+var Badge = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -4227,7 +4391,7 @@ var IntegrationCard = ({
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
-var Card = styled48__default.default.div`
+var Card = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4247,11 +4411,11 @@ var Card = styled48__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var StatusRow = styled48__default.default.div`
+var StatusRow = styled50__default.default.div`
   display: flex;
   align-items: center;
 `;
-var ContentHeader = styled48__default.default.div`
+var ContentHeader = styled50__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -4260,7 +4424,7 @@ var ContentHeader = styled48__default.default.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var IconWrapper3 = styled48__default.default.div`
+var IconWrapper3 = styled50__default.default.div`
   width: 40px;
   height: 40px;
   display: flex;
@@ -4270,32 +4434,32 @@ var IconWrapper3 = styled48__default.default.div`
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
-var IconImage = styled48__default.default.img`
+var IconImage = styled50__default.default.img`
   width: 24px;
   height: 24px;
   object-fit: contain;
 `;
-var Info = styled48__default.default.div`
+var Info = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   flex: 1;
 `;
-var Name = styled48__default.default.h3`
+var Name = styled50__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 Description = styled48__default.default.p`
+var Description = styled50__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ActionsRow = styled48__default.default.div`
+var ActionsRow = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4353,14 +4517,14 @@ var SecretInput = ({
   ] });
 };
 SecretInput.displayName = "SecretInput";
-var Container10 = styled48__default.default.div`
+var Container10 = styled50__default.default.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   min-width: 0;
 `;
-var Input = styled48__default.default.input`
+var Input = styled50__default.default.input`
   width: 100%;
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   padding-right: 40px;
@@ -4386,7 +4550,7 @@ var Input = styled48__default.default.input`
     cursor: not-allowed;
   }
 `;
-var VisibilityToggle = styled48__default.default.button`
+var VisibilityToggle = styled50__default.default.button`
   position: absolute;
   right: ${tokens.spacing.sm};
   top: 50%;
@@ -4522,7 +4686,7 @@ function parseInlineMarkdown(text, startKey) {
   }
   return { elements, nextKey: key };
 }
-var Container11 = styled48__default.default.div`
+var Container11 = styled50__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;
@@ -4587,7 +4751,7 @@ var Container11 = styled48__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 = styled48__default.default.span`
+var Cursor = styled50__default.default.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -4643,7 +4807,7 @@ var StreamingTextBase = ({
 };
 var StreamingText = React4.memo(StreamingTextBase);
 StreamingText.displayName = "StreamingText";
-var MessageContainer = styled48__default.default.div`
+var MessageContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -4653,20 +4817,20 @@ var MessageContainer = styled48__default.default.div`
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled48__default.default.div`
+var AvatarContainer = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled48__default.default.img`
+var Avatar2 = styled50__default.default.img`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled48__default.default.div`
+var AvatarInitials = styled50__default.default.div`
   width: 20px;
   height: 20px;
   border-radius: ${tokens.borderRadius.full};
@@ -4684,16 +4848,16 @@ var AvatarInitials = styled48__default.default.div`
     object-fit: contain;
   }
 `;
-var AvatarLabel = styled48__default.default.span`
+var AvatarLabel = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
 `;
-var ContentContainer = styled48__default.default.div`
+var ContentContainer = styled50__default.default.div`
   width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled48__default.default.div`
+var MessageContent = styled50__default.default.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
   padding: ${tokens.spacing.sm};
@@ -4707,7 +4871,7 @@ var MessageContent = styled48__default.default.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots2 = styled48__default.default.div`
+var LoadingDots2 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
@@ -4716,7 +4880,7 @@ var LoadingDots2 = styled48__default.default.div`
   border-radius: ${tokens.borderRadius.lg};
   width: fit-content;
 `;
-var pulse2 = styled48.keyframes`
+var pulse2 = styled50.keyframes`
   0%, 100% {
     opacity: 0.4;
   }
@@ -4724,7 +4888,7 @@ var pulse2 = styled48.keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled48__default.default.div`
+var LoadingDot = styled50__default.default.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -4733,7 +4897,7 @@ var LoadingDot = styled48__default.default.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled48__default.default.div`
+var FileAttachmentContainer = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -4769,7 +4933,7 @@ var FileAttachmentContainer = styled48__default.default.div`
     }
   `}
 `;
-var FileIconContainer = styled48__default.default.div`
+var FileIconContainer = styled50__default.default.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -4779,14 +4943,14 @@ var FileIconContainer = styled48__default.default.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled48__default.default.div`
+var FileInfo = styled50__default.default.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled48__default.default.div`
+var FileTitle = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -4796,7 +4960,7 @@ var FileTitle = styled48__default.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled48__default.default.div`
+var FileMetadata = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4806,7 +4970,7 @@ var FileMetadata = styled48__default.default.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled48__default.default.span`
+var FileSubtitle = styled50__default.default.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -4862,13 +5026,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled48__default.default.div`
+var AttachmentsContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton2 = styled48__default.default.button`
+var ActionButton2 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4892,19 +5056,19 @@ var ActionButton2 = styled48__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer = styled48__default.default.div`
+var ActionsContainer = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled48__default.default.time`
+var MessageTime = styled50__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled48__default.default.span`
+var StreamingIndicator = styled50__default.default.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -4997,13 +5161,14 @@ function stripToolCallMarkers(content) {
   stripped = stripped.replace(/__TOOL_CALL__:[^:]+:\{[^}]*(?:\{[^}]*\}[^}]*)*\}/g, "");
   stripped = stripped.replace(/<!--TOOL_CALL:[\s\S]*$/g, "");
   stripped = stripped.replace(/__TOOL_CALL__:[\s\S]*$/g, "");
+  stripped = stripped.replace(/[",]*\s*"[a-z_]+":\s*"[^"]*"\s*\}["]?/gi, "");
   return stripped.trim();
 }
-var GenerativeUIContainer = styled48__default.default.div`
+var GenerativeUIContainer = styled50__default.default.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-styled48__default.default.div`
+styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5015,12 +5180,12 @@ styled48__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-styled48__default.default.span`
+styled50__default.default.span`
   display: flex;
   align-items: center;
   color: ${tokens.colors.primary};
 `;
-styled48__default.default.span`
+styled50__default.default.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
@@ -5080,7 +5245,7 @@ var AssistantMessageAdapterBase = ({
 var AssistantMessageAdapter = React4.memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
 var variantStyles = {
-  primary: styled48.css`
+  primary: styled50.css`
     background-color: ${tokens.colors.primary};
     color: ${tokens.colors.text.primary};
     border: none;
@@ -5100,7 +5265,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  secondary: styled48.css`
+  secondary: styled50.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: 1px solid ${tokens.colors.border.default};
@@ -5119,7 +5284,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  icon: styled48.css`
+  icon: styled50.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: none;
@@ -5142,26 +5307,26 @@ var variantStyles = {
   `
 };
 var sizeStyles = {
-  small: styled48.css`
+  small: styled50.css`
     padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
     font-size: ${tokens.typography.fontSize.sm};
     min-width: 60px;
     height: 28px;
   `,
-  medium: styled48.css`
+  medium: styled50.css`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.base};
     min-width: 80px;
     height: 36px;
   `,
-  large: styled48.css`
+  large: styled50.css`
     padding: ${tokens.spacing.md} ${tokens.spacing.lg};
     font-size: ${tokens.typography.fontSize.lg};
     min-width: 100px;
     height: 44px;
   `
 };
-var StyledButton = styled48__default.default.button`
+var StyledButton = styled50__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -5182,19 +5347,19 @@ var StyledButton = styled48__default.default.button`
   ${({ $size, $variant }) => $variant !== "icon" && sizeStyles[$size]}
 
   /* Icon variant size overrides */
-  ${({ $variant, $size }) => $variant === "icon" && styled48.css`
+  ${({ $variant, $size }) => $variant === "icon" && styled50.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 && styled48.css`
+  ${({ $isPressed }) => $isPressed && styled50.css`
       transform: scale(0.98);
     `}
 
   /* Loading state */
-  ${({ $isLoading }) => $isLoading && styled48.css`
+  ${({ $isLoading }) => $isLoading && styled50.css`
       cursor: wait;
       opacity: 0.7;
     `}
@@ -5244,15 +5409,15 @@ function Button2({
   );
 }
 Button2.displayName = "Button";
-var ActionsContainer2 = styled48__default.default.div`
+var ActionsContainer2 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
 
-  ${({ $layout }) => $layout === "horizontal" ? styled48.css`
+  ${({ $layout }) => $layout === "horizontal" ? styled50.css`
           flex-direction: row;
           flex-wrap: wrap;
-        ` : styled48.css`
+        ` : styled50.css`
           flex-direction: column;
           align-items: stretch;
 
@@ -5278,7 +5443,7 @@ function Actions({ actions, layout = "horizontal", className }) {
   )) });
 }
 Actions.displayName = "Actions";
-var dotPulse2 = styled48.keyframes`
+var dotPulse2 = styled50.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -5288,7 +5453,7 @@ var dotPulse2 = styled48.keyframes`
     transform: scale(1);
   }
 `;
-var fadeIn = styled48.keyframes`
+var fadeIn = styled50.keyframes`
   from {
     opacity: 0;
   }
@@ -5296,7 +5461,7 @@ var fadeIn = styled48.keyframes`
     opacity: 1;
   }
 `;
-var blink = styled48.keyframes`
+var blink = styled50.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -5304,7 +5469,7 @@ var blink = styled48.keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled48__default.default.div`
+var ResponseContainer = styled50__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5316,13 +5481,13 @@ var ResponseContainer = styled48__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots3 = styled48__default.default.div`
+var LoadingDots3 = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled48__default.default.span`
+var Dot2 = styled50__default.default.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -5330,7 +5495,7 @@ var Dot2 = styled48__default.default.span`
   animation: ${dotPulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled48__default.default.div`
+var TypingIndicator = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5343,14 +5508,14 @@ var TypingIndicator = styled48__default.default.div`
     animation: ${dotPulse2} 1.4s ease-in-out infinite;
   }
 `;
-var Message2 = styled48__default.default.span`
+var Message2 = styled50__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 = styled48__default.default.div`
+var StreamingText2 = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -5401,7 +5566,7 @@ var Response = ({
   }
   return null;
 };
-var dotPulse3 = styled48.keyframes`
+var dotPulse3 = styled50.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -5411,7 +5576,7 @@ var dotPulse3 = styled48.keyframes`
     transform: scale(1);
   }
 `;
-var shake = styled48.keyframes`
+var shake = styled50.keyframes`
   0%, 100% {
     transform: translateX(0);
   }
@@ -5422,7 +5587,7 @@ var shake = styled48.keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled48__default.default.div`
+var AgentStateContainer = styled50__default.default.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -5436,35 +5601,35 @@ var AgentStateContainer = styled48__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled48__default.default.div`
+var StateContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled48__default.default.div`
+var IdleIndicator = styled50__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 = styled48__default.default.div`
+var ErrorIndicator = styled50__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 = styled48__default.default.span`
+var StateLabel = styled50__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;
 `;
-styled48__default.default.p`
+styled50__default.default.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5472,7 +5637,7 @@ styled48__default.default.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled48__default.default.div`
+var ProgressBar = styled50__default.default.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -5480,7 +5645,7 @@ var ProgressBar = styled48__default.default.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill = styled48__default.default.div`
+var ProgressBarFill = styled50__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%);
@@ -5509,7 +5674,7 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var FooterContainer = styled48__default.default.footer`
+var FooterContainer = styled50__default.default.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5518,7 +5683,7 @@ var FooterContainer = styled48__default.default.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled48__default.default.div`
+var FooterContent = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5531,13 +5696,13 @@ var FooterContent = styled48__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled48__default.default.div`
+var FooterBranding = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled48__default.default.div`
+var FooterStatus = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5547,7 +5712,7 @@ var FooterStatus = styled48__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled48__default.default.a`
+var FooterLink = styled50__default.default.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -5595,7 +5760,7 @@ var Footer = ({
   ] }) });
 };
 Footer.displayName = "Footer";
-var pulse3 = styled48.keyframes`
+var pulse3 = styled50.keyframes`
   0%, 100% {
     opacity: 1;
     transform: scale(1);
@@ -5605,7 +5770,7 @@ var pulse3 = styled48.keyframes`
     transform: scale(1.1);
   }
 `;
-var Container12 = styled48__default.default.div`
+var Container12 = styled50__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -5621,7 +5786,7 @@ var Container12 = styled48__default.default.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled48__default.default.div`
+var StatusDot = styled50__default.default.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -5682,7 +5847,7 @@ var StatusDot = styled48__default.default.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled48__default.default.span`
+var Label = styled50__default.default.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -5709,7 +5874,7 @@ var Label = styled48__default.default.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled48__default.default.div`
+var BadgeContainer = styled50__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -5786,7 +5951,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Container12, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled48__default.default.header`
+var HeaderContainer = styled50__default.default.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5802,14 +5967,14 @@ var HeaderContainer = styled48__default.default.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled48__default.default.div`
+var HeaderContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled48__default.default.h1`
+var HeaderTitle = styled50__default.default.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -5820,7 +5985,7 @@ var HeaderTitle = styled48__default.default.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled48__default.default.p`
+var HeaderSubtitle = styled50__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -5830,13 +5995,13 @@ var HeaderSubtitle = styled48__default.default.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled48__default.default.div`
+var HeaderActions = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton3 = styled48__default.default.button`
+var ActionButton3 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5953,13 +6118,13 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var InputContainer = styled48__default.default.div`
+var InputContainer = styled50__default.default.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper2 = styled48__default.default.div`
+var InputWrapper2 = styled50__default.default.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -5979,7 +6144,7 @@ var InputWrapper2 = styled48__default.default.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled48__default.default.textarea`
+var TextArea = styled50__default.default.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -6025,7 +6190,7 @@ var TextArea = styled48__default.default.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled48__default.default.button`
+var SendButton = styled50__default.default.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -6155,7 +6320,7 @@ var Input2 = ({
     )
   ] }) });
 };
-var MessagesContainer = styled48__default.default.div`
+var MessagesContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -6184,7 +6349,7 @@ var Messages = ({
   return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var MessagesListContainer = styled48__default.default.div`
+var MessagesListContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -6224,7 +6389,7 @@ var MessagesListContainer = styled48__default.default.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled48__default.default.div`
+var MessagesListContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -6340,7 +6505,7 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled48__default.default.div`
+var StyledUserMessage2 = styled50__default.default.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
@@ -6348,7 +6513,7 @@ var StyledUserMessage2 = styled48__default.default.div`
   padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled48__default.default.div`
+var MessageBubble = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   max-width: 85%;
@@ -6375,7 +6540,7 @@ var MessageBubble = styled48__default.default.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled48__default.default.p`
+var MessageContent2 = styled50__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -6384,13 +6549,13 @@ var MessageContent2 = styled48__default.default.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled48__default.default.time`
+var MessageTime2 = styled50__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton4 = styled48__default.default.button`
+var ActionButton4 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6414,12 +6579,12 @@ var ActionButton4 = styled48__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled48__default.default.div`
+var ActionsContainer3 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var Avatar3 = styled48__default.default.img`
+var Avatar3 = styled50__default.default.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -6458,7 +6623,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled48__default.default.div`
+var ErrorContainer = styled50__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -6472,7 +6637,7 @@ var ErrorContainer = styled48__default.default.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled48__default.default.div`
+var IconContainer = styled50__default.default.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -6489,29 +6654,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 = styled48__default.default.div`
+var Content2 = styled50__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage = styled48__default.default.div`
+var ErrorMessage = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled48__default.default.div`
+var ErrorDetails = styled50__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 = styled48__default.default.div`
+var Actions2 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button3 = styled48__default.default.button`
+var Button3 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6540,7 +6705,7 @@ var Button3 = styled48__default.default.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled48__default.default.button`
+var CloseButton = styled50__default.default.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -6599,7 +6764,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled48__default.default.div`
+var SuggestionsContainer = styled50__default.default.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -6632,7 +6797,7 @@ var SuggestionsContainer = styled48__default.default.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled48__default.default.button`
+var StyledSuggestion = styled50__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -6665,7 +6830,7 @@ var StyledSuggestion = styled48__default.default.button`
     box-shadow: none;
   }
 
-  ${({ $isPressed }) => $isPressed && styled48.css`
+  ${({ $isPressed }) => $isPressed && styled50.css`
       transform: scale(0.98);
     `}
 
@@ -6705,7 +6870,7 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
-var WindowContainer = styled48__default.default.div`
+var WindowContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -6724,7 +6889,7 @@ var WindowContainer = styled48__default.default.div`
   height: ${({ $height }) => $height};
 
   /* Fullscreen state */
-  ${({ $isFullscreen }) => $isFullscreen && styled48.css`
+  ${({ $isFullscreen }) => $isFullscreen && styled50.css`
       width: 100vw;
       height: 100vh;
       border-radius: 0;
@@ -6736,7 +6901,7 @@ var WindowContainer = styled48__default.default.div`
     `}
 
   /* Minimized state */
-  ${({ $isMinimized }) => $isMinimized && styled48.css`
+  ${({ $isMinimized }) => $isMinimized && styled50.css`
       height: 60px;
       width: 300px;
       box-shadow: ${tokens.shadows.sm};
@@ -6755,7 +6920,7 @@ var WindowContainer = styled48__default.default.div`
 
   /* Responsive behavior for smaller screens */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled48.css`
+    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled50.css`
         width: 100vw;
         height: 100vh;
         border-radius: 0;
@@ -6884,7 +7049,7 @@ function FacebookIcon({
   ) });
 }
 FacebookIcon.displayName = "FacebookIcon";
-var StyledIconWrapper = styled48__default.default.button`
+var StyledIconWrapper = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7154,7 +7319,7 @@ function InstagramIcon({
   ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
-var StyledIconWrapper2 = styled48__default.default.button`
+var StyledIconWrapper2 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7290,7 +7455,7 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
-var StyledIconWrapper3 = styled48__default.default.button`
+var StyledIconWrapper3 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7927,7 +8092,7 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
-var StyledXIcon = styled48__default.default.svg`
+var StyledXIcon = styled50__default.default.svg`
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
@@ -8343,7 +8508,7 @@ var PostApprovalControls = ({
   ] });
 };
 PostApprovalControls.displayName = "PostApprovalControls";
-var Container13 = styled48__default.default.div`
+var Container13 = styled50__default.default.div`
   display: grid;
   gap: 0;
   background: ${tokens.colors.background.dark};
@@ -8353,7 +8518,7 @@ var Container13 = styled48__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header2 = styled48__default.default.div`
+var Header2 = styled50__default.default.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -8367,7 +8532,7 @@ var Header2 = styled48__default.default.div`
     background: ${tokens.colors.background.light};
   }
 `;
-var StatusBadge = styled48__default.default.span`
+var StatusBadge = styled50__default.default.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -8378,23 +8543,23 @@ var StatusBadge = styled48__default.default.span`
   color: ${({ $color }) => $color};
   white-space: nowrap;
 `;
-var MetaInfo = styled48__default.default.div`
+var MetaInfo = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   min-width: 0;
 `;
-var PostId = styled48__default.default.span`
+var PostId = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   font-family: ${tokens.typography.fontFamily.monospace};
 `;
-var ErrorText = styled48__default.default.span`
+var ErrorText = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CollapseIcon = styled48__default.default.span`
+var CollapseIcon = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.medium};
@@ -8404,17 +8569,17 @@ var CollapseIcon = styled48__default.default.span`
   align-items: center;
   justify-content: center;
 `;
-var Content3 = styled48__default.default.div`
+var Content3 = styled50__default.default.div`
   display: grid;
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.default};
 `;
-var EditSection = styled48__default.default.div`
+var EditSection = styled50__default.default.div`
   display: grid;
   gap: ${tokens.spacing.xs};
 `;
-var EditLabel = styled48__default.default.label`
+var EditLabel = styled50__default.default.label`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -8423,7 +8588,7 @@ var EditLabel = styled48__default.default.label`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CharCount = styled48__default.default.span`
+var CharCount = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.monospace};
@@ -8433,7 +8598,7 @@ var CharCount = styled48__default.default.span`
   return tokens.colors.success;
 }};
 `;
-var EditTextarea = styled48__default.default.textarea`
+var EditTextarea = styled50__default.default.textarea`
   width: 100%;
   min-height: 100px;
   padding: ${tokens.spacing.sm};
@@ -8463,14 +8628,14 @@ var EditTextarea = styled48__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var ProgressBar2 = styled48__default.default.div`
+var ProgressBar2 = styled50__default.default.div`
   width: 100%;
   height: 3px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressFill = styled48__default.default.div`
+var ProgressFill = styled50__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8481,12 +8646,12 @@ var ProgressFill = styled48__default.default.div`
   return tokens.colors.success;
 }};
 `;
-var Actions3 = styled48__default.default.div`
+var Actions3 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   justify-content: flex-end;
 `;
-var ActionButton5 = styled48__default.default.button`
+var ActionButton5 = styled50__default.default.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.md};
   font-size: ${tokens.typography.fontSize.sm};
@@ -8710,7 +8875,7 @@ var PostPreviewCard = ({
   );
 };
 PostPreviewCard.displayName = "PostPreviewCard";
-var fadeIn2 = styled48.keyframes`
+var fadeIn2 = styled50.keyframes`
   from {
     opacity: 0;
     transform: translate(2px, 2px);
@@ -8720,7 +8885,7 @@ var fadeIn2 = styled48.keyframes`
     transform: translateY(0);
   }
 `;
-var CardContainer = styled48__default.default.div`
+var CardContainer = styled50__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
@@ -8733,7 +8898,7 @@ var CardContainer = styled48__default.default.div`
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
   }
 `;
-var PlatformHeader = styled48__default.default.div`
+var PlatformHeader = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -8741,7 +8906,7 @@ var PlatformHeader = styled48__default.default.div`
   padding-bottom: ${tokens.spacing.sm};
   border-bottom: 1px solid ${tokens.colors.border.default};
 `;
-var PlatformIcon = styled48__default.default.span`
+var PlatformIcon = styled50__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8753,13 +8918,13 @@ var PlatformIcon = styled48__default.default.span`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var PlatformName = styled48__default.default.span`
+var PlatformName = styled50__default.default.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var CharacterBadge = styled48__default.default.span`
+var CharacterBadge = styled50__default.default.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
   font-size: 11px;
@@ -8771,10 +8936,10 @@ var CharacterBadge = styled48__default.default.span`
   return tokens.colors.success;
 }};
 `;
-var ContentSection = styled48__default.default.div`
+var ContentSection = styled50__default.default.div`
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PostContent = styled48__default.default.div`
+var PostContent = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.base};
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: 1.6;
@@ -8786,7 +8951,7 @@ var PostContent = styled48__default.default.div`
   /* Smooth fade-in animation when content appears */
   animation: ${fadeIn2} 0.4s ease-out;
 `;
-var PostContentEditable = styled48__default.default.textarea`
+var PostContentEditable = styled50__default.default.textarea`
   width: 100%;
   min-height: 180px;
   max-height: 300px;
@@ -8815,12 +8980,12 @@ var PostContentEditable = styled48__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var HashtagsContainer = styled48__default.default.div`
+var HashtagsContainer = styled50__default.default.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 `;
-var HashtagPill = styled48__default.default.span`
+var HashtagPill = styled50__default.default.span`
   display: inline-block;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
@@ -8837,17 +9002,17 @@ var HashtagPill = styled48__default.default.span`
     color: ${tokens.colors.primary};
   }
 `;
-var ProgressBarContainer = styled48__default.default.div`
+var ProgressBarContainer = styled50__default.default.div`
   margin-top: ${tokens.spacing.sm};
 `;
-var ProgressBarTrack = styled48__default.default.div`
+var ProgressBarTrack = styled50__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill2 = styled48__default.default.div`
+var ProgressBarFill2 = styled50__default.default.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8858,7 +9023,7 @@ var ProgressBarFill2 = styled48__default.default.div`
   return tokens.colors.success;
 }};
 `;
-var ImageChangeButton = styled48__default.default.button`
+var ImageChangeButton = styled50__default.default.button`
   display: block;
   width: 100%;
   padding: 0;
@@ -8867,21 +9032,21 @@ var ImageChangeButton = styled48__default.default.button`
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 `;
-var ImagePreviewContainer = styled48__default.default.div`
+var ImagePreviewContainer = styled50__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 = styled48__default.default.img`
+var ImagePreview = styled50__default.default.img`
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   display: block;
 `;
-var ImageOverlay = styled48__default.default.div`
+var ImageOverlay = styled50__default.default.div`
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
@@ -8900,12 +9065,12 @@ var ImageOverlay = styled48__default.default.div`
     opacity: 0.6;
   }
 `;
-var OverlayText = styled48__default.default.span`
+var OverlayText = styled50__default.default.span`
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var ImagePlaceholder = styled48__default.default.div`
+var ImagePlaceholder = styled50__default.default.div`
   width: 100%;
   height: 200px;
   background: linear-gradient(
@@ -8935,7 +9100,7 @@ var ImagePlaceholder = styled48__default.default.div`
     }
   `}
 `;
-var PlaceholderIcon = styled48__default.default.div`
+var PlaceholderIcon = styled50__default.default.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
@@ -8949,7 +9114,7 @@ var PlaceholderIcon = styled48__default.default.div`
     height: 24px;
   }
 `;
-var shimmer = styled48.keyframes`
+var shimmer = styled50.keyframes`
   0% {
     background-position: -200% 0;
   }
@@ -8957,13 +9122,13 @@ var shimmer = styled48.keyframes`
     background-position: 200% 0;
   }
 `;
-var SkeletonContent = styled48__default.default.div`
+var SkeletonContent = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm} 0;
 `;
-var SkeletonLine = styled48__default.default.div`
+var SkeletonLine = styled50__default.default.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -9064,13 +9229,13 @@ var PlatformCarousel = ({
   ] });
 };
 PlatformCarousel.displayName = "PlatformCarousel";
-var CarouselContainer = styled48__default.default.div`
+var CarouselContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: ${tokens.spacing.md};
 `;
-var TabsContainer = styled48__default.default.div`
+var TabsContainer = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
@@ -9084,7 +9249,7 @@ var TabsContainer = styled48__default.default.div`
     display: none;
   }
 `;
-var PlatformTab = styled48__default.default.button`
+var PlatformTab = styled50__default.default.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9110,37 +9275,36 @@ var PlatformTab = styled48__default.default.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var PlatformIcon2 = styled48__default.default.span`
+var PlatformIcon2 = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.base};
   color: ${({ $platformColor }) => $platformColor};
   transition: color ${tokens.transitions.fast};
 `;
-var ContentContainer2 = styled48__default.default.div`
+var ContentContainer2 = styled50__default.default.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
-  /* Padding to prevent card borders/shadows from being clipped */
-  padding: 0 ${tokens.spacing.xs};
-  margin: 0 -${tokens.spacing.xs};
 `;
-var Slide = styled48__default.default.div`
+var Slide = styled50__default.default.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
   top: 0;
   left: 0;
   width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
   opacity: ${({ $isActive }) => $isActive ? 1 : 0};
   transform: ${({ $isActive }) => $isActive ? "translateX(0)" : "translateX(20px)"};
   transition: opacity ${tokens.animation.duration.short} ${tokens.animation.easing.smooth},
     transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
   pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
 `;
-var NavigationDotsContainer = styled48__default.default.div`
+var NavigationDotsContainer = styled50__default.default.div`
   display: flex;
   justify-content: center;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
 `;
-var NavigationDot = styled48__default.default.button`
+var NavigationDot = styled50__default.default.button`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -9160,7 +9324,7 @@ var NavigationDot = styled48__default.default.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var EmptyState = styled48__default.default.div`
+var EmptyState = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9219,10 +9383,12 @@ var PlatformGrid = ({
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
-var Grid = styled48__default.default.div`
+var Grid = styled50__default.default.div`
   display: grid;
   gap: ${tokens.spacing.md};
   width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
 
   /* Mobile: 1 column */
   grid-template-columns: 1fr;
@@ -9237,7 +9403,7 @@ var Grid = styled48__default.default.div`
     grid-template-columns: repeat(3, 1fr);
   }
 `;
-var GridCell = styled48__default.default.div`
+var GridCell = styled50__default.default.div`
   min-width: 0; /* Prevent grid blowout with long content */
   cursor: pointer;
   border-radius: ${tokens.borderRadius.lg};
@@ -9247,7 +9413,7 @@ var GridCell = styled48__default.default.div`
     transform: translateY(-2px);
   }
 `;
-var EmptyState2 = styled48__default.default.div`
+var EmptyState2 = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9256,12 +9422,12 @@ var EmptyState2 = styled48__default.default.div`
   border: 1px dashed ${tokens.colors.border.hover};
   border-radius: ${tokens.borderRadius.lg};
 `;
-var EmptyStateText = styled48__default.default.p`
+var EmptyStateText = styled50__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var Container14 = styled48__default.default.div`
+var Container14 = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -9275,7 +9441,7 @@ var Container14 = styled48__default.default.div`
   );
   overflow: auto;
 `;
-var Header3 = styled48__default.default.div`
+var Header3 = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9301,7 +9467,7 @@ var Header3 = styled48__default.default.div`
     pointer-events: none;
   }
 `;
-var Title = styled48__default.default.h2`
+var Title = styled50__default.default.h2`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -9311,12 +9477,12 @@ var Title = styled48__default.default.h2`
   text-overflow: ellipsis;
   min-width: 0;
 `;
-var ViewToggle = styled48__default.default.div`
+var ViewToggle = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var ToggleButton = styled48__default.default.button`
+var ToggleButton = styled50__default.default.button`
   padding: ${tokens.spacing.xs};
   width: 32px;
   height: 32px;
@@ -9344,7 +9510,7 @@ var ToggleButton = styled48__default.default.button`
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
   }
 `;
-var Content4 = styled48__default.default.div`
+var Content4 = styled50__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -9353,7 +9519,7 @@ var Content4 = styled48__default.default.div`
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;
-var EmptyState3 = styled48__default.default.div`
+var EmptyState3 = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9381,7 +9547,7 @@ var EmptyState3 = styled48__default.default.div`
     font-size: ${tokens.typography.fontSize.sm};
   }
 `;
-var PostCount = styled48__default.default.span`
+var PostCount = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -9786,7 +9952,7 @@ var RedditOpportunityCard = ({
   );
 };
 RedditOpportunityCard.displayName = "RedditOpportunityCard";
-var fadeIn3 = styled48.keyframes`
+var fadeIn3 = styled50.keyframes`
   from {
     opacity: 0;
     transform: translateY(8px);
@@ -9796,17 +9962,17 @@ var fadeIn3 = styled48.keyframes`
     transform: translateY(0);
   }
 `;
-var shimmer2 = styled48.keyframes`
+var shimmer2 = styled50.keyframes`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 `;
-var Icon2 = styled48__default.default.img`
+var Icon2 = styled50__default.default.img`
   width: 14px;
   height: 14px;
   vertical-align: middle;
   opacity: 0.8;
 `;
-var CardContainer2 = styled48__default.default.div`
+var CardContainer2 = styled50__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.lg};
@@ -9824,7 +9990,7 @@ var CardContainer2 = styled48__default.default.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var CardHeader = styled48__default.default.div`
+var CardHeader = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9837,12 +10003,12 @@ var CardHeader = styled48__default.default.div`
     align-items: flex-start;
   }
 `;
-var HeaderLeft = styled48__default.default.div`
+var HeaderLeft = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var SubredditBadgeContainer = styled48__default.default.span`
+var SubredditBadgeContainer = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9855,14 +10021,14 @@ var SubredditBadgeContainer = styled48__default.default.span`
   border: 1px solid ${({ $color }) => `${$color}40`};
   transition: all ${tokens.transitions.fast};
 `;
-var SubredditLink = styled48__default.default.a`
+var SubredditLink = styled50__default.default.a`
   text-decoration: none;
 
   &:hover ${SubredditBadgeContainer} {
     background: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ScoreBadgeContainer = styled48__default.default.div`
+var ScoreBadgeContainer = styled50__default.default.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
@@ -9871,42 +10037,42 @@ var ScoreBadgeContainer = styled48__default.default.div`
   background: ${({ $color }) => `${$color}20`};
   border: 1px solid ${({ $color }) => `${$color}40`};
 `;
-var ScoreValue = styled48__default.default.span`
+var ScoreValue = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-weight: ${tokens.typography.fontWeight.bold};
   color: ${tokens.colors.text.primary};
 `;
-var ScoreMax = styled48__default.default.span`
+var ScoreMax = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
 `;
-var ScoreLabel = styled48__default.default.span`
+var ScoreLabel = styled50__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 = styled48__default.default.div`
+var StatsContainer = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatItem = styled48__default.default.span`
+var StatItem = styled50__default.default.span`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
 `;
-var StatValue = styled48__default.default.span`
+var StatValue = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var StatDivider = styled48__default.default.span`
+var StatDivider = styled50__default.default.span`
   color: ${tokens.colors.text.tertiary};
 `;
-var PostPreviewSection = styled48__default.default.div`
+var PostPreviewSection = styled50__default.default.div`
   margin-bottom: ${tokens.spacing.md};
 `;
-var PostTitle = styled48__default.default.a`
+var PostTitle = styled50__default.default.a`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -9921,58 +10087,58 @@ var PostTitle = styled48__default.default.a`
     color: ${tokens.colors.primary};
   }
 `;
-var ExternalLinkIcon = styled48__default.default.span`
+var ExternalLinkIcon = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   flex-shrink: 0;
 `;
-var PostContent2 = styled48__default.default.p`
+var PostContent2 = styled50__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;
 `;
-var PostAuthor = styled48__default.default.div`
+var PostAuthor = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var PostFlair = styled48__default.default.span`
+var PostFlair = styled50__default.default.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   background: ${tokens.colors.surface.overlay};
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.secondary};
 `;
-var Divider = styled48__default.default.hr`
+var Divider = styled50__default.default.hr`
   border: none;
   height: 1px;
   background: ${tokens.colors.border.default};
   margin: ${tokens.spacing.md} 0;
 `;
-var ReplySection = styled48__default.default.div``;
-var ReplySectionHeader = styled48__default.default.div`
+var ReplySection = styled50__default.default.div``;
+var ReplySectionHeader = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.sm};
 `;
-var ReplyLabel = styled48__default.default.span`
+var ReplyLabel = styled50__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;
 `;
-var ReplyMeta = styled48__default.default.div`
+var ReplyMeta = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var ToneBadgeContainer = styled48__default.default.span`
+var ToneBadgeContainer = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9982,17 +10148,17 @@ var ToneBadgeContainer = styled48__default.default.span`
   background: ${({ $color }) => `${$color}20`};
   color: ${({ $color }) => $color};
 `;
-var ToneIcon = styled48__default.default.img`
+var ToneIcon = styled50__default.default.img`
   width: 12px;
   height: 12px;
 `;
-var CharacterCount = styled48__default.default.span`
+var CharacterCount = styled50__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 = styled48__default.default.div`
+var ReplyContent = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.base};
   line-height: ${tokens.typography.lineHeight.relaxed};
   color: ${tokens.colors.text.primary};
@@ -10005,7 +10171,7 @@ var ReplyContent = styled48__default.default.div`
   min-height: 100px;
   animation: ${fadeIn3} 0.3s ease-out;
 `;
-var ReplyTextarea = styled48__default.default.textarea`
+var ReplyTextarea = styled50__default.default.textarea`
   width: 100%;
   min-height: 150px;
   max-height: 400px;
@@ -10031,7 +10197,7 @@ var ReplyTextarea = styled48__default.default.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var StrategyHint = styled48__default.default.div`
+var StrategyHint = styled50__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.xs};
@@ -10040,40 +10206,40 @@ var StrategyHint = styled48__default.default.div`
   border-radius: ${tokens.borderRadius.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
-var StrategyIconImg = styled48__default.default.img`
+var StrategyIconImg = styled50__default.default.img`
   width: 16px;
   height: 16px;
   opacity: 0.8;
 `;
-var StrategyText = styled48__default.default.span`
+var StrategyText = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   font-style: italic;
 `;
-var ProgressBarContainer2 = styled48__default.default.div`
+var ProgressBarContainer2 = styled50__default.default.div`
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarTrack2 = styled48__default.default.div`
+var ProgressBarTrack2 = styled50__default.default.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill3 = styled48__default.default.div`
+var ProgressBarFill3 = styled50__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 = styled48__default.default.div`
+var SkeletonContent2 = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var SkeletonLine2 = styled48__default.default.div`
+var SkeletonLine2 = styled50__default.default.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -10238,7 +10404,7 @@ var RedditEngagementControls = ({
   ] });
 };
 RedditEngagementControls.displayName = "RedditEngagementControls";
-var pulse4 = styled48.keyframes`
+var pulse4 = styled50.keyframes`
   0%, 100% {
     box-shadow: 0 0 0 0 ${tokens.colors.primary}66;
   }
@@ -10246,7 +10412,7 @@ var pulse4 = styled48.keyframes`
     box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
   }
 `;
-var ControlsContainer = styled48__default.default.div`
+var ControlsContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
@@ -10255,7 +10421,7 @@ var ControlsContainer = styled48__default.default.div`
   border-radius: ${tokens.borderRadius.lg};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var EditModeSection = styled48__default.default.div`
+var EditModeSection = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10264,25 +10430,25 @@ var EditModeSection = styled48__default.default.div`
   border: 1px solid ${tokens.colors.status.editing}40;
   border-radius: ${tokens.borderRadius.md};
 `;
-var EditModeLabel = styled48__default.default.span`
+var EditModeLabel = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.status.editing};
 `;
-var EditModeActions = styled48__default.default.div`
+var EditModeActions = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var InputSection = styled48__default.default.div`
+var InputSection = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
 `;
-var InputLabel = styled48__default.default.label`
+var InputLabel = styled50__default.default.label`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
 `;
-var InputRow = styled48__default.default.div`
+var InputRow = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
@@ -10291,7 +10457,7 @@ var InputRow = styled48__default.default.div`
     flex-direction: column;
   }
 `;
-var TextInput = styled48__default.default.input`
+var TextInput = styled50__default.default.input`
   flex: 1;
   min-width: 0;
   padding: ${tokens.spacing.sm};
@@ -10315,7 +10481,7 @@ var TextInput = styled48__default.default.input`
     width: 100%;
   }
 `;
-var SmallButton = styled48__default.default.button`
+var SmallButton = styled50__default.default.button`
   padding: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.base};
   color: ${tokens.colors.text.tertiary};
@@ -10330,12 +10496,12 @@ var SmallButton = styled48__default.default.button`
     background: ${tokens.colors.surface.overlay};
   }
 `;
-var MainActions = styled48__default.default.div`
+var MainActions = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.md};
 `;
-var SecondaryActions = styled48__default.default.div`
+var SecondaryActions = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -10346,7 +10512,7 @@ var SecondaryActions = styled48__default.default.div`
     }
   }
 `;
-var PrimaryActions = styled48__default.default.div`
+var PrimaryActions = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   flex-wrap: wrap;
@@ -10357,12 +10523,12 @@ var PrimaryActions = styled48__default.default.div`
     }
   }
 `;
-var Icon3 = styled48__default.default.img`
+var Icon3 = styled50__default.default.img`
   width: 16px;
   height: 16px;
   vertical-align: middle;
 `;
-var ActionButton6 = styled48__default.default.button`
+var ActionButton6 = styled50__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10386,7 +10552,7 @@ var ActionButton6 = styled48__default.default.button`
   ${({ $variant }) => {
   switch ($variant) {
     case "primary":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.primary};
           color: white;
           &:hover:not(:disabled) {
@@ -10397,7 +10563,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "success":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.success};
           color: white;
           &:hover:not(:disabled) {
@@ -10408,7 +10574,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "skip":
-      return styled48.css`
+      return styled50.css`
           background: transparent;
           color: ${tokens.colors.text.secondary};
           border: 1px solid ${tokens.colors.border.default};
@@ -10418,7 +10584,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "edit":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.status.editing}20;
           color: ${tokens.colors.status.editing};
           border: 1px solid ${tokens.colors.status.editing}40;
@@ -10427,7 +10593,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "tertiary":
-      return styled48.css`
+      return styled50.css`
           background: transparent;
           color: ${tokens.colors.accent};
           border: 1px solid ${tokens.colors.accent}40;
@@ -10436,7 +10602,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "cancel":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.error}15;
           color: ${tokens.colors.error};
           border: 1px solid ${tokens.colors.error}30;
@@ -10445,7 +10611,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "save":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.success};
           color: white;
           &:hover:not(:disabled) {
@@ -10453,7 +10619,7 @@ var ActionButton6 = styled48__default.default.button`
           }
         `;
     case "engaged":
-      return styled48.css`
+      return styled50.css`
           background: ${tokens.colors.text.tertiary};
           color: ${tokens.colors.background.darker};
           cursor: default;
@@ -10466,7 +10632,7 @@ var ActionButton6 = styled48__default.default.button`
   }
 }}
 
-  ${({ $pulse }) => $pulse && styled48.css`
+  ${({ $pulse }) => $pulse && styled50.css`
       animation: ${pulse4} 2s ease-in-out infinite;
     `}
 `;
@@ -10553,7 +10719,7 @@ function TokenUsageCard({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "Token Usage" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "Credit Usage" }),
       /* @__PURE__ */ jsxRuntime.jsx(Period, { children: periodLabel })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(UsageSection, { children: [
@@ -10580,7 +10746,7 @@ function TokenUsageCard({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(TransactionTokens, { $type: transaction.type, children: [
-          transaction.type === "output" ? "+" : "",
+          transaction.type === "input" ? "+" : "-",
           formatNumber2(transaction.tokens)
         ] })
       ] }, transaction.id)) })
@@ -10589,7 +10755,7 @@ function TokenUsageCard({
     onViewAll && transactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
   ] });
 }
-var Card2 = styled48__default.default.div`
+var Card2 = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
@@ -10598,7 +10764,7 @@ var Card2 = styled48__default.default.div`
   height: 100%;
   overflow: hidden;
 `;
-var Header4 = styled48__default.default.div`
+var Header4 = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10608,65 +10774,65 @@ var Header4 = styled48__default.default.div`
   min-height: 48px;
   flex-shrink: 0;
 `;
-var Title2 = styled48__default.default.h3`
+var Title2 = styled50__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 = styled48__default.default.span`
+var Period = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var UsageSection = styled48__default.default.div`
+var UsageSection = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var UsageStats = styled48__default.default.div`
+var UsageStats = styled50__default.default.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
 `;
-var CurrentUsage = styled48__default.default.span`
+var CurrentUsage = styled50__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 = styled48__default.default.span`
+var UsageSeparator = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var MaxUsage = styled48__default.default.span`
+var MaxUsage = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var ProgressContainer = styled48__default.default.div`
+var ProgressContainer = styled50__default.default.div`
   width: 100%;
   height: 8px;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var ProgressBar3 = styled48__default.default.div`
+var ProgressBar3 = styled50__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 = styled48__default.default.span`
+var PercentageLabel = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $level }) => usageLevelColors[$level]};
 `;
-var TransactionsSection = styled48__default.default.div`
+var TransactionsSection = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -10676,19 +10842,19 @@ var TransactionsSection = styled48__default.default.div`
   overflow-y: auto;
   min-height: 0;
 `;
-var TransactionsHeader = styled48__default.default.h4`
+var TransactionsHeader = styled50__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 = styled48__default.default.div`
+var TransactionsList = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var TransactionItem = styled48__default.default.div`
+var TransactionItem = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -10705,7 +10871,7 @@ var TransactionItem = styled48__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var TransactionIcon = styled48__default.default.span`
+var TransactionIcon = styled50__default.default.span`
   width: 24px;
   height: 24px;
   display: flex;
@@ -10727,12 +10893,12 @@ var TransactionIcon = styled48__default.default.span`
 }};
   }
 `;
-var TransactionInfo = styled48__default.default.div`
+var TransactionInfo = styled50__default.default.div`
   flex: 1;
   min-width: 0;
   overflow: hidden;
 `;
-var TransactionDescription = styled48__default.default.div`
+var TransactionDescription = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
@@ -10740,7 +10906,7 @@ var TransactionDescription = styled48__default.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var TransactionMeta = styled48__default.default.div`
+var TransactionMeta = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -10754,21 +10920,21 @@ var TransactionMeta = styled48__default.default.div`
     white-space: nowrap;
   }
 `;
-var TransactionTokens = styled48__default.default.span`
+var TransactionTokens = styled50__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 = styled48__default.default.div`
+var EmptyState4 = styled50__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 = styled48__default.default.button`
+var ViewAllButton = styled50__default.default.button`
   margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
@@ -10786,11 +10952,11 @@ var ViewAllButton = styled48__default.default.button`
     color: ${tokens.colors.text.primary};
   }
 `;
-var pulse5 = styled48.keyframes`
+var pulse5 = styled50.keyframes`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
 `;
-var SkeletonBlock = styled48__default.default.div`
+var SkeletonBlock = styled50__default.default.div`
   width: ${({ $width }) => $width};
   height: ${({ $height }) => $height};
   background: ${tokens.colors.background.light};
@@ -10868,7 +11034,7 @@ var WorkflowCard = ({
   );
 };
 WorkflowCard.displayName = "WorkflowCard";
-var Card3 = styled48__default.default.button`
+var Card3 = styled50__default.default.button`
   display: grid;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
@@ -10899,7 +11065,7 @@ var Card3 = styled48__default.default.button`
     cursor: not-allowed;
   }
 `;
-var WorkflowName2 = styled48__default.default.h3`
+var WorkflowName2 = styled50__default.default.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -10910,7 +11076,7 @@ var WorkflowName2 = styled48__default.default.h3`
   white-space: nowrap;
   min-width: 0;
 `;
-var Description2 = styled48__default.default.p`
+var Description2 = styled50__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
@@ -10922,7 +11088,7 @@ var Description2 = styled48__default.default.p`
   word-break: break-word;
   min-width: 0;
 `;
-var CardFooter = styled48__default.default.div`
+var CardFooter = styled50__default.default.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -10931,13 +11097,13 @@ var CardFooter = styled48__default.default.div`
   border-top: 1px solid ${tokens.colors.border.subtle};
   width: 100%;
 `;
-var IntegrationList = styled48__default.default.div`
+var IntegrationList = styled50__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var IntegrationIconWrapper = styled48__default.default.span`
+var IntegrationIconWrapper = styled50__default.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10959,12 +11125,12 @@ var IntegrationIconWrapper = styled48__default.default.span`
     }
   `}
 `;
-var IntegrationIcon = styled48__default.default.img`
+var IntegrationIcon = styled50__default.default.img`
   width: 16px;
   height: 16px;
   object-fit: contain;
 `;
-var Indicators = styled48__default.default.div`
+var Indicators = styled50__default.default.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -10972,7 +11138,7 @@ var Indicators = styled48__default.default.div`
   margin-left: auto;
   min-width: 0;
 `;
-var IndicatorPill = styled48__default.default.span`
+var IndicatorPill = styled50__default.default.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -10981,14 +11147,14 @@ var IndicatorPill = styled48__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 = styled48__default.default.span`
+var IndicatorDot = styled50__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 = styled48__default.default.span`
+var IndicatorText = styled50__default.default.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
@@ -10999,7 +11165,7 @@ var severityColors = {
   warning: tokens.colors.warning,
   info: tokens.colors.info
 };
-var AlertContainer = styled48__default.default.div`
+var AlertContainer = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => {
@@ -11017,7 +11183,7 @@ var AlertContainer = styled48__default.default.div`
   max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ModalOverlay = styled48__default.default.div`
+var ModalOverlay = styled50__default.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -11030,53 +11196,53 @@ var ModalOverlay = styled48__default.default.div`
   z-index: ${tokens.zIndex.modal};
   padding: ${tokens.spacing.lg};
 `;
-var ModalContent = styled48__default.default.div`
+var ModalContent = styled50__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 = styled48__default.default.div`
+var Header5 = styled50__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
 `;
-var IconContainer2 = styled48__default.default.div`
+var IconContainer2 = styled50__default.default.div`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   color: ${(props) => severityColors[props.severity]};
 `;
-var Content5 = styled48__default.default.div`
+var Content5 = styled50__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var Title3 = styled48__default.default.div`
+var Title3 = styled50__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 ErrorMessage2 = styled48__default.default.div`
+var ErrorMessage2 = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var ErrorCode = styled48__default.default.div`
+var ErrorCode = styled50__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 = styled48__default.default.div`
+var Timestamp = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Details = styled48__default.default.details`
+var Details = styled50__default.default.details`
   margin-top: ${tokens.spacing.md};
   cursor: pointer;
 
@@ -11099,12 +11265,12 @@ var Details = styled48__default.default.details`
     }
   }
 `;
-var DetailsIcon = styled48__default.default.span`
+var DetailsIcon = styled50__default.default.span`
   display: inline-block;
   transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
 `;
-var StackTrace = styled48__default.default.pre`
+var StackTrace = styled50__default.default.pre`
   margin: ${tokens.spacing.sm} 0 0 0;
   padding: ${tokens.spacing.md};
   background-color: ${tokens.colors.surface.subtle};
@@ -11117,12 +11283,12 @@ var StackTrace = styled48__default.default.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions4 = styled48__default.default.div`
+var Actions4 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
 `;
-var Button4 = styled48__default.default.button`
+var Button4 = styled50__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -11151,7 +11317,7 @@ var Button4 = styled48__default.default.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton2 = styled48__default.default.button`
+var CloseButton2 = styled50__default.default.button`
   position: absolute;
   top: ${tokens.spacing.md};
   right: ${tokens.spacing.md};
@@ -11302,7 +11468,7 @@ var WorkflowErrorAlert = ({
   return alertContent;
 };
 WorkflowErrorAlert.displayName = "WorkflowErrorAlert";
-var indeterminate = styled48.keyframes`
+var indeterminate = styled50.keyframes`
   0% {
     transform: translateX(-100%);
   }
@@ -11310,7 +11476,7 @@ var indeterminate = styled48.keyframes`
     transform: translateX(400%);
   }
 `;
-var rotate = styled48.keyframes`
+var rotate = styled50.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -11325,14 +11491,14 @@ var statusColors2 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var Container15 = styled48__default.default.div`
+var Container15 = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   width: 100%;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled48__default.default.div`
+var ProgressMessage = styled50__default.default.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11347,13 +11513,13 @@ var ProgressMessage = styled48__default.default.div`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled48__default.default.div`
+var ProgressInfo = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled48__default.default.span`
+var PercentageText = styled50__default.default.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11368,7 +11534,7 @@ var PercentageText = styled48__default.default.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled48__default.default.div`
+var LinearTrack = styled50__default.default.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
@@ -11386,7 +11552,7 @@ var LinearTrack = styled48__default.default.div`
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled48__default.default.div`
+var LinearFill = styled50__default.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -11397,12 +11563,12 @@ var LinearFill = styled48__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 = styled48__default.default.div`
+var CircularContainer = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled48__default.default.svg`
+var CircularSvg = styled50__default.default.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -11438,12 +11604,12 @@ var getCircularSize = (size) => {
       return { radius: 26, strokeWidth: 4 };
   }
 };
-var CircularTrack = styled48__default.default.circle`
+var CircularTrack = styled50__default.default.circle`
   fill: none;
   stroke: ${tokens.colors.border.default};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
 `;
-var CircularFill = styled48__default.default.circle`
+var CircularFill = styled50__default.default.circle`
   fill: none;
   stroke: ${(props) => statusColors2[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -11461,7 +11627,7 @@ var CircularFill = styled48__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 = styled48__default.default.text`
+var CircularPercentage = styled50__default.default.text`
   fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
@@ -11562,7 +11728,7 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled48__default.default.div`
+var Panel = styled50__default.default.div`
   display: flex;
   flex-direction: column;
   background-color: ${tokens.colors.surface.overlay};
@@ -11571,7 +11737,7 @@ var Panel = styled48__default.default.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header6 = styled48__default.default.div`
+var Header6 = styled50__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -11585,7 +11751,7 @@ var Header6 = styled48__default.default.div`
     background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title4 = styled48__default.default.div`
+var Title4 = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -11593,11 +11759,11 @@ var Title4 = styled48__default.default.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions5 = styled48__default.default.div`
+var Actions5 = styled50__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled48__default.default.button`
+var IconButton = styled50__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11626,7 +11792,7 @@ var IconButton = styled48__default.default.button`
     height: 16px;
   }
 `;
-var CollapseIcon2 = styled48__default.default.div`
+var CollapseIcon2 = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11639,7 +11805,7 @@ var CollapseIcon2 = styled48__default.default.div`
     height: 16px;
   }
 `;
-var Content6 = styled48__default.default.div`
+var Content6 = styled50__default.default.div`
   padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
@@ -11667,7 +11833,7 @@ var Content6 = styled48__default.default.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled48__default.default.pre`
+var JsonView = styled50__default.default.pre`
   margin: 0;
   font-family: ${tokens.typography.fontFamily.monospace};
   font-size: ${tokens.typography.fontSize.sm};
@@ -11676,12 +11842,12 @@ var JsonView = styled48__default.default.pre`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled48__default.default.div`
+var FormattedView = styled50__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled48__default.default.table`
+var TableView = styled50__default.default.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${tokens.typography.fontSize.sm};
@@ -11705,7 +11871,7 @@ var TableView = styled48__default.default.table`
     border-bottom: none;
   }
 `;
-var EmptyState5 = styled48__default.default.div`
+var EmptyState5 = styled50__default.default.div`
   padding: ${tokens.spacing.xl};
   text-align: center;
   color: ${tokens.colors.text.tertiary};
@@ -11778,7 +11944,7 @@ var WorkflowResultPanel = ({
   ] });
 };
 WorkflowResultPanel.displayName = "WorkflowResultPanel";
-var spin = styled48.keyframes`
+var spin = styled50.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -11786,7 +11952,7 @@ var spin = styled48.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse6 = styled48.keyframes`
+var pulse6 = styled50.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -11801,7 +11967,7 @@ var statusColors3 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var BadgeContainer2 = styled48__default.default.div`
+var BadgeContainer2 = styled50__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -11855,7 +12021,7 @@ var BadgeContainer2 = styled48__default.default.div`
   color: ${(props) => statusColors3[props.$status]};
   line-height: 1.4;
 `;
-var IconContainer3 = styled48__default.default.div`
+var IconContainer3 = styled50__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11934,7 +12100,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 = styled48__default.default.span`
+var Label2 = styled50__default.default.span`
   white-space: nowrap;
 `;
 var getDefaultLabel = (status) => {
@@ -11997,6 +12163,7 @@ exports.Actions = Actions;
 exports.AgentState = AgentState;
 exports.AssistantMessage = AssistantMessage;
 exports.AssistantThinking = AssistantThinking;
+exports.BillingToggle = BillingToggle;
 exports.Button = Button2;
 exports.CATEGORY_CONFIGS = CATEGORY_CONFIGS;
 exports.CategoryNav = CategoryNav;
@@ -12046,6 +12213,7 @@ exports.StreamingText = StreamingText;
 exports.Suggestions = Suggestions;
 exports.TelegramIcon = TelegramIcon;
 exports.TokenUsageCard = TokenUsageCard;
+exports.TrialPlanCard = TrialPlanCard;
 exports.UserMessage = UserMessage;
 exports.WhatsAppIcon = WhatsAppIcon;
 exports.Window = Window;