Update templates/image_studio.html

templates/image_studio.html

@@ -16,299 +16,211 @@
             --text-primary: #1A202C;
             --text-secondary: #626F86;
             --text-tertiary: #8A94A6;
-            --accent-primary: #8B5CF6; 
-            --accent-primary-hover: #7C3AED;
-            --accent-primary-glow: rgba(139, 92, 246, 0.25);
-            --accent-secondary: #EC4899;
-            --premium-gold: #F59E0B;
-            --success-color: #38A169;
+            --accent-primary: #4A6CFA; /* تم آبی روشن قدیمی */
+            --accent-primary-hover: #3553D6;
+            --accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8;
+            --accent-premium: #FFC107;
             --danger-color: #e53e3e;
-            
+            --chat-user-bg: #4A6CFA;
+            --chat-ai-bg: #FFFFFF;
             --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
             --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05);
             --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06);
             --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07);
-            
             --radius-card: 24px;
             --radius-btn: 14px;
             --radius-input: 12px;
             --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
-        @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }
-
-        body { 
-            font-family: var(--app-font); 
-            background-color: var(--app-bg); 
-            color: var(--text-primary); 
-            margin: 0; 
-            padding: 2.5rem 1rem; 
-            display: flex; 
-            justify-content: center; 
-            min-height: 100vh; 
-        }
-        
-        .container { max-width: 850px; width: 100%; }
-
-        /* Header */
-        header { position: relative; text-align: center; margin-bottom: 2.5rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; }
-        #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
-        .header-content { position: relative; z-index: 2; }
-        h1 { font-size: 2.8rem; font-weight: 800; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.8; }
-
-        #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1rem; }
-        .free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; }
-        .paid-badge { background: linear-gradient(45deg, var(--premium-gold), #FFC107); color: #1E3A8A; }
-
-        /* Main Panel */
-        main { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.3s ease-out backwards; }
-
-        .form-group { margin-bottom: 2.5rem; }
-        .form-group:last-child { margin-bottom: 0; }
-        .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem; }
-        .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
-
-        /* Square Model Selector */
-        .model-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
-        .model-card { 
-            aspect-ratio: 1 / 1; /* کاملا مربع */
-            background-color: var(--input-bg); 
-            border: 2px solid var(--input-border); 
-            border-radius: var(--radius-input); 
-            cursor: pointer; 
-            transition: var(--transition-smooth); 
-            position: relative; 
-            overflow: hidden; 
-            display: flex;
-            flex-direction: column;
-        }
-        .model-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-primary); }
-        .model-card.active { border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); }
-        
-        .model-image { 
-            width: 100%; 
-            height: 100%; 
-            background-size: cover; 
-            background-position: center; 
-            background-repeat: no-repeat;
-            transition: transform 0.5s;
-        }
-        .model-card:hover .model-image { transform: scale(1.05); }
-        
-        .model-info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
-            color: white;
-            padding: 15px 10px 10px;
-            text-align: center;
-        }
-        .model-title { font-weight: 800; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
+        @keyframes spin-border { 100% { transform: rotate(360deg); } }
 
-        /* Ratio Selector */
-        .aspect-ratio-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
-        .ratio-option { background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-input); padding: 1rem; cursor: pointer; transition: var(--transition-smooth); text-align: center; }
-        .ratio-option:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
-        .ratio-option.active { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 0 3px var(--accent-primary-glow); }
-        .ratio-icon { height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; }
-        .ratio-icon > div { background-color: var(--panel-bg); border: 2px solid var(--text-tertiary); border-radius: 4px; transition: var(--transition-smooth); box-sizing: border-box; }
-        .ratio-option.active .ratio-icon > div { border-color: var(--accent-primary); background-color: var(--accent-primary-glow); }
-        .ratio-label { font-weight: 600; color: var(--text-secondary); font-size: 0.9rem; }
-        .ratio-option.active .ratio-label { color: var(--text-primary); }
+        body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); margin: 0; padding: 2.5rem 1rem; display: flex; justify-content: center; min-height: 100vh; overflow-y: auto; }
+        .container { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 2rem; }
+
+        header { position: relative; text-align: center; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; background: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
+        #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; }
+        .header-content { position: relative; z-index: 2; padding: 0 1.5rem; }
+        h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0; line-height: 1.8; }
         
-        #icon-portrait > div { width: 22px; height: 40px; }
-        #icon-landscape > div { width: 48px; height: 27px; }
-        #icon-square > div { width: 35px; height: 35px; }
-        #icon-classic > div { width: 40px; height: 30px; }
-
-        /* Textarea */
-        textarea { width: 100%; padding: 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1.05rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; line-height: 1.6;}
-        textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
-
-        /* Big Button */
-        #submit-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.3rem; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px -4px var(--accent-primary-glow); margin-top: 1.5rem; }
-        #submit-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
-        #submit-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 25px -4px var(--accent-primary-glow); }
-        #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; }
-        #submit-btn .spinner { width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
-
-        /* Credit Info */
-        #credit-info-section { margin-top: 1rem; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--input-border); display: none; }
-        #upgrade-button { margin-top: 1rem; width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(95deg, #FFD54F, #FFC107 100%); color: #212529; border: none; border-radius: var(--radius-btn); cursor: pointer; box-shadow: 0 8px 20px -5px rgba(255, 193, 7, 0.3); display: none; }
-
-        /* Results History Area */
-        #results-area {
-            margin-top: 3rem;
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-        }
+        #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1rem; letter-spacing: 0.5px; animation: badge-fade-in 0.6s 0.5s ease-out backwards; }
+        #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); }
+        #subscription-status-badge.paid-badge { background: linear-gradient(45deg, var(--accent-premium), #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); }
 
-        .result-card {
-            background-color: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: var(--radius-card);
-            padding: 1.5rem;
-            box-shadow: var(--shadow-md);
-            animation: fadeIn 0.5s ease-out;
-            text-align: center;
-        }
+        /* Chat History Section */
+        #chat-history { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
+        
+        .message-wrapper { display: flex; flex-direction: column; max-width: 90%; animation: fadeIn 0.4s ease-out; }
+        .message-wrapper.user { align-self: flex-start; }
+        .message-wrapper.ai { align-self: center; width: 100%; max-width: 100%; align-items: center;}
 
-        .result-message-top {
-            font-size: 1.05rem;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 1.5rem;
-        }
+        .message-bubble { padding: 1rem 1.2rem; border-radius: var(--radius-md); font-size: 1rem; line-height: 1.6; }
+        .user .message-bubble { background: var(--chat-user-bg); color: #fff; border-top-right-radius: 4px; box-shadow: 0 4px 15px rgba(74, 108, 250, 0.3); }
+        
+        .ai .message-bubble { background: var(--chat-ai-bg); color: var(--text-primary); border-radius: var(--radius-card); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 1.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; }
 
-        /* Dynamic Loading Box */
-        .dynamic-loader-box {
-            width: 100%;
-            max-width: 500px;
-            margin: 0 auto 1.5rem;
-            border-radius: var(--radius-input);
-            background: linear-gradient(90deg, var(--input-bg) 25%, #E2E8F0 50%, var(--input-bg) 75%);
-            background-size: 1000px 100%;
-            animation: shimmer 2s infinite linear, pulse-border 2s infinite;
-            border: 2px solid var(--accent-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            color: var(--accent-primary);
-            font-weight: 700;
-        }
-        .dynamic-loader-box svg { width: 40px; height: 40px; animation: spin 2s linear infinite; margin-bottom: 10px; }
-
-        /* Output Image */
-        .result-image-container { margin-bottom: 1.5rem; }
-        .result-image-container img {
-            max-width: 100%;
-            max-height: 600px;
-            border-radius: var(--radius-input);
-            box-shadow: var(--shadow-lg);
-            border: 1px solid var(--panel-border);
-        }
+        /* Dynamic Loading Animation matching Aspect Ratio */
+        .loading-frame { position: relative; border-radius: var(--radius-input); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--input-bg); width: 100%; max-width: 400px; box-shadow: var(--shadow-md); }
+        .loading-frame::before { content: ''; position: absolute; width: 200%; height: 200%; background: conic-gradient(transparent, transparent, transparent, var(--accent-primary)); animation: spin-border 2s linear infinite; }
+        .loading-frame::after { content: 'در حال ساخت تصویر...'; position: absolute; inset: 4px; background: var(--panel-bg); border-radius: calc(var(--radius-input) - 4px); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-primary); font-family: var(--app-font); z-index: 1; box-shadow: inset 0 0 20px rgba(74, 108, 250, 0.05); }
+        
+        .ratio-1-1 { aspect-ratio: 1 / 1; }
+        .ratio-16-9 { aspect-ratio: 16 / 9; }
+        .ratio-9-16 { aspect-ratio: 9 / 16; }
+        .ratio-4-3 { aspect-ratio: 4 / 3; }
+
+        /* Generated Image Style */
+        .generated-image-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+        .generated-image-box img { max-width: 100%; border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-md); }
+        
+        .image-meta { display: flex; gap: 15px; justify-content: center; background: var(--input-bg); padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--input-border); margin-top: 5px; }
+        .image-meta span { display: flex; align-items: center; gap: 5px; }
+        .image-meta svg { width: 16px; height: 16px; color: var(--accent-primary); }
 
-        /* Meta Data inside card */
-        .result-meta {
-            display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-bottom: 1.5rem;
-            flex-wrap: wrap;
-        }
-        .meta-badge {
-            background-color: var(--input-bg);
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            border: 1px solid var(--input-border);
-        }
+        .download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 300px; padding: 0.9rem; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); font-family: inherit; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; box-shadow: 0 4px 10px rgba(74, 108, 250, 0.3); }
+        .download-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(74, 108, 250, 0.4); }
 
-        .download-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; max-width: 300px; padding: 1rem; font-size: 1.05rem; font-weight: 700; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-md); text-decoration: none; margin: 0 auto;}
-        .download-button:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+        /* Control Panel */
+        .control-panel { background: var(--panel-bg); border-radius: var(--radius-card); padding: 2rem; box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 2rem; }
+        
+        .section-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
+        .section-title svg { width: 22px; height: 22px; color: var(--accent-primary); }
+
+        /* Model Selector Grid */
+        .model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+        .model-card { position: relative; border-radius: var(--radius-input); overflow: hidden; cursor: pointer; border: 3px solid transparent; background-color: var(--input-bg); aspect-ratio: 1; transition: var(--transition-smooth); box-shadow: var(--shadow-sm); }
+        .model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
+        .model-card.active { border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-primary-glow), var(--shadow-lg); transform: translateY(-5px); }
+        
+        .model-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; opacity: 0.85; }
+        .model-card:hover .model-image, .model-card.active .model-image { transform: scale(1.08); opacity: 1; }
+        
+        .model-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 8px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; font-size: 0.95rem; font-weight: 700; text-align: center; pointer-events: none; }
 
-        @media (max-width: 768px) { 
-            main { padding: 1.5rem; } 
-            h1 { font-size: 2.2rem; } 
-            .model-selector { grid-template-columns: 1fr; }
-            .model-card { aspect-ratio: auto; height: 120px; } /* در موبایل مستطیل شود تا جای کمتری بگیرد */
-            .aspect-ratio-selector { grid-template-columns: repeat(2, 1fr); } 
+        /* Ratio Selector */
+        .ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
+        .ratio-btn { background: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-input); padding: 1rem 0.5rem; color: var(--text-secondary); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-sm); }
+        .ratio-btn:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
+        .ratio-btn.active { background: #fff; border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow); }
+        
+        .ratio-icon-box { background-color: var(--panel-bg); border: 2px solid var(--text-tertiary); border-radius: 4px; transition: var(--transition-smooth); }
+        .ratio-btn.active .ratio-icon-box { border-color: var(--accent-primary); background-color: var(--accent-primary-glow); }
+        .icon-1-1 { width: 28px; height: 28px; }
+        .icon-16-9 { width: 40px; height: 22px; }
+        .icon-9-16 { width: 22px; height: 40px; }
+        .icon-4-3 { width: 34px; height: 25px; }
+
+        /* Input Area & Big Button */
+        textarea { width: 100%; padding: 1.2rem; border-radius: var(--radius-input); border: 2px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 100px; resize: vertical; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
+        textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), inset 0 1px 3px rgba(0,0,0,0.05); background-color: #fff; }
+
+        .big-send-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.25rem; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 15px -3px var(--accent-primary-glow); margin-top: 1rem; }
+        .big-send-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
+        .big-send-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.01); box-shadow: 0 10px 20px -4px var(--accent-primary-glow); }
+        .big-send-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; }
+
+        .credit-info { font-size: 0.9rem; color: var(--text-tertiary); text-align: center; margin-top: 15px; font-weight: 600; background: var(--input-bg); padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--input-border); display: none; }
+        .upgrade-btn { display: none; width: 100%; margin-top: 10px; padding: 1rem; background: linear-gradient(90deg, #FFD54F, var(--accent-premium)); border: none; border-radius: var(--radius-btn); color: #212529; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-align: center; font-family: inherit; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3); transition: transform 0.3s; }
+        .upgrade-btn:hover { transform: translateY(-3px); }
+
+        @media (max-width: 600px) {
+            .model-grid { grid-template-columns: 1fr; }
+            .model-card { aspect-ratio: auto; height: 120px; }
+            .ratio-grid { grid-template-columns: repeat(2, 1fr); }
+            h1 { font-size: 1.8rem; }
         }
     </style>
 </head>
 <body>
+
     <div class="container">
+        
+        <!-- Header -->
         <header>
             <canvas id="neural-network-canvas"></canvas>
             <div class="header-content">
-                <h1>آتلیه هوش مصنوعی</h1>
-                <p class="subtitle">ایده‌های خود را با پیشرفته‌ترین مدل‌های هوش مصنوعی (Flux, Midjourney, Cartoon) به واقعیت تبدیل کنید.</p>
+                <h1>استودیو پیشرفته ساخت تصویر</h1>
+                <p class="subtitle">ایده‌های خود را توصیف کنید تا مدل‌های قدرتمند هوش مصنوعی آن را برای شما به تصویر بکشند.</p>
                 <div id="subscription-status-badge">درحال بررسی...</div>
             </div>
         </header>
 
-        <main>
-            <!-- ۱. انتخاب مدل -->
-            <div class="form-group">
-                <div class="form-label">
-                    <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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                    ۱. انتخاب مدل هوش مصنوعی
+        <!-- Chat History -->
+        <div id="chat-history"></div>
+
+        <!-- Controls Form -->
+        <div class="control-panel">
+            
+            <!-- Model Selection -->
+            <div>
+                <div class="section-title">
+                    <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"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+                    ۱. مدل هوش مصنوعی را ا��تخاب کنید
                 </div>
-                <div class="model-selector" id="model-selector">
+                <div class="model-grid" id="model-selector">
                     <div class="model-card active" data-action="generate-flux" data-name="Flux Pro">
-                        <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/Gpt4/pro.webp')"></div>
-                        <div class="model-info"><div class="model-title">Flux Pro</div></div>
+                        <img class="model-image" src="https://app.puzzley.net/uploads/user/Jydo/Gpt4/pro.webp" alt="Flux Pro">
+                        <div class="model-name">Flux Pro</div>
                     </div>
                     <div class="model-card" data-action="generate-midjourney" data-name="Midjourney">
-                        <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/Midjourney_Emblem.png')"></div>
-                        <div class="model-info"><div class="model-title">Midjourney</div></div>
+                        <img class="model-image" src="https://app.puzzley.net/uploads/user/Jydo/%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/Midjourney_Emblem.png" alt="Midjourney">
+                        <div class="model-name">Midjourney</div>
                     </div>
                     <div class="model-card" data-action="generate-cartoon" data-name="Cartoon 3D">
-                        <div class="model-image" style="background-image: url('https://app.puzzley.net/uploads/user/Jydo/Ghibli/image%20(28).webp')"></div>
-                        <div class="model-info"><div class="model-title">Cartoon 3D</div></div>
+                        <img class="model-image" src="https://app.puzzley.net/uploads/user/Jydo/Ghibli/image%20(28).webp" alt="Cartoon">
+                        <div class="model-name">Cartoon 3D</div>
                     </div>
                 </div>
             </div>
 
-            <!-- ۲. انتخاب سایز -->
-            <div class="form-group">
-                <div class="form-label">
+            <!-- Ratio Selection -->
+            <div>
+                <div class="section-title">
                     <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
-                    ۲. اندازه تصویر را انتخاب کنید
+                    ۲. ابعاد تصویر را مشخص کنید
                 </div>
-                <div class="aspect-ratio-selector" id="aspect-ratio-selector">
-                    <div class="ratio-option" data-ratio="9:16" data-label="عمودی ۹:۱۶">
-                        <div class="ratio-icon" id="icon-portrait"><div></div></div>
-                        <div class="ratio-label">عمودی ۹:۱۶</div>
-                    </div>
-                    <div class="ratio-option" data-ratio="16:9" data-label="افقی ۱۶:۹">
-                        <div class="ratio-icon" id="icon-landscape"><div></div></div>
-                        <div class="ratio-label">افقی ۱۶:۹</div>
-                    </div>
-                    <div class="ratio-option" data-ratio="4:3" data-label="کلاسیک ۴:۳">
-                        <div class="ratio-icon" id="icon-classic"><div></div></div>
-                        <div class="ratio-label">کلاسیک ۴:۳</div>
-                    </div>
-                    <div class="ratio-option active" data-ratio="1:1" data-label="مربع ۱:۱">
-                        <div class="ratio-icon" id="icon-square"><div></div></div>
-                        <div class="ratio-label">مربع ۱:۱</div>
-                    </div>
+                <div class="ratio-grid" id="ratio-selector">
+                    <button class="ratio-btn active" data-ratio="1:1" data-name="۱:۱ مربع">
+                        <div class="ratio-icon-box icon-1-1"></div>
+                        <span>۱:۱ مربع</span>
+                    </button>
+                    <button class="ratio-btn" data-ratio="16:9" data-name="۱۶:۹ افقی">
+                        <div class="ratio-icon-box icon-16-9"></div>
+                        <span>۱۶:۹ افقی</span>
+                    </button>
+                    <button class="ratio-btn" data-ratio="9:16" data-name="۹:۱۶ استوری">
+                        <div class="ratio-icon-box icon-9-16"></div>
+                        <span>۹:۱۶ استوری</span>
+                    </button>
+                    <button class="ratio-btn" data-ratio="4:3" data-name="۴:۳ کلاسیک">
+                        <div class="ratio-icon-box icon-4-3"></div>
+                        <span>۴:۳ کلاسیک</span>
+                    </button>
                 </div>
             </div>
 
-            <!-- ۳. کادر متن -->
-            <div class="form-group">
-                <div class="form-label">
+            <!-- Prompt & Button -->
+            <div>
+                <div class="section-title">
                     <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                     ۳. ایده خود را بنویسید
                 </div>
-                <textarea id="prompt-input" placeholder="مثال: پرتره یک پیرمرد در باران با نورپردازی نئونی، کیفیت 8k، فوق‌العاده طبیعی..."></textarea>
-            </div>
-
-            <!-- دکمه‌ها و اعتبار -->
-            <div id="credit-info-section">درحال بررسی اعتبار...</div>
-            <button id="upgrade-button">⭐️ ارتقا به نسخه کامل و نامحدود</button>
+                <textarea id="prompt-input" placeholder="ایده خود را با جزئیات توصیف کنید... (مثال: یک شوالیه با زره درخشان در حال قدم زدن در یک جنگل سایبرپانک، کیفیت 8k)"></textarea>
+                
+                <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div>
+                <button id="upgrade-button" class="upgrade-btn">⭐️ ارتقا به نسخه پرمیوم و نامحدود</button>
 
-            <button id="submit-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="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg>
-                <span id="btn-text">خلق تصویر جادویی</span>
-                <div class="spinner"></div>
-            </button>
-            
-            <!-- کانتینر نمایش نتایج (فید) -->
-            <div id="results-area"></div>
+                <button id="send-btn" class="big-send-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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    ساخت تصویر جادویی
+                </button>
+            </div>
             
-        </main>
+        </div>
     </div>
 
     <script>
@@ -335,9 +247,9 @@
 
         function updateUIForSubscriptionStatus(status) { 
             userSubscriptionStatus = status; 
-            const creditInfoDiv = document.getElementById('credit-info-section'); 
+            const creditInfoDiv = document.getElementById('credit-info'); 
             const upgradeBtn = document.getElementById('upgrade-button'); 
-            const genBtn = document.getElementById('submit-btn'); 
+            const sendBtn = document.getElementById('send-btn'); 
             const badge = document.getElementById('subscription-status-badge'); 
             
             badge.style.display = 'inline-block';
@@ -347,7 +259,7 @@
                 badge.className = 'paid-badge'; 
                 creditInfoDiv.style.display = 'none'; 
                 upgradeBtn.style.display = 'none'; 
-                genBtn.disabled = false; 
+                sendBtn.disabled = false; 
                 if(countdownInterval) clearInterval(countdownInterval); 
             } else { 
                 badge.textContent = 'کاربر رایگان'; 
@@ -358,9 +270,9 @@
 
         async function checkFreeUserCredit() { 
             if (!userFingerprint || userSubscriptionStatus === 'paid') return; 
-            const creditInfoDiv = document.getElementById('credit-info-section'); 
+            const creditInfoDiv = document.getElementById('credit-info'); 
             const upgradeBtn = document.getElementById('upgrade-button'); 
-            const genBtn = document.getElementById('submit-btn'); 
+            const sendBtn = document.getElementById('send-btn'); 
             try { 
                 const response = await fetch('/api/check-image-credit', { 
                     method: 'POST', 
@@ -372,24 +284,24 @@
                 creditInfoDiv.style.display = 'block'; 
                 
                 if (result.limit_reached) { 
-                    genBtn.disabled = true; 
+                    sendBtn.disabled = true; 
                     upgradeBtn.style.display = 'block'; 
                     startCountdown(result.reset_timestamp); 
                 } else { 
-                    genBtn.disabled = false; 
+                    sendBtn.disabled = false; 
                     upgradeBtn.style.display = 'none'; 
                     if(countdownInterval) clearInterval(countdownInterval); 
                     creditInfoDiv.innerHTML = `شما <b>${result.credits_remaining}</b> اعتبار ساخت تصویر برای امروز دارید.`; 
                 } 
             } catch (error) { 
                 creditInfoDiv.textContent = "خطا در ارتباط با سرور اعتبار."; 
-                genBtn.disabled = true; 
+                sendBtn.disabled = true; 
             } 
         }
 
         function startCountdown(resetTimestamp) { 
             if (countdownInterval) clearInterval(countdownInterval); 
-            const creditInfoDiv = document.getElementById('credit-info-section'); 
+            const creditInfoDiv = document.getElementById('credit-info'); 
             const updateTimer = () => { 
                 const timeLeft = Math.max(0, resetTimestamp - (Date.now() / 1000)); 
                 if (timeLeft === 0) { 
@@ -404,7 +316,7 @@
             updateTimer(); countdownInterval = setInterval(updateTimer, 60000); 
         }
 
-        // ارتباط با اپلیکیشن والد
+        // ارتباط با اپلیکیشن
         window.addEventListener('message', (event) => { 
             if (event.data?.type === 'USER_DATA_RESPONSE') { 
                 if (event.data.error || !event.data.payload) { updateUIForSubscriptionStatus('free'); return; } 
@@ -424,20 +336,18 @@
             parent.postMessage({ type: 'REQUEST_USER_DATA' }, '*'); 
         });
 
-        // --- بخش تعاملی UI ---
+        // --- بخش کنترل UI ---
         const promptInput = document.getElementById('prompt-input');
-        const submitBtn = document.getElementById('submit-btn');
-        const btnText = document.getElementById('btn-text');
-        const spinner = submitBtn.querySelector('.spinner');
-        const btnIcon = submitBtn.querySelector('svg');
+        const sendBtn = document.getElementById('send-btn');
+        const chatHistory = document.getElementById('chat-history');
         const modelSelector = document.getElementById('model-selector');
-        const ratioSelector = document.getElementById('aspect-ratio-selector');
-        const resultsArea = document.getElementById('results-area');
+        const ratioSelector = document.getElementById('ratio-selector');
         
         let selectedModelAction = 'generate-flux';
         let selectedModelName = 'Flux Pro';
         let selectedRatio = '1:1';
-        let selectedRatioLabel = 'مربع ۱:۱';
+        let selectedRatioName = '۱:۱ مربع';
+        let selectedRatioClass = 'ratio-1-1';
 
         // انتخاب مدل
         modelSelector.addEventListener('click', (e) => {
@@ -451,12 +361,13 @@
 
         // انتخاب سایز
         ratioSelector.addEventListener('click', (e) => {
-            const opt = e.target.closest('.ratio-option');
-            if (!opt) return;
-            ratioSelector.querySelectorAll('.ratio-option').forEach(c => c.classList.remove('active'));
-            opt.classList.add('active');
-            selectedRatio = opt.dataset.ratio;
-            selectedRatioLabel = opt.dataset.label;
+            const btn = e.target.closest('.ratio-btn');
+            if (!btn) return;
+            ratioSelector.querySelectorAll('.ratio-btn').forEach(c => c.classList.remove('active'));
+            btn.classList.add('active');
+            selectedRatio = btn.dataset.ratio;
+            selectedRatioName = btn.dataset.name;
+            selectedRatioClass = 'ratio-' + btn.dataset.ratio.replace(':', '-');
         });
 
         const getDimensions = (ratio) => {
@@ -468,114 +379,83 @@
             }
         };
 
-        // تبدیل نسبت انتخاب شده به aspect-ratio برای انیمیشن لودینگ
-        const getCssAspectRatio = (ratio) => {
-            switch(ratio) {
-                case '9:16': return '9 / 16';
-                case '16:9': return '16 / 9';
-                case '4:3': return '4 / 3';
-                case '1:1': default: return '1 / 1';
-            }
-        };
-
-        const setLoadingState = (isLoading) => {
-            if (isLoading) {
-                submitBtn.disabled = true;
-                btnIcon.style.display = 'none';
-                spinner.style.display = 'inline-block';
-                btnText.textContent = 'در حال پردازش...';
-            } else {
-                submitBtn.disabled = false;
-                btnIcon.style.display = 'inline-block';
-                spinner.style.display = 'none';
-                btnText.textContent = 'خلق تصویر جادویی';
-            }
-        };
+        // توابع اضافه کردن پیام به History
+        function appendUserMessage(text) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'message-wrapper user';
+            wrapper.innerHTML = `<div class="message-bubble">${text.replace(/\n/g, '<br>')}</div>`;
+            chatHistory.appendChild(wrapper);
+        }
 
-        // ایجاد کارت پردازش اولیه (جعبه انیمیشنی)
-        function createLoadingCard(ratio, modelName) {
-            const card = document.createElement('div');
-            card.className = 'result-card';
-            
-            const cssRatio = getCssAspectRatio(ratio);
-            
-            card.innerHTML = `
-                <div class="result-message-top">در حال طراحی رویای شما با ${modelName}...</div>
-                <div class="dynamic-loader-box" style="aspect-ratio: ${cssRatio};">
-                    <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">
-                        <line x1="12" y1="2" x2="12" y2="6"></line>
-                        <line x1="12" y1="18" x2="12" y2="22"></line>
-                        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
-                        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
-                        <line x1="2" y1="12" x2="6" y2="12"></line>
-                        <line x1="18" y1="12" x2="22" y2="12"></line>
-                        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
-                        <line x1="16.24" y1="4.93" x2="19.07" y2="7.76"></line>
-                    </svg>
-                    <span>درحال ساخت...</span>
+        function appendAILoadingMessage(ratioClass) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'message-wrapper ai';
+            wrapper.innerHTML = `
+                <div class="message-bubble">
+                    <div class="loading-frame ${ratioClass}"></div>
                 </div>
             `;
-            
-            // اضافه کردن به بالای لیست
-            resultsArea.insertBefore(card, resultsArea.firstChild);
-            
-            // اسکرول نرم به این کارت
-            setTimeout(() => {
-                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }, 100);
-            
-            return card;
+            chatHistory.appendChild(wrapper);
+            wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            return wrapper;
         }
 
-        // جایگزین کردن باکس لودینگ با تصویر نهایی
-        function finishCardWithImage(cardElement, imageUrl, modelName, ratioLabel) {
+        function updateAIMessageWithError(wrapper, errorMsg) {
+            wrapper.querySelector('.message-bubble').innerHTML = `<span style="color: var(--danger-color); font-weight:bold;">❌ خطا:</span> ${errorMsg}`;
+        }
+
+        function updateAIMessageWithImage(wrapper, imageUrl, modelName, ratioName) {
+            const bubble = wrapper.querySelector('.message-bubble');
             const absoluteUrl = window.location.origin + imageUrl;
             
-            cardElement.innerHTML = `
-                <div class="result-message-top" style="color: var(--success-color);">
-                    تصویر شما آماده شد! امیدوارم لذت ببرید. 🎨
-                </div>
-                <div class="result-image-container">
-                    <img src="${imageUrl}" alt="تصویر ساخته شده">
-                </div>
-                <div class="result-meta">
-                    <span class="meta-badge">مدل: ${modelName}</span>
-                    <span class="meta-badge">ابعاد: ${ratioLabel}</span>
-                </div>
-                <button class="download-button" onclick="triggerDownload('${absoluteUrl}')">
-                    <svg width="20" height="20" 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"></path>
-                        <polyline points="7 10 12 15 17 10"></polyline>
-                        <line x1="12" y1="15" x2="12" y2="3"></line>
-                    </svg>
-                    دانلود تصویر
-                </button>
-            `;
-        }
+            bubble.innerHTML = `
+                <div class="generated-image-box">
+                    <img src="${imageUrl}" alt="تصویر تولید شده توسط هوش مصنوعی">
+                    
+                    <div class="image-meta">
+                        <span title="مدل استفاده شده">
+                            <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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                            ${modelName}
+                        </span>
+                        <span>|</span>
+                        <span title="ابعاد تصویر">
+                            <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                            ${ratioName}
+                        </span>
+                    </div>
 
-        // عملکرد خطا در کارت
-        function errorCard(cardElement, errorMsg) {
-            cardElement.innerHTML = `
-                <div class="result-message-top" style="color: var(--danger-color);">
-                    ❌ خطا در ساخت تصویر
+                    <button class="download-btn" onclick="triggerDownload('${absoluteUrl}')">
+                        <svg width="20" height="20" 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"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                        دانلود مستقیم تصویر
+                    </button>
                 </div>
-                <div style="color: var(--text-secondary); margin-bottom: 1rem;">${errorMsg}</div>
-                <button class="download-button" style="background: var(--text-tertiary);" onclick="this.parentElement.remove()">بستن</button>
             `;
+            
+            // پس از لود شدن کامل عکس اسکرول کنیم که قشنگ دیده بشه
+            const img = bubble.querySelector('img');
+            img.onload = () => wrapper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
 
-        // تابع گلوبال برای دکمه‌های دانلود داخل کارت‌ها
+        // عملکرد دکمه دانلود 
         window.triggerDownload = function(url) {
-            parent.postMessage({
-                type: 'DOWNLOAD_REQUEST',
-                url: url
-            }, '*');
+            parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: url }, '*');
         };
 
-        // هندل کردن ارسال
-        submitBtn.addEventListener('click', async () => {
+        // هندل ارسال با Enter
+        promptInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendBtn.click();
+            }
+        });
+
+        // فرایند اصلی ساخت تصویر
+        sendBtn.addEventListener('click', async () => {
             const userPrompt = promptInput.value.trim();
-            if (!userPrompt) return alert('لطفاً ایده خود را بنویسید.');
+            if (!userPrompt) {
+                promptInput.focus();
+                return;
+            }
 
             // چک کردن کلمات ممنوعه محلی
             const forbiddenWords = ["sex", "sexy", "porn", "nude", "erotic", "سکس", "سکسی", "پورن", "شهوانی", "برهنه", "لخت"];
@@ -584,7 +464,7 @@
                 return;
             }
 
-            // چک کردن اعتبار قبل از ارسال
+            // چک کردن اعتبار رایگان
             if (userSubscriptionStatus !== 'paid') {
                 try {
                     const response = await fetch('/api/check-image-credit', { 
@@ -593,7 +473,7 @@
                     const result = await response.json();
                     if (result.limit_reached) {
                         updateUIForSubscriptionStatus('free');
-                        alert("محدودیت ساخت عکس روزانه شما به پایان رسیده است.");
+                        alert("محدودیت ساخت عکس امروز شما به پایان رسیده است.");
                         return;
                     }
                 } catch (err) {
@@ -601,21 +481,27 @@
                 }
             }
 
-            // قفل کردن و ساخت کارت لودینگ
-            setLoadingState(true);
+            // افزودن پیام کاربر
+            appendUserMessage(userPrompt);
+            promptInput.value = '';
+            
+            // قفل کردن فرم
+            sendBtn.disabled = true;
+            promptInput.disabled = true;
+            sendBtn.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: spin-border 1s linear infinite;"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> در حال ساخت...`;
+            
             isResultProcessed = false; 
             
-            // ذخیره مقادیر فعلی (در صورت تغییر توسط کاربر حین لودینگ، کارت فعلی به هم نریزد)
-            const currentModelAction = selectedModelAction;
+            // ذخیره مقادیر انتخاب شده فعلی برای این درخواست (در صورت تغییر دادن در حین لود شدن)
             const currentModelName = selectedModelName;
-            const currentRatio = selectedRatio;
-            const currentRatioLabel = selectedRatioLabel;
+            const currentRatioName = selectedRatioName;
             
-            const activeCard = createLoadingCard(currentRatio, currentModelName);
+            // ساخت حباب لودینگ
+            const aiMessageElement = appendAILoadingMessage(selectedRatioClass);
 
-            const dims = getDimensions(currentRatio);
+            const dims = getDimensions(selectedRatio);
             let finalPrompt = userPrompt;
-            if(currentModelAction === 'generate-cartoon') {
+            if(selectedModelAction === 'generate-cartoon') {
                 finalPrompt += " کارتونی انیمیشن سه بعدی";
             }
 
@@ -627,14 +513,13 @@
                         prompt: finalPrompt,
                         width: dims.width, 
                         height: dims.height,
-                        action_name: currentModelAction 
+                        action_name: selectedModelAction 
                     })
                 });
                 
                 const data = await res.json();
                 
                 if (data.status === 'success') {
-                    // شروع Polling برای همین کارت خاص
                     let pollTimer = setInterval(async () => {
                         try {
                             const statusRes = await fetch(`/api/status/${data.run_id}`);
@@ -643,34 +528,40 @@
                             if (statusData.status === 'ready' && !isResultProcessed) {
                                 isResultProcessed = true;
                                 clearInterval(pollTimer);
-                                setLoadingState(false);
                                 
-                                // کسر اعتبار فقط 1 بار
+                                // کسر اعتبار قطعی
                                 if (userSubscriptionStatus === 'free') { 
                                     try { 
                                         await fetch('/api/use-image-credit', { 
-                                            method: 'POST', 
-                                            headers: {'Content-Type': 'application/json'}, 
-                                            body: JSON.stringify({ fingerprint: userFingerprint }) 
+                                            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) 
                                         }); 
                                         checkFreeUserCredit(); 
                                     } catch (e) { console.error("Error using credit", e); } 
                                 }
 
-                                // اتمام موفقیت آمیز کارت
-                                finishCardWithImage(activeCard, statusData.url, currentModelName, currentRatioLabel);
+                                // نمایش عکس و دکمه دانلود
+                                updateAIMessageWithImage(aiMessageElement, statusData.url, currentModelName, currentRatioName);
+                                
+                                // باز کردن فرم
+                                sendBtn.disabled = false;
+                                promptInput.disabled = false;
+                                sendBtn.innerHTML = `<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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
                             }
                         } catch(e) {
                             console.error('Polling error', e);
                         }
-                    }, 3000);
+                    }, 3500);
                 } else {
-                    errorCard(activeCard, 'خطا در برقراری ارتباط با هسته هوش مصنوعی.');
-                    setLoadingState(false);
+                    updateAIMessageWithError(aiMessageElement, 'متاسفانه در ارسال درخواست به سرور مشکلی پیش آمد.');
+                    sendBtn.disabled = false;
+                    promptInput.disabled = false;
+                    sendBtn.innerHTML = `<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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
                 }
             } catch (e) {
-                errorCard(activeCard, 'عدم ارتباط با سرور.');
-                setLoadingState(false);
+                updateAIMessageWithError(aiMessageElement, 'خطا در برقراری ارتباط با سرور.');
+                sendBtn.disabled = false;
+                promptInput.disabled = false;
+                sendBtn.innerHTML = `<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"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> ساخت تصویر جادویی`;
             }
         });
 
@@ -678,10 +569,10 @@
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
             if(!canvas) return; const header = canvas.parentElement; const ctx = canvas.getContext('2d');
-            let particles = []; const particleCount = 25; const maxDistance = 110;
-            const particleColor = '#8B5CF6'; const lineColor = '#8A94A6';
+            let particles = []; const particleCount = 20; const maxDistance = 100;
+            const particleColor = '#4A6CFA'; const lineColor = '#8A94A6';
             function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); }
-            class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.4; this.vy = (Math.random() - 0.5) * 0.4; this.radius = 1.5; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
+            class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } }
             function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } }
             function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; }
             function animate() { if(!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); }