work breaks

components/ThoughtBubble.js

@@ -57,8 +57,20 @@ const ThoughtBubble = ({
     }
     
     if (thought && isMouthOpen) {
-      // Much larger text size
-      return <p style={{ fontSize: isMobile ? '18px' : '22px' }} className="font-medium text-gray-800">{thought}</p>;
+      // Much larger text size with word-break control
+      return (
+        <p 
+          style={{ 
+            fontSize: isMobile ? '18px' : '22px',
+            hyphens: 'none',
+            wordBreak: 'normal',
+            overflowWrap: 'break-word'
+          }} 
+          className="font-medium text-gray-800"
+        >
+          {thought}
+        </p>
+      );
     }
     
     return <p className={`${isMobile ? 'text-sm' : 'text-lg'} font-medium text-gray-400 italic`}>Waiting for hand gesture...</p>;
@@ -169,7 +181,6 @@ const ThoughtBubble = ({
         textAlign: isThinking ? 'center' : 'left',
         zIndex: 50,
         fontFamily: 'Google Sans, sans-serif',
-        transition: animateThinking ? 'none' : 'all 0.3s ease-in-out',
         opacity: getOpacity(),
         display: 'flex',
         justifyContent: isThinking ? 'center' : 'flex-start',