// --- convex/schema.ts --- /** Unified garden + check-in math (same rules as `convex/lib/unifiedGarden.ts`). Single shape: `garden: { plants: [...] }`. */ const GARDEN_XP_CHECKIN = 10; const GARDEN_XP_ADDITIONAL_POST = 3; const GARDEN_SEED_CHECKIN = 1; const GARDEN_XP_BONUS_3 = 15; const GARDEN_XP_BONUS_7 = 40; const GARDEN_XP_BONUS_30 = 150; const GARDEN_XP_HARVEST = 8; /** Local-only: vegetable gacha costs coins (not seeds). Convex bridge path unchanged. */ const GARDEN_GACHA_COIN_COST = 20; /** XP for checking off one wellness habit for the day (solo `rewardsByUser` path; does not touch gratitude `streakCount`). */ const WELLNESS_HABIT_XP = 3; const GARDEN_PLANT_TYPES = [ 'carrot', 'lettuce', 'potato', 'onion', 'cabbage', 'cucumber', 'radish', 'corn', 'spinach', 'beetroot', 'tomato', 'pumpkin', 'eggplant', 'zucchini', 'broccoli', 'cauliflower', 'bell pepper', 'chili pepper', 'sweet potato', 'peas', 'sunflower', 'purple cabbage', 'rainbow carrot', 'white pumpkin', 'golden beetroot', 'giant watermelon', 'blue corn', 'pink celery', 'black tomato', 'crystal radish', 'golden pumpkin', 'glowing sunflower', 'diamond carrot', 'moon melon', 'rainbow cauliflower', 'celestial tomato', 'aurora lettuce', 'starlight onion', 'cosmic corn', 'mythical eggplant' ] as const; type VegetableRarity = 'common' | 'uncommon' | 'rare' | 'legendary'; type VegetableGrowthSpeed = 'short' | 'medium' | 'long' | 'very long'; type VegetableDefinition = { name: string; rarityTier: VegetableRarity; growthTime: VegetableGrowthSpeed; hours: [number, number, number]; coinReward: number; unlockMethod: string; visualDescription: string; growthStages: [string, string, string, string]; palette: [string, string, string]; }; const LOCAL_CROP_META: Record<(typeof GARDEN_PLANT_TYPES)[number], VegetableDefinition> = { carrot: { name: 'Carrot', rarityTier: 'common', growthTime: 'short', hours: [3, 8, 14], coinReward: 4, unlockMethod: 'Starter crop (default unlocked)', visualDescription: 'Orange root partially in soil with short leafy green top, simple bright aesthetic.', growthStages: ['Seed buried with small soil bump', 'Tiny green sprout with 2-3 leaves', 'Root thickens and leaves widen', 'Bright carrot root visible with bushy top'], palette: ['#ffca8a', '#ff8f4f', '#67b95c'] }, lettuce: { name: 'Lettuce', rarityTier: 'common', growthTime: 'short', hours: [3, 9, 16], coinReward: 4, unlockMethod: 'Unlock at level 2', visualDescription: 'Leafy green bush cluster sitting low in soil with wide layered leaves.', growthStages: ['Seed hidden in moist soil', 'Low sprout ring appears', 'Leaf rosette expands outward', 'Full leafy lettuce cluster close to ground'], palette: ['#d5f0a3', '#99d96b', '#4f9f55'] }, potato: { name: 'Potato', rarityTier: 'common', growthTime: 'short', hours: [4, 10, 18], coinReward: 5, unlockMethod: 'Unlock at level 3', visualDescription: 'Mostly underground crop with small leafy sprout above soil.', growthStages: ['Buried seed with faint mound', 'Single thin sprout emerges', 'Leafy tuft forms while tuber grows below', 'Mature foliage with hidden potato body'], palette: ['#f1d5a2', '#b78b5d', '#6f4d2b'] }, onion: { name: 'Onion', rarityTier: 'common', growthTime: 'short', hours: [4, 11, 19], coinReward: 5, unlockMethod: 'Unlock at level 4', visualDescription: 'Small bulb exposed slightly above soil with thin green stalks.', growthStages: ['Tiny buried seed knot', 'Needle-like shoot appears', 'Bulb crown begins swelling', 'Visible onion bulb with upright thin stalks'], palette: ['#f8e2be', '#e0b36a', '#b27942'] }, cabbage: { name: 'Cabbage', rarityTier: 'common', growthTime: 'medium', hours: [5, 12, 20], coinReward: 6, unlockMethod: 'Unlock at level 5', visualDescription: 'Round dense green head seated directly in the dirt.', growthStages: ['Seed under compact soil', 'Small folded leaves appear', 'Round head begins layering', 'Dense cabbage head fully formed'], palette: ['#bfe2b5', '#6fbf73', '#3f8c50'] }, cucumber: { name: 'Cucumber', rarityTier: 'common', growthTime: 'medium', hours: [5, 12, 20], coinReward: 6, unlockMethod: 'Unlock at level 6', visualDescription: 'Low vine spread along soil with small hanging fruit.', growthStages: ['Seed under vine-ready patch', 'Short vine sprout unfolds', 'Runners extend across soil', 'Mature vine with visible cucumbers'], palette: ['#c7efad', '#6cbc53', '#2d7f3f'] }, radish: { name: 'Radish', rarityTier: 'common', growthTime: 'short', hours: [4, 9, 16], coinReward: 5, unlockMethod: 'Unlock at streak 3', visualDescription: 'Red bulb half-exposed with compact leafy top.', growthStages: ['Seed buried beneath loose dirt', 'Small green shoot pops up', 'Bulb starts peeking through soil', 'Bright red radish bulb with leaves'], palette: ['#ffc3d7', '#ff6d8e', '#67b95c'] }, corn: { name: 'Corn', rarityTier: 'common', growthTime: 'medium', hours: [5, 13, 22], coinReward: 7, unlockMethod: 'Unlock at level 7', visualDescription: 'Tall stalk with layered husk leaves and upright posture.', growthStages: ['Kernel planted in compact row', 'Slim shoot points upward', 'Stalk rises with broad leaves', 'Tall corn stalk with formed cob'], palette: ['#ffe58b', '#ffca47', '#82b93f'] }, spinach: { name: 'Spinach', rarityTier: 'common', growthTime: 'short', hours: [3, 8, 15], coinReward: 5, unlockMethod: 'Unlock at level 4', visualDescription: 'Dense low leafy patch close to soil surface.', growthStages: ['Seed dispersed in soft patch', 'Fine sprouts appear in cluster', 'Leaves thicken into mound', 'Full dense spinach patch'], palette: ['#b7e8a6', '#68b764', '#2f8750'] }, beetroot: { name: 'Beetroot', rarityTier: 'common', growthTime: 'short', hours: [4, 11, 18], coinReward: 6, unlockMethod: 'Unlock at level 6', visualDescription: 'Dark red bulb with leafy crown breaking the soil surface.', growthStages: ['Seed planted in dark soil', 'Small stem with tiny leaves', 'Red bulb begins surfacing', 'Deep red beetroot with leafy crown'], palette: ['#f5a0be', '#ba3f66', '#7f2f4b'] }, tomato: { name: 'Tomato', rarityTier: 'uncommon', growthTime: 'medium', hours: [6, 18, 30], coinReward: 10, unlockMethod: 'Unlock at level 8', visualDescription: 'Branching vine plant with hanging red fruits.', growthStages: ['Seed fixed under vine bed', 'Sprout with thin stem emerges', 'Vine branches and flowers', 'Tomato vine with hanging fruits'], palette: ['#ffd9a3', '#ff6f4e', '#3f8f4f'] }, pumpkin: { name: 'Pumpkin', rarityTier: 'uncommon', growthTime: 'long', hours: [8, 22, 36], coinReward: 14, unlockMethod: 'Unlock at streak 7', visualDescription: 'Large round fruit on broad vine spreading along ground.', growthStages: ['Seed buried in broad mound', 'Thick sprout unfurls', 'Ground vine spreads outward', 'Large pumpkin fruit settles on soil'], palette: ['#ffe0ad', '#ff9d4d', '#6f9f3f'] }, eggplant: { name: 'Eggplant', rarityTier: 'uncommon', growthTime: 'long', hours: [7, 20, 34], coinReward: 13, unlockMethod: 'Unlock at level 10', visualDescription: 'Upright plant with glossy purple hanging fruit.', growthStages: ['Seed set in deep soil', 'Thin stem with tiny leaves', 'Bushy upright plant forms', 'Glossy eggplants hang from branches'], palette: ['#e6d2ff', '#8d57c6', '#4a2f73'] }, zucchini: { name: 'Zucchini', rarityTier: 'uncommon', growthTime: 'medium', hours: [6, 17, 28], coinReward: 9, unlockMethod: 'Unlock at level 9', visualDescription: 'Bush plant producing long green fruits near soil level.', growthStages: ['Seed hidden in soft patch', 'Short leafy sprout appears', 'Bush expands with thick leaves', 'Long zucchini fruits visible on bush'], palette: ['#d4efaf', '#7fc95c', '#3b8c3c'] }, broccoli: { name: 'Broccoli', rarityTier: 'uncommon', growthTime: 'medium', hours: [6, 18, 30], coinReward: 10, unlockMethod: 'Unlock at level 11', visualDescription: 'Tree-like stem with clustered green florets.', growthStages: ['Seed planted in cool soil', 'Sprout with stout stem appears', 'Branching crown starts forming', 'Broccoli florets fully clustered'], palette: ['#bee69f', '#5bae5f', '#2f7b45'] }, cauliflower: { name: 'Cauliflower', rarityTier: 'uncommon', growthTime: 'long', hours: [7, 20, 32], coinReward: 11, unlockMethod: 'Unlock at level 12', visualDescription: 'White clustered head wrapped by green leaves.', growthStages: ['Seed planted in sheltered bed', 'Low sprout with broad leaves', 'Head begins compacting in center', 'White cauliflower head fully formed'], palette: ['#fff8de', '#dfd5ae', '#97aa7b'] }, 'bell pepper': { name: 'Bell Pepper', rarityTier: 'uncommon', growthTime: 'medium', hours: [6, 18, 30], coinReward: 10, unlockMethod: 'Unlock at level 13', visualDescription: 'Compact plant with colorful hanging bell-shaped fruits.', growthStages: ['Seed buried near stem base', 'Sprout with narrow leaves appears', 'Plant thickens and flowers', 'Bell peppers hang in mixed colors'], palette: ['#ffe9a6', '#ff5858', '#64a64c'] }, 'chili pepper': { name: 'Chili Pepper', rarityTier: 'uncommon', growthTime: 'medium', hours: [5, 16, 27], coinReward: 11, unlockMethod: 'Unlock at level 14', visualDescription: 'Thin plant bearing dangling red chili pods.', growthStages: ['Seed tucked into warm soil', 'Slender shoot emerges quickly', 'Stems branch into fine canopy', 'Red chili pods dangle from stems'], palette: ['#ffd1c5', '#ff3d3d', '#4f9f3f'] }, 'sweet potato': { name: 'Sweet Potato', rarityTier: 'uncommon', growthTime: 'long', hours: [7, 21, 34], coinReward: 12, unlockMethod: 'Unlock at level 15', visualDescription: 'Low creeping vine with underground root growth.', growthStages: ['Slip/seed bed is planted', 'Vine sprout appears on surface', 'Runners spread along ground', 'Mature vine with bulky root growth'], palette: ['#ffd6ba', '#d88952', '#8a4f2d'] }, peas: { name: 'Peas', rarityTier: 'uncommon', growthTime: 'medium', hours: [6, 17, 28], coinReward: 9, unlockMethod: 'Unlock at gratitudeCount 10', visualDescription: 'Thin climbing vine with clustered pea pods.', growthStages: ['Seed pea tucked in row', 'Twin shoots emerge', 'Vine climbs and tendrils form', 'Pods appear along vine'], palette: ['#cdf2b1', '#6fc354', '#3c8c45'] }, sunflower: { name: 'Sunflower', rarityTier: 'rare', growthTime: 'long', hours: [10, 24, 40], coinReward: 18, unlockMethod: 'Unlock at streak 14', visualDescription: 'Tall stem topped with a large yellow flower head.', growthStages: ['Seed planted in rich mound', 'Single sturdy sprout appears', 'Stem shoots up with leaves', 'Large sunflower head faces light'], palette: ['#fff3b3', '#ffd64d', '#9f7f2f'] }, 'purple cabbage': { name: 'Purple Cabbage', rarityTier: 'rare', growthTime: 'long', hours: [9, 23, 38], coinReward: 17, unlockMethod: 'Unlock at level 16', visualDescription: 'Deep purple layered cabbage head with dense curls.', growthStages: ['Seed hidden in dark bed', 'Purple-tinted leaves emerge', 'Layered globe starts compacting', 'Full deep-purple cabbage head'], palette: ['#e8d1ff', '#9f58c7', '#5a2f7f'] }, 'rainbow carrot': { name: 'Rainbow Carrot', rarityTier: 'rare', growthTime: 'long', hours: [9, 22, 36], coinReward: 18, unlockMethod: 'Unlock at level 18', visualDescription: 'Multicolor glowing carrot root with shimmering leafy top.', growthStages: ['Prismatic seed glints in soil', 'Color-shift sprout appears', 'Root takes striped rainbow tones', 'Glowing rainbow carrot is fully visible'], palette: ['#ffd3f3', '#7ed6ff', '#ffb35f'] }, 'white pumpkin': { name: 'White Pumpkin', rarityTier: 'rare', growthTime: 'long', hours: [11, 26, 42], coinReward: 20, unlockMethod: 'Unlock at totalPosts 20', visualDescription: 'Pale luminous pumpkin fruit on soft ground vine.', growthStages: ['Pale seed rests in mound', 'Cream sprout unfurls', 'Vine crawls with pale buds', 'White pumpkin glows softly on soil'], palette: ['#fff8eb', '#ddd5bf', '#c2b088'] }, 'golden beetroot': { name: 'Golden Beetroot', rarityTier: 'rare', growthTime: 'long', hours: [10, 24, 40], coinReward: 21, unlockMethod: 'Unlock at level 20', visualDescription: 'Metallic gold bulb with bright leafy crown.', growthStages: ['Gold-flecked seed buried', 'Leafy sprout with warm tint', 'Bulb emerges with metallic sheen', 'Golden beetroot fully exposed'], palette: ['#ffe08f', '#f3b13a', '#9c6f2f'] }, 'giant watermelon': { name: 'Giant Watermelon', rarityTier: 'rare', growthTime: 'long', hours: [12, 28, 46], coinReward: 22, unlockMethod: 'Unlock at level 22', visualDescription: 'Oversized green striped melon on sprawling vine.', growthStages: ['Large seed settled in bed', 'Thick sprout starts crawling', 'Vine extends with growing gourd', 'Giant striped watermelon matures'], palette: ['#c9f0b2', '#5ac86f', '#f15f7d'] }, 'blue corn': { name: 'Blue Corn', rarityTier: 'rare', growthTime: 'long', hours: [10, 24, 39], coinReward: 19, unlockMethod: 'Unlock at level 21', visualDescription: 'Tall blue-toned corn stalk with subtle glow.', growthStages: ['Blue kernel planted in row', 'Cool-toned shoot rises', 'Stalk thickens with blue leaves', 'Blue corn cob glows faintly'], palette: ['#d1ddff', '#5f7fcf', '#334b9f'] }, 'pink celery': { name: 'Pink Celery', rarityTier: 'rare', growthTime: 'long', hours: [9, 23, 37], coinReward: 18, unlockMethod: 'Unlock at gratitudeCount 18', visualDescription: 'Soft pink clustered celery stalks with delicate leaves.', growthStages: ['Seed cluster under damp soil', 'Fine shoots emerge in bunch', 'Stalks thicken and blush pink', 'Pink celery cluster fully formed'], palette: ['#ffe0ed', '#f19dc3', '#82b88f'] }, 'black tomato': { name: 'Black Tomato', rarityTier: 'rare', growthTime: 'long', hours: [10, 25, 41], coinReward: 21, unlockMethod: 'Unlock at level 24', visualDescription: 'Dark glossy tomatoes hanging from vine branches.', growthStages: ['Dark seed planted in rich bed', 'Sprout appears with deep tint', 'Vine branches with dark buds', 'Glossy black tomatoes mature'], palette: ['#d5cedf', '#4a3f63', '#2a2337'] }, 'crystal radish': { name: 'Crystal Radish', rarityTier: 'rare', growthTime: 'long', hours: [9, 22, 36], coinReward: 20, unlockMethod: 'Unlock at streak 21', visualDescription: 'Semi-transparent radish bulb with luminous highlights.', growthStages: ['Translucent seed glimmers in dirt', 'Glassy sprout appears', 'Crystal bulb starts surfacing', 'Radiant crystal radish fully formed'], palette: ['#e8f5ff', '#9dd9ff', '#62b0ff'] }, 'golden pumpkin': { name: 'Golden Pumpkin', rarityTier: 'legendary', growthTime: 'very long', hours: [14, 34, 56], coinReward: 35, unlockMethod: 'Unlock at level 30', visualDescription: 'Radiant pumpkin with golden aura and warm glow.', growthStages: ['Mythic seed shines in soil', 'Golden sprout rises slowly', 'Aura vine expands around fruit', 'Golden pumpkin radiates full aura'], palette: ['#fff0a3', '#ffd43a', '#b8831f'] }, 'glowing sunflower': { name: 'Glowing Sunflower', rarityTier: 'legendary', growthTime: 'very long', hours: [14, 34, 55], coinReward: 34, unlockMethod: 'Unlock at streak 30', visualDescription: 'Sunflower head emits soft light particles.', growthStages: ['Luminous seed settles in bed', 'Glowing sprout appears', 'Tall stem emits tiny motes', 'Bright sunflower head radiates light'], palette: ['#fff9c4', '#ffe56f', '#d3a427'] }, 'diamond carrot': { name: 'Diamond Carrot', rarityTier: 'legendary', growthTime: 'very long', hours: [13, 32, 52], coinReward: 36, unlockMethod: 'Unlock at level 32', visualDescription: 'Crystal-like reflective carrot with faceted shine.', growthStages: ['Crystal seed refracts in soil', 'Prismatic sprout emerges', 'Faceted root takes shape', 'Diamond carrot reflects bright highlights'], palette: ['#d8f4ff', '#8be0ff', '#4ab9d9'] }, 'moon melon': { name: 'Moon Melon', rarityTier: 'legendary', growthTime: 'very long', hours: [15, 36, 58], coinReward: 38, unlockMethod: 'Unlock at totalPosts 40', visualDescription: 'Pale glowing spherical fruit with moonlit shimmer.', growthStages: ['Moon-tinted seed buried', 'Silver sprout appears', 'Vine grows with pale orb', 'Moon melon glows with soft shimmer'], palette: ['#e9e6ff', '#b3a2ff', '#7e6bce'] }, 'rainbow cauliflower': { name: 'Rainbow Cauliflower', rarityTier: 'legendary', growthTime: 'very long', hours: [13, 33, 54], coinReward: 37, unlockMethod: 'Unlock at level 35', visualDescription: 'Multicolor glowing florets with rainbow highlights.', growthStages: ['Iridescent seed settles', 'Pastel sprout unfolds', 'Colorful clusters start forming', 'Rainbow florets fully luminous'], palette: ['#ffe7fa', '#c6f2ff', '#fef3b2'] }, 'celestial tomato': { name: 'Celestial Tomato', rarityTier: 'legendary', growthTime: 'very long', hours: [14, 34, 55], coinReward: 36, unlockMethod: 'Unlock at streak 45', visualDescription: 'Glowing vine tomatoes with slight floating effect.', growthStages: ['Star-seed rests in soil', 'Celestial sprout appears', 'Vine glows with orbiting fruit', 'Tomatoes shine with cosmic aura'], palette: ['#ffd8d8', '#ff7b8f', '#7c58c6'] }, 'aurora lettuce': { name: 'Aurora Lettuce', rarityTier: 'legendary', growthTime: 'very long', hours: [13, 33, 53], coinReward: 35, unlockMethod: 'Unlock at gratitudeCount 35', visualDescription: 'Leafy plant with shifting aurora-like color gradients.', growthStages: ['Aurora seed glints in patch', 'Color-washed sprout appears', 'Leaves ripple with shifting hues', 'Full aurora lettuce shimmers'], palette: ['#d8ffe8', '#7ff0ba', '#5ad5ff'] }, 'starlight onion': { name: 'Starlight Onion', rarityTier: 'legendary', growthTime: 'very long', hours: [14, 35, 56], coinReward: 36, unlockMethod: 'Unlock at level 34', visualDescription: 'Glowing orb-like onion with star-like spark particles.', growthStages: ['Star-speck seed planted', 'Fine glowing stalk emerges', 'Bulb orb forms with spark motes', 'Starlight onion shines fully'], palette: ['#fff3df', '#ffcf9f', '#c9a1ff'] }, 'cosmic corn': { name: 'Cosmic Corn', rarityTier: 'legendary', growthTime: 'very long', hours: [14, 35, 57], coinReward: 37, unlockMethod: 'Unlock at streak 60', visualDescription: 'Dark blue corn with tiny star-speckled surface.', growthStages: ['Cosmic kernel embedded in soil', 'Night-blue sprout rises', 'Stalk gains starry flecks', 'Cosmic corn cob sparkles like sky'], palette: ['#e3e8ff', '#7a8cff', '#ffc857'] }, 'mythical eggplant': { name: 'Mythical Eggplant', rarityTier: 'legendary', growthTime: 'very long', hours: [15, 36, 58], coinReward: 38, unlockMethod: 'Unlock at level 40', visualDescription: 'Deep purple glowing fruit with mystical aura.', growthStages: ['Mystic seed glows faintly', 'Arcane sprout appears', 'Aura gathers around fruit stem', 'Mythical eggplant radiates deep violet'], palette: ['#f2e2ff', '#9b67ff', '#4a2f8f'] } }; const LOCAL_UNLOCK_REQUIREMENTS: Record = { carrot: {}, lettuce: { level: 2 }, potato: { level: 3 }, onion: { level: 4 }, cabbage: { level: 5 }, cucumber: { level: 6 }, radish: { streak: 3 }, corn: { level: 7 }, spinach: { level: 4 }, beetroot: { level: 6 }, tomato: { level: 8 }, pumpkin: { streak: 7 }, eggplant: { level: 10 }, zucchini: { level: 9 }, broccoli: { level: 11 }, cauliflower: { level: 12 }, 'bell pepper': { level: 13 }, 'chili pepper': { level: 14 }, 'sweet potato': { level: 15 }, peas: { achievement: 'gratitudeCount', amount: 10 }, sunflower: { streak: 14 }, 'purple cabbage': { level: 16 }, 'rainbow carrot': { level: 18 }, 'white pumpkin': { achievement: 'totalPosts', amount: 20 }, 'golden beetroot': { level: 20 }, 'giant watermelon': { level: 22 }, 'blue corn': { level: 21 }, 'pink celery': { achievement: 'gratitudeCount', amount: 18 }, 'black tomato': { level: 24 }, 'crystal radish': { streak: 21 }, 'golden pumpkin': { level: 30 }, 'glowing sunflower': { streak: 30 }, 'diamond carrot': { level: 32 }, 'moon melon': { achievement: 'totalPosts', amount: 40 }, 'rainbow cauliflower': { level: 35 }, 'celestial tomato': { streak: 45 }, 'aurora lettuce': { achievement: 'gratitudeCount', amount: 35 }, 'starlight onion': { level: 34 }, 'cosmic corn': { streak: 60 }, 'mythical eggplant': { level: 40 } }; /** Canonical plant row (matches Convex `garden.plants` item shape). */ type GardenPlantRow = { id: string; type: (typeof GARDEN_PLANT_TYPES)[number]; plantedAt: number; growthStage: number; isReady: boolean; isStolen?: boolean; }; type PlantRarityLocal = 'common' | 'rare' | 'golden'; function fnv1a32Local(input: string) { let h = 0x811c9dc5; for (let i = 0; i < (input || []).length; i++) { h ^= input.charCodeAt(i); h = Math.imul(h, 0x01000193); } return h >>> 0; } function rarityFromPlantIdLocal(plantId: string): PlantRarityLocal { const x = fnv1a32Local(String(plantId)); const r = x % 100; if (r === 0) return 'golden'; if (r < 10) return 'rare'; return 'common'; } const GROWTH_HOUR_MS = 3600000; function ymdIdFromPartsLocal(y, m, d) { return y * 10000 + m * 100 + d; } function ymdIdFromKeyLocal(todayKey) { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(todayKey || '').trim()); if (!m) return null; return ymdIdFromPartsLocal(Number(m[1]), Number(m[2]), Number(m[3])); } function prevYmdIdLocal(id) { const y = Math.floor(id / 10000); const mo = Math.floor((id % 10000) / 100); const d = id % 100; const dt = new Date(y, mo - 1, d); dt.setDate(dt.getDate() - 1); return ymdIdFromPartsLocal(dt.getFullYear(), dt.getMonth() + 1, dt.getDate()); } function dateKeyMinusOneLocal(dateKey) { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(dateKey || '').trim()); if (!m) return String(dateKey || ''); const dt = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])); dt.setDate(dt.getDate() - 1); return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`; } /** Consecutive calendar days with a completion, counting back from today (or from yesterday if today not done). */ function wellnessHabitStreakLocal(completions, todayKey) { const set = new Set(Array.isArray(completions) ? (completions || []).filter((x) => typeof x === 'string') : []); let key = todayKey; if (!set.has(todayKey)) { key = dateKeyMinusOneLocal(todayKey); if (!set.has(key)) return 0; } let streak = 0; const seen = new Set(); while (set.has(key) && !seen.has(key)) { seen.add(key); streak++; key = dateKeyMinusOneLocal(key); } return streak; } type WellnessHabitRow = { id: string; title: string; goalDays: number; createdAt: number; completions: string[] }; function normalizeWellnessHabits(raw) { if (!Array.isArray(raw)) return []; const out = []; for (const row of raw) { if (!row || typeof row !== 'object') continue; const id = typeof row.id === 'string' && row.id ? row.id : `wh-${Math.random().toString(36).slice(2, 10)}`; const title = typeof row.title === 'string' ? row.title.trim().slice(0, 120) : ''; if (!title) continue; let goalDays = Math.max(1, Math.floor(Number(row.goalDays) || 7)); if (!Number.isFinite(goalDays)) goalDays = 7; if (goalDays > 365) goalDays = 365; const createdAt = Math.max(0, Math.floor(Number(row.createdAt) || 0)) || Date.now(); const completions = Array.isArray(row.completions) ? [...new Set((row.completions || []).filter((d) => typeof d === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(d)))].sort() : []; out.push({ id, title, goalDays, createdAt, completions }); } return out; } function streakBonusXpLocal(streakAfter) { const s = Math.max(0, Math.floor(Number(streakAfter) || 0)); if (s <= 0) return 0; let b = 0; if (s % 3 === 0) b += GARDEN_XP_BONUS_3; if (s % 7 === 0) b += GARDEN_XP_BONUS_7; if (s % 30 === 0) b += GARDEN_XP_BONUS_30; return b; } function levelFromXpLocal(xp) { const n = Math.max(0, Math.floor(Number(xp) || 0)); return 1 + Math.floor(n / 50); } function unlockVegetablesFromProgressLocal({ unlocked, xp, streakCount, gratitudeCount, totalPosts }) { const set = new Set(Array.isArray(unlocked) ? unlocked : ['carrot']); set.add('carrot'); const level = levelFromXpLocal(xp); for (const t of GARDEN_PLANT_TYPES) { const u = LOCAL_UNLOCK_REQUIREMENTS[t] || {}; const levelOk = u.level == null || level >= u.level; const streakOk = u.streak == null || streakCount >= u.streak; const achOk = u.achievement == null || ((u.achievement === 'gratitudeCount' ? gratitudeCount : totalPosts) >= (u.amount || 0)); if (levelOk && streakOk && achOk) set.add(t); } return Array.from(set); } function nextStreakLocal(todayYmdId, last, streakCount) { const prev = Math.max(0, Math.floor(Number(streakCount) || 0)); if (last === todayYmdId) return { streak: Math.max(1, prev), duplicate: true }; if (last == null) return { streak: 1, duplicate: false }; if (typeof last === 'string') { const id = ymdIdFromKeyLocal(last); if (id != null && id === todayYmdId) return { streak: Math.max(1, prev), duplicate: true }; if (id != null && id === prevYmdIdLocal(todayYmdId)) return { streak: prev + 1, duplicate: false }; return { streak: 1, duplicate: false }; } if (typeof last !== 'number' || !Number.isFinite(last)) return { streak: 1, duplicate: false }; if (last === prevYmdIdLocal(todayYmdId)) return { streak: prev + 1, duplicate: false }; return { streak: 1, duplicate: false }; } function computeGrowthLocal(plantedAt, nowMs, type: (typeof GARDEN_PLANT_TYPES)[number] = 'carrot') { const t0 = Number(plantedAt); const now = Number(nowMs); if (!Number.isFinite(t0) || !Number.isFinite(now)) return { growthStage: 0, isReady: false }; const elapsed = Math.max(0, now - t0); const cfg = LOCAL_CROP_META[type] || LOCAL_CROP_META.carrot; if (elapsed >= cfg.hours[2] * GROWTH_HOUR_MS) return { growthStage: 3, isReady: true }; if (elapsed >= cfg.hours[1] * GROWTH_HOUR_MS) return { growthStage: 2, isReady: false }; if (elapsed >= cfg.hours[0] * GROWTH_HOUR_MS) return { growthStage: 1, isReady: false }; return { growthStage: 0, isReady: false }; } function isProtectedLocal(todayYmdId, lastYmdId) { if (todayYmdId == null) return true; if (lastYmdId == null) return false; if (lastYmdId === todayYmdId) return true; return lastYmdId === prevYmdIdLocal(todayYmdId); } function nextGrowthEtaMsLocal(plantedAt, nowMs, type: (typeof GARDEN_PLANT_TYPES)[number] = 'carrot') { const t0 = Number(plantedAt); const now = Number(nowMs); if (!Number.isFinite(t0) || !Number.isFinite(now)) return null; const elapsed = Math.max(0, now - t0); const cfg = LOCAL_CROP_META[type] || LOCAL_CROP_META.carrot; const steps = [cfg.hours[0] * GROWTH_HOUR_MS, cfg.hours[1] * GROWTH_HOUR_MS, cfg.hours[2] * GROWTH_HOUR_MS]; for (let i = 0; i < (steps || []).length; i++) { if (elapsed < steps[i]) return (t0 + steps[i]) - now; } return 0; } function growthProgressInCurrentStageLocal(plantedAt, nowMs, type: (typeof GARDEN_PLANT_TYPES)[number] = 'carrot') { const t0 = Number(plantedAt); const now = Number(nowMs); if (!Number.isFinite(t0) || !Number.isFinite(now)) return 0; const elapsed = Math.max(0, now - t0); const cfg = LOCAL_CROP_META[type] || LOCAL_CROP_META.carrot; const h0 = cfg.hours[0] * GROWTH_HOUR_MS; const h1 = cfg.hours[1] * GROWTH_HOUR_MS; const h2 = cfg.hours[2] * GROWTH_HOUR_MS; if (elapsed < h0) return Math.min(1, elapsed / Math.max(1, h0)); if (elapsed < h1) return Math.min(1, (elapsed - h0) / Math.max(1, h1 - h0)); if (elapsed < h2) return Math.min(1, (elapsed - h1) / Math.max(1, h2 - h1)); return 1; } function growthVisualStageLocal(growthStage: number) { const g = Math.max(0, Math.floor(Number(growthStage) || 0)); if (g <= 0) return 1; // seed if (g === 1) return 2; // sprout return 3; // full } function localHarvestXpByType(type: (typeof GARDEN_PLANT_TYPES)[number]) { const tier = (LOCAL_CROP_META[type] || LOCAL_CROP_META.carrot).rarityTier; if (tier === 'legendary') return 24; if (tier === 'rare') return 16; if (tier === 'uncommon') return 10; return 6; } function fmtEtaMs(ms) { const n = Math.max(0, Math.floor(Number(ms) || 0)); const totalSeconds = Math.floor(n / 1000); const days = Math.floor(totalSeconds / 86400); const hours = Math.floor((totalSeconds % 86400) / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; if (totalSeconds <= 0) return 'READY TO HARVEST'; const units: string[] = []; if (days > 0) units.push(`${days} DAYS`); if (hours > 0) units.push(`${hours} HOURS`); if (minutes > 0) units.push(`${minutes} MINUTES`); if (seconds > 0) units.push(`${seconds} SECONDS`); if ((units || []).length === 0) units.push('0 SECONDS'); return (units || []).join(' : '); } function fmtGrowthTimer(ms: number) { const n = Math.max(0, Math.floor(Number(ms) || 0)); if (n <= 0) return 'READY'; const totalSec = Math.floor(n / 1000); const days = Math.floor(totalSec / 86400); let rem = totalSec % 86400; const hours = Math.floor(rem / 3600); rem %= 3600; const minutes = Math.floor(rem / 60); const seconds = rem % 60; const parts: { v: number; u: string }[] = []; if (days > 0) parts.push({ v: days, u: days === 1 ? 'DAY' : 'DAYS' }); if (hours > 0) parts.push({ v: hours, u: hours === 1 ? 'HOUR' : 'HOURS' }); if (minutes > 0) parts.push({ v: minutes, u: minutes === 1 ? 'MINUTE' : 'MINUTES' }); if (seconds > 0) parts.push({ v: seconds, u: seconds === 1 ? 'SECOND' : 'SECONDS' }); if ((parts || []).length === 0) return 'READY'; const a = parts[0]; const b = parts[1]; if (!b) return `${a.v} ${a.u}`; return `${a.v} ${a.u} : ${b.v} ${b.u}`; } function fmtEta(ms) { const n = Math.max(0, Math.floor(Number(ms) || 0)); if (!Number.isFinite(n)) return ''; const s = Math.floor(n / 1000); const m = Math.floor(s / 60); const h = Math.floor(m / 60); if (h > 0) return `${h}h ${m % 60}m`; if (m > 0) return `${m}m`; return `${s}s`; } function fmtRelativeTimeLocal(ts) { const n = Number(ts); if (!Number.isFinite(n) || n <= 0) return ''; const diff = Math.max(0, Date.now() - n); const mins = Math.floor(diff / 60000); if (mins < 1) return 'just now'; if (mins < 60) return `${mins}m ago`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h ago`; const days = Math.floor(hrs / 24); return `${days}d ago`; } function kudoSortTsLocal(k) { const created = Number(k?.createdAt); if (Number.isFinite(created) && created > 0) return created; const ts = Number(k?._timestamp); if (Number.isFinite(ts) && ts > 0) return ts; const id = String(k?.id || ''); const idNum = Number((/^kudo-(\d+)-/.exec(id) || [])[1]); if (Number.isFinite(idNum) && idNum > 0) return idNum; if (typeof k?.dateKey === 'string') { const d = new Date(`${k.dateKey}T00:00:00`).getTime(); if (Number.isFinite(d) && d > 0) return d; } return 0; } function normalizeGardenPlants(raw: unknown, nowMs: number): GardenPlantRow[] { const now = Number(nowMs) || Date.now(); if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return []; const arr = Array.isArray((raw as { plants?: unknown }).plants) ? (raw as { plants: unknown[] }).plants : []; const out: GardenPlantRow[] = []; for (let i = 0; i < (arr || []).length; i++) { const p = arr[i] as { id?: unknown; type?: unknown; plantedAt?: unknown; isStolen?: unknown; }; if (!p || typeof p !== 'object') continue; const id = typeof p.id === 'string' ? p.id : ''; const typeRaw = p.type; if (typeof typeRaw !== 'string' || (GARDEN_PLANT_TYPES || []).indexOf(typeRaw as GardenPlantRow['type']) < 0) { continue; } const type = typeRaw as GardenPlantRow['type']; const plantedAt = Number(p.plantedAt); if (!Number.isFinite(plantedAt)) continue; const g = computeGrowthLocal(plantedAt, now, type); const row: GardenPlantRow = { id, type, plantedAt, growthStage: g.growthStage, isReady: g.isReady }; if ((p as { isStolen?: boolean }).isStolen === true) row.isStolen = true; out.push(row); } return out; } function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation, gardenBridge }) { // ─── REFS & SAFE DATA ACCESS ───────────────────────────────────────────── const sharedDataRef = useRef(sharedData); const dataRef = useRef(data); useEffect(() => { if (sharedData !== null) sharedDataRef.current = sharedData; }, [sharedData]); useEffect(() => { if (data !== null) dataRef.current = data; }, [data]); const getLatestAppData = useCallback(() => (isMultiplayer ? (sharedDataRef.current || {}) : (dataRef.current || {})), [isMultiplayer]); const writePatch = useCallback((patch: Record) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { const base = (dataRef.current || {}) as Record; setData({ ...base, ...patch } as never); } }, [isMultiplayer, patchSharedData, setData]); // ─── DESIGN TOKENS (cozy campus / village vibe) ────────────────────────── const C = { bg: '#F7EFD6', paper: 'rgba(255, 251, 240, 0.84)', ink: '#4E3824', inkSoft: '#6D513B', muted: '#8A7059', yellow: '#FFE46D', yellowDeep: '#E4B53D', glow: 'rgba(249, 194, 78, 0.34)', red: '#E67E5C', border: 'rgba(97,73,47,0.72)', borderSoft: 'rgba(97,73,47,0.22)', sage: '#98BB78', sky: '#DEF2F5', blush: '#F7E0CB' }; const SERIF = 'ui-rounded, "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", "Verdana", sans-serif'; const SANS = 'ui-rounded, "Avenir Next Rounded", "Avenir Next", "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'; const MONO = 'ui-rounded, "Avenir Next Rounded", "Avenir Next", "Trebuchet MS", sans-serif'; const GRATITUDE_PROMPT_ID = 'daily-gratitude-reflection'; const GRATITUDE_PROMPT_TEXT = 'What is something you’re grateful for today?'; const GRATITUDE_WHY_PROMPT_TEXT = 'Why are you grateful for it?'; const DAILY_CHECKIN_XP = GARDEN_XP_CHECKIN; const DAILY_CHECKIN_SEEDS = GARDEN_SEED_CHECKIN; const todaysPrompt = { id: GRATITUDE_PROMPT_ID, placeholder: 'A feeling, memory, relationship, tiny win—it all counts.' }; // ─── HELPERS ───────────────────────────────────────────────────────────── const getTodayKey = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }; const todayKey = getTodayKey(); const yearStr = String(new Date().getFullYear()); const hashString = (str) => { let h = 0; for (let i = 0; i < (str || '').length; i++) { h = Math.imul(31, h) + str.charCodeAt(i) | 0; } return Math.abs(h); }; const todaysPromptText = GRATITUDE_PROMPT_TEXT; // Normalize avatar from runtime variants. `user` carries `avatarUrl`, // `members` sometimes carry `profileImageUrl`. Accept either, store both. const getAvatar = (obj) => obj?.avatarUrl || obj?.profileImageUrl || null; // Whimsical anon names so anonymous senders feel like a wholesome character, // not a faceless ghost. Stable per post id. const ANON_ADJECTIVES = [ 'Cozy', 'Sunny', 'Dreamy', 'Gentle', 'Happy', 'Calm', 'Lovely', 'Sweet', 'Golden', 'Soft', 'Cheerful', 'Peaceful', 'Glowing', 'Sparkly', 'Kind', 'Hopeful', 'Radiant', 'Tiny', 'Wholesome', 'Bright', 'Warm', 'Joyful', 'Serene', 'Playful', 'Magical', 'Tender', 'Friendly', 'Snuggly', 'Dainty', 'Lively', 'Blissful', 'Charming', 'Shiny', 'Comforting', 'Smiley' ]; const ANON_ANIMALS = [ 'Capybara', 'Bunny', 'Otter', 'Panda', 'Koala', 'Duck', 'Penguin', 'Fox', 'Bear', 'Hamster', 'Deer', 'Cat', 'Dog', 'Frog', 'Seal', 'Alpaca', 'Hedgehog', 'Red Panda', 'Quokka', 'Dolphin', 'Owl', 'Bee', 'Raccoon', 'Elephant', 'Chick', 'Lamb', 'Squirrel', 'Turtle', 'Whale', 'Puffin' ]; const ANON_ANIMAL_EMOJI = { Capybara: '🦫', Bunny: '🐰', Otter: '🦦', Panda: '🐼', Koala: '🐨', Duck: '🦆', Penguin: '🐧', Fox: '🦊', Bear: '🐻', Hamster: '🐹', Deer: '🦌', Cat: '🐱', Dog: '🐶', Frog: '🐸', Seal: '🦭', Alpaca: '🦙', Hedgehog: '🦔', 'Red Panda': '🦝', Quokka: '🦘', Dolphin: '🐬', Owl: '🦉', Bee: '🐝', Raccoon: '🦝', Elephant: '🐘', Chick: '🐥', Lamb: '🐑', Squirrel: '🐿️', Turtle: '🐢', Whale: '🐳', Puffin: '🐧' }; const isAnonymousPost = (kudo) => { const flag = kudo?.isAnonymous ?? kudo?._user?.isAnonymous ?? kudo?._user?.anonymous; return flag === true; }; const anonPersonaFromSeed = (seedBase) => { const seed = hashString(String(seedBase || 'anon')); const adj = ANON_ADJECTIVES[seed % (ANON_ADJECTIVES || []).length] || 'Cozy'; const animal = ANON_ANIMALS[(seed >> 3) % (ANON_ANIMALS || []).length] || 'Bunny'; const emoji = ANON_ANIMAL_EMOJI[animal] || '🌟'; const display = `${adj} ${animal}`; return { display, emoji, withEmoji: `${emoji} ${display}` }; }; const anonDisplayNameForPost = (kudo) => { const stored = kudo?.anonymousDisplayName || kudo?._user?.anonymousDisplayName || kudo?._user?.anonName || null; if (typeof stored === 'string' && stored.trim()) return stored.trim(); const seed = kudo?.id || `${kudo?.dateKey || ''}:${kudo?._timestamp || ''}:${kudo?._user?.id || ''}`; return anonPersonaFromSeed(seed).withEmoji; }; const anonEmojiForPost = (kudo) => { const stored = kudo?.anonymousEmoji || kudo?._user?.anonymousEmoji || null; if (typeof stored === 'string' && stored.trim()) return stored.trim(); const seed = kudo?.id || `${kudo?.dateKey || ''}:${kudo?._timestamp || ''}:${kudo?._user?.id || ''}`; return anonPersonaFromSeed(seed).emoji; }; // ─── STATE ─────────────────────────────────────────────────────────────── const [pickedMember, setPickedMember] = useState(null); const [soloRecipient, setSoloRecipient] = useState(''); const [note, setNote] = useState(''); const [shuffleSeed, setShuffleSeed] = useState(0); const [isPosting, setIsPosting] = useState(false); const [animatingUnlock, setAnimatingUnlock] = useState(false); const [likeHeartAnimNonce, setLikeHeartAnimNonce] = useState({}); const [activeTab, setActiveTab] = useState('wall'); // 'wall' | 'inbox' | 'garden' | 'journal' | 'wellness' const [wellnessSuccessDraft, setWellnessSuccessDraft] = useState(''); const [wellnessSuccesses, setWellnessSuccesses] = useState<{ id: string; dateKey: string; text: string }[]>([]); const [wellnessNewHabitTitle, setWellnessNewHabitTitle] = useState(''); const [wellnessNewHabitGoalDays, setWellnessNewHabitGoalDays] = useState('14'); const [wellnessHabitShareBusy, setWellnessHabitShareBusy] = useState(null); const [wellnessRoutineDone, setWellnessRoutineDone] = useState>({}); const [wellnessSummaryByDate, setWellnessSummaryByDate] = useState>({}); const [meditationPresetSec, setMeditationPresetSec] = useState(300); const [meditationRemaining, setMeditationRemaining] = useState(300); const [meditationRunning, setMeditationRunning] = useState(false); const [gardenErr, setGardenErr] = useState(''); const [gardenBusy, setGardenBusy] = useState(false); const [gardenSpark, setGardenSpark] = useState(null); const [selectedSoilIdx, setSelectedSoilIdx] = useState(null); const [plantingSoilIdx, setPlantingSoilIdx] = useState(null); const [sproutSoilIdx, setSproutSoilIdx] = useState(null); const [inspectedPlantId, setInspectedPlantId] = useState(null); const [gardenNowMs, setGardenNowMs] = useState(() => Date.now()); const [inspectOverlay, setInspectOverlay] = useState(null); const [postType, setPostType] = useState<'personal' | 'appreciation'>('personal'); const [xpToast, setXpToast] = useState(null); const [journalMonthCursor, setJournalMonthCursor] = useState(() => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), 1); }); const [journalSelectedDateKey, setJournalSelectedDateKey] = useState(null); const [postAnon, setPostAnon] = useState(!user?.id); // default anon for logged-out const [anonPreviewIdentity, setAnonPreviewIdentity] = useState(null); const [photoUrl, setPhotoUrl] = useState(null); const [isUploadingPhoto, setIsUploadingPhoto] = useState(false); const [photoUploadError, setPhotoUploadError] = useState(''); const [checkInStep, setCheckInStep] = useState(1); const [ciWhat, setCiWhat] = useState(''); const [ciWhy, setCiWhy] = useState(''); const [ciPhotoUrl, setCiPhotoUrl] = useState(null); const [ciUploadingPhoto, setCiUploadingPhoto] = useState(false); const [ciPhotoError, setCiPhotoError] = useState(''); const [checkInSubmitting, setCheckInSubmitting] = useState(false); const [checkInCompleteLocal, setCheckInCompleteLocal] = useState(false); const fileInputRef = useRef(null); const checkInFileRef = useRef(null); const anonIdentityNonceRef = useRef(0); const appData = getLatestAppData(); const allKudos = Array.isArray(appData?.kudos) ? appData.kudos : []; const reactorId = user?.id || data?.guestId || 'anon'; // Generate a stable guest ID (used for solo attribution + anon senders) useEffect(() => { if (!user?.id && !data?.guestId) { setData({ ...(dataRef.current || {}), guestId: `guest-${Date.now()}-${Math.floor(Math.random() * 1000)}` }); } }, [user?.id, data?.guestId, setData]); // Default the anon toggle whenever auth state flips useEffect(() => { if (!user?.id) setPostAnon(true); }, [user?.id]); useEffect(() => { if (activeTab !== 'garden') return; const t = setInterval(() => setGardenNowMs(Date.now()), 50); return () => clearInterval(t); }, [activeTab]); const generateAnonPreviewIdentity = () => { const seed = `${reactorId}:${todayKey}:${anonIdentityNonceRef.current}`; return anonPersonaFromSeed(seed); }; useEffect(() => { anonIdentityNonceRef.current = 0; setAnonPreviewIdentity(generateAnonPreviewIdentity()); }, [reactorId, todayKey]); useEffect(() => { if (activeTab !== 'garden') { setInspectedPlantId(null); setInspectOverlay(null); } }, [activeTab]); useEffect(() => { if (!meditationRunning) return; const id = window.setInterval(() => { setMeditationRemaining((r) => (r <= 0 ? 0 : r - 1)); }, 1000); return () => window.clearInterval(id); }, [meditationRunning]); useEffect(() => { if (meditationRemaining <= 0 && meditationRunning) { setMeditationRunning(false); } }, [meditationRemaining, meditationRunning]); const anonHandle = useMemo(() => anonPersonaFromSeed(reactorId + ':' + todayKey).withEmoji, [reactorId, todayKey]); // ─── DEMO CONTENT (render-only fallback, never persisted) ───────────────── const DEMO_KUDOS = useMemo(() => ([ { id: 'demo-1', promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, note: 'Explained pointers in COMP1511 like an absolute legend. Whole tute clapped.', isDemo: true, dateKey: todayKey, likes: ['demo-a', 'demo-b', 'demo-c'], _toMember: { id: 'demo-x', displayName: 'A COMP1511 tutor', handle: null }, _user: { id: 'demo-a', name: 'Alex C.', handle: 'alexc', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alex' }, _timestamp: Date.now() - 1800000 }, { id: 'demo-2', promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, note: 'Sat with me on the Basser steps when I was overwhelmed. No words, just snacks. 💛', isDemo: true, dateKey: todayKey, likes: ['demo-b', 'demo-c', 'demo-a'], _toMember: { id: 'demo-y', displayName: 'A friend in MATH1131', handle: null }, _user: { id: 'anon', name: null, handle: null, avatarUrl: null, anonymous: true, anonName: 'Library Friend' }, _timestamp: Date.now() - 5400000 }, { id: 'demo-3', promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, note: 'Made the 8am lecture survivable with a perfectly timed coffee meme.', isDemo: true, dateKey: todayKey, likes: ['demo-a', 'demo-b', 'demo-c'], _toMember: { id: 'demo-z', displayName: 'A face in INFS1602', handle: null }, _user: { id: 'demo-c', name: 'Sam P.', handle: 'samp', avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sam' }, _timestamp: Date.now() - 9000000 } ]), [todayKey, todaysPrompt.id, todaysPromptText]); // ─── DERIVED ───────────────────────────────────────────────────────────── const realKudos = useMemo( () => (allKudos || []).filter(k => !k?.isDemo).sort((a, b) => kudoSortTsLocal(b) - kudoSortTsLocal(a)), [allKudos] ); const feed = useMemo( () => ((realKudos || []).length > 0 ? realKudos : DEMO_KUDOS).slice().sort((a, b) => kudoSortTsLocal(b) - kudoSortTsLocal(a)), [realKudos, DEMO_KUDOS] ); const hasPostedToday = useMemo(() => { if (animatingUnlock) return true; if (checkInCompleteLocal) return true; return (realKudos || []).some(k => k.dateKey === todayKey && k._user?.id === reactorId); }, [realKudos, todayKey, reactorId, animatingUnlock, checkInCompleteLocal]); const showDailyCheckIn = useMemo(() => !hasPostedToday, [hasPostedToday]); useEffect(() => { setCheckInCompleteLocal(false); }, [todayKey]); useEffect(() => { if (showDailyCheckIn) { setCheckInStep(1); setCiWhat(''); setCiWhy(''); setCiPhotoUrl(null); setCiPhotoError(''); } }, [showDailyCheckIn, todayKey]); const streak = useMemo(() => { const myDays = new Set((realKudos || []).filter(k => k._user?.id === reactorId).map(k => k.dateKey)); let count = 0; const cursor = new Date(); if (!myDays.has(todayKey)) cursor.setDate(cursor.getDate() - 1); while (true) { const key = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`; if (myDays.has(key)) { count += 1; cursor.setDate(cursor.getDate() - 1); } else break; } return count; }, [realKudos, reactorId, todayKey]); const myInbox = useMemo(() => { if (!user?.id) return []; return (realKudos || []) .filter(k => k._toMember?.id === user.id) .sort((a, b) => (b._timestamp || 0) - (a._timestamp || 0)); }, [realKudos, user?.id]); const todayInboxCount = useMemo(() => (myInbox || []).filter(k => k.dateKey === todayKey).length, [myInbox, todayKey]); const sentTodayCount = useMemo(() => (realKudos || []).filter(k => k._user?.id === reactorId && k.dateKey === todayKey).length, [realKudos, reactorId, todayKey]); const totalKudosToday = useMemo(() => (realKudos || []).filter(k => k.dateKey === todayKey).length, [realKudos, todayKey]); const myJournalEntries = useMemo(() => { return (realKudos || []) .filter((k) => k?._user?.id === reactorId && typeof k?.dateKey === 'string') .sort((a, b) => (b?._timestamp || 0) - (a?._timestamp || 0)); }, [realKudos, reactorId]); const journalByDate = useMemo(() => { const out = {}; for (const k of myJournalEntries) { const key = String(k.dateKey || ''); if (!out[key]) out[key] = []; out[key].push(k); } return out; }, [myJournalEntries]); const journalDateKeys = useMemo(() => Object.keys(journalByDate || {}), [journalByDate]); const journalTotalEntries = (myJournalEntries || []).length; const journalTotalDays = (journalDateKeys || []).length; const journalMoodInsight = useMemo(() => { if ((myJournalEntries || []).length === 0) return 'Start your first gratitude entry to unlock mood insights.'; const POS = ['grateful', 'thankful', 'love', 'kind', 'happy', 'peace', 'support', 'calm', 'joy', 'good']; const NEG = ['stress', 'stressed', 'anxious', 'tired', 'overwhelmed', 'sad', 'hard', 'difficult']; let pos = 0; let neg = 0; for (const e of myJournalEntries) { const text = String(e?.note || '').toLowerCase(); for (const w of POS) if ((text || []).includes(w)) pos += 1; for (const w of NEG) if ((text || []).includes(w)) neg += 1; } if (pos >= neg * 2) return 'Mood trend: mostly warm and uplifting lately.'; if (neg > pos) return 'Mood trend: heavier week — still showing up counts.'; return 'Mood trend: balanced reflections with steady consistency.'; }, [myJournalEntries]); const journalConsistencyInsight = useMemo(() => { if ((journalDateKeys || []).length === 0) return 'Consistency: no streak yet.'; const sorted = [...journalDateKeys].sort(); const first = sorted[0]; const firstDate = new Date(`${first}T00:00:00`); const daysSpan = Math.max(1, Math.floor((Date.now() - firstDate.getTime()) / 86400000) + 1); const pct = Math.round(((journalDateKeys || []).length / daysSpan) * 100); return `Consistency: ${pct}% of days logged since your first entry.`; }, [journalDateKeys]); const candidateMembers = useMemo(() => { if (!isMultiplayer || !Array.isArray(members)) return []; return (members || []).filter(m => m && m.id && m.id !== user?.id); }, [isMultiplayer, members, user?.id]); const pickerMembers = useMemo(() => { if ((candidateMembers || []).length === 0) return []; const pool = [...candidateMembers]; const seed = hashString(todayKey + ':' + shuffleSeed + ':' + reactorId); for (let i = (pool || []).length - 1; i > 0; i--) { const j = Math.abs(seed + i * 2654435761) % (i + 1); [pool[i], pool[j]] = [pool[j], pool[i]]; } return (pool || []).slice(0, Math.min(4, (pool || []).length)); }, [candidateMembers, shuffleSeed, todayKey, reactorId]); const showFreeText = true; const canSubmit = (() => { if (isPosting || isUploadingPhoto) return false; if (showFreeText) return (soloRecipient || '').trim().length > 0 && (note || '').trim().length > 0; return !!pickedMember; })(); const resolveUploadedImageUrl = async (result) => { if (!result) return null; if (typeof result === 'string') { if (/^https?:\/\//i.test(result)) return result; if (typeof getImageUrl === 'function') return await getImageUrl(result); return null; } if (typeof result === 'object') { const directUrl = result.url || result.imageUrl || result.downloadUrl || null; if (directUrl) return directUrl; const pathOrKey = result.path || result.filePath || result.key || result.imageKey || null; if (pathOrKey && typeof getImageUrl === 'function') return await getImageUrl(pathOrKey); } return null; }; const fileToDataUrl = (file) => new Promise((resolve, reject) => { try { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); } catch (err) { reject(err); } }); const uploadSelectedImage = async (file) => { if (!file || typeof uploadImage !== 'function') return null; const attempts = [() => uploadImage(file), () => uploadImage({ file }), async () => uploadImage(await fileToDataUrl(file))]; for (const attempt of attempts) { try { const uploaded = await attempt(); const resolved = await resolveUploadedImageUrl(uploaded); if (resolved) return resolved; } catch (err) { /* try next */ } } return null; }; const handlePhotoFileChange = async (e, isCheckIn) => { const file = e?.target?.files?.[0]; if (!file) return; const setUploading = isCheckIn ? setCiUploadingPhoto : setIsUploadingPhoto; const setErr = isCheckIn ? setCiPhotoError : setPhotoUploadError; const setUrl = isCheckIn ? setCiPhotoUrl : setPhotoUrl; setUploading(true); setErr(''); try { let resolved = await uploadSelectedImage(file); if (!resolved && typeof pickAndUploadPhoto === 'function') { const fallback = await pickAndUploadPhoto(); resolved = await resolveUploadedImageUrl(fallback); } if (resolved) setUrl(resolved); else setErr('Could not upload—try another photo.'); } catch (err) { console.error(err); setErr('Upload failed. Try again.'); } finally { setUploading(false); if (e?.target) e.target.value = ''; } }; const handleAddPhotoTap = (isCheckIn) => { if (isCheckIn) { setCiPhotoError(''); if (typeof pickAndUploadPhoto === 'function') { setCiUploadingPhoto(true); pickAndUploadPhoto() .then((r) => resolveUploadedImageUrl(r)) .then((url) => { if (url) setCiPhotoUrl(url); else setCiPhotoError('Could not upload—try choosing from files.'); }) .catch(() => setCiPhotoError('Upload failed.')) .finally(() => setCiUploadingPhoto(false)); return; } checkInFileRef.current?.click(); return; } setPhotoUploadError(''); if (typeof pickAndUploadPhoto === 'function') { setIsUploadingPhoto(true); pickAndUploadPhoto() .then((r) => resolveUploadedImageUrl(r)) .then((url) => { if (url) setPhotoUrl(url); else setPhotoUploadError('Could not upload.'); }) .catch(() => setPhotoUploadError('Upload failed.')) .finally(() => setIsUploadingPhoto(false)); return; } fileInputRef.current?.click(); }; const persistGratitudeKudo = async (newKudo) => { if (isMultiplayer && typeof pushToSharedArray === 'function') { await pushToSharedArray('kudos', newKudo); } else { const latest = getLatestAppData(); const currentKudos = Array.isArray(latest.kudos) ? (latest.kudos || []).filter(k => !k?.isDemo) : []; const next = [newKudo, ...currentKudos].sort((a, b) => kudoSortTsLocal(b) - kudoSortTsLocal(a)); writePatch({ kudos: next }); } }; const readLocalGardenProfile = () => { if (gardenBridge?.profile) return gardenBridge.profile; const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? latest.rewardsByUser : {}; const cur = rewardsByUser[reactorId] || {}; const now = Date.now(); const lastRaw = cur.lastCheckInDate != null ? cur.lastCheckInDate : (cur.lastRewardDateKey ? String(cur.lastRewardDateKey) : null); let lastId: number | null = null; if (typeof lastRaw === 'number' && Number.isFinite(lastRaw)) lastId = lastRaw; else if (typeof lastRaw === 'string') lastId = ymdIdFromKeyLocal(lastRaw.trim()); const plants = normalizeGardenPlants(cur.garden, now); return { xp: Math.max(0, Math.floor(Number(cur.xp) || 0)), gratitudeCount: Math.max(0, Math.floor(Number(cur.gratitudeCount) || 0)), totalPosts: Math.max(0, Math.floor(Number(cur.totalPosts) || 0)), streakCount: Math.max(0, Math.floor(Number(cur.streakCount) || 0)), seeds: Math.max(0, Math.floor(Number(cur.seeds) || 0)), coins: Math.max(0, Math.floor(Number(cur.coins) || 0)), unlockedVegetables: (() => { const arr = Array.isArray(cur.unlockedVegetables) ? (cur.unlockedVegetables || []).filter((x) => typeof x === 'string' && (GARDEN_PLANT_TYPES || []).includes(x as GardenPlantRow['type'])) : []; return (arr || []).length > 0 ? arr : ['carrot']; })(), lastCheckInDate: lastId, gardenAlerts: Array.isArray(cur.gardenAlerts) ? cur.gardenAlerts : [], cropCatalog: LOCAL_CROP_META, garden: { plants } }; }; const unifiedDailyCheckIn = async () => { setGardenErr(''); if (typeof gardenBridge?.dailyCheckIn === 'function') { try { await gardenBridge.dailyCheckIn(); } catch (e) { console.error(e); setGardenErr('Could not sync check-in to garden.'); } return; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const todayId = ymdIdFromKeyLocal(todayKey); if (todayId == null) return; const last = cur.lastCheckInDate != null ? cur.lastCheckInDate : (cur.lastRewardDateKey ? ymdIdFromKeyLocal(String(cur.lastRewardDateKey)) : null); const { streak, duplicate } = nextStreakLocal(todayId, last, cur.streakCount); if (duplicate) return; const xpGain = GARDEN_XP_CHECKIN + streakBonusXpLocal(streak); const nextXp = Math.max(0, Math.floor(Number(cur.xp) || 0)) + xpGain; const nextSeeds = Math.max(0, Math.floor(Number(cur.seeds) || 0)) + GARDEN_SEED_CHECKIN; const nextUnlocked = unlockVegetablesFromProgressLocal({ unlocked: Array.isArray(cur.unlockedVegetables) ? cur.unlockedVegetables : ['carrot'], xp: nextXp, streakCount: streak, gratitudeCount: Math.max(0, Math.floor(Number(cur.gratitudeCount) || 0)), totalPosts: Math.max(0, Math.floor(Number(cur.totalPosts) || 0)), }); const plants = normalizeGardenPlants(cur.garden, Date.now()); rewardsByUser[reactorId] = { ...cur, xp: nextXp, streakCount: streak, seeds: nextSeeds, unlockedVegetables: nextUnlocked, lastCheckInDate: todayId, garden: { plants } }; writePatch({ rewardsByUser }); } catch (e) { console.error(e); } }; const applyGratitudeProgression = async () => { setGardenErr(''); if (typeof gardenBridge?.recordGratitudePost === 'function') { try { const res = await gardenBridge.recordGratitudePost(); const gained = Number(res?.xpAwarded); return { xpAwarded: Number.isFinite(gained) ? gained : 0, firstPostToday: !!res?.firstPostToday }; } catch (e) { console.error(e); setGardenErr('Could not sync gratitude progression.'); } return { xpAwarded: 0, firstPostToday: false }; } if (typeof gardenBridge?.dailyCheckIn === 'function') { // Backward-compatible bridge: only awards the first-post daily reward. try { if (!hasPostedToday) { const res = await gardenBridge.dailyCheckIn(); const gained = Number(res?.xpAwarded); return { xpAwarded: Number.isFinite(gained) ? gained : GARDEN_XP_CHECKIN, firstPostToday: true }; } return { xpAwarded: GARDEN_XP_ADDITIONAL_POST, firstPostToday: false }; } catch (e) { console.error(e); setGardenErr('Could not sync gratitude progression.'); } return { xpAwarded: 0, firstPostToday: false }; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const todayId = ymdIdFromKeyLocal(todayKey); if (todayId == null) return; const alreadyToday = Number(cur.lastCheckInDate ?? -1) === todayId; const prevXp = Math.max(0, Math.floor(Number(cur.xp) || 0)); const prevStreak = Math.max(0, Math.floor(Number(cur.streakCount) || 0)); const prevSeeds = Math.max(0, Math.floor(Number(cur.seeds) || 0)); const prevTotalPosts = Math.max(0, Math.floor(Number(cur.totalPosts) || 0)); const prevGratitudeCount = Math.max(0, Math.floor(Number(cur.gratitudeCount) || 0)); if (!alreadyToday) { const last = cur.lastCheckInDate != null ? cur.lastCheckInDate : (cur.lastRewardDateKey ? ymdIdFromKeyLocal(String(cur.lastRewardDateKey)) : null); const { streak } = nextStreakLocal(todayId, last, cur.streakCount); const xpGain = GARDEN_XP_CHECKIN + streakBonusXpLocal(streak); const plants = normalizeGardenPlants(cur.garden, Date.now()); const nextUnlocked = unlockVegetablesFromProgressLocal({ unlocked: Array.isArray(cur.unlockedVegetables) ? cur.unlockedVegetables : ['carrot'], xp: prevXp + xpGain, streakCount: streak, gratitudeCount: prevGratitudeCount + 1, totalPosts: prevTotalPosts + 1, }); rewardsByUser[reactorId] = { ...cur, xp: prevXp + xpGain, gratitudeCount: prevGratitudeCount + 1, totalPosts: prevTotalPosts + 1, streakCount: streak, seeds: prevSeeds + GARDEN_SEED_CHECKIN, unlockedVegetables: nextUnlocked, lastCheckInDate: todayId, garden: { plants } }; writePatch({ rewardsByUser }); return { xpAwarded: xpGain, firstPostToday: true }; } else { const nextUnlocked = unlockVegetablesFromProgressLocal({ unlocked: Array.isArray(cur.unlockedVegetables) ? cur.unlockedVegetables : ['carrot'], xp: prevXp + GARDEN_XP_ADDITIONAL_POST, streakCount: prevStreak, gratitudeCount: prevGratitudeCount, totalPosts: prevTotalPosts + 1, }); rewardsByUser[reactorId] = { ...cur, xp: prevXp + GARDEN_XP_ADDITIONAL_POST, totalPosts: prevTotalPosts + 1, unlockedVegetables: nextUnlocked, }; writePatch({ rewardsByUser }); return { xpAwarded: GARDEN_XP_ADDITIONAL_POST, firstPostToday: false }; } } catch (e) { console.error(e); setGardenErr('Could not update gratitude progression.'); } return { xpAwarded: 0, firstPostToday: false }; }; const refreshGardenIfPossible = async () => { setGardenErr(''); if (typeof gardenBridge?.refreshGrowth === 'function') { try { setGardenBusy(true); await gardenBridge.refreshGrowth(); } catch (e) { console.error(e); setGardenErr('Could not refresh garden.'); } finally { setGardenBusy(false); } return; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const now = Date.now(); const plants = normalizeGardenPlants(cur.garden, now); rewardsByUser[reactorId] = { ...cur, garden: { plants } }; writePatch({ rewardsByUser }); } catch (e) { console.error(e); } }; const plantInGarden = async (type: GardenPlantRow['type']) => { setGardenErr(''); if ((GARDEN_PLANT_TYPES || []).indexOf(type) < 0) return; if (typeof gardenBridge?.plant === 'function') { try { setGardenBusy(true); await gardenBridge.plant(type); } catch (e) { console.error(e); setGardenErr(e?.message || 'Could not plant.'); } finally { setGardenBusy(false); } return; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const unlocked = Array.isArray(cur.unlockedVegetables) ? cur.unlockedVegetables : ['carrot']; if (!(unlocked || []).includes(type)) { setGardenErr('Vegetable not unlocked yet.'); return; } const seeds = Math.max(0, Math.floor(Number(cur.seeds) || 0)); if (seeds < 1) { setGardenErr('Not enough seeds.'); return; } const now = Date.now(); const plants = normalizeGardenPlants(cur.garden, now); const id = `${now}-${Math.random().toString(36).slice(2, 9)}`; const g = computeGrowthLocal(now, now, type); plants.push({ id, type, plantedAt: now, growthStage: g.growthStage, isReady: g.isReady }); rewardsByUser[reactorId] = { ...cur, seeds: seeds - 1, garden: { plants } }; writePatch({ rewardsByUser }); } catch (e) { console.error(e); setGardenErr('Could not plant.'); } }; const harvestInGarden = async (plantId: string) => { setGardenErr(''); if (typeof gardenBridge?.harvest === 'function') { try { setGardenBusy(true); await gardenBridge.harvest(plantId); } catch (e) { console.error(e); setGardenErr(e?.message || 'Could not harvest.'); } finally { setGardenBusy(false); } return; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const now = Date.now(); const plants = normalizeGardenPlants(cur.garden, now); const idx = (plants || []).findIndex((p) => p.id === plantId); if (idx < 0) return; if (!plants[idx].isReady) { setGardenErr('Not ready yet.'); return; } const harvested = plants[idx]; const cfg = LOCAL_CROP_META[harvested.type] || LOCAL_CROP_META.carrot; const nextPlants = (plants || []).filter((p) => p.id !== plantId); const nextXp = Math.max(0, Math.floor(Number(cur.xp) || 0)) + localHarvestXpByType(harvested.type); const nextCoins = Math.max(0, Math.floor(Number(cur.coins) || 0)) + Math.max(1, Math.floor(Number(cfg.coinReward) || 0)); rewardsByUser[reactorId] = { ...cur, xp: nextXp, coins: nextCoins, garden: { plants: nextPlants } }; writePatch({ rewardsByUser }); } catch (e) { console.error(e); setGardenErr('Could not harvest.'); } }; const pullGardenGacha = async () => { setGardenErr(''); if (typeof gardenBridge?.gachaPull === 'function') { try { setGardenBusy(true); const res = await gardenBridge.gachaPull(); if (res?.awarded) setGardenErr(`Unlocked ${res.awarded}!`); } catch (e) { console.error(e); setGardenErr(e?.message || 'Could not pull gacha.'); } finally { setGardenBusy(false); } return; } try { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...latest.rewardsByUser } : {}; const cur = { ...(rewardsByUser[reactorId] || {}) }; const coins = Math.max(0, Math.floor(Number(cur.coins) || 0)); if (coins < GARDEN_GACHA_COIN_COST) { setGardenErr(`Need ${GARDEN_GACHA_COIN_COST} coins for a gacha pull (harvest crops to earn coins).`); return; } const unlocked = Array.isArray(cur.unlockedVegetables) ? cur.unlockedVegetables : ['carrot']; const progressed = unlockVegetablesFromProgressLocal({ unlocked, xp: Math.max(0, Math.floor(Number(cur.xp) || 0)), streakCount: Math.max(0, Math.floor(Number(cur.streakCount) || 0)), gratitudeCount: Math.max(0, Math.floor(Number(cur.gratitudeCount) || 0)), totalPosts: Math.max(0, Math.floor(Number(cur.totalPosts) || 0)), }); const locked = (GARDEN_PLANT_TYPES || []).filter((t) => !(progressed || []).includes(t)); const awarded = (locked || []).length > 0 ? locked[Math.floor(Math.random() * (locked || []).length)] : null; rewardsByUser[reactorId] = { ...cur, coins: coins - GARDEN_GACHA_COIN_COST, unlockedVegetables: awarded ? [...progressed, awarded] : progressed, }; writePatch({ rewardsByUser }); if (awarded) setGardenErr(`Unlocked ${awarded}!`); } catch (e) { console.error(e); setGardenErr('Could not pull gacha.'); } }; const plantFromSoilTile = async (tileIdx: number, type: GardenPlantRow['type']) => { if (gardenBusy) return; setPlantingSoilIdx(tileIdx); setSproutSoilIdx(null); try { await plantInGarden(type); setSproutSoilIdx(tileIdx); setSelectedSoilIdx(null); setTimeout(() => setSproutSoilIdx((prev) => (prev === tileIdx ? null : prev)), 1400); } finally { setPlantingSoilIdx((prev) => (prev === tileIdx ? null : prev)); } }; // ─── ACTIONS ───────────────────────────────────────────────────────────── const playChime = (type = 'chime') => { try { const w = window as Window & { webkitAudioContext?: typeof AudioContext }; const AC = window.AudioContext || w.webkitAudioContext; if (!AC) return; const ctx = new AC(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); if (type === 'chime') { osc.type = 'sine'; osc.frequency.setValueAtTime(523.25, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.1); osc.frequency.exponentialRampToValueAtTime(1046.5, ctx.currentTime + 0.3); gain.gain.setValueAtTime(0.15, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5); osc.start(); osc.stop(ctx.currentTime + 0.5); } else if (type === 'pop') { osc.type = 'triangle'; osc.frequency.setValueAtTime(600, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(1200, ctx.currentTime + 0.1); gain.gain.setValueAtTime(0.2, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1); osc.start(); osc.stop(ctx.currentTime + 0.1); } } catch (e) {} }; const playSoilHaptic = () => { try { if (typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') navigator.vibrate(12); } catch {} }; const readWellnessHabitsStore = useCallback((): WellnessHabitRow[] => { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? (latest.rewardsByUser as Record) : {}; const cur = (rewardsByUser[reactorId] as Record | undefined) || {}; return normalizeWellnessHabits(cur.wellnessHabits); }, [getLatestAppData, reactorId]); const saveWellnessHabitsStore = useCallback( (habits: WellnessHabitRow[]) => { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...(latest.rewardsByUser as Record) } : {}; const cur = { ...((rewardsByUser[reactorId] as Record | undefined) || {}) }; rewardsByUser[reactorId] = { ...cur, wellnessHabits: habits }; writePatch({ rewardsByUser }); }, [getLatestAppData, reactorId, writePatch] ); const applyWellnessHabitXpDelta = useCallback( (delta: number) => { const latest = getLatestAppData(); const rewardsByUser = latest?.rewardsByUser && typeof latest.rewardsByUser === 'object' ? { ...(latest.rewardsByUser as Record) } : {}; const cur = { ...((rewardsByUser[reactorId] as Record | undefined) || {}) }; const prevXp = Math.max(0, Math.floor(Number(cur.xp) || 0)); const nextXp = Math.max(0, prevXp + delta); const nextUnlocked = unlockVegetablesFromProgressLocal({ unlocked: Array.isArray(cur.unlockedVegetables) ? (cur.unlockedVegetables as string[]) : ['carrot'], xp: nextXp, streakCount: Math.max(0, Math.floor(Number(cur.streakCount) || 0)), gratitudeCount: Math.max(0, Math.floor(Number(cur.gratitudeCount) || 0)), totalPosts: Math.max(0, Math.floor(Number(cur.totalPosts) || 0)), }); rewardsByUser[reactorId] = { ...cur, xp: nextXp, unlockedVegetables: nextUnlocked }; writePatch({ rewardsByUser }); }, [getLatestAppData, reactorId, writePatch] ); const toggleWellnessHabit = useCallback( (habitId: string) => { const habits = readWellnessHabitsStore(); const idx = (habits || []).findIndex((h) => h.id === habitId); if (idx < 0) return; const h = habits[idx]; const set = new Set(h.completions || []); if (set.has(todayKey)) { set.delete(todayKey); applyWellnessHabitXpDelta(-WELLNESS_HABIT_XP); } else { set.add(todayKey); applyWellnessHabitXpDelta(WELLNESS_HABIT_XP); const toast = { value: WELLNESS_HABIT_XP, key: `wh-xp-${Date.now()}` }; setXpToast(toast); window.setTimeout(() => { setXpToast((prev) => (prev?.key === toast.key ? null : prev)); }, 1500); } const next = [...habits]; next[idx] = { ...h, completions: [...set].sort() }; saveWellnessHabitsStore(next); playChime('pop'); }, [readWellnessHabitsStore, saveWellnessHabitsStore, todayKey, applyWellnessHabitXpDelta] ); const addWellnessHabit = useCallback(() => { const title = wellnessNewHabitTitle.trim(); if (!title) return; let g = Math.max(1, Math.floor(Number(wellnessNewHabitGoalDays) || 14)); if (!Number.isFinite(g)) g = 14; if (g > 365) g = 365; const habits = readWellnessHabitsStore(); habits.push({ id: `wh-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, title, goalDays: g, createdAt: Date.now(), completions: [], }); saveWellnessHabitsStore(habits); setWellnessNewHabitTitle(''); setWellnessNewHabitGoalDays(String(g)); playChime('pop'); }, [wellnessNewHabitTitle, wellnessNewHabitGoalDays, readWellnessHabitsStore, saveWellnessHabitsStore]); const removeWellnessHabit = useCallback( (habitId: string) => { const habits = readWellnessHabitsStore(); const h = (habits || []).find((x) => x.id === habitId); if (!h) return; const hadToday = new Set(h.completions || []).has(todayKey); if (hadToday) applyWellnessHabitXpDelta(-WELLNESS_HABIT_XP); saveWellnessHabitsStore((habits || []).filter((x) => x.id !== habitId)); playChime('pop'); }, [readWellnessHabitsStore, saveWellnessHabitsStore, todayKey, applyWellnessHabitXpDelta] ); const shareWellnessHabitToFeed = useCallback( async (habit: WellnessHabitRow) => { if (wellnessHabitShareBusy || isPosting) return; if (!(soloRecipient || '').trim()) return; const doneToday = new Set(habit.completions || []).has(todayKey); if (!doneToday) return; setWellnessHabitShareBusy(habit.id); try { const streak = wellnessHabitStreakLocal(habit.completions, todayKey); const postId = `kudo-${Date.now()}-${Math.floor(Math.random() * 1000)}`; const recipient = { id: null, displayName: (soloRecipient || '').trim(), handle: null, avatarUrl: null }; const anonPersona = anonPreviewIdentity || anonPersonaFromSeed(`${reactorId}:${todayKey}:${anonIdentityNonceRef.current}`); const sender = postAnon || !user?.id ? { id: reactorId, name: null, handle: null, avatarUrl: null, profileImageUrl: null, anonymous: true, isAnonymous: true, anonName: anonPersona.withEmoji, anonymousDisplayName: anonPersona.withEmoji, anonymousEmoji: anonPersona.emoji, } : { id: user.id, name: user.name || null, handle: user.handle || null, avatarUrl: getAvatar(user), profileImageUrl: user.profileImageUrl || null, anonymous: false, isAnonymous: false, }; const note = `Wellness habit done · ${habit.title} · ${streak}-day streak (goal ${habit.goalDays} days) 🌿`; const newKudo = { id: postId, promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, postType: 'personal' as const, note, photoUrl: null, dateKey: todayKey, createdAt: Date.now(), isAnonymous: !!(postAnon || !user?.id), anonymousDisplayName: postAnon || !user?.id ? anonPersona.withEmoji : null, anonymousEmoji: postAnon || !user?.id ? anonPersona.emoji : null, likes: [], wellnessHabitShare: true, _toMember: recipient, _user: sender, _timestamp: Date.now(), }; await persistGratitudeKudo(newKudo); const prog = await applyGratitudeProgression(); if ((prog?.xpAwarded || 0) > 0) { const toast = { value: prog.xpAwarded, key: `${Date.now()}-${Math.random()}` }; setXpToast(toast); window.setTimeout(() => { setXpToast((prev) => (prev?.key === toast.key ? null : prev)); }, 1500); } playChime('chime'); if (postAnon || !user?.id) { anonIdentityNonceRef.current += 1; setAnonPreviewIdentity(generateAnonPreviewIdentity()); } } catch (e) { console.error(e); } finally { setWellnessHabitShareBusy(null); } }, [ wellnessHabitShareBusy, isPosting, soloRecipient, todayKey, reactorId, anonPreviewIdentity, postAnon, user, persistGratitudeKudo, applyGratitudeProgression, generateAnonPreviewIdentity, ] ); const handlePost = async () => { if (!canSubmit) return; setIsPosting(true); try { const postId = `kudo-${Date.now()}-${Math.floor(Math.random() * 1000)}`; const recipient = { id: null, displayName: (soloRecipient || '').trim(), handle: null, avatarUrl: null }; const anonPersona = anonPreviewIdentity || anonPersonaFromSeed(`${reactorId}:${todayKey}:${anonIdentityNonceRef.current}`); const sender = postAnon || !user?.id ? { id: reactorId, name: null, handle: null, avatarUrl: null, profileImageUrl: null, anonymous: true, isAnonymous: true, anonName: anonPersona.withEmoji, anonymousDisplayName: anonPersona.withEmoji, anonymousEmoji: anonPersona.emoji } : { id: user.id, name: user.name || null, handle: user.handle || null, avatarUrl: getAvatar(user), profileImageUrl: user.profileImageUrl || null, anonymous: false, isAnonymous: false }; const newKudo = { id: postId, promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, postType, note: (note || '').trim() || null, photoUrl: photoUrl || null, dateKey: todayKey, createdAt: Date.now(), isAnonymous: !!(postAnon || !user?.id), anonymousDisplayName: (postAnon || !user?.id) ? anonPersona.withEmoji : null, anonymousEmoji: (postAnon || !user?.id) ? anonPersona.emoji : null, likes: [], _toMember: recipient, _user: sender, _timestamp: Date.now() }; await persistGratitudeKudo(newKudo); const prog = await applyGratitudeProgression(); if ((prog?.xpAwarded || 0) > 0) { const toast = { value: prog.xpAwarded, key: `${Date.now()}-${Math.random()}` }; setXpToast(toast); setTimeout(() => { setXpToast((prev) => (prev?.key === toast.key ? null : prev)); }, 1500); } setAnimatingUnlock(true); playChime('chime'); setTimeout(() => { setAnimatingUnlock(false); setPickedMember(null); setSoloRecipient(''); setNote(''); setPhotoUrl(null); setPhotoUploadError(''); }, 2200); if (postAnon || !user?.id) { anonIdentityNonceRef.current += 1; setAnonPreviewIdentity(generateAnonPreviewIdentity()); } } catch (err) { console.error(err); } finally { setIsPosting(false); } }; const handleDailyCheckInFinish = async () => { const what = (ciWhat || '').trim(); if (!what || checkInSubmitting) return; setCheckInSubmitting(true); try { const postId = `kudo-${Date.now()}-${Math.floor(Math.random() * 1000)}`; const recipient = { id: null, displayName: what, handle: null, avatarUrl: null }; const anonPersona = anonPreviewIdentity || anonPersonaFromSeed(`${reactorId}:${todayKey}:${anonIdentityNonceRef.current}`); const sender = postAnon || !user?.id ? { id: reactorId, name: null, handle: null, avatarUrl: null, profileImageUrl: null, anonymous: true, isAnonymous: true, anonName: anonPersona.withEmoji, anonymousDisplayName: anonPersona.withEmoji, anonymousEmoji: anonPersona.emoji } : { id: user.id, name: user.name || null, handle: user.handle || null, avatarUrl: getAvatar(user), profileImageUrl: user.profileImageUrl || null, anonymous: false, isAnonymous: false }; const newKudo = { id: postId, promptId: GRATITUDE_PROMPT_ID, promptText: todaysPromptText, postType: 'personal', note: (ciWhy || '').trim() || null, photoUrl: ciPhotoUrl || null, dateKey: todayKey, createdAt: Date.now(), isAnonymous: !!(postAnon || !user?.id), anonymousDisplayName: (postAnon || !user?.id) ? anonPersona.withEmoji : null, anonymousEmoji: (postAnon || !user?.id) ? anonPersona.emoji : null, likes: [], _toMember: recipient, _user: sender, _timestamp: Date.now() }; await persistGratitudeKudo(newKudo); const prog = await applyGratitudeProgression(); if ((prog?.xpAwarded || 0) > 0) { const toast = { value: prog.xpAwarded, key: `${Date.now()}-${Math.random()}` }; setXpToast(toast); setTimeout(() => { setXpToast((prev) => (prev?.key === toast.key ? null : prev)); }, 1500); } setCheckInCompleteLocal(true); playChime('chime'); setAnimatingUnlock(true); setTimeout(() => { setAnimatingUnlock(false); }, 2600); setCiWhat(''); setCiWhy(''); setCiPhotoUrl(null); setCheckInStep(1); setCiPhotoError(''); if (postAnon || !user?.id) { anonIdentityNonceRef.current += 1; setAnonPreviewIdentity(generateAnonPreviewIdentity()); } } catch (err) { console.error(err); setCiPhotoError('Could not save. Try again.'); } finally { setCheckInSubmitting(false); } }; const getLikeUserIds = (kudo) => { const direct = Array.isArray(kudo.likes) ? kudo.likes : []; if ((direct || []).length > 0) return direct; const seen = new Set(); if (kudo.emojiReactions && typeof kudo.emojiReactions === 'object') { Object.values(kudo.emojiReactions || {}).forEach((arr) => { (Array.isArray(arr) ? arr : []).forEach((id) => seen.add(id)); }); return [...seen]; } return []; }; const handleToggleLike = (kudoId) => { const latest = getLatestAppData(); const currentKudos = Array.isArray(latest.kudos) ? (latest.kudos || []).filter(k => !k?.isDemo) : []; if (!(currentKudos || []).some(k => k.id === kudoId)) return; playChime('pop'); setLikeHeartAnimNonce(prev => ({ ...prev, [kudoId]: (prev[kudoId] ?? 0) + 1 })); const updatedKudos = (currentKudos || []).map(k => { if (k.id !== kudoId) return k; const ids = [...new Set(getLikeUserIds(k))]; const idx = (ids || []).indexOf(reactorId); if (idx >= 0) (ids || []).splice(idx, 1); else ids.push(reactorId); const { emojiReactions: _omit, ...rest } = k; return { ...rest, likes: ids }; }); writePatch({ kudos: updatedKudos }); }; // ─── RENDER HELPERS ────────────────────────────────────────────────────── const formatTimeAgo = (ts) => { if (!ts) return 'just now'; const diff = Date.now() - ts; const mins = Math.floor(diff / 60000); if (mins < 1) return 'just now'; if (mins < 60) return mins + 'm ago'; const hrs = Math.floor(mins / 60); if (hrs < 24) return hrs + 'h ago'; return Math.floor(hrs / 24) + 'd ago'; }; const initialsOf = (name) => { const parts = ((name || 'A').trim().split(/\s+/) || []); if ((parts || []).length === 0) return 'A'; if ((parts || []).length === 1) return parts[0][0].toUpperCase(); return (parts[0][0] + parts[(parts || []).length - 1][0]).toUpperCase(); }; // ─── STYLES ────────────────────────────────────────────────────────────── const styles = { container: { minHeight: '100dvh', background: ` radial-gradient(42% 26% at 16% 2%, rgba(255, 224, 118, 0.58) 0%, rgba(255, 224, 118, 0) 72%), radial-gradient(46% 26% at 85% 4%, rgba(211, 242, 235, 0.9) 0%, rgba(211, 242, 235, 0) 74%), radial-gradient(70% 40% at 50% 102%, rgba(176, 214, 147, 0.32) 0%, rgba(176, 214, 147, 0) 72%), linear-gradient(180deg, ${C.sky} 0%, #f8fbff 18%, #fff8e8 44%, ${C.bg} 100%) `, color: C.ink, fontFamily: SANS, display: 'flex', flexDirection: 'column', paddingTop: 'max(env(safe-area-inset-top, 16px), 16px)', paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 20px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 20px)', maxWidth: 1180, margin: '0 auto', width: '100%', boxSizing: 'border-box', position: 'relative', overflowX: 'hidden' }, metaStrip: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: MONO, fontSize: 10, letterSpacing: 0.9, color: C.muted, textTransform: 'uppercase', padding: '8px 0 6px', position: 'relative', zIndex: 2 }, title: { fontFamily: SERIF, fontStyle: 'normal', fontWeight: 700, fontSize: 30, lineHeight: 1.06, letterSpacing: '-0.03em', margin: 0, color: C.ink }, highlight: { backgroundImage: `linear-gradient(180deg, transparent 52%, rgba(255,228,109,0.2) 52%, ${C.yellow} 70%, rgba(255,240,181,0.95) 92%, transparent 92%)`, padding: '0 4px', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }, headerRow: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, paddingTop: 8, paddingBottom: 16, borderBottom: `1px solid rgba(97,73,47,0.12)`, marginBottom: 14, position: 'relative', zIndex: 2 }, iconBtn: { position: 'relative', background: 'rgba(255,255,255,0.7)', border: `1px solid rgba(97,73,47,0.12)`, borderRadius: 18, width: 40, height: 40, cursor: 'pointer', padding: 0, lineHeight: 1, fontSize: 18, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: C.ink, fontFamily: SANS, boxShadow: `0 12px 26px rgba(160, 123, 71, 0.14), inset 0 1px 0 rgba(255,255,255,0.82)`, transition: 'transform 0.15s ease, box-shadow 0.2s ease' }, badgeDot: { position: 'absolute', top: -6, right: -6, minWidth: 18, height: 18, padding: '0 4px', borderRadius: 999, background: C.red, color: '#fff', fontSize: 10, fontWeight: 800, fontFamily: MONO, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${C.ink}` }, digit: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 22, height: 28, padding: '0 6px', border: `1px solid rgba(97,73,47,0.14)`, fontFamily: MONO, fontSize: 14, fontWeight: 700, background: 'rgba(255,255,255,0.76)', marginLeft: -1, borderRadius: 10, boxShadow: '0 8px 18px rgba(130,95,55,0.08)' }, tinyLabel: { fontFamily: MONO, fontSize: 10, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: C.muted }, promptCard: { background: ` linear-gradient(155deg, rgba(255,255,255,0.8), rgba(255,248,227,0.62)) `, padding: '20px 18px 18px', border: `1px solid rgba(255,255,255,0.85)`, marginBottom: 18, position: 'relative', borderRadius: 28, backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', boxShadow: `0 20px 46px rgba(96, 73, 38, 0.12), 0 0 42px rgba(253, 181, 21, 0.15)` }, cornerLabel: { position: 'absolute', top: -12, left: 14, background: 'rgba(255,250,238,0.94)', padding: '5px 10px', fontFamily: SANS, fontSize: 10, letterSpacing: 0.7, color: C.ink, textTransform: 'uppercase', borderRadius: 999, border: `1px solid rgba(97,73,47,0.12)`, boxShadow: '0 8px 18px rgba(139,104,62,0.12)' }, pickerGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16 }, pickerCard: (active) => ({ display: 'flex', alignItems: 'center', gap: 10, padding: 10, cursor: 'pointer', background: active ? 'linear-gradient(135deg, rgba(255,238,160,0.96), rgba(255,248,214,0.94))' : 'rgba(255,255,255,0.72)', border: active ? `1px solid rgba(228,181,61,0.35)` : `1px solid rgba(97,73,47,0.12)`, color: C.ink, transition: 'transform 0.1s ease, background 0.15s ease', transform: active ? 'translateY(-1px)' : 'translate(0,0)', boxShadow: active ? `0 12px 26px rgba(249,194,78,0.28)` : '0 10px 18px rgba(87,64,31,0.06)', textAlign: 'left', width: '100%', boxSizing: 'border-box', borderRadius: 18, fontFamily: SERIF }), pickerAvatar: { width: 36, height: 36, borderRadius: 14, objectFit: 'cover', flexShrink: 0, background: '#fff', border: `1px solid rgba(97,73,47,0.14)` }, pickerName: { fontSize: 14, fontWeight: 700, margin: 0, lineHeight: 1.1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: SERIF }, pickerHandle: { fontFamily: MONO, fontSize: 10, letterSpacing: 0.8, opacity: 0.75, margin: 0, lineHeight: 1.2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, shuffleBtn: { width: '100%', marginTop: 10, background: 'rgba(255,255,255,0.72)', border: `1px solid rgba(97,73,47,0.12)`, color: C.ink, borderRadius: 18, padding: '11px', fontSize: 12, fontFamily: MONO, letterSpacing: 0.8, textTransform: 'uppercase', cursor: 'pointer', boxShadow: '0 10px 18px rgba(87,64,31,0.06)' }, soloInput: { width: '100%', background: 'rgba(255,255,255,0.88)', border: `1px solid rgba(97,73,47,0.12)`, borderRadius: 20, padding: '14px 14px', fontSize: 16, fontFamily: SERIF, marginTop: 16, boxSizing: 'border-box', color: C.ink, outline: 'none', boxShadow: 'inset 0 2px 10px rgba(250, 222, 143, 0.18)' }, noteInput: { width: '100%', background: 'rgba(255,255,255,0.88)', border: `1px solid rgba(97,73,47,0.12)`, borderRadius: 20, padding: '12px 14px', fontSize: 15, minHeight: 64, resize: 'vertical', fontFamily: SERIF, marginTop: 12, boxSizing: 'border-box', color: C.ink, outline: 'none', boxShadow: 'inset 0 2px 10px rgba(250, 222, 143, 0.18)' }, anonRow: { marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '10px 12px', border: `1px solid rgba(97,73,47,0.12)`, background: 'rgba(255,255,255,0.62)', borderRadius: 18 }, toggle: (on) => ({ width: 38, height: 22, background: on ? C.sage : 'rgba(255,255,255,0.9)', border: `1px solid rgba(97,73,47,0.16)`, position: 'relative', cursor: 'pointer', flexShrink: 0, borderRadius: 999, boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.72)' }), toggleKnob: (on) => ({ position: 'absolute', top: 1, left: on ? 17 : 1, width: 16, height: 16, background: on ? '#fffaf0' : C.ink, transition: 'left 0.15s ease', borderRadius: 999, boxShadow: '0 2px 8px rgba(73, 52, 26, 0.18)' }), buttonPrimary: { width: '100%', background: 'linear-gradient(120deg, #ffe16f 0%, #ffd43a 50%, #fff0aa 100%)', color: C.ink, border: 'none', borderRadius: 999, padding: '16px', fontSize: 15, fontWeight: 800, fontFamily: SANS, letterSpacing: 0.3, textTransform: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, boxShadow: `0 10px 28px rgba(253,181,21,0.45), inset 0 1px 0 rgba(255,255,255,0.6)`, transition: 'transform 0.14s ease, box-shadow 0.16s ease, opacity 0.2s ease', marginTop: 16 }, blurredFeed: { filter: 'blur(8px) grayscale(40%)', opacity: 0.7, pointerEvents: 'none', userSelect: 'none', transition: 'all 1.2s cubic-bezier(0.16, 1, 0.3, 1)' }, clearFeed: { filter: 'blur(0px) grayscale(0%)', opacity: 1, transition: 'all 1.2s cubic-bezier(0.16, 1, 0.3, 1)' }, lockOverlay: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', zIndex: 5, pointerEvents: 'none', background: C.bg, padding: '16px 20px', border: `1.5px dashed ${C.border}`, maxWidth: 280 }, avatar: { width: 40, height: 40, borderRadius: 16, background: 'linear-gradient(145deg, #fff5c4, #ffd85d)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14, color: C.ink, flexShrink: 0, objectFit: 'cover', border: `1px solid rgba(97,73,47,0.14)`, fontFamily: SANS, boxShadow: '0 10px 18px rgba(139,104,62,0.12)' }, reactionBtn: { background: C.paper, border: `1px solid rgba(97,73,47,0.12)`, borderRadius: 999, padding: '5px 10px', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer', fontFamily: SANS, fontWeight: 700, boxShadow: '0 8px 16px rgba(87,64,31,0.06)' }, feedLikeBtn: { background: C.paper, border: `1px solid rgba(97,73,47,0.12)`, borderRadius: 999, padding: '6px 12px', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 7, cursor: 'pointer', fontFamily: SANS, fontWeight: 700, transition: 'background 0.2s ease, border-color 0.2s ease', boxShadow: '0 8px 16px rgba(87,64,31,0.06)' }, feedLikeGlyph: { fontSize: '1.12rem', lineHeight: 1, display: 'inline-block' }, feedLikeCount: { fontSize: 13, minWidth: 12, textAlign: 'left' }, card: { background: 'linear-gradient(155deg, rgba(255,255,255,0.82), rgba(255,249,231,0.62))', borderRadius: 24, padding: 16, border: `1px solid rgba(255,255,255,0.85)`, marginBottom: 12, position: 'relative', overflow: 'hidden', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', boxShadow: `0 18px 38px rgba(98, 73, 39, 0.1), 0 0 26px rgba(253,181,21,0.1)` }, tabBar: { display: 'flex', gap: 4, marginBottom: 12, padding: 4, borderRadius: 999, border: `1px solid rgba(97,73,47,0.12)`, background: 'rgba(255,255,255,0.58)', boxShadow: '0 12px 24px rgba(87,64,31,0.08)' }, tabBtn: (active) => ({ flex: 1, background: active ? 'linear-gradient(120deg, #fff0a8 0%, #ffd43a 58%, #fff2b9 100%)' : 'transparent', color: C.ink, border: 'none', borderRadius: 999, padding: '10px 12px', fontSize: 12, fontWeight: 700, letterSpacing: 0.2, fontFamily: SANS, textTransform: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, boxShadow: active ? '0 10px 18px rgba(249,194,78,0.24)' : 'none' }) }; // ─── Sub-renderers ─────────────────────────────────────────────────────── const renderRecipientChip = (toMember) => { const name = toMember?.displayName || toMember?.name || 'A friend'; const handle = toMember?.handle; return ( ); }; const renderSenderBlock = (kudo) => { const isAnon = isAnonymousPost(kudo); const senderName = kudo._user?.name || kudo._user?.handle || 'Someone'; const senderAvatar = getAvatar(kudo._user); if (isAnon) { const anonName = anonDisplayNameForPost(kudo); const anonEmoji = anonEmojiForPost(kudo); return (

{anonEmoji}

{anonName}

kept it anonymous

); } return ( ); }; const renderKudoCard = (kudo) => { return (

{kudo.isDemo && (

DEMO

)}

{renderSenderBlock(kudo)}

{formatTimeAgo(kudo._timestamp)}

{kudo.promptText || 'Daily gratitude'}

is grateful for {renderRecipientChip(kudo._toMember)}

{kudo.photoUrl && (

)} {kudo.note && ( <>

{GRATITUDE_WHY_PROMPT_TEXT}

“{kudo.note}”

)}

{(() => { const likeIds = getLikeUserIds(kudo); const liked = (likeIds || []).includes(reactorId); const animKey = likeHeartAnimNonce[kudo.id] ?? 0; return ( ); })()}

); }; const renderStreakDigits = () => { const s = String(streak).padStart(2, '0'); return ( {s.split('').map((d, i) => ( {d} ))} ); }; const renderCheckInCapybaraScene = () => { const sceneId = `capy-scene-${checkInStep}`; const scene = checkInStep === 1 ? { sky: 'linear-gradient(180deg, rgba(255,245,206,0.95) 0%, rgba(255,232,174,0.95) 58%, rgba(255,214,127,0.92) 100%)', glow: 'rgba(255,218,111,0.28)', accent: '#f0bd49', sparkles: [ { left: '9%', top: '18%', size: 10, glyph: '✦', delay: '0s' }, { left: '18%', top: '64%', size: 8, glyph: '✧', delay: '0.6s' }, { left: '76%', top: '20%', size: 12, glyph: '✦', delay: '1.2s' }, { left: '86%', top: '58%', size: 9, glyph: '·', delay: '0.9s' } ] } : checkInStep === 2 ? { sky: 'linear-gradient(180deg, rgba(255,238,228,0.96) 0%, rgba(255,222,190,0.95) 58%, rgba(255,206,145,0.92) 100%)', glow: 'rgba(255,180,120,0.24)', accent: '#e89b6e', sparkles: [ { left: '11%', top: '22%', size: 8, glyph: '✦', delay: '0.2s' }, { left: '23%', top: '66%', size: 9, glyph: '✧', delay: '1s' }, { left: '79%', top: '18%', size: 10, glyph: '✦', delay: '1.5s' }, { left: '88%', top: '53%', size: 9, glyph: '♡', delay: '0.5s' } ] } : { sky: 'linear-gradient(180deg, rgba(255,247,214,0.96) 0%, rgba(244,235,184,0.94) 58%, rgba(228,214,152,0.9) 100%)', glow: 'rgba(190,171,103,0.22)', accent: '#b48e44', sparkles: [ { left: '12%', top: '19%', size: 8, glyph: '✦', delay: '0.4s' }, { left: '22%', top: '70%', size: 9, glyph: '❋', delay: '1s' }, { left: '79%', top: '20%', size: 10, glyph: '✦', delay: '1.6s' }, { left: '88%', top: '60%', size: 8, glyph: '✧', delay: '0.8s' } ] }; return (

{(scene.sparkles || []).map((sparkle, index) => ( {sparkle.glyph} ))}

); }; const renderAmbientCapybaraSticker = (variant = 'book') => { const tone = variant === 'garden' ? { accent: C.sage, accentSoft: 'rgba(225,242,205,0.95)', detail: '#6b9446' } : variant === 'tea' ? { accent: '#e7a976', accentSoft: 'rgba(255,236,223,0.96)', detail: '#c57a4d' } : variant === 'mail' ? { accent: '#f0c46a', accentSoft: 'rgba(255,245,215,0.96)', detail: '#d09f39' } : variant === 'nap' ? { accent: '#b7c9ea', accentSoft: 'rgba(239,245,255,0.96)', detail: '#7f97c7' } : { accent: '#f2c86d', accentSoft: 'rgba(255,248,222,0.96)', detail: '#d6a941' }; return ( ); }; const renderCozyBackdrop = () => { const featuredVariant = activeTab === 'garden' ? 'garden' : activeTab === 'wellness' ? 'tea' : activeTab === 'inbox' ? 'mail' : activeTab === 'journal' ? 'book' : 'nap'; const stickers = [ { key: 'capy-main', variant: featuredVariant, left: -18, top: 84, size: 118, rotate: -7, opacity: 0.26, duration: 7.2, delay: '0s' }, { key: 'capy-right', variant: activeTab === 'garden' ? 'book' : 'garden', right: -14, top: 154, size: 96, rotate: 7, opacity: 0.22, duration: 7.8, delay: '0.9s' }, { key: 'capy-middle', variant: activeTab === 'inbox' ? 'mail' : 'tea', left: -6, top: '43%', size: 88, rotate: -5, opacity: 0.18, duration: 8.4, delay: '1.4s' }, { key: 'capy-bottom', variant: activeTab === 'wellness' ? 'nap' : 'book', right: -12, bottom: 118, size: 110, rotate: 5, opacity: 0.22, duration: 7.4, delay: '2s' } ]; return (

{(stickers || []).map((sticker) => (

{renderAmbientCapybaraSticker(sticker.variant)}

))} {Array.from({ length: 10 }).map((_, i) => ( {i % 3 === 0 ? '✦' : i % 3 === 1 ? '❀' : '·'} ))}

); }; const renderActiveTabIntro = () => { const copy = activeTab === 'garden' ? { eyebrow: 'Good Vibes Grow Here', title: 'Community Garden', blurb: 'Every act of gratitude helps this patch feel more alive. Plant often, stay protected, and keep the garden thriving with the community.' } : activeTab === 'journal' ? { eyebrow: 'Your Gratitude Archive', title: 'Gratitude Journal', blurb: 'Revisit the people, moments, and thank-yous you have shared so your gratitude keeps building over time.' } : activeTab === 'wellness' ? { eyebrow: 'Care For Yourself, Too', title: 'Wellness', blurb: 'Build kinder routines, log small wins, and bring calmer energy back into the community.' } : activeTab === 'inbox' ? { eyebrow: 'Gratitude Coming Back To You', title: 'Your Gratitude Inbox', blurb: 'See the thank-yous and appreciation that other people in the community have sent your way.' } : { eyebrow: 'Shared Gratitude, Every Day', title: 'Gratitude Wall', blurb: 'Share one thing you are grateful for or thank someone who made your day better, then see the good vibes flowing through the community.' }; return (

{copy.eyebrow}

{copy.title}

{copy.blurb}

); }; return (

{renderCozyBackdrop()} {/* META STRIP — small monospaced editorial header */} {(Array.from({ length: 14 })).map((_, i) => ( ))}

UNSW · GRATITUDES NO. {todayKey} · {yearStr}

{/* HEADER */}

Share gratitude.
Grow good vibes. Together.

A social gratitude space for sharing thank-yous, celebrating kind moments, and lifting up the community one post at a time.

Streak {renderStreakDigits()} {totalKudosToday > 0 && ( <> Today {Math.min(99, totalKudosToday)} )} {hasPostedToday && !animatingUnlock && ( 1 ? `You've shared gratitude ${sentTodayCount} times today` : "You've shared gratitude today"} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: C.yellow, color: C.ink, border: `1.5px solid ${C.ink}`, padding: '2px 8px', fontFamily: MONO, fontSize: 10, fontWeight: 800, letterSpacing: 1.4, textTransform: 'uppercase', marginLeft: 'auto', animation: 'popIn 0.4s ease-out' }} > ✓ Gratitude shared )}

{user?.id && ( )} {user?.id && user?.handle ? ( ) : !user?.id && openAuth ? ( ) : null}

{/* CONTENT AREA */}

{xpToast && (

+{xpToast.value} XP

)} {/* TABS — primary nav lives at the top; inbox stays in the header shortcut. */}

{renderActiveTabIntro()} {inspectOverlay && activeTab === 'garden' && (

{inspectOverlay.name}

{inspectOverlay.rarity}

{inspectOverlay.etaText}

{inspectOverlay.coinReward} coins

Stage {inspectOverlay.stage}/3

)} {/* PROMPT CARD — only lives on the Gratitude Wall */} {activeTab === 'wall' && (

Today · Share Gratitude

{todaysPromptText}

Share one grateful moment or thank someone directly, then open the wall to see the community gratitude flowing back.

{postType === 'personal' ? GRATITUDE_PROMPT_TEXT : 'Who made your day better today?'}

setSoloRecipient(e.target.value)}
                placeholder={postType === 'personal'
                  ? 'Name it in a few words—a person, a moment, anything that matters...'
                  : 'Optional name/handle (or role) of the person you are grateful for...'}
                style={styles.noteInput}
                maxLength={220}
                minHeight={72}
              />
              <div style={{ ...styles.tinyLabel, marginTop: 14 }}>
                {postType === 'personal' ? GRATITUDE_WHY_PROMPT_TEXT : 'Why are you thankful for them?'}
              </div>
              <textarea
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder={todaysPrompt.placeholder}
                style={styles.noteInput}
                maxLength={260}
                minHeight={76}
              />
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                style={{ display: 'none' }}
                onChange={(e) => handlePhotoFileChange(e, false)}
              />
              <div style={{ ...styles.tinyLabel, marginTop: 14 }}>Photo (optional)</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', marginTop: 8 }}>
                <button
                  type="button"
                  disabled={isUploadingPhoto}
                  onClick={() => handleAddPhotoTap(false)}
                  style={{
                    flex: '1 1 140px',
                    minHeight: 52,
                    borderRadius: 16,
                    border: `2px dashed rgba(14,14,14,0.35)`,
                    background: 'rgba(255,250,238,0.85)',
                    fontFamily: SERIF,
                    fontStyle: 'italic',
                    fontSize: 15,
                    cursor: isUploadingPhoto ? 'wait' : 'pointer',
                    color: C.ink
                  }}
                >
                  {isUploadingPhoto ? 'Uploading…' : (photoUrl ? 'Change photo' : 'Add photo')}
                </button>
                {photoUrl && (
                  <button type="button" onClick={() => setPhotoUrl(null)} style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1, border: `1px solid ${C.ink}`, background: 'transparent', padding: '10px 12px', textTransform: 'uppercase', cursor: 'pointer' }}>
                    Clear
                  </button>
                )}
              </div>
              {photoUploadError && <p style={{ color: C.red, fontSize: 12, marginTop: 8 }}>{photoUploadError}</p>}
              {photoUrl && (
                <img
                  src={photoUrl}
                  alt=""
                  style={{
                    marginTop: 12,
                    width: '100%',
                    maxHeight: 180,
                    borderRadius: 14,
                    objectFit: 'cover',
                    animation: 'photoGlowIn 0.7s ease-out forwards'
                  }}
                />
              )}
            </>

{/* ANON / IDENTITY TOGGLE */}
            <div style={styles.anonRow}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ ...styles.tinyLabel, color: C.ink }}>
                  {postAnon ? 'Posting anonymously' : 'Posting as you'}
                </div>
                <div style={{ fontFamily: SERIF, fontSize: 13, color: C.muted, marginTop: 2, fontStyle: 'italic' }}>
                  {postAnon
                    ? `appears as “${(anonPreviewIdentity?.withEmoji || anonHandle)}”`
                    : (user?.id ? `appears as ${user.name || `@${user.handle}` || 'you'}` : 'sign in to post with your name')}
                </div>
              </div>
              <button
                onClick={() => {
                  if (!user?.id) {
                    if (postAnon && openAuth) openAuth();
                    return;
                  }
                  setPostAnon((v) => {
                    const next = !v;
                    if (next) {
                      anonIdentityNonceRef.current += 1;
                      setAnonPreviewIdentity(generateAnonPreviewIdentity());
                    }
                    return next;
                  });
                }}
                style={styles.toggle(postAnon)}
                aria-label={postAnon ? 'Disable anonymous' : 'Enable anonymous'}
              >
                <span style={styles.toggleKnob(postAnon)} />
              </button>
            </div>

<button
              onClick={handlePost}
              disabled={!canSubmit}
              style={{
                ...styles.buttonPrimary,
                opacity: canSubmit ? 1 : 0.5,
                animation: canSubmit ? 'pulseShadow 2.4s ease-in-out infinite' : 'none'
              }}
            >
              {isPosting ? 'Sharing gratitude…' : 'Share Gratitude to the Wall →'}
            </button>

<p style={{ ...styles.tinyLabel, textAlign: 'center', margin: '12px 0 0', color: C.muted, lineHeight: 1.5 }}>
              {showFreeText
                ? 'Solo mode · saved privately on your device'
                : (postAnon
                    ? 'Anonymous · they\'ll receive a wholesome gratitude note, sender stays hidden'
                    : 'Visible · they\'ll see who sent it. Keep it kind.')}
            </p>
          </div>
        )}

{/* FEED + GARDEN */}
        <div style={{ position: 'relative' }}>
          {(() => {
            const feedLocked = !hasPostedToday && activeTab !== 'garden' && activeTab !== 'journal' && activeTab !== 'wellness';
            return (
              <>
                {feedLocked && (
                  <div style={styles.lockOverlay}>
                    <div style={{ ...styles.tinyLabel, marginBottom: 6 }}>STATUS · LOCKED</div>
                    <h3 style={{ margin: 0, fontFamily: SERIF, fontStyle: 'italic', fontSize: 18, fontWeight: 400 }}>
                      {activeTab === 'inbox' ? 'Your gratitude inbox unlocks after you share today.' : "Share today's gratitude to open the wall."}
                    </h3>
                    <p style={{ ...styles.tinyLabel, color: C.muted, marginTop: 6, lineHeight: 1.5 }}>
                      {activeTab === 'inbox'
                        ? 'Share one gratitude first — Community Garden, Gratitude Journal, and Wellness stay open.'
                        : 'Post one grateful moment or thank someone to see what the community is appreciating today — or open Community Garden, Gratitude Journal, or Wellness.'}
                    </p>
                  </div>
                )}

<div style={(feedLocked && !animatingUnlock) ? styles.blurredFeed : styles.clearFeed}>
                  {activeTab === 'journal' ? (() => {
                    const monthStart = new Date(journalMonthCursor.getFullYear(), journalMonthCursor.getMonth(), 1);
                    const monthLabel = monthStart.toLocaleString(undefined, { month: 'long', year: 'numeric' });
                    const weekdayOffset = (monthStart.getDay() + 6) % 7; // Monday-first
                    const daysInMonth = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0).getDate();
                    const cells = [];
                    for (let i = 0; i < weekdayOffset; i++) cells.push(null);
                    for (let d = 1; d <= daysInMonth; d++) {
                      const key = `${monthStart.getFullYear()}-${String(monthStart.getMonth() + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
                      cells.push({ day: d, key });
                    }
                    while ((cells || []).length % 7 !== 0) cells.push(null);
                    const selectedEntries = journalSelectedDateKey ? (journalByDate[journalSelectedDateKey] || []) : [];
                    return (
                      <div style={{ ...styles.card, marginBottom: 12 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
                          <div style={styles.tinyLabel}>Journal · gratitude calendar</div>
                          <div style={{ ...styles.tinyLabel, color: C.muted }}>
                            {journalTotalEntries} entries · {journalTotalDays} active days
                          </div>
                        </div>

<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 10, fontFamily: MONO, fontSize: 12 }}>
                          <span>Streak {streak}</span>
                          <span>Total {journalTotalEntries}</span>
                        </div>
                        <div style={{ ...styles.tinyLabel, color: C.inkSoft }}>{journalMoodInsight}</div>
                        <div style={{ ...styles.tinyLabel, color: C.muted, marginTop: 2, marginBottom: 12 }}>{journalConsistencyInsight}</div>

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
                          <button
                            type="button"
                            onClick={() => setJournalMonthCursor((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1))}
                            style={{ border: `1px solid ${C.borderSoft}`, background: C.paper, padding: '6px 10px', borderRadius: 10, cursor: 'pointer', fontFamily: MONO, fontSize: 10, letterSpacing: 1 }}
                          >
                            Prev
                          </button>
                          <div style={{ fontFamily: SERIF, fontSize: 18, fontStyle: 'italic' }}>{monthLabel}</div>
                          <button
                            type="button"
                            onClick={() => setJournalMonthCursor((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1))}
                            style={{ border: `1px solid ${C.borderSoft}`, background: C.paper, padding: '6px 10px', borderRadius: 10, cursor: 'pointer', fontFamily: MONO, fontSize: 10, letterSpacing: 1 }}
                          >
                            Next
                          </button>
                        </div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, minmax(0,1fr))', gap: 8, marginBottom: 12 }}>
                          {(cells || []).map((cell, idx) => {
                            if (!cell) return <div key={`blank-${idx}`} style={{ aspectRatio: '1 / 1' }} />;
                            const hasEntry = Array.isArray(journalByDate[cell.key]) && journalByDate[cell.key].length > 0;
                            const isSelected = journalSelectedDateKey === cell.key;
                            return (
                              <button
                                key={cell.key}
                                type="button"
                                onClick={() => setJournalSelectedDateKey(cell.key)}
                                style={{
                                  aspectRatio: '1 / 1',
                                  borderRadius: 12,
                                  border: isSelected ? `1.5px solid ${C.ink}` : `1px solid ${C.borderSoft}`,
                                  background: hasEntry
                                    ? 'linear-gradient(160deg, rgba(255,243,190,0.65), rgba(255,252,244,0.85))'
                                    : 'rgba(255,255,255,0.55)',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  position: 'relative',
                                  fontFamily: MONO,
                                  fontSize: 12,
                                  color: C.ink,
                                  animation: 'journalCellIn 260ms ease-out'
                                }}
                              >
                                {cell.day}
                                {hasEntry && (
                                  <span
                                    aria-hidden="true"
                                    style={{
                                      position: 'absolute',
                                      bottom: 6,
                                      width: 6,
                                      height: 6,
                                      borderRadius: '50%',
                                      background: C.yellowDeep,
                                      animation: 'journalDotGlow 2.2s ease-in-out infinite'
                                    }}
                                  />
                                )}
                              </button>
                            );
                          })}
                        </div>

<div style={{ ...styles.tinyLabel, marginBottom: 8 }}>
                          {journalSelectedDateKey ? `Entries · ${journalSelectedDateKey}` : 'Select a day to open your gratitude entries.'}
                        </div>
                        {journalSelectedDateKey && (selectedEntries || []).length === 0 ? (
                          <p style={{ fontFamily: SERIF, fontStyle: 'italic', color: C.muted, margin: 0 }}>No gratitude entry logged on this date.</p>
                        ) : null}
                        {(selectedEntries || []).length > 0 && (
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                            {(selectedEntries || []).map((k) => renderKudoCard(k))}
                          </div>
                        )}
                      </div>
                    );
                  })() : activeTab === 'wellness' ? (() => {
                    const wellnessPaper = {
                      borderRadius: 18,
                      padding: 14,
                      marginBottom: 12,
                      background: 'linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,228,0.78))',
                      border: '1px solid rgba(232,200,150,0.42)',
                      boxShadow:
                        '0 8px 26px rgba(75,48,20,0.07), inset 0 1px 0 rgba(255,255,255,0.94), 0 0 32px rgba(255,200,120,0.14)'
                    };
                    const moduleTitle = {
                      fontFamily: SERIF,
                      fontStyle: 'italic',
                      fontSize: 17,
                      fontWeight: 600,
                      margin: '0 0 4px',
                      color: C.ink
                    };
                    const stepKey = (phase: string, i: number) => `${todayKey}:${phase}:${i}`;
                    const fmtMedClock = (s: number) => {
                      const sec = Math.max(0, Math.floor(s));
                      const m = Math.floor(sec / 60);
                      const r = sec % 60;
                      return `${m}:${String(r).padStart(2, '0')}`;
                    };
                    const MORNING_STEPS = ['Gentle stretch or roll-out', 'Water before caffeine', 'One minute of daylight', 'Set a kind intention'];
                    const NIGHT_STEPS = ['Dim the space', 'Screens away 20m+', 'Slow breathing (4–6)', 'Note one small win'];
                    const todaysSuccesses = (wellnessSuccesses || []).filter((s) => s.dateKey === todayKey);
                    const summaryText = wellnessSummaryByDate[todayKey] ?? '';
                    const habitRows = readWellnessHabitsStore();
                    const profileXp = readLocalGardenProfile().xp ?? 0;

return (
                      <div
                        style={{
                          borderRadius: 22,
                          padding: '16px 14px 20px',
                          marginBottom: 12,
                          position: 'relative',
                          overflow: 'hidden',
                          background: 'linear-gradient(168deg, rgba(255,252,242,0.98), rgba(252,241,220,0.95), rgba(246,232,208,0.92))',
                          border: '1px solid rgba(175,145,105,0.28)',
                          boxShadow:
                            '0 0 48px rgba(253,195,110,0.2), inset 0 1px 0 rgba(255,255,255,0.82), 0 20px 44px rgba(88,58,28,0.1)'
                        }}
                      >
                        <div
                          aria-hidden="true"
                          style={{
                            position: 'absolute',
                            right: '-12%',
                            top: '-18%',
                            width: 200,
                            height: 200,
                            borderRadius: '50%',
                            background: 'radial-gradient(circle, rgba(255,220,160,0.45), rgba(255,220,160,0))',
                            pointerEvents: 'none'
                          }}
                        />
                        <div style={{ position: 'relative', zIndex: 1 }}>
                          <div style={{ marginBottom: 14, textAlign: 'center' }}>
                            <div style={{ ...styles.tinyLabel, letterSpacing: 2, color: 'rgba(120,90,55,0.75)' }}>PRIVATE · NOT THE GRATITUDE WALL</div>
                            <h2 style={{ ...moduleTitle, fontSize: 22, margin: '6px 0 4px' }}>Wellness Journal</h2>
                            <p style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 14, color: C.muted, margin: 0, lineHeight: 1.45 }}>
                              A soft place for habits, breath, and the shape of your day — separate from the gratitude wall and public feed.
                            </p>
                          </div>

<div style={wellnessPaper}>
                            <div style={moduleTitle}>Daily successes</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, marginBottom: 10 }}>Tiny wins count. They stay on this page until you refresh the day.</div>
                            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
                              <input
                                type="text"
                                value={wellnessSuccessDraft}
                                onChange={(e) => setWellnessSuccessDraft(e.target.value)}
                                placeholder="Something that went right…"
                                style={{
                                  flex: '1 1 180px',
                                  minWidth: 0,
                                  padding: '10px 12px',
                                  borderRadius: 14,
                                  border: `1px solid rgba(200,170,130,0.35)`,
                                  background: 'rgba(255,255,255,0.75)',
                                  fontFamily: SERIF,
                                  fontSize: 14,
                                  outline: 'none',
                                  boxShadow: 'inset 0 1px 2px rgba(80,50,20,0.06)'
                                }}
                              />
                              <button
                                type="button"
                                onClick={() => {
                                  const t = wellnessSuccessDraft.trim();
                                  if (!t) return;
                                  setWellnessSuccesses((prev) => [...prev, { id: `${Date.now()}`, dateKey: todayKey, text: t }]);
                                  setWellnessSuccessDraft('');
                                }}
                                style={{
                                  padding: '10px 16px',
                                  borderRadius: 14,
                                  border: `1.5px solid ${C.ink}`,
                                  background: C.yellow,
                                  fontFamily: MONO,
                                  fontSize: 10,
                                  fontWeight: 800,
                                  letterSpacing: 1.2,
                                  textTransform: 'uppercase',
                                  cursor: 'pointer'
                                }}
                              >
                                Log win
                              </button>
                            </div>
                            {(todaysSuccesses || []).length === 0 ? (
                              <p style={{ fontFamily: SERIF, fontStyle: 'italic', color: C.muted, margin: 0, fontSize: 14 }}>Nothing logged yet — add your first win.</p>
                            ) : (
                              <ul style={{ margin: 0, paddingLeft: 18, fontFamily: SERIF, fontSize: 15, color: C.ink, lineHeight: 1.55 }}>
                                {(todaysSuccesses || []).map((s) => (
                                  <li key={s.id}>{s.text}</li>
                                ))}
                              </ul>
                            )}
                          </div>

<div style={wellnessPaper}>
                            <div style={moduleTitle}>Habit tracker</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, marginBottom: 6 }}>
                              Your habits · day goals · per-habit streaks. Checking today adds +{WELLNESS_HABIT_XP} XP to your shared XP bar (currently {profileXp}) — your gratitude day streak stays on the main composer flow only.
                            </div>
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
                              <input
                                type="text"
                                value={wellnessNewHabitTitle}
                                onChange={(e) => setWellnessNewHabitTitle(e.target.value)}
                                placeholder="New habit name…"
                                style={{
                                  flex: '1 1 160px',
                                  minWidth: 0,
                                  padding: '10px 12px',
                                  borderRadius: 14,
                                  border: `1px solid rgba(200,170,130,0.35)`,
                                  background: 'rgba(255,255,255,0.75)',
                                  fontFamily: SERIF,
                                  fontSize: 14,
                                  outline: 'none'
                                }}
                              />
                              <input
                                type="number"
                                min={1}
                                max={365}
                                value={wellnessNewHabitGoalDays}
                                onChange={(e) => setWellnessNewHabitGoalDays(e.target.value)}
                                title="Goal length in days"
                                style={{
                                  width: 88,
                                  padding: '10px 12px',
                                  borderRadius: 14,
                                  border: `1px solid rgba(200,170,130,0.35)`,
                                  background: 'rgba(255,255,255,0.75)',
                                  fontFamily: MONO,
                                  fontSize: 12,
                                  outline: 'none'
                                }}
                              />
                              <button
                                type="button"
                                onClick={() => addWellnessHabit()}
                                style={{
                                  padding: '10px 14px',
                                  borderRadius: 14,
                                  border: `1.5px solid ${C.ink}`,
                                  background: C.yellow,
                                  fontFamily: MONO,
                                  fontSize: 10,
                                  fontWeight: 800,
                                  letterSpacing: 1.1,
                                  textTransform: 'uppercase',
                                  cursor: 'pointer'
                                }}
                              >
                                Add habit
                              </button>
                            </div>
                            {(habitRows || []).length === 0 ? (
                              <p style={{ fontFamily: SERIF, fontStyle: 'italic', color: C.muted, margin: 0, fontSize: 14 }}>
                                No habits yet — name one and pick how many days you want to aim for.
                              </p>
                            ) : (
                              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                                {(habitRows || []).map((h) => {
                                  const done = new Set(h.completions || []).has(todayKey);
                                  const streak = wellnessHabitStreakLocal(h.completions, todayKey);
                                  const pct = Math.min(100, Math.round((Math.min(streak, h.goalDays) / Math.max(1, h.goalDays)) * 100));
                                  const shareDisabled =
                                    !done || !(soloRecipient || '').trim() || wellnessHabitShareBusy === h.id || isPosting;
                                  return (
                                    <div
                                      key={h.id}
                                      style={{
                                        borderRadius: 16,
                                        border: `1px solid ${done ? 'rgba(120,160,100,0.45)' : 'rgba(200,170,130,0.32)'}`,
                                        background: done ? 'linear-gradient(100deg, rgba(232,248,226,0.85), rgba(255,252,244,0.9))' : 'rgba(255,255,255,0.62)',
                                        padding: '12px 12px 10px',
                                        boxShadow: done ? '0 0 20px rgba(140,200,120,0.2)' : 'none'
                                      }}
                                    >
                                      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                                        <div style={{ minWidth: 0 }}>
                                          <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 16, color: C.ink }}>{h.title}</div>
                                          <div style={{ ...styles.tinyLabel, color: C.muted, marginTop: 4 }}>
                                            Goal {h.goalDays}d · streak <span style={{ color: C.ink, fontWeight: 700 }}>{streak}</span>
                                            <span aria-hidden style={{ marginLeft: 4 }}>🔥</span>
                                          </div>
                                        </div>
                                        <button
                                          type="button"
                                          title="Remove habit"
                                          onClick={() => removeWellnessHabit(h.id)}
                                          style={{
                                            border: 'none',
                                            background: 'rgba(255,255,255,0.65)',
                                            borderRadius: 10,
                                            padding: '4px 8px',
                                            cursor: 'pointer',
                                            fontFamily: MONO,
                                            fontSize: 11,
                                            color: C.muted
                                          }}
                                        >
                                          ✕
                                        </button>
                                      </div>
                                      <div
                                        style={{
                                          marginTop: 10,
                                          height: 8,
                                          borderRadius: 999,
                                          background: 'rgba(90,60,30,0.08)',
                                          overflow: 'hidden',
                                          border: `1px solid rgba(200,170,130,0.25)`
                                        }}
                                      >
                                        <div
                                          style={{
                                            height: '100%',
                                            width: `${pct}%`,
                                            borderRadius: 999,
                                            background: 'linear-gradient(90deg, rgba(124,190,110,0.95), rgba(255,214,120,0.95))',
                                            transition: 'width 320ms ease'
                                          }}
                                        />
                                      </div>
                                      <div style={{ ...styles.tinyLabel, marginTop: 6, color: C.muted }}>
                                        Progress to goal streak: {pct}% · {Math.min(streak, h.goalDays)} / {h.goalDays} days
                                      </div>
                                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10, alignItems: 'center' }}>
                                        <button
                                          type="button"
                                          onClick={() => toggleWellnessHabit(h.id)}
                                          style={{
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            gap: 10,
                                            padding: '8px 12px',
                                            borderRadius: 12,
                                            border: `1px solid ${done ? 'rgba(90,140,80,0.55)' : C.borderSoft}`,
                                            background: done ? 'rgba(200,235,190,0.55)' : 'rgba(255,255,255,0.75)',
                                            cursor: 'pointer',
                                            fontFamily: SERIF,
                                            fontSize: 14,
                                            color: C.ink
                                          }}
                                        >
                                          <span
                                            aria-hidden
                                            style={{
                                              width: 22,
                                              height: 22,
                                              borderRadius: 7,
                                              border: `2px solid ${done ? 'rgba(70,120,60,0.75)' : C.borderSoft}`,
                                              background: done ? 'rgba(120,170,100,0.35)' : 'transparent',
                                              display: 'inline-flex',
                                              alignItems: 'center',
                                              justifyContent: 'center',
                                              fontSize: 13
                                            }}
                                          >
                                            {done ? '✓' : ''}
                                          </span>
                                          {done ? 'Done today' : 'Mark done today'}
                                        </button>
                                        <button
                                          type="button"
                                          disabled={shareDisabled}
                                          onClick={() => void shareWellnessHabitToFeed(h)}
                                          style={{
                                            padding: '8px 12px',
                                            borderRadius: 12,
                                            border: `1px solid ${shareDisabled ? 'rgba(0,0,0,0.08)' : C.ink}`,
                                            background: shareDisabled ? 'rgba(0,0,0,0.04)' : C.paper,
                                            fontFamily: MONO,
                                            fontSize: 10,
                                            letterSpacing: 0.8,
                                            textTransform: 'uppercase',
                                            cursor: shareDisabled ? 'not-allowed' : 'pointer',
                                            opacity: shareDisabled ? 0.55 : 1
                                          }}
                                        >
                                          {wellnessHabitShareBusy === h.id ? 'Sharing…' : 'Share to feed'}
                                        </button>
                                      </div>
                                      {!done ? (
                                        <div style={{ ...styles.tinyLabel, marginTop: 6, color: C.muted }}>Mark done to unlock share.</div>
                                      ) : !(soloRecipient || '').trim() ? (
                                        <div style={{ ...styles.tinyLabel, marginTop: 6, color: C.muted }}>
                                          Add a person or gratitude note in the composer above to share this win to the wall.
                                        </div>
                                      ) : null}
                                    </div>
                                  );
                                })}
                              </div>
                            )}
                          </div>

<div style={{ ...wellnessPaper, marginBottom: 12 }}>
                            <div style={moduleTitle}>Morning & night routines</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, marginBottom: 10 }}>Gentle sequences — tap to check off. Same day scope as habits.</div>
                            <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1.1, color: 'rgba(120,90,55,0.85)', marginBottom: 6 }}>MORNING</div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
                              {(MORNING_STEPS || []).map((label, i) => {
                                const k = stepKey('am', i);
                                const done = !!wellnessRoutineDone[k];
                                return (
                                  <button
                                    key={k}
                                    type="button"
                                    onClick={() => setWellnessRoutineDone((prev) => ({ ...prev, [k]: !prev[k] }))}
                                    style={{
                                      padding: '8px 10px',
                                      borderRadius: 12,
                                      border: `1px solid ${done ? 'rgba(130,170,200,0.45)' : 'rgba(200,170,130,0.28)'}`,
                                      background: done ? 'rgba(232,244,252,0.85)' : 'rgba(255,255,255,0.55)',
                                      cursor: 'pointer',
                                      fontFamily: SERIF,
                                      fontSize: 14,
                                      color: C.ink,
                                      textAlign: 'left'
                                    }}
                                  >
                                    {done ? '☀︎ ' : '○ '}
                                    {label}
                                  </button>
                                );
                              })}
                            </div>
                            <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1.1, color: 'rgba(120,90,55,0.85)', marginBottom: 6 }}>NIGHT</div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                              {(NIGHT_STEPS || []).map((label, i) => {
                                const k = stepKey('pm', i);
                                const done = !!wellnessRoutineDone[k];
                                return (
                                  <button
                                    key={k}
                                    type="button"
                                    onClick={() => setWellnessRoutineDone((prev) => ({ ...prev, [k]: !prev[k] }))}
                                    style={{
                                      padding: '8px 10px',
                                      borderRadius: 12,
                                      border: `1px solid ${done ? 'rgba(150,130,190,0.4)' : 'rgba(200,170,130,0.28)'}`,
                                      background: done ? 'rgba(244,236,252,0.9)' : 'rgba(255,255,255,0.55)',
                                      cursor: 'pointer',
                                      fontFamily: SERIF,
                                      fontSize: 14,
                                      color: C.ink,
                                      textAlign: 'left'
                                    }}
                                  >
                                    {done ? '☾ ' : '○ '}
                                    {label}
                                  </button>
                                );
                              })}
                            </div>
                          </div>

<div style={wellnessPaper}>
                            <div style={moduleTitle}>Meditation timer</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, marginBottom: 10 }}>Simple countdown — pause anytime. Cozy glow when running.</div>
                            <div
                              style={{
                                textAlign: 'center',
                                fontFamily: MONO,
                                fontSize: 36,
                                letterSpacing: 2,
                                marginBottom: 12,
                                color: C.ink,
                                textShadow: meditationRunning ? '0 0 28px rgba(255,200,120,0.55)' : 'none',
                                transition: 'text-shadow 400ms ease'
                              }}
                            >
                              {fmtMedClock(meditationRemaining)}
                            </div>
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginBottom: 10 }}>
                              {[
                                { sec: 180, label: '3 min' },
                                { sec: 300, label: '5 min' },
                                { sec: 600, label: '10 min' }
                              ].map((p) => (
                                <button
                                  key={p.sec}
                                  type="button"
                                  disabled={meditationRunning}
                                  onClick={() => {
                                    setMeditationPresetSec(p.sec);
                                    setMeditationRemaining(p.sec);
                                  }}
                                  style={{
                                    padding: '6px 12px',
                                    borderRadius: 999,
                                    border: `1px solid ${meditationPresetSec === p.sec ? C.ink : 'rgba(200,170,130,0.35)'}`,
                                    background: meditationPresetSec === p.sec ? C.yellow : 'rgba(255,255,255,0.7)',
                                    fontFamily: MONO,
                                    fontSize: 10,
                                    letterSpacing: 1,
                                    cursor: meditationRunning ? 'not-allowed' : 'pointer',
                                    opacity: meditationRunning ? 0.5 : 1
                                  }}
                                >
                                  {p.label}
                                </button>
                              ))}
                            </div>
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center' }}>
                              <button
                                type="button"
                                onClick={() => {
                                  if (meditationRunning) setMeditationRunning(false);
                                  else {
                                    if (meditationRemaining <= 0) setMeditationRemaining(meditationPresetSec);
                                    setMeditationRunning(true);
                                  }
                                }}
                                style={{
                                  padding: '10px 20px',
                                  borderRadius: 999,
                                  border: `1.5px solid ${C.ink}`,
                                  background: C.ink,
                                  color: C.yellow,
                                  fontFamily: MONO,
                                  fontSize: 11,
                                  fontWeight: 800,
                                  letterSpacing: 1.2,
                                  textTransform: 'uppercase',
                                  cursor: 'pointer'
                                }}
                              >
                                {meditationRunning ? 'Pause' : 'Start'}
                              </button>
                              <button
                                type="button"
                                onClick={() => {
                                  setMeditationRunning(false);
                                  setMeditationRemaining(meditationPresetSec);
                                }}
                                style={{
                                  padding: '10px 20px',
                                  borderRadius: 999,
                                  border: `1px solid rgba(200,170,130,0.45)`,
                                  background: 'rgba(255,255,255,0.75)',
                                  fontFamily: MONO,
                                  fontSize: 11,
                                  fontWeight: 700,
                                  letterSpacing: 1,
                                  textTransform: 'uppercase',
                                  cursor: 'pointer'
                                }}
                              >
                                Reset
                              </button>
                            </div>
                          </div>

<div style={{ ...wellnessPaper, marginBottom: 0 }}>
                            <div style={moduleTitle}>Daily summary journal</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, marginBottom: 10 }}>Free reflection for today — not linked to gratitude posts.</div>
                            <textarea
                              value={summaryText}
                              onChange={(e) =>
                                setWellnessSummaryByDate((prev) => ({
                                  ...prev,
                                  [todayKey]: e.target.value
                                }))
                              }
                              rows={6}
                              placeholder="How did today feel? What do you want tomorrow-you to remember?"
                              style={{
                                width: '100%',
                                boxSizing: 'border-box',
                                resize: 'vertical',
                                minHeight: 120,
                                padding: 12,
                                borderRadius: 16,
                                border: `1px solid rgba(200,170,130,0.32)`,
                                background: 'rgba(255,255,255,0.82)',
                                fontFamily: SERIF,
                                fontSize: 15,
                                lineHeight: 1.5,
                                color: C.ink,
                                outline: 'none',
                                boxShadow: 'inset 0 2px 8px rgba(80,50,20,0.05)'
                              }}
                            />
                          </div>
                        </div>
                      </div>
                    );
                  })() : activeTab === 'garden' ? (() => {
                    const gp = readLocalGardenProfile();
                    const vegEmoji = {
                      carrot: '🥕', lettuce: '🥬', potato: '🥔', onion: '🧅', cabbage: '🥬', cucumber: '🥒', radish: '🌱', corn: '🌽', spinach: '🍃', beetroot: '🫜',
                      tomato: '🍅', pumpkin: '🎃', eggplant: '🍆', zucchini: '🥒', broccoli: '🥦', cauliflower: '🥦', 'bell pepper': '🫑', 'chili pepper': '🌶️', 'sweet potato': '🍠', peas: '🫛',
                      sunflower: '🌻', 'purple cabbage': '🥬', 'rainbow carrot': '🥕', 'white pumpkin': '🎃', 'golden beetroot': '🫜', 'giant watermelon': '🍉', 'blue corn': '🌽', 'pink celery': '🥬', 'black tomato': '🍅', 'crystal radish': '🫜',
                      'golden pumpkin': '🎃', 'glowing sunflower': '🌻', 'diamond carrot': '🥕', 'moon melon': '🍈', 'rainbow cauliflower': '🥦', 'celestial tomato': '🍅', 'aurora lettuce': '🥬', 'starlight onion': '🧅', 'cosmic corn': '🌽', 'mythical eggplant': '🍆'
                    };
                    const todayId = ymdIdFromKeyLocal(todayKey);
                    const protectedNow = isProtectedLocal(todayId, gp?.lastCheckInDate ?? null);
                    const plants = Array.isArray(gp?.garden?.plants) ? gp.garden.plants : [];
                    const unlockedVegetables = Array.isArray(gp?.unlockedVegetables) && (gp.unlockedVegetables || []).length > 0 ? gp.unlockedVegetables : ['carrot'];
                    const gridSize = 25;
                    const tiles = Array.from({ length: gridSize }).map((_, i) => plants[i] || null);
                    const rowSize = 5;
                    return (
                      <div style={{ ...styles.card, marginBottom: 12, maxWidth: 980, marginLeft: 'auto', marginRight: 'auto' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', alignItems: 'baseline', marginBottom: 10 }}>
                          <div style={styles.tinyLabel}>Community Garden · gratitude-grown</div>
                          <div style={{ ...styles.tinyLabel, color: protectedNow ? C.inkSoft : C.red }}>
                            {protectedNow ? 'Protected' : 'Unprotected · miss a day and friends can steal'}
                          </div>
                        </div>
                        {gardenErr ? (
                          <p style={{ color: C.red, fontSize: 13, marginBottom: 10 }}>{gardenErr}</p>
                        ) : null}
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 14, fontFamily: MONO, fontSize: 12 }}>
                          <span>XP {gp?.xp ?? 0}</span>
                          <span>Streak {gp?.streakCount ?? 0}</span>
                          <span>Seeds {gp?.seeds ?? 0}</span>
                          <span>Coins {gp?.coins ?? 0}</span>
                          <span>Unlocked {(unlockedVegetables || []).length}/{(GARDEN_PLANT_TYPES || []).length}</span>
                        </div>
                        {Array.isArray(gp?.gardenAlerts) && (gp.gardenAlerts || []).length > 0 && (
                          <div
                            style={{
                              marginBottom: 12,
                              border: `1px solid ${C.borderSoft}`,
                              borderRadius: 12,
                              padding: 10,
                              background: 'rgba(255,248,224,0.7)'
                            }}
                          >
                            <div style={{ ...styles.tinyLabel, marginBottom: 6, color: C.inkSoft }}>
                              <span style={{ display: 'inline-block', marginRight: 6, animation: 'goblinWiggle 1.6s ease-in-out infinite' }}>🧌</span>
                              Garden goblin notices
                            </div>
                            {(gp.gardenAlerts || []).slice(0, 3).map((a, i) => (
                              <div key={a?.id || i} style={{ fontFamily: SERIF, fontSize: 13, color: C.ink, marginBottom: i < 2 ? 6 : 0 }}>
                                {a?.message || 'A goblin visited your patch.'}
                                {a?.createdAt ? (
                                  <span style={{ ...styles.tinyLabel, marginLeft: 8, color: C.muted }}>
                                    {fmtRelativeTimeLocal(a.createdAt)}
                                  </span>
                                ) : null}
                              </div>
                            ))}
                          </div>
                        )}
                        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 12 }}>
                          <button
                            type="button"
                            disabled={gardenBusy}
                            onClick={() => void refreshGardenIfPossible()}
                            style={{
                              padding: '8px 12px',
                              border: `1px solid ${C.ink}`,
                              background: C.paper,
                              fontFamily: MONO,
                              fontSize: 10,
                              letterSpacing: 1.1,
                              textTransform: 'uppercase',
                              cursor: gardenBusy ? 'wait' : 'pointer'
                            }}
                          >
                            {gardenBusy ? 'Updating…' : 'Refresh growth'}
                          </button>
                          <button
                            type="button"
                            disabled={gardenBusy || (gp?.coins ?? 0) < GARDEN_GACHA_COIN_COST}
                            onClick={() => void pullGardenGacha()}
                            style={{
                              padding: '8px 12px',
                              border: `1px solid ${C.ink}`,
                              background: (gp?.coins ?? 0) < GARDEN_GACHA_COIN_COST ? 'rgba(0,0,0,0.06)' : C.yellow,
                              fontFamily: MONO,
                              fontSize: 10,
                              letterSpacing: 1.1,
                              textTransform: 'uppercase',
                              cursor: (gp?.coins ?? 0) < GARDEN_GACHA_COIN_COST ? 'not-allowed' : 'pointer'
                            }}
                          >
                            Gacha pull ({GARDEN_GACHA_COIN_COST} coins)
                          </button>
                          <div style={{ ...styles.tinyLabel, alignSelf: 'center', color: C.muted }}>
                            Tip: harvest crops for coins, then try the gacha. Plant seeds daily to stay protected.
                          </div>
                        </div>

<div
                          style={{
                            width: '100%',
                            maxWidth: 760,
                            margin: '0 auto 14px',
                            boxSizing: 'border-box',
                            padding: 12,
                            border: `1px solid ${C.borderSoft}`,
                            borderRadius: 18,
                            background: 'linear-gradient(180deg, rgba(255,248,221,0.95), rgba(236,226,183,0.72))',
                            position: 'relative',
                            overflow: 'hidden',
                            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.62), 0 10px 24px rgba(93,66,29,0.12)'
                          }}
                        >
                          <div
                            aria-hidden="true"
                            style={{
                              position: 'absolute',
                              right: -20,
                              top: -20,
                              width: 120,
                              height: 120,
                              borderRadius: '50%',
                              background: 'radial-gradient(circle, rgba(255,216,115,0.62), rgba(255,216,115,0))',
                              animation: 'warmSunPulse 3.8s ease-in-out infinite',
                              pointerEvents: 'none'
                            }}
                          />
                          {[0, 1, 2, 3, 4].map((i) => (
                            <span
                              key={`dust-${i}`}
                              aria-hidden="true"
                              style={{
                                position: 'absolute',
                                left: `${12 + i * 18}%`,
                                top: `${10 + (i % 3) * 12}%`,
                                fontSize: 10 + (i % 2) * 2,
                                opacity: 0.7,
                                animation: `butterflyFloat ${3.2 + i * 0.6}s ease-in-out infinite`,
                                animationDelay: `${i * 0.3}s`,
                                pointerEvents: 'none'
                              }}
                            >
                              {i % 2 ? '✨' : '🦋'}
                            </span>
                          ))}
                          {gardenSpark && (
                            <div
                              aria-hidden="true"
                              style={{
                                position: 'absolute',
                                left: gardenSpark.x,
                                top: gardenSpark.y,
                                transform: 'translate(-50%,-50%)',
                                zIndex: 3,
                                pointerEvents: 'none',
                                animation: 'gardenSpark 850ms ease-out forwards',
                                fontSize: 18
                              }}
                            >
                              ✦
                            </div>
                          )}
                          <div
                            onMouseLeave={() => {
                              setInspectedPlantId(null);
                              setInspectOverlay(null);
                            }}
                            style={{
                              position: 'relative',
                              borderRadius: 24,
                              aspectRatio: '1 / 1',
                              minHeight: 320,
                              overflow: 'hidden',
                              border: '2px solid rgba(145,103,62,0.55)',
                              background: `
                                radial-gradient(120% 100% at 50% -10%, rgba(255,238,176,0.35), rgba(255,238,176,0) 50%),
                                radial-gradient(130% 100% at 50% 20%, rgba(166,112,68,0.22), rgba(78,47,27,0.9) 70%),
                                linear-gradient(180deg, rgba(119,74,44,0.94), rgba(84,50,30,0.98))
                              `,
                              boxShadow: 'inset 0 12px 22px rgba(0,0,0,0.24), inset 0 -8px 16px rgba(255,193,132,0.08)'
                            }}
                          >
                            <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
                              {[0, 1, 2, 3, 4, 5].map((i) => (
                                <span key={`grass-${i}`} style={{ position: 'absolute', left: `${2 + i * 18}%`, top: `${8 + (i % 3) * 22}%`, fontSize: 14 + (i % 2), opacity: 0.52 }}>🌿</span>
                              ))}
                              {[0, 1, 2, 3].map((i) => (
                                <span key={`flower-${i}`} style={{ position: 'absolute', right: `${4 + i * 16}%`, top: `${14 + (i % 2) * 30}%`, fontSize: 11 + (i % 2), opacity: 0.58 }}>🌼</span>
                              ))}
                              {[0, 1, 2, 3, 4].map((i) => (
                                <span key={`pebble-${i}`} style={{ position: 'absolute', left: `${10 + i * 17}%`, bottom: `${6 + (i % 3) * 6}%`, fontSize: 10, opacity: 0.38 }}>🪨</span>
                              ))}
                            </div>

{(tiles || []).map((p, idx) => {
                              const row = Math.floor(idx / rowSize);
                              const col = idx % rowSize;
                              const x = 14 + col * 18;
                              const y = 16 + row * 17;
                              const isSelected = selectedSoilIdx === idx;
                              const isPlanting = plantingSoilIdx === idx;
                              const isSprouting = sproutSoilIdx === idx;

if (!p) {
                                return (
                                  <button
                                    key={`soil-${idx}`}
                                    type="button"
                                    onClick={(e) => {
                                      playSoilHaptic();
                                      setInspectedPlantId(null);
                                      setInspectOverlay(null);
                                      const r = e.currentTarget?.getBoundingClientRect?.();
                                      if (r) setGardenSpark({ x: r.left + r.width / 2, y: r.top + r.height / 2 });
                                      setTimeout(() => setGardenSpark(null), 700);
                                      setSelectedSoilIdx((prev) => (prev === idx ? null : idx));
                                    }}
                                    style={{
                                      position: 'absolute',
                                      left: `${x}%`,
                                      top: `${y}%`,
                                      width: '14%',
                                      height: '14%',
                                      transform: 'translate(-50%, -50%)',
                                      border: 'none',
                                      background: 'transparent',
                                      borderRadius: 999,
                                      cursor: 'pointer',
                                      display: 'flex',
                                      alignItems: 'center',
                                      justifyContent: 'center'
                                    }}
                                  >
                                    <span
                                      aria-hidden="true"
                                      style={{
                                        width: '100%',
                                        height: '100%',
                                        borderRadius: '50%',
                                        background: 'radial-gradient(70% 60% at 50% 40%, rgba(171,114,70,0.45), rgba(66,40,24,0.9))',
                                        boxShadow: isSelected
                                          ? '0 0 16px rgba(253,181,21,0.45), inset 0 8px 12px rgba(0,0,0,0.22)'
                                          : 'inset 0 8px 12px rgba(0,0,0,0.2)',
                                        animation: isSelected ? 'soilGlowPulse 1.6s ease-in-out infinite' : 'none'
                                      }}
                                    />
                                    {isPlanting && (
                                      <>
                                        <span style={{ position: 'absolute', fontSize: 16, animation: 'seedDropIn 450ms ease-out forwards' }}>🌰</span>
                                        <span style={{ position: 'absolute', left: '50%', top: '60%', animation: 'dirtPuff 450ms ease-out forwards' }}>💨</span>
                                      </>
                                    )}
                                    {isSprouting && (
                                      <span style={{ position: 'absolute', fontSize: 18, animation: 'sproutPopIn 520ms ease-out forwards' }}>🌱</span>
                                    )}
                                  </button>
                                );
                              }

return (
                                <div
                                  key={p.id}
                                  style={{
                                    position: 'absolute',
                                    left: `${x}%`,
                                    top: `${y}%`,
                                    transform: 'translate(-50%, -50%)',
                                    width: '14%',
                                    height: '18%',
                                    pointerEvents: 'none'
                                  }}
                                >
                                  <div
                                    aria-hidden="true"
                                    style={{
                                      position: 'absolute',
                                      left: '50%',
                                      bottom: '8%',
                                      transform: 'translateX(-50%)',
                                      width: '78%',
                                      height: '22%',
                                      borderRadius: '50%',
                                      background: 'radial-gradient(70% 70% at 50% 50%, rgba(40,24,14,0.42), rgba(40,24,14,0))'
                                    ,
                                      zIndex: 2
                                    }}
                                  />
                                  <div
                                    style={{
                                      position: 'absolute',
                                      left: '50%',
                                      bottom: '11%',
                                      transform: `translateX(calc(-50% + ${timerShiftX})) scale(${groupScale})`,
                                      display: 'flex',
                                      flexDirection: 'column',
                                      alignItems: 'center',
                                      justifyContent: 'flex-start',
                                      gap: 2,
                                      zIndex: 3,
                                      animation: visualStage >= 2 ? 'plantWindSway 2.2s ease-in-out infinite' : 'none',
                                      pointerEvents: 'none'
                                    }}
                                  >
                                    {!p.isReady ? (
                                      <div
                                        style={{
                                          ...timerPillStyle,
                                          borderRadius: 999,
                                          padding: '3px 8px',
                                          fontFamily: SERIF,
                                          fontSize: 8,
                                          fontWeight: 600,
                                          letterSpacing: 0.35,
                                          whiteSpace: 'nowrap',
                                          lineHeight: 1.2,
                                          backdropFilter: 'blur(5px)',
                                          WebkitBackdropFilter: 'blur(5px)',
                                          transform: `translateY(${timerStackNudgePx}px)`,
                                          opacity: timerOpacity,
                                          animation: 'gardenTimerPulse 3.4s ease-in-out infinite',
                                          transition: 'opacity 280ms ease, transform 280ms ease'
                                        }}
                                      >
                                        {fmtGrowthTimer(eta || 0)}
                                      </div>
                                    ) : null}
                                    <div
                                      style={{
                                        transform: `scale(${visualStage === 1 ? (0.72 + growthProgress * 0.2) : (visualStage === 2 ? (0.86 + growthProgress * 0.22) : (0.96 + growthProgress * 0.1))})`,
                                        fontSize: visualStage === 1 ? 14 : (visualStage === 2 ? 18 : 25),
                                        opacity: visualStage === 1 ? 0.88 : 1,
                                        transition: 'transform 220ms ease, font-size 220ms ease, opacity 220ms ease',
                                        pointerEvents: 'none'
                                      }}
                                    >
                                    {isCarrot ? (
                                      visualStage === 1 ? (
                                        <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', animation: 'soilSettle 260ms ease-out' }}>
                                          <span style={{ fontSize: 9, color: '#5a3a24' }}>●</span>
                                        </span>
                                      ) : visualStage === 2 ? (
                                        <span style={{ display: 'inline-flex', alignItems: 'flex-end', animation: 'plantWindSway 2.4s ease-in-out infinite' }}>
                                          <span style={{ fontSize: 14, color: '#6cbf63' }}>🌿</span>
                                        </span>
                                      ) : (
                                        <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'flex-end', justifyContent: 'center', animation: 'soilSettle 360ms ease-out' }}>
                                          <span style={{ fontSize: 17, transform: 'translateY(1px)' }}>🥕</span>
                                          <span style={{ position: 'absolute', top: -9, fontSize: 12, color: '#68b85d', animation: 'plantWindSway 2.2s ease-in-out infinite' }}>🌿</span>
                                        </span>
                                      )
                                    ) : stageGlyph}
                                    </div>
                                  </div>
                                  <button
                                    type="button"
                                    disabled={gardenBusy}
                                    onMouseEnter={(e) => {
                                      setInspectedPlantId(p.id);
                                      const r = e.currentTarget?.getBoundingClientRect?.();
                                      if (!r) return;
                                      setInspectOverlay({
                                        plantId: p.id,
                                        name: p.type,
                                        rarity: rarityLabel,
                                        etaText: p.isReady ? 'Ready to harvest' : `In ${fmtGrowthTimer(eta || 0)}`,
                                        coinReward: cfg.coinReward,
                                        stage: visualStage,
                                        x: r.left + r.width / 2,
                                        y: r.top + r.height / 2,
                                        placement: overlayPlacement
                                      });
                                    }}
                                    onMouseLeave={() => {
                                      setInspectedPlantId((prev) => (prev === p.id ? null : prev));
                                      setInspectOverlay((prev) => (prev?.plantId === p.id ? null : prev));
                                    }}
                                    onClick={(e) => {
                                      playSoilHaptic();
                                      const nextInspected = inspectedPlantId === p.id ? null : p.id;
                                      setInspectedPlantId(nextInspected);
                                      const r = e.currentTarget?.getBoundingClientRect?.();
                                      if (nextInspected && r) {
                                        setInspectOverlay({
                                          plantId: p.id,
                                          name: p.type,
                                          rarity: rarityLabel,
                                          etaText: p.isReady ? 'Ready to harvest' : `In ${fmtGrowthTimer(eta || 0)}`,
                                          coinReward: cfg.coinReward,
                                          stage: visualStage,
                                          x: r.left + r.width / 2,
                                          y: r.top + r.height / 2,
                                          placement: overlayPlacement
                                        });
                                      } else {
                                        setInspectOverlay((prev) => (prev?.plantId === p.id ? null : prev));
                                      }
                                      if (!p.isReady) return;
                                      if (r) setGardenSpark({ x: r.left + r.width / 2, y: r.top - 8 });
                                      setTimeout(() => setGardenSpark(null), 900);
                                      void harvestInGarden(p.id);
                                    }}
                                    style={{
                                      position: 'absolute',
                                      left: '50%',
                                      bottom: '10%',
                                      transform: 'translateX(-50%)',
                                      width: '84%',
                                      height: '72%',
                                      background: 'transparent',
                                      border: 'none',
                                      padding: 0,
                                      margin: 0,
                                      pointerEvents: 'auto',
                                      cursor: gardenBusy ? 'wait' : 'pointer',
                                      zIndex: 2
                                    }}
                                  />
                                </div>
                              );
                            })}
                          </div>
                        </div>

<div style={{ ...styles.tinyLabel, marginBottom: 8 }}>
                          {selectedSoilIdx != null
                            ? `Selected plot ${selectedSoilIdx + 1} · choose seed (1 seed)`
                            : 'Tap an empty soil plot to plant a seed'}
                        </div>
                        {selectedSoilIdx != null && (
                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 6 }}>
                            {(unlockedVegetables || []).map((t) => (
                              <button
                                key={t}
                                type="button"
                                disabled={gardenBusy || (gp?.seeds ?? 0) < 1}
                                onClick={() => void plantFromSoilTile(selectedSoilIdx, t)}
                                style={{
                                  padding: '8px 10px',
                                  border: `1.5px solid ${C.ink}`,
                                  background: (gp?.seeds ?? 0) < 1 ? 'rgba(0,0,0,0.06)' : C.yellow,
                                  borderRadius: 12,
                                  cursor: (gp?.seeds ?? 0) < 1 ? 'not-allowed' : 'pointer',
                                  fontFamily: SERIF,
                                  fontSize: 14
                                }}
                              >
                                {vegEmoji[t] || '🌿'} {t}
                              </button>
                            ))}
                          </div>
                        )}

{!gardenBridge?.profile && (
                          <p style={{ ...styles.tinyLabel, marginTop: 12, color: C.muted, lineHeight: 1.45 }}>
                            Offline / solo: garden is stored on this device under rewards. Pass <code style={{ fontFamily: MONO }}>gardenBridge</code> from your Convex host for server-backed sync.
                          </p>
                        )}
                      </div>
                    );
                  })() : (activeTab === 'inbox' ? (
                    hasPostedToday ? (
                      user?.id ? (
                        (myInbox || []).length > 0 ? (
                          (myInbox || []).map(k => renderKudoCard(k))
                        ) : (
                          <div style={{ ...styles.card, textAlign: 'center', padding: 28 }}>
                            <div style={{ fontSize: 36, marginBottom: 8 }}>💌</div>
                            <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontWeight: 400, fontSize: 18, marginBottom: 6 }}>No gratitude notes yet.</div>
                            <div style={{ ...styles.tinyLabel, color: C.muted, lineHeight: 1.5, marginBottom: 14 }}>
                              WHEN SOMEONE PICKS YOU, IT LANDS HERE.
                            </div>
                            <button
                              onClick={() => share && share()}
                              style={{
                                background: C.ink, color: C.yellow,
                                border: `1.5px solid ${C.ink}`,
                                borderRadius: 999, padding: '10px 16px',
                                fontFamily: MONO, fontWeight: 800, fontSize: 12, letterSpacing: 0.8, textTransform: 'uppercase',
                                cursor: 'pointer', boxShadow: '0 12px 22px rgba(79, 56, 36, 0.16)'
                              }}
                            >
                              Invite friends ↗
                            </button>
                          </div>
                        )
                      ) : (
                        <div style={{ ...styles.card, textAlign: 'center', padding: 28 }}>
                          <div style={{ fontSize: 36, marginBottom: 8 }}>🔐</div>
                          <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 18, marginBottom: 6 }}>Sign in to see your inbox.</div>
                          <div style={{ ...styles.tinyLabel, color: C.muted, lineHeight: 1.5, marginBottom: 14 }}>
                            YOUR SHOUTOUTS LIVE BEHIND YOUR HANDLE.
                          </div>
                          {openAuth && (
                            <button
                              onClick={() => openAuth()}
                              style={{
                                background: C.ink, color: C.yellow,
                                border: `1.5px solid ${C.ink}`,
                                borderRadius: 999, padding: '10px 16px',
                                fontFamily: MONO, fontWeight: 800, fontSize: 12, letterSpacing: 0.8, textTransform: 'uppercase',
                                cursor: 'pointer', boxShadow: '0 12px 22px rgba(79, 56, 36, 0.16)'
                              }}
                            >
                              Sign in
                            </button>
                          )}
                        </div>
                      )
                    ) : (
                      <div style={{ ...styles.card, textAlign: 'center', padding: 28, color: C.muted, fontFamily: SERIF, fontStyle: 'italic' }}>
                        Your gratitude inbox unlocks after you share today.
                      </div>
                    )
                  ) : (
                    <>
                      {(feed || []).map((kudo) => renderKudoCard(kudo))}
                      {(feed || []).length === 0 && (
                        <div style={{ textAlign: 'center', padding: 40, color: C.muted, fontFamily: SERIF, fontStyle: 'italic' }}>
                          Be the first to share some gratitude with the community today.
                        </div>
                      )}
                    </>
                  )
                )
                }
                </div>
              </>
            );
          })()}
        </div>

{/* FOOTER STRIP — editorial closing line */}
        <div style={{ marginTop: 24, paddingTop: 14, borderTop: `1.5px dashed ${C.border}`, ...styles.tinyLabel, display: 'flex', justifyContent: 'space-between' }}>
          <span>UNSW · {yearStr}</span>
          <span>GRATITUDE SHARED · COMMUNITY LIFTED</span>
        </div>
      </div>

{showDailyCheckIn && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Daily gratitude check-in"
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 4000,
            display: 'flex',
            alignItems: 'stretch',
            justifyContent: 'center',
            overflow: 'auto',
            background: `
              radial-gradient(ellipse 120% 85% at 50% -5%, rgba(255,237,157,1) 0%, rgba(253,218,132,0.65) 40%, transparent 72%),
              linear-gradient(170deg, #fff8ea 0%, #ffebbf 43%, #ffd66a 100%)
            `
          }}
        >
          <div
            aria-hidden="true"
            style={{
              position: 'fixed',
              top: '-12%',
              left: '22%',
              width: '118%',
              height: '76%',
              background: `radial-gradient(circle at 50% 40%, rgba(255,237,173,1), rgba(255,205,112,0.28) 45%, transparent 68%)`,
              animation: 'sunAura 11s ease-in-out infinite'
            }}
          />
          {(Array.from({ length: 18 })).map((_, i) => (
            <span
              key={`p-${i}`}
              aria-hidden="true"
              style={{
                position: 'fixed',
                left: `${(i * 61) % 96}%`,
                bottom: `${4 + (i * 23) % 22}%`,
                fontSize: 9 + ((i * 7) % 15),
                color: i % 2 ? 'rgba(255,248,226,1)' : 'rgba(253,181,21,1)',
                textShadow: '0 0 18px rgba(255,238,174,1)',
                pointerEvents: 'none',
                animation: `particleDrift ${4.8 + ((i % 5) * 0.62)}s ease-in-out infinite`,
                animationDelay: `${((i % 9) * 0.37)}s`
              }}
            >
              {i % 3 === 0 ? '✦' : i % 3 === 1 ? '·' : '✶'}
            </span>
          ))}
          <div
            aria-hidden="true"
            style={{
              position: 'fixed',
              inset: 0,
              pointerEvents: 'none',
              overflow: 'hidden'
            }}
          >
            {renderCheckInCapybaraScene()}
          </div>

<div style={{ flex: 1, maxWidth: 480, margin: '0 auto', padding: `max(env(safe-area-inset-top,20px), 22px) 18px calc(24px + env(safe-area-inset-bottom, 14px))`, position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div
              style={{
                borderRadius: 22,
                background: 'linear-gradient(160deg, rgba(255,255,255,0.58) 0%, rgba(255,248,229,0.46) 100%)',
                backdropFilter: 'blur(22px)',
                WebkitBackdropFilter: 'blur(22px)',
                border: '1px solid rgba(255,255,255,0.92)',
                boxShadow: `
                  inset 0 1px 0 rgba(255,255,255,0.73),
                  0 4px 32px rgba(253,181,21,0.22),
                  0 26px 64px rgba(40,34,22,0.12)
                `,
                padding: '22px 18px',
                overflow: 'hidden'
              }}
            >
              <div style={{ ...styles.tinyLabel, letterSpacing: 3, marginBottom: 10, color: C.ink }}>Daily Gratitude Check-In</div>
              <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
                {[1, 2, 3].map((n) => (
                  <span
                    key={n}
                    style={{
                      flex: 1,
                      height: 4,
                      borderRadius: 2,
                      background: checkInStep >= n ? 'linear-gradient(90deg,#ffd43a,#fde27a,#ffd43a)' : 'rgba(110,107,93,0.25)',
                      backgroundSize: checkInStep >= n ? '200% 100%' : 'auto',
                      animation: checkInStep >= n ? 'shimmer 4s linear infinite' : 'none'
                    }}
                  />
                ))}
              </div>

<div key={checkInStep} style={{ animation: 'checkStepIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards' }}>
                {checkInStep === 1 && (
                  <>
                    <h2 style={{ margin: '0 0 8px', fontFamily: SERIF, fontWeight: 500, fontSize: 28, lineHeight: 1.2, letterSpacing: '-0.03em', color: C.ink }}>
                      {todaysPromptText}
                    </h2>
                    <p style={{ margin: '0 0 16px', color: C.inkSoft, fontFamily: SERIF, fontStyle: 'italic', fontSize: 15 }}>
                      Breathe in. One honest line is enough to begin your day softly.
                    </p>
                    <textarea
                      value={ciWhat}
                      onChange={(e) => setCiWhat(e.target.value)}
                      placeholder="This morning… a friend… a peaceful moment..."
                      rows={6}
                      style={{
                        width: '100%',
                        boxSizing: 'border-box',
                        borderRadius: 16,
                        border: `1px solid rgba(214,207,182,0.95)`,
                        padding: '14px 14px',
                        fontSize: 16,
                        fontFamily: SERIF,
                        resize: 'vertical',
                        minHeight: 120,
                        background: 'rgba(255,253,246,0.92)',
                        color: C.ink,
                        boxShadow: 'inset 0 2px 12px rgba(255,229,157,0.22)'
                      }}
                      maxLength={280}
                    />
                    <button
                      type="button"
                      disabled={!(ciWhat || '').trim()}
                      onClick={() => setCheckInStep(2)}
                      style={{
                        marginTop: 16,
                        width: '100%',
                        padding: '16px',
                        borderRadius: 999,
                        border: 'none',
                        fontFamily: SERIF,
                        fontWeight: 600,
                        fontSize: 17,
                        color: '#1a1610',
                        background: 'linear-gradient(110deg,#ffe56d,#ffd43a,#fff1b8)',
                        boxShadow: '0 6px 26px rgba(253,181,21,0.45)',
                        cursor: (ciWhat || '').trim() ? 'pointer' : 'not-allowed',
                        opacity: (ciWhat || '').trim() ? 1 : 0.52
                      }}
                    >
                      Continue
                    </button>
                  </>
                )}

{checkInStep === 2 && (
                  <>
                    <h2 style={{ margin: '0 0 8px', fontFamily: SERIF, fontWeight: 500, fontSize: 26, lineHeight: 1.22, letterSpacing: '-0.03em', color: C.ink }}>
                      {GRATITUDE_WHY_PROMPT_TEXT}
                    </h2>
                    <p style={{ margin: '0 0 16px', color: C.inkSoft, fontFamily: SERIF, fontStyle: 'italic', fontSize: 15 }}>
                      The why holds the warmth. No pressure — share what feels true.
                    </p>
                    <textarea
                      value={ciWhy}
                      onChange={(e) => setCiWhy(e.target.value)}
                      placeholder={todaysPrompt.placeholder}
                      rows={6}
                      style={{
                        width: '100%',
                        boxSizing: 'border-box',
                        borderRadius: 16,
                        border: `1px solid rgba(214,207,182,0.95)`,
                        padding: '14px',
                        fontSize: 15,
                        fontFamily: SERIF,
                        resize: 'vertical',
                        minHeight: 110,
                        background: 'rgba(255,253,246,0.92)',
                        color: C.ink,
                        boxShadow: 'inset 0 2px 12px rgba(255,229,157,0.18)'
                      }}
                      maxLength={320}
                    />
                    <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
                      <button
                        type="button"
                        onClick={() => setCheckInStep(1)}
                        style={{
                          flex: 1,
                          padding: '14px',
                          borderRadius: 999,
                          border: `1px solid rgba(94,82,62,0.35)`,
                          background: 'rgba(255,255,255,0.52)',
                          fontFamily: MONO,
                          fontSize: 10,
                          letterSpacing: 1.3,
                          textTransform: 'uppercase',
                          color: C.ink,
                          cursor: 'pointer'
                        }}
                      >
                        Back
                      </button>
                      <button
                        type="button"
                        onClick={() => setCheckInStep(3)}
                        style={{
                          flex: 2,
                          padding: '14px',
                          borderRadius: 999,
                          border: 'none',
                          fontFamily: SERIF,
                          fontWeight: 600,
                          fontSize: 17,
                          color: '#1a1610',
                          background: 'linear-gradient(110deg,#ffe56d,#ffd43a,#fff1b8)',
                          boxShadow: '0 6px 26px rgba(253,181,21,0.45)',
                          cursor: 'pointer'
                        }}
                      >
                        Continue
                      </button>
                    </div>
                  </>
                )}

{checkInStep === 3 && (
                  <>
                    <h2 style={{ margin: '0 0 8px', fontFamily: SERIF, fontWeight: 500, fontSize: 24, color: C.ink }}>
                      Add a gentle snapshot
                    </h2>
                    <p style={{ margin: '0 0 14px', color: C.muted, fontFamily: SERIF, fontStyle: 'italic', fontSize: 14 }}>
                      Optional • A photo isn’t required to feel grateful.
                    </p>
                    <input
                      ref={checkInFileRef}
                      type="file"
                      accept="image/*"
                      style={{ display: 'none' }}
                      onChange={(e) => handlePhotoFileChange(e, true)}
                    />
                    <button
                      type="button"
                      disabled={ciUploadingPhoto}
                      onClick={() => handleAddPhotoTap(true)}
                      style={{
                        width: '100%',
                        minHeight: 112,
                        borderRadius: 20,
                        border: `2px dashed rgba(176,157,118,0.55)`,
                        background: `
                          radial-gradient(circle at 30% -10%, rgba(255,239,173,0.55), transparent 45%),
                          rgba(255,252,239,0.78)
                        `,
                        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.75), 0 0 28px rgba(255,214,102,0.35)',
                        fontFamily: SERIF,
                        fontStyle: 'italic',
                        fontSize: 16,
                        color: C.ink,
                        cursor: ciUploadingPhoto ? 'wait' : 'pointer'
                      }}
                    >
                      {ciUploadingPhoto ? 'Uploading photo…' : (ciPhotoUrl ? 'Tap to replace photo' : 'Tap to attach a photo')}
                    </button>
                    {ciPhotoError && (
                      <p style={{ margin: '10px 0 0', color: '#a44', fontFamily: MONO, fontSize: 11 }}>{ciPhotoError}</p>
                    )}
                    {ciPhotoUrl && (
                      <img
                        src={ciPhotoUrl}
                        alt=""
                        style={{
                          marginTop: 14,
                          width: '100%',
                          borderRadius: 18,
                          maxHeight: 200,
                          objectFit: 'cover',
                          animation: 'photoGlowIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards'
                        }}
                      />
                    )}
                    <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
                      <button
                        type="button"
                        onClick={() => setCheckInStep(2)}
                        style={{
                          flex: 1,
                          padding: '14px',
                          borderRadius: 999,
                          border: `1px solid rgba(94,82,62,0.35)`,
                          background: 'rgba(255,255,255,0.52)',
                          fontFamily: MONO,
                          fontSize: 10,
                          letterSpacing: 1.3,
                          textTransform: 'uppercase',
                          cursor: 'pointer'
                        }}
                      >
                        Back
                      </button>
                      <button
                        type="button"
                        disabled={checkInSubmitting || !(ciWhat || '').trim()}
                        onClick={handleDailyCheckInFinish}
                        style={{
                          flex: 2,
                          padding: '15px',
                          borderRadius: 999,
                          border: 'none',
                          fontFamily: SERIF,
                          fontWeight: 600,
                          fontSize: 16,
                          color: '#1a1610',
                          background: 'linear-gradient(118deg,#fff2a8,#ffd43a,#ffea9b)',
                          boxShadow: '0 8px 32px rgba(233,173,54,0.55)',
                          cursor: checkInSubmitting || !(ciWhat || '').trim() ? 'not-allowed' : 'pointer',
                          opacity: checkInSubmitting || !(ciWhat || '').trim() ? 0.55 : 1
                        }}
                      >
                        {checkInSubmitting ? 'Saving…' : `Finish · +${DAILY_CHECKIN_XP} XP`}
                      </button>
                    </div>
                    <p style={{ textAlign: 'center', margin: '12px 0 0', fontFamily: MONO, fontSize: 10, letterSpacing: 1.1, opacity: 0.75 }}>
                      +{DAILY_CHECKIN_SEEDS} seeds · streak continues
                    </p>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{animatingUnlock && (
        <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 2000, overflow: 'hidden' }}>
          {Array.from({ length: 48 }).map((_, i) => {
            const left = Math.random() * 100;
            const delay = Math.random() * 0.5;
            const duration = 1 + Math.random();
            const colors = [C.yellow, C.yellowDeep, C.red, C.ink];
            const color = colors[Math.floor(Math.random() * (colors || []).length)];
            const size = 8 + Math.random() * 8;
            return (
              <div
                key={i}
                style={{
                  position: 'absolute',
                  left: `${left}%`,
                  top: -20,
                  width: size,
                  height: size,
                  backgroundColor: color,
                  borderRadius: Math.random() > 0.5 ? '50%' : '0',
                  animation: `confettiDrop ${duration}s ease-in forwards`,
                  animationDelay: `${delay}s`
                }}
              />
            );
          })}
        </div>
      )}
    </div>
  );
}</article></body></html>