Update app_enhanced.py

app_enhanced.py

@@ -509,78 +509,60 @@ 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; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
+        .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;
+            box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move;
+            font-size: 13px; font-weight: bold; text-align: center;
+        }
         .bubble-text { padding: 2px; word-wrap: break-word; }
         .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 BUBBLE STYLES --- */
         .speech-bubble.speech {
-            padding: 20px 30px;
-            border-radius: 10px;
-            border: 3px solid black;
-            background: white;
-            color: black;
             font-family: "Permanent Marker", cursive;
+            color: #000;
+            padding: 1em;
+            --r: 1.2em; /* radius */
+            --b: 2em;   /* base */
+            --h: 1.5em; /* height */
+            --p: 50%;
+            --x: 1.8em;
+            --c: #FFFFFF;
+            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);
+            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%);
+            background: var(--c);
+            border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
+            border: 3px solid black;
         }
-        .speech-bubble.speech:before {
-             content: '';
-             position: absolute;
-             bottom: -50px;
-             height: 50px;
-             width: 90px;
-             border-radius: 0 0 100%;     
-             box-shadow: -2px -2px 0 0 #000 inset, -23px 0 0 0 #fff inset, -25px -2px 0 0 #000 inset;
-             left: 0;
-        }
-        .speech-bubble.speech.flipped:before {
-             border-radius: 0 0 0 100%;     
-             box-shadow: 2px -2px 0 0 #000 inset, 23px 0 0 0 #fff inset, 25px -2px 0 0 #000 inset;
-             right: 0;
-             left: auto;
-        }
-
+        
         .speech-bubble.thought {
             border-radius: 50%;
             border: 3px solid black;
-            background: white;
-            color: black;
+            background: white; color: black;
         }
         .speech-bubble.thought:before {
-            content: '';
-            position: absolute;
-            height: 3px;
-            width: 3px;
-            bottom: -20px;
-            border-radius: 100%;
-            background: #fff;
+            content: ''; position: absolute;
+            height: 3px; width: 3px; bottom: -20px;
+            border-radius: 100%; background: #fff;
             left: 20px;
             box-shadow: 0 0 0 7px white, 0 0 0 10px black, -20px 15px 0 5px white, -20px 15px 0 8px black, -40px 20px 0 2px white, -40px 20px 0 5px black;
         }
         .speech-bubble.thought.flipped:before {
-            right: 20px;
-            left: auto;
+            right: 20px; left: auto;
             box-shadow: 0 0 0 7px white, 0 0 0 10px black, 20px 15px 0 5px white, 20px 15px 0 8px black, 40px 20px 0 2px white, 40px 20px 0 5px black;
         }
 
         .speech-bubble.reaction {
+            border-radius: 50%;
             background: #FFD700;
             border: 3px solid #E53935;
             color: #D32F2F;
-            font-weight: 900;
-            border-radius: 50%;
-            position: relative;
-        }
-        .speech-bubble.reaction:before, .speech-bubble.reaction:after {
-            content: '';
-            position: absolute;
-            top: -3px; left: -3px; right: -3px; bottom: -3px;
-            background: inherit;
-            clip-path: polygon(50% 0%, 60% 40%, 100% 40%, 70% 65%, 85% 100%, 50% 75%, 15% 100%, 30% 65%, 0% 40%, 40% 40%);
-            z-index: -1;
-        }
-        .speech-bubble.reaction:after {
-            transform: rotate(20deg);
+            clip-path: polygon(100% 50%,78% 60%,88% 82%,65% 76%,59% 99%,45% 80%,25% 93%,27% 69%,3% 67%,20% 50%,3% 33%,27% 31%,25% 7%,45% 20%,59% 1%,65% 24%,88% 18%,78% 40%);
         }
         
         .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
@@ -592,6 +574,7 @@ class EnhancedComicGenerator:
         .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
         .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
         .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
+        
         .edit-controls { position: fixed; bottom: 20px; right: 20px; background: rgba(44, 62, 80, 0.9); color: white; padding: 10px 15px; border-radius: 8px; font-size: 13px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 220px; }
         .edit-controls h4 { margin: 0 0 10px 0; color: #26a69a; text-align: center; }
         .edit-controls button, .edit-controls select, .edit-controls input { margin-top: 5px; padding: 6px 8px; font-size: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; box-sizing: border-box; }
@@ -729,7 +712,13 @@ class EnhancedComicGenerator:
                 if(currentlySelectedBubble) currentlySelectedBubble.style.color = e.target.value;
             });
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
+                if(currentlySelectedBubble) {
+                    if (currentlySelectedBubble.classList.contains('speech')) {
+                        currentlySelectedBubble.style.setProperty('--c', e.target.value);
+                    } else {
+                        currentlySelectedBubble.style.backgroundColor = e.target.value;
+                    }
+                }
             });
 
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
@@ -816,7 +805,8 @@ class EnhancedComicGenerator:
                 
                 const styles = window.getComputedStyle(currentlySelectedBubble);
                 document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
-                document.getElementById('bubble-fill-color').value = rgbToHex(styles.backgroundColor);
+                const fillColor = currentlySelectedBubble.classList.contains('speech') ? styles.getPropertyValue('--c').trim() : styles.backgroundColor;
+                document.getElementById('bubble-fill-color').value = rgbToHex(fillColor);
                 document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
                 document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();