diff --git a/react-app/src/App.jsx b/react-app/src/App.jsx
index 026d0d6..ffe23a2 100644
--- a/react-app/src/App.jsx
+++ b/react-app/src/App.jsx
@@ -1,9 +1,8 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useChat } from './hooks/useChat';
-import { sendMessage, stopGeneration, initializeModels, generateImage, generateVideo } from './utils/api';
+import { sendMessage, stopGeneration, initializeModels, generateImage, generateVideo, generateAudio } from './utils/api';
 import { getSelectedModel, saveSelectedModel, getTheme, saveTheme } from './utils/storage';
 import Sidebar from './components/Sidebar';
-import ChatHeader from './components/ChatHeader';
 import MessageArea from './components/MessageArea';
 import ChatInput from './components/ChatInput';
 import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
@@ -25,62 +24,45 @@ function App() {
     addMessage,
     updateMessage,
     removeMessagesAfter,
-    clearAllChats
+    clearAllChats,
   } = useChat();
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [selectedModel, setSelectedModel] = useState('openai');
-  const [selectedImageModel, setSelectedImageModel] = useState('flux');
-  const [selectedVideoModel, setSelectedVideoModel] = useState('veo');
-  const [theme, setTheme] = useState('light');
+  const [selectedModel,       setSelectedModel]       = useState('openai');
+  const [selectedImageModel,  setSelectedImageModel]  = useState('flux');
+  const [selectedVideoModel,  setSelectedVideoModel]  = useState('veo');
+  const [selectedAudioModel,  setSelectedAudioModel]  = useState('openai-audio');
+  const [theme, setTheme] = useState('dark');
   const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
-  const [models, setModels] = useState({});
-  const [imageModels, setImageModels] = useState({});
-  const [videoModels, setVideoModels] = useState({});
+
+  const [models,       setModels]       = useState({});
+  const [imageModels,  setImageModels]  = useState({});
+  const [videoModels,  setVideoModels]  = useState({});
+  const [audioModels,  setAudioModels]  = useState({});
   const [modelsLoaded, setModelsLoaded] = useState(false);
-  const [confirmModal, setConfirmModal] = useState({
-    isOpen: false,
-    title: '',
-    message: '',
-    onConfirm: null,
-    isDangerous: false
-  });
+
+  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', message: '', onConfirm: null, isDangerous: false });
   const [mode, setMode] = useState('chat');
   const [sessionSettings, setSessionSettings] = useState({
     systemPrompt: 'You are a helpful AI assistant who speaks concisely and helpfully.',
     maxTokens: 2000,
     temperature: 0.7,
-    topP: 1
+    topP: 1,
   });
-  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
-  const [isTutorialOpen, setIsTutorialOpen] = useState(false);
+  const [isSettingsPanelOpen,    setIsSettingsPanelOpen]    = useState(false);
+  const [isTutorialOpen,         setIsTutorialOpen]         = useState(false);
   const [isGenerationOptionsOpen, setIsGenerationOptionsOpen] = useState(false);
-  const [generationOptionsMode, setGenerationOptionsMode] = useState('imagine');
+  const [generationOptionsMode,  setGenerationOptionsMode]  = useState('imagine');
   const [imageGenerationOptions, setImageGenerationOptions] = useState({
-    width: 1024,
-    height: 1024,
-    seed: 42,
-    enhance: false,
-    nologo: false,
-    nofeed: false,
-    safe: false,
-    quality: 'medium'
+    width: 1024, height: 1024, seed: 42, enhance: false, nologo: false, nofeed: false, safe: false, quality: 'medium',
   });
   const [videoGenerationOptions, setVideoGenerationOptions] = useState({
-    seed: 42,
-    nologo: false,
-    nofeed: false,
-    duration: 4,
-    aspectRatio: '16:9',
-    audio: false
+    seed: 42, nologo: false, nofeed: false, duration: 4, aspectRatio: '16:9', audio: false,
   });
 
-  // Show tutorial on first visit
+  // Tutorial on first visit
   useEffect(() => {
-    const hasSeenTutorial = localStorage.getItem('hasSeenTutorial');
-    if (!hasSeenTutorial) {
-      setIsTutorialOpen(true);
-    }
+    if (!localStorage.getItem('hasSeenTutorial')) setIsTutorialOpen(true);
   }, []);
 
   const handleCloseTutorial = useCallback(() => {
@@ -88,220 +70,109 @@ function App() {
     localStorage.setItem('hasSeenTutorial', 'true');
   }, []);
 
-  // Debug mode changes
-  useEffect(() => {
-  }, [mode]);
-
-  // Initialize models on mount
+  // Load models
   useEffect(() => {
-    const init = async () => {
-      const { textModels, imageModels, videoModels } = await initializeModels();
+    initializeModels().then(({ textModels, imageModels, videoModels, audioModels }) => {
       setModels(textModels);
       setImageModels(imageModels);
       setVideoModels(videoModels);
+      setAudioModels(audioModels);
       setModelsLoaded(true);
-    };
-    init();
+    });
   }, []);
 
+  // Load persisted preferences
   useEffect(() => {
-    const savedModel = getSelectedModel();
+    const savedModel      = getSelectedModel();
     const savedImageModel = localStorage.getItem('selectedImageModel') || 'flux';
     const savedVideoModel = localStorage.getItem('selectedVideoModel') || 'veo';
-    const savedTheme = getTheme();
+    const savedAudioModel = localStorage.getItem('selectedAudioModel') || 'openai-audio';
+    const savedTheme      = getTheme();
     setSelectedModel(savedModel);
     setSelectedImageModel(savedImageModel);
     setSelectedVideoModel(savedVideoModel);
+    setSelectedAudioModel(savedAudioModel);
     setTheme(savedTheme);
-    
-    // Apply theme to document
-    if (savedTheme === 'dark') {
-      document.body.classList.add('dark');
-      document.body.classList.remove('light');
-    } else {
-      document.body.classList.remove('dark');
-      document.body.classList.add('light');
-    }
+    applyTheme(savedTheme);
   }, []);
 
+  const applyTheme = (t) => {
+    document.body.classList.toggle('dark', t === 'dark');
+    document.body.classList.toggle('light', t !== 'dark');
+  };
+
   // Keyboard shortcuts
   useEffect(() => {
-    const handleKeyDown = (e) => {
-      // Ctrl+K: Focus input
-      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
-        e.preventDefault();
-        document.getElementById('messageInput')?.focus();
-      }
-      // Ctrl+N: New chat
-      if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
-        e.preventDefault();
-        addChat();
-      }
-      // Ctrl+B: Toggle sidebar
-      if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
-        e.preventDefault();
-        setSidebarOpen(prev => !prev);
-      }
-      // Ctrl+Shift+L: Toggle theme
-      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'L') {
-        e.preventDefault();
-        handleThemeToggle();
-      }
-      // Esc: Close modals
-      if (e.key === 'Escape') {
-        setIsShortcutsModalOpen(false);
-      }
+    const onKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); document.getElementById('messageInput')?.focus(); }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'n') { e.preventDefault(); addChat(); }
+      if ((e.ctrlKey || e.metaKey) && e.key === 'b') { e.preventDefault(); setSidebarOpen(p => !p); }
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'L') { e.preventDefault(); handleThemeToggle(); }
+      if (e.key === 'Escape') setIsShortcutsModalOpen(false);
     };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
   }, [addChat]);
 
-  const handleModelChange = useCallback((model) => {
-    setSelectedModel(model);
-    saveSelectedModel(model);
-  }, []);
-
-  const handleImageModelChange = useCallback((model) => {
-    setSelectedImageModel(model);
-    localStorage.setItem('selectedImageModel', model);
-  }, []);
-
-  const handleVideoModelChange = useCallback((model) => {
-    setSelectedVideoModel(model);
-    localStorage.setItem('selectedVideoModel', model);
-  }, []);
+  const handleModelChange      = useCallback((m) => { setSelectedModel(m);      saveSelectedModel(m); }, []);
+  const handleImageModelChange = useCallback((m) => { setSelectedImageModel(m); localStorage.setItem('selectedImageModel', m); }, []);
+  const handleVideoModelChange = useCallback((m) => { setSelectedVideoModel(m); localStorage.setItem('selectedVideoModel', m); }, []);
+  const handleAudioModelChange = useCallback((m) => { setSelectedAudioModel(m); localStorage.setItem('selectedAudioModel', m); }, []);
 
   const handleThemeToggle = useCallback(() => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
-    setTheme(newTheme);
-    saveTheme(newTheme);
-    
-    if (newTheme === 'dark') {
-      document.body.classList.add('dark');
-      document.body.classList.remove('light');
-    } else {
-      document.body.classList.remove('dark');
-      document.body.classList.add('light');
-    }
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    saveTheme(next);
+    applyTheme(next);
   }, [theme]);
 
   const handleExportChat = () => {
-    const activeChat = getActiveChat();
-    if (!activeChat || !activeChat.messages.length) {
-      alert('No messages to export');
-      return;
-    }
-
-    // Create export data
-    const exportData = {
-      title: activeChat.title,
-      timestamp: new Date().toISOString(),
-      messages: activeChat.messages.map(msg => ({
-        role: msg.role,
-        content: msg.content,
-        timestamp: msg.timestamp
-      }))
-    };
-
-    // Download as JSON
-    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `chat-export-${Date.now()}.json`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    const chat = getActiveChat();
+    if (!chat?.messages.length) { if (window?.showToast) window.showToast('No messages to export', 'error'); return; }
+    const blob = new Blob([JSON.stringify({ title: chat.title, timestamp: new Date().toISOString(), messages: chat.messages.map(m => ({ role: m.role, content: m.content, timestamp: m.timestamp })) }, null, 2)], { type: 'application/json' });
+    const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: `chat-${Date.now()}.json` });
+    document.body.appendChild(a); a.click(); document.body.removeChild(a);
   };
 
-  const handleClearAll = () => {
-    setConfirmModal({
-      isOpen: true,
-      title: 'Clear All Chats',
-      message: 'Are you sure you want to delete all chats? This action cannot be undone.',
-      onConfirm: () => clearAllChats(),
-      isDangerous: true
-    });
-  };
+  const handleClearAll = () => setConfirmModal({ isOpen: true, title: 'Clear All Chats', message: 'Delete all chats? This cannot be undone.', onConfirm: clearAllChats, isDangerous: true });
 
-  const handleSessionSettingsChange = useCallback((field, value) => {
-    setSessionSettings(prev => ({
-      ...prev,
-      [field]: value
-    }));
-  }, []);
+  const handleSessionSettingsChange = useCallback((field, value) => setSessionSettings(p => ({ ...p, [field]: value })), []);
 
-  const handleOpenGenerationOptions = useCallback((mode) => {
-    setGenerationOptionsMode(mode);
-    setIsGenerationOptionsOpen(true);
-  }, []);
+  const handleOpenGenerationOptions = useCallback((m) => { setGenerationOptionsMode(m); setIsGenerationOptionsOpen(true); }, []);
 
   const handleGenerationOptionsApply = useCallback((options) => {
-    if (generationOptionsMode === 'imagine') {
-      setImageGenerationOptions(options);
-    } else if (generationOptionsMode === 'video') {
-      setVideoGenerationOptions(options);
-    }
+    if (generationOptionsMode === 'imagine') setImageGenerationOptions(options);
+    else if (generationOptionsMode === 'video') setVideoGenerationOptions(options);
   }, [generationOptionsMode]);
 
+  // ── Send text message ────────────────────────────────────────
   const handleSendMessage = useCallback(async ({ text = '', attachment = null } = {}) => {
-    const trimmedContent = typeof text === 'string' ? text.trim() : '';
-
-    if ((!trimmedContent && !attachment) || isGenerating) return;
+    const trimmed = typeof text === 'string' ? text.trim() : '';
+    if ((!trimmed && !attachment) || isGenerating) return;
 
     const attachments = attachment ? [{
       name: attachment.name,
-      mimeType: attachment.mimeType || attachment.file?.type || 'application/octet-stream',
+      mimeType: attachment.mimeType || 'application/octet-stream',
       data: attachment.base64 || attachment.data || '',
       size: attachment.size,
       preview: attachment.preview || null,
-      isImage: attachment.isImage ?? (attachment.mimeType ? attachment.mimeType.startsWith('image/') : false)
+      isImage: attachment.isImage ?? (attachment.mimeType?.startsWith('image/') || false),
     }] : [];
 
     if (attachments[0] && !attachments[0].data && attachment?.preview?.startsWith('data:')) {
-      const commaIndex = attachment.preview.indexOf(',');
-      attachments[0].data = commaIndex >= 0 ? attachment.preview.slice(commaIndex + 1) : attachment.preview;
+      const ci = attachment.preview.indexOf(',');
+      attachments[0].data = ci >= 0 ? attachment.preview.slice(ci + 1) : attachment.preview;
     }
 
-    const messageMetadata = attachments.length ? {
-      attachments,
-      ...(attachments[0]?.isImage && attachments[0]?.preview ? {
-        image: {
-          src: attachments[0].preview,
-          name: attachments[0].name
-        }
-      } : {})
-    } : {};
-
-    const isImageAttachment = attachments[0]?.isImage;
-    const attachmentLabel = isImageAttachment ? 'image' : 'file';
-    const attachmentArticle = isImageAttachment ? 'an' : 'a';
-    const messageContent = trimmedContent || (attachments.length
-      ? attachments[0]?.name
-        ? `Shared ${attachmentArticle} ${attachmentLabel}: ${attachments[0].name}`
-        : `Shared ${attachmentArticle} ${attachmentLabel}`
-      : '');
-
-    // Add user message and get the updated chat
-    const updatedChat = addMessage('user', messageContent, null, messageMetadata);
-
-    // Set generating state
+    const messageContent = trimmed || (attachments[0]?.name ? `Shared file: ${attachments[0].name}` : 'Shared a file');
+    const updatedChat = addMessage('user', messageContent, null, attachments.length ? { attachments, ...(attachments[0]?.isImage && attachments[0]?.preview ? { image: { src: attachments[0].preview, name: attachments[0].name } } : {}) } : {});
+
     setIsGenerating(true);
+    if (!updatedChat) { setIsGenerating(false); if (window?.showToast) window.showToast('Could not find active chat', 'error'); return; }
 
-    if (!updatedChat) {
-      console.error("Could not find active chat to send message.");
-      setIsGenerating(false);
-      // Show toast notification for error
-      if (window?.showToast) window.showToast("Could not find active chat to send message.", "error");
-      return;
-    }
+    const assistantId = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    addMessage('assistant', '', assistantId, { isStreaming: true });
 
-    // Create assistant message placeholder
-    const assistantMessageId = Date.now().toString(36) + Math.random().toString(36).substr(2);
-    addMessage('assistant', '', assistantMessageId, { isStreaming: true });
-    
     const runtimeMessages = sessionSettings.systemPrompt?.trim()
       ? [{ role: 'system', content: sessionSettings.systemPrompt.trim() }, ...updatedChat.messages]
       : updatedChat.messages;
@@ -309,257 +180,109 @@ function App() {
     try {
       await sendMessage(
         runtimeMessages,
-        // onChunk
-        (chunk, fullContent, fullReasoning) => {
-          // Update the message content in real-time for streaming
-          updateMessage(assistantMessageId, {
-            content: fullContent,
-            reasoning: fullReasoning,
-            isStreaming: true
-          });
-        },
-        // onComplete
-        (fullContent, fullReasoning) => {
-          updateMessage(assistantMessageId, {
-            content: fullContent,
-            reasoning: fullReasoning,
-            isStreaming: false
-          });
-          setIsGenerating(false);
-        },
-        // onError
-        (error) => {
-          console.error('Message generation error:', error);
-          if (error.message === 'User aborted') {
-            updateMessage(assistantMessageId, {
-              content: '**Message stopped by user**',
-              isStreaming: false,
-              isError: false
-            });
-          } else {
-            updateMessage(assistantMessageId, {
-              content: 'An error occurred',
-              isStreaming: false,
-              isError: true
-            });
-          }
+        (_, fullContent) => updateMessage(assistantId, { content: fullContent, isStreaming: true }),
+        (fullContent)    => { updateMessage(assistantId, { content: fullContent, isStreaming: false }); setIsGenerating(false); },
+        (error)          => {
+          const msg = error.message === 'User aborted' ? '**Message stopped by user**' : `Error: ${error.message}`;
+          updateMessage(assistantId, { content: msg, isStreaming: false, isError: error.message !== 'User aborted' });
           setIsGenerating(false);
         },
-        // modelId - pass the selected model
         selectedModel,
-        {
-          maxTokens: sessionSettings.maxTokens,
-          temperature: sessionSettings.temperature,
-          topP: sessionSettings.topP
-        }
+        { maxTokens: sessionSettings.maxTokens, temperature: sessionSettings.temperature, topP: sessionSettings.topP },
       );
     } catch (error) {
-      console.error('Message generation error:', error);
-      if (error.message === 'User aborted') {
-        updateMessage(assistantMessageId, {
-          content: '**Message stopped by user**',
-          isStreaming: false,
-          isError: false
-        });
-      } else {
-        updateMessage(assistantMessageId, {
-          content: 'An error occurred',
-          isStreaming: false,
-          isError: true
-        });
-      }
+      const msg = error.message === 'User aborted' ? '**Message stopped by user**' : `Error: ${error.message}`;
+      updateMessage(assistantId, { content: msg, isStreaming: false, isError: error.message !== 'User aborted' });
       setIsGenerating(false);
     }
   }, [isGenerating, addMessage, updateMessage, selectedModel, sessionSettings]);
 
-  const handleStopGeneration = useCallback(() => {
-    stopGeneration();
-    setIsGenerating(false);
-  }, []);
+  const handleStopGeneration = useCallback(() => { stopGeneration(); setIsGenerating(false); }, []);
 
+  // ── Image generation ─────────────────────────────────────────
   const handleGenerateImage = useCallback(async (prompt) => {
     if (!prompt.trim() || isGenerating) return;
-
-    // Add user message with the prompt
     const updatedChat = addMessage('user', `/imagine ${prompt}`);
-    
-    // Set generating state
     setIsGenerating(true);
-
-    if (!updatedChat) {
-      console.error("Could not find active chat to generate image.");
-      setIsGenerating(false);
-      // Show toast notification for error
-      if (window?.showToast) window.showToast("Could not find active chat to generate image.", "error");
-      return;
-    }
-
-    // Create assistant message placeholder for the image
-    const assistantMessageId = Date.now().toString(36) + Math.random().toString(36).substr(2);
-    addMessage('assistant', 'Generating image...', assistantMessageId);
-
+    if (!updatedChat) { setIsGenerating(false); return; }
+    const aid = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    addMessage('assistant', 'Generating image…', aid);
     try {
-      
-      // Generate the image with selected model and options
-      const imageData = await generateImage(prompt, {
-        model: selectedImageModel,
-        ...imageGenerationOptions
-      });
-
-      // Update the message with the generated image
-      updateMessage(assistantMessageId, {
-        content: '',
-        imageUrl: imageData.url,
-        imagePrompt: imageData.prompt,
-        imageModel: imageData.model,
-        isStreaming: false
-      });
-
-      setIsGenerating(false);
+      const img = await generateImage(prompt, { model: selectedImageModel, ...imageGenerationOptions });
+      updateMessage(aid, { content: '', imageUrl: img.url, imagePrompt: img.prompt, imageModel: img.model, isStreaming: false });
     } catch (error) {
-      console.error('Image generation error:', error);
-      updateMessage(assistantMessageId, {
-        content: 'An error occurred',
-        isStreaming: false,
-        isError: true
-      });
-      setIsGenerating(false);
-      // Show toast notification for error
-      if (window?.showToast) window.showToast("Image generation failed", "error");
+      updateMessage(aid, { content: `Image generation failed: ${error.message}`, isStreaming: false, isError: true });
+      if (window?.showToast) window.showToast('Image generation failed', 'error');
     }
+    setIsGenerating(false);
   }, [isGenerating, selectedImageModel, imageGenerationOptions, addMessage, updateMessage]);
 
+  // ── Video generation ─────────────────────────────────────────
   const handleGenerateVideo = useCallback(async (prompt) => {
     if (!prompt.trim() || isGenerating) return;
-
-    // Add user message with the prompt
     const updatedChat = addMessage('user', `/video ${prompt}`);
-    
-    // Set generating state
     setIsGenerating(true);
-
-    if (!updatedChat) {
-      console.error("Could not find active chat to generate video.");
-      setIsGenerating(false);
-      // Show toast notification for error
-      if (window?.showToast) window.showToast("Could not find active chat to generate video.", "error");
-      return;
-    }
-
-    // Create assistant message placeholder for the video
-    const assistantMessageId = Date.now().toString(36) + Math.random().toString(36).substr(2);
-    addMessage('assistant', 'Generating video... This may take a minute.', assistantMessageId);
-
+    if (!updatedChat) { setIsGenerating(false); return; }
+    const aid = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    addMessage('assistant', 'Generating video… This may take a minute.', aid);
     try {
-      // Generate the video with selected model and options
-      const videoData = await generateVideo(prompt, {
-        model: selectedVideoModel,
-        ...videoGenerationOptions
-      });
-
-      // Update the message with the generated video
-      updateMessage(assistantMessageId, {
-        content: '',
-        videoUrl: videoData.url,
-        videoPrompt: videoData.prompt,
-        videoModel: videoData.model,
-        isStreaming: false
-      });
-
-      setIsGenerating(false);
+      const vid = await generateVideo(prompt, { model: selectedVideoModel, ...videoGenerationOptions });
+      updateMessage(aid, { content: '', videoUrl: vid.url, videoPrompt: vid.prompt, videoModel: vid.model, isStreaming: false });
     } catch (error) {
-      console.error('Video generation error:', error);
-      updateMessage(assistantMessageId, {
-        content: 'An error occurred while generating video',
-        isStreaming: false,
-        isError: true
-      });
-      setIsGenerating(false);
-      // Show toast notification for error
-      if (window?.showToast) window.showToast("Video generation failed", "error");
+      updateMessage(aid, { content: `Video generation failed: ${error.message}`, isStreaming: false, isError: true });
+      if (window?.showToast) window.showToast('Video generation failed', 'error');
     }
+    setIsGenerating(false);
   }, [isGenerating, selectedVideoModel, videoGenerationOptions, addMessage, updateMessage]);
 
-  const handleRegenerateMessage = async () => {
-    const activeChat = getActiveChat();
-    if (!activeChat || isGenerating) return;
-
-    const messages = activeChat.messages;
-    if (messages.length < 2) return;
-
-    // Find the last user message
-    let lastUserMessage = null;
-    for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].role === 'user') {
-        lastUserMessage = messages[i];
-        break;
-      }
+  // ── Audio generation ─────────────────────────────────────────
+  const handleGenerateAudio = useCallback(async (text, options = {}) => {
+    if (!text.trim() || isGenerating) return;
+    const updatedChat = addMessage('user', `/audio ${text}`);
+    setIsGenerating(true);
+    if (!updatedChat) { setIsGenerating(false); return; }
+    const aid = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    addMessage('assistant', 'Generating audio…', aid);
+    try {
+      const aud = await generateAudio(text, { model: selectedAudioModel, ...options });
+      updateMessage(aid, { content: '', audioUrl: aud.url, audioText: aud.text, audioVoice: aud.voice, audioModel: aud.model, isStreaming: false });
+    } catch (error) {
+      updateMessage(aid, { content: `Audio generation failed: ${error.message}`, isStreaming: false, isError: true });
+      if (window?.showToast) window.showToast('Audio generation failed', 'error');
     }
-
-    if (!lastUserMessage) return;
-
-    // Remove all messages after the last user message
-    removeMessagesAfter(lastUserMessage.timestamp);
-
-    // Wait a bit for state to update
+    setIsGenerating(false);
+  }, [isGenerating, selectedAudioModel, addMessage, updateMessage]);
+
+  // ── Regenerate ──────────────────────────────────────────────
+  const handleRegenerateMessage = useCallback(async () => {
+    const chat = getActiveChat();
+    if (!chat || isGenerating) return;
+    const lastUser = [...chat.messages].reverse().find(m => m.role === 'user');
+    if (!lastUser) return;
+    removeMessagesAfter(lastUser.timestamp);
     setTimeout(() => {
-      // Regenerate the response by re-processing the messages
-      const updatedChat = getActiveChat();
-      // Create assistant message
-      const assistantMessageId = Date.now().toString(36) + Math.random().toString(36).substr(2);
-      addMessage('assistant', '', assistantMessageId, { isStreaming: true });
-      
+      const updated = getActiveChat();
+      const aid = Date.now().toString(36) + Math.random().toString(36).slice(2);
+      addMessage('assistant', '', aid, { isStreaming: true });
       setIsGenerating(true);
-      
       const runtimeMessages = sessionSettings.systemPrompt?.trim()
-        ? [{ role: 'system', content: sessionSettings.systemPrompt.trim() }, ...updatedChat.messages]
-        : updatedChat.messages;
-
+        ? [{ role: 'system', content: sessionSettings.systemPrompt.trim() }, ...updated.messages]
+        : updated.messages;
       sendMessage(
         runtimeMessages,
-        (chunk, fullContent) => {
-          updateMessage(assistantMessageId, {
-            content: fullContent,
-            isStreaming: true
-          });
-        },
-        (fullContent) => {
-          updateMessage(assistantMessageId, {
-            content: fullContent,
-            isStreaming: false
-          });
-          setIsGenerating(false);
-        },
-        (error) => {
-          console.error('Message regeneration error:', error);
-          if (error.message === 'User aborted') {
-            updateMessage(assistantMessageId, {
-              content: '**Message stopped by user**',
-              isStreaming: false,
-              isError: false
-            });
-          } else {
-            updateMessage(assistantMessageId, {
-              content: 'An error occurred',
-              isStreaming: false,
-              isError: true
-            });
-          }
+        (_, full) => updateMessage(aid, { content: full, isStreaming: true }),
+        (full)    => { updateMessage(aid, { content: full, isStreaming: false }); setIsGenerating(false); },
+        (error)   => {
+          updateMessage(aid, { content: error.message === 'User aborted' ? '**Message stopped by user**' : `Error: ${error.message}`, isStreaming: false, isError: error.message !== 'User aborted' });
           setIsGenerating(false);
         },
         selectedModel,
-        {
-          maxTokens: sessionSettings.maxTokens,
-          temperature: sessionSettings.temperature,
-          topP: sessionSettings.topP
-        }
+        { maxTokens: sessionSettings.maxTokens, temperature: sessionSettings.temperature, topP: sessionSettings.topP },
       );
     }, 100);
-  };
+  }, [getActiveChat, isGenerating, removeMessagesAfter, addMessage, updateMessage, selectedModel, sessionSettings]);
 
-  const activeChat = getActiveChat();
-  const activeMessages = activeChat?.messages || [];
-  const isChatEmpty = activeMessages.length === 0;
+  const activeMessages = getActiveChat()?.messages || [];
 
   return (
     <div className="app">
@@ -570,43 +293,47 @@ function App() {
         onNewChat={addChat}
         onDeleteChat={deleteChat}
         onThemeToggle={handleThemeToggle}
+        theme={theme}
         onOpenSettings={() => setIsSettingsPanelOpen(true)}
+        onExportChat={handleExportChat}
+        onClearAll={handleClearAll}
       />
-      
-      <div className={`chat-container ${isChatEmpty ? 'chat-container-empty' : ''}`}>
-        <MessageArea 
-          messages={activeMessages} 
-          isGenerating={isGenerating} 
+
+      <div className={`chat-container ${activeMessages.length === 0 ? 'chat-container-empty' : ''}`}>
+        <MessageArea
+          messages={activeMessages}
+          isGenerating={isGenerating}
           onRegenerate={handleRegenerateMessage}
         />
-        
+
         <ChatInput
           onSend={handleSendMessage}
           isGenerating={isGenerating}
           onStop={handleStopGeneration}
           onGenerateImage={handleGenerateImage}
           onGenerateVideo={handleGenerateVideo}
+          onGenerateAudio={handleGenerateAudio}
           setIsUserTyping={() => {}}
           onModeChange={setMode}
           selectedModel={selectedModel}
           selectedImageModel={selectedImageModel}
           selectedVideoModel={selectedVideoModel}
+          selectedAudioModel={selectedAudioModel}
           mode={mode}
           models={models}
           imageModels={imageModels}
           videoModels={videoModels}
+          audioModels={audioModels}
           modelsLoaded={modelsLoaded}
           onModelChange={handleModelChange}
           onImageModelChange={handleImageModelChange}
           onVideoModelChange={handleVideoModelChange}
+          onAudioModelChange={handleAudioModelChange}
           onOpenGenerationOptions={handleOpenGenerationOptions}
         />
       </div>
 
-      <KeyboardShortcutsModal
-        isOpen={isShortcutsModalOpen}
-        onClose={() => setIsShortcutsModalOpen(false)}
-      />
+      <KeyboardShortcutsModal isOpen={isShortcutsModalOpen} onClose={() => setIsShortcutsModalOpen(false)} />
 
       <SettingsPanel
         isOpen={isSettingsPanelOpen}
@@ -617,7 +344,7 @@ function App() {
 
       <ConfirmModal
         isOpen={confirmModal.isOpen}
-        onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
+        onClose={() => setConfirmModal(p => ({ ...p, isOpen: false }))}
         onConfirm={confirmModal.onConfirm}
         title={confirmModal.title}
         message={confirmModal.message}
@@ -626,10 +353,7 @@ function App() {
         isDangerous={confirmModal.isDangerous}
       />
 
-      <TutorialModal
-        isOpen={isTutorialOpen}
-        onClose={handleCloseTutorial}
-      />
+      <TutorialModal isOpen={isTutorialOpen} onClose={handleCloseTutorial} />
 
       <GenerationOptionsModal
         isOpen={isGenerationOptionsOpen}
diff --git a/react-app/src/components/ChatInput.css b/react-app/src/components/ChatInput.css
index 7c4946c..12ffe5d 100644
--- a/react-app/src/components/ChatInput.css
+++ b/react-app/src/components/ChatInput.css
@@ -1,859 +1,633 @@
-/* Component-specific styles for ChatInput */
+/* ChatInput — complete visual overhaul */
+
 .chat-input-container {
-  background: transparent !important;
-  padding: 0 1rem 1.25rem 1rem;
+  padding: 0 1rem 1.25rem;
   position: relative;
+  background: transparent;
 }
 
+/* ── Drop overlay ─────────────────────────────────────────── */
 .drop-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  border-radius: 18px;
+  z-index: 100;
+  border-radius: var(--radius-xl);
   pointer-events: none;
 }
+body.light .drop-overlay { background: rgba(255,255,255,0.85); }
 
 .drop-box {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
   padding: 2rem 3rem;
-  background: rgba(124, 165, 142, 0.1);
-  border: 2px dashed rgba(124, 165, 142, 0.5);
-  border-radius: 12px;
+  background: rgba(124,165,142,0.1);
+  border: 2px dashed rgba(124,165,142,0.6);
+  border-radius: var(--radius-lg);
   color: #7ca58e;
 }
+.drop-box svg { width: 40px; height: 40px; }
+.drop-box span { font-size: 1rem; font-weight: 600; }
 
-.drop-box svg {
-  width: 48px;
-  height: 48px;
-  stroke: #7ca58e;
-}
-
-.drop-box span {
-  font-size: 1.125rem;
-  font-weight: 500;
-}
-
-body.light .drop-overlay {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-body.light .drop-box {
-  background: rgba(124, 165, 142, 0.15);
-  border-color: rgba(124, 165, 142, 0.6);
-  color: #2d5a3e;
-}
-
-body.light .drop-box svg {
-  stroke: #2d5a3e;
-}
-
+/* ── Inner wrapper ─────────────────────────────────────────── */
 .chat-input-inner {
-  max-width: 840px;
+  max-width: 860px;
   margin: 0 auto;
-  padding: 0;
-  background: transparent !important;
-}
-
-.chat-input-wrapper-modern {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.85rem 1rem;
-  background: linear-gradient(135deg, rgba(15, 51, 30, 0.85), rgba(12, 32, 22, 0.9));
-  border: 1px solid rgba(124, 165, 142, 0.35);
-  border-radius: 18px;
-  transition: all var(--transition-fast);
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
-  min-height: 180px;
-}
-
-body.light .chat-input-wrapper-modern {
-  background: linear-gradient(135deg, rgba(244, 249, 246, 0.95), rgba(240, 247, 242, 0.95));
-  border: 1px solid rgba(124, 165, 142, 0.25);
-  box-shadow: 0 12px 32px rgba(15, 51, 30, 0.08);
 }
 
-.chat-input-wrapper-modern:focus-within {
-  border-color: rgba(124, 165, 142, 0.7);
-  box-shadow: 0 22px 44px rgba(124, 165, 142, 0.22);
+/* ── Attachment preview strip ──────────────────────────────── */
+.attachment-preview-row {
+  margin-bottom: 0.5rem;
+  animation: fadeInUp 0.2s ease-out;
 }
 
-.chatbar-top {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  flex: 1 1 auto;
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  max-width: 260px;
+  box-shadow: var(--shadow-xs);
 }
 
-.chatbar-model-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-bottom: 0.25rem;
-  width: 100%;
-  padding-left: 0;
+.attachment-chip-thumb {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 6px;
+  flex-shrink: 0;
 }
 
-.chatbar-tags {
+.attachment-chip-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  background: var(--bg-tertiary);
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  flex-wrap: wrap;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-muted);
 }
+.attachment-chip-icon svg { width: 18px; height: 18px; }
 
-.chatbar-tags:empty {
-  display: none;
+.attachment-chip-name {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
 }
 
-
-.chatbar-bottom {
+.attachment-chip-remove {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  cursor: pointer;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding-top: 0.5rem;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+  transition: all var(--transition-fast);
 }
+.attachment-chip-remove:hover { background: var(--color-danger); color: #fff; }
+.attachment-chip-remove svg { width: 10px; height: 10px; }
 
-.chatbar-left,
-.chatbar-right {
+/* ── Main input card ──────────────────────────────────────── */
+.input-card {
   display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--input-border);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  background: var(--input-bg);
+  box-shadow: var(--shadow-md);
 }
 
-/* Attach Menu */
-.attach-menu-wrapper {
-  position: relative;
+body.dark .input-card {
+  background: #111111;
+  border-color: rgba(212,251,228,0.12);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
 }
 
-.input-icon-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-fast);
-  background: transparent;
-  color: var(--text-secondary);
-  border: 1px solid transparent;
-  cursor: pointer;
-  flex-shrink: 0;
+body.light .input-card {
+  background: #ffffff;
+  border-color: #d1d5db;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
 }
 
-.input-icon-btn:hover {
-  background: var(--sidebar-item-hover);
-  border-color: var(--border-color);
-  color: var(--text-primary);
+.input-card:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(124,165,142,0.14), var(--shadow-lg);
 }
 
-.input-icon-btn svg {
-  width: 18px;
-  height: 18px;
+body.light .input-card:focus-within {
+  border-color: #7CA58E;
+  box-shadow: 0 0 0 3px rgba(124,165,142,0.12), 0 4px 16px rgba(0,0,0,0.08);
 }
 
-.attach-menu {
-  position: absolute;
-  bottom: calc(100% + 0.75rem);
-  left: 0;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  padding: 0.5rem;
-  min-width: 220px;
-  z-index: 1000;
-  animation: fadeInUp 0.2s ease-out;
+/* ── Mode pills ───────────────────────────────────────────── */
+.mode-pills {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.6rem 0.75rem 0.4rem;
+  border-bottom: 1px solid var(--border-light);
 }
 
-.attach-menu-item {
+.mode-pill {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
+  gap: 0.3rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
   background: transparent;
-  color: var(--text-primary);
-  border: none;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
   transition: all var(--transition-fast);
-  text-align: left;
-  font-size: 0.875rem;
-  font-family: inherit;
+  white-space: nowrap;
 }
 
-.attach-menu-item:hover {
+.mode-pill:hover {
   background: var(--sidebar-item-hover);
-}
-
-.attach-menu-item svg {
-  width: 18px;
-  height: 18px;
   color: var(--text-secondary);
 }
 
-/* Image Mode Tag */
-.image-mode-tag {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.3rem 0.65rem;
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
-  border: 1px solid rgba(168, 85, 247, 0.3);
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #a855f7;
-  animation: fadeInSlide 0.3s ease-out;
-  flex-shrink: 0;
-}
-
-body.dark .image-mode-tag {
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
-  border-color: rgba(168, 85, 247, 0.4);
-  color: #c084fc;
-}
-
-.image-mode-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-/* Canvas Mode Tag */
-.canvas-mode-tag {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.3rem 0.65rem;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 165, 233, 0.15));
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #3b82f6;
-  animation: fadeInSlide 0.3s ease-out;
-  flex-shrink: 0;
-}
-
-body.dark .canvas-mode-tag {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(14, 165, 233, 0.2));
-  border-color: rgba(59, 130, 246, 0.4);
-  color: #60a5fa;
-}
-
-.canvas-mode-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-/* Video Mode Tag */
-.video-mode-tag {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.3rem 0.65rem;
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.15));
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #ef4444;
-  animation: fadeInSlide 0.3s ease-out;
-  flex-shrink: 0;
+.mode-pill:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
 }
 
-body.dark .video-mode-tag {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
-  border-color: rgba(239, 68, 68, 0.4);
-  color: #f87171;
+.mode-pill.active {
+  background: var(--accent-gradient);
+  color: #ffffff;
+  border-color: transparent;
+  box-shadow: 0 2px 8px rgba(124,165,142,0.3);
 }
 
-.video-mode-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
+.mode-pill.active:focus-visible {
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
 }
 
-@keyframes fadeInSlide {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+.mode-pill-icon { font-size: 0.875rem; line-height: 1; }
+.mode-pill-label { line-height: 1; }
 
-/* Image Preview */
-.image-preview-above {
-  max-width: 900px;
-  margin: 0 auto 0.5rem auto;
-  animation: fadeInSlide 0.3s ease-out;
+/* ── Textarea ────────────────────────────────────────────── */
+.chat-textarea {
+  width: 100%;
   background: transparent;
-  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  font-family: inherit;
+  padding: 0.875rem 1rem;
+  max-height: 360px;
+  overflow-y: auto;
+  min-height: 52px;
+  transition: background-color var(--transition-fast);
 }
 
-.image-preview-wrapper {
-  position: relative;
-  display: inline-block;
-  background: transparent;
-  border: 2px solid var(--border-light);
-  border-radius: 12px;
-  padding: 0.5rem;
-  transition: all var(--transition-fast);
-  box-shadow: none;
+.chat-textarea:focus {
+  background-color: transparent;
 }
 
-.image-preview-wrapper:hover {
-  border-color: var(--border-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+.chat-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.image-preview-large {
-  max-width: 200px;
-  max-height: 150px;
-  border-radius: 8px;
-  object-fit: cover;
-  display: block;
+.chat-textarea::placeholder {
+  color: var(--text-muted);
+  opacity: 0.8;
 }
 
-.file-preview-large {
-  width: 200px;
-  height: 150px;
-  border-radius: 8px;
-  border: 2px dashed var(--border-light);
+/* ── Bottom toolbar ──────────────────────────────────────── */
+.input-toolbar {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-light);
   gap: 0.5rem;
-  color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.file-preview-large svg {
-  width: 48px;
-  height: 48px;
 }
 
-.file-preview-ext {
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
 }
 
-.image-preview-remove-large {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #ef4444;
-  border: 2px solid var(--bg-primary);
-  color: white;
+/* ── Model chip ──────────────────────────────────────────── */
+.model-chip {
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.65rem;
+  border-radius: var(--radius-full);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
   transition: all var(--transition-fast);
-  padding: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  max-width: 220px;
 }
-
-.image-preview-remove-large:hover {
-  background: #dc2626;
-  transform: scale(1.1);
+.model-chip:hover:not(:disabled) {
+  border-color: var(--border-color);
+  color: var(--text-primary);
+  background: var(--sidebar-item-hover);
 }
+.model-chip:disabled { opacity: 0.5; cursor: not-allowed; }
+.model-chip-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
+.model-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
+.model-chip-caret { width: 12px; height: 12px; flex-shrink: 0; }
 
-.image-preview-remove-large svg {
-  width: 14px;
-  height: 14px;
-}
+/* ── Model dropdown ──────────────────────────────────────── */
+.model-selector-wrapper { position: relative; }
 
-.image-preview-name {
-  margin-top: 0.375rem;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  text-align: center;
-  max-width: 200px;
+.model-dropdown-compact {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  left: 0;
+  min-width: 240px;
+  max-height: 340px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  z-index: 200;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: none;
+  animation: fadeInUp 0.18s ease-out;
 }
 
-.image-preview-container {
+.model-search-container {
   position: relative;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-light);
   flex-shrink: 0;
-  animation: fadeInSlide 0.3s ease-out;
 }
 
-.image-preview {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  object-fit: cover;
-  border: 2px solid var(--border-light);
-  transition: all var(--transition-fast);
+.model-search-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--text-muted);
+  pointer-events: none;
 }
 
-.image-preview:hover {
-  border-color: var(--border-color);
-  transform: scale(1.05);
+.model-search-input {
+  width: 100%;
+  padding: 0.45rem 2rem 0.45rem 2rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition-fast);
 }
+.model-search-input:focus { border-color: var(--border-focus); }
+.model-search-input::placeholder { color: var(--text-muted); }
 
-.image-preview-remove {
+.model-search-clear {
   position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #ef4444;
-  border: 2px solid var(--bg-secondary);
-  color: white;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  border-radius: 50%;
   transition: all var(--transition-fast);
-  padding: 0;
 }
+.model-search-clear:hover { color: var(--text-primary); }
+.model-search-clear svg { width: 10px; height: 10px; }
 
-.image-preview-remove:hover {
-  background: #dc2626;
-  transform: scale(1.1);
-}
+.model-options-container { overflow-y: auto; padding: 0.375rem; flex: 1; }
 
-.image-preview-remove svg {
-  width: 12px;
-  height: 12px;
-}
-
-/* Chat Input Textarea */
-.chat-input-modern {
+.model-option-compact {
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.65rem;
+  border-radius: var(--radius-sm);
   background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-  font-size: 0.9375rem;
-  line-height: 1.5;
   color: var(--text-primary);
-  max-height: 400px;
-  overflow-y: auto;
+  border: none;
+  cursor: pointer;
+  font-size: 0.8125rem;
   font-family: inherit;
-  padding: 0;
-  min-height: 20px;
+  text-align: left;
+  transition: background var(--transition-fast);
 }
+.model-option-compact:hover { background: var(--sidebar-item-hover); }
+.model-option-compact.active { background: var(--sidebar-item-active); color: var(--brand-green); font-weight: 600; }
+.model-option-name { flex: 1; }
+.model-option-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--brand-green); }
 
-.chat-input-modern::placeholder {
+/* ── Voice select ────────────────────────────────────────── */
+.voice-select {
+  height: 32px;
+  min-height: 32px;
+  padding: 0.25rem 0.65rem;
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
   color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-/* Send Button */
-.send-btn-modern {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  background: #f5f5f5;
-  color: #111;
-  border: none;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  outline: none;
   transition: all var(--transition-fast);
-  flex-shrink: 0;
-  box-shadow: none;
-}
-
-.send-btn-modern:hover:not(:disabled) {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
-}
-
-.send-btn-modern:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.send-btn-modern svg {
-  width: 18px;
-  height: 18px;
-}
-
-.send-btn-modern.stop-btn {
-  background: #ef4444;
-  color: #fff;
-}
-
-.send-btn-modern.stop-btn:hover {
-  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.35);
 }
 
-body.dark .send-btn-modern {
-  background: #f5f5f5;
-  color: #0f172a;
+.voice-select:hover:not(:disabled) {
+  border-color: var(--border-color);
+  background: var(--sidebar-item-hover);
 }
 
-body.light .send-btn-modern {
-  background: linear-gradient(135deg, #7CA58E, #C65792);
-  color: #ffffff;
+.voice-select:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px rgba(124,165,142,0.12);
 }
 
-body.light .send-btn-modern:hover:not(:disabled) {
-  box-shadow: 0 8px 16px rgba(124, 165, 142, 0.35);
+.voice-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.model-chip {
+/* ── Toolbar icon buttons ───────────────────────────────── */
+.toolbar-icon-btn {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.35rem 0.75rem;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--border-light);
-  color: var(--text-secondary);
-  font-size: 0.8125rem;
-  font-weight: 500;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-muted);
   cursor: pointer;
   transition: all var(--transition-fast);
-  font-family: inherit;
+  flex-shrink: 0;
 }
 
-.model-chip:hover:not(:disabled) {
-  color: var(--text-primary);
+.toolbar-icon-btn:hover:not(:disabled) {
   background: var(--sidebar-item-hover);
-  border-color: rgba(124, 165, 142, 0.4);
-}
-
-.model-chip:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+  border-color: var(--border-light);
+  color: var(--text-secondary);
 }
 
-.model-chip-icon {
-  font-size: 0.875rem;
-  line-height: 1;
+.toolbar-icon-btn:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
 }
 
-.model-chip-name {
-  max-width: 400px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.toolbar-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.model-chip-caret {
-  width: 14px;
-  height: 14px;
-  color: inherit;
-}
+.toolbar-icon-btn svg { width: 16px; height: 16px; }
+.toolbar-icon-btn.listening { color: var(--color-danger); animation: pulse 1.5s ease-in-out infinite; }
 
-.model-selector-wrapper {
-  position: relative;
-}
+/* ── Attach menu ─────────────────────────────────────────── */
+.attach-menu-wrapper { position: relative; }
 
-.model-dropdown-compact {
+.attach-menu {
   position: absolute;
   bottom: calc(100% + 0.5rem);
-  right: 0;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  left: 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   padding: 0.375rem;
-  min-width: 200px;
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 1000;
-  animation: fadeInUp 0.2s ease-out;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  min-width: 180px;
+  z-index: 200;
+  animation: fadeInUp 0.18s ease-out;
 }
 
-.model-search-container {
-  position: relative;
-  margin-bottom: 0.5rem;
-  padding: 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  border: 1px solid var(--border-light);
-}
-
-.model-search-input {
+.attach-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
   width: 100%;
-  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: var(--radius-sm);
   background: transparent;
-  border: none;
-  outline: none;
   color: var(--text-primary);
-  font-size: 0.875rem;
-  font-family: inherit;
-  border-radius: 4px;
-}
-
-.model-search-input::placeholder {
-  color: var(--text-secondary);
-  opacity: 0.6;
-}
-
-.model-search-icon {
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  color: var(--text-secondary);
-  pointer-events: none;
-}
-
-.model-search-clear {
-  position: absolute;
-  right: 2rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background: none;
   border: none;
-  color: var(--text-secondary);
   cursor: pointer;
-  padding: 0;
+  font-size: 0.8375rem;
+  font-family: inherit;
+  text-align: left;
+  transition: background var(--transition-fast);
+}
+.attach-menu-item:hover { background: var(--sidebar-item-hover); }
+.attach-menu-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
+
+/* ── Send button ─────────────────────────────────────────── */
+.send-btn {
+  width: 38px;
+  height: 38px;
+  min-width: 38px;
+  min-height: 38px;
+  border-radius: var(--radius-md);
+  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  cursor: pointer;
   transition: all var(--transition-fast);
+  flex-shrink: 0;
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
 }
 
-.model-search-clear:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
-}
-
-.model-options-container {
-  max-height: 200px;
-  overflow-y: auto;
+.send-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
 }
 
-.model-option-compact {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-primary);
-  border: none;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  text-align: left;
-  font-size: 0.8125rem;
-  font-family: inherit;
-}
+.send-btn svg { width: 16px; height: 16px; }
 
-.model-option-compact:hover {
-  background: var(--sidebar-item-hover);
+.send-btn.ready {
+  background: var(--accent-gradient);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(124,165,142,0.35);
 }
 
-.model-option-compact.active {
-  background: rgba(124, 165, 142, 0.15);
-  color: #7ca58e;
-  font-weight: 600;
+.send-btn.ready:hover {
+  box-shadow: 0 4px 14px rgba(124,165,142,0.45);
+  transform: translateY(-1px);
 }
 
-body.light .model-option-compact:hover {
-  background: rgba(0, 0, 0, 0.05);
+.send-btn.ready:active {
+  transform: translateY(0);
 }
 
-body.light .model-option-compact.active {
-  background: rgba(124, 165, 142, 0.2);
-  color: #5a8269;
+.send-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-/* Voice button active state */
-.input-icon-btn.listening {
-  color: #ef4444;
-  animation: pulse 1.5s ease-in-out infinite;
+.send-btn.stop-btn {
+  background: var(--color-danger);
+  color: #fff;
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+.send-btn.stop-btn:hover {
+  box-shadow: 0 4px 12px rgba(239,68,68,0.4);
 }
 
+/* ── Animations ──────────────────────────────────────────── */
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+@keyframes pulse {
+  0%,100% { opacity: 1; }
+  50%     { opacity: 0.45; }
 }
 
-/* Responsive */
+/* ── Mobile ──────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .chat-input-container {
-    padding: 0.5rem;
+    padding: 0 0.5rem 1rem;
   }
-  
-  .chat-input-inner {
-    max-width: 100%;
-  }
-  
-  .chatbar-model-row {
-    justify-content: flex-start;
-    margin-bottom: 0.15rem;
-    padding-left: 0;
-  }
-  
-  .chat-input-wrapper-modern {
-    padding: 0.625rem;
-    min-height: 140px;
-    border-radius: 14px;
-  }
-  
-  .chat-input-modern {
-    font-size: 1rem; /* Prevent zoom on iOS */
-    min-height: 24px;
+
+  .chat-textarea {
+    font-size: 1rem;
   }
-  
-  .chatbar-bottom {
-    flex-wrap: nowrap;
-    gap: 0.375rem;
+
+  .mode-pill {
+    padding: 0.35rem 0.5rem;
+    font-size: 0.75rem;
   }
-  
-  .chatbar-left,
-  .chatbar-right {
-    gap: 0.375rem;
+
+  .mode-pill-label {
+    display: none;
   }
-  
-  .input-icon-btn {
-    width: 36px;
-    height: 36px;
+
+  .mode-pill-icon {
+    font-size: 0.75rem;
   }
-  
-  .send-btn-modern {
+
+  /* Ensure 44px minimum touch targets */
+  .toolbar-icon-btn {
     width: 40px;
     height: 40px;
+    min-width: 40px;
+    min-height: 40px;
   }
-  
-  .model-chip {
-    font-size: 0.75rem;
-    padding: 0.3rem 0.6rem;
-  }
-  
-  .image-preview-above {
-    margin-bottom: 0.375rem;
+
+  .send-btn {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
   }
-  
-  .attach-menu {
-    bottom: calc(100% + 0.5rem);
-    min-width: 200px;
+
+  .voice-select {
+    height: 40px;
+    min-height: 40px;
+    padding: 0.3rem 0.65rem;
   }
-  
+
   .model-dropdown-compact {
     position: fixed;
-    top: auto;
     bottom: 0;
     left: 0;
     right: 0;
-    width: 100vw;
-    height: 70vh;
-    max-height: none;
-    border-radius: 20px 20px 0 0;
+    top: auto;
+    width: 100%;
+    max-height: 65vh;
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     border: none;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
-    animation: slideUp 0.3s ease-out;
-    padding: 1rem;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
+    animation: slideUp 0.25s ease-out;
   }
-  
-  .model-search-container {
-    margin-bottom: 1rem;
-    padding: 0.75rem;
-  }
-  
-  .model-search-input {
-    font-size: 1rem;
-    padding: 0.75rem 3rem 0.75rem 1rem;
-  }
-  
-  .model-search-icon {
-    right: 0.75rem;
-  }
-  
-  .model-search-clear {
-    right: 2.5rem;
+
+  .model-option-compact {
+    padding: 0.65rem;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
   }
-  
-  .model-options-container {
-    max-height: calc(70vh - 120px);
+
+  .attach-menu-item {
+    min-height: 44px;
+    padding: 0.75rem;
+    display: flex;
+    align-items: center;
   }
 }
 
-/* Generation Options Button */
-.generation-options-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-fast);
-  background: transparent;
-  color: var(--text-secondary);
-  border: 1px solid transparent;
-  cursor: pointer;
-  flex-shrink: 0;
-  margin-left: 0.5rem;
-}
+@media (max-width: 480px) {
+  .chat-input-container {
+    padding: 0 0.375rem 0.875rem;
+  }
 
-.generation-options-btn:hover {
-  background: var(--sidebar-item-hover);
-  border-color: var(--border-color);
-  color: var(--text-primary);
-  transform: rotate(45deg);
+  .mode-pills {
+    gap: 0.125rem;
+    padding: 0.5rem 0.5rem 0.3rem;
+  }
+
+  .input-toolbar {
+    padding: 0.5rem 0.5rem;
+    gap: 0.25rem;
+  }
 }
 
-.generation-options-btn svg {
-  width: 18px;
-  height: 18px;
+@keyframes slideUp {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
 }
diff --git a/react-app/src/components/ChatInput.jsx b/react-app/src/components/ChatInput.jsx
index aa132d1..74b6f9f 100644
--- a/react-app/src/components/ChatInput.jsx
+++ b/react-app/src/components/ChatInput.jsx
@@ -2,6 +2,15 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useSpeech } from '../hooks/useSpeech';
 import './ChatInput.css';
 
+const MODES = [
+  { id: 'chat',    label: 'Chat',    icon: '💬' },
+  { id: 'imagine', label: 'Image',   icon: '🖼️' },
+  { id: 'video',   label: 'Video',   icon: '🎬' },
+  { id: 'audio',   label: 'Audio',   icon: '🎵' },
+];
+
+const VOICES = ['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer'];
+
 const ChatInput = ({
   onSend,
   isGenerating,
@@ -9,19 +18,23 @@ const ChatInput = ({
   setIsUserTyping = () => {},
   onGenerateImage,
   onGenerateVideo,
+  onGenerateAudio,
   onModeChange,
   selectedModel,
   selectedImageModel,
   selectedVideoModel,
+  selectedAudioModel,
   mode = 'chat',
   models = {},
   imageModels = {},
   videoModels = {},
+  audioModels = {},
   modelsLoaded = false,
   onModelChange,
   onImageModelChange,
   onVideoModelChange,
-  onOpenGenerationOptions
+  onAudioModelChange,
+  onOpenGenerationOptions,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [isAttachMenuOpen, setIsAttachMenuOpen] = useState(false);
@@ -29,6 +42,7 @@ const ChatInput = ({
   const [selectedAttachment, setSelectedAttachment] = useState(null);
   const [modelSearchTerm, setModelSearchTerm] = useState('');
   const [isDragging, setIsDragging] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState('nova');
   const inputRef = useRef(null);
   const attachMenuRef = useRef(null);
   const modelDropdownRef = useRef(null);
@@ -36,143 +50,104 @@ const ChatInput = ({
   const dropZoneRef = useRef(null);
   const { isListening, startListening, stopListening, hasSpeechRecognition } = useSpeech();
 
-  const isImagineMode = inputValue.includes('/imagine');
-  const isCanvasMode = inputValue.includes('/code');
-  const isVideoMode = inputValue.includes('/video');
-  
-  // Determine active model based on mode
   const getActiveModelId = () => {
     if (mode === 'imagine') return selectedImageModel;
-    if (mode === 'video') return selectedVideoModel;
+    if (mode === 'video')   return selectedVideoModel;
+    if (mode === 'audio')   return selectedAudioModel;
     return selectedModel;
   };
-  
+
   const getActiveModelsMap = () => {
     if (mode === 'imagine') return imageModels;
-    if (mode === 'video') return videoModels;
+    if (mode === 'video')   return videoModels;
+    if (mode === 'audio')   return audioModels;
     return models;
   };
-  
-  const activeModelId = getActiveModelId();
-  const activeModelsMap = getActiveModelsMap();
-  const modelLabel = activeModelsMap?.[activeModelId]?.description || activeModelsMap?.[activeModelId]?.name || activeModelId || 'Select model';
 
-  const handleModelBadgeClick = () => {
-    if (!modelsLoaded) return;
-    setIsModelDropdownOpen(!isModelDropdownOpen);
-  };
-
-  const handleModelSelect = (modelId) => {
-    if (mode === 'imagine') {
-      onImageModelChange?.(modelId);
-    } else if (mode === 'video') {
-      onVideoModelChange?.(modelId);
-    } else {
-      onModelChange?.(modelId);
-    }
-    setIsModelDropdownOpen(false);
-  };
+  const activeModelId  = getActiveModelId();
+  const activeModelsMap = getActiveModelsMap();
+  const modelLabel = activeModelsMap?.[activeModelId]?.description
+    || activeModelsMap?.[activeModelId]?.name
+    || activeModelId
+    || 'Select model';
 
+  // Auto-resize textarea
   useEffect(() => {
-    const textarea = inputRef.current;
-    if (textarea) {
-      textarea.style.height = 'auto';
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    }
+    const ta = inputRef.current;
+    if (ta) { ta.style.height = 'auto'; ta.style.height = `${ta.scrollHeight}px`; }
   }, [inputValue]);
 
   useEffect(() => {
-    if (isListening) {
-      setInputValue('Listening...');
-    } else if (inputValue === 'Listening...') {
-      setInputValue('');
-    }
-  }, [isListening, inputValue]);
+    if (isListening) setInputValue('Listening…');
+    else if (inputValue === 'Listening…') setInputValue('');
+  }, [isListening]);
 
-  // Close attach menu when clicking outside the menu area
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (attachMenuRef.current && !attachMenuRef.current.contains(event.target)) {
-        setIsAttachMenuOpen(false);
-      }
-      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target)) {
-        setIsModelDropdownOpen(false);
-      }
+    const handleClickOutside = (e) => {
+      if (attachMenuRef.current && !attachMenuRef.current.contains(e.target)) setIsAttachMenuOpen(false);
+      if (modelDropdownRef.current && !modelDropdownRef.current.contains(e.target)) setIsModelDropdownOpen(false);
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // Auto-focus input on mount and after sending
-  useEffect(() => {
+  useEffect(() => { inputRef.current?.focus(); }, []);
+
+  const handleModeChange = (newMode) => {
+    if (onModeChange) onModeChange(newMode);
+    setInputValue('');
     inputRef.current?.focus();
-  }, []);
+  };
+
+  const handleModelSelect = (modelId) => {
+    if (mode === 'imagine')     onImageModelChange?.(modelId);
+    else if (mode === 'video')  onVideoModelChange?.(modelId);
+    else if (mode === 'audio')  onAudioModelChange?.(modelId);
+    else                        onModelChange?.(modelId);
+    setIsModelDropdownOpen(false);
+  };
 
   const handleSend = () => {
-    const trimmedInput = inputValue.trim();
-    if ((trimmedInput || selectedAttachment) && !isListening) {
-      if (inputValue.trim().startsWith('/imagine ')) {
-        const prompt = inputValue.trim().substring(9);
-        if (prompt && onGenerateImage) {
-          onGenerateImage(prompt);
-          setInputValue('');
-          setSelectedAttachment(null);
-          setIsUserTyping(false);
-          // Reset to chat mode after sending
-          if (onModeChange) {
-            onModeChange('chat');
-          }
-          // Refocus input after sending
-          setTimeout(() => inputRef.current?.focus(), 0);
-          return;
-        }
-      }
+    const trimmed = inputValue.trim();
+    if ((!trimmed && !selectedAttachment) || isListening || isGenerating) return;
 
-      if (inputValue.trim().startsWith('/video ')) {
-        const prompt = inputValue.trim().substring(7);
-        if (prompt && onGenerateVideo) {
-          onGenerateVideo(prompt);
-          setInputValue('');
-          setSelectedAttachment(null);
-          setIsUserTyping(false);
-          // Reset to chat mode after sending
-          if (onModeChange) {
-            onModeChange('chat');
-          }
-          // Refocus input after sending
-          setTimeout(() => inputRef.current?.focus(), 0);
-          return;
-        }
-      }
+    if (mode === 'imagine' && trimmed) {
+      onGenerateImage?.(trimmed);
+      setInputValue('');
+      setSelectedAttachment(null);
+      setIsUserTyping(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+      return;
+    }
 
-      // Pass both text and image data if present
-      onSend({
-        text: inputValue,
-        attachment: selectedAttachment
-      });
-      
+    if (mode === 'video' && trimmed) {
+      onGenerateVideo?.(trimmed);
       setInputValue('');
-      if (selectedAttachment) {
-        if (fileInputRef.current) {
-          fileInputRef.current.value = '';
-        }
-      }
       setSelectedAttachment(null);
       setIsUserTyping(false);
-      // Reset to chat mode after sending
-      if (onModeChange) {
-        onModeChange('chat');
-      }
-      // Refocus input after sending
       setTimeout(() => inputRef.current?.focus(), 0);
+      return;
     }
-  };
 
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      handleSend();
+    if (mode === 'audio' && trimmed) {
+      onGenerateAudio?.(trimmed, { voice: selectedVoice, model: activeModelId });
+      setInputValue('');
+      setSelectedAttachment(null);
+      setIsUserTyping(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+      return;
     }
+
+    onSend({ text: inputValue, attachment: selectedAttachment });
+    setInputValue('');
+    if (selectedAttachment && fileInputRef.current) fileInputRef.current.value = '';
+    setSelectedAttachment(null);
+    setIsUserTyping(false);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
     setIsUserTyping(true);
   };
 
@@ -183,152 +158,74 @@ const ChatInput = ({
       startListening((transcript) => {
         setInputValue(transcript);
         setIsUserTyping(false);
-        onSend({ text: transcript });
+        if (mode === 'chat') onSend({ text: transcript });
       });
     }
   };
 
-  const handleFileUpload = () => {
-    fileInputRef.current?.click();
-    setIsAttachMenuOpen(false);
-  };
-
   const handleFileChange = (event) => {
     const file = event.target.files?.[0];
     if (!file) return;
-
     const reader = new FileReader();
     reader.onload = (e) => {
       const result = typeof e.target.result === 'string' ? e.target.result : '';
-      const commaIndex = result.indexOf(',');
-      const base64Data = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
+      const commaIdx = result.indexOf(',');
+      const base64 = commaIdx >= 0 ? result.slice(commaIdx + 1) : result;
       const isImage = file.type.startsWith('image/');
-
-      setSelectedAttachment({
-        file,
-        preview: isImage ? result : null,
-        base64: base64Data,
-        name: file.name,
-        mimeType: file.type || 'application/octet-stream',
-        size: file.size,
-        isImage
-      });
+      setSelectedAttachment({ file, preview: isImage ? result : null, base64, name: file.name, mimeType: file.type || 'application/octet-stream', size: file.size, isImage });
     };
     reader.readAsDataURL(file);
+    setIsAttachMenuOpen(false);
   };
 
-  const handlePaste = (event) => {
-    const items = event.clipboardData?.items;
+  const handlePaste = (e) => {
+    const items = e.clipboardData?.items;
     if (!items) return;
-
     for (let i = 0; i < items.length; i++) {
       const item = items[i];
       if (item.type.startsWith('image/')) {
-        event.preventDefault();
+        e.preventDefault();
         const file = item.getAsFile();
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            const result = typeof e.target.result === 'string' ? e.target.result : '';
-            const commaIndex = result.indexOf(',');
-            const base64Data = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
-
-            setSelectedAttachment({
-              file,
-              preview: result,
-              base64: base64Data,
-              name: file.name || 'pasted-image.png',
-              mimeType: file.type || 'image/png',
-              size: file.size,
-              isImage: true
-            });
-          };
-          reader.readAsDataURL(file);
-        }
+        if (!file) break;
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          const result = typeof ev.target.result === 'string' ? ev.target.result : '';
+          const commaIdx = result.indexOf(',');
+          setSelectedAttachment({ file, preview: result, base64: commaIdx >= 0 ? result.slice(commaIdx + 1) : result, name: file.name || 'pasted-image.png', mimeType: file.type || 'image/png', size: file.size, isImage: true });
+        };
+        reader.readAsDataURL(file);
         break;
       }
     }
   };
 
-  const handleDragOver = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.currentTarget === dropZoneRef.current) {
-      setIsDragging(false);
-    }
-  };
-
-  const handleDrop = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setIsDragging(false);
-
-    const files = event.dataTransfer?.files;
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
+  const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); };
+  const handleDragLeave = (e) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === dropZoneRef.current) setIsDragging(false); };
+  const handleDrop = (e) => {
+    e.preventDefault(); e.stopPropagation(); setIsDragging(false);
+    const file = e.dataTransfer?.files?.[0];
+    if (!file) return;
     const reader = new FileReader();
-    reader.onload = (e) => {
-      const result = typeof e.target.result === 'string' ? e.target.result : '';
-      const commaIndex = result.indexOf(',');
-      const base64Data = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
+    reader.onload = (ev) => {
+      const result = typeof ev.target.result === 'string' ? ev.target.result : '';
+      const commaIdx = result.indexOf(',');
       const isImage = file.type.startsWith('image/');
-
-      setSelectedAttachment({
-        file,
-        preview: isImage ? result : null,
-        base64: base64Data,
-        name: file.name,
-        mimeType: file.type || 'application/octet-stream',
-        size: file.size,
-        isImage
-      });
+      setSelectedAttachment({ file, preview: isImage ? result : null, base64: commaIdx >= 0 ? result.slice(commaIdx + 1) : result, name: file.name, mimeType: file.type || 'application/octet-stream', size: file.size, isImage });
     };
     reader.readAsDataURL(file);
   };
 
-  const removeSelectedAttachment = () => {
-    setSelectedAttachment(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleImageGen = () => {
-    setInputValue('/imagine ');
-    setIsAttachMenuOpen(false);
-    if (onModeChange) {
-      onModeChange('imagine');
-    }
-    inputRef.current?.focus();
-  };
-
-  const handleVideoGen = () => {
-    setInputValue('/video ');
-    setIsAttachMenuOpen(false);
-    if (onModeChange) {
-      onModeChange('video');
-    }
-    inputRef.current?.focus();
+  const getPlaceholder = () => {
+    if (mode === 'imagine') return 'Describe the image you want to create…';
+    if (mode === 'video')   return 'Describe the video you want to generate…';
+    if (mode === 'audio')   return 'Enter text to convert to speech…';
+    return 'Ask anything…';
   };
 
-  const handleCanvas = () => {
-    setInputValue('/code ');
-    setIsAttachMenuOpen(false);
-    if (onModeChange) {
-      onModeChange('code');
-    }
-    inputRef.current?.focus();
-  };
+  const canSend = (inputValue.trim() || selectedAttachment) && !isGenerating && !isListening;
 
   return (
-    <footer 
+    <footer
       className="chat-input-container"
       ref={dropZoneRef}
       onDragOver={handleDragOver}
@@ -339,292 +236,219 @@ const ChatInput = ({
         <div className="drop-overlay">
           <div className="drop-box">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
+              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
             </svg>
-            <span>Drop your file here</span>
+            <span>Drop file to attach</span>
           </div>
         </div>
       )}
+
       <div className="chat-input-inner">
-        {/* Image Preview Above Input */}
+        {/* Attachment preview */}
         {selectedAttachment && (
-          <div className="image-preview-above">
-            <div className="image-preview-wrapper">
+          <div className="attachment-preview-row">
+            <div className="attachment-chip">
               {selectedAttachment.isImage && selectedAttachment.preview ? (
-                <img src={selectedAttachment.preview} alt="Preview" className="image-preview-large" />
+                <img src={selectedAttachment.preview} alt="Preview" className="attachment-chip-thumb" />
               ) : (
-                <div className="file-preview-large">
+                <div className="attachment-chip-icon">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                    <path d="M14 2v6h6" />
-                    <path d="M16 13H8" />
-                    <path d="M16 17H8" />
-                    <path d="M10 9H8" />
+                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                    <path d="M14 2v6h6"/>
                   </svg>
-                  <span className="file-preview-ext">
-                    {selectedAttachment.name?.split('.').pop()?.toUpperCase() || 'FILE'}
-                  </span>
                 </div>
               )}
-              <button className="image-preview-remove-large" onClick={removeSelectedAttachment} title="Remove attachment">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <line x1="18" y1="6" x2="6" y2="18"/>
-                  <line x1="6" y1="6" x2="18" y2="18"/>
-                </svg>
+              <span className="attachment-chip-name">{selectedAttachment.name}</span>
+              <button className="attachment-chip-remove" onClick={() => { setSelectedAttachment(null); if (fileInputRef.current) fileInputRef.current.value = ''; }} title="Remove">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </button>
-              <div className="image-preview-name">{selectedAttachment.name}</div>
             </div>
           </div>
         )}
-        
-        <div className="chat-input-wrapper-modern">
-          <div className="chatbar-top">
-            <div className="chatbar-model-row">
+
+        <div className="input-card">
+          {/* Mode pills */}
+          <div className="mode-pills" role="tablist" aria-label="Chat modes">
+            {MODES.map(m => (
+              <button
+                key={m.id}
+                type="button"
+                className={`mode-pill ${mode === m.id ? 'active' : ''}`}
+                onClick={() => handleModeChange(m.id)}
+                role="tab"
+                aria-selected={mode === m.id}
+                aria-label={`${m.label} mode`}
+                title={`Switch to ${m.label} mode`}
+              >
+                <span className="mode-pill-icon">{m.icon}</span>
+                <span className="mode-pill-label">{m.label}</span>
+              </button>
+            ))}
+          </div>
+
+          {/* Text area */}
+          <textarea
+            ref={inputRef}
+            id="messageInput"
+            className="chat-textarea"
+            value={inputValue}
+            onChange={(e) => { setInputValue(e.target.value); setIsUserTyping(e.target.value.length > 0); }}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            placeholder={getPlaceholder()}
+            rows="1"
+            disabled={isGenerating || isListening}
+            aria-label="Message input"
+            aria-describedby="mode-description"
+          />
+
+          {/* Bottom toolbar */}
+          <div className="input-toolbar">
+            <div className="toolbar-left">
+              {/* Model selector */}
               <div className="model-selector-wrapper" ref={modelDropdownRef}>
                 <button
                   type="button"
                   className="model-chip"
-                  onClick={handleModelBadgeClick}
+                  onClick={() => { if (modelsLoaded) setIsModelDropdownOpen(v => !v); }}
                   disabled={!modelsLoaded}
-                  title={modelsLoaded ? modelLabel : 'Loading models...'}
+                  title={modelLabel}
                 >
-                  <span className="model-chip-icon" aria-hidden="true">
-                    {mode === 'imagine' ? '🖼️' : mode === 'video' ? '🎬' : '🌀'}
-                  </span>
+                  <svg className="model-chip-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/>
+                  </svg>
                   <span className="model-chip-name">{modelLabel}</span>
                   <svg className="model-chip-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M6 9l6 6 6-6" />
+                    <path d="M6 9l6 6 6-6"/>
                   </svg>
                 </button>
                 {isModelDropdownOpen && (
                   <div className="model-dropdown-compact">
                     <div className="model-search-container">
+                      <svg className="model-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                       <input
                         type="text"
                         className="model-search-input"
-                        placeholder="Search models..."
+                        placeholder="Search models…"
                         value={modelSearchTerm}
                         onChange={(e) => setModelSearchTerm(e.target.value)}
                         onClick={(e) => e.stopPropagation()}
+                        autoFocus
                       />
                       {modelSearchTerm && (
-                        <button
-                          type="button"
-                          className="model-search-clear"
-                          onClick={() => setModelSearchTerm('')}
-                          aria-label="Clear search"
-                        >
-                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <line x1="18" y1="6" x2="6" y2="18"/>
-                            <line x1="6" y1="6" x2="18" y2="18"/>
-                          </svg>
+                        <button type="button" className="model-search-clear" onClick={() => setModelSearchTerm('')}>
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                         </button>
                       )}
-                      <svg className="model-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <circle cx="11" cy="11" r="8"/>
-                        <path d="M21 21l-4.35-4.35"/>
-                      </svg>
                     </div>
                     <div className="model-options-container">
                       {Object.entries(activeModelsMap)
-                        .filter(([key, model]) => 
-                          (model.description || model.name || key).toLowerCase().includes(modelSearchTerm.toLowerCase())
-                        )
-                        .map(([key, model]) => (
+                        .filter(([k, m]) => (m.description || m.name || k).toLowerCase().includes(modelSearchTerm.toLowerCase()))
+                        .map(([k, m]) => (
                           <button
-                            key={key}
+                            key={k}
                             type="button"
-                            className={`model-option-compact ${activeModelId === key ? 'active' : ''}`}
-                            onClick={() => handleModelSelect(key)}
+                            className={`model-option-compact ${activeModelId === k ? 'active' : ''}`}
+                            onClick={() => handleModelSelect(k)}
                           >
-                            {model.description || model.name || key}
+                            <span className="model-option-name">{m.description || m.name || k}</span>
+                            {activeModelId === k && (
+                              <svg className="model-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+                            )}
                           </button>
                         ))}
                     </div>
                   </div>
                 )}
               </div>
-              {(mode === 'imagine' || mode === 'video') && onOpenGenerationOptions && (
-                <button
-                  type="button"
-                  className="generation-options-btn"
-                  onClick={() => onOpenGenerationOptions(mode)}
-                  title="Generation options"
+
+              {/* Voice selector for audio mode */}
+              {mode === 'audio' && (
+                <select
+                  className="voice-select"
+                  value={selectedVoice}
+                  onChange={(e) => setSelectedVoice(e.target.value)}
+                  title="Select voice"
+                  aria-label="Select voice for audio generation"
                 >
+                  {VOICES.map(v => <option key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</option>)}
+                </select>
+              )}
+
+              {/* Generation options for image/video */}
+              {(mode === 'imagine' || mode === 'video') && onOpenGenerationOptions && (
+                <button type="button" className="toolbar-icon-btn" onClick={() => onOpenGenerationOptions(mode)} title="Generation options">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <circle cx="12" cy="12" r="3"/>
-                    <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"/>
+                    <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>
+                    <circle cx="8" cy="6" r="2" fill="currentColor" stroke="none"/>
+                    <circle cx="16" cy="12" r="2" fill="currentColor" stroke="none"/>
+                    <circle cx="10" cy="18" r="2" fill="currentColor" stroke="none"/>
                   </svg>
                 </button>
               )}
-            </div>
 
-            {(isImagineMode || isCanvasMode || isVideoMode) && (
-              <div className="chatbar-tags">
-                {isImagineMode && (
-                  <div className="image-mode-tag">
-                    <svg className="image-mode-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <rect x="3" y="3" width="18" height="18" rx="2"/>
-                      <circle cx="8.5" cy="8.5" r="1.5"/>
-                      <path d="M21 15l-5-5L5 21"/>
-                    </svg>
-                    <span>Image</span>
-                  </div>
-                )}
-                {isVideoMode && (
-                  <div className="video-mode-tag">
-                    <svg className="video-mode-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <rect x="2" y="4" width="20" height="16" rx="2"/>
-                      <polygon points="10,9 16,12 10,15"/>
-                    </svg>
-                    <span>Video</span>
-                  </div>
-                )}
-                {isCanvasMode && (
-                  <div className="canvas-mode-tag">
-                    <svg className="canvas-mode-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
-                      <path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/>
-                    </svg>
-                    <span>Canvas</span>
-                  </div>
-                )}
-              </div>
-            )}
-            <textarea
-              ref={inputRef}
-              id="messageInput"
-              value={
-                isImagineMode
-                  ? inputValue.replace('/imagine ', '').replace('/imagine', '')
-                  : isVideoMode
-                    ? inputValue.replace('/video ', '').replace('/video', '')
-                    : isCanvasMode
-                      ? inputValue.replace('/code ', '').replace('/code', '')
-                      : inputValue
-              }
-              onChange={(event) => {
-                const value = event.target.value;
-                if (isImagineMode) {
-                  setInputValue('/imagine ' + value);
-                } else if (isVideoMode) {
-                  setInputValue('/video ' + value);
-                } else if (isCanvasMode) {
-                  setInputValue('/code ' + value);
-                } else {
-                  setInputValue(value);
-                }
-                setIsUserTyping(value.length > 0);
-                if (onModeChange) {
-                  if (isImagineMode) {
-                    onModeChange('imagine');
-                  } else if (isVideoMode) {
-                    onModeChange('video');
-                  } else if (isCanvasMode) {
-                    onModeChange('code');
-                  } else {
-                    onModeChange('chat');
-                  }
-                }
-              }}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePaste}
-              placeholder="Type your message here..."
-              rows="1"
-              className="chat-input-modern"
-              disabled={isGenerating || isListening}
-            />
-          </div>
-
-          <div className="chatbar-bottom">
-            <div className="chatbar-left">
+              {/* File attach */}
               <div className="attach-menu-wrapper" ref={attachMenuRef}>
                 <button
-                  className="input-icon-btn"
-                  onClick={() => setIsAttachMenuOpen(!isAttachMenuOpen)}
-                  title="Attach"
                   type="button"
+                  className="toolbar-icon-btn"
+                  onClick={() => setIsAttachMenuOpen(v => !v)}
+                  title="Attach file"
+                  aria-label="Attach file"
+                  aria-expanded={isAttachMenuOpen}
                 >
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M12 5v14M5 12h14" />
+                    <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
                   </svg>
                 </button>
                 {isAttachMenuOpen && (
                   <div className="attach-menu">
-                    <button className="attach-menu-item" onClick={handleFileUpload}>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
-                      </svg>
+                    <button className="attach-menu-item" onClick={() => { fileInputRef.current?.click(); setIsAttachMenuOpen(false); }}>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>
                       <span>Upload File</span>
                     </button>
-                    <button className="attach-menu-item" onClick={handleImageGen}>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <rect x="3" y="3" width="18" height="18" rx="2" />
-                        <circle cx="8.5" cy="8.5" r="1.5" />
-                        <path d="M21 15l-5-5L5 21" />
-                      </svg>
-                      <span>Image Generation</span>
-                    </button>
-                    <button className="attach-menu-item" onClick={handleVideoGen}>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <rect x="2" y="4" width="20" height="16" rx="2" />
-                        <polygon points="10,9 16,12 10,15" />
-                      </svg>
-                      <span>Video Generation</span>
-                    </button>
-                    <button className="attach-menu-item" onClick={handleCanvas}>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-                        <path d="M14 2v6h6M16 13H8m8 4H8m2-8H8" />
-                      </svg>
-                      <span>Canvas (Code)</span>
-                    </button>
                   </div>
                 )}
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="*/*"
-                  style={{ display: 'none' }}
-                  onChange={handleFileChange}
-                />
+                <input ref={fileInputRef} type="file" accept="*/*" style={{ display: 'none' }} onChange={handleFileChange} />
               </div>
             </div>
 
-            <div className="chatbar-right">
-              {hasSpeechRecognition && (
+            <div className="toolbar-right">
+              {hasSpeechRecognition && mode === 'chat' && (
                 <button
                   type="button"
-                  className={`input-icon-btn ${isListening ? 'listening' : ''}`}
+                  className={`toolbar-icon-btn ${isListening ? 'listening' : ''}`}
                   onClick={handleMicClick}
                   disabled={isGenerating}
                   title={isListening ? 'Stop listening' : 'Voice input'}
                 >
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-                    <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
+                    <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
+                    <path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/>
                   </svg>
                 </button>
               )}
               {isGenerating ? (
-                <button className="send-btn-modern stop-btn" onClick={onStop} title="Stop generation" type="button">
-                  <svg viewBox="0 0 20 20" fill="currentColor">
-                    <rect x="5" y="5" width="10" height="10" rx="2" />
-                  </svg>
+                <button
+                  className="send-btn stop-btn"
+                  onClick={onStop}
+                  title="Stop generation"
+                  aria-label="Stop generation"
+                  type="button"
+                >
+                  <svg viewBox="0 0 20 20" fill="currentColor"><rect x="5" y="5" width="10" height="10" rx="2"/></svg>
                 </button>
               ) : (
                 <button
-                  className="send-btn-modern"
+                  className={`send-btn ${canSend ? 'ready' : ''}`}
                   onClick={handleSend}
-                  disabled={!inputValue.trim() && !selectedAttachment}
+                  disabled={!canSend}
                   title="Send message"
+                  aria-label="Send message"
                   type="button"
                 >
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M4.5 11.134a1 1 0 0 0 0 1.732l14 8a1 1 0 0 0 1.5-.866V3a1 1 0 0 0-1.5-.866l-14 8z" />
-                    <path d="M10 13l9-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>
                   </svg>
                 </button>
               )}
diff --git a/react-app/src/components/MessageArea.css b/react-app/src/components/MessageArea.css
index e10c710..e1676e5 100644
--- a/react-app/src/components/MessageArea.css
+++ b/react-app/src/components/MessageArea.css
@@ -57,10 +57,18 @@
   transition: all var(--transition-fast);
   background: transparent;
   color: var(--text-secondary);
+  border: 1px solid transparent;
 }
 
 .header-icon-btn:hover {
   background: var(--sidebar-item-hover);
+  color: var(--text-primary);
+}
+
+.header-icon-btn:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
 }
 
 .header-icon-btn svg {
@@ -131,6 +139,13 @@
 
 .user-dropdown-item:hover {
   background: var(--sidebar-item-hover);
+  color: var(--text-primary);
+}
+
+.user-dropdown-item:focus-visible {
+  outline: none;
+  background: var(--sidebar-item-hover);
+  box-shadow: inset 0 0 0 1px var(--border-focus);
 }
 
 .accent-preview {
@@ -683,27 +698,113 @@ body.dark .reasoning-content {
   margin-top: 0.75rem;
 }
 
+/* ── Welcome screen ───────────────────────────────────────── */
 .welcome-screen {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  color: var(--text-primary);
-  padding: 2rem;
-  min-height: 200px;
+  padding: 3rem 2rem 2rem;
+  gap: 1.75rem;
+}
+
+.welcome-logo {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  background: var(--accent-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 20px rgba(124,165,142,0.35);
+  animation: fadeInScale 0.5s cubic-bezier(0.34,1.56,0.64,1);
 }
+.welcome-logo svg { width: 28px; height: 28px; color: #fff; }
 
 .welcome-text {
-  font-size: 2.5rem;
-  font-weight: 600;
-  background: linear-gradient(45deg, #b9f8cf, #aeead6, #ffd3f5, #ffb4c5);
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #b9f8cf 0%, #aef5d6 30%, #ffd3f5 70%, #ffb4c5 100%);
   background-size: 300% 300%;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin: 0;
-  animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), gradientFlow 8s ease infinite;
+  animation: fadeInScale 0.6s cubic-bezier(0.34,1.56,0.64,1), gradientFlow 8s ease infinite;
+}
+
+.welcome-sub {
+  font-size: 0.9375rem;
+  color: var(--text-muted);
+  margin: -0.75rem 0 0;
+  animation: fadeIn 0.8s ease-out 0.1s both;
+}
+
+.welcome-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.625rem;
+  max-width: 460px;
+  width: 100%;
+  animation: fadeIn 0.8s ease-out 0.2s both;
+}
+
+.welcome-feature-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  text-align: left;
+  transition: all var(--transition-fast);
+  cursor: default;
+}
+
+.welcome-feature-card:hover {
+  border-color: rgba(124,165,142,0.3);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
+  background: var(--bg-elevated);
+}
+
+body.light .welcome-feature-card {
+  background: #fff;
+  border-color: #e5e7eb;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+}
+
+body.light .welcome-feature-card:hover {
+  border-color: rgba(124,165,142,0.4);
+  box-shadow: 0 4px 12px rgba(124,165,142,0.1);
+}
+
+.welcome-feature-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.welcome-feature-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.welcome-feature-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.welcome-feature-desc {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  line-height: 1.3;
 }
 
 @keyframes gradientFlow {
@@ -979,14 +1080,21 @@ body.dark .reasoning-content {
 }
 
 .theme-card:hover {
-  border-color: var(--accent-gradient);
+  border-color: rgba(124,165,142,0.6);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
 }
 
+.theme-card:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
+}
+
 .theme-card.active {
-  border-color: var(--c3);
+  border-color: var(--brand-green);
   background: var(--sidebar-item-active);
+  box-shadow: var(--shadow-sm);
 }
 
 .theme-card-preview {
@@ -1631,31 +1739,144 @@ body.dark .error-details {
   box-shadow: none !important;
 }
 
-/* Image Generation Styles */
-.message-image-container {
-  margin-bottom: 0.5rem;
-  border-radius: 12px;
+/* ── Media cards (image / video / audio) ──────────────────── */
+.media-card {
+  margin-bottom: 0.75rem;
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  background: var(--bg-secondary);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  transition: all var(--transition-fast);
-  max-width: 400px;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
+  max-width: 480px;
+  animation: slideInFromLeft 0.3s ease-out;
 }
 
-.message-image-container:hover {
-  border-color: var(--c3);
+.media-card:hover {
+  border-color: var(--brand-magenta);
   box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }
 
-.message-image {
+.media-card-img {
   width: 100%;
-  height: auto;
   display: block;
-  max-width: 100%;
+  max-height: 420px;
   object-fit: contain;
-  max-height: 400px;
+  background: var(--bg-secondary);
+}
+
+.media-card-video {
+  width: 100%;
+  display: block;
+  max-height: 360px;
+  border-radius: 0;
+  background: #000;
+}
+
+.media-card-meta {
+  padding: 0.625rem 0.875rem;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.media-meta-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: 0.78rem;
+}
+.media-meta-label {
+  color: var(--text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.68rem;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+.media-meta-value {
+  color: var(--text-secondary);
+  word-break: break-word;
+}
+
+/* Audio card */
+.audio-card { max-width: 400px; }
+
+.audio-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+}
+
+.audio-card-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: var(--accent-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.audio-card-icon svg { width: 18px; height: 18px; color: #fff; }
+
+.audio-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.audio-card-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
+.audio-card-voice { font-size: 0.75rem; color: var(--text-muted); }
+
+.audio-player {
+  width: 100%;
+  height: 36px;
+  border-radius: 0;
+  border-top: 1px solid var(--border-light);
+  outline: none;
+  background: var(--bg-secondary);
+}
+
+.audio-transcript {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.625rem 0.875rem;
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+.audio-transcript-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+.audio-transcript-text {
+  font-size: 0.8375rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+/* Image Generation Styles — keep legacy for backwards compat */
+.message-image-container {
+  margin-bottom: 0.5rem;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  transition: all var(--transition-fast);
   max-width: 400px;
 }
+.message-image-container:hover { border-color: var(--brand-magenta); box-shadow: var(--shadow-md); }
+.message-image {
+  width: 100%; height: auto; display: block; max-width: 100%;
+  object-fit: contain; max-height: 400px;
+}
 
 .message-attachments {
   display: flex;
diff --git a/react-app/src/components/MessageArea.jsx b/react-app/src/components/MessageArea.jsx
index 94363aa..ea7d0ac 100644
--- a/react-app/src/components/MessageArea.jsx
+++ b/react-app/src/components/MessageArea.jsx
@@ -109,7 +109,45 @@ const MessageArea = ({ messages, isGenerating, isUserTyping, onRegenerate }) =>
     return (
       <main className="messages-area messages-area-empty">
         <div className="welcome-screen">
+          <div className="welcome-logo">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" strokeWidth="0" fill="currentColor" opacity="0.2"/>
+              <circle cx="12" cy="12" r="3" fill="currentColor"/>
+              <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/>
+            </svg>
+          </div>
           <h1 className="welcome-text" key={welcomeMessage}>{welcomeMessage}</h1>
+          <p className="welcome-sub">Powered by Pollinations AI — generate text, images, video & audio</p>
+          <div className="welcome-feature-grid">
+            <div className="welcome-feature-card">
+              <span className="welcome-feature-icon">💬</span>
+              <div className="welcome-feature-text">
+                <span className="welcome-feature-title">Chat</span>
+                <span className="welcome-feature-desc">GPT-4, Claude, Gemini & more</span>
+              </div>
+            </div>
+            <div className="welcome-feature-card">
+              <span className="welcome-feature-icon">🖼️</span>
+              <div className="welcome-feature-text">
+                <span className="welcome-feature-title">Images</span>
+                <span className="welcome-feature-desc">Flux, DALL·E & more</span>
+              </div>
+            </div>
+            <div className="welcome-feature-card">
+              <span className="welcome-feature-icon">🎬</span>
+              <div className="welcome-feature-text">
+                <span className="welcome-feature-title">Video</span>
+                <span className="welcome-feature-desc">AI-generated video clips</span>
+              </div>
+            </div>
+            <div className="welcome-feature-card">
+              <span className="welcome-feature-icon">🎵</span>
+              <div className="welcome-feature-text">
+                <span className="welcome-feature-title">Audio</span>
+                <span className="welcome-feature-desc">Text-to-speech, 6 voices</span>
+              </div>
+            </div>
+          </div>
         </div>
       </main>
     );
diff --git a/react-app/src/components/MessageBubble.jsx b/react-app/src/components/MessageBubble.jsx
index 58caea2..646c61e 100644
--- a/react-app/src/components/MessageBubble.jsx
+++ b/react-app/src/components/MessageBubble.jsx
@@ -1,80 +1,120 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MemoizedMessageContent from './MemoizedMessageContent';
 import ThinkingProcess from './ThinkingProcess';
 import TypewriterEffect from './TypewriterEffect';
 import MessageAttachments from './MessageAttachments';
 
-const MessageBubble = ({ 
-  message, 
-  displayContent, 
-  displayReasoning, 
-  isThinking, 
-  hasReasoning, 
-  attachmentsToRender, 
-  getAttachmentUrl, 
-  copyToClipboard, 
-  onRegenerate, 
+const MediaMeta = ({ label, value }) => value ? (
+  <div className="media-meta-row">
+    <span className="media-meta-label">{label}</span>
+    <span className="media-meta-value">{value}</span>
+  </div>
+) : null;
+
+const MessageBubble = ({
+  message,
+  displayContent,
+  displayReasoning,
+  isThinking,
+  hasReasoning,
+  attachmentsToRender,
+  getAttachmentUrl,
+  copyToClipboard,
+  onRegenerate,
   isGenerating,
   scrollToBottom
 }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    copyToClipboard(displayContent || message.content || '');
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
   return (
     <div className={`message-bubble ${message.role} ${message.isStreaming ? 'streaming' : ''} ${message.isError ? 'error' : ''}`}>
       <MessageAttachments attachments={attachmentsToRender} getAttachmentUrl={getAttachmentUrl} />
-      
+
+      {/* Generated image */}
       {message.imageUrl && (
-        <div className={`message-image-container ${!message.imageUrl.startsWith('data:') ? 'loading' : ''}`}>
+        <div className="media-card image-card">
           <img
             src={message.imageUrl}
             alt={message.imagePrompt || 'Generated image'}
-            className="message-image"
+            className="media-card-img"
             loading="lazy"
           />
-          {message.imagePrompt && (
-            <div className="image-prompt">
-              <strong>Prompt:</strong> {message.imagePrompt}
-            </div>
-          )}
-          {message.imageModel && (
-            <div className="image-model">
-              <strong>Model:</strong> {message.imageModel}
+          {(message.imagePrompt || message.imageModel) && (
+            <div className="media-card-meta">
+              <MediaMeta label="Prompt" value={message.imagePrompt} />
+              <MediaMeta label="Model" value={message.imageModel} />
             </div>
           )}
         </div>
       )}
 
+      {/* Generated video */}
       {message.videoUrl && (
-        <div className={`message-video-container ${!message.videoUrl.startsWith('data:') ? 'loading' : ''}`}>
+        <div className="media-card video-card">
           <video
             src={message.videoUrl}
-            className="message-video"
+            className="media-card-video"
             controls
             loop
             muted
             playsInline
           />
-          {message.videoPrompt && (
-            <div className="video-prompt">
-              <strong>Prompt:</strong> {message.videoPrompt}
+          {(message.videoPrompt || message.videoModel) && (
+            <div className="media-card-meta">
+              <MediaMeta label="Prompt" value={message.videoPrompt} />
+              <MediaMeta label="Model" value={message.videoModel} />
             </div>
           )}
-          {message.videoModel && (
-            <div className="video-model">
-              <strong>Model:</strong> {message.videoModel}
+        </div>
+      )}
+
+      {/* Generated audio */}
+      {message.audioUrl && (
+        <div className="media-card audio-card">
+          <div className="audio-card-header">
+            <div className="audio-card-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M9 18V5l12-2v13M9 18a3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3zM21 16a3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 013-3 3 3 0 013 3z"/>
+              </svg>
+            </div>
+            <div className="audio-card-info">
+              <span className="audio-card-title">Generated Audio</span>
+              {message.audioVoice && <span className="audio-card-voice">Voice: {message.audioVoice}</span>}
+            </div>
+          </div>
+          <audio
+            src={message.audioUrl}
+            controls
+            className="audio-player"
+          />
+          {message.audioText && (
+            <div className="audio-transcript">
+              <span className="audio-transcript-label">Text</span>
+              <span className="audio-transcript-text">{message.audioText}</span>
+            </div>
+          )}
+          {(message.audioModel) && (
+            <div className="media-card-meta">
+              <MediaMeta label="Model" value={message.audioModel} />
             </div>
           )}
         </div>
       )}
-      
+
+      {/* Assistant text content */}
       {message.role === 'assistant' ? (
         <>
           {hasReasoning && (
-            <ThinkingProcess 
-              isThinking={isThinking} 
-              content={displayReasoning} 
-            />
+            <ThinkingProcess isThinking={isThinking} content={displayReasoning} />
           )}
-          
+
           {message.isError ? (
             <div className="simple-error">
               <svg className="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -86,42 +126,48 @@ const MessageBubble = ({
             </div>
           ) : message.isStreaming ? (
             <div className="message-content streaming-content">
-              <TypewriterEffect
-                content={displayContent}
-                isStreaming={true}
-                onComplete={scrollToBottom}
-              />
+              <TypewriterEffect content={displayContent} isStreaming={true} onComplete={scrollToBottom} />
             </div>
-          ) : (
+          ) : displayContent ? (
             <div className="message-content">
               <MemoizedMessageContent content={displayContent} />
             </div>
-          )}
+          ) : null}
         </>
       ) : (
+        /* User message */
         <div className="message-content">
           {message.content ?? ''}
         </div>
       )}
-      
-      {message.role === 'assistant' && !message.isStreaming && !message.isError && (
+
+      {/* Message action bar (assistant only, not streaming, not error) */}
+      {message.role === 'assistant' && !message.isStreaming && !message.isError && (displayContent || message.imageUrl || message.videoUrl || message.audioUrl) && (
         <div className="message-actions">
-          <button
-            className="message-action-btn"
-            onClick={() => copyToClipboard(displayContent || message.content || '')}
-            title="Copy message"
-            aria-label="Copy message to clipboard"
-          >
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <rect x="9" y="9" width="13" height="13" rx="2"/>
-              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
-            </svg>
-            <span className="action-label">Copy</span>
-          </button>
+          {displayContent && (
+            <button
+              className={`message-action-btn ${copied ? 'copied' : ''}`}
+              onClick={handleCopy}
+              title="Copy message"
+              aria-label="Copy message to clipboard"
+            >
+              {copied ? (
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <polyline points="20 6 9 17 4 12"/>
+                </svg>
+              ) : (
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2"/>
+                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                </svg>
+              )}
+              <span className="action-label">{copied ? 'Copied!' : 'Copy'}</span>
+            </button>
+          )}
           <button
             className="message-action-btn"
             onClick={() => !isGenerating && onRegenerate()}
-            title="Regenerate response"
+            title="Regenerate"
             disabled={isGenerating}
             aria-label="Regenerate response"
           >
@@ -147,7 +193,7 @@ MessageBubble.propTypes = {
   copyToClipboard: PropTypes.func.isRequired,
   onRegenerate: PropTypes.func.isRequired,
   isGenerating: PropTypes.bool,
-  scrollToBottom: PropTypes.func
+  scrollToBottom: PropTypes.func,
 };
 
-export default MessageBubble;
\ No newline at end of file
+export default MessageBubble;
diff --git a/react-app/src/components/Sidebar.css b/react-app/src/components/Sidebar.css
index 659e6a4..15834aa 100644
--- a/react-app/src/components/Sidebar.css
+++ b/react-app/src/components/Sidebar.css
@@ -1,424 +1,287 @@
-/* sidebar.css - Sidebar navigation styles */
+/* Sidebar — visual overhaul */
 
-/* Overlay when sidebar is expanded */
 .sidebar-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background: rgba(0,0,0,0.45);
   z-index: 99;
-  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  animation: fadeIn 0.2s ease-out;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
 }
+body.light .sidebar-overlay { background: rgba(0,0,0,0.25); }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-body.light .sidebar-overlay {
-  background: rgba(0, 0, 0, 0.3);
-}
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
+/* ── Sidebar shell ────────────────────────────────────────── */
 .sidebar {
-  width: 72px;
+  width: 64px;
   height: 100vh;
-  background: var(--bg-primary);
-  border-right: none;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
   display: flex;
   flex-direction: column;
   position: fixed;
-  left: 0;
-  top: 0;
+  left: 0; top: 0;
   z-index: 100;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
   overflow: hidden;
 }
 
 .sidebar.expanded {
-  width: 320px;
-  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
+  width: 280px;
+  box-shadow: 4px 0 24px rgba(0,0,0,0.28);
   z-index: 101;
 }
 
-body.dark .sidebar {
-  background: #000;
-  border-right: none;
-}
-
-body.light .sidebar {
-  background: #fff;
-  border-right: none;
-}
-
-body.light .sidebar.expanded {
-  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
-}
+body.dark .sidebar  { background: #0d0d0d; border-right-color: rgba(212,251,228,0.07); }
+body.light .sidebar { background: #fafafa; border-right-color: #e5e7eb; }
+body.dark .sidebar.expanded  { box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
+body.light .sidebar.expanded { box-shadow: 4px 0 20px rgba(0,0,0,0.1); }
 
+/* ── Header ──────────────────────────────────────────────── */
 .sidebar-header {
-  padding: 1rem 0;
+  height: 56px;
+  padding: 0 0.75rem;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  justify-content: space-between;
   flex-shrink: 0;
+  border-bottom: 1px solid var(--sidebar-border);
 }
 
-.sidebar.expanded .sidebar-header {
-  flex-direction: row;
-  padding: 1rem;
-  gap: 0.75rem;
+.sidebar-logo {
+  display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
 }
 
-body.light .sidebar-header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+.sidebar-logo-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--accent-gradient);
+  flex-shrink: 0;
+  box-shadow: 0 0 8px rgba(124,165,142,0.6);
 }
 
-.sidebar-toggle-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
+.sidebar-logo-text {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  letter-spacing: -0.01em;
+}
+
+/* ── Icon buttons ─────────────────────────────────────────── */
+.sidebar-icon-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--transition-fast);
   background: transparent;
-  color: var(--text-secondary);
+  border: 1px solid transparent;
+  color: var(--text-muted);
   cursor: pointer;
-  border: none;
+  transition: all var(--transition-fast);
   flex-shrink: 0;
 }
-
-.sidebar-toggle-btn:hover {
+.sidebar-icon-btn:hover {
   background: var(--sidebar-item-hover);
   color: var(--text-primary);
+  border-color: transparent;
 }
-
-.sidebar-toggle-btn svg {
-  width: 20px;
-  height: 20px;
+.sidebar-icon-btn:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--border-focus);
 }
+.sidebar-icon-btn svg { width: 20px; height: 20px; }
+.sidebar-icon-btn.sm { width: 34px; height: 34px; border-radius: var(--radius-sm); }
+.sidebar-icon-btn.sm svg { width: 17px; height: 17px; }
 
-.sidebar-content {
-  padding: 0.5rem;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+.sidebar-toggle-icon { color: var(--text-secondary); }
 
+/* ── Narrow (collapsed) actions ──────────────────────────── */
 .sidebar-narrow-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0;
+  gap: 0.375rem;
+  padding: 0.75rem 0;
 }
 
+/* ── Expanded content ─────────────────────────────────────── */
 .sidebar-scrollable {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.sidebar-scrollable::-webkit-scrollbar {
-  width: 6px;
-}
-
-.sidebar-scrollable::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.sidebar-scrollable::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-}
-
-.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-body.light .sidebar-scrollable::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-body.light .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.sidebar-section {
-  margin-top: 1rem;
 }
+.sidebar-scrollable::-webkit-scrollbar { width: 4px; }
+.sidebar-scrollable::-webkit-scrollbar-track { background: transparent; }
+.sidebar-scrollable::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
 
-.sidebar-section-title {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: rgba(255, 255, 255, 0.4);
-  padding: 0.5rem 1rem;
-  margin: 0;
-}
-
-body.light .sidebar-section-title {
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.sidebar-btn {
-  width: 100%;
-  height: 44px;
-  border-radius: 12px;
+/* ── Actions section ──────────────────────────────────────── */
+.sidebar-actions {
+  padding: 0.75rem;
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.75rem;
-  padding: 0 1rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  border: 1px solid var(--border-color);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  position: relative;
-  overflow: hidden;
-}
-
-.sidebar-btn:hover {
-  background: var(--sidebar-item-hover);
-  color: var(--text-primary);
-  border-color: var(--border-color);
-}
-
-.sidebar-btn svg {
-  width: 20px;
-  height: 20px;
+  flex-direction: column;
+  gap: 0.5rem;
   flex-shrink: 0;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.sidebar-btn span {
-  white-space: nowrap;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid var(--sidebar-border);
 }
 
-/* When sidebar is collapsed, hide text smoothly */
-.sidebar:not(.expanded) .sidebar-btn span {
-  opacity: 0;
-  transform: translateX(-10px);
-  width: 0;
-  overflow: hidden;
-}
-
-/* When sidebar expands, show text with slide-in effect */
-.sidebar.expanded .sidebar-btn span {
-  opacity: 1;
-  transform: translateX(0);
-}
-.sidebar-control-row {
+.sidebar-new-chat-btn {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-}
-
-.sidebar-control-row .sidebar-btn {
-  flex: 1;
-}
-
-.sidebar-quick-actions {
-  display: flex;
-  gap: 0.35rem;
-}
-
-.sidebar-quick-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.6rem 0.875rem;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: inherit;
   cursor: pointer;
   transition: all var(--transition-fast);
 }
-
-.sidebar-quick-btn svg {
-  width: 20px;
-  height: 20px;
+.sidebar-new-chat-btn:hover {
+  background: var(--accent-gradient);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 2px 10px rgba(124,165,142,0.3);
 }
+.sidebar-new-chat-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
 
-.sidebar-quick-btn:hover {
-  background: var(--sidebar-item-hover);
-  border-color: var(--border-color);
-  color: var(--text-primary);
+.sidebar-icon-row {
+  display: flex;
+  gap: 0.375rem;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+/* ── Section title ───────────────────────────────────────── */
+.sidebar-section-title {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  margin: 0;
 }
 
-.sidebar-logo-full {
+/* ── Chat list ───────────────────────────────────────────── */
+.chat-list {
   flex: 1;
+  padding: 0.5rem 0.625rem;
   display: flex;
-  align-items: center;
-}
-
-.sidebar-logo-full img {
-  width: 100%;
-  max-width: 200px;
-  height: auto;
-  object-fit: contain;
-  filter: var(--logo-filter);
+  flex-direction: column;
+  gap: 0;
 }
 
-.sidebar-icon-btn {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+.chat-list-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: all var(--transition-fast);
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  border: none;
-  flex-shrink: 0;
-}
-
-.sidebar-icon-btn:hover {
-  background: var(--sidebar-item-hover);
-  color: var(--text-primary);
+  justify-content: space-between;
+  padding: 0.5rem 0.25rem 0.375rem;
 }
 
-.sidebar-icon-btn svg {
-  width: 24px;
-  height: 24px;
+.chat-list-clear-btn {
+  background: none;
+  border: none;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.125rem 0.25rem;
+  border-radius: 4px;
+  transition: all var(--transition-fast);
+  font-family: inherit;
 }
+.chat-list-clear-btn:hover { color: var(--color-danger); }
 
-.sidebar-icon-btn.pollinations-logo {
-  color: #4ade80;
+.chat-list-empty {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  text-align: center;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
 }
-
-.sidebar-icon-btn.pollinations-logo img {
+.chat-list-empty::before {
+  content: '';
   width: 32px;
   height: 32px;
-  object-fit: contain;
-  filter: var(--logo-filter);
-}
-
-.sidebar-icon-btn.pollinations-logo:hover {
-  color: #22c55e;
-  background: rgba(74, 222, 128, 0.1);
-}
-
-.sidebar-icon-btn.sidebar-toggle-icon {
-  color: var(--text-secondary);
-}
-
-.sidebar-icon-btn.sidebar-toggle-icon:hover {
-  color: var(--text-primary);
-  background: var(--sidebar-item-hover);
-}
-
-.sidebar-icon-btn.sidebar-toggle-icon svg {
-  width: 22px;
-  height: 22px;
-}
-
-.chat-list {
-  flex: 1;
-  padding: 0.5rem;
-}
-
-/* Smooth fade for chat list when expanding */
-.sidebar.expanded .chat-list {
-  animation: slideInFromLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
-}
-
-@keyframes slideInFromLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-15px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+  background: currentColor;
+  opacity: 0.15;
+  border-radius: var(--radius-md);
 }
 
 .chat-item {
-  padding: 0.65rem;
-  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.525rem 0.625rem;
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-fast);
-  position: relative;
   border: 1px solid transparent;
-  margin-bottom: 0.25rem;
+  position: relative;
+  margin-bottom: 0.125rem;
 }
-
 .chat-item:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: var(--sidebar-item-hover);
+  border-color: var(--border-light);
 }
-
-.chat-item.active {
-  background: rgba(74, 222, 128, 0.15);
-  border-color: rgba(74, 222, 128, 0.3);
+.chat-item:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: inset 0 0 0 2px var(--bg-primary), inset 0 0 0 3px var(--border-focus);
 }
-
-body.light .chat-item:hover {
-  background: rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.1);
+.chat-item.active {
+  background: var(--sidebar-item-active);
+  border-color: rgba(124,165,142,0.25);
+  font-weight: var(--font-weight-semibold);
 }
+body.light .chat-item:hover   { background: #f3f4f6; }
+body.light .chat-item.active  { background: rgba(124,165,142,0.1); border-color: rgba(124,165,142,0.3); }
+body.dark .chat-item:focus-visible { box-shadow: inset 0 0 0 2px #0d0d0d, inset 0 0 0 3px var(--border-focus); }
 
-body.light .chat-item.active {
-  background: rgba(74, 222, 128, 0.2);
-  border-color: rgba(74, 222, 128, 0.4);
+.chat-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
 }
 
 .chat-item-title {
   font-size: 0.8125rem;
   font-weight: 500;
-  margin-bottom: 0.25rem;
   color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.chat-item.active .chat-item-title { font-weight: 600; color: var(--brand-green); }
 
-.chat-item-meta {
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
+.chat-item-time {
+  font-size: 0.68rem;
+  color: var(--text-muted);
 }
 
 .chat-item-delete {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
   background: var(--danger-bg);
   border: none;
   color: var(--danger-color);
@@ -427,85 +290,83 @@ body.light .chat-item.active {
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
+  flex-shrink: 0;
+  padding: 0;
 }
+.chat-item:hover .chat-item-delete { display: flex; }
+.chat-item-delete:hover { background: var(--danger-hover-bg); color: var(--danger-hover-color); }
+.chat-item-delete svg { width: 12px; height: 12px; }
 
-.chat-item:hover .chat-item-delete {
-  display: flex;
-}
-
-.chat-item-delete:hover {
-  background: var(--danger-hover-bg);
-  color: var(--danger-hover-color);
-}
-
-.chat-item-delete svg {
-  width: 14px;
-  height: 14px;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sidebar-footer {
-  padding: 1rem 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: auto; /* Push to bottom */
-}
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-body.light .sidebar-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+/* ── Slide-in animation for chat list ────────────────────── */
+.sidebar.expanded .chat-list {
+  animation: slideInFromLeft 0.3s cubic-bezier(0.4,0,0.2,1) 0.05s both;
 }
-
-/* Always show footer in narrow mode too */
-.sidebar:not(.expanded) .sidebar-footer {
-  padding: 0.5rem 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+@keyframes slideInFromLeft {
+  from { opacity: 0; transform: translateX(-10px); }
+  to   { opacity: 1; transform: translateX(0); }
 }
 
-/* Mobile responsive */
+/* ── Mobile ──────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .sidebar {
-    width: 0; /* Hidden when collapsed */
+    width: 0;
+    border: none;
   }
-  
+
   .sidebar.expanded {
-    width: 85vw; /* Take most of screen on mobile */
-    max-width: 320px;
+    width: min(85vw, 300px);
+    border-right: 1px solid var(--sidebar-border);
+    animation: slideInFromLeft 0.3s cubic-bezier(0.4,0,0.2,1);
   }
-  
-  /* Show toggle button when sidebar is collapsed on mobile */
-  .sidebar:not(.expanded) {
-    width: 0;
-    border: none;
+
+  .sidebar-overlay {
+    animation: fadeIn 0.2s ease-out;
   }
-  
+
   .sidebar:not(.expanded) .sidebar-header {
     position: fixed;
-    top: 1rem;
-    left: 1rem;
+    top: 0.75rem;
+    left: 0.75rem;
     z-index: 1001;
     width: auto;
     padding: 0;
     border: none;
     background: transparent;
   }
-  
+
   .sidebar:not(.expanded) .sidebar-header .sidebar-icon-btn {
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    background: var(--bg-primary);
+    width: 44px;
+    height: 44px;
+    min-height: 44px;
+    min-width: 44px;
+    background: var(--bg-elevated);
     border: 1px solid var(--border-color);
     box-shadow: var(--shadow-md);
+    border-radius: var(--radius-md);
   }
-  
-  .sidebar:not(.expanded) .sidebar-footer {
-    display: none; /* Hide theme toggle when collapsed on mobile */
+
+  .sidebar:not(.expanded) .sidebar-narrow-actions {
+    display: none;
+  }
+
+  /* Ensure touch targets are 44px minimum */
+  .sidebar.expanded .sidebar-icon-btn {
+    width: 44px;
+    height: 44px;
+    min-height: 44px;
+  }
+
+  .sidebar.expanded .sidebar-icon-btn svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .sidebar.expanded .chat-item {
+    padding: 0.625rem;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
   }
 }
diff --git a/react-app/src/components/Sidebar.jsx b/react-app/src/components/Sidebar.jsx
index 22b5a11..96ef4f3 100644
--- a/react-app/src/components/Sidebar.jsx
+++ b/react-app/src/components/Sidebar.jsx
@@ -2,70 +2,53 @@ import React, { useState, memo, useCallback, useRef, useEffect } from 'react';
 import ConfirmModal from './ConfirmModal';
 import './Sidebar.css';
 
+const formatRelativeTime = (timestamp) => {
+  if (!timestamp) return '';
+  const now = Date.now();
+  const diff = now - new Date(timestamp).getTime();
+  const min = Math.floor(diff / 60000);
+  const hr = Math.floor(diff / 3600000);
+  const day = Math.floor(diff / 86400000);
+  if (min < 1)  return 'just now';
+  if (min < 60) return `${min}m ago`;
+  if (hr < 24)  return `${hr}h ago`;
+  if (day < 7)  return `${day}d ago`;
+  return new Date(timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+};
+
 const Sidebar = memo(({
-  chats,
+  chats = [],
   activeChatId,
   onChatSelect,
   onNewChat,
   onDeleteChat,
   onThemeToggle,
-  onOpenSettings
+  theme = 'dark',
+  onOpenSettings,
+  onExportChat,
+  onClearAll,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [confirmModal, setConfirmModal] = useState({
-    isOpen: false,
-    title: '',
-    message: '',
-    onConfirm: null,
-    isDangerous: false
-  });
+  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', message: '', onConfirm: null, isDangerous: false });
   const sidebarRef = useRef(null);
 
-  // Close sidebar when clicking outside or focus leaves
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (isExpanded && sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+    const handleClickOutside = (e) => {
+      if (isExpanded && sidebarRef.current && !sidebarRef.current.contains(e.target)) {
         setIsExpanded(false);
       }
     };
-
-    const handleFocusOut = (event) => {
-      // Small delay to allow focus to move to new element
-      setTimeout(() => {
-        if (isExpanded && sidebarRef.current && !sidebarRef.current.contains(document.activeElement)) {
-          setIsExpanded(false);
-        }
-      }, 10);
-    };
-
-    if (isExpanded) {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('focusout', handleFocusOut);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('focusout', handleFocusOut);
-    };
+    if (isExpanded) document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [isExpanded]);
 
   useEffect(() => {
-    const toggleBodyBlur = () => {
-      if (typeof window === 'undefined') return;
-      if (isExpanded && window.innerWidth <= 768) {
-        document.body.classList.add('sidebar-expanded-mobile');
-      } else {
-        document.body.classList.remove('sidebar-expanded-mobile');
-      }
-    };
-
-    toggleBodyBlur();
-    window.addEventListener('resize', toggleBodyBlur);
-
-    return () => {
+    if (isExpanded && window.innerWidth <= 768) {
+      document.body.classList.add('sidebar-expanded-mobile');
+    } else {
       document.body.classList.remove('sidebar-expanded-mobile');
-      window.removeEventListener('resize', toggleBodyBlur);
-    };
+    }
+    return () => document.body.classList.remove('sidebar-expanded-mobile');
   }, [isExpanded]);
 
   const handleDeleteChat = useCallback((chatId, e) => {
@@ -73,25 +56,25 @@ const Sidebar = memo(({
     setConfirmModal({
       isOpen: true,
       title: 'Delete Chat',
-      message: 'Are you sure you want to delete this chat? This action cannot be undone.',
+      message: 'Delete this chat? This action cannot be undone.',
       onConfirm: () => onDeleteChat(chatId),
-      isDangerous: true
+      isDangerous: true,
     });
   }, [onDeleteChat]);
 
   const handleSettingsOpen = useCallback(() => {
-    if (onOpenSettings) {
-      onOpenSettings();
-    }
+    onOpenSettings?.();
     setIsExpanded(false);
   }, [onOpenSettings]);
 
-  const handleHoverOpen = useCallback(() => {
-    // Only expand on hover if the device supports hover
-    if (window.matchMedia('(hover: hover)').matches && !isExpanded) {
-      setIsExpanded(true);
-    }
-  }, [isExpanded]);
+  const isDark = theme === 'dark';
+
+  const NavBtn = ({ onClick, title, icon, label }) => (
+    <button className="sidebar-nav-btn" onClick={onClick} title={title} type="button">
+      {icon}
+      {isExpanded && <span>{label}</span>}
+    </button>
+  );
 
   return (
     <>
@@ -99,113 +82,193 @@ const Sidebar = memo(({
       <aside
         ref={sidebarRef}
         className={`sidebar ${isExpanded ? 'expanded' : ''}`}
-        onMouseEnter={handleHoverOpen}
+        onMouseEnter={() => { if (window.matchMedia('(hover: hover)').matches && !isExpanded) setIsExpanded(true); }}
       >
+        {/* Header */}
         <div className="sidebar-header">
           {isExpanded ? (
             <>
-              <div className="sidebar-logo-full">
-                <img src="/pollinations-chat-ui/logo-text.svg" alt="Pollinations" />
+              <div className="sidebar-logo">
+                <div className="sidebar-logo-dot" />
+                <span className="sidebar-logo-text">Pollinations</span>
               </div>
-              
-              <button className="sidebar-toggle-btn expanded" onClick={() => setIsExpanded(!isExpanded)} title="Collapse sidebar">
+              <button
+                className="sidebar-icon-btn sidebar-toggle-icon"
+                onClick={() => setIsExpanded(false)}
+                title="Collapse sidebar"
+                aria-label="Collapse sidebar"
+                aria-expanded="true"
+              >
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2"/>
-                  <path d="M9 3v18"/>
+                  <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>
                 </svg>
               </button>
             </>
           ) : (
-            <button className="sidebar-icon-btn sidebar-toggle-icon" onClick={() => setIsExpanded(!isExpanded)} title="Expand sidebar">
+            <button
+              className="sidebar-icon-btn sidebar-toggle-icon"
+              onClick={() => setIsExpanded(true)}
+              title="Expand sidebar"
+              aria-label="Expand sidebar"
+              aria-expanded="false"
+            >
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M9 3v18"/>
+                <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>
               </svg>
             </button>
           )}
         </div>
-        
+
         {isExpanded ? (
           <div className="sidebar-scrollable">
-            <div className="sidebar-content">
-              <button className="sidebar-btn" onClick={onNewChat} title="New chat">
+            {/* Actions */}
+            <div className="sidebar-actions">
+              <button
+                className="sidebar-new-chat-btn"
+                onClick={onNewChat}
+                title="Start a new chat"
+                aria-label="Start a new chat"
+                type="button"
+              >
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                   <path d="M12 5v14M5 12h14"/>
                 </svg>
                 <span>New Chat</span>
               </button>
 
-              <button className="sidebar-btn" onClick={onThemeToggle} title="Toggle theme">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-                </svg>
-                <span>Toggle Theme</span>
-              </button>
-
-              <button className="sidebar-btn" onClick={handleSettingsOpen} title="Open settings">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
-                  <circle cx="12" cy="12" r="3"/>
-                </svg>
-                <span>Settings</span>
-              </button>
-            </div>
-          
-            <div className="chat-list">
-              <h3 className="sidebar-section-title">Chats</h3>
-              {chats.map(chat => (
-                <div
-                  key={chat.id}
-                  className={`chat-item ${chat.id === activeChatId ? 'active' : ''}`}
-                  onClick={() => onChatSelect(chat.id)}
+              <div className="sidebar-icon-row">
+                <button
+                  className="sidebar-icon-btn sm"
+                  onClick={onThemeToggle}
+                  title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+                  aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+                >
+                  {isDark ? (
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                    </svg>
+                  ) : (
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+                    </svg>
+                  )}
+                </button>
+                <button
+                  className="sidebar-icon-btn sm"
+                  onClick={handleSettingsOpen}
+                  title="Open settings"
+                  aria-label="Open settings"
                 >
-                  <div className="chat-item-title truncate">{chat.title}</div>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.38a2 2 0 00-.73-2.73l-.15-.1a2 2 0 01-1-1.72v-.51a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                  </svg>
+                </button>
+                {onExportChat && (
                   <button
-                    className="chat-item-delete"
-                    onClick={(e) => handleDeleteChat(chat.id, e)}
-                    aria-label="Delete chat"
+                    className="sidebar-icon-btn sm"
+                    onClick={() => { onExportChat(); setIsExpanded(false); }}
+                    title="Export chat"
+                    aria-label="Export chat"
                   >
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
                     </svg>
                   </button>
+                )}
+              </div>
+            </div>
+
+            {/* Chat list */}
+            <div className="chat-list">
+              {chats.length > 0 && (
+                <div className="chat-list-header">
+                  <span className="sidebar-section-title">Chats</span>
+                  {onClearAll && (
+                    <button
+                      className="chat-list-clear-btn"
+                      onClick={() => { onClearAll(); }}
+                      title="Clear all chats"
+                    >
+                      Clear all
+                    </button>
+                  )}
                 </div>
-              ))}
+              )}
+              {chats.length === 0 && (
+                <div className="chat-list-empty">No chats yet</div>
+              )}
+              {chats.map(chat => {
+                const lastMsg = chat.messages?.[chat.messages.length - 1];
+                const ts = lastMsg?.timestamp || chat.createdAt;
+                const isActive = chat.id === activeChatId;
+                return (
+                  <div
+                    key={chat.id}
+                    className={`chat-item ${isActive ? 'active' : ''}`}
+                    onClick={() => { onChatSelect(chat.id); setIsExpanded(false); }}
+                    role="button"
+                    tabIndex={0}
+                    aria-current={isActive ? 'page' : undefined}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onChatSelect(chat.id);
+                        setIsExpanded(false);
+                      }
+                    }}
+                  >
+                    <div className="chat-item-body">
+                      <div className="chat-item-title truncate">{chat.title || 'New Chat'}</div>
+                      {ts && <div className="chat-item-time">{formatRelativeTime(ts)}</div>}
+                    </div>
+                    <button
+                      className="chat-item-delete"
+                      onClick={(e) => handleDeleteChat(chat.id, e)}
+                      aria-label="Delete chat"
+                    >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                      </svg>
+                    </button>
+                  </div>
+                );
+              })}
             </div>
           </div>
         ) : (
+          /* Collapsed narrow actions */
           <div className="sidebar-narrow-actions">
-            <button className="sidebar-icon-btn" onClick={onNewChat} title="New chat">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M12 5v14M5 12h14"/>
-              </svg>
+            <button className="sidebar-icon-btn" onClick={onNewChat} title="Start a new chat" aria-label="Start a new chat" type="button">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
             </button>
-            <button className="sidebar-icon-btn" onClick={onThemeToggle} title="Toggle theme">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-              </svg>
+            <button className="sidebar-icon-btn" onClick={onThemeToggle} title={isDark ? 'Switch to light mode' : 'Switch to dark mode'} aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'} type="button">
+              {isDark ? (
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+              ) : (
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+              )}
             </button>
-            <button className="sidebar-icon-btn" onClick={handleSettingsOpen} title="Open settings">
+            <button className="sidebar-icon-btn" onClick={handleSettingsOpen} title="Open settings" aria-label="Open settings" type="button">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.38a2 2 0 00-.73-2.73l-.15-.1a2 2 0 01-1-1.72v-.51a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"/>
                 <circle cx="12" cy="12" r="3"/>
               </svg>
             </button>
           </div>
         )}
-
       </aside>
 
-    <ConfirmModal
-      isOpen={confirmModal.isOpen}
-      onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
-      onConfirm={confirmModal.onConfirm}
-      title={confirmModal.title}
-      message={confirmModal.message}
-      confirmText="Delete"
-      cancelText="Cancel"
-      isDangerous={confirmModal.isDangerous}
-    />
+      <ConfirmModal
+        isOpen={confirmModal.isOpen}
+        onClose={() => setConfirmModal(p => ({ ...p, isOpen: false }))}
+        onConfirm={confirmModal.onConfirm}
+        title={confirmModal.title}
+        message={confirmModal.message}
+        confirmText="Delete"
+        cancelText="Cancel"
+        isDangerous={confirmModal.isDangerous}
+      />
     </>
   );
 });
diff --git a/react-app/src/theme.css b/react-app/src/theme.css
index e55d947..2a8448f 100644
--- a/react-app/src/theme.css
+++ b/react-app/src/theme.css
@@ -1,168 +1,315 @@
-/* theme.css - Theme variables and color palette */
+/* theme.css — design tokens */
 
 :root {
-  /* Color palette */
-  --c1: #D4FBE4; /* soft mint */
-  --c2: #0F331E; /* primary dark text */
-  --c3: #C65792; /* magenta accent */
-  --c4: #DF99C0; /* pink accent */
-  --c5: #7CA58E; /* soft green */
-  --c6: #6C8474; /* neutral green */
-
-  /* Light theme colors */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8f9fa;
-  --bg-tertiary: #e9ecef;
-  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
-  
-  --text-primary: #1a1a1a;
-  --text-secondary: #4a5568;
-  --text-muted: #718096;
-  
-  --border-color: #e2e8f0;
-  --border-light: #f1f5f9;
-  
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
-  
-  --accent-gradient: linear-gradient(135deg, #C65792, #5fffa4);
-  --accent-hover: linear-gradient(135deg, #d166a0, #aefecf);
-  
-  /* Message colors */
-  --msg-user-bg: #77e4d7;
-  --msg-assistant-bg: #f8f9fa;
-  --msg-user-text: #ffffff;
-  --msg-assistant-text: #1a1a1a;
-  
+  /* Brand palette */
+  --brand-mint:    #5fffa4;
+  --brand-green:   #7CA58E;
+  --brand-forest:  #0F331E;
+  --brand-magenta: #C65792;
+  --brand-pink:    #DF99C0;
+
+  /* Accent gradient */
+  --accent-gradient: linear-gradient(135deg, #7CA58E 0%, #C65792 100%);
+  --accent-gradient-hover: linear-gradient(135deg, #8fbfa6 0%, #d166a0 100%);
+
+  /* Light theme */
+  --bg-primary:    #fafafa;
+  --bg-secondary:  #f2f4f7;
+  --bg-tertiary:   #e8ecf0;
+  --bg-elevated:   #ffffff;
+  --bg-input:      #ffffff;
+  --bg-gradient:   linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
+
+  --text-primary:   #111827;
+  --text-secondary: #4b5563;
+  --text-muted:     #9ca3af;
+  --text-inverse:   #ffffff;
+
+  --border-color:  #d1d5db;
+  --border-light:  #e5e7eb;
+  --border-focus:  #7CA58E;
+
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.08);
+  --shadow-xl: 0 16px 40px rgba(0,0,0,0.16), 0 6px 16px rgba(0,0,0,0.08);
+
+  /* Input box */
+  --input-bg:     #ffffff;
+  --input-border: #d1d5db;
+  --input-shadow: 0 0 0 3px rgba(124,165,142,0.12);
+
+  /* Message bubbles */
+  --msg-user-bg:       var(--accent-gradient);
+  --msg-user-text:     #ffffff;
+  --msg-assistant-bg:  #ffffff;
+  --msg-assistant-text: #111827;
+
   /* Sidebar */
-  --sidebar-bg: #ffffff;
-  --sidebar-border: #e2e8f0;
-  --sidebar-item-hover: #f1f5f9;
-  --sidebar-item-active: rgba(124, 165, 142, 0.15);
-  
-  /* Danger/Error colors */
-  --danger-bg: rgba(239, 68, 68, 0.1);
-  --danger-color: #ef4444;
-  --danger-hover-bg: #ef4444;
-  --danger-hover-color: #ffffff;
-  
+  --sidebar-bg:          #ffffff;
+  --sidebar-border:      #e5e7eb;
+  --sidebar-item-hover:  #f3f4f6;
+  --sidebar-item-active: rgba(124,165,142,0.12);
+
+  /* Status colors */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger:  #ef4444;
+  --color-info:    #3b82f6;
+
+  --danger-bg:         rgba(239,68,68,0.08);
+  --danger-color:      #ef4444;
+  --danger-hover-bg:   #ef4444;
+  --danger-hover-color:#ffffff;
+
   /* Transitions */
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
-  
-  /* Logo filter for light mode - invert white logo to dark for visibility on white background */
-  --logo-filter: invert(1) brightness(0.2);
+  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
+  --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
+  --transition-slow:   350ms cubic-bezier(0.4,0,0.2,1);
+  --transition-bounce: 500ms cubic-bezier(0.34,1.56,0.64,1);
+
+  /* Radius */
+  --radius-sm:  6px;
+  --radius-md:  10px;
+  --radius-lg:  16px;
+  --radius-xl:  20px;
+  --radius-full: 999px;
+
+  /* Typography */
+  --font-size-xs:   0.75rem;
+  --font-size-sm:   0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg:   1.125rem;
+  --font-size-xl:   1.25rem;
+  --font-size-2xl:  1.5rem;
+  --font-size-3xl:  1.875rem;
+
+  --font-weight-light:     300;
+  --font-weight-normal:    400;
+  --font-weight-semibold:  600;
+  --font-weight-bold:      700;
+
+  --line-height-tight:     1.25;
+  --line-height-normal:    1.5;
+  --line-height-relaxed:   1.625;
+  --line-height-loose:     2;
+
+  --letter-spacing-tight:  -0.01em;
+  --letter-spacing-normal:  0;
+  --letter-spacing-wide:    0.025em;
+
+  /* Spacing Scale */
+  --spacing-0.5:  0.125rem;
+  --spacing-1:    0.25rem;
+  --spacing-1.5:  0.375rem;
+  --spacing-2:    0.5rem;
+  --spacing-2.5:  0.625rem;
+  --spacing-3:    0.75rem;
+  --spacing-3.5:  0.875rem;
+  --spacing-4:    1rem;
+  --spacing-5:    1.25rem;
+  --spacing-6:    1.5rem;
+  --spacing-7:    1.75rem;
+  --spacing-8:    2rem;
+
+  /* Neutral Grays */
+  --color-gray-50:   #f9fafb;
+  --color-gray-100:  #f3f4f6;
+  --color-gray-200:  #e5e7eb;
+  --color-gray-300:  #d1d5db;
+  --color-gray-400:  #9ca3af;
+  --color-gray-500:  #6b7280;
+  --color-gray-600:  #4b5563;
+  --color-gray-700:  #374151;
+  --color-gray-800:  #1f2937;
+  --color-gray-900:  #111827;
+
+  /* Additional Gradients */
+  --gradient-soft:       linear-gradient(135deg, rgba(124,165,142,0.1) 0%, rgba(198,87,146,0.1) 100%);
+  --gradient-vibrant:    linear-gradient(135deg, #5fffa4 0%, #C65792 100%);
+  --gradient-neutral:    linear-gradient(135deg, #e8f5ee 0%, #f2f4f7 100%);
+  --gradient-success:    linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --gradient-warning:    linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  --gradient-error:      linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+  /* Z-index Scale */
+  --z-hide:       -1;
+  --z-base:       0;
+  --z-dropdown:   100;
+  --z-sticky:     20;
+  --z-fixed:      30;
+  --z-modal-bg:   99;
+  --z-modal:      101;
+  --z-popover:    110;
+  --z-tooltip:    120;
+  --z-overlay:    150;
+
+  --logo-filter: invert(1) brightness(0.15);
 }
 
-/* Dark theme */
+/* ── Dark theme ─────────────────────────────────────────────── */
 body.dark {
-  --bg-primary: #000000;
-  --bg-secondary: #0a0a0a;
-  --bg-tertiary: #141414;
-  --bg-gradient: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
-  
-  --text-primary: #D4FBE4;
-  --text-secondary: rgba(212, 251, 228, 0.8);
-  --text-muted: rgba(212, 251, 228, 0.5);
-  
-  --border-color: rgba(212, 251, 228, 0.15);
-  --border-light: rgba(212, 251, 228, 0.08);
-  
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-  
-  --msg-user-bg: linear-gradient(135deg, var(--c5), var(--c3));
-  --msg-assistant-bg: #0a0a0a;
-  --msg-user-text: #ffffff;
+  --bg-primary:    #0d0d0d;
+  --bg-secondary:  #141414;
+  --bg-tertiary:   #1c1c1c;
+  --bg-elevated:   #1a1a1a;
+  --bg-input:      #111111;
+  --bg-gradient:   linear-gradient(180deg, #0d0d0d 0%, #111111 100%);
+
+  --text-primary:   #e8f5ee;
+  --text-secondary: rgba(212,251,228,0.72);
+  --text-muted:     rgba(212,251,228,0.42);
+  --text-inverse:   #0d0d0d;
+
+  --border-color:  rgba(212,251,228,0.12);
+  --border-light:  rgba(212,251,228,0.07);
+  --border-focus:  #7CA58E;
+
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.55);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
+  --shadow-xl: 0 16px 40px rgba(0,0,0,0.7);
+
+  --input-bg:     #111111;
+  --input-border: rgba(212,251,228,0.14);
+  --input-shadow: 0 0 0 3px rgba(124,165,142,0.18);
+
+  --msg-user-bg:       var(--accent-gradient);
+  --msg-user-text:     #ffffff;
+  --msg-assistant-bg:  #161616;
   --msg-assistant-text: var(--text-primary);
-  
-  --sidebar-bg: rgba(10, 10, 10, 0.98);
-  --sidebar-border: rgba(212, 251, 228, 0.1);
-  --sidebar-item-hover: rgba(212, 251, 228, 0.06);
-  --sidebar-item-active: rgba(124, 165, 142, 0.2);
-  
-  /* Danger/Error colors */
-  --danger-bg: rgba(239, 68, 68, 0.2);
-  --danger-color: #fca5a5;
-  --danger-hover-bg: #fca5a5;
-  --danger-hover-color: #000000;
-}
-
-/* Accent color themes for user messages */
-body[data-accent="blue"] {
-  --msg-user-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
-  --accent-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
-  --accent-blue: #3b82f6;
+
+  --sidebar-bg:          #0d0d0d;
+  --sidebar-border:      rgba(212,251,228,0.08);
+  --sidebar-item-hover:  rgba(212,251,228,0.05);
+  --sidebar-item-active: rgba(124,165,142,0.14);
+
+  --logo-filter: none;
 }
 
+/* ── Accent overrides ───────────────────────────────────────── */
+body[data-accent="blue"] {
+  --accent-gradient: linear-gradient(135deg,#3b82f6,#1d4ed8);
+  --msg-user-bg: linear-gradient(135deg,#3b82f6,#1d4ed8);
+  --border-focus: #3b82f6;
+}
 body[data-accent="red"] {
-  --msg-user-bg: linear-gradient(135deg, #ef4444, #dc2626);
-  --accent-gradient: linear-gradient(135deg, #ef4444, #dc2626);
-  --accent-red: #ef4444;
+  --accent-gradient: linear-gradient(135deg,#ef4444,#dc2626);
+  --msg-user-bg: linear-gradient(135deg,#ef4444,#dc2626);
+  --border-focus: #ef4444;
 }
-
 body[data-accent="green"] {
-  --msg-user-bg: linear-gradient(135deg, #10b981, #059669);
-  --accent-gradient: linear-gradient(135deg, #10b981, #059669);
-  --accent-green: #10b981;
+  --accent-gradient: linear-gradient(135deg,#10b981,#059669);
+  --msg-user-bg: linear-gradient(135deg,#10b981,#059669);
+  --border-focus: #10b981;
 }
-
 body[data-accent="purple"] {
-  --msg-user-bg: linear-gradient(135deg, #a855f7, #7c3aed);
-  --accent-gradient: linear-gradient(135deg, #a855f7, #7c3aed);
-  --accent-purple: #a855f7;
+  --accent-gradient: linear-gradient(135deg,#a855f7,#7c3aed);
+  --msg-user-bg: linear-gradient(135deg,#a855f7,#7c3aed);
+  --border-focus: #a855f7;
 }
-
 body[data-accent="orange"] {
-  --msg-user-bg: linear-gradient(135deg, #f97316, #ea580c);
-  --accent-gradient: linear-gradient(135deg, #f97316, #ea580c);
-  --accent-orange: #f97316;
+  --accent-gradient: linear-gradient(135deg,#f97316,#ea580c);
+  --msg-user-bg: linear-gradient(135deg,#f97316,#ea580c);
+  --border-focus: #f97316;
 }
 
-body[data-accent="gradient"] {
-  --msg-user-bg: linear-gradient(135deg, var(--c5), var(--c3));
-  --accent-gradient: linear-gradient(135deg, var(--c5), var(--c3));
+/* ── Base body styles ───────────────────────────────────────── */
+body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition:
+    background var(--transition-slow),
+    color var(--transition-slow);
 }
 
-body[data-accent="orange"] {
-  --msg-user-bg: linear-gradient(135deg, #f97316, #ea580c);
-  --accent-gradient: linear-gradient(135deg, #f97316, #ea580c);
+/* ── Sidebar blur variants ──────────────────────────────────── */
+@supports (backdrop-filter: blur(12px)) {
+  body.dark .sidebar,
+  body.dark .model-dropdown-compact,
+  body.dark .attach-menu {
+    background: rgba(13,13,13,0.88);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  body:not(.dark) .sidebar,
+  body:not(.dark) .model-dropdown-compact,
+  body:not(.dark) .attach-menu {
+    background: rgba(255,255,255,0.88);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
 }
 
-body[data-accent="gradient"] {
-  --msg-user-bg: linear-gradient(135deg, var(--c5), var(--c3));
-  --accent-gradient: linear-gradient(135deg, var(--c5), var(--c3));
+/* ── Animation Keyframes ────────────────────────────────────── */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 
-/* Apply theme to body */
-body {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  transition: background var(--transition-slow), color var(--transition-slow);
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to   { opacity: 0; }
 }
 
-/* Backdrop blur support */
-@supports (backdrop-filter: blur(10px)) {
-  body.dark {
-    --sidebar-bg: rgba(0, 0, 0, 0.8);
-  }
-  
-  body:not(.dark) {
-    --sidebar-bg: rgba(255, 255, 255, 0.8);
-  }
+@keyframes slideInFromLeft {
+  from { opacity: 0; transform: translateX(-12px); }
+  to   { opacity: 1; transform: translateX(0); }
 }
 
-/* Model dropdown with backdrop blur */
-@supports (backdrop-filter: blur(12px)) {
-  body.dark .model-dropdown {
-    background: rgba(0, 0, 0, 0.75);
-  }
-  
-  body:not(.dark) .model-dropdown {
-    background: rgba(255, 255, 255, 0.75);
-  }
+@keyframes slideInFromRight {
+  from { opacity: 0; transform: translateX(12px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInFromTop {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideInFromBottom {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideOutToLeft {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-12px); }
+}
+
+@keyframes slideOutToRight {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(12px); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes scaleOut {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-8px); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.7; }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
 }
diff --git a/react-app/src/utils/api.js b/react-app/src/utils/api.js
index 9e1313c..015e63b 100644
--- a/react-app/src/utils/api.js
+++ b/react-app/src/utils/api.js
@@ -1,300 +1,209 @@
-// API utilities for Pollinations chat - Enhanced version from vanilla
-const BASE_IMAGE_URL = 'https://gen.pollinations.ai/image';
-const TEXT_MODELS_ENDPOINT = 'https://gen.pollinations.ai/v1/models';
-const IMAGE_MODELS_ENDPOINT = 'https://gen.pollinations.ai/image/models';
-const API_TOKEN = import.meta.env.VITE_POLLINATIONS_API_KEY || 'plln_sk_JpHLuB3plq6EIXD08hgEn3EAzKJglpD0';
+// Pollinations API utilities — updated to match gen.pollinations.ai spec
+const BASE_URL = 'https://gen.pollinations.ai';
+const API_TOKEN = import.meta.env.VITE_POLLINATIONS_API_KEY || '';
 
 let textModels = [];
 let imageModels = [];
 let videoModels = [];
+let audioModels = [];
 let abortController = null;
 
-// Cache for models to avoid repeated API calls
 let modelsCache = null;
 let modelsCacheTime = null;
-const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+const CACHE_DURATION = 5 * 60 * 1000;
 
-// Format model names
-const formatModelName = (modelId) => {
-  if (typeof modelId !== 'string') return 'Unknown Model';
-  return modelId
-    .split('/')
-    .pop()
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-};
-
-// Use real model ID as name instead of formatted version
 const getRealModelName = (modelId) => {
   if (typeof modelId !== 'string') return 'Unknown Model';
   return modelId;
 };
 
-// Load available models from API
+// Parse the consistent error shape returned by the API
+const parseApiError = async (response) => {
+  try {
+    const body = await response.json();
+    const msg = body?.error?.message || body?.error?.code || response.statusText;
+    const code = response.status;
+    if (code === 401) return new Error('Invalid or missing API key (401)');
+    if (code === 402) return new Error('Insufficient pollen balance (402)');
+    if (code === 403) return new Error('API key lacks required permission (403)');
+    return new Error(`API error ${code}: ${msg}`);
+  } catch {
+    return new Error(`API error ${response.status}: ${response.statusText}`);
+  }
+};
+
 export const loadModels = async () => {
-  // Check cache first
   if (modelsCache && modelsCacheTime && (Date.now() - modelsCacheTime < CACHE_DURATION)) {
     return modelsCache;
   }
 
-  try {
-    const [textResponse, imageResponse] = await Promise.allSettled([
-      fetch(TEXT_MODELS_ENDPOINT, {
-        headers: {
-          'Authorization': `Bearer ${API_TOKEN}`
-        }
-      }),
-      fetch(IMAGE_MODELS_ENDPOINT, {
-        headers: {
-          'Authorization': `Bearer ${API_TOKEN}`
-        }
-      })
-    ]);
-
-    if (textResponse.status === 'fulfilled' && textResponse.value.ok) {
-      const textData = await textResponse.value.json();
-      // Handle both array format and OpenAI format with data array
-      const modelsArray = Array.isArray(textData) ? textData : textData.data;
-      if (Array.isArray(modelsArray)) {
-        textModels = modelsArray.map(model => ({
-          id: model.id || model.name || model,
-          name: model.description || getRealModelName(model.id || model.name || model),
-          description: model.description || model.id || model.name || model,
-          type: 'text',
-          ownedBy: model.owned_by || 'unknown',
-          created: model.created,
-          supportsVision: model.vision === true,
-          supportsAudio: model.audio === true,
-          inputModalities: model.input_modalities || ['text'],
-          outputModalities: model.output_modalities || ['text'],
-          tier: model.tier || 'unknown',
-          community: model.community || false
-        }));
-      }
-    } else {
-      console.error('❌ Failed to load text models from endpoint');
-      textModels = [];
+  const headers = API_TOKEN ? { Authorization: `Bearer ${API_TOKEN}` } : {};
+
+  const [textRes, imageRes, audioRes] = await Promise.allSettled([
+    fetch(`${BASE_URL}/v1/models`, { headers }),
+    fetch(`${BASE_URL}/image/models`, { headers }),
+    fetch(`${BASE_URL}/audio/models`, { headers }),
+  ]);
+
+  // Text models
+  if (textRes.status === 'fulfilled' && textRes.value.ok) {
+    const data = await textRes.value.json();
+    const arr = Array.isArray(data) ? data : data.data;
+    if (Array.isArray(arr)) {
+      textModels = arr.map(m => ({
+        id: m.id || m.name || m,
+        name: m.description || getRealModelName(m.id || m.name || m),
+        description: m.description || m.id || m.name || m,
+        type: 'text',
+        ownedBy: m.owned_by || 'unknown',
+        created: m.created,
+        supportsVision: m.vision === true,
+        supportsAudio: m.audio === true,
+        inputModalities: m.input_modalities || ['text'],
+        outputModalities: m.output_modalities || ['text'],
+        tier: m.tier || 'unknown',
+        community: m.community || false,
+      }));
     }
+  } else {
+    textModels = [];
+  }
 
-    if (imageResponse.status === 'fulfilled' && imageResponse.value.ok) {
-      const imageData = await imageResponse.value.json();
-      if (Array.isArray(imageData)) {
-        // Separate image and video models based on output_modalities
-        const allMediaModels = imageData.map(model => {
-          const modelId = typeof model === 'string' ? model : (model.name || model.id || model);
-          const outputModalities = model.output_modalities || ['image'];
-          return {
-            id: modelId,
-            name: (typeof model === 'object' && model.description) ? model.description : getRealModelName(modelId),
-            description: model.description || modelId,
-            type: outputModalities.includes('video') ? 'video' : 'image',
-            tier: model.tier || 'unknown',
-            outputModalities
-          };
-        });
-        
-        imageModels = allMediaModels.filter(m => m.type === 'image');
-        videoModels = allMediaModels.filter(m => m.type === 'video');
-      }
-    } else {
-      console.error('❌ Failed to load image models from endpoint');
-      imageModels = [];
-      videoModels = [];
+  // Image + video models
+  if (imageRes.status === 'fulfilled' && imageRes.value.ok) {
+    const data = await imageRes.value.json();
+    if (Array.isArray(data)) {
+      const all = data.map(m => {
+        const id = typeof m === 'string' ? m : (m.name || m.id || m);
+        const outputMods = m.output_modalities || ['image'];
+        return {
+          id,
+          name: (typeof m === 'object' && m.description) ? m.description : getRealModelName(id),
+          description: m.description || id,
+          type: outputMods.includes('video') ? 'video' : 'image',
+          tier: m.tier || 'unknown',
+          outputModalities: outputMods,
+        };
+      });
+      imageModels = all.filter(m => m.type === 'image');
+      videoModels = all.filter(m => m.type === 'video');
     }
+  } else {
+    imageModels = [];
+    videoModels = [];
+  }
 
-    // Cache the results
-    const result = { textModels, imageModels, videoModels };
-    modelsCache = result;
-    modelsCacheTime = Date.now();
-
-    return result;
-  } catch (error) {
-    console.error('❌ Error loading models:', error);
-    return { textModels: [], imageModels: [], videoModels: [] };
+  // Audio models
+  if (audioRes.status === 'fulfilled' && audioRes.value.ok) {
+    const data = await audioRes.value.json();
+    const arr = Array.isArray(data) ? data : data.data;
+    if (Array.isArray(arr)) {
+      audioModels = arr.map(m => {
+        const id = typeof m === 'string' ? m : (m.name || m.id || m);
+        return {
+          id,
+          name: (typeof m === 'object' && m.description) ? m.description : getRealModelName(id),
+          description: m.description || id,
+          type: 'audio',
+          tier: m.tier || 'unknown',
+        };
+      });
+    }
   }
-};
 
-// Get all models
-export const getModels = () => {
-  return { textModels, imageModels, videoModels };
+  const result = { textModels, imageModels, videoModels, audioModels };
+  modelsCache = result;
+  modelsCacheTime = Date.now();
+  return result;
 };
 
-// Initialize models (will be called from App.jsx)
+export const getModels = () => ({ textModels, imageModels, videoModels, audioModels });
+
 export const initializeModels = async () => {
-  const { textModels: loadedTextModels, imageModels: loadedImageModels, videoModels: loadedVideoModels } = await loadModels();
-  
-  // Populate MODELS object with text models
-  const textModelsObj = {};
-  loadedTextModels.forEach(model => {
-    textModelsObj[model.id] = { name: model.name, ...model };
-  });
-  
-  // Populate image models object
-  const imageModelsObj = {};
-  loadedImageModels.forEach(model => {
-    imageModelsObj[model.id] = { name: model.name, ...model };
-  });
-  
-  // Populate video models object
-  const videoModelsObj = {};
-  loadedVideoModels.forEach(model => {
-    videoModelsObj[model.id] = { name: model.name, ...model };
-  });
-  
-  return { textModels: textModelsObj, imageModels: imageModelsObj, videoModels: videoModelsObj };
+  const { textModels: tm, imageModels: im, videoModels: vm, audioModels: am } = await loadModels();
+  const toObj = (arr) => Object.fromEntries(arr.map(m => [m.id, { name: m.name, ...m }]));
+  return {
+    textModels: toObj(tm),
+    imageModels: toObj(im),
+    videoModels: toObj(vm),
+    audioModels: toObj(am),
+  };
 };
 
-// Get current model info
 const getCurrentModelInfo = (modelId) => {
-  const allModels = [...textModels, ...imageModels, ...videoModels];
-  return allModels.find(m => m.id === modelId);
-};
-
-// Get latest image from messages
-const getLatestImage = (messages) => {
-  for (let i = messages.length - 1; i >= 0; i--) {
-    const msg = messages[i];
-    if (msg.role === 'user' && msg.image && msg.image.src) {
-      return msg.image.src;
-    }
-  }
-  return null;
+  return [...textModels, ...imageModels, ...videoModels, ...audioModels].find(m => m.id === modelId);
 };
 
 const extractBase64FromDataUrl = (dataUrl) => {
   if (typeof dataUrl !== 'string') return { base64: '', mimeType: null };
   const match = dataUrl.match(/^data:([^;]+);base64,(.*)$/);
-  if (match) {
-    return { base64: match[2], mimeType: match[1] };
-  }
+  if (match) return { base64: match[2], mimeType: match[1] };
   const commaIndex = dataUrl.indexOf(',');
-  if (commaIndex >= 0) {
-    return { base64: dataUrl.slice(commaIndex + 1), mimeType: null };
-  }
+  if (commaIndex >= 0) return { base64: dataUrl.slice(commaIndex + 1), mimeType: null };
   return { base64: dataUrl, mimeType: null };
 };
 
-// Update formatMessagesForAPI to ensure consistent array format
 export const formatMessagesForAPI = (messages, modelId) => {
   const currentModel = getCurrentModelInfo(modelId);
-  const supportsVision = currentModel && currentModel.supportsVision;
+  const supportsVision = currentModel?.supportsVision;
   return messages.map(msg => {
     const parts = [];
     const textContent = typeof msg.content === 'string' ? msg.content : '';
-
-    if (textContent) {
-      parts.push({
-        type: 'text',
-        text: textContent
-      });
-    }
+    if (textContent) parts.push({ type: 'text', text: textContent });
 
     const attachments = Array.isArray(msg.attachments) ? msg.attachments : [];
-    const legacyImage = (!attachments.length && msg.image && msg.image.src)
-      ? [{
-        name: msg.image.name || 'image',
-        data: msg.image.src,
-        mimeType: msg.image.mimeType || (msg.image.src.startsWith('data:') ? msg.image.src.split(';')[0].replace('data:', '') : 'image/png'),
-        isImage: true
-      }]
+    const legacyImage = (!attachments.length && msg.image?.src)
+      ? [{ name: msg.image.name || 'image', data: msg.image.src, mimeType: msg.image.mimeType || 'image/png', isImage: true }]
       : [];
 
-    [...attachments, ...legacyImage].forEach((attachment) => {
-      if (!attachment) return;
-
+    for (const attachment of [...attachments, ...legacyImage]) {
+      if (!attachment) continue;
       let base64Data = attachment.data || attachment.base64 || '';
       let mimeType = attachment.mimeType || attachment.type || 'application/octet-stream';
 
       if (!base64Data && attachment.preview) {
-        const extracted = extractBase64FromDataUrl(attachment.preview);
-        base64Data = extracted.base64;
-        if (extracted.mimeType && (!attachment.mimeType || attachment.mimeType === '')) {
-          mimeType = extracted.mimeType;
-        }
+        const e = extractBase64FromDataUrl(attachment.preview);
+        base64Data = e.base64;
+        if (e.mimeType && !attachment.mimeType) mimeType = e.mimeType;
       }
-
       if (!base64Data && typeof attachment.src === 'string') {
-        const extracted = extractBase64FromDataUrl(attachment.src);
-        base64Data = extracted.base64;
-        if (extracted.mimeType) {
-          mimeType = extracted.mimeType;
-        }
+        const e = extractBase64FromDataUrl(attachment.src);
+        base64Data = e.base64;
+        if (e.mimeType) mimeType = e.mimeType;
       }
-
-      if (!base64Data) return;
+      if (!base64Data) continue;
 
       const isImage = attachment.isImage ?? mimeType.startsWith('image/');
-
-      // Use image_url format for remote images
       if (isImage && attachment.preview?.startsWith('http')) {
-        parts.push({
-          type: 'image_url',
-          image_url: {
-            url: attachment.preview
-          }
-        });
-        return;
+        parts.push({ type: 'image_url', image_url: { url: attachment.preview } });
+        continue;
       }
-
-      // For local base64, include as image_url with data URL
       if (isImage && base64Data) {
-        parts.push({
-          type: 'image_url',
-          image_url: {
-            url: `data:${mimeType};base64,${base64Data}`
-          }
-        });
+        parts.push({ type: 'image_url', image_url: { url: `data:${mimeType};base64,${base64Data}` } });
       }
-    });
-
-    // If only text, return string content for compatibility
-    if (parts.length === 1 && parts[0].type === 'text') {
-      return {
-        role: msg.role,
-        content: parts[0].text
-      };
     }
 
-    // If multiple parts or has images, return array
-    if (parts.length > 0) {
-      return {
-        role: msg.role,
-        content: parts
-      };
-    }
-
-    return {
-      role: msg.role,
-      content: textContent || ''
-    };
+    if (parts.length === 1 && parts[0].type === 'text') return { role: msg.role, content: parts[0].text };
+    if (parts.length > 0) return { role: msg.role, content: parts };
+    return { role: msg.role, content: textContent || '' };
   });
 };
 
 const containsChartRequest = (messages = []) => {
   if (!Array.isArray(messages) || messages.length === 0) return false;
-  const lastMessage = messages[messages.length - 1];
-  if (!lastMessage || lastMessage.role !== 'user') return false;
-  const content = typeof lastMessage.content === 'string' ? lastMessage.content.toLowerCase() : '';
-  if (!content) return false;
-  return /(chart|graph|plot|visualiz|scatter|line|bar|pie|histogram|trend)/.test(content);
+  const last = messages[messages.length - 1];
+  if (!last || last.role !== 'user') return false;
+  const content = typeof last.content === 'string' ? last.content.toLowerCase() : '';
+  return /(chart|graph|plot|visualiz|scatter|line\s+chart|bar\s+chart|pie\s+chart|histogram|trend)/.test(content);
 };
 
 export const sendMessage = async (messages, onChunk, onComplete, onError, modelId, generationConfig = {}) => {
-  const selectedModelId =  modelId || localStorage.getItem('selectedModelId') || 'openai-large';
-   
-  const {
-    maxTokens = 2000,
-    temperature = 0.7,
-    topP = 1
-  } = generationConfig;
-
-  // For Claude models with thinking enabled, temperature must be 1
+  const selectedModelId = modelId || 'openai-large';
+  const { maxTokens = 2000, temperature = 0.7, topP = 1 } = generationConfig;
   const isClaude = selectedModelId.includes('claude');
   const finalTemperature = isClaude ? 1 : temperature;
-
   const chartRequested = containsChartRequest(messages);
-  
+
   const tools = [
     {
       type: 'function',
@@ -304,48 +213,28 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
         parameters: {
           type: 'object',
           properties: {
-            title: {
-              type: 'string',
-              description: 'Title displayed above the chart.'
-            },
-            data: {
-              type: 'array',
-              items: {
-                type: 'object',
-                description: 'Data points where each object represents a row with keys for x/y values.'
-              },
-              description: 'Array of data objects, each containing keys for the chart axes.'
-            },
+            title: { type: 'string', description: 'Title displayed above the chart.' },
+            data: { type: 'array', items: { type: 'object' }, description: 'Array of data objects.' },
             series: {
               type: 'array',
               items: {
                 type: 'object',
                 properties: {
-                  key: { type: 'string', description: 'The key in data objects for this series' },
-                  name: { type: 'string', description: 'Display name for this series' },
-                  color: { type: 'string', description: 'Hex color for this series' }
+                  key: { type: 'string' },
+                  name: { type: 'string' },
+                  color: { type: 'string' },
                 },
-                required: ['key', 'name']
+                required: ['key', 'name'],
               },
-              description: 'Series definitions for the chart.'
             },
-            xKey: {
-              type: 'string',
-              description: 'The key in data objects to use for x-axis values.'
-            },
-            xLabel: {
-              type: 'string',
-              description: 'Label for the x-axis.'
-            },
-            yLabel: {
-              type: 'string',
-              description: 'Label for the y-axis.'
-            }
+            xKey: { type: 'string' },
+            xLabel: { type: 'string' },
+            yLabel: { type: 'string' },
           },
-          required: ['title', 'data', 'series', 'xKey']
-        }
-      }
-    }
+          required: ['title', 'data', 'series', 'xKey'],
+        },
+      },
+    },
   ];
 
   try {
@@ -353,10 +242,6 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
     abortController = new AbortController();
 
     const formattedMessages = formatMessagesForAPI(messages, selectedModelId);
-
-    // Build request body - only include thinking parameters for Claude models
-    // Note: Some Bedrock models don't support both temperature and top_p together,
-    // so we only include top_p when it differs from the default value of 1
     const requestBody = {
       model: selectedModelId,
       messages: formattedMessages,
@@ -364,34 +249,26 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
       temperature: finalTemperature,
       tools,
       tool_choice: chartRequested ? { type: 'function', function: { name: 'create_chart' } } : 'auto',
-      stream: true
+      stream: true,
     };
-
-    // Only include top_p if it differs from the default value of 1
-    // This avoids conflicts with Bedrock models that don't support both temperature and top_p
-    if (topP !== 1) {
-      requestBody.top_p = topP;
-    }
-
-    // Only add thinking parameters for Claude models
+    if (topP !== 1) requestBody.top_p = topP;
     if (isClaude) {
       requestBody.thinking = { type: 'enabled' };
       requestBody.reasoning_effort = 'high';
     }
 
-    const response = await fetch('https://gen.pollinations.ai/v1/chat/completions', {
+    const headers = { 'Content-Type': 'application/json' };
+    if (API_TOKEN) headers['Authorization'] = `Bearer ${API_TOKEN}`;
+
+    const response = await fetch(`${BASE_URL}/v1/chat/completions`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${API_TOKEN}`
-      },
+      headers,
       body: JSON.stringify(requestBody),
-      signal: abortController.signal
+      signal: abortController.signal,
     });
 
     if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`API Error ${response.status}: ${errorText}`);
+      throw await parseApiError(response);
     }
 
     const reader = response.body.getReader();
@@ -412,9 +289,7 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
       sseBuffer = events.pop() ?? '';
 
       for (const event of events) {
-        const lines = event.split('\n');
-
-        for (const line of lines) {
+        for (const line of event.split('\n')) {
           if (!line.startsWith('data: ')) continue;
           const payload = line.slice(6).trim();
           if (!payload || payload === '[DONE]') continue;
@@ -424,8 +299,7 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
           try {
             parsed = JSON.parse(dataString);
             pendingData = '';
-          } catch (parseError) {
-            // Hold onto partial JSON until the rest of the chunk arrives.
+          } catch {
             pendingData = dataString;
             continue;
           }
@@ -447,77 +321,40 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
             const argChunk = fn?.arguments || '';
             if (!functionBuffers[name]) functionBuffers[name] = '';
             functionBuffers[name] += argChunk;
-
-            let parsedArgs = null;
             try {
               const attempt = JSON.parse(functionBuffers[name]);
-              parsedArgs = typeof attempt === 'string' ? JSON.parse(attempt) : attempt;
-            } catch (err) {
-              parsedArgs = null;
-            }
-
-            if (parsedArgs !== null) {
-              collectedFunctionCalls.push({ name, arguments: parsedArgs });
+              collectedFunctionCalls.push({ name, arguments: typeof attempt === 'string' ? JSON.parse(attempt) : attempt });
               delete functionBuffers[name];
-            }
-          }
-
-          const legacyCall = delta?.function_call;
-          if (legacyCall) {
-            const name = legacyCall?.name || lastFunctionName || 'unknown_function';
-            if (legacyCall?.name) lastFunctionName = legacyCall.name;
-            const argChunk = legacyCall?.arguments || '';
-            if (!functionBuffers[name]) functionBuffers[name] = '';
-            functionBuffers[name] += argChunk;
-
-            let parsedArgs = null;
-            try {
-              const attempt = JSON.parse(functionBuffers[name]);
-              parsedArgs = typeof attempt === 'string' ? JSON.parse(attempt) : attempt;
-            } catch (err) {
-              parsedArgs = null;
-            }
-
-            if (parsedArgs !== null) {
-              collectedFunctionCalls.push({ name, arguments: parsedArgs });
-              delete functionBuffers[name];
-            }
+            } catch { /* accumulating */ }
           }
         }
       }
     }
 
-    let finalContent = fullContent;
-    if (typeof finalContent === 'string') {
-      finalContent = finalContent.replace(/\s+$/g, '').replace(/\n{3,}/g, '\n\n');
-    }
-    if (collectedFunctionCalls.length > 0) {
-      for (const call of collectedFunctionCalls) {
-        if (call.name === 'create_chart') {
-          try {
-            const args = call.arguments;
-            // Use Nuxt-style format directly from function arguments
-            const chartData = {
-              type: 'chart',
-              output: {
-                title: args.title,
-                data: args.data,
-                series: args.series,
-                xKey: args.xKey,
-                xLabel: args.xLabel || 'X Axis',
-                yLabel: args.yLabel || 'Y Axis'
-              }
-            };
-            finalContent += `\n\n__CHART__${JSON.stringify(chartData)}__CHART__`;
-          } catch (chartError) {
-            console.error('Failed to parse chart arguments:', chartError);
-          }
-        }
+    let finalContent = typeof fullContent === 'string'
+      ? fullContent.replace(/\s+$/g, '').replace(/\n{3,}/g, '\n\n')
+      : fullContent;
+
+    for (const call of collectedFunctionCalls) {
+      if (call.name === 'create_chart') {
+        try {
+          const args = call.arguments;
+          finalContent += `\n\n__CHART__${JSON.stringify({
+            type: 'chart',
+            output: {
+              title: args.title,
+              data: args.data,
+              series: args.series,
+              xKey: args.xKey,
+              xLabel: args.xLabel || 'X Axis',
+              yLabel: args.yLabel || 'Y Axis',
+            },
+          })}__CHART__`;
+        } catch { /* skip malformed chart */ }
       }
     }
 
     if (onComplete) onComplete(finalContent, '');
-
     abortController = null;
     return finalContent;
   } catch (error) {
@@ -526,7 +363,6 @@ export const sendMessage = async (messages, onChunk, onComplete, onError, modelI
       if (onError) onError(new Error('User aborted'));
       return null;
     }
-    console.error('Request error:', error);
     if (onError) onError(error);
     throw error;
   }
@@ -538,136 +374,80 @@ export const stopGeneration = () => {
     abortController = null;
   }
 };
-// Generate image from text prompt
-export const generateImage = async (prompt, options = {}) => {
-  try {
-    const {
-      model = 'flux',
-      width = 1024,
-      height = 1024,
-      seed = Math.floor(Math.random() * 2147483647),
-      nologo = false,
-      enhance = false,
-      nofeed = false,
-      safe = false,
-      quality = 'medium'
-    } = options;
-
-    // Build URL with prompt in path and parameters as query string
-    const params = new URLSearchParams({
-      model,
-      width: width.toString(),
-      height: height.toString(),
-      seed: seed.toString(),
-      enhance: enhance.toString(),
-      nologo: nologo.toString(),
-      nofeed: nofeed.toString(),
-      safe: safe.toString(),
-      quality
-    });
 
-    // Encode the prompt for URL path
-    const encodedPrompt = encodeURIComponent(prompt);
-    const url = `${BASE_IMAGE_URL}/${encodedPrompt}?${params.toString()}`;
-    
-    console.log(`🎨 Generating image with prompt: "${prompt}"`);
-    console.log(`📐 Parameters: ${width}x${height}, model: ${model}, seed: ${seed}`);
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${API_TOKEN}`
-      }
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`Image generation failed: ${response.status} - ${errorText}`);
-    }
-
-    // Get the image as a blob
-    const blob = await response.blob();
-    
-    // Convert blob to base64 data URL for display
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        console.log(`✅ Image generated successfully`);
-        resolve({
-          url: reader.result,
-          prompt,
-          model,
-          width,
-          height,
-          seed
-        });
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-  } catch (error) {
-    console.error('❌ Image generation error:', error);
-    throw error;
-  }
+export const generateImage = async (prompt, options = {}) => {
+  const {
+    model = 'flux',
+    width = 1024,
+    height = 1024,
+    seed = Math.floor(Math.random() * 2147483647),
+    nologo = false,
+    enhance = false,
+    nofeed = false,
+    safe = false,
+    quality = 'medium',
+  } = options;
+
+  const params = new URLSearchParams({
+    model, width, height, seed, enhance, nologo, nofeed, safe, quality,
+  });
+  const url = `${BASE_URL}/image/${encodeURIComponent(prompt)}?${params}`;
+  const headers = API_TOKEN ? { Authorization: `Bearer ${API_TOKEN}` } : {};
+  const response = await fetch(url, { headers });
+  if (!response.ok) throw await parseApiError(response);
+
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve({ url: reader.result, prompt, model, width, height, seed });
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
 };
 
-// Generate video from text prompt
 export const generateVideo = async (prompt, options = {}) => {
-  try {
-    const {
-      model = 'veo',
-      seed = Math.floor(Math.random() * 2147483647),
-      nologo = false,
-      nofeed = false
-    } = options;
-
-    // Build URL with prompt in path and parameters as query string
-    const params = new URLSearchParams({
-      model,
-      seed: seed.toString(),
-      nologo: nologo.toString(),
-      nofeed: nofeed.toString()
-    });
-
-    // Encode the prompt for URL path
-    const encodedPrompt = encodeURIComponent(prompt);
-    const url = `${BASE_IMAGE_URL}/${encodedPrompt}?${params.toString()}`;
-    
-    console.log(`🎬 Generating video with prompt: "${prompt}"`);
-    console.log(`📐 Parameters: model: ${model}, seed: ${seed}`);
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Authorization': `Bearer ${API_TOKEN}`
-      }
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      throw new Error(`Video generation failed: ${response.status} - ${errorText}`);
-    }
+  const {
+    model = 'veo',
+    seed = Math.floor(Math.random() * 2147483647),
+    nologo = false,
+    nofeed = false,
+  } = options;
+
+  const params = new URLSearchParams({ model, seed, nologo, nofeed });
+  // Correct endpoint: /video/{prompt}  (not /image/{prompt})
+  const url = `${BASE_URL}/video/${encodeURIComponent(prompt)}?${params}`;
+  const headers = API_TOKEN ? { Authorization: `Bearer ${API_TOKEN}` } : {};
+  const response = await fetch(url, { headers });
+  if (!response.ok) throw await parseApiError(response);
+
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve({ url: reader.result, prompt, model, seed });
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
 
-    // Get the video as a blob
-    const blob = await response.blob();
-    
-    // Convert blob to base64 data URL for display
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        console.log(`✅ Video generated successfully`);
-        resolve({
-          url: reader.result,
-          prompt,
-          model,
-          seed
-        });
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-  } catch (error) {
-    console.error('❌ Video generation error:', error);
-    throw error;
-  }
+// Generate speech/audio — GET /audio/{text}?voice=...
+export const generateAudio = async (text, options = {}) => {
+  const {
+    voice = 'nova',
+    model = 'openai-audio',
+  } = options;
+
+  const params = new URLSearchParams({ voice, model });
+  const url = `${BASE_URL}/audio/${encodeURIComponent(text)}?${params}`;
+  const headers = API_TOKEN ? { Authorization: `Bearer ${API_TOKEN}` } : {};
+  const response = await fetch(url, { headers });
+  if (!response.ok) throw await parseApiError(response);
+
+  const blob = await response.blob();
+  const mimeType = blob.type || 'audio/mpeg';
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve({ url: reader.result, text, voice, model, mimeType });
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
 };