fix(chat): theme-aware message composer on mobile

- Add bg-base-100 to composer root so input area follows light/dark theme
- Add text-base-content to composer input and editor content for placeholder
  and typed text

Made-with: Cursor

Author: HMarzban

packages/webapp/src/components/chatroom/components/MessageComposer/components/Input/Input.tsx

@@ -14,13 +14,15 @@ export const Input = ({ className }: { className?: string }) => {
   }, [messageDraftMemory, editor])
 
   return (
-    <div className={twMerge('flex-1 px-1 py-2 text-base sm:px-2', className)} tabIndex={1}>
+    <div
+      className={twMerge('text-base-content flex-1 px-1 py-2 text-base sm:px-2', className)}
+      tabIndex={1}>
       <EditorContent
         id="chatroom-editor"
         tabIndex={2}
         ref={editorRef}
         className={twMerge(
-          'max-h-52 w-full overflow-auto wrap-anywhere break-all whitespace-pre-line transition-all duration-200 ease-in-out',
+          'text-base-content max-h-52 w-full overflow-auto wrap-anywhere break-all whitespace-pre-line transition-all duration-200 ease-in-out',
           isEmojiOnly ? 'text-xl sm:text-2xl' : 'text-base'
         )}
         editor={editor}

packages/webapp/src/components/chatroom/components/MessageComposer/components/layouts/MobileLayout.tsx

@@ -84,7 +84,7 @@ const MobileToolbar = () => {
 export const MobileLayout = () => {
   return (
     <div className="chat_editor_container flex w-full flex-col">
-      <MsgComposer className="border-base-300 rounded-t-md border border-b-0 shadow-sm">
+      <MsgComposer className="bg-base-100 border-base-300 rounded-t-md border border-b-0 shadow-sm">
         <MsgComposer.MobileWrapper>
           <MsgComposer.Context>
             <MsgComposer.ReplyContext />