// Community, LIFT AI chat view, side drawer, Collection Detail, Profile Health/Library

// ────────────────────────────── Side Drawer ──────────────────────────────
function SideDrawer({ open, onClose, coach, t, dark, setDark }) {
  if (!open) return null;
  const go = (fn) => () => {
    onClose();
    // let drawer animation close before pushing
    setTimeout(() => fn && fn(), 60);
  };
  const items = [
    { icon: <Icon.Activity size={18} color={t.text}/>, label: 'Results',          onClick: go(window.__openResults) },
    { icon: <Icon.Pencil   size={18} color={t.text}/>, label: 'Progress Photos',  onClick: go(window.__openResults) },
    { icon: <Icon.Scan     size={18} color={t.text}/>, label: 'Settings',         onClick: go(window.__openSettings) },
    { icon: <Icon.Info     size={18} color={t.text}/>, label: 'Help & Support',   onClick: go(window.__openSettings) },
  ];
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 120,
      background: 'rgba(0,0,0,0.4)',
      animation: 'fadeIn .2s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '78%', height: '100%', background: t.bg,
        padding: '60px 18px 24px',
        display: 'flex', flexDirection: 'column', gap: 20,
        animation: 'slideInLeft .25s ease',
        boxShadow: '10px 0 40px rgba(0,0,0,0.3)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginRight: -4 }}>
          <button onClick={onClose} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 4,
          }}><Icon.Close size={20} color={t.text}/></button>
        </div>
        {/* Profile */}
        <div>
          <div style={{
            width: 82, height: 82, borderRadius: 999,
            border: `3px solid ${t.primary}`, padding: 3,
            background: t.surface, marginBottom: 10,
          }}>
            <div style={{
              width: '100%', height: '100%', borderRadius: 999,
              background: `linear-gradient(135deg, ${t.secondarySoft}, ${t.secondary})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 700, fontSize: 28,
            }}>{coach.coach.split(' ').map(n => n[0]).join('').slice(0, 2)}</div>
          </div>
          <div style={{ fontSize: 18, fontWeight: 700, color: t.text }}>{coach.coach.split(' ')[0]}</div>
          <div style={{ fontSize: 12, color: t.textMuted, marginTop: 2 }}>
            {coach.coach.toLowerCase().replace(' ', '')}@gmail.com
          </div>
        </div>

        <div style={{ height: 1, background: t.border }}/>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {items.map(it => (
            <button key={it.label} onClick={it.onClick} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '12px 4px', display: 'flex', alignItems: 'center', gap: 14,
              fontFamily: 'inherit', textAlign: 'left',
            }}>
              {it.icon}
              <span style={{ fontSize: 14, fontWeight: 600, color: t.text }}>{it.label}</span>
            </button>
          ))}
        </div>

        <div style={{ flex: 1 }}/>

        {/* Appearance */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ flex: 1, fontSize: 13, color: t.text }}>Appearance</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button onClick={() => setDark(false)} style={{
              width: 32, height: 32, borderRadius: 999, border: 'none', cursor: 'pointer',
              background: !dark ? t.primary : t.surface3,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon.Sun size={14} color={!dark ? t.onPrimary : t.textMuted}/></button>
            <button onClick={() => setDark(true)} style={{
              width: 32, height: 32, borderRadius: 999, border: 'none', cursor: 'pointer',
              background: dark ? t.primary : t.surface3,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon.Moon size={14} color={dark ? t.onPrimary : t.textMuted}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────── Community ──────────────────────────────
// Matches reference: full-bleed hero w/ overlaid back button, circular avatar
// half-overlapping the bottom, title + member stats, long description with
// "Read more", composer row, then a feed of posts with real photos.
function CommunityScreen({ t, coach, dark, nav }) {
  const [expanded, setExpanded] = React.useState(false);

  const HERO = 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1200&q=75&auto=format&fit=crop'; // gym dumbbells
  const AVATAR = 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=200&q=70&auto=format&fit=crop';
  const MY_AVATAR = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&q=70&auto=format&fit=crop';

  const description =
    'A supportive community for all fitness levels. Share your wins, ask questions, and stay motivated together. ' +
    "Whether you're just starting out or chasing a new PR, you belong here. Coaches and members check in daily to celebrate progress, swap advice, and keep the energy up.";
  const preview = description.slice(0, 95) + '…';

  const posts = [
    {
      user: 'Marcus Chen', time: '2h ago',
      avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&q=70&auto=format&fit=crop',
      text: "Just hit a new deadlift PR! 225lbs 🔥 Never thought I'd get here. This community keeps me going!",
      image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=900&q=70&auto=format&fit=crop',
      likes: 12, comments: 4,
    },
    {
      user: 'Tami Roberts', time: '5h ago',
      avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&q=70&auto=format&fit=crop',
      text: 'Meal prepped for the whole week! Feeling organized 💪 Who else preps on Sundays?',
      image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=900&q=70&auto=format&fit=crop',
      likes: 28, comments: 9,
    },
    {
      user: 'Jordan Lee', time: '1d ago',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&q=70&auto=format&fit=crop',
      text: 'Week 6 of the program done. Down 4lbs and feeling stronger than ever. Thanks coach!',
      image: null,
      likes: 19, comments: 5,
    },
  ];

  return (
    <>
      {/* Hero image with overlaid back button */}
      <div style={{ position: 'relative', height: 230, overflow: 'hidden' }}>
        <img src={HERO} alt="" style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 40%, rgba(0,0,0,0.35) 100%)',
        }}/>
        <button onClick={() => nav.pop()} style={{
          position: 'absolute', top: 58, left: 14,
          width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.35)',
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Back size={18} color="#fff"/>
        </button>

        {/* Avatar + title overlay, bottom-left */}
        <div style={{
          position: 'absolute', left: 18, bottom: 14, right: 18,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 999, overflow: 'hidden',
            border: `3px solid ${t.bg}`, flexShrink: 0,
            background: '#333',
          }}>
            <img src={AVATAR} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', lineHeight: 1.15 }}>Fitness Community</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', marginTop: 3 }}>
              24 members • <span style={{ color: '#fff' }}>5 online</span>
            </div>
          </div>
        </div>
      </div>

      {/* Description */}
      <div style={{ padding: '14px 18px 0', fontSize: 13, lineHeight: 1.55, color: t.textMuted }}>
        {expanded ? description : preview}
        {' '}
        <button onClick={() => setExpanded(e => !e)} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          color: t.primary, fontWeight: 700, fontSize: 13, fontFamily: 'inherit',
        }}>{expanded ? 'Show less' : 'Read more'}</button>
      </div>

      {/* Composer */}
      <div style={{ padding: '14px 18px 0' }}>
        <Card t={t} style={{
          padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 34, height: 34, borderRadius: 999, overflow: 'hidden', flexShrink: 0,
          }}>
            <img src={MY_AVATAR} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          </div>
          <div style={{ fontSize: 13, color: t.textMuted }}>
            Share something with the community...
          </div>
        </Card>
      </div>

      {/* Feed */}
      <div style={{ padding: '14px 18px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {posts.map((p, i) => (
          <Card key={i} t={t} style={{ padding: '14px 14px 10px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 999, overflow: 'hidden', flexShrink: 0,
              }}>
                <img src={p.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{p.user}</div>
                <div style={{ fontSize: 11, color: t.textMuted, marginTop: 1 }}>{p.time}</div>
              </div>
              <button style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
                <Icon.MoreVertical size={16} color={t.textMuted}/>
              </button>
            </div>
            <div style={{ fontSize: 14, color: t.text, lineHeight: 1.5, marginBottom: p.image ? 12 : 10 }}>
              {p.text}
            </div>
            {p.image && (
              <div style={{ borderRadius: 12, overflow: 'hidden', marginBottom: 8 }}>
                <img src={p.image} alt="" style={{
                  width: '100%', height: 210, objectFit: 'cover', display: 'block',
                }}/>
              </div>
            )}
            <div style={{ display: 'flex', gap: 20, paddingTop: 4 }}>
              <button style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit',
              }}>
                <Icon.Heart size={16} color={t.textMuted}/>
                <span style={{ fontSize: 13, color: t.textMuted, fontWeight: 500 }}>{p.likes}</span>
              </button>
              <button style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: 0,
                display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit',
              }}>
                <Icon.Comment size={16} color={t.textMuted}/>
                <span style={{ fontSize: 13, color: t.textMuted, fontWeight: 500 }}>{p.comments}</span>
              </button>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

// ────────────────────────────── LIFT AI Chat View ──────────────────────────────
// Separate chat state for when AI is toggled on
function LiftAIChatView({ t, coach, dark, onToggleOff }) {
  const [text, setText] = React.useState('');
  const [messages, setMessages] = React.useState([
    { role: 'ai', text: `Hi ${coach.coach.split(' ')[0]} 👋 I'm LIFT AI, trained on Coach ${coach.coach.split(' ')[0]}'s programs. Ask me anything.` },
    { role: 'user', text: 'How should I warm up for heavy bench day?' },
    { role: 'ai', text: 'A solid warm-up for heavy bench:\n\n1. 5 min bike/row\n2. Band pull-aparts — 2×15\n3. Push-ups — 2×10\n4. Empty bar bench — 1×10\n5. Ramp up in 3-4 sets (50%, 65%, 80%, 90%)\n\nKeep rest short between ramp-ups. Want me to save this as a warm-up template?' },
  ]);
  const [busy, setBusy] = React.useState(false);

  const ask = async () => {
    if (!text.trim() || busy) return;
    const q = text;
    setText('');
    setMessages(m => [...m, { role: 'user', text: q }]);
    setBusy(true);
    try {
      const ans = await window.claude.complete(
        `You are LIFT AI, a fitness coaching assistant for the ${coach.wordmark} app. ` +
        `Respond concisely (under 80 words) with practical, actionable advice. ` +
        `User asks: ${q}`
      );
      setMessages(m => [...m, { role: 'ai', text: ans }]);
    } catch (e) {
      setMessages(m => [...m, { role: 'ai', text: "I'm having trouble right now. Try again in a moment." }]);
    }
    setBusy(false);
  };

  return (
    <>
      {/* Top user header with AI state */}
      <div style={{
        padding: '110px 18px 14px', display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 42, height: 42, borderRadius: 999,
          background: `linear-gradient(135deg, ${t.primary}, ${t.primarySoft})`,
          color: t.onPrimary, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Sparkle size={18} color={t.onPrimary}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: t.text, display: 'flex', alignItems: 'center', gap: 5 }}>
            LIFT AI
            <span style={{
              background: t.primarySoft, color: t.primary,
              padding: '1px 7px', borderRadius: 999,
              fontSize: 9, fontWeight: 700, letterSpacing: 0.4,
            }}>BETA</span>
          </div>
          <div style={{ fontSize: 12, color: t.primary, fontWeight: 600 }}>
            Trained on Coach {coach.coach.split(' ')[0]}'s plans
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon.Sparkle size={14} color={t.primary}/>
          <span style={{ fontSize: 11, fontWeight: 700, color: t.text }}>AI</span>
          <Switch on={true} setOn={() => onToggleOff()} t={t}/>
        </div>
      </div>
      <div style={{ height: 1, background: t.border }}/>

      {/* Messages */}
      <div style={{
        padding: '14px 18px 14px', display: 'flex', flexDirection: 'column', gap: 10,
        minHeight: 440,
      }}>
        {messages.map((m, i) => (
          m.role === 'ai' ? (
            <div key={i} style={{ alignSelf: 'flex-start', maxWidth: '86%', display: 'flex', gap: 8 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 999, flexShrink: 0,
                background: `linear-gradient(135deg, ${t.primary}, ${t.primarySoft})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Sparkle size={11} color={t.onPrimary}/>
              </div>
              <div style={{
                background: t.surface, color: t.text,
                padding: '10px 14px', borderRadius: 18, borderBottomLeftRadius: 6,
                fontSize: 14, lineHeight: 1.4, whiteSpace: 'pre-wrap',
                boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
              }}>{m.text}</div>
            </div>
          ) : (
            <div key={i} style={{
              alignSelf: 'flex-end', maxWidth: '78%',
              background: t.primary, color: t.onPrimary,
              padding: '10px 14px', borderRadius: 18, borderBottomRightRadius: 6,
              fontSize: 14, lineHeight: 1.4,
            }}>{m.text}</div>
          )
        ))}
        {busy && (
          <div style={{ alignSelf: 'flex-start', display: 'flex', gap: 8 }}>
            <div style={{
              width: 26, height: 26, borderRadius: 999, flexShrink: 0,
              background: `linear-gradient(135deg, ${t.primary}, ${t.primarySoft})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon.Sparkle size={11} color={t.onPrimary}/></div>
            <div style={{
              background: t.surface, color: t.textMuted,
              padding: '12px 16px', borderRadius: 18, borderBottomLeftRadius: 6,
              fontSize: 14, display: 'flex', gap: 4,
            }}>
              <Dot t={t}/><Dot t={t} delay={0.15}/><Dot t={t} delay={0.3}/>
            </div>
          </div>
        )}
      </div>

      {/* Suggested prompts */}
      <div style={{ padding: '0 14px 10px', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Design a warm-up', "What's my next workout?", 'Tips for progressive overload'].map(s => (
          <button key={s} onClick={() => setText(s)} style={{
            background: t.surface, border: `1px solid ${t.border}`,
            color: t.text, padding: '6px 12px', borderRadius: 999,
            fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
          }}>{s}</button>
        ))}
      </div>

      {/* Composer */}
      <div style={{ margin: '0 14px 14px', padding: '6px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: t.surface3, borderRadius: 999, padding: '6px 6px 6px 14px',
        }}>
          <input value={text} onChange={e => setText(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') ask(); }}
            placeholder="Ask LIFT AI..." style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 14, color: t.text, fontFamily: 'inherit',
            }}/>
          <button onClick={ask} disabled={!text.trim() || busy} style={{
            width: 34, height: 34, borderRadius: 999, border: 'none',
            background: t.primary, cursor: (text.trim() && !busy) ? 'pointer' : 'default',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity: (text.trim() && !busy) ? 1 : 0.5,
          }}>
            <Icon.Send size={15} color={t.onPrimary}/>
          </button>
        </div>
      </div>
    </>
  );
}

function Dot({ t, delay = 0 }) {
  return (
    <span style={{
      width: 6, height: 6, borderRadius: 999,
      background: t.textMuted,
      animation: `dotBounce 1s ${delay}s infinite`,
      display: 'inline-block',
    }}/>
  );
}

// ────────────────────────────── Collection Detail ──────────────────────────────
function CollectionDetailScreen({ t, coach, dark, nav, collection }) {
  const c = collection || {
    name: 'Nutrition Facts',
    count: 4,
    desc: 'Essential nutrition guides covering macros, micronutrients, meal timing, and how to eat for your goals.',
    img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=1200&q=75&auto=format&fit=crop',
  };
  const [expanded, setExpanded] = React.useState(false);

  // Items styled per reference: colored square thumbnails keyed to file type
  const items = [
    { title: 'Macros 101: Protein, Carbs & Fat', type: 'pdf',   time: '5 min read',   size: '1.2 MB' },
    { title: 'How to Meal Prep for a Busy Week', type: 'video', time: '12:30',        size: null },
    { title: 'Pre-Workout Nutrition Guide',      type: 'pdf',   time: '8 min read',   size: '680 KB' },
    { title: 'Mindful Eating Audio Guide',       type: 'audio', time: '18:42',        size: null },
  ];

  const typePalette = {
    pdf:   { bg: '#F7C948', fg: '#3B2E00' }, // amber
    video: { bg: '#4EC1D8', fg: '#062a30' }, // teal
    audio: { bg: '#A076F9', fg: '#18052B' }, // purple
  };
  const typeLabel = { pdf: 'PDF', video: 'VIDEO', audio: 'AUDIO' };

  const description = c.desc || (
    'A collection of essential resources hand-picked by your coach. ' +
    'Bookmark what you find helpful — everything stays in your library for later reference.'
  );
  const preview = description.length > 92 ? description.slice(0, 92) + '…' : description;
  const needsTruncate = description.length > 92;

  return (
    <>
      {/* Hero with overlaid back button */}
      <div style={{ position: 'relative', height: 220, overflow: 'hidden' }}>
        <img src={c.img} alt="" style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 35%, rgba(0,0,0,0.55) 100%)',
        }}/>
        <button onClick={() => nav.pop()} style={{
          position: 'absolute', top: 58, left: 14,
          width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.4)',
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Back size={18} color="#fff"/>
        </button>

        <div style={{
          position: 'absolute', left: 18, right: 18, bottom: 14, color: '#fff',
        }}>
          <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: -0.4 }}>{c.name}</div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', marginTop: 3 }}>
            {c.count} items
          </div>
        </div>
      </div>

      {/* Description with Read more */}
      <div style={{ padding: '14px 18px 0', fontSize: 13, lineHeight: 1.55, color: t.textMuted }}>
        {expanded ? description : preview}
        {needsTruncate && (
          <>
            {' '}
            <button onClick={() => setExpanded(e => !e)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: 0,
              color: t.primary, fontWeight: 700, fontSize: 13, fontFamily: 'inherit',
            }}>{expanded ? 'Show less' : 'Read more'}</button>
          </>
        )}
      </div>

      {/* Items */}
      <div style={{ padding: '14px 18px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => {
          const pal = typePalette[it.type];
          return (
            <Card key={i} t={t} style={{
              padding: 12, display: 'flex', alignItems: 'center', gap: 12,
            }}>
              {/* Colored thumbnail square with file-type badge */}
              <div style={{
                width: 64, height: 64, borderRadius: 12,
                background: pal.bg, flexShrink: 0, position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
              }}>
                {it.type === 'pdf' && (
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
                    <path d="M6 4h8l4 4v12H6V4z" stroke={pal.fg} strokeWidth="1.8" strokeLinejoin="round" fill={pal.fg} fillOpacity="0.15"/>
                    <path d="M14 4v4h4" stroke={pal.fg} strokeWidth="1.8" strokeLinejoin="round"/>
                  </svg>
                )}
                {it.type === 'video' && (
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
                    <rect x="3" y="6" width="14" height="12" rx="2" stroke={pal.fg} strokeWidth="1.8"/>
                    <path d="M17 10l4-2v8l-4-2" stroke={pal.fg} strokeWidth="1.8" strokeLinejoin="round" fill={pal.fg} fillOpacity="0.2"/>
                  </svg>
                )}
                {it.type === 'audio' && (
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
                    <path d="M4 14v-2a8 8 0 1116 0v2" stroke={pal.fg} strokeWidth="1.8" strokeLinecap="round"/>
                    <rect x="3" y="14" width="5" height="6" rx="1.5" stroke={pal.fg} strokeWidth="1.8" fill={pal.fg} fillOpacity="0.15"/>
                    <rect x="16" y="14" width="5" height="6" rx="1.5" stroke={pal.fg} strokeWidth="1.8" fill={pal.fg} fillOpacity="0.15"/>
                  </svg>
                )}
                {/* type label chip */}
                <div style={{
                  position: 'absolute', bottom: 4, left: 4,
                  background: 'rgba(0,0,0,0.18)', color: pal.fg,
                  fontSize: 8, fontWeight: 800, letterSpacing: 0.5,
                  padding: '1px 4px', borderRadius: 3,
                }}>{typeLabel[it.type]}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text, lineHeight: 1.3 }}>
                  {it.title}
                </div>
                <div style={{ fontSize: 11, color: t.textMuted, marginTop: 4, display: 'flex', gap: 8 }}>
                  <span>{it.time}</span>
                  {it.size && <span>· {it.size}</span>}
                </div>
              </div>
              <Icon.ChevronRight color={t.textDim}/>
            </Card>
          );
        })}
      </div>
    </>
  );
}

Object.assign(window, {
  SideDrawer, CommunityScreen, LiftAIChatView, CollectionDetailScreen,
});