Update app_enhanced.py

app_enhanced.py

@@ -538,73 +538,96 @@ 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; }
-        .bubble-text { padding: 0.8em; word-wrap: break-word; }
+        
+        /* 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; }
         
-        /* <<< CSS VARIANT #85: CURVED MASKED TAIL >>> */
+        /* <<< VARIANT #85: MASKED CURVED TAIL >>> */
         .speech-bubble.speech {
-            /* Bubble Variables */
-            --b: 2.5em;   /* tail base width */
-            --h: 1.5em;   /* tail height */
-            --t: 0.6;     /* thickness (0-1) */
-            --p: var(--tail-pos, 50%);  /* position from slider */
-            --r: 15px;    /* radius */
-
+            /* Variables defined inline via slider, default values here */
+            --b: 3em;   /* tail base width */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness factor */
+            --p: var(--tail-pos, 50%);  /* Slider position */
+            --r: 15px;  /* Border Radius */
+            
+            /* IMPORTANT: Default colors in case var is missing */
             background: var(--bubble-fill-color, #4ECDC4);
             color: var(--bubble-text-color, #fff);
             padding: 1em;
             
-            /* The specific #85 border radius calculation for the bottom side (default) */
-            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);
-            position: relative;
+            /* Robust border-radius calculation using calc() for compatibility */
+            /* TopLeft TopRight BottomRight BottomLeft / VerticalRadius */
+            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);
+            
+            /* Ensure it stays absolute to position on image */
+            position: absolute; 
         }
 
-        /* 
-           The Tail Shape using Masking. 
-           This pseudo-element creates the curved shark-fin shape.
-        */
+        /* The Tail Pseudo-Element */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
             width: var(--b);
             height: var(--h);
-            background: inherit; /* Matches bubble color */
+            background: inherit; /* Inherits teal/fill color */
             border-bottom-left-radius: 100%;
             pointer-events: none;
             
-            /* The magic mask gradient that carves the curve */
-            -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%);
+            /* Mask gradient to create the 'cutout' curve */
+            -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%);
         }
 
-        /* BOTTOM TAIL (Default) */
+        /* BOTTOM TAIL (Standard) */
         .speech-bubble.speech.tail-bottom:before {
             top: 100%;
-            /* Complex clamp to keep tail attached during slider movement */
-            left: clamp(0%, var(--p) - (1 - var(--t))*var(--b)/2, 100% - (1 - var(--t))*var(--b));
+            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
         }
 
-        /* TOP TAIL (Reflected) */
+        /* TOP TAIL (Flipped) */
         .speech-bubble.speech.tail-top {
              /* Flip border 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);
+             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: 100%;
-            left: clamp(0%, var(--p) - (1 - var(--t))*var(--b)/2, 100% - (1 - var(--t))*var(--b));
-            transform: scaleY(-1); /* Flip the curve vertically */
+            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            transform: scaleY(-1);
         }
 
         /* LEFT TAIL (Rotated) */
         .speech-bubble.speech.tail-left {
-            /* Fallback radius for side tails to prevent breakage */
-            border-radius: var(--r);
+            border-radius: var(--r); /* Simplification for side tails to avoid breakage */
         }
         .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));
+            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;
         }
@@ -615,12 +638,11 @@ class EnhancedComicGenerator:
         }
         .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));
+            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;
         }
 
-        /* Other Bubble Types */
         .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%); }
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
@@ -683,7 +705,7 @@ class EnhancedComicGenerator:
             <div class="color-picker-grid">
                 <div>
                     <label for="bubble-text-color">Text</label>
-                    <input type="color" id="bubble-text-color" value="#333333" disabled>
+                    <input type="color" id="bubble-text-color" value="#ffffff" disabled>
                 </div>
                 <div>
                     <label for="bubble-fill-color">Fill</label>