refactor: enhance UI components and improve styling consistency across chat interface

web/components/kefu/chat-shell.tsx

@@ -7,7 +7,7 @@ import {
   RotateCwIcon,
   XIcon,
 } from "lucide-react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react"
 import { useShallow } from "zustand/react/shallow"
 
 import { KefuConnectionStatus } from "@/components/kefu/connection-status"
@@ -23,6 +23,15 @@ import {
   requestKefuHostToggleMaximize,
 } from "@/lib/kefu-host-bridge"
 import { useKefuChatStore } from "@/lib/stores/kefu-chat"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
 
 export function KefuChatShell() {
   const messageListRef = useRef<KefuMessageListHandle | null>(null)
@@ -191,74 +200,81 @@ export function KefuChatShell() {
 
   return (
     <main
-      className="cs-agent-shell relative flex h-screen overflow-hidden bg-(--background)"
+      className="relative flex h-screen overflow-hidden bg-[#f6f8fb] text-slate-950"
-      style={{ "--primary": themeColor } as React.CSSProperties}
+      style={{ "--primary": themeColor } as CSSProperties}
     >
-      <section className="cs-agent-panel flex h-full w-full flex-col overflow-hidden border border-white/70">
+      <section className="flex h-full w-full flex-col overflow-hidden border border-slate-200/70 bg-white">
-        <header className="relative shrink-0 overflow-hidden border-b border-white/60 px-4 pb-3 pt-3 shadow-[0_10px_24px_rgba(15,23,42,0.05)]">
+        <header className="shrink-0 border-b border-slate-200/70 bg-white/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)]">
-          <div className="absolute inset-x-0 top-0 h-20 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.14),transparent_52%)]" />
+          <div className="flex items-center justify-between gap-3">
-          <div className="relative flex items-center justify-between gap-3">
             <div className="min-w-0">
-              <div className="truncate text-[16px] font-semibold tracking-[0.01em] text-slate-950">
+              <div className="truncate text-base font-semibold text-slate-950">
                 {title}
               </div>
-              <div className="mt-1 text-[12px] text-slate-500">{subtitle}</div>
+              <div className="mt-1 truncate text-xs text-slate-500">{subtitle}</div>
             </div>
             <div className="flex items-center gap-2">
               {status !== "connected" ? (
                 <KefuConnectionStatus status={status} />
               ) : null}
-              <div className="inline-flex items-center gap-1 rounded-[18px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(241,245,249,0.82))] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_28px_rgba(15,23,42,0.07)] backdrop-blur-xl">
+              <div className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1">
-                <button
+                <Button
                   type="button"
+                  variant="ghost"
+                  size="icon-xs"
                   onClick={retry}
                   aria-label="重新连接"
                   title="重新连接"
-                  className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(239,246,255,0.96))] hover:text-sky-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(56,189,248,0.16)]"
+                  className="text-slate-500 hover:bg-white hover:text-sky-600"
                 >
-                  <RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" />
+                  <RotateCwIcon />
-                </button>
+                </Button>
                 {showHostActions ? (
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="icon-xs"
                     onClick={handleMinimize}
                     aria-label="收起聊天窗口"
                     title="收起聊天窗口"
-                    className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96))] hover:text-slate-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(15,23,42,0.10)]"
+                    className="text-slate-500 hover:bg-white hover:text-slate-800"
                   >
-                    <MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
+                    <MinusIcon />
-                  </button>
+                  </Button>
                 ) : null}
                 {showHostActions ? (
-                  <button
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="icon-xs"
                     onClick={handleToggleMaximize}
                     aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
                     title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
-                    className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(238,249,244,0.96))] hover:text-emerald-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(16,185,129,0.14)]"
+                    className="text-slate-500 hover:bg-white hover:text-emerald-700"
                   >
                     {isMaximized ? (
-                      <Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
+                      <Minimize2Icon />
                     ) : (
-                      <Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
+                      <Maximize2Icon />
                     )}
-                  </button>
+                  </Button>
                 ) : null}
-                <button
+                <Button
                   type="button"
+                  variant="ghost"
+                  size="icon-xs"
                   onClick={() => setIsCloseDialogOpen(true)}
                   aria-label="关闭聊天窗口"
                   title="关闭聊天窗口"
-                  className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-rose-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,241,242,0.98))] hover:text-rose-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(244,63,94,0.16)]"
+                  className="text-rose-500 hover:bg-rose-50 hover:text-rose-600"
                 >
-                  <XIcon className="size-3.75 transition duration-200 group-hover:scale-[0.92]" />
+                  <XIcon />
-                </button>
+                </Button>
               </div>
             </div>
           </div>
         </header>
 
-        <div className=".cs-agent-grid-bg grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden">
+        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-[#f6f8fb]">
           <KefuMessageList
             ref={messageListRef}
             messages={safeMessages}
@@ -282,41 +298,41 @@ export function KefuChatShell() {
         ) : null}
       </section>
 
-      {isCloseDialogOpen ? (
+      <Dialog
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.16),transparent_38%),rgba(15,23,42,0.24)] px-5 backdrop-blur-sm">
+        open={isCloseDialogOpen}
-          <div className="cs-agent-fade-up w-full max-w-[320px] rounded-[26px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(241,245,249,0.94))] p-5 shadow-[0_28px_80px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.92)]">
+        onOpenChange={(open) => {
-            <div className="flex items-start gap-3">
+          if (!isClosingConversation) {
-              <div className="min-w-0">
+            setIsCloseDialogOpen(open)
-                <div className="text-[15px] font-semibold tracking-[0.01em] text-slate-950">
+          }
-                  结束当前对话？
+        }}
-                </div>
+      >
-                <div className="mt-1.5 text-[12px] leading-5 text-slate-500">
+        <DialogContent className="max-w-[320px]" showCloseButton={!isClosingConversation}>
-                  结束会话，客服将无法再查看您的消息记录，如需再次联系请重新发起对话。
+          <DialogHeader>
-                </div>
+            <DialogTitle>结束当前对话？</DialogTitle>
-              </div>
+            <DialogDescription className="text-xs leading-5">
-            </div>
+              结束会话，客服将无法再查看您的消息记录，如需再次联系请重新发起对话。
-
+            </DialogDescription>
-            <div className="mt-5 flex items-center justify-end gap-2">
+          </DialogHeader>
-              <button
+          <DialogFooter>
-                type="button"
+            <Button
-                disabled={isClosingConversation}
+              type="button"
-                onClick={() => setIsCloseDialogOpen(false)}
+              variant="outline"
-                className="inline-flex h-9 items-center justify-center rounded-2xl border border-slate-200/80 bg-white/80 px-4 text-[12px] font-medium text-slate-600 shadow-[0_10px_20px_rgba(15,23,42,0.05)] transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:text-slate-800 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
+              disabled={isClosingConversation}
-              >
+              onClick={() => setIsCloseDialogOpen(false)}
-                继续对话
+            >
-              </button>
+              继续对话
-              <button
+            </Button>
-                type="button"
+            <Button
-                disabled={isClosingConversation}
+              type="button"
-                onClick={() => void confirmCloseConversation()}
+              variant="destructive"
-                className="inline-flex h-9 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,#f43f5e,#fb7185)] px-4 text-[12px] font-semibold text-white shadow-[0_14px_28px_rgba(244,63,94,0.24)] transition hover:-translate-y-0.5 hover:opacity-92 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
+              disabled={isClosingConversation}
-              >
+              onClick={() => void confirmCloseConversation()}
-                {isClosingConversation ? "结束中..." : "确认结束"}
+            >
-              </button>
+              {isClosingConversation ? "结束中..." : "确认结束"}
-            </div>
+            </Button>
-          </div>
+          </DialogFooter>
-        </div>
+        </DialogContent>
-      ) : null}
+      </Dialog>
     </main>
   )
 }

web/components/kefu/connection-status.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { Badge } from "@/components/ui/badge"
 import { cn } from "@/lib/utils"
 
 type KefuConnectionStatusProps = {
@@ -15,17 +16,15 @@ const statusText: Record<KefuConnectionStatusProps["status"], string> = {
 export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
   const toneClass =
     status === "connected"
-      ? "border-emerald-200/80 bg-emerald-50 text-emerald-700"
+      ? "border-emerald-200 bg-emerald-50 text-emerald-700"
       : status === "connecting"
-        ? "border-amber-200/80 bg-amber-50 text-amber-700"
+        ? "border-amber-200 bg-amber-50 text-amber-700"
-        : "border-slate-200/80 bg-slate-100 text-slate-600"
+        : "border-slate-200 bg-slate-100 text-slate-600"
 
   return (
-    <div
+    <Badge
-      className={cn(
+      variant="outline"
-        "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-[0_6px_16px_rgba(15,23,42,0.06)]",
+      className={cn("h-6 gap-2 px-2.5 text-[11px] font-medium shadow-sm", toneClass)}
-        toneClass
-      )}
     >
       <span
         className={cn(
@@ -38,7 +37,6 @@ export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
         )}
       />
       <span>{statusText[status]}</span>
-    </div>
+    </Badge>
   )
 }
-

web/components/kefu/message-editor.tsx

@@ -7,6 +7,7 @@ import Placeholder from "@tiptap/extension-placeholder"
 import StarterKit from "@tiptap/starter-kit"
 import { ImageIcon, PaperclipIcon, SendHorizonalIcon } from "lucide-react"
 
+import { Button } from "@/components/ui/button"
 import { generateUUID } from "@/lib/utils"
 
 type UploadedImage = {
@@ -99,7 +100,7 @@ export function KefuMessageEditor({
     editorProps: {
       attributes: {
         class:
-          "min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-[13px] leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-xl [&_img]:object-contain",
+          "min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain",
       },
       handleKeyDown: (_view, event) => {
         if (event.key === "Enter" && !event.shiftKey) {
@@ -232,8 +233,8 @@ export function KefuMessageEditor({
   }
 
   return (
-    <div className="px-3 pb-3 pt-2">
+    <div className="border-t border-slate-200/70 bg-white px-3 pb-3 pt-2">
-      <div className="rounded-xl border border-white/60 bg-white/78 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)] backdrop-blur">
+      <div className="rounded-xl border border-slate-200 bg-white p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
         <input
           ref={imageInputRef}
           type="file"
@@ -250,10 +251,12 @@ export function KefuMessageEditor({
         <div className="min-h-10">
           <EditorContent editor={editor} />
         </div>
-        <div className="mt-1.5 flex items-center justify-between">
+        <div className="mt-2 flex items-center justify-between">
           <div className="flex items-center gap-1.5">
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="icon"
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => {
                 shouldRestoreFocusRef.current = editor?.isFocused ?? true
@@ -261,12 +264,15 @@ export function KefuMessageEditor({
               }}
               disabled={disabled || isUploading}
               aria-label={isUploading ? "图片上传中" : "发送图片"}
-              className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
+              title={isUploading ? "图片上传中" : "发送图片"}
+              className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
             >
-              <ImageIcon className="size-4" />
+              <ImageIcon />
-            </button>
+            </Button>
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="icon"
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => {
                 shouldRestoreFocusRef.current = editor?.isFocused ?? true
@@ -274,22 +280,25 @@ export function KefuMessageEditor({
               }}
               disabled={disabled || isUploading}
               aria-label={isUploading ? "附件上传中" : "发送附件"}
-              className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
+              title={isUploading ? "附件上传中" : "发送附件"}
+              className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
             >
-              <PaperclipIcon className="size-4" />
+              <PaperclipIcon />
-            </button>
+            </Button>
           </div>
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-2">
             <p className="text-[10px] text-slate-400">Enter 发送</p>
-            <button
+            <Button
               type="button"
+              size="icon"
               onClick={() => void handleSend()}
               disabled={disabled || isUploading}
               aria-label="发送"
-              className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[linear-gradient(135deg,var(--primary),color-mix(in_srgb,var(--primary)_75%,white_25%))] text-white shadow-[0_10px_20px_color-mix(in_srgb,var(--primary)_28%,transparent)] transition duration-200 hover:-translate-y-0.5 hover:brightness-105 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
+              title="发送"
+              className="bg-[var(--primary)] text-white shadow-[0_10px_20px_color-mix(in_srgb,var(--primary)_24%,transparent)] hover:bg-[var(--primary)] hover:brightness-105"
             >
-              <SendHorizonalIcon className="size-4" />
+              <SendHorizonalIcon />
-            </button>
+            </Button>
           </div>
         </div>
       </div>

web/components/kefu/message-list.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import Image from "next/image"
 import {
   forwardRef,
   memo,
@@ -13,6 +12,9 @@ import {
 
 import { ImMessageHTML } from "@/components/im-message-html"
 import { useImageLightbox } from "@/components/image-lightbox"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
 import type { ImMessage } from "@/lib/api/im"
 import { renderIMMessageHTML } from "@/lib/im-message"
 import { cn, formatDateTime } from "@/lib/utils"
@@ -211,14 +213,16 @@ export const KefuMessageList = forwardRef<KefuMessageListHandle, KefuMessageList
         <div ref={contentRef} className="flex flex-col gap-4">
           {hasMoreOlder && onLoadOlder ? (
             <div className="flex justify-center py-1">
-              <button
+              <Button
                 type="button"
+                variant="outline"
+                size="sm"
                 disabled={loadingOlder}
                 onClick={() => void handleLoadOlder()}
-                className="rounded-full border border-white/70 bg-white/75 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur transition hover:-translate-y-0.5 hover:border-sky-200 hover:text-sky-700 disabled:translate-y-0 disabled:opacity-60"
+                className="h-7 rounded-full border-slate-200 bg-white/90 text-xs text-slate-600 shadow-sm hover:bg-white hover:text-sky-700"
               >
                 {loadingOlder ? "加载中…" : "加载更早的消息"}
-              </button>
+              </Button>
             </div>
           ) : null}
 
@@ -257,35 +261,38 @@ const MessageItem = memo(
     const avatarSrc =
       !isCustomer && message.senderAvatar?.trim() ? message.senderAvatar.trim() : undefined
     const htmlContent = renderIMMessageHTML(message)
+    const fallbackName = senderName.slice(0, 1).toUpperCase()
 
     return (
-      <div className="cs-agent-fade-up">
+      <div>
         {showTimeline ? (
           <div className="mb-3 flex items-center justify-center">
-            <div className="rounded-full border border-white/70 bg-white/80 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur">
+            <Badge
+              variant="outline"
+              className="border-slate-200 bg-white/85 text-[11px] font-medium text-slate-500 shadow-sm"
+            >
               {getTimelineLabel(message.sentAt)}
-            </div>
+            </Badge>
           </div>
         ) : null}
 
-        <div className={cn("flex gap-2", isCustomer ? "justify-end" : "justify-start")}>
+        <div className={cn("flex gap-2.5", isCustomer ? "justify-end" : "justify-start")}>
-          {!isCustomer && avatarSrc ? (
+          {!isCustomer ? (
-            <Image
+            <Avatar className="mt-5">
-              src={avatarSrc}
+              {avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
-              alt=""
+              <AvatarFallback className="bg-slate-200 text-slate-600">
-              width={32}
+                {fallbackName || "客"}
-              height={32}
+              </AvatarFallback>
-              className="size-8 shrink-0 rounded-full object-cover ring-1 ring-white/80"
+            </Avatar>
-            />
           ) : null}
 
           <div
             className={cn(
-              "flex max-w-[86%] flex-col gap-1",
+              "flex max-w-[86%] flex-col gap-1.5",
               isCustomer ? "items-end" : "items-start"
             )}
           >
-            <div className="flex items-center gap-2 px-1 text-[11px] text-slate-400">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-slate-400">
               <span className="font-medium">{senderName}</span>
               <span>{formatDateTime(message.sentAt)}</span>
               {isCustomer ? (
@@ -294,10 +301,10 @@ const MessageItem = memo(
             </div>
             <div
               className={cn(
-                "rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_14px_28px_rgba(15,23,42,0.08)]",
+                "rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]",
                 isCustomer
-                  ? "bg-[#A9EA7A] text-[#161616]"
+                  ? "bg-[#a9ea7a] text-[#161616]"
-                  : "border border-white/80 bg-white/94 text-slate-900"
+                  : "border border-slate-200/80 bg-white text-slate-900"
               )}
             >
               <ImMessageHTML

web/styles/main.scss

@@ -4,31 +4,6 @@
 $thumb: #cbd5e1;
 $thumb-hover: #94a3b8;
 
-textarea.cs-agent-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: $thumb transparent;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: 999px;
-    background: $thumb;
-    background-clip: padding-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: $thumb-hover;
-    background-clip: padding-box;
-  }
-}
-
 .cs-agent-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: $thumb transparent;
@@ -54,73 +29,6 @@ textarea.cs-agent-scrollbar {
   }
 }
 
-.cs-agent-shell {
-  /* 与 widget 保持一致：容器本身不额外加 padding。 */
-}
-
-.cs-agent-panel {
-  border-radius: 28px;
-  box-shadow:
-    0 24px 80px rgba(15, 23, 42, 0.14),
-    0 10px 24px rgba(15, 23, 42, 0.08);
-  backdrop-filter: blur(16px);
-}
-
-.cs-agent-grid-bg,
-.\.cs-agent-grid-bg {
-  background-image:
-    radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 32%),
-    linear-gradient(180deg, rgba(247, 249, 252, 0.92) 0%, rgba(238, 244, 251, 0.94) 100%),
-    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
-  background-size:
-    auto,
-    auto,
-    22px 22px,
-    22px 22px;
-  background-position:
-    center top,
-    center,
-    center,
-    center;
-}
-
-.cs-agent-fade-up {
-  animation: cs-agent-fade-up 220ms ease-out;
-}
-
-.cs-agent-status-dot {
-  animation: cs-agent-pulse 1.8s ease-in-out infinite;
-}
-
-@keyframes cs-agent-fade-up {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 8px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes cs-agent-pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.08);
-  }
-}
-
-/* 图片预览：遮罩在 dialog 内部绘制，避免与原生 ::backdrop 叠色 */
-.cs-agent-image-lightbox::backdrop {
-  background: transparent;
-}
-
 .dark .cs-agent-scrollbar {
   scrollbar-color: hsl(var(--border)) transparent;