Refactor chat input layout

src/components/chat/ChatInput.tsx

@@ -57,10 +57,10 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
 
   return (
     <div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-4xl mx-auto space-y-3">
         {/* Attached Files Preview */}
         {attachedFiles.length > 0 && (
-          <div className="mb-3 flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2">
             {attachedFiles.map((file, index) => (
               <div
                 key={index}
@@ -84,16 +84,20 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
           </div>
         )}
 
-        <div className="relative glass-effect rounded-xl p-1">
+        {/* Message Input and Buttons */}
-          <Textarea
+        <div className="flex gap-2 items-end">
-            value={message}
+          <div className="flex-1 glass-effect rounded-xl p-3">
-            onChange={(e) => setMessage(e.target.value)}
+            <Textarea
-            onKeyDown={handleKeyDown}
+              value={message}
-            placeholder="Digite sua mensagem..."
+              onChange={(e) => setMessage(e.target.value)}
-            className="min-h-[60px] max-h-[400px] resize-y border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 pr-24"
+              onKeyDown={handleKeyDown}
-          />
+              placeholder="Digite sua mensagem..."
+              className="min-h-[60px] max-h-[400px] resize-y border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0"
+            />
+          </div>
 
-          <div className="absolute right-2 bottom-2 flex items-center gap-1">
+          {/* Action Buttons */}
+          <div className="flex gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -103,25 +107,26 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
               accept=".pdf,.txt,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.gif,.webp"
             />
             <Button
-              variant="ghost"
+              variant="outline"
               size="icon"
-              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              className="h-11 w-11 glass-effect"
               onClick={() => fileInputRef.current?.click()}
               title="Anexar arquivo"
             >
-              <Paperclip className="w-4 h-4" />
+              <Paperclip className="w-5 h-5" />
             </Button>
             <Button
               onClick={handleSend}
               size="icon"
-              className="h-8 w-8 cyber-glow"
+              className="h-11 w-11 cyber-glow"
               disabled={!message.trim() && attachedFiles.length === 0}
             >
-              <Send className="w-4 h-4" />
+              <Send className="w-5 h-5" />
             </Button>
           </div>
         </div>
-        <p className="text-xs text-muted-foreground text-center mt-2">
+
+        <p className="text-xs text-muted-foreground text-center">
           Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
         </p>
       </div>