mobile updates

components/CameraSetup.js

@@ -179,14 +179,13 @@ const CameraSetup = ({
       {isMobile && (
         <button
           onClick={switchCamera}
-          className="absolute top-4 right-4 bg-white bg-opacity-70 p-2 rounded-full shadow-md z-10 hover:bg-opacity-90 transition-all"
+          className="absolute top-4 right-4 bg-white bg-opacity-70 p-2 rounded-full shadow-md z-10 hover:bg-opacity-90 transition-all flex items-center justify-center"
           aria-label={`Switch to ${facingMode === 'user' ? 'back' : 'front'} camera`}
+          style={{ width: '40px', height: '40px' }}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.5 7.5L9.5 12.5" />
-          </svg>
+          <span className="material-symbols-outlined text-gray-800" style={{ display: 'flex', lineHeight: 1 }}>
+            cameraswitch
+          </span>
         </button>
       )}
     </>

components/MainContent.js

@@ -35,12 +35,15 @@ const MainContent = ({
 }) => {
   return (
     <>
-      {/* Prompt Editor */}
-      <PromptEditor 
-        customPrompt={customPrompt} 
-        setCustomPrompt={setCustomPrompt} 
-        isMac={isMac} 
-      />
+      {/* Prompt Editor - Only show above camera on desktop */}
+      {!isMobile && (
+        <PromptEditor 
+          customPrompt={customPrompt} 
+          setCustomPrompt={setCustomPrompt} 
+          isMac={isMac}
+          isMobile={isMobile}
+        />
+      )}
       
       <div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
         {/* Camera Setup */}
@@ -90,6 +93,16 @@ const MainContent = ({
           createPopParticles={createPopParticles}
         />
       </div>
+      
+      {/* Prompt Editor - Show below camera on mobile */}
+      {isMobile && (
+        <PromptEditor 
+          customPrompt={customPrompt} 
+          setCustomPrompt={setCustomPrompt} 
+          isMac={isMac}
+          isMobile={isMobile}
+        />
+      )}
     </>
   );
 };

components/PromptEditor.js

@@ -1,74 +1,100 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
+const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
   const [isEditingPrompt, setIsEditingPrompt] = useState(false);
   const [tempPrompt, setTempPrompt] = useState("");
+  const [isCollapsed, setIsCollapsed] = useState(isMobile); // Collapsed by default on mobile
+
+  // Update collapsed state if isMobile changes
+  useEffect(() => {
+    setIsCollapsed(isMobile);
+  }, [isMobile]);
 
   return (
-    <div className="w-full max-w-4xl mb-4">
-      <div className="flex justify-between items-center mb-1">
+    <div className={`w-full max-w-4xl ${isMobile ? 'mt-4' : 'mb-4'}`}>
+      <div 
+        className="flex justify-between items-center mb-1 cursor-pointer" 
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
         <label htmlFor="system-prompt" className="block text-sm font-medium text-gray-700">
           System Prompt
         </label>
-        {!isEditingPrompt ? (
-          <button
-            onClick={() => {
-              setTempPrompt(customPrompt);
-              setIsEditingPrompt(true);
-            }}
-            className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-            </svg>
-            Edit
-          </button>
-        ) : null}
-      </div>
-      
-      {isEditingPrompt ? (
-        <div>
-          <textarea
-            id="system-prompt"
-            value={tempPrompt}
-            onChange={(e) => setTempPrompt(e.target.value)}
-            onKeyDown={(e) => {
-              // Save on Ctrl+Enter or Cmd+Enter
-              if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                e.preventDefault();
-                setCustomPrompt(tempPrompt);
-                setIsEditingPrompt(false);
-              }
-            }}
-            className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
-            rows={4}
-            placeholder="Enter your custom prompt for Gemini..."
-          />
-          <div className="flex justify-end mt-2 space-x-2">
-            <span className="text-xs text-gray-500 self-center mr-auto">
-              Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
-            </span>
+        <div className="flex items-center">
+          {!isEditingPrompt && !isCollapsed && (
             <button
-              onClick={() => setIsEditingPrompt(false)}
-              className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={() => {
-                setCustomPrompt(tempPrompt);
-                setIsEditingPrompt(false);
+              onClick={(e) => {
+                e.stopPropagation(); // Prevent triggering the parent onClick
+                setTempPrompt(customPrompt);
+                setIsEditingPrompt(true);
               }}
-              className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
+              className="text-sm text-blue-600 hover:text-blue-800 flex items-center mr-2"
             >
-              Save
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+              Edit
             </button>
-          </div>
-        </div>
-      ) : (
-        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 whitespace-pre-wrap">
-          {customPrompt}
+          )}
+          {/* Down/Up caret icon */}
+          <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            className={`h-5 w-5 text-gray-500 transition-transform duration-200 ${isCollapsed ? '' : 'transform rotate-180'}`} 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
         </div>
+      </div>
+      
+      {!isCollapsed && (
+        <>
+          {isEditingPrompt ? (
+            <div>
+              <textarea
+                id="system-prompt"
+                value={tempPrompt}
+                onChange={(e) => setTempPrompt(e.target.value)}
+                onKeyDown={(e) => {
+                  // Save on Ctrl+Enter or Cmd+Enter
+                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    setCustomPrompt(tempPrompt);
+                    setIsEditingPrompt(false);
+                  }
+                }}
+                className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
+                rows={4}
+                placeholder="Enter your custom prompt for Gemini..."
+              />
+              <div className="flex justify-end mt-2 space-x-2">
+                <span className="text-xs text-gray-500 self-center mr-auto">
+                  Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
+                </span>
+                <button
+                  onClick={() => setIsEditingPrompt(false)}
+                  className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => {
+                    setCustomPrompt(tempPrompt);
+                    setIsEditingPrompt(false);
+                  }}
+                  className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 whitespace-pre-wrap">
+              {customPrompt}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

components/ThoughtBubble.js

@@ -48,10 +48,10 @@ const ThoughtBubble = ({
         <span 
           style={{ 
             fontSize: isMobile ? '28px' : '36px',
-            animation: 'thinking-blink 1.5s ease-in-out infinite'
+            animation: 'thinking-spin 1.5s linear infinite'
           }}
         >
-          🤔
+          💭
         </span>
       );
     }

components/UIUtils.js

@@ -52,6 +52,11 @@ export const AnimationStyles = () => {
           50% { opacity: 0.7; transform: scale(0.95); }
         }
         
+        @keyframes thinking-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        
         @keyframes spring-out {
           0% { 
             transform: scale(0) translateY(0); 

pages/_document.js

@@ -3,7 +3,12 @@ import { Html, Head, Main, NextScript } from "next/document";
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link 
+          rel="stylesheet" 
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=cameraswitch" 
+        />
+      </Head>
       <body className="antialiased">
         <Main />
         <NextScript />