@burtson-labs/bandit-engine 2.0.110 → 2.0.112

package/dist/{chunk-Y54VH63F.mjs → chunk-PIBF62UY.mjs}

@@ -1,6 +1,6 @@
 import {
   StreamingMarkdown_default
-} from "./chunk-VR2ZWFTN.mjs";
+} from "./chunk-W2EPDR5G.mjs";
 import {
   aiProviderInitService
 } from "./chunk-HAUDGBUS.mjs";
@@ -14,7 +14,7 @@ import {
 } from "./chunk-BN3D45E2.mjs";
 import {
   chat_modal_default
-} from "./chunk-XPNXECXM.mjs";
+} from "./chunk-THDQFHQZ.mjs";
 import {
   AddIcon,
   ArchiveIcon,
@@ -56,7 +56,6 @@ import {
   PersonIcon,
   PictureAsPdfIcon,
   PlayArrowRoundedIcon,
-  PreviewIcon,
   PublicIcon,
   PublishIcon,
   RefreshIcon,
@@ -84,7 +83,7 @@ import {
   predefinedThemes,
   useNotificationService,
   useVoiceStore
-} from "./chunk-3WKPBIRD.mjs";
+} from "./chunk-VCUVOGOO.mjs";
 import {
   TOPICS,
   brandingService_default,
@@ -153,7 +152,6 @@ import {
   DialogActions as DialogActions2,
   Tabs,
   Tab,
-  Alert as Alert2,
   Chip,
   Collapse,
   GlobalStyles
@@ -545,7 +543,6 @@ var PersonalitiesTab = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const [personalityTabIndex, setPersonalityTabIndex] = useState2(0);
-  const sectionGap = isMobile ? 2 : 3;
   const tabWrapperStyles = isMobile ? { flexDirection: "column", gap: 0.35, fontSize: "0.78rem" } : { flexDirection: "row", gap: 0.75, fontSize: "0.95rem" };
   const [restoreDialogOpen, setRestoreDialogOpen] = useState2(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState2(false);
@@ -1194,49 +1191,19 @@ var PersonalitiesTab = ({
     ] })
   ] });
   const renderCreateEditTab = () => /* @__PURE__ */ jsxs2(Box2, { sx: { p: { xs: 1.5, sm: 2 } }, children: [
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: { xs: 2.5, md: 4 } }, children: [
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: { xs: 1.25, md: 1.5 } }, children: [
       /* @__PURE__ */ jsx2(
         Typography2,
         {
-          variant: "h5",
-          sx: {
-            fontWeight: 600,
-            mb: 1,
-            color: "primary.main",
-            fontSize: { xs: "1.55rem", sm: "1.7rem" }
-          },
+          variant: "overline",
+          sx: { fontWeight: 700, color: "primary.main", letterSpacing: 0.5, display: "block" },
           children: localSelectedModel.selectedModel ? "Edit Personality" : "Create New Personality"
         }
       ),
-      /* @__PURE__ */ jsx2(
-        Typography2,
-        {
-          variant: "body1",
-          sx: { color: "text.secondary", mb: { xs: 2, md: 3 }, fontSize: { xs: "0.95rem", sm: "1rem" }, lineHeight: 1.5 },
-          children: localSelectedModel.selectedModel ? `Customize and modify the "${localSelectedModel.selectedModel}" personality to better suit your needs.` : "Design a custom AI personality that matches your brand, use case, and communication style."
-        }
-      ),
-      !localSelectedModel.selectedModel && /* @__PURE__ */ jsxs2(
-        Alert2,
-        {
-          severity: "info",
-          sx: {
-            mb: { xs: 2.5, md: 3 },
-            borderRadius: 2,
-            border: "1px solid rgba(25, 118, 210, 0.2)",
-            background: "linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(66, 165, 245, 0.05) 100%)",
-            px: { xs: 1.5, sm: 2 },
-            py: { xs: 1.25, sm: 1.5 }
-          },
-          children: [
-            /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { fontWeight: 600, color: "primary.main", fontSize: { xs: "0.85rem", sm: "0.9rem" } }, children: "Creating a new personality" }),
-            /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { color: "text.secondary", fontSize: { xs: "0.85rem", sm: "0.9rem" }, lineHeight: 1.5 }, children: "Fill out the form below to create your custom AI assistant. Start with a template from the Templates tab, or build from scratch!" })
-          ]
-        }
-      )
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", children: localSelectedModel.selectedModel ? `Customize the "${localSelectedModel.selectedModel}" personality.` : "Design a custom AI personality matching your brand and use case." })
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: sectionGap }, children: [
-      localSelectedModel.selectedModel && /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", mt: 2, mb: 3 }, children: [
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1.5 }, children: [
+      localSelectedModel.selectedModel && /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
         /* @__PURE__ */ jsx2(
           Avatar,
           {
@@ -1247,10 +1214,10 @@ var PersonalitiesTab = ({
               }
             ),
             alt: localSelectedModel.selectedModel,
-            sx: { width: 48, height: 48, mr: 2, filter: "brightness(1.5)" }
+            sx: { width: 36, height: 36, mr: 1.5, filter: "brightness(1.5)" }
           }
         ),
-        /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, children: localSelectedModel.selectedModel })
+        /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: localSelectedModel.selectedModel })
       ] }),
       /* @__PURE__ */ jsxs2(
         TextField,
@@ -1286,7 +1253,7 @@ var PersonalitiesTab = ({
           },
           fullWidth: true,
           select: true,
-          sx: { mb: sectionGap },
+          sx: { mb: 1.5 },
           children: [
             /* @__PURE__ */ jsx2(MenuItem, { value: "", children: "Create New Personality" }),
             availableModels.map((model, index) => /* @__PURE__ */ jsx2(MenuItem, { value: model.name, children: model.name }, index))
@@ -1294,34 +1261,34 @@ var PersonalitiesTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(
-      TextField,
-      {
-        label: "Personality Name",
-        variant: "outlined",
-        value: localSelectedModel.name,
-        onChange: (e) => setLocalSelectedModel({ ...localSelectedModel, name: e.target.value }),
-        fullWidth: true,
-        placeholder: "e.g., My Custom Assistant",
-        sx: { mb: sectionGap }
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      TextField,
-      {
-        label: "Tagline",
-        variant: "outlined",
-        value: localSelectedModel.tagline,
-        onChange: (e) => setLocalSelectedModel({ ...localSelectedModel, tagline: e.target.value }),
-        fullWidth: true,
-        placeholder: "e.g., Your helpful companion for daily tasks",
-        sx: { mb: sectionGap }
-      }
-    ),
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Mood & Personality" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Click any mood to automatically add personality instructions to your system prompt:" }),
-      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: moodSuggestions.map((mood) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, gap: 1.5, mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx2(
+        TextField,
+        {
+          label: "Personality Name",
+          variant: "outlined",
+          value: localSelectedModel.name,
+          onChange: (e) => setLocalSelectedModel({ ...localSelectedModel, name: e.target.value }),
+          fullWidth: true,
+          placeholder: "e.g., My Custom Assistant"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        TextField,
+        {
+          label: "Tagline",
+          variant: "outlined",
+          value: localSelectedModel.tagline,
+          onChange: (e) => setLocalSelectedModel({ ...localSelectedModel, tagline: e.target.value }),
+          fullWidth: true,
+          placeholder: "e.g., Your helpful companion for daily tasks"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Mood & Personality" }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Click a mood to add personality instructions to your prompt." }),
+      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: moodSuggestions.map((mood) => /* @__PURE__ */ jsx2(
         Chip,
         {
           label: mood.label,
@@ -1346,10 +1313,10 @@ var PersonalitiesTab = ({
         mood.label
       )) })
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Formatting Tips" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Click any tip to add professional formatting to your system prompt:" }),
-      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Formatting Tips" }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Click a tip to add formatting guidance to your prompt." }),
+      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
         { label: "Be Specific", text: "Always be specific and detailed in your responses.", color: "#2196F3" },
         { label: "Stay In Character", text: "Maintain your personality consistently throughout the conversation.", color: "#4CAF50" },
         { label: "Ask Questions", text: "Ask clarifying questions when you need more information to help effectively.", color: "#FF9800" },
@@ -1400,10 +1367,10 @@ var PersonalitiesTab = ({
         tip.label
       )) })
     ] }),
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Formatting Tools" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Add visual formatting to make your AI responses more engaging:" }),
-      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Formatting Tools" }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Add visual formatting to make responses more engaging." }),
+      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
         {
           label: "Highlight Text",
           text: "Use <mark>highlighted text</mark> to emphasize important points.",
@@ -1500,23 +1467,22 @@ var PersonalitiesTab = ({
         onChange: (e) => setLocalSelectedModel({ ...localSelectedModel, systemPrompt: e.target.value }),
         fullWidth: true,
         multiline: true,
-        rows: 10,
+        rows: 8,
         placeholder: "Describe how your assistant should behave...",
         InputLabelProps: { shrink: true },
         InputProps: {
           style: {
-            minHeight: isMobile ? "auto" : "180px",
-            maxHeight: "360px"
+            maxHeight: "320px"
           }
         },
-        sx: { mb: 3 }
+        sx: { mb: 1.5 }
       }
     ),
-    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 4 }, children: [
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Select an Avatar" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Choose from our curated collection of avatars to give your AI personality a face:" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 1, color: "primary.main", fontWeight: 600, display: "block" }, children: "Robotic Collection" }),
-      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", gap: 2, mb: 3, flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs2(Box2, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Select an Avatar" }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Choose an avatar to give your personality a face." }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 0.75, color: "primary.main", fontWeight: 600, display: "block" }, children: "Robotic Collection" }),
+      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", gap: 1.5, mb: 1.5, flexWrap: "wrap" }, children: [
         { label: "Fembot", src: "https://cdn.burtson.ai/avatars/fembot.png" },
         { label: "Dudebot", src: "https://cdn.burtson.ai/avatars/dudebot.png" },
         { label: "Coolbot", src: "https://cdn.burtson.ai/avatars/coolbot.png" }
@@ -1530,8 +1496,8 @@ var PersonalitiesTab = ({
             setCustomAvatarBase64(null);
           },
           sx: {
-            width: 72,
-            height: 72,
+            width: 56,
+            height: 56,
             border: presetAvatar === src ? "3px solid #1976d2" : "2px solid transparent",
             cursor: "pointer",
             transition: "all 0.2s",
@@ -1545,8 +1511,8 @@ var PersonalitiesTab = ({
         },
         label
       )) }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 1, color: "secondary.main", fontWeight: 600, display: "block" }, children: "\u{1F465} Professional Characters" }),
-      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", gap: 2, mb: 3, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 0.75, color: "secondary.main", fontWeight: 600, display: "block" }, children: "Professional Characters" }),
+      /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", gap: 1.5, mb: 1.5, flexWrap: "wrap" }, children: [
         { label: "Business Professional", src: "https://cdn.burtson.ai/avatars/businessman.png", role: "Business & Strategy" },
         { label: "Data Scientist", src: "https://cdn.burtson.ai/avatars/datascience.png", role: "Analytics & Insights" },
         { label: "Support Specialist", src: "https://cdn.burtson.ai/avatars/support.png", role: "Customer Support" },
@@ -1555,7 +1521,7 @@ var PersonalitiesTab = ({
         { label: "Researcher", src: "https://cdn.burtson.ai/avatars/researcher.png", role: "Research & Analysis" },
         { label: "Startup Mentor", src: "https://cdn.burtson.ai/avatars/startupmentor.png", role: "Entrepreneurship" },
         { label: "Travel Expert", src: "https://cdn.burtson.ai/avatars/travel.png", role: "Travel & Adventure" }
-      ].map(({ label, src, role }) => /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+      ].map(({ label, src, role }) => /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.25 }, children: [
         /* @__PURE__ */ jsx2(
           Avatar,
           {
@@ -1566,8 +1532,8 @@ var PersonalitiesTab = ({
               setCustomAvatarBase64(null);
             },
             sx: {
-              width: 72,
-              height: 72,
+              width: 56,
+              height: 56,
               border: presetAvatar === src ? "3px solid #1976d2" : "2px solid transparent",
               cursor: "pointer",
               transition: "all 0.2s",
@@ -1592,51 +1558,50 @@ var PersonalitiesTab = ({
           overflow: "hidden"
         }, children: role })
       ] }, label)) }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 1, color: "warning.main", fontWeight: 600, display: "block" }, children: "Custom Upload" }),
-      /* @__PURE__ */ jsxs2(
-        Button2,
-        {
-          variant: "outlined",
-          component: "label",
-          sx: {
-            mb: 2,
-            px: { xs: 2.2, sm: 3 },
-            py: { xs: 1.2, sm: 1.5 },
-            borderRadius: 2,
-            textTransform: "none",
-            fontWeight: 600,
-            borderStyle: "dashed",
-            borderWidth: 2,
-            "&:hover": {
+      /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { mb: 0.75, color: "warning.main", fontWeight: 600, display: "block" }, children: "Custom Upload" }),
+      /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, alignItems: { sm: "center" }, gap: 1.5 }, children: [
+        /* @__PURE__ */ jsxs2(
+          Button2,
+          {
+            variant: "outlined",
+            component: "label",
+            sx: {
+              borderRadius: 2,
+              textTransform: "none",
+              fontWeight: 600,
               borderStyle: "dashed",
-              borderWidth: 2
+              borderWidth: 2,
+              "&:hover": {
+                borderStyle: "dashed",
+                borderWidth: 2
+              },
+              width: { xs: "100%", sm: "auto" }
             },
-            width: { xs: "100%", sm: "auto" }
-          },
-          children: [
-            "Upload & Crop Custom Avatar",
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "file",
-                accept: "image/png, image/jpeg, image/jpg",
-                hidden: true,
-                onChange: handleImageUpload
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", sx: { mb: 2, fontSize: "0.8rem" }, children: "\u2022 Supports JPG/PNG up to 10MB \u2022 Built-in cropper for perfect sizing \u2022 Final output: 512\xD7512px" }),
-      (customAvatarBase64 || presetAvatar) && /* @__PURE__ */ jsxs2(Box2, { sx: { mt: 2, display: "flex", alignItems: "center", gap: 2 }, children: [
+            children: [
+              "Upload & Crop Custom Avatar",
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "file",
+                  accept: "image/png, image/jpeg, image/jpg",
+                  hidden: true,
+                  onChange: handleImageUpload
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(Typography2, { variant: "caption", color: "text.secondary", children: "JPG/PNG up to 10MB \xB7 output 512\xD7512px" })
+      ] }),
+      (customAvatarBase64 || presetAvatar) && /* @__PURE__ */ jsxs2(Box2, { sx: { mt: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
         /* @__PURE__ */ jsx2(
           Avatar,
           {
             src: customAvatarBase64 || presetAvatar,
             alt: "Avatar Preview",
             sx: {
-              width: 96,
-              height: 96,
+              width: 56,
+              height: 56,
               border: "3px solid",
               borderColor: "primary.main",
               boxShadow: 3
@@ -1667,14 +1632,14 @@ var PersonalitiesTab = ({
           zIndex: { xs: 5, sm: "auto" },
           display: "flex",
           flexDirection: { xs: "column", sm: "row" },
-          gap: { xs: 1.5, sm: 2 },
+          gap: { xs: 1.5, sm: 1.5 },
           justifyContent: "flex-start",
           // Changed from flex-end to flex-start
           mr: { xs: 0, sm: 10 },
           // Add right margin to avoid FAB
-          mb: { xs: 8, sm: 2 },
+          mb: { xs: 8, sm: 1.5 },
           // Add bottom margin on mobile for FAB clearance
-          mt: { xs: 1.5, sm: 0 },
+          mt: { xs: 1.5, sm: 0.5 },
           p: { xs: 1.1, sm: 0 },
           borderRadius: { xs: 2, sm: 0 },
           border: { xs: "1px solid", sm: "none" },
@@ -1717,16 +1682,16 @@ var PersonalitiesTab = ({
           flexDirection: { xs: "column", md: "row" },
           alignItems: { xs: "flex-start", md: "center" },
           justifyContent: "space-between",
-          mb: { xs: 2, md: 3 },
+          mb: { xs: 1.25, md: 1.5 },
           flexWrap: "wrap",
-          gap: { xs: 1.5, md: 2 }
+          gap: { xs: 1, md: 1.5 }
         },
         children: [
           /* @__PURE__ */ jsxs2(
             Typography2,
             {
-              variant: "h5",
-              sx: { fontWeight: 600, color: "primary.main", fontSize: { xs: "1.45rem", md: "1.65rem" } },
+              variant: "subtitle2",
+              sx: { fontWeight: 700, color: "primary.main" },
               children: [
                 "Manage Personalities (",
                 availableModels.length,
@@ -1734,14 +1699,13 @@ var PersonalitiesTab = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: { xs: 1, md: 2 }, flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
+          /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 1, flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
             /* @__PURE__ */ jsx2(
               Button2,
               {
                 variant: "contained",
                 color: "primary",
-                size: isMobile ? "medium" : "large",
-                startIcon: /* @__PURE__ */ jsx2(AutoAwesomeIcon, { fontSize: isMobile ? "small" : "medium" }),
+                startIcon: /* @__PURE__ */ jsx2(AutoAwesomeIcon, { fontSize: "small" }),
                 onClick: () => {
                   setLocalSelectedModel({
                     name: "",
@@ -1754,15 +1718,9 @@ var PersonalitiesTab = ({
                   setPersonalityTabIndex(1);
                 },
                 sx: {
-                  px: { xs: 2.2, md: 3 },
-                  py: { xs: 0.95, md: 1 },
                   fontWeight: 600,
                   borderRadius: 2,
                   textTransform: "none",
-                  boxShadow: 3,
-                  "&:hover": {
-                    boxShadow: 6
-                  },
                   width: { xs: "100%", sm: "auto" }
                 },
                 children: "Create Personality"
@@ -1782,10 +1740,10 @@ var PersonalitiesTab = ({
         ]
       }
     ),
-    availableModels.length === 0 ? /* @__PURE__ */ jsx2(Card, { sx: { textAlign: "center", py: 8, border: "2px dashed", borderColor: "divider" }, children: /* @__PURE__ */ jsxs2(CardContent, { children: [
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, gutterBottom: true, children: "No Personalities Yet" }),
-      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", paragraph: true, children: "Get started by creating your first custom AI personality or choosing from our templates." }),
-      /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap", mt: 3 }, children: [
+    availableModels.length === 0 ? /* @__PURE__ */ jsx2(Card, { sx: { textAlign: "center", py: 3, border: "1px dashed", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ jsxs2(CardContent, { children: [
+      /* @__PURE__ */ jsx2(Typography2, { variant: "subtitle2", sx: { fontWeight: 700, color: "text.primary" }, gutterBottom: true, children: "No Personalities Yet" }),
+      /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", children: "Create your first custom AI personality or choose from a template." }),
+      /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 1.5, justifyContent: "center", flexWrap: "wrap", mt: 1.5 }, children: [
         /* @__PURE__ */ jsx2(
           Button2,
           {
@@ -1802,7 +1760,7 @@ var PersonalitiesTab = ({
               setPresetAvatar(null);
               setPersonalityTabIndex(1);
             },
-            sx: { px: { xs: 2.4, md: 3 }, py: { xs: 0.95, md: 1 }, width: { xs: "100%", sm: "auto" } },
+            sx: { width: { xs: "100%", sm: "auto" } },
             children: "Create From Scratch"
           }
         ),
@@ -1812,74 +1770,70 @@ var PersonalitiesTab = ({
             variant: "outlined",
             color: "primary",
             onClick: () => setPersonalityTabIndex(0),
-            sx: { px: { xs: 2.4, md: 3 }, py: { xs: 0.95, md: 1 }, width: { xs: "100%", sm: "auto" } },
+            sx: { width: { xs: "100%", sm: "auto" } },
             children: "Browse Templates"
           }
         )
       ] })
-    ] }) }) : /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexDirection: "column", gap: { xs: 2, md: 3 } }, children: availableModels.map((model) => /* @__PURE__ */ jsx2(Card, { sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs2(CardContent, { sx: { p: { xs: 2.5, sm: 3 } }, children: [
-      /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", mb: { xs: 1.5, md: 2 } }, children: [
-        /* @__PURE__ */ jsx2(
-          Avatar,
-          {
-            src: resolveAvatar(model),
-            alt: model.name,
-            sx: { width: { xs: 44, sm: 48 }, height: { xs: 44, sm: 48 }, mr: { xs: 1.5, sm: 2 } }
-          }
-        ),
-        /* @__PURE__ */ jsxs2(Box2, { sx: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx2(Typography2, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, children: model.name }),
-          /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { color: "text.secondary", fontStyle: "italic" }, children: model.tagline })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        Typography2,
-        {
-          variant: "body2",
-          sx: {
-            color: "text.secondary",
-            mb: 3,
-            display: "-webkit-box",
-            WebkitLineClamp: 3,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden"
-          },
-          children: model.systemPrompt
-        }
-      ),
-      /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 2 }, children: [
-        /* @__PURE__ */ jsx2(
-          Button2,
-          {
-            variant: "outlined",
-            color: "primary",
-            onClick: () => {
-              setLocalSelectedModel({
-                name: model.name,
-                tagline: model.tagline,
-                systemPrompt: model.systemPrompt,
-                selectedModel: model.name
-              });
-              setCustomAvatarBase64(model.avatarBase64 || null);
-              setPresetAvatar(null);
-              setPersonalityTabIndex(1);
-            },
-            sx: { flex: 1 },
-            children: "Edit"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          Button2,
-          {
-            variant: "outlined",
-            color: "error",
-            onClick: () => handleDeletePersonality(model.name),
-            sx: { flex: 1 },
-            children: "Delete"
-          }
-        )
-      ] })
-    ] }) }, model.name)) }),
+    ] }) }) : /* @__PURE__ */ jsx2(Box2, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: availableModels.map((model) => /* @__PURE__ */ jsx2(Card, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ jsxs2(
+      CardContent,
+      {
+        sx: {
+          p: 1,
+          "&:last-child": { pb: 1 },
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          flexWrap: { xs: "wrap", sm: "nowrap" }
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            Avatar,
+            {
+              src: resolveAvatar(model),
+              alt: model.name,
+              sx: { width: 40, height: 40, flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsxs2(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { fontWeight: 600, color: "text.primary", lineHeight: 1.2 }, noWrap: true, children: model.name }),
+            /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { color: "text.secondary", display: "block" }, noWrap: true, children: model.tagline })
+          ] }),
+          /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 1, flexShrink: 0, width: { xs: "100%", sm: "auto" } }, children: [
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                variant: "outlined",
+                color: "primary",
+                onClick: () => {
+                  setLocalSelectedModel({
+                    name: model.name,
+                    tagline: model.tagline,
+                    systemPrompt: model.systemPrompt,
+                    selectedModel: model.name
+                  });
+                  setCustomAvatarBase64(model.avatarBase64 || null);
+                  setPresetAvatar(null);
+                  setPersonalityTabIndex(1);
+                },
+                sx: { flex: { xs: 1, sm: "initial" } },
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                variant: "outlined",
+                color: "error",
+                onClick: () => handleDeletePersonality(model.name),
+                sx: { flex: { xs: 1, sm: "initial" } },
+                children: "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    ) }, model.name)) }),
     /* @__PURE__ */ jsxs2(Dialog2, { open: restoreDialogOpen, onClose: () => setRestoreDialogOpen(false), children: [
       /* @__PURE__ */ jsx2(DialogTitle2, { children: "Restore Default Personalities?" }),
       /* @__PURE__ */ jsx2(DialogContent2, { children: /* @__PURE__ */ jsx2(DialogContentText, { children: "This will delete all custom personalities and reset to the original configuration." }) }),
@@ -3728,7 +3682,7 @@ var BrandingTab = ({
     }
   };
   return /* @__PURE__ */ jsxs5(Box5, { sx: { height: "100%", display: "flex", flexDirection: "column", p: { xs: 1.5, sm: 2 } }, children: [
-    /* @__PURE__ */ jsxs5(Box5, { sx: { mb: { xs: 2, md: 3 }, flex: "0 0 auto", display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsxs5(Box5, { sx: { mb: { xs: 1.5, md: 2 }, flex: "0 0 auto" }, children: [
       /* @__PURE__ */ jsx5(
         Typography5,
         {
@@ -3737,30 +3691,22 @@ var BrandingTab = ({
           children: "Branding & Themes"
         }
       ),
-      /* @__PURE__ */ jsx5(
-        Typography5,
-        {
-          variant: "body1",
-          sx: { color: "text.secondary", fontSize: { xs: "0.95rem", sm: "1rem" }, lineHeight: 1.5 },
-          children: "Customize your brand identity and visual appearance."
-        }
-      ),
-      /* @__PURE__ */ jsx5(Alert5, { severity: "info", sx: { borderRadius: 2, px: { xs: 1.5, sm: 2 }, py: { xs: 1.25, sm: 1.5 } }, children: /* @__PURE__ */ jsxs5(Typography5, { variant: "body2", sx: { fontSize: { xs: "0.82rem", sm: "0.88rem" }, lineHeight: 1.6 }, children: [
-        /* @__PURE__ */ jsx5("strong", { children: "Logo requirements:" }),
-        " JPG or PNG up to 10MB. Uploads open a built-in cropper to help you finalize the perfect size. Leave any fields blank to fall back to Bandit defaults."
-      ] }) })
+      /* @__PURE__ */ jsx5(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Customize your brand identity and visual appearance." }),
+      /* @__PURE__ */ jsx5(Typography5, { variant: "caption", color: "text.secondary", sx: { display: "block", lineHeight: 1.5 }, children: "Logo: JPG or PNG up to 10MB; uploads open a built-in cropper, and blank fields fall back to Bandit defaults." })
     ] }),
     /* @__PURE__ */ jsxs5(
       Paper4,
       {
         sx: {
-          p: { xs: 1.5, sm: 2 },
+          p: { xs: 1.5, sm: 1.75 },
+          border: "1px solid",
+          borderColor: "divider",
           borderRadius: 2,
           flex: 1,
           display: "flex",
           flexDirection: { xs: "column", md: "row" },
-          gap: { xs: 1.5, md: 2.5 },
-          mb: { xs: 2, md: 3 }
+          gap: { xs: 1.5, md: 1.5 },
+          mb: { xs: 1.25, md: 1.5 }
         },
         children: [
           /* @__PURE__ */ jsxs5(
@@ -3770,15 +3716,12 @@ var BrandingTab = ({
                 width: { xs: "100%", md: "26%" },
                 display: "flex",
                 flexDirection: "column",
-                height: { xs: "auto", md: 320 },
-                gap: { xs: 2, md: 0 }
+                height: { xs: "auto", md: 260 },
+                gap: { xs: 1.5, md: 0 }
               },
               children: [
                 /* @__PURE__ */ jsxs5(Box5, { sx: { flex: "1 1 auto", display: "flex", flexDirection: "column" }, children: [
-                  /* @__PURE__ */ jsxs5(Typography5, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 1, fontSize: "1rem", color: "text.primary" }, children: [
-                    /* @__PURE__ */ jsx5(UploadIcon, { color: "primary", fontSize: "small" }),
-                    "Logo Upload"
-                  ] }),
+                  /* @__PURE__ */ jsx5(Typography5, { variant: "overline", sx: { mb: 0.5, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary" }, children: "Logo Upload" }),
                   /* @__PURE__ */ jsxs5(
                     Box5,
                     {
@@ -3797,7 +3740,7 @@ var BrandingTab = ({
                         transition: "all 0.3s ease",
                         position: "relative",
                         flex: "1 1 auto",
-                        minHeight: 160,
+                        minHeight: 120,
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
@@ -3836,7 +3779,7 @@ var BrandingTab = ({
                             {
                               className: "upload-icon",
                               sx: {
-                                fontSize: 56,
+                                fontSize: 32,
                                 color: "text.secondary",
                                 transition: "color 0.3s ease"
                               }
@@ -3884,7 +3827,7 @@ var BrandingTab = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx5(Box5, { sx: { mt: 2, flex: "0 0 auto" }, children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx5(Box5, { sx: { mt: 1.5, flex: "0 0 auto" }, children: /* @__PURE__ */ jsx5(
                   TextField3,
                   {
                     label: "Custom Branding Text",
@@ -3904,15 +3847,12 @@ var BrandingTab = ({
             }
           ),
           /* @__PURE__ */ jsxs5(Box5, { sx: { flex: 1, width: "100%" }, children: [
-            /* @__PURE__ */ jsxs5(Typography5, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 1, fontSize: "1rem", color: "text.primary" }, children: [
-              /* @__PURE__ */ jsx5(PreviewIcon, { color: "primary", fontSize: "small" }),
-              "Live Preview"
-            ] }),
+            /* @__PURE__ */ jsx5(Typography5, { variant: "overline", sx: { mb: 0.5, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Live Preview" }),
             /* @__PURE__ */ jsxs5(
               Box5,
               {
                 sx: {
-                  height: { xs: 260, md: 320 },
+                  height: { xs: 220, md: 260 },
                   display: "flex",
                   flexDirection: "column",
                   position: "relative",
@@ -3920,7 +3860,7 @@ var BrandingTab = ({
                   borderRadius: 2,
                   overflow: "hidden",
                   px: 2,
-                  py: 3
+                  py: 2
                 },
                 children: [
                   /* @__PURE__ */ jsx5(Box5, { sx: {
@@ -3996,14 +3936,14 @@ var BrandingTab = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs5(Paper4, { sx: { p: 2, borderRadius: 2, flex: "0 0 auto", mb: 2 }, children: [
-      /* @__PURE__ */ jsx5(Typography5, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, fontSize: "1rem", color: "text.primary" }, children: "Theme Selection" }),
+    /* @__PURE__ */ jsxs5(Paper4, { sx: { p: { xs: 1.5, sm: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2, flex: "0 0 auto", mb: { xs: 1.25, md: 1.5 } }, children: [
+      /* @__PURE__ */ jsx5(Typography5, { variant: "overline", sx: { mb: 1, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Theme Selection" }),
       /* @__PURE__ */ jsx5(
         Box5,
         {
           sx: {
             display: "grid",
-            gap: 1.5,
+            gap: 1,
             gridTemplateColumns: {
               xs: "repeat(4, 1fr)",
               sm: "repeat(6, 1fr)",
@@ -4027,12 +3967,10 @@ var BrandingTab = ({
                   position: "relative",
                   overflow: "visible",
                   "&:hover": {
-                    transform: "scale(1.05)",
-                    boxShadow: 2,
                     borderColor: "primary.main"
                   }
                 },
-                elevation: isSelected ? 2 : 0,
+                elevation: 0,
                 children: [
                   isSelected && /* @__PURE__ */ jsx5(
                     Chip4,
@@ -4050,12 +3988,12 @@ var BrandingTab = ({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs5(CardContent2, { sx: { p: 1 }, children: [
+                  /* @__PURE__ */ jsxs5(CardContent2, { sx: { p: 0.75, "&:last-child": { pb: 0.75 } }, children: [
                     /* @__PURE__ */ jsxs5(
                       Box5,
                       {
                         sx: {
-                          height: 40,
+                          height: 32,
                           backgroundColor: themeOption.palette?.background?.default,
                           borderRadius: 1,
                           position: "relative",
@@ -4134,10 +4072,10 @@ var BrandingTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5(Paper4, { sx: { p: 2, borderRadius: 2, flex: "0 0 auto" }, children: [
-      /* @__PURE__ */ jsx5(Typography5, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, fontSize: "1rem", color: "text.primary" }, children: "Actions" }),
-      /* @__PURE__ */ jsxs5(Box5, { sx: { display: "flex", flexWrap: "wrap", gap: 1.5 }, children: [
-        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs5(Paper4, { sx: { p: { xs: 1.5, sm: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2, flex: "0 0 auto" }, children: [
+      /* @__PURE__ */ jsx5(Typography5, { variant: "overline", sx: { mb: 1, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Actions" }),
+      /* @__PURE__ */ jsxs5(Box5, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
+        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ jsx5(
           Button5,
           {
             variant: "outlined",
@@ -4150,7 +4088,7 @@ var BrandingTab = ({
             children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "\u2713 Saved" : saveStatus === "error" ? "\u2717 Error" : "Save"
           }
         ) }),
-        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ jsx5(
           Button5,
           {
             variant: "outlined",
@@ -4161,7 +4099,7 @@ var BrandingTab = ({
             children: "Export"
           }
         ) }),
-        /* @__PURE__ */ jsxs5(Box5, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: [
+        /* @__PURE__ */ jsxs5(Box5, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: [
           /* @__PURE__ */ jsx5(
             Button5,
             {
@@ -4184,7 +4122,7 @@ var BrandingTab = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5(Box5, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ jsx5(
           Button5,
           {
             variant: "outlined",
@@ -5219,18 +5157,18 @@ var KnowledgeTab = ({
   const clearSelection = () => {
     setSelectedDocuments([]);
   };
-  return /* @__PURE__ */ jsx7(Box7, { sx: { p: { xs: 1.5, sm: 3, md: 4 } }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { pt: { xs: 1, md: 2 }, pb: { xs: 3, md: 4 } }, children: [
-    /* @__PURE__ */ jsxs7(Box7, { sx: { mb: { xs: 2.5, md: 4 } }, children: [
+  return /* @__PURE__ */ jsx7(Box7, { sx: { p: { xs: 1.5, sm: 2, md: 2.5 } }, children: /* @__PURE__ */ jsxs7(Box7, { children: [
+    /* @__PURE__ */ jsxs7(Box7, { sx: { mb: { xs: 1.5, md: 2 } }, children: [
       /* @__PURE__ */ jsxs7(
         Box7,
         {
           sx: {
             display: "flex",
             flexDirection: { xs: "column", md: "row" },
-            gap: { xs: 1.5, md: 2 },
+            gap: { xs: 1, md: 1.5 },
             justifyContent: "space-between",
             alignItems: { xs: "flex-start", md: "center" },
-            mb: { xs: 1.5, md: 2 }
+            mb: 1.5
           },
           children: [
             /* @__PURE__ */ jsxs7(Box7, { sx: { textAlign: { xs: "left", md: "initial" } }, children: [
@@ -5239,7 +5177,7 @@ var KnowledgeTab = ({
                 {
                   variant: "h5",
                   color: "text.primary",
-                  sx: { mb: 1, fontWeight: 600, fontSize: { xs: "1.55rem", md: "1.8rem" } },
+                  sx: { mb: 0.5, fontWeight: 600, fontSize: "1.3rem" },
                   children: [
                     "Document Knowledge Base",
                     shouldUseVector && /* @__PURE__ */ jsx7(
@@ -5254,29 +5192,20 @@ var KnowledgeTab = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs7(
-                Typography7,
-                {
-                  variant: "body1",
-                  color: "text.secondary",
-                  sx: { fontSize: { xs: "0.95rem", sm: "1rem" }, lineHeight: 1.5 },
-                  children: [
-                    "Add documents to your private knowledge base. Files are securely stored ",
-                    shouldUseVector ? "in your private workspace" : "locally in your browser",
-                    "."
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs7(Typography7, { variant: "body2", color: "text.secondary", sx: { mb: 0 }, children: [
+                "Add documents to your private knowledge base, stored ",
+                shouldUseVector ? "in your private workspace" : "locally in your browser",
+                "."
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: { xs: 1, sm: 1.5 }, alignItems: "center", flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
+            /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
               shouldUseVector && /* @__PURE__ */ jsx7(
                 Button6,
                 {
                   variant: "outlined",
-                  size: isMobile ? "small" : "medium",
                   onClick: loadVectorDocuments,
                   disabled: loadingVectorDocs,
-                  sx: { mr: { xs: 0, md: 1 }, width: { xs: "100%", md: "auto" } },
+                  sx: { width: { xs: "100%", md: "auto" } },
                   children: loadingVectorDocs ? "Loading..." : "Refresh"
                 }
               ),
@@ -5285,10 +5214,9 @@ var KnowledgeTab = ({
                 {
                   variant: "outlined",
                   color: "error",
-                  size: isMobile ? "small" : "medium",
                   startIcon: /* @__PURE__ */ jsx7(DeleteIcon, {}),
                   onClick: () => setClearDocsDialogOpen(true),
-                  sx: { ml: { xs: 0, md: 2 }, width: { xs: "100%", md: "auto" } },
+                  sx: { width: { xs: "100%", md: "auto" } },
                   children: "Clear All"
                 }
               )
@@ -5296,17 +5224,17 @@ var KnowledgeTab = ({
           ]
         }
       ),
-      documents.length > 0 && /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: { xs: 1.5, md: 2 }, flexWrap: "wrap", mb: { xs: 2, md: 3 } }, children: [
-        /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 120 }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: "primary", children: statistics.totalDocuments }),
+      documents.length > 0 && /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1, flexWrap: "wrap", mb: 0 }, children: [
+        /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 96, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: statistics.totalDocuments }),
           /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: "Documents" })
         ] }) }),
-        /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 120 }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: "primary", children: statistics.totalSize }),
+        /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 96, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: statistics.totalSize }),
           /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: "Total Size" })
         ] }) }),
-        Object.entries(statistics.categoryCounts).map(([category, count]) => /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 100 }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: "primary", children: count }),
+        Object.entries(statistics.categoryCounts).map(([category, count]) => /* @__PURE__ */ jsx7(Card3, { sx: { minWidth: 80, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: count }),
           /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: category })
         ] }) }, category))
       ] })
@@ -5315,8 +5243,10 @@ var KnowledgeTab = ({
       Card3,
       {
         sx: {
-          mb: 3,
-          border: dragActive ? `2px dashed ${currentTheme.palette?.primary?.main}` : `1px dashed ${currentTheme.palette?.divider}`,
+          mb: { xs: 1.25, md: 1.5 },
+          borderRadius: 2,
+          boxShadow: "none",
+          border: dragActive ? `1px dashed ${currentTheme.palette?.primary?.main}` : `1px dashed ${currentTheme.palette?.divider}`,
           bgcolor: dragActive ? `${currentTheme.palette?.primary?.main}08` : "transparent",
           transition: "all 0.2s ease-in-out",
           cursor: "pointer",
@@ -5329,75 +5259,43 @@ var KnowledgeTab = ({
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onClick: () => document.getElementById("file-upload")?.click(),
-        children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { textAlign: "center", py: { xs: 3, md: 4 }, px: { xs: 2, md: 3 } }, children: [
-          /* @__PURE__ */ jsx7(
-            UploadFileIcon,
-            {
-              sx: {
-                fontSize: 48,
-                color: dragActive ? "primary.main" : "text.secondary",
-                mb: 2
+        children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { textAlign: "center", py: 1.75, px: { xs: 1.5, sm: 1.75 }, "&:last-child": { pb: 1.75 } }, children: [
+          /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx7(
+              UploadFileIcon,
+              {
+                sx: { fontSize: 18, color: dragActive ? "primary.main" : "text.secondary" }
               }
-            }
-          ),
-          /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: dragActive ? "primary" : "text.primary", gutterBottom: true, children: dragActive ? "Drop files here" : "Upload Documents" }),
-          /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "text.secondary", paragraph: true, children: "Drag and drop files here or click to browse" }),
+            ),
+            /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: dragActive ? "primary" : "text.primary", children: dragActive ? "Drop files here" : "Upload Documents" })
+          ] }),
+          /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.25 }, children: "Drag and drop or click to browse \u2014 PDF, DOC, TXT, MD, code files, and more" }),
           shouldUseVector && hasTeam && /* @__PURE__ */ jsxs7(
             Box7,
             {
-              sx: {
-                mb: 2,
-                p: 2,
-                bgcolor: "background.paper",
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "divider"
-              },
+              sx: { display: "inline-flex", alignItems: "center", gap: 0.5, mt: 1 },
               onClick: (e) => e.stopPropagation(),
               children: [
-                /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ jsx7(
-                    Switch2,
-                    {
-                      checked: shareWithTeam,
-                      onChange: (e) => setShareWithTeam(e.target.checked),
-                      color: "primary",
-                      size: "small"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx7(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: shareWithTeam ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-                    /* @__PURE__ */ jsx7(GroupIcon, { sx: { fontSize: "1rem", color: "success.main" } }),
-                    /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "success.main", fontWeight: 500, children: "Share with team" })
-                  ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-                    /* @__PURE__ */ jsx7(PersonIcon, { sx: { fontSize: "1rem", color: "text.secondary" } }),
-                    /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "text.secondary", fontWeight: 500, children: "Personal only" })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block", textAlign: "center", mt: 0.5 }, children: shareWithTeam ? "Team members can search and access these documents" : "Documents will be private to your account only" })
-              ]
-            }
-          ),
-          shouldUseVector && !hasTeam && /* @__PURE__ */ jsxs7(
-            Box7,
-            {
-              sx: {
-                mb: 2,
-                p: 1.5,
-                bgcolor: "info.main10",
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "info.main30"
-              },
-              children: [
-                /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ jsx7(PersonIcon, { sx: { fontSize: "1rem", color: "info.main" } }),
-                  /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "info.main", fontWeight: 500, children: "Personal Documents Only" })
-                ] }),
-                /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block", textAlign: "center", mt: 0.5 }, children: "Documents will be stored privately in your personal account" })
+                /* @__PURE__ */ jsx7(
+                  Switch2,
+                  {
+                    checked: shareWithTeam,
+                    onChange: (e) => setShareWithTeam(e.target.checked),
+                    color: "primary",
+                    size: "small"
+                  }
+                ),
+                shareWithTeam ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+                  /* @__PURE__ */ jsx7(GroupIcon, { sx: { fontSize: "1rem", color: "success.main" } }),
+                  /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: "Shared with team \u2014 members can search these documents" })
+                ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+                  /* @__PURE__ */ jsx7(PersonIcon, { sx: { fontSize: "1rem", color: "text.secondary" } }),
+                  /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: "Personal only \u2014 private to your account" })
+                ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: "Supported: PDF, DOC, TXT, MD, Code files, and more" }),
+          shouldUseVector && !hasTeam && /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.5 }, children: "Documents will be stored privately in your personal account" }),
           /* @__PURE__ */ jsx7(
             "input",
             {
@@ -5412,7 +5310,7 @@ var KnowledgeTab = ({
         ] })
       }
     ),
-    uploadStatuses.length > 0 && /* @__PURE__ */ jsx7(Box7, { sx: { mb: 3 }, children: uploadStatuses.map((status, index) => /* @__PURE__ */ jsx7(Card3, { sx: { mb: 1 }, children: /* @__PURE__ */ jsx7(CardContent3, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+    uploadStatuses.length > 0 && /* @__PURE__ */ jsx7(Box7, { sx: { mb: { xs: 1.25, md: 1.5 } }, children: uploadStatuses.map((status, index) => /* @__PURE__ */ jsx7(Card3, { sx: { mb: 1, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsx7(CardContent3, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
       status.status === "success" ? /* @__PURE__ */ jsx7(CheckCircleIcon, { color: "success" }) : status.status === "error" ? /* @__PURE__ */ jsx7(ErrorIcon, { color: "error" }) : /* @__PURE__ */ jsx7(Box7, { sx: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx7(
         LinearProgress2,
         {
@@ -5430,8 +5328,8 @@ var KnowledgeTab = ({
         "%"
       ] })
     ] }) }) }, index)) }),
-    documents.length > 0 && /* @__PURE__ */ jsx7(Card3, { sx: { mb: 3 }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 2 }, children: [
-      /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }, children: [
+    documents.length > 0 && /* @__PURE__ */ jsx7(Card3, { sx: { mb: { xs: 1.25, md: 1.5 }, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs7(CardContent3, { sx: { py: 1.5, px: { xs: 1.5, sm: 1.75 }, "&:last-child": { pb: 1.5 } }, children: [
+      /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1.5, alignItems: "center", flexWrap: "wrap" }, children: [
         /* @__PURE__ */ jsx7(
           TextField4,
           {
@@ -5559,7 +5457,7 @@ var KnowledgeTab = ({
           )
         ] })
       ] }),
-      selectedDocuments.length > 0 && /* @__PURE__ */ jsx7(Box7, { sx: { mt: 2, pt: 2, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+      selectedDocuments.length > 0 && /* @__PURE__ */ jsx7(Box7, { sx: { mt: 1.5, pt: 1.5, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }, children: [
         /* @__PURE__ */ jsxs7(Typography7, { variant: "body2", color: "text.secondary", children: [
           selectedDocuments.length,
           " selected"
@@ -5595,12 +5493,12 @@ var KnowledgeTab = ({
         )
       ] }) })
     ] }) }),
-    filteredAndSortedDocuments.length === 0 ? /* @__PURE__ */ jsx7(Card3, { sx: { textAlign: "center", py: 8 }, children: /* @__PURE__ */ jsxs7(CardContent3, { children: [
-      /* @__PURE__ */ jsx7(FolderIcon, { sx: { fontSize: 64, color: "text.secondary", mb: 2 } }),
-      /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: "text.secondary", gutterBottom: true, children: "No Documents Yet" }),
-      /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "text.secondary", children: shouldUseVector ? "Upload and embed your first document to get started with advanced search" : "Upload your first document to get started" })
+    filteredAndSortedDocuments.length === 0 ? /* @__PURE__ */ jsx7(Card3, { sx: { textAlign: "center", py: 4, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs7(CardContent3, { children: [
+      /* @__PURE__ */ jsx7(FolderIcon, { sx: { fontSize: 20, color: "text.secondary", mb: 1 } }),
+      /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: "text.secondary", gutterBottom: true, children: "No Documents Yet" }),
+      /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", children: shouldUseVector ? "Upload and embed your first document to get started with advanced search" : "Upload your first document to get started" })
     ] }) }) : /* @__PURE__ */ jsxs7(Box7, { children: [
-      /* @__PURE__ */ jsxs7(Typography7, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxs7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
         "Showing ",
         filteredAndSortedDocuments.length,
         " of ",
@@ -5620,7 +5518,7 @@ var KnowledgeTab = ({
               md: "repeat(4, 1fr)",
               lg: "repeat(6, 1fr)"
             },
-            gap: 2
+            gap: 1.5
           },
           children: filteredAndSortedDocuments.map((doc) => {
             const isSelected = selectedDocuments.includes(doc.id);
@@ -5645,7 +5543,7 @@ var KnowledgeTab = ({
         }
       ) : (
         /* List View */
-        /* @__PURE__ */ jsx7(Stack2, { spacing: 1, children: filteredAndSortedDocuments.map((doc) => {
+        /* @__PURE__ */ jsx7(Stack2, { spacing: 0.75, children: filteredAndSortedDocuments.map((doc) => {
           const fileInfo = getFileTypeInfo(doc.name);
           const IconComponent = fileInfo.icon;
           const isSelected = selectedDocuments.includes(doc.id);
@@ -5655,14 +5553,16 @@ var KnowledgeTab = ({
             {
               sx: {
                 cursor: "pointer",
-                transition: "all 0.3s ease-in-out",
-                border: isSelected ? `2px solid ${currentTheme.palette?.primary?.main}` : `1px solid ${currentTheme.palette?.divider}`,
+                boxShadow: "none",
+                borderRadius: 2,
+                transition: "all 0.2s ease-in-out",
+                border: isSelected ? `1px solid ${currentTheme.palette?.primary?.main}` : `1px solid ${currentTheme.palette?.divider}`,
                 "&:hover": {
-                  boxShadow: 4
+                  borderColor: currentTheme.palette?.primary?.main
                 },
                 bgcolor: isSelected ? `${currentTheme.palette?.primary?.main}08` : "background.paper",
                 opacity: isDeleting ? 0.3 : 1,
-                transform: isDeleting ? "scale(0.95)" : "scale(1)"
+                transform: isDeleting ? "scale(0.98)" : "scale(1)"
               },
               onClick: (e) => {
                 if (e.ctrlKey || e.metaKey) {
@@ -5671,153 +5571,114 @@ var KnowledgeTab = ({
                   handleDocumentClick(doc);
                 }
               },
-              children: /* @__PURE__ */ jsx7(CardContent3, { sx: { py: 2 }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-                /* @__PURE__ */ jsx7(IconComponent, { sx: { fontSize: 32, color: fileInfo.color } }),
-                /* @__PURE__ */ jsxs7(Box7, { sx: { flex: 1, minWidth: 0 }, children: [
+              children: /* @__PURE__ */ jsx7(CardContent3, { sx: { p: 1, "&:last-child": { pb: 1 } }, children: /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                /* @__PURE__ */ jsx7(IconComponent, { sx: { fontSize: 20, color: fileInfo.color, flexShrink: 0 } }),
+                /* @__PURE__ */ jsx7(Box7, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx7(
+                  Typography7,
+                  {
+                    variant: "body2",
+                    sx: {
+                      fontWeight: 600,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      color: "text.primary"
+                    },
+                    children: doc.name
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 0.5, alignItems: "center", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsx7(
-                    Typography7,
-                    {
-                      variant: "subtitle1",
-                      sx: {
-                        fontWeight: 600,
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        color: "text.primary"
-                      },
-                      children: doc.name
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs7(
-                    Typography7,
+                    Chip5,
                     {
-                      variant: "body2",
-                      color: "text.secondary",
+                      label: fileInfo.category,
+                      size: "small",
                       sx: {
-                        display: "-webkit-box",
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: "vertical",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        mt: 0.5
-                      },
-                      children: [
-                        doc.content.substring(0, 200),
-                        "..."
-                      ]
+                        bgcolor: fileInfo.color + "20",
+                        color: fileInfo.color,
+                        fontWeight: 600
+                      }
                     }
                   ),
-                  /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1, mt: 1 }, children: [
-                    /* @__PURE__ */ jsx7(
+                  (() => {
+                    const sourceInfo = getContentSourceInfo(doc, shouldUseVector);
+                    return /* @__PURE__ */ jsx7(
                       Chip5,
                       {
-                        label: fileInfo.category,
+                        icon: /* @__PURE__ */ jsx7(sourceInfo.icon, { sx: { fontSize: "0.8rem" } }),
+                        label: sourceInfo.label,
                         size: "small",
                         sx: {
-                          bgcolor: fileInfo.color + "20",
-                          color: fileInfo.color,
-                          fontWeight: 600
-                        }
-                      }
-                    ),
-                    (() => {
-                      const sourceInfo = getContentSourceInfo(doc, shouldUseVector);
-                      return /* @__PURE__ */ jsx7(
-                        Chip5,
-                        {
-                          icon: /* @__PURE__ */ jsx7(sourceInfo.icon, { sx: { fontSize: "0.8rem" } }),
-                          label: sourceInfo.label,
-                          size: "small",
-                          sx: {
-                            bgcolor: sourceInfo.bgColor,
-                            color: sourceInfo.color,
-                            fontWeight: 500,
-                            fontSize: "0.75rem",
-                            "& .MuiChip-icon": {
-                              color: sourceInfo.color
-                            }
+                          bgcolor: sourceInfo.bgColor,
+                          color: sourceInfo.color,
+                          fontWeight: 500,
+                          fontSize: "0.75rem",
+                          "& .MuiChip-icon": {
+                            color: sourceInfo.color
                           }
                         }
-                      );
-                    })(),
-                    /* @__PURE__ */ jsx7(
-                      Chip5,
-                      {
-                        label: formatFileSize(doc.content.length * 2),
-                        size: "small",
-                        variant: "outlined"
                       }
-                    )
-                  ] })
+                    );
+                  })(),
+                  /* @__PURE__ */ jsx7(
+                    Chip5,
+                    {
+                      label: formatFileSize(doc.content.length * 2),
+                      size: "small",
+                      variant: "outlined",
+                      sx: { display: { xs: "none", sm: "flex" } }
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs7(Box7, { sx: { display: "flex", gap: 0.5, alignItems: "center", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsx7(
                     IconButton4,
                     {
+                      size: "small",
                       onClick: (e) => {
                         e.stopPropagation();
                         toggleDocumentSelection(doc.id);
                       },
                       sx: {
-                        width: 32,
-                        height: 32,
+                        width: 28,
+                        height: 28,
                         bgcolor: isSelected ? "primary.main" : "transparent",
                         color: isSelected ? "primary.contrastText" : "text.secondary",
-                        border: isSelected ? "none" : "2px solid",
-                        borderColor: "text.secondary",
+                        border: isSelected ? "none" : "1px solid",
+                        borderColor: "divider",
                         borderRadius: "50%",
                         "&:hover": {
                           bgcolor: isSelected ? "primary.dark" : "action.hover",
                           borderColor: isSelected ? "primary.dark" : "primary.main"
                         }
                       },
-                      children: isSelected ? /* @__PURE__ */ jsx7(CheckIcon, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx7(Box7, { sx: {
-                        width: 12,
-                        height: 12,
+                      children: isSelected ? /* @__PURE__ */ jsx7(CheckIcon, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx7(Box7, { sx: {
+                        width: 10,
+                        height: 10,
                         borderRadius: "50%",
                         bgcolor: "transparent"
                       } })
                     }
                   ),
                   /* @__PURE__ */ jsx7(
-                    Button6,
+                    IconButton4,
                     {
-                      variant: "outlined",
                       size: "small",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleDownloadDocument(e, doc);
                       },
-                      sx: {
-                        textTransform: "none",
-                        height: { xs: 32, sm: 36, md: 40 },
-                        // Responsive height matching grid view
-                        minWidth: { xs: 90, sm: 100, md: 110 },
-                        // Consistent width
-                        borderWidth: 2,
-                        fontSize: { xs: "0.75rem", sm: "0.8rem", md: "0.875rem" },
-                        // Responsive font
-                        fontWeight: 600,
-                        px: { xs: 1, sm: 1.5 },
-                        // Responsive padding
-                        "&:hover": {
-                          borderWidth: 2,
-                          bgcolor: "primary.main",
-                          color: "primary.contrastText",
-                          transform: "translateY(-1px)",
-                          boxShadow: 2
-                        }
-                      },
-                      startIcon: /* @__PURE__ */ jsx7(DownloadIcon, { sx: { fontSize: { xs: "1rem", sm: "1.1rem" } } }),
-                      children: "Download"
+                      sx: { color: "text.secondary", "&:hover": { color: "primary.main" } },
+                      children: /* @__PURE__ */ jsx7(DownloadIcon, { sx: { fontSize: 18 } })
                     }
                   ),
                   /* @__PURE__ */ jsx7(
                     IconButton4,
                     {
+                      size: "small",
                       onClick: (e) => handleRemoveDocument(e, doc.id),
                       color: "error",
-                      children: /* @__PURE__ */ jsx7(DeleteIcon, {})
+                      children: /* @__PURE__ */ jsx7(DeleteIcon, { sx: { fontSize: 18 } })
                     }
                   )
                 ] })
@@ -5827,10 +5688,10 @@ var KnowledgeTab = ({
           );
         }) })
       ),
-      filteredAndSortedDocuments.length === 0 && /* @__PURE__ */ jsx7(Card3, { sx: { textAlign: "center", py: 6 }, children: /* @__PURE__ */ jsxs7(CardContent3, { children: [
-        /* @__PURE__ */ jsx7(SearchIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 2 } }),
-        /* @__PURE__ */ jsx7(Typography7, { variant: "h6", color: "text.secondary", gutterBottom: true, children: "No documents found" }),
-        /* @__PURE__ */ jsx7(Typography7, { variant: "body2", color: "text.secondary", children: "Try adjusting your search or filter criteria" }),
+      filteredAndSortedDocuments.length === 0 && /* @__PURE__ */ jsx7(Card3, { sx: { textAlign: "center", py: 4, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsxs7(CardContent3, { children: [
+        /* @__PURE__ */ jsx7(SearchIcon, { sx: { fontSize: 20, color: "text.secondary", mb: 1 } }),
+        /* @__PURE__ */ jsx7(Typography7, { variant: "subtitle2", color: "text.secondary", gutterBottom: true, children: "No documents found" }),
+        /* @__PURE__ */ jsx7(Typography7, { variant: "caption", color: "text.secondary", sx: { display: "block" }, children: "Try adjusting your search or filter criteria" }),
         /* @__PURE__ */ jsx7(
           Button6,
           {
@@ -5839,7 +5700,7 @@ var KnowledgeTab = ({
               setSearchQuery("");
               setSelectedCategory("all");
             },
-            sx: { mt: 2 },
+            sx: { mt: 1 },
             children: "Clear Filters"
           }
         )
@@ -7622,8 +7483,6 @@ import {
   Box as Box10,
   Typography as Typography9,
   Button as Button8,
-  Card as Card5,
-  CardContent as CardContent5,
   LinearProgress as LinearProgress4,
   Dialog as Dialog7,
   DialogTitle as DialogTitle6,
@@ -8107,18 +7966,17 @@ var StorageTab = ({ currentTheme }) => {
       /* @__PURE__ */ jsx10(Typography9, { variant: "body1", color: "text.secondary", sx: { ml: 2 }, children: "Analyzing storage usage..." })
     ] });
   }
-  return /* @__PURE__ */ jsx10(Box10, { children: /* @__PURE__ */ jsxs10(Box10, { sx: { px: { xs: 2, sm: 4, md: 6 }, pt: 3, pb: 5 }, children: [
-    /* @__PURE__ */ jsx10(Box10, { sx: { mb: 4 }, children: /* @__PURE__ */ jsxs10(Box10, { sx: {
+  return /* @__PURE__ */ jsx10(Box10, { children: /* @__PURE__ */ jsxs10(Box10, { sx: { px: { xs: 2, sm: 3, md: 4 }, pt: 2, pb: 3 }, children: [
+    /* @__PURE__ */ jsx10(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxs10(Box10, { sx: {
       display: "flex",
       flexDirection: { xs: "column", sm: "row" },
       justifyContent: "space-between",
       alignItems: { xs: "stretch", sm: "flex-start" },
-      gap: { xs: 2, sm: 0 },
-      mb: 2
+      gap: { xs: 1.5, sm: 0 }
     }, children: [
       /* @__PURE__ */ jsxs10(Box10, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx10(Typography9, { variant: "h5", color: "text.primary", sx: { mb: 1, fontWeight: 600 }, children: "Storage Management" }),
-        /* @__PURE__ */ jsx10(Typography9, { variant: "body1", color: "text.secondary", children: "Monitor and manage your local browser storage usage" })
+        /* @__PURE__ */ jsx10(Typography9, { variant: "h5", color: "text.primary", sx: { mb: 0.5, fontWeight: 600 }, children: "Storage Management" }),
+        /* @__PURE__ */ jsx10(Typography9, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Monitor and manage your local browser storage usage." })
       ] }),
       /* @__PURE__ */ jsxs10(Box10, { sx: {
         display: "flex",
@@ -8136,15 +7994,14 @@ var StorageTab = ({ currentTheme }) => {
             disabled: loading,
             sx: {
               minWidth: { xs: "auto", sm: "fit-content" },
-              flex: { xs: "1", sm: "0 0 auto" },
-              minHeight: 36
+              flex: { xs: "1", sm: "0 0 auto" }
             },
             children: [
               /* @__PURE__ */ jsxs10(Box10, { sx: { display: { xs: "none", sm: "flex" }, alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ jsx10(RefreshIcon, { fontSize: "medium" }),
+                /* @__PURE__ */ jsx10(RefreshIcon, { fontSize: "small" }),
                 "Refresh"
               ] }),
-              /* @__PURE__ */ jsx10(Box10, { sx: { display: { xs: "flex", sm: "none" }, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx10(RefreshIcon, { fontSize: "medium" }) })
+              /* @__PURE__ */ jsx10(Box10, { sx: { display: { xs: "flex", sm: "none" }, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx10(RefreshIcon, { fontSize: "small" }) })
             ]
           }
         ),
@@ -8190,18 +8047,23 @@ var StorageTab = ({ currentTheme }) => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs10(Box10, { sx: { mb: 4 }, children: [
-      /* @__PURE__ */ jsx10(Card5, { sx: { mb: 3 }, children: /* @__PURE__ */ jsxs10(CardContent5, { sx: {
-        display: "flex",
-        flexDirection: "column",
-        minHeight: 180
-      }, children: [
-        /* @__PURE__ */ jsxs10(Typography9, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: [
-          /* @__PURE__ */ jsx10(StorageIcon, { sx: { mr: 1, verticalAlign: "middle" } }),
-          "Storage Quota"
-        ] }),
-        /* @__PURE__ */ jsxs10(Box10, { sx: { mb: 2, flex: 1 }, children: [
-          /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsxs10(
+      Box10,
+      {
+        sx: {
+          p: { xs: 1.5, sm: 1.75 },
+          mb: { xs: 1.25, md: 1.5 },
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 2,
+          bgcolor: "background.paper"
+        },
+        children: [
+          /* @__PURE__ */ jsxs10(Typography9, { variant: "overline", sx: { color: "text.secondary", display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ jsx10(StorageIcon, { fontSize: "small" }),
+            "Storage Quota"
+          ] }),
+          /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 0.5, mb: 1.5 }, children: [
             /* @__PURE__ */ jsx10(
               Chip7,
               {
@@ -8245,11 +8107,11 @@ var StorageTab = ({ currentTheme }) => {
               variant: "determinate",
               value: usagePercentage,
               sx: {
-                height: 8,
-                borderRadius: 4,
+                height: 6,
+                borderRadius: 3,
                 bgcolor: "action.hover",
                 "& .MuiLinearProgress-bar": {
-                  borderRadius: 4,
+                  borderRadius: 3,
                   bgcolor: usagePercentage > 80 ? "error.main" : usagePercentage > 60 ? "warning.main" : "success.main"
                 }
               }
@@ -8258,47 +8120,40 @@ var StorageTab = ({ currentTheme }) => {
           /* @__PURE__ */ jsxs10(Typography9, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block" }, children: [
             usagePercentage.toFixed(1),
             "% used"
-          ] })
-        ] }),
-        usagePercentage > 80 && /* @__PURE__ */ jsx10(Alert8, { severity: "warning", sx: { mt: "auto" }, children: "Storage usage is high. Consider clearing unused data." })
-      ] }) }),
-      /* @__PURE__ */ jsx10(Card5, { children: /* @__PURE__ */ jsxs10(CardContent5, { sx: {
-        display: "flex",
-        flexDirection: "column",
-        minHeight: 140
-      }, children: [
-        /* @__PURE__ */ jsx10(Typography9, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: "Usage Summary" }),
-        /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
-          /* @__PURE__ */ jsx10(
-            Chip7,
-            {
-              label: `${storageCategories.length} Categories`,
-              color: "primary",
-              size: "small"
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Chip7,
-            {
-              label: `${storageCategories.reduce((sum, cat) => sum + cat.itemCount, 0)} Items`,
-              color: "secondary",
-              size: "small"
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Chip7,
-            {
-              label: `${formatBytes(totalUsed)} Used`,
-              color: "info",
-              size: "small"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx10(Typography9, { variant: "body2", color: "text.secondary", sx: { mt: "auto" }, children: usageSummaryMessage })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx10(Typography9, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Storage Categories" }),
-    /* @__PURE__ */ jsx10(Box10, { children: storageCategories.length === 0 ? /* @__PURE__ */ jsxs10(Alert8, { severity: "info", sx: { mt: 2 }, children: [
+          ] }),
+          usagePercentage > 80 && /* @__PURE__ */ jsx10(Alert8, { severity: "warning", sx: { mt: 1, py: 0 }, children: "Storage usage is high. Consider clearing unused data." }),
+          /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx10(
+              Chip7,
+              {
+                label: `${storageCategories.length} Categories`,
+                color: "primary",
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              Chip7,
+              {
+                label: `${storageCategories.reduce((sum, cat) => sum + cat.itemCount, 0)} Items`,
+                color: "secondary",
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              Chip7,
+              {
+                label: `${formatBytes(totalUsed)} Used`,
+                color: "info",
+                size: "small"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10(Typography9, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1 }, children: usageSummaryMessage })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10(Typography9, { variant: "overline", sx: { display: "block", mb: 1, color: "text.secondary" }, children: "Storage Categories" }),
+    /* @__PURE__ */ jsx10(Box10, { children: storageCategories.length === 0 ? /* @__PURE__ */ jsxs10(Alert8, { severity: "info", sx: { mt: 1 }, children: [
       /* @__PURE__ */ jsx10(Typography9, { variant: "body2", children: "No storage data found. This could mean:" }),
       /* @__PURE__ */ jsxs10(Typography9, { variant: "body2", component: "ul", sx: { mt: 1, pl: 2 }, children: [
         /* @__PURE__ */ jsx10("li", { children: "All databases are empty" }),
@@ -8306,7 +8161,7 @@ var StorageTab = ({ currentTheme }) => {
         /* @__PURE__ */ jsx10("li", { children: "There was an error accessing the databases" })
       ] }),
       /* @__PURE__ */ jsx10(Typography9, { variant: "body2", sx: { mt: 1 }, children: 'Try clicking "Refresh" or check the browser console for more details.' })
-    ] }) : /* @__PURE__ */ jsx10(Stack4, { spacing: 2, children: storageCategories.map((category) => {
+    ] }) : /* @__PURE__ */ jsx10(Stack4, { spacing: 1, children: storageCategories.map((category) => {
       const IconComponent = category.icon;
       const categoryPercentage = storageQuota.quota > 0 ? category.size / storageQuota.quota * 100 : 0;
       const categoryRelativePercentage = totalUsed > 0 ? category.size / totalUsed * 100 : 0;
@@ -8317,29 +8172,41 @@ var StorageTab = ({ currentTheme }) => {
         categoryPercentage: categoryPercentage.toFixed(2),
         categoryRelativePercentage: categoryRelativePercentage.toFixed(2)
       });
-      return /* @__PURE__ */ jsxs10(Accordion, { sx: { bgcolor: "background.paper" }, children: [
-        /* @__PURE__ */ jsx10(
-          AccordionSummary,
-          {
-            expandIcon: /* @__PURE__ */ jsx10(ExpandMoreIcon, {}),
-            "aria-controls": `${category.name}-content`,
-            id: `${category.name}-header`,
-            children: /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", alignItems: "center", width: "100%", pr: 2 }, children: [
-              /* @__PURE__ */ jsx10(IconComponent, { sx: { color: category.color, mr: 2 } }),
-              /* @__PURE__ */ jsxs10(Box10, { sx: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx10(
-                  Typography9,
-                  {
-                    variant: "body1",
-                    style: {
-                      fontWeight: 600,
-                      color: theme.palette.mode === "dark" ? "#ffffff" : theme.palette.text.primary
-                    },
-                    children: category.name
-                  }
-                ),
-                /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", alignItems: "center", gap: 2, mt: 0.5 }, children: [
-                  /* @__PURE__ */ jsx10(Typography9, { variant: "body2", color: "text.secondary", children: formatBytes(category.size) }),
+      return /* @__PURE__ */ jsxs10(
+        Accordion,
+        {
+          disableGutters: true,
+          elevation: 0,
+          sx: {
+            bgcolor: "background.paper",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 2,
+            "&:before": { display: "none" }
+          },
+          children: [
+            /* @__PURE__ */ jsx10(
+              AccordionSummary,
+              {
+                expandIcon: /* @__PURE__ */ jsx10(ExpandMoreIcon, {}),
+                "aria-controls": `${category.name}-content`,
+                id: `${category.name}-header`,
+                sx: { px: 1.5, minHeight: 0, "& .MuiAccordionSummary-content": { my: 1 } },
+                children: /* @__PURE__ */ jsxs10(Box10, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 1.5, pr: 1.5 }, children: [
+                  /* @__PURE__ */ jsx10(IconComponent, { fontSize: "small", sx: { color: category.color } }),
+                  /* @__PURE__ */ jsx10(
+                    Typography9,
+                    {
+                      variant: "body2",
+                      style: {
+                        fontWeight: 600,
+                        color: theme.palette.mode === "dark" ? "#ffffff" : theme.palette.text.primary
+                      },
+                      sx: { minWidth: 0, flexShrink: 0 },
+                      children: category.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10(Typography9, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0 }, children: formatBytes(category.size) }),
                   /* @__PURE__ */ jsx10(
                     Chip7,
                     {
@@ -8348,7 +8215,7 @@ var StorageTab = ({ currentTheme }) => {
                       variant: "outlined"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(Box10, { sx: { flex: 1, mx: 2 }, children: /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx10(Box10, { sx: { flex: 1, minWidth: 24 }, children: /* @__PURE__ */ jsx10(
                     LinearProgress4,
                     {
                       variant: "determinate",
@@ -8364,104 +8231,127 @@ var StorageTab = ({ currentTheme }) => {
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs10(Typography9, { variant: "caption", color: "text.secondary", children: [
+                  /* @__PURE__ */ jsxs10(Typography9, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0 }, children: [
                     categoryRelativePercentage.toFixed(1),
                     "%"
                   ] })
                 ] })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx10(AccordionDetails, { children: /* @__PURE__ */ jsxs10(Box10, { sx: { pl: 5 }, children: [
-          /* @__PURE__ */ jsx10(Typography9, { variant: "body2", color: "text.secondary", paragraph: true, children: category.description }),
-          /* @__PURE__ */ jsx10(Typography9, { variant: "subtitle2", gutterBottom: true, children: "Storage Locations:" }),
-          /* @__PURE__ */ jsx10(List2, { dense: true, children: category.stores.map((store) => /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.5 }, children: [
-            /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx10(StorageIcon, { fontSize: "small" }) }),
-            /* @__PURE__ */ jsx10(
-              ListItemText,
-              {
-                primary: store,
-                primaryTypographyProps: { variant: "body2", fontFamily: "monospace" }
-              }
-            )
-          ] }, store)) }),
-          category.canClear ? /* @__PURE__ */ jsxs10(Box10, { sx: { mt: 2, pt: 2, borderTop: 1, borderColor: "divider" }, children: [
-            /* @__PURE__ */ jsxs10(
-              Button8,
-              {
-                variant: "outlined",
-                color: "error",
-                size: "small",
-                startIcon: /* @__PURE__ */ jsx10(DeleteIcon, {}),
-                onClick: () => setClearCategoryDialog(category),
-                disabled: clearing,
-                children: [
-                  "Clear ",
-                  category.name
-                ]
               }
             ),
-            category.clearWarning && /* @__PURE__ */ jsx10(Alert8, { severity: "warning", sx: { mt: 2 }, children: /* @__PURE__ */ jsx10(Typography9, { variant: "caption", children: category.clearWarning }) })
-          ] }) : /* @__PURE__ */ jsx10(Alert8, { severity: "info", sx: { mt: 2 }, children: /* @__PURE__ */ jsx10(Typography9, { variant: "caption", children: category.itemCount === 0 ? "This category is empty." : "This category cannot be cleared automatically." }) })
-        ] }) })
-      ] }, category.name);
+            /* @__PURE__ */ jsx10(AccordionDetails, { sx: { px: 1.5, pt: 0, pb: 1.5 }, children: /* @__PURE__ */ jsxs10(Box10, { sx: { pl: 3.5 }, children: [
+              /* @__PURE__ */ jsx10(Typography9, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: category.description }),
+              /* @__PURE__ */ jsx10(Typography9, { variant: "overline", sx: { color: "text.secondary" }, children: "Storage Locations" }),
+              /* @__PURE__ */ jsx10(List2, { dense: true, disablePadding: true, children: category.stores.map((store) => /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.25 }, children: [
+                /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 28 }, children: /* @__PURE__ */ jsx10(StorageIcon, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx10(
+                  ListItemText,
+                  {
+                    primary: store,
+                    primaryTypographyProps: { variant: "caption", fontFamily: "monospace" }
+                  }
+                )
+              ] }, store)) }),
+              category.canClear ? /* @__PURE__ */ jsxs10(Box10, { sx: { mt: 1, pt: 1, borderTop: 1, borderColor: "divider" }, children: [
+                /* @__PURE__ */ jsxs10(
+                  Button8,
+                  {
+                    variant: "outlined",
+                    color: "error",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsx10(DeleteIcon, {}),
+                    onClick: () => setClearCategoryDialog(category),
+                    disabled: clearing,
+                    children: [
+                      "Clear ",
+                      category.name
+                    ]
+                  }
+                ),
+                category.clearWarning && /* @__PURE__ */ jsx10(Typography9, { variant: "caption", color: "warning.main", sx: { display: "block", mt: 1 }, children: category.clearWarning })
+              ] }) : /* @__PURE__ */ jsx10(Typography9, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1 }, children: category.itemCount === 0 ? "This category is empty." : "This category cannot be cleared automatically." })
+            ] }) })
+          ]
+        },
+        category.name
+      );
     }) }) }),
-    /* @__PURE__ */ jsx10(Card5, { sx: { mt: 4 }, children: /* @__PURE__ */ jsxs10(CardContent5, { children: [
-      /* @__PURE__ */ jsxs10(Typography9, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: [
-        /* @__PURE__ */ jsx10(InfoIcon, { sx: { mr: 1, verticalAlign: "middle" } }),
-        "Storage Tips & Clear Options"
-      ] }),
-      /* @__PURE__ */ jsxs10(List2, { children: [
-        /* @__PURE__ */ jsxs10(ListItem, { children: [
-          /* @__PURE__ */ jsx10(ListItemIcon, { children: /* @__PURE__ */ jsx10(
-            CheckCircleIcon,
-            {
-              sx: {
-                color: syncFeaturesActive ? theme.palette.warning.main : theme.palette.success.main
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx10(
-            ListItemText,
-            {
-              primary: storageStatusPrimary,
-              secondary: syncFeaturesActive ? "Some features (conversation sync or advanced vector storage) can sync items to your configured gateway storage." : "With conversation sync and advanced vector storage turned off, everything stays in this browser."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs10(ListItem, { children: [
-          /* @__PURE__ */ jsx10(ListItemIcon, { children: /* @__PURE__ */ jsx10(CleaningServicesIcon, { color: "info" }) }),
-          /* @__PURE__ */ jsx10(
-            ListItemText,
-            {
-              primary: "Clear All Data (Safe)",
-              secondary: "Deletes all items but keeps database structure intact. App continues working normally."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs10(ListItem, { children: [
-          /* @__PURE__ */ jsx10(ListItemIcon, { children: /* @__PURE__ */ jsx10(DeleteIcon, { color: "error" }) }),
-          /* @__PURE__ */ jsx10(
-            ListItemText,
-            {
-              primary: "Nuclear Clear (Complete Reset)",
-              secondary: "Completely destroys all databases and forces app reload. Use only for complete reset."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs10(ListItem, { children: [
-          /* @__PURE__ */ jsx10(ListItemIcon, { children: /* @__PURE__ */ jsx10(WarningIcon, { color: "warning" }) }),
-          /* @__PURE__ */ jsx10(
-            ListItemText,
-            {
-              primary: "Backup important data",
-              secondary: "Export custom models and important documents before clearing storage"
-            }
-          )
-        ] })
-      ] })
-    ] }) }),
+    /* @__PURE__ */ jsxs10(
+      Box10,
+      {
+        sx: {
+          mt: 1.5,
+          p: { xs: 1.5, sm: 1.75 },
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 2,
+          bgcolor: "background.paper"
+        },
+        children: [
+          /* @__PURE__ */ jsxs10(Typography9, { variant: "overline", sx: { color: "text.secondary", display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ jsx10(InfoIcon, { fontSize: "small" }),
+            "Storage Tips & Clear Options"
+          ] }),
+          /* @__PURE__ */ jsxs10(List2, { dense: true, disablePadding: true, sx: { mt: 0.5 }, children: [
+            /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx10(
+                CheckCircleIcon,
+                {
+                  fontSize: "small",
+                  sx: {
+                    color: syncFeaturesActive ? theme.palette.warning.main : theme.palette.success.main
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx10(
+                ListItemText,
+                {
+                  primary: storageStatusPrimary,
+                  primaryTypographyProps: { variant: "body2" },
+                  secondaryTypographyProps: { variant: "caption" },
+                  secondary: syncFeaturesActive ? "Some features (conversation sync or advanced vector storage) can sync items to your configured gateway storage." : "With conversation sync and advanced vector storage turned off, everything stays in this browser."
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx10(CleaningServicesIcon, { fontSize: "small", color: "info" }) }),
+              /* @__PURE__ */ jsx10(
+                ListItemText,
+                {
+                  primary: "Clear All Data (Safe)",
+                  primaryTypographyProps: { variant: "body2" },
+                  secondaryTypographyProps: { variant: "caption" },
+                  secondary: "Deletes all items but keeps database structure intact. App continues working normally."
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx10(DeleteIcon, { fontSize: "small", color: "error" }) }),
+              /* @__PURE__ */ jsx10(
+                ListItemText,
+                {
+                  primary: "Nuclear Clear (Complete Reset)",
+                  primaryTypographyProps: { variant: "body2" },
+                  secondaryTypographyProps: { variant: "caption" },
+                  secondary: "Completely destroys all databases and forces app reload. Use only for complete reset."
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10(ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ jsx10(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx10(WarningIcon, { fontSize: "small", color: "warning" }) }),
+              /* @__PURE__ */ jsx10(
+                ListItemText,
+                {
+                  primary: "Backup important data",
+                  primaryTypographyProps: { variant: "body2" },
+                  secondaryTypographyProps: { variant: "caption" },
+                  secondary: "Export custom models and important documents before clearing storage"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs10(
       Dialog7,
       {
@@ -9872,7 +9762,7 @@ var MCPToolsTabV2_default = MCPToolsTabV2;
 
 // src/management/management.tsx
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
-var preloadChatPage = () => import("./chat-JDAI4UHT.mjs");
+var preloadChatPage = () => import("./chat-J2WTUEBN.mjs");
 var buildCapabilitiesUrl = (gatewayApiUrl) => {
   const trimmed = gatewayApiUrl.replace(/\/$/, "");
   if (trimmed.endsWith("/api")) {
@@ -10660,6 +10550,9 @@ var Management = () => {
         },
         MuiTextField: {
           defaultProps: { size: "small" }
+        },
+        MuiButton: {
+          defaultProps: { size: "small" }
         }
       }
     });
@@ -10802,82 +10695,46 @@ var Management = () => {
               if (isMobile) setSidebarOpen(false);
             },
             sx: {
-              minHeight: 56,
-              borderRadius: 3,
-              mx: 1,
-              my: 0.5,
-              px: 2,
-              py: 1.5,
-              border: tabIndex === idx ? (theme2) => `2px solid ${theme2.palette.primary.main}40` : "2px solid transparent",
-              bgcolor: tabIndex === idx ? (theme2) => theme2.palette.mode === "dark" ? "rgba(25,118,210,0.12)" : "rgba(25,118,210,0.08)" : "transparent",
+              minHeight: 36,
+              borderRadius: 1.5,
+              mx: 0.5,
+              my: 0.125,
+              px: 1.25,
+              py: 0.5,
+              bgcolor: tabIndex === idx ? (theme2) => theme2.palette.mode === "dark" ? "rgba(25,118,210,0.14)" : "rgba(25,118,210,0.10)" : "transparent",
               color: tabIndex === idx ? "primary.main" : "text.primary",
-              fontWeight: tabIndex === idx ? 700 : 500,
-              transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+              transition: "background-color 0.15s ease, color 0.15s ease",
               position: "relative",
-              overflow: "hidden",
               "&:before": {
                 content: '""',
                 position: "absolute",
                 left: 0,
-                top: 0,
-                bottom: 0,
-                width: 4,
+                top: 5,
+                bottom: 5,
+                width: 3,
                 bgcolor: tabIndex === idx ? "primary.main" : "transparent",
-                borderRadius: "0 2px 2px 0",
-                transition: "all 0.2s"
+                borderRadius: "0 2px 2px 0"
               },
               "&:hover": {
-                bgcolor: (theme2) => theme2.palette.mode === "dark" ? "rgba(25,118,210,0.15)" : "rgba(25,118,210,0.10)",
-                color: "primary.main",
-                transform: "translateX(4px)",
-                "&:before": {
-                  bgcolor: "primary.main"
-                }
-              },
-              "&:active": {
-                transform: "translateX(2px) scale(0.98)"
+                bgcolor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)",
+                color: "primary.main"
               },
               "& .MuiListItemIcon-root": {
-                minWidth: 44,
-                mr: 1.5
-              }
+                minWidth: 28,
+                mr: 1,
+                color: tabIndex === idx ? "primary.main" : "text.secondary"
+              },
+              "& .MuiListItemIcon-root svg": { width: 17, height: 17 }
             },
             children: [
-              /* @__PURE__ */ jsx14(
-                ListItemIcon2,
-                {
-                  sx: {
-                    color: tabIndex === idx ? "primary.main" : "text.secondary",
-                    fontSize: 24,
-                    transition: "all 0.2s"
-                  },
-                  children: tab.icon
-                }
-              ),
+              /* @__PURE__ */ jsx14(ListItemIcon2, { children: tab.icon }),
               /* @__PURE__ */ jsx14(
                 ListItemText2,
                 {
                   primary: tab.label,
                   primaryTypographyProps: {
-                    fontWeight: tabIndex === idx ? 700 : 600,
-                    fontSize: "1rem",
-                    letterSpacing: "-0.01em"
-                  }
-                }
-              ),
-              tabIndex === idx && /* @__PURE__ */ jsx14(
-                Box14,
-                {
-                  sx: {
-                    position: "absolute",
-                    right: -10,
-                    top: -10,
-                    width: 90,
-                    height: 90,
-                    bgcolor: (theme2) => theme2.palette.primary.main,
-                    filter: "blur(45px)",
-                    opacity: 0.35,
-                    pointerEvents: "none"
+                    fontWeight: tabIndex === idx ? 700 : 500,
+                    fontSize: "0.85rem"
                   }
                 }
               )
@@ -11084,9 +10941,9 @@ var Management = () => {
             Box14,
             {
               sx: {
-                width: 280,
-                minWidth: 280,
-                maxWidth: 280,
+                width: 240,
+                minWidth: 240,
+                maxWidth: 240,
                 height: "100vh",
                 display: "flex",
                 flexDirection: "column",
@@ -11118,7 +10975,7 @@ var Management = () => {
                 display: "flex",
                 flexDirection: "column",
                 bgcolor: "background.default",
-                ml: isMobile ? 0 : "280px",
+                ml: isMobile ? 0 : "240px",
                 // Fixed left margin only on desktop
                 mt: 0,
                 transition: "margin-left 0.2s"
@@ -11241,4 +11098,4 @@ export {
   useGatewayMemory,
   management_default
 };
-//# sourceMappingURL=chunk-Y54VH63F.mjs.map
+//# sourceMappingURL=chunk-PIBF62UY.mjs.map