Update index.html

index.html

@@ -7,151 +7,67 @@
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-start: #f5f7ff; --bg-end: #eef2ff; --text-color: #1e293b;
-            --card-bg: #ffffff; --border-color: #e2e8f0;
-            --primary-color-start: #4f46e5; --primary-color-end: #a855f7;
+            --bg-start: #f5f7ff;
+            --bg-end: #eef2ff;
+            --text-color: #1e293b;
+            --card-bg: #ffffff;
+            --border-color: #e2e8f0;
+            --primary-color-start: #4f46e5;
+            --primary-color-end: #a855f7;
             --shadow-color-light: rgba(79, 70, 229, 0.08);
             --shadow-color-dark: rgba(30, 41, 59, 0.05);
-            --drop-zone-bg: #f8fafc; --danger-color: #ef4444;
+            --drop-zone-bg: #f8fafc;
+            --danger-color: #ef4444;
             --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
         }
-        .dark {
-            --bg-start: #0f172a; --bg-end: #0b1120; --text-color: #e2e8f0;
-            --card-bg: #1e293b; --border-color: #334155;
-            --shadow-color-light: rgba(0, 0, 0, 0.2); --shadow-color-dark: rgba(0, 0, 0, 0.25);
-            --drop-zone-bg: #111827;
-        }
+
+        /* --- Base & Animation Styles --- */
         @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
-        
-        body {
-            font-family: 'Vazirmatn', sans-serif; background-color: var(--bg-start);
-            background-image: radial-gradient(circle at top left, var(--bg-start), var(--bg-end));
-            color: var(--text-color); margin: 0; padding: 3rem 1rem;
-            display: flex; justify-content: center; align-items: flex-start;
-            min-height: 100vh; transition: background-color 0.4s, color 0.4s;
-        }
+        body { font-family: 'Vazirmatn', sans-serif; background-color: var(--bg-start); background-image: radial-gradient(circle at top left, var(--bg-start), var(--bg-end)); color: var(--text-color); margin: 0; padding: 3rem 1rem; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; transition: background-color 0.4s, color 0.4s; }
         .container { max-width: 750px; width: 100%; }
         header { text-align: center; margin-bottom: 3rem; animation: fadeInUp 0.8s var(--ease-out-expo) forwards; }
-        h1 {
-            font-size: 3rem; font-weight: 800; letter-spacing: -1px; margin: 0;
-            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-        }
+        h1 { font-size: 3rem; font-weight: 800; letter-spacing: -1px; margin: 0; background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
         p.subtitle { font-size: 1.2rem; color: #64748b; margin-top: 0.75rem; }
-        .dark p.subtitle { color: #94a3b8; }
-
-        main, .gallery-section {
-            background-color: var(--card-bg); border-radius: 2rem;
-            border: 1px solid var(--border-color);
-            box-shadow: 0 4px 10px var(--shadow-color-dark), 0 20px 40px var(--shadow-color-light);
-            padding: 3rem; transition: all 0.4s; animation: fadeInUp 0.8s var(--ease-out-expo) forwards; opacity: 0;
-        }
+        main, .gallery-section { background-color: var(--card-bg); border-radius: 2rem; border: 1px solid var(--border-color); box-shadow: 0 4px 10px var(--shadow-color-dark), 0 20px 40px var(--shadow-color-light); padding: 3rem; transition: all 0.4s; animation: fadeInUp 0.8s var(--ease-out-expo) forwards; opacity: 0; }
         main { animation-delay: 0.2s; }
         .gallery-section { margin-top: 3rem; animation-delay: 0.4s; }
-
-        .panel, .controls { margin-bottom: 3rem; }
+        .panel { margin-bottom: 3rem; }
         .panel:last-child { margin-bottom: 0; }
-        .controls { margin-bottom: 2.5rem; }
-        
-        h2 {
-            font-size: 1.4rem; font-weight: 700; margin: 0 0 1.5rem 0; padding-bottom: 1rem;
-            display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border-color);
-        }
+        h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.5rem 0; padding-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border-color); }
         h2 svg { color: var(--primary-color-start); }
 
-        /* --- NEW: Improved Uploader Styles --- */
-        #drop-zone {
-            border: 2px dashed var(--border-color); border-radius: 1.5rem; text-align: center;
-            transition: all 0.3s var(--ease-out-expo); position: relative; overflow: hidden;
-            background-color: var(--drop-zone-bg); min-height: 280px;
-        }
-        #drop-zone-content {
-            display: flex; flex-direction: column; justify-content: center;
-            align-items: center; cursor: pointer; position: absolute; inset: 0;
-            transition: opacity 0.4s ease, transform 0.4s ease;
-        }
-        #drop-zone.has-file #drop-zone-content { opacity: 0; pointer-events: none; transform: scale(0.95); }
+        /* --- IMPROVED: Drop Zone Styles --- */
+        #drop-zone { border: 2px dashed var(--border-color); border-radius: 1.5rem; padding: 1rem; text-align: center; cursor: pointer; transition: all 0.3s var(--ease-out-expo); position: relative; overflow: hidden; background-color: var(--drop-zone-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 280px; }
+        #drop-zone::before { content: ''; position: absolute; inset: -2px; border-radius: 1.5rem; background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: subtract; opacity: 0; transition: opacity 0.3s ease; }
+        #drop-zone.dragover, #drop-zone:not(.has-image):hover { border-color: transparent; transform: translateY(-5px); box-shadow: 0 10px 20px -5px var(--shadow-color-light); }
+        #drop-zone.dragover::before, #drop-zone:not(.has-image):hover::before { opacity: 1; }
+        #drop-zone-content { transition: opacity 0.3s ease, transform 0.3s ease; }
+        #drop-zone:not(.has-image):hover #drop-zone-content { transform: translateY(-5px); }
         #drop-zone-icon { width: 50px; height: 50px; margin-bottom: 1rem; color: #94a3b8; }
         #drop-zone-text { color: #475569; font-weight: 500; }
-        .dark #drop-zone-text { color: #94a3b8; }
-
-        #image-preview-container {
-            position: absolute; inset: 0; opacity: 0; pointer-events: none;
-            transform: scale(0.95); transition: opacity 0.4s ease, transform 0.4s ease;
-        }
-        #drop-zone.has-file #image-preview-container { opacity: 1; pointer-events: auto; transform: scale(1); }
-        
-        #image-preview {
-            width: 100%; height: 100%; padding: 1rem; box-sizing: border-box;
-            border-radius: 1.5rem; object-fit: contain;
-        }
-        #change-image-btn {
-            position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
-            background-color: rgba(30, 41, 59, 0.7); backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.1); color: white;
-            padding: 0.75rem 1.5rem; border-radius: 2rem; cursor: pointer;
-            font-family: 'Vazirmatn', sans-serif; font-weight: 600; display: flex;
-            align-items: center; gap: 0.5rem; transition: all 0.2s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }
-        #change-image-btn:hover { background-color: rgba(30, 41, 59, 0.9); transform: translateX(-50%) translateY(-2px); }
-        #change-image-btn svg { width: 20px; height: 20px; }
+        #image-preview { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; border-radius: 1.5rem; object-fit: contain; opacity: 0; transform: scale(0.95); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
+        #image-preview.visible { opacity: 1; transform: scale(1); }
+        #change-image-overlay { position: absolute; inset: 0; background-color: rgba(30, 41, 59, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
+        #drop-zone.has-image:hover #change-image-overlay { opacity: 1; pointer-events: auto; }
+        #change-image-overlay svg { width: 40px; height: 40px; margin-bottom: 0.75rem; }
         
-        textarea { /* ... (styles unchanged) ... */ }
-        button#submit-btn { /* ... (styles unchanged) ... */ }
-        #result-container { /* ... (styles unchanged) ... */ }
-        #loading-placeholder { /* ... (styles unchanged) ... */ }
-        #result-grid { /* ... (styles unchanged) ... */ }
-        #error-message { /* ... (styles unchanged) ... */ }
-        textarea:focus {
-            outline: none; border-color: var(--primary-color-start);
-            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color-start) 15%, transparent);
-        }
-        button#submit-btn {
-            position: relative; overflow: hidden;
-            width: 100%; padding: 1.1rem; border: none; border-radius: 1rem;
-            background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%);
-            background-size: 200% auto; color: white;
-            font-size: 1.1rem; font-weight: 700; cursor: pointer;
-            margin-top: 1rem; transition: all 0.4s var(--ease-out-expo);
-            box-shadow: 0 4px 15px var(--shadow-color-light);
-        }
-        button#submit-btn:hover:not(:disabled) {
-            transform: translateY(-4px);
-            box-shadow: 0 10px 25px -5px var(--shadow-color-light);
-            background-position: right center;
-        }
+        /* --- Form & Result Styles --- */
+        textarea { width: 100%; padding: 1rem; border: 2px solid var(--border-color); border-radius: 1rem; background-color: var(--drop-zone-bg); color: var(--text-color); font-family: 'Vazirmatn', sans-serif; font-size: 1rem; resize: vertical; min-height: 80px; box-sizing: border-box; transition: all 0.3s ease; }
+        textarea:focus { outline: none; border-color: var(--primary-color-start); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color-start) 15%, transparent); }
+        button#submit-btn { position: relative; overflow: hidden; width: 100%; padding: 1.1rem; border: none; border-radius: 1rem; background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%); background-size: 200% auto; color: white; font-size: 1.1rem; font-weight: 700; cursor: pointer; margin-top: 1rem; transition: all 0.4s var(--ease-out-expo); box-shadow: 0 4px 15px var(--shadow-color-light); }
+        button#submit-btn:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 10px 25px -5px var(--shadow-color-light); background-position: right center; }
         button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .loader-dots {
-            display: flex; justify-content: center; align-items: center;
-            position: absolute; inset: 0;
-        }
-        .loader-dots div {
-            width: 8px; height: 8px; margin: 0 4px; background-color: white; border-radius: 50%;
-            animation: bounce 1.4s infinite ease-in-out both;
-        }
-        .loader-dots .dot1 { animation-delay: -0.32s; }
-        .loader-dots .dot2 { animation-delay: -0.16s; }
-        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
-        #btn-text.hidden { visibility: hidden; }
-
-        #result-container {
-            border: 2px solid var(--border-color); border-radius: 1.5rem;
-            min-height: 300px; 
-            position: relative;
-            background-color: var(--drop-zone-bg); overflow: hidden;
-            padding: 0.5rem; transition: border-color 0.3s ease;
-        }
+        #result-container { border: 2px solid var(--border-color); border-radius: 1.5rem; min-height: 300px; position: relative; background-color: var(--drop-zone-bg); overflow: hidden; padding: 0.5rem; transition: border-color 0.3s ease; }
+        #result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; width: 100%; height: 100%; }
+        @keyframes popIn-spring { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 80% { opacity: 1; transform: scale(1.05) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
+        #result-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards; }
+        #result-grid img:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 10px 30px -5px var(--shadow-color-dark); }
+        #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
         
-        #loading-placeholder {
-            display: none; flex-direction: column; align-items: center; justify-content: center;
-            gap: 1.5rem; opacity: 0; animation: fadeIn 0.5s ease forwards;
-            position: absolute; inset: 0;
-        }
+        /* --- Loading Styles --- */
+        #loading-placeholder { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; animation: fadeIn 0.5s ease forwards; position: absolute; inset: 0; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         #result-container.loading #loading-placeholder { display: flex; }
-        
         .creative-loader { width: 100px; height: 100px; position: relative; }
         .creative-loader svg { width: 100%; height: 100%; transform-origin: center; }
         .creative-loader .arc { fill: none; stroke-width: 4; stroke-linecap: round; transform-origin: 50% 50%; animation: spin-loader 2s linear infinite; }
@@ -161,136 +77,43 @@
         .creative-loader .star { fill: var(--primary-color-end); transform-origin: center; animation: pulse-star 1.5s ease-in-out infinite; }
         @keyframes spin-loader { to { transform: rotate(360deg); } }
         @keyframes pulse-star { 0%, 100% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
-
         .loading-text { font-weight: 500; color: #64748b; }
-        .dark .loading-text { color: #94a3b8; }
-
-        #result-grid {
-            display: grid; grid-template-columns: repeat(2, 1fr);
-            gap: 0.75rem; width: 100%; height: 100%;
-        }
-        @keyframes popIn-spring { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 80% { opacity: 1; transform: scale(1.05) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
-        #result-grid img {
-            width: 100%; height: 100%; object-fit: cover; border-radius: 1rem;
-            cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
-            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
-        }
-        #result-grid img:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 10px 30px -5px var(--shadow-color-dark); }
         
-        #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
-        
-        /* --- NEW: Lightbox with Gallery Controls --- */
-        #lightbox {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(10, 20, 40, 0.85); z-index: 1000; display: none;
-            justify-content: center; align-items: center; padding: 1rem;
-            box-sizing: border-box; backdrop-filter: blur(8px);
-        }
-        #lightbox-img {
-            max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 1rem;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.5); animation: popIn 0.3s ease;
-        }
-        .lightbox-nav {
-            position: absolute; top: 50%; transform: translateY(-50%);
-            background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
-            width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: none;
-            justify-content: center; align-items: center; transition: all 0.2s; font-size: 2rem;
-        }
-        .lightbox-nav.visible { display: flex; }
-        #lightbox-prev { left: 20px; }
-        #lightbox-next { right: 20px; }
-        .lightbox-nav:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.1); }
-        
-        #lightbox-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
-        .lightbox-btn {
-            background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
-            width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex;
-            justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none;
-        }
-        .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
-        #lightbox-close { position: absolute; top: 20px; right: 20px; }
-        
-        /* --- History Gallery Styles --- */
+        /* --- IMPROVED: History Gallery Styles --- */
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
-        #clear-history-btn { /* ... (styles unchanged) ... */ }
-        #history-grid { /* ... (styles unchanged) ... */ }
-        .history-item { position: relative; /* ... (other styles unchanged) ... */ }
-        .history-item-img-wrapper { position: relative; }
-        .history-item-count {
-            position: absolute; top: 1rem; left: 1rem;
-            background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(4px);
-            color: white; font-size: 0.8rem; font-weight: 600;
-            padding: 0.25rem 0.6rem; border-radius: 2rem;
-            animation: popIn 0.5s 0.8s backwards;
-        }
-        #clear-history-btn {
-            background: none; border: 1px solid var(--border-color); color: #64748b;
-            padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer;
-            display: flex; align-items: center; gap: 0.5rem;
-            font-family: 'Vazirmatn', sans-serif; font-weight: 500; transition: all 0.2s;
-        }
+        #clear-history-btn { background: none; border: 1px solid var(--border-color); color: #64748b; padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-family: 'Vazirmatn', sans-serif; font-weight: 500; transition: all 0.2s; }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
-        #clear-history-btn svg { width: 18px; height: 18px; }
-
-        #history-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 1.5rem;
-            margin-top: 1.5rem;
-        }
-        #history-grid:empty::before {
-            content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.';
-            color: #64748b;
-            .dark & { color: #94a3b8; }
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 3rem 1rem;
-            background-color: var(--drop-zone-bg);
-            border-radius: 1rem;
-        }
-        .history-item {
-            background-color: var(--drop-zone-bg);
-            border-radius: 1.25rem;
-            border: 1px solid var(--border-color);
-            overflow: hidden;
-            box-shadow: 0 2px 8px var(--shadow-color-dark);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
-        }
+        #history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
+        #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: #64748b; grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--drop-zone-bg); border-radius: 1rem; }
+        .history-item { background-color: var(--drop-zone-bg); border-radius: 1.25rem; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 2px 8px var(--shadow-color-dark); transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards; display: flex; flex-direction: column; }
         .history-item:hover { transform: translateY(-8px); box-shadow: 0 10px 20px var(--shadow-color-dark); }
-        .history-item-img {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            display: block;
-        }
-        .history-item-content { padding: 1rem; }
-        .history-item-prompt {
-            font-size: 0.9rem; font-weight: 500;
-            margin: 0 0 1rem 0; height: 4.5em; /* 3 lines with line-height */
-            line-height: 1.5em; overflow: hidden;
-            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
-        }
-        .history-item-actions { display: flex; gap: 0.5rem; }
-        .history-btn {
-            flex-grow: 1; text-align: center;
-            padding: 0.6rem; border-radius: 0.75rem;
-            border: 1px solid var(--border-color); background-color: var(--card-bg);
-            color: var(--text-color); font-weight: 600;
-            display: flex; justify-content: center; align-items: center; gap: 0.5rem;
-            cursor: pointer; transition: all 0.2s; text-decoration: none;
-        }
-        .history-btn svg { width: 18px; height: 18px; }
+        .history-item-img-stack { position: relative; width: 100%; height: 180px; background-color: #e2e8f0; cursor: pointer; }
+        .history-item-img-stack img { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
+        .history-item-img-stack:hover img { transform: scale(1.05) !important; }
+        .history-item-img-stack img:nth-child(1) { z-index: 4; transform: rotate(2deg) scale(0.95); }
+        .history-item-img-stack img:nth-child(2) { z-index: 3; transform: rotate(-2deg) scale(0.9); }
+        .history-item-img-stack img:nth-child(3) { z-index: 2; transform: rotate(4deg) scale(0.85); }
+        .history-item-img-stack img:nth-child(4) { z-index: 1; transform: rotate(-4deg) scale(0.8); }
+        .history-item-content { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; }
+        .history-item-prompt { font-size: 0.9rem; font-weight: 500; margin: 0 0 1rem 0; min-height: 4.5em; line-height: 1.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex-grow: 1; }
+        .history-item-actions { display: flex; gap: 0.5rem; margin-top: auto; }
+        .history-btn { flex-grow: 1; text-align: center; padding: 0.6rem; border-radius: 0.75rem; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s; text-decoration: none; }
         .history-btn:hover { background-color: var(--primary-color-start); color: white; border-color: var(--primary-color-start); }
 
-        @media (max-width: 600px) {
-            body { padding: 1.5rem 1rem; }
-            main, .gallery-section { padding: 1.5rem; }
-            h1 { font-size: 2.5rem; }
-            .lightbox-nav { width: 40px; height: 40px; }
-            #lightbox-prev { left: 10px; }
-            #lightbox-next { right: 10px; }
-        }
+        /* --- IMPROVED: Lightbox with Navigation --- */
+        #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 20, 40, 0.9); z-index: 1000; display: none; justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box; backdrop-filter: blur(8px); }
+        #lightbox-img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; font-size: 2rem; user-select: none; }
+        .lightbox-nav:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.1); }
+        #lightbox-prev { right: 20px; }
+        #lightbox-next { left: 20px; }
+        #lightbox-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+        #lightbox-counter { background-color: rgba(0,0,0,0.4); color: white; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.9rem; font-weight: 500; }
+        #lightbox-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; }
+        .lightbox-btn { background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none; }
+        .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
+        
+        @media (max-width: 600px) { body { padding: 1.5rem 1rem; } main, .gallery-section { padding: 1.5rem; } h1 { font-size: 2.5rem; } .lightbox-nav { display: none; } }
     </style>
 </head>
 <body>
@@ -301,22 +124,21 @@
         </header>
 
         <main>
-            <div class="panel">
+             <div class="panel">
                 <h2>
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
                     ۱. تصویر خود را انتخاب کنید
                 </h2>
                 <div id="drop-zone">
-                    <div id="drop-zone-content" role="button" tabindex="0">
+                    <div id="drop-zone-content">
                         <svg id="drop-zone-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                         <span id="drop-zone-text">تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
                     </div>
-                    <div id="image-preview-container">
-                         <img id="image-preview" src="#" alt="پیش‌نمایش تصویر" />
-                         <button id="change-image-btn">
-                            <svg 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"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
-                            <span>تغییر تصویر</span>
-                        </button>
+                    <img id="image-preview" src="#" alt="پیش‌نمایش تصویر" />
+                    <!-- NEW: Change Image Overlay -->
+                    <div id="change-image-overlay">
+                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
+                         <span>تغییر تصویر</span>
                     </div>
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
@@ -327,247 +149,196 @@
             <div class="panel"> ... </div>
         </main>
         
-        <section class="gallery-section">
-            <!-- Gallery content remains the same -->
-        </section>
+        <section class="gallery-section"> ... </section>
     </div>
 
-    <!-- Lightbox Structure with Navigation -->
+    <!-- IMPROVED: Lightbox with Navigation Controls -->
     <div id="lightbox">
-         <button id="lightbox-prev" class="lightbox-nav" title="قبلی">&#10094;</button>
+         <button id="lightbox-prev" class="lightbox-nav">&rsaquo;</button>
+         <button id="lightbox-next" class="lightbox-nav">&lsaquo;</button>
          <img id="lightbox-img" src="">
-         <button id="lightbox-next" class="lightbox-nav" title="بعدی">&#10095;</button>
-         
          <div id="lightbox-controls">
+            <span id="lightbox-counter"></span>
             <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر" class="lightbox-btn">
-                 <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+                 <svg fill="white" viewBox="0 0 24 24" width="24" height="24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
             </a>
          </div>
-         <button id="lightbox-close" class="lightbox-btn">&times;</button>
+         <button id="lightbox-close" class="lightbox-btn" style="position: absolute; top: 20px; left: 20px;">&times;</button>
     </div>
     
-    <!-- (Your full main and gallery section HTML from the previous step goes here to avoid repetition) -->
-    <!-- Just make sure the new #drop-zone and #lightbox structures are used -->
-    
     <script>
-        // ... (All const declarations are the same, plus new ones)
-        const changeImageBtn = document.getElementById('change-image-btn');
+        // --- Element Selection ---
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const imagePreview = document.getElementById('image-preview');
+        const promptInput = document.getElementById('prompt-input');
+        const submitBtn = document.getElementById('submit-btn');
+        const resultGrid = document.getElementById('result-grid');
+        const historyGrid = document.getElementById('history-grid');
+        const clearHistoryBtn = document.getElementById('clear-history-btn');
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightbox-img');
+        const lightboxClose = document.getElementById('lightbox-close');
+        const lightboxDownload = document.getElementById('lightbox-download');
         const lightboxPrev = document.getElementById('lightbox-prev');
         const lightboxNext = document.getElementById('lightbox-next');
-        let currentGalleryUrls = [];
-        let currentGalleryIndex = 0;
+        const lightboxCounter = document.getElementById('lightbox-counter');
+        // ... (other element selections remain the same)
+        const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
+        const dropZoneContent = document.getElementById('drop-zone-content');
+        const btnText = document.getElementById('btn-text');
+        const resultContainer = document.getElementById('result-container');
+        const errorMessage = document.getElementById('error-message');
+        
+        let uploadedFile = null;
+        let lightboxImageUrls = [];
+        let currentLightboxIndex = 0;
 
-        // --- Event Listeners Setup ---
-        dropZone.addEventListener('click', (e) => {
-            // Only trigger if the preview is not active
-            if (!dropZone.classList.contains('has-file')) {
-                fileInput.click();
+        // --- Event Listeners ---
+        dropZone.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+        ['dragenter', 'dragover'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }));
+        ['dragleave', 'drop'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); }));
+        dropZone.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0]));
+        promptInput.addEventListener('input', checkFormState);
+        submitBtn.addEventListener('click', handleSubmit);
+        clearHistoryBtn.addEventListener('click', handleClearHistory);
+        document.addEventListener('DOMContentLoaded', renderHistory);
+        
+        // Lightbox Listeners
+        lightboxClose.addEventListener('click', closeLightbox);
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
+        lightboxNext.addEventListener('click', showNextImage);
+        lightboxPrev.addEventListener('click', showPrevImage);
+        document.addEventListener('keydown', (e) => {
+            if (lightbox.style.display === 'flex') {
+                if (e.key === 'ArrowRight') showPrevImage(); // RTL, so Right arrow is previous
+                if (e.key === 'ArrowLeft') showNextImage();  // Left arrow is next
+                if (e.key === 'Escape') closeLightbox();
             }
         });
-        changeImageBtn.addEventListener('click', () => fileInput.click());
 
         // --- Core Functions ---
         function handleFile(file) {
-            if (!file || !file.type.startsWith('image/')) {
-                displayError('لطفا یک فایل تصویری انتخاب کنید.');
-                return;
-            }
+            if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری انتخاب کنید.'); return; }
             uploadedFile = file;
             const reader = new FileReader();
             reader.onload = (e) => {
                 imagePreview.src = e.target.result;
-                dropZone.classList.add('has-file'); // This triggers the new UI state
+                imagePreview.classList.add('visible');
+                dropZone.classList.add('has-image'); // NEW: Add class to control overlay visibility
+                dropZoneContent.style.opacity = '0';
                 checkFormState();
                 clearResult();
             };
             reader.readAsDataURL(file);
         }
+        
+        // ... (handleSubmit, setLoading, checkFormState, displayError, clearResult remain mostly the same)
+        async function handleSubmit() {
+            if (submitBtn.disabled) return;
+            // ... (rest of the submit logic is the same)
+            // ... on success:
+            displayResult(result.image_urls, true); // Pass true to show in result grid
+            addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls });
+        }
 
-        function displayResult(imageUrls) {
+        function displayResult(imageUrls, isLiveResult = false) {
+            if (!isLiveResult) return; // Only populate the main result grid for live results
             resultGrid.innerHTML = '';
             imageUrls.forEach((url, index) => {
                 const img = document.createElement('img');
                 img.src = url;
-                img.alt = `تصویر ویرایش شده ${index + 1}`;
+                img.alt = 'تصویر ویرایش شده';
                 img.style.animationDelay = `${index * 120}ms`;
-                // IMPORTANT: Pass the array and index to the gallery opener
-                img.addEventListener('click', () => openGalleryLightbox(imageUrls, index));
+                img.addEventListener('click', () => openLightbox(imageUrls, index));
                 resultGrid.appendChild(img);
             });
         }
-
-        // --- Lightbox with Gallery Functions ---
-        function openGalleryLightbox(urls, startIndex = 0) {
-            currentGalleryUrls = urls;
-            currentGalleryIndex = startIndex;
-            
-            // Show/hide nav buttons based on number of images
-            if (urls.length > 1) {
-                lightboxPrev.classList.add('visible');
-                lightboxNext.classList.add('visible');
-            } else {
-                lightboxPrev.classList.remove('visible');
-                lightboxNext.classList.remove('visible');
-            }
-            
-            updateLightboxImage();
+        
+        // --- IMPROVED Lightbox Functions with Navigation ---
+        function openLightbox(urls, index = 0) {
+            lightboxImageUrls = urls;
+            currentLightboxIndex = index;
             lightbox.style.display = 'flex';
+            updateLightboxImage();
         }
-        
+
+        function closeLightbox() {
+            lightbox.style.display = 'none';
+        }
+
         function updateLightboxImage() {
-            if (currentGalleryUrls.length === 0) return;
-            lightboxImg.src = currentGalleryUrls[currentGalleryIndex];
-            lightboxDownload.href = currentGalleryUrls[currentGalleryIndex];
-            // Add a unique name for each downloaded image in the gallery
-            lightboxDownload.download = `ai-edit-${Date.now()}-${currentGalleryIndex + 1}.png`;
+            if (lightboxImageUrls.length === 0) return;
+            const currentUrl = lightboxImageUrls[currentLightboxIndex];
+            lightboxImg.src = currentUrl;
+            lightboxDownload.href = currentUrl;
+            lightboxCounter.textContent = `${currentLightboxIndex + 1} / ${lightboxImageUrls.length}`;
+            // Preload next and previous images for smoother navigation
+            if(currentLightboxIndex < lightboxImageUrls.length - 1) new Image().src = lightboxImageUrls[currentLightboxIndex + 1];
+            if(currentLightboxIndex > 0) new Image().src = lightboxImageUrls[currentLightboxIndex - 1];
         }
 
         function showNextImage() {
-            currentGalleryIndex = (currentGalleryIndex + 1) % currentGalleryUrls.length;
+            currentLightboxIndex = (currentLightboxIndex + 1) % lightboxImageUrls.length;
             updateLightboxImage();
         }
 
         function showPrevImage() {
-            currentGalleryIndex = (currentGalleryIndex - 1 + currentGalleryUrls.length) % currentGalleryUrls.length;
+            currentLightboxIndex = (currentLightboxIndex - 1 + lightboxImageUrls.length) % lightboxImageUrls.length;
             updateLightboxImage();
         }
-        
-        lightboxPrev.addEventListener('click', showPrevImage);
-        lightboxNext.addEventListener('click', showNextImage);
 
-        // This function replaces the old openLightbox
-        function closeLightbox() {
-            lightbox.style.display = 'none';
-            currentGalleryUrls = []; // Clear gallery on close
-        }
+        // --- IMPROVED History Functions ---
+        function getHistory() { /* ... (same) ... */ }
+        function saveHistory(history) { /* ... (same) ... */ }
+        function addToHistory(item) { /* ... (same) ... */ }
+        function handleClearHistory() { /* ... (same) ... */ }
 
-        // --- History Management Functions ---
         function renderHistory() {
             const history = getHistory();
-            historyGrid.innerHTML = '';
+            historyGrid.innerHTML = ''; 
             
-            if (history.length > 0) {
-                clearHistoryBtn.style.display = 'flex';
-                history.forEach((item, index) => {
-                    const card = document.createElement('div');
-                    card.className = 'history-item';
-                    card.style.animationDelay = `${index * 80}ms`;
+            clearHistoryBtn.style.display = history.length > 0 ? 'flex' : 'none';
 
-                    // NEW: Added image count badge
-                    const imageCountBadge = item.urls.length > 1 ? `<div class="history-item-count">${item.urls.length}x</div>` : '';
+            history.forEach((item, index) => {
+                const card = document.createElement('div');
+                card.className = 'history-item';
+                card.style.animationDelay = `${index * 80}ms`;
 
-                    card.innerHTML = `
-                        <div class="history-item-img-wrapper">
-                            <img src="${item.urls[0]}" alt="پیش‌نمایش تاریخچه" class="history-item-img">
-                            ${imageCountBadge}
-                        </div>
-                        <div class="history-item-content">
-                            <p class="history-item-prompt">${item.prompt}</p>
-                            <div class="history-item-actions">
-                                <button class="history-btn view-all-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-                                    مشاهده همه
-                                </button>
-                                <a href="${item.urls[0]}" download="ai-edit-${Date.now()}.png" class="history-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v-10"/><path d="m15 14-3 3-3-3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
-                                    دانلود اولین
-                                </a>
-                            </div>
+                const imageStackHTML = item.urls.slice(0, 4).map(url => 
+                    `<img src="${url}" alt="پیش‌نمایش تاریخچه">`
+                ).join('');
+
+                card.innerHTML = `
+                    <div class="history-item-img-stack">
+                        ${imageStackHTML}
+                    </div>
+                    <div class="history-item-content">
+                        <p class="history-item-prompt">${item.prompt}</p>
+                        <div class="history-item-actions">
+                            <a href="${item.urls[0]}" download="ai-edit-${Date.now()}.png" class="history-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v-10"/><path d="m15 14-3 3-3-3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
+                                دانلود
+                            </a>
                         </div>
-                    `;
-                    // Use the new gallery lightbox function
-                    card.querySelector('.view-all-btn').addEventListener('click', () => openGalleryLightbox(item.urls, 0));
-                    historyGrid.appendChild(card);
-                });
-            } else {
-                 clearHistoryBtn.style.display = 'none';
-            }
+                    </div>
+                `;
+                
+                // Event listener for the entire image stack
+                card.querySelector('.history-item-img-stack').addEventListener('click', () => openLightbox(item.urls, 0));
+                
+                historyGrid.appendChild(card);
+            });
         }
         
-        // --- The rest of your JavaScript remains the same ---
-        // (handleSubmit, setLoading, clearResult, displayError, getHistory, saveHistory, addToHistory, handleClearHistory, etc.)
-        // Add the script content from the previous step here, but use the modified functions from this step.
-        const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
-        const dropZone = document.getElementById('drop-zone');
-        const dropZoneContent = document.getElementById('drop-zone-content');
-        const fileInput = document.getElementById('file-input');
-        const imagePreview = document.getElementById('image-preview');
-        const promptInput = document.getElementById('prompt-input');
-        const submitBtn = document.getElementById('submit-btn');
-        const btnText = document.getElementById('btn-text');
-        const resultContainer = document.getElementById('result-container');
-        const resultGrid = document.getElementById('result-grid');
-        const errorMessage = document.getElementById('error-message');
-        const lightbox = document.getElementById('lightbox');
-        const lightboxImg = document.getElementById('lightbox-img');
-        const lightboxClose = document.getElementById('lightbox-close');
-        const lightboxDownload = document.getElementById('lightbox-download');
-        const historyGrid = document.getElementById('history-grid');
-        const clearHistoryBtn = document.getElementById('clear-history-btn');
-        let uploadedFile = null;
-
-        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        ['dragenter', 'dragover'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); }));
-        ['dragleave', 'drop'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); }));
-        dropZone.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0]));
-        promptInput.addEventListener('input', checkFormState);
-        submitBtn.addEventListener('click', handleSubmit);
-        lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => { if (e.target.id === 'lightbox') closeLightbox(); });
-        clearHistoryBtn.addEventListener('click', handleClearHistory);
-        document.addEventListener('DOMContentLoaded', renderHistory);
-        
+        // (Helper functions like checkFormState, setLoading etc. are assumed to be here and unchanged)
+        // Make sure to copy them from the previous version if they are missing.
         function checkFormState() { submitBtn.disabled = !uploadedFile || promptInput.value.trim() === ''; }
-        
-        async function handleSubmit() {
-            if (submitBtn.disabled) return;
-            setLoading(true);
-            const formData = new FormData();
-            formData.append('image', uploadedFile);
-            formData.append('prompt', promptInput.value.trim());
-            try {
-                const response = await fetch(API_URL, { method: 'POST', body: formData });
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` }));
-                    throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`);
-                }
-                const result = await response.json();
-                if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) {
-                    displayResult(result.image_urls);
-                    addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls });
-                } else { throw new Error('پاسخ معتبری از سرور دریافت نشد.'); }
-            } catch (error) { displayError(error.message); } finally { setLoading(false); }
-        }
-
-        function setLoading(isLoading) {
-             if (isLoading) {
-                resultContainer.classList.add('loading');
-                btnText.classList.add('hidden');
-                if (!submitBtn.querySelector('.loader-dots')) {
-                    const loader = document.createElement('div');
-                    loader.className = 'loader-dots';
-                    loader.innerHTML = '<div class="dot1"></div><div class="dot2"></div><div class="dot3"></div>';
-                    submitBtn.appendChild(loader);
-                }
-                submitBtn.disabled = true;
-                resultGrid.innerHTML = '';
-                errorMessage.style.display = 'none';
-            } else {
-                resultContainer.classList.remove('loading');
-                btnText.classList.remove('hidden');
-                const loader = submitBtn.querySelector('.loader-dots');
-                if (loader) submitBtn.removeChild(loader);
-                checkFormState();
-            }
-        }
-        
+        function setLoading(isLoading) { if (isLoading) { resultContainer.classList.add('loading'); btnText.classList.add('hidden'); const loader = document.createElement('div'); loader.className = 'loader-dots'; loader.innerHTML = '<div class="dot1"></div><div class="dot2"></div><div class="dot3"></div>'; submitBtn.appendChild(loader); submitBtn.disabled = true; resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; } else { resultContainer.classList.remove('loading'); btnText.classList.remove('hidden'); const loader = submitBtn.querySelector('.loader-dots'); if (loader) submitBtn.removeChild(loader); checkFormState(); } }
         function clearResult() { resultGrid.innerHTML = ''; errorMessage.style.display = 'none'; }
         function displayError(message) { errorMessage.textContent = message; errorMessage.style.display = 'block'; }
         
-        function getHistory() { try { const history = localStorage.getItem('aiPhotoshopHistory'); return history ? JSON.parse(history) : []; } catch (e) { console.error("Failed to parse history", e); return []; } }
-        function saveHistory(history) { localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history)); renderHistory(); }
-        function addToHistory(item) { const history = getHistory(); history.unshift(item); if (history.length > 20) { history.pop(); } saveHistory(history); }
-        function handleClearHistory() { if (confirm('آیا از پاک کردن تمام تاریخچه مطمئن هستید؟')) { localStorage.removeItem('aiPhotoshopHistory'); renderHistory(); } }
         checkFormState();
     </script>
 </body>