Update app_enhanced.py

app_enhanced.py

@@ -543,102 +543,98 @@ 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 WITH DYNAMIC TAIL SLIDER >>> */
+        /* <<< FIXED BUBBLE CSS: ROBUST DIRECTIONAL TAILS >>> */
         .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;
             padding: 0;
-            --tail-pos: 50%; /* Default centered tail */
+            --tail-pos: 50%; /* Default centered */
         }
 
         .speech-bubble.speech:after, .speech-bubble.speech:before {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 0;
             pointer-events: none;
         }
 
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:after {
-            border-style: solid;
-            border-width: 15px 15px 0 0;
-            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
-            bottom: -15px;
-            left: var(--tail-pos);
+            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);
             transform: translateX(-50%);
-            z-index: 1;
+            z-index: 2;
         }
         .speech-bubble.speech.tail-bottom:before {
-            border-style: solid;
-            border-width: 17px 17px 0 0;
-            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
-            bottom: -19px;
-            left: var(--tail-pos);
+            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);
             transform: translateX(-50%);
-            z-index: 0;
+            z-index: 1;
         }
 
         /* TOP TAIL */
         .speech-bubble.speech.tail-top:after {
-            border-style: solid;
-            border-width: 0 15px 15px 0;
-            border-color: transparent var(--bubble-fill-color, white) transparent transparent;
-            top: -15px;
-            left: var(--tail-pos);
-            transform: translateX(-50%) rotate(180deg);
-            z-index: 1;
+            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%);
+            z-index: 2;
         }
         .speech-bubble.speech.tail-top:before {
-            border-style: solid;
-            border-width: 0 17px 17px 0;
-            border-color: transparent var(--bubble-border-color, #333) transparent transparent;
-            top: -19px;
-            left: var(--tail-pos);
-            transform: translateX(-50%) rotate(180deg);
-            z-index: 0;
+            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%);
+            z-index: 1;
         }
 
         /* RIGHT TAIL */
         .speech-bubble.speech.tail-right:after {
-            border-style: solid;
-            border-width: 15px 15px 0 0;
-            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
-            top: var(--tail-pos);
-            right: -15px;
-            transform: translateY(-50%) rotate(90deg);
-            z-index: 1;
+            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%);
+            z-index: 2;
         }
         .speech-bubble.speech.tail-right:before {
-            border-style: solid;
-            border-width: 17px 17px 0 0;
-            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
-            top: var(--tail-pos);
-            right: -19px;
-            transform: translateY(-50%) rotate(90deg);
-            z-index: 0;
+            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%);
+            z-index: 1;
         }
 
         /* LEFT TAIL */
         .speech-bubble.speech.tail-left:after {
-            border-style: solid;
-            border-width: 15px 15px 0 0;
-            border-color: var(--bubble-fill-color, white) transparent transparent transparent;
-            top: var(--tail-pos);
-            left: -15px;
-            transform: translateY(-50%) rotate(-90deg);
-            z-index: 1;
+            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%);
+            z-index: 2;
         }
         .speech-bubble.speech.tail-left:before {
-            border-style: solid;
-            border-width: 17px 17px 0 0;
-            border-color: var(--bubble-border-color, #333) transparent transparent transparent;
-            top: var(--tail-pos);
-            left: -19px;
-            transform: translateY(-50%) rotate(-90deg);
-            z-index: 0;
+            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%);
+            z-index: 1;
         }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }