From 02b85cf83506c024ac20fde0b38f51f24ed21336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= <fatihkadirakin@gmail.com>
Date: Mon, 16 Jun 2025 23:07:09 +0300
Subject: [PATCH] mobule responsove

---
 _layouts/embed-preview.html    |  18 +-
 _layouts/embed.html            | 103 ++++-----
 _site/embed-preview-script.js  |   8 +-
 _site/embed-preview-style.css  | 104 +++++++++
 _site/embed-preview/index.html |  18 +-
 _site/embed-style.css          | 381 ++++++++++++++++++++++++++++++++-
 _site/embed/index.html         | 103 ++++-----
 _site/index.html               |   2 +-
 _site/vibe/index.html          |   2 +-
 embed-preview-script.js        |   8 +-
 embed-preview-style.css        | 104 +++++++++
 embed-style.css                | 381 ++++++++++++++++++++++++++++++++-
 12 files changed, 1096 insertions(+), 136 deletions(-)
diff --git a/_layouts/embed-preview.html b/_layouts/embed-preview.html
index 623fbe6..ed906ed 100644
--- a/_layouts/embed-preview.html
+++ b/_layouts/embed-preview.html
@@ -29,26 +29,26 @@
 </head>
 <body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
     <!-- Viewer Mode -->
-    <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-4">
+    <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
         <!-- Context Pills -->
-        <div id="context-pills" class="flex flex-wrap gap-2 empty:hidden mb-4"></div>
+        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
         
         <!-- Main Prompt Interface - Full Height -->
         <div class="flex-1 flex flex-col">
-            <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
-                <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar"></div>
-                <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-6 left-6 pointer-events-none">← Enter your prompt on designer...</div>
+            <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 sm:p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
+                <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar text-sm sm:text-base"></div>
+                <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-3 sm:top-6 left-3 sm:left-6 pointer-events-none text-sm sm:text-base">← Enter your prompt on designer...</div>
             </div>
         </div>
         
         <!-- Bottom Bar -->
-        <div class="flex justify-between items-center mt-4">
+        <div class="flex justify-between items-center gap-2 mt-0 sm:mt-2">
             <!-- Settings Pills -->
-            <div id="settings-pills" class="flex gap-2 flex-wrap"></div>
+            <div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
             
             <!-- Send Button (circular with arrow up) -->
-            <button id="copy-button" class="w-10 h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg" title="Send prompt">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <button id="copy-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg touch-target" title="Send prompt">
+                <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                     <path d="M12 19V5M5 12l7-7 7 7"/>
                 </svg>
             </button>
diff --git a/_layouts/embed.html b/_layouts/embed.html
index 6108054..785c5af 100644
--- a/_layouts/embed.html
+++ b/_layouts/embed.html
@@ -33,10 +33,11 @@
     <header class="site-header">
         <div class="header-left">
             <h1 class="site-title">prompts.chat/embed</h1>
-            <p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
+            <p class="site-slogan hidden sm:block">Design and share beautiful AI prompts, for your website or blog.</p>
+            <p class="site-slogan sm:hidden">Design and share AI prompts</p>
         </div>
         <div class="header-right">
-            <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
+            <button class="dark-mode-toggle touch-target" onclick="toggleDarkMode()" title="Toggle dark mode">
                 <svg class="mode-icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                 <svg class="mode-icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
             </button>
@@ -44,16 +45,16 @@
     </header>
     
     <!-- Designer Mode -->
-    <div id="designer-mode" class="designer-content flex">
+    <div id="designer-mode" class="designer-content flex flex-col lg:flex-row min-h-0">
         <!-- Left Panel - Customization -->
-        <div class="designer-panel w-80 flex flex-col h-full overflow-hidden">
+        <div class="designer-panel w-full lg:w-80 flex flex-col h-auto lg:h-full overflow-hidden order-2 lg:order-1 flex-shrink-0">
             <div class="flex-1 overflow-y-auto custom-scrollbar">
-                <div class="p-6 space-y-4">
+                <div class="p-4 lg:p-6 lg:pt-0 space-y-4">
                     <!-- Context -->
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Context</label>
                         <input type="text" id="designer-context" 
-                               class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring"
+                               class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target"
                                placeholder="file.py, @web, @codebase, #image">
                     </div>
                     
@@ -61,35 +62,35 @@
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
                         <textarea id="designer-prompt" 
-                                 class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
+                                 class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target"
                                  rows="8"
                                  placeholder="Enter your prompt..."></textarea>
-                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
+                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
                             Load example →
                         </button>
                     </div>
                     
                     <!-- Model & Mode -->
-                    <div class="grid grid-cols-2 gap-3">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         <div class="space-y-2">
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
-                            <select id="designer-model" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
+                            <select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="o3">o3</option>
-                                <option value="gpt-4.1">GPT 4.1</option>
-                                <option value="gpt-4o" selected>GPT 4o</option>
-                                <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
-                                <option value="claude-4-sonnet">Claude 4 Sonnet</option>
-                                <option value="claude-4-opus">Claude 4 Opus</option>
-                                <option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
+                                <option value="GPT-4.1">GPT 4.1</option>
+                                <option value="GPT 4o" selected>GPT 4o</option>
+                                <option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
+                                <option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
+                                <option value="Claude 4 Opus">Claude 4 Opus</option>
+                                <option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
                                 <option value="custom">[Custom]</option>
                             </select>
                             <input type="text" id="designer-custom-model" 
-                                   class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden"
+                                   class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden touch-target"
                                    placeholder="Enter custom model name">
                         </div>
                         <div class="space-y-2">
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label>
-                            <select id="designer-mode-select" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
+                            <select id="designer-mode-select" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="chat">Chat</option>
                                 <option value="agent">Agent</option>
                                 <option value="manual">Manual</option>
@@ -99,13 +100,13 @@
                     </div>
                     
                     <!-- Options -->
-                    <div class="grid grid-cols-2 gap-3">
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 justify-items-start">
+                        <label class="flex items-center space-x-2 touch-target">
+                            <input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border w-4 h-4">
                             <span class="text-sm text-dynamic-muted-foreground">Thinking</span>
                         </label>
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="designer-max" class="rounded border-dynamic-border">
+                        <label class="flex items-center space-x-2 touch-target">
+                            <input type="checkbox" id="designer-max" class="rounded border-dynamic-border w-4 h-4">
                             <span class="text-sm text-dynamic-muted-foreground">MAX mode</span>
                         </label>
                     </div>
@@ -114,13 +115,13 @@
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
                         <div class="grid grid-cols-3 gap-2">
-                            <button type="button" id="theme-light" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
+                            <button type="button" id="theme-light" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
                                 Light
                             </button>
-                            <button type="button" id="theme-dark" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
+                            <button type="button" id="theme-dark" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
                                 Dark
                             </button>
-                            <button type="button" id="theme-auto" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center">
+                            <button type="button" id="theme-auto" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center touch-target">
                                 Auto
                             </button>
                         </div>
@@ -134,35 +135,35 @@
                         <div class="space-y-2">
                             <label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
                             <div class="grid grid-cols-4 gap-2">
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#6b7280" data-dark="#e5e7eb" 
                                         style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)" 
                                         title="Minimal"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#1f2937" data-dark="#9ca3af" 
                                         style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)" 
                                         title="Dark Gray"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#64748b" data-dark="#94a3b8" 
                                         style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)" 
                                         title="Dimmed"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#3b82f6" data-dark="#60a5fa" 
                                         style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)" 
                                         title="Blue"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#10b981" data-dark="#34d399" 
                                         style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)" 
                                         title="Green"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#8b5cf6" data-dark="#a78bfa" 
                                         style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)" 
                                         title="Purple"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#f97316" data-dark="#fb923c" 
                                         style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)" 
                                         title="Orange"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#ec4899" data-dark="#f472b6" 
                                         style="background: linear-gradient(135deg, #ec4899 50%, #f472b6 50%)" 
                                         title="Pink"></button>
@@ -178,14 +179,14 @@
                                         <div class="relative">
                                             <input type="color" id="designer-light-color" 
                                                    value="#3b82f6"
-                                                   class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
+                                                   class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
                                             <div class="absolute inset-0 rounded-lg pointer-events-none" style="background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%)"></div>
                                         </div>
                                         <div class="flex-1">
                                             <label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
                                             <input type="text" id="designer-light-color-text" 
                                                    value="#3b82f6"
-                                                   class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
+                                                   class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
                                                    pattern="^#[0-9A-Fa-f]{6}$">
                                         </div>
                                     </div>
@@ -195,14 +196,14 @@
                                         <div class="relative">
                                             <input type="color" id="designer-dark-color" 
                                                    value="#60a5fa"
-                                                   class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
+                                                   class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
                                             <div class="absolute inset-0 rounded-lg pointer-events-none" style="background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.1) 50%)"></div>
                                         </div>
                                         <div class="flex-1">
                                             <label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
                                             <input type="text" id="designer-dark-color-text" 
                                                    value="#60a5fa"
-                                                   class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
+                                                   class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
                                                    pattern="^#[0-9A-Fa-f]{6}$">
                                         </div>
                                     </div>
@@ -228,28 +229,28 @@
             </div>
             
             <!-- Generate Buttons - Fixed at bottom -->
-            <div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
-                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
+            <div class="p-4 lg:p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted lg:pb-0">
+                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 lg:p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity touch-target">
                     Generate Embed Code
                 </button>
-                <button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100">
+                <button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target">
                     Reset settings
                 </button>
             </div>
         </div>
         
         <!-- Right Panel - Preview -->
-        <div class="flex-1 flex items-center justify-center p-8 bg-dynamic-muted/20">
+        <div class="flex-none lg:flex-1 flex items-center justify-center px-4 pb-4 pt-0 lg:p-8 bg-dynamic-muted/20 order-1 lg:order-2 min-h-[300px] lg:min-h-0">
             <div class="w-full max-w-3xl">
-                <h3 class="text-center text-sm font-medium text-dynamic-muted-foreground mb-4">Preview of the embed. You can change the settings on the left.</h3>
-                <div id="preview-wrapper" class="bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg" style="height: 400px;">
+                <h3 class="text-center text-sm font-medium text-dynamic-muted-foreground mb-4 hidden lg:block">Preview of the embed. You can change the settings below.</h3>
+                <div id="preview-wrapper" class="bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg h-[250px] sm:h-[300px] lg:h-[400px] mt-4 lg:mt-0">
                     <div class="h-full" id="preview-container">
                         <!-- Preview iframe will be injected here -->
                     </div>
                 </div>
                 <div class="mt-4 space-y-1">
                     <label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
-                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
+                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden touch-target">
                         &lt;iframe src="..."&gt;&lt;/iframe&gt;
                     </div>
                 </div>
@@ -259,10 +260,10 @@
     
     <!-- Embed Code Modal -->
     <div id="embed-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-        <div class="bg-dynamic-background rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+        <div class="bg-dynamic-background rounded-xl p-4 lg:p-6 max-w-2xl w-full max-h-[90vh] lg:max-h-[80vh] overflow-y-auto">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-semibold text-dynamic-foreground">Embed Code</h3>
-                <button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground">
+                <button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground touch-target p-1">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M18 6L6 18M6 6l12 12"/>
                     </svg>
@@ -271,13 +272,13 @@
             <div class="space-y-4">
                 <div>
                     <label class="text-sm font-medium text-dynamic-muted-foreground">iframe Embed Code</label>
-                    <textarea id="embed-code" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="4" readonly></textarea>
-                    <button id="copy-embed-code" class="mt-2 px-4 py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90">Copy Code</button>
+                    <textarea id="embed-code" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows="4" readonly></textarea>
+                    <button id="copy-embed-code" class="mt-2 px-4 py-3 lg:py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90 touch-target">Copy Code</button>
                 </div>
                 <div>
                     <label class="text-sm font-medium text-dynamic-muted-foreground">Share URL</label>
-                    <textarea id="share-url" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="2" readonly></textarea>
-                    <button id="copy-share-url" class="mt-2 px-4 py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80">Copy URL</button>
+                    <textarea id="share-url" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows="2" readonly></textarea>
+                    <button id="copy-share-url" class="mt-2 px-4 py-3 lg:py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80 touch-target">Copy URL</button>
                 </div>
             </div>
         </div>
diff --git a/_site/embed-preview-script.js b/_site/embed-preview-script.js
index 43baad7..08c6a33 100644
--- a/_site/embed-preview-script.js
+++ b/_site/embed-preview-script.js
@@ -277,7 +277,7 @@ class EmbedPreview {
     
     createSettingPill(text, type) {
         const pill = document.createElement('div');
-        pill.className = 'px-3 py-2 rounded-full text-xs font-medium flex items-center gap-1.5';
+        pill.className = 'rounded-full text-xs font-medium flex items-center gap-1.5';
         
         let icon = '';
         
@@ -285,13 +285,13 @@ class EmbedPreview {
         if (type === 'mode') {
             // Mode pill keeps the background
             if (this.isDarkMode) {
-                pill.className += ' bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
+                pill.className += ' px-3 py-2 bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
             } else {
-                pill.className += ' bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
+                pill.className += ' px-3 py-2 bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
             }
         } else {
             // Model, thinking, and max pills only have text color
-            pill.className += ' text-dynamic-primary';
+            pill.className += ' pl-1 text-dynamic-primary';
         }
         
         switch (type) {
diff --git a/_site/embed-preview-style.css b/_site/embed-preview-style.css
index ce353f8..19e68ee 100644
--- a/_site/embed-preview-style.css
+++ b/_site/embed-preview-style.css
@@ -78,4 +78,108 @@
 
 .viewer-mode .prompt-input:focus {
     outline: none;
+}
+
+/* Hide scrollbar for horizontal scrolling pills */
+.scrollbar-hide {
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+}
+
+/* Touch target improvements for mobile */
+.touch-target {
+    min-height: 44px;
+    min-width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Responsive improvements */
+@media (max-width: 640px) {
+    /* Ensure context pills don't wrap and scroll horizontally */
+    #context-pills {
+        flex-wrap: nowrap;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+    
+    /* More compact pill spacing on mobile */
+    .pill,
+    #settings-pills .pill,
+    #settings-pills > * {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+    }
+    
+    /* Ensure button maintains minimum touch target */
+    #copy-button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    /* Adjust text size in prompt area for better mobile readability */
+    #prompt-text {
+        line-height: 1.5;
+    }
+    
+    /* Make sure settings pills don't overflow */
+    #settings-pills {
+        overflow: hidden;
+    }
+    
+    /* Compact layout adjustments */
+    .viewer-mode {
+        gap: 0.5rem;
+    }
+}
+
+/* Very small mobile devices */
+@media (max-width: 480px) {
+    /* Even more compact spacing */
+    .pill,
+    #settings-pills .pill,
+    #settings-pills > * {
+        padding: 0.125rem 0.375rem;
+        font-size: 0.6875rem;
+    }
+    
+    /* Smaller button on very small screens */
+    #copy-button {
+        width: 36px;
+        height: 36px;
+        min-width: 36px;
+        min-height: 36px;
+    }
+    
+    #copy-button svg {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+/* Ensure proper touch behavior */
+@media (hover: none) and (pointer: coarse) {
+    /* All interactive elements get proper touch targets */
+    button, 
+    .pill,
+    #settings-pills > * {
+        min-height: 44px;
+    }
+    
+    /* Remove hover effects on touch devices */
+    button:hover {
+        opacity: 1;
+    }
+    
+    /* Add active states for better feedback */
+    button:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
 } 
\ No newline at end of file
diff --git a/_site/embed-preview/index.html b/_site/embed-preview/index.html
index 37f58ad..77e3b31 100644
--- a/_site/embed-preview/index.html
+++ b/_site/embed-preview/index.html
@@ -29,26 +29,26 @@
 </head>
 <body class="bg-dynamic-background text-dynamic-foreground overflow-hidden">
     <!-- Viewer Mode -->
-    <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-4">
+    <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
         <!-- Context Pills -->
-        <div id="context-pills" class="flex flex-wrap gap-2 empty:hidden mb-4"></div>
+        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
         
         <!-- Main Prompt Interface - Full Height -->
         <div class="flex-1 flex flex-col">
-            <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
-                <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar"></div>
-                <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-6 left-6 pointer-events-none">← Enter your prompt on designer...</div>
+            <div id="prompt-container" class="flex-1 bg-dynamic-muted border border-dynamic-border rounded-xl p-3 sm:p-6 relative focus-within:border-dynamic-primary transition-colors flex flex-col">
+                <div id="prompt-text" class="flex-1 text-dynamic-foreground leading-relaxed whitespace-pre-wrap overflow-y-auto custom-scrollbar text-sm sm:text-base"></div>
+                <div id="prompt-placeholder" class="text-dynamic-muted-foreground italic absolute top-3 sm:top-6 left-3 sm:left-6 pointer-events-none text-sm sm:text-base">← Enter your prompt on designer...</div>
             </div>
         </div>
         
         <!-- Bottom Bar -->
-        <div class="flex justify-between items-center mt-4">
+        <div class="flex justify-between items-center gap-2 mt-0 sm:mt-2">
             <!-- Settings Pills -->
-            <div id="settings-pills" class="flex gap-2 flex-wrap"></div>
+            <div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
             
             <!-- Send Button (circular with arrow up) -->
-            <button id="copy-button" class="w-10 h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg" title="Send prompt">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <button id="copy-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg touch-target" title="Send prompt">
+                <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                     <path d="M12 19V5M5 12l7-7 7 7"/>
                 </svg>
             </button>
diff --git a/_site/embed-style.css b/_site/embed-style.css
index 3d47a0c..22126a2 100644
--- a/_site/embed-style.css
+++ b/_site/embed-style.css
@@ -21,14 +21,33 @@
     --border-color-dark: #2d2d2d;
 }
 
+/* Reset body margin and ensure full height */
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100vh;
+}
+
+/* Allow scrolling on mobile */
+@media (max-width: 768px) {
+    body {
+        overflow: auto !important;
+        height: auto !important;
+        min-height: 100vh;
+    }
+}
+
 /* Site Header Styles */
 .site-header {
     padding: 1rem 2rem;
     text-align: left;
     border-bottom: 1px solid var(--border-color);
     background-color: var(--bg-color-light);
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 100;
     display: flex;
     justify-content: space-between;
@@ -109,7 +128,18 @@ body.dark-mode .site-slogan {
 
 /* Adjust designer content to account for header */
 .designer-content {
-    height: calc(100vh - var(--header-height));
+    height: 100vh;
+    padding-top: 0;
+    box-sizing: border-box;
+    display: flex;
+}
+
+/* Override height on mobile to allow scrolling */
+@media (max-width: 768px) {
+    .designer-content {
+        height: auto !important;
+        min-height: 100vh;
+    }
 }
 
 /* Dynamic color classes */
@@ -206,6 +236,10 @@ body.dark-mode .border-dynamic-border {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    height: 100vh;
+    position: relative;
+    width: 320px;
+    flex-shrink: 0;
 }
 
 body.dark-mode .designer-panel {
@@ -213,6 +247,27 @@ body.dark-mode .designer-panel {
     border-right-color: var(--border-color-dark);
 }
 
+/* Adjust the scrollable content area */
+.designer-panel > .flex-1 {
+    padding-top: calc(var(--header-height) + 1rem);
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Ensure the bottom generate buttons section stays at bottom */
+.designer-panel > .p-6:last-child {
+    position: sticky;
+    bottom: 0;
+    background-color: rgb(var(--muted));
+    margin-top: auto;
+}
+
+body.dark-mode .designer-panel > .p-6:last-child {
+    background-color: #2a2a2a;
+}
+
 /* Ensure textarea can be full height */
 #designer-prompt {
     min-height: 200px;
@@ -249,10 +304,31 @@ body.dark-mode .designer-panel {
 }
 
 /* Responsive design improvements */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+    .designer-content {
+        flex-direction: column;
+        height: auto;
+        min-height: 100vh;
+    }
+    
     .designer-panel {
+        width: 100%;
+        height: auto;
+        min-height: auto;
         border-right: 0;
         border-bottom: 1px solid rgb(var(--border));
+        position: relative;
+    }
+    
+    .designer-panel > .flex-1 {
+        padding-top: 1rem;
+        height: auto;
+    }
+    
+    /* Ensure the preview area doesn't take full height on mobile */
+    .designer-content > .flex-1 {
+        min-height: 300px;
+        height: auto;
     }
 }
 
@@ -386,4 +462,303 @@ body.dark-mode #iframe-snippet {
 body.dark-mode #iframe-snippet:hover {
     background-color: rgba(255, 255, 255, 0.08);
     color: rgba(255, 255, 255, 0.9);
+}
+
+/* ============================== */
+/* Mobile Responsive Styles       */
+/* ============================== */
+
+/* Touch target improvements for mobile */
+.touch-target {
+    min-height: 44px;
+    min-width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .touch-target {
+        min-height: 48px;
+        min-width: 48px;
+    }
+}
+
+/* Mobile menu toggle button */
+.mobile-menu-toggle {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--accent-color);
+    cursor: pointer;
+    padding: 8px;
+    margin-right: 8px;
+}
+
+.mobile-menu-toggle svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile close button - hidden by default */
+.mobile-close-btn {
+    display: none;
+    position: absolute;
+    top: calc(var(--header-height) + 1rem);
+    right: 1rem;
+    z-index: 10;
+    background: transparent;
+    border: none;
+    color: rgb(var(--muted-foreground));
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.mobile-close-btn:hover {
+    background: rgb(var(--muted));
+    color: rgb(var(--foreground));
+}
+
+.mobile-close-btn svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile overlay */
+.mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-overlay.active {
+    opacity: 1;
+}
+
+
+
+/* Mobile devices */
+@media (max-width: 768px) {
+    /* Header adjustments */
+    .site-header {
+        padding: 1rem;
+        height: 60px;
+        --header-height: 60px;
+    }
+    
+    .header-left {
+        flex: 1;
+    }
+    
+    .site-title {
+        font-size: 1.4rem;
+    }
+    
+    .site-slogan {
+        font-size: 0.75rem;
+    }
+    
+    /* Simplified mobile layout - stack vertically */
+    .designer-content {
+        flex-direction: column !important;
+        height: auto !important;
+        min-height: 100vh;
+        padding-top: 60px; /* Account for fixed header */
+        overflow: visible !important;
+    }
+    
+    .designer-panel {
+        position: relative;
+        width: 100%;
+        height: auto;
+        min-height: auto;
+        border-right: none;
+        border-bottom: 1px solid rgb(var(--border));
+        order: 2; /* Bottom on mobile */
+        overflow: visible;
+    }
+    
+    .designer-panel > .flex-1 {
+        padding-top: 1rem;
+        height: auto;
+        max-height: none;
+        overflow: visible;
+    }
+    
+    /* Preview adjustments */
+    .designer-content > .flex-1 {
+        order: 1; /* Top on mobile */
+        padding: 1rem;
+        min-height: 300px;
+        height: auto;
+    }
+    
+    #preview-wrapper {
+        max-width: 100%;
+        height: 250px; /* Fixed height on mobile */
+    }
+    
+    /* Form element adjustments */
+    .designer-panel .p-4 {
+        padding: 1rem;
+    }
+    
+    input[type="text"],
+    input[type="color"],
+    textarea,
+    select {
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+    
+    /* Make buttons more touch-friendly */
+    button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    .color-preset {
+        height: 40px;
+    }
+    
+    /* Modal adjustments */
+    #embed-modal > div {
+        margin: 1rem;
+        max-height: calc(100vh - 2rem);
+    }
+    
+    /* Notification adjustments */
+    #notification {
+        top: auto;
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+        text-align: center;
+    }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+    .site-header {
+        padding: 0.75rem;
+    }
+    
+    .site-title {
+        font-size: 1.2rem;
+    }
+    
+    /* Stack color inputs vertically */
+    .flex.items-center.gap-3 {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    /* Stack grid columns on very small screens */
+    .grid.grid-cols-2,
+    .grid.grid-cols-3,
+    .grid.grid-cols-4 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    /* Adjust modal padding */
+    #embed-modal > div {
+        padding: 1rem;
+    }
+    
+    /* Make range slider easier to use */
+    input[type="range"]::-webkit-slider-thumb {
+        height: 24px;
+        width: 24px;
+        margin-top: -8px;
+    }
+    
+    input[type="range"]::-moz-range-thumb {
+        height: 24px;
+        width: 24px;
+    }
+}
+
+/* Landscape orientation adjustments */
+@media (max-height: 600px) and (orientation: landscape) {
+    .site-header {
+        height: 50px;
+        --header-height: 50px;
+        padding: 0.5rem 1rem;
+    }
+    
+    .designer-panel {
+        max-height: calc(100vh - 50px);
+    }
+    
+    .designer-panel .flex-1 {
+        max-height: calc(100vh - 170px);
+    }
+    
+    #designer-prompt {
+        min-height: 100px;
+        rows: 4;
+    }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+    /* Increase tap targets */
+    button,
+    input[type="checkbox"],
+    input[type="radio"],
+    select {
+        min-height: 44px;
+    }
+    
+    /* Remove hover effects on touch devices */
+    .theme-mode-btn:hover:not(.bg-dynamic-primary),
+    .color-preset:hover,
+    button:hover {
+        transform: none;
+        opacity: 1;
+    }
+    
+    /* Add active states for better feedback */
+    button:active,
+    .theme-mode-btn:active,
+    .color-preset:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .border-dynamic-border {
+        border-width: 2px;
+    }
+    
+    input:focus,
+    textarea:focus,
+    select:focus {
+        outline-width: 3px;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Right Panel - Preview adjustments */
+.designer-content > .flex-1 {
+    padding-top: var(--header-height);
+    box-sizing: border-box;
 } 
\ No newline at end of file
diff --git a/_site/embed/index.html b/_site/embed/index.html
index c3ae180..e38564a 100644
--- a/_site/embed/index.html
+++ b/_site/embed/index.html
@@ -33,10 +33,11 @@
     <header class="site-header">
         <div class="header-left">
             <h1 class="site-title">prompts.chat/embed</h1>
-            <p class="site-slogan">Design and share beautiful AI prompts, for your website or blog.</p>
+            <p class="site-slogan hidden sm:block">Design and share beautiful AI prompts, for your website or blog.</p>
+            <p class="site-slogan sm:hidden">Design and share AI prompts</p>
         </div>
         <div class="header-right">
-            <button class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
+            <button class="dark-mode-toggle touch-target" onclick="toggleDarkMode()" title="Toggle dark mode">
                 <svg class="mode-icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                 <svg class="mode-icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
             </button>
@@ -44,16 +45,16 @@
     </header>
     
     <!-- Designer Mode -->
-    <div id="designer-mode" class="designer-content flex">
+    <div id="designer-mode" class="designer-content flex flex-col lg:flex-row min-h-0">
         <!-- Left Panel - Customization -->
-        <div class="designer-panel w-80 flex flex-col h-full overflow-hidden">
+        <div class="designer-panel w-full lg:w-80 flex flex-col h-auto lg:h-full overflow-hidden order-2 lg:order-1 flex-shrink-0">
             <div class="flex-1 overflow-y-auto custom-scrollbar">
-                <div class="p-6 space-y-4">
+                <div class="p-4 lg:p-6 lg:pt-0 space-y-4">
                     <!-- Context -->
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Context</label>
                         <input type="text" id="designer-context" 
-                               class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring"
+                               class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target"
                                placeholder="file.py, @web, @codebase, #image">
                     </div>
                     
@@ -61,35 +62,35 @@
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Prompt Text</label>
                         <textarea id="designer-prompt" 
-                                 class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar"
+                                 class="w-full p-3 bg-dynamic-background border border-dynamic-border rounded-lg text-sm resize-none focus-ring custom-scrollbar touch-target"
                                  rows="8"
                                  placeholder="Enter your prompt..."></textarea>
-                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity">
+                        <button type="button" id="load-example" class="text-xs text-dynamic-primary hover:text-opacity-80 transition-opacity touch-target py-1">
                             Load example →
                         </button>
                     </div>
                     
                     <!-- Model & Mode -->
-                    <div class="grid grid-cols-2 gap-3">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         <div class="space-y-2">
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
-                            <select id="designer-model" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
+                            <select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="o3">o3</option>
-                                <option value="gpt-4.1">GPT 4.1</option>
-                                <option value="gpt-4o" selected>GPT 4o</option>
-                                <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
-                                <option value="claude-4-sonnet">Claude 4 Sonnet</option>
-                                <option value="claude-4-opus">Claude 4 Opus</option>
-                                <option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
+                                <option value="GPT-4.1">GPT 4.1</option>
+                                <option value="GPT 4o" selected>GPT 4o</option>
+                                <option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
+                                <option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
+                                <option value="Claude 4 Opus">Claude 4 Opus</option>
+                                <option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
                                 <option value="custom">[Custom]</option>
                             </select>
                             <input type="text" id="designer-custom-model" 
-                                   class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden"
+                                   class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring hidden touch-target"
                                    placeholder="Enter custom model name">
                         </div>
                         <div class="space-y-2">
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Mode</label>
-                            <select id="designer-mode-select" class="w-full p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring">
+                            <select id="designer-mode-select" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="chat">Chat</option>
                                 <option value="agent">Agent</option>
                                 <option value="manual">Manual</option>
@@ -99,13 +100,13 @@
                     </div>
                     
                     <!-- Options -->
-                    <div class="grid grid-cols-2 gap-3">
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 justify-items-start">
+                        <label class="flex items-center space-x-2 touch-target">
+                            <input type="checkbox" id="designer-thinking" class="rounded border-dynamic-border w-4 h-4">
                             <span class="text-sm text-dynamic-muted-foreground">Thinking</span>
                         </label>
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="designer-max" class="rounded border-dynamic-border">
+                        <label class="flex items-center space-x-2 touch-target">
+                            <input type="checkbox" id="designer-max" class="rounded border-dynamic-border w-4 h-4">
                             <span class="text-sm text-dynamic-muted-foreground">MAX mode</span>
                         </label>
                     </div>
@@ -114,13 +115,13 @@
                     <div class="space-y-2">
                         <label class="text-sm font-medium text-dynamic-muted-foreground">Theme Mode</label>
                         <div class="grid grid-cols-3 gap-2">
-                            <button type="button" id="theme-light" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
+                            <button type="button" id="theme-light" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
                                 Light
                             </button>
-                            <button type="button" id="theme-dark" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center">
+                            <button type="button" id="theme-dark" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-background hover:bg-dynamic-muted transition-colors text-center touch-target">
                                 Dark
                             </button>
-                            <button type="button" id="theme-auto" class="theme-mode-btn px-3 py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center">
+                            <button type="button" id="theme-auto" class="theme-mode-btn px-3 py-3 lg:py-2 text-xs font-medium rounded-lg border border-dynamic-border bg-dynamic-primary text-white transition-colors text-center touch-target">
                                 Auto
                             </button>
                         </div>
@@ -134,35 +135,35 @@
                         <div class="space-y-2">
                             <label class="text-xs text-dynamic-muted-foreground uppercase tracking-wider">Presets</label>
                             <div class="grid grid-cols-4 gap-2">
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#6b7280" data-dark="#e5e7eb" 
                                         style="background: linear-gradient(135deg, #6b7280 50%, #e5e7eb 50%)" 
                                         title="Minimal"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#1f2937" data-dark="#9ca3af" 
                                         style="background: linear-gradient(135deg, #1f2937 50%, #9ca3af 50%)" 
                                         title="Dark Gray"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#64748b" data-dark="#94a3b8" 
                                         style="background: linear-gradient(135deg, #64748b 50%, #94a3b8 50%)" 
                                         title="Dimmed"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#3b82f6" data-dark="#60a5fa" 
                                         style="background: linear-gradient(135deg, #3b82f6 50%, #60a5fa 50%)" 
                                         title="Blue"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#10b981" data-dark="#34d399" 
                                         style="background: linear-gradient(135deg, #10b981 50%, #34d399 50%)" 
                                         title="Green"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#8b5cf6" data-dark="#a78bfa" 
                                         style="background: linear-gradient(135deg, #8b5cf6 50%, #a78bfa 50%)" 
                                         title="Purple"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#f97316" data-dark="#fb923c" 
                                         style="background: linear-gradient(135deg, #f97316 50%, #fb923c 50%)" 
                                         title="Orange"></button>
-                                <button type="button" class="color-preset w-full h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors" 
+                                <button type="button" class="color-preset w-full h-10 lg:h-8 rounded-lg border-2 border-transparent hover:border-dynamic-primary transition-colors touch-target" 
                                         data-light="#ec4899" data-dark="#f472b6" 
                                         style="background: linear-gradient(135deg, #ec4899 50%, #f472b6 50%)" 
                                         title="Pink"></button>
@@ -178,14 +179,14 @@
                                         <div class="relative">
                                             <input type="color" id="designer-light-color" 
                                                    value="#3b82f6"
-                                                   class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
+                                                   class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
                                             <div class="absolute inset-0 rounded-lg pointer-events-none" style="background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%)"></div>
                                         </div>
                                         <div class="flex-1">
                                             <label class="text-xs text-dynamic-muted-foreground block mb-1">Light Mode</label>
                                             <input type="text" id="designer-light-color-text" 
                                                    value="#3b82f6"
-                                                   class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
+                                                   class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
                                                    pattern="^#[0-9A-Fa-f]{6}$">
                                         </div>
                                     </div>
@@ -195,14 +196,14 @@
                                         <div class="relative">
                                             <input type="color" id="designer-dark-color" 
                                                    value="#60a5fa"
-                                                   class="w-10 h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors">
+                                                   class="w-12 h-12 lg:w-10 lg:h-10 rounded-lg border-2 border-dynamic-border cursor-pointer hover:border-dynamic-primary transition-colors touch-target">
                                             <div class="absolute inset-0 rounded-lg pointer-events-none" style="background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.1) 50%)"></div>
                                         </div>
                                         <div class="flex-1">
                                             <label class="text-xs text-dynamic-muted-foreground block mb-1">Dark Mode</label>
                                             <input type="text" id="designer-dark-color-text" 
                                                    value="#60a5fa"
-                                                   class="w-full px-2 py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono"
+                                                   class="w-full px-3 py-2 lg:px-2 lg:py-1 bg-dynamic-background border border-dynamic-border rounded text-xs focus-ring font-mono touch-target"
                                                    pattern="^#[0-9A-Fa-f]{6}$">
                                         </div>
                                     </div>
@@ -228,28 +229,28 @@
             </div>
             
             <!-- Generate Buttons - Fixed at bottom -->
-            <div class="p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted">
-                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
+            <div class="p-4 lg:p-6 space-y-3 border-t border-dynamic-border bg-dynamic-muted lg:pb-0">
+                <button id="generate-embed" class="w-full bg-dynamic-primary text-white p-3 lg:p-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity touch-target">
                     Generate Embed Code
                 </button>
-                <button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100">
+                <button id="reset-settings" class="text-[11px] text-dynamic-muted-foreground hover:text-dynamic-foreground transition-colors opacity-60 hover:opacity-100 touch-target">
                     Reset settings
                 </button>
             </div>
         </div>
         
         <!-- Right Panel - Preview -->
-        <div class="flex-1 flex items-center justify-center p-8 bg-dynamic-muted/20">
+        <div class="flex-none lg:flex-1 flex items-center justify-center px-4 pb-4 pt-0 lg:p-8 bg-dynamic-muted/20 order-1 lg:order-2 min-h-[300px] lg:min-h-0">
             <div class="w-full max-w-3xl">
-                <h3 class="text-center text-sm font-medium text-dynamic-muted-foreground mb-4">Preview of the embed. You can change the settings on the left.</h3>
-                <div id="preview-wrapper" class="bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg" style="height: 400px;">
+                <h3 class="text-center text-sm font-medium text-dynamic-muted-foreground mb-4 hidden lg:block">Preview of the embed. You can change the settings below.</h3>
+                <div id="preview-wrapper" class="bg-dynamic-background border border-dynamic-border rounded-xl overflow-hidden shadow-lg h-[250px] sm:h-[300px] lg:h-[400px] mt-4 lg:mt-0">
                     <div class="h-full" id="preview-container">
                         <!-- Preview iframe will be injected here -->
                     </div>
                 </div>
                 <div class="mt-4 space-y-1">
                     <label class="text-[10px] text-dynamic-muted-foreground opacity-60 dark:opacity-40">Click to copy iframe code:</label>
-                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden">
+                    <div id="iframe-snippet" class="px-2 py-1 bg-dynamic-muted/30 border border-dynamic-border/50 rounded text-[10px] text-dynamic-muted-foreground font-mono cursor-pointer hover:bg-dynamic-muted/50 hover:text-dynamic-foreground transition-all overflow-hidden touch-target">
                         &lt;iframe src="..."&gt;&lt;/iframe&gt;
                     </div>
                 </div>
@@ -259,10 +260,10 @@
     
     <!-- Embed Code Modal -->
     <div id="embed-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-        <div class="bg-dynamic-background rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+        <div class="bg-dynamic-background rounded-xl p-4 lg:p-6 max-w-2xl w-full max-h-[90vh] lg:max-h-[80vh] overflow-y-auto">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-semibold text-dynamic-foreground">Embed Code</h3>
-                <button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground">
+                <button id="close-modal" class="text-dynamic-muted-foreground hover:text-dynamic-foreground touch-target p-1">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M18 6L6 18M6 6l12 12"/>
                     </svg>
@@ -271,13 +272,13 @@
             <div class="space-y-4">
                 <div>
                     <label class="text-sm font-medium text-dynamic-muted-foreground">iframe Embed Code</label>
-                    <textarea id="embed-code" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="4" readonly></textarea>
-                    <button id="copy-embed-code" class="mt-2 px-4 py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90">Copy Code</button>
+                    <textarea id="embed-code" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows="4" readonly></textarea>
+                    <button id="copy-embed-code" class="mt-2 px-4 py-3 lg:py-2 bg-dynamic-primary text-white rounded-lg text-sm hover:opacity-90 touch-target">Copy Code</button>
                 </div>
                 <div>
                     <label class="text-sm font-medium text-dynamic-muted-foreground">Share URL</label>
-                    <textarea id="share-url" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2" rows="2" readonly></textarea>
-                    <button id="copy-share-url" class="mt-2 px-4 py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80">Copy URL</button>
+                    <textarea id="share-url" class="w-full p-3 bg-dynamic-muted border border-dynamic-border rounded-lg text-sm font-mono mt-2 resize-none" rows="2" readonly></textarea>
+                    <button id="copy-share-url" class="mt-2 px-4 py-3 lg:py-2 bg-dynamic-muted text-dynamic-foreground rounded-lg text-sm hover:bg-opacity-80 touch-target">Copy URL</button>
                 </div>
             </div>
         </div>
diff --git a/_site/index.html b/_site/index.html
index 10c7c3b..5c3732a 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -25,7 +25,7 @@
 
 
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/style.css?v=7cf6e89aa75f7dc983ea6003b1c5904a7c7810ac">
+    <link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
   </head>
   <body class="">
     <div class="layout-wrapper">
diff --git a/_site/vibe/index.html b/_site/vibe/index.html
index 56c7f65..ce33af7 100644
--- a/_site/vibe/index.html
+++ b/_site/vibe/index.html
@@ -25,7 +25,7 @@
 
 
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/style.css?v=7cf6e89aa75f7dc983ea6003b1c5904a7c7810ac">
+    <link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
   </head>
   <body class="vibe">
     <div class="layout-wrapper">
diff --git a/embed-preview-script.js b/embed-preview-script.js
index 43baad7..08c6a33 100644
--- a/embed-preview-script.js
+++ b/embed-preview-script.js
@@ -277,7 +277,7 @@ class EmbedPreview {
     
     createSettingPill(text, type) {
         const pill = document.createElement('div');
-        pill.className = 'px-3 py-2 rounded-full text-xs font-medium flex items-center gap-1.5';
+        pill.className = 'rounded-full text-xs font-medium flex items-center gap-1.5';
         
         let icon = '';
         
@@ -285,13 +285,13 @@ class EmbedPreview {
         if (type === 'mode') {
             // Mode pill keeps the background
             if (this.isDarkMode) {
-                pill.className += ' bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
+                pill.className += ' px-3 py-2 bg-dynamic-primary/20 text-dynamic-foreground border border-dynamic-primary/30';
             } else {
-                pill.className += ' bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
+                pill.className += ' px-3 py-2 bg-dynamic-primary/10 text-dynamic-foreground border border-dynamic-primary/20';
             }
         } else {
             // Model, thinking, and max pills only have text color
-            pill.className += ' text-dynamic-primary';
+            pill.className += ' pl-1 text-dynamic-primary';
         }
         
         switch (type) {
diff --git a/embed-preview-style.css b/embed-preview-style.css
index ce353f8..19e68ee 100644
--- a/embed-preview-style.css
+++ b/embed-preview-style.css
@@ -78,4 +78,108 @@
 
 .viewer-mode .prompt-input:focus {
     outline: none;
+}
+
+/* Hide scrollbar for horizontal scrolling pills */
+.scrollbar-hide {
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+}
+
+/* Touch target improvements for mobile */
+.touch-target {
+    min-height: 44px;
+    min-width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Responsive improvements */
+@media (max-width: 640px) {
+    /* Ensure context pills don't wrap and scroll horizontally */
+    #context-pills {
+        flex-wrap: nowrap;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+    
+    /* More compact pill spacing on mobile */
+    .pill,
+    #settings-pills .pill,
+    #settings-pills > * {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+    }
+    
+    /* Ensure button maintains minimum touch target */
+    #copy-button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    /* Adjust text size in prompt area for better mobile readability */
+    #prompt-text {
+        line-height: 1.5;
+    }
+    
+    /* Make sure settings pills don't overflow */
+    #settings-pills {
+        overflow: hidden;
+    }
+    
+    /* Compact layout adjustments */
+    .viewer-mode {
+        gap: 0.5rem;
+    }
+}
+
+/* Very small mobile devices */
+@media (max-width: 480px) {
+    /* Even more compact spacing */
+    .pill,
+    #settings-pills .pill,
+    #settings-pills > * {
+        padding: 0.125rem 0.375rem;
+        font-size: 0.6875rem;
+    }
+    
+    /* Smaller button on very small screens */
+    #copy-button {
+        width: 36px;
+        height: 36px;
+        min-width: 36px;
+        min-height: 36px;
+    }
+    
+    #copy-button svg {
+        width: 14px;
+        height: 14px;
+    }
+}
+
+/* Ensure proper touch behavior */
+@media (hover: none) and (pointer: coarse) {
+    /* All interactive elements get proper touch targets */
+    button, 
+    .pill,
+    #settings-pills > * {
+        min-height: 44px;
+    }
+    
+    /* Remove hover effects on touch devices */
+    button:hover {
+        opacity: 1;
+    }
+    
+    /* Add active states for better feedback */
+    button:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
 } 
\ No newline at end of file
diff --git a/embed-style.css b/embed-style.css
index 3d47a0c..22126a2 100644
--- a/embed-style.css
+++ b/embed-style.css
@@ -21,14 +21,33 @@
     --border-color-dark: #2d2d2d;
 }
 
+/* Reset body margin and ensure full height */
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100vh;
+}
+
+/* Allow scrolling on mobile */
+@media (max-width: 768px) {
+    body {
+        overflow: auto !important;
+        height: auto !important;
+        min-height: 100vh;
+    }
+}
+
 /* Site Header Styles */
 .site-header {
     padding: 1rem 2rem;
     text-align: left;
     border-bottom: 1px solid var(--border-color);
     background-color: var(--bg-color-light);
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 100;
     display: flex;
     justify-content: space-between;
@@ -109,7 +128,18 @@ body.dark-mode .site-slogan {
 
 /* Adjust designer content to account for header */
 .designer-content {
-    height: calc(100vh - var(--header-height));
+    height: 100vh;
+    padding-top: 0;
+    box-sizing: border-box;
+    display: flex;
+}
+
+/* Override height on mobile to allow scrolling */
+@media (max-width: 768px) {
+    .designer-content {
+        height: auto !important;
+        min-height: 100vh;
+    }
 }
 
 /* Dynamic color classes */
@@ -206,6 +236,10 @@ body.dark-mode .border-dynamic-border {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    height: 100vh;
+    position: relative;
+    width: 320px;
+    flex-shrink: 0;
 }
 
 body.dark-mode .designer-panel {
@@ -213,6 +247,27 @@ body.dark-mode .designer-panel {
     border-right-color: var(--border-color-dark);
 }
 
+/* Adjust the scrollable content area */
+.designer-panel > .flex-1 {
+    padding-top: calc(var(--header-height) + 1rem);
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Ensure the bottom generate buttons section stays at bottom */
+.designer-panel > .p-6:last-child {
+    position: sticky;
+    bottom: 0;
+    background-color: rgb(var(--muted));
+    margin-top: auto;
+}
+
+body.dark-mode .designer-panel > .p-6:last-child {
+    background-color: #2a2a2a;
+}
+
 /* Ensure textarea can be full height */
 #designer-prompt {
     min-height: 200px;
@@ -249,10 +304,31 @@ body.dark-mode .designer-panel {
 }
 
 /* Responsive design improvements */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+    .designer-content {
+        flex-direction: column;
+        height: auto;
+        min-height: 100vh;
+    }
+    
     .designer-panel {
+        width: 100%;
+        height: auto;
+        min-height: auto;
         border-right: 0;
         border-bottom: 1px solid rgb(var(--border));
+        position: relative;
+    }
+    
+    .designer-panel > .flex-1 {
+        padding-top: 1rem;
+        height: auto;
+    }
+    
+    /* Ensure the preview area doesn't take full height on mobile */
+    .designer-content > .flex-1 {
+        min-height: 300px;
+        height: auto;
     }
 }
 
@@ -386,4 +462,303 @@ body.dark-mode #iframe-snippet {
 body.dark-mode #iframe-snippet:hover {
     background-color: rgba(255, 255, 255, 0.08);
     color: rgba(255, 255, 255, 0.9);
+}
+
+/* ============================== */
+/* Mobile Responsive Styles       */
+/* ============================== */
+
+/* Touch target improvements for mobile */
+.touch-target {
+    min-height: 44px;
+    min-width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .touch-target {
+        min-height: 48px;
+        min-width: 48px;
+    }
+}
+
+/* Mobile menu toggle button */
+.mobile-menu-toggle {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--accent-color);
+    cursor: pointer;
+    padding: 8px;
+    margin-right: 8px;
+}
+
+.mobile-menu-toggle svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile close button - hidden by default */
+.mobile-close-btn {
+    display: none;
+    position: absolute;
+    top: calc(var(--header-height) + 1rem);
+    right: 1rem;
+    z-index: 10;
+    background: transparent;
+    border: none;
+    color: rgb(var(--muted-foreground));
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}
+
+.mobile-close-btn:hover {
+    background: rgb(var(--muted));
+    color: rgb(var(--foreground));
+}
+
+.mobile-close-btn svg {
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile overlay */
+.mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-overlay.active {
+    opacity: 1;
+}
+
+
+
+/* Mobile devices */
+@media (max-width: 768px) {
+    /* Header adjustments */
+    .site-header {
+        padding: 1rem;
+        height: 60px;
+        --header-height: 60px;
+    }
+    
+    .header-left {
+        flex: 1;
+    }
+    
+    .site-title {
+        font-size: 1.4rem;
+    }
+    
+    .site-slogan {
+        font-size: 0.75rem;
+    }
+    
+    /* Simplified mobile layout - stack vertically */
+    .designer-content {
+        flex-direction: column !important;
+        height: auto !important;
+        min-height: 100vh;
+        padding-top: 60px; /* Account for fixed header */
+        overflow: visible !important;
+    }
+    
+    .designer-panel {
+        position: relative;
+        width: 100%;
+        height: auto;
+        min-height: auto;
+        border-right: none;
+        border-bottom: 1px solid rgb(var(--border));
+        order: 2; /* Bottom on mobile */
+        overflow: visible;
+    }
+    
+    .designer-panel > .flex-1 {
+        padding-top: 1rem;
+        height: auto;
+        max-height: none;
+        overflow: visible;
+    }
+    
+    /* Preview adjustments */
+    .designer-content > .flex-1 {
+        order: 1; /* Top on mobile */
+        padding: 1rem;
+        min-height: 300px;
+        height: auto;
+    }
+    
+    #preview-wrapper {
+        max-width: 100%;
+        height: 250px; /* Fixed height on mobile */
+    }
+    
+    /* Form element adjustments */
+    .designer-panel .p-4 {
+        padding: 1rem;
+    }
+    
+    input[type="text"],
+    input[type="color"],
+    textarea,
+    select {
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+    
+    /* Make buttons more touch-friendly */
+    button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    .color-preset {
+        height: 40px;
+    }
+    
+    /* Modal adjustments */
+    #embed-modal > div {
+        margin: 1rem;
+        max-height: calc(100vh - 2rem);
+    }
+    
+    /* Notification adjustments */
+    #notification {
+        top: auto;
+        bottom: 1rem;
+        right: 1rem;
+        left: 1rem;
+        text-align: center;
+    }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+    .site-header {
+        padding: 0.75rem;
+    }
+    
+    .site-title {
+        font-size: 1.2rem;
+    }
+    
+    /* Stack color inputs vertically */
+    .flex.items-center.gap-3 {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    /* Stack grid columns on very small screens */
+    .grid.grid-cols-2,
+    .grid.grid-cols-3,
+    .grid.grid-cols-4 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    /* Adjust modal padding */
+    #embed-modal > div {
+        padding: 1rem;
+    }
+    
+    /* Make range slider easier to use */
+    input[type="range"]::-webkit-slider-thumb {
+        height: 24px;
+        width: 24px;
+        margin-top: -8px;
+    }
+    
+    input[type="range"]::-moz-range-thumb {
+        height: 24px;
+        width: 24px;
+    }
+}
+
+/* Landscape orientation adjustments */
+@media (max-height: 600px) and (orientation: landscape) {
+    .site-header {
+        height: 50px;
+        --header-height: 50px;
+        padding: 0.5rem 1rem;
+    }
+    
+    .designer-panel {
+        max-height: calc(100vh - 50px);
+    }
+    
+    .designer-panel .flex-1 {
+        max-height: calc(100vh - 170px);
+    }
+    
+    #designer-prompt {
+        min-height: 100px;
+        rows: 4;
+    }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+    /* Increase tap targets */
+    button,
+    input[type="checkbox"],
+    input[type="radio"],
+    select {
+        min-height: 44px;
+    }
+    
+    /* Remove hover effects on touch devices */
+    .theme-mode-btn:hover:not(.bg-dynamic-primary),
+    .color-preset:hover,
+    button:hover {
+        transform: none;
+        opacity: 1;
+    }
+    
+    /* Add active states for better feedback */
+    button:active,
+    .theme-mode-btn:active,
+    .color-preset:active {
+        transform: scale(0.95);
+        transition: transform 0.1s ease;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .border-dynamic-border {
+        border-width: 2px;
+    }
+    
+    input:focus,
+    textarea:focus,
+    select:focus {
+        outline-width: 3px;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* Right Panel - Preview adjustments */
+.designer-content > .flex-1 {
+    padding-top: var(--header-height);
+    box-sizing: border-box;
 } 
\ No newline at end of file
