@agentiffai/design 1.3.5 → 1.3.7

package/dist/index.js

@@ -1,5 +1,5 @@
-import { memo, useRef, useState, useEffect, useCallback, useId, useMemo } from 'react';
-import styled11, { keyframes, css, createGlobalStyle } from 'styled-components';
+import { memo, useRef, useEffect, useState, useCallback, useId, useMemo } from 'react';
+import styled47, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useButton } from '@react-aria/button';
 import { useMeter } from '@react-aria/meter';
@@ -308,7 +308,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container = styled11.div`
+var Container = styled47.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -320,7 +320,7 @@ var Container = styled11.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled11.div`
+var Avatar = styled47.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -331,23 +331,23 @@ var Avatar = styled11.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled11.svg`
+var HeadphonesIcon = styled47.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled11.div`
+var Content = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots = styled11.div`
+var LoadingDots = styled47.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled11.span`
+var Dot = styled47.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -365,7 +365,7 @@ var Dot = styled11.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message = styled11.span`
+var Message = styled47.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -425,7 +425,7 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var ChatInputContainer = styled11.div`
+var ChatInputContainer = styled47.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -441,7 +441,7 @@ var ChatInputContainer = styled11.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled11.div`
+var SuggestionsWrapper = styled47.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -450,7 +450,7 @@ var SuggestionsWrapper = styled11.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled11.button`
+var SuggestionButton = styled47.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -489,7 +489,7 @@ var SuggestionButton = styled11.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled11.div`
+var InputWrapper = styled47.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -507,7 +507,7 @@ var InputWrapper = styled11.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled11.textarea`
+var InputField = styled47.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -532,7 +532,7 @@ var InputField = styled11.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled11.button`
+var SubmitButton = styled47.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -611,7 +611,6 @@ var ChatInput = ({
       if (inputRef.current) {
         inputRef.current.style.height = "auto";
       }
-      inputRef.current?.focus();
     }
   };
   const handleSuggestionClick = (suggestionText) => {
@@ -714,7 +713,7 @@ var SubmitButtonComponent = ({
   ) });
 };
 ChatInput.displayName = "ChatInput";
-var NavigationContainer = styled11.div`
+var NavigationContainer = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -731,7 +730,7 @@ var NavigationContainer = styled11.div`
     box-shadow: none !important;
   }
 `;
-var CategoryGroup = styled11.div`
+var CategoryGroup = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -743,7 +742,7 @@ var CategoryGroup = styled11.div`
     border-radius: 0 !important;
   }
 `;
-var CategoryButton = styled11.button`
+var CategoryButton = styled47.button`
   width: 48px;
   height: 48px;
   border: none;
@@ -768,7 +767,7 @@ var CategoryButton = styled11.button`
     outline-offset: 2px;
   }
 `;
-var CategoryLabel = styled11.span`
+var CategoryLabel = styled47.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
@@ -778,7 +777,7 @@ var CategoryLabel = styled11.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SubItemList = styled11.div`
+var SubItemList = styled47.div`
   display: ${({ $expanded }) => $expanded ? "flex" : "none"};
   flex-direction: column;
   align-items: center;
@@ -786,7 +785,7 @@ var SubItemList = styled11.div`
   margin-top: ${tokens.spacing.xs};
   width: 100%;
 `;
-var SubItemButton = styled11.button`
+var SubItemButton = styled47.button`
   width: 32px;
   height: 32px;
   border: none;
@@ -810,7 +809,7 @@ var SubItemButton = styled11.button`
     outline-offset: 2px;
   }
 `;
-var CountBadge = styled11.span`
+var CountBadge = styled47.span`
   position: absolute;
   top: -2px;
   right: -2px;
@@ -836,7 +835,7 @@ var filterBadgeIn = keyframes`
     transform: scale(1);
   }
 `;
-var FilterBadge = styled11.div`
+var FilterBadge = styled47.div`
   position: absolute;
   bottom: -${tokens.spacing.xs};
   right: -${tokens.spacing.xs};
@@ -855,13 +854,13 @@ var FilterBadge = styled11.div`
     fill: ${tokens.colors.text.primary};
   }
 `;
-var CategoryIconImg = styled11.img`
+var CategoryIconImg = styled47.img`
   width: ${({ $size }) => $size || 24}px;
   height: ${({ $size }) => $size || 24}px;
   object-fit: contain;
   filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
 `;
-var SubItemIconImg = styled11.img`
+var SubItemIconImg = styled47.img`
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
   object-fit: contain;
@@ -976,7 +975,7 @@ function CategoryNav({
   }) });
 }
 CategoryNav.displayName = "CategoryNav";
-var IconWrapper = styled11.span`
+var IconWrapper = styled47.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1056,7 +1055,7 @@ function Icon({
   return /* @__PURE__ */ jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
 }
 Icon.displayName = "Icon";
-var Container2 = styled11.nav`
+var Container2 = styled47.nav`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -1065,10 +1064,10 @@ var Container2 = styled11.nav`
   border-top: 1px solid ${tokens.colors.border.subtle};
   /* Add vertical padding to prevent content overlap */
   padding-top: 4px;
-  /* Use safe-area-inset-bottom for Android navigation buttons.
-     The env() value will be 0 on devices without soft nav buttons.
-     Fallback to 0 if env() is not supported. */
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* Use --safe-area-bottom CSS variable for Android navigation buttons.
+     Android WebView doesn't support env(), so we use CSS custom properties
+     injected by the native app. Fallback to 0 if not set. */
+  padding-bottom: var(--safe-area-bottom, 0px);
   z-index: ${tokens.zIndex.sticky};
 
   /* Dark theme support */
@@ -1076,7 +1075,7 @@ var Container2 = styled11.nav`
     background-color: ${tokens.colors.background.darkest};
   }
 `;
-var ContentWrapper = styled11.div`
+var ContentWrapper = styled47.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1094,7 +1093,7 @@ var ContentWrapper = styled11.div`
     padding: 0 ${tokens.spacing.xs} 0 6px;
   }
 `;
-var UserStatusSlot = styled11.div`
+var UserStatusSlot = styled47.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
@@ -1107,7 +1106,7 @@ var UserStatusSlot = styled11.div`
     white-space: nowrap;
   }
 `;
-var ActionButtonsSlot = styled11.div`
+var ActionButtonsSlot = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1130,7 +1129,7 @@ function NavHorizontal({
   ] }) });
 }
 NavHorizontal.displayName = "NavHorizontal";
-var Container3 = styled11.nav`
+var Container3 = styled47.nav`
   position: absolute;
   top: 0;
   left: 0;
@@ -1143,6 +1142,8 @@ var Container3 = styled11.nav`
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none; /* Firefox */
+  /* 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 {
@@ -1158,8 +1159,32 @@ var Container3 = styled11.nav`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     width: 60px; /* Match MainPane left offset on mobile */
   }
+
+  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  @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 = styled11.div`
+var TopSection = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1172,7 +1197,7 @@ var TopSection = styled11.div`
     height: 64px; /* Same as PaneSectionHeader on desktop */
   }
 `;
-var BackButton = styled11.button`
+var BackButton = styled47.button`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1188,6 +1213,7 @@ var BackButton = styled11.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${tokens.colors.primary};
@@ -1195,6 +1221,7 @@ var BackButton = styled11.button`
 
   &:active {
     transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -1206,12 +1233,12 @@ var BackButton = styled11.button`
     outline-offset: 2px;
   }
 `;
-styled11.span`
+styled47.span`
   font-size: ${tokens.typography.fontSize.xl};
   line-height: ${tokens.typography.lineHeight.tight};
   font-weight: ${tokens.typography.fontWeight.bold};
 `;
-var Separator = styled11.div`
+var Separator = styled47.div`
   width: 32px;
   height: 2px;
   background-color: ${tokens.colors.background.light};
@@ -1219,7 +1246,7 @@ var Separator = styled11.div`
   margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
   border-radius: 1px;
 `;
-var FolderGroupsSlot = styled11.div`
+var FolderGroupsSlot = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1245,8 +1272,14 @@ var FolderGroupsSlot = styled11.div`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     padding: 0 6px ${tokens.spacing.md} 96px; /* 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 */
+  }
 `;
-var BottomSection = styled11.div`
+var BottomSection = styled47.div`
   position: absolute;
   bottom: 0; /* At the bottom of the nav container */
   left: 0;
@@ -1261,11 +1294,19 @@ var BottomSection = styled11.div`
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
   }
+
+  /* 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;
+  }
 `;
-var BottomButton = styled11.button`
+var BottomButton = styled47.button`
   width: 40px;
   height: 40px;
-  border-radius: 0;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
   background-color: transparent;
   color: white;
@@ -1274,6 +1315,7 @@ var BottomButton = styled11.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     opacity: 0.7;
@@ -1281,6 +1323,7 @@ var BottomButton = styled11.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -1290,6 +1333,7 @@ var BottomButton = styled11.button`
   &:focus-visible {
     outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
+    border-radius: ${tokens.borderRadius.full};
   }
 `;
 function NavVertical({
@@ -1344,7 +1388,7 @@ function NavVertical({
   ] });
 }
 NavVertical.displayName = "NavVertical";
-var Container4 = styled11.div`
+var Container4 = styled47.div`
   position: relative;
   width: 100%;
   height: 100vh;
@@ -1357,7 +1401,7 @@ var Container4 = styled11.div`
     position: relative;
   }
 `;
-var BackgroundPane = styled11.div`
+var BackgroundPane = styled47.div`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1365,7 +1409,10 @@ var BackgroundPane = styled11.div`
   bottom: 52px; /* Height of horizontal nav */
   background-color: transparent;
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base}; /* Lower than MainPane */
+  /* Use CSS custom property for coordinated animations with NavVertical */
+  transition: transform var(--layout-transition-duration, 0.3s) var(--layout-transition-easing, ease-out);
 
   /* Custom scrollbar styling */
   &::-webkit-scrollbar {
@@ -1395,7 +1442,7 @@ var BackgroundPane = styled11.div`
     left: 60px; /* Smaller nav on mobile */
   }
 `;
-var MainPane = styled11.main`
+var MainPane = styled47.main`
   position: absolute;
   top: 0;
   left: 72px; /* Width of vertical nav */
@@ -1403,7 +1450,10 @@ var MainPane = styled11.main`
   bottom: 52px; /* Height of horizontal nav */
   background-color: ${tokens.colors.surface.overlay};
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base + 1}; /* Higher than BackgroundPane */
+  /* Use CSS custom property for coordinated animations with NavVertical */
+  transition: transform var(--layout-transition-duration, 0.3s) var(--layout-transition-easing, ease-out);
 
   /* Custom scrollbar styling */
   &::-webkit-scrollbar {
@@ -1468,18 +1518,18 @@ function Layout({
   ] });
 }
 Layout.displayName = "Layout";
-var Container5 = styled11.div`
+var Container5 = styled47.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: ${tokens.spacing.xs};
 `;
-var ActionButton = styled11.button`
+var ActionButton = styled47.button`
   width: ${({ $size = 32 }) => $size}px;
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
   min-height: ${({ $size = 32 }) => $size}px;
-  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.sm};
+  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.md};
   border: none;
   background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.primary : "transparent"};
   color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.text.primary : tokens.colors.text.secondary};
@@ -1489,6 +1539,7 @@ var ActionButton = styled11.button`
   justify-content: center;
   transition: all ${tokens.transitions.fast};
   font-size: ${tokens.typography.fontSize.base};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.secondary : tokens.colors.surface.overlayHover};
@@ -1497,6 +1548,7 @@ var ActionButton = styled11.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && css`
@@ -1577,7 +1629,7 @@ var statusColors = {
   busy: tokens.colors.status.busy,
   offline: tokens.colors.status.offline
 };
-var Container6 = styled11.button`
+var Container6 = styled47.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -1616,7 +1668,7 @@ var Container6 = styled11.button`
     opacity: 0.9;
   }
 `;
-var IconWrapper2 = styled11.div`
+var IconWrapper2 = styled47.div`
   position: relative;
   width: 36px;
   height: 36px;
@@ -1627,13 +1679,13 @@ var IconWrapper2 = styled11.div`
   justify-content: center;
   flex-shrink: 0;
 `;
-var WorkflowInfo = styled11.div`
+var WorkflowInfo = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   min-width: 0;
 `;
-var WorkflowName = styled11.span`
+var WorkflowName = styled47.span`
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -1642,14 +1694,14 @@ var WorkflowName = styled11.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var WorkflowStatus = styled11.span`
+var WorkflowStatus = styled47.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 = styled11.span`
+var WorkflowSubtitle = styled47.span`
   color: ${tokens.colors.text.tertiary};
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -1659,7 +1711,7 @@ var WorkflowSubtitle = styled11.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var StatusIndicatorOuter = styled11.span`
+var StatusIndicatorOuter = styled47.span`
   position: absolute;
   bottom: -2px;
   right: -2px;
@@ -1671,7 +1723,7 @@ var StatusIndicatorOuter = styled11.span`
   align-items: center;
   justify-content: center;
 `;
-var StatusIndicatorInner = styled11.span`
+var StatusIndicatorInner = styled47.span`
   width: 8px;
   height: 8px;
   border-radius: ${tokens.borderRadius.full};
@@ -1717,7 +1769,7 @@ function WorkflowStatusCard({
   ] });
 }
 WorkflowStatusCard.displayName = "WorkflowStatusCard";
-var DarkNotificationCardContainer = styled11.div`
+var DarkNotificationCardContainer = styled47.div`
   display: flex;
   flex-direction: column;
   padding: ${tokens.spacing.xs};
@@ -1728,7 +1780,7 @@ var DarkNotificationCardContainer = styled11.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkSectionHeader = styled11.button`
+var DarkSectionHeader = styled47.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1754,7 +1806,7 @@ var DarkSectionHeader = styled11.button`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var DarkChevronIcon = styled11.span`
+var DarkChevronIcon = styled47.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1772,7 +1824,7 @@ var DarkChevronIcon = styled11.span`
     height: 12px;
   }
 `;
-var DarkSectionContent = styled11.div`
+var DarkSectionContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
@@ -1781,7 +1833,7 @@ var DarkSectionContent = styled11.div`
   min-width: 0;
   overflow: hidden;
 `;
-var DarkNotificationItemWrapper = styled11.button`
+var DarkNotificationItemWrapper = styled47.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1820,7 +1872,7 @@ var DarkNotificationItemWrapper = styled11.button`
     opacity: 0.5;
   }
 `;
-var DarkItemIcon = styled11.span`
+var DarkItemIcon = styled47.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1845,7 +1897,7 @@ var DarkItemIcon = styled11.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var DarkItemText = styled11.span`
+var DarkItemText = styled47.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 11px;
@@ -1857,7 +1909,7 @@ var DarkItemText = styled11.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var DarkMenuButton = styled11.button`
+var DarkMenuButton = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1891,7 +1943,7 @@ var DarkMenuButton = styled11.button`
     height: 14px;
   }
 `;
-var DarkTimestamp = styled11.span`
+var DarkTimestamp = styled47.span`
   font-size: 10px;
   color: ${tokens.colors.text.tertiary};
   white-space: normal;
@@ -2076,7 +2128,7 @@ var DarkNotificationItemComponent = ({
   );
 };
 DarkNotificationCard.displayName = "DarkNotificationCard";
-var Container7 = styled11.div`
+var Container7 = styled47.div`
   width: 100%;
   height: 100%;
   background-color: transparent;
@@ -2086,7 +2138,7 @@ var Container7 = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   overflow: hidden; // Prevent content from escaping container bounds
 `;
-var TabListWrapper = styled11.div`
+var TabListWrapper = styled47.div`
   display: flex;
   border-bottom: 2px solid ${tokens.colors.border.default};
   background-color: ${tokens.colors.surface.subtle};
@@ -2106,7 +2158,7 @@ var TabListWrapper = styled11.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var TabButton = styled11.button`
+var TabButton = styled47.button`
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   background: none;
   border: none;
@@ -2150,11 +2202,12 @@ var TabButton = styled11.button`
     }
   `}
 `;
-var TabPanelWrapper = styled11.div`
+var TabPanelWrapper = styled47.div`
   flex: 1;
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
+  scrollbar-gutter: stable; // Always reserve space for scrollbar to prevent width jump
   background-color: ${tokens.colors.surface.overlay};
   min-height: 0; // Enable proper flex shrinking and scrolling
 
@@ -2187,7 +2240,7 @@ var TabPanelWrapper = styled11.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var RunsContainer = styled11.div`
+var RunsContainer = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.lg};
@@ -2200,7 +2253,7 @@ var RunsContainer = styled11.div`
     gap: ${tokens.spacing.md};
   }
 `;
-styled11.button`
+styled47.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -2237,7 +2290,7 @@ styled11.button`
     outline-offset: 2px;
   }
 `;
-var StyledDisclosureGroup = styled11(DisclosureGroup)`
+var StyledDisclosureGroup = styled47(DisclosureGroup)`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -2246,7 +2299,7 @@ var StyledDisclosureGroup = styled11(DisclosureGroup)`
   min-width: 0;
   overflow: hidden;
 `;
-var CategoryDisclosure = styled11(Disclosure)`
+var CategoryDisclosure = styled47(Disclosure)`
   background-color: transparent;
   display: flex;
   flex-direction: column;
@@ -2264,7 +2317,7 @@ var CategoryDisclosure = styled11(Disclosure)`
     cursor: not-allowed;
   }
 `;
-var CategoryHeader = styled11(Button)`
+var CategoryHeader = styled47(Button)`
   width: 100%;
   padding: ${tokens.spacing.xs} 0;
   background: none;
@@ -2294,7 +2347,7 @@ var CategoryHeader = styled11(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var CategoryTitle = styled11.div`
+var CategoryTitle = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2303,7 +2356,7 @@ var CategoryTitle = styled11.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-styled11.img`
+styled47.img`
   width: 16px;
   height: 16px;
   opacity: 0.6;
@@ -2314,7 +2367,7 @@ styled11.img`
     height: 14px;
   }
 `;
-var HashtagIcon = styled11.img`
+var HashtagIcon = styled47.img`
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -2325,7 +2378,7 @@ var HashtagIcon = styled11.img`
     height: 12px;
   }
 `;
-var ChevronIcon = styled11.div`
+var ChevronIcon = styled47.div`
   display: flex;
   align-items: center;
   transition: transform ${tokens.transitions.normal};
@@ -2346,7 +2399,7 @@ var ChevronIcon = styled11.div`
     }
   }
 `;
-var CategoryDisclosurePanel = styled11(DisclosurePanel)`
+var CategoryDisclosurePanel = styled47(DisclosurePanel)`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -2375,7 +2428,7 @@ var CategoryDisclosurePanel = styled11(DisclosurePanel)`
     }
   }
 `;
-var ItemContainer = styled11.div`
+var ItemContainer = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -2395,7 +2448,7 @@ var ItemContainer = styled11.div`
     background-color: ${tokens.colors.surface.overlayHover};
   }
 `;
-var ItemDisclosure = styled11(Disclosure)`
+var ItemDisclosure = styled47(Disclosure)`
   background-color: transparent;
   margin-bottom: ${tokens.spacing.xs};
   display: flex;
@@ -2410,7 +2463,7 @@ var ItemDisclosure = styled11(Disclosure)`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ItemHeader = styled11(Button)`
+var ItemHeader = styled47(Button)`
   width: 100%;
   padding: 0;
   background: none;
@@ -2428,7 +2481,7 @@ var ItemHeader = styled11(Button)`
     border-radius: ${tokens.borderRadius.sm};
   }
 `;
-var ItemDisclosurePanel = styled11(DisclosurePanel)`
+var ItemDisclosurePanel = styled47(DisclosurePanel)`
   padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -2458,7 +2511,7 @@ var ItemDisclosurePanel = styled11(DisclosurePanel)`
     }
   }
 `;
-var ItemIcon = styled11.img`
+var ItemIcon = styled47.img`
   width: 20px;
   height: 20px;
   opacity: 0.6;
@@ -2469,7 +2522,7 @@ var ItemIcon = styled11.img`
     height: 18px;
   }
 `;
-var ItemName = styled11.span`
+var ItemName = styled47.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -2487,7 +2540,7 @@ var ItemName = styled11.span`
     color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
   }
 `;
-var RunStatus = styled11.span`
+var RunStatus = styled47.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2519,13 +2572,13 @@ var RunStatus = styled11.span`
     font-size: ${tokens.typography.fontSize.xs};
   }
 `;
-styled11.div`
+styled47.div`
   margin-bottom: ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.lg};
   background-color: ${tokens.colors.surface.overlay};
   overflow: hidden;
 `;
-styled11.button`
+styled47.button`
   width: 100%;
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.surface.overlay};
@@ -2561,13 +2614,13 @@ styled11.button`
     margin-bottom: ${tokens.spacing.xs};
   }
 `;
-styled11.span`
+styled47.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)"};
 `;
-styled11.div`
+styled47.div`
   padding: ${tokens.spacing.md};
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
@@ -2587,17 +2640,17 @@ styled11.div`
     }
   }
 `;
-var MeterContainer = styled11.div`
+var MeterContainer = styled47.div`
   max-width: 600px;
   margin: 0 auto;
 `;
-var MeterLabel = styled11.div`
+var MeterLabel = styled47.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 = styled11.div`
+var MeterBar = styled47.div`
   width: 100%;
   height: 24px;
   background-color: ${tokens.colors.background.darker};
@@ -2606,7 +2659,7 @@ var MeterBar = styled11.div`
   position: relative;
   margin-bottom: ${tokens.spacing.md};
 `;
-var MeterFill = styled11.div`
+var MeterFill = styled47.div`
   height: 100%;
   width: ${(props) => props.$percentage}%;
   background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -2634,7 +2687,7 @@ var MeterFill = styled11.div`
     }
   }
 `;
-var MeterStats = styled11.div`
+var MeterStats = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
   text-align: center;
@@ -2645,18 +2698,18 @@ var MeterStats = styled11.div`
     opacity: 0.8;
   }
 `;
-var ConnectionsContainer = styled11.div`
+var ConnectionsContainer = styled47.div`
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 `;
-var ConnectionDescription = styled11.p`
+var ConnectionDescription = styled47.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 = styled11.button`
+var GoogleButton = styled47.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
   font-size: ${tokens.typography.fontSize.sm};
@@ -3083,7 +3136,7 @@ function PaneMenus({
     /* @__PURE__ */ jsx(TabPanel, { state }, state.selectedItem?.key)
   ] });
 }
-var Container8 = styled11.header`
+var Container8 = styled47.header`
   position: relative;
   width: 100%;
   height: 56px;
@@ -3146,7 +3199,7 @@ var Container8 = styled11.header`
     background-color: ${tokens.colors.backdrop};
   }
 `;
-var BrandLogo = styled11.img`
+var BrandLogo = styled47.img`
   position: relative;
   z-index: 1;
   max-height: 28px;
@@ -3161,7 +3214,7 @@ var BrandLogo = styled11.img`
     max-height: 32px;
   }
 `;
-var SettingsButton = styled11.button`
+var SettingsButton = styled47.button`
   position: absolute;
   top: 50%;
   right: ${tokens.spacing.md};
@@ -3215,7 +3268,7 @@ var SettingsButton = styled11.button`
     right: ${tokens.spacing.lg};
   }
 `;
-var BackButton2 = styled11.button`
+var BackButton2 = styled47.button`
   position: absolute;
   top: 50%;
   left: ${tokens.spacing.md};
@@ -3322,7 +3375,7 @@ function PaneSectionHeader({
   ] });
 }
 PaneSectionHeader.displayName = "PaneSectionHeader";
-var Container9 = styled11.button`
+var Container9 = styled47.button`
   /* Base button styling */
   width: 48px;
   height: 48px;
@@ -3371,7 +3424,7 @@ var Container9 = styled11.button`
     cursor: not-allowed;
   }
 `;
-var LogoImage = styled11.img`
+var LogoImage = styled47.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -3390,7 +3443,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
   return /* @__PURE__ */ jsx(Container9, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
 }
 ServiceIcon.displayName = "ServiceIcon";
-var NotificationCardContainer = styled11.div`
+var NotificationCardContainer = styled47.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3401,7 +3454,7 @@ var NotificationCardContainer = styled11.div`
   box-shadow: ${tokens.shadows.card};
   gap: ${tokens.spacing.md};
 `;
-var SectionHeader = styled11.button`
+var SectionHeader = styled47.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3427,7 +3480,7 @@ var SectionHeader = styled11.button`
     border-radius: ${tokens.borderRadius.md};
   }
 `;
-var ChevronIcon2 = styled11.span`
+var ChevronIcon2 = styled47.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3445,14 +3498,14 @@ var ChevronIcon2 = styled11.span`
     height: 16px;
   }
 `;
-var SectionContent = styled11.div`
+var SectionContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding-left: 0;
   margin-top: ${tokens.spacing.xs};
 `;
-var NotificationItemWrapper = styled11.button`
+var NotificationItemWrapper = styled47.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -3489,7 +3542,7 @@ var NotificationItemWrapper = styled11.button`
     opacity: 0.5;
   }
 `;
-var ItemIcon2 = styled11.span`
+var ItemIcon2 = styled47.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3514,7 +3567,7 @@ var ItemIcon2 = styled11.span`
     padding: ${tokens.spacing.xs};
   `}
 `;
-var ItemText = styled11.span`
+var ItemText = styled47.span`
   flex: 1;
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 15px;
@@ -3523,7 +3576,7 @@ var ItemText = styled11.span`
   line-height: ${tokens.typography.lineHeight.normal};
   word-wrap: break-word;
 `;
-var MenuButton = styled11.button`
+var MenuButton = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3733,7 +3786,7 @@ var NotificationItemComponent = ({
   );
 };
 NotificationCard.displayName = "NotificationCard";
-var StyledUserMessage = styled11.button`
+var StyledUserMessage = styled47.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -3748,6 +3801,7 @@ var StyledUserMessage = styled11.button`
   user-select: none;
   white-space: pre-wrap;
   word-wrap: break-word;
+  word-break: break-word;
   position: relative;
   text-align: left;
 
@@ -3921,12 +3975,23 @@ var darkTheme = {
   breakpoints: tokens.breakpoints
 };
 var GlobalStyle = createGlobalStyle`
+  /* Universal tap highlight removal - nuclear option for Android WebKit */
+  * {
+    -webkit-tap-highlight-color: transparent !important;
+  }
+
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
 
+  html {
+    /* Ensure tap highlight is disabled at root level */
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
   body {
     margin: 0;
     padding: 0;
@@ -3935,10 +4000,34 @@ var GlobalStyle = createGlobalStyle`
     background-color: ${({ theme }) => theme.colors.surface};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    /* Disable tap highlight on body as well */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Remove mobile tap highlight for ALL interactive elements */
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  label,
+  [role="button"],
+  [role="link"],
+  [role="tab"],
+  [role="menuitem"],
+  [role="option"],
+  [tabindex]:not([tabindex="-1"]),
+  [onclick] {
+    -webkit-tap-highlight-color: transparent !important;
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
   }
 
   button {
     font-family: inherit;
+    /* Prevent text selection flash on tap */
+    user-select: none;
+    -webkit-user-select: none;
   }
 `;
 
@@ -4037,7 +4126,7 @@ var ConnectionStatusBadge = ({
   );
 };
 ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
-var Badge = styled11.span`
+var Badge = styled47.span`
   display: inline-flex;
   align-items: center;
   padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -4073,7 +4162,7 @@ var IntegrationCard = ({
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
-var Card = styled11.div`
+var Card = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4093,11 +4182,11 @@ var Card = styled11.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var StatusRow = styled11.div`
+var StatusRow = styled47.div`
   display: flex;
   align-items: center;
 `;
-var ContentHeader = styled11.div`
+var ContentHeader = styled47.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -4106,7 +4195,7 @@ var ContentHeader = styled11.div`
     gap: ${tokens.spacing.xs};
   }
 `;
-var IconWrapper3 = styled11.div`
+var IconWrapper3 = styled47.div`
   width: 40px;
   height: 40px;
   display: flex;
@@ -4116,32 +4205,32 @@ var IconWrapper3 = styled11.div`
   background: ${tokens.colors.background.light};
   flex-shrink: 0;
 `;
-var IconImage = styled11.img`
+var IconImage = styled47.img`
   width: 24px;
   height: 24px;
   object-fit: contain;
 `;
-var Info = styled11.div`
+var Info = styled47.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   flex: 1;
 `;
-var Name = styled11.h3`
+var Name = styled47.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 = styled11.p`
+var Description = styled47.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ActionsRow = styled11.div`
+var ActionsRow = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -4199,13 +4288,13 @@ var SecretInput = ({
   ] });
 };
 SecretInput.displayName = "SecretInput";
-var Container10 = styled11.div`
+var Container10 = styled47.div`
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 `;
-var Input = styled11.input`
+var Input = styled47.input`
   width: 100%;
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   padding-right: 40px;
@@ -4231,7 +4320,7 @@ var Input = styled11.input`
     cursor: not-allowed;
   }
 `;
-var VisibilityToggle = styled11.button`
+var VisibilityToggle = styled47.button`
   position: absolute;
   right: ${tokens.spacing.sm};
   top: 50%;
@@ -4348,7 +4437,7 @@ var sizeStyles = {
     height: 44px;
   `
 };
-var StyledButton = styled11.button`
+var StyledButton = styled47.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -4431,7 +4520,7 @@ function Button2({
   );
 }
 Button2.displayName = "Button";
-var ActionsContainer = styled11.div`
+var ActionsContainer = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
@@ -4491,7 +4580,7 @@ var blink = keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled11.div`
+var ResponseContainer = styled47.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -4503,13 +4592,13 @@ var ResponseContainer = styled11.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots2 = styled11.div`
+var LoadingDots2 = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled11.span`
+var Dot2 = styled47.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -4517,7 +4606,7 @@ var Dot2 = styled11.span`
   animation: ${dotPulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled11.div`
+var TypingIndicator = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4530,14 +4619,14 @@ var TypingIndicator = styled11.div`
     animation: ${dotPulse2} 1.4s ease-in-out infinite;
   }
 `;
-var Message2 = styled11.span`
+var Message2 = styled47.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 StreamingText = styled11.div`
+var StreamingText = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -4609,7 +4698,7 @@ var shake = keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled11.div`
+var AgentStateContainer = styled47.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -4623,35 +4712,35 @@ var AgentStateContainer = styled11.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled11.div`
+var StateContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled11.div`
+var IdleIndicator = styled47.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 = styled11.div`
+var ErrorIndicator = styled47.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 = styled11.span`
+var StateLabel = styled47.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;
 `;
-styled11.p`
+styled47.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -4659,7 +4748,7 @@ styled11.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled11.div`
+var ProgressBar = styled47.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -4667,7 +4756,7 @@ var ProgressBar = styled11.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill = styled11.div`
+var ProgressBarFill = styled47.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%);
@@ -4696,7 +4785,7 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var FooterContainer = styled11.footer`
+var FooterContainer = styled47.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4705,7 +4794,7 @@ var FooterContainer = styled11.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled11.div`
+var FooterContent = styled47.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4718,13 +4807,13 @@ var FooterContent = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled11.div`
+var FooterBranding = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled11.div`
+var FooterStatus = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -4734,7 +4823,7 @@ var FooterStatus = styled11.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled11.a`
+var FooterLink = styled47.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -4792,7 +4881,7 @@ var pulse2 = keyframes`
     transform: scale(1.1);
   }
 `;
-var Container11 = styled11.div`
+var Container11 = styled47.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -4808,7 +4897,7 @@ var Container11 = styled11.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled11.div`
+var StatusDot = styled47.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -4869,7 +4958,7 @@ var StatusDot = styled11.div`
   animation: ${(props) => props.status === "streaming" ? pulse2 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled11.span`
+var Label = styled47.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -4896,7 +4985,7 @@ var Label = styled11.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled11.div`
+var BadgeContainer = styled47.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -4973,7 +5062,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsx(Container11, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled11.header`
+var HeaderContainer = styled47.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4989,14 +5078,14 @@ var HeaderContainer = styled11.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled11.div`
+var HeaderContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled11.h1`
+var HeaderTitle = styled47.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -5007,7 +5096,7 @@ var HeaderTitle = styled11.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled11.p`
+var HeaderSubtitle = styled47.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -5017,13 +5106,13 @@ var HeaderSubtitle = styled11.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled11.div`
+var HeaderActions = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton2 = styled11.button`
+var ActionButton2 = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5140,13 +5229,13 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var InputContainer = styled11.div`
+var InputContainer = styled47.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper2 = styled11.div`
+var InputWrapper2 = styled47.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -5166,7 +5255,7 @@ var InputWrapper2 = styled11.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled11.textarea`
+var TextArea = styled47.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -5212,7 +5301,7 @@ var TextArea = styled11.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled11.button`
+var SendButton = styled47.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -5342,8 +5431,8 @@ var Input2 = ({
     )
   ] }) });
 };
-var Container12 = styled11.div`
-  font-family: ${(props) => props.variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
+var Container12 = styled47.div`
+  font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5351,7 +5440,7 @@ var Container12 = styled11.div`
   text-rendering: optimizeSpeed;
   contain: content;
 `;
-var Cursor = styled11.span`
+var Cursor = styled47.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -5375,17 +5464,15 @@ var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
-  // Not used - streaming shows chunks as they arrive
+  // Reserved for future use
   cursor = true,
   variant = "default",
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = useState(content);
   const wasStreamingRef = useRef(isStreaming);
   const completionCalledRef = useRef(false);
   useEffect(() => {
-    setDisplayedText(content);
     if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
       completionCalledRef.current = true;
       onStreamComplete?.();
@@ -5394,45 +5481,48 @@ var StreamingTextBase = ({
       completionCalledRef.current = false;
     }
     wasStreamingRef.current = isStreaming;
-  }, [content, isStreaming, onStreamComplete]);
+  }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
-  return /* @__PURE__ */ jsxs(Container12, { variant, className, children: [
-    displayedText,
+  return /* @__PURE__ */ jsxs(Container12, { $variant: variant, className, children: [
+    content,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
 };
 var StreamingText2 = memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
-var MessageContainer = styled11.div`
+var MessageContainer = styled47.div`
   display: flex;
-  gap: ${tokens.spacing.sm};
-  align-items: flex-start;
-  padding: ${tokens.spacing.sm} 0;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} 0;
   max-width: 100%;
   /* GPU acceleration hint for smooth rendering during streaming */
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled11.div`
+var AvatarContainer = styled47.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled11.img`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var Avatar2 = styled47.img`
+  width: 20px;
+  height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled11.div`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var AvatarInitials = styled47.div`
+  width: 20px;
+  height: 20px;
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: ${tokens.colors.secondary};
-  padding: ${tokens.spacing.xs};
+  padding: 2px;
   box-sizing: border-box;
 
   img {
@@ -5441,16 +5531,20 @@ var AvatarInitials = styled11.div`
     object-fit: contain;
   }
 `;
-var ContentContainer = styled11.div`
-  flex: 1;
+var AvatarLabel = styled47.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+`;
+var ContentContainer = styled47.div`
+  width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled11.div`
+var MessageContent = styled47.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
-  border-top-left-radius: ${tokens.borderRadius.sm};
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5460,14 +5554,13 @@ var MessageContent = styled11.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots3 = styled11.div`
+var LoadingDots3 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.xs};
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: ${tokens.spacing.sm};
   /* Use solid color instead of backdrop-filter for performance */
   background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
-  border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
 var pulse3 = keyframes`
@@ -5478,7 +5571,7 @@ var pulse3 = keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled11.div`
+var LoadingDot = styled47.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -5487,7 +5580,7 @@ var LoadingDot = styled11.div`
   animation: ${pulse3} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled11.div`
+var FileAttachmentContainer = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -5523,7 +5616,7 @@ var FileAttachmentContainer = styled11.div`
     }
   `}
 `;
-var FileIconContainer = styled11.div`
+var FileIconContainer = styled47.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -5533,14 +5626,14 @@ var FileIconContainer = styled11.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled11.div`
+var FileInfo = styled47.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled11.div`
+var FileTitle = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -5550,7 +5643,7 @@ var FileTitle = styled11.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled11.div`
+var FileMetadata = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5560,7 +5653,7 @@ var FileMetadata = styled11.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled11.span`
+var FileSubtitle = styled47.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -5616,13 +5709,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled11.div`
+var AttachmentsContainer = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton3 = styled11.button`
+var ActionButton3 = styled47.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5646,19 +5739,19 @@ var ActionButton3 = styled11.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer2 = styled11.div`
+var ActionsContainer2 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled11.time`
+var MessageTime = styled47.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled11.span`
+var StreamingIndicator = styled47.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -5722,13 +5815,16 @@ var AssistantMessageBase = ({
     ] });
   };
   return /* @__PURE__ */ jsxs(MessageContainer, { className, children: [
-    /* @__PURE__ */ jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }) }),
+    /* @__PURE__ */ jsxs(AvatarContainer, { children: [
+      avatarUrl ? /* @__PURE__ */ jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }),
+      /* @__PURE__ */ jsx(AvatarLabel, { children: "Assistant" })
+    ] }),
     /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
   ] });
 };
 var AssistantMessage = memo(AssistantMessageBase);
 AssistantMessage.displayName = "AssistantMessage";
-var MessagesContainer = styled11.div`
+var MessagesContainer = styled47.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -5740,18 +5836,14 @@ var MessagesContainer = styled11.div`
     ${tokens.colors.background.darker},
     ${tokens.colors.background.darkest}
   );
-  padding: ${tokens.spacing.sm};
-  gap: ${tokens.spacing.md};
+  /* Minimal horizontal padding to maximize message width */
+  padding: ${tokens.spacing.sm} ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
   box-sizing: border-box;
 
   /* Ensure proper scrolling behavior for child components */
   position: relative;
   min-height: 0;
-
-  /* Desktop padding */
-  @media (min-width: ${tokens.breakpoints.mobile}px) {
-    padding: ${tokens.spacing.md};
-  }
 `;
 var Messages = ({
   children,
@@ -5761,7 +5853,7 @@ var Messages = ({
   return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var MessagesListContainer = styled11.div`
+var MessagesListContainer = styled47.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -5801,7 +5893,7 @@ var MessagesListContainer = styled11.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled11.div`
+var MessagesListContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -5917,19 +6009,19 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled11.div`
+var StyledUserMessage2 = styled47.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
-  margin: ${tokens.spacing.sm} 0;
-  padding: 0 ${tokens.spacing.md};
+  margin: ${tokens.spacing.xs} 0;
+  padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled11.div`
+var MessageBubble = styled47.div`
   display: flex;
   flex-direction: column;
-  max-width: 70%;
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  max-width: 85%;
+  padding: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
 
   /* User message colors - dark blue from brand */
@@ -5952,7 +6044,7 @@ var MessageBubble = styled11.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled11.p`
+var MessageContent2 = styled47.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -5961,13 +6053,13 @@ var MessageContent2 = styled11.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled11.time`
+var MessageTime2 = styled47.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton4 = styled11.button`
+var ActionButton4 = styled47.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -5991,12 +6083,12 @@ var ActionButton4 = styled11.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled11.div`
+var ActionsContainer3 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var StreamingIndicator2 = styled11.span`
+var StreamingIndicator2 = styled47.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -6017,7 +6109,7 @@ var StreamingIndicator2 = styled11.span`
     }
   }
 `;
-var Avatar3 = styled11.img`
+var Avatar3 = styled47.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -6050,7 +6142,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled11.div`
+var ErrorContainer = styled47.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -6064,7 +6156,7 @@ var ErrorContainer = styled11.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled11.div`
+var IconContainer = styled47.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -6081,29 +6173,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
   }
 );
-var Content2 = styled11.div`
+var Content2 = styled47.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage = styled11.div`
+var ErrorMessage = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled11.div`
+var ErrorDetails = styled47.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled11.div`
+var Actions2 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button3 = styled11.button`
+var Button3 = styled47.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -6132,7 +6224,7 @@ var Button3 = styled11.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled11.button`
+var CloseButton = styled47.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -6191,7 +6283,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled11.div`
+var SuggestionsContainer = styled47.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -6224,7 +6316,7 @@ var SuggestionsContainer = styled11.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled11.button`
+var StyledSuggestion = styled47.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -6297,7 +6389,7 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
-var WindowContainer = styled11.div`
+var WindowContainer = styled47.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -6476,7 +6568,7 @@ function FacebookIcon({
   ) });
 }
 FacebookIcon.displayName = "FacebookIcon";
-var StyledIconWrapper = styled11.button`
+var StyledIconWrapper = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6746,7 +6838,7 @@ function InstagramIcon({
   ] });
 }
 InstagramIcon.displayName = "InstagramIcon";
-var StyledIconWrapper2 = styled11.button`
+var StyledIconWrapper2 = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6882,7 +6974,7 @@ function LinkedInIcon({
   return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
 }
 LinkedInIcon.displayName = "LinkedInIcon";
-var StyledIconWrapper3 = styled11.button`
+var StyledIconWrapper3 = styled47.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7519,7 +7611,7 @@ function WhatsAppIcon({
   );
 }
 WhatsAppIcon.displayName = "WhatsAppIcon";
-var StyledXIcon = styled11.svg`
+var StyledXIcon = styled47.svg`
   display: inline-block;
   vertical-align: middle;
   flex-shrink: 0;
@@ -7809,9 +7901,11 @@ var STATUS_CONFIG = {
 var PostApprovalControls = ({
   platform,
   originalContent,
+  editedContent,
   status,
   error,
   postId,
+  onSave,
   onApprove,
   onReject,
   isLoading = false,
@@ -7819,10 +7913,11 @@ var PostApprovalControls = ({
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
   const [isEditing, setIsEditing] = useState(false);
-  const [editContent, setEditContent] = useState(originalContent);
+  const [localEditContent, setLocalEditContent] = useState(editedContent ?? originalContent);
   const platformConfig = PLATFORM_CONFIGS[platform];
   const statusConfig = STATUS_CONFIG[status];
-  const currentCharCount = isEditing ? editContent.length : originalContent.length;
+  const currentContent = editedContent ?? originalContent;
+  const currentCharCount = isEditing ? localEditContent.length : currentContent.length;
   const charPercentage = useMemo(
     () => getCharacterLimitPercentage(platform, currentCharCount),
     [platform, currentCharCount]
@@ -7834,18 +7929,23 @@ var PostApprovalControls = ({
   const canTakeAction = status === "pending" || status === "edited";
   const isProcessing = status === "scheduling" || isLoading;
   const handleStartEdit = () => {
-    setEditContent(originalContent);
+    setLocalEditContent(currentContent);
     setIsEditing(true);
     setIsCollapsed(false);
   };
   const handleCancelEdit = () => {
     setIsEditing(false);
-    setEditContent(originalContent);
+    setLocalEditContent(currentContent);
+  };
+  const handleSave = () => {
+    onSave?.(localEditContent);
+    setIsEditing(false);
   };
   const handleApprove = () => {
-    onApprove(isEditing ? editContent : originalContent);
+    onApprove(isEditing ? localEditContent : currentContent);
     setIsEditing(false);
   };
+  const hasUnsavedChanges = isEditing && localEditContent !== currentContent;
   return /* @__PURE__ */ jsxs(Container13, { "data-testid": "post-approval-controls", children: [
     /* @__PURE__ */ jsxs(Header2, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
       /* @__PURE__ */ jsx(StatusBadge, { $color: statusConfig.color, children: statusConfig.label }),
@@ -7871,8 +7971,8 @@ var PostApprovalControls = ({
         /* @__PURE__ */ jsx(
           EditTextarea,
           {
-            value: editContent,
-            onChange: (e) => setEditContent(e.target.value),
+            value: localEditContent,
+            onChange: (e) => setLocalEditContent(e.target.value),
             placeholder: "Enter your post content...",
             $platformColor: platformConfig.color,
             disabled: isProcessing
@@ -7888,13 +7988,22 @@ var PostApprovalControls = ({
       ] }),
       /* @__PURE__ */ jsxs(Actions3, { children: [
         /* @__PURE__ */ jsx(ActionButton5, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
+        onSave && /* @__PURE__ */ jsx(
+          ActionButton5,
+          {
+            $variant: "save",
+            onClick: handleSave,
+            disabled: isProcessing || charPercentage > 100 || !hasUnsavedChanges,
+            children: isProcessing ? "Saving..." : "Save"
+          }
+        ),
         /* @__PURE__ */ jsx(
           ActionButton5,
           {
             $variant: "approve",
             onClick: handleApprove,
             disabled: isProcessing || charPercentage > 100,
-            children: isProcessing ? "Saving..." : "Save and Approve"
+            children: isProcessing ? "Processing..." : "Approve"
           }
         )
       ] })
@@ -7906,7 +8015,7 @@ var PostApprovalControls = ({
   ] });
 };
 PostApprovalControls.displayName = "PostApprovalControls";
-var Container13 = styled11.div`
+var Container13 = styled47.div`
   display: grid;
   gap: 0;
   background: ${tokens.colors.background.dark};
@@ -7916,7 +8025,7 @@ var Container13 = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header2 = styled11.div`
+var Header2 = styled47.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -7930,7 +8039,7 @@ var Header2 = styled11.div`
     background: ${tokens.colors.background.light};
   }
 `;
-var StatusBadge = styled11.span`
+var StatusBadge = styled47.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   font-size: ${tokens.typography.fontSize.xs};
@@ -7941,23 +8050,23 @@ var StatusBadge = styled11.span`
   color: ${({ $color }) => $color};
   white-space: nowrap;
 `;
-var MetaInfo = styled11.div`
+var MetaInfo = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   min-width: 0;
 `;
-var PostId = styled11.span`
+var PostId = styled47.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   font-family: ${tokens.typography.fontFamily.monospace};
 `;
-var ErrorText = styled11.span`
+var ErrorText = styled47.span`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.error};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CollapseIcon = styled11.span`
+var CollapseIcon = styled47.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.medium};
@@ -7967,17 +8076,17 @@ var CollapseIcon = styled11.span`
   align-items: center;
   justify-content: center;
 `;
-var Content3 = styled11.div`
+var Content3 = styled47.div`
   display: grid;
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.default};
 `;
-var EditSection = styled11.div`
+var EditSection = styled47.div`
   display: grid;
   gap: ${tokens.spacing.xs};
 `;
-var EditLabel = styled11.label`
+var EditLabel = styled47.label`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -7986,7 +8095,7 @@ var EditLabel = styled11.label`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var CharCount = styled11.span`
+var CharCount = styled47.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.semibold};
   font-family: ${tokens.typography.fontFamily.monospace};
@@ -7996,7 +8105,7 @@ var CharCount = styled11.span`
   return tokens.colors.success;
 }};
 `;
-var EditTextarea = styled11.textarea`
+var EditTextarea = styled47.textarea`
   width: 100%;
   min-height: 100px;
   padding: ${tokens.spacing.sm};
@@ -8026,14 +8135,14 @@ var EditTextarea = styled11.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var ProgressBar2 = styled11.div`
+var ProgressBar2 = styled47.div`
   width: 100%;
   height: 3px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressFill = styled11.div`
+var ProgressFill = styled47.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8044,12 +8153,12 @@ var ProgressFill = styled11.div`
   return tokens.colors.success;
 }};
 `;
-var Actions3 = styled11.div`
+var Actions3 = styled47.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   gap: ${tokens.spacing.sm};
 `;
-var ActionButton5 = styled11.button`
+var ActionButton5 = styled47.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   border-radius: ${tokens.borderRadius.md};
   font-size: ${tokens.typography.fontSize.sm};
@@ -8075,6 +8184,15 @@ var ActionButton5 = styled11.button`
             opacity: 0.9;
           }
         `;
+    case "save":
+      return `
+          background: ${tokens.colors.primary};
+          color: ${tokens.colors.text.primary};
+          &:hover:not(:disabled) {
+            background: ${tokens.colors.primary};
+            opacity: 0.9;
+          }
+        `;
     case "reject":
     case "cancel":
       return `
@@ -8188,7 +8306,7 @@ var fadeIn2 = keyframes`
     transform: translateY(0);
   }
 `;
-var CardContainer = styled11.div`
+var CardContainer = styled47.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.xl};
   padding: ${tokens.spacing.md};
@@ -8201,7 +8319,7 @@ var CardContainer = styled11.div`
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
   }
 `;
-var PlatformHeader = styled11.div`
+var PlatformHeader = styled47.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -8209,7 +8327,7 @@ var PlatformHeader = styled11.div`
   padding-bottom: ${tokens.spacing.sm};
   border-bottom: 1px solid ${tokens.colors.border.default};
 `;
-var PlatformIcon = styled11.span`
+var PlatformIcon = styled47.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8221,13 +8339,13 @@ var PlatformIcon = styled11.span`
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
 `;
-var PlatformName = styled11.span`
+var PlatformName = styled47.span`
   flex: 1;
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${tokens.colors.text.primary};
 `;
-var CharacterBadge = styled11.span`
+var CharacterBadge = styled47.span`
   padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
   font-size: 11px;
@@ -8239,10 +8357,10 @@ var CharacterBadge = styled11.span`
   return tokens.colors.success;
 }};
 `;
-var ContentSection = styled11.div`
+var ContentSection = styled47.div`
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PostContent = styled11.div`
+var PostContent = styled47.div`
   font-size: ${tokens.typography.fontSize.base};
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: 1.6;
@@ -8254,7 +8372,7 @@ var PostContent = styled11.div`
   /* Smooth fade-in animation when content appears */
   animation: ${fadeIn2} 0.4s ease-out;
 `;
-var PostContentEditable = styled11.textarea`
+var PostContentEditable = styled47.textarea`
   width: 100%;
   min-height: 180px;
   max-height: 300px;
@@ -8283,12 +8401,12 @@ var PostContentEditable = styled11.textarea`
     color: ${tokens.colors.text.tertiary};
   }
 `;
-var HashtagsContainer = styled11.div`
+var HashtagsContainer = styled47.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 `;
-var HashtagPill = styled11.span`
+var HashtagPill = styled47.span`
   display: inline-block;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
@@ -8305,17 +8423,17 @@ var HashtagPill = styled11.span`
     color: ${tokens.colors.primary};
   }
 `;
-var ProgressBarContainer = styled11.div`
+var ProgressBarContainer = styled47.div`
   margin-top: ${tokens.spacing.sm};
 `;
-var ProgressBarTrack = styled11.div`
+var ProgressBarTrack = styled47.div`
   width: 100%;
   height: 4px;
   background: ${tokens.colors.border.default};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
 `;
-var ProgressBarFill2 = styled11.div`
+var ProgressBarFill2 = styled47.div`
   width: ${({ $percentage }) => $percentage}%;
   height: 100%;
   border-radius: ${tokens.borderRadius.sm};
@@ -8326,20 +8444,20 @@ var ProgressBarFill2 = styled11.div`
   return tokens.colors.success;
 }};
 `;
-var ImagePreviewContainer = styled11.div`
+var ImagePreviewContainer = styled47.div`
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
   border: 1px solid ${tokens.colors.border.default};
 `;
-var ImagePreview = styled11.img`
+var ImagePreview = styled47.img`
   width: 100%;
   height: auto;
   max-height: 200px;
   object-fit: cover;
   display: block;
 `;
-var ImagePlaceholder = styled11.div`
+var ImagePlaceholder = styled47.div`
   width: 100%;
   height: 200px;
   background: linear-gradient(
@@ -8361,7 +8479,7 @@ var ImagePlaceholder = styled11.div`
   opacity: 0.8;
   margin-bottom: ${tokens.spacing.sm};
 `;
-var PlaceholderIcon = styled11.div`
+var PlaceholderIcon = styled47.div`
   width: 48px;
   height: 48px;
   border: 2px solid white;
@@ -8383,13 +8501,13 @@ var shimmer = keyframes`
     background-position: 200% 0;
   }
 `;
-var SkeletonContent = styled11.div`
+var SkeletonContent = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm} 0;
 `;
-var SkeletonLine = styled11.div`
+var SkeletonLine = styled47.div`
   height: 16px;
   width: ${({ $width }) => $width};
   background: linear-gradient(
@@ -8488,13 +8606,13 @@ var PlatformCarousel = ({
   ] });
 };
 PlatformCarousel.displayName = "PlatformCarousel";
-var CarouselContainer = styled11.div`
+var CarouselContainer = styled47.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: ${tokens.spacing.md};
 `;
-var TabsContainer = styled11.div`
+var TabsContainer = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
@@ -8508,7 +8626,7 @@ var TabsContainer = styled11.div`
     display: none;
   }
 `;
-var PlatformTab = styled11.button`
+var PlatformTab = styled47.button`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -8534,12 +8652,12 @@ var PlatformTab = styled11.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var PlatformIcon2 = styled11.span`
+var PlatformIcon2 = styled47.span`
   font-size: ${tokens.typography.fontSize.base};
   color: ${({ $platformColor }) => $platformColor};
   transition: color ${tokens.transitions.fast};
 `;
-var ContentContainer2 = styled11.div`
+var ContentContainer2 = styled47.div`
   position: relative;
   min-height: 200px;
   overflow: hidden;
@@ -8547,7 +8665,7 @@ var ContentContainer2 = styled11.div`
   padding: 0 ${tokens.spacing.xs};
   margin: 0 -${tokens.spacing.xs};
 `;
-var Slide = styled11.div`
+var Slide = styled47.div`
   position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
   top: 0;
   left: 0;
@@ -8558,13 +8676,13 @@ var Slide = styled11.div`
     transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
   pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
 `;
-var NavigationDotsContainer = styled11.div`
+var NavigationDotsContainer = styled47.div`
   display: flex;
   justify-content: center;
   gap: ${tokens.spacing.xs};
   padding: ${tokens.spacing.sm};
 `;
-var NavigationDot = styled11.button`
+var NavigationDot = styled47.button`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -8584,7 +8702,7 @@ var NavigationDot = styled11.button`
     box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
   }
 `;
-var EmptyState = styled11.div`
+var EmptyState = styled47.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8641,7 +8759,7 @@ var PlatformGrid = ({
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
-var Grid = styled11.div`
+var Grid = styled47.div`
   display: grid;
   gap: ${tokens.spacing.md};
   width: 100%;
@@ -8659,7 +8777,7 @@ var Grid = styled11.div`
     grid-template-columns: repeat(3, 1fr);
   }
 `;
-var GridCell = styled11.div`
+var GridCell = styled47.div`
   min-width: 0; /* Prevent grid blowout with long content */
   cursor: pointer;
   border-radius: ${tokens.borderRadius.lg};
@@ -8669,7 +8787,7 @@ var GridCell = styled11.div`
     transform: translateY(-2px);
   }
 `;
-var EmptyState2 = styled11.div`
+var EmptyState2 = styled47.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8678,17 +8796,17 @@ var EmptyState2 = styled11.div`
   border: 1px dashed ${tokens.colors.border.hover};
   border-radius: ${tokens.borderRadius.lg};
 `;
-var EmptyStateText = styled11.p`
+var EmptyStateText = styled47.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
 `;
-var Container14 = styled11.div`
+var Container14 = styled47.div`
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
-  padding: 1.5rem ${tokens.spacing.md} 0 ${tokens.spacing.md};
+  padding: 0;
   box-sizing: border-box;
   background: linear-gradient(
     180deg,
@@ -8697,7 +8815,7 @@ var Container14 = styled11.div`
   );
   overflow: auto;
 `;
-var Header3 = styled11.div`
+var Header3 = styled47.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8713,17 +8831,17 @@ var Header3 = styled11.div`
     position: absolute;
     left: 0;
     right: 0;
-    top: 87%;
-    height: 24px;
+    top: 100%;
+    height: 16px;
     background: linear-gradient(
       to bottom,
-      ${tokens.colors.backdrop} 100%,
-      rgba(255, 255, 255, 0)
+      ${tokens.colors.backdrop} 0%,
+      transparent 100%
     );
     pointer-events: none;
   }
 `;
-var Title = styled11.h2`
+var Title = styled47.h2`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -8733,12 +8851,12 @@ var Title = styled11.h2`
   text-overflow: ellipsis;
   min-width: 0;
 `;
-var ViewToggle = styled11.div`
+var ViewToggle = styled47.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var ToggleButton = styled11.button`
+var ToggleButton = styled47.button`
   padding: ${tokens.spacing.xs};
   width: 32px;
   height: 32px;
@@ -8766,15 +8884,16 @@ var ToggleButton = styled11.button`
     background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
   }
 `;
-var Content4 = styled11.div`
+var Content4 = styled47.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   /* Extra top padding to account for header fade overlay */
   padding-top: ${tokens.spacing.md};
 `;
-var EmptyState3 = styled11.div`
+var EmptyState3 = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8802,7 +8921,7 @@ var EmptyState3 = styled11.div`
     font-size: ${tokens.typography.fontSize.sm};
   }
 `;
-var PostCount = styled11.span`
+var PostCount = styled47.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -8897,176 +9016,1126 @@ var SocialMediaCanvas = ({
   ] });
 };
 SocialMediaCanvas.displayName = "SocialMediaCanvas";
-function formatNumber(num) {
-  if (num >= 1e6) {
-    return `${(num / 1e6).toFixed(1)}M`;
-  }
-  if (num >= 1e3) {
-    return `${(num / 1e3).toFixed(1)}K`;
+
+// src/components/social-media/redditEngagementConstants.ts
+var REDDIT_COLORS = {
+  orange: tokens.colors.platform.reddit,
+  darkGray: tokens.colors.background.darker};
+var SCORE_THRESHOLDS = {
+  excellent: { min: 8, max: 10, label: "Excellent", color: tokens.colors.success },
+  good: { min: 6, max: 7, label: "Good", color: tokens.colors.info },
+  moderate: { min: 4, max: 5, label: "Moderate", color: tokens.colors.warning },
+  low: { min: 1, max: 3, label: "Low", color: tokens.colors.error }
+};
+function getScoreConfig(score) {
+  if (score >= 8) return SCORE_THRESHOLDS.excellent;
+  if (score >= 6) return SCORE_THRESHOLDS.good;
+  if (score >= 4) return SCORE_THRESHOLDS.moderate;
+  return SCORE_THRESHOLDS.low;
+}
+function getScoreColor(score) {
+  return getScoreConfig(score).color;
+}
+function getScoreLabel(score) {
+  return getScoreConfig(score).label;
+}
+var TONE_CONFIG = {
+  casual: {
+    label: "Casual",
+    color: tokens.colors.accent,
+    icon: "/assets/icon-set/Icon-chat-1-fill.svg",
+    description: "Friendly, conversational tone"
+  },
+  professional: {
+    label: "Professional",
+    color: tokens.colors.info,
+    icon: "/assets/icon-set/Icon-briefcase-fill.svg",
+    description: "Business-appropriate, formal tone"
+  },
+  technical: {
+    label: "Technical",
+    color: tokens.colors.secondary,
+    icon: "/assets/icon-set/Icon-settings-3-fill.svg",
+    description: "Detail-oriented, expert tone"
+  },
+  supportive: {
+    label: "Supportive",
+    color: tokens.colors.success,
+    icon: "/assets/icon-set/Icon-p2p-fill.svg",
+    description: "Empathetic, helpful tone"
+  },
+  humorous: {
+    label: "Humorous",
+    color: tokens.colors.warning,
+    icon: "/assets/icon-set/Icon-emotion-happy-fill.svg",
+    description: "Light-hearted, witty tone"
   }
-  return num.toLocaleString();
+};
+function getToneConfig(tone) {
+  return TONE_CONFIG[tone];
+}
+({
+  pending: {
+    color: tokens.colors.warning},
+  posted: {
+    color: tokens.colors.success},
+  skipped: {
+    color: tokens.colors.text.tertiary},
+  expired: {
+    color: tokens.colors.error},
+  editing: {
+    color: tokens.colors.info}
+});
+var REDDIT_LIMITS = {
+  comment: 1e4};
+function getRedditCharPercentage(current, max = REDDIT_LIMITS.comment) {
+  return Math.min(100, current / max * 100);
+}
+function getRedditCharLimitColor(percentage) {
+  if (percentage > 100) return tokens.colors.error;
+  if (percentage > 90) return tokens.colors.warning;
+  if (percentage > 75) return tokens.colors.warning;
+  return tokens.colors.success;
+}
+var SUBREDDIT_COLORS = {
+  automation: tokens.colors.info,
+  n8n: tokens.colors.platform.reddit,
+  nocode: tokens.colors.success,
+  smallbusiness: tokens.colors.warning,
+  entrepreneur: tokens.colors.accent,
+  saas: tokens.colors.primary,
+  webdev: tokens.colors.secondary,
+  startups: tokens.colors.seaGreen
+};
+function getSubredditColor(subreddit) {
+  const lower = subreddit.toLowerCase();
+  return SUBREDDIT_COLORS[lower] || REDDIT_COLORS.orange;
 }
 function formatRelativeTime(timestamp) {
   const now = /* @__PURE__ */ new Date();
-  const then = new Date(timestamp);
-  const diffMs = now.getTime() - then.getTime();
+  const date = new Date(timestamp);
+  const diffMs = now.getTime() - date.getTime();
   const diffMins = Math.floor(diffMs / 6e4);
-  const diffHours = Math.floor(diffMs / 36e5);
-  const diffDays = Math.floor(diffMs / 864e5);
-  if (diffMins < 1) return "Just now";
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffMins < 1) return "just now";
   if (diffMins < 60) return `${diffMins}m ago`;
   if (diffHours < 24) return `${diffHours}h ago`;
-  return `${diffDays}d ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
 }
-function getUsageLevel(percentage) {
-  if (percentage >= 90) return "critical";
-  if (percentage >= 75) return "high";
-  if (percentage >= 50) return "medium";
-  return "low";
+function formatNumber(num) {
+  if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+  if (num >= 1e3) return `${(num / 1e3).toFixed(1)}k`;
+  return num.toString();
 }
-var usageLevelColors = {
-  low: tokens.colors.success,
-  medium: tokens.colors.warning,
-  high: "#ff8c00",
-  critical: tokens.colors.error
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + "...";
+}
+function getSubredditUrl(subreddit) {
+  return `https://www.reddit.com/r/${subreddit}`;
+}
+var SubredditBadge = ({
+  subreddit,
+  linked = true
+}) => {
+  const color = getSubredditColor(subreddit);
+  const content = /* @__PURE__ */ jsxs(SubredditBadgeContainer, { $color: color, children: [
+    "r/",
+    subreddit
+  ] });
+  if (linked) {
+    return /* @__PURE__ */ jsx(SubredditLink, { href: getSubredditUrl(subreddit), target: "_blank", rel: "noopener noreferrer", children: content });
+  }
+  return content;
 };
-var typeIcons = {
-  input: "\u2191",
-  output: "\u2193",
-  system: "\u2699"
+var EngagementScoreBadge = ({
+  score,
+  size = "md"
+}) => {
+  const color = getScoreColor(score);
+  const label = getScoreLabel(score);
+  return /* @__PURE__ */ jsxs(ScoreBadgeContainer, { $color: color, $size: size, children: [
+    /* @__PURE__ */ jsx(ScoreValue, { children: score }),
+    /* @__PURE__ */ jsx(ScoreMax, { children: "/10" }),
+    /* @__PURE__ */ jsx(ScoreLabel, { children: label })
+  ] });
 };
-var typeColors = {
-  input: tokens.colors.info,
-  output: tokens.colors.success,
-  system: tokens.colors.text.tertiary
+var ToneBadge = ({ tone }) => {
+  const config = getToneConfig(tone);
+  return /* @__PURE__ */ jsxs(ToneBadgeContainer, { $color: config.color, children: [
+    /* @__PURE__ */ jsx(ToneIcon, { src: config.icon, alt: "" }),
+    /* @__PURE__ */ jsx("span", { children: config.label })
+  ] });
 };
-function TokenUsageCard({
-  currentUsage,
-  maxLimit,
-  transactions,
-  periodLabel,
-  onViewAll,
-  className
-}) {
-  const percentage = useMemo(
-    () => Math.min(currentUsage / maxLimit * 100, 100),
-    [currentUsage, maxLimit]
+var PostStats = ({
+  score,
+  comments,
+  createdAt
+}) => /* @__PURE__ */ jsxs(StatsContainer, { children: [
+  /* @__PURE__ */ jsxs(StatItem, { children: [
+    /* @__PURE__ */ jsx(Icon2, { src: "/assets/icon-set/Icon-arrow-up-fill.svg", alt: "upvotes" }),
+    /* @__PURE__ */ jsx(StatValue, { children: formatNumber(score) })
+  ] }),
+  /* @__PURE__ */ jsx(StatDivider, { children: "\u2022" }),
+  /* @__PURE__ */ jsxs(StatItem, { children: [
+    /* @__PURE__ */ jsx(Icon2, { src: "/assets/icon-set/Icon-chat-1-fill.svg", alt: "comments" }),
+    /* @__PURE__ */ jsx(StatValue, { children: formatNumber(comments) })
+  ] }),
+  /* @__PURE__ */ jsx(StatDivider, { children: "\u2022" }),
+  /* @__PURE__ */ jsxs(StatItem, { children: [
+    /* @__PURE__ */ jsx(Icon2, { src: "/assets/icon-set/Icon-time-fill.svg", alt: "time" }),
+    /* @__PURE__ */ jsx(StatValue, { children: formatRelativeTime(createdAt) })
+  ] })
+] });
+var RedditOpportunityCard = ({
+  opportunity,
+  isActive = false,
+  isEditing = false,
+  editContent,
+  onContentChange,
+  isLoading = false,
+  condensed = false
+}) => {
+  const displayContent = isEditing && editContent !== void 0 ? editContent : opportunity.editedReply || opportunity.draftReply;
+  const charCount = displayContent.length;
+  const charPercentage = useMemo(
+    () => getRedditCharPercentage(charCount, REDDIT_LIMITS.comment),
+    [charCount]
   );
-  const usageLevel = useMemo(() => getUsageLevel(percentage), [percentage]);
-  return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
-    /* @__PURE__ */ jsxs(Header4, { children: [
-      /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
-      /* @__PURE__ */ jsx(Period, { children: periodLabel })
-    ] }),
-    /* @__PURE__ */ jsxs(UsageSection, { children: [
-      /* @__PURE__ */ jsxs(UsageStats, { children: [
-        /* @__PURE__ */ jsx(CurrentUsage, { children: formatNumber(currentUsage) }),
-        /* @__PURE__ */ jsx(UsageSeparator, { children: "/" }),
-        /* @__PURE__ */ jsx(MaxUsage, { children: formatNumber(maxLimit) })
-      ] }),
-      /* @__PURE__ */ jsx(ProgressContainer, { children: /* @__PURE__ */ jsx(ProgressBar3, { $percentage: percentage, $level: usageLevel }) }),
-      /* @__PURE__ */ jsxs(PercentageLabel, { $level: usageLevel, children: [
-        percentage.toFixed(1),
-        "% used"
-      ] })
-    ] }),
-    transactions.length > 0 && /* @__PURE__ */ jsxs(TransactionsSection, { children: [
-      /* @__PURE__ */ jsx(TransactionsHeader, { children: "Recent Activity" }),
-      /* @__PURE__ */ jsx(TransactionsList, { children: transactions.slice(0, 5).map((transaction) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
-        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: typeIcons[transaction.type] }),
-        /* @__PURE__ */ jsxs(TransactionInfo, { children: [
-          /* @__PURE__ */ jsx(TransactionDescription, { children: transaction.description }),
-          /* @__PURE__ */ jsxs(TransactionMeta, { children: [
-            transaction.source && /* @__PURE__ */ jsx("span", { children: transaction.source }),
-            /* @__PURE__ */ jsx("span", { children: formatRelativeTime(transaction.timestamp) })
+  const charLimitColor = useMemo(
+    () => getRedditCharLimitColor(charPercentage),
+    [charPercentage]
+  );
+  const handleContentChange = (e) => {
+    onContentChange?.(e.target.value);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(CardContainer2, { $isActive: false, $isEditing: false, children: /* @__PURE__ */ jsxs(SkeletonContent2, { children: [
+      /* @__PURE__ */ jsx(SkeletonLine2, { $width: "40%" }),
+      /* @__PURE__ */ jsx(SkeletonLine2, { $width: "90%" }),
+      /* @__PURE__ */ jsx(SkeletonLine2, { $width: "75%" }),
+      /* @__PURE__ */ jsx(SkeletonLine2, { $width: "60%" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    CardContainer2,
+    {
+      $isActive: isActive,
+      $isEditing: isEditing,
+      "data-testid": "reddit-opportunity-card",
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsxs(HeaderLeft, { children: [
+            /* @__PURE__ */ jsx(SubredditBadge, { subreddit: opportunity.subreddit }),
+            /* @__PURE__ */ jsx(EngagementScoreBadge, { score: opportunity.engagementScore, size: "md" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            PostStats,
+            {
+              score: opportunity.postScore,
+              comments: opportunity.postNumComments,
+              createdAt: opportunity.postCreatedAt
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(PostPreviewSection, { $condensed: condensed, children: [
+          /* @__PURE__ */ jsxs(PostTitle, { href: opportunity.postUrl, target: "_blank", rel: "noopener noreferrer", children: [
+            opportunity.title,
+            /* @__PURE__ */ jsx(ExternalLinkIcon, { children: "\u2192" })
+          ] }),
+          !condensed && opportunity.postContent && /* @__PURE__ */ jsx(PostContent2, { children: truncateText(opportunity.postContent, 300) }),
+          /* @__PURE__ */ jsxs(PostAuthor, { children: [
+            "Posted by u/",
+            opportunity.postAuthor,
+            opportunity.flair && /* @__PURE__ */ jsx(PostFlair, { children: opportunity.flair })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(TransactionTokens, { $type: transaction.type, children: [
-          transaction.type === "output" ? "+" : "",
-          formatNumber(transaction.tokens)
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(ReplySection, { children: [
+          /* @__PURE__ */ jsxs(ReplySectionHeader, { children: [
+            /* @__PURE__ */ jsx(ReplyLabel, { children: "Your Draft Reply" }),
+            /* @__PURE__ */ jsxs(ReplyMeta, { children: [
+              /* @__PURE__ */ jsx(ToneBadge, { tone: opportunity.toneMatch }),
+              /* @__PURE__ */ jsxs(CharacterCount, { $color: charLimitColor, children: [
+                charCount,
+                "/",
+                REDDIT_LIMITS.comment
+              ] })
+            ] })
+          ] }),
+          isEditing ? /* @__PURE__ */ jsx(
+            ReplyTextarea,
+            {
+              value: displayContent,
+              onChange: handleContentChange,
+              placeholder: "Write your reply...",
+              autoFocus: true
+            }
+          ) : /* @__PURE__ */ jsx(ReplyContent, { children: displayContent }),
+          /* @__PURE__ */ jsxs(StrategyHint, { children: [
+            /* @__PURE__ */ jsx(StrategyIconImg, { src: "/assets/icon-set/Icon-lightbulb-fill.svg", alt: "" }),
+            /* @__PURE__ */ jsxs(StrategyText, { children: [
+              "Strategy: ",
+              opportunity.strategy
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ProgressBarContainer2, { children: /* @__PURE__ */ jsx(ProgressBarTrack2, { children: /* @__PURE__ */ jsx(
+            ProgressBarFill3,
+            {
+              $percentage: Math.min(charPercentage, 100),
+              $color: charLimitColor
+            }
+          ) }) })
         ] })
-      ] }, transaction.id)) })
-    ] }),
-    transactions.length === 0 && /* @__PURE__ */ jsx(EmptyState4, { children: "No recent activity" }),
-    onViewAll && transactions.length > 0 && /* @__PURE__ */ jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
-  ] });
-}
-var Card2 = styled11.div`
-  display: flex;
-  flex-direction: column;
-  background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.xl};
-  border: 1px solid ${tokens.colors.border.default};
-  overflow: hidden;
-`;
-var Header4 = styled11.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-  background: ${tokens.colors.background.darker};
-  border-bottom: 1px solid ${tokens.colors.border.default};
-  min-height: 48px;
+      ]
+    }
+  );
+};
+RedditOpportunityCard.displayName = "RedditOpportunityCard";
+var fadeIn3 = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 `;
-var Title2 = styled11.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 shimmer2 = keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 `;
-var Period = styled11.span`
-  font-size: ${tokens.typography.fontSize.sm};
+var Icon2 = styled47.img`
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+  opacity: 0.8;
+`;
+var CardContainer2 = styled47.div`
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.xl};
+  padding: ${tokens.spacing.lg};
+  position: relative;
+  transition: all ${tokens.transitions.normal};
+  border: 1px solid ${({ $isActive, $isEditing }) => $isEditing ? REDDIT_COLORS.orange : $isActive ? REDDIT_COLORS.orange : tokens.colors.border.default};
+  box-shadow: ${({ $isActive, $isEditing }) => $isEditing || $isActive ? `${tokens.shadows.lg}, 0 0 20px ${REDDIT_COLORS.orange}40` : tokens.shadows.md};
+  animation: ${fadeIn3} 0.4s ease-out;
+
+  &:hover {
+    border-color: ${REDDIT_COLORS.orange}80;
+  }
+
+  @media (max-width: 480px) {
+    padding: ${tokens.spacing.md};
+  }
+`;
+var CardHeader = styled47.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${tokens.spacing.md};
+  flex-wrap: wrap;
+  gap: ${tokens.spacing.sm};
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+var HeaderLeft = styled47.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+`;
+var SubredditBadgeContainer = styled47.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.full};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  background: ${({ $color }) => `${$color}20`};
+  color: ${({ $color }) => $color};
+  border: 1px solid ${({ $color }) => `${$color}40`};
+  transition: all ${tokens.transitions.fast};
+`;
+var SubredditLink = styled47.a`
+  text-decoration: none;
+
+  &:hover ${SubredditBadgeContainer} {
+    background: ${tokens.colors.surface.overlayHover};
+  }
+`;
+var ScoreBadgeContainer = styled47.div`
+  display: flex;
+  align-items: baseline;
+  gap: ${tokens.spacing.xs};
+  padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} ${tokens.spacing.sm}` : $size === "lg" ? `${tokens.spacing.sm} ${tokens.spacing.md}` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
+  border-radius: ${tokens.borderRadius.md};
+  background: ${({ $color }) => `${$color}20`};
+  border: 1px solid ${({ $color }) => `${$color}40`};
+`;
+var ScoreValue = styled47.span`
+  font-size: ${tokens.typography.fontSize.lg};
+  font-weight: ${tokens.typography.fontWeight.bold};
+  color: ${tokens.colors.text.primary};
+`;
+var ScoreMax = styled47.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  color: ${tokens.colors.text.tertiary};
+`;
+var ScoreLabel = styled47.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 = styled47.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+`;
+var StatItem = styled47.span`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+`;
+var StatValue = styled47.span`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.secondary};
+`;
+var StatDivider = styled47.span`
+  color: ${tokens.colors.text.tertiary};
+`;
+var PostPreviewSection = styled47.div`
+  margin-bottom: ${tokens.spacing.md};
+`;
+var PostTitle = styled47.a`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.xs};
+  font-size: ${tokens.typography.fontSize.lg};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  color: ${tokens.colors.text.primary};
+  text-decoration: none;
+  line-height: ${tokens.typography.lineHeight.tight};
+  margin-bottom: ${tokens.spacing.sm};
+
+  &:hover {
+    color: ${tokens.colors.primary};
+  }
+`;
+var ExternalLinkIcon = styled47.span`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.tertiary};
+  flex-shrink: 0;
+`;
+var PostContent2 = styled47.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 = styled47.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.tertiary};
+`;
+var PostFlair = styled47.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 = styled47.hr`
+  border: none;
+  height: 1px;
+  background: ${tokens.colors.border.default};
+  margin: ${tokens.spacing.md} 0;
+`;
+var ReplySection = styled47.div``;
+var ReplySectionHeader = styled47.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${tokens.spacing.sm};
+`;
+var ReplyLabel = styled47.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 = styled47.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+`;
+var ToneBadgeContainer = styled47.span`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
+  border-radius: ${tokens.borderRadius.sm};
+  font-size: ${tokens.typography.fontSize.xs};
+  background: ${({ $color }) => `${$color}20`};
+  color: ${({ $color }) => $color};
+`;
+var ToneIcon = styled47.img`
+  width: 12px;
+  height: 12px;
+`;
+var CharacterCount = styled47.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-family: ${tokens.typography.fontFamily.monospace};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${({ $color }) => $color};
+`;
+var ReplyContent = styled47.div`
+  font-size: ${tokens.typography.fontSize.base};
+  line-height: ${tokens.typography.lineHeight.relaxed};
+  color: ${tokens.colors.text.primary};
+  white-space: pre-wrap;
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.background.darker};
+  border-radius: ${tokens.borderRadius.sm};
+  border: 1px solid ${tokens.colors.border.default};
+  margin-bottom: ${tokens.spacing.sm};
+  min-height: 100px;
+  animation: ${fadeIn3} 0.3s ease-out;
+`;
+var ReplyTextarea = styled47.textarea`
+  width: 100%;
+  min-height: 150px;
+  max-height: 400px;
+  font-size: ${tokens.typography.fontSize.base};
+  font-family: ${tokens.typography.fontFamily.primary};
+  line-height: ${tokens.typography.lineHeight.relaxed};
+  color: ${tokens.colors.text.primary};
+  background: ${tokens.colors.background.darker};
+  border: 1px solid ${tokens.colors.primary};
+  border-radius: ${tokens.borderRadius.sm};
+  padding: ${tokens.spacing.md};
+  margin-bottom: ${tokens.spacing.sm};
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px ${tokens.colors.primary}30;
+  }
+
+  &::placeholder {
+    color: ${tokens.colors.text.tertiary};
+  }
+`;
+var StrategyHint = styled47.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.sm};
+  background: ${tokens.colors.surface.overlay};
+  border-radius: ${tokens.borderRadius.sm};
+  margin-bottom: ${tokens.spacing.sm};
+`;
+var StrategyIconImg = styled47.img`
+  width: 16px;
+  height: 16px;
+  opacity: 0.8;
+`;
+var StrategyText = styled47.span`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.secondary};
+  font-style: italic;
+`;
+var ProgressBarContainer2 = styled47.div`
+  margin-top: ${tokens.spacing.xs};
+`;
+var ProgressBarTrack2 = styled47.div`
+  width: 100%;
+  height: 4px;
+  background: ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.sm};
+  overflow: hidden;
+`;
+var ProgressBarFill3 = styled47.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 = styled47.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md};
+`;
+var SkeletonLine2 = styled47.div`
+  height: 16px;
+  width: ${({ $width }) => $width};
+  background: linear-gradient(
+    90deg,
+    ${tokens.colors.border.default} 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    ${tokens.colors.border.default} 100%
+  );
+  background-size: 200% 100%;
+  border-radius: ${tokens.borderRadius.sm};
+  animation: ${shimmer2} 1.5s ease-in-out infinite;
+`;
+var RedditEngagementControls = ({
+  opportunity,
+  currentReply,
+  isEditing,
+  onToggleEdit,
+  onSaveEdit,
+  onCancelEdit,
+  onCopyAndOpen,
+  onMarkPosted,
+  onSkip,
+  onRegenerate,
+  isLoading = false,
+  justCopied = false
+}) => {
+  const [showRegenerateInput, setShowRegenerateInput] = useState(false);
+  const [regenerateFeedback, setRegenerateFeedback] = useState("");
+  const [copiedFeedback, setCopiedFeedback] = useState(false);
+  const handleCopyAndOpen = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(currentReply);
+      setCopiedFeedback(true);
+      setTimeout(() => setCopiedFeedback(false), 2e3);
+      onCopyAndOpen();
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, [currentReply, onCopyAndOpen]);
+  const handleSkip = useCallback(() => {
+    onSkip();
+  }, [onSkip]);
+  const handleRegenerate = useCallback(() => {
+    if (showRegenerateInput) {
+      onRegenerate(regenerateFeedback || void 0);
+      setRegenerateFeedback("");
+      setShowRegenerateInput(false);
+    } else {
+      setShowRegenerateInput(true);
+    }
+  }, [showRegenerateInput, regenerateFeedback, onRegenerate]);
+  const isPending = opportunity.status === "pending" || opportunity.status === "editing";
+  return /* @__PURE__ */ jsxs(ControlsContainer, { "data-testid": "reddit-engagement-controls", children: [
+    isEditing && /* @__PURE__ */ jsxs(EditModeSection, { children: [
+      /* @__PURE__ */ jsxs(EditModeLabel, { children: [
+        /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-edit-fill.svg", alt: "" }),
+        " Editing Mode"
+      ] }),
+      /* @__PURE__ */ jsxs(EditModeActions, { children: [
+        /* @__PURE__ */ jsx(ActionButton6, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          ActionButton6,
+          {
+            $variant: "save",
+            onClick: () => onSaveEdit(currentReply),
+            disabled: isLoading,
+            children: "Save Changes"
+          }
+        )
+      ] })
+    ] }),
+    showRegenerateInput && !isEditing && /* @__PURE__ */ jsxs(InputSection, { children: [
+      /* @__PURE__ */ jsx(InputLabel, { children: "What should be different?" }),
+      /* @__PURE__ */ jsxs(InputRow, { children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: regenerateFeedback,
+            onChange: (e) => setRegenerateFeedback(e.target.value),
+            placeholder: "Make it more casual, add specific example...",
+            onKeyDown: (e) => e.key === "Enter" && handleRegenerate()
+          }
+        ),
+        /* @__PURE__ */ jsx(SmallButton, { onClick: () => setShowRegenerateInput(false), children: "\xD7" })
+      ] })
+    ] }),
+    !isEditing && isPending && /* @__PURE__ */ jsxs(MainActions, { children: [
+      /* @__PURE__ */ jsxs(SecondaryActions, { children: [
+        /* @__PURE__ */ jsxs(
+          ActionButton6,
+          {
+            $variant: "tertiary",
+            onClick: handleRegenerate,
+            disabled: isLoading,
+            title: "Generate a new reply",
+            children: [
+              /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-refresh-fill.svg", alt: "" }),
+              showRegenerateInput ? "Confirm" : "Regenerate"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton6,
+          {
+            $variant: "edit",
+            onClick: onToggleEdit,
+            disabled: isLoading,
+            title: "Edit the draft reply",
+            children: [
+              /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-edit-fill.svg", alt: "" }),
+              "Edit"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton6,
+          {
+            $variant: "skip",
+            onClick: handleSkip,
+            disabled: isLoading,
+            title: "Skip this opportunity",
+            children: [
+              /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-skip-forward-fill.svg", alt: "" }),
+              "Skip"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(PrimaryActions, { children: [
+        /* @__PURE__ */ jsxs(
+          ActionButton6,
+          {
+            $variant: "primary",
+            onClick: handleCopyAndOpen,
+            disabled: isLoading,
+            $pulse: !justCopied && !copiedFeedback,
+            title: "Copy reply and open post in new tab",
+            children: [
+              copiedFeedback ? /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-check-fill.svg", alt: "" }) : /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-clipboard-fill.svg", alt: "" }),
+              copiedFeedback ? "Copied!" : "Copy & Open"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionButton6,
+          {
+            $variant: "success",
+            onClick: onMarkPosted,
+            disabled: isLoading || !justCopied && !copiedFeedback,
+            title: "Mark as posted after you've replied",
+            children: [
+              /* @__PURE__ */ jsx(Icon3, { src: "/assets/icon-set/Icon-check-fill.svg", alt: "" }),
+              "Mark as Posted"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+RedditEngagementControls.displayName = "RedditEngagementControls";
+var pulse4 = keyframes`
+  0%, 100% {
+    box-shadow: 0 0 0 0 ${tokens.colors.primary}66;
+  }
+  50% {
+    box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
+  }
+`;
+var ControlsContainer = styled47.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md};
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  border: 1px solid ${tokens.colors.border.default};
+`;
+var EditModeSection = styled47.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.status.editing}20;
+  border: 1px solid ${tokens.colors.status.editing}40;
+  border-radius: ${tokens.borderRadius.md};
+`;
+var EditModeLabel = styled47.span`
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.status.editing};
+`;
+var EditModeActions = styled47.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+`;
+var InputSection = styled47.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+`;
+var InputLabel = styled47.label`
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.secondary};
+`;
+var InputRow = styled47.div`
+  display: flex;
+  gap: ${tokens.spacing.xs};
+  flex-wrap: wrap;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+  }
+`;
+var TextInput = styled47.input`
+  flex: 1;
+  min-width: 0;
+  padding: ${tokens.spacing.sm};
+  font-size: ${tokens.typography.fontSize.sm};
+  color: ${tokens.colors.text.primary};
+  background: ${tokens.colors.background.darker};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.md};
+  transition: border-color ${tokens.transitions.fast};
+
+  &:focus {
+    outline: none;
+    border-color: ${tokens.colors.primary};
+  }
+
+  &::placeholder {
+    color: ${tokens.colors.text.tertiary};
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+`;
+var SmallButton = styled47.button`
+  padding: ${tokens.spacing.sm};
+  font-size: ${tokens.typography.fontSize.base};
+  color: ${tokens.colors.text.tertiary};
+  background: transparent;
+  border: none;
+  border-radius: ${tokens.borderRadius.md};
+  cursor: pointer;
+  transition: all ${tokens.transitions.fast};
+
+  &:hover {
+    color: ${tokens.colors.text.primary};
+    background: ${tokens.colors.surface.overlay};
+  }
+`;
+var MainActions = styled47.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.md};
+`;
+var SecondaryActions = styled47.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+  flex-wrap: wrap;
+
+  @media (max-width: 480px) {
+    & > * {
+      flex: 1 1 100%;
+    }
+  }
+`;
+var PrimaryActions = styled47.div`
+  display: flex;
+  gap: ${tokens.spacing.sm};
+  flex-wrap: wrap;
+
+  @media (max-width: 480px) {
+    & > * {
+      flex: 1 1 100%;
+    }
+  }
+`;
+var Icon3 = styled47.img`
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+`;
+var ActionButton6 = styled47.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  border-radius: ${tokens.borderRadius.md};
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  cursor: pointer;
+  transition: all ${tokens.transitions.fast};
+  border: none;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 100px;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  ${({ $variant }) => {
+  switch ($variant) {
+    case "primary":
+      return css`
+          background: ${tokens.colors.primary};
+          color: white;
+          &:hover:not(:disabled) {
+            opacity: 0.9;
+          }
+          ${Icon3} {
+            filter: brightness(0) saturate(100%) invert(100%);
+          }
+        `;
+    case "success":
+      return css`
+          background: ${tokens.colors.success};
+          color: white;
+          &:hover:not(:disabled) {
+            opacity: 0.9;
+          }
+          ${Icon3} {
+            filter: brightness(0) saturate(100%) invert(100%);
+          }
+        `;
+    case "skip":
+      return css`
+          background: transparent;
+          color: ${tokens.colors.text.secondary};
+          border: 1px solid ${tokens.colors.border.default};
+          &:hover:not(:disabled) {
+            background: ${tokens.colors.surface.overlay};
+            border-color: ${tokens.colors.border.hover};
+          }
+        `;
+    case "edit":
+      return css`
+          background: ${tokens.colors.status.editing}20;
+          color: ${tokens.colors.status.editing};
+          border: 1px solid ${tokens.colors.status.editing}40;
+          &:hover:not(:disabled) {
+            background: ${tokens.colors.status.editing}30;
+          }
+        `;
+    case "tertiary":
+      return css`
+          background: transparent;
+          color: ${tokens.colors.accent};
+          border: 1px solid ${tokens.colors.accent}40;
+          &:hover:not(:disabled) {
+            background: ${tokens.colors.accent}20;
+          }
+        `;
+    case "cancel":
+      return css`
+          background: ${tokens.colors.error}15;
+          color: ${tokens.colors.error};
+          border: 1px solid ${tokens.colors.error}30;
+          &:hover:not(:disabled) {
+            background: ${tokens.colors.error}25;
+          }
+        `;
+    case "save":
+      return css`
+          background: ${tokens.colors.success};
+          color: white;
+          &:hover:not(:disabled) {
+            opacity: 0.9;
+          }
+        `;
+    default:
+      return "";
+  }
+}}
+
+  ${({ $pulse }) => $pulse && css`
+      animation: ${pulse4} 2s ease-in-out infinite;
+    `}
+`;
+function formatNumber2(num) {
+  if (num >= 1e6) {
+    return `${(num / 1e6).toFixed(1)}M`;
+  }
+  if (num >= 1e3) {
+    return `${(num / 1e3).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+}
+function formatRelativeTime2(timestamp) {
+  const now = /* @__PURE__ */ new Date();
+  const then = new Date(timestamp);
+  const diffMs = now.getTime() - then.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
+function getUsageLevel(percentage) {
+  if (percentage >= 90) return "critical";
+  if (percentage >= 75) return "high";
+  if (percentage >= 50) return "medium";
+  return "low";
+}
+var usageLevelColors = {
+  low: tokens.colors.success,
+  medium: tokens.colors.warning,
+  high: "#ff8c00",
+  critical: tokens.colors.error
+};
+var typeIcons = {
+  input: "\u2191",
+  output: "\u2193",
+  system: "\u2699"
+};
+var typeColors = {
+  input: tokens.colors.info,
+  output: tokens.colors.success,
+  system: tokens.colors.text.tertiary
+};
+function TokenUsageCard({
+  currentUsage,
+  maxLimit,
+  transactions,
+  periodLabel,
+  onViewAll,
+  className
+}) {
+  const percentage = useMemo(
+    () => Math.min(currentUsage / maxLimit * 100, 100),
+    [currentUsage, maxLimit]
+  );
+  const usageLevel = useMemo(() => getUsageLevel(percentage), [percentage]);
+  return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
+    /* @__PURE__ */ jsxs(Header4, { children: [
+      /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
+      /* @__PURE__ */ jsx(Period, { children: periodLabel })
+    ] }),
+    /* @__PURE__ */ jsxs(UsageSection, { children: [
+      /* @__PURE__ */ jsxs(UsageStats, { children: [
+        /* @__PURE__ */ jsx(CurrentUsage, { children: formatNumber2(currentUsage) }),
+        /* @__PURE__ */ jsx(UsageSeparator, { children: "/" }),
+        /* @__PURE__ */ jsx(MaxUsage, { children: formatNumber2(maxLimit) })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressContainer, { children: /* @__PURE__ */ jsx(ProgressBar3, { $percentage: percentage, $level: usageLevel }) }),
+      /* @__PURE__ */ jsxs(PercentageLabel, { $level: usageLevel, children: [
+        percentage.toFixed(1),
+        "% used"
+      ] })
+    ] }),
+    transactions.length > 0 && /* @__PURE__ */ jsxs(TransactionsSection, { children: [
+      /* @__PURE__ */ jsx(TransactionsHeader, { children: "Recent Activity" }),
+      /* @__PURE__ */ jsx(TransactionsList, { children: transactions.slice(0, 5).map((transaction) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
+        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: typeIcons[transaction.type] }),
+        /* @__PURE__ */ jsxs(TransactionInfo, { children: [
+          /* @__PURE__ */ jsx(TransactionDescription, { children: transaction.description }),
+          /* @__PURE__ */ jsxs(TransactionMeta, { children: [
+            transaction.source && /* @__PURE__ */ jsx("span", { children: transaction.source }),
+            /* @__PURE__ */ jsx("span", { children: formatRelativeTime2(transaction.timestamp) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(TransactionTokens, { $type: transaction.type, children: [
+          transaction.type === "output" ? "+" : "",
+          formatNumber2(transaction.tokens)
+        ] })
+      ] }, transaction.id)) })
+    ] }),
+    transactions.length === 0 && /* @__PURE__ */ jsx(EmptyState4, { children: "No recent activity" }),
+    onViewAll && transactions.length > 0 && /* @__PURE__ */ jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
+  ] });
+}
+var Card2 = styled47.div`
+  display: flex;
+  flex-direction: column;
+  background: ${tokens.colors.background.darker};
+  border-radius: ${tokens.borderRadius.xl};
+  border: 1px solid ${tokens.colors.border.default};
+  overflow: hidden;
+`;
+var Header4 = styled47.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  background: ${tokens.colors.background.darker};
+  border-bottom: 1px solid ${tokens.colors.border.default};
+  min-height: 48px;
+`;
+var Title2 = styled47.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 = styled47.span`
+  font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var UsageSection = styled11.div`
+var UsageSection = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
 `;
-var UsageStats = styled11.div`
+var UsageStats = styled47.div`
   display: flex;
   align-items: baseline;
   gap: ${tokens.spacing.xs};
 `;
-var CurrentUsage = styled11.span`
+var CurrentUsage = styled47.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 = styled11.span`
+var UsageSeparator = styled47.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var MaxUsage = styled11.span`
+var MaxUsage = styled47.span`
   font-size: ${tokens.typography.fontSize.lg};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.secondary};
 `;
-var ProgressContainer = styled11.div`
+var ProgressContainer = styled47.div`
   width: 100%;
   height: 8px;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var ProgressBar3 = styled11.div`
+var ProgressBar3 = styled47.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 = styled11.span`
+var PercentageLabel = styled47.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $level }) => usageLevelColors[$level]};
 `;
-var TransactionsSection = styled11.div`
+var TransactionsSection = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -9074,19 +10143,19 @@ var TransactionsSection = styled11.div`
   padding-top: ${tokens.spacing.sm};
   border-top: 1px solid ${tokens.colors.border.subtle};
 `;
-var TransactionsHeader = styled11.h4`
+var TransactionsHeader = styled47.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 = styled11.div`
+var TransactionsList = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
 `;
-var TransactionItem = styled11.div`
+var TransactionItem = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -9094,7 +10163,7 @@ var TransactionItem = styled11.div`
   background: ${tokens.colors.background.darker};
   border-radius: ${tokens.borderRadius.sm};
 `;
-var TransactionIcon = styled11.span`
+var TransactionIcon = styled47.span`
   width: 24px;
   height: 24px;
   display: flex;
@@ -9105,11 +10174,11 @@ var TransactionIcon = styled11.span`
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.sm};
 `;
-var TransactionInfo = styled11.div`
+var TransactionInfo = styled47.div`
   flex: 1;
   min-width: 0;
 `;
-var TransactionDescription = styled11.div`
+var TransactionDescription = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.primary};
@@ -9117,27 +10186,27 @@ var TransactionDescription = styled11.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var TransactionMeta = styled11.div`
+var TransactionMeta = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   font-size: ${tokens.typography.fontSize.xs};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
 `;
-var TransactionTokens = styled11.span`
+var TransactionTokens = styled47.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $type }) => typeColors[$type]};
 `;
-var EmptyState4 = styled11.div`
+var EmptyState4 = styled47.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 = styled11.button`
+var ViewAllButton = styled47.button`
   margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   background: transparent;
@@ -9220,7 +10289,7 @@ var WorkflowCard = ({
   );
 };
 WorkflowCard.displayName = "WorkflowCard";
-var Card3 = styled11.button`
+var Card3 = styled47.button`
   display: grid;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
@@ -9252,7 +10321,7 @@ var Card3 = styled11.button`
     cursor: not-allowed;
   }
 `;
-var WorkflowName2 = styled11.h3`
+var WorkflowName2 = styled47.h3`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -9263,7 +10332,7 @@ var WorkflowName2 = styled11.h3`
   white-space: nowrap;
   min-width: 0;
 `;
-var Description2 = styled11.p`
+var Description2 = styled47.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
@@ -9275,7 +10344,7 @@ var Description2 = styled11.p`
   word-break: break-word;
   min-width: 0;
 `;
-var CardFooter = styled11.div`
+var CardFooter = styled47.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -9284,13 +10353,13 @@ var CardFooter = styled11.div`
   border-top: 1px solid ${tokens.colors.border.subtle};
   width: 100%;
 `;
-var IntegrationList = styled11.div`
+var IntegrationList = styled47.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var IntegrationIconWrapper = styled11.span`
+var IntegrationIconWrapper = styled47.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9312,12 +10381,12 @@ var IntegrationIconWrapper = styled11.span`
     }
   `}
 `;
-var IntegrationIcon = styled11.img`
+var IntegrationIcon = styled47.img`
   width: 16px;
   height: 16px;
   object-fit: contain;
 `;
-var Indicators = styled11.div`
+var Indicators = styled47.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -9325,7 +10394,7 @@ var Indicators = styled11.div`
   margin-left: auto;
   min-width: 0;
 `;
-var IndicatorPill = styled11.span`
+var IndicatorPill = styled47.span`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9334,14 +10403,14 @@ var IndicatorPill = styled11.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 = styled11.span`
+var IndicatorDot = styled47.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 = styled11.span`
+var IndicatorText = styled47.span`
   font-size: ${tokens.typography.fontSize.xs};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.secondary};
@@ -9352,7 +10421,7 @@ var severityColors = {
   warning: tokens.colors.warning,
   info: tokens.colors.info
 };
-var AlertContainer = styled11.div`
+var AlertContainer = styled47.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => {
@@ -9370,7 +10439,7 @@ var AlertContainer = styled11.div`
   max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ModalOverlay = styled11.div`
+var ModalOverlay = styled47.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -9383,53 +10452,53 @@ var ModalOverlay = styled11.div`
   z-index: ${tokens.zIndex.modal};
   padding: ${tokens.spacing.lg};
 `;
-var ModalContent = styled11.div`
+var ModalContent = styled47.div`
   background-color: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
   max-width: 500px;
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header5 = styled11.div`
+var Header5 = styled47.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
 `;
-var IconContainer2 = styled11.div`
+var IconContainer2 = styled47.div`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   color: ${(props) => severityColors[props.severity]};
 `;
-var Content5 = styled11.div`
+var Content5 = styled47.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var Title3 = styled11.div`
+var Title3 = styled47.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 = styled11.div`
+var ErrorMessage2 = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var ErrorCode = styled11.div`
+var ErrorCode = styled47.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 = styled11.div`
+var Timestamp = styled47.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Details = styled11.details`
+var Details = styled47.details`
   margin-top: ${tokens.spacing.md};
   cursor: pointer;
 
@@ -9452,12 +10521,12 @@ var Details = styled11.details`
     }
   }
 `;
-var DetailsIcon = styled11.span`
+var DetailsIcon = styled47.span`
   display: inline-block;
   transition: transform ${tokens.transitions.fast};
   transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
 `;
-var StackTrace = styled11.pre`
+var StackTrace = styled47.pre`
   margin: ${tokens.spacing.sm} 0 0 0;
   padding: ${tokens.spacing.md};
   background-color: ${tokens.colors.surface.subtle};
@@ -9470,12 +10539,12 @@ var StackTrace = styled11.pre`
   word-break: break-word;
   overflow-x: auto;
 `;
-var Actions4 = styled11.div`
+var Actions4 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.md};
 `;
-var Button4 = styled11.button`
+var Button4 = styled47.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -9504,7 +10573,7 @@ var Button4 = styled11.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton2 = styled11.button`
+var CloseButton2 = styled47.button`
   position: absolute;
   top: ${tokens.spacing.md};
   right: ${tokens.spacing.md};
@@ -9678,14 +10747,14 @@ var statusColors2 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var Container15 = styled11.div`
+var Container15 = styled47.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   width: 100%;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var ProgressMessage = styled11.div`
+var ProgressMessage = styled47.div`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -9700,13 +10769,13 @@ var ProgressMessage = styled11.div`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var ProgressInfo = styled11.div`
+var ProgressInfo = styled47.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: ${tokens.spacing.xs};
 `;
-var PercentageText = styled11.span`
+var PercentageText = styled47.span`
   font-size: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -9721,7 +10790,7 @@ var PercentageText = styled11.span`
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
 `;
-var LinearTrack = styled11.div`
+var LinearTrack = styled47.div`
   position: relative;
   width: 100%;
   height: ${(props) => {
@@ -9739,7 +10808,7 @@ var LinearTrack = styled11.div`
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
 `;
-var LinearFill = styled11.div`
+var LinearFill = styled47.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -9750,12 +10819,12 @@ var LinearFill = styled11.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 = styled11.div`
+var CircularContainer = styled47.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-var CircularSvg = styled11.svg`
+var CircularSvg = styled47.svg`
   width: ${(props) => {
   switch (props.size) {
     case "sm":
@@ -9791,12 +10860,12 @@ var getCircularSize = (size) => {
       return { radius: 26, strokeWidth: 4 };
   }
 };
-var CircularTrack = styled11.circle`
+var CircularTrack = styled47.circle`
   fill: none;
   stroke: ${tokens.colors.border.default};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
 `;
-var CircularFill = styled11.circle`
+var CircularFill = styled47.circle`
   fill: none;
   stroke: ${(props) => statusColors2[props.status]};
   stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -9814,7 +10883,7 @@ var CircularFill = styled11.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 = styled11.text`
+var CircularPercentage = styled47.text`
   fill: ${tokens.colors.text.primary};
   font-size: ${(props) => {
   switch (props.size) {
@@ -9915,7 +10984,7 @@ var WorkflowProgressBar = ({
   ] });
 };
 WorkflowProgressBar.displayName = "WorkflowProgressBar";
-var Panel = styled11.div`
+var Panel = styled47.div`
   display: flex;
   flex-direction: column;
   background-color: ${tokens.colors.surface.overlay};
@@ -9924,7 +10993,7 @@ var Panel = styled11.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header6 = styled11.div`
+var Header6 = styled47.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9938,7 +11007,7 @@ var Header6 = styled11.div`
     background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
   }
 `;
-var Title4 = styled11.div`
+var Title4 = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -9946,11 +11015,11 @@ var Title4 = styled11.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var Actions5 = styled11.div`
+var Actions5 = styled47.div`
   display: flex;
   gap: ${tokens.spacing.sm};
 `;
-var IconButton = styled11.button`
+var IconButton = styled47.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9979,7 +11048,7 @@ var IconButton = styled11.button`
     height: 16px;
   }
 `;
-var CollapseIcon2 = styled11.div`
+var CollapseIcon2 = styled47.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9992,7 +11061,7 @@ var CollapseIcon2 = styled11.div`
     height: 16px;
   }
 `;
-var Content6 = styled11.div`
+var Content6 = styled47.div`
   padding: ${tokens.spacing.md};
   max-height: ${(props) => {
   if (!props.expanded) return "0";
@@ -10020,7 +11089,7 @@ var Content6 = styled11.div`
     background: ${tokens.colors.scrollbar.thumbHover};
   }
 `;
-var JsonView = styled11.pre`
+var JsonView = styled47.pre`
   margin: 0;
   font-family: ${tokens.typography.fontFamily.monospace};
   font-size: ${tokens.typography.fontSize.sm};
@@ -10029,12 +11098,12 @@ var JsonView = styled11.pre`
   white-space: pre-wrap;
   word-break: break-word;
 `;
-var FormattedView = styled11.div`
+var FormattedView = styled47.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.secondary};
 `;
-var TableView = styled11.table`
+var TableView = styled47.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${tokens.typography.fontSize.sm};
@@ -10058,7 +11127,7 @@ var TableView = styled11.table`
     border-bottom: none;
   }
 `;
-var EmptyState5 = styled11.div`
+var EmptyState5 = styled47.div`
   padding: ${tokens.spacing.xl};
   text-align: center;
   color: ${tokens.colors.text.tertiary};
@@ -10139,7 +11208,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse4 = keyframes`
+var pulse5 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -10154,7 +11223,7 @@ var statusColors3 = {
   failed: tokens.colors.status.failed,
   timeout: tokens.colors.status.timeout
 };
-var BadgeContainer2 = styled11.div`
+var BadgeContainer2 = styled47.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -10208,7 +11277,7 @@ var BadgeContainer2 = styled11.div`
   color: ${(props) => statusColors3[props.$status]};
   line-height: 1.4;
 `;
-var IconContainer3 = styled11.div`
+var IconContainer3 = styled47.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10217,7 +11286,7 @@ var IconContainer3 = styled11.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse4;
+    if (props.$status === "pending") return pulse5;
   }
   return "none";
 }}
@@ -10287,7 +11356,7 @@ var TimeoutIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
   }
 );
-var Label2 = styled11.span`
+var Label2 = styled47.span`
   white-space: nowrap;
 `;
 var getDefaultLabel = (status) => {
@@ -10345,6 +11414,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
-export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditIcon, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
+export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map