Mobile fixes — safe area insets, settings SVG icon, input overflow

components/MessageInput.tsx

@@ -110,8 +110,14 @@ export default function MessageInput() {
 
   return (
     <div
-      className="flex gap-2 items-end px-4 py-3 flex-shrink-0"
-      style={{ borderTop: '1px solid var(--border)' }}
+      className="flex gap-2 items-end flex-shrink-0"
+      style={{ 
+        borderTop: '1px solid var(--border)',
+        padding: '12px 16px',
+        paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
+        paddingLeft: 'max(16px, env(safe-area-inset-left))',
+        paddingRight: 'max(16px, env(safe-area-inset-right))',
+      }}
     >
       {/* Voice button */}
       <button
@@ -138,7 +144,7 @@ export default function MessageInput() {
 
       {/* Text input */}
       <div
-        className="flex-1 rounded-xl"
+        className="flex-1 rounded-xl min-w-0 overflow-hidden"
         style={{ background: 'var(--bg2)', border: '1px solid var(--border2)' }}
       >
         <textarea
@@ -148,7 +154,7 @@ export default function MessageInput() {
           onKeyDown={handleKeyDown}
           placeholder="Ask anything... (Shift+Enter for new line)"
           rows={1}
-          className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed"
+          className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed min-w-0"
           style={{
             fontSize: 'var(--font-size)',
             color: 'var(--text)',