@paymanai/payman-ask-sdk 1.2.2 → 1.2.4

package/dist/index.js

@@ -53,6 +53,11 @@ function formatDate(timestamp) {
     year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
   });
 }
+function formatElapsedTime(ms) {
+  if (!ms) return "";
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
 function ChatInput({
   value,
   onChange,
@@ -75,92 +80,141 @@ function ChatInput({
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       const scrollHeight = textareaRef.current.scrollHeight;
-      const maxHeight = 200;
-      textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
+      const maxHeight = 160;
+      textareaRef.current.style.height = `${Math.min(
+        scrollHeight,
+        maxHeight
+      )}px`;
     }
   }, [value]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      onSend();
+      if (value.trim() && !isInputDisabled) onSend();
     }
   };
   const isInputDisabled = disabled || isWaitingForResponse;
   const showPauseButton = isWaitingForResponse && onPause;
   const showVoiceButton = enableVoice && onVoicePress != null;
   const isVoiceButtonDisabled = isWaitingForResponse || !voiceAvailable || !isSessionParamsConfigured;
+  const canSend = !isInputDisabled && !!value.trim();
   const getPlaceholder = () => {
-    if (!hasSelectedSession) {
-      return "Select a version to start chatting";
-    }
-    if (!isSessionParamsConfigured) {
-      return "Configure User ID and User Label in Session Params";
-    }
+    if (!hasSelectedSession) return "Select a version to start chatting";
+    if (!isSessionParamsConfigured) return "Configure session params to begin";
     return placeholder;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 p-4 w-full", className), style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full px-0", style: { maxWidth: "672px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.div,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      initial: false,
-      className: "flex items-end overflow-hidden transition-colors bg-input border border-border shadow-sm",
-      style: { borderRadius: "24px" },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            ref: textareaRef,
-            value,
-            onChange: (e) => onChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            onClick,
-            disabled: isInputDisabled,
-            placeholder: getPlaceholder(),
-            className: "bg-transparent text-foreground focus:outline-none resize-none overflow-y-auto disabled:opacity-50 disabled:cursor-not-allowed flex-1 min-w-0 text-sm placeholder:text-muted-foreground",
-            style: {
-              minHeight: "48px",
-              maxHeight: "200px",
-              padding: "12px 12px 12px 16px"
-            },
-            rows: 1
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1 shrink-0 mb-2 mr-2", children: [
-          showVoiceButton && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onVoicePress,
-              disabled: isVoiceButtonDisabled,
-              className: `flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 min-w-[32px] ${isRecording ? "animate-pulse" : "hover:opacity-80"} disabled:opacity-50 disabled:cursor-not-allowed`,
-              "aria-label": isRecording ? "Stop recording" : "Voice input",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: `w-5 h-5 shrink-0 ${isRecording ? "text-red-500" : "text-foreground"}` })
-            }
+      className: cn("flex-shrink-0 w-full", className),
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 pt-1.5 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full max-w-2xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: false,
+          className: cn(
+            "flex items-center overflow-hidden",
+            "payman-chat-input"
           ),
-          showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onPause,
-              className: "flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 bg-primary text-primary-foreground hover:bg-primary/90",
-              "aria-label": "Pause request",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-4 h-4" })
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onSend,
-              disabled: isInputDisabled || !value.trim(),
-              className: "flex items-center justify-center flex-shrink-0 transition-all rounded-full w-8 h-8 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
-              "aria-label": "Send message",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
-            }
-          )
-        ] })
-      ]
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value,
+                onChange: (e) => onChange(e.target.value),
+                onKeyDown: handleKeyDown,
+                onClick,
+                disabled: isInputDisabled,
+                placeholder: getPlaceholder(),
+                className: cn(
+                  "payman-chat-input-field",
+                  "focus:outline-none resize-none overflow-y-auto",
+                  "flex-1 min-w-0 py-3"
+                ),
+                style: {
+                  minHeight: "44px",
+                  maxHeight: "160px",
+                  paddingLeft: "18px",
+                  paddingRight: "8px"
+                },
+                rows: 1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0 p-2", children: [
+              showVoiceButton && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onVoicePress,
+                  disabled: isVoiceButtonDisabled,
+                  className: cn(
+                    "relative flex items-center justify-center",
+                    "w-8 h-8 rounded-full transition-all duration-200",
+                    "payman-chat-input-btn-voice",
+                    isRecording && "recording"
+                  ),
+                  "aria-label": isRecording ? "Stop recording" : "Voice input",
+                  children: [
+                    isRecording && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "absolute inset-0 rounded-full border-2 animate-ping opacity-40",
+                        style: {
+                          borderColor: "var(--payman-input-btn-voice-recording-ring)"
+                        }
+                      }
+                    ),
+                    isRecording ? /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Square,
+                      {
+                        className: "w-3 h-3 relative z-10",
+                        fill: "currentColor"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "w-4 h-4" })
+                  ]
+                }
+              ),
+              showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPause,
+                  className: cn(
+                    "flex items-center justify-center",
+                    "w-8 h-8 rounded-full",
+                    "payman-chat-input-btn-pause",
+                    "hover:opacity-90 active:scale-95",
+                    "transition-all duration-150"
+                  ),
+                  "aria-label": "Stop response",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { className: "w-3.5 h-3.5", fill: "currentColor" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSend,
+                  disabled: !canSend,
+                  className: cn(
+                    "flex items-center justify-center",
+                    "w-8 h-8 rounded-full",
+                    "payman-chat-input-btn-send",
+                    "hover:opacity-90 active:scale-95",
+                    "transition-all duration-150"
+                  ),
+                  "aria-label": "Send message",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-4 h-4", strokeWidth: 2.5 })
+                }
+              )
+            ] })
+          ]
+        }
+      ) }) })
     }
-  ) }) }) });
+  );
 }
+var FRIENDLY_ERROR_MESSAGE = "Oops, something went wrong. Please try again.";
 function AgentMessage({
   message,
   animated = false,
@@ -180,310 +234,338 @@ function AgentMessage({
   const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
   const isCancelled = message.isCancelled ?? false;
   const currentExecutingStepId = message.currentExecutingStepId;
-  const [isStepsExpanded, setIsStepsExpanded] = react.useState(isStreaming && hasSteps);
+  const [isStepsExpanded, setIsStepsExpanded] = react.useState(false);
+  const wasStreamingRef = react.useRef(isStreaming);
   react.useEffect(() => {
     if (isStreaming && hasSteps) {
       setIsStepsExpanded(true);
     }
+    if (wasStreamingRef.current && !isStreaming) {
+      setIsStepsExpanded(false);
+    }
+    wasStreamingRef.current = isStreaming;
   }, [isStreaming, hasSteps]);
   const totalElapsedMs = hasSteps ? message.steps.reduce((sum, step) => sum + (step.elapsedMs || 0), 0) : 0;
   const currentMessage = message.currentMessage;
   const rawContent = message.streamingContent || message.content || "";
   const content = rawContent.replace(/\\n/g, "\n");
-  const getStreamingStepsText = (expanded) => {
-    const defaultText = `${expanded ? "Hide" : "View"} progress ({count} ${message.steps.length === 1 ? "step" : "steps"})`;
-    const text = streamingStepsText || defaultText;
-    const prefix = expanded ? "Hide" : "View";
-    return text.replace("{count}", message.steps.length.toString()).replace(/^(View|Hide)/, prefix);
-  };
-  const getCompletedStepsText = (expanded) => {
+  const getStepsLabel = (streaming) => {
+    const count = message.steps.length;
+    const stepWord = count === 1 ? "step" : "steps";
+    if (streaming) {
+      if (streamingStepsText)
+        return streamingStepsText.replace("{count}", count.toString());
+      return `${count} ${stepWord} in progress`;
+    }
     if (completedStepsText) {
-      const result = completedStepsText.replace("{count}", message.steps.length.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
-      return result;
+      return completedStepsText.replace("{count}", count.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
     }
-    const prefix = expanded ? "Hide" : "View";
-    const stepWord = message.steps.length === 1 ? "step" : "steps";
-    return `${prefix} execution steps (${message.steps.length} ${stepWord})`;
+    return `${count} ${stepWord} completed`;
+  };
+  const renderStepIcon = (step, isCurrentlyExecuting) => {
+    const wrapper = "h-4 w-4 flex items-center justify-center shrink-0";
+    if (isCurrentlyExecuting)
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 payman-agent-step-icon--active animate-spin" }) });
+    if (step.status === "pending" && isCancelled)
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full payman-agent-step-icon--pending" }) });
+    if (step.status === "pending" || step.status === "in_progress")
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 payman-agent-step-icon--in-progress-dim animate-spin" }) });
+    if (step.status === "completed")
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.Check,
+        {
+          className: cn(
+            "h-3.5 w-3.5",
+            step.eventType === "USER_ACTION_SUCCESS" ? "payman-agent-step-icon--success" : "payman-agent-step-icon--success-dim"
+          )
+        }
+      ) });
+    if (step.status === "error")
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 payman-agent-step-icon--error" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full payman-agent-step-icon--pending-dim" }) });
   };
-  const messageContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start items-start w-full", children: [
-    showAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 shrink-0 mt-0.5", children: isStreaming && showStreamingDot ? (
-      // Animated dot indicator while streaming
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-primary animate-pulse" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 h-2 w-2 rounded-full bg-primary animate-ping opacity-75" })
-      ] }) })
-    ) : (
-      // Avatar after completion or if streaming dot is disabled
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "h-4 w-4 text-muted-foreground" }) })
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "min-w-0 flex flex-col",
-      layout === "centered" ? "max-w-[85%]" : showAvatar ? "max-w-[85%]" : "max-w-[80%]"
-    ), children: [
-      message.userActionResult && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-3 h-3" }),
-        " OTP Verified"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-700", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-3 h-3" }),
-        " Rejected"
-      ] }) }),
+  const stepsListContent = hasSteps && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.2, ease: "easeInOut" },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1.5", children: message.steps.map((step) => {
+        const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
+        const hasTime = step.elapsedMs != null && step.elapsedMs > 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 items-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-px", children: renderStepIcon(step, isCurrentlyExecuting) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-xs leading-relaxed min-w-0 break-words",
+                  isCurrentlyExecuting && "shimmer-text font-medium",
+                  !isCurrentlyExecuting && step.status === "error" && "payman-agent-step-text--error",
+                  !isCurrentlyExecuting && step.eventType === "USER_ACTION_SUCCESS" && "payman-agent-step-text--success",
+                  !isCurrentlyExecuting && step.status === "completed" && "payman-agent-step-text--completed",
+                  !isCurrentlyExecuting && step.status === "pending" && "payman-agent-step-text--pending",
+                  !isCurrentlyExecuting && step.status === "in_progress" && "payman-agent-step-text--in-progress"
+                ),
+                children: step.message
+              }
+            )
+          ] }),
+          hasTime && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-[22px] mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md payman-agent-step-time leading-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-2.5 w-2.5 payman-agent-step-time-icon shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono", children: formatElapsedTime(step.elapsedMs) })
+          ] }) })
+        ] }, step.id);
+      }) })
+    }
+  ) });
+  const stepsToggleRef = react.useRef(null);
+  const handleStepsToggle = react.useCallback(() => {
+    setIsStepsExpanded((prev) => {
+      const next = !prev;
+      if (next) {
+        requestAnimationFrame(() => {
+          stepsToggleRef.current?.closest(".payman-scrollbar")?.dispatchEvent(new CustomEvent("payman-steps-toggle"));
+        });
+      }
+      return next;
+    });
+  }, []);
+  const stepsToggle = (streaming) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: stepsToggleRef,
+      onClick: handleStepsToggle,
+      className: "inline-flex items-center gap-1.5 text-xs payman-agent-step-toggle transition-colors",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            animate: { rotate: isStepsExpanded ? 90 : 0 },
+            transition: { duration: 0.15 },
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: getStepsLabel(streaming) })
+      ]
+    }
+  );
+  const showSteps = showExecutionSteps && hasSteps && !isStreaming && !isError || hasSteps && isStreaming;
+  const messageContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-start items-start w-full", children: [
+      showAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: isStreaming && showStreamingDot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-2.5 rounded-full payman-agent-avatar-dot animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 h-2.5 w-2.5 rounded-full payman-agent-avatar-dot-ping animate-ping" })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full payman-agent-avatar flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-3.5 w-3.5 payman-agent-avatar-icon" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "overflow-hidden w-full",
-            layout === "centered" ? cn(
-              "bg-white border transition-all duration-200 p-3",
-              hasSteps ? "rounded-t-2xl rounded-tl-sm border-b-0" : "rounded-2xl rounded-tl-sm",
-              message.isStreaming ? "border-neutral-300 shadow-sm" : "border-neutral-200",
-              isError && "border-red-200"
-            ) : cn(
-              "p-3",
-              hasSteps && !isStreaming ? "rounded-t-md" : "rounded-md",
-              isError ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
-            )
+            "min-w-0",
+            layout === "centered" ? "max-w-[85%]" : showAvatar ? "max-w-[85%]" : "max-w-[80%]"
           ),
           children: [
-            showAgentName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold mb-1.5 opacity-60", children: agentName }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm leading-relaxed", layout === "centered" ? "p-4" : "", showAgentName && "mt-1"), children: isStreaming && !content ? !showAvatar ? (
-              // Without avatars (yaak): show spinner
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 text-primary animate-spin flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-                  "Thinking",
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 inline-flex", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." })
-                  ] })
-                ] }) })
-              ] })
-            ) : (
-              // With avatars (paygent-central): no spinner in message (dot avatar handles it)
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
-                "Thinking",
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 inline-flex", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thinking-dot", children: "." })
-                ] })
-              ] }) })
-            ) : isCancelled && !content ? (
-              // Show cancelled state only when message is cancelled and has no content
-              !showAvatar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || "The request was stopped." })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: currentMessage || "The request was stopped." })
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-              "prose prose-sm dark:prose-invert max-w-none",
-              isError && "text-destructive"
-            ), children: /* @__PURE__ */ jsxRuntime.jsx(
-              ReactMarkdown__default.default,
+            message.userActionResult && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
               {
-                remarkPlugins: [remarkGfm__default.default],
-                components: {
-                  p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-3 last:mb-0 text-sm leading-relaxed", isError ? "text-destructive" : "text-foreground"), children }),
-                  code: ({ className: codeClassName, children }) => {
-                    const isInline = !codeClassName;
-                    return isInline ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("px-1.5 py-0.5 rounded text-xs font-mono break-all", isError ? "bg-destructive/10 text-destructive" : "bg-muted"), children }) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("block p-3 rounded text-xs font-mono overflow-x-auto my-2 whitespace-pre", isError ? "bg-destructive/10 text-destructive" : "bg-muted"), children });
-                  },
-                  pre: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: cn("my-2 overflow-x-auto max-w-full", isError && "bg-destructive/10"), children }),
-                  ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("list-disc ml-4 mb-3 space-y-1 text-sm", isError && "text-destructive"), children }),
-                  ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cn("list-decimal ml-4 mb-3 space-y-1 text-sm", isError && "text-destructive"), children }),
-                  li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-sm leading-relaxed", isError ? "text-destructive" : "text-foreground"), children }),
-                  h1: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-lg font-semibold mb-2 mt-4 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
-                  h2: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-base font-semibold mb-2 mt-3 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
-                  h3: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-sm font-semibold mb-1 mt-2 first:mt-0", isError ? "text-destructive" : "text-foreground"), children }),
-                  strong: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", isError ? "text-destructive" : "text-foreground"), children }),
-                  em: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: cn("italic", isError ? "text-destructive" : "text-foreground"), children }),
-                  blockquote: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "border-l-4 border-border pl-4 my-2 italic text-muted-foreground", children }),
-                  hr: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-4 border-border" }),
-                  a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: cn("underline underline-offset-2", isError ? "text-destructive hover:text-destructive/80" : "text-primary hover:text-primary/80"),
-                      children
-                    }
-                  ),
-                  table: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-x-auto my-4 -mx-1", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full caption-bottom text-sm border border-border rounded-md", children }) }),
-                  thead: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "[&_tr]:border-b bg-muted/50", children }),
-                  tbody: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "[&_tr:last-child]:border-0", children }),
-                  tr: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "hover:bg-muted/50 border-b transition-colors", children }),
-                  th: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap", children }),
-                  td: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-2 align-middle text-foreground", children })
+                className: "inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-semibold rounded-full payman-agent-approved shrink-0",
+                style: {
+                  background: "var(--payman-agent-approved-bg, var(--payman-success-light, #ecfdf5))",
+                  color: "var(--payman-agent-approved-text, var(--payman-success-dark, #047857))",
+                  border: "1px solid var(--payman-agent-approved-border, var(--payman-success, #059669))"
                 },
-                children: content || (isStreaming ? "Thinking..." : isCancelled ? "The request was stopped." : isError ? "Oops, something went wrong. Please try again." : "")
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 shrink-0", strokeWidth: 2.5 }),
+                  "Verified"
+                ]
               }
-            ) }) })
-          ]
-        }
-      ),
-      showExecutionSteps && hasSteps && !isStreaming && !isError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-        "overflow-hidden",
-        layout === "centered" ? "bg-white border border-t-0 border-neutral-200 rounded-b-2xl" : "bg-muted border-t border-border/30 rounded-b-md"
-      ), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: () => setIsStepsExpanded(!isStepsExpanded),
-            className: cn(
-              "w-full px-4 py-2 flex items-center justify-between text-xs transition-colors",
-              layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: getCompletedStepsText(!!isStepsExpanded) }),
-              isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" })
-            ]
-          }
-        ),
-        isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { height: 0, opacity: 0 },
-            animate: { height: "auto", opacity: 1 },
-            exit: { height: 0, opacity: 0 },
-            transition: { duration: 0.2 },
-            className: "px-4 pb-3 pt-2 space-y-2 bg-background/30",
-            children: message.steps.map((step) => {
-              const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
-                isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
-                step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3 w-3 shrink-0 mt-0.5", step.eventType === "USER_ACTION_SUCCESS" ? "text-green-600" : "text-primary") }),
-                step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "text-muted-foreground break-words",
-                        step.status === "error" && "text-destructive",
-                        step.eventType === "USER_ACTION_SUCCESS" && "text-green-600"
-                      ),
-                      children: step.message
-                    }
-                  ),
-                  step.elapsedMs && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5 text-[10px] opacity-50", children: [
-                    "(",
-                    (step.elapsedMs / 1e3).toFixed(1),
-                    "s)"
-                  ] })
-                ] })
-              ] }, step.id);
-            })
-          }
-        ) })
-      ] }),
-      hasSteps && isStreaming && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-        "overflow-hidden",
-        layout === "centered" ? "bg-white border border-t-0 border-neutral-300 rounded-b-2xl" : "bg-muted border-t border-border/30 rounded-b-md"
-      ), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: () => setIsStepsExpanded(!isStepsExpanded),
-            className: cn(
-              "w-full px-4 py-2 flex items-center justify-between text-xs transition-colors",
-              layout === "centered" ? "text-neutral-500 hover:bg-neutral-50" : "text-muted-foreground hover:bg-muted/70"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: getStreamingStepsText(!!isStepsExpanded) }),
-              isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" })
-            ]
-          }
-        ),
-        isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { height: 0, opacity: 0 },
-            animate: { height: "auto", opacity: 1 },
-            exit: { height: 0, opacity: 0 },
-            transition: { duration: 0.2 },
-            className: "px-4 pb-3 pt-2 space-y-2 bg-background/30",
-            children: message.steps.map((step) => {
-              const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
-                isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3 w-3 text-muted-foreground shrink-0 mt-0.5" }),
-                step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 text-primary animate-spin shrink-0 mt-0.5" }),
-                step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3 w-3 shrink-0 mt-0.5", step.eventType === "USER_ACTION_SUCCESS" ? "text-green-600" : "text-primary") }),
-                step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-destructive shrink-0 mt-0.5" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-semibold rounded-full payman-agent-rejected shrink-0",
+                style: {
+                  background: "var(--payman-agent-rejected-bg, var(--payman-error-light, #fef2f2))",
+                  color: "var(--payman-agent-rejected-text, var(--payman-error-dark, #b91c1c))",
+                  border: "1px solid var(--payman-agent-rejected-border, var(--payman-destructive, #dc2626))"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5 shrink-0", strokeWidth: 2.5 }),
+                  "Rejected"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "overflow-hidden w-full min-w-0 px-4 py-3 rounded-2xl rounded-tl-md transition-all duration-200",
+                  layout === "centered" ? cn(
+                    "payman-agent-bubble payman-agent-bubble--centered border shadow-sm",
+                    isStreaming && "streaming",
+                    isError && "error"
+                  ) : cn(
+                    "payman-agent-bubble",
+                    isError && "payman-agent-bubble--error"
+                  )
+                ),
+                children: [
+                  showAgentName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold mb-1 payman-agent-name leading-none", children: agentName }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
+                    "div",
                     {
                       className: cn(
-                        "text-muted-foreground break-words",
-                        step.status === "error" && "text-destructive",
-                        step.eventType === "USER_ACTION_SUCCESS" && "text-green-600"
+                        "text-sm leading-relaxed min-w-0 w-full break-words overflow-wrap-anywhere",
+                        showAgentName && "mt-1"
                       ),
-                      children: step.message
+                      children: isStreaming && !content ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 w-full", children: [
+                        !showAvatar && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 payman-agent-thinking-spinner animate-spin shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm payman-agent-thinking-text min-w-0 break-words overflow-wrap-anywhere", children: currentMessage || "Thinking..." })
+                      ] }) : isCancelled && !content ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 payman-agent-cancelled-icon flex-shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm payman-agent-cancelled-text italic", children: currentMessage || "Request was stopped." })
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "payman-markdown payman-agent-markdown prose prose-sm dark:prose-invert max-w-none min-w-0 w-full break-words overflow-wrap-anywhere",
+                            isError && "payman-agent-markdown--error",
+                            isStreaming && content && "streaming-cursor"
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            ReactMarkdown__default.default,
+                            {
+                              remarkPlugins: [remarkGfm__default.default],
+                              components: markdownComponents(),
+                              children: isError ? FRIENDLY_ERROR_MESSAGE : content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : "")
+                            }
+                          )
+                        }
+                      )
                     }
-                  ),
-                  step.elapsedMs && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1.5 text-[10px] opacity-50", children: [
-                    "(",
-                    (step.elapsedMs / 1e3).toFixed(1),
-                    "s)"
-                  ] })
-                ] })
-              ] }, step.id);
-            })
-          }
-        ) })
-      ] })
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onExecutionTraceClick({
+            message,
+            tracingData: message.tracingData,
+            executionId: message.executionId
+          }),
+          className: cn(
+            "p-2 rounded-lg shrink-0 payman-agent-trace",
+            "active:scale-95 transition-all duration-150",
+            message.userActionResult ? "mt-8" : "mt-0.5"
+          ),
+          title: "View execution trace",
+          "aria-label": "View execution trace",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Binoculars, { className: "w-4 h-4 payman-agent-trace-icon" })
+        }
+      )
     ] }),
-    hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onExecutionTraceClick({
-          message,
-          tracingData: message.tracingData,
-          executionId: message.executionId
-        }),
-        className: cn(
-          "p-2 bg-white/5 border border-white/20 rounded-lg shadow-sm hover:bg-white/10 hover:border-highlight transition-colors duration-200 flex-shrink-0",
-          message.userActionResult ? "mt-8" : "mt-0.5"
-        ),
-        title: "View execution trace",
-        "aria-label": "View execution trace",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Binoculars, { className: "w-4 h-4 text-foreground" })
-      }
-    )
+    showSteps && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-1.5", showAvatar ? "ml-11" : "ml-0"), children: [
+      hasSteps && isStreaming && stepsToggle(true),
+      showExecutionSteps && hasSteps && !isStreaming && !isError && stepsToggle(false),
+      stepsListContent
+    ] })
   ] });
   if (animated) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
-        initial: { opacity: 0, y: 10 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.2 },
+        initial: { opacity: 0, y: 8, scale: 0.98 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
         children: messageContent
       }
     );
   }
   return messageContent;
 }
-function UserMessage({ message, animated = false, showAvatar = false }) {
-  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-end w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%] min-w-0 flex flex-col items-end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg p-3 bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-wrap break-words", children: message.content }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] mt-1 text-muted-foreground", children: formatDate(message.timestamp) })
+function markdownComponents(_isError) {
+  return {
+    p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 last:mb-0 text-sm leading-relaxed", children }),
+    code: ({ className: codeClassName, children }) => {
+      const isInline = !codeClassName;
+      return isInline ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1.5 py-0.5 rounded-md text-xs font-mono break-all", children }) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block p-3 rounded-lg text-xs font-mono overflow-x-auto my-2 whitespace-pre", children });
+    },
+    pre: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "my-2 overflow-x-auto max-w-full rounded-lg", children }),
+    ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc ml-4 mb-3 space-y-1 text-sm", children }),
+    ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal ml-4 mb-3 space-y-1 text-sm", children }),
+    li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm leading-relaxed", children }),
+    h1: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold mb-2 mt-4 first:mt-0", children }),
+    h2: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold mb-2 mt-3 first:mt-0", children }),
+    h3: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-1 mt-2 first:mt-0", children }),
+    strong: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children }),
+    em: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic", children }),
+    blockquote: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "pl-4 my-2 italic", children }),
+    hr: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-4" }),
+    a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "underline underline-offset-2 decoration-1",
+        children
+      }
+    ),
+    table: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-x-auto my-4 -mx-1", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full caption-bottom text-sm border rounded-lg overflow-hidden", children }) }),
+    thead: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "[&_tr]:border-b", children }),
+    tbody: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "[&_tr:last-child]:border-0", children }),
+    tr: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b transition-colors", children }),
+    th: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "h-10 px-3 text-left align-middle font-medium whitespace-nowrap text-xs", children }),
+    td: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 align-middle text-sm", children })
+  };
+}
+function UserMessage({
+  message,
+  animated = false,
+  showAvatar = false
+}) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[80%] min-w-0 flex flex-col items-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-2xl rounded-br-md px-4 py-3",
+            "bg-primary text-primary-foreground",
+            "shadow-sm"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: message.content })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] mt-1.5 mr-1 text-muted-foreground/70 select-none", children: formatDate(message.timestamp) })
     ] }),
-    showAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 shrink-0 mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4 text-primary" }) }) })
+    showAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "h-8 w-8 rounded-full",
+          "bg-primary/10 border border-primary/20",
+          "flex items-center justify-center"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3.5 w-3.5 text-primary" })
+      }
+    ) })
   ] });
   if (animated) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
-        initial: { opacity: 0, y: 10 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.3, ease: "easeOut" },
+        initial: { opacity: 0, y: 8, scale: 0.98 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
         children: content
       }
     );
@@ -495,7 +577,7 @@ function MessageRow({
   stage = "DEV",
   animated = false,
   showAgentName = false,
-  agentName = "Paygent",
+  agentName = "Assistant",
   showAvatars = false,
   showUserAvatar,
   showAssistantAvatar,
@@ -510,7 +592,14 @@ function MessageRow({
   const actualShowUserAvatar = showUserAvatar !== void 0 ? showUserAvatar : showAvatars;
   const actualShowAssistantAvatar = showAssistantAvatar !== void 0 ? showAssistantAvatar : showAvatars;
   if (message.role === "user") {
-    return /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { message, animated, showAvatar: actualShowUserAvatar });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      UserMessage,
+      {
+        message,
+        animated,
+        showAvatar: actualShowUserAvatar
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     AgentMessage,
@@ -537,30 +626,58 @@ function MessageRowSkeleton({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `flex ${isRightAligned ? "justify-end" : "justify-start"} animate-pulse`,
+      className: cn(
+        "flex w-full",
+        isRightAligned ? "justify-end" : "justify-start"
+      ),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: `flex flex-col ${isRightAligned ? "items-end" : "items-start"} w-full max-w-[80%]`,
+          className: cn(
+            "flex flex-col gap-2 w-full",
+            isRightAligned ? "items-end max-w-[70%]" : "items-start max-w-[80%]"
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: `rounded-lg p-3 ${isRightAligned ? "bg-primary/20" : "bg-muted"} w-full`,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-3/4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-full" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-muted-foreground/20 rounded w-5/6" })
+                className: cn(
+                  "rounded-2xl p-4 w-full",
+                  isRightAligned ? "bg-primary/8 rounded-br-md" : "bg-muted/70 rounded-bl-md"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 skeleton-pulse rounded-full bg-muted-foreground/10 w-[85%]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "h-3 skeleton-pulse rounded-full bg-muted-foreground/10 w-full",
+                      style: { animationDelay: "0.1s" }
+                    }
+                  ),
+                  !isRightAligned && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "h-3 skeleton-pulse rounded-full bg-muted-foreground/10 w-[60%]",
+                      style: { animationDelay: "0.2s" }
+                    }
+                  )
                 ] })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-muted-foreground/20 rounded w-16 mt-1" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-2 skeleton-pulse rounded-full bg-muted-foreground/8 w-12 mx-1",
+                style: { animationDelay: "0.3s" }
+              }
+            )
           ]
         }
       )
     }
   );
 }
+var SCROLL_THRESHOLD = 150;
 function MessageList({
   messages,
   isLoading = false,
@@ -571,7 +688,7 @@ function MessageList({
   stage = "DEV",
   animated = false,
   showAgentName = false,
-  agentName = "Paygent",
+  agentName = "Assistant",
   showAvatars = false,
   showUserAvatar,
   showAssistantAvatar,
@@ -582,106 +699,204 @@ function MessageList({
   onExecutionTraceClick,
   className
 }) {
-  const messagesContainerRef = react.useRef(null);
-  const scrollToBottom = react.useCallback(() => {
-    const el = messagesContainerRef.current;
-    if (el) {
-      el.scrollTop = el.scrollHeight;
+  const scrollRef = react.useRef(null);
+  const isNearBottomRef = react.useRef(true);
+  const [showScrollBtn, setShowScrollBtn] = react.useState(false);
+  const prevMessageCountRef = react.useRef(messages.length);
+  const getDistanceFromBottom = react.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return 0;
+    return el.scrollHeight - el.scrollTop - el.clientHeight;
+  }, []);
+  const scrollToBottom = react.useCallback((behavior = "smooth") => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+  const handleScroll = react.useCallback(() => {
+    const distance = getDistanceFromBottom();
+    const nearBottom = distance <= SCROLL_THRESHOLD;
+    isNearBottomRef.current = nearBottom;
+    setShowScrollBtn(!nearBottom);
+  }, [getDistanceFromBottom]);
+  react.useEffect(() => {
+    const prevCount = prevMessageCountRef.current;
+    prevMessageCountRef.current = messages.length;
+    if (messages.length > prevCount && isNearBottomRef.current) {
+      requestAnimationFrame(() => scrollToBottom());
+    }
+  }, [messages.length, scrollToBottom]);
+  react.useEffect(() => {
+    const lastMsg = messages[messages.length - 1];
+    if (!lastMsg?.isStreaming) return;
+    if (!isNearBottomRef.current) return;
+    requestAnimationFrame(() => scrollToBottom());
+  });
+  react.useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(() => scrollToBottom("instant"), 50);
     }
   }, []);
   react.useEffect(() => {
-    if (messages.length > 0) scrollToBottom();
-  }, [messages, scrollToBottom]);
+    const handleStepsToggle = () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const distance = getDistanceFromBottom();
+          if (distance > 0 && distance < 600) {
+            scrollToBottom();
+          }
+        });
+      });
+    };
+    const el = scrollRef.current;
+    if (el) {
+      el.addEventListener("payman-steps-toggle", handleStepsToggle);
+      return () => el.removeEventListener("payman-steps-toggle", handleStepsToggle);
+    }
+  }, [getDistanceFromBottom, scrollToBottom]);
+  const handleScrollToBottom = react.useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 overflow-y-auto min-h-0", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-4", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      MessageRowSkeleton,
-      {
-        isRightAligned: index % 3 === 0
-      },
-      `skeleton-${index}`
-    )) }) });
-  }
-  if (messages.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(
-          "flex-1 overflow-y-auto min-h-0 flex flex-col items-center justify-center h-full text-center p-4",
+          "flex-1 overflow-y-auto min-h-0 payman-scrollbar",
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: {
-              duration: 0.5,
-              ease: "easeOut"
-            },
-            className: "flex flex-col items-center gap-4",
-            children: [
-              showEmptyStateIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "h-6 w-6 text-muted-foreground" }) }),
-              emptyStateText.split("\n").map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    index === 0 ? layout === "centered" ? "text-2xl font-semibold text-primary" : "text-2xl font-semibold text-foreground" : "text-sm text-muted-foreground"
-                  ),
-                  children: line
-                },
-                index
-              ))
-            ]
+            className: cn(
+              "space-y-5",
+              layout === "centered" ? "max-w-2xl mx-auto px-4 py-6" : "p-4"
+            ),
+            children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              MessageRowSkeleton,
+              {
+                isRightAligned: i % 3 === 0
+              },
+              `skel-${i}`
+            ))
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  if (messages.length === 0) {
+    const lines = emptyStateText.split("\n").map((l) => l.trim()).filter(Boolean);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("payman-empty-root p-8", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] },
+        className: "payman-empty-content",
+        children: [
+          showEmptyStateIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { scale: 0.85, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              transition: { delay: 0.08, duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] },
+              className: "payman-empty-icon-wrap",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: "h-7 w-7 payman-empty-icon", strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.p,
+            {
+              initial: { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.12 + i * 0.06, duration: 0.4 },
+              className: i === 0 ? "payman-empty-title" : "payman-empty-subtitle",
+              children: line
+            },
+            i
+          )) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: messagesContainerRef,
-      className: cn("flex-1 overflow-y-auto min-h-0", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        "space-y-4",
-        layout === "centered" ? "max-w-2xl mx-auto px-4 py-6" : "p-4"
-      ), children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-        MessageRow,
-        {
-          message,
-          stage,
-          animated,
-          showAgentName,
-          agentName,
-          showAvatars,
-          showUserAvatar,
-          showAssistantAvatar,
-          layout,
-          showTimestamps,
-          showExecutionSteps,
-          showStreamingDot,
-          streamingStepsText,
-          completedStepsText,
-          onExecutionTraceClick
-        },
-        message.id
-      )) })
+      ref: scrollRef,
+      onScroll: handleScroll,
+      className: cn(
+        "flex-1 min-h-0 overflow-y-auto payman-scrollbar relative",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "space-y-4",
+              layout === "centered" ? "max-w-2xl mx-auto px-4 py-6" : "p-4"
+            ),
+            children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+              MessageRow,
+              {
+                message,
+                stage,
+                animated,
+                showAgentName,
+                agentName,
+                showAvatars,
+                showUserAvatar,
+                showAssistantAvatar,
+                layout,
+                showTimestamps,
+                showExecutionSteps,
+                showStreamingDot,
+                streamingStepsText,
+                completedStepsText,
+                onExecutionTraceClick
+              },
+              message.id
+            ))
+          }
+        ),
+        showScrollBtn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 z-20 flex justify-center pb-3 -mt-11", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleScrollToBottom,
+            className: cn(
+              "w-8 h-8 rounded-full",
+              "bg-card border border-border shadow-lg",
+              "flex items-center justify-center",
+              "hover:bg-muted active:scale-95",
+              "transition-all duration-150",
+              "cursor-pointer"
+            ),
+            "aria-label": "Scroll to bottom",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-4 h-4 text-muted-foreground" })
+          }
+        ) })
+      ]
     }
-  );
+  ) });
 }
 var DEFAULT_MAX_LENGTH = 6;
 var MAX_SUPPORTED_LENGTH = 12;
 var AUTO_FOCUS_DELAY_MS = 250;
-function OtpInput({ value, onChange, maxLength, disabled = false }) {
+function OtpInput({
+  value,
+  onChange,
+  maxLength,
+  disabled = false
+}) {
   const inputRefs = react.useRef([]);
   const safeMaxLength = Number.isInteger(maxLength) && maxLength > 0 ? Math.min(maxLength, MAX_SUPPORTED_LENGTH) : DEFAULT_MAX_LENGTH;
   const digits = value.split("").concat(Array(safeMaxLength).fill("")).slice(0, safeMaxLength);
   react.useEffect(() => {
     if (disabled) return;
-    const focusTimer = window.setTimeout(() => {
+    const timer = window.setTimeout(() => {
       inputRefs.current[0]?.focus();
     }, AUTO_FOCUS_DELAY_MS);
-    return () => window.clearTimeout(focusTimer);
+    return () => window.clearTimeout(timer);
   }, [disabled]);
   const focusInput = (index) => {
     if (index >= 0 && index < safeMaxLength) {
@@ -696,9 +911,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
     const newDigits = [...digits];
     newDigits[index] = char;
     updateValue(newDigits);
-    if (char && index < safeMaxLength - 1) {
-      focusInput(index + 1);
-    }
+    if (char && index < safeMaxLength - 1) focusInput(index + 1);
   };
   const handleKeyDown = (index, e) => {
     if (e.key === "Enter") {
@@ -735,7 +948,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
     updateValue(newDigits);
     focusInput(Math.min(pasted.length, safeMaxLength - 1));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2.5 justify-center", children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       ref: (el) => {
@@ -751,7 +964,12 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       onPaste: handlePaste,
       onFocus: (e) => e.target.select(),
       "aria-label": `Digit ${i + 1}`,
-      className: `w-10 h-12 text-center text-xl font-semibold border border-border rounded-lg outline-none text-foreground ${disabled ? "bg-muted opacity-50" : "bg-transparent"}`
+      className: cn(
+        "w-12 h-14 text-center text-xl font-semibold rounded-xl",
+        "payman-otp-input otp-input",
+        "transition-all duration-150 cursor-text",
+        disabled && "cursor-not-allowed"
+      )
     },
     i
   )) });
@@ -820,9 +1038,10 @@ function UserActionModal({
   }, [isOpen, resetActionState]);
   react.useEffect(() => {
     if (resendCooldownRemaining <= 0) return;
-    const timer = setTimeout(() => {
-      setResendCooldownRemaining((prev) => prev - 1);
-    }, 1e3);
+    const timer = setTimeout(
+      () => setResendCooldownRemaining((p) => p - 1),
+      1e3
+    );
     return () => clearTimeout(timer);
   }, [resendCooldownRemaining]);
   react.useEffect(() => {
@@ -834,9 +1053,7 @@ function UserActionModal({
   react.useEffect(() => {
     if (!isOpen || !isSubmitting) return;
     if (actionType !== "approve" && actionType !== "reject") return;
-    const timeout = setTimeout(() => {
-      resetActionState();
-    }, ACTION_PENDING_TIMEOUT_MS);
+    const timeout = setTimeout(resetActionState, ACTION_PENDING_TIMEOUT_MS);
     return () => clearTimeout(timeout);
   }, [isOpen, isSubmitting, actionType, resetActionState]);
   react.useEffect(() => {
@@ -846,39 +1063,39 @@ function UserActionModal({
     previousFocusedRef.current = document.activeElement;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const getFocusableElements = () => Array.from(
+    const getFocusable = () => Array.from(
       dialog.querySelectorAll(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       )
     ).filter((el) => !el.hasAttribute("disabled") && el.tabIndex !== -1);
-    const focusables = getFocusableElements();
+    const focusables = getFocusable();
     (focusables[0] ?? dialog).focus();
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
         return;
       }
-      if (event.key !== "Tab") return;
-      const currentFocusables = getFocusableElements();
-      if (currentFocusables.length === 0) {
-        event.preventDefault();
+      if (e.key !== "Tab") return;
+      const items = getFocusable();
+      if (!items.length) {
+        e.preventDefault();
         dialog.focus();
         return;
       }
-      const first = currentFocusables[0];
-      const last = currentFocusables[currentFocusables.length - 1];
-      const activeElement = document.activeElement;
-      const isInDialog = activeElement ? dialog.contains(activeElement) : false;
-      if (event.shiftKey) {
-        if (!isInDialog || activeElement === first) {
-          event.preventDefault();
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      const inDialog = active ? dialog.contains(active) : false;
+      if (e.shiftKey) {
+        if (!inDialog || active === first) {
+          e.preventDefault();
           last.focus();
         }
-        return;
-      }
-      if (!isInDialog || activeElement === last) {
-        event.preventDefault();
-        first.focus();
+      } else {
+        if (!inDialog || active === last) {
+          e.preventDefault();
+          first.focus();
+        }
       }
     };
     document.addEventListener("keydown", handleKeyDown);
@@ -922,143 +1139,191 @@ function UserActionModal({
   }, [resendCooldownRemaining, onResend]);
   if (!isOpen || !userActionRequest) return null;
   const isOtpValid = otp.length === schema.maxLength && /^\d+$/.test(otp);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      className: "payman-modal-backdrop",
       style: {
         position: "fixed",
         inset: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
         zIndex: 1e4,
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        padding: 16,
+        boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: dialogRef,
-          role: "dialog",
-          "aria-modal": "true",
-          className: "bg-card rounded-xl p-6 shadow-2xl",
-          style: { width: "100%", maxWidth: "420px", margin: "0 16px" },
-          tabIndex: -1,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-6 h-6 text-primary" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: MODAL_CONTENT.TITLE })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground text-center mb-6 leading-relaxed", children: userActionRequest.message }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-              OtpInput,
-              {
-                value: otp,
-                onChange: setOtp,
-                maxLength: schema.maxLength,
-                disabled: isSubmitting
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 backdrop-blur-sm payman-modal-backdrop-overlay payman-modal-animate",
+            "aria-hidden": true,
+            style: {
+              background: "var(--payman-modal-backdrop-bg, rgba(0, 0, 0, 0.4))"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              width: "100%",
+              maxWidth: 400,
+              minWidth: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
+                ref: dialogRef,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": "payman-modal-title",
+                className: cn(
+                  "relative w-full rounded-2xl p-6 shadow-2xl",
+                  "payman-modal-dialog payman-modal-animate"
+                ),
                 style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px"
+                  width: "100%",
+                  maxWidth: 400,
+                  boxSizing: "border-box",
+                  background: "var(--payman-modal-dialog-bg, var(--payman-card, #ffffff))",
+                  border: "1px solid var(--payman-modal-dialog-border, var(--payman-border, #e4e4e7))"
                 },
+                tabIndex: -1,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        gap: "8px"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "button",
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "inline-flex items-center justify-center w-12 h-12 rounded-2xl payman-modal-icon-wrap mb-3",
+                        style: {
+                          background: "var(--payman-modal-icon-bg, color-mix(in srgb, var(--payman-primary, #18181b) 10%, transparent))",
+                          border: "1px solid var(--payman-modal-icon-border, color-mix(in srgb, var(--payman-primary, #18181b) 20%, transparent))"
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.ShieldCheck,
                           {
-                            onClick: handleReject,
-                            disabled: isSubmitting,
-                            className: cn(
-                              "py-2.5 px-4 rounded-lg text-sm font-medium transition-colors cursor-pointer",
-                              "bg-destructive/10 text-destructive hover:bg-destructive/30 hover:text-destructive",
-                              "disabled:opacity-50 disabled:cursor-not-allowed"
-                            ),
+                            className: "w-6 h-6 payman-modal-icon",
                             style: {
-                              flex: 1,
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              gap: "6px",
-                              whiteSpace: "nowrap",
-                              minWidth: 0
-                            },
-                            children: [
-                              actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin", style: { flexShrink: 0 } }),
-                              actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "button",
-                          {
-                            onClick: handleApprove,
-                            disabled: !isOtpValid || isSubmitting,
-                            className: cn(
-                              "py-2.5 px-4 rounded-lg text-sm font-medium transition-colors cursor-pointer",
-                              "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
-                              "disabled:opacity-50 disabled:cursor-not-allowed"
-                            ),
-                            style: {
-                              flex: 1,
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              gap: "6px",
-                              whiteSpace: "nowrap",
-                              minWidth: 0
-                            },
-                            children: [
-                              actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin", style: { flexShrink: 0 } }),
-                              actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE
-                            ]
+                              color: "var(--payman-modal-icon-fg, var(--payman-primary, #18181b))"
+                            }
                           }
                         )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h2",
+                      {
+                        id: "payman-modal-title",
+                        className: "text-lg font-semibold payman-modal-title tracking-tight",
+                        style: {
+                          color: "var(--payman-modal-title-fg, var(--payman-foreground, #18181b))"
+                        },
+                        children: MODAL_CONTENT.TITLE
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
                     {
-                      onClick: handleResend,
-                      disabled: isSubmitting || resendCooldownRemaining > 0,
-                      className: cn(
-                        "py-2 px-4 rounded-lg text-xs font-medium transition-colors w-full cursor-pointer",
-                        "border border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground/40 hover:bg-muted/50",
-                        "disabled:opacity-50 disabled:cursor-not-allowed"
-                      ),
+                      className: "text-sm payman-modal-desc text-center mb-6 leading-relaxed px-0.5",
                       style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        gap: "6px",
-                        whiteSpace: "nowrap"
+                        color: "var(--payman-modal-desc-fg, var(--payman-muted-foreground, #71717a))"
                       },
-                      children: [
-                        actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3.5 h-3.5 animate-spin", style: { flexShrink: 0 } }),
-                        actionType === "resend" ? MODAL_CONTENT.LOADING_RESEND : resendCooldownRemaining > 0 ? `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s` : BUTTON_LABELS.RESEND
-                      ]
+                      children: userActionRequest.message
                     }
-                  )
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    OtpInput,
+                    {
+                      value: otp,
+                      onChange: setOtp,
+                      maxLength: schema.maxLength,
+                      disabled: isSubmitting
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleReject,
+                          disabled: isSubmitting,
+                          className: cn(
+                            "flex-1 flex items-center justify-center gap-2",
+                            "min-h-[48px] py-3 px-4 rounded-xl text-sm font-medium border-0 cursor-pointer",
+                            "payman-modal-btn-reject",
+                            "active:scale-[0.98] transition-all duration-150",
+                            "disabled:cursor-not-allowed"
+                          ),
+                          style: {
+                            background: "var(--payman-modal-btn-reject-bg, color-mix(in srgb, var(--payman-destructive, #ef4444) 10%, transparent))",
+                            color: "var(--payman-modal-btn-reject-fg, var(--payman-destructive, #ef4444))"
+                          },
+                          children: [
+                            actionType === "reject" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 shrink-0", strokeWidth: 2.5 }),
+                            actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: handleApprove,
+                          disabled: !isOtpValid || isSubmitting,
+                          className: cn(
+                            "flex-1 flex items-center justify-center gap-2",
+                            "min-h-[48px] py-3 px-4 rounded-xl text-sm font-medium border-0 cursor-pointer",
+                            "payman-modal-btn-approve",
+                            "active:scale-[0.98] transition-all duration-150",
+                            "disabled:cursor-not-allowed"
+                          ),
+                          style: {
+                            background: "var(--payman-modal-btn-approve-bg, var(--payman-primary, #18181b))",
+                            color: "var(--payman-modal-btn-approve-fg, var(--payman-primary-foreground, #fafafa))"
+                          },
+                          children: [
+                            actionType === "approve" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 shrink-0", strokeWidth: 2.5 }),
+                            actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleResend,
+                        disabled: isSubmitting || resendCooldownRemaining > 0,
+                        className: cn(
+                          "w-full flex items-center justify-center gap-2",
+                          "min-h-[48px] py-3 px-4 rounded-xl text-sm font-medium cursor-pointer",
+                          "payman-modal-btn-resend",
+                          "transition-all duration-150 disabled:cursor-not-allowed"
+                        ),
+                        style: {
+                          border: "1px solid var(--payman-modal-btn-resend-border, var(--payman-border, #e4e4e7))",
+                          color: "var(--payman-modal-btn-resend-fg, var(--payman-muted-foreground, #71717a))"
+                        },
+                        children: [
+                          actionType === "resend" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4 shrink-0", strokeWidth: 2.5 }),
+                          actionType === "resend" ? MODAL_CONTENT.LOADING_RESEND : resendCooldownRemaining > 0 ? `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s` : BUTTON_LABELS.RESEND
+                        ]
+                      }
+                    )
+                  ] })
                 ]
               }
             )
-          ]
-        }
-      )
+          }
+        )
+      ]
     }
-  ) });
+  );
 }
 var DEFAULT_USER_ACTION_STATE = {
   request: null,