Update app_enhanced.py

app_enhanced.py

@@ -539,65 +539,66 @@ class EnhancedComicGenerator:
         .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: 1em; word-wrap: break-word; }
+        .bubble-text { padding: 0.8em; 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; }
         
-        /* <<< MODIFICATION START: New Advanced CSS for 'speech' bubble >>> */
+        /* <<< MODIFICATION START: New CSS Triangle Bubble >>> */
         .speech-bubble.speech {
-            /* Main bubble properties */
-            color: var(--bubble-text-color, #333);
-            font-size: 16px;
-            padding: 0; /* Padding is handled by the bubble-text span now */
-            border-radius: 1.2em;
             background: var(--bubble-fill-color, white);
-            box-shadow: 0 0 5px rgba(0,0,0,0.2);
+            color: var(--bubble-text-color, #333);
+            border-radius: .4em;
+            padding: 0;
             border: none;
+            box-shadow: 0 0 5px rgba(0,0,0,0.2);
         }
 
-        .speech-bubble.speech::before {
-            /* This pseudo-element creates the complex tail */
-            content: "";
+        .speech-bubble.speech::after {
+            content: '';
             position: absolute;
-            background: inherit; /* Inherits the dynamic color from the parent */
-            
-            /* Tail dimensions */
-            width: 3em;   /* base */
-            height: 1.8em; /* height */
-            
-            /* The magic mask that carves the tail shape */
-            -webkit-mask: radial-gradient(calc(0.6 * 100%) 105% at 100% 0, #0000 99%, #000 101%);
-            mask: radial-gradient(calc(0.6 * 100%) 105% at 100% 0, #0000 99%, #000 101%);
+            width: 0;
+            height: 0;
+            /* The color is inherited from the parent's fill color */
+            border-color: transparent;
+            border-style: solid;
         }
 
-        /* 4-WAY TAIL ROTATION CLASSES */
-        .speech-bubble.speech.tail-bl::before { /* Bottom-Left */
-            bottom: -0.9em;
-            left: 1.5em;
-            transform-origin: bottom left;
-            transform: skewX(30deg) rotate(-10deg);
-            border-bottom-right-radius: 80%;
+        /* 4-WAY TAIL ROTATION CLASSES using the CSS Triangle method */
+        .speech-bubble.speech.tail-bottom::after {
+            bottom: 0;
+            left: 50%;
+            border-width: 20px;
+            border-top-color: var(--bubble-fill-color, white);
+            border-bottom: 0;
+            margin-left: -20px;
+            margin-bottom: -20px;
         }
-        .speech-bubble.speech.tail-br::before { /* Bottom-Right */
-            bottom: -0.9em;
-            right: 1.5em;
-            transform-origin: bottom right;
-            transform: skewX(-30deg) rotate(10deg) scaleX(-1);
-            border-bottom-left-radius: 80%;
+        .speech-bubble.speech.tail-top::after {
+            top: 0;
+            left: 50%;
+            border-width: 20px;
+            border-bottom-color: var(--bubble-fill-color, white);
+            border-top: 0;
+            margin-left: -20px;
+            margin-top: -20px;
         }
-        .speech-bubble.speech.tail-tr::before { /* Top-Right */
-            top: -0.9em;
-            right: 1.5em;
-            transform-origin: top right;
-            transform: skewX(30deg) rotate(10deg) scale(-1, -1);
-            border-top-left-radius: 80%;
+        .speech-bubble.speech.tail-right::after {
+            top: 50%;
+            right: 0;
+            border-width: 20px;
+            border-left-color: var(--bubble-fill-color, white);
+            border-right: 0;
+            margin-top: -20px;
+            margin-right: -20px;
         }
-        .speech-bubble.speech.tail-tl::before { /* Top-Left */
-            top: -0.9em;
-            left: 1.5em;
-            transform-origin: top left;
-            transform: skewX(-30deg) rotate(-10deg) scaleY(-1);
-            border-top-right-radius: 80%;
+        .speech-bubble.speech.tail-left::after {
+            top: 50%;
+            left: 0;
+            border-width: 20px;
+            border-right-color: var(--bubble-fill-color, white);
+            border-left: 0;
+            margin-top: -20px;
+            margin-left: -20px;
         }
         /* <<< MODIFICATION END >>> */
 
@@ -809,7 +810,8 @@ class EnhancedComicGenerator:
             bubble.dataset.type = type;
 
             if (type === 'speech') {
-                bubble.classList.add('tail-bl');
+                // <<< MODIFICATION: Set default tail position class >>>
+                bubble.classList.add('tail-bottom');
                 bubble.dataset.tailPos = '0';
             }
             if (type === 'thought') {
@@ -831,6 +833,7 @@ class EnhancedComicGenerator:
             currentlySelectedBubble.style.fontFamily = font;
         }
         
+        // <<< MODIFICATION: Updated rotate function for new classes >>>
         function rotateBubbleTail() {
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
             if (currentlySelectedBubble.dataset.type !== 'speech') {
@@ -838,7 +841,7 @@ class EnhancedComicGenerator:
                 return;
             }
 
-            const positions = ['tail-bl', 'tail-br', 'tail-tr', 'tail-tl'];
+            const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
             let currentPos = parseInt(currentlySelectedBubble.dataset.tailPos || 0);
             currentlySelectedBubble.classList.remove(positions[currentPos]);
             let nextPos = (currentPos + 1) % positions.length;