font change

components/ThoughtBubble.js

@@ -16,6 +16,26 @@ const ThoughtBubble = ({
 }) => {
   const thoughtBubbleRef = useRef(null);
 
+  // Calculate dynamic font size based on text length
+  const calculateFontSize = (text) => {
+    if (!text) return isMobile ? '18px' : '22px';
+    
+    const length = text.length;
+    let fontSize;
+    
+    if (length <= 20) {
+      fontSize = isMobile ? 18 : 22;
+    } else if (length <= 50) {
+      fontSize = isMobile ? 16 : 20;
+    } else if (length <= 100) {
+      fontSize = isMobile ? 14 : 18;
+    } else {
+      fontSize = isMobile ? 12 : 16;
+    }
+    
+    return `${fontSize}px`;
+  };
+
   // Add particle effects when thought appears
   useEffect(() => {
     if (thought && isMouthOpen && thoughtBubbleRef.current) {
@@ -57,14 +77,15 @@ const ThoughtBubble = ({
     }
     
     if (thought && isMouthOpen) {
-      // Much larger text size with word-break control
       return (
         <p 
           style={{ 
-            fontSize: isMobile ? '18px' : '22px',
+            fontSize: calculateFontSize(thought),
             hyphens: 'none',
             wordBreak: 'normal',
-            overflowWrap: 'break-word'
+            overflowWrap: 'break-word',
+            lineHeight: '1.4',
+            margin: 0
           }} 
           className="font-medium text-gray-800"
         >