Update app_enhanced.py

app_enhanced.py

@@ -91,6 +91,7 @@ INDEX_HTML = '''
         .file-label:hover { background: #34495e; }
         .submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; }
         .submit-btn:hover { background: #d35400; }
+        
         .restore-btn { margin-top: 15px; background: #27ae60; color: white; padding: 10px; width: 100%; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; display: none; }
         
         .loader { width: 120px; height: 20px; background: radial-gradient(circle 10px, #e67e22 100%, transparent 0); background-size: 20px 20px; animation: ball 1s infinite linear; margin: 20px auto; }
@@ -101,11 +102,11 @@ INDEX_HTML = '''
         .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; }
         .panel { position: relative; overflow: hidden; border: 2px solid #000; background: #eee; cursor: pointer; }
         .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
-        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; transform-origin: center center; }
+        .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
 
-        /* --- SPEECH BUBBLE (SHARK FIN) --- */
+        /* --- SPEECH BUBBLE (EXACT SHARK FIN CSS) --- */
         .speech-bubble { 
             position: absolute; display: flex; justify-content: center; align-items: center; 
             width: 150px; height: 80px; min-width: 60px; min-height: 40px; box-sizing: border-box; 
@@ -116,65 +117,24 @@ INDEX_HTML = '''
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .speech-bubble textarea { position: absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:1px solid #4CAF50; background:rgba(255,255,255,0.9); text-align:center; padding:8px; z-index:100; resize:none; }
 
-        /* The specific CSS request from user */
         .speech-bubble.speech {
-            --b: 3em;   /* tail base */
-            --h: 1.8em; /* tail height */
-            --t: 0.6;   /* thickness */
-            --p: var(--tail-pos, 50%); /* slider pos */
-            --r: 1.2em; /* radius */
+            --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; 
             --c: var(--bubble-fill-color, #4ECDC4);
-            
-            background: var(--c);
-            color: var(--bubble-text-color, #fff);
-            padding: 1em;
-            position: absolute;
-            
-            /* Exact border radius formula provided */
+            background: var(--c); color: var(--bubble-text-color, #fff); padding: 1em; position: absolute;
             border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r);
         }
-
-        /* 
-           TAIL IMPLEMENTATION:
-           Using 'radial-gradient' background instead of mask. 
-           This visually creates the EXACT concave shape requested but is 100% export-safe.
-        */
         .speech-bubble.speech:before {
             content: ""; position: absolute; width: var(--b); height: var(--h);
-            /* Gradient mimics the mask curve */
             background: radial-gradient(100% 100% at 100% 0, transparent calc(var(--t) * 100% - 1px), var(--c) calc(var(--t) * 100%));
             border-bottom-left-radius: 100%; pointer-events: none; z-index: 1;
         }
-
-        /* ROTATION LOGIC (Adapting the shape for 4 sides) */
-        
-        /* Bottom (Default) */
-        .speech-bubble.speech.tail-bottom:before { 
-            top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); 
-        }
-        
-        /* Top */
-        .speech-bubble.speech.tail-top {
-            border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r);
-        }
-        .speech-bubble.speech.tail-top:before {
-            bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: scaleY(-1);
-        }
-        
-        /* Left */
+        .speech-bubble.speech.tail-bottom:before { top: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
+        .speech-bubble.speech.tail-top { border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) var(--r) var(--r) / var(--r); }
+        .speech-bubble.speech.tail-top:before { bottom: 99%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
         .speech-bubble.speech.tail-left { border-radius: var(--r); }
-        .speech-bubble.speech.tail-left:before {
-            right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: rotate(90deg); transform-origin: top right;
-        }
-        
-        /* Right */
+        .speech-bubble.speech.tail-left:before { right: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
         .speech-bubble.speech.tail-right { border-radius: var(--r); }
-        .speech-bubble.speech.tail-right:before {
-            left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: rotate(-90deg); transform-origin: top left;
-        }
+        .speech-bubble.speech.tail-right:before { left: 99%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
         .speech-bubble.thought::after { display:none; } 
@@ -205,6 +165,7 @@ INDEX_HTML = '''
             <span id="fn">No file selected</span>
             <button class="submit-btn" onclick="upload()">Generate Comic</button>
             <button id="restore-btn" class="restore-btn" onclick="restoreSession()">📂 Restore Unsaved Session</button>
+            
             <div class="loading-view" id="loading-view" style="display:none;">
                 <div class="loader"></div>
                 <p id="status-text">Starting...</p>