From b1b37f5cf1d84f6ccd1a704787bf61f12dceaebe Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 18:41:54 +0000
Subject: [PATCH] Refactor: Make UI responsive

---
 src/components/ChatHeader.tsx          |  18 ++--
 src/components/Layout.tsx              |  28 +++++-
 src/components/agent/AgentView.tsx     | 124 ++++++++++++++-----------
 src/components/agent/OpinionDialog.tsx |   2 +-
 src/components/audio/AudioView.tsx     |  20 ++--
 src/components/bots/BotView.tsx        |  45 ++++-----
 src/components/chat/ChatInput.tsx      |  36 +++----
 src/components/chat/ChatMessage.tsx    |  20 ++--
 src/components/chat/ChatView.tsx       |  20 ++--
 src/components/images/ImageView.tsx    |  21 +++--
 10 files changed, 190 insertions(+), 144 deletions(-)

diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx
index 4289d93..9c6f50a 100644
--- a/src/components/ChatHeader.tsx
+++ b/src/components/ChatHeader.tsx
@@ -50,8 +50,8 @@ export const ChatHeader = ({
   };
 
   return (
-    <header className="border-b border-border bg-card/50 backdrop-blur-sm px-6 py-4 flex items-center justify-between">
-      <div className="flex items-center gap-4">
+    <header className="border-b border-border bg-card/50 backdrop-blur-sm px-3 md:px-6 py-3 md:py-4 flex items-center justify-between">
+      <div className="flex items-center gap-2 md:gap-4">
         <div className="flex items-center gap-2">
           <div className="w-2 h-2 rounded-full bg-primary animate-pulse-glow" />
           <span className="text-sm text-muted-foreground">Online</span>
@@ -60,9 +60,9 @@ export const ChatHeader = ({
         {showModelSelector && onModelChange && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="gap-2 glass-effect">
-                <span className="font-medium">{selectedModel}</span>
-                <ChevronDown className="w-4 h-4" />
+              <Button variant="outline" className="gap-1 md:gap-2 glass-effect text-xs md:text-sm">
+                <span className="font-medium truncate max-w-[80px] md:max-w-none">{selectedModel}</span>
+                <ChevronDown className="w-3 h-3 md:w-4 md:h-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="glass-effect bg-popover border-border z-50">
@@ -84,11 +84,11 @@ export const ChatHeader = ({
             <DialogTrigger asChild>
               <Button
                 variant="outline"
-                className="gap-2 glass-effect"
+                className="gap-1 md:gap-2 glass-effect text-xs md:text-sm"
                 onClick={() => setTempSystemPrompt(systemPrompt)}
               >
-                <UserCog className="w-4 h-4" />
-                <span className="font-medium">Personalidade</span>
+                <UserCog className="w-3 h-3 md:w-4 md:h-4" />
+                <span className="hidden md:inline font-medium">Personalidade</span>
               </Button>
             </DialogTrigger>
             <DialogContent>
@@ -120,7 +120,7 @@ export const ChatHeader = ({
         )}
       </div>
 
-      <div className="text-sm text-muted-foreground">
+      <div className="hidden md:block text-sm text-muted-foreground">
         {showModelSelector ? "Modelo de linguagem avançado" : "Sistema HGTX Codex"}
       </div>
     </header>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index a0b24bf..4c9f62f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -27,7 +27,7 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
     <div className="flex h-screen w-full bg-background overflow-hidden">
       {/* Sidebar */}
       {!isSidebarCollapsed ? (
-        <aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col">
+        <aside className="hidden md:flex md:w-72 bg-sidebar border-r border-sidebar-border flex-col">
           {/* Logo */}
           <div className="p-6 border-b border-sidebar-border flex items-center justify-between">
             <div>
@@ -81,7 +81,7 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
           </div>
         </aside>
       ) : (
-        <aside className="w-16 bg-sidebar border-r border-sidebar-border flex flex-col">
+        <aside className="hidden md:flex md:w-16 bg-sidebar border-r border-sidebar-border flex-col">
           {/* Collapsed Header with Expand Button */}
           <div className="p-3 border-b border-sidebar-border space-y-2">
             <Button
@@ -135,7 +135,29 @@ export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
       )}
 
       {/* Main Content */}
-      <main className="flex-1 flex flex-col overflow-hidden">{children}</main>
+      <main className="flex-1 flex flex-col overflow-hidden w-full">{children}</main>
+      
+      {/* Mobile Navigation */}
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-sidebar border-t border-sidebar-border flex items-center justify-around py-2 z-50">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-all ${
+                isActive
+                  ? "text-sidebar-accent-foreground"
+                  : "text-sidebar-foreground/70"
+              }`}
+            >
+              <Icon className={`w-5 h-5 ${isActive ? "text-primary" : ""}`} />
+              <span className="text-xs font-medium">{tab.label}</span>
+            </button>
+          );
+        })}
+      </nav>
     </div>
   );
 };
diff --git a/src/components/agent/AgentView.tsx b/src/components/agent/AgentView.tsx
index 2855388..c947db7 100644
--- a/src/components/agent/AgentView.tsx
+++ b/src/components/agent/AgentView.tsx
@@ -113,31 +113,33 @@ export const AgentView = () => {
   }
 
   return (
-    <div className="flex flex-col h-full bg-background">
-      <div className="p-6 border-b border-border">
-        <div className="flex items-center justify-between mb-4">
-          <h1 className="text-3xl font-bold text-foreground">Agente de Parecer Jurídico</h1>
-          <div className="flex gap-2">
-            <Button onClick={() => setShowSearch(true)} variant="outline" className="gap-2">
-              <Search className="w-4 h-4" />
-              Pesquisar Base de Pareceres
+    <div className="flex flex-col h-full bg-background pb-16 md:pb-0">
+      <div className="p-3 md:p-6 border-b border-border">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 mb-4">
+          <h1 className="text-xl md:text-3xl font-bold text-foreground">Agente de Parecer Jurídico</h1>
+          <div className="flex gap-2 w-full md:w-auto">
+            <Button onClick={() => setShowSearch(true)} variant="outline" className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
+              <Search className="w-3 h-3 md:w-4 md:h-4" />
+              <span className="hidden sm:inline">Pesquisar Base</span>
+              <span className="sm:hidden">Base</span>
             </Button>
-            <Button onClick={handleNewOpinion} className="gap-2">
-              <Plus className="w-4 h-4" />
-              Novo Parecer
+            <Button onClick={handleNewOpinion} className="gap-1 md:gap-2 flex-1 md:flex-none text-xs md:text-sm">
+              <Plus className="w-3 h-3 md:w-4 md:h-4" />
+              <span className="hidden sm:inline">Novo Parecer</span>
+              <span className="sm:hidden">Novo</span>
             </Button>
           </div>
         </div>
         
-        <div className="flex items-center gap-4">
+        <div className="flex flex-col md:flex-row items-stretch md:items-center gap-2 md:gap-4">
           <Input
             placeholder="Buscar pareceres..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="max-w-sm"
+            className="w-full md:max-w-sm text-sm"
           />
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">Itens por página:</span>
+          <div className="flex items-center gap-2 justify-between md:justify-start">
+            <span className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">Itens:</span>
             <Select
               value={itemsPerPage.toString()}
               onValueChange={(value) => {
@@ -145,7 +147,7 @@ export const AgentView = () => {
                 setCurrentPage(1);
               }}
             >
-              <SelectTrigger className="w-20">
+              <SelectTrigger className="w-16 md:w-20">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -159,42 +161,42 @@ export const AgentView = () => {
         </div>
       </div>
 
-      <div className="flex-1 overflow-auto p-6">
-        <div className="border rounded-lg">
+      <div className="flex-1 overflow-auto p-3 md:p-6">
+        <div className="border rounded-lg overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>
+                <TableHead className="min-w-[200px]">
                   <Button
                     variant="ghost"
                     onClick={() => handleSort("title")}
-                    className="flex items-center gap-1 font-semibold"
+                    className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
                   >
                     Título
-                    <ArrowUpDown className="w-4 h-4" />
+                    <ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
                   </Button>
                 </TableHead>
-                <TableHead>
+                <TableHead className="hidden md:table-cell">
                   <Button
                     variant="ghost"
                     onClick={() => handleSort("category")}
-                    className="flex items-center gap-1 font-semibold"
+                    className="flex items-center gap-1 font-semibold text-sm"
                   >
                     Categoria
                     <ArrowUpDown className="w-4 h-4" />
                   </Button>
                 </TableHead>
-                <TableHead>
+                <TableHead className="hidden sm:table-cell">
                   <Button
                     variant="ghost"
                     onClick={() => handleSort("createdAt")}
-                    className="flex items-center gap-1 font-semibold"
+                    className="flex items-center gap-1 font-semibold text-xs md:text-sm p-1 md:p-2"
                   >
-                    Data de Criação
-                    <ArrowUpDown className="w-4 h-4" />
+                    Data
+                    <ArrowUpDown className="w-3 h-3 md:w-4 md:h-4" />
                   </Button>
                 </TableHead>
-                <TableHead className="text-center">Ações</TableHead>
+                <TableHead className="text-center text-xs md:text-sm">Ações</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -209,29 +211,30 @@ export const AgentView = () => {
               ) : (
                 paginatedOpinions.map((opinion) => (
                   <TableRow key={opinion.id}>
-                    <TableCell className="font-medium">{opinion.title}</TableCell>
-                    <TableCell>{opinion.category || "-"}</TableCell>
-                    <TableCell>
+                    <TableCell className="font-medium text-xs md:text-sm">{opinion.title}</TableCell>
+                    <TableCell className="hidden md:table-cell text-sm">{opinion.category || "-"}</TableCell>
+                    <TableCell className="hidden sm:table-cell text-xs md:text-sm">
                       {new Date(opinion.createdAt).toLocaleDateString("pt-BR")}
                     </TableCell>
                     <TableCell>
-                      <div className="flex items-center justify-center gap-2">
+                      <div className="flex items-center justify-center gap-1">
                         <Button
                           variant="ghost"
                           size="icon"
                           onClick={() => handleViewOpinion(opinion)}
                           title="Visualizar"
+                          className="h-7 w-7 md:h-9 md:w-9"
                         >
-                          <Eye className="w-4 h-4" />
+                          <Eye className="w-3 h-3 md:w-4 md:h-4" />
                         </Button>
                         <Button
                           variant="ghost"
                           size="icon"
                           onClick={() => handleDeleteOpinion(opinion.id)}
-                          className="text-destructive hover:text-destructive"
+                          className="text-destructive hover:text-destructive h-7 w-7 md:h-9 md:w-9"
                           title="Excluir"
                         >
-                          <Trash2 className="w-4 h-4" />
+                          <Trash2 className="w-3 h-3 md:w-4 md:h-4" />
                         </Button>
                       </div>
                     </TableCell>
@@ -243,40 +246,55 @@ export const AgentView = () => {
         </div>
 
         {totalPages > 1 && (
-          <div className="flex items-center justify-between mt-4">
-            <p className="text-sm text-muted-foreground">
-              Mostrando {startIndex + 1} a {Math.min(startIndex + itemsPerPage, sortedOpinions.length)} de{" "}
-              {sortedOpinions.length} pareceres
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 mt-4">
+            <p className="text-xs md:text-sm text-muted-foreground text-center sm:text-left">
+              {startIndex + 1}-{Math.min(startIndex + itemsPerPage, sortedOpinions.length)} de {sortedOpinions.length}
             </p>
-            <div className="flex gap-2">
+            <div className="flex gap-1 md:gap-2 justify-center">
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                 disabled={currentPage === 1}
+                className="text-xs md:text-sm px-2 md:px-4"
               >
-                Anterior
+                <span className="hidden sm:inline">Anterior</span>
+                <span className="sm:hidden">Ant</span>
               </Button>
               <div className="flex items-center gap-1">
-                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                  <Button
-                    key={page}
-                    variant={currentPage === page ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setCurrentPage(page)}
-                    className="w-10"
-                  >
-                    {page}
-                  </Button>
-                ))}
+                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                  let page;
+                  if (totalPages <= 5) {
+                    page = i + 1;
+                  } else if (currentPage <= 3) {
+                    page = i + 1;
+                  } else if (currentPage >= totalPages - 2) {
+                    page = totalPages - 4 + i;
+                  } else {
+                    page = currentPage - 2 + i;
+                  }
+                  return (
+                    <Button
+                      key={page}
+                      variant={currentPage === page ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setCurrentPage(page)}
+                      className="w-8 h-8 md:w-10 md:h-9 p-0 text-xs md:text-sm"
+                    >
+                      {page}
+                    </Button>
+                  );
+                })}
               </div>
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 disabled={currentPage === totalPages}
+                className="text-xs md:text-sm px-2 md:px-4"
               >
-                Próxima
+                <span className="hidden sm:inline">Próxima</span>
+                <span className="sm:hidden">Prox</span>
               </Button>
             </div>
           </div>
diff --git a/src/components/agent/OpinionDialog.tsx b/src/components/agent/OpinionDialog.tsx
index aa00da2..f97e74d 100644
--- a/src/components/agent/OpinionDialog.tsx
+++ b/src/components/agent/OpinionDialog.tsx
@@ -152,7 +152,7 @@ Profissional responsável: IA Jurídica HGTX Codex`;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh]">
+      <DialogContent className="max-w-[95vw] md:max-w-4xl max-h-[90vh]">
         <DialogHeader>
           <DialogTitle>
             {selectedOpinion ? "Gerar Novo Modelo do Parecer" : "Novo Parecer Jurídico"}
diff --git a/src/components/audio/AudioView.tsx b/src/components/audio/AudioView.tsx
index 229bcce..15315c7 100644
--- a/src/components/audio/AudioView.tsx
+++ b/src/components/audio/AudioView.tsx
@@ -270,22 +270,22 @@ export const AudioView = () => {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full pb-16 md:pb-0">
       <ChatHeader />
 
       <ScrollArea className="flex-1">
-        <div className="max-w-4xl mx-auto p-6">
-          <Tabs defaultValue="transcription" className="space-y-6">
-            <TabsList className="grid w-full grid-cols-4 glass-effect">
-              <TabsTrigger value="transcription">
+        <div className="max-w-4xl mx-auto p-3 md:p-6">
+          <Tabs defaultValue="transcription" className="space-y-4 md:space-y-6">
+            <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 glass-effect text-xs md:text-sm">
+              <TabsTrigger value="transcription" className="text-xs md:text-sm">
                 Transcrição
               </TabsTrigger>
-              <TabsTrigger value="generation">Geração de Voz</TabsTrigger>
-              <TabsTrigger value="transcription-history">
-                Histórico Transcrições
+              <TabsTrigger value="generation" className="text-xs md:text-sm">Geração</TabsTrigger>
+              <TabsTrigger value="transcription-history" className="text-xs md:text-sm">
+                Hist. Trans.
               </TabsTrigger>
-              <TabsTrigger value="audio-history">
-                Histórico Áudios
+              <TabsTrigger value="audio-history" className="text-xs md:text-sm">
+                Hist. Áud.
               </TabsTrigger>
             </TabsList>
 
diff --git a/src/components/bots/BotView.tsx b/src/components/bots/BotView.tsx
index 45e6732..8ae931d 100644
--- a/src/components/bots/BotView.tsx
+++ b/src/components/bots/BotView.tsx
@@ -95,19 +95,19 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
   };
 
   return (
-    <div className="flex-1 flex flex-col h-full overflow-hidden">
-      <div className="border-b border-border p-6">
-        <div className="flex items-center justify-between">
+    <div className="flex-1 flex flex-col h-full overflow-hidden pb-16 md:pb-0">
+      <div className="border-b border-border p-3 md:p-6">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3">
           <div>
-            <h2 className="text-2xl font-bold flex items-center gap-2">
-              <Bot className="w-6 h-6" />
+            <h2 className="text-xl md:text-2xl font-bold flex items-center gap-2">
+              <Bot className="w-5 h-5 md:w-6 md:h-6" />
               Gerenciador de Bots
             </h2>
-            <p className="text-muted-foreground mt-1">Crie e gerencie seus assistentes de IA</p>
+            <p className="text-sm md:text-base text-muted-foreground mt-1">Crie e gerencie seus assistentes de IA</p>
           </div>
           <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
             <DialogTrigger asChild>
-              <Button>
+              <Button className="w-full md:w-auto text-sm">
                 <Bot className="w-4 h-4 mr-2" />
                 Criar Bot
               </Button>
@@ -167,7 +167,7 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
         </div>
       </div>
 
-      <div className="flex-1 overflow-auto p-6">
+      <div className="flex-1 overflow-auto p-3 md:p-6">
         {bots.length === 0 ? (
           <Card className="max-w-2xl mx-auto mt-12">
             <CardHeader>
@@ -190,45 +190,48 @@ export const BotView = ({ onStartChat }: BotViewProps) => {
             </CardContent>
           </Card>
         ) : (
-          <div className="max-w-6xl mx-auto">
+          <div className="max-w-6xl mx-auto overflow-x-auto">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Nome</TableHead>
-                  <TableHead>Modelo</TableHead>
-                  <TableHead className="text-right">Ações</TableHead>
+                  <TableHead className="text-xs md:text-sm">Nome</TableHead>
+                  <TableHead className="hidden md:table-cell text-sm">Modelo</TableHead>
+                  <TableHead className="text-right text-xs md:text-sm">Ações</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {currentBots.map((bot) => (
                   <TableRow key={bot.id}>
-                    <TableCell className="font-medium">{bot.name}</TableCell>
-                    <TableCell>{bot.model}</TableCell>
+                    <TableCell className="font-medium text-xs md:text-sm">{bot.name}</TableCell>
+                    <TableCell className="hidden md:table-cell text-sm">{bot.model}</TableCell>
                     <TableCell className="text-right">
-                      <div className="flex gap-2 justify-end">
+                      <div className="flex gap-1 justify-end flex-wrap">
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => onStartChat(bot)}
+                          className="text-xs md:text-sm"
                         >
-                          <MessageSquare className="w-4 h-4 mr-2" />
-                          Conversar
+                          <MessageSquare className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
+                          <span className="hidden md:inline">Conversar</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => openEditDialog(bot)}
+                          className="text-xs md:text-sm"
                         >
-                          <Edit className="w-4 h-4 mr-2" />
-                          Editar
+                          <Edit className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
+                          <span className="hidden md:inline">Editar</span>
                         </Button>
                         <Button
                           size="sm"
                           variant="outline"
                           onClick={() => openDeleteDialog(bot)}
+                          className="text-xs md:text-sm"
                         >
-                          <Trash2 className="w-4 h-4 mr-2" />
-                          Excluir
+                          <Trash2 className="w-3 h-3 md:w-4 md:h-4 md:mr-2" />
+                          <span className="hidden md:inline">Excluir</span>
                         </Button>
                       </div>
                     </TableCell>
diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index 5de6f0d..c3a208a 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -92,19 +92,19 @@ 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 space-y-3">
+    <div className="border-t border-border bg-card/50 backdrop-blur-sm p-2 md:p-4">
+      <div className="max-w-4xl mx-auto space-y-2 md:space-y-3">
         {/* Attached Files Preview */}
         {attachedFiles.length > 0 && (
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-1 md:gap-2">
             {attachedFiles.map((file, index) => (
               <div
                 key={index}
-                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-muted border border-border text-sm"
+                className="flex items-center gap-1 md:gap-2 px-2 md:px-3 py-1 md:py-1.5 rounded-lg bg-muted border border-border text-xs md:text-sm"
               >
                 <Paperclip className="w-3 h-3 text-primary" />
-                <span className="font-medium">{file.name}</span>
-                <span className="text-xs text-muted-foreground">
+                <span className="font-medium truncate max-w-[100px] md:max-w-none">{file.name}</span>
+                <span className="hidden md:inline text-xs text-muted-foreground">
                   ({(file.size / 1024).toFixed(1)} KB)
                 </span>
                 <Button
@@ -121,12 +121,12 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
         )}
 
         {/* Message Input and Buttons */}
-        <div className="flex gap-2 items-end">
+        <div className="flex gap-1 md:gap-2 items-end">
           <div className="flex-1 glass-effect rounded-xl overflow-hidden">
-            {/* Resize Handle */}
+            {/* Resize Handle - Hidden on mobile */}
             <div
               onMouseDown={handleMouseDown}
-              className={`w-full h-6 flex items-center justify-center cursor-ns-resize hover:bg-primary/10 transition-colors ${
+              className={`hidden md:flex w-full h-6 items-center justify-center cursor-ns-resize hover:bg-primary/10 transition-colors ${
                 isDragging ? 'bg-primary/20' : ''
               }`}
               title="Arraste para cima para aumentar"
@@ -135,21 +135,21 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
             </div>
             
             {/* Textarea */}
-            <div className="px-3 pb-3">
+            <div className="px-2 md:px-3 pb-2 md:pb-3 pt-2 md:pt-0">
               <Textarea
                 ref={textareaRef}
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Digite sua mensagem..."
-                style={{ height: `${textareaHeight}px` }}
-                className="resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0 overflow-y-auto"
+                style={{ height: window.innerWidth < 768 ? '80px' : `${textareaHeight}px` }}
+                className="resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0 overflow-y-auto text-sm md:text-base"
               />
             </div>
           </div>
 
           {/* Action Buttons */}
-          <div className="flex gap-2">
+          <div className="flex gap-1 md:gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -161,24 +161,24 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
             <Button
               variant="outline"
               size="icon"
-              className="h-11 w-11 glass-effect"
+              className="h-9 w-9 md:h-11 md:w-11 glass-effect"
               onClick={() => fileInputRef.current?.click()}
               title="Anexar arquivo"
             >
-              <Paperclip className="w-5 h-5" />
+              <Paperclip className="w-4 h-4 md:w-5 md:h-5" />
             </Button>
             <Button
               onClick={handleSend}
               size="icon"
-              className="h-11 w-11 cyber-glow"
+              className="h-9 w-9 md:h-11 md:w-11 cyber-glow"
               disabled={!message.trim() && attachedFiles.length === 0}
             >
-              <Send className="w-5 h-5" />
+              <Send className="w-4 h-4 md:w-5 md:h-5" />
             </Button>
           </div>
         </div>
 
-        <p className="text-xs text-muted-foreground text-center">
+        <p className="hidden md:block text-xs text-muted-foreground text-center">
           Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
         </p>
       </div>
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
index 9f58872..ce829c4 100644
--- a/src/components/chat/ChatMessage.tsx
+++ b/src/components/chat/ChatMessage.tsx
@@ -30,22 +30,22 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
 
   return (
     <div
-      className={`flex gap-4 py-6 px-6 group hover:bg-muted/10 transition-colors ${
+      className={`flex gap-2 md:gap-4 py-4 md:py-6 px-3 md:px-6 group hover:bg-muted/10 transition-colors ${
         isAssistant ? "justify-start" : "justify-end"
       }`}
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => setShowActions(false)}
     >
       {isAssistant && (
-        <div className="flex flex-col items-center gap-2">
-          <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-secondary">
-            <Bot className="w-5 h-5 text-primary-foreground" />
+        <div className="flex flex-col items-center gap-1 md:gap-2">
+          <div className="w-6 h-6 md:w-8 md:h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-secondary">
+            <Bot className="w-4 h-4 md:w-5 md:h-5 text-primary-foreground" />
           </div>
           
           {model && (
             <Badge 
               variant="secondary" 
-              className="text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
+              className="hidden md:block text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
             >
               {model}
             </Badge>
@@ -53,7 +53,7 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
         </div>
       )}
 
-      <div className={`flex-1 max-w-3xl space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
+      <div className={`flex-1 max-w-3xl space-y-1 md:space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
         {/* Attachments */}
         {attachments && attachments.length > 0 && (
           <div className="flex flex-wrap gap-2 mb-2">
@@ -73,13 +73,13 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
         )}
 
         <div
-          className={`inline-block px-4 py-3 rounded-xl ${
+          className={`inline-block px-3 md:px-4 py-2 md:py-3 rounded-xl ${
             isAssistant
               ? "bg-card border border-border"
               : "bg-gradient-to-br from-primary to-secondary text-primary-foreground"
           }`}
         >
-          <p className={`leading-relaxed ${isAssistant ? "text-foreground" : "text-white"}`}>
+          <p className={`text-sm md:text-base leading-relaxed ${isAssistant ? "text-foreground" : "text-white"}`}>
             {content}
           </p>
         </div>
@@ -100,8 +100,8 @@ export const ChatMessage = ({ role, content, model, attachments }: ChatMessagePr
       </div>
 
       {!isAssistant && (
-        <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/20 border border-accent">
-          <User className="w-5 h-5 text-accent" />
+        <div className="w-6 h-6 md:w-8 md:h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/20 border border-accent">
+          <User className="w-4 h-4 md:w-5 md:h-5 text-accent" />
         </div>
       )}
     </div>
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
index 00ae580..b413720 100644
--- a/src/components/chat/ChatView.tsx
+++ b/src/components/chat/ChatView.tsx
@@ -76,16 +76,18 @@ export const ChatView = () => {
   };
 
   return (
-    <div className="flex h-full">
-      {/* Chat Sidebar */}
-      <ChatSidebar 
-        isCollapsed={isChatSidebarCollapsed}
-        onToggleCollapse={() => setIsChatSidebarCollapsed(!isChatSidebarCollapsed)}
-        onNewChat={handleNewChat}
-      />
+    <div className="flex h-full w-full pb-16 md:pb-0">
+      {/* Chat Sidebar - Hidden on mobile */}
+      <div className="hidden md:block">
+        <ChatSidebar 
+          isCollapsed={isChatSidebarCollapsed}
+          onToggleCollapse={() => setIsChatSidebarCollapsed(!isChatSidebarCollapsed)}
+          onNewChat={handleNewChat}
+        />
+      </div>
 
       {/* Main Chat Area */}
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col w-full">
         <ChatHeader 
           showModelSelector={true}
           selectedModel={selectedModel}
@@ -95,7 +97,7 @@ export const ChatView = () => {
         />
 
         <ScrollArea className="flex-1">
-          <div className="max-w-4xl mx-auto">
+          <div className="max-w-4xl mx-auto px-2 md:px-4">
             {messages.map((message) => (
               <ChatMessage
                 key={message.id}
diff --git a/src/components/images/ImageView.tsx b/src/components/images/ImageView.tsx
index 25113de..5313250 100644
--- a/src/components/images/ImageView.tsx
+++ b/src/components/images/ImageView.tsx
@@ -70,25 +70,26 @@ export const ImageView = () => {
   );
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full pb-16 md:pb-0">
       <ChatHeader />
 
       <div className="flex-1 flex overflow-hidden">
         {/* Main Content */}
         <ScrollArea className="flex-1">
-          <div className="max-w-5xl mx-auto p-6">
-            <Tabs defaultValue="generate" className="space-y-6">
+          <div className="max-w-5xl mx-auto p-3 md:p-6">
+            <Tabs defaultValue="generate" className="space-y-4 md:space-y-6">
               <TabsList className="grid w-full grid-cols-2 glass-effect">
-                <TabsTrigger value="generate">Gerar Imagem</TabsTrigger>
-                <TabsTrigger value="history">
-                  <Clock className="w-4 h-4 mr-2" />
-                  Histórico
+                <TabsTrigger value="generate" className="text-xs md:text-sm">Gerar Imagem</TabsTrigger>
+                <TabsTrigger value="history" className="text-xs md:text-sm">
+                  <Clock className="w-3 h-3 md:w-4 md:h-4 mr-1 md:mr-2" />
+                  <span className="hidden md:inline">Histórico</span>
+                  <span className="md:hidden">Hist.</span>
                 </TabsTrigger>
               </TabsList>
 
               {/* Generate Tab */}
-              <TabsContent value="generate" className="space-y-6">
-                <div className="glass-effect rounded-xl p-6 space-y-4">
+              <TabsContent value="generate" className="space-y-4 md:space-y-6">
+                <div className="glass-effect rounded-xl p-4 md:p-6 space-y-3 md:space-y-4">
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-foreground">
                       Descreva a imagem
@@ -101,7 +102,7 @@ export const ImageView = () => {
                     />
                   </div>
 
-                  <div className="flex gap-4 items-end">
+                  <div className="flex flex-col md:flex-row gap-3 md:gap-4 md:items-end">
                     <div className="flex-1 space-y-2">
                       <label className="text-sm font-medium text-foreground">
                         Tamanho