Update app_enhanced.py

app_enhanced.py

@@ -562,96 +562,78 @@ class EnhancedComicGenerator:
         .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.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
         
-        /* <<< VARIANT #85: "SHARK FIN" SHAPE (EXPORT SAFE: BOX-SHADOW METHOD) >>> */
+        /* <<< NEW CSS FROM USER: Clip-Path and Border-Image Tail >>> */
         .speech-bubble.speech {
-            --bubble-fill-color: #4ECDC4;
-            --bubble-text-color: #ffffff;
-            --bubble-border-color: #333333; 
-            --tail-pos: 50%;
-            
-            /* Variables from your specific CSS */
-            --b: 3em;   /* tail base */
-            --h: 1.8em; /* tail height */
-            --t: 0.6;   /* thickness */
+            /* tail dimension */
+            --b: 2em; /* base */
+            --h: 1.5em; /* height */
+
+            /* slider position mapped to --p */
+            --p: var(--tail-pos, 50%); 
+            --x: 1.8em; /* tail skew offset */
             --r: 1.2em; /* radius */
+            
+            /* Colors */
+            --c: var(--bubble-fill-color, #4ECDC4);
+            color: var(--bubble-text-color, #fff);
 
-            background: var(--bubble-fill-color);
-            color: var(--bubble-text-color);
             padding: 1em;
-            position: absolute;
+            background: var(--c);
+            position: absolute; /* Ensure it floats */
             
-            /* EXACT border-radius logic from your requested CSS */
-            border-radius: var(--r) var(--r) 
-                           min(var(--r), calc(100% - var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
-                           min(var(--r), calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
-                           / var(--r);
+            /* The user's exact border-radius logic */
+            border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
+            
+            /* The user's exact clip-path logic */
+            clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
+                clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
+                calc(var(--p) + var(--x)) calc(100% + var(--h)),
+                clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);
+                
+            /* The user's exact border-image logic */
+            border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
         }
 
         /* 
-           EXPORT SAFE TRICK: 
-           Instead of 'mask' (which fails export), we use a transparent box 
-           with a curved border-radius and an INSET BOX-SHADOW.
-           This paints the "meat" of the fin inside the curve, mimicking the mask.
+           ROTATION LOGIC FOR OTHER SIDES 
+           Since the user's CSS is hardcoded for "Bottom Tail", 
+           we adapt it for Top/Left/Right by calculating the correct polygon/border-image values 
+           derived from the same logic.
         */
-        .speech-bubble.speech:before {
-            content: "";
-            position: absolute;
-            pointer-events: none;
-            background: transparent;
-            z-index: 1;
-            /* Fin Dimensions */
-            width: 3em; height: 1.8em; 
-        }
 
-        /* BOTTOM TAIL */
-        .speech-bubble.speech.tail-bottom:before {
-            top: 95%; /* Slight overlap */
-            /* Position Logic */
-            left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            
-            /* The Fin Shape via Shadow */
-            border-bottom-left-radius: 100%; 
-            box-shadow: inset 1.5em -0.8em 0 0 var(--bubble-fill-color);
-        }
+        /* BOTTOM (Default) - No changes needed */
+        .speech-bubble.speech.tail-bottom { }
 
-        /* TOP TAIL (Flip) */
+        /* TOP TAIL */
         .speech-bubble.speech.tail-top {
-             /* Flip Main Radius Logic for top */
-             border-radius: min(var(--r), calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
-                            min(var(--r), calc(100% - var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
-                            var(--r) var(--r) / var(--r);
-        }
-        .speech-bubble.speech.tail-top:before {
-            bottom: 95%;
-            left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-top-left-radius: 100%;
-            box-shadow: inset 1.5em 0.8em 0 0 var(--bubble-fill-color);
+            border-image: conic-gradient(var(--c) 0 0) 1 0 0 0 / var(--h) 0 0 0 / var(--h) 999px 0 999px;
+            /* Invert Y axis logic for polygon */
+            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0,
+                clamp(var(--b), var(--p) + var(--b)/2, 100%) 0,
+                calc(var(--p) + var(--x)) calc(0% - var(--h)),
+                clamp(0%, var(--p) - var(--b)/2, 100% - var(--b)) 0);
+            /* Adjust border radius for top tail */
+            border-radius: min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
         }
 
-        /* LEFT TAIL (Rotate) */
+        /* LEFT TAIL */
         .speech-bubble.speech.tail-left {
+            border-image: conic-gradient(var(--c) 0 0) 0 0 0 1 / 0 0 0 var(--h) / 0 999px 999px var(--h);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,
+                0 clamp(var(--b), var(--p) + var(--b)/2, 100%),
+                calc(0% - var(--h)) calc(var(--p) + var(--x)),
+                0 clamp(0%, var(--p) - var(--b)/2, 100% - var(--b)));
             border-radius: var(--r);
         }
-        .speech-bubble.speech.tail-left:before {
-            right: 95%;
-            top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-top-left-radius: 100%;
-            box-shadow: inset 0.8em 1.5em 0 0 var(--bubble-fill-color);
-            transform: rotate(-90deg);
-            transform-origin: top right;
-        }
 
-        /* RIGHT TAIL (Rotate) */
+        /* RIGHT TAIL */
         .speech-bubble.speech.tail-right {
-             border-radius: var(--r);
-        }
-        .speech-bubble.speech.tail-right:before {
-            left: 95%;
-            top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-top-right-radius: 100%;
-            box-shadow: inset -0.8em 1.5em 0 0 var(--bubble-fill-color);
-            transform: rotate(90deg);
-            transform-origin: top left;
+            border-image: conic-gradient(var(--c) 0 0) 0 1 0 0 / 0 var(--h) 0 0 / 0 var(--h) 999px 999px;
+            clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%,
+                100% clamp(var(--b), var(--p) + var(--b)/2, 100%),
+                calc(100% + var(--h)) calc(var(--p) + var(--x)),
+                100% clamp(0%, var(--p) - var(--b)/2, 100% - var(--b)));
+            border-radius: var(--r);
         }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
@@ -1083,7 +1065,7 @@ class EnhancedComicGenerator:
             const pages = document.querySelectorAll('.comic-page');
             if (pages.length === 0) return alert("No pages found.");
             
-            // 1. FREEZE DIMENSIONS BEFORE EXPORT
+            // 1. FREEZE DIMENSIONS BEFORE EXPORT (Prevents size reset bug)
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
@@ -1106,7 +1088,7 @@ class EnhancedComicGenerator:
                 } catch (err) { alert(`Failed to export page ${i + 1}.`); }
             }
             
-            // 2. UNFREEZE DIMENSIONS
+            // 2. UNFREEZE DIMENSIONS (Restore normal behavior)
             bubbles.forEach(b => {
                 b.style.minWidth = '50px';   
                 b.style.minHeight = '30px'; 
@@ -1271,7 +1253,6 @@ class EnhancedComicGenerator:
     </script>
 </body>
 </html>'''
-            # Corrected Indentation here
             with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
                 f.write(template_html)
             print("📄 Template files copied successfully!")