refactor(components): migrate shared styles to tailwind

src/app/_components/user-message-avatar.tsx

@@ -2,8 +2,6 @@
 
 import Image from "next/image";
 
-import styles from "./user-message-avatar.module.css";
-
 export interface UserMessageAvatarProps {
   avatarUrl?: string | null;
   className?: string;
@@ -15,7 +13,12 @@ export function UserMessageAvatar({
   className,
   size = 43,
 }: UserMessageAvatarProps) {
-  const avatarClassName = [styles.avatar, className].filter(Boolean).join(" ");
+  const avatarClassName = [
+    "flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-[var(--color-avatar-border,#fbf3f5)] bg-[var(--color-avatar-border,#fbf3f5)] shadow-[var(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))]",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
   const avatarStyle = { width: size, height: size };
   const imageSize = typeof size === "number" ? size : 64;
 
@@ -26,7 +29,13 @@ export function UserMessageAvatar({
         style={avatarStyle}
         aria-label="User avatar"
       >
-        <Image src={avatarUrl} alt="" width={imageSize} height={imageSize} />
+        <Image
+          src={avatarUrl}
+          alt=""
+          width={imageSize}
+          height={imageSize}
+          className="size-full object-cover"
+        />
       </div>
     );
   }
@@ -42,6 +51,7 @@ export function UserMessageAvatar({
         alt="Guest"
         width={imageSize}
         height={imageSize}
+        className="size-full object-cover"
       />
     </div>
   );