@intentai/react 2.0.1 → 2.1.0

package/dist/index.js

@@ -219,55 +219,56 @@ var contentVariants = {
     transition: { duration: 0.2 }
   }
 };
-var categoryVariants = {
-  hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: (i) => ({
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      delay: i * 0.05,
-      ...springPresets.smooth
-    }
-  }),
-  hover: {
-    scale: 1.05,
-    y: -2,
-    transition: springPresets.bouncy
-  },
-  tap: {
-    scale: 0.95
-  },
-  selected: {
-    scale: 1,
-    borderColor: "var(--widget-primary)"
-  }
-};
 var BreathingRing = ({ isActive }) => {
   const { reducedMotion } = useWidget();
   if (reducedMotion) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_framer_motion.motion.div,
-    {
-      className: "fiq-breathing-ring",
-      animate: {
-        scale: isActive ? [1, 1.15, 1] : 1,
-        opacity: isActive ? [0.5, 0.8, 0.5] : 0.5
-      },
-      transition: {
-        duration: 3,
-        repeat: Infinity,
-        ease: "easeInOut"
-      },
-      style: {
-        position: "absolute",
-        inset: -8,
-        borderRadius: "50%",
-        background: "radial-gradient(circle, var(--widget-primary-glow) 0%, transparent 70%)",
-        pointerEvents: "none"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        animate: {
+          scale: isActive ? [1, 1.3, 1] : 1,
+          opacity: isActive ? [0.2, 0.4, 0.2] : 0.2
+        },
+        transition: {
+          duration: 2.5,
+          repeat: Infinity,
+          ease: "easeInOut"
+        },
+        style: {
+          position: "absolute",
+          inset: -16,
+          borderRadius: "50%",
+          background: "radial-gradient(circle, var(--widget-primary) 0%, transparent 70%)",
+          pointerEvents: "none",
+          filter: "blur(8px)"
+        }
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "fiq-breathing-ring",
+        animate: {
+          scale: isActive ? [1, 1.08, 1] : 1,
+          opacity: isActive ? [0.6, 1, 0.6] : 0.6
+        },
+        transition: {
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut"
+        },
+        style: {
+          position: "absolute",
+          inset: -4,
+          borderRadius: "50%",
+          border: "2px solid var(--widget-primary)",
+          pointerEvents: "none",
+          opacity: 0.5
+        }
+      }
+    )
+  ] });
 };
 var AmbientOrb = ({ audioLevel, isRecording }) => {
   const { reducedMotion } = useWidget();
@@ -518,20 +519,6 @@ var TranscriptionDisplay = ({ text, isLive }) => {
     }
   );
 };
-var CategoryIcon = ({ icon, selected }) => {
-  const color = selected ? "white" : "var(--widget-primary)";
-  const size = 20;
-  const icons = {
-    bug: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2l1.88 1.88M14.12 3.88L16 2M9 7.13v-1a3.003 3.003 0 116 0v1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 014-4h4a4 4 0 014 4v3c0 3.3-2.7 6-6 6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M3 21c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4M17.2 17c2.1.1 3.8 1.9 3.8 4" })
-    ] }),
-    sparkles: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3l1.912 5.813a2 2 0 001.275 1.275L21 12l-5.813 1.912a2 2 0 00-1.275 1.275L12 21l-1.912-5.813a2 2 0 00-1.275-1.275L3 12l5.813-1.912a2 2 0 001.275-1.275L12 3z" }) }),
-    message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z" }) })
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: icons[icon] || icons.message });
-};
 var ListeningDots = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 4 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   import_framer_motion.motion.span,
   {
@@ -560,10 +547,10 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
       {
         style: {
           display: "block",
-          fontSize: 13,
+          fontSize: 12,
           fontWeight: 600,
-          color: "var(--widget-text-secondary)",
-          marginBottom: 10,
+          color: "var(--widget-text-muted)",
+          marginBottom: 12,
           textTransform: "uppercase",
           letterSpacing: "0.05em"
         },
@@ -574,49 +561,49 @@ var CategorySelector = ({ categories, selected, onSelect }) => {
       "div",
       {
         style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
-          gap: 10
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 8
         },
-        children: categories.map((category, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_framer_motion.motion.button,
           {
-            custom: index,
-            variants: categoryVariants,
-            initial: "hidden",
-            animate: selected === category.id ? "selected" : "visible",
-            whileHover: "hover",
-            whileTap: "tap",
+            whileHover: { scale: 1.04, y: -1 },
+            whileTap: { scale: 0.96 },
             onClick: () => onSelect(category.id),
             style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 6,
-              padding: "12px 8px",
-              background: selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-bg)",
-              border: `2px solid ${selected === category.id ? "var(--widget-primary)" : "var(--widget-glass-border)"}`,
-              borderRadius: 12,
+              padding: "10px 18px",
+              background: selected === category.id ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "var(--widget-glass-bg)",
+              border: `1.5px solid ${selected === category.id ? "transparent" : "var(--widget-glass-border)"}`,
+              borderRadius: 24,
               cursor: "pointer",
-              transition: "background 0.2s, border-color 0.2s"
+              transition: "all 0.2s ease",
+              boxShadow: selected === category.id ? "0 4px 12px -2px var(--widget-primary-glow)" : "0 2px 4px rgba(0,0,0,0.1)",
+              position: "relative",
+              overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_framer_motion.motion.span,
+              selected === category.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
                 {
-                  style: { display: "flex", alignItems: "center", justifyContent: "center" },
-                  animate: selected === category.id ? { scale: [1, 1.2, 1] } : {},
-                  transition: { duration: 0.3 },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CategoryIcon, { icon: category.icon, selected: selected === category.id })
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: "linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)",
+                    borderRadius: "inherit",
+                    pointerEvents: "none"
+                  }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
                 {
                   style: {
-                    fontSize: 12,
-                    fontWeight: 500,
-                    color: selected === category.id ? "white" : "var(--widget-text-primary)"
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: selected === category.id ? "white" : "var(--widget-text-primary)",
+                    position: "relative",
+                    zIndex: 1
                   },
                   children: category.label
                 }
@@ -776,7 +763,7 @@ var SuccessCelebration = ({ onComplete }) => {
     }
   );
 };
-var MagneticButton = ({ children, onClick, variant = "primary", disabled, loading }) => {
+var MagneticButton = ({ children, onClick, onPressStart, onPressEnd, variant = "primary", disabled, loading }) => {
   const buttonRef = (0, import_react.useRef)(null);
   const [magnetOffset, setMagnetOffset] = (0, import_react.useState)({ x: 0, y: 0 });
   const handleMouseMove = (e) => {
@@ -785,8 +772,8 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
     setMagnetOffset({
-      x: (e.clientX - centerX) * 0.1,
-      y: (e.clientY - centerY) * 0.1
+      x: (e.clientX - centerX) * 0.08,
+      y: (e.clientY - centerY) * 0.08
     });
   };
   const handleMouseLeave = () => {
@@ -794,71 +781,120 @@ var MagneticButton = ({ children, onClick, variant = "primary", disabled, loadin
   };
   const baseStyles = {
     width: "100%",
-    padding: "14px 24px",
+    padding: "16px 28px",
     fontSize: 15,
     fontWeight: 600,
-    borderRadius: 12,
+    borderRadius: 14,
     border: "none",
     cursor: disabled ? "not-allowed" : "pointer",
-    transition: "background 0.2s, opacity 0.2s",
+    transition: "all 0.2s ease",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: 8
+    gap: 10,
+    letterSpacing: "0.01em",
+    position: "relative",
+    overflow: "hidden"
   };
   const variantStyles = {
     primary: {
-      background: "var(--widget-primary)",
-      color: "white"
+      background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
+      color: "white",
+      boxShadow: `
+        0 4px 16px -2px var(--widget-primary-glow),
+        0 2px 8px -2px rgba(0, 0, 0, 0.3),
+        inset 0 1px 1px rgba(255, 255, 255, 0.2)
+      `
     },
     secondary: {
       background: "var(--widget-glass-bg)",
       color: "var(--widget-text-primary)",
-      border: "1px solid var(--widget-glass-border)"
+      border: "1px solid var(--widget-glass-border)",
+      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
     },
     ghost: {
       background: "transparent",
       color: "var(--widget-text-secondary)"
+    },
+    recording: {
+      background: "linear-gradient(145deg, #ef4444 0%, #dc2626 100%)",
+      color: "white",
+      boxShadow: `
+        0 4px 20px -2px var(--widget-recording-glow),
+        0 0 40px -5px var(--widget-recording-glow),
+        inset 0 1px 1px rgba(255, 255, 255, 0.2)
+      `
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const handlePressStart = () => {
+    if (disabled || loading) return;
+    onPressStart?.();
+  };
+  const handlePressEnd = () => {
+    if (disabled || loading) return;
+    onPressEnd?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_framer_motion.motion.button,
     {
       ref: buttonRef,
       onClick,
       disabled: disabled || loading,
       onMouseMove: handleMouseMove,
-      onMouseLeave: handleMouseLeave,
+      onMouseLeave: () => {
+        handleMouseLeave();
+        if (onPressEnd) handlePressEnd();
+      },
+      onMouseDown: onPressStart ? handlePressStart : void 0,
+      onMouseUp: onPressEnd ? handlePressEnd : void 0,
+      onTouchStart: onPressStart ? handlePressStart : void 0,
+      onTouchEnd: onPressEnd ? handlePressEnd : void 0,
       animate: {
         x: magnetOffset.x,
         y: magnetOffset.y,
         opacity: disabled ? 0.5 : 1
       },
-      whileHover: { scale: disabled ? 1 : 1.02 },
+      whileHover: { scale: disabled ? 1 : 1.02, y: -1 },
       whileTap: { scale: disabled ? 1 : 0.97 },
       transition: springPresets.snappy,
       style: { ...baseStyles, ...variantStyles[variant] },
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_framer_motion.motion.div,
-        {
-          animate: { rotate: 360 },
-          transition: { duration: 1, repeat: Infinity, ease: "linear" },
-          style: {
-            width: 18,
-            height: 18,
-            border: "2px solid rgba(255,255,255,0.3)",
-            borderTopColor: "white",
-            borderRadius: "50%"
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%)",
+              borderRadius: "inherit",
+              pointerEvents: "none"
+            }
           }
-        }
-      ) : children
+        ),
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
+          {
+            animate: { rotate: 360 },
+            transition: { duration: 1, repeat: Infinity, ease: "linear" },
+            style: {
+              width: 20,
+              height: 20,
+              border: "2.5px solid rgba(255,255,255,0.3)",
+              borderTopColor: "white",
+              borderRadius: "50%"
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "relative", zIndex: 1, display: "flex", alignItems: "center", gap: 10 }, children })
+      ]
     }
   );
 };
 var DEFAULT_CATEGORIES = [
-  { id: "bug", label: "Bug", icon: "bug" },
-  { id: "feature", label: "Feature", icon: "sparkles" },
-  { id: "feedback", label: "Feedback", icon: "message" }
+  { id: "bug", label: "Bug", icon: "" },
+  { id: "feature", label: "Feature", icon: "" },
+  { id: "improvement", label: "Improve", icon: "" },
+  { id: "praise", label: "Praise", icon: "" },
+  { id: "other", label: "Other", icon: "" }
 ];
 var PremiumVoiceWidget = ({
   position = "bottom-right",
@@ -1048,19 +1084,18 @@ var PremiumVoiceWidget = ({
               "aria-label": "Open feedback widget",
               "aria-expanded": isExpanded,
               style: {
-                width: 56,
-                height: 56,
+                width: 60,
+                height: 60,
                 borderRadius: "50%",
                 border: "none",
                 cursor: "pointer",
                 position: "relative",
-                background: "var(--widget-glass-bg)",
-                backdropFilter: "blur(20px) saturate(180%)",
-                WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                background: `linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
                 boxShadow: `
-                  inset 0 0 0 1px var(--widget-glass-highlight),
-                  0 4px 24px -4px rgba(0, 0, 0, 0.5),
-                  0 0 40px -10px var(--widget-primary-glow)
+                  0 8px 32px -4px var(--widget-primary-glow),
+                  0 4px 16px -2px rgba(0, 0, 0, 0.4),
+                  inset 0 1px 1px rgba(255, 255, 255, 0.3),
+                  inset 0 -1px 1px rgba(0, 0, 0, 0.2)
                 `
               },
               children: [
@@ -1070,47 +1105,83 @@ var PremiumVoiceWidget = ({
                   {
                     style: {
                       position: "absolute",
-                      inset: 3,
+                      inset: 0,
                       borderRadius: "50%",
-                      background: `linear-gradient(135deg, var(--widget-primary) 0%, var(--widget-accent) 100%)`,
-                      opacity: 0.9
+                      background: "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)",
+                      pointerEvents: "none"
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "svg",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
                   {
-                    width: 24,
-                    height: 24,
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "white",
-                    strokeWidth: 2,
-                    strokeLinecap: "round",
                     style: {
                       position: "absolute",
                       top: "50%",
                       left: "50%",
                       transform: "translate(-50%, -50%)",
-                      zIndex: 1
+                      zIndex: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
                     },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
-                    ]
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "svg",
+                      {
+                        width: 26,
+                        height: 26,
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "path",
+                            {
+                              d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
+                              fill: "white",
+                              opacity: "0.15"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "path",
+                            {
+                              d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z",
+                              fill: "white"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "path",
+                            {
+                              d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1",
+                              stroke: "white",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              fill: "none"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "path",
+                            {
+                              d: "M12 15.5v2.5M9.5 18h5",
+                              stroke: "white",
+                              strokeWidth: "2",
+                              strokeLinecap: "round"
+                            }
+                          )
+                        ]
+                      }
+                    )
                   }
                 ),
                 shouldShowAttentionPulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_framer_motion.motion.div,
                   {
                     initial: { scale: 1, opacity: 1 },
-                    animate: { scale: 1.5, opacity: 0 },
-                    transition: { duration: 1, repeat: 3 },
+                    animate: { scale: 1.6, opacity: 0 },
+                    transition: { duration: 1.2, repeat: 3 },
                     style: {
                       position: "absolute",
-                      inset: 0,
+                      inset: -2,
                       borderRadius: "50%",
                       border: "2px solid var(--widget-primary)",
                       pointerEvents: "none"
@@ -1124,19 +1195,22 @@ var PremiumVoiceWidget = ({
                     animate: { scale: 1 },
                     style: {
                       position: "absolute",
-                      top: -4,
-                      right: -4,
-                      width: 16,
-                      height: 16,
+                      top: -2,
+                      right: -2,
+                      width: 18,
+                      height: 18,
                       borderRadius: "50%",
-                      background: "var(--widget-frustrated)",
-                      border: "2px solid var(--widget-glass-bg)",
+                      background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%)",
+                      border: "2px solid white",
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      fontSize: 10
+                      fontSize: 11,
+                      fontWeight: 700,
+                      color: "white",
+                      boxShadow: "0 2px 8px rgba(239, 68, 68, 0.5)"
                     },
-                    children: "?"
+                    children: "!"
                   }
                 )
               ]
@@ -1200,11 +1274,15 @@ var PremiumVoiceWidget = ({
             animate: "expanded",
             exit: "trigger",
             style: {
-              background: "var(--widget-glass-bg)",
-              backdropFilter: "blur(20px) saturate(180%)",
-              WebkitBackdropFilter: "blur(20px) saturate(180%)",
+              background: theme === "dark" ? "linear-gradient(180deg, rgba(28, 28, 32, 0.95) 0%, rgba(20, 20, 24, 0.98) 100%)" : "linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 250, 0.98) 100%)",
+              backdropFilter: "blur(24px) saturate(200%)",
+              WebkitBackdropFilter: "blur(24px) saturate(200%)",
               border: "1px solid var(--widget-glass-border)",
-              boxShadow: "0 20px 60px -12px rgba(0, 0, 0, 0.5)",
+              boxShadow: `
+                  0 24px 80px -12px rgba(0, 0, 0, 0.6),
+                  0 0 1px 0 rgba(255, 255, 255, 0.1) inset,
+                  0 1px 0 0 rgba(255, 255, 255, 0.05) inset
+                `,
               overflow: "hidden",
               display: "flex",
               flexDirection: "column"
@@ -1229,26 +1307,50 @@ var PremiumVoiceWidget = ({
                         justifyContent: "space-between",
                         alignItems: "center",
                         padding: "20px 24px",
-                        borderBottom: "1px solid var(--widget-glass-border)"
+                        borderBottom: "1px solid var(--widget-glass-border)",
+                        background: theme === "dark" ? "linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%)" : "linear-gradient(180deg, rgba(0,0,0,0.01) 0%, transparent 100%)"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "h2",
-                          {
-                            id: "widget-title",
-                            style: {
-                              fontSize: 18,
-                              fontWeight: 700,
-                              color: "var(--widget-text-primary)",
-                              margin: 0
-                            },
-                            children: "Share Your Thoughts"
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                width: 36,
+                                height: 36,
+                                borderRadius: 10,
+                                background: "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                boxShadow: "0 2px 8px -2px var(--widget-primary-glow)"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "white", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "white", strokeWidth: "2", strokeLinecap: "round", fill: "none" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15.5v2.5M9.5 18h5", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "h2",
+                            {
+                              id: "widget-title",
+                              style: {
+                                fontSize: 17,
+                                fontWeight: 700,
+                                color: "var(--widget-text-primary)",
+                                margin: 0,
+                                letterSpacing: "-0.01em"
+                              },
+                              children: "Share Feedback"
+                            }
+                          )
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           import_framer_motion.motion.button,
                           {
-                            whileHover: { scale: 1.1, rotate: 90 },
+                            whileHover: { scale: 1.1, backgroundColor: "var(--widget-glass-border)" },
                             whileTap: { scale: 0.9 },
                             onClick: handleClose,
                             "aria-label": "Close widget",
@@ -1262,17 +1364,19 @@ var PremiumVoiceWidget = ({
                               cursor: "pointer",
                               display: "flex",
                               alignItems: "center",
-                              justifyContent: "center"
+                              justifyContent: "center",
+                              transition: "background 0.15s ease"
                             },
                             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               "svg",
                               {
-                                width: 20,
-                                height: 20,
+                                width: 18,
+                                height: 18,
                                 viewBox: "0 0 24 24",
                                 fill: "none",
                                 stroke: "currentColor",
-                                strokeWidth: 2,
+                                strokeWidth: 2.5,
+                                strokeLinecap: "round",
                                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
                               }
                             )
@@ -1286,41 +1390,44 @@ var PremiumVoiceWidget = ({
                     {
                       style: {
                         display: "flex",
-                        borderBottom: "1px solid var(--widget-glass-border)"
+                        padding: "8px 12px",
+                        gap: 4,
+                        background: "var(--widget-glass-bg)",
+                        margin: "0 16px",
+                        marginTop: 16,
+                        borderRadius: 12,
+                        border: "1px solid var(--widget-glass-border)"
                       },
                       children: ["voice", "text"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         import_framer_motion.motion.button,
                         {
                           onClick: () => setActiveTab(tab),
-                          whileHover: { backgroundColor: "rgba(255,255,255,0.05)" },
                           style: {
                             flex: 1,
-                            padding: "14px 0",
+                            padding: "10px 0",
                             border: "none",
-                            background: "transparent",
-                            fontSize: 14,
-                            fontWeight: 500,
-                            color: activeTab === tab ? "var(--widget-primary)" : "var(--widget-text-secondary)",
+                            background: activeTab === tab ? "linear-gradient(145deg, var(--widget-primary) 0%, var(--widget-accent) 100%)" : "transparent",
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: activeTab === tab ? "white" : "var(--widget-text-secondary)",
                             cursor: "pointer",
-                            position: "relative"
+                            position: "relative",
+                            borderRadius: 8,
+                            transition: "all 0.2s ease",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 6,
+                            boxShadow: activeTab === tab ? "0 2px 8px -2px var(--widget-primary-glow)" : "none"
                           },
+                          whileHover: { scale: activeTab === tab ? 1 : 1.02 },
+                          whileTap: { scale: 0.98 },
                           children: [
-                            tab === "voice" ? "Voice" : "Text",
-                            activeTab === tab && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              import_framer_motion.motion.div,
-                              {
-                                layoutId: "activeTab",
-                                style: {
-                                  position: "absolute",
-                                  bottom: -1,
-                                  left: 0,
-                                  right: 0,
-                                  height: 2,
-                                  background: "var(--widget-primary)"
-                                },
-                                transition: springPresets.smooth
-                              }
-                            )
+                            tab === "voice" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.5 10.5v1a4.5 4.5 0 0 1-9 0v-1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" })
+                            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6h16M4 12h16M4 18h10" }) }),
+                            tab === "voice" ? "Voice" : "Text"
                           ]
                         },
                         tab
@@ -1337,107 +1444,158 @@ var PremiumVoiceWidget = ({
                       }
                     ) }),
                     activeTab === "voice" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AmbientOrb, { audioLevel, isRecording }),
-                      isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        RecordingTimer,
-                        {
-                          seconds: recordingSeconds,
-                          maxDuration: maxRecordingDuration
-                        }
-                      ),
-                      !isRecording && recordingSeconds === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "p",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
                         {
                           style: {
-                            color: "var(--widget-text-secondary)",
-                            fontSize: 14,
-                            marginTop: 16
+                            background: "var(--widget-glass-bg)",
+                            borderRadius: 16,
+                            padding: "24px 16px",
+                            border: "1px solid var(--widget-glass-border)",
+                            marginBottom: 16
                           },
-                          children: "Tap the orb to start recording"
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AmbientOrb, { audioLevel, isRecording }),
+                            isRecording && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              RecordingTimer,
+                              {
+                                seconds: recordingSeconds,
+                                maxDuration: maxRecordingDuration
+                              }
+                            ),
+                            !isRecording && recordingSeconds === 0 && !transcription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                style: {
+                                  color: "var(--widget-text-muted)",
+                                  fontSize: 13,
+                                  marginTop: 12,
+                                  marginBottom: 0
+                                },
+                                children: "Press and hold to record your feedback"
+                              }
+                            )
+                          ]
                         }
                       ),
-                      (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      (isRecording || transcription) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         TranscriptionDisplay,
                         {
                           text: transcription,
                           isLive: isRecording
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         MagneticButton,
                         {
-                          onClick: isRecording ? handleStopRecording : handleStartRecording,
-                          variant: isRecording ? "secondary" : "primary",
+                          onPressStart: handleStartRecording,
+                          onPressEnd: handleStopRecording,
+                          variant: isRecording ? "recording" : "primary",
                           children: isRecording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              "svg",
+                              import_framer_motion.motion.div,
                               {
-                                width: 16,
-                                height: 16,
-                                viewBox: "0 0 24 24",
-                                fill: "currentColor",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 6, y: 6, width: 12, height: 12, rx: 2 })
+                                animate: { scale: [1, 1.2, 1] },
+                                transition: { duration: 1, repeat: Infinity },
+                                style: {
+                                  width: 8,
+                                  height: 8,
+                                  borderRadius: "50%",
+                                  background: "white"
+                                }
                               }
                             ),
-                            "Stop Recording"
-                          ] }) : recordingSeconds > 0 ? "Record Again" : "Start Recording"
-                        }
-                      ) })
-                    ] }),
-                    activeTab === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "textarea",
-                        {
-                          value: textContent,
-                          onChange: (e) => setTextContent(e.target.value),
-                          placeholder: "Tell us what you think...",
-                          style: {
-                            width: "100%",
-                            minHeight: 150,
-                            padding: 16,
-                            fontSize: 14,
-                            lineHeight: 1.6,
-                            color: "var(--widget-text-primary)",
-                            background: "var(--widget-glass-bg)",
-                            border: "1px solid var(--widget-glass-border)",
-                            borderRadius: 12,
-                            resize: "vertical",
-                            fontFamily: "inherit"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            justifyContent: "flex-end",
-                            marginTop: 8,
-                            fontSize: 12,
-                            color: "var(--widget-text-muted)"
-                          },
-                          children: [
-                            textContent.length,
-                            " / 5000"
-                          ]
+                            "Recording... Release to stop"
+                          ] }) : transcription ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }) }),
+                            "Hold to record more"
+                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0v-5A2.5 2.5 0 0 0 12 3z" }) }),
+                            "Hold to Record"
+                          ] })
                         }
                       )
-                    ] })
+                    ] }),
+                    activeTab === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          position: "relative",
+                          background: "var(--widget-glass-bg)",
+                          border: "1px solid var(--widget-glass-border)",
+                          borderRadius: 14,
+                          overflow: "hidden"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "textarea",
+                            {
+                              value: textContent,
+                              onChange: (e) => setTextContent(e.target.value),
+                              placeholder: "Share your thoughts, ideas, or feedback...",
+                              style: {
+                                width: "100%",
+                                minHeight: 140,
+                                padding: 16,
+                                fontSize: 14,
+                                lineHeight: 1.7,
+                                color: "var(--widget-text-primary)",
+                                background: "transparent",
+                                border: "none",
+                                resize: "none",
+                                fontFamily: "inherit",
+                                outline: "none"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                justifyContent: "flex-end",
+                                padding: "8px 12px",
+                                borderTop: "1px solid var(--widget-glass-border)",
+                                background: theme === "dark" ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.02)"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: 11,
+                                    fontWeight: 500,
+                                    color: textContent.length > 4500 ? "var(--widget-recording)" : "var(--widget-text-muted)"
+                                  },
+                                  children: [
+                                    textContent.length.toLocaleString(),
+                                    " / 5,000"
+                                  ]
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ) })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
                       style: {
-                        padding: "16px 24px",
-                        borderTop: "1px solid var(--widget-glass-border)"
+                        padding: "16px 24px 20px",
+                        borderTop: "1px solid var(--widget-glass-border)",
+                        background: theme === "dark" ? "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%)" : "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.02) 100%)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         MagneticButton,
                         {
                           onClick: handleSubmit,
                           disabled: !selectedCategory || activeTab === "voice" && !transcription || activeTab === "text" && !textContent.trim(),
                           loading: isSubmitting,
-                          children: "Submit Feedback"
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
+                            "Submit Feedback"
+                          ]
                         }
                       )
                     }