style(chat): distinguish empty send button state

src/app/chat/components/chat-input-bar.tsx

@@ -60,6 +60,7 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
         />
         <ChatSendButton
           disabled={disabled}
+          hasContent={hasContent}
           onClick={handleSend}
         />
       </div>

src/app/chat/components/chat-send-button.module.css

@@ -21,6 +21,12 @@
   cursor: not-allowed;
 }
 
+.buttonEmpty {
+  background: #f8a8ce;
+  color: rgba(255, 255, 255, 0.88);
+  box-shadow: none;
+}
+
 .button:focus-visible,
 .buttonActive {
   background: linear-gradient(

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

@@ -16,17 +16,21 @@ import styles from "./chat-send-button.module.css";
 
 export interface ChatSendButtonProps {
   disabled: boolean;
+  hasContent: boolean;
   onClick: () => void;
 }
 
 export function ChatSendButton({
   disabled,
+  hasContent,
   onClick,
 }: ChatSendButtonProps) {
   return (
     <button
       type="button"
-      className={`${styles.button} ${disabled ? "" : styles.buttonActive}`}
+      className={`${styles.button} ${
+        hasContent && !disabled ? styles.buttonActive : styles.buttonEmpty
+      }`}
       disabled={disabled}
       onClick={onClick}
       aria-label="Send message"