Update app_enhanced.py

app_enhanced.py

@@ -562,79 +562,83 @@ 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; }
         
-        /* <<< NEW CSS FROM USER: Clip-Path and Border-Image Tail >>> */
+        /* <<< USER REQUESTED EXACT CSS FOR SHARK FIN TAIL >>> */
         .speech-bubble.speech {
             /* tail dimension */
-            --b: 2em; /* base */
-            --h: 1.5em; /* height */
+            --b: 3em;   /* base */
+            --h: 1.8em; /* height */
+            --t: .6;    /* thickness (from 0 to 1) */
 
-            /* slider position mapped to --p */
-            --p: var(--tail-pos, 50%); 
-            --x: 1.8em; /* tail skew offset */
-            --r: 1.2em; /* radius */
-            
-            /* Colors */
+            --p: var(--tail-pos, 50%);  /* main position */
+            --r: 1.2em; /* the radius */
             --c: var(--bubble-fill-color, #4ECDC4);
-            color: var(--bubble-text-color, #fff);
 
+            color: var(--bubble-text-color, #fff);
             padding: 1em;
             background: var(--c);
-            position: absolute; /* Ensure it floats */
-            
-            /* 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);
+            position: absolute; /* Changed from relative to absolute for placement */
+
+            /* Exact radius logic from user */
+            border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2)/var(--r);
+        }
+
+        .speech-bubble.speech:before {
+            content: "";
+            position: absolute;
+            width: var(--b);
+            height: var(--h);
+            background: inherit;
+            border-bottom-left-radius: 100%;
+            pointer-events: none;
+            z-index: 1;
             
-            /* 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;
+            /* The specific mask requested */
+            -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
+            mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
         }
 
         /* 
-           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.
+           DIRECTIONAL LOGIC (Adapting the user's bottom-tail CSS for other sides)
         */
 
-        /* BOTTOM (Default) - No changes needed */
-        .speech-bubble.speech.tail-bottom { }
+        /* BOTTOM TAIL (Default) */
+        .speech-bubble.speech.tail-bottom:before {
+            top: 100%;
+            left: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
+        }
 
-        /* TOP TAIL */
+        /* TOP TAIL (Flip vertically) */
         .speech-bubble.speech.tail-top {
-            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);
+            /* Swap radius logic for top */
+            border-radius: min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) var(--r) var(--r)/var(--r);
+        }
+        .speech-bubble.speech.tail-top:before {
+            bottom: 100%;
+            left: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
+            transform: scaleY(-1);
         }
 
-        /* LEFT TAIL */
+        /* LEFT TAIL (Rotate 90deg) */
         .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: 100%;
+            top: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,100% - (1 - var(--t))*var(--b));
+            transform: rotate(90deg);
+            transform-origin: top right;
+        }
 
-        /* RIGHT TAIL */
+        /* RIGHT TAIL (Rotate -90deg) */
         .speech-bubble.speech.tail-right {
-            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.speech.tail-right:before {
+            left: 100%;
+            top: clamp(0%,var(--p) - (1 - var(--t))*var(--b)/2,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.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
@@ -1253,6 +1257,7 @@ class EnhancedComicGenerator:
     </script>
 </body>
 </html>'''
+            # --- FIXED INDENTATION ---
             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!")
@@ -1336,4 +1341,4 @@ def frame_file(filename):
 if __name__ == '__main__':
     port = int(os.getenv("PORT", 7860))
     print(f"🚀 Starting Enhanced Comic Generator on host 0.0.0.0, port {port}")
-    app.run(debug=False, host='0.0.0.0', port=port) 
+    app.run(debug=False, host='0.0.0.0', port=port)