Update app_enhanced.py

app_enhanced.py

@@ -543,36 +543,52 @@ 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; }
         
-        /* <<< FIXED BUBBLE CSS: ROBUST DIRECTIONAL TAILS >>> */
+        /* <<< FIXED BUBBLE CSS: NO LEAKING & SOLID SHARK-FIN SHAPE >>> */
         .speech-bubble.speech {
             background: var(--bubble-fill-color, white);
             color: var(--bubble-text-color, #333);
             border: 2px solid var(--bubble-border-color, #333);
-            border-radius: 10px;
+            border-radius: 12px; /* Slightly rounder to match image style */
             padding: 0;
-            --tail-pos: 50%; /* Default centered */
+            --tail-pos: 50%;
         }
 
         .speech-bubble.speech:after, .speech-bubble.speech:before {
             pointer-events: none;
         }
 
+        /* 
+           FIX LOGIC:
+           Border width of bubble is 2px.
+           :before (Border color) is positioned at distance X (e.g. -19px).
+           :after (Fill color) acts as a mask. 
+           To prevent leaking, :after must overlap the main bubble border.
+           We shift :after 2px "inwards" (e.g. from -15px to -17px) so its base sits 
+           exactly on top of the border line, hiding it.
+           
+           SHAPE LOGIC:
+           Using `border-width: 15px 15px 0 0` creates a Right-Angled Triangle (Shark Fin) 
+           instead of an arrow, which matches the provided image style better.
+        */
+
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:after {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 15px solid transparent;
-            border-top-color: var(--bubble-fill-color, white);
-            border-bottom: 0;
-            bottom: -15px; left: var(--tail-pos);
+            border-width: 15px 15px 0 0; /* Shark Fin Shape */
+            border-style: solid;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            bottom: -17px; /* 2px overlap to fix leak */
+            left: var(--tail-pos);
             transform: translateX(-50%);
             z-index: 2;
         }
         .speech-bubble.speech.tail-bottom:before {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 17px solid transparent;
-            border-top-color: var(--bubble-border-color, #333);
-            border-bottom: 0;
-            bottom: -19px; left: var(--tail-pos);
+            border-width: 17px 17px 0 0;
+            border-style: solid;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            bottom: -19px;
+            left: var(--tail-pos);
             transform: translateX(-50%);
             z-index: 1;
         }
@@ -580,60 +596,66 @@ class EnhancedComicGenerator:
         /* TOP TAIL */
         .speech-bubble.speech.tail-top:after {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 15px solid transparent;
-            border-bottom-color: var(--bubble-fill-color, white);
-            border-top: 0;
-            top: -15px; left: var(--tail-pos);
-            transform: translateX(-50%);
+            border-width: 0 15px 15px 0;
+            border-style: solid;
+            border-color: transparent var(--bubble-fill-color, white) transparent transparent;
+            top: -17px; /* Fix leak */
+            left: var(--tail-pos);
+            transform: translateX(-50%) rotate(180deg);
             z-index: 2;
         }
         .speech-bubble.speech.tail-top:before {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 17px solid transparent;
-            border-bottom-color: var(--bubble-border-color, #333);
-            border-top: 0;
-            top: -19px; left: var(--tail-pos);
-            transform: translateX(-50%);
+            border-width: 0 17px 17px 0;
+            border-style: solid;
+            border-color: transparent var(--bubble-border-color, #333) transparent transparent;
+            top: -19px;
+            left: var(--tail-pos);
+            transform: translateX(-50%) rotate(180deg);
             z-index: 1;
         }
 
         /* RIGHT TAIL */
         .speech-bubble.speech.tail-right:after {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 15px solid transparent;
-            border-left-color: var(--bubble-fill-color, white);
-            border-right: 0;
-            right: -15px; top: var(--tail-pos);
-            transform: translateY(-50%);
+            border-width: 15px 15px 0 0;
+            border-style: solid;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            right: -17px; /* Fix leak */
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(90deg);
             z-index: 2;
         }
         .speech-bubble.speech.tail-right:before {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 17px solid transparent;
-            border-left-color: var(--bubble-border-color, #333);
-            border-right: 0;
-            right: -19px; top: var(--tail-pos);
-            transform: translateY(-50%);
+            border-width: 17px 17px 0 0;
+            border-style: solid;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            right: -19px;
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(90deg);
             z-index: 1;
         }
 
         /* LEFT TAIL */
         .speech-bubble.speech.tail-left:after {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 15px solid transparent;
-            border-right-color: var(--bubble-fill-color, white);
-            border-left: 0;
-            left: -15px; top: var(--tail-pos);
-            transform: translateY(-50%);
+            border-width: 15px 15px 0 0;
+            border-style: solid;
+            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
+            left: -17px; /* Fix leak */
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(-90deg);
             z-index: 2;
         }
         .speech-bubble.speech.tail-left:before {
             content: ''; position: absolute; width: 0; height: 0;
-            border: 17px solid transparent;
-            border-right-color: var(--bubble-border-color, #333);
-            border-left: 0;
-            left: -19px; top: var(--tail-pos);
-            transform: translateY(-50%);
+            border-width: 17px 17px 0 0;
+            border-style: solid;
+            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
+            left: -19px;
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(-90deg);
             z-index: 1;
         }