/* ============================================================
   sp-yt-cs-tools.css
   Shared styles for the 12 new client-side YouTube tools.
   Load this via wp_enqueue_style in your main plugin file.
   These styles complement (do NOT override) sp-yt-tools.css
============================================================ */

/* ─── Universal Input Focus (matches existing tool inputs) ─ */
#title-analyzer-app input[type="text"]:focus,
#hook-generator-container input[type="text"]:focus,
#hook-generator-container select:focus,
#desc-builder-app input[type="text"]:focus,
#desc-builder-app textarea:focus,
#tp-script:focus,
#user-comment:focus,
#v2-views:focus, #v2-engagement:focus, #v2-brand:focus,
#yt-title-input:focus, #yt-channel-input:focus,
#db-title:focus, #db-keywords:focus, #db-channel:focus, #db-website:focus {
    outline: none;
    border-color: #ff0000 !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12) !important;
}

/* ─── Primary Action Buttons ──────────────────────────────── */
#title-analyzer-app button,
#hook-generator-container button,
#retention-simulator-app button,
#search-simulator-app button,
#desc-builder-app button,
#teleprompter-app button,
#squint-test-app button,
#poll-generator-app button,
#sponsor-tool-pro-container button,
#comment-strategy-container button,
#yt-preview-tool-container button,
#safe-zone-app button {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#title-analyzer-app button:hover,
#hook-generator-container button:hover,
#desc-builder-app #buildBtn:hover,
#poll-generator-app button:hover {
    transform: translateY(-2px);
}

#title-analyzer-app button:active,
#hook-generator-container button:active {
    transform: translateY(1px) scale(0.99);
}

/* ─── Scrollbars inside tool containers ──────────────────── */
#tp-screen::-webkit-scrollbar,
#db-output::-webkit-scrollbar,
#strategy-results::-webkit-scrollbar {
    width: 6px;
}
#tp-screen::-webkit-scrollbar-track,
#db-output::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}
#tp-screen::-webkit-scrollbar-thumb,
#db-output::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 10px;
}

/* ─── Slider accent color (cross-browser) ────────────────── */
#size-slider, #blur-slider,
#slider-duration, #slider-hook,
#slider-intro, #slider-sponsor {
    accent-color: #ff0000;
    cursor: pointer;
    height: 5px;
}

/* ─── Tool-level animation ───────────────────────────────── */
@keyframes sp-cs-fadeup {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

#results-section,
#v2-results,
#strategy-results,
#poll-results,
#hook-results,
#simulator-arena,
#db-result,
#tp-prompter,
#tp-length-result {
    animation: sp-cs-fadeup 0.4s ease-out;
}

/* ─── Responsive: narrow screens ────────────────────────── */
@media (max-width: 680px) {
    #title-analyzer-app,
    #hook-generator-container,
    #retention-simulator-app,
    #desc-builder-app,
    #teleprompter-app,
    #squint-test-app,
    #poll-generator-app,
    #sponsor-tool-pro-container,
    #comment-strategy-container,
    #yt-preview-tool-container,
    #safe-zone-app,
    #search-simulator-app {
        padding: 18px 14px !important;
        border-radius: 10px !important;
    }

    /* Stack score row on mobile */
    #results-section > div:first-of-type {
        flex-direction: column !important;
    }

    /* Full-width buttons */
    #hook-generator-container button,
    #desc-builder-app button,
    #teleprompter-app button {
        min-width: 100% !important;
    }

    /* Retention grid stacks */
    #retention-simulator-app > div:last-of-type {
        flex-direction: column !important;
    }

    /* Safe zone phone mock narrows */
    #safe-zone-app .phone-mock { max-width: 250px; }

    /* Analysis breakdown cards single-col */
    #results-section .checks-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stat cards 2-col on small screens */
    #v2-results > div:first-of-type {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 420px) {
    #retention-simulator-app > div,
    #squint-test-app > div:first-of-type,
    #comment-strategy-container > div:first-of-type {
        min-width: 100% !important;
    }

    #v2-results > div:first-of-type {
        grid-template-columns: 1fr !important;
    }
}

/* ─── Teleprompter highlight word ───────────────────────── */
#tp-screen span[id^="tp-w-"] {
    border-radius: 4px;
    padding: 0 2px;
}

/* ─── Poll card hover ────────────────────────────────────── */
.poll-card:hover {
    box-shadow: 0 6px 20px rgba(255,0,0,.1) !important;
    border-left-color: #cc0000 !important;
}

/* ─── Hook card hover ───────────────────────────────────── */
.hook-card:hover {
    border-left-color: #cc0000 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.07) !important;
}

/* ─── Dark code/output block typography ─────────────────── */
#db-output,
#tp-screen,
#v2-pitch-text,
#script-framework {
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.01em;
}