compare two scripts. integrate best logic. outshow full scriptulous logically advanced script:


"""

// ==UserScript==
// @name         StylifyingInjectoid
// @version      1.12
// @description  Injects styles for Enhanced Chat with Status Bar and Auto-updating Counts
// @match        *://yuntian-deng-chatgpt.hf.space/*
// @match        *://yuntian-deng-o1mini.hf.space/*
// @match        *://yuntian-deng-chatgpt4.hf.space/*
// @match        *://yuntian-deng-o1.hf.space/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const MAX_WORDS = 107000; // Maximum word limit for context length
    let totalMessages = 0; // Counter for total messages
    let totalChars = 0; // Preserve total character counts
    let totalWords = 0; // Preserve total word counts
    let isSelectingText = false; // State flag to determine if text is selected

    // Function to inject custom CSS styles
    function injectStyles() {
        const customStyles = `
        * {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            --chatbot-body-text-size: 20px !important;
            blur: none !important;
            color: #D4AF37 !important;
        }

        body, gradio-app, #col_container {
            display: flex !important;
            flex-direction: column !important;
            flex-grow: 1 !important;
            width: 100vw !important;
            height: 100vh !important;
            overflow: hidden !important;
            font-family: monospace !important;
            font-size: 24px !important;
            font-weight: normal !important;
            color: transparent !important;
        }

        #col_container {
            order: 1 !important;
            width: 100% !important;
        }

        #component-7 {
            order: 1 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            opacity: 0.6 !important;
        }

        .form, #component-5 {
            order: 2 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
        }

        #chatbot {
            order: 3 !important;
            flex-grow: 1 !important;
            display: flex !important;
            flex-direction: column-reverse !important;
            width: 100% !important;
            overflow-y: auto !important;
            height: 100% !important;
        }

        input, textarea {
            width: 100% !important;
            resize: none !important;
            background: navy !important;
            font-size: 18px !important;
            border: 1px solid #444 !important;
            padding: 10px !important;
            scrollbar-width: auto !important;
            z-index: 1; /* Ensure it's above the background but below the overlay */
            position: relative;
        }

        .input-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
            pointer-events: none; /* Allow interaction with the input field */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 0; /* Set below input */
            transition: background 0.3s ease; /* Smooth background transition */
        }

        .input-overlay.hidden {
            display: none; /* Control visibility */
        }

        div.svelte-sfqy0y {
            overflow-y: visible !important;
        }

        .wrap.svelte-au1olv.svelte-au1olv {
            display: none !important;
        }

        .message-row.user-row.svelte-1e1jlin {
            align-self: flex-start !important;
        }

        #chatbot .user {
            background: rgba(15, 45, 0, 0.8) !important;
        }

        #chatbot .bot {
            background: rgba(0, 60, 36, 0.8) !important;
            color: #C19A6B !important;
        }

        #user_consent_container,
        .svelte-1b6s6s,
        .share-button,
        .svelte-1gfkn6j,
        footer,
        .built-with,
        #component-13,
        .svelte-1eq475l,
        #component-10,
        #component-1,
        #component-2 {
            display: none !important;
        }

        .gradio-container {
            max-width: 100% !important;
        }

        .gap.svelte-vt1mxs {
            gap: 0 !important;
        }

        .message-row.bubble.bot-row.svelte-1e1jlin.svelte-1e1jlin.svelte-1e1jlin,
        .user-row.bubble.svelte-1e1jlin.svelte-1e1jlin.svelte-1e1jlin {
            max-width: 97vw !important;
        }

        .block.svelte-12cmxck {
            background: none !important;
        }

        /* Status bar styles */
        #statusBar {
            position: fixed !important;
            bottom: 10px !important;
            right: 10px !important;
            background: rgba(0, 0, 0, 0.7) !important;
            color: white !important;
            padding: 10px !important;
            border-radius: 5px !important;
            z-index: 10000 !important;
            font-size: 14px !important;
            pointer-events: none !important;
            opacity: 0.8 !important;
        }
        `;
        
        const styleElement = document.createElement('style');
        styleElement.textContent = customStyles;
        document.head.appendChild(styleElement);
    }

    // Function to create and initialize the status bar
    function createStatusBar() {
        const statusBar = document.createElement('div');
        statusBar.id = 'statusBar';
        document.body.appendChild(statusBar);
        updateStatusBar(0, 0, 0); // Initialize with zero counters

        const inputOverlay = document.createElement('div');
        inputOverlay.classList.add('input-overlay', 'hidden');        
        const inputField = document.querySelector('input[type="text"], textarea');
        if (inputField) {
            inputField.parentNode.insertBefore(inputOverlay, inputField.nextSibling);
        }

        setInterval(() => {
            if (!isSelectingText) {
                updateMessageCounts(); // Only update if no selection is active
            }
        }, 300);

        document.addEventListener('selectionchange', () => {
            const selection = window.getSelection();
            if (selection.toString() !== "") {
                isSelectingText = true; // A text selection is active
                const selectedChars = selection.toString().length;
                const selectedWords = calculateWords(selection.toString()); // Call new counting function

                // Update overlay with selected counts
                updateStatusBar(selectedChars, selectedWords, totalMessages);
                inputOverlay.classList.remove('hidden'); // Show overlay
                inputOverlay.innerText = `Selected - Chars: ${selectedChars} | Words: ${selectedWords}`;
            } else {
                inputOverlay.classList.add('hidden'); // Hide overlay if no selection
                isSelectingText = false; // Mark text as not selected
                // Return to total counts
                updateStatusBar(totalChars, totalWords, totalMessages);
            }
        });

        document.addEventListener('click', (event) => {
            const selection = window.getSelection();
            if (!selection.toString()) {
                // If there's no selection, revert to total counts
                updateStatusBar(totalChars, totalWords, totalMessages);
            }
        });
    }

    // Function to calculate the number of words in a string
    function calculateWords(text) {
        return text.trim().split(/\s+/).filter(word => /^[a-zA-Z]+$/.test(word)).length; // Count words excluding single letters or digits
    }

    // Function to update message counts
    function updateMessageCounts() {
        const messages = document.querySelectorAll('#chatbot .message-row');
        totalChars = 0;
        totalWords = 0;

        messages.forEach((msg) => {
            const text = msg.innerText || '';
            totalChars += text.length;
            totalWords += calculateWords(text); // Use new counting function
        });

        totalMessages = messages.length; // Total number of messages
        // Update the display with new totals
        updateStatusBar(totalChars, totalWords, totalMessages);
    }

    // Function to update the status bar text and color
    function updateStatusBar(charCount, wordCount, messageCount) {
        const statusBar = document.getElementById('statusBar');
        
        const percentage = (wordCount / MAX_WORDS) * 100;
        const color = `hsl(${(percentage > 100 ? 100 : percentage) * 1.2}, 100%, 50%)`; // Smooth gradient
        
        statusBar.innerText = `Chars: ${charCount} | Words: ${wordCount} | Messages: ${messageCount} | ${percentage.toFixed(2)}%`;
        statusBar.style.color = color;
    }

    // Call the functions to inject styles and create the status bar
    injectStyles();
    createStatusBar();
})();

""".





secondary:


"""

// ==UserScript==
// @name         StylifyingInjectoid
// @version      1.13
// @description  Injects styles for Enhanced Chat with Status Bar and Auto-updating Counts
// @match        *://yuntian-deng-chatgpt.hf.space/*
// @match        *://yuntian-deng-o1mini.hf.space/*
// @match        *://yuntian-deng-chatgpt4.hf.space/*
// @match        *://yuntian-deng-o1.hf.space/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const MAX_WORDS = 107000; // Maximum word limit for context length
    let totalMessages = 0; // Counter for total messages
    let totalChars = 0; // Preserve total character counts
    let totalWords = 0; // Preserve total word counts
    let isSelectingText = false; // State flag to determine if text is selected
    let statusBarVisible = false; // State flag for status bar visibility
    let statusBarTimeout; // To manage delay for showing/hiding the status bar

    // Function to inject custom CSS styles
    function injectStyles() {
        const customStyles = `
        * {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            --chatbot-body-text-size: 20px !important;
            blur: none !important;
            color: #D4AF37 !important;
        }

        body, gradio-app, #col_container {
            display: flex !important;
            flex-direction: column !important;
            flex-grow: 1 !important;
            width: 100vw !important;
            height: 100vh !important;
            overflow: hidden !important;
            font-family: monospace !important;
            font-size: 24px !important;
            font-weight: normal !important;
            color: transparent !important;
        }

        #col_container {
            order: 1 !important;
            width: 100% !important;
        }

        #component-7 {
            order: 1 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            opacity: 0.6 !important;
        }

        .form, #component-5 {
            order: 2 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
        }

        #chatbot {
            order: 3 !important;
            flex-grow: 1 !important;
            display: flex !important;
            flex-direction: column-reverse !important;
            width: 100% !important;
            overflow-y: auto !important;
            height: 100% !important;
        }

        input, textarea {
            width: 100% !important;
            resize: none !important;
            background: navy !important;
            font-size: 18px !important;
            border: 1px solid #444 !important;
            padding: 10px !important;
            scrollbar-width: auto !important;
            z-index: 1; /* Ensure it's above the background but below the overlay */
            position: relative;
        }

        .input-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.3); /* Semi-transparent background */
            pointer-events: none; /* Allow interaction with the input field */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 0; /* Set below input */
            transition: background 0.3s ease; /* Smooth background transition */
        }

        .input-overlay.hidden {
            display: none; /* Control visibility */
        }

        div.svelte-sfqy0y {
            overflow-y: visible !important;
        }

        .wrap.svelte-au1olv.svelte-au1olv {
            display: none !important;
        }

        .message-row.user-row.svelte-1e1jlin {
            align-self: flex-start !important;
        }

        #chatbot .user {
            background: rgba(15, 45, 0, 0.8) !important;
        }

        #chatbot .bot {
            background: rgba(0, 60, 36, 0.8) !important;
            color: #C19A6B !important;
        }

        #user_consent_container,
        .svelte-1b6s6s,
        .share-button,
        .svelte-1gfkn6j,
        footer,
        .built-with,
        #component-13,
        .svelte-1eq475l,
        #component-10,
        #component-1,
        #component-2 {
            display: none !important;
        }

        .gradio-container {
            max-width: 100% !important;
        }

        .gap.svelte-vt1mxs {
            gap: 0 !important;
        }

        .message-row.bubble.bot-row.svelte-1e1jlin.svelte-1e1jlin.svelte-1e1jlin,
        .user-row.bubble.svelte-1e1jlin.svelte-1e1jlin.svelte-1e1jlin {
            max-width: 97vw !important;
        }

        .block.svelte-12cmxck {
            background: none !important;
        }

        #statusBar {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            z-index: 10000;
            display: none; /* Initially hidden */
            pointer-events: none !important;
        }
        
        /* Make the status bar visible when active */
        #statusBar.visible {
            display: block; /* Show with 'visible' class */
        }
        `;

        const styleElement = document.createElement('style');
        styleElement.textContent = customStyles;
        document.head.appendChild(styleElement);
    }

    // Function to create and initialize the status bar
    function createStatusBar() {
        const statusBar = document.createElement('div');
        statusBar.id = 'statusBar';
        document.body.appendChild(statusBar);
        updateStatusBar(0, 0, 0); // Initialize with zero counters

        document.addEventListener('selectionchange', handleSelectionChange);
        document.addEventListener('click', handleClick);
        document.body.addEventListener('mouseenter', handleMouseEnter);
        document.body.addEventListener('mouseleave', handleMouseLeave);

        // Update counts periodically
        setInterval(updateMessageCounts, 3000);
    }

    // Handler for selection change events
    function handleSelectionChange() {
        const selection = window.getSelection();
        if (selection.toString() !== "") {
            isSelectingText = true; // A text selection is active
            const selectedChars = selection.toString().length;
            const selectedWords = calculateWords(selection.toString());

            // Show status bar immediately when text is selected
            updateStatusBar(selectedChars, selectedWords, totalMessages);
            showStatusBar();
        } else {
            isSelectingText = false; // Reset when no selection is present
            updateStatusBar(totalChars, totalWords, totalMessages); // Show total counts
        }
    }

    // Handler for click events
    function handleClick() {
        const selection = window.getSelection();
        if (!selection.toString()) {
            // If there's no selection, revert to total counts
            updateStatusBar(totalChars, totalWords, totalMessages);
        }
    }

    // Handler for mouse enter events
    function handleMouseEnter() {
        // Show status bar after hovering for 3 seconds
        statusBarTimeout = setTimeout(showStatusBar, 3000);
    }

    // Handler for mouse leave events
    function handleMouseLeave() {
        clearTimeout(statusBarTimeout);
        hideStatusBar();
    }

    // Function to calculate the number of words in a string
    function calculateWords(text) {
        return text.trim().split(/\s+/).filter(word => /^[a-zA-Z]+$/.test(word)).length; // Count only valid words
    }

    // Function to update message counts and show the status bar
    function updateMessageCounts() {
        const messages = document.querySelectorAll('#chatbot .message-row');
        totalChars = 0;
        totalWords = 0;

        messages.forEach((msg) => {
            const text = msg.innerText || '';
            totalChars += text.length;
            totalWords += calculateWords(text);
        });

        totalMessages = messages.length;
        updateStatusBar(totalChars, totalWords, totalMessages); // Update the display with new totals
    }

    // Function to show the status bar
    function showStatusBar() {
        const statusBar = document.getElementById('statusBar');
        if (!statusBarVisible) {
            statusBar.classList.add('visible');
            statusBarVisible = true;
        }
    }

    // Function to hide the status bar
    function hideStatusBar() {
        const statusBar = document.getElementById('statusBar');
        if (statusBarVisible) {
            statusBar.classList.remove('visible');
            statusBarVisible = false;
        }
    }

    // Function to update the status bar text and color
    function updateStatusBar(charCount, wordCount, messageCount) {
        const statusBar = document.getElementById('statusBar');
        const percentage = (wordCount / MAX_WORDS) * 100;
        const color = `hsl(${(percentage > 100 ? 100 : percentage) * 1.2}, 100%, 50%)`; // Smooth gradient
        
        statusBar.innerText = `Chars: ${charCount} | Words: ${wordCount} | Messages: ${messageCount} | ${percentage.toFixed(2)}%`;
        statusBar.style.color = color;

        // Show the status bar if there are messages
        if (totalMessages > 0) {
            showStatusBar();
        }
    }

    // Call the functions to inject styles and create the status bar
    injectStyles();
    createStatusBar();
})();


""".