{/* Connection Line */} {depth > 0 && (

)} {/* The Card */}

{/* Content */}

(children || []).length > 0 ? toggleExpand(node.id) : null}> {/* Header */}

{!creator.avatarUrl && '👤'}

{creator.displayName}

{(children || []).length > 0 && (

▼

)}

{/* Body Text */}

{node.text}

{/* Actions */}

{isSeed && ( )}

{/* Inline Input */} {activeInputId === node.id && (

{nudge?.id === node.id && (

setInputText(nudge.text + " ")} style={{ fontSize: 12, color: THEME.accent, marginBottom: 8, fontStyle: 'italic', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}> ✨ Try: "{nudge.text}"

)}

setInputText(e.target.value)}
                 placeholder="Build on this thought..."
                 style={{
                   ...STYLES.neuPressed,
                   width: '100%',
                   minHeight: 80,
                   padding: 12,
                   border: 'none',
                   outline: 'none',
                   fontSize: 16,
                   color: THEME.text,
                   resize: 'none',
                   fontFamily: 'inherit',
                   marginBottom: 12
                 }}
               />
               <button
                 onClick={() => addNode(node.id, inputText)}
                 style={{
                   ...STYLES.neuBtn,
                   width: '100%',
                   padding: '12px',
                   color: THEME.accent,
                   borderRadius: 12
                 }}
               >
                 Ripple Forward
               </button>
            </div>
          )}
        </div>

{/* Children Recursion */}
        {node.expanded && (
          <div style={{ position: 'relative' }}>
            {(children || []).map(child => (
              <RippleNode key={child.id} node={child} depth={depth + 1} />
            ))}
          </div>
        )}
      </div>
    );
  };

// 📄 SUMMARY VIEW
  if (summaryMode) {
    const allText = (nodes || []).map(n => n.text);
    return (
      <div style={{ 
        minHeight: '100dvh', 
        background: THEME.bg,
        padding: '40px 24px',
        color: THEME.text,
        animation: 'fadeIn 0.5s ease'
      }}>
        <button 
          onClick={() => setSummaryMode(false)}
          style={{ ...STYLES.neuBtn, width: 44, height: 44, marginBottom: 24, fontSize: 20 }}
        >
          ←
        </button>
        <h2 style={{ fontSize: 28, marginBottom: 8, color: THEME.text }}>Momentum</h2>
        <p style={{ fontSize: 14, color: THEME.textLight, marginBottom: 32 }}>Artifact created {new Date().toLocaleDateString()}</p>
        
        <div style={{ ...STYLES.neuFlat, padding: 32, borderRadius: 24 }}>
           {(nodes || []).filter(n => n.type === 'seed').map(seed => (
             <div key={seed.id} style={{ marginBottom: 24, fontWeight: 700, fontSize: 18 }}>{seed.text}</div>
           ))}
           <div style={{ height: 1, background: '#cbd5e0', margin: '20px 0' }} />
           <ul style={{ paddingLeft: 20, margin: 0 }}>
             {(nodes || []).filter(n => n.type !== 'seed').map(n => (
               <li key={n.id} style={{ marginBottom: 16, lineHeight: 1.6 }}>{n.text}</li>
             ))}
           </ul>
        </div>
        
        <div style={{ textAlign: 'center', marginTop: 32, opacity: 0.6, fontSize: 13 }}>
           Shared by {(memberList || []).length} thinkers
        </div>
      </div>
    );
  }

// 🖼️ MAIN CANVAS VIEW
  return (
    <div style={{
      minHeight: '100dvh',
      backgroundColor: THEME.bg,
      color: THEME.text,
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)',
      paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)',
      fontFamily: 'Inter, sans-serif',
      maxWidth: 480,
      margin: '0 auto',
      overflowX: 'hidden'
    }}>
      {/* Header */}
      <div style={{ 
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '16px 8px 24px 8px'
      }}>
        <div>
          <h1 style={{ fontSize: 24, fontWeight: 800, margin: 0, letterSpacing: '-0.5px' }}>Ripple</h1>
          <span style={{ fontSize: 13, color: THEME.textLight }}>Flow with ideas</span>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
           {(memberList || []).slice(0, 3).map(m => (
             <div key={m.id} 
                onClick={() => openProfile(m.handle)}
                style={{ 
                ...STYLES.neuBtn, width: 36, height: 36, borderRadius: '50%', padding: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
                backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none',
                backgroundSize: 'cover',
                cursor: 'pointer'
             }}>
               {!m.avatarUrl && '👤'}
             </div>
           ))}
           <button onClick={share} style={{ ...STYLES.neuBtn, width: 36, height: 36, padding: 0 }}>
             🔗
           </button>
        </div>
      </div>

{/* The Canvas Content */}
      <div style={{ paddingBottom: 80 }}>
        {(nodes || []).filter(n => n.parentId === null).map(seed => (
          <RippleNode key={seed.id} node={seed} />
        ))}
      </div>

{/* Bottom Floating Action: New Seed */}
      <div style={{
        position: 'fixed',
        bottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)',
        right: 24,
        zIndex: 100
      }}>
        <button 
          onClick={() => {
            // Reset to a new seed idea state (mock functionality for demo)
            const confirmNew = window.confirm("Start a fresh ripple? This will clear the current canvas for a new thought.");
            if (confirmNew) {
              saveAppData({ 
                nodes: [{
                  id: `seed-${Date.now()}`,
                  text: "New Seed Idea...",
                  type: 'seed',
                  createdAt: Date.now(),
                  createdBy: user.id,
                  parentId: null,
                  expanded: true
                }]
              });
              setNodes([{
                id: `seed-${Date.now()}`,
                text: "New Seed Idea...",
                type: 'seed',
                createdAt: Date.now(),
                createdBy: user.id,
                parentId: null,
                expanded: true
              }]);
            }
          }}
          style={{
            ...STYLES.neuBtn,
            width: 56, height: 56, borderRadius: 28,
            fontSize: 24, 
            color: THEME.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}
        >
          🌱
        </button>
      </div>