fix: complete Tailwind v4 migration

src/features/agent/components/agent-collapsed-rail.tsx

@@ -28,7 +28,7 @@ export function AgentCollapsedRail({ personaState, onExpand }: AgentCollapsedRai
         className="agent-rail-item surface-control group flex h-14 w-full items-center justify-center gap-4 rounded-xl border px-3 transition-[background-color,transform] hover:bg-white active:scale-95"
       >
         <AgentPersona className="h-12 w-12" state={personaState} />
-        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg !border-0 transition-transform group-hover:translate-x-0.5">
+        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg border-0! transition-transform group-hover:translate-x-0.5">
           <ChevronRight size={17} strokeWidth={2.25} aria-hidden="true" />
         </span>
       </button>

src/features/agent/components/agent-command-panel.tsx

@@ -413,7 +413,7 @@ export function AgentCommandPanel({
               </div>
             ) : null}
             <PromptInput
-              className="agent-panel-control overflow-hidden rounded-2xl shadow-sm transition-[border-color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring [&>[data-slot=input-group]]:rounded-[inherit] [&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:shadow-none [&>[data-slot=input-group]]:!ring-0"
+              className="agent-panel-control overflow-hidden rounded-2xl shadow-xs transition-[border-color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring [&>[data-slot=input-group]]:rounded-[inherit] [&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:shadow-none [&>[data-slot=input-group]]:ring-0!"
               onSubmit={(message) => {
                 const nextPrompt = message.text.trim();
                 if (nextPrompt) {
@@ -503,7 +503,7 @@ function VoiceInputButton({
         "border-transparent bg-transparent text-blue-600 shadow-none",
         "transition-[color,background-color,border-color,box-shadow,transform] duration-200",
         "hover:bg-slate-50 hover:text-blue-700",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/25 focus-visible:ring-offset-1",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25 focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed disabled:opacity-45",
         isListening && "bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700"
       )}
@@ -984,7 +984,7 @@ function BackendMessageList({
                 className={cn(
                   message.role === "user" && "bg-blue-600 px-3 py-2 text-white",
                   message.role === "assistant" &&
-                    "agent-panel-message w-full rounded-2xl p-3 text-sm leading-6 text-slate-700 shadow-sm"
+                    "agent-panel-message w-full rounded-2xl p-3 text-sm leading-6 text-slate-700 shadow-xs"
                 )}
               >
                 <div className="space-y-3">
@@ -1170,7 +1170,7 @@ function AgentSpeechMessage({
                   <motion.button
                     key="speech-selection-action"
                     type="button"
-                    className="glass-transient pointer-events-auto inline-flex h-10 origin-bottom items-center gap-2 rounded-xl border px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/25"
+                    className="glass-transient pointer-events-auto inline-flex h-10 origin-bottom items-center gap-2 rounded-xl border px-2.5 pr-3 text-xs font-semibold text-slate-800 transition-colors hover:text-blue-700 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600/25"
                     initial={{ opacity: 0, y: 8, scale: 0.95 }}
                     animate={{
                       opacity: 1,

src/features/agent/components/agent-history-panel.tsx

@@ -71,7 +71,7 @@ export function AgentHistoryPanel({
 
   return (
     <div className="px-3 pb-3">
-      <div className="agent-panel-control rounded-2xl p-2.5 shadow-sm">
+      <div className="agent-panel-control rounded-2xl p-2.5 shadow-xs">
         <div className="mb-2 flex items-center justify-between gap-2">
           <div className="min-w-0">
             <p className="text-sm font-semibold text-slate-950">历史记录</p>

src/features/agent/components/agent-message-details.tsx

@@ -685,7 +685,7 @@ function QuestionInput({
       ) : null}
       {showCustomInput ? (
         <textarea
-          className="min-h-16 w-full resize-none rounded-md border border-slate-200/80 bg-transparent px-2 py-1.5 text-xs leading-5 text-slate-700 outline-none transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
+          className="min-h-16 w-full resize-none rounded-md border border-slate-200/80 bg-transparent px-2 py-1.5 text-xs leading-5 text-slate-700 outline-hidden transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
           placeholder="输入回答"
           value={value.custom}
           disabled={disabled}

src/features/agent/components/agent-ui-envelope-renderer.tsx

@@ -48,7 +48,7 @@ function AgentUiResultCard({ result }: { result: AgentUiResult }) {
   const { envelope } = result;
 
   return (
-    <div className="agent-panel-message w-full rounded-2xl p-3 text-slate-700 shadow-sm">
+    <div className="agent-panel-message w-full rounded-2xl p-3 text-slate-700 shadow-xs">
       <div className="mb-3 flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
           <span className="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-blue-100 text-blue-700">