{/* Cute decorative accent dot */}

{children}

); }; const formatTime = (ts) => { const date = new Date(ts); // Friendly relative time or simple date const now = Date.now(); const diff = now - ts; if (diff < 86400000) return 'Today'; if (diff < 172800000) return 'Yesterday'; return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }); }; return (

{/* ☁️ HEADER */}

Living Memory 🌿

{isMultiplayer ? 'Our Shared Garden' : 'Your Gentle Space'}

📤

{/* 📜 SCROLLABLE CONTENT */}

{/* ✨ MEMORY SPARK CARD */}

✨ Memory Spark

{/* Added Context Line as requested */}

🕒 {currentSpark.context || "Based on your recent reflections"}

{currentSpark.title}

{currentSpark.body}

{/* 🌸 REFLECTIONS HEADER */}

Reflections 🌸

Your garden of thoughts & moments

{(memories || []).map((memory) => (

{memory.mood}

{isMultiplayer && memory.avatarUrl && (

{ e.stopPropagation(); openProfile(user.handle); }} style={{ width: 24, height: 24, borderRadius: '50%', background: `url(${memory.avatarUrl}) center/cover no-repeat`, border: '2px solid white', marginLeft: -12 // Overlap effect }} /> )}

{formatTime(memory.timestamp)}

{memory.text}

{isMultiplayer && memory.author && (

— {memory.author}

)} ))}

{/* 🪄 INPUT AREA */}

{/* Gentle Prompt Bubble */} {!isTyping && activePrompt && (

💫 {activePrompt}

)}

{ setInputText(e.target.value); setIsTyping((e.target.value || []).length > 0); }} placeholder="What feels important right now? ✨" style={{ flex: 1, height: 56, border: '2px solid transparent', borderRadius: 30, background: '#F7F4FA', padding: '0 24px', fontSize: 16, color: THEME.text, fontFamily: THEME.font, outline: 'none', transition: 'all 0.2s', boxShadow: 'inset 0 2px 5px rgba(0,0,0,0.02)' }} onFocus={(e) => e.target.style.background = 'white'} onBlur={(e) => e.target.style.background = '#F7F4FA'} /> 🦋

{/* Global Animations */}

); }