@agentiffai/design 1.3.28 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/YouTubeIcon-C1e6LEOF.d.cts +398 -0
  2. package/dist/YouTubeIcon-C1e6LEOF.d.ts +398 -0
  3. package/dist/copilotkit/index.cjs +5 -41
  4. package/dist/copilotkit/index.cjs.map +1 -1
  5. package/dist/copilotkit/index.d.cts +1 -0
  6. package/dist/copilotkit/index.d.ts +1 -0
  7. package/dist/copilotkit/index.js +2 -41
  8. package/dist/copilotkit/index.js.map +1 -1
  9. package/dist/icons/index.cjs +1326 -3
  10. package/dist/icons/index.cjs.map +1 -1
  11. package/dist/icons/index.d.cts +136 -320
  12. package/dist/icons/index.d.ts +136 -320
  13. package/dist/icons/index.js +1311 -4
  14. package/dist/icons/index.js.map +1 -1
  15. package/dist/index.cjs +870 -612
  16. package/dist/index.cjs.map +1 -1
  17. package/dist/index.d.cts +34 -2
  18. package/dist/index.d.ts +34 -2
  19. package/dist/index.js +816 -559
  20. package/dist/index.js.map +1 -1
  21. package/dist/layout/index.cjs +1 -30
  22. package/dist/layout/index.cjs.map +1 -1
  23. package/dist/layout/index.js +1 -30
  24. package/dist/layout/index.js.map +1 -1
  25. package/dist/theme/index.cjs +24 -53
  26. package/dist/theme/index.cjs.map +1 -1
  27. package/dist/theme/index.d.cts +50 -5
  28. package/dist/theme/index.d.ts +50 -5
  29. package/dist/theme/index.js +24 -53
  30. package/dist/theme/index.js.map +1 -1
  31. package/dist/workflow/index.cjs +0 -26
  32. package/dist/workflow/index.cjs.map +1 -1
  33. package/dist/workflow/index.js +0 -26
  34. package/dist/workflow/index.js.map +1 -1
  35. package/package.json +7 -1
package/dist/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import React4, { memo, useRef, useEffect, useMemo, useState, useCallback, useId } from 'react';
2
- import styled57, { keyframes, css, createGlobalStyle } from 'styled-components';
2
+ import styled58, { keyframes, css, createGlobalStyle } from 'styled-components';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { useButton as useButton$1 } from 'react-aria';
5
5
  import { useButton } from '@react-aria/button';
6
6
  import { TagGroup, TagList, Tag, Button, TextField, DisclosureGroup, Disclosure, DisclosurePanel, Heading } from 'react-aria-components';
7
+ import { createPortal } from 'react-dom';
7
8
  import { useMeter } from '@react-aria/meter';
8
9
  import { useTabList, useTabPanel, useTab } from '@react-aria/tabs';
9
10
  import { Item } from '@react-stately/collections';
@@ -16,66 +17,44 @@ import { useTextField } from '@react-aria/textfield';
16
17
  // src/theme/tokens.ts
17
18
  var tokens = {
18
19
  colors: {
19
- // Brand colors
20
20
  primary: "#2CB0AB",
21
- // Teal (main brand color)
22
21
  secondary: "#264E68",
23
- // Deep Blue
24
22
  accent: "#459FB9",
25
- // Sky Blue
26
23
  seaGreen: "#4EB999",
27
- // Sea Green (additional brand color)
28
- // Backgrounds - dark theme optimized
29
24
  background: {
30
25
  darkest: "#0a1b2a",
31
- // Darkest Blue (brand color)
32
26
  darker: "#151a26",
33
- // Discord gray (preserved)
34
27
  dark: "#1b2230",
35
- // Discord surface gray (preserved)
36
28
  light: "#252d3d"
37
- // Discord border gray (preserved)
38
29
  },
39
- // Text hierarchy
40
30
  text: {
41
31
  primary: "#FFFFFF",
42
32
  secondary: "#B4B8C5",
43
33
  tertiary: "#9CA3AF",
44
34
  disabled: "#4B5563"
45
35
  },
46
- // Semantic colors
47
36
  success: "#2CB0AB",
48
- // Teal (brand aligned)
49
37
  error: "#EF4444",
50
38
  warning: "#F59E0B",
51
39
  info: "#459FB9",
52
- // Sky Blue (brand aligned)
53
- // Status colors (for workflow/SSE events)
54
40
  status: {
55
41
  pending: "#6B7280",
56
42
  editing: "#3B82F6",
57
43
  idle: "#6B7280",
58
44
  running: "#459FB9",
59
- // Sky Blue (brand aligned)
60
45
  completed: "#2CB0AB",
61
- // Teal (brand aligned)
62
46
  failed: "#EF4444",
63
47
  timeout: "#F59E0B",
64
- // Badge status (online/offline pattern)
65
48
  online: "#2CB0AB",
66
49
  offline: "#EF4444",
67
50
  busy: "#459FB9"
68
51
  },
69
- // Connection status
70
52
  connection: {
71
53
  connected: "#2CB0AB",
72
- // Teal (brand aligned)
73
54
  streaming: "#459FB9",
74
- // Sky Blue (brand aligned)
75
55
  disconnected: "#EF4444",
76
56
  reconnecting: "#F59E0B"
77
57
  },
78
- // Surface variants (for overlays, cards, panels)
79
58
  surface: {
80
59
  base: "#1b2230",
81
60
  elevated: "#252d3d",
@@ -86,40 +65,41 @@ var tokens = {
86
65
  glass: "rgba(255, 255, 255, 0.26)",
87
66
  glassBorder: "rgba(255, 255, 255, 0.3)"
88
67
  },
89
- // UI Element colors
90
68
  border: {
91
69
  default: "rgba(255, 255, 255, 0.1)",
92
70
  subtle: "rgba(255, 255, 255, 0.05)",
93
71
  hover: "rgba(255, 255, 255, 0.2)",
94
72
  focus: "#2CB0AB",
95
- // Teal (brand aligned)
96
73
  error: "#EF4444"
97
74
  },
98
- // Scrollbar colors
75
+ category: {
76
+ setup: "#459FB9",
77
+ integration: "#8B5CF6",
78
+ generation: "#2CB0AB",
79
+ image: "#EC4899",
80
+ scheduling: "#F59E0B",
81
+ completion: "#4EB999",
82
+ processing: "#459FB9",
83
+ custom: "#6B7280",
84
+ notion: "#6B7280"
85
+ },
99
86
  scrollbar: {
100
87
  track: "transparent",
101
88
  thumb: "rgba(255, 255, 255, 0.2)",
102
89
  thumbHover: "rgba(255, 255, 255, 0.3)"
103
90
  },
104
- // Message bubbles
105
91
  message: {
106
92
  user: "#264E68",
107
- // Deep Blue (brand color)
108
93
  ai: "#1b2230",
109
- // Dark background
110
94
  system: "#151a26"
111
- // Darker background
112
95
  },
113
- // Overlays and backdrops
114
96
  overlay: "rgba(0, 0, 0, 0.5)",
115
97
  backdrop: "rgba(27, 34, 48, 0.95)",
116
- // Icon colors
117
98
  icon: {
118
99
  default: "#B4B8C5",
119
100
  muted: "#6B7280",
120
101
  active: "#2CB0AB"
121
102
  },
122
- // Platform brand colors (for social media icons)
123
103
  platform: {
124
104
  facebook: "#1877F2",
125
105
  instagram: "#E4405F",
@@ -142,21 +122,13 @@ var tokens = {
142
122
  },
143
123
  fontSize: {
144
124
  xs: "0.875rem",
145
- // 14px (was 12px, increased for better readability)
146
125
  sm: "1rem",
147
- // 16px (was 14px, increased for better readability)
148
126
  base: "1.125rem",
149
- // 18px (was 16px, increased for better readability)
150
127
  lg: "1.125rem",
151
- // 18px (heading size, unchanged)
152
128
  xl: "1.25rem",
153
- // 20px (heading size, unchanged)
154
129
  "2xl": "1.5rem",
155
- // 24px (heading size, unchanged)
156
130
  "3xl": "1.875rem",
157
- // 30px (heading size, unchanged)
158
131
  "4xl": "2.25rem"
159
- // 36px (heading size, unchanged)
160
132
  },
161
133
  fontWeight: {
162
134
  light: 300,
@@ -173,34 +145,21 @@ var tokens = {
173
145
  },
174
146
  spacing: {
175
147
  xs: "0.25rem",
176
- // 4px
177
148
  sm: "0.5rem",
178
- // 8px
179
149
  md: "1rem",
180
- // 16px
181
150
  lg: "1.5rem",
182
- // 24px
183
151
  xl: "2rem",
184
- // 32px
185
152
  "2xl": "3rem",
186
- // 48px
187
153
  "3xl": "4rem"
188
- // 64px
189
154
  },
190
155
  borderRadius: {
191
156
  none: "0",
192
157
  sm: "0.25rem",
193
- // 4px
194
158
  md: "0.5rem",
195
- // 8px
196
159
  lg: "0.75rem",
197
- // 12px
198
160
  xl: "1rem",
199
- // 16px
200
161
  "2xl": "1.5rem",
201
- // 24px
202
162
  full: "9999px"
203
- // Fully rounded
204
163
  },
205
164
  shadows: {
206
165
  none: "none",
@@ -232,6 +191,19 @@ var tokens = {
232
191
  exit: "cubic-bezier(0.4, 0, 1, 1)",
233
192
  smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
234
193
  linear: "linear"
194
+ },
195
+ overlay: {
196
+ duration: "200ms",
197
+ easing: "cubic-bezier(0.4, 0, 0.2, 1)"
198
+ },
199
+ typewriter: {
200
+ speed: "50ms"
201
+ },
202
+ spinner: {
203
+ duration: "1000ms"
204
+ },
205
+ pulse: {
206
+ duration: "2000ms"
235
207
  }
236
208
  },
237
209
  zIndex: {
@@ -310,7 +282,7 @@ var getSizeValue = (size = "md") => {
310
282
  };
311
283
  }
312
284
  };
313
- var Container = styled57.div`
285
+ var Container = styled58.div`
314
286
  display: inline-flex;
315
287
  align-items: center;
316
288
  gap: ${tokens.spacing.md};
@@ -322,7 +294,7 @@ var Container = styled57.div`
322
294
  max-width: fit-content;
323
295
  margin: 0 auto;
324
296
  `;
325
- var Avatar = styled57.div`
297
+ var Avatar = styled58.div`
326
298
  width: ${(props) => getSizeValue(props.size).avatar};
327
299
  height: ${(props) => getSizeValue(props.size).avatar};
328
300
  border-radius: ${tokens.borderRadius.full};
@@ -333,23 +305,23 @@ var Avatar = styled57.div`
333
305
  flex-shrink: 0;
334
306
  box-shadow: ${tokens.shadows.glow.primary};
335
307
  `;
336
- var HeadphonesIcon = styled57.svg`
308
+ var HeadphonesIcon = styled58.svg`
337
309
  width: ${(props) => getSizeValue(props.size).icon};
338
310
  height: ${(props) => getSizeValue(props.size).icon};
339
311
  color: ${tokens.colors.text.primary};
340
312
  `;
341
- var Content = styled57.div`
313
+ var Content = styled58.div`
342
314
  display: flex;
343
315
  align-items: center;
344
316
  gap: ${tokens.spacing.sm};
345
317
  `;
346
- var LoadingDots = styled57.div`
318
+ var LoadingDots = styled58.div`
347
319
  display: flex;
348
320
  align-items: center;
349
321
  gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
350
322
  padding: 0 ${tokens.spacing.xs};
351
323
  `;
352
- var Dot = styled57.span`
324
+ var Dot = styled58.span`
353
325
  width: ${(props) => getSizeValue(props.size).dotSize};
354
326
  height: ${(props) => getSizeValue(props.size).dotSize};
355
327
  border-radius: ${tokens.borderRadius.full};
@@ -367,7 +339,7 @@ var Dot = styled57.span`
367
339
  }}
368
340
  1.4s ease-in-out infinite;
369
341
  `;
370
- var Message = styled57.span`
342
+ var Message = styled58.span`
371
343
  font-size: ${(props) => getSizeValue(props.size).fontSize};
372
344
  color: ${tokens.colors.text.secondary};
373
345
  font-weight: ${tokens.typography.fontWeight.regular};
@@ -427,7 +399,7 @@ function AssistantThinking({
427
399
  );
428
400
  }
429
401
  AssistantThinking.displayName = "AssistantThinking";
430
- var StyledContainer = styled57.div`
402
+ var StyledContainer = styled58.div`
431
403
  display: flex;
432
404
  width: 100%;
433
405
  height: 52px;
@@ -436,7 +408,7 @@ var StyledContainer = styled57.div`
436
408
  padding: ${tokens.spacing.xs};
437
409
  gap: ${tokens.spacing.xs};
438
410
  `;
439
- var StyledOption = styled57.button`
411
+ var StyledOption = styled58.button`
440
412
  flex: 1;
441
413
  height: 44px;
442
414
  background: ${({ $isActive }) => $isActive ? tokens.colors.primary : tokens.colors.background.light};
@@ -454,14 +426,14 @@ var StyledOption = styled57.button`
454
426
  opacity: 0.9;
455
427
  }
456
428
  `;
457
- var StyledLabel = styled57.span`
429
+ var StyledLabel = styled58.span`
458
430
  font-family: Inter, sans-serif;
459
431
  font-weight: ${tokens.typography.fontWeight.semibold};
460
432
  font-size: 14px;
461
433
  line-height: 1.5714285714285714em;
462
434
  color: ${tokens.colors.text.primary};
463
435
  `;
464
- var StyledBadge = styled57.span`
436
+ var StyledBadge = styled58.span`
465
437
  display: inline-flex;
466
438
  align-items: center;
467
439
  justify-content: center;
@@ -513,64 +485,64 @@ function BillingToggle({
513
485
  )
514
486
  ] });
515
487
  }
516
- var StyledCard = styled57.div`
488
+ var StyledCard = styled58.div`
517
489
  background: ${tokens.colors.background.dark};
518
490
  border-radius: ${tokens.borderRadius.md};
519
491
  width: 100%;
520
492
  padding: 10px 12px;
521
493
  position: relative;
522
494
  `;
523
- var StyledHeader = styled57.div`
495
+ var StyledHeader = styled58.div`
524
496
  display: flex;
525
497
  justify-content: space-between;
526
498
  align-items: center;
527
499
  margin-bottom: 2px;
528
500
  `;
529
- var StyledBadge2 = styled57.span`
501
+ var StyledBadge2 = styled58.span`
530
502
  font-weight: ${tokens.typography.fontWeight.semibold};
531
503
  font-size: 13px;
532
504
  line-height: 1.4;
533
505
  color: ${tokens.colors.primary};
534
506
  `;
535
- var StyledLabel2 = styled57.span`
507
+ var StyledLabel2 = styled58.span`
536
508
  font-weight: ${tokens.typography.fontWeight.bold};
537
509
  font-size: 14px;
538
510
  line-height: 1.4;
539
511
  color: ${tokens.colors.text.primary};
540
512
  `;
541
- var StyledDescription = styled57.p`
513
+ var StyledDescription = styled58.p`
542
514
  font-size: 12px;
543
515
  line-height: 1.4;
544
516
  color: ${tokens.colors.text.secondary};
545
517
  margin: 0 0 6px 0;
546
518
  `;
547
- var StyledDivider = styled57.div`
519
+ var StyledDivider = styled58.div`
548
520
  width: 100%;
549
521
  height: 1px;
550
522
  background: ${tokens.colors.border.default};
551
523
  margin-bottom: 6px;
552
524
  `;
553
- var StyledFooter = styled57.div`
525
+ var StyledFooter = styled58.div`
554
526
  display: flex;
555
527
  justify-content: space-between;
556
528
  align-items: center;
557
529
  `;
558
- var StyledCredits = styled57.div`
530
+ var StyledCredits = styled58.div`
559
531
  display: flex;
560
532
  align-items: center;
561
533
  gap: 6px;
562
534
  `;
563
- var StyledCheckIcon = styled57.svg`
535
+ var StyledCheckIcon = styled58.svg`
564
536
  width: 16px;
565
537
  height: 16px;
566
538
  flex-shrink: 0;
567
539
  `;
568
- var StyledCreditsText = styled57.span`
540
+ var StyledCreditsText = styled58.span`
569
541
  font-size: 13px;
570
542
  line-height: 1.4;
571
543
  color: ${tokens.colors.text.primary};
572
544
  `;
573
- var StyledExecutions = styled57.span`
545
+ var StyledExecutions = styled58.span`
574
546
  font-size: 11px;
575
547
  line-height: 1.4;
576
548
  color: ${tokens.colors.text.secondary};
@@ -614,7 +586,7 @@ function TrialPlanCard({
614
586
  ] })
615
587
  ] });
616
588
  }
617
- var ChatInputContainer = styled57.div`
589
+ var ChatInputContainer = styled58.div`
618
590
  display: flex;
619
591
  flex-direction: column;
620
592
  width: 100%;
@@ -630,7 +602,7 @@ var ChatInputContainer = styled57.div`
630
602
  padding: ${tokens.spacing.md};
631
603
  }
632
604
  `;
633
- var SuggestionsWrapper = styled57.div`
605
+ var SuggestionsWrapper = styled58.div`
634
606
  display: flex;
635
607
  flex-direction: row;
636
608
  flex-wrap: wrap;
@@ -639,7 +611,7 @@ var SuggestionsWrapper = styled57.div`
639
611
  width: 100%;
640
612
  box-sizing: border-box;
641
613
  `;
642
- var SuggestionButton = styled57.button`
614
+ var SuggestionButton = styled58.button`
643
615
  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
644
616
  font-family: ${tokens.typography.fontFamily.primary};
645
617
  font-size: 13px;
@@ -678,7 +650,7 @@ var SuggestionButton = styled57.button`
678
650
  opacity: 0.4;
679
651
  }
680
652
  `;
681
- var InputWrapper = styled57.div`
653
+ var InputWrapper = styled58.div`
682
654
  display: flex;
683
655
  align-items: flex-end; /* Align button to bottom when textarea expands */
684
656
  gap: ${tokens.spacing.sm};
@@ -696,7 +668,7 @@ var InputWrapper = styled57.div`
696
668
  background-color: rgba(50, 50, 52, 0.6);
697
669
  }
698
670
  `;
699
- var InputField = styled57.textarea`
671
+ var InputField = styled58.textarea`
700
672
  flex: 1;
701
673
  border: none;
702
674
  outline: none;
@@ -721,7 +693,7 @@ var InputField = styled57.textarea`
721
693
  cursor: not-allowed;
722
694
  }
723
695
  `;
724
- var SubmitButton = styled57.button`
696
+ var SubmitButton = styled58.button`
725
697
  display: flex;
726
698
  align-items: center;
727
699
  justify-content: center;
@@ -1043,30 +1015,30 @@ var TagInput = ({
1043
1015
  error && /* @__PURE__ */ jsx(ErrorMessage, { "data-testid": testId ? `${testId}-error` : void 0, children: error })
1044
1016
  ] });
1045
1017
  };
1046
- var Container2 = styled57.div`
1018
+ var Container2 = styled58.div`
1047
1019
  margin-bottom: ${tokens.spacing.md};
1048
1020
  `;
1049
- var LabelWrapper = styled57.div`
1021
+ var LabelWrapper = styled58.div`
1050
1022
  display: flex;
1051
1023
  align-items: center;
1052
1024
  margin-bottom: ${tokens.spacing.sm};
1053
1025
  `;
1054
- var StyledLabel3 = styled57.span`
1026
+ var StyledLabel3 = styled58.span`
1055
1027
  font-size: ${tokens.typography.fontSize.sm};
1056
1028
  font-weight: ${tokens.typography.fontWeight.semibold};
1057
1029
  color: ${tokens.colors.text.primary};
1058
1030
  `;
1059
- var Required = styled57.span`
1031
+ var Required = styled58.span`
1060
1032
  color: ${tokens.colors.error};
1061
1033
  margin-left: ${tokens.spacing.xs};
1062
1034
  `;
1063
- var Description = styled57.p`
1035
+ var Description = styled58.p`
1064
1036
  margin: ${tokens.spacing.xs} 0 ${tokens.spacing.sm} 0;
1065
1037
  font-size: ${tokens.typography.fontSize.xs};
1066
1038
  color: ${tokens.colors.text.tertiary};
1067
1039
  line-height: ${tokens.typography.lineHeight.normal};
1068
1040
  `;
1069
- var TagGroupContainer = styled57.div`
1041
+ var TagGroupContainer = styled58.div`
1070
1042
  display: flex;
1071
1043
  flex-wrap: wrap;
1072
1044
  align-items: flex-start;
@@ -1084,15 +1056,15 @@ var TagGroupContainer = styled57.div`
1084
1056
  border-color: ${(props) => props.$hasError ? tokens.colors.error : tokens.colors.border.focus};
1085
1057
  }
1086
1058
  `;
1087
- var StyledTagGroup = styled57(TagGroup)`
1059
+ var StyledTagGroup = styled58(TagGroup)`
1088
1060
  display: contents;
1089
1061
  `;
1090
- var StyledTagList = styled57(TagList)`
1062
+ var StyledTagList = styled58(TagList)`
1091
1063
  display: flex;
1092
1064
  flex-wrap: wrap;
1093
1065
  gap: ${tokens.spacing.xs};
1094
1066
  `;
1095
- var StyledTag = styled57(Tag)`
1067
+ var StyledTag = styled58(Tag)`
1096
1068
  display: inline-flex;
1097
1069
  align-items: center;
1098
1070
  gap: ${tokens.spacing.xs};
@@ -1119,13 +1091,13 @@ var StyledTag = styled57(Tag)`
1119
1091
  background: ${tokens.colors.accent}30;
1120
1092
  }
1121
1093
  `;
1122
- var TagText = styled57.span`
1094
+ var TagText = styled58.span`
1123
1095
  max-width: 150px;
1124
1096
  overflow: hidden;
1125
1097
  text-overflow: ellipsis;
1126
1098
  white-space: nowrap;
1127
1099
  `;
1128
- var RemoveButton = styled57(Button)`
1100
+ var RemoveButton = styled58(Button)`
1129
1101
  display: flex;
1130
1102
  align-items: center;
1131
1103
  justify-content: center;
@@ -1160,14 +1132,14 @@ var RemoveIcon = () => /* @__PURE__ */ jsx(
1160
1132
  children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
1161
1133
  }
1162
1134
  );
1163
- var InputWrapper2 = styled57.div`
1135
+ var InputWrapper2 = styled58.div`
1164
1136
  display: flex;
1165
1137
  align-items: center;
1166
1138
  gap: ${tokens.spacing.xs};
1167
1139
  flex: 1;
1168
1140
  min-width: 120px;
1169
1141
  `;
1170
- var StyledInput = styled57.input`
1142
+ var StyledInput = styled58.input`
1171
1143
  flex: 1;
1172
1144
  min-width: 80px;
1173
1145
  padding: ${tokens.spacing.xs} 0;
@@ -1191,7 +1163,7 @@ var StyledInput = styled57.input`
1191
1163
  cursor: not-allowed;
1192
1164
  }
1193
1165
  `;
1194
- var AddButton = styled57.button`
1166
+ var AddButton = styled58.button`
1195
1167
  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
1196
1168
  background: ${tokens.colors.accent};
1197
1169
  border: none;
@@ -1211,13 +1183,13 @@ var AddButton = styled57.button`
1211
1183
  cursor: not-allowed;
1212
1184
  }
1213
1185
  `;
1214
- var HintText = styled57.p`
1186
+ var HintText = styled58.p`
1215
1187
  margin: ${tokens.spacing.xs} 0 0 0;
1216
1188
  font-size: ${tokens.typography.fontSize.xs};
1217
1189
  color: ${(props) => props.$warning ? tokens.colors.warning : tokens.colors.text.tertiary};
1218
1190
  font-style: italic;
1219
1191
  `;
1220
- var ErrorMessage = styled57.div`
1192
+ var ErrorMessage = styled58.div`
1221
1193
  margin-top: ${tokens.spacing.xs};
1222
1194
  font-size: ${tokens.typography.fontSize.xs};
1223
1195
  color: ${tokens.colors.error};
@@ -1244,12 +1216,12 @@ var indeterminateAnimation = keyframes`
1244
1216
  right: -90%;
1245
1217
  }
1246
1218
  `;
1247
- var Container3 = styled57.div`
1219
+ var Container3 = styled58.div`
1248
1220
  padding: ${tokens.spacing.lg};
1249
1221
  width: 100%;
1250
1222
  box-sizing: border-box;
1251
1223
  `;
1252
- var SkeletonBox = styled57.div`
1224
+ var SkeletonBox = styled58.div`
1253
1225
  width: 100%;
1254
1226
  height: 200px;
1255
1227
  background: linear-gradient(
@@ -1262,10 +1234,10 @@ var SkeletonBox = styled57.div`
1262
1234
  animation: ${shimmer} 1.5s ease-in-out infinite;
1263
1235
  border-radius: ${tokens.borderRadius.md};
1264
1236
  `;
1265
- var ProgressSection = styled57.div`
1237
+ var ProgressSection = styled58.div`
1266
1238
  margin-top: ${tokens.spacing.md};
1267
1239
  `;
1268
- var ProgressBarContainer = styled57.div`
1240
+ var ProgressBarContainer = styled58.div`
1269
1241
  width: 100%;
1270
1242
  height: 4px;
1271
1243
  background: ${tokens.colors.background.dark};
@@ -1273,7 +1245,7 @@ var ProgressBarContainer = styled57.div`
1273
1245
  overflow: hidden;
1274
1246
  position: relative;
1275
1247
  `;
1276
- var ProgressBarFill = styled57.div`
1248
+ var ProgressBarFill = styled58.div`
1277
1249
  height: 100%;
1278
1250
  background: linear-gradient(
1279
1251
  90deg,
@@ -1291,12 +1263,12 @@ var ProgressBarFill = styled57.div`
1291
1263
  width: ${$percentage}%;
1292
1264
  `}
1293
1265
  `;
1294
- var ActivityText = styled57.div`
1266
+ var ActivityText = styled58.div`
1295
1267
  margin-top: ${tokens.spacing.sm};
1296
1268
  font-size: ${tokens.typography.fontSize.sm};
1297
1269
  color: ${tokens.colors.text.secondary};
1298
1270
  `;
1299
- var StepCounter = styled57.div`
1271
+ var StepCounter = styled58.div`
1300
1272
  margin-top: ${tokens.spacing.xs};
1301
1273
  font-size: ${tokens.typography.fontSize.xs};
1302
1274
  color: ${tokens.colors.text.tertiary};
@@ -1343,7 +1315,7 @@ function WorkflowLoadingSkeleton({
1343
1315
  ] })
1344
1316
  ] });
1345
1317
  }
1346
- var StyledButton = styled57.button`
1318
+ var StyledButton = styled58.button`
1347
1319
  min-height: 44px; /* Touch-friendly sizing for mobile */
1348
1320
  padding: 0.75rem 1.5rem;
1349
1321
  font-size: 1rem;
@@ -1410,7 +1382,7 @@ var StyledButton = styled57.button`
1410
1382
  font-size: 0.9375rem;
1411
1383
  }
1412
1384
  `;
1413
- var LoadingSpinner = styled57.span`
1385
+ var LoadingSpinner = styled58.span`
1414
1386
  display: inline-block;
1415
1387
  width: 16px;
1416
1388
  height: 16px;
@@ -1464,7 +1436,7 @@ var AuthButton = ({
1464
1436
  }
1465
1437
  );
1466
1438
  };
1467
- var StyledTextField = styled57(TextField)`
1439
+ var StyledTextField = styled58(TextField)`
1468
1440
  display: flex;
1469
1441
  flex-direction: column;
1470
1442
  margin-bottom: 0.25rem;
@@ -1537,11 +1509,11 @@ var StyledTextField = styled57(TextField)`
1537
1509
  }
1538
1510
  }
1539
1511
  `;
1540
- var ErrorMessageContainer = styled57.div`
1512
+ var ErrorMessageContainer = styled58.div`
1541
1513
  min-height: 1.25rem; /* Reserve space for error message to prevent shifting */
1542
1514
  margin-top: 0.375rem;
1543
1515
  `;
1544
- var ErrorMessage2 = styled57.span`
1516
+ var ErrorMessage2 = styled58.span`
1545
1517
  color: ${tokens.colors.error};
1546
1518
  font-size: 0.875rem;
1547
1519
  display: block;
@@ -1621,11 +1593,11 @@ var AuthInput = ({
1621
1593
  }
1622
1594
  );
1623
1595
  };
1624
- var PasswordContainer = styled57.div`
1596
+ var PasswordContainer = styled58.div`
1625
1597
  position: relative;
1626
1598
  width: 100%;
1627
1599
  `;
1628
- var ToggleButton = styled57.button`
1600
+ var ToggleButton = styled58.button`
1629
1601
  position: absolute;
1630
1602
  right: 0.5rem;
1631
1603
  top: calc(0.875rem + 1.5rem);
@@ -1663,7 +1635,7 @@ var ToggleButton = styled57.button`
1663
1635
  height: 20px;
1664
1636
  }
1665
1637
  `;
1666
- var HintText2 = styled57.span`
1638
+ var HintText2 = styled58.span`
1667
1639
  font-size: 0.75rem;
1668
1640
  color: rgba(255, 255, 255, 0.6);
1669
1641
  opacity: 0.8;
@@ -1738,32 +1710,37 @@ var SuccessToast = ({
1738
1710
  }
1739
1711
  }, [message, autoDismiss, autoDismissDelay, onDismiss]);
1740
1712
  if (!message) return null;
1741
- return /* @__PURE__ */ jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxs(ToastContent, { children: [
1742
- /* @__PURE__ */ jsx(CheckmarkIcon, { children: "\u2713" }),
1743
- /* @__PURE__ */ jsx(Message2, { "data-testid": "success-toast-message", children: message }),
1744
- /* @__PURE__ */ jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
1745
- ] }) });
1713
+ return createPortal(
1714
+ /* @__PURE__ */ jsx(ToastContainer, { "data-testid": "success-toast", children: /* @__PURE__ */ jsxs(ToastContent, { children: [
1715
+ /* @__PURE__ */ jsx(CheckmarkIcon, { children: "\u2713" }),
1716
+ /* @__PURE__ */ jsx(Message2, { "data-testid": "success-toast-message", children: message }),
1717
+ /* @__PURE__ */ jsx(DismissButton, { onClick: onDismiss, "aria-label": "Dismiss", children: "\xD7" })
1718
+ ] }) }),
1719
+ document.body
1720
+ );
1746
1721
  };
1747
- var ToastContainer = styled57.div`
1722
+ var ToastContainer = styled58.div`
1748
1723
  position: fixed;
1749
- top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px));
1724
+ top: calc(${tokens.spacing.md} + var(--safe-area-top, 0px));
1750
1725
  left: 50%;
1751
1726
  transform: translateX(-50%);
1752
- max-width: 340px;
1753
- background-color: ${tokens.colors.background.dark};
1727
+ min-width: min(400px, 90vw);
1728
+ max-width: min(600px, 95vw);
1729
+ background: ${tokens.colors.background.darker};
1754
1730
  border: 1px solid ${tokens.colors.border.default};
1755
- color: white;
1756
- border-radius: ${tokens.borderRadius.md};
1757
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
1758
- padding: ${tokens.spacing.sm} ${tokens.spacing.md};
1759
- z-index: ${tokens.zIndex.toast || 1e4};
1731
+ border-left: 3px solid ${tokens.colors.primary};
1732
+ color: ${tokens.colors.text.primary};
1733
+ border-radius: ${tokens.borderRadius.lg};
1734
+ box-shadow: ${tokens.shadows.xl};
1735
+ padding: ${tokens.spacing.md};
1736
+ z-index: ${tokens.zIndex.toast};
1760
1737
  font-family: ${tokens.typography.fontFamily.primary};
1761
- animation: slideDown 0.3s ease-out;
1738
+ animation: slideDown ${tokens.animation.duration.short} ${tokens.animation.easing.enter};
1762
1739
 
1763
1740
  @keyframes slideDown {
1764
1741
  from {
1765
1742
  opacity: 0;
1766
- transform: translateX(-50%) translateY(-12px);
1743
+ transform: translateX(-50%) translateY(-20px);
1767
1744
  }
1768
1745
  to {
1769
1746
  opacity: 1;
@@ -1772,27 +1749,28 @@ var ToastContainer = styled57.div`
1772
1749
  }
1773
1750
 
1774
1751
  @media (max-width: 640px) {
1775
- max-width: 85%;
1752
+ min-width: 90%;
1753
+ max-width: 90%;
1776
1754
  }
1777
1755
  `;
1778
- var ToastContent = styled57.div`
1756
+ var ToastContent = styled58.div`
1779
1757
  display: flex;
1780
1758
  align-items: center;
1781
- gap: ${tokens.spacing.sm};
1759
+ gap: ${tokens.spacing.md};
1782
1760
  `;
1783
- var CheckmarkIcon = styled57.span`
1761
+ var CheckmarkIcon = styled58.span`
1784
1762
  color: ${tokens.colors.primary};
1785
1763
  font-size: ${tokens.typography.fontSize.base};
1786
1764
  font-weight: ${tokens.typography.fontWeight.bold};
1787
1765
  flex-shrink: 0;
1788
1766
  `;
1789
- var Message2 = styled57.div`
1767
+ var Message2 = styled58.div`
1790
1768
  flex: 1;
1791
1769
  font-size: ${tokens.typography.fontSize.sm};
1792
1770
  font-weight: ${tokens.typography.fontWeight.medium};
1793
- line-height: ${tokens.typography.lineHeight.tight};
1771
+ line-height: ${tokens.typography.lineHeight.normal};
1794
1772
  `;
1795
- var DismissButton = styled57.button`
1773
+ var DismissButton = styled58.button`
1796
1774
  background: none;
1797
1775
  border: none;
1798
1776
  color: ${tokens.colors.text.tertiary};
@@ -1830,7 +1808,7 @@ var WarningIconSvg = () => /* @__PURE__ */ jsx(
1830
1808
  )
1831
1809
  }
1832
1810
  );
1833
- var BannerContainer = styled57.div`
1811
+ var BannerContainer = styled58.div`
1834
1812
  position: fixed;
1835
1813
  top: 0;
1836
1814
  left: 0;
@@ -1840,12 +1818,12 @@ var BannerContainer = styled57.div`
1840
1818
  pointer-events: ${(props) => props.$isVisible ? "auto" : "none"};
1841
1819
  transition: opacity 0.3s ease-in-out;
1842
1820
  `;
1843
- var StatusBarSpacer = styled57.div`
1821
+ var StatusBarSpacer = styled58.div`
1844
1822
  height: var(--safe-area-top, 0);
1845
1823
  background-color: ${tokens.colors.background.darkest}cc;
1846
1824
  backdrop-filter: blur(10px);
1847
1825
  `;
1848
- var MessageContainer = styled57.div`
1826
+ var MessageContainer = styled58.div`
1849
1827
  background-color: ${tokens.colors.background.darkest}d9;
1850
1828
  backdrop-filter: blur(10px);
1851
1829
  color: ${tokens.colors.text.primary};
@@ -1858,13 +1836,13 @@ var MessageContainer = styled57.div`
1858
1836
  font-weight: 500;
1859
1837
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
1860
1838
  `;
1861
- var WarningIcon = styled57.span`
1839
+ var WarningIcon = styled58.span`
1862
1840
  font-size: 18px;
1863
1841
  line-height: 1;
1864
1842
  display: flex;
1865
1843
  align-items: center;
1866
1844
  `;
1867
- var Message3 = styled57.span`
1845
+ var Message3 = styled58.span`
1868
1846
  line-height: 1.4;
1869
1847
  `;
1870
1848
  var ErrorBanner = ({
@@ -1880,7 +1858,182 @@ var ErrorBanner = ({
1880
1858
  ] })
1881
1859
  ] });
1882
1860
  };
1883
- var NavigationContainer = styled57.div`
1861
+ var ErrorToast = ({
1862
+ title,
1863
+ message,
1864
+ correlationId,
1865
+ accentColor = tokens.colors.error,
1866
+ icon,
1867
+ onDismiss,
1868
+ onRetry,
1869
+ onReconnect,
1870
+ onCopy,
1871
+ extraActions
1872
+ }) => {
1873
+ const [copied, setCopied] = useState(false);
1874
+ const handleCopy = async () => {
1875
+ if (!onCopy) return;
1876
+ const success = await onCopy();
1877
+ if (success) {
1878
+ setCopied(true);
1879
+ setTimeout(() => setCopied(false), 2e3);
1880
+ }
1881
+ };
1882
+ return createPortal(
1883
+ /* @__PURE__ */ jsxs(ToastContainer2, { $accentColor: accentColor, "data-testid": "error-toast", children: [
1884
+ /* @__PURE__ */ jsxs(ToastContent2, { children: [
1885
+ icon && /* @__PURE__ */ jsx(IconWrapper, { children: icon }),
1886
+ /* @__PURE__ */ jsxs(MessageWrapper, { children: [
1887
+ /* @__PURE__ */ jsx(CategoryLabel, { $accentColor: accentColor, "data-testid": "error-toast-title", children: title }),
1888
+ /* @__PURE__ */ jsx(Message4, { "data-testid": "error-toast-message", children: message }),
1889
+ correlationId && /* @__PURE__ */ jsxs(CorrelationId, { "data-testid": "error-toast-correlation-id", children: [
1890
+ "Ref: ",
1891
+ correlationId
1892
+ ] })
1893
+ ] })
1894
+ ] }),
1895
+ /* @__PURE__ */ jsxs(ButtonsWrapper, { children: [
1896
+ onCopy && /* @__PURE__ */ jsx(
1897
+ CopyButton,
1898
+ {
1899
+ onClick: handleCopy,
1900
+ "data-testid": "error-toast-copy",
1901
+ title: "Copy error details for support",
1902
+ children: copied ? "Copied" : "Copy"
1903
+ }
1904
+ ),
1905
+ extraActions,
1906
+ onReconnect && /* @__PURE__ */ jsx(ActionButton, { onClick: onReconnect, "data-testid": "error-toast-reconnect", children: "Reconnect" }),
1907
+ onRetry && /* @__PURE__ */ jsx(ActionButton, { onClick: onRetry, "data-testid": "error-toast-retry", children: "Retry" }),
1908
+ /* @__PURE__ */ jsx(DismissButton2, { onClick: onDismiss, children: "Dismiss" })
1909
+ ] })
1910
+ ] }),
1911
+ document.body
1912
+ );
1913
+ };
1914
+ var ToastContainer2 = styled58.div`
1915
+ position: fixed;
1916
+ top: calc(${tokens.spacing.md} + var(--safe-area-top, 0px));
1917
+ left: 50%;
1918
+ transform: translateX(-50%);
1919
+ min-width: min(400px, 90vw);
1920
+ max-width: min(600px, 95vw);
1921
+ background: ${tokens.colors.background.darker};
1922
+ border: 1px solid ${tokens.colors.border.default};
1923
+ border-left: 3px solid ${(props) => props.$accentColor};
1924
+ border-right: 3px solid ${(props) => props.$accentColor};
1925
+ color: ${tokens.colors.text.primary};
1926
+ border-radius: ${tokens.borderRadius.lg};
1927
+ box-shadow: ${tokens.shadows.xl};
1928
+ padding: ${tokens.spacing.md};
1929
+ z-index: ${tokens.zIndex.toast};
1930
+ font-family: ${tokens.typography.fontFamily.primary};
1931
+ animation: slideDown ${tokens.animation.duration.short} ${tokens.animation.easing.enter};
1932
+
1933
+ @keyframes slideDown {
1934
+ from {
1935
+ opacity: 0;
1936
+ transform: translateX(-50%) translateY(-20px);
1937
+ }
1938
+ to {
1939
+ opacity: 1;
1940
+ transform: translateX(-50%) translateY(0);
1941
+ }
1942
+ }
1943
+
1944
+ @media (max-width: 640px) {
1945
+ min-width: 90%;
1946
+ max-width: 90%;
1947
+ }
1948
+ `;
1949
+ var ToastContent2 = styled58.div`
1950
+ display: flex;
1951
+ align-items: flex-start;
1952
+ gap: ${tokens.spacing.md};
1953
+ margin-bottom: ${tokens.spacing.md};
1954
+ `;
1955
+ var IconWrapper = styled58.div`
1956
+ flex-shrink: 0;
1957
+
1958
+ img {
1959
+ filter: brightness(0) invert(0.7);
1960
+ }
1961
+ `;
1962
+ var MessageWrapper = styled58.div`
1963
+ flex: 1;
1964
+ `;
1965
+ var CategoryLabel = styled58.div`
1966
+ font-size: ${tokens.typography.fontSize.xs};
1967
+ font-weight: ${tokens.typography.fontWeight.semibold};
1968
+ text-transform: uppercase;
1969
+ letter-spacing: 0.5px;
1970
+ margin-bottom: ${tokens.spacing.xs};
1971
+ color: ${({ $accentColor }) => $accentColor || tokens.colors.text.secondary};
1972
+ `;
1973
+ var Message4 = styled58.div`
1974
+ font-size: ${tokens.typography.fontSize.sm};
1975
+ line-height: ${tokens.typography.lineHeight.normal};
1976
+ `;
1977
+ var CorrelationId = styled58.div`
1978
+ font-size: ${tokens.typography.fontSize.xs};
1979
+ font-family: ${tokens.typography.fontFamily.monospace};
1980
+ opacity: 0.7;
1981
+ margin-top: ${tokens.spacing.xs};
1982
+ word-break: break-all;
1983
+ `;
1984
+ var ButtonsWrapper = styled58.div`
1985
+ display: flex;
1986
+ gap: ${tokens.spacing.sm};
1987
+ justify-content: flex-end;
1988
+ `;
1989
+ var BaseButton = styled58.button`
1990
+ padding: ${tokens.spacing.sm} ${tokens.spacing.lg};
1991
+ font-size: ${tokens.typography.fontSize.sm};
1992
+ font-weight: ${tokens.typography.fontWeight.medium};
1993
+ font-family: ${tokens.typography.fontFamily.primary};
1994
+ border: none;
1995
+ border-radius: ${tokens.borderRadius.md};
1996
+ cursor: pointer;
1997
+ transition: all ${tokens.transitions.normal};
1998
+
1999
+ &:active {
2000
+ transform: scale(0.95);
2001
+ }
2002
+ `;
2003
+ var ActionButton = styled58(BaseButton)`
2004
+ background: ${tokens.colors.background.light};
2005
+ color: ${tokens.colors.text.primary};
2006
+ border: 1px solid ${tokens.colors.border.default};
2007
+ display: flex;
2008
+ align-items: center;
2009
+ gap: ${tokens.spacing.xs};
2010
+
2011
+ &:hover {
2012
+ background: ${tokens.colors.background.dark};
2013
+ border-color: ${tokens.colors.border.focus};
2014
+ }
2015
+ `;
2016
+ var CopyButton = styled58(BaseButton)`
2017
+ background: transparent;
2018
+ color: ${tokens.colors.text.secondary};
2019
+ font-size: ${tokens.typography.fontSize.xs};
2020
+ padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
2021
+ border: 1px solid ${tokens.colors.border.default};
2022
+
2023
+ &:hover {
2024
+ color: ${tokens.colors.text.primary};
2025
+ border-color: ${tokens.colors.border.focus};
2026
+ }
2027
+ `;
2028
+ var DismissButton2 = styled58(BaseButton)`
2029
+ background: ${tokens.colors.primary};
2030
+ color: ${tokens.colors.text.primary};
2031
+
2032
+ &:hover {
2033
+ opacity: 0.9;
2034
+ }
2035
+ `;
2036
+ var NavigationContainer = styled58.div`
1884
2037
  display: flex;
1885
2038
  flex-direction: column;
1886
2039
  align-items: center;
@@ -1897,7 +2050,7 @@ var NavigationContainer = styled57.div`
1897
2050
  box-shadow: none !important;
1898
2051
  }
1899
2052
  `;
1900
- var CategoryGroup = styled57.div`
2053
+ var CategoryGroup = styled58.div`
1901
2054
  display: flex;
1902
2055
  flex-direction: column;
1903
2056
  align-items: center;
@@ -1909,7 +2062,7 @@ var CategoryGroup = styled57.div`
1909
2062
  border-radius: 0 !important;
1910
2063
  }
1911
2064
  `;
1912
- var CategoryButton = styled57.button`
2065
+ var CategoryButton = styled58.button`
1913
2066
  width: 48px;
1914
2067
  height: 48px;
1915
2068
  border: none;
@@ -1934,7 +2087,7 @@ var CategoryButton = styled57.button`
1934
2087
  outline-offset: 2px;
1935
2088
  }
1936
2089
  `;
1937
- var CategoryLabel = styled57.span`
2090
+ var CategoryLabel2 = styled58.span`
1938
2091
  font-size: 9px;
1939
2092
  color: ${tokens.colors.text.tertiary};
1940
2093
  margin-top: ${tokens.spacing.xs};
@@ -1944,7 +2097,7 @@ var CategoryLabel = styled57.span`
1944
2097
  text-overflow: ellipsis;
1945
2098
  white-space: nowrap;
1946
2099
  `;
1947
- var SubItemList = styled57.div`
2100
+ var SubItemList = styled58.div`
1948
2101
  display: ${({ $expanded }) => $expanded ? "flex" : "none"};
1949
2102
  flex-direction: column;
1950
2103
  align-items: center;
@@ -1952,7 +2105,7 @@ var SubItemList = styled57.div`
1952
2105
  margin-top: ${tokens.spacing.xs};
1953
2106
  width: 100%;
1954
2107
  `;
1955
- var SubItemButton = styled57.button`
2108
+ var SubItemButton = styled58.button`
1956
2109
  width: 32px;
1957
2110
  height: 32px;
1958
2111
  border: none;
@@ -1976,7 +2129,7 @@ var SubItemButton = styled57.button`
1976
2129
  outline-offset: 2px;
1977
2130
  }
1978
2131
  `;
1979
- var CountBadge = styled57.span`
2132
+ var CountBadge = styled58.span`
1980
2133
  position: absolute;
1981
2134
  top: -2px;
1982
2135
  right: -2px;
@@ -2002,7 +2155,7 @@ var filterBadgeIn = keyframes`
2002
2155
  transform: scale(1);
2003
2156
  }
2004
2157
  `;
2005
- var FilterBadge = styled57.div`
2158
+ var FilterBadge = styled58.div`
2006
2159
  position: absolute;
2007
2160
  bottom: -${tokens.spacing.xs};
2008
2161
  right: -${tokens.spacing.xs};
@@ -2021,13 +2174,13 @@ var FilterBadge = styled57.div`
2021
2174
  fill: ${tokens.colors.text.primary};
2022
2175
  }
2023
2176
  `;
2024
- var CategoryIconImg = styled57.img`
2177
+ var CategoryIconImg = styled58.img`
2025
2178
  width: ${({ $size }) => $size || 24}px;
2026
2179
  height: ${({ $size }) => $size || 24}px;
2027
2180
  object-fit: contain;
2028
2181
  filter: ${({ $active }) => $active ? "brightness(0) invert(1)" : "none"};
2029
2182
  `;
2030
- var SubItemIconImg = styled57.img`
2183
+ var SubItemIconImg = styled58.img`
2031
2184
  width: ${({ $size }) => $size}px;
2032
2185
  height: ${({ $size }) => $size}px;
2033
2186
  object-fit: contain;
@@ -2122,7 +2275,7 @@ function CategoryNav({
2122
2275
  ]
2123
2276
  }
2124
2277
  ),
2125
- /* @__PURE__ */ jsx(CategoryLabel, { children: category.label }),
2278
+ /* @__PURE__ */ jsx(CategoryLabel2, { children: category.label }),
2126
2279
  category.subItems && category.subItems.length > 0 && /* @__PURE__ */ jsx(SubItemList, { $expanded: isExpanded, children: category.subItems.map((subItem) => {
2127
2280
  const isSubItemActive = selectedSubItem === subItem.id;
2128
2281
  return /* @__PURE__ */ jsx(
@@ -2133,6 +2286,7 @@ function CategoryNav({
2133
2286
  "aria-label": subItem.name,
2134
2287
  title: subItem.name,
2135
2288
  "data-testid": `${testIdPrefix}-subitem-${subItem.id}`,
2289
+ "data-active": isSubItemActive,
2136
2290
  children: renderSubItemIcon(subItem, isSubItemActive)
2137
2291
  },
2138
2292
  subItem.id
@@ -2142,7 +2296,7 @@ function CategoryNav({
2142
2296
  }) });
2143
2297
  }
2144
2298
  CategoryNav.displayName = "CategoryNav";
2145
- var IconWrapper = styled57.span`
2299
+ var IconWrapper2 = styled58.span`
2146
2300
  display: inline-flex;
2147
2301
  align-items: center;
2148
2302
  justify-content: center;
@@ -2239,10 +2393,10 @@ function Icon({
2239
2393
  ...imgProps
2240
2394
  }) {
2241
2395
  const iconPath = getIconPath(name);
2242
- return /* @__PURE__ */ jsx(IconWrapper, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
2396
+ return /* @__PURE__ */ jsx(IconWrapper2, { $size: size, $color: color, className, "aria-hidden": "true", children: /* @__PURE__ */ jsx("img", { src: iconPath, alt: "", width: size, height: size, ...imgProps }) });
2243
2397
  }
2244
2398
  Icon.displayName = "Icon";
2245
- var Container4 = styled57.nav`
2399
+ var Container4 = styled58.nav`
2246
2400
  position: absolute;
2247
2401
  bottom: 0;
2248
2402
  left: 0;
@@ -2262,7 +2416,7 @@ var Container4 = styled57.nav`
2262
2416
  background-color: ${tokens.colors.background.darkest};
2263
2417
  }
2264
2418
  `;
2265
- var ContentWrapper = styled57.div`
2419
+ var ContentWrapper = styled58.div`
2266
2420
  display: flex;
2267
2421
  justify-content: space-between;
2268
2422
  align-items: center;
@@ -2280,7 +2434,7 @@ var ContentWrapper = styled57.div`
2280
2434
  padding: 0 ${tokens.spacing.xs} 0 6px;
2281
2435
  }
2282
2436
  `;
2283
- var UserStatusSlot = styled57.div`
2437
+ var UserStatusSlot = styled58.div`
2284
2438
  display: flex;
2285
2439
  align-items: center;
2286
2440
  min-width: 0; /* Allow flex item to shrink */
@@ -2293,7 +2447,7 @@ var UserStatusSlot = styled57.div`
2293
2447
  white-space: nowrap;
2294
2448
  }
2295
2449
  `;
2296
- var ActionButtonsSlot = styled57.div`
2450
+ var ActionButtonsSlot = styled58.div`
2297
2451
  display: flex;
2298
2452
  align-items: center;
2299
2453
  gap: ${tokens.spacing.xs};
@@ -2316,7 +2470,7 @@ function NavHorizontal({
2316
2470
  ] }) });
2317
2471
  }
2318
2472
  NavHorizontal.displayName = "NavHorizontal";
2319
- var Container5 = styled57.nav`
2473
+ var Container5 = styled58.nav`
2320
2474
  position: absolute;
2321
2475
  top: 0;
2322
2476
  left: 0;
@@ -2345,7 +2499,7 @@ var Container5 = styled57.nav`
2345
2499
  width: 60px;
2346
2500
  }
2347
2501
  `;
2348
- var TopSection = styled57.div`
2502
+ var TopSection = styled58.div`
2349
2503
  display: flex;
2350
2504
  flex-direction: column;
2351
2505
  align-items: center;
@@ -2358,7 +2512,7 @@ var TopSection = styled57.div`
2358
2512
  height: 64px; /* Same as PaneSectionHeader on desktop */
2359
2513
  }
2360
2514
  `;
2361
- var BackButton = styled57.button`
2515
+ var BackButton = styled58.button`
2362
2516
  position: absolute;
2363
2517
  top: 50%;
2364
2518
  left: 50%;
@@ -2394,12 +2548,12 @@ var BackButton = styled57.button`
2394
2548
  outline-offset: 2px;
2395
2549
  }
2396
2550
  `;
2397
- styled57.span`
2551
+ styled58.span`
2398
2552
  font-size: ${tokens.typography.fontSize.xl};
2399
2553
  line-height: ${tokens.typography.lineHeight.tight};
2400
2554
  font-weight: ${tokens.typography.fontWeight.bold};
2401
2555
  `;
2402
- var Separator = styled57.div`
2556
+ var Separator = styled58.div`
2403
2557
  width: 32px;
2404
2558
  height: 2px;
2405
2559
  background-color: ${tokens.colors.background.light};
@@ -2407,7 +2561,7 @@ var Separator = styled57.div`
2407
2561
  margin: ${tokens.spacing.sm} auto ${tokens.spacing.md};
2408
2562
  border-radius: 1px;
2409
2563
  `;
2410
- var FolderGroupsSlot = styled57.div`
2564
+ var FolderGroupsSlot = styled58.div`
2411
2565
  display: flex;
2412
2566
  flex-direction: column;
2413
2567
  align-items: center;
@@ -2435,7 +2589,7 @@ var FolderGroupsSlot = styled57.div`
2435
2589
  padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
2436
2590
  }
2437
2591
  `;
2438
- var BottomSection = styled57.div`
2592
+ var BottomSection = styled58.div`
2439
2593
  flex: 0 1 auto; /* Natural size, can shrink when no space */
2440
2594
  min-height: 48px; /* At least one button visible */
2441
2595
  display: flex;
@@ -2463,7 +2617,7 @@ var BottomSection = styled57.div`
2463
2617
  scrollbar-width: thin;
2464
2618
  scrollbar-color: ${tokens.colors.border.default} transparent;
2465
2619
  `;
2466
- var BottomButton = styled57.button`
2620
+ var BottomButton = styled58.button`
2467
2621
  width: 40px;
2468
2622
  height: 40px;
2469
2623
  border-radius: ${tokens.borderRadius.full};
@@ -2559,7 +2713,7 @@ function NavVertical({
2559
2713
  ] });
2560
2714
  }
2561
2715
  NavVertical.displayName = "NavVertical";
2562
- var Container6 = styled57.div`
2716
+ var Container6 = styled58.div`
2563
2717
  position: relative;
2564
2718
  width: 100%;
2565
2719
  height: 100vh;
@@ -2572,7 +2726,7 @@ var Container6 = styled57.div`
2572
2726
  position: relative;
2573
2727
  }
2574
2728
  `;
2575
- var BackgroundPane = styled57.div`
2729
+ var BackgroundPane = styled58.div`
2576
2730
  position: absolute;
2577
2731
  top: 0;
2578
2732
  left: 72px; /* Width of vertical nav */
@@ -2613,7 +2767,7 @@ var BackgroundPane = styled57.div`
2613
2767
  left: 60px; /* Smaller nav on mobile */
2614
2768
  }
2615
2769
  `;
2616
- var MainPane = styled57.main`
2770
+ var MainPane = styled58.main`
2617
2771
  position: absolute;
2618
2772
  top: 0;
2619
2773
  left: 72px; /* Width of vertical nav */
@@ -2691,13 +2845,13 @@ function Layout({
2691
2845
  ] });
2692
2846
  }
2693
2847
  Layout.displayName = "Layout";
2694
- var Container7 = styled57.div`
2848
+ var Container7 = styled58.div`
2695
2849
  display: flex;
2696
2850
  align-items: center;
2697
2851
  justify-content: flex-end;
2698
2852
  gap: ${tokens.spacing.xs};
2699
2853
  `;
2700
- var ActionButton = styled57.button`
2854
+ var ActionButton2 = styled58.button`
2701
2855
  width: ${({ $size = 32 }) => $size}px;
2702
2856
  height: ${({ $size = 32 }) => $size}px;
2703
2857
  min-width: ${({ $size = 32 }) => $size}px;
@@ -2754,7 +2908,7 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
2754
2908
  ref
2755
2909
  );
2756
2910
  return /* @__PURE__ */ jsx(
2757
- ActionButton,
2911
+ ActionButton2,
2758
2912
  {
2759
2913
  ...buttonProps,
2760
2914
  ref,
@@ -2802,7 +2956,7 @@ var statusColors = {
2802
2956
  busy: tokens.colors.status.busy,
2803
2957
  offline: tokens.colors.status.offline
2804
2958
  };
2805
- var Container8 = styled57.button`
2959
+ var Container8 = styled58.button`
2806
2960
  display: grid;
2807
2961
  grid-template-columns: auto 1fr;
2808
2962
  align-items: center;
@@ -2841,7 +2995,7 @@ var Container8 = styled57.button`
2841
2995
  opacity: 0.9;
2842
2996
  }
2843
2997
  `;
2844
- var IconWrapper2 = styled57.div`
2998
+ var IconWrapper3 = styled58.div`
2845
2999
  position: relative;
2846
3000
  width: 36px;
2847
3001
  height: 36px;
@@ -2852,13 +3006,13 @@ var IconWrapper2 = styled57.div`
2852
3006
  justify-content: center;
2853
3007
  flex-shrink: 0;
2854
3008
  `;
2855
- var WorkflowInfo = styled57.div`
3009
+ var WorkflowInfo = styled58.div`
2856
3010
  display: flex;
2857
3011
  flex-direction: column;
2858
3012
  gap: ${tokens.spacing.xs};
2859
3013
  min-width: 0;
2860
3014
  `;
2861
- var WorkflowName = styled57.span`
3015
+ var WorkflowName = styled58.span`
2862
3016
  color: ${tokens.colors.text.primary};
2863
3017
  font-size: ${tokens.typography.fontSize.sm};
2864
3018
  font-weight: ${tokens.typography.fontWeight.semibold};
@@ -2867,14 +3021,14 @@ var WorkflowName = styled57.span`
2867
3021
  text-overflow: ellipsis;
2868
3022
  white-space: nowrap;
2869
3023
  `;
2870
- var WorkflowStatus = styled57.span`
3024
+ var WorkflowStatus = styled58.span`
2871
3025
  color: ${tokens.colors.text.tertiary};
2872
3026
  font-size: ${tokens.typography.fontSize.xs};
2873
3027
  font-weight: ${tokens.typography.fontWeight.regular};
2874
3028
  line-height: ${tokens.typography.lineHeight.tight};
2875
3029
  text-transform: capitalize;
2876
3030
  `;
2877
- var WorkflowSubtitle = styled57.span`
3031
+ var WorkflowSubtitle = styled58.span`
2878
3032
  color: ${tokens.colors.text.tertiary};
2879
3033
  font-size: ${tokens.typography.fontSize.xs};
2880
3034
  font-weight: ${tokens.typography.fontWeight.regular};
@@ -2884,7 +3038,7 @@ var WorkflowSubtitle = styled57.span`
2884
3038
  text-overflow: ellipsis;
2885
3039
  white-space: nowrap;
2886
3040
  `;
2887
- var StatusIndicatorOuter = styled57.span`
3041
+ var StatusIndicatorOuter = styled58.span`
2888
3042
  position: absolute;
2889
3043
  bottom: -2px;
2890
3044
  right: -2px;
@@ -2896,7 +3050,7 @@ var StatusIndicatorOuter = styled57.span`
2896
3050
  align-items: center;
2897
3051
  justify-content: center;
2898
3052
  `;
2899
- var StatusIndicatorInner = styled57.span`
3053
+ var StatusIndicatorInner = styled58.span`
2900
3054
  width: 8px;
2901
3055
  height: 8px;
2902
3056
  border-radius: ${tokens.borderRadius.full};
@@ -2930,7 +3084,7 @@ function WorkflowStatusCard({
2930
3084
  ref
2931
3085
  );
2932
3086
  return /* @__PURE__ */ jsxs(Container8, { ...buttonProps, ref, className, $isDisabled: isDisabled, children: [
2933
- /* @__PURE__ */ jsxs(IconWrapper2, { children: [
3087
+ /* @__PURE__ */ jsxs(IconWrapper3, { children: [
2934
3088
  icon,
2935
3089
  /* @__PURE__ */ jsx(StatusIndicatorOuter, { $status: status, children: /* @__PURE__ */ jsx(StatusIndicatorInner, { $status: status }) })
2936
3090
  ] }),
@@ -2942,7 +3096,7 @@ function WorkflowStatusCard({
2942
3096
  ] });
2943
3097
  }
2944
3098
  WorkflowStatusCard.displayName = "WorkflowStatusCard";
2945
- var DarkNotificationCardContainer = styled57.div`
3099
+ var DarkNotificationCardContainer = styled58.div`
2946
3100
  display: flex;
2947
3101
  flex-direction: column;
2948
3102
  padding: ${tokens.spacing.xs};
@@ -2953,7 +3107,7 @@ var DarkNotificationCardContainer = styled57.div`
2953
3107
  min-width: 0;
2954
3108
  overflow: hidden;
2955
3109
  `;
2956
- var DarkSectionHeader = styled57.button`
3110
+ var DarkSectionHeader = styled58.button`
2957
3111
  display: flex;
2958
3112
  align-items: center;
2959
3113
  justify-content: space-between;
@@ -2979,7 +3133,7 @@ var DarkSectionHeader = styled57.button`
2979
3133
  border-radius: ${tokens.borderRadius.sm};
2980
3134
  }
2981
3135
  `;
2982
- var DarkChevronIcon = styled57.span`
3136
+ var DarkChevronIcon = styled58.span`
2983
3137
  display: inline-flex;
2984
3138
  align-items: center;
2985
3139
  justify-content: center;
@@ -2997,7 +3151,7 @@ var DarkChevronIcon = styled57.span`
2997
3151
  height: 12px;
2998
3152
  }
2999
3153
  `;
3000
- var DarkSectionContent = styled57.div`
3154
+ var DarkSectionContent = styled58.div`
3001
3155
  display: flex;
3002
3156
  flex-direction: column;
3003
3157
  gap: ${tokens.spacing.xs};
@@ -3006,7 +3160,7 @@ var DarkSectionContent = styled57.div`
3006
3160
  min-width: 0;
3007
3161
  overflow: hidden;
3008
3162
  `;
3009
- var DarkNotificationItemWrapper = styled57.button`
3163
+ var DarkNotificationItemWrapper = styled58.button`
3010
3164
  display: flex;
3011
3165
  align-items: center;
3012
3166
  gap: ${tokens.spacing.xs};
@@ -3045,7 +3199,7 @@ var DarkNotificationItemWrapper = styled57.button`
3045
3199
  opacity: 0.5;
3046
3200
  }
3047
3201
  `;
3048
- var DarkItemIcon = styled57.span`
3202
+ var DarkItemIcon = styled58.span`
3049
3203
  display: inline-flex;
3050
3204
  align-items: center;
3051
3205
  justify-content: center;
@@ -3070,7 +3224,7 @@ var DarkItemIcon = styled57.span`
3070
3224
  padding: ${tokens.spacing.xs};
3071
3225
  `}
3072
3226
  `;
3073
- var DarkItemText = styled57.span`
3227
+ var DarkItemText = styled58.span`
3074
3228
  flex: 1;
3075
3229
  font-family: ${tokens.typography.fontFamily.primary};
3076
3230
  font-size: 11px;
@@ -3082,7 +3236,7 @@ var DarkItemText = styled57.span`
3082
3236
  overflow: hidden;
3083
3237
  text-overflow: ellipsis;
3084
3238
  `;
3085
- var DarkMenuButton = styled57.button`
3239
+ var DarkMenuButton = styled58.button`
3086
3240
  display: inline-flex;
3087
3241
  align-items: center;
3088
3242
  justify-content: center;
@@ -3116,7 +3270,7 @@ var DarkMenuButton = styled57.button`
3116
3270
  height: 14px;
3117
3271
  }
3118
3272
  `;
3119
- var DarkTimestamp = styled57.span`
3273
+ var DarkTimestamp = styled58.span`
3120
3274
  font-size: 10px;
3121
3275
  color: ${tokens.colors.text.tertiary};
3122
3276
  white-space: normal;
@@ -3301,7 +3455,7 @@ var DarkNotificationItemComponent = ({
3301
3455
  );
3302
3456
  };
3303
3457
  DarkNotificationCard.displayName = "DarkNotificationCard";
3304
- var Container9 = styled57.div`
3458
+ var Container9 = styled58.div`
3305
3459
  width: 100%;
3306
3460
  height: 100%;
3307
3461
  background-color: ${tokens.colors.background.dark};
@@ -3311,7 +3465,7 @@ var Container9 = styled57.div`
3311
3465
  font-family: ${tokens.typography.fontFamily.primary};
3312
3466
  overflow: hidden; // Prevent content from escaping container bounds
3313
3467
  `;
3314
- var TabListWrapper = styled57.div`
3468
+ var TabListWrapper = styled58.div`
3315
3469
  display: flex;
3316
3470
  border-bottom: 2px solid ${tokens.colors.border.default};
3317
3471
  background-color: ${tokens.colors.surface.subtle};
@@ -3331,7 +3485,7 @@ var TabListWrapper = styled57.div`
3331
3485
  gap: ${tokens.spacing.xs};
3332
3486
  }
3333
3487
  `;
3334
- var TabButton = styled57.button`
3488
+ var TabButton = styled58.button`
3335
3489
  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
3336
3490
  background: none;
3337
3491
  border: none;
@@ -3375,7 +3529,7 @@ var TabButton = styled57.button`
3375
3529
  }
3376
3530
  `}
3377
3531
  `;
3378
- var TabPanelWrapper = styled57.div`
3532
+ var TabPanelWrapper = styled58.div`
3379
3533
  flex: 1;
3380
3534
  padding: ${tokens.spacing.lg};
3381
3535
  overflow-y: auto;
@@ -3413,7 +3567,7 @@ var TabPanelWrapper = styled57.div`
3413
3567
  background: ${tokens.colors.scrollbar.thumbHover};
3414
3568
  }
3415
3569
  `;
3416
- var RunsContainer = styled57.div`
3570
+ var RunsContainer = styled58.div`
3417
3571
  display: flex;
3418
3572
  flex-direction: column;
3419
3573
  gap: ${tokens.spacing.lg};
@@ -3426,7 +3580,7 @@ var RunsContainer = styled57.div`
3426
3580
  gap: ${tokens.spacing.md};
3427
3581
  }
3428
3582
  `;
3429
- styled57.button`
3583
+ styled58.button`
3430
3584
  display: flex;
3431
3585
  align-items: center;
3432
3586
  gap: ${tokens.spacing.md};
@@ -3463,7 +3617,7 @@ styled57.button`
3463
3617
  outline-offset: 2px;
3464
3618
  }
3465
3619
  `;
3466
- var StyledDisclosureGroup = styled57(DisclosureGroup)`
3620
+ var StyledDisclosureGroup = styled58(DisclosureGroup)`
3467
3621
  display: flex;
3468
3622
  flex-direction: column;
3469
3623
  gap: ${tokens.spacing.sm};
@@ -3472,7 +3626,7 @@ var StyledDisclosureGroup = styled57(DisclosureGroup)`
3472
3626
  min-width: 0;
3473
3627
  overflow: hidden;
3474
3628
  `;
3475
- var CategoryDisclosure = styled57(Disclosure)`
3629
+ var CategoryDisclosure = styled58(Disclosure)`
3476
3630
  background-color: transparent;
3477
3631
  display: flex;
3478
3632
  flex-direction: column;
@@ -3490,7 +3644,7 @@ var CategoryDisclosure = styled57(Disclosure)`
3490
3644
  cursor: not-allowed;
3491
3645
  }
3492
3646
  `;
3493
- var CategoryHeader = styled57(Button)`
3647
+ var CategoryHeader = styled58(Button)`
3494
3648
  width: 100%;
3495
3649
  padding: ${tokens.spacing.xs} 0;
3496
3650
  background: none;
@@ -3520,7 +3674,7 @@ var CategoryHeader = styled57(Button)`
3520
3674
  border-radius: ${tokens.borderRadius.sm};
3521
3675
  }
3522
3676
  `;
3523
- var CategoryTitle = styled57.div`
3677
+ var CategoryTitle = styled58.div`
3524
3678
  display: flex;
3525
3679
  align-items: center;
3526
3680
  gap: ${tokens.spacing.sm};
@@ -3529,7 +3683,7 @@ var CategoryTitle = styled57.div`
3529
3683
  gap: ${tokens.spacing.xs};
3530
3684
  }
3531
3685
  `;
3532
- styled57.img`
3686
+ styled58.img`
3533
3687
  width: 16px;
3534
3688
  height: 16px;
3535
3689
  opacity: 0.6;
@@ -3540,7 +3694,7 @@ styled57.img`
3540
3694
  height: 14px;
3541
3695
  }
3542
3696
  `;
3543
- var HashtagIcon = styled57.img`
3697
+ var HashtagIcon = styled58.img`
3544
3698
  width: 14px;
3545
3699
  height: 14px;
3546
3700
  opacity: 0.6;
@@ -3551,7 +3705,7 @@ var HashtagIcon = styled57.img`
3551
3705
  height: 12px;
3552
3706
  }
3553
3707
  `;
3554
- var ChevronIcon = styled57.div`
3708
+ var ChevronIcon = styled58.div`
3555
3709
  display: flex;
3556
3710
  align-items: center;
3557
3711
  transition: transform ${tokens.transitions.normal};
@@ -3572,7 +3726,7 @@ var ChevronIcon = styled57.div`
3572
3726
  }
3573
3727
  }
3574
3728
  `;
3575
- var CategoryDisclosurePanel = styled57(DisclosurePanel)`
3729
+ var CategoryDisclosurePanel = styled58(DisclosurePanel)`
3576
3730
  display: flex;
3577
3731
  flex-direction: column;
3578
3732
  gap: 2px;
@@ -3601,7 +3755,7 @@ var CategoryDisclosurePanel = styled57(DisclosurePanel)`
3601
3755
  }
3602
3756
  }
3603
3757
  `;
3604
- var ItemContainer = styled57.div`
3758
+ var ItemContainer = styled58.div`
3605
3759
  display: flex;
3606
3760
  align-items: center;
3607
3761
  gap: ${tokens.spacing.sm};
@@ -3621,7 +3775,7 @@ var ItemContainer = styled57.div`
3621
3775
  background-color: ${tokens.colors.surface.overlayHover};
3622
3776
  }
3623
3777
  `;
3624
- var ItemDisclosure = styled57(Disclosure)`
3778
+ var ItemDisclosure = styled58(Disclosure)`
3625
3779
  background-color: transparent;
3626
3780
  margin-bottom: ${tokens.spacing.xs};
3627
3781
  display: flex;
@@ -3636,7 +3790,7 @@ var ItemDisclosure = styled57(Disclosure)`
3636
3790
  border-radius: ${tokens.borderRadius.md};
3637
3791
  }
3638
3792
  `;
3639
- var ItemHeader = styled57(Button)`
3793
+ var ItemHeader = styled58(Button)`
3640
3794
  width: 100%;
3641
3795
  padding: 0;
3642
3796
  background: none;
@@ -3654,7 +3808,7 @@ var ItemHeader = styled57(Button)`
3654
3808
  border-radius: ${tokens.borderRadius.sm};
3655
3809
  }
3656
3810
  `;
3657
- var ItemDisclosurePanel = styled57(DisclosurePanel)`
3811
+ var ItemDisclosurePanel = styled58(DisclosurePanel)`
3658
3812
  padding: ${tokens.spacing.xs};
3659
3813
  background-color: ${tokens.colors.overlay};
3660
3814
  border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
@@ -3684,7 +3838,7 @@ var ItemDisclosurePanel = styled57(DisclosurePanel)`
3684
3838
  }
3685
3839
  }
3686
3840
  `;
3687
- var ItemIcon = styled57.img`
3841
+ var ItemIcon = styled58.img`
3688
3842
  width: 20px;
3689
3843
  height: 20px;
3690
3844
  opacity: 0.6;
@@ -3695,7 +3849,7 @@ var ItemIcon = styled57.img`
3695
3849
  height: 18px;
3696
3850
  }
3697
3851
  `;
3698
- var ItemName = styled57.span`
3852
+ var ItemName = styled58.span`
3699
3853
  flex: 1;
3700
3854
  font-size: ${tokens.typography.fontSize.sm};
3701
3855
  color: ${(props) => props.$dimmed ? tokens.colors.text.tertiary : tokens.colors.text.secondary};
@@ -3713,7 +3867,7 @@ var ItemName = styled57.span`
3713
3867
  color: ${(props) => props.$dimmed ? tokens.colors.text.secondary : tokens.colors.text.primary};
3714
3868
  }
3715
3869
  `;
3716
- var RunStatus = styled57.span`
3870
+ var RunStatus = styled58.span`
3717
3871
  display: flex;
3718
3872
  align-items: center;
3719
3873
  justify-content: center;
@@ -3745,13 +3899,13 @@ var RunStatus = styled57.span`
3745
3899
  font-size: ${tokens.typography.fontSize.xs};
3746
3900
  }
3747
3901
  `;
3748
- styled57.div`
3902
+ styled58.div`
3749
3903
  margin-bottom: ${tokens.spacing.md};
3750
3904
  border-radius: ${tokens.borderRadius.lg};
3751
3905
  background-color: ${tokens.colors.surface.overlay};
3752
3906
  overflow: hidden;
3753
3907
  `;
3754
- styled57.button`
3908
+ styled58.button`
3755
3909
  width: 100%;
3756
3910
  padding: ${tokens.spacing.md};
3757
3911
  background: ${tokens.colors.surface.overlay};
@@ -3787,13 +3941,13 @@ styled57.button`
3787
3941
  margin-bottom: ${tokens.spacing.xs};
3788
3942
  }
3789
3943
  `;
3790
- styled57.span`
3944
+ styled58.span`
3791
3945
  font-size: ${tokens.typography.fontSize.xs};
3792
3946
  color: ${tokens.colors.text.secondary};
3793
3947
  transition: transform ${tokens.transitions.normal};
3794
3948
  transform: ${(props) => props.$isExpanded ? "rotate(180deg)" : "rotate(0deg)"};
3795
3949
  `;
3796
- styled57.div`
3950
+ styled58.div`
3797
3951
  padding: ${tokens.spacing.md};
3798
3952
  padding-top: 0;
3799
3953
  background-color: ${tokens.colors.overlay};
@@ -3813,17 +3967,17 @@ styled57.div`
3813
3967
  }
3814
3968
  }
3815
3969
  `;
3816
- var MeterContainer = styled57.div`
3970
+ var MeterContainer = styled58.div`
3817
3971
  max-width: 600px;
3818
3972
  margin: 0 auto;
3819
3973
  `;
3820
- var MeterLabel = styled57.div`
3974
+ var MeterLabel = styled58.div`
3821
3975
  font-size: ${tokens.typography.fontSize.base};
3822
3976
  font-weight: ${tokens.typography.fontWeight.semibold};
3823
3977
  margin-bottom: ${tokens.spacing.md};
3824
3978
  color: ${tokens.colors.text.primary};
3825
3979
  `;
3826
- var MeterBar = styled57.div`
3980
+ var MeterBar = styled58.div`
3827
3981
  width: 100%;
3828
3982
  height: 24px;
3829
3983
  background-color: ${tokens.colors.background.darker};
@@ -3832,7 +3986,7 @@ var MeterBar = styled57.div`
3832
3986
  position: relative;
3833
3987
  margin-bottom: ${tokens.spacing.md};
3834
3988
  `;
3835
- var MeterFill = styled57.div`
3989
+ var MeterFill = styled58.div`
3836
3990
  height: 100%;
3837
3991
  width: ${(props) => props.$percentage}%;
3838
3992
  background: linear-gradient(90deg, ${(props) => props.$color}dd, ${(props) => props.$color});
@@ -3860,7 +4014,7 @@ var MeterFill = styled57.div`
3860
4014
  }
3861
4015
  }
3862
4016
  `;
3863
- var MeterStats = styled57.div`
4017
+ var MeterStats = styled58.div`
3864
4018
  font-size: ${tokens.typography.fontSize.sm};
3865
4019
  color: ${tokens.colors.text.secondary};
3866
4020
  text-align: center;
@@ -3871,18 +4025,18 @@ var MeterStats = styled57.div`
3871
4025
  opacity: 0.8;
3872
4026
  }
3873
4027
  `;
3874
- var ConnectionsContainer = styled57.div`
4028
+ var ConnectionsContainer = styled58.div`
3875
4029
  max-width: 500px;
3876
4030
  margin: 0 auto;
3877
4031
  text-align: center;
3878
4032
  `;
3879
- var ConnectionDescription = styled57.p`
4033
+ var ConnectionDescription = styled58.p`
3880
4034
  font-size: ${tokens.typography.fontSize.sm};
3881
4035
  color: ${tokens.colors.text.secondary};
3882
4036
  line-height: ${tokens.typography.lineHeight.relaxed};
3883
4037
  margin-bottom: ${tokens.spacing.lg};
3884
4038
  `;
3885
- var GoogleButton = styled57.button`
4039
+ var GoogleButton = styled58.button`
3886
4040
  width: 100%;
3887
4041
  padding: ${tokens.spacing.md} ${tokens.spacing.lg};
3888
4042
  font-size: ${tokens.typography.fontSize.sm};
@@ -4396,7 +4550,7 @@ function PaneMenus({
4396
4550
  /* @__PURE__ */ jsx(TabPanel, { state }, state.selectedItem?.key)
4397
4551
  ] });
4398
4552
  }
4399
- var Container10 = styled57.header`
4553
+ var Container10 = styled58.header`
4400
4554
  position: relative;
4401
4555
  width: 100%;
4402
4556
  height: 56px;
@@ -4459,7 +4613,7 @@ var Container10 = styled57.header`
4459
4613
  background-color: ${tokens.colors.backdrop};
4460
4614
  }
4461
4615
  `;
4462
- var BrandLogo = styled57.img`
4616
+ var BrandLogo = styled58.img`
4463
4617
  position: relative;
4464
4618
  z-index: 1;
4465
4619
  max-height: 28px;
@@ -4474,7 +4628,7 @@ var BrandLogo = styled57.img`
4474
4628
  max-height: 32px;
4475
4629
  }
4476
4630
  `;
4477
- var SettingsButton = styled57.button`
4631
+ var SettingsButton = styled58.button`
4478
4632
  position: absolute;
4479
4633
  top: 50%;
4480
4634
  right: ${tokens.spacing.md};
@@ -4528,7 +4682,7 @@ var SettingsButton = styled57.button`
4528
4682
  right: ${tokens.spacing.lg};
4529
4683
  }
4530
4684
  `;
4531
- var BackButton2 = styled57.button`
4685
+ var BackButton2 = styled58.button`
4532
4686
  position: absolute;
4533
4687
  top: 50%;
4534
4688
  left: ${tokens.spacing.md};
@@ -4635,7 +4789,7 @@ function PaneSectionHeader({
4635
4789
  ] });
4636
4790
  }
4637
4791
  PaneSectionHeader.displayName = "PaneSectionHeader";
4638
- var Container11 = styled57.button`
4792
+ var Container11 = styled58.button`
4639
4793
  /* Base button styling */
4640
4794
  width: 48px;
4641
4795
  height: 48px;
@@ -4684,7 +4838,7 @@ var Container11 = styled57.button`
4684
4838
  cursor: not-allowed;
4685
4839
  }
4686
4840
  `;
4687
- var LogoImage = styled57.img`
4841
+ var LogoImage = styled58.img`
4688
4842
  width: 100%;
4689
4843
  height: 100%;
4690
4844
  object-fit: contain;
@@ -4703,7 +4857,7 @@ function ServiceIcon({ brand, active = false, className, ...ariaProps }) {
4703
4857
  return /* @__PURE__ */ jsx(Container11, { ...buttonProps, ref, $active: active, className, children: /* @__PURE__ */ jsx(LogoImage, { src: `/assets/icons/Brand/${brand}.svg`, alt: brand }) });
4704
4858
  }
4705
4859
  ServiceIcon.displayName = "ServiceIcon";
4706
- var NotificationCardContainer = styled57.div`
4860
+ var NotificationCardContainer = styled58.div`
4707
4861
  display: flex;
4708
4862
  flex-direction: column;
4709
4863
  width: 100%;
@@ -4714,7 +4868,7 @@ var NotificationCardContainer = styled57.div`
4714
4868
  box-shadow: ${tokens.shadows.card};
4715
4869
  gap: ${tokens.spacing.md};
4716
4870
  `;
4717
- var SectionHeader = styled57.button`
4871
+ var SectionHeader = styled58.button`
4718
4872
  display: flex;
4719
4873
  align-items: center;
4720
4874
  justify-content: space-between;
@@ -4740,7 +4894,7 @@ var SectionHeader = styled57.button`
4740
4894
  border-radius: ${tokens.borderRadius.md};
4741
4895
  }
4742
4896
  `;
4743
- var ChevronIcon2 = styled57.span`
4897
+ var ChevronIcon2 = styled58.span`
4744
4898
  display: inline-flex;
4745
4899
  align-items: center;
4746
4900
  justify-content: center;
@@ -4758,14 +4912,14 @@ var ChevronIcon2 = styled57.span`
4758
4912
  height: 16px;
4759
4913
  }
4760
4914
  `;
4761
- var SectionContent = styled57.div`
4915
+ var SectionContent = styled58.div`
4762
4916
  display: flex;
4763
4917
  flex-direction: column;
4764
4918
  gap: ${tokens.spacing.sm};
4765
4919
  padding-left: 0;
4766
4920
  margin-top: ${tokens.spacing.xs};
4767
4921
  `;
4768
- var NotificationItemWrapper = styled57.button`
4922
+ var NotificationItemWrapper = styled58.button`
4769
4923
  display: flex;
4770
4924
  align-items: center;
4771
4925
  gap: ${tokens.spacing.md};
@@ -4802,7 +4956,7 @@ var NotificationItemWrapper = styled57.button`
4802
4956
  opacity: 0.5;
4803
4957
  }
4804
4958
  `;
4805
- var ItemIcon2 = styled57.span`
4959
+ var ItemIcon2 = styled58.span`
4806
4960
  display: inline-flex;
4807
4961
  align-items: center;
4808
4962
  justify-content: center;
@@ -4827,7 +4981,7 @@ var ItemIcon2 = styled57.span`
4827
4981
  padding: ${tokens.spacing.xs};
4828
4982
  `}
4829
4983
  `;
4830
- var ItemText = styled57.span`
4984
+ var ItemText = styled58.span`
4831
4985
  flex: 1;
4832
4986
  font-family: ${tokens.typography.fontFamily.primary};
4833
4987
  font-size: 15px;
@@ -4836,7 +4990,7 @@ var ItemText = styled57.span`
4836
4990
  line-height: ${tokens.typography.lineHeight.normal};
4837
4991
  word-wrap: break-word;
4838
4992
  `;
4839
- var MenuButton = styled57.button`
4993
+ var MenuButton = styled58.button`
4840
4994
  display: inline-flex;
4841
4995
  align-items: center;
4842
4996
  justify-content: center;
@@ -5046,7 +5200,7 @@ var NotificationItemComponent = ({
5046
5200
  );
5047
5201
  };
5048
5202
  NotificationCard.displayName = "NotificationCard";
5049
- var StyledUserMessage = styled57.button`
5203
+ var StyledUserMessage = styled58.button`
5050
5204
  /* Base styles */
5051
5205
  display: inline-flex;
5052
5206
  align-items: center;
@@ -5386,7 +5540,7 @@ var ConnectionStatusBadge = ({
5386
5540
  );
5387
5541
  };
5388
5542
  ConnectionStatusBadge.displayName = "ConnectionStatusBadge";
5389
- var Badge = styled57.span`
5543
+ var Badge = styled58.span`
5390
5544
  display: inline-flex;
5391
5545
  align-items: center;
5392
5546
  padding: ${({ $size }) => $size === "sm" ? `${tokens.spacing.xs} 6px` : `${tokens.spacing.xs} ${tokens.spacing.sm}`};
@@ -5409,7 +5563,7 @@ var IntegrationCard = ({
5409
5563
  return /* @__PURE__ */ jsxs(Card, { className, "data-testid": "integration-card", children: [
5410
5564
  status && /* @__PURE__ */ jsx(StatusRow, { children: status }),
5411
5565
  /* @__PURE__ */ jsxs(ContentHeader, { children: [
5412
- /* @__PURE__ */ jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImage, { src: icon, alt: name }) : icon }),
5566
+ /* @__PURE__ */ jsx(IconWrapper4, { children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImage, { src: icon, alt: name }) : icon }),
5413
5567
  /* @__PURE__ */ jsxs(Info, { children: [
5414
5568
  /* @__PURE__ */ jsx(Name, { children: name }),
5415
5569
  description && /* @__PURE__ */ jsx(Description2, { children: description })
@@ -5422,7 +5576,7 @@ var IntegrationCard = ({
5422
5576
  ] });
5423
5577
  };
5424
5578
  IntegrationCard.displayName = "IntegrationCard";
5425
- var Card = styled57.div`
5579
+ var Card = styled58.div`
5426
5580
  display: flex;
5427
5581
  flex-direction: column;
5428
5582
  gap: ${tokens.spacing.sm};
@@ -5442,11 +5596,11 @@ var Card = styled57.div`
5442
5596
  border-color: ${tokens.colors.border.hover};
5443
5597
  }
5444
5598
  `;
5445
- var StatusRow = styled57.div`
5599
+ var StatusRow = styled58.div`
5446
5600
  display: flex;
5447
5601
  align-items: center;
5448
5602
  `;
5449
- var ContentHeader = styled57.div`
5603
+ var ContentHeader = styled58.div`
5450
5604
  display: flex;
5451
5605
  align-items: flex-start;
5452
5606
  gap: ${tokens.spacing.sm};
@@ -5455,7 +5609,7 @@ var ContentHeader = styled57.div`
5455
5609
  gap: ${tokens.spacing.xs};
5456
5610
  }
5457
5611
  `;
5458
- var IconWrapper3 = styled57.div`
5612
+ var IconWrapper4 = styled58.div`
5459
5613
  width: 40px;
5460
5614
  height: 40px;
5461
5615
  display: flex;
@@ -5465,32 +5619,32 @@ var IconWrapper3 = styled57.div`
5465
5619
  background: ${tokens.colors.background.light};
5466
5620
  flex-shrink: 0;
5467
5621
  `;
5468
- var IconImage = styled57.img`
5622
+ var IconImage = styled58.img`
5469
5623
  width: 24px;
5470
5624
  height: 24px;
5471
5625
  object-fit: contain;
5472
5626
  `;
5473
- var Info = styled57.div`
5627
+ var Info = styled58.div`
5474
5628
  display: flex;
5475
5629
  flex-direction: column;
5476
5630
  gap: 2px;
5477
5631
  min-width: 0;
5478
5632
  flex: 1;
5479
5633
  `;
5480
- var Name = styled57.h3`
5634
+ var Name = styled58.h3`
5481
5635
  margin: 0;
5482
5636
  font-size: ${tokens.typography.fontSize.sm};
5483
5637
  font-weight: ${tokens.typography.fontWeight.semibold};
5484
5638
  color: ${tokens.colors.text.primary};
5485
5639
  line-height: ${tokens.typography.lineHeight.tight};
5486
5640
  `;
5487
- var Description2 = styled57.p`
5641
+ var Description2 = styled58.p`
5488
5642
  margin: 0;
5489
5643
  font-size: ${tokens.typography.fontSize.xs};
5490
5644
  color: ${tokens.colors.text.tertiary};
5491
5645
  line-height: ${tokens.typography.lineHeight.normal};
5492
5646
  `;
5493
- var ActionsRow = styled57.div`
5647
+ var ActionsRow = styled58.div`
5494
5648
  display: flex;
5495
5649
  flex-direction: column;
5496
5650
  gap: ${tokens.spacing.sm};
@@ -5548,14 +5702,14 @@ var SecretInput = ({
5548
5702
  ] });
5549
5703
  };
5550
5704
  SecretInput.displayName = "SecretInput";
5551
- var Container12 = styled57.div`
5705
+ var Container12 = styled58.div`
5552
5706
  position: relative;
5553
5707
  display: flex;
5554
5708
  align-items: center;
5555
5709
  width: 100%;
5556
5710
  min-width: 0;
5557
5711
  `;
5558
- var Input = styled57.input`
5712
+ var Input = styled58.input`
5559
5713
  width: 100%;
5560
5714
  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
5561
5715
  padding-right: 40px;
@@ -5581,7 +5735,7 @@ var Input = styled57.input`
5581
5735
  cursor: not-allowed;
5582
5736
  }
5583
5737
  `;
5584
- var VisibilityToggle = styled57.button`
5738
+ var VisibilityToggle = styled58.button`
5585
5739
  position: absolute;
5586
5740
  right: ${tokens.spacing.sm};
5587
5741
  top: 50%;
@@ -5717,7 +5871,7 @@ function parseInlineMarkdown(text, startKey) {
5717
5871
  }
5718
5872
  return { elements, nextKey: key };
5719
5873
  }
5720
- var Container13 = styled57.div`
5874
+ var Container13 = styled58.div`
5721
5875
  font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
5722
5876
  white-space: pre-wrap;
5723
5877
  word-break: break-word;
@@ -5782,7 +5936,7 @@ var Container13 = styled57.div`
5782
5936
  h3 { font-size: 1.05em; font-weight: ${tokens.typography.fontWeight.semibold}; }
5783
5937
  h4 { font-size: 1em; font-weight: ${tokens.typography.fontWeight.semibold}; }
5784
5938
  `;
5785
- var Cursor = styled57.span`
5939
+ var Cursor = styled58.span`
5786
5940
  display: inline-block;
5787
5941
  width: 2px;
5788
5942
  height: 1em;
@@ -5838,7 +5992,7 @@ var StreamingTextBase = ({
5838
5992
  };
5839
5993
  var StreamingText = memo(StreamingTextBase);
5840
5994
  StreamingText.displayName = "StreamingText";
5841
- var MessageContainer2 = styled57.div`
5995
+ var MessageContainer2 = styled58.div`
5842
5996
  display: flex;
5843
5997
  flex-direction: column;
5844
5998
  gap: ${tokens.spacing.xs};
@@ -5848,20 +6002,20 @@ var MessageContainer2 = styled57.div`
5848
6002
  will-change: contents;
5849
6003
  contain: content;
5850
6004
  `;
5851
- var AvatarContainer = styled57.div`
6005
+ var AvatarContainer = styled58.div`
5852
6006
  display: flex;
5853
6007
  align-items: center;
5854
6008
  gap: ${tokens.spacing.xs};
5855
6009
  flex-shrink: 0;
5856
6010
  `;
5857
- var Avatar2 = styled57.img`
6011
+ var Avatar2 = styled58.img`
5858
6012
  width: 20px;
5859
6013
  height: 20px;
5860
6014
  border-radius: ${tokens.borderRadius.full};
5861
6015
  object-fit: cover;
5862
6016
  background-color: transparent;
5863
6017
  `;
5864
- var AvatarInitials = styled57.div`
6018
+ var AvatarInitials = styled58.div`
5865
6019
  width: 20px;
5866
6020
  height: 20px;
5867
6021
  border-radius: ${tokens.borderRadius.full};
@@ -5879,16 +6033,16 @@ var AvatarInitials = styled57.div`
5879
6033
  object-fit: contain;
5880
6034
  }
5881
6035
  `;
5882
- var AvatarLabel = styled57.span`
6036
+ var AvatarLabel = styled58.span`
5883
6037
  font-size: ${tokens.typography.fontSize.xs};
5884
6038
  font-weight: ${tokens.typography.fontWeight.medium};
5885
6039
  color: ${tokens.colors.text.secondary};
5886
6040
  `;
5887
- var ContentContainer = styled57.div`
6041
+ var ContentContainer = styled58.div`
5888
6042
  width: 100%;
5889
6043
  min-width: 0;
5890
6044
  `;
5891
- var MessageContent = styled57.div`
6045
+ var MessageContent = styled58.div`
5892
6046
  /* Use solid color instead of backdrop-filter for performance during streaming */
5893
6047
  background-color: ${tokens.colors.surface.elevated};
5894
6048
  padding: ${tokens.spacing.sm};
@@ -5902,7 +6056,7 @@ var MessageContent = styled57.div`
5902
6056
  /* Optimize text rendering */
5903
6057
  text-rendering: optimizeSpeed;
5904
6058
  `;
5905
- var LoadingDots2 = styled57.div`
6059
+ var LoadingDots2 = styled58.div`
5906
6060
  display: flex;
5907
6061
  gap: ${tokens.spacing.xs};
5908
6062
  padding: ${tokens.spacing.sm};
@@ -5919,7 +6073,7 @@ var pulse2 = keyframes`
5919
6073
  opacity: 1;
5920
6074
  }
5921
6075
  `;
5922
- var LoadingDot = styled57.div`
6076
+ var LoadingDot = styled58.div`
5923
6077
  width: ${tokens.spacing.sm};
5924
6078
  height: ${tokens.spacing.sm};
5925
6079
  border-radius: ${tokens.borderRadius.full};
@@ -5928,7 +6082,7 @@ var LoadingDot = styled57.div`
5928
6082
  animation: ${pulse2} 1.4s ease-in-out infinite;
5929
6083
  animation-delay: ${(props) => props.delay}s;
5930
6084
  `;
5931
- var FileAttachmentContainer = styled57.div`
6085
+ var FileAttachmentContainer = styled58.div`
5932
6086
  display: flex;
5933
6087
  align-items: center;
5934
6088
  gap: ${tokens.spacing.sm};
@@ -5964,7 +6118,7 @@ var FileAttachmentContainer = styled57.div`
5964
6118
  }
5965
6119
  `}
5966
6120
  `;
5967
- var FileIconContainer = styled57.div`
6121
+ var FileIconContainer = styled58.div`
5968
6122
  flex-shrink: 0;
5969
6123
  width: ${tokens.spacing.xl};
5970
6124
  height: ${tokens.spacing.xl};
@@ -5974,14 +6128,14 @@ var FileIconContainer = styled57.div`
5974
6128
  font-size: ${tokens.typography.fontSize["2xl"]};
5975
6129
  line-height: 1;
5976
6130
  `;
5977
- var FileInfo = styled57.div`
6131
+ var FileInfo = styled58.div`
5978
6132
  flex: 1;
5979
6133
  min-width: 0;
5980
6134
  display: flex;
5981
6135
  flex-direction: column;
5982
6136
  gap: 2px;
5983
6137
  `;
5984
- var FileTitle = styled57.div`
6138
+ var FileTitle = styled58.div`
5985
6139
  font-size: ${tokens.typography.fontSize.sm};
5986
6140
  font-weight: ${tokens.typography.fontWeight.medium};
5987
6141
  color: ${tokens.colors.text.primary};
@@ -5991,7 +6145,7 @@ var FileTitle = styled57.div`
5991
6145
  text-overflow: ellipsis;
5992
6146
  white-space: nowrap;
5993
6147
  `;
5994
- var FileMetadata = styled57.div`
6148
+ var FileMetadata = styled58.div`
5995
6149
  display: flex;
5996
6150
  align-items: center;
5997
6151
  gap: ${tokens.spacing.xs};
@@ -6001,7 +6155,7 @@ var FileMetadata = styled57.div`
6001
6155
  line-height: ${tokens.typography.lineHeight.tight};
6002
6156
  overflow: hidden;
6003
6157
  `;
6004
- var FileSubtitle = styled57.span`
6158
+ var FileSubtitle = styled58.span`
6005
6159
  color: ${tokens.colors.text.tertiary};
6006
6160
  white-space: nowrap;
6007
6161
  overflow: hidden;
@@ -6057,13 +6211,13 @@ var FileAttachment = ({
6057
6211
  }
6058
6212
  );
6059
6213
  };
6060
- var AttachmentsContainer = styled57.div`
6214
+ var AttachmentsContainer = styled58.div`
6061
6215
  display: flex;
6062
6216
  flex-direction: column;
6063
6217
  gap: ${tokens.spacing.sm};
6064
6218
  margin-top: ${tokens.spacing.sm};
6065
6219
  `;
6066
- var ActionButton2 = styled57.button`
6220
+ var ActionButton3 = styled58.button`
6067
6221
  display: inline-flex;
6068
6222
  align-items: center;
6069
6223
  gap: ${tokens.spacing.xs};
@@ -6087,19 +6241,19 @@ var ActionButton2 = styled57.button`
6087
6241
  transform: scale(0.98);
6088
6242
  }
6089
6243
  `;
6090
- var ActionsContainer = styled57.div`
6244
+ var ActionsContainer = styled58.div`
6091
6245
  display: flex;
6092
6246
  gap: ${tokens.spacing.xs};
6093
6247
  flex-wrap: wrap;
6094
6248
  margin-top: ${tokens.spacing.sm};
6095
6249
  `;
6096
- var MessageTime = styled57.time`
6250
+ var MessageTime = styled58.time`
6097
6251
  font-size: ${tokens.typography.fontSize.xs};
6098
6252
  color: ${tokens.colors.text.tertiary};
6099
6253
  margin-top: ${tokens.spacing.xs};
6100
6254
  display: block;
6101
6255
  `;
6102
- var StreamingIndicator = styled57.span`
6256
+ var StreamingIndicator = styled58.span`
6103
6257
  display: inline-block;
6104
6258
  width: ${tokens.spacing.xs};
6105
6259
  height: ${tokens.spacing.xs};
@@ -6156,7 +6310,7 @@ var AssistantMessageBase = ({
6156
6310
  ] }),
6157
6311
  attachments.length > 0 && /* @__PURE__ */ jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) }),
6158
6312
  timestamp && /* @__PURE__ */ jsx(MessageTime, { children: timestamp }),
6159
- actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton2, { onClick: action.onClick, children: [
6313
+ actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton3, { onClick: action.onClick, children: [
6160
6314
  action.icon,
6161
6315
  action.label
6162
6316
  ] }, index)) })
@@ -6195,11 +6349,11 @@ function stripToolCallMarkers(content) {
6195
6349
  stripped = stripped.replace(/[",]*\s*"[a-z_]+":\s*"[^"]*"\s*\}["]?/gi, "");
6196
6350
  return stripped.trim();
6197
6351
  }
6198
- var GenerativeUIContainer = styled57.div`
6352
+ var GenerativeUIContainer = styled58.div`
6199
6353
  margin-top: ${tokens.spacing.sm};
6200
6354
  margin-bottom: ${tokens.spacing.sm};
6201
6355
  `;
6202
- styled57.div`
6356
+ styled58.div`
6203
6357
  display: flex;
6204
6358
  align-items: center;
6205
6359
  gap: ${tokens.spacing.sm};
@@ -6211,12 +6365,12 @@ styled57.div`
6211
6365
  font-size: ${tokens.typography.fontSize.xs};
6212
6366
  color: ${tokens.colors.text.secondary};
6213
6367
  `;
6214
- styled57.span`
6368
+ styled58.span`
6215
6369
  display: flex;
6216
6370
  align-items: center;
6217
6371
  color: ${tokens.colors.primary};
6218
6372
  `;
6219
- styled57.span`
6373
+ styled58.span`
6220
6374
  font-weight: ${tokens.typography.fontWeight.medium};
6221
6375
  color: ${tokens.colors.text.primary};
6222
6376
  `;
@@ -6357,7 +6511,7 @@ var sizeStyles = {
6357
6511
  height: 44px;
6358
6512
  `
6359
6513
  };
6360
- var StyledButton2 = styled57.button`
6514
+ var StyledButton2 = styled58.button`
6361
6515
  /* Base styles */
6362
6516
  display: inline-flex;
6363
6517
  align-items: center;
@@ -6440,7 +6594,7 @@ function Button2({
6440
6594
  );
6441
6595
  }
6442
6596
  Button2.displayName = "Button";
6443
- var ActionsContainer2 = styled57.div`
6597
+ var ActionsContainer2 = styled58.div`
6444
6598
  display: flex;
6445
6599
  gap: ${tokens.spacing.sm};
6446
6600
  align-items: center;
@@ -6500,7 +6654,7 @@ var blink = keyframes`
6500
6654
  opacity: 0;
6501
6655
  }
6502
6656
  `;
6503
- var ResponseContainer = styled57.div`
6657
+ var ResponseContainer = styled58.div`
6504
6658
  display: inline-flex;
6505
6659
  align-items: center;
6506
6660
  gap: ${tokens.spacing.sm};
@@ -6512,13 +6666,13 @@ var ResponseContainer = styled57.div`
6512
6666
  max-width: fit-content;
6513
6667
  margin: 0 auto;
6514
6668
  `;
6515
- var LoadingDots3 = styled57.div`
6669
+ var LoadingDots3 = styled58.div`
6516
6670
  display: flex;
6517
6671
  align-items: center;
6518
6672
  gap: ${tokens.spacing.xs};
6519
6673
  padding: 0 ${tokens.spacing.xs};
6520
6674
  `;
6521
- var Dot2 = styled57.span`
6675
+ var Dot2 = styled58.span`
6522
6676
  width: ${tokens.spacing.xs};
6523
6677
  height: ${tokens.spacing.xs};
6524
6678
  border-radius: ${tokens.borderRadius.full};
@@ -6526,7 +6680,7 @@ var Dot2 = styled57.span`
6526
6680
  animation: ${dotPulse2} 1.4s ease-in-out infinite;
6527
6681
  animation-delay: ${(props) => props.delay}s;
6528
6682
  `;
6529
- var TypingIndicator = styled57.div`
6683
+ var TypingIndicator = styled58.div`
6530
6684
  display: flex;
6531
6685
  align-items: center;
6532
6686
  gap: ${tokens.spacing.xs};
@@ -6539,14 +6693,14 @@ var TypingIndicator = styled57.div`
6539
6693
  animation: ${dotPulse2} 1.4s ease-in-out infinite;
6540
6694
  }
6541
6695
  `;
6542
- var Message4 = styled57.span`
6696
+ var Message5 = styled58.span`
6543
6697
  font-size: ${tokens.typography.fontSize.sm};
6544
6698
  color: ${tokens.colors.text.primary};
6545
6699
  font-weight: ${tokens.typography.fontWeight.regular};
6546
6700
  line-height: ${tokens.typography.lineHeight.normal};
6547
6701
  white-space: nowrap;
6548
6702
  `;
6549
- var StreamingText2 = styled57.div`
6703
+ var StreamingText2 = styled58.div`
6550
6704
  font-size: ${tokens.typography.fontSize.sm};
6551
6705
  line-height: ${tokens.typography.lineHeight.normal};
6552
6706
  color: ${tokens.colors.text.primary};
@@ -6579,7 +6733,7 @@ var Response = ({
6579
6733
  /* @__PURE__ */ jsx(Dot2, { delay: 0.15 }),
6580
6734
  /* @__PURE__ */ jsx(Dot2, { delay: 0.3 })
6581
6735
  ] }),
6582
- /* @__PURE__ */ jsx(Message4, { children: message })
6736
+ /* @__PURE__ */ jsx(Message5, { children: message })
6583
6737
  ] });
6584
6738
  }
6585
6739
  if (isTyping) {
@@ -6589,7 +6743,7 @@ var Response = ({
6589
6743
  /* @__PURE__ */ jsx(Dot2, { delay: 0.15 }),
6590
6744
  /* @__PURE__ */ jsx(Dot2, { delay: 0.3 })
6591
6745
  ] }),
6592
- /* @__PURE__ */ jsx(Message4, { children: message })
6746
+ /* @__PURE__ */ jsx(Message5, { children: message })
6593
6747
  ] });
6594
6748
  }
6595
6749
  if (isStreaming && streamingContent) {
@@ -6618,7 +6772,7 @@ var shake = keyframes`
6618
6772
  transform: translateX(5px);
6619
6773
  }
6620
6774
  `;
6621
- var AgentStateContainer = styled57.div`
6775
+ var AgentStateContainer = styled58.div`
6622
6776
  display: inline-flex;
6623
6777
  flex-direction: column;
6624
6778
  align-items: center;
@@ -6632,35 +6786,35 @@ var AgentStateContainer = styled57.div`
6632
6786
  max-width: fit-content;
6633
6787
  margin: 0 auto;
6634
6788
  `;
6635
- var StateContent = styled57.div`
6789
+ var StateContent = styled58.div`
6636
6790
  display: flex;
6637
6791
  flex-direction: column;
6638
6792
  gap: ${tokens.spacing.sm};
6639
6793
  align-items: center;
6640
6794
  width: 100%;
6641
6795
  `;
6642
- var IdleIndicator = styled57.div`
6796
+ var IdleIndicator = styled58.div`
6643
6797
  width: ${tokens.spacing.xs};
6644
6798
  height: ${tokens.spacing.xs};
6645
6799
  background-color: ${tokens.colors.status.idle};
6646
6800
  border-radius: ${tokens.borderRadius.full};
6647
6801
  animation: ${dotPulse3} 2s infinite ease-in-out;
6648
6802
  `;
6649
- var ErrorIndicator = styled57.div`
6803
+ var ErrorIndicator = styled58.div`
6650
6804
  width: ${tokens.spacing.xs};
6651
6805
  height: ${tokens.spacing.xs};
6652
6806
  background-color: ${tokens.colors.error};
6653
6807
  border-radius: ${tokens.borderRadius.full};
6654
6808
  animation: ${shake} 0.5s ease-in-out;
6655
6809
  `;
6656
- var StateLabel = styled57.span`
6810
+ var StateLabel = styled58.span`
6657
6811
  font-size: ${tokens.typography.fontSize.sm};
6658
6812
  font-weight: ${tokens.typography.fontWeight.regular};
6659
6813
  color: ${tokens.colors.text.primary};
6660
6814
  line-height: ${tokens.typography.lineHeight.normal};
6661
6815
  white-space: nowrap;
6662
6816
  `;
6663
- styled57.p`
6817
+ styled58.p`
6664
6818
  font-size: ${tokens.typography.fontSize.sm};
6665
6819
  color: ${tokens.colors.text.tertiary};
6666
6820
  line-height: ${tokens.typography.lineHeight.normal};
@@ -6668,7 +6822,7 @@ styled57.p`
6668
6822
  text-align: center;
6669
6823
  white-space: nowrap;
6670
6824
  `;
6671
- var ProgressBar = styled57.div`
6825
+ var ProgressBar = styled58.div`
6672
6826
  width: 100%;
6673
6827
  height: ${tokens.spacing.xs};
6674
6828
  background-color: ${tokens.colors.surface.elevated};
@@ -6676,7 +6830,7 @@ var ProgressBar = styled57.div`
6676
6830
  overflow: hidden;
6677
6831
  margin-top: ${tokens.spacing.xs};
6678
6832
  `;
6679
- var ProgressBarFill2 = styled57.div`
6833
+ var ProgressBarFill2 = styled58.div`
6680
6834
  height: 100%;
6681
6835
  width: ${(props) => Math.min(Math.max(props.progress, 0), 100)}%;
6682
6836
  background: linear-gradient(135deg, ${tokens.colors.accent} 0%, ${tokens.colors.primary} 100%);
@@ -6705,7 +6859,7 @@ var AgentState = ({ state, message, progress, className }) => {
6705
6859
  }
6706
6860
  return null;
6707
6861
  };
6708
- var FooterContainer = styled57.footer`
6862
+ var FooterContainer = styled58.footer`
6709
6863
  display: flex;
6710
6864
  align-items: center;
6711
6865
  justify-content: center;
@@ -6714,7 +6868,7 @@ var FooterContainer = styled57.footer`
6714
6868
  border-top: 1px solid ${tokens.colors.border.default};
6715
6869
  min-height: 44px;
6716
6870
  `;
6717
- var FooterContent = styled57.div`
6871
+ var FooterContent = styled58.div`
6718
6872
  display: flex;
6719
6873
  align-items: center;
6720
6874
  justify-content: space-between;
@@ -6727,13 +6881,13 @@ var FooterContent = styled57.div`
6727
6881
  font-family: ${tokens.typography.fontFamily.primary};
6728
6882
  line-height: ${tokens.typography.lineHeight.tight};
6729
6883
  `;
6730
- var FooterBranding = styled57.div`
6884
+ var FooterBranding = styled58.div`
6731
6885
  display: flex;
6732
6886
  align-items: center;
6733
6887
  gap: ${tokens.spacing.xs};
6734
6888
  flex-shrink: 0;
6735
6889
  `;
6736
- var FooterStatus = styled57.div`
6890
+ var FooterStatus = styled58.div`
6737
6891
  display: flex;
6738
6892
  align-items: center;
6739
6893
  gap: ${tokens.spacing.xs};
@@ -6743,7 +6897,7 @@ var FooterStatus = styled57.div`
6743
6897
  font-size: ${tokens.typography.fontSize.xs};
6744
6898
  opacity: 0.8;
6745
6899
  `;
6746
- var FooterLink = styled57.a`
6900
+ var FooterLink = styled58.a`
6747
6901
  color: ${tokens.colors.primary};
6748
6902
  text-decoration: none;
6749
6903
  transition: opacity ${tokens.transitions.fast};
@@ -6801,7 +6955,7 @@ var pulse3 = keyframes`
6801
6955
  transform: scale(1.1);
6802
6956
  }
6803
6957
  `;
6804
- var Container14 = styled57.div`
6958
+ var Container14 = styled58.div`
6805
6959
  display: inline-flex;
6806
6960
  align-items: center;
6807
6961
  gap: ${(props) => {
@@ -6817,7 +6971,7 @@ var Container14 = styled57.div`
6817
6971
  }};
6818
6972
  font-family: ${tokens.typography.fontFamily.primary};
6819
6973
  `;
6820
- var StatusDot = styled57.div`
6974
+ var StatusDot = styled58.div`
6821
6975
  width: ${(props) => {
6822
6976
  if (props.variant === "badge") {
6823
6977
  switch (props.size) {
@@ -6878,7 +7032,7 @@ var StatusDot = styled57.div`
6878
7032
  animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
6879
7033
  flex-shrink: 0;
6880
7034
  `;
6881
- var Label = styled57.span`
7035
+ var Label = styled58.span`
6882
7036
  font-size: ${(props) => {
6883
7037
  if (props.variant === "badge") {
6884
7038
  switch (props.size) {
@@ -6905,7 +7059,7 @@ var Label = styled57.span`
6905
7059
  color: ${tokens.colors.text.secondary};
6906
7060
  line-height: ${tokens.typography.lineHeight.tight};
6907
7061
  `;
6908
- var BadgeContainer = styled57.div`
7062
+ var BadgeContainer = styled58.div`
6909
7063
  display: inline-flex;
6910
7064
  align-items: center;
6911
7065
  gap: ${(props) => {
@@ -6982,7 +7136,7 @@ var StreamStatusIndicator = ({
6982
7136
  return /* @__PURE__ */ jsx(Container14, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
6983
7137
  };
6984
7138
  StreamStatusIndicator.displayName = "StreamStatusIndicator";
6985
- var HeaderContainer = styled57.header`
7139
+ var HeaderContainer = styled58.header`
6986
7140
  display: flex;
6987
7141
  align-items: center;
6988
7142
  justify-content: space-between;
@@ -6998,14 +7152,14 @@ var HeaderContainer = styled57.header`
6998
7152
  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
6999
7153
  }
7000
7154
  `;
7001
- var HeaderContent = styled57.div`
7155
+ var HeaderContent = styled58.div`
7002
7156
  display: flex;
7003
7157
  flex-direction: column;
7004
7158
  gap: ${tokens.spacing.xs};
7005
7159
  flex: 1;
7006
7160
  min-width: 0;
7007
7161
  `;
7008
- var HeaderTitle = styled57.h1`
7162
+ var HeaderTitle = styled58.h1`
7009
7163
  margin: 0;
7010
7164
  font-size: ${tokens.typography.fontSize.base};
7011
7165
  font-weight: ${tokens.typography.fontWeight.semibold};
@@ -7016,7 +7170,7 @@ var HeaderTitle = styled57.h1`
7016
7170
  text-overflow: ellipsis;
7017
7171
  white-space: nowrap;
7018
7172
  `;
7019
- var HeaderSubtitle = styled57.p`
7173
+ var HeaderSubtitle = styled58.p`
7020
7174
  margin: 0;
7021
7175
  font-size: ${tokens.typography.fontSize.sm};
7022
7176
  color: ${tokens.colors.text.secondary};
@@ -7026,13 +7180,13 @@ var HeaderSubtitle = styled57.p`
7026
7180
  text-overflow: ellipsis;
7027
7181
  white-space: nowrap;
7028
7182
  `;
7029
- var HeaderActions = styled57.div`
7183
+ var HeaderActions = styled58.div`
7030
7184
  display: flex;
7031
7185
  align-items: center;
7032
7186
  gap: ${tokens.spacing.xs};
7033
7187
  margin-left: ${tokens.spacing.md};
7034
7188
  `;
7035
- var ActionButton3 = styled57.button`
7189
+ var ActionButton4 = styled58.button`
7036
7190
  display: inline-flex;
7037
7191
  align-items: center;
7038
7192
  justify-content: center;
@@ -7114,7 +7268,7 @@ var Header = ({
7114
7268
  subtitle && /* @__PURE__ */ jsx(HeaderSubtitle, { children: subtitle })
7115
7269
  ] }),
7116
7270
  /* @__PURE__ */ jsxs(HeaderActions, { children: [
7117
- onMinimize && /* @__PURE__ */ jsx(ActionButton3, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxs(
7271
+ onMinimize && /* @__PURE__ */ jsx(ActionButton4, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxs(
7118
7272
  "svg",
7119
7273
  {
7120
7274
  width: "16",
@@ -7129,7 +7283,7 @@ var Header = ({
7129
7283
  ]
7130
7284
  }
7131
7285
  ) }),
7132
- onClose && /* @__PURE__ */ jsx(ActionButton3, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxs(
7286
+ onClose && /* @__PURE__ */ jsx(ActionButton4, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxs(
7133
7287
  "svg",
7134
7288
  {
7135
7289
  width: "16",
@@ -7149,13 +7303,13 @@ var Header = ({
7149
7303
  ] });
7150
7304
  };
7151
7305
  Header.displayName = "Header";
7152
- var InputContainer = styled57.div`
7306
+ var InputContainer = styled58.div`
7153
7307
  display: flex;
7154
7308
  flex-direction: column;
7155
7309
  width: 100%;
7156
7310
  position: relative;
7157
7311
  `;
7158
- var InputWrapper3 = styled57.div`
7312
+ var InputWrapper3 = styled58.div`
7159
7313
  display: flex;
7160
7314
  align-items: flex-end;
7161
7315
  gap: ${tokens.spacing.sm};
@@ -7175,7 +7329,7 @@ var InputWrapper3 = styled57.div`
7175
7329
  border-color: ${tokens.colors.border.subtle};
7176
7330
  }
7177
7331
  `;
7178
- var TextArea = styled57.textarea`
7332
+ var TextArea = styled58.textarea`
7179
7333
  flex: 1;
7180
7334
  min-height: ${tokens.spacing.lg};
7181
7335
  max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -7221,7 +7375,7 @@ var TextArea = styled57.textarea`
7221
7375
  background: ${tokens.colors.scrollbar.thumbHover};
7222
7376
  }
7223
7377
  `;
7224
- var SendButton = styled57.button`
7378
+ var SendButton = styled58.button`
7225
7379
  display: flex;
7226
7380
  align-items: center;
7227
7381
  justify-content: center;
@@ -7351,7 +7505,7 @@ var Input2 = ({
7351
7505
  )
7352
7506
  ] }) });
7353
7507
  };
7354
- var MessagesContainer = styled57.div`
7508
+ var MessagesContainer = styled58.div`
7355
7509
  display: flex;
7356
7510
  flex-direction: column;
7357
7511
  flex: 1;
@@ -7380,7 +7534,7 @@ var Messages = ({
7380
7534
  return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
7381
7535
  };
7382
7536
  Messages.displayName = "Messages";
7383
- var MessagesListContainer = styled57.div`
7537
+ var MessagesListContainer = styled58.div`
7384
7538
  display: flex;
7385
7539
  flex-direction: column;
7386
7540
  width: 100%;
@@ -7420,7 +7574,7 @@ var MessagesListContainer = styled57.div`
7420
7574
  /* Ensure proper rendering on mobile */
7421
7575
  -webkit-overflow-scrolling: touch;
7422
7576
  `;
7423
- var MessagesListContent = styled57.div`
7577
+ var MessagesListContent = styled58.div`
7424
7578
  display: flex;
7425
7579
  flex-direction: column;
7426
7580
  gap: ${tokens.spacing.sm};
@@ -7536,7 +7690,7 @@ var MessagesList = ({
7536
7690
  }
7537
7691
  );
7538
7692
  };
7539
- var StyledUserMessage2 = styled57.div`
7693
+ var StyledUserMessage2 = styled58.div`
7540
7694
  display: flex;
7541
7695
  justify-content: flex-end;
7542
7696
  align-items: flex-start;
@@ -7544,7 +7698,7 @@ var StyledUserMessage2 = styled57.div`
7544
7698
  padding: 0;
7545
7699
  width: 100%;
7546
7700
  `;
7547
- var MessageBubble = styled57.div`
7701
+ var MessageBubble = styled58.div`
7548
7702
  display: flex;
7549
7703
  flex-direction: column;
7550
7704
  max-width: 85%;
@@ -7571,7 +7725,7 @@ var MessageBubble = styled57.div`
7571
7725
  opacity: 0.9;
7572
7726
  }
7573
7727
  `;
7574
- var MessageContent2 = styled57.p`
7728
+ var MessageContent2 = styled58.p`
7575
7729
  margin: 0;
7576
7730
  font-size: ${tokens.typography.fontSize.sm};
7577
7731
  line-height: ${tokens.typography.lineHeight.normal};
@@ -7580,13 +7734,13 @@ var MessageContent2 = styled57.p`
7580
7734
  word-break: break-word;
7581
7735
  white-space: pre-wrap;
7582
7736
  `;
7583
- var MessageTime2 = styled57.time`
7737
+ var MessageTime2 = styled58.time`
7584
7738
  font-size: ${tokens.typography.fontSize.xs};
7585
7739
  opacity: 0.7;
7586
7740
  margin-top: ${tokens.spacing.xs};
7587
7741
  text-align: right;
7588
7742
  `;
7589
- var ActionButton4 = styled57.button`
7743
+ var ActionButton5 = styled58.button`
7590
7744
  display: inline-flex;
7591
7745
  align-items: center;
7592
7746
  gap: ${tokens.spacing.xs};
@@ -7610,12 +7764,12 @@ var ActionButton4 = styled57.button`
7610
7764
  transform: scale(0.98);
7611
7765
  }
7612
7766
  `;
7613
- var ActionsContainer3 = styled57.div`
7767
+ var ActionsContainer3 = styled58.div`
7614
7768
  display: flex;
7615
7769
  gap: ${tokens.spacing.xs};
7616
7770
  flex-wrap: wrap;
7617
7771
  `;
7618
- var Avatar3 = styled57.img`
7772
+ var Avatar3 = styled58.img`
7619
7773
  width: ${tokens.spacing.xl};
7620
7774
  height: ${tokens.spacing.xl};
7621
7775
  border-radius: ${tokens.borderRadius.full};
@@ -7646,7 +7800,7 @@ var UserMessage2 = ({
7646
7800
  }
7647
7801
  ) }),
7648
7802
  timestamp && /* @__PURE__ */ jsx(MessageTime2, { children: timestamp }),
7649
- actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton4, { onClick: action.onClick, children: [
7803
+ actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton5, { onClick: action.onClick, children: [
7650
7804
  action.icon,
7651
7805
  action.label
7652
7806
  ] }, index)) })
@@ -7654,7 +7808,7 @@ var UserMessage2 = ({
7654
7808
  avatarUrl && /* @__PURE__ */ jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
7655
7809
  ] });
7656
7810
  };
7657
- var ErrorContainer = styled57.div`
7811
+ var ErrorContainer = styled58.div`
7658
7812
  display: flex;
7659
7813
  align-items: flex-start;
7660
7814
  gap: ${tokens.spacing.sm};
@@ -7668,7 +7822,7 @@ var ErrorContainer = styled57.div`
7668
7822
  width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
7669
7823
  max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
7670
7824
  `;
7671
- var IconContainer = styled57.div`
7825
+ var IconContainer = styled58.div`
7672
7826
  flex-shrink: 0;
7673
7827
  width: 20px;
7674
7828
  height: 20px;
@@ -7685,29 +7839,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsx(
7685
7839
  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" })
7686
7840
  }
7687
7841
  );
7688
- var Content2 = styled57.div`
7842
+ var Content2 = styled58.div`
7689
7843
  flex: 1;
7690
7844
  display: flex;
7691
7845
  flex-direction: column;
7692
7846
  gap: ${tokens.spacing.sm};
7693
7847
  `;
7694
- var ErrorMessage3 = styled57.div`
7848
+ var ErrorMessage3 = styled58.div`
7695
7849
  font-size: ${tokens.typography.fontSize.sm};
7696
7850
  line-height: ${tokens.typography.lineHeight.normal};
7697
7851
  color: ${tokens.colors.text.primary};
7698
7852
  `;
7699
- var ErrorDetails = styled57.div`
7853
+ var ErrorDetails = styled58.div`
7700
7854
  font-size: ${tokens.typography.fontSize.xs};
7701
7855
  line-height: 1.4;
7702
7856
  color: ${tokens.colors.text.secondary};
7703
7857
  margin-top: ${tokens.spacing.xs};
7704
7858
  `;
7705
- var Actions2 = styled57.div`
7859
+ var Actions2 = styled58.div`
7706
7860
  display: flex;
7707
7861
  gap: ${tokens.spacing.sm};
7708
7862
  margin-top: ${tokens.spacing.sm};
7709
7863
  `;
7710
- var Button3 = styled57.button`
7864
+ var Button3 = styled58.button`
7711
7865
  display: inline-flex;
7712
7866
  align-items: center;
7713
7867
  gap: ${tokens.spacing.xs};
@@ -7736,7 +7890,7 @@ var Button3 = styled57.button`
7736
7890
  cursor: not-allowed;
7737
7891
  }
7738
7892
  `;
7739
- var CloseButton = styled57.button`
7893
+ var CloseButton = styled58.button`
7740
7894
  flex-shrink: 0;
7741
7895
  width: 24px;
7742
7896
  height: 24px;
@@ -7795,7 +7949,7 @@ var StreamErrorMessage = ({
7795
7949
  ] });
7796
7950
  };
7797
7951
  StreamErrorMessage.displayName = "StreamErrorMessage";
7798
- var SuggestionsContainer = styled57.div`
7952
+ var SuggestionsContainer = styled58.div`
7799
7953
  display: flex;
7800
7954
  flex-wrap: nowrap; /* Single row */
7801
7955
  gap: ${tokens.spacing.sm};
@@ -7828,7 +7982,7 @@ var SuggestionsContainer = styled57.div`
7828
7982
  display: none; /* Chrome/Safari/Opera */
7829
7983
  }
7830
7984
  `;
7831
- var StyledSuggestion = styled57.button`
7985
+ var StyledSuggestion = styled58.button`
7832
7986
  /* Base styles */
7833
7987
  display: inline-flex;
7834
7988
  align-items: center;
@@ -7901,7 +8055,7 @@ function SuggestionChip({ suggestion, onSelect }) {
7901
8055
  return /* @__PURE__ */ jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
7902
8056
  }
7903
8057
  Suggestions.displayName = "Suggestions";
7904
- var WindowContainer = styled57.div`
8058
+ var WindowContainer = styled58.div`
7905
8059
  display: flex;
7906
8060
  flex-direction: column;
7907
8061
  /* Glassmorphism effect */
@@ -8080,7 +8234,7 @@ function FacebookIcon({
8080
8234
  ) });
8081
8235
  }
8082
8236
  FacebookIcon.displayName = "FacebookIcon";
8083
- var StyledIconWrapper = styled57.button`
8237
+ var StyledIconWrapper = styled58.button`
8084
8238
  display: inline-flex;
8085
8239
  align-items: center;
8086
8240
  justify-content: center;
@@ -8350,7 +8504,7 @@ function InstagramIcon({
8350
8504
  ] });
8351
8505
  }
8352
8506
  InstagramIcon.displayName = "InstagramIcon";
8353
- var StyledIconWrapper2 = styled57.button`
8507
+ var StyledIconWrapper2 = styled58.button`
8354
8508
  display: inline-flex;
8355
8509
  align-items: center;
8356
8510
  justify-content: center;
@@ -8486,7 +8640,7 @@ function LinkedInIcon({
8486
8640
  return /* @__PURE__ */ jsx("span", { className, style: { display: "inline-flex", width: size, height: size }, children: svgElement });
8487
8641
  }
8488
8642
  LinkedInIcon.displayName = "LinkedInIcon";
8489
- var StyledIconWrapper3 = styled57.button`
8643
+ var StyledIconWrapper3 = styled58.button`
8490
8644
  display: inline-flex;
8491
8645
  align-items: center;
8492
8646
  justify-content: center;
@@ -9123,7 +9277,7 @@ function WhatsAppIcon({
9123
9277
  );
9124
9278
  }
9125
9279
  WhatsAppIcon.displayName = "WhatsAppIcon";
9126
- var StyledXIcon = styled57.svg`
9280
+ var StyledXIcon = styled58.svg`
9127
9281
  display: inline-block;
9128
9282
  vertical-align: middle;
9129
9283
  flex-shrink: 0;
@@ -9511,9 +9665,9 @@ var PostApprovalControls = ({
9511
9665
  ) })
9512
9666
  ] }),
9513
9667
  /* @__PURE__ */ jsxs(Actions3, { children: [
9514
- /* @__PURE__ */ jsx(ActionButton5, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
9668
+ /* @__PURE__ */ jsx(ActionButton6, { $variant: "cancel", onClick: handleCancelEdit, disabled: isProcessing, children: "Cancel" }),
9515
9669
  onSave && /* @__PURE__ */ jsx(
9516
- ActionButton5,
9670
+ ActionButton6,
9517
9671
  {
9518
9672
  $variant: "save",
9519
9673
  onClick: handleSave,
@@ -9522,7 +9676,7 @@ var PostApprovalControls = ({
9522
9676
  }
9523
9677
  ),
9524
9678
  /* @__PURE__ */ jsx(
9525
- ActionButton5,
9679
+ ActionButton6,
9526
9680
  {
9527
9681
  $variant: "approve",
9528
9682
  onClick: handleApprove,
@@ -9532,14 +9686,14 @@ var PostApprovalControls = ({
9532
9686
  )
9533
9687
  ] })
9534
9688
  ] }) : /* @__PURE__ */ jsxs(Actions3, { children: [
9535
- /* @__PURE__ */ jsx(ActionButton5, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
9536
- /* @__PURE__ */ jsx(ActionButton5, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
9537
- /* @__PURE__ */ jsx(ActionButton5, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
9689
+ /* @__PURE__ */ jsx(ActionButton6, { $variant: "reject", onClick: onReject, disabled: isProcessing, children: "Reject" }),
9690
+ /* @__PURE__ */ jsx(ActionButton6, { $variant: "edit", onClick: handleStartEdit, disabled: isProcessing, children: "Edit" }),
9691
+ /* @__PURE__ */ jsx(ActionButton6, { $variant: "approve", onClick: handleApprove, disabled: isProcessing, children: isProcessing ? "Processing..." : "Approve" })
9538
9692
  ] }) })
9539
9693
  ] });
9540
9694
  };
9541
9695
  PostApprovalControls.displayName = "PostApprovalControls";
9542
- var Container15 = styled57.div`
9696
+ var Container15 = styled58.div`
9543
9697
  display: grid;
9544
9698
  gap: 0;
9545
9699
  background: ${tokens.colors.background.dark};
@@ -9549,7 +9703,7 @@ var Container15 = styled57.div`
9549
9703
  font-family: ${tokens.typography.fontFamily.primary};
9550
9704
  transition: border-color ${tokens.transitions.fast};
9551
9705
  `;
9552
- var Header2 = styled57.div`
9706
+ var Header2 = styled58.div`
9553
9707
  display: grid;
9554
9708
  grid-template-columns: auto 1fr auto;
9555
9709
  align-items: center;
@@ -9563,7 +9717,7 @@ var Header2 = styled57.div`
9563
9717
  background: ${tokens.colors.background.light};
9564
9718
  }
9565
9719
  `;
9566
- var StatusBadge = styled57.span`
9720
+ var StatusBadge = styled58.span`
9567
9721
  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
9568
9722
  border-radius: ${tokens.borderRadius.sm};
9569
9723
  font-size: ${tokens.typography.fontSize.xs};
@@ -9574,23 +9728,23 @@ var StatusBadge = styled57.span`
9574
9728
  color: ${({ $color }) => $color};
9575
9729
  white-space: nowrap;
9576
9730
  `;
9577
- var MetaInfo = styled57.div`
9731
+ var MetaInfo = styled58.div`
9578
9732
  display: flex;
9579
9733
  align-items: center;
9580
9734
  gap: ${tokens.spacing.sm};
9581
9735
  min-width: 0;
9582
9736
  `;
9583
- var PostId = styled57.span`
9737
+ var PostId = styled58.span`
9584
9738
  font-size: ${tokens.typography.fontSize.xs};
9585
9739
  color: ${tokens.colors.text.tertiary};
9586
9740
  font-family: ${tokens.typography.fontFamily.monospace};
9587
9741
  `;
9588
- var ErrorText = styled57.span`
9742
+ var ErrorText = styled58.span`
9589
9743
  font-size: ${tokens.typography.fontSize.xs};
9590
9744
  color: ${tokens.colors.error};
9591
9745
  line-height: ${tokens.typography.lineHeight.tight};
9592
9746
  `;
9593
- var CollapseIcon = styled57.span`
9747
+ var CollapseIcon = styled58.span`
9594
9748
  font-size: ${tokens.typography.fontSize.sm};
9595
9749
  color: ${tokens.colors.text.tertiary};
9596
9750
  font-weight: ${tokens.typography.fontWeight.medium};
@@ -9600,17 +9754,17 @@ var CollapseIcon = styled57.span`
9600
9754
  align-items: center;
9601
9755
  justify-content: center;
9602
9756
  `;
9603
- var Content3 = styled57.div`
9757
+ var Content3 = styled58.div`
9604
9758
  display: grid;
9605
9759
  gap: ${tokens.spacing.md};
9606
9760
  padding: ${tokens.spacing.md};
9607
9761
  border-top: 1px solid ${tokens.colors.border.default};
9608
9762
  `;
9609
- var EditSection = styled57.div`
9763
+ var EditSection = styled58.div`
9610
9764
  display: grid;
9611
9765
  gap: ${tokens.spacing.xs};
9612
9766
  `;
9613
- var EditLabel = styled57.label`
9767
+ var EditLabel = styled58.label`
9614
9768
  display: grid;
9615
9769
  grid-template-columns: 1fr auto;
9616
9770
  align-items: center;
@@ -9619,7 +9773,7 @@ var EditLabel = styled57.label`
9619
9773
  color: ${tokens.colors.text.secondary};
9620
9774
  line-height: ${tokens.typography.lineHeight.tight};
9621
9775
  `;
9622
- var CharCount = styled57.span`
9776
+ var CharCount = styled58.span`
9623
9777
  font-size: ${tokens.typography.fontSize.xs};
9624
9778
  font-weight: ${tokens.typography.fontWeight.semibold};
9625
9779
  font-family: ${tokens.typography.fontFamily.monospace};
@@ -9629,7 +9783,7 @@ var CharCount = styled57.span`
9629
9783
  return tokens.colors.success;
9630
9784
  }};
9631
9785
  `;
9632
- var EditTextarea = styled57.textarea`
9786
+ var EditTextarea = styled58.textarea`
9633
9787
  width: 100%;
9634
9788
  min-height: 100px;
9635
9789
  padding: ${tokens.spacing.sm};
@@ -9659,14 +9813,14 @@ var EditTextarea = styled57.textarea`
9659
9813
  color: ${tokens.colors.text.tertiary};
9660
9814
  }
9661
9815
  `;
9662
- var ProgressBar2 = styled57.div`
9816
+ var ProgressBar2 = styled58.div`
9663
9817
  width: 100%;
9664
9818
  height: 3px;
9665
9819
  background: ${tokens.colors.border.default};
9666
9820
  border-radius: ${tokens.borderRadius.sm};
9667
9821
  overflow: hidden;
9668
9822
  `;
9669
- var ProgressFill = styled57.div`
9823
+ var ProgressFill = styled58.div`
9670
9824
  width: ${({ $percentage }) => $percentage}%;
9671
9825
  height: 100%;
9672
9826
  border-radius: ${tokens.borderRadius.sm};
@@ -9677,12 +9831,12 @@ var ProgressFill = styled57.div`
9677
9831
  return tokens.colors.success;
9678
9832
  }};
9679
9833
  `;
9680
- var Actions3 = styled57.div`
9834
+ var Actions3 = styled58.div`
9681
9835
  display: flex;
9682
9836
  gap: ${tokens.spacing.sm};
9683
9837
  justify-content: flex-end;
9684
9838
  `;
9685
- var ActionButton5 = styled57.button`
9839
+ var ActionButton6 = styled58.button`
9686
9840
  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
9687
9841
  border-radius: ${tokens.borderRadius.md};
9688
9842
  font-size: ${tokens.typography.fontSize.sm};
@@ -9916,7 +10070,7 @@ var fadeIn2 = keyframes`
9916
10070
  transform: translateY(0);
9917
10071
  }
9918
10072
  `;
9919
- var CardContainer = styled57.div`
10073
+ var CardContainer = styled58.div`
9920
10074
  background: ${tokens.colors.background.dark};
9921
10075
  border-radius: ${tokens.borderRadius.xl};
9922
10076
  padding: ${tokens.spacing.md};
@@ -9929,7 +10083,7 @@ var CardContainer = styled57.div`
9929
10083
  border-color: ${({ $platformColor }) => `${$platformColor}80`};
9930
10084
  }
9931
10085
  `;
9932
- var PlatformHeader = styled57.div`
10086
+ var PlatformHeader = styled58.div`
9933
10087
  display: flex;
9934
10088
  align-items: center;
9935
10089
  gap: 10px;
@@ -9937,7 +10091,7 @@ var PlatformHeader = styled57.div`
9937
10091
  padding-bottom: ${tokens.spacing.sm};
9938
10092
  border-bottom: 1px solid ${tokens.colors.border.default};
9939
10093
  `;
9940
- var PlatformIcon = styled57.span`
10094
+ var PlatformIcon = styled58.span`
9941
10095
  display: flex;
9942
10096
  align-items: center;
9943
10097
  justify-content: center;
@@ -9949,13 +10103,13 @@ var PlatformIcon = styled57.span`
9949
10103
  font-size: ${tokens.typography.fontSize.base};
9950
10104
  font-weight: ${tokens.typography.fontWeight.semibold};
9951
10105
  `;
9952
- var PlatformName = styled57.span`
10106
+ var PlatformName = styled58.span`
9953
10107
  flex: 1;
9954
10108
  font-size: ${tokens.typography.fontSize.sm};
9955
10109
  font-weight: ${tokens.typography.fontWeight.semibold};
9956
10110
  color: ${tokens.colors.text.primary};
9957
10111
  `;
9958
- var CharacterBadge = styled57.span`
10112
+ var CharacterBadge = styled58.span`
9959
10113
  padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
9960
10114
  border-radius: ${tokens.borderRadius.lg};
9961
10115
  font-size: 11px;
@@ -9967,10 +10121,10 @@ var CharacterBadge = styled57.span`
9967
10121
  return tokens.colors.success;
9968
10122
  }};
9969
10123
  `;
9970
- var ContentSection = styled57.div`
10124
+ var ContentSection = styled58.div`
9971
10125
  margin-bottom: ${tokens.spacing.sm};
9972
10126
  `;
9973
- var PostContent = styled57.div`
10127
+ var PostContent = styled58.div`
9974
10128
  font-size: ${tokens.typography.fontSize.base};
9975
10129
  font-family: ${tokens.typography.fontFamily.primary};
9976
10130
  line-height: 1.6;
@@ -9982,7 +10136,7 @@ var PostContent = styled57.div`
9982
10136
  /* Smooth fade-in animation when content appears */
9983
10137
  animation: ${fadeIn2} 0.4s ease-out;
9984
10138
  `;
9985
- var PostContentEditable = styled57.textarea`
10139
+ var PostContentEditable = styled58.textarea`
9986
10140
  width: 100%;
9987
10141
  min-height: 180px;
9988
10142
  max-height: 300px;
@@ -10011,12 +10165,12 @@ var PostContentEditable = styled57.textarea`
10011
10165
  color: ${tokens.colors.text.tertiary};
10012
10166
  }
10013
10167
  `;
10014
- var HashtagsContainer = styled57.div`
10168
+ var HashtagsContainer = styled58.div`
10015
10169
  display: flex;
10016
10170
  flex-wrap: wrap;
10017
10171
  gap: 6px;
10018
10172
  `;
10019
- var HashtagPill = styled57.span`
10173
+ var HashtagPill = styled58.span`
10020
10174
  display: inline-block;
10021
10175
  padding: ${tokens.spacing.xs} 10px;
10022
10176
  border-radius: ${tokens.borderRadius.full};
@@ -10033,17 +10187,17 @@ var HashtagPill = styled57.span`
10033
10187
  color: ${tokens.colors.primary};
10034
10188
  }
10035
10189
  `;
10036
- var ProgressBarContainer2 = styled57.div`
10190
+ var ProgressBarContainer2 = styled58.div`
10037
10191
  margin-top: ${tokens.spacing.sm};
10038
10192
  `;
10039
- var ProgressBarTrack = styled57.div`
10193
+ var ProgressBarTrack = styled58.div`
10040
10194
  width: 100%;
10041
10195
  height: 4px;
10042
10196
  background: ${tokens.colors.border.default};
10043
10197
  border-radius: ${tokens.borderRadius.sm};
10044
10198
  overflow: hidden;
10045
10199
  `;
10046
- var ProgressBarFill3 = styled57.div`
10200
+ var ProgressBarFill3 = styled58.div`
10047
10201
  width: ${({ $percentage }) => $percentage}%;
10048
10202
  height: 100%;
10049
10203
  border-radius: ${tokens.borderRadius.sm};
@@ -10054,7 +10208,7 @@ var ProgressBarFill3 = styled57.div`
10054
10208
  return tokens.colors.success;
10055
10209
  }};
10056
10210
  `;
10057
- var ImageChangeButton = styled57.button`
10211
+ var ImageChangeButton = styled58.button`
10058
10212
  display: block;
10059
10213
  width: 100%;
10060
10214
  padding: 0;
@@ -10063,21 +10217,21 @@ var ImageChangeButton = styled57.button`
10063
10217
  cursor: pointer;
10064
10218
  -webkit-tap-highlight-color: transparent;
10065
10219
  `;
10066
- var ImagePreviewContainer = styled57.div`
10220
+ var ImagePreviewContainer = styled58.div`
10067
10221
  position: relative;
10068
10222
  margin-bottom: ${tokens.spacing.sm};
10069
10223
  border-radius: ${tokens.borderRadius.sm};
10070
10224
  overflow: hidden;
10071
10225
  border: 1px solid ${tokens.colors.border.default};
10072
10226
  `;
10073
- var ImagePreview = styled57.img`
10227
+ var ImagePreview = styled58.img`
10074
10228
  width: 100%;
10075
10229
  height: auto;
10076
10230
  max-height: 200px;
10077
10231
  object-fit: cover;
10078
10232
  display: block;
10079
10233
  `;
10080
- var ImageOverlay = styled57.div`
10234
+ var ImageOverlay = styled58.div`
10081
10235
  position: absolute;
10082
10236
  inset: 0;
10083
10237
  background: rgba(0, 0, 0, 0.5);
@@ -10096,12 +10250,12 @@ var ImageOverlay = styled57.div`
10096
10250
  opacity: 0.6;
10097
10251
  }
10098
10252
  `;
10099
- var OverlayText = styled57.span`
10253
+ var OverlayText = styled58.span`
10100
10254
  color: white;
10101
10255
  font-size: ${tokens.typography.fontSize.sm};
10102
10256
  font-weight: ${tokens.typography.fontWeight.semibold};
10103
10257
  `;
10104
- var ImagePlaceholder = styled57.div`
10258
+ var ImagePlaceholder = styled58.div`
10105
10259
  width: 100%;
10106
10260
  height: 200px;
10107
10261
  background: linear-gradient(
@@ -10131,7 +10285,7 @@ var ImagePlaceholder = styled57.div`
10131
10285
  }
10132
10286
  `}
10133
10287
  `;
10134
- var PlaceholderIcon = styled57.div`
10288
+ var PlaceholderIcon = styled58.div`
10135
10289
  width: 48px;
10136
10290
  height: 48px;
10137
10291
  border: 2px solid white;
@@ -10153,13 +10307,13 @@ var shimmer2 = keyframes`
10153
10307
  background-position: 200% 0;
10154
10308
  }
10155
10309
  `;
10156
- var SkeletonContent = styled57.div`
10310
+ var SkeletonContent = styled58.div`
10157
10311
  display: flex;
10158
10312
  flex-direction: column;
10159
10313
  gap: ${tokens.spacing.sm};
10160
10314
  padding: ${tokens.spacing.sm} 0;
10161
10315
  `;
10162
- var SkeletonLine = styled57.div`
10316
+ var SkeletonLine = styled58.div`
10163
10317
  height: 16px;
10164
10318
  width: ${({ $width }) => $width};
10165
10319
  background: linear-gradient(
@@ -10260,13 +10414,13 @@ var PlatformCarousel = ({
10260
10414
  ] });
10261
10415
  };
10262
10416
  PlatformCarousel.displayName = "PlatformCarousel";
10263
- var CarouselContainer = styled57.div`
10417
+ var CarouselContainer = styled58.div`
10264
10418
  display: flex;
10265
10419
  flex-direction: column;
10266
10420
  width: 100%;
10267
10421
  gap: ${tokens.spacing.md};
10268
10422
  `;
10269
- var TabsContainer = styled57.div`
10423
+ var TabsContainer = styled58.div`
10270
10424
  display: flex;
10271
10425
  gap: ${tokens.spacing.sm};
10272
10426
  padding: ${tokens.spacing.sm};
@@ -10280,7 +10434,7 @@ var TabsContainer = styled57.div`
10280
10434
  display: none;
10281
10435
  }
10282
10436
  `;
10283
- var PlatformTab = styled57.button`
10437
+ var PlatformTab = styled58.button`
10284
10438
  display: flex;
10285
10439
  align-items: center;
10286
10440
  gap: ${tokens.spacing.xs};
@@ -10306,17 +10460,17 @@ var PlatformTab = styled57.button`
10306
10460
  box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
10307
10461
  }
10308
10462
  `;
10309
- var PlatformIcon2 = styled57.span`
10463
+ var PlatformIcon2 = styled58.span`
10310
10464
  font-size: ${tokens.typography.fontSize.base};
10311
10465
  color: ${({ $platformColor }) => $platformColor};
10312
10466
  transition: color ${tokens.transitions.fast};
10313
10467
  `;
10314
- var ContentContainer2 = styled57.div`
10468
+ var ContentContainer2 = styled58.div`
10315
10469
  position: relative;
10316
10470
  min-height: 200px;
10317
10471
  overflow: hidden;
10318
10472
  `;
10319
- var Slide = styled57.div`
10473
+ var Slide = styled58.div`
10320
10474
  position: ${({ $isActive }) => $isActive ? "relative" : "absolute"};
10321
10475
  top: 0;
10322
10476
  left: 0;
@@ -10329,13 +10483,13 @@ var Slide = styled57.div`
10329
10483
  transform ${tokens.animation.duration.short} ${tokens.animation.easing.smooth};
10330
10484
  pointer-events: ${({ $isActive }) => $isActive ? "auto" : "none"};
10331
10485
  `;
10332
- var NavigationDotsContainer = styled57.div`
10486
+ var NavigationDotsContainer = styled58.div`
10333
10487
  display: flex;
10334
10488
  justify-content: center;
10335
10489
  gap: ${tokens.spacing.xs};
10336
10490
  padding: ${tokens.spacing.sm};
10337
10491
  `;
10338
- var NavigationDot = styled57.button`
10492
+ var NavigationDot = styled58.button`
10339
10493
  width: ${tokens.spacing.sm};
10340
10494
  height: ${tokens.spacing.sm};
10341
10495
  border-radius: ${tokens.borderRadius.full};
@@ -10355,7 +10509,7 @@ var NavigationDot = styled57.button`
10355
10509
  box-shadow: 0 0 0 2px ${({ $platformColor }) => $platformColor}40;
10356
10510
  }
10357
10511
  `;
10358
- var EmptyState = styled57.div`
10512
+ var EmptyState = styled58.div`
10359
10513
  display: flex;
10360
10514
  align-items: center;
10361
10515
  justify-content: center;
@@ -10414,7 +10568,7 @@ var PlatformGrid = ({
10414
10568
  }) });
10415
10569
  };
10416
10570
  PlatformGrid.displayName = "PlatformGrid";
10417
- var Grid = styled57.div`
10571
+ var Grid = styled58.div`
10418
10572
  display: grid;
10419
10573
  gap: ${tokens.spacing.md};
10420
10574
  width: 100%;
@@ -10434,7 +10588,7 @@ var Grid = styled57.div`
10434
10588
  grid-template-columns: repeat(3, 1fr);
10435
10589
  }
10436
10590
  `;
10437
- var GridCell = styled57.div`
10591
+ var GridCell = styled58.div`
10438
10592
  min-width: 0; /* Prevent grid blowout with long content */
10439
10593
  cursor: pointer;
10440
10594
  border-radius: ${tokens.borderRadius.lg};
@@ -10444,7 +10598,7 @@ var GridCell = styled57.div`
10444
10598
  transform: translateY(-2px);
10445
10599
  }
10446
10600
  `;
10447
- var EmptyState2 = styled57.div`
10601
+ var EmptyState2 = styled58.div`
10448
10602
  display: flex;
10449
10603
  align-items: center;
10450
10604
  justify-content: center;
@@ -10453,12 +10607,12 @@ var EmptyState2 = styled57.div`
10453
10607
  border: 1px dashed ${tokens.colors.border.hover};
10454
10608
  border-radius: ${tokens.borderRadius.lg};
10455
10609
  `;
10456
- var EmptyStateText = styled57.p`
10610
+ var EmptyStateText = styled58.p`
10457
10611
  margin: 0;
10458
10612
  font-size: ${tokens.typography.fontSize.sm};
10459
10613
  color: ${tokens.colors.text.tertiary};
10460
10614
  `;
10461
- var Container16 = styled57.div`
10615
+ var Container16 = styled58.div`
10462
10616
  display: flex;
10463
10617
  flex-direction: column;
10464
10618
  height: 100%;
@@ -10472,7 +10626,7 @@ var Container16 = styled57.div`
10472
10626
  );
10473
10627
  overflow: auto;
10474
10628
  `;
10475
- var Header3 = styled57.div`
10629
+ var Header3 = styled58.div`
10476
10630
  display: flex;
10477
10631
  justify-content: space-between;
10478
10632
  align-items: center;
@@ -10498,7 +10652,7 @@ var Header3 = styled57.div`
10498
10652
  pointer-events: none;
10499
10653
  }
10500
10654
  `;
10501
- var Title = styled57.h2`
10655
+ var Title = styled58.h2`
10502
10656
  margin: 0;
10503
10657
  font-size: ${tokens.typography.fontSize.base};
10504
10658
  font-weight: ${tokens.typography.fontWeight.semibold};
@@ -10508,12 +10662,12 @@ var Title = styled57.h2`
10508
10662
  text-overflow: ellipsis;
10509
10663
  min-width: 0;
10510
10664
  `;
10511
- var ViewToggle = styled57.div`
10665
+ var ViewToggle = styled58.div`
10512
10666
  display: flex;
10513
10667
  gap: ${tokens.spacing.xs};
10514
10668
  flex-shrink: 0;
10515
10669
  `;
10516
- var ToggleButton2 = styled57.button`
10670
+ var ToggleButton2 = styled58.button`
10517
10671
  padding: ${tokens.spacing.xs};
10518
10672
  width: 32px;
10519
10673
  height: 32px;
@@ -10541,7 +10695,7 @@ var ToggleButton2 = styled57.button`
10541
10695
  background: ${({ $active }) => $active ? `${tokens.colors.primary}4D` : tokens.colors.surface.overlayHover};
10542
10696
  }
10543
10697
  `;
10544
- var Content4 = styled57.div`
10698
+ var Content4 = styled58.div`
10545
10699
  flex: 1;
10546
10700
  display: flex;
10547
10701
  flex-direction: column;
@@ -10550,7 +10704,7 @@ var Content4 = styled57.div`
10550
10704
  /* Extra top padding to account for header fade overlay */
10551
10705
  padding-top: ${tokens.spacing.md};
10552
10706
  `;
10553
- var EmptyState3 = styled57.div`
10707
+ var EmptyState3 = styled58.div`
10554
10708
  display: flex;
10555
10709
  flex-direction: column;
10556
10710
  align-items: center;
@@ -10578,7 +10732,7 @@ var EmptyState3 = styled57.div`
10578
10732
  font-size: ${tokens.typography.fontSize.sm};
10579
10733
  }
10580
10734
  `;
10581
- var PostCount = styled57.span`
10735
+ var PostCount = styled58.span`
10582
10736
  font-size: ${tokens.typography.fontSize.sm};
10583
10737
  color: ${tokens.colors.text.tertiary};
10584
10738
  font-weight: ${tokens.typography.fontWeight.regular};
@@ -10829,7 +10983,19 @@ var renderSimpleMarkdown = (text) => {
10829
10983
  }
10830
10984
  if (segment.startsWith("{{CODE:")) {
10831
10985
  const content = segment.slice(7, -2);
10832
- return /* @__PURE__ */ jsx("code", { style: { background: "rgba(255,255,255,0.1)", padding: "0 4px", borderRadius: "3px", fontFamily: "monospace" }, children: content }, i);
10986
+ return /* @__PURE__ */ jsx(
10987
+ "code",
10988
+ {
10989
+ style: {
10990
+ background: "rgba(255,255,255,0.1)",
10991
+ padding: "0 4px",
10992
+ borderRadius: "3px",
10993
+ fontFamily: "monospace"
10994
+ },
10995
+ children: content
10996
+ },
10997
+ i
10998
+ );
10833
10999
  }
10834
11000
  return segment;
10835
11001
  });
@@ -10942,16 +11108,21 @@ var RedditOpportunityCard = ({
10942
11108
  ] }),
10943
11109
  !condensed && opportunity.postContent && /* @__PURE__ */ jsx(PostContent2, { children: truncateText(opportunity.postContent, 300) }),
10944
11110
  /* @__PURE__ */ jsxs(PostAuthor, { children: [
10945
- "Posted by u/",
10946
- opportunity.postAuthor || "unknown",
10947
- opportunity.flair && /* @__PURE__ */ jsx(PostFlair, { children: opportunity.flair })
11111
+ /* @__PURE__ */ jsxs(PostAuthorLine, { children: [
11112
+ /* @__PURE__ */ jsx("span", { children: "Posted by" }),
11113
+ opportunity.flair && /* @__PURE__ */ jsx(PostFlair, { children: opportunity.flair })
11114
+ ] }),
11115
+ /* @__PURE__ */ jsxs(PostAuthorName, { children: [
11116
+ "u/",
11117
+ opportunity.postAuthor || "unknown"
11118
+ ] })
10948
11119
  ] })
10949
11120
  ] }),
10950
11121
  /* @__PURE__ */ jsx(Divider, {}),
10951
11122
  /* @__PURE__ */ jsxs(ReplySection, { children: [
10952
11123
  /* @__PURE__ */ jsxs(ReplySectionHeader, { children: [
10953
11124
  /* @__PURE__ */ jsx(ReplyLabel, { children: "Your Draft Reply" }),
10954
- /* @__PURE__ */ jsxs(ReplyMeta, { children: [
11125
+ /* @__PURE__ */ jsxs(ReplyMetaRow, { children: [
10955
11126
  /* @__PURE__ */ jsx(ToneBadge, { tone: opportunity.toneMatch }),
10956
11127
  /* @__PURE__ */ jsxs(CharacterCount, { $color: charLimitColor, children: [
10957
11128
  charCount,
@@ -10997,13 +11168,13 @@ var shimmer3 = keyframes`
10997
11168
  0% { background-position: -200% 0; }
10998
11169
  100% { background-position: 200% 0; }
10999
11170
  `;
11000
- var Icon2 = styled57.img`
11171
+ var Icon2 = styled58.img`
11001
11172
  width: 14px;
11002
11173
  height: 14px;
11003
11174
  vertical-align: middle;
11004
11175
  opacity: 0.8;
11005
11176
  `;
11006
- var CardContainer2 = styled57.div`
11177
+ var CardContainer2 = styled58.div`
11007
11178
  background: ${tokens.colors.background.dark};
11008
11179
  border-radius: ${tokens.borderRadius.xl};
11009
11180
  padding: ${tokens.spacing.lg};
@@ -11021,7 +11192,7 @@ var CardContainer2 = styled57.div`
11021
11192
  padding: ${tokens.spacing.md};
11022
11193
  }
11023
11194
  `;
11024
- var CardHeader = styled57.div`
11195
+ var CardHeader = styled58.div`
11025
11196
  display: flex;
11026
11197
  justify-content: space-between;
11027
11198
  align-items: center;
@@ -11034,12 +11205,12 @@ var CardHeader = styled57.div`
11034
11205
  align-items: flex-start;
11035
11206
  }
11036
11207
  `;
11037
- var HeaderLeft = styled57.div`
11208
+ var HeaderLeft = styled58.div`
11038
11209
  display: flex;
11039
11210
  align-items: center;
11040
11211
  gap: ${tokens.spacing.sm};
11041
11212
  `;
11042
- var SubredditBadgeContainer = styled57.span`
11213
+ var SubredditBadgeContainer = styled58.span`
11043
11214
  display: inline-flex;
11044
11215
  align-items: center;
11045
11216
  gap: ${tokens.spacing.xs};
@@ -11051,15 +11222,20 @@ var SubredditBadgeContainer = styled57.span`
11051
11222
  color: ${({ $color }) => $color};
11052
11223
  border: 1px solid ${({ $color }) => `${$color}40`};
11053
11224
  transition: all ${tokens.transitions.fast};
11225
+
11226
+ @media (max-width: 480px) {
11227
+ font-size: ${tokens.typography.fontSize.xs};
11228
+ padding: 2px ${tokens.spacing.xs};
11229
+ }
11054
11230
  `;
11055
- var SubredditLink = styled57.a`
11231
+ var SubredditLink = styled58.a`
11056
11232
  text-decoration: none;
11057
11233
 
11058
11234
  &:hover ${SubredditBadgeContainer} {
11059
11235
  background: ${tokens.colors.surface.overlayHover};
11060
11236
  }
11061
11237
  `;
11062
- var ScoreBadgeContainer = styled57.div`
11238
+ var ScoreBadgeContainer = styled58.div`
11063
11239
  display: flex;
11064
11240
  align-items: baseline;
11065
11241
  gap: ${tokens.spacing.xs};
@@ -11067,43 +11243,55 @@ var ScoreBadgeContainer = styled57.div`
11067
11243
  border-radius: ${tokens.borderRadius.md};
11068
11244
  background: ${({ $color }) => `${$color}20`};
11069
11245
  border: 1px solid ${({ $color }) => `${$color}40`};
11246
+
11247
+ @media (max-width: 480px) {
11248
+ padding: 2px ${tokens.spacing.xs};
11249
+ }
11070
11250
  `;
11071
- var ScoreValue = styled57.span`
11251
+ var ScoreValue = styled58.span`
11072
11252
  font-size: ${tokens.typography.fontSize.lg};
11073
11253
  font-weight: ${tokens.typography.fontWeight.bold};
11074
11254
  color: ${tokens.colors.text.primary};
11255
+
11256
+ @media (max-width: 480px) {
11257
+ font-size: ${tokens.typography.fontSize.sm};
11258
+ }
11075
11259
  `;
11076
- var ScoreMax = styled57.span`
11260
+ var ScoreMax = styled58.span`
11077
11261
  font-size: ${tokens.typography.fontSize.xs};
11078
11262
  color: ${tokens.colors.text.tertiary};
11079
11263
  `;
11080
- var ScoreLabel = styled57.span`
11264
+ var ScoreLabel = styled58.span`
11081
11265
  margin-left: ${tokens.spacing.xs};
11082
11266
  font-size: ${tokens.typography.fontSize.xs};
11083
11267
  font-weight: ${tokens.typography.fontWeight.medium};
11084
11268
  color: ${tokens.colors.text.secondary};
11085
11269
  `;
11086
- var StatsContainer = styled57.div`
11270
+ var StatsContainer = styled58.div`
11087
11271
  display: flex;
11088
11272
  align-items: center;
11089
11273
  gap: ${tokens.spacing.xs};
11090
11274
  `;
11091
- var StatItem = styled57.span`
11275
+ var StatItem = styled58.span`
11092
11276
  display: flex;
11093
11277
  align-items: center;
11094
11278
  gap: ${tokens.spacing.xs};
11095
11279
  `;
11096
- var StatValue = styled57.span`
11280
+ var StatValue = styled58.span`
11097
11281
  font-size: ${tokens.typography.fontSize.sm};
11098
11282
  color: ${tokens.colors.text.secondary};
11283
+
11284
+ @media (max-width: 480px) {
11285
+ font-size: ${tokens.typography.fontSize.xs};
11286
+ }
11099
11287
  `;
11100
- var StatDivider = styled57.span`
11288
+ var StatDivider = styled58.span`
11101
11289
  color: ${tokens.colors.text.tertiary};
11102
11290
  `;
11103
- var PostPreviewSection = styled57.div`
11291
+ var PostPreviewSection = styled58.div`
11104
11292
  margin-bottom: ${tokens.spacing.md};
11105
11293
  `;
11106
- var PostTitle = styled57.a`
11294
+ var PostTitle = styled58.a`
11107
11295
  display: flex;
11108
11296
  align-items: flex-start;
11109
11297
  gap: ${tokens.spacing.xs};
@@ -11113,63 +11301,117 @@ var PostTitle = styled57.a`
11113
11301
  text-decoration: none;
11114
11302
  line-height: ${tokens.typography.lineHeight.tight};
11115
11303
  margin-bottom: ${tokens.spacing.sm};
11304
+ word-break: break-word;
11305
+ overflow-wrap: break-word;
11116
11306
 
11117
11307
  &:hover {
11118
11308
  color: ${tokens.colors.primary};
11119
11309
  }
11310
+
11311
+ @media (max-width: 480px) {
11312
+ font-size: ${tokens.typography.fontSize.base};
11313
+ }
11120
11314
  `;
11121
- var ExternalLinkIcon = styled57.span`
11315
+ var ExternalLinkIcon = styled58.span`
11122
11316
  font-size: ${tokens.typography.fontSize.sm};
11123
11317
  color: ${tokens.colors.text.tertiary};
11124
11318
  flex-shrink: 0;
11125
11319
  `;
11126
- var PostContent2 = styled57.p`
11320
+ var PostContent2 = styled58.p`
11127
11321
  font-size: ${tokens.typography.fontSize.base};
11128
11322
  color: ${tokens.colors.text.secondary};
11129
11323
  line-height: ${tokens.typography.lineHeight.relaxed};
11130
11324
  margin-bottom: ${tokens.spacing.sm};
11131
11325
  white-space: pre-wrap;
11326
+ word-break: break-word;
11327
+ overflow-wrap: break-word;
11328
+
11329
+ @media (max-width: 480px) {
11330
+ font-size: ${tokens.typography.fontSize.sm};
11331
+ display: -webkit-box;
11332
+ -webkit-line-clamp: 4;
11333
+ -webkit-box-orient: vertical;
11334
+ overflow: hidden;
11335
+ white-space: normal;
11336
+ }
11132
11337
  `;
11133
- var PostAuthor = styled57.div`
11338
+ var PostAuthor = styled58.div`
11134
11339
  display: flex;
11135
- align-items: center;
11136
- gap: ${tokens.spacing.sm};
11340
+ flex-direction: column;
11341
+ gap: 2px;
11137
11342
  font-size: ${tokens.typography.fontSize.sm};
11138
11343
  color: ${tokens.colors.text.tertiary};
11344
+
11345
+ @media (max-width: 480px) {
11346
+ font-size: ${tokens.typography.fontSize.xs};
11347
+ }
11139
11348
  `;
11140
- var PostFlair = styled57.span`
11141
- padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
11349
+ var PostAuthorLine = styled58.div`
11350
+ display: flex;
11351
+ align-items: center;
11352
+ justify-content: space-between;
11353
+ width: 100%;
11354
+ gap: ${tokens.spacing.sm};
11355
+
11356
+ @media (max-width: 480px) {
11357
+ gap: ${tokens.spacing.xs};
11358
+ }
11359
+ `;
11360
+ var PostAuthorName = styled58.span`
11361
+ color: ${tokens.colors.text.secondary};
11362
+ `;
11363
+ var PostFlair = styled58.span`
11364
+ padding: 2px ${tokens.spacing.xs};
11142
11365
  border-radius: ${tokens.borderRadius.sm};
11143
11366
  background: ${tokens.colors.surface.overlay};
11144
11367
  font-size: ${tokens.typography.fontSize.xs};
11145
11368
  color: ${tokens.colors.text.secondary};
11369
+ white-space: nowrap;
11146
11370
  `;
11147
- var Divider = styled57.hr`
11371
+ var Divider = styled58.hr`
11148
11372
  border: none;
11149
11373
  height: 1px;
11150
11374
  background: ${tokens.colors.border.default};
11151
11375
  margin: ${tokens.spacing.md} 0;
11376
+
11377
+ @media (max-width: 480px) {
11378
+ margin: ${tokens.spacing.sm} 0;
11379
+ }
11152
11380
  `;
11153
- var ReplySection = styled57.div``;
11154
- var ReplySectionHeader = styled57.div`
11381
+ var ReplySection = styled58.div``;
11382
+ var ReplySectionHeader = styled58.div`
11155
11383
  display: flex;
11156
- justify-content: space-between;
11157
- align-items: center;
11384
+ flex-direction: column;
11385
+ gap: ${tokens.spacing.xs};
11158
11386
  margin-bottom: ${tokens.spacing.sm};
11387
+
11388
+ @media (max-width: 480px) {
11389
+ margin-bottom: ${tokens.spacing.xs};
11390
+ }
11391
+ `;
11392
+ var ReplyMetaRow = styled58.div`
11393
+ display: flex;
11394
+ align-items: center;
11395
+ justify-content: space-between;
11396
+ gap: ${tokens.spacing.sm};
11397
+
11398
+ @media (max-width: 480px) {
11399
+ gap: ${tokens.spacing.xs};
11400
+ }
11159
11401
  `;
11160
- var ReplyLabel = styled57.span`
11402
+ var ReplyLabel = styled58.span`
11161
11403
  font-size: ${tokens.typography.fontSize.sm};
11162
11404
  font-weight: ${tokens.typography.fontWeight.semibold};
11163
11405
  color: ${tokens.colors.text.secondary};
11164
11406
  text-transform: uppercase;
11165
11407
  letter-spacing: 0.5px;
11408
+ white-space: nowrap;
11409
+
11410
+ @media (max-width: 480px) {
11411
+ font-size: ${tokens.typography.fontSize.xs};
11412
+ }
11166
11413
  `;
11167
- var ReplyMeta = styled57.div`
11168
- display: flex;
11169
- align-items: center;
11170
- gap: ${tokens.spacing.sm};
11171
- `;
11172
- var ToneBadgeContainer = styled57.span`
11414
+ var ToneBadgeContainer = styled58.span`
11173
11415
  display: inline-flex;
11174
11416
  align-items: center;
11175
11417
  gap: ${tokens.spacing.xs};
@@ -11179,21 +11421,23 @@ var ToneBadgeContainer = styled57.span`
11179
11421
  background: ${({ $color }) => `${$color}20`};
11180
11422
  color: ${({ $color }) => $color};
11181
11423
  `;
11182
- var ToneIcon = styled57.img`
11424
+ var ToneIcon = styled58.img`
11183
11425
  width: 12px;
11184
11426
  height: 12px;
11185
11427
  `;
11186
- var CharacterCount = styled57.span`
11428
+ var CharacterCount = styled58.span`
11187
11429
  font-size: ${tokens.typography.fontSize.xs};
11188
11430
  font-family: ${tokens.typography.fontFamily.monospace};
11189
11431
  font-weight: ${tokens.typography.fontWeight.medium};
11190
11432
  color: ${({ $color }) => $color};
11191
11433
  `;
11192
- var ReplyContent = styled57.div`
11434
+ var ReplyContent = styled58.div`
11193
11435
  font-size: ${tokens.typography.fontSize.base};
11194
11436
  line-height: ${tokens.typography.lineHeight.relaxed};
11195
11437
  color: ${tokens.colors.text.primary};
11196
11438
  white-space: pre-wrap;
11439
+ word-break: break-word;
11440
+ overflow-wrap: break-word;
11197
11441
  padding: ${tokens.spacing.md};
11198
11442
  background: ${tokens.colors.background.darker};
11199
11443
  border-radius: ${tokens.borderRadius.sm};
@@ -11201,8 +11445,14 @@ var ReplyContent = styled57.div`
11201
11445
  margin-bottom: ${tokens.spacing.sm};
11202
11446
  min-height: 100px;
11203
11447
  animation: ${fadeIn3} 0.3s ease-out;
11448
+
11449
+ @media (max-width: 480px) {
11450
+ font-size: ${tokens.typography.fontSize.sm};
11451
+ padding: ${tokens.spacing.sm};
11452
+ min-height: 60px;
11453
+ }
11204
11454
  `;
11205
- var ReplyTextarea = styled57.textarea`
11455
+ var ReplyTextarea = styled58.textarea`
11206
11456
  width: 100%;
11207
11457
  min-height: 150px;
11208
11458
  max-height: 400px;
@@ -11219,6 +11469,13 @@ var ReplyTextarea = styled57.textarea`
11219
11469
  box-sizing: border-box;
11220
11470
  transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
11221
11471
 
11472
+ @media (max-width: 480px) {
11473
+ min-height: 120px;
11474
+ max-height: 250px;
11475
+ font-size: ${tokens.typography.fontSize.sm};
11476
+ padding: ${tokens.spacing.sm};
11477
+ }
11478
+
11222
11479
  &:focus {
11223
11480
  outline: none;
11224
11481
  box-shadow: 0 0 0 3px ${tokens.colors.primary}30;
@@ -11228,7 +11485,7 @@ var ReplyTextarea = styled57.textarea`
11228
11485
  color: ${tokens.colors.text.tertiary};
11229
11486
  }
11230
11487
  `;
11231
- var StrategyHint = styled57.div`
11488
+ var StrategyHint = styled58.div`
11232
11489
  display: flex;
11233
11490
  align-items: flex-start;
11234
11491
  gap: ${tokens.spacing.xs};
@@ -11237,40 +11494,40 @@ var StrategyHint = styled57.div`
11237
11494
  border-radius: ${tokens.borderRadius.sm};
11238
11495
  margin-bottom: ${tokens.spacing.sm};
11239
11496
  `;
11240
- var StrategyIconImg = styled57.img`
11497
+ var StrategyIconImg = styled58.img`
11241
11498
  width: 16px;
11242
11499
  height: 16px;
11243
11500
  opacity: 0.8;
11244
11501
  `;
11245
- var StrategyText = styled57.span`
11502
+ var StrategyText = styled58.span`
11246
11503
  font-size: ${tokens.typography.fontSize.sm};
11247
11504
  color: ${tokens.colors.text.secondary};
11248
11505
  font-style: italic;
11249
11506
  `;
11250
- var ProgressBarContainer3 = styled57.div`
11507
+ var ProgressBarContainer3 = styled58.div`
11251
11508
  margin-top: ${tokens.spacing.xs};
11252
11509
  `;
11253
- var ProgressBarTrack2 = styled57.div`
11510
+ var ProgressBarTrack2 = styled58.div`
11254
11511
  width: 100%;
11255
11512
  height: 4px;
11256
11513
  background: ${tokens.colors.border.default};
11257
11514
  border-radius: ${tokens.borderRadius.sm};
11258
11515
  overflow: hidden;
11259
11516
  `;
11260
- var ProgressBarFill4 = styled57.div`
11517
+ var ProgressBarFill4 = styled58.div`
11261
11518
  width: ${({ $percentage }) => $percentage}%;
11262
11519
  height: 100%;
11263
11520
  border-radius: ${tokens.borderRadius.sm};
11264
11521
  transition: width 0.3s ease, background-color 0.3s ease;
11265
11522
  background: ${({ $color }) => $color};
11266
11523
  `;
11267
- var SkeletonContent2 = styled57.div`
11524
+ var SkeletonContent2 = styled58.div`
11268
11525
  display: flex;
11269
11526
  flex-direction: column;
11270
11527
  gap: ${tokens.spacing.sm};
11271
11528
  padding: ${tokens.spacing.md};
11272
11529
  `;
11273
- var SkeletonLine2 = styled57.div`
11530
+ var SkeletonLine2 = styled58.div`
11274
11531
  height: 16px;
11275
11532
  width: ${({ $width }) => $width};
11276
11533
  background: linear-gradient(
@@ -11333,9 +11590,9 @@ var RedditEngagementControls = ({
11333
11590
  " Editing Mode"
11334
11591
  ] }),
11335
11592
  /* @__PURE__ */ jsxs(EditModeActions, { children: [
11336
- /* @__PURE__ */ jsx(ActionButton6, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
11593
+ /* @__PURE__ */ jsx(ActionButton7, { $variant: "cancel", onClick: onCancelEdit, disabled: isLoading, children: "Cancel" }),
11337
11594
  /* @__PURE__ */ jsx(
11338
- ActionButton6,
11595
+ ActionButton7,
11339
11596
  {
11340
11597
  $variant: "save",
11341
11598
  onClick: () => onSaveEdit(currentReply),
@@ -11363,7 +11620,7 @@ var RedditEngagementControls = ({
11363
11620
  !isEditing && isPending && /* @__PURE__ */ jsxs(MainActions, { children: [
11364
11621
  /* @__PURE__ */ jsxs(SecondaryActions, { children: [
11365
11622
  /* @__PURE__ */ jsxs(
11366
- ActionButton6,
11623
+ ActionButton7,
11367
11624
  {
11368
11625
  $variant: "tertiary",
11369
11626
  onClick: handleRegenerate,
@@ -11376,7 +11633,7 @@ var RedditEngagementControls = ({
11376
11633
  }
11377
11634
  ),
11378
11635
  /* @__PURE__ */ jsxs(
11379
- ActionButton6,
11636
+ ActionButton7,
11380
11637
  {
11381
11638
  $variant: "edit",
11382
11639
  onClick: onToggleEdit,
@@ -11389,7 +11646,7 @@ var RedditEngagementControls = ({
11389
11646
  }
11390
11647
  ),
11391
11648
  /* @__PURE__ */ jsxs(
11392
- ActionButton6,
11649
+ ActionButton7,
11393
11650
  {
11394
11651
  $variant: "skip",
11395
11652
  onClick: handleSkip,
@@ -11404,7 +11661,7 @@ var RedditEngagementControls = ({
11404
11661
  ] }),
11405
11662
  /* @__PURE__ */ jsxs(PrimaryActions, { children: [
11406
11663
  /* @__PURE__ */ jsxs(
11407
- ActionButton6,
11664
+ ActionButton7,
11408
11665
  {
11409
11666
  $variant: isEngaged && !copiedFeedback ? "engaged" : "primary",
11410
11667
  onClick: handleCopyAndOpen,
@@ -11418,7 +11675,7 @@ var RedditEngagementControls = ({
11418
11675
  }
11419
11676
  ),
11420
11677
  /* @__PURE__ */ jsxs(
11421
- ActionButton6,
11678
+ ActionButton7,
11422
11679
  {
11423
11680
  $variant: "success",
11424
11681
  onClick: onMarkPosted,
@@ -11443,7 +11700,7 @@ var pulse4 = keyframes`
11443
11700
  box-shadow: 0 0 0 8px ${tokens.colors.primary}00;
11444
11701
  }
11445
11702
  `;
11446
- var ControlsContainer = styled57.div`
11703
+ var ControlsContainer = styled58.div`
11447
11704
  display: flex;
11448
11705
  flex-direction: column;
11449
11706
  gap: ${tokens.spacing.md};
@@ -11452,7 +11709,7 @@ var ControlsContainer = styled57.div`
11452
11709
  border-radius: ${tokens.borderRadius.lg};
11453
11710
  border: 1px solid ${tokens.colors.border.default};
11454
11711
  `;
11455
- var EditModeSection = styled57.div`
11712
+ var EditModeSection = styled58.div`
11456
11713
  display: flex;
11457
11714
  justify-content: space-between;
11458
11715
  align-items: center;
@@ -11461,25 +11718,25 @@ var EditModeSection = styled57.div`
11461
11718
  border: 1px solid ${tokens.colors.status.editing}40;
11462
11719
  border-radius: ${tokens.borderRadius.md};
11463
11720
  `;
11464
- var EditModeLabel = styled57.span`
11721
+ var EditModeLabel = styled58.span`
11465
11722
  font-size: ${tokens.typography.fontSize.sm};
11466
11723
  font-weight: ${tokens.typography.fontWeight.medium};
11467
11724
  color: ${tokens.colors.status.editing};
11468
11725
  `;
11469
- var EditModeActions = styled57.div`
11726
+ var EditModeActions = styled58.div`
11470
11727
  display: flex;
11471
11728
  gap: ${tokens.spacing.sm};
11472
11729
  `;
11473
- var InputSection = styled57.div`
11730
+ var InputSection = styled58.div`
11474
11731
  display: flex;
11475
11732
  flex-direction: column;
11476
11733
  gap: ${tokens.spacing.xs};
11477
11734
  `;
11478
- var InputLabel = styled57.label`
11735
+ var InputLabel = styled58.label`
11479
11736
  font-size: ${tokens.typography.fontSize.sm};
11480
11737
  color: ${tokens.colors.text.secondary};
11481
11738
  `;
11482
- var InputRow = styled57.div`
11739
+ var InputRow = styled58.div`
11483
11740
  display: flex;
11484
11741
  gap: ${tokens.spacing.xs};
11485
11742
  flex-wrap: wrap;
@@ -11488,7 +11745,7 @@ var InputRow = styled57.div`
11488
11745
  flex-direction: column;
11489
11746
  }
11490
11747
  `;
11491
- var TextInput = styled57.input`
11748
+ var TextInput = styled58.input`
11492
11749
  flex: 1;
11493
11750
  min-width: 0;
11494
11751
  padding: ${tokens.spacing.sm};
@@ -11512,7 +11769,7 @@ var TextInput = styled57.input`
11512
11769
  width: 100%;
11513
11770
  }
11514
11771
  `;
11515
- var SmallButton = styled57.button`
11772
+ var SmallButton = styled58.button`
11516
11773
  padding: ${tokens.spacing.sm};
11517
11774
  font-size: ${tokens.typography.fontSize.base};
11518
11775
  color: ${tokens.colors.text.tertiary};
@@ -11527,12 +11784,12 @@ var SmallButton = styled57.button`
11527
11784
  background: ${tokens.colors.surface.overlay};
11528
11785
  }
11529
11786
  `;
11530
- var MainActions = styled57.div`
11787
+ var MainActions = styled58.div`
11531
11788
  display: flex;
11532
11789
  flex-direction: column;
11533
11790
  gap: ${tokens.spacing.md};
11534
11791
  `;
11535
- var SecondaryActions = styled57.div`
11792
+ var SecondaryActions = styled58.div`
11536
11793
  display: flex;
11537
11794
  gap: ${tokens.spacing.sm};
11538
11795
  flex-wrap: wrap;
@@ -11543,7 +11800,7 @@ var SecondaryActions = styled57.div`
11543
11800
  }
11544
11801
  }
11545
11802
  `;
11546
- var PrimaryActions = styled57.div`
11803
+ var PrimaryActions = styled58.div`
11547
11804
  display: flex;
11548
11805
  gap: ${tokens.spacing.sm};
11549
11806
  flex-wrap: wrap;
@@ -11554,12 +11811,12 @@ var PrimaryActions = styled57.div`
11554
11811
  }
11555
11812
  }
11556
11813
  `;
11557
- var Icon3 = styled57.img`
11814
+ var Icon3 = styled58.img`
11558
11815
  width: 16px;
11559
11816
  height: 16px;
11560
11817
  vertical-align: middle;
11561
11818
  `;
11562
- var ActionButton6 = styled57.button`
11819
+ var ActionButton7 = styled58.button`
11563
11820
  display: flex;
11564
11821
  align-items: center;
11565
11822
  justify-content: center;
@@ -11786,7 +12043,7 @@ function TokenUsageCard({
11786
12043
  onViewAll && transactions.length > 0 && /* @__PURE__ */ jsx(ViewAllButton, { onClick: onViewAll, children: "View all activity" })
11787
12044
  ] });
11788
12045
  }
11789
- var Card2 = styled57.div`
12046
+ var Card2 = styled58.div`
11790
12047
  display: flex;
11791
12048
  flex-direction: column;
11792
12049
  background: ${tokens.colors.background.darker};
@@ -11795,7 +12052,7 @@ var Card2 = styled57.div`
11795
12052
  height: 100%;
11796
12053
  overflow: hidden;
11797
12054
  `;
11798
- var Header4 = styled57.div`
12055
+ var Header4 = styled58.div`
11799
12056
  display: flex;
11800
12057
  justify-content: space-between;
11801
12058
  align-items: center;
@@ -11805,65 +12062,65 @@ var Header4 = styled57.div`
11805
12062
  min-height: 48px;
11806
12063
  flex-shrink: 0;
11807
12064
  `;
11808
- var Title2 = styled57.h3`
12065
+ var Title2 = styled58.h3`
11809
12066
  margin: 0;
11810
12067
  font-size: ${tokens.typography.fontSize.lg};
11811
12068
  font-weight: ${tokens.typography.fontWeight.semibold};
11812
12069
  font-family: ${tokens.typography.fontFamily.primary};
11813
12070
  color: ${tokens.colors.text.primary};
11814
12071
  `;
11815
- var Period = styled57.span`
12072
+ var Period = styled58.span`
11816
12073
  font-size: ${tokens.typography.fontSize.sm};
11817
12074
  font-family: ${tokens.typography.fontFamily.primary};
11818
12075
  color: ${tokens.colors.text.secondary};
11819
12076
  `;
11820
- var UsageSection = styled57.div`
12077
+ var UsageSection = styled58.div`
11821
12078
  display: flex;
11822
12079
  flex-direction: column;
11823
12080
  gap: ${tokens.spacing.sm};
11824
12081
  padding: ${tokens.spacing.md};
11825
12082
  `;
11826
- var UsageStats = styled57.div`
12083
+ var UsageStats = styled58.div`
11827
12084
  display: flex;
11828
12085
  align-items: baseline;
11829
12086
  gap: ${tokens.spacing.xs};
11830
12087
  `;
11831
- var CurrentUsage = styled57.span`
12088
+ var CurrentUsage = styled58.span`
11832
12089
  font-size: ${tokens.typography.fontSize["2xl"]};
11833
12090
  font-weight: ${tokens.typography.fontWeight.bold};
11834
12091
  font-family: ${tokens.typography.fontFamily.primary};
11835
12092
  color: ${tokens.colors.text.primary};
11836
12093
  `;
11837
- var UsageSeparator = styled57.span`
12094
+ var UsageSeparator = styled58.span`
11838
12095
  font-size: ${tokens.typography.fontSize.lg};
11839
12096
  font-family: ${tokens.typography.fontFamily.primary};
11840
12097
  color: ${tokens.colors.text.tertiary};
11841
12098
  `;
11842
- var MaxUsage = styled57.span`
12099
+ var MaxUsage = styled58.span`
11843
12100
  font-size: ${tokens.typography.fontSize.lg};
11844
12101
  font-family: ${tokens.typography.fontFamily.primary};
11845
12102
  color: ${tokens.colors.text.secondary};
11846
12103
  `;
11847
- var ProgressContainer = styled57.div`
12104
+ var ProgressContainer = styled58.div`
11848
12105
  width: 100%;
11849
12106
  height: 8px;
11850
12107
  background: ${tokens.colors.background.light};
11851
12108
  border-radius: ${tokens.borderRadius.full};
11852
12109
  overflow: hidden;
11853
12110
  `;
11854
- var ProgressBar3 = styled57.div`
12111
+ var ProgressBar3 = styled58.div`
11855
12112
  height: 100%;
11856
12113
  width: ${({ $percentage }) => $percentage}%;
11857
12114
  background: ${({ $level }) => usageLevelColors[$level]};
11858
12115
  border-radius: ${tokens.borderRadius.full};
11859
12116
  transition: width ${tokens.transitions.normal}, background ${tokens.transitions.normal};
11860
12117
  `;
11861
- var PercentageLabel = styled57.span`
12118
+ var PercentageLabel = styled58.span`
11862
12119
  font-size: ${tokens.typography.fontSize.sm};
11863
12120
  font-family: ${tokens.typography.fontFamily.primary};
11864
12121
  color: ${({ $level }) => usageLevelColors[$level]};
11865
12122
  `;
11866
- var TransactionsSection = styled57.div`
12123
+ var TransactionsSection = styled58.div`
11867
12124
  display: flex;
11868
12125
  flex-direction: column;
11869
12126
  gap: ${tokens.spacing.sm};
@@ -11873,19 +12130,19 @@ var TransactionsSection = styled57.div`
11873
12130
  overflow-y: auto;
11874
12131
  min-height: 0;
11875
12132
  `;
11876
- var TransactionsHeader = styled57.h4`
12133
+ var TransactionsHeader = styled58.h4`
11877
12134
  margin: 0;
11878
12135
  font-size: ${tokens.typography.fontSize.sm};
11879
12136
  font-weight: ${tokens.typography.fontWeight.semibold};
11880
12137
  font-family: ${tokens.typography.fontFamily.primary};
11881
12138
  color: ${tokens.colors.text.secondary};
11882
12139
  `;
11883
- var TransactionsList = styled57.div`
12140
+ var TransactionsList = styled58.div`
11884
12141
  display: flex;
11885
12142
  flex-direction: column;
11886
12143
  gap: ${tokens.spacing.sm};
11887
12144
  `;
11888
- var TransactionItem = styled57.div`
12145
+ var TransactionItem = styled58.div`
11889
12146
  display: flex;
11890
12147
  align-items: center;
11891
12148
  gap: ${tokens.spacing.sm};
@@ -11902,7 +12159,7 @@ var TransactionItem = styled57.div`
11902
12159
  border-color: ${tokens.colors.border.hover};
11903
12160
  }
11904
12161
  `;
11905
- var TransactionIcon = styled57.span`
12162
+ var TransactionIcon = styled58.span`
11906
12163
  width: 24px;
11907
12164
  height: 24px;
11908
12165
  display: flex;
@@ -11924,12 +12181,12 @@ var TransactionIcon = styled57.span`
11924
12181
  }};
11925
12182
  }
11926
12183
  `;
11927
- var TransactionInfo = styled57.div`
12184
+ var TransactionInfo = styled58.div`
11928
12185
  flex: 1;
11929
12186
  min-width: 0;
11930
12187
  overflow: hidden;
11931
12188
  `;
11932
- var TransactionDescription = styled57.div`
12189
+ var TransactionDescription = styled58.div`
11933
12190
  font-size: ${tokens.typography.fontSize.sm};
11934
12191
  font-family: ${tokens.typography.fontFamily.primary};
11935
12192
  color: ${tokens.colors.text.primary};
@@ -11937,7 +12194,7 @@ var TransactionDescription = styled57.div`
11937
12194
  text-overflow: ellipsis;
11938
12195
  white-space: nowrap;
11939
12196
  `;
11940
- var TransactionMeta = styled57.div`
12197
+ var TransactionMeta = styled58.div`
11941
12198
  display: flex;
11942
12199
  gap: ${tokens.spacing.sm};
11943
12200
  font-size: ${tokens.typography.fontSize.xs};
@@ -11951,21 +12208,21 @@ var TransactionMeta = styled57.div`
11951
12208
  white-space: nowrap;
11952
12209
  }
11953
12210
  `;
11954
- var TransactionTokens = styled57.span`
12211
+ var TransactionTokens = styled58.span`
11955
12212
  font-size: ${tokens.typography.fontSize.sm};
11956
12213
  font-weight: ${tokens.typography.fontWeight.medium};
11957
12214
  font-family: ${tokens.typography.fontFamily.primary};
11958
12215
  color: ${({ $type }) => typeColors[$type]};
11959
12216
  flex-shrink: 0;
11960
12217
  `;
11961
- var EmptyState4 = styled57.div`
12218
+ var EmptyState4 = styled58.div`
11962
12219
  text-align: center;
11963
12220
  padding: ${tokens.spacing.lg} ${tokens.spacing.md};
11964
12221
  font-size: ${tokens.typography.fontSize.sm};
11965
12222
  font-family: ${tokens.typography.fontFamily.primary};
11966
12223
  color: ${tokens.colors.text.tertiary};
11967
12224
  `;
11968
- var ViewAllButton = styled57.button`
12225
+ var ViewAllButton = styled58.button`
11969
12226
  margin: 0 ${tokens.spacing.md} ${tokens.spacing.md};
11970
12227
  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
11971
12228
  background: transparent;
@@ -11987,7 +12244,7 @@ var pulse5 = keyframes`
11987
12244
  0%, 100% { opacity: 1; }
11988
12245
  50% { opacity: 0.4; }
11989
12246
  `;
11990
- var SkeletonBlock = styled57.div`
12247
+ var SkeletonBlock = styled58.div`
11991
12248
  width: ${({ $width }) => $width};
11992
12249
  height: ${({ $height }) => $height};
11993
12250
  background: ${tokens.colors.background.light};
@@ -12075,7 +12332,7 @@ var WorkflowCard = ({
12075
12332
  );
12076
12333
  };
12077
12334
  WorkflowCard.displayName = "WorkflowCard";
12078
- var Card3 = styled57.button`
12335
+ var Card3 = styled58.button`
12079
12336
  display: grid;
12080
12337
  gap: ${tokens.spacing.sm};
12081
12338
  padding: ${tokens.spacing.md};
@@ -12106,7 +12363,7 @@ var Card3 = styled57.button`
12106
12363
  cursor: not-allowed;
12107
12364
  }
12108
12365
  `;
12109
- var WorkflowName2 = styled57.h3`
12366
+ var WorkflowName2 = styled58.h3`
12110
12367
  margin: 0;
12111
12368
  font-size: ${tokens.typography.fontSize.base};
12112
12369
  font-weight: ${tokens.typography.fontWeight.semibold};
@@ -12117,7 +12374,7 @@ var WorkflowName2 = styled57.h3`
12117
12374
  white-space: nowrap;
12118
12375
  min-width: 0;
12119
12376
  `;
12120
- var Description3 = styled57.p`
12377
+ var Description3 = styled58.p`
12121
12378
  margin: 0;
12122
12379
  font-size: ${tokens.typography.fontSize.sm};
12123
12380
  color: ${tokens.colors.text.tertiary};
@@ -12129,7 +12386,7 @@ var Description3 = styled57.p`
12129
12386
  word-break: break-word;
12130
12387
  min-width: 0;
12131
12388
  `;
12132
- var CardFooter = styled57.div`
12389
+ var CardFooter = styled58.div`
12133
12390
  display: flex;
12134
12391
  flex-wrap: wrap;
12135
12392
  align-items: center;
@@ -12138,13 +12395,13 @@ var CardFooter = styled57.div`
12138
12395
  border-top: 1px solid ${tokens.colors.border.subtle};
12139
12396
  width: 100%;
12140
12397
  `;
12141
- var IntegrationList = styled57.div`
12398
+ var IntegrationList = styled58.div`
12142
12399
  display: flex;
12143
12400
  align-items: center;
12144
12401
  gap: ${tokens.spacing.xs};
12145
12402
  flex-shrink: 0;
12146
12403
  `;
12147
- var IntegrationIconWrapper = styled57.span`
12404
+ var IntegrationIconWrapper = styled58.span`
12148
12405
  display: flex;
12149
12406
  align-items: center;
12150
12407
  justify-content: center;
@@ -12166,12 +12423,12 @@ var IntegrationIconWrapper = styled57.span`
12166
12423
  }
12167
12424
  `}
12168
12425
  `;
12169
- var IntegrationIcon = styled57.img`
12426
+ var IntegrationIcon = styled58.img`
12170
12427
  width: 16px;
12171
12428
  height: 16px;
12172
12429
  object-fit: contain;
12173
12430
  `;
12174
- var Indicators = styled57.div`
12431
+ var Indicators = styled58.div`
12175
12432
  display: flex;
12176
12433
  align-items: center;
12177
12434
  flex-wrap: wrap;
@@ -12179,7 +12436,7 @@ var Indicators = styled57.div`
12179
12436
  margin-left: auto;
12180
12437
  min-width: 0;
12181
12438
  `;
12182
- var IndicatorPill = styled57.span`
12439
+ var IndicatorPill = styled58.span`
12183
12440
  display: inline-flex;
12184
12441
  align-items: center;
12185
12442
  gap: ${tokens.spacing.xs};
@@ -12188,14 +12445,14 @@ var IndicatorPill = styled57.span`
12188
12445
  background: ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}15` : `${tokens.colors.info}15`};
12189
12446
  border: 1px solid ${({ $variant }) => $variant === "warning" ? `${tokens.colors.warning}30` : `${tokens.colors.info}30`};
12190
12447
  `;
12191
- var IndicatorDot = styled57.span`
12448
+ var IndicatorDot = styled58.span`
12192
12449
  width: 6px;
12193
12450
  height: 6px;
12194
12451
  border-radius: ${tokens.borderRadius.full};
12195
12452
  background: ${({ $variant }) => $variant === "warning" ? tokens.colors.warning : tokens.colors.info};
12196
12453
  flex-shrink: 0;
12197
12454
  `;
12198
- var IndicatorText = styled57.span`
12455
+ var IndicatorText = styled58.span`
12199
12456
  font-size: ${tokens.typography.fontSize.xs};
12200
12457
  font-weight: ${tokens.typography.fontWeight.medium};
12201
12458
  color: ${tokens.colors.text.secondary};
@@ -12206,7 +12463,7 @@ var severityColors = {
12206
12463
  warning: tokens.colors.warning,
12207
12464
  info: tokens.colors.info
12208
12465
  };
12209
- var AlertContainer = styled57.div`
12466
+ var AlertContainer = styled58.div`
12210
12467
  display: flex;
12211
12468
  flex-direction: column;
12212
12469
  background-color: ${(props) => {
@@ -12224,7 +12481,7 @@ var AlertContainer = styled57.div`
12224
12481
  max-width: ${(props) => props.variant === "inline" ? "600px" : "100%"};
12225
12482
  font-family: ${tokens.typography.fontFamily.primary};
12226
12483
  `;
12227
- var ModalOverlay = styled57.div`
12484
+ var ModalOverlay = styled58.div`
12228
12485
  position: fixed;
12229
12486
  top: 0;
12230
12487
  left: 0;
@@ -12237,53 +12494,53 @@ var ModalOverlay = styled57.div`
12237
12494
  z-index: ${tokens.zIndex.modal};
12238
12495
  padding: ${tokens.spacing.lg};
12239
12496
  `;
12240
- var ModalContent = styled57.div`
12497
+ var ModalContent = styled58.div`
12241
12498
  background-color: ${tokens.colors.background.dark};
12242
12499
  border-radius: ${tokens.borderRadius.lg};
12243
12500
  max-width: 500px;
12244
12501
  width: 100%;
12245
12502
  box-shadow: ${tokens.shadows.xl};
12246
12503
  `;
12247
- var Header5 = styled57.div`
12504
+ var Header5 = styled58.div`
12248
12505
  display: flex;
12249
12506
  align-items: flex-start;
12250
12507
  gap: ${tokens.spacing.md};
12251
12508
  `;
12252
- var IconContainer2 = styled57.div`
12509
+ var IconContainer2 = styled58.div`
12253
12510
  flex-shrink: 0;
12254
12511
  width: 24px;
12255
12512
  height: 24px;
12256
12513
  color: ${(props) => severityColors[props.severity]};
12257
12514
  `;
12258
- var Content5 = styled57.div`
12515
+ var Content5 = styled58.div`
12259
12516
  flex: 1;
12260
12517
  display: flex;
12261
12518
  flex-direction: column;
12262
12519
  gap: ${tokens.spacing.sm};
12263
12520
  `;
12264
- var Title3 = styled57.div`
12521
+ var Title3 = styled58.div`
12265
12522
  font-size: ${tokens.typography.fontSize.base};
12266
12523
  font-weight: ${tokens.typography.fontWeight.semibold};
12267
12524
  color: ${tokens.colors.text.primary};
12268
12525
  line-height: ${tokens.typography.lineHeight.tight};
12269
12526
  `;
12270
- var ErrorMessage4 = styled57.div`
12527
+ var ErrorMessage4 = styled58.div`
12271
12528
  font-size: ${tokens.typography.fontSize.sm};
12272
12529
  line-height: ${tokens.typography.lineHeight.normal};
12273
12530
  color: ${tokens.colors.text.secondary};
12274
12531
  `;
12275
- var ErrorCode = styled57.div`
12532
+ var ErrorCode = styled58.div`
12276
12533
  font-size: ${tokens.typography.fontSize.xs};
12277
12534
  color: ${tokens.colors.text.secondary};
12278
12535
  font-family: ${tokens.typography.fontFamily.monospace};
12279
12536
  margin-top: ${tokens.spacing.xs};
12280
12537
  `;
12281
- var Timestamp = styled57.div`
12538
+ var Timestamp = styled58.div`
12282
12539
  font-size: ${tokens.typography.fontSize.xs};
12283
12540
  color: ${tokens.colors.text.tertiary};
12284
12541
  margin-top: ${tokens.spacing.xs};
12285
12542
  `;
12286
- var Details = styled57.details`
12543
+ var Details = styled58.details`
12287
12544
  margin-top: ${tokens.spacing.md};
12288
12545
  cursor: pointer;
12289
12546
 
@@ -12306,12 +12563,12 @@ var Details = styled57.details`
12306
12563
  }
12307
12564
  }
12308
12565
  `;
12309
- var DetailsIcon = styled57.span`
12566
+ var DetailsIcon = styled58.span`
12310
12567
  display: inline-block;
12311
12568
  transition: transform ${tokens.transitions.fast};
12312
12569
  transform: ${(props) => props.open ? "rotate(90deg)" : "rotate(0deg)"};
12313
12570
  `;
12314
- var StackTrace = styled57.pre`
12571
+ var StackTrace = styled58.pre`
12315
12572
  margin: ${tokens.spacing.sm} 0 0 0;
12316
12573
  padding: ${tokens.spacing.md};
12317
12574
  background-color: ${tokens.colors.surface.subtle};
@@ -12324,12 +12581,12 @@ var StackTrace = styled57.pre`
12324
12581
  word-break: break-word;
12325
12582
  overflow-x: auto;
12326
12583
  `;
12327
- var Actions4 = styled57.div`
12584
+ var Actions4 = styled58.div`
12328
12585
  display: flex;
12329
12586
  gap: ${tokens.spacing.sm};
12330
12587
  margin-top: ${tokens.spacing.md};
12331
12588
  `;
12332
- var Button4 = styled57.button`
12589
+ var Button4 = styled58.button`
12333
12590
  display: inline-flex;
12334
12591
  align-items: center;
12335
12592
  gap: ${tokens.spacing.xs};
@@ -12358,7 +12615,7 @@ var Button4 = styled57.button`
12358
12615
  cursor: not-allowed;
12359
12616
  }
12360
12617
  `;
12361
- var CloseButton2 = styled57.button`
12618
+ var CloseButton2 = styled58.button`
12362
12619
  position: absolute;
12363
12620
  top: ${tokens.spacing.md};
12364
12621
  right: ${tokens.spacing.md};
@@ -12542,14 +12799,14 @@ var statusColors2 = {
12542
12799
  failed: tokens.colors.status.failed,
12543
12800
  timeout: tokens.colors.status.timeout
12544
12801
  };
12545
- var Container17 = styled57.div`
12802
+ var Container17 = styled58.div`
12546
12803
  display: flex;
12547
12804
  flex-direction: column;
12548
12805
  gap: ${tokens.spacing.sm};
12549
12806
  width: 100%;
12550
12807
  font-family: ${tokens.typography.fontFamily.primary};
12551
12808
  `;
12552
- var ProgressMessage = styled57.div`
12809
+ var ProgressMessage = styled58.div`
12553
12810
  font-size: ${(props) => {
12554
12811
  switch (props.size) {
12555
12812
  case "sm":
@@ -12564,13 +12821,13 @@ var ProgressMessage = styled57.div`
12564
12821
  color: ${tokens.colors.text.secondary};
12565
12822
  line-height: ${tokens.typography.lineHeight.normal};
12566
12823
  `;
12567
- var ProgressInfo = styled57.div`
12824
+ var ProgressInfo = styled58.div`
12568
12825
  display: flex;
12569
12826
  justify-content: space-between;
12570
12827
  align-items: center;
12571
12828
  margin-bottom: ${tokens.spacing.xs};
12572
12829
  `;
12573
- var PercentageText = styled57.span`
12830
+ var PercentageText = styled58.span`
12574
12831
  font-size: ${(props) => {
12575
12832
  switch (props.size) {
12576
12833
  case "sm":
@@ -12585,7 +12842,7 @@ var PercentageText = styled57.span`
12585
12842
  font-weight: ${tokens.typography.fontWeight.medium};
12586
12843
  color: ${tokens.colors.text.primary};
12587
12844
  `;
12588
- var LinearTrack = styled57.div`
12845
+ var LinearTrack = styled58.div`
12589
12846
  position: relative;
12590
12847
  width: 100%;
12591
12848
  height: ${(props) => {
@@ -12603,7 +12860,7 @@ var LinearTrack = styled57.div`
12603
12860
  border-radius: ${tokens.borderRadius.full};
12604
12861
  overflow: hidden;
12605
12862
  `;
12606
- var LinearFill = styled57.div`
12863
+ var LinearFill = styled58.div`
12607
12864
  position: absolute;
12608
12865
  top: 0;
12609
12866
  left: 0;
@@ -12614,12 +12871,12 @@ var LinearFill = styled57.div`
12614
12871
  transition: ${(props) => props.animated && !props.indeterminate ? `width ${tokens.transitions.normal}` : "none"};
12615
12872
  animation: ${(props) => props.indeterminate ? indeterminate : "none"} 1.5s ease-in-out infinite;
12616
12873
  `;
12617
- var CircularContainer = styled57.div`
12874
+ var CircularContainer = styled58.div`
12618
12875
  display: flex;
12619
12876
  align-items: center;
12620
12877
  justify-content: center;
12621
12878
  `;
12622
- var CircularSvg = styled57.svg`
12879
+ var CircularSvg = styled58.svg`
12623
12880
  width: ${(props) => {
12624
12881
  switch (props.size) {
12625
12882
  case "sm":
@@ -12655,12 +12912,12 @@ var getCircularSize = (size) => {
12655
12912
  return { radius: 26, strokeWidth: 4 };
12656
12913
  }
12657
12914
  };
12658
- var CircularTrack = styled57.circle`
12915
+ var CircularTrack = styled58.circle`
12659
12916
  fill: none;
12660
12917
  stroke: ${tokens.colors.border.default};
12661
12918
  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
12662
12919
  `;
12663
- var CircularFill = styled57.circle`
12920
+ var CircularFill = styled58.circle`
12664
12921
  fill: none;
12665
12922
  stroke: ${(props) => statusColors2[props.status]};
12666
12923
  stroke-width: ${(props) => getCircularSize(props.size).strokeWidth};
@@ -12678,7 +12935,7 @@ var CircularFill = styled57.circle`
12678
12935
  transition: ${(props) => props.animated && !props.indeterminate ? `stroke-dashoffset ${tokens.transitions.normal}` : "none"};
12679
12936
  animation: ${(props) => props.indeterminate ? rotate : "none"} 1.5s linear infinite;
12680
12937
  `;
12681
- var CircularPercentage = styled57.text`
12938
+ var CircularPercentage = styled58.text`
12682
12939
  fill: ${tokens.colors.text.primary};
12683
12940
  font-size: ${(props) => {
12684
12941
  switch (props.size) {
@@ -12779,7 +13036,7 @@ var WorkflowProgressBar = ({
12779
13036
  ] });
12780
13037
  };
12781
13038
  WorkflowProgressBar.displayName = "WorkflowProgressBar";
12782
- var Panel = styled57.div`
13039
+ var Panel = styled58.div`
12783
13040
  display: flex;
12784
13041
  flex-direction: column;
12785
13042
  background-color: ${tokens.colors.surface.overlay};
@@ -12788,7 +13045,7 @@ var Panel = styled57.div`
12788
13045
  overflow: hidden;
12789
13046
  font-family: ${tokens.typography.fontFamily.primary};
12790
13047
  `;
12791
- var Header6 = styled57.div`
13048
+ var Header6 = styled58.div`
12792
13049
  display: flex;
12793
13050
  justify-content: space-between;
12794
13051
  align-items: center;
@@ -12802,7 +13059,7 @@ var Header6 = styled57.div`
12802
13059
  background-color: ${(props) => props.collapsible ? tokens.colors.surface.overlay : tokens.colors.surface.subtle};
12803
13060
  }
12804
13061
  `;
12805
- var Title4 = styled57.div`
13062
+ var Title4 = styled58.div`
12806
13063
  font-size: ${tokens.typography.fontSize.sm};
12807
13064
  font-weight: ${tokens.typography.fontWeight.medium};
12808
13065
  color: ${tokens.colors.text.primary};
@@ -12810,11 +13067,11 @@ var Title4 = styled57.div`
12810
13067
  align-items: center;
12811
13068
  gap: ${tokens.spacing.sm};
12812
13069
  `;
12813
- var Actions5 = styled57.div`
13070
+ var Actions5 = styled58.div`
12814
13071
  display: flex;
12815
13072
  gap: ${tokens.spacing.sm};
12816
13073
  `;
12817
- var IconButton = styled57.button`
13074
+ var IconButton = styled58.button`
12818
13075
  display: flex;
12819
13076
  align-items: center;
12820
13077
  justify-content: center;
@@ -12843,7 +13100,7 @@ var IconButton = styled57.button`
12843
13100
  height: 16px;
12844
13101
  }
12845
13102
  `;
12846
- var CollapseIcon2 = styled57.div`
13103
+ var CollapseIcon2 = styled58.div`
12847
13104
  display: flex;
12848
13105
  align-items: center;
12849
13106
  justify-content: center;
@@ -12856,7 +13113,7 @@ var CollapseIcon2 = styled57.div`
12856
13113
  height: 16px;
12857
13114
  }
12858
13115
  `;
12859
- var Content6 = styled57.div`
13116
+ var Content6 = styled58.div`
12860
13117
  padding: ${tokens.spacing.md};
12861
13118
  max-height: ${(props) => {
12862
13119
  if (!props.expanded) return "0";
@@ -12884,7 +13141,7 @@ var Content6 = styled57.div`
12884
13141
  background: ${tokens.colors.scrollbar.thumbHover};
12885
13142
  }
12886
13143
  `;
12887
- var JsonView = styled57.pre`
13144
+ var JsonView = styled58.pre`
12888
13145
  margin: 0;
12889
13146
  font-family: ${tokens.typography.fontFamily.monospace};
12890
13147
  font-size: ${tokens.typography.fontSize.sm};
@@ -12893,12 +13150,12 @@ var JsonView = styled57.pre`
12893
13150
  white-space: pre-wrap;
12894
13151
  word-break: break-word;
12895
13152
  `;
12896
- var FormattedView = styled57.div`
13153
+ var FormattedView = styled58.div`
12897
13154
  font-size: ${tokens.typography.fontSize.sm};
12898
13155
  line-height: ${tokens.typography.lineHeight.normal};
12899
13156
  color: ${tokens.colors.text.secondary};
12900
13157
  `;
12901
- var TableView = styled57.table`
13158
+ var TableView = styled58.table`
12902
13159
  width: 100%;
12903
13160
  border-collapse: collapse;
12904
13161
  font-size: ${tokens.typography.fontSize.sm};
@@ -12922,7 +13179,7 @@ var TableView = styled57.table`
12922
13179
  border-bottom: none;
12923
13180
  }
12924
13181
  `;
12925
- var EmptyState5 = styled57.div`
13182
+ var EmptyState5 = styled58.div`
12926
13183
  padding: ${tokens.spacing.xl};
12927
13184
  text-align: center;
12928
13185
  color: ${tokens.colors.text.tertiary};
@@ -13027,7 +13284,7 @@ var statusColors3 = {
13027
13284
  failed: tokens.colors.status.failed,
13028
13285
  timeout: tokens.colors.status.timeout
13029
13286
  };
13030
- var BadgeContainer2 = styled57.div`
13287
+ var BadgeContainer2 = styled58.div`
13031
13288
  display: inline-flex;
13032
13289
  align-items: center;
13033
13290
  gap: ${(props) => {
@@ -13081,7 +13338,7 @@ var BadgeContainer2 = styled57.div`
13081
13338
  color: ${(props) => statusColors3[props.$status]};
13082
13339
  line-height: 1.4;
13083
13340
  `;
13084
- var IconContainer3 = styled57.div`
13341
+ var IconContainer3 = styled58.div`
13085
13342
  display: flex;
13086
13343
  align-items: center;
13087
13344
  justify-content: center;
@@ -13160,7 +13417,7 @@ var TimeoutIcon = () => /* @__PURE__ */ jsx(
13160
13417
  children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
13161
13418
  }
13162
13419
  );
13163
- var Label2 = styled57.span`
13420
+ var Label2 = styled58.span`
13164
13421
  white-space: nowrap;
13165
13422
  `;
13166
13423
  var getDefaultLabel = (status) => {
@@ -13436,6 +13693,6 @@ var isMobileDevice = () => {
13436
13693
  return hasTouch && isMobileUA || hasTouch && window.innerWidth <= 768;
13437
13694
  };
13438
13695
 
13439
- export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, AuthButton, AuthInput, BillingToggle, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, ErrorBanner, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PasswordInput, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, SuccessToast, Suggestions, TagInput, TelegramIcon, TokenUsageCard, TrialPlanCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowLoadingSkeleton, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };
13696
+ export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, AuthButton, AuthInput, BillingToggle, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, ErrorBanner, ErrorToast, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PasswordInput, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, PostizIcon, RedditEngagementControls, RedditIcon, RedditOpportunityCard, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText, SuccessToast, Suggestions, TagInput, TelegramIcon, TokenUsageCard, TrialPlanCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowLoadingSkeleton, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, clearToolCalls, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, lightTheme, normalizePlatform, registerToolCall, tokens, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };
13440
13697
  //# sourceMappingURL=index.js.map
13441
13698
  //# sourceMappingURL=index.js.map