refactor(chat): migrate styles to tailwind and update components

src/app/chat/components/chat-send-button.tsx

@@ -12,8 +12,6 @@
  */
 import { ArrowUp } from "lucide-react";
 
-import styles from "./chat-send-button.module.css";
-
 export interface ChatSendButtonProps {
   disabled: boolean;
   hasContent: boolean;
@@ -27,12 +25,18 @@ export function ChatSendButton({
   onClick,
   onPointerDownSend,
 }: ChatSendButtonProps) {
+  const isActive = hasContent && !disabled;
   return (
     <button
       type="button"
-      className={`${styles.button} ${
-        hasContent && !disabled ? styles.buttonActive : styles.buttonEmpty
-      }`}
+      className={[
+        "flex aspect-square size-[var(--chat-send-button-size,40px)] shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[var(--color-button-gradient-end,#fc69df)] text-white transition-[background,transform] duration-200 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
+        isActive
+          ? "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]"
+          : "bg-[#f8a8ce] text-[rgba(255,255,255,0.88)] shadow-none",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       disabled={disabled}
       onPointerDown={(event) => {
         if (event.pointerType === "mouse") return;
@@ -44,7 +48,11 @@ export function ChatSendButton({
       onClick={onClick}
       aria-label="Send message"
     >
-      <ArrowUp className={styles.icon} size={24} aria-hidden="true" />
+      <ArrowUp
+        className="size-[var(--icon-size-xl,24px)] text-[length:var(--icon-size-xl,24px)] leading-none"
+        size={24}
+        aria-hidden="true"
+      />
     </button>
   );
 }