// Mobile — Incognito + Tab Groups + the upgraded Tabs page
// Reuses the tablet's TAB_GROUPS data and GROUP_COLORS palette to keep
// the cross-device design consistent.

// ─── Private NTP (mobile) ─────────────────────────────────────
function MScreenPrivateNTP({ onOpenSearch }) {
  return (
    <div style={{
      padding: '24px 20px 100px', height: '100%', overflowY: 'auto', boxSizing: 'border-box',
      background: 'radial-gradient(ellipse at 50% 20%, #1a1228 0%, ' + PRIV_BG + ' 60%)',
      color: PRIV_FG,
    }}>
      <div style={{ display: 'grid', placeItems: 'center', marginTop: 28, marginBottom: 20 }}>
        <div style={{
          width: 78, height: 78, borderRadius: 22,
          background: 'linear-gradient(135deg, ' + PRIV_ACCENT + '22, ' + PRIV_ACCENT + '08)',
          border: '1px solid ' + PRIV_BORDER,
          display: 'grid', placeItems: 'center', color: PRIV_ACCENT_2,
          boxShadow: '0 12px 36px -10px rgba(167,139,250,0.4)',
        }}>
          <IcMask s={36}/>
        </div>
      </div>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <div style={{ fontSize: 11, color: PRIV_ACCENT, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>Private window</div>
        <div style={{ fontFamily: "'Instrument Serif', Georgia, serif", fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', marginTop: 8, fontStyle: 'italic', fontWeight: 400 }}>
          You're browsing in private.
        </div>
        <div style={{ fontSize: 13, color: PRIV_FG_MUTED, marginTop: 10, lineHeight: 1.5, maxWidth: 320, margin: '10px auto 0' }}>
          Pages, form data, and history won't be saved here. Bookmarks and downloads still work.
        </div>
      </div>

      {/* Search */}
      <div onClick={onOpenSearch} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '14px 18px', marginBottom: 22,
        background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER,
        borderRadius: 16, cursor: 'pointer',
      }}>
        <span style={{ color: PRIV_ACCENT }}>{MIc.search({ s: 17 })}</span>
        <span style={{ flex: 1, fontSize: 14, color: PRIV_FG_MUTED }}>Search privately</span>
        <span style={{ color: PRIV_FG_DIM }}>{MIc.mic({ s: 16 })}</span>
      </div>

      {/* What's private vs. not — compact mobile version */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          padding: '14px 16px',
          background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
          borderRadius: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span style={{ width: 20, height: 20, borderRadius: 10, background: 'rgba(110,231,183,0.18)', color: M_ACCENT, display: 'grid', placeItems: 'center' }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            </span>
            <span style={{ fontSize: 12.5, fontWeight: 600 }}>What's private here</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, paddingLeft: 28 }}>
            {['History', 'Searches', 'Cookies', 'Autofill'].map(t => (
              <div key={t} style={{ fontSize: 11.5, color: PRIV_FG_MUTED }}>· {t}</div>
            ))}
          </div>
        </div>
        <div style={{
          padding: '14px 16px',
          background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
          borderRadius: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span style={{ width: 20, height: 20, borderRadius: 10, background: 'rgba(251,191,36,0.18)', color: '#FBBF24', display: 'grid', placeItems: 'center' }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0z"/></svg>
            </span>
            <span style={{ fontSize: 12.5, fontWeight: 600 }}>What it doesn't hide</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, paddingLeft: 28 }}>
            {['Network', 'Sites', 'Employer', 'Ajna ID'].map(t => (
              <div key={t} style={{ fontSize: 11.5, color: PRIV_FG_MUTED }}>· {t}</div>
            ))}
          </div>
        </div>
      </div>

      {/* Signed-out card */}
      <div style={{
        marginTop: 14, padding: '12px 14px',
        background: 'rgba(167,139,250,0.06)', border: '1px solid ' + PRIV_BORDER_SOFT,
        borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: PRIV_SURFACE_2, color: PRIV_ACCENT, display: 'grid', placeItems: 'center', flexShrink: 0 }}><IcMask s={14}/></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 600 }}>Signed out in this window</div>
          <div style={{ fontSize: 10.5, color: PRIV_FG_MUTED, marginTop: 2 }}>Chat & Mesh unavailable here.</div>
        </div>
      </div>
    </div>
  );
}

// ─── Private tab grid (mobile, 2-col) ────────────────────────
function MScreenPrivateTabs({ onExitPrivate }) {
  const tabs = [
    { title: 'DuckDuckGo · DIDComm',    fav: 'D', bg: '#7C3AED', url: 'duckduckgo.com',          hint: 'No history' },
    { title: 'Wikipedia · Ajna chakra', fav: 'W', bg: '#000',    url: 'en.wikipedia.org',         hint: 'Reading' },
    { title: 'Airline · MUC → SFO',     fav: 'A', bg: '#0EA5E9', url: 'lh.com/booking',           hint: 'Private booking' },
  ];
  return (
    <div style={{ padding: '20px 16px 100px', height: '100%', overflowY: 'auto', boxSizing: 'border-box', background: PRIV_BG, color: PRIV_FG }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, background: 'rgba(167,139,250,0.16)', border: '1px solid rgba(167,139,250,0.32)', color: PRIV_ACCENT_2, display: 'grid', placeItems: 'center' }}><IcMask s={13}/></div>
          <div style={{ fontSize: 19, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.02em' }}>Private tabs <span style={{ color: PRIV_FG_DIM, fontWeight: 400 }}>· {tabs.length}</span></div>
        </div>
        <button onClick={onExitPrivate} style={{
          padding: '6px 10px', borderRadius: 8,
          background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
          color: PRIV_FG_MUTED, fontSize: 11, fontFamily: 'inherit', cursor: 'pointer',
        }}>Exit</button>
      </div>

      <div style={{
        padding: '9px 12px', marginBottom: 14,
        background: 'rgba(167,139,250,0.06)', border: '1px solid ' + PRIV_BORDER_SOFT,
        borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ color: PRIV_ACCENT }}><IcMask s={12}/></span>
        <span style={{ flex: 1, fontSize: 10.5, color: PRIV_FG_MUTED, lineHeight: 1.4 }}>
          No history, cookies, or sync. Discarded on close.
        </span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {tabs.map((t, i) => (
          <div key={i} style={{
            aspectRatio: '3/4',
            background: 'linear-gradient(180deg, rgba(167,139,250,0.05), rgba(167,139,250,0.02)), ' + PRIV_SURFACE,
            backgroundColor: PRIV_SURFACE,
            border: '1px solid rgba(167,139,250,0.22)',
            borderRadius: 12, overflow: 'hidden', position: 'relative',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: PRIV_ACCENT, opacity: 0.55 }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px 8px 12px', borderBottom: '1px solid ' + PRIV_BORDER_SOFT }}>
              <MTile size={14} bg={t.bg} color={t.c||'#fff'} label={t.fav} radius={3}/>
              <div style={{ fontSize: 9, color: PRIV_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
              <span style={{ color: PRIV_ACCENT_2 }}><IcMask s={10}/></span>
            </div>
            <div style={{ flex: 1, padding: '10px 10px 10px 12px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: PRIV_FG, lineHeight: 1.3 }}>{t.title}</div>
              <div style={{ fontSize: 9.5, color: PRIV_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Tab groups grid (mobile) ─────────────────────────────────
function MScreenTabGroupsGrid({ onOpen, onNewGroup }) {
  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4, marginBottom: 14 }}>
        <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.02em', color: M_FG }}>Tab groups</div>
        <button onClick={onNewGroup} style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '6px 11px', borderRadius: 999,
          background: 'linear-gradient(135deg, ' + M_ACCENT + ', ' + M_ACCENT_B + ')',
          color: '#0B0C0F', fontSize: 11.5, fontWeight: 600,
          fontFamily: 'inherit', border: 0, cursor: 'pointer',
        }}>{MIc.plus({ s: 12 })} New</button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {TAB_GROUPS.map(g => {
          const c = GROUP_COLORS[g.color];
          return (
            <div key={g.id} onClick={() => onOpen && onOpen(g.id)} style={{
              padding: 14, background: M_SURFACE,
              border: '1px solid ' + M_BORDER, borderRadius: 14,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{ width: 30, height: 30, borderRadius: 9, background: c.bg, border: '1.5px solid ' + c.dot, flexShrink: 0 }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{g.name}</div>
                  {g.shared && (
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 3,
                      padding: '1px 6px', borderRadius: 4,
                      background: 'rgba(167,139,250,0.16)', color: '#C4B5FD',
                      fontSize: 8.5, fontFamily: 'JetBrains Mono, monospace', fontWeight: 600, letterSpacing: '0.06em',
                    }}>{MIc.mesh({ s: 9 })} {g.members}</span>
                  )}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 5 }}>
                  {g.tabs.slice(0, 4).map((t, i) => (
                    <div key={i} style={{
                      width: 18, height: 18, borderRadius: 4,
                      background: t.bg, color: t.c || '#fff',
                      display: 'grid', placeItems: 'center',
                      fontSize: 9, fontWeight: 700, fontFamily: 'Geist',
                      marginLeft: i === 0 ? 0 : -5, border: '1.5px solid ' + M_SURFACE, flexShrink: 0,
                    }}>{t.fav}</div>
                  ))}
                  <span style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', marginLeft: g.tabs.length > 4 ? 0 : 4 }}>
                    {g.tabs.length > 4 ? '+' + (g.tabs.length - 4) + ' · ' : ''}{g.tabs.length} tabs
                  </span>
                </div>
              </div>
              <span style={{ color: M_FG_DIM, flexShrink: 0 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
              </span>
            </div>
          );
        })}
        <button onClick={onNewGroup} style={{
          padding: 14, background: 'transparent',
          border: '1px dashed ' + M_BORDER, borderRadius: 14,
          cursor: 'pointer', color: M_FG_MUTED, fontFamily: 'inherit', textAlign: 'left',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 30, height: 30, borderRadius: 9, background: M_SURFACE_2, color: M_FG_MUTED, display: 'grid', placeItems: 'center' }}>{MIc.plus({ s: 14 })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500, color: M_FG }}>New tab group</div>
            <div style={{ fontSize: 11, color: M_FG_DIM, marginTop: 2 }}>Pick a name, color, share with others</div>
          </div>
        </button>
      </div>
    </>
  );
}

// ─── Group detail (mobile) ─────────────────────────────────
function MScreenGroupDetail({ groupId, onBack }) {
  const g = TAB_GROUPS.find(x => x.id === groupId) || TAB_GROUPS[0];
  const c = GROUP_COLORS[g.color];
  return (
    <div style={{ padding: '20px 16px 100px', height: '100%', overflowY: 'auto', boxSizing: 'border-box' }}>
      <button onClick={onBack} style={{
        display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px',
        background: 'transparent', border: 0, color: M_FG_MUTED, cursor: 'pointer',
        fontSize: 12, fontFamily: 'inherit', marginBottom: 10, marginLeft: -8,
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        Tab groups
      </button>

      <div style={{
        padding: '14px 16px', borderRadius: 14,
        backgroundImage: 'linear-gradient(135deg, ' + c.bg + ', transparent 60%)',
        backgroundColor: M_SURFACE, border: '1px solid ' + c.border, marginBottom: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: c.bg, border: '1.5px solid ' + c.dot, color: c.fg, display: 'grid', placeItems: 'center', flexShrink: 0 }}>{MIc.tabs({ s: 18 })}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 16, fontWeight: 600, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.02em' }}>{g.name}</div>
            <div style={{ fontSize: 11, color: M_FG_MUTED, marginTop: 3, fontFamily: 'JetBrains Mono, monospace' }}>
              {g.tabs.length} tabs · {g.shared ? 'synced over mesh' : 'local to this device'}
            </div>
          </div>
          {g.shared && (
            <div style={{ display: 'inline-flex' }}>
              {['#F472B6', '#22D3EE', '#FBBF24', '#6EE7B7'].slice(0, g.members).map((bg, i) => (
                <div key={i} style={{
                  width: 22, height: 22, borderRadius: 11, background: bg, color: '#0B0C0F',
                  display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, fontFamily: 'Geist',
                  marginLeft: i === 0 ? 0 : -6, border: '2px solid ' + M_SURFACE,
                }}>{['RS','AI','PN','AM'][i]}</div>
              ))}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <button style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '9px 12px', borderRadius: 9, background: M_SURFACE_2, border: '1px solid ' + M_BORDER_SOFT, color: M_FG, fontSize: 12, fontFamily: 'inherit', cursor: 'pointer' }}>
            {MIc.plus({ s: 13 })} New tab
          </button>
          {g.shared && (
            <button style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '9px 12px', borderRadius: 9, background: 'rgba(167,139,250,0.12)', border: '1px solid rgba(167,139,250,0.28)', color: '#C4B5FD', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer' }}>
              {MIc.mesh({ s: 12 })} Invite
            </button>
          )}
          <button style={{ width: 36, height: 36, borderRadius: 9, background: M_SURFACE_2, border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, display: 'grid', placeItems: 'center', cursor: 'pointer' }} aria-label="More">{MIc.more({ s: 15 })}</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {g.tabs.map((t, i) => (
          <div key={i} style={{
            aspectRatio: '3/4', background: M_SURFACE,
            border: '1px solid ' + M_BORDER, borderRadius: 12,
            overflow: 'hidden', position: 'relative',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: c.dot, opacity: 0.6 }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px 8px 12px', borderBottom: '1px solid ' + M_BORDER_SOFT }}>
              <MTile size={14} bg={t.bg} color={t.c||'#fff'} label={t.fav} radius={3}/>
              <div style={{ fontSize: 9, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
            </div>
            <div style={{ flex: 1, padding: '10px 10px 10px 12px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: M_FG, lineHeight: 1.3 }}>{t.title}</div>
              <div style={{ fontSize: 9.5, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Tabs page with the 3-mode switcher (Tabs / Private / Groups) ──
// Replaces the old plain grid MScreenTabs.
function MScreenTabsWithModes({ onEnterPrivate, onOpenGroup, onNewGroup }) {
  const [mode, setMode] = React.useState('tabs');
  // Active sheet: null | 'new-group' | { kind: 'actions', tab } | { kind: 'move', tab }
  const [sheet, setSheet] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  const tabs = [
    { title: 'Linear — Inbox',            fav: 'L', bg: '#5E6AD2',         url: 'linear.app/ajna-inc/inbox',     hint: 'Active' },
    { title: 'Figma — Ajna mobile',       fav: 'F', bg: '#000',            url: 'figma.com',                    hint: '2h ago' },
    { title: 'GitHub · ajna-inc',         fav: 'G', bg: '#24292F',         url: 'github.com/ajna-inc',           hint: 'PR #284' },
    { title: 'Notion · P2P RFC',          fav: 'N', bg: '#FFF', c: '#000', url: 'notion.so',                     hint: '5 comments' },
    { title: 'HN',                        fav: 'Y', bg: '#FF6600',         url: 'news.yc',                       hint: 'Updated' },
  ];
  const privateCount = 3;

  const flashToast = (t) => {
    setToast(t);
    setTimeout(() => setToast(null), 1800);
  };

  const modes = [
    { id: 'tabs',    label: 'Tabs',    icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="13" height="13" rx="2"/><rect x="7" y="7" width="13" height="13" rx="2"/></svg>, count: tabs.length },
    { id: 'private', label: 'Private', icon: <IcMask s={13}/>, count: privateCount, accent: '#C4B5FD' },
    { id: 'groups',  label: 'Groups',  icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="8" height="7" rx="1.5"/><rect x="13" y="4" width="8" height="7" rx="1.5"/><rect x="3" y="13" width="8" height="7" rx="1.5"/><rect x="13" y="13" width="8" height="7" rx="1.5"/></svg>, count: TAB_GROUPS.length },
  ];

  // Helpers for long-press detection
  const usePress = (onLong) => {
    const timer = React.useRef(null);
    return {
      onTouchStart: () => { timer.current = setTimeout(() => onLong(), 380); },
      onTouchEnd:   () => { if (timer.current) clearTimeout(timer.current); },
      onMouseDown:  () => { timer.current = setTimeout(() => onLong(), 380); },
      onMouseUp:    () => { if (timer.current) clearTimeout(timer.current); },
      onMouseLeave: () => { if (timer.current) clearTimeout(timer.current); },
    };
  };

  const privateTabs = [
    { title: 'DuckDuckGo · DIDComm',    fav: 'D', bg: '#7C3AED', url: 'duckduckgo.com',  hint: 'No history' },
    { title: 'Wikipedia · Ajna chakra', fav: 'W', bg: '#000',    url: 'en.wikipedia.org', hint: 'Reading' },
    { title: 'Airline · MUC → SFO',     fav: 'A', bg: '#0EA5E9', url: 'lh.com/booking',   hint: 'Private booking' },
  ];

  return (
    <div style={{ padding: '20px 16px 100px', height: '100%', overflowY: 'auto', boxSizing: 'border-box', position: 'relative' }}>
      <MTabsModeSwitcher modes={modes} mode={mode} onPick={(id) => setMode(id)}/>

      {mode === 'tabs' && (
        <>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6, marginBottom: 12 }}>
            <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.02em' }}>
              All tabs <span style={{ color: M_FG_DIM, fontWeight: 400 }}>· {tabs.length}</span>
            </div>
            <div style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>long-press for actions</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {tabs.map((t, i) => (
              <MTabCard key={i} t={t} active={t.hint === 'Active'}
                onLongPress={() => setSheet({ kind: 'actions', tab: t })}
                onMoreClick={() => setSheet({ kind: 'actions', tab: t })}
              />
            ))}
          </div>
        </>
      )}

      {mode === 'groups' && (
        <MScreenTabGroupsGrid
          onOpen={onOpenGroup}
          onNewGroup={() => setSheet('new-group')}
        />
      )}

      {mode === 'private' && (
        <>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6, marginBottom: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(167,139,250,0.16)', border: '1px solid rgba(167,139,250,0.32)', color: '#C4B5FD', display: 'grid', placeItems: 'center' }}><IcMask s={12}/></div>
              <div style={{ fontSize: 17, fontWeight: 600, fontFamily: 'Geist', letterSpacing: '-0.02em' }}>
                Private tabs <span style={{ color: M_FG_DIM, fontWeight: 400 }}>· {privateTabs.length}</span>
              </div>
            </div>
            <button
              onClick={() => onEnterPrivate && onEnterPrivate()}
              style={{
                padding: '6px 10px', borderRadius: 8,
                background: 'rgba(167,139,250,0.10)', border: '1px solid rgba(167,139,250,0.28)',
                color: '#C4B5FD', fontSize: 10.5, fontFamily: 'inherit', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}
              aria-label="Open private window"
            >
              <IcMask s={10}/> New private
            </button>
          </div>

          <div style={{
            padding: '9px 12px', marginBottom: 12,
            background: 'rgba(167,139,250,0.06)', border: '1px solid rgba(167,139,250,0.18)',
            borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ color: '#A78BFA' }}><IcMask s={12}/></span>
            <span style={{ flex: 1, fontSize: 10.5, color: M_FG_MUTED, lineHeight: 1.4 }}>
              No history, cookies, or sync. Discarded on close.
            </span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {privateTabs.map((t, i) => (
              <div key={i}
                onClick={() => onEnterPrivate && onEnterPrivate()}
                style={{
                  aspectRatio: '3/4',
                  background: 'linear-gradient(180deg, rgba(167,139,250,0.06), rgba(167,139,250,0.02)), ' + M_SURFACE,
                  backgroundColor: M_SURFACE,
                  border: '1px solid rgba(167,139,250,0.24)',
                  borderRadius: 12, overflow: 'hidden', position: 'relative',
                  display: 'flex', flexDirection: 'column',
                  cursor: 'pointer',
                }}>
                <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: '#A78BFA', opacity: 0.55 }}/>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 10px 8px 12px', borderBottom: '1px solid ' + M_BORDER_SOFT }}>
                  <MTile size={14} bg={t.bg} color={t.c||'#fff'} label={t.fav} radius={3}/>
                  <div style={{ fontSize: 9, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
                  <span style={{ color: '#C4B5FD' }}><IcMask s={10}/></span>
                </div>
                <div style={{ flex: 1, padding: '10px 10px 10px 12px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: M_FG, lineHeight: 1.3 }}>{t.title}</div>
                  <div style={{ fontSize: 9.5, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {/* Sheets */}
      {sheet === 'new-group' && (
        <MNewGroupSheet
          onClose={() => setSheet(null)}
          onCreate={({ name }) => { setSheet(null); flashToast('Created “' + name + '”'); }}
        />
      )}
      {sheet && sheet.kind === 'actions' && (
        <MTabActionsSheet
          tab={sheet.tab}
          onClose={() => setSheet(null)}
          onMoveToGroup={() => setSheet({ kind: 'move', tab: sheet.tab })}
          onClosedTab={() => flashToast('Tab closed')}
        />
      )}
      {sheet && sheet.kind === 'move' && (
        <MMoveToGroupSheet
          tab={sheet.tab}
          onClose={() => setSheet(null)}
          onPick={(gid) => {
            setSheet(null);
            if (gid === null) flashToast('Removed from group');
            else flashToast('Moved to “' + (TAB_GROUPS.find(g => g.id === gid)?.name) + '”');
          }}
          onCreateNew={() => setSheet('new-group')}
        />
      )}

      {/* Toast */}
      {toast && (
        <div style={{
          position: 'fixed', left: 24, right: 24, bottom: 110, zIndex: 90,
          padding: '11px 16px', borderRadius: 12,
          background: 'rgba(11,12,15,0.95)', border: '1px solid ' + M_BORDER,
          color: M_FG, fontSize: 13, textAlign: 'center',
          backdropFilter: 'blur(10px)',
          boxShadow: '0 12px 36px rgba(0,0,0,0.4)',
          animation: 'mgFade 180ms ease',
        }}>{toast}</div>
      )}
    </div>
  );
}

// Tab card with long-press affordance + "···" button
function MTabCard({ t, onLongPress, onMoreClick, active }) {
  const timer = React.useRef(null);
  const start = () => { timer.current = setTimeout(() => onLongPress && onLongPress(), 380); };
  const stop  = () => { if (timer.current) clearTimeout(timer.current); };
  return (
    <div
      onTouchStart={start} onTouchEnd={stop} onTouchMove={stop}
      onMouseDown={start} onMouseUp={stop} onMouseLeave={stop}
      style={{
        aspectRatio: '3/4', background: M_SURFACE, border: '1px solid ' + (active ? M_ACCENT_B : M_BORDER),
        boxShadow: active ? '0 0 0 2px rgba(96,165,250,0.22)' : 'none',
        borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column',
        cursor: 'pointer', position: 'relative',
      }}>
      {active && <span style={{ position: 'absolute', right: 8, bottom: 8, padding: '2px 7px', borderRadius: 999, background: M_ACCENT_B, color: '#0B0C0F', fontSize: 8.5, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '0.04em' }}>ACTIVE</span>}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: 8, borderBottom: '1px solid ' + M_BORDER_SOFT }}>
        <MTile size={14} bg={t.bg} color={t.c || '#fff'} label={t.fav} radius={3}/>
        <div style={{ fontSize: 9, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.url}</div>
        <button
          onClick={(e) => { e.stopPropagation(); onMoreClick && onMoreClick(); }}
          style={{ background: 'transparent', border: 0, color: M_FG_DIM, padding: 0, display: 'grid', placeItems: 'center', cursor: 'pointer' }}
          aria-label="Tab actions"
        >{MIc.more({ s: 14 })}</button>
      </div>
      <div style={{ flex: 1, padding: 10, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: M_FG, lineHeight: 1.3 }}>{t.title}</div>
        <div style={{ fontSize: 9.5, color: M_FG_MUTED, fontFamily: 'JetBrains Mono, monospace' }}>{t.hint}</div>
      </div>
    </div>
  );
}

// Animated 3-mode segmented control for mobile
function MTabsModeSwitcher({ modes, mode, onPick }) {
  const itemRefs = React.useRef({});
  const containerRef = React.useRef(null);
  const [indicator, setIndicator] = React.useState({ left: 0, width: 0, ready: false });

  React.useLayoutEffect(() => {
    const el = itemRefs.current[mode];
    const c  = containerRef.current;
    if (!el || !c) return;
    const er = el.getBoundingClientRect();
    const cr = c.getBoundingClientRect();
    setIndicator({ left: er.left - cr.left, width: er.width, ready: true });
  }, [mode]);

  const activeAccent = modes.find(m => m.id === mode)?.accent;

  return (
    <div ref={containerRef} style={{
      position: 'relative',
      display: 'flex', alignItems: 'stretch',
      padding: 3, background: M_SURFACE, border: '1px solid ' + M_BORDER,
      borderRadius: 12, marginBottom: 14, width: '100%',
      boxShadow: '0 2px 8px -4px rgba(0,0,0,0.4)',
    }}>
      <div style={{
        position: 'absolute',
        top: 3, bottom: 3, left: indicator.left, width: indicator.width,
        background: activeAccent ? 'rgba(167,139,250,0.16)' : M_BG,
        border: '1px solid ' + (activeAccent ? 'rgba(167,139,250,0.34)' : M_BORDER_SOFT),
        borderRadius: 9,
        transition: indicator.ready ? 'left 260ms cubic-bezier(0.2,0.85,0.3,1), width 260ms cubic-bezier(0.2,0.85,0.3,1)' : 'none',
        pointerEvents: 'none',
        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
      }}/>
      {modes.map(m => {
        const active = m.id === mode;
        return (
          <button
            key={m.id}
            ref={el => itemRefs.current[m.id] = el}
            onClick={() => onPick(m.id)}
            style={{
              flex: 1, position: 'relative', zIndex: 1,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              padding: '8px 10px', borderRadius: 9,
              background: 'transparent', border: 0,
              color: active ? (m.accent || M_FG) : M_FG_MUTED,
              cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 12, fontWeight: active ? 600 : 500,
            }}
          >
            <span style={{ display: 'grid', placeItems: 'center', opacity: active ? 1 : 0.7 }}>{m.icon}</span>
            {m.label}
            <span style={{
              fontSize: 9.5, fontFamily: 'JetBrains Mono, monospace',
              padding: '1px 5px', borderRadius: 4,
              background: active
                ? (m.accent ? 'rgba(167,139,250,0.16)' : 'var(--m-tint)')
                : 'var(--m-tint)',
              color: active ? (m.accent || M_FG_MUTED) : M_FG_DIM,
            }}>{m.count}</span>
          </button>
        );
      })}
    </div>
  );
}

// Compact mobile address bar styled for private mode (used in command variant)
function MAddressBarPrivate({ url = 'ajna://private/newtab' }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '10px 14px',
      background: PRIV_SURFACE, border: '1px solid ' + PRIV_BORDER_SOFT,
      borderRadius: 999,
    }}>
      <span style={{ color: PRIV_ACCENT }}><IcMask s={12}/></span>
      <span style={{
        flex: 1, fontSize: 13, color: PRIV_FG_MUTED,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.01em',
      }}>{url}</span>
      <span style={{ color: PRIV_FG_DIM }}>{MIc.mic({ s: 13 })}</span>
    </div>
  );
}

Object.assign(window, {
  MScreenPrivateNTP, MScreenPrivateTabs,
  MScreenTabGroupsGrid, MScreenGroupDetail,
  MScreenTabsWithModes, MTabsModeSwitcher,
  MAddressBarPrivate,
});