🎀 {title}

{children}

), [colors]); return (

🎀

BLOOM
BUDDY

v1.1.social-os

{isMultiplayer ? `COMMUNITY ACTIVE: ${memberList.length} BUDDIES ONLINE ... LATEST: ${appData?.feed?.[0]?._user?.displayName ?? 'System'} just ${appData?.feed?.[0]?.type === 'LEVEL_UP' ? 'leveled up!' : 'completed a task!'}` : "SYSTEM STATUS: OPTIMAL ... PET HUNGER: 0% ... CUTENESS: 100% ... KEEP STUDYING! 🎀🎀🎀"}

{tab === 0 && ( <>

{currentEvo.emoji} {['aura', 'face', 'hat'].map(slot => { const eq = myData.equipped?.[slot]; if (!eq || typeof eq !== 'object') return null; const item = CATALOG[eq.id]; if (!item) return null; return ( {item.icon} ); })}

{currentEvo.name} • {currentEvo.stat}

{(bonuses.xp > 0 || bonuses.coins > 0) && (

ACTIVE BONUSES: {bonuses.xp > 0 && `+${bonuses.xp}% XP`} {bonuses.coins > 0 && `+${bonuses.coins}% COINS`}

)}

{currentEvo.desc}

{nextEvo &&

Next evolution: {nextEvo.emoji} {nextEvo.name} at LVL {nextEvo.level}

}

{!wardrobeMode && ( <> )}

{wardrobeMode && (

Equipped Items (Tap to Adjust)

{Object.keys(myData.equipped || {}).map(slot => { const eq = myData.equipped[slot]; if (!eq || typeof eq !== 'object') return null; const item = CATALOG[eq.id]; return ( ); })} {Object.keys(myData.equipped || {}).length === 0 &&

No items equipped. Visit Mall_99.EXE!

}

{editSlot && myData.equipped[editSlot] && (

ADJUST {editSlot.toUpperCase()}

{['x', 'y', 'r', 's'].map(param => (

{param.toUpperCase()} { const val = parseFloat(e.target.value); updateMyData({ equipped: { ...myData.equipped, [editSlot]: { ...myData.equipped[editSlot], [param]: val } } }); }} style={{ flex: 1 }} /> {myData.equipped[editSlot][param]}

))}

)}

)} {showPathSelector && (

SELECT EVOLUTION PATH:

{['NATURE', 'COSMIC', 'SCHOLAR'].map(p => ( ))}

)} {showEvoHistory && (

{currentPath} PATH EVOLUTIONS

{(EVOLUTIONS || []).filter(e => e.path === 'COMMON' || e.path === currentPath).sort((a,b) => a.level - b.level).map(evo => { const unlocked = currentLevel >= evo.level; return (

{unlocked ? evo.emoji : '❓'}

{unlocked ? evo.name : '???'}

LVL {evo.level} • {unlocked ? evo.stat : 'Locked'}

{unlocked && currentEvo.id === evo.id && ACTIVE}

); })}

PAST STUDY SESSIONS

{(() => { const sessions = (myData.archive || []).filter(a => a.type === 'SESSION').sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0)); if ((sessions || []).length === 0) return

No study sessions recorded yet. Use the timer to log sessions!

; return (sessions || []).slice(0, 20).map(s => (

⏱

Study Session

{Math.floor((s.duration || 0) / 60)}m {(s.duration || 0) % 60}s {s.estimated ? ` (Est: ${Math.floor(s.estimated / 60)}m)` : ''} • +{s.xpEarned || 0} XP {s.subjectId && ` • ${(myData.categories || []).find(c => c.id === s.subjectId)?.label || 'SUBJECT'}`}

{s.timestamp ? formatDateTime(s.timestamp) : s.dateStr || 'Unknown'}

)); })()}

COMPLETED QUESTS

{(() => { const tasks = (myData.archive || []).filter(a => a.type === 'TASK').sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0)); if ((tasks || []).length === 0) return

No quests completed yet.

; return (tasks || []).slice(0, 20).map(t => (

✅

{t.title || 'Quest'}

{t.duration || 0}m • +{t.reward || 0} coins

{t.timestamp ? formatDateTime(t.timestamp) : t.dateStr || 'Unknown'}

)); })()}

)} {showEvoDocs && (

{`=== PET EVOLUTION SYSTEM ===\n\n[1] EVOLUTION RULES\n- Pets begin at Level 1 as a 'COMMON' Seedling.\n- Evolve visually at specific thresholds.\n- XP is earned via study timers and quests (100 XP = 1 Level).\n- Players choose an 'Evolution Path' (Nature, Cosmic, Scholar).\n- Past evolutions are stored in 'History'.\n\n[2] DATA MODEL\n{\n id: string,\n path: 'COMMON'|'NATURE'|'COSMIC'|'SCHOLAR',\n level: number,\n emoji: string,\n name: string,\n stat: string,\n desc: string\n}\n\n[3] THRESHOLDS (COSMIC EXAMPLE)\n- LVL 1 : 🐣 Seedling (Curious)\n- LVL 3 : ⭐ Star Sprite (Radiant)\n- LVL 5 : 🌙 Lunar Cat (Mystic)\n- LVL 10: 🦄 Nebula Unicorn (Magical)\n- LVL 25: 🌟 Star Guardian (Transcendent)\n\n[4] FUTURE SUPPORT\nData structure fully supports dynamic addition of new paths without breaking existing saves.`}

)}

LVL {currentLevel} {((myData.xp + sessionXp) % 100)} / 100 XP

{!activeTimerSubject?.startsWith('quest:') && myData.subjectStats?.[activeTimerSubject] > 0 && (

TOTAL TIME STUDIED: {Math.floor((myData.subjectStats[activeTimerSubject] || 0) / 60)}M

)}

{timerMode === 'countdown' && (

DURATION (MINS): { const val = e.target.value; setEstMins(val); setTimeLeft(Number(val) > 0 ? Number(val) * 60 : 0); }} placeholder="25" style={{ width: 60, padding: '2px 4px', fontFamily: 'monospace', fontSize: 12, border: '1px solid black', textAlign: 'center' }} />

)}

{timerMode === 'countdown' ? formatTime(timeLeft) : formatTime(sessionXp)}

)} {(tab === 0 || tab === 1) && (

ADD NEW QUEST:

{ e.preventDefault(); if(!newTaskTitle.trim()) return; const subjectToSave = newTaskCategory === 'Study' ? (newTaskSubject || (myData.categories || []).filter(c => !c.isDeleted)[0]?.id) : null; const baseTask = { id: 'task-'+Date.now(), title: newTaskTitle.toUpperCase(), completed: false, categoryId: subjectToSave || 'cat-focus', linkedSubjectId: subjectToSave, questCategory: newTaskCategory, createdAt: Date.now(), type: newTaskType === 'text' ? 'input' : newTaskType }; if (newTaskType === 'timed') { baseTask.duration = newTaskDur; baseTask.reward = Math.floor(newTaskDur/2); baseTask.timerRequired = true; baseTask.timerCompleted = false; } else if (newTaskType === 'text') { baseTask.inputPrompt = newTaskPrompt || 'Write your response...'; baseTask.reward = 20; } else if (newTaskType === 'count') { baseTask.inputPrompt = newTaskPrompt || 'List items...'; baseTask.targetCount = newTaskCount || 5; baseTask.progressItems = []; baseTask.reward = (newTaskCount || 5) * 5; } updateMyData({ tasks: [baseTask, ...(myData.tasks||[])] }); setNewTaskTitle(''); setNewTaskPrompt(''); setNewTaskCategory('General'); setNewTaskSubject(''); }} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>

setNewTaskTitle(e.target.value)} placeholder="TASK NAME..." autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false} style={{ flex: 1, minWidth: 150, textTransform: 'uppercase', fontFamily: 'monospace', padding: '8px 12px', border: '2px inset white', fontSize: 16, minHeight: 44, outline: 'none', WebkitAppearance: 'none' }} /> {newTaskCategory === 'Study' && ( )} {newTaskType === 'timed' && ( )} {newTaskType === 'count' && ( setNewTaskCount(Number(e.target.value))} style={{ width: 60, fontFamily: 'monospace', padding: '4px', border: '2px inset white', fontSize: 16 }} /> )}

{(newTaskType === 'text' || newTaskType === 'count') && ( setNewTaskPrompt(e.target.value)} placeholder="PROMPT / DESCRIPTION..." autoComplete="off" style={{ width: '100%', fontFamily: 'monospace', padding: '8px 12px', border: '2px inset white', fontSize: 14, outline: 'none', boxSizing: 'border-box' }} /> )}

{(myData.tasks ?? []).map(t => { const isTimed = t.timerRequired || !t.type || t.type === 'timed' || (t.duration && t.type !== 'input' && t.type !== 'count'); const isText = t.type === 'input' || t.type === 'text'; const isCount = t.type === 'count'; const typeTag = isText ? '📝 TEXT' : isCount ? '🔢 COUNT' : '⏱ TIMED'; const canComplete = t.timerCompleted; const isWorking = isRunning && activeTimerSubject === 'quest:' + t.id; const linkedCat = t.linkedSubjectId ? (myData.categories || []).find(c => c.id === t.linkedSubjectId) : null; const isStudyLinked = t.questCategory === 'Study' && linkedCat; const tagBgColor = isStudyLinked ? linkedCat.color : colors.pinkSoft; const cardBorder = isWorking ? '3px solid ' + colors.pinkHot : isStudyLinked && !t.completed ? `3px solid ${linkedCat.color}` : '2px inset white'; return (

{t.requirePhoto && '📸 '} {t.title} {typeTag} 📁 {isStudyLinked ? linkedCat.label : (t.questCategory || 'GENERAL')}

REWARD: {t.reward} COINS {isTimed && t.duration ? `• ${t.duration}m` : ''} {isCount ? `• ${t.targetCount} Items` : ''}

{!t.completed && !isWorking && isTimed && !canComplete && ( )} {!t.completed && isWorking && isTimed && ( )} {!t.completed && canComplete && isTimed && ( )}

{!t.completed && isTimed && !canComplete && (

Complete the timer in CHRONO_LOCK.SYS to finish this quest

)} {!t.completed && isText && (

setQuestInputs(prev => ({...prev, [t.id]: e.target.value}))}
                        placeholder={t.inputPrompt || "Type your response here..."}
                        style={{ width: '100%', height: 60, fontFamily: 'monospace', padding: 8, border: '2px inset white', boxSizing: 'border-box', resize: 'none', fontSize: 12, marginBottom: 8 }}
                      />
                      {!(questInputs[t.id] || '').trim() && (
                        <div style={{ fontSize: 10, color: 'red', marginBottom: 8, fontWeight: 'bold' }}>Enter a response before submitting.</div>
                      )}
                      <button 
                        className="retro-btn"
                        disabled={!(questInputs[t.id] || '').trim()}
                        style={{ background: !(questInputs[t.id] || '').trim() ? colors.retroGray : '#98FB98', width: '100%', justifyContent: 'center' }} 
                        onClick={() => {
                        const responseText = (questInputs[t.id] || '').trim();
                        if (!responseText) return;
                        const earnedCoins = Math.floor((t.reward || 10) * (1 + bonuses.coins / 100));
                        const earnedXp = Math.floor(10 * (1 + bonuses.xp / 100));
                        
                        const newArchiveEntry = {
                          id: 'arc-' + Date.now() + Math.floor(Math.random()*100),
                          type: 'TASK',
                          timestamp: Date.now(),
                          dateStr: getLocalYYYYMMDD(),
                          title: t.title,
                          response: responseText,
                          reward: earnedCoins
                        };

updateMyData({ 
                          tasks: (myData.tasks ?? []).map(x => x.id === t.id ? { ...x, completed: true, response: responseText } : x), 
                          coins: myData.coins + earnedCoins,
                          xp: myData.xp + earnedXp,
                          archive: [newArchiveEntry, ...(myData.archive || [])]
                        });
                        
                        postToFeed({ type: 'TASK_COMPLETE', taskTitle: t.title });
                        triggerConfetti();
                      }}>✅ SUBMIT RESPONSE</button>
                    </div>
                  )}

{!t.completed && isCount && (() => {
                    const handleAddCountItem = () => {
                      const val = (questInputs[t.id] || '').trim();
                      if (!val) return;
                      
                      const newItems = [...(t.progressItems || []), val];
                      const isDone = (newItems || []).length >= t.targetCount;
                      
                      let updates = {
                        tasks: (myData.tasks ?? []).map(x => x.id === t.id ? { ...x, progressItems: newItems, completed: isDone } : x)
                      };
                      
                      if (isDone) {
                        const earnedCoins = Math.floor((t.reward || 20) * (1 + bonuses.coins / 100));
                        updates.coins = myData.coins + earnedCoins;
                        updates.xp = myData.xp + 15;
                        logToArchive('TASK', { title: t.title, response: (newItems || []).join(', '), reward: earnedCoins });
                        postToFeed({ type: 'TASK_COMPLETE', taskTitle: t.title });
                        triggerConfetti();
                      }
                      
                      updateMyData(updates);
                      setQuestInputs(prev => ({...prev, [t.id]: ''}));
                    };

return (
                    <div style={{ marginTop: 8 }}>
                      <div style={{ fontSize: 11, marginBottom: 8, fontWeight: 'bold' }}>
                        {t.inputPrompt || 'List items:'} ({(t.progressItems || []).length} / {t.targetCount})
                      </div>
                      
                      <div style={{ border: '2px inset white', height: 14, background: '#FFF', position: 'relative', marginBottom: 8 }}>
                        <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: `${Math.min(100, ((t.progressItems || []).length / t.targetCount) * 100)}%`, background: (t.progressItems || []).length >= t.targetCount ? '#98FB98' : colors.pinkHot, transition: 'width 0.3s ease' }} />
                      </div>

<div style={{ display: 'flex', gap: 8 }}>
                        <input
                          value={questInputs[t.id] || ''}
                          onChange={e => setQuestInputs(prev => ({...prev, [t.id]: e.target.value}))}
                          onKeyDown={e => {
                            if (e.key === 'Enter') {
                              e.preventDefault();
                              handleAddCountItem();
                            }
                          }}
                          placeholder="Enter one item..."
                          style={{ flex: 1, height: 36, fontFamily: 'monospace', padding: '0 8px', border: '2px inset white', boxSizing: 'border-box', fontSize: 12 }}
                        />
                        <button id={`add-btn-${t.id}`} className="retro-btn" style={{ background: colors.pinkSoft, padding: '0 12px' }} onClick={handleAddCountItem}>ADD</button>
                      </div>
                    </div>
                  );})()}
                  
                  {(t.progressItems || []).length > 0 && isCount && (
                    <div style={{ marginTop: 8, background: colors.lace, padding: 8, border: '1px solid ' + colors.retroGray }}>
                      <ul style={{ margin: 0, paddingLeft: 16, fontSize: 11, fontFamily: 'monospace' }}>
                        {(t.progressItems || []).map((item, idx) => (
                          <li key={idx} style={{ paddingBottom: 4 }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                              <span>{item}</span>
                              {!t.completed && (
                                <button
                                  className="retro-btn"
                                  style={{ padding: '0 4px', fontSize: 8, background: colors.pinkSoft, marginLeft: 8 }}
                                  onClick={() => {
                                    const newItems = [...(t.progressItems || [])];
                                    (newItems || []).splice(idx, 1);
                                    updateMyData({
                                      tasks: (myData.tasks || []).map(x => x.id === t.id ? { ...x, progressItems: newItems, completed: false } : x)
                                    });
                                  }}
                                >✕</button>
                              )}
                            </div>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}

{t.completed && (
                    <div style={{ fontSize: 11, color: '#4a4', fontWeight: 'bold', marginTop: 8 }}>
                      ✅ COMPLETED 
                      {t.response && <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic', marginTop: 4 }}>"{t.response}"</div>}
                      {t.progressItems && (t.progressItems || []).length > 0 && (
                        <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic', marginTop: 4, background: '#f5f5f5', padding: 4 }}>
                          {(t.progressItems || []).length} items collected!
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
              })}
            </div>
          </Window>
        )}

{tab === 2 && (
          <Window title="MALL_99.EXE">
            <div style={{ padding: '0 0 10px', fontWeight: 'bold', borderBottom: '2px solid black', marginBottom: 15 }}>
              BALANCE: <span style={{ color: colors.pinkHot }}>{myData.coins} 💰</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {Object.values(CATALOG || {}).map(item => {
                const owned = (myData.inventory ?? []).includes(item.id);
                const currentSlotData = myData.equipped?.[item.slot];
                const equipped = currentSlotData && typeof currentSlotData === 'object' && currentSlotData.id === item.id;
                
                return (
                  <div key={item.id} className="retro-window" style={{ textAlign: 'center', padding: 10, backgroundColor: colors.white }}>
                    <div style={{ fontSize: 48, margin: '10px 0' }}>{item.icon}</div>
                    <div style={{ fontSize: 11, fontWeight: '900', textTransform: 'uppercase' }}>{item.name}</div>
                    <div style={{ fontSize: 9, color: '#666', height: 12 }}>
                      {item.stats.xpBonus ? `+${item.stats.xpBonus}% XP ` : ''}
                      {item.stats.coinBonus ? `+${item.stats.coinBonus}% COINS` : ''}
                    </div>
                    <button 
                      className="retro-btn" 
                      style={{ width: '100%', marginTop: 10, justifyContent: 'center', background: equipped ? colors.pinkSoft : colors.retroGray }}
                      disabled={!owned && myData.coins < item.price}
                      onClick={() => {
                        if (equipped) {
                          const newEq = { ...myData.equipped };
                          delete newEq[item.slot];
                          updateMyData({ equipped: newEq });
                        } else if (owned) {
                          const defaultY = item.slot === 'hat' ? -60 : item.slot === 'face' ? -10 : 0;
                          updateMyData({ equipped: { ...(myData.equipped ?? {}), [item.slot]: { id: item.id, x: 0, y: defaultY, r: 0, s: 1 } } });
                        } else {
                          const defaultY = item.slot === 'hat' ? -60 : item.slot === 'face' ? -10 : 0;
                          updateMyData({ 
                            coins: myData.coins - item.price, 
                            inventory: [...(myData.inventory ?? []), item.id], 
                            equipped: { ...(myData.equipped ?? {}), [item.slot]: { id: item.id, x: 0, y: defaultY, r: 0, s: 1 } } 
                          });
                        }
                      }}
                    >
                      {equipped ? 'UNEQUIP' : owned ? 'EQUIP' : `${item.price} 💰`}
                    </button>
                  </div>
                );
              })}
            </div>
          </Window>
        )}

{tab === 3 && (
          <Window title="COMMUNITY.EXE">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ borderBottom: '2px solid black', paddingBottom: 8, fontWeight: 'bold' }}>BUDDIES IN ROOM:</div>
              {(memberList || []).map(m => {
                const memberData = appData?.users?.[m.id];
                const mLevel = Math.floor((memberData?.xp ?? 0) / 100) + 1;
                return (
                  <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 12, background: colors.white, padding: 8, border: '2px inset white' }}>
                    <img 
                      src={m.avatarUrl || 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + m.id} 
                      className="bb-avatar-circle" 
                      onClick={() => openProfile(m.handle)}
                      onError={(e) => { e.currentTarget.style.display = 'none'; }}
                    />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 'bold', fontSize: 14 }}>{m.displayName || m.name}</div>
                      <div style={{ fontSize: 11, color: colors.pinkHot }}>LVL {mLevel} • {memberData?.coins ?? 0} 💰</div>
                    </div>
                    <div style={{ fontSize: 24 }}>{memberData?.equipped?.hat ?? '🐰'}</div>
                  </div>
                );
              })}
              
              <div style={{ marginTop: 12, borderBottom: '2px solid black', paddingBottom: 8, fontWeight: 'bold' }}>RECENT ACTIVITY:</div>
              <div style={{ maxHeight: 200, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {(appData?.feed ?? []).map((entry, idx) => (
                  <div key={idx} style={{ fontSize: 12, padding: 6, background: colors.highlight, border: '1px solid white' }}>
                    <span style={{ fontWeight: 'bold', cursor: 'pointer', color: colors.pinkHot }} onClick={() => openProfile(entry._user?.handle)}>
                      {entry._user?.displayName}
                    </span>
                    {entry.type === 'LEVEL_UP' ? ` reached Level ${entry.level}! 🎉` : entry.type === 'EVOLUTION' ? ` evolved into ${entry.evoEmoji} ${entry.evoName}! ✨` : ` finished: ${entry.taskTitle} ✅`}
                    {entry.photoUrl && <img src={entry.photoUrl} style={{ width: '100%', marginTop: 4, border: '1px solid black' }} />}
                  </div>
                ))}
              </div>
              
              <button className="retro-btn" style={{ marginTop: 10, justifyContent: 'center' }} onClick={() => share()}>
                🎀 INVITE BUDDIES 🎀
              </button>
            </div>
          </Window>
        )}

{tab === 4 && (
          <Window title="PLANNER.EXE">
            <div style={{ padding: '0 0 10px', fontWeight: 'bold', borderBottom: '2px solid black', marginBottom: 15, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span>10-MIN TIME BLOCKER</span>
              <span style={{ fontSize: 10, opacity: 0.6 }}>24 HOURS</span>
            </div>
            
            <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 10, marginBottom: 10, WebkitOverflowScrolling: 'touch' }}>
              {(myData.categories || []).filter(c => !c.isDeleted).map(c => (
                 <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0 }}>
                   <button className="retro-btn"
                     style={{
                       background: activeCategory === c.id ? colors.highlight : colors.retroGray,
                       border: activeCategory === c.id ? '2px inset white' : '2px outset white',
                       color: 'black',
                       whiteSpace: 'nowrap'
                     }}
                     onClick={() => { setActiveCategory(c.id); setShowAddCat(false); }}
                   >
                     <div style={{ width: 12, height: 12, background: c.color, border: '1px solid black' }} />
                     {c.label}
                   </button>
                   {!['cat-study','cat-focus','cat-work','cat-rest'].includes(c.id) && (
                     <button className="retro-btn" style={{ padding: '2px 6px', fontSize: 10, color: 'red' }} onClick={() => {
                       const updated = (myData.categories || []).map(x => x.id === c.id ? { ...x, isDeleted: true } : x);
                       updateMyData({ categories: updated });
                       if (activeCategory === c.id) setActiveCategory('cat-study');
                       if (activeTimerSubject === c.id) setActiveTimerSubject('cat-study');
                     }}>✕</button>
                   )}
                 </div>
              ))}
              <button className="retro-btn"
                style={{
                  background: activeCategory === 'erase' ? colors.highlight : colors.retroGray,
                  border: activeCategory === 'erase' ? '2px inset white' : '2px outset white',
                  flexShrink: 0
                }}
                onClick={() => { setActiveCategory('erase'); setShowAddCat(false); }}
              >
                <div style={{ 
                  width: 12, height: 12, border: '1px solid black', 
                  backgroundImage: 'linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)', 
                  backgroundSize: '4px 4px', backgroundPosition: '0 0, 2px 2px' 
                }} />
                ERASE
              </button>
              <button className="retro-btn"
                style={{
                  background: activeCategory === 'note' ? colors.highlight : colors.retroGray,
                  border: activeCategory === 'note' ? '2px inset white' : '2px outset white',
                  flexShrink: 0
                }}
                onClick={() => { setActiveCategory('note'); setShowAddCat(false); }}
              >
                📝 NOTE
              </button>
              <button className="retro-btn" style={{ flexShrink: 0, background: colors.pinkSoft, color: 'black' }} onClick={() => setShowAddCat(!showAddCat)}>
                ➕ NEW
              </button>
            </div>

{showAddCat && (
              <div style={{ padding: 12, background: colors.retroGray, border: '2px inset white', marginBottom: 10 }}>
                <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 6 }}>NEW CATEGORY:</div>
                <form onSubmit={(e) => { e.preventDefault(); if (!newCatLabel.trim()) return; const newCat = { id: 'cat-' + Date.now(), color: newCatColor, label: newCatLabel.trim() }; updateMyData({ categories: [...(myData.categories || []), newCat] }); setActiveCategory(newCat.id); setShowAddCat(false); setNewCatLabel(''); }} style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
                  <input 
                    maxLength={8} 
                    placeholder="LABEL (e.g. GYM)" 
                    value={newCatLabel}
                    autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false}
                    onChange={e => setNewCatLabel(e.target.value.toUpperCase())}
                    style={{ flex: 1, textTransform: 'uppercase', fontFamily: 'monospace', padding: '8px 12px', border: '2px inset white', fontSize: 16, minHeight: 44, outline: 'none', WebkitAppearance: 'none' }}
                  />
                </form>
                <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
                  {['#FF1493', '#9370DB', '#87CEFA', '#98FB98', '#FFD700', '#FFA07A', '#20B2AA', '#000000'].map(color => (
                    <div 
                      key={color} 
                      onClick={() => setNewCatColor(color)}
                      style={{ 
                        width: 24, height: 24, background: color, border: newCatColor === color ? '2px solid white' : '2px solid black',
                        boxShadow: newCatColor === color ? '0 0 0 2px black' : 'none', cursor: 'pointer' 
                      }} 
                    />
                  ))}
                </div>
                <button className="retro-btn" style={{ width: '100%', justifyContent: 'center' }} onClick={() => {
                  if (!newCatLabel.trim()) return;
                  const newCat = { id: 'cat-' + Date.now(), color: newCatColor, label: newCatLabel.trim() };
                  updateMyData({ categories: [...(myData.categories || []), newCat] });
                  setActiveCategory(newCat.id);
                  setShowAddCat(false);
                  setNewCatLabel('');
                }}>💾 SAVE CATEGORY</button>
              </div>
            )}

<div 
              onTouchMove={(e) => {
                if (activeCategory === 'note') return;
                if ((e.touches || []).length > 0) {
                  const touch = e.touches[0];
                  const el = document.elementFromPoint(touch.clientX, touch.clientY);
                  if (el && el.dataset && el.dataset.timekey) {
                    paintCell(el.dataset.timekey, activeCategory);
                  }
                }
              }}
              style={{ 
              maxHeight: '50vh', 
              overflowY: 'auto', 
              border: '2px inset white', 
              background: colors.lace, 
              padding: '12px 8px',
              touchAction: 'pan-y'
            }}>
              <div style={{ display: 'flex', marginBottom: 4, paddingLeft: 50 }}>
                {['00', '10', '20', '30', '40', '50'].map(m => (
                  <div key={m} style={{ flex: 1, textAlign: 'center', fontSize: 9, fontFamily: 'monospace', opacity: 0.5 }}>{m}</div>
                ))}
              </div>
              {Array.from({ length: 24 }).map((_, hIdx) => {
                const hour = hIdx;
                const displayHour = hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour-12} PM`;

return (
                  <div key={hour} style={{ display: 'flex', alignItems: 'stretch', marginBottom: 2 }}>
                    <div style={{ width: 50, fontSize: 11, fontWeight: 'bold', textAlign: 'right', paddingRight: 8, paddingTop: 4, fontFamily: 'monospace', color: colors.pinkHot }}>
                      {displayHour}
                    </div>
                    <div style={{ display: 'flex', flex: 1, gap: 2 }}>
                      {Array.from({ length: 6 }).map((_, mIdx) => {
                        const min = mIdx * 10;
                        const timeKey = `${hour}:${min}`;
                        const cellData = myData.planner?.[timeKey];
                        
                        let cellColor = 'transparent';
                        let taskTitle = '';

if (cellData && cellData !== 'erase') {
                          const categoryId = typeof cellData === 'object' ? cellData.categoryId : cellData;
                          taskTitle = typeof cellData === 'object' && cellData.note ? cellData.note : '';
                          const matchedCat = (myData.categories || []).find(c => c.id === categoryId);
                          cellColor = matchedCat ? matchedCat.color : (typeof categoryId === 'string' && categoryId.startsWith('#') ? categoryId : '#ddd');
                        }

return (
                          <div
                            key={mIdx}
                            data-timekey={timeKey}
                            onPointerDown={(e) => {
                              if (e.target.hasPointerCapture && e.target.hasPointerCapture(e.pointerId)) {
                                e.target.releasePointerCapture(e.pointerId);
                              }
                              if (activeCategory === 'note') {
                                if (cellData && cellData !== 'erase') {
                                  setEditingNoteKey(timeKey);
                                  setEditingNoteText(typeof cellData === 'object' && cellData.note ? cellData.note : '');
                                }
                                return;
                              }
                              const currentCatId = typeof cellData === 'object' ? cellData.categoryId : cellData;
                              if (activeCategory !== 'erase' && currentCatId === activeCategory) {
                                setEditingNoteKey(timeKey);
                                setEditingNoteText(typeof cellData === 'object' && cellData.note ? cellData.note : '');
                              } else {
                                paintCell(timeKey, activeCategory);
                              }
                            }}
                            onPointerEnter={(e) => {
                              if (e.buttons === 1 || e.buttons === 3) {
                                if (activeCategory === 'note') return;
                                paintCell(timeKey, activeCategory);
                              }
                            }}
                            style={{
                              flex: 1,
                              aspectRatio: '1',
                              border: '1px solid ' + colors.retroGray,
                              background: cellColor === 'transparent' ? 'rgba(255,255,255,0.7)' : cellColor,
                              cursor: 'pointer',
                              touchAction: 'none',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              fontSize: 8,
                              padding: 1,
                              overflow: 'hidden',
                              textAlign: 'center',
                              wordBreak: 'break-word',
                              lineHeight: 1
                            }}
                          >
                            {taskTitle}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>

{editingNoteKey && (
              <div style={{
                position: 'fixed', inset: 0,
                background: 'rgba(0,0,0,0.6)', zIndex: 10001,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 16
              }}>
                <div className="retro-window" style={{ width: '100%', maxWidth: 400, padding: 0, boxShadow: '4px 4px 0px black' }}>
                  <div className="window-title">
                    <span>📝 EDIT NOTE: {editingNoteKey}</span>
                    <button onClick={() => setEditingNoteKey(null)} style={{ background: 'transparent', border: 'none', color: 'white', cursor: 'pointer', fontWeight: 'bold' }}>X</button>
                  </div>
                  <div style={{ padding: 16, background: colors.lace, display: 'flex', flexDirection: 'column', gap: 12 }}>
                     <textarea 
                       value={editingNoteText}
                       onChange={e => setEditingNoteText(e.target.value)}
                       placeholder="Add a short task or reminder..."
                       style={{ width: '100%', height: 80, fontFamily: 'monospace', padding: 8, border: '2px inset white', boxSizing: 'border-box', resize: 'none', fontSize: 16 }}
                       autoFocus
                     />
                     <div style={{ display: 'flex', gap: 8 }}>
                       <button className="retro-btn" style={{ flex: 1, justifyContent: 'center', background: '#98FB98' }} onClick={() => {
                         const current = plannerRef.current[editingNoteKey];
                         if (current) {
                           const categoryId = typeof current === 'object' ? current.categoryId : current;
                           plannerRef.current = { ...plannerRef.current, [editingNoteKey]: editingNoteText.trim() ? { categoryId, note: editingNoteText.trim() } : categoryId };
                           updateMyData({ planner: plannerRef.current });
                         }
                         setEditingNoteKey(null);
                       }}>💾 SAVE</button>
                       <button className="retro-btn" style={{ flex: 1, justifyContent: 'center', background: colors.pinkSoft }} onClick={() => {
                         const current = plannerRef.current[editingNoteKey];
                         if (current) {
                           const categoryId = typeof current === 'object' ? current.categoryId : current;
                           plannerRef.current = { ...plannerRef.current, [editingNoteKey]: categoryId };
                           updateMyData({ planner: plannerRef.current });
                         }
                         setEditingNoteKey(null);
                       }}>🗑 CLEAR NOTE</button>
                     </div>
                  </div>
                </div>
              </div>
            )}
          </Window>
        )}
        {tab === 5 && (
          <Window title="PERSONAL_ARCHIVE.EXE">
            <div style={{ padding: '0 0 10px', fontWeight: 'bold', borderBottom: '2px solid black', marginBottom: 15, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <button className="retro-btn" onClick={() => setArchiveDate(new Date(archiveDate.getFullYear(), archiveDate.getMonth() - 1, 1))}>◀</button>
              <span style={{ textTransform: 'uppercase', fontFamily: 'Arial Black', fontSize: 14 }}>
                {archiveDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
              </span>
              <button className="retro-btn" onClick={() => setArchiveDate(new Date(archiveDate.getFullYear(), archiveDate.getMonth() + 1, 1))}>▶</button>
            </div>
            
            <div style={{ background: colors.lace, border: '2px inset white', padding: 8, marginBottom: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
                {['S','M','T','W','T','F','S'].map(d => <div key={d} style={{textAlign:'center', fontWeight:'bold', fontSize:10, color: colors.pinkHot}}>{d}</div>)}
                {Array.from({length: new Date(archiveDate.getFullYear(), archiveDate.getMonth(), 1).getDay()}).map((_,i) => <div key={`empty-${i}`} />)}
                {Array.from({length: new Date(archiveDate.getFullYear(), archiveDate.getMonth() + 1, 0).getDate()}).map((_,i) => {
                   const day = i + 1;
                   const dStr = `${archiveDate.getFullYear()}-${String(archiveDate.getMonth()+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
                   const dayData = (myData.archive || []).filter(a => a.dateStr === dStr);
                   const hasData = (dayData || []).length > 0;
                   const isSelected = selectedArchiveDate === dStr;
                   const isFuture = dStr > getLocalYYYYMMDD();
                   return (
                     <button key={day} onClick={() => {
                       if (isFuture) {
                         alert("Cannot log entries for future dates");
                       } else {
                         setSelectedArchiveDate(dStr);
                       }
                     }} style={{
                       border: isSelected ? '2px inset white' : '2px outset white',
                       background: isSelected ? colors.pinkHot : hasData ? colors.pinkSoft : colors.retroGray,
                       color: isSelected ? 'white' : isFuture ? '#999' : 'black',
                       opacity: isFuture ? 0.6 : 1,
                       cursor: isFuture ? 'not-allowed' : 'pointer',
                       aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 'bold', padding: 0, position: 'relative'
                     }}>
                       {day}
                       {hasData && !isSelected && <div style={{ position: 'absolute', bottom: 2, width: 4, height: 4, borderRadius: '50%', background: 'white' }} />}
                     </button>
                   )
                })}
              </div>
            </div>

<div style={{ background: colors.retroGray, border: '2px inset white', padding: 12 }}>
              <div style={{ fontSize: 12, fontWeight: 'bold', marginBottom: 10, borderBottom: '1px solid #888', paddingBottom: 4 }}>
                LOGS FOR: {selectedArchiveDate}
              </div>
              
              <div style={{ maxHeight: 250, overflowY: 'auto', marginBottom: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {((myData.archive || []).filter(a => a.dateStr === selectedArchiveDate).length === 0) ? (
                  <div style={{ fontSize: 10, fontStyle: 'italic', opacity: 0.6 }}>No records for this date.</div>
                ) : (
                  (myData.archive || []).filter(a => a.dateStr === selectedArchiveDate).map(item => (
                    <div key={item.id} style={{ background: colors.white, border: '1px solid black', padding: 8 }}>
                      <div style={{ fontSize: 9, color: '#888', textAlign: 'right', marginBottom: 4 }}>{item.timestamp ? formatDateTime(item.timestamp) : ''}</div>
                      {item.type === 'REFLECTION' && (
                        <>
                          <div style={{ fontSize: 10, color: colors.pinkHot, fontWeight: 'bold', marginBottom: 4 }}>📖 JOURNAL</div>
                          <div style={{ fontSize: 13, fontFamily: 'serif', fontStyle: 'italic', whiteSpace: 'pre-wrap' }}>"{item.text}"</div>
                        </>
                      )}
                      {item.type === 'TASK' && (
                        <>
                          <div style={{ fontSize: 10, color: '#2E8B57', fontWeight: 'bold', marginBottom: 4 }}>✅ TASK COMPLETED</div>
                          <div style={{ fontSize: 12, fontWeight: 'bold' }}>{item.title}</div>
                          <div style={{ fontSize: 10, color: '#666' }}>{item.duration ? `${item.duration}m • ` : ''}+{item.reward} COINS</div>
                          {item.response && <div style={{ fontSize: 11, fontStyle: 'italic', marginTop: 4, padding: 6, background: '#f5f5f5', border: '1px solid #ddd' }}>"{item.response}"</div>}
                          {item.photoUrl && <img src={item.photoUrl} style={{ width: '100%', marginTop: 6, border: '2px inset white', objectFit: 'cover' }} />}
                        </>
                      )}
                      {item.type === 'SESSION' && (
                        <>
                          <div style={{ fontSize: 10, color: '#9370DB', fontWeight: 'bold', marginBottom: 4 }}>
                            ⏱ STUDY SESSION {item.subjectId && `- ${(myData.categories || []).find(c => c.id === item.subjectId)?.label || 'SUBJECT'}`}
                          </div>
                          <div style={{ fontSize: 12 }}>
                            Focused for {Math.floor(item.duration / 60)}m {item.duration % 60}s
                            {item.estimated ? ` (Est: ${Math.floor(item.estimated / 60)}m)` : ''}
                          </div>
                          <div style={{ fontSize: 10, color: '#666' }}>+{item.xpEarned} XP</div>
                        </>
                      )}
                    </div>
                  ))
                )}
              </div>

<form onSubmit={e => {
                e.preventDefault();
                if(!reflectionTxt.trim()) return;
                logToArchive('REFLECTION', { text: reflectionTxt.trim() }, selectedArchiveDate);
                setReflectionTxt('');
              }}>
                <textarea 
                  value={reflectionTxt} 
                  onChange={e=>setReflectionTxt(e.target.value)} 
                  placeholder="Add a reflection or journal entry for this day..."
                  style={{ width: '100%', height: 60, padding: 8, fontFamily: 'monospace', fontSize: 12, border: '2px inset white', boxSizing: 'border-box', marginBottom: 8, resize: 'none' }}
                />
                <button className="retro-btn" type="submit" style={{ width: '100%', justifyContent: 'center' }}>
                  💾 SAVE JOURNAL ENTRY
                </button>
              </form>
            </div>
          </Window>
        )}
      </div>

<div className="bb-taskbar">
        <div className="bb-start-btn" style={{ 
          boxShadow: tab === 0 ? 'inset 2px 2px 0 black' : '2px 2px 0 black', 
          background: tab === 0 ? colors.highlight : colors.retroGray 
        }} onClick={() => setTab(0)}>
          <span style={{ fontSize: 18 }}>🌸</span>
          <span>START</span>
        </div>
        <div style={{ width: 2, background: colors.shadow, margin: '0 4px' }} />
        {['QUESTS', 'SHOP', 'BUDDIES', 'PLANNER', 'ARCHIVE'].map((label, i) => (
          <button 
            key={label} 
            className="retro-btn" 
            style={{ 
              flex: 1, justifyContent: 'center', 
              minWidth: 70,
              whiteSpace: 'nowrap',
              backgroundColor: tab === i + 1 ? colors.white : colors.retroGray,
              border: tab === i + 1 ? '2px inset white' : '2px outset white'
            }}
            onClick={() => setTab(i + 1)}
          >
            {label}
          </button>
        ))}
        <div style={{ 
          marginLeft: 'auto', 
          background: '#000', 
          color: '#FFF', 
          padding: '2px 8px', 
          fontSize: 12, 
          fontFamily: 'monospace', 
          display: 'flex', 
          alignItems: 'center',
          border: '2px inset #808080',
          whiteSpace: 'nowrap'
        }}>
          {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
        </div>
      </div>

{showEvoAnim && newEvoData && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }} onClick={() => setShowEvoAnim(false)}>
          <div style={{ fontSize: 18, color: '#FFF', fontFamily: 'Arial Black', textTransform: 'uppercase', marginBottom: 10, letterSpacing: 2 }}>✨ EVOLUTION! ✨</div>
          <div style={{ fontSize: 140, animation: 'bbfloat 2s ease-in-out infinite' }}>{newEvoData.emoji}</div>
          <div style={{ fontSize: 28, color: colors.pinkHot, fontFamily: 'Impact', marginTop: 10, textShadow: '0 0 20px #FF1493' }}>{newEvoData.name}</div>
          <div style={{ fontSize: 14, color: '#FFF', marginTop: 6 }}>{newEvoData.desc}</div>
          <div style={{ fontSize: 12, color: '#aaa', marginTop: 16 }}>Tap to dismiss</div>
        </div>
      )}

{showConfetti && (
        <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 9999 }}>
          {[...Array(20)].map((_, i) => {
            const leftPos = Math.random() * 100;
            const dur = 2 + Math.random() * 2;
            const emoji = ['🎀', '🌸', '💖', '✨'][Math.floor(Math.random() * 4)];
            return (
              <div key={i} style={{ 
                position: 'absolute', 
                left: `${leftPos}%`, 
                top: '-50px', 
                fontSize: 40, 
                animation: `bbfall ${dur}s linear forwards` 
              }}>
                {emoji}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}</article></body></html>

BLOOMBUDDY

BLOOM
BUDDY