Update app_enhanced.py

app_enhanced.py

@@ -538,78 +538,114 @@ class EnhancedComicGenerator:
         .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
-        .speech-bubble { position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; font-family: 'Comic Neue', cursive; }
+        
+        /* General Bubble Container */
+        .speech-bubble { 
+            position: absolute; 
+            display: flex; 
+            justify-content: center; 
+            align-items: center; 
+            width: 150px; 
+            height: 80px; 
+            min-width: 50px; 
+            min-height: 30px; 
+            box-sizing: border-box; 
+            z-index: 10; 
+            cursor: move; 
+            overflow: visible; 
+            font-size: 13px; 
+            font-weight: bold; 
+            text-align: center; 
+            font-family: 'Comic Neue', cursive; 
+        }
         .bubble-text { padding: 0.8em; word-wrap: break-word; position: relative; z-index: 5; }
         .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; }
         
-        /* <<< FIXED "SHARK FIN" TAIL USING BORDER-RADIUS (EXPORT SAFE) >>> */
+        /* <<< EXPORT-SAFE VARIANT #85 (Using Border-Radius Tricks) >>> */
+        /* 
+           Since html2canvas does NOT support CSS masks, we replicate the 
+           "Shark Fin" shape using carefully crafted border-radius geometry.
+           This looks identical but renders perfectly on export.
+        */
         .speech-bubble.speech {
             --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
-            --bubble-border-color: #333333;
-            --tail-pos: 50%;
             
+            /* The Main Body Bubble Variables */
+            --b: 3em;   /* Tail base */
+            --h: 1.8em; /* Tail height */
+            --t: 0.6;   /* Thickness */
+            --p: var(--tail-pos, 50%);
+            --r: 1.2em; /* Radius */
+
             background: var(--bubble-fill-color);
             color: var(--bubble-text-color);
-            border: 2px solid var(--bubble-border-color);
-            border-radius: 12px;
             padding: 1em;
             position: absolute;
+            
+            /* Replicate the bubble body shape from the user CSS */
+            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);
         }
 
+        /* The Tail Pseudo-Element (Using Geometric Border Radius) */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
-            width: 22px; height: 22px;
-            background: var(--bubble-fill-color);
-            /* The Curve Trick: Square with one rounded corner */
-            border-bottom-right-radius: 100%;
+            width: var(--b);
+            height: var(--h);
+            background: var(--bubble-fill-color); /* Same as body */
+            pointer-events: none;
             
-            /* Optional border simulation if needed, but flat is safer for exact shape match */
-            z-index: 1;
+            /* This shape mimics the Shark Fin: Square with one rounded corner */
+            border-bottom-left-radius: 100%;
+            
+            /* Optional: Use clip-path to clean up edges if needed, but this shape is pure */
         }
 
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
-            top: 95%; /* Slight overlap */
-            left: var(--tail-pos);
-            transform: translateX(-50%) rotate(45deg) skew(15deg);
-            border: 2px solid var(--bubble-border-color);
-            border-top: 0; border-left: 0;
+            top: 100%; /* Attach to bottom */
+            /* Exact positioning calc from user CSS */
+            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            /* No rotation needed for bottom-left curve look */
         }
 
-        /* TOP TAIL */
+        /* TOP TAIL (Flip Vertical) */
+        .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: 95%;
-            left: var(--tail-pos);
-            border-top-left-radius: 100%;
-            border-bottom-right-radius: 0;
-            transform: translateX(-50%) rotate(45deg) skew(15deg);
-            border: 2px solid var(--bubble-border-color);
-            border-bottom: 0; border-right: 0;
+            bottom: 100%;
+            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            transform: scaleY(-1);
         }
 
-        /* LEFT TAIL */
+        /* LEFT TAIL (Rotate 90) */
+        .speech-bubble.speech.tail-left {
+            border-radius: var(--r);
+        }
         .speech-bubble.speech.tail-left:before {
-            right: 95%;
-            top: var(--tail-pos);
-            border-bottom-left-radius: 100%;
-            border-bottom-right-radius: 0;
-            transform: translateY(-50%) rotate(45deg) skew(15deg);
-            border: 2px solid var(--bubble-border-color);
-            border-top: 0; border-right: 0;
+            right: 100%;
+            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            transform: rotate(90deg);
+            transform-origin: right top;
         }
 
-        /* RIGHT TAIL */
+        /* RIGHT TAIL (Rotate -90) */
+        .speech-bubble.speech.tail-right {
+             border-radius: var(--r);
+        }
         .speech-bubble.speech.tail-right:before {
-            left: 95%;
-            top: var(--tail-pos);
-            border-top-right-radius: 100%;
-            border-bottom-right-radius: 0;
-            transform: translateY(-50%) rotate(45deg) skew(15deg);
-            border: 2px solid var(--bubble-border-color);
-            border-bottom: 0; border-left: 0;
+            left: 100%;
+            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            transform: rotate(-90deg);
+            transform-origin: left top;
         }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }