{ e.stopPropagation(); setSelectedThread(idea); }} style={{ position: 'absolute', left: `${idea.x}%`, top: `${idea.y}%`, transform: 'translate(-50%, -50%)', width: isRoot ? 160 : 140, background: isAnon ? theme.indigo : theme.card, border: theme.cardBorder, borderRadius: isRoot ? '16px 16px 4px 4px' : '12px', padding: 12, color: theme.text, boxShadow: `0 0 15px ${isAnon ? 'rgba(100,100,255,0.3)' : 'rgba(255, 69, 0, 0.4)'}`, cursor: 'pointer', zIndex: 10, transition: 'transform 0.2s', display: 'flex', flexDirection: 'column', gap: 6 }} > {/* Lantern Hanging String visual */}

{idea.text}

{!isAnon && idea._user?.avatarUrl ? (

) : ( {isAnon ? '🌑' : '🏮'} )} {idea._user?.displayName?.split(' ')[0]}

✨ {idea.likes || 0}

); }; return (

{/* 🏮 HEADER */}

Thought Silk

{user?.avatarUrl && (

)}

{/* 🕸️ CANVAS AREA */}

{/* SVG Layer for Threads */} {/* Lantern Nodes */} {(ideas || []).map(idea => ( ))} {/* 🧧 SPARKING ENVELOPE (Random Event) */} {showEnvelope && (

{ setActivePrompt("What is a small act of kindness you witnessed recently?"); setShowEnvelope(false); setIsInputOpen(true); }} style={{ position: 'absolute', top: 80, right: 20, width: 40, height: 60, background: '#D32F2F', borderRadius: 4, border: `1px solid ${theme.gold}`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3)', animation: 'float 3s ease-in-out infinite', cursor: 'pointer', zIndex: 20 }} > 🧧

)}

{/* ➕ FAB (GOLD COIN) */} {/* 📄 INPUT MODAL (BOTTOM SHEET) */} {isInputOpen && (

setIsInputOpen(false)} style={{ flex: 1, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }} />

{activePrompt ? 'Answer the Spark' : (selectedThread ? 'Weave a Reply' : 'Light a Lantern')}

{activePrompt && (

{activePrompt}

)}

setInputText(e.target.value)}
              placeholder={isAnonymous ? "Whisper into the void..." : "Share your thought..."}
              autoFocus
              style={{
                width: '100%', height: 100, background: 'rgba(0,0,0,0.2)', 
                border: 'none', borderRadius: 12, padding: 16,
                color: 'white', fontSize: 16, fontFamily: 'serif', resize: 'none',
                marginBottom: 16
              }}
            />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <button 
                onClick={() => setIsAnonymous(!isAnonymous)}
                style={{ 
                  background: 'none', border: '1px solid rgba(255,255,255,0.3)', 
                  borderRadius: 20, padding: '8px 16px', color: isAnonymous ? '#A0A0FF' : 'rgba(255,255,255,0.7)',
                  fontSize: 14, display: 'flex', alignItems: 'center', gap: 6
                }}
              >
                <span>{isAnonymous ? '🌑' : '🏮'}</span>
                {isAnonymous ? 'Anonymous' : 'Public'}
              </button>

<button 
                onClick={handlePost}
                disabled={!inputText.trim()}
                style={{
                  background: theme.gold,
                  color: '#4A0404',
                  border: 'none', borderRadius: 20, padding: '10px 24px',
                  fontWeight: 700, fontSize: 16, opacity: inputText.trim() ? 1 : 0.5
                }}
              >
                Post
              </button>
            </div>
          </div>
        </div>
      )}

{/* 🧵 THREAD DETAIL MODAL */}
      {selectedThread && !isInputOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 150,
          background: 'rgba(74, 4, 4, 0.95)', backdropFilter: 'blur(10px)',
          display: 'flex', flexDirection: 'column'
        }}>
          {/* Nav */}
          <div style={{ padding: '40px 20px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <button 
              onClick={() => setSelectedThread(null)} 
              style={{ background: 'none', border: 'none', color: theme.text, fontSize: 24 }}
            >
              ←
            </button>
            <h2 style={{ margin: 0, fontSize: 18, fontFamily: 'serif' }}>Thread</h2>
          </div>

{/* Content */}
          <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 100px' }}>
            {/* Main Lantern */}
            <div style={{ 
              padding: 24, background: selectedThread.isAnonymous ? theme.indigo : 'rgba(255,255,255,0.05)', 
              borderRadius: 16, border: theme.cardBorder, marginBottom: 24
            }}>
              <div style={{ fontSize: 20, fontFamily: 'serif', lineHeight: 1.5, marginBottom: 16 }}>
                {selectedThread.text}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, opacity: 0.6 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  {selectedThread.isAnonymous ? '🌑' : <img src={selectedThread._user?.avatarUrl} style={{ width: 20, height: 20, borderRadius: '50%' }} alt="" />}
                  {selectedThread._user?.displayName || 'Anonymous'}
                </div>
                <div>{new Date(selectedThread._timestamp || Date.now()).toLocaleDateString()}</div>
              </div>
            </div>

{/* Replies */}
            <div style={{ paddingLeft: 12, borderLeft: `2px solid ${theme.goldDim}` }}>
              {(ideas || []).filter(i => i.parentId === selectedThread.id).map(reply => (
                <div key={reply.id} style={{ marginBottom: 16, padding: '12px 0 12px 16px' }}>
                   <div style={{ fontSize: 16, marginBottom: 8 }}>{reply.text}</div>
                   <div style={{ fontSize: 12, opacity: 0.5 }}>
                      {reply.isAnonymous ? '🌑 Anonymous' : `🏮 ${reply._user?.displayName}`}
                   </div>
                </div>
              ))}
              {(ideas || []).filter(i => i.parentId === selectedThread.id).length === 0 && (
                <div style={{ fontStyle: 'italic', opacity: 0.5, padding: 16 }}>
                  No silk threads woven here yet.
                </div>
              )}
            </div>
          </div>

{/* Reply Button */}
          <div style={{ padding: 20, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
             <button 
               onClick={() => setIsInputOpen(true)}
               style={{ 
                 width: '100%', height: 50, borderRadius: 25, 
                 background: theme.gold, color: '#4A0404', border: 'none',
                 fontSize: 16, fontWeight: 'bold'
               }}
             >
               Weave a Reply
             </button>
          </div>
        </div>
      )}

</div>
  );
}</article></body></html>