@burtson-labs/bandit-engine 2.0.110 → 2.0.112

package/dist/index.js

@@ -34979,7 +34979,6 @@ var PersonalitiesTab = ({
   const theme = (0, import_styles31.useTheme)();
   const isMobile = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
   const [personalityTabIndex, setPersonalityTabIndex] = (0, import_react48.useState)(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] = (0, import_react48.useState)(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = (0, import_react48.useState)(false);
@@ -35628,49 +35627,19 @@ var PersonalitiesTab = ({
     ] })
   ] });
   const renderCreateEditTab = () => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { p: { xs: 1.5, sm: 2 } }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: { xs: 2.5, md: 4 } }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: { xs: 1.25, md: 1.5 } }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_material40.Typography,
         {
-          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__ */ (0, import_jsx_runtime40.jsx)(
-        import_material40.Typography,
-        {
-          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__ */ (0, import_jsx_runtime40.jsxs)(
-        import_material40.Alert,
-        {
-          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__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { fontWeight: 600, color: "primary.main", fontSize: { xs: "0.85rem", sm: "0.9rem" } }, children: "Creating a new personality" }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { 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__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { 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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: sectionGap }, children: [
-      localSelectedModel.selectedModel && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", alignItems: "center", mt: 2, mb: 3 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 1.5 }, children: [
+      localSelectedModel.selectedModel && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           import_material40.Avatar,
           {
@@ -35681,10 +35650,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__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, children: localSelectedModel.selectedModel })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: localSelectedModel.selectedModel })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         import_material40.TextField,
@@ -35720,7 +35689,7 @@ var PersonalitiesTab = ({
           },
           fullWidth: true,
           select: true,
-          sx: { mb: sectionGap },
+          sx: { mb: 1.5 },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.MenuItem, { value: "", children: "Create New Personality" }),
             availableModels.map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.MenuItem, { value: model.name, children: model.name }, index))
@@ -35728,34 +35697,34 @@ var PersonalitiesTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_material40.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__ */ (0, import_jsx_runtime40.jsx)(
-      import_material40.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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Mood & Personality" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Click any mood to automatically add personality instructions to your system prompt:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: moodSuggestions.map((mood) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, gap: 1.5, mb: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_material40.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__ */ (0, import_jsx_runtime40.jsx)(
+        import_material40.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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Mood & Personality" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Click a mood to add personality instructions to your prompt." }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: moodSuggestions.map((mood) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         import_material40.Chip,
         {
           label: mood.label,
@@ -35780,10 +35749,10 @@ var PersonalitiesTab = ({
         mood.label
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Formatting Tips" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Click any tip to add professional formatting to your system prompt:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Formatting Tips" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Click a tip to add formatting guidance to your prompt." }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { 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" },
@@ -35834,10 +35803,10 @@ var PersonalitiesTab = ({
         tip.label
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: sectionGap }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Formatting Tools" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Add visual formatting to make your AI responses more engaging:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Formatting Tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Add visual formatting to make responses more engaging." }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
         {
           label: "Highlight Text",
           text: "Use <mark>highlighted text</mark> to emphasize important points.",
@@ -35934,23 +35903,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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 4 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Select an Avatar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 2, color: "text.secondary" }, children: "Choose from our curated collection of avatars to give your AI personality a face:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 1, color: "primary.main", fontWeight: 600, display: "block" }, children: "Robotic Collection" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", gap: 2, mb: 3, flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mb: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "subtitle2", sx: { mb: 0.5, fontWeight: 700, color: "text.primary" }, children: "Select an Avatar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { mb: 1, color: "text.secondary" }, children: "Choose an avatar to give your personality a face." }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 0.75, color: "primary.main", fontWeight: 600, display: "block" }, children: "Robotic Collection" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { 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" }
@@ -35964,8 +35932,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",
@@ -35979,8 +35947,8 @@ var PersonalitiesTab = ({
         },
         label
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 1, color: "secondary.main", fontWeight: 600, display: "block" }, children: "\u{1F465} Professional Characters" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", gap: 2, mb: 3, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 0.75, color: "secondary.main", fontWeight: 600, display: "block" }, children: "Professional Characters" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { 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" },
@@ -35989,7 +35957,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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+      ].map(({ label, src, role }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.25 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           import_material40.Avatar,
           {
@@ -36000,8 +35968,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",
@@ -36026,51 +35994,50 @@ var PersonalitiesTab = ({
           overflow: "hidden"
         }, children: role })
       ] }, label)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 1, color: "warning.main", fontWeight: 600, display: "block" }, children: "Custom Upload" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        import_material40.Button,
-        {
-          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__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { mb: 0.75, color: "warning.main", fontWeight: 600, display: "block" }, children: "Custom Upload" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: { xs: "column", sm: "row" }, alignItems: { sm: "center" }, gap: 1.5 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          import_material40.Button,
+          {
+            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__ */ (0, import_jsx_runtime40.jsx)(
-              "input",
-              {
-                type: "file",
-                accept: "image/png, image/jpeg, image/jpg",
-                hidden: true,
-                onChange: handleImageUpload
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { 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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mt: 2, display: "flex", alignItems: "center", gap: 2 }, children: [
+            children: [
+              "Upload & Crop Custom Avatar",
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "input",
+                {
+                  type: "file",
+                  accept: "image/png, image/jpeg, image/jpg",
+                  hidden: true,
+                  onChange: handleImageUpload
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", color: "text.secondary", children: "JPG/PNG up to 10MB \xB7 output 512\xD7512px" })
+      ] }),
+      (customAvatarBase64 || presetAvatar) && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { mt: 1.5, display: "flex", alignItems: "center", gap: 1.5 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           import_material40.Avatar,
           {
             src: customAvatarBase64 || presetAvatar,
             alt: "Avatar Preview",
             sx: {
-              width: 96,
-              height: 96,
+              width: 56,
+              height: 56,
               border: "3px solid",
               borderColor: "primary.main",
               boxShadow: 3
@@ -36101,14 +36068,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" },
@@ -36151,16 +36118,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__ */ (0, import_jsx_runtime40.jsxs)(
             import_material40.Typography,
             {
-              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,
@@ -36168,14 +36135,13 @@ var PersonalitiesTab = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: { xs: 1, md: 2 }, flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               import_material40.Button,
               {
                 variant: "contained",
                 color: "primary",
-                size: isMobile ? "medium" : "large",
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AutoAwesomeIcon, { fontSize: isMobile ? "small" : "medium" }),
+                startIcon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AutoAwesomeIcon, { fontSize: "small" }),
                 onClick: () => {
                   setLocalSelectedModel({
                     name: "",
@@ -36188,15 +36154,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"
@@ -36216,10 +36176,10 @@ var PersonalitiesTab = ({
         ]
       }
     ),
-    availableModels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Card, { sx: { textAlign: "center", py: 8, border: "2px dashed", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.CardContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, gutterBottom: true, children: "No Personalities Yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", color: "text.secondary", paragraph: true, children: "Get started by creating your first custom AI personality or choosing from our templates." }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap", mt: 3 }, children: [
+    availableModels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Card, { sx: { textAlign: "center", py: 3, border: "1px dashed", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.CardContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "subtitle2", sx: { fontWeight: 700, color: "text.primary" }, gutterBottom: true, children: "No Personalities Yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", color: "text.secondary", children: "Create your first custom AI personality or choose from a template." }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: 1.5, justifyContent: "center", flexWrap: "wrap", mt: 1.5 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           import_material40.Button,
           {
@@ -36236,7 +36196,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"
           }
         ),
@@ -36246,74 +36206,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__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: { xs: 2, md: 3 } }, children: availableModels.map((model) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Card, { sx: { border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.CardContent, { sx: { p: { xs: 2.5, sm: 3 } }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", alignItems: "center", mb: { xs: 1.5, md: 2 } }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_material40.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__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body1", sx: { fontWeight: 600, color: "text.primary" }, children: model.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { color: "text.secondary", fontStyle: "italic" }, children: model.tagline })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_material40.Typography,
-        {
-          variant: "body2",
-          sx: {
-            color: "text.secondary",
-            mb: 3,
-            display: "-webkit-box",
-            WebkitLineClamp: 3,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden"
-          },
-          children: model.systemPrompt
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: 2 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_material40.Button,
-          {
-            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__ */ (0, import_jsx_runtime40.jsx)(
-          import_material40.Button,
-          {
-            variant: "outlined",
-            color: "error",
-            onClick: () => handleDeletePersonality(model.name),
-            sx: { flex: 1 },
-            children: "Delete"
-          }
-        )
-      ] })
-    ] }) }, model.name)) }),
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: availableModels.map((model) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Card, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      import_material40.CardContent,
+      {
+        sx: {
+          p: 1,
+          "&:last-child": { pb: 1 },
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          flexWrap: { xs: "wrap", sm: "nowrap" }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_material40.Avatar,
+            {
+              src: resolveAvatar(model),
+              alt: model.name,
+              sx: { width: 40, height: 40, flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary", lineHeight: 1.2 }, noWrap: true, children: model.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block" }, noWrap: true, children: model.tagline })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Box, { sx: { display: "flex", gap: 1, flexShrink: 0, width: { xs: "100%", sm: "auto" } }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_material40.Button,
+              {
+                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__ */ (0, import_jsx_runtime40.jsx)(
+              import_material40.Button,
+              {
+                variant: "outlined",
+                color: "error",
+                onClick: () => handleDeletePersonality(model.name),
+                sx: { flex: { xs: 1, sm: "initial" } },
+                children: "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    ) }, model.name)) }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_material40.Dialog, { open: restoreDialogOpen, onClose: () => setRestoreDialogOpen(false), children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.DialogTitle, { children: "Restore Default Personalities?" }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_material40.DialogContentText, { children: "This will delete all custom personalities and reset to the original configuration." }) }),
@@ -38129,7 +38085,7 @@ var BrandingTab = ({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { height: "100%", display: "flex", flexDirection: "column", p: { xs: 1.5, sm: 2 } }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { mb: { xs: 2, md: 3 }, flex: "0 0 auto", display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { mb: { xs: 1.5, md: 2 }, flex: "0 0 auto" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_material43.Typography,
         {
@@ -38138,30 +38094,22 @@ var BrandingTab = ({
           children: "Branding & Themes"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        import_material43.Typography,
-        {
-          variant: "body1",
-          sx: { color: "text.secondary", fontSize: { xs: "0.95rem", sm: "1rem" }, lineHeight: 1.5 },
-          children: "Customize your brand identity and visual appearance."
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Alert, { severity: "info", sx: { borderRadius: 2, px: { xs: 1.5, sm: 2 }, py: { xs: 1.25, sm: 1.5 } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "body2", sx: { fontSize: { xs: "0.82rem", sm: "0.88rem" }, lineHeight: 1.6 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Customize your brand identity and visual appearance." }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { 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__ */ (0, import_jsx_runtime43.jsxs)(
       import_material43.Paper,
       {
         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__ */ (0, import_jsx_runtime43.jsxs)(
@@ -38171,15 +38119,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__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { flex: "1 1 auto", display: "flex", flexDirection: "column" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 1, fontSize: "1rem", color: "text.primary" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UploadIcon, { color: "primary", fontSize: "small" }),
-                    "Logo Upload"
-                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "overline", sx: { mb: 0.5, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary" }, children: "Logo Upload" }),
                   /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                     import_material43.Box,
                     {
@@ -38198,7 +38143,7 @@ var BrandingTab = ({
                         transition: "all 0.3s ease",
                         position: "relative",
                         flex: "1 1 auto",
-                        minHeight: 160,
+                        minHeight: 120,
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
@@ -38237,7 +38182,7 @@ var BrandingTab = ({
                             {
                               className: "upload-icon",
                               sx: {
-                                fontSize: 56,
+                                fontSize: 32,
                                 color: "text.secondary",
                                 transition: "color 0.3s ease"
                               }
@@ -38285,7 +38230,7 @@ var BrandingTab = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { mt: 2, flex: "0 0 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { mt: 1.5, flex: "0 0 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   import_material43.TextField,
                   {
                     label: "Custom Branding Text",
@@ -38305,15 +38250,12 @@ var BrandingTab = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { flex: 1, width: "100%" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 1, fontSize: "1rem", color: "text.primary" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewIcon, { color: "primary", fontSize: "small" }),
-              "Live Preview"
-            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "overline", sx: { mb: 0.5, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Live Preview" }),
             /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
               import_material43.Box,
               {
                 sx: {
-                  height: { xs: 260, md: 320 },
+                  height: { xs: 220, md: 260 },
                   display: "flex",
                   flexDirection: "column",
                   position: "relative",
@@ -38321,7 +38263,7 @@ var BrandingTab = ({
                   borderRadius: 2,
                   overflow: "hidden",
                   px: 2,
-                  py: 3
+                  py: 2
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: {
@@ -38397,14 +38339,14 @@ var BrandingTab = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Paper, { sx: { p: 2, borderRadius: 2, flex: "0 0 auto", mb: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, fontSize: "1rem", color: "text.primary" }, children: "Theme Selection" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Paper, { 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__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "overline", sx: { mb: 1, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Theme Selection" }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_material43.Box,
         {
           sx: {
             display: "grid",
-            gap: 1.5,
+            gap: 1,
             gridTemplateColumns: {
               xs: "repeat(4, 1fr)",
               sm: "repeat(6, 1fr)",
@@ -38428,12 +38370,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__ */ (0, import_jsx_runtime43.jsx)(
                     import_material43.Chip,
@@ -38451,12 +38391,12 @@ var BrandingTab = ({
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.CardContent, { sx: { p: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.CardContent, { sx: { p: 0.75, "&:last-child": { pb: 0.75 } }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                       import_material43.Box,
                       {
                         sx: {
-                          height: 40,
+                          height: 32,
                           backgroundColor: themeOption.palette?.background?.default,
                           borderRadius: 1,
                           position: "relative",
@@ -38535,10 +38475,10 @@ var BrandingTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Paper, { sx: { p: 2, borderRadius: 2, flex: "0 0 auto" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "h6", sx: { mb: 1.5, fontWeight: 600, fontSize: "1rem", color: "text.primary" }, children: "Actions" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1.5 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Paper, { sx: { p: { xs: 1.5, sm: 1.75 }, border: "1px solid", borderColor: "divider", borderRadius: 2, flex: "0 0 auto" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "overline", sx: { mb: 1, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Actions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_material43.Button,
           {
             variant: "outlined",
@@ -38551,7 +38491,7 @@ var BrandingTab = ({
             children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "\u2713 Saved" : saveStatus === "error" ? "\u2717 Error" : "Save"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_material43.Button,
           {
             variant: "outlined",
@@ -38562,7 +38502,7 @@ var BrandingTab = ({
             children: "Export"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             import_material43.Button,
             {
@@ -38585,7 +38525,7 @@ var BrandingTab = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 6px)", sm: "calc(25% - 9px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_material43.Button,
           {
             variant: "outlined",
@@ -39593,18 +39533,18 @@ var KnowledgeTab = ({
   const clearSelection = () => {
     setSelectedDocuments([]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { p: { xs: 1.5, sm: 3, md: 4 } }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { pt: { xs: 1, md: 2 }, pb: { xs: 3, md: 4 } }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { mb: { xs: 2.5, md: 4 } }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { p: { xs: 1.5, sm: 2, md: 2.5 } }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { mb: { xs: 1.5, md: 2 } }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         import_material45.Box,
         {
           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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { textAlign: { xs: "left", md: "initial" } }, children: [
@@ -39613,7 +39553,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__ */ (0, import_jsx_runtime45.jsx)(
@@ -39628,29 +39568,20 @@ var KnowledgeTab = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                import_material45.Typography,
-                {
-                  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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Typography, { 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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: { xs: 1, sm: 1.5 }, alignItems: "center", flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap", width: { xs: "100%", md: "auto" } }, children: [
               shouldUseVector && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 import_material45.Button,
                 {
                   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"
                 }
               ),
@@ -39659,10 +39590,9 @@ var KnowledgeTab = ({
                 {
                   variant: "outlined",
                   color: "error",
-                  size: isMobile ? "small" : "medium",
                   startIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DeleteIcon, {}),
                   onClick: () => setClearDocsDialogOpen(true),
-                  sx: { ml: { xs: 0, md: 2 }, width: { xs: "100%", md: "auto" } },
+                  sx: { width: { xs: "100%", md: "auto" } },
                   children: "Clear All"
                 }
               )
@@ -39670,17 +39600,17 @@ var KnowledgeTab = ({
           ]
         }
       ),
-      documents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: { xs: 1.5, md: 2 }, flexWrap: "wrap", mb: { xs: 2, md: 3 } }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: "primary", children: statistics.totalDocuments }),
+      documents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap", mb: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 96, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: statistics.totalDocuments }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: "Documents" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: "primary", children: statistics.totalSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 96, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: statistics.totalSize }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: "Total Size" })
         ] }) }),
-        Object.entries(statistics.categoryCounts).map(([category, count]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 100 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: "primary", children: count }),
+        Object.entries(statistics.categoryCounts).map(([category, count]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { minWidth: 80, border: "1px solid", borderColor: "divider", borderRadius: 2, boxShadow: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: "primary", sx: { lineHeight: 1.2 }, children: count }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: category })
         ] }) }, category))
       ] })
@@ -39689,8 +39619,10 @@ var KnowledgeTab = ({
       import_material45.Card,
       {
         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",
@@ -39703,75 +39635,43 @@ var KnowledgeTab = ({
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onClick: () => document.getElementById("file-upload")?.click(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { textAlign: "center", py: { xs: 3, md: 4 }, px: { xs: 2, md: 3 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            UploadFileIcon,
-            {
-              sx: {
-                fontSize: 48,
-                color: dragActive ? "primary.main" : "text.secondary",
-                mb: 2
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { textAlign: "center", py: 1.75, px: { xs: 1.5, sm: 1.75 }, "&:last-child": { pb: 1.75 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              UploadFileIcon,
+              {
+                sx: { fontSize: 18, color: dragActive ? "primary.main" : "text.secondary" }
               }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: dragActive ? "primary" : "text.primary", gutterBottom: true, children: dragActive ? "Drop files here" : "Upload Documents" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "body2", color: "text.secondary", paragraph: true, children: "Drag and drop files here or click to browse" }),
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: dragActive ? "primary" : "text.primary", children: dragActive ? "Drop files here" : "Upload Documents" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { 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__ */ (0, import_jsx_runtime45.jsxs)(
             import_material45.Box,
             {
-              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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                    import_material45.Switch,
-                    {
-                      checked: shareWithTeam,
-                      onChange: (e) => setShareWithTeam(e.target.checked),
-                      color: "primary",
-                      size: "small"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: shareWithTeam ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GroupIcon, { sx: { fontSize: "1rem", color: "success.main" } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "body2", color: "success.main", fontWeight: 500, children: "Share with team" })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PersonIcon, { sx: { fontSize: "1rem", color: "text.secondary" } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: "Personal only" })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { 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__ */ (0, import_jsx_runtime45.jsxs)(
-            import_material45.Box,
-            {
-              sx: {
-                mb: 2,
-                p: 1.5,
-                bgcolor: "info.main10",
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "info.main30"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PersonIcon, { sx: { fontSize: "1rem", color: "info.main" } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "body2", color: "info.main", fontWeight: 500, children: "Personal Documents Only" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", textAlign: "center", mt: 0.5 }, children: "Documents will be stored privately in your personal account" })
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  import_material45.Switch,
+                  {
+                    checked: shareWithTeam,
+                    onChange: (e) => setShareWithTeam(e.target.checked),
+                    color: "primary",
+                    size: "small"
+                  }
+                ),
+                shareWithTeam ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GroupIcon, { sx: { fontSize: "1rem", color: "success.main" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: "Shared with team \u2014 members can search these documents" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PersonIcon, { sx: { fontSize: "1rem", color: "text.secondary" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: "Personal only \u2014 private to your account" })
+                ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", children: "Supported: PDF, DOC, TXT, MD, Code files, and more" }),
+          shouldUseVector && !hasTeam && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.5 }, children: "Documents will be stored privately in your personal account" }),
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "input",
             {
@@ -39786,7 +39686,7 @@ var KnowledgeTab = ({
         ] })
       }
     ),
-    uploadStatuses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { mb: 3 }, children: uploadStatuses.map((status, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { mb: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.CardContent, { sx: { py: 1.5, px: 2, "&:last-child": { pb: 1.5 } }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+    uploadStatuses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { mb: { xs: 1.25, md: 1.5 } }, children: uploadStatuses.map((status, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { mb: 1, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.CardContent, { sx: { py: 1, px: 1.5, "&:last-child": { pb: 1 } }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
       status.status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckCircleIcon, { color: "success" }) : status.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ErrorIcon, { color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         import_material45.LinearProgress,
         {
@@ -39804,8 +39704,8 @@ var KnowledgeTab = ({
         "%"
       ] })
     ] }) }) }, index)) }),
-    documents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { mb: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }, children: [
+    documents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { mb: { xs: 1.25, md: 1.5 }, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { sx: { py: 1.5, px: { xs: 1.5, sm: 1.75 }, "&:last-child": { pb: 1.5 } }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 1.5, alignItems: "center", flexWrap: "wrap" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_material45.TextField,
           {
@@ -39933,7 +39833,7 @@ var KnowledgeTab = ({
           )
         ] })
       ] }),
-      selectedDocuments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { mt: 2, pt: 2, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+      selectedDocuments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { mt: 1.5, pt: 1.5, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Typography, { variant: "body2", color: "text.secondary", children: [
           selectedDocuments.length,
           " selected"
@@ -39969,12 +39869,12 @@ var KnowledgeTab = ({
         )
       ] }) })
     ] }) }),
-    filteredAndSortedDocuments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { textAlign: "center", py: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FolderIcon, { sx: { fontSize: 64, color: "text.secondary", mb: 2 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: "text.secondary", gutterBottom: true, children: "No Documents Yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { 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__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { textAlign: "center", py: 4, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(FolderIcon, { sx: { fontSize: 20, color: "text.secondary", mb: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true, children: "No Documents Yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { 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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: [
         "Showing ",
         filteredAndSortedDocuments.length,
         " of ",
@@ -39994,7 +39894,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);
@@ -40019,7 +39919,7 @@ var KnowledgeTab = ({
         }
       ) : (
         /* List View */
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Stack, { spacing: 1, children: filteredAndSortedDocuments.map((doc) => {
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Stack, { spacing: 0.75, children: filteredAndSortedDocuments.map((doc) => {
           const fileInfo = getFileTypeInfo3(doc.name);
           const IconComponent = fileInfo.icon;
           const isSelected = selectedDocuments.includes(doc.id);
@@ -40029,14 +39929,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) {
@@ -40045,153 +39947,114 @@ var KnowledgeTab = ({
                   handleDocumentClick(doc);
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.CardContent, { sx: { py: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconComponent, { sx: { fontSize: 32, color: fileInfo.color } }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { flex: 1, minWidth: 0 }, children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.CardContent, { sx: { p: 1, "&:last-child": { pb: 1 } }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconComponent, { sx: { fontSize: 20, color: fileInfo.color, flexShrink: 0 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  import_material45.Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      fontWeight: 600,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      color: "text.primary"
+                    },
+                    children: doc.name
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center", flexShrink: 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                    import_material45.Typography,
-                    {
-                      variant: "subtitle1",
-                      sx: {
-                        fontWeight: 600,
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        color: "text.primary"
-                      },
-                      children: doc.name
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                    import_material45.Typography,
+                    import_material45.Chip,
                     {
-                      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__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 1, mt: 1 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  (() => {
+                    const sourceInfo = getContentSourceInfo2(doc, shouldUseVector);
+                    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                       import_material45.Chip,
                       {
-                        label: fileInfo.category,
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(sourceInfo.icon, { sx: { fontSize: "0.8rem" } }),
+                        label: sourceInfo.label,
                         size: "small",
                         sx: {
-                          bgcolor: fileInfo.color + "20",
-                          color: fileInfo.color,
-                          fontWeight: 600
-                        }
-                      }
-                    ),
-                    (() => {
-                      const sourceInfo = getContentSourceInfo2(doc, shouldUseVector);
-                      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                        import_material45.Chip,
-                        {
-                          icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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__ */ (0, import_jsx_runtime45.jsx)(
-                      import_material45.Chip,
-                      {
-                        label: formatFileSize2(doc.content.length * 2),
-                        size: "small",
-                        variant: "outlined"
                       }
-                    )
-                  ] })
+                    );
+                  })(),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_material45.Chip,
+                    {
+                      label: formatFileSize2(doc.content.length * 2),
+                      size: "small",
+                      variant: "outlined",
+                      sx: { display: { xs: "none", sm: "flex" } }
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center", flexShrink: 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     import_material45.IconButton,
                     {
+                      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__ */ (0, import_jsx_runtime45.jsx)(CheckIcon, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: {
-                        width: 12,
-                        height: 12,
+                      children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckIcon, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Box, { sx: {
+                        width: 10,
+                        height: 10,
                         borderRadius: "50%",
                         bgcolor: "transparent"
                       } })
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                    import_material45.Button,
+                    import_material45.IconButton,
                     {
-                      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__ */ (0, import_jsx_runtime45.jsx)(DownloadIcon, { sx: { fontSize: { xs: "1rem", sm: "1.1rem" } } }),
-                      children: "Download"
+                      sx: { color: "text.secondary", "&:hover": { color: "primary.main" } },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DownloadIcon, { sx: { fontSize: 18 } })
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                     import_material45.IconButton,
                     {
+                      size: "small",
                       onClick: (e) => handleRemoveDocument(e, doc.id),
                       color: "error",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DeleteIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DeleteIcon, { sx: { fontSize: 18 } })
                     }
                   )
                 ] })
@@ -40201,10 +40064,10 @@ var KnowledgeTab = ({
           );
         }) })
       ),
-      filteredAndSortedDocuments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { textAlign: "center", py: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SearchIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "h6", color: "text.secondary", gutterBottom: true, children: "No documents found" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "body2", color: "text.secondary", children: "Try adjusting your search or filter criteria" }),
+      filteredAndSortedDocuments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Card, { sx: { textAlign: "center", py: 4, borderRadius: 2, boxShadow: "none", border: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_material45.CardContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SearchIcon, { sx: { fontSize: 20, color: "text.secondary", mb: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true, children: "No documents found" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material45.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block" }, children: "Try adjusting your search or filter criteria" }),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_material45.Button,
           {
@@ -40213,7 +40076,7 @@ var KnowledgeTab = ({
               setSearchQuery("");
               setSelectedCategory("all");
             },
-            sx: { mt: 2 },
+            sx: { mt: 1 },
             children: "Clear Filters"
           }
         )
@@ -42447,18 +42310,17 @@ var StorageTab = ({ currentTheme }) => {
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body1", color: "text.secondary", sx: { ml: 2 }, children: "Analyzing storage usage..." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { px: { xs: 2, sm: 4, md: 6 }, pt: 3, pb: 5 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { px: { xs: 2, sm: 3, md: 4 }, pt: 2, pb: 3 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { 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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h5", color: "text.primary", sx: { mb: 1, fontWeight: 600 }, children: "Storage Management" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body1", color: "text.secondary", children: "Monitor and manage your local browser storage usage" })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h5", color: "text.primary", sx: { mb: 0.5, fontWeight: 600 }, children: "Storage Management" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1.5 }, children: "Monitor and manage your local browser storage usage." })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: {
         display: "flex",
@@ -42476,15 +42338,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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: { xs: "none", sm: "flex" }, alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, { fontSize: "medium" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, { fontSize: "small" }),
                 "Refresh"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { display: { xs: "flex", sm: "none" }, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, { fontSize: "medium" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { display: { xs: "flex", sm: "none" }, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RefreshIcon, { fontSize: "small" }) })
             ]
           }
         ),
@@ -42530,18 +42391,23 @@ var StorageTab = ({ currentTheme }) => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mb: 4 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Card, { sx: { mb: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.CardContent, { sx: {
-        display: "flex",
-        flexDirection: "column",
-        minHeight: 180
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StorageIcon, { sx: { mr: 1, verticalAlign: "middle" } }),
-          "Storage Quota"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mb: 2, flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      import_material48.Box,
+      {
+        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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "overline", sx: { color: "text.secondary", display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StorageIcon, { fontSize: "small" }),
+            "Storage Quota"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 0.5, mb: 1.5 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               import_material48.Chip,
               {
@@ -42585,11 +42451,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"
                 }
               }
@@ -42598,47 +42464,40 @@ var StorageTab = ({ currentTheme }) => {
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block" }, children: [
             usagePercentage.toFixed(1),
             "% used"
-          ] })
-        ] }),
-        usagePercentage > 80 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "warning", sx: { mt: "auto" }, children: "Storage usage is high. Consider clearing unused data." })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.CardContent, { sx: {
-        display: "flex",
-        flexDirection: "column",
-        minHeight: 140
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: "Usage Summary" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.Chip,
-            {
-              label: `${storageCategories.length} Categories`,
-              color: "primary",
-              size: "small"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.Chip,
-            {
-              label: `${storageCategories.reduce((sum, cat) => sum + cat.itemCount, 0)} Items`,
-              color: "secondary",
-              size: "small"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.Chip,
-            {
-              label: `${formatBytes(totalUsed)} Used`,
-              color: "info",
-              size: "small"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", sx: { mt: "auto" }, children: usageSummaryMessage })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600, color: "text.primary" }, children: "Storage Categories" }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { children: storageCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Alert, { severity: "info", sx: { mt: 2 }, children: [
+          ] }),
+          usagePercentage > 80 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "warning", sx: { mt: 1, py: 0 }, children: "Storage usage is high. Consider clearing unused data." }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 1, mt: 1.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_material48.Chip,
+              {
+                label: `${storageCategories.length} Categories`,
+                color: "primary",
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_material48.Chip,
+              {
+                label: `${storageCategories.reduce((sum, cat) => sum + cat.itemCount, 0)} Items`,
+                color: "secondary",
+                size: "small"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_material48.Chip,
+              {
+                label: `${formatBytes(totalUsed)} Used`,
+                color: "info",
+                size: "small"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1 }, children: usageSummaryMessage })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "overline", sx: { display: "block", mb: 1, color: "text.secondary" }, children: "Storage Categories" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { children: storageCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Alert, { severity: "info", sx: { mt: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", children: "No storage data found. This could mean:" }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "body2", component: "ul", sx: { mt: 1, pl: 2 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: "All databases are empty" }),
@@ -42646,7 +42505,7 @@ var StorageTab = ({ currentTheme }) => {
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: "There was an error accessing the databases" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", sx: { mt: 1 }, children: 'Try clicking "Refresh" or check the browser console for more details.' })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Stack, { spacing: 2, children: storageCategories.map((category) => {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Stack, { 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;
@@ -42657,29 +42516,41 @@ var StorageTab = ({ currentTheme }) => {
         categoryPercentage: categoryPercentage.toFixed(2),
         categoryRelativePercentage: categoryRelativePercentage.toFixed(2)
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Accordion, { sx: { bgcolor: "background.paper" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_material48.AccordionSummary,
-          {
-            expandIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ExpandMoreIcon, {}),
-            "aria-controls": `${category.name}-content`,
-            id: `${category.name}-header`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", width: "100%", pr: 2 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconComponent, { sx: { color: category.color, mr: 2 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { flex: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_material48.Typography,
-                  {
-                    variant: "body1",
-                    style: {
-                      fontWeight: 600,
-                      color: theme.palette.mode === "dark" ? "#ffffff" : theme.palette.text.primary
-                    },
-                    children: category.name
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", gap: 2, mt: 0.5 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", children: formatBytes(category.size) }),
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        import_material48.Accordion,
+        {
+          disableGutters: true,
+          elevation: 0,
+          sx: {
+            bgcolor: "background.paper",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 2,
+            "&:before": { display: "none" }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_material48.AccordionSummary,
+              {
+                expandIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ExpandMoreIcon, {}),
+                "aria-controls": `${category.name}-content`,
+                id: `${category.name}-header`,
+                sx: { px: 1.5, minHeight: 0, "& .MuiAccordionSummary-content": { my: 1 } },
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 1.5, pr: 1.5 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconComponent, { fontSize: "small", sx: { color: category.color } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    import_material48.Typography,
+                    {
+                      variant: "body2",
+                      style: {
+                        fontWeight: 600,
+                        color: theme.palette.mode === "dark" ? "#ffffff" : theme.palette.text.primary
+                      },
+                      sx: { minWidth: 0, flexShrink: 0 },
+                      children: category.name
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0 }, children: formatBytes(category.size) }),
                   /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     import_material48.Chip,
                     {
@@ -42688,7 +42559,7 @@ var StorageTab = ({ currentTheme }) => {
                       variant: "outlined"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { flex: 1, mx: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Box, { sx: { flex: 1, minWidth: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     import_material48.LinearProgress,
                     {
                       variant: "determinate",
@@ -42704,104 +42575,127 @@ var StorageTab = ({ currentTheme }) => {
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "caption", color: "text.secondary", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0 }, children: [
                     categoryRelativePercentage.toFixed(1),
                     "%"
                   ] })
                 ] })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.AccordionDetails, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { pl: 5 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "body2", color: "text.secondary", paragraph: true, children: category.description }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "subtitle2", gutterBottom: true, children: "Storage Locations:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.List, { dense: true, children: category.stores.map((store) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.5 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StorageIcon, { fontSize: "small" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              import_material48.ListItemText,
-              {
-                primary: store,
-                primaryTypographyProps: { variant: "body2", fontFamily: "monospace" }
-              }
-            )
-          ] }, store)) }),
-          category.canClear ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mt: 2, pt: 2, borderTop: 1, borderColor: "divider" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-              import_material48.Button,
-              {
-                variant: "outlined",
-                color: "error",
-                size: "small",
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DeleteIcon, {}),
-                onClick: () => setClearCategoryDialog(category),
-                disabled: clearing,
-                children: [
-                  "Clear ",
-                  category.name
-                ]
               }
             ),
-            category.clearWarning && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "warning", sx: { mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", children: category.clearWarning }) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Alert, { severity: "info", sx: { mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", children: category.itemCount === 0 ? "This category is empty." : "This category cannot be cleared automatically." }) })
-        ] }) })
-      ] }, category.name);
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.AccordionDetails, { sx: { px: 1.5, pt: 0, pb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { pl: 3.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: category.description }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "overline", sx: { color: "text.secondary" }, children: "Storage Locations" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.List, { dense: true, disablePadding: true, children: category.stores.map((store) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.25 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 28 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StorageIcon, { fontSize: "small" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  import_material48.ListItemText,
+                  {
+                    primary: store,
+                    primaryTypographyProps: { variant: "caption", fontFamily: "monospace" }
+                  }
+                )
+              ] }, store)) }),
+              category.canClear ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Box, { sx: { mt: 1, pt: 1, borderTop: 1, borderColor: "divider" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                  import_material48.Button,
+                  {
+                    variant: "outlined",
+                    color: "error",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DeleteIcon, {}),
+                    onClick: () => setClearCategoryDialog(category),
+                    disabled: clearing,
+                    children: [
+                      "Clear ",
+                      category.name
+                    ]
+                  }
+                ),
+                category.clearWarning && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { variant: "caption", color: "warning.main", sx: { display: "block", mt: 1 }, children: category.clearWarning })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.Typography, { 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__ */ (0, import_jsx_runtime48.jsx)(import_material48.Card, { sx: { mt: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.CardContent, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "h6", gutterBottom: true, sx: { fontWeight: 600, color: "text.primary" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InfoIcon, { sx: { mr: 1, verticalAlign: "middle" } }),
-        "Storage Tips & Clear Options"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.List, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            CheckCircleIcon,
-            {
-              sx: {
-                color: syncFeaturesActive ? theme.palette.warning.main : theme.palette.success.main
-              }
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CleaningServicesIcon, { color: "info" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.ListItemText,
-            {
-              primary: "Clear All Data (Safe)",
-              secondary: "Deletes all items but keeps database structure intact. App continues working normally."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DeleteIcon, { color: "error" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.ListItemText,
-            {
-              primary: "Nuclear Clear (Complete Reset)",
-              secondary: "Completely destroys all databases and forces app reload. Use only for complete reset."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WarningIcon, { color: "warning" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_material48.ListItemText,
-            {
-              primary: "Backup important data",
-              secondary: "Export custom models and important documents before clearing storage"
-            }
-          )
-        ] })
-      ] })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      import_material48.Box,
+      {
+        sx: {
+          mt: 1.5,
+          p: { xs: 1.5, sm: 1.75 },
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 2,
+          bgcolor: "background.paper"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.Typography, { variant: "overline", sx: { color: "text.secondary", display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InfoIcon, { fontSize: "small" }),
+            "Storage Tips & Clear Options"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.List, { dense: true, disablePadding: true, sx: { mt: 0.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                CheckCircleIcon,
+                {
+                  fontSize: "small",
+                  sx: {
+                    color: syncFeaturesActive ? theme.palette.warning.main : theme.palette.success.main
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_material48.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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CleaningServicesIcon, { fontSize: "small", color: "info" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_material48.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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DeleteIcon, { fontSize: "small", color: "error" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_material48.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__ */ (0, import_jsx_runtime48.jsxs)(import_material48.ListItem, { sx: { py: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material48.ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WarningIcon, { fontSize: "small", color: "warning" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                import_material48.ListItemText,
+                {
+                  primary: "Backup important data",
+                  primaryTypographyProps: { variant: "body2" },
+                  secondaryTypographyProps: { variant: "caption" },
+                  secondary: "Export custom models and important documents before clearing storage"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       import_material48.Dialog,
       {
@@ -44999,6 +44893,9 @@ var Management = () => {
         },
         MuiTextField: {
           defaultProps: { size: "small" }
+        },
+        MuiButton: {
+          defaultProps: { size: "small" }
         }
       }
     });
@@ -45141,82 +45038,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__ */ (0, import_jsx_runtime52.jsx)(
-                import_material52.ListItemIcon,
-                {
-                  sx: {
-                    color: tabIndex === idx ? "primary.main" : "text.secondary",
-                    fontSize: 24,
-                    transition: "all 0.2s"
-                  },
-                  children: tab.icon
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material52.ListItemIcon, { children: tab.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 import_material52.ListItemText,
                 {
                   primary: tab.label,
                   primaryTypographyProps: {
-                    fontWeight: tabIndex === idx ? 700 : 600,
-                    fontSize: "1rem",
-                    letterSpacing: "-0.01em"
-                  }
-                }
-              ),
-              tabIndex === idx && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-                import_material52.Box,
-                {
-                  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"
                   }
                 }
               )
@@ -45423,9 +45284,9 @@ var Management = () => {
             import_material52.Box,
             {
               sx: {
-                width: 280,
-                minWidth: 280,
-                maxWidth: 280,
+                width: 240,
+                minWidth: 240,
+                maxWidth: 240,
                 height: "100vh",
                 display: "flex",
                 flexDirection: "column",
@@ -45457,7 +45318,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"