<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Void Reader V17</title>
	<link rel="icon" type="image/svg+xml" href="favicon.svg">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    
    <style>
        :root {
            --bg-color: #000000;
            --text-color: #ffffff;
            --accent-color: #ff3b30;
            --ui-bg: rgba(15, 15, 15, 0.95);
            --border-color: rgba(255, 255, 255, 0.15);
            
            --font-reading: "New York", "Times New Roman", Times, serif; 
            --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body.theme-paper { 
            --bg-color: #f3e5ab; --text-color: #1a1a1a; --accent-color: #cc0000; 
            --ui-bg: rgba(240, 230, 200, 0.98); --border-color: rgba(0,0,0,0.1);
        }
        body.theme-neuro { 
            --text-color: #ffffff; --ui-bg: rgba(0,0,0,0.85);
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            background-size: 400% 400%; animation: grad 15s ease infinite;
        }
        @keyframes grad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

        /* --- GLOBAL LAYOUT --- */
        * { box-sizing: border-box; }
        
        body {
            background-color: var(--bg-color); color: var(--text-color);
            margin: 0; min-height: 100vh; 
            display: flex; flex-direction: column; overflow: hidden;
            font-family: var(--font-reading);
            transition: background 0.3s, color 0.3s;
        }

        /* --- UI FONTS --- */
        #start-screen, .header, .footer, .modal, #library-overlay, button {
            font-family: var(--font-ui) !important;
        }

        /* --- START SCREEN (Perfect Center Fix) --- */
        #start-screen {
            position: fixed; inset: 0; /* Modern full screen */
            background: var(--bg-color); 
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; 
            z-index: 200;
            transition: opacity 0.4s ease, visibility 0.4s;
        }
        
       .logo-main { 
            font-size: clamp(40px, 5vw, 60px); 
            letter-spacing: 0.25em; /* Stały, szeroki, elegancki spacing */
            margin-bottom: 60px; 
            font-weight: 300; 
            text-align: center;
            
            /* HARDWARE ACCELERATION - To sprawia, że jest płynne jak masło */
            will-change: transform, filter;
            transform: translateZ(0); 
            backface-visibility: hidden;

            /* Główna animacja kinowa */
            animation: cinema-breath 12s ease-in-out infinite;
        }

        /* VOID: Mroczna czerwień */
        .logo-main span:nth-child(1) {
            animation: void-glow 6s ease-in-out infinite alternate;
        }

        /* READER: Czysta biel */
        .logo-main span:nth-child(2) {
            animation: reader-glow 7s ease-in-out infinite alternate-reverse;
        }

        /* 1. KINOWY RUCH (Tylko Skala + Blur, bez szarpania) */
        @keyframes cinema-breath {
            0% { 
                transform: scale(1); 
                filter: blur(0px); 
            }
            30% {
                filter: blur(0.5px); /* Delikatne zgubienie ostrości */
            }
            50% { 
                transform: scale(1.04); /* Bardzo subtelny zoom (4%) */
                filter: blur(1.5px);    /* Cinematic Blur w punkcie kulminacyjnym */
            }
            80% {
                filter: blur(0.3px);
            }
            100% { 
                transform: scale(1); 
                filter: blur(0px); 
            }
        }

        /* 2. GLOW VOID */
        @keyframes void-glow {
            0% { text-shadow: 0 0 5px rgba(255, 59, 48, 0.2); opacity: 0.9; }
            50% { text-shadow: 0 0 25px rgba(255, 59, 48, 0.6); opacity: 1; }
            100% { text-shadow: 0 0 10px rgba(255, 59, 48, 0.3); opacity: 0.95; }
        }

        /* 3. GLOW READER */
        @keyframes reader-glow {
            0% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); opacity: 0.7; }
            50% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); opacity: 1; }
            100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.4); opacity: 0.8; }
        }
        
        .upload-wrapper { position: relative; margin-bottom: 30px; }
        
        .upload-btn {
            background: #ffffff; color: #000000; padding: 18px 60px;
            border-radius: 50px; font-weight: 700; border: none;
            text-transform: uppercase; font-size: 14px; letter-spacing: 2px;
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.1); 
            cursor: pointer; transition: transform 0.1s;
        }
        .upload-btn:hover { transform: scale(1.05); }
        .upload-btn:active { transform: scale(0.95); }

        #file-input {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; cursor: pointer;
        }

        .my-books-btn {
            background: none; border: none; color: var(--accent-color); font-weight: 700;
            font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
            padding: 15px; cursor: pointer; opacity: 0.8; transition: opacity 0.3s;
        }
        .my-books-btn:hover { opacity: 1; }

        /* --- READER UI LAYER --- */
        #ui-layer {
            position: fixed; inset: 0; pointer-events: none; z-index: 100;
            display: flex; flex-direction: column; justify-content: space-between;
        }
        
        /* Container limits width on Desktop so buttons aren't in corners */
        .ui-container {
            width: 100%; max-width: 1200px; margin: 0 auto;
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px; pointer-events: auto;
        }

        .icon-btn { 
            background: none; border: none; color: var(--text-color); 
            padding: 12px; cursor: pointer; border-radius: 50%;
            transition: background 0.2s;
        }
        .icon-btn:hover { background: rgba(255,255,255,0.1); }
        
        .wpm-badge { 
            font-family: monospace !important; font-size: 14px; opacity: 0.6; 
            border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 5px;
        }

        /* --- RSVP DISPLAY (Responsive Text) --- */
        #reader-container { 
            flex: 1; display: flex; align-items: center; justify-content: center; 
            position: relative; z-index: 1; width: 100%;
        }
        
        .focus-line { 
            position: absolute; width: 100%; height: 2px; 
            background-color: var(--text-color); opacity: 0.1; left: 0; 
        }
        .top-line { top: 38%; } .bottom-line { top: 62%; }

        #rsvp-display {
            font-size: clamp(40px, 8vw, 80px); /* Scales between 40px and 80px */
            font-weight: 700; display: flex; align-items: center; 
            white-space: pre; line-height: 1; user-select: none;
        }
        .left-part { text-align: right; width: 45vw; padding-right: 4px; }
        .center-char { color: var(--accent-color); width: 0.7em; text-align: center; }
        .right-part { text-align: left; width: 45vw; padding-left: 4px; }

        /* --- SLIDER (Desktop Friendly) --- */
        #side-slider-container {
            position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
            height: 300px; width: 40px; display: flex; align-items: center; 
            justify-content: center; z-index: 50;
        }
        input[type=range].vertical-slider {
            -webkit-appearance: none; width: 300px; height: 6px; 
            background: rgba(128,128,128,0.3); outline: none; border-radius: 3px; 
            transform: rotate(-90deg); cursor: pointer;
        }
        input[type=range].vertical-slider::-webkit-slider-thumb {
            -webkit-appearance: none; width: 24px; height: 24px; background: var(--accent-color);
            border-radius: 50%; border: 3px solid var(--bg-color); 
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        /* --- MODALS --- */
        .modal {
            position: absolute; top: 70px; background: var(--ui-bg);
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
            padding: 15px; border-radius: 12px; width: 260px; 
            border: 1px solid var(--border-color); max-height: 70vh; overflow-y: auto;
            z-index: 110; display: none; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }
        #settings-panel { right: 20px; }
        #chapters-panel { left: 20px; width: 300px; padding: 0; }
        
        .modal-item {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; padding: 15px 20px; border-bottom: 1px solid var(--border-color);
            color: var(--text-color); background: none; border: none; text-align: left;
            cursor: pointer; transition: background 0.2s;
        }
        .modal-item:hover { background: rgba(255,255,255,0.05); }

        .chapter-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
        .chapter-page { font-size: 11px; opacity: 0.5; font-family: monospace; }
        
        .settings-btn-row { width: 100%; padding: 12px; text-align: left; background: none; border: none; color: var(--text-color); cursor: pointer; border-bottom: 1px solid var(--border-color); }
        .settings-btn-row:hover { background: rgba(255,255,255,0.05); }

        .toggle-switch { width: 40px; height: 22px; background: #333; border-radius: 20px; position: relative; }
        .toggle-switch.active { background: var(--accent-color); }
        .toggle-switch::after {
            content:''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px;
            background: white; border-radius: 50%; transition: 0.2s;
        }
        .toggle-switch.active::after { left: 20px; }

        /* --- LIBRARY --- */
        #library-overlay {
            position: fixed; inset: 0; background: var(--bg-color); z-index: 250; 
            display: none; flex-direction: column; align-items: center;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
        .lib-container {
            width: 100%; max-width: 600px; height: 100%; padding: 40px 20px;
            display: flex; flex-direction: column;
        }
        .book-card {
            background: rgba(255,255,255,0.05); padding: 20px; margin-bottom: 15px; border-radius: 10px;
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
            border: 1px solid var(--border-color);
        }
        .book-card:hover { background: rgba(255,255,255,0.1); }
	/* --- RECAP PANEL (Glassmorphism) --- */
        #summary-modal {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(5, 5, 5, 0.85);
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
            padding: 30px; z-index: 300;
            display: none; flex-direction: column;
            animation: fadeIn 0.3s ease;
        }
        .summary-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px;
        }
        .summary-header h3 { margin: 0; font-weight: 400; letter-spacing: 3px; font-size: 14px; opacity: 0.8; }
        .close-icon { background: none; border: none; color: var(--text-color); font-size: 20px; cursor: pointer; opacity: 0.7; }
        
        .summary-controls { display: flex; gap: 15px; margin-bottom: 25px; }
        .summary-option-btn {
            flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 15px; text-align: left; cursor: pointer; color: var(--text-color);
        }
        .summary-option-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.98); }
        .btn-title { display: block; font-size: 11px; font-weight: bold; color: var(--accent-color); margin-bottom: 4px; letter-spacing: 1px; }
        .btn-sub { display: block; font-size: 10px; opacity: 0.6; }

        #summary-result-area {
            flex: 1; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 20px;
            overflow-y: auto; font-size: 14px; line-height: 1.6; font-family: -apple-system, sans-serif;
            color: #ccc; border: 1px solid rgba(255,255,255,0.05);
        }
        .summary-placeholder { text-align: center; opacity: 0.5; margin-top: 50px; font-size: 12px; letter-spacing: 1px; }
        .processing-anim { color: var(--accent-color); text-align: center; margin-top: 20px; font-weight: bold; animation: pulse 1s infinite; font-size: 11px; letter-spacing: 2px; }
        @keyframes pulse { 0% {opacity:0.5;} 50% {opacity:1;} 100% {opacity:0.5;} }

    </style>
</head>
<body class="theme-void">

    <div id="start-screen">
        <div class="logo-main">
            <span style="color: #ff3b30; font-weight: 800;">VOID</span><span style="font-weight: 200; opacity: 0.8;">READER</span>
        </div>
        
        <div class="upload-wrapper">
            <button class="upload-btn">Upload Book</button>
            <input type="file" id="file-input" accept="application/pdf, application/epub+zip" onclick="this.value=null">
        </div>

        <button class="my-books-btn" onclick="openLibrary()">(My Books)</button>
	<div style="position: absolute; bottom: 30px; width: 100%; text-align: center; font-size: 10px; letter-spacing: 1px; font-family: sans-serif; pointer-events: none;">
    <span style="color: white; opacity: 0.6;">by</span> <span style="color: #ff3b30; font-weight: 700;">PonyRadish</span>
</div>
    </div>

    <div id="library-overlay">
        <div class="lib-container">
            <div style="display:flex; justify-content:space-between; margin-bottom:30px;">
                <span style="font-size:24px; font-weight:800; letter-spacing:2px; color:var(--accent-color);">ARCHIVES</span>
                <button onclick="closeLibrary()" style="background:none; border:1px solid #666; color:var(--text-color); padding:5px 15px; border-radius:20px; cursor:pointer;">CLOSE</button>
            </div>
            <div id="library-list" style="overflow-y:auto; flex:1;"></div>
        </div>
    </div>

    <div id="ui-layer">
        <div class="ui-container header">
            <div style="display:flex; gap:10px;">
                <button class="icon-btn" onclick="goHome()" title="Back">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
                </button>
                <button class="icon-btn" onclick="toggleModal('chapters-panel')" title="Chapters">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
                </button>
            </div>
            <div class="wpm-badge" id="wpm-display">300 WPM</div>
	<button onclick="openSummary()" style="background:none; border:1px solid var(--accent-color); color:var(--accent-color); border-radius:15px; padding:6px 12px; font-size:10px; font-weight:700; letter-spacing:1px; margin-left:10px; cursor:pointer;">
                RECAP
            </button>
           <button class="icon-btn" onclick="toggleModal('settings-panel')">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
</button>
        </div>

        <div class="ui-container footer" style="margin-top:auto;">
            <span id="page-display">PG 0 / 0</span>
            <span id="progress-percent">0%</span>
        </div>
    </div>

    <div id="settings-panel" class="modal">
        <div style="font-size:10px; opacity:0.5; margin-bottom:5px; padding-left:10px;">THEME</div>
        <button class="settings-btn-row" onclick="setTheme('void')">VOID (BLACK)</button>
        <button class="settings-btn-row" onclick="setTheme('paper')">PAPER (BEIGE)</button>
        <button class="settings-btn-row" onclick="setTheme('neuro')">NEURO (GRADIENT)</button>
        
        <div style="font-size:10px; opacity:0.5; margin:15px 0 5px; padding-left:10px;">SYSTEM</div>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 10px;" onclick="toggleFeature('ramp')">
            <span style="font-size:12px;">Auto-Accel</span> <div class="toggle-switch active" id="t-ramp"></div>
        </div>
    </div>

    <div id="chapters-panel" class="modal">
	<div style="padding: 15px 15px 5px 15px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px;">
    <input type="number" id="page-jump-input" placeholder="#" style="background: rgba(255,255,255,0.1); border: 1px solid var(--border-color); color: var(--text-color); padding: 8px; border-radius: 8px; width: 60px; font-family: var(--font-ui); font-size: 14px;">
    <button onclick="jumpToUserPage()" style="background: var(--accent-color); border: none; color: white; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: bold; flex: 1; font-family: var(--font-ui);">GO</button>
	</div>
        <div id="chapter-list">
            <div style="padding:20px; opacity:0.5; text-align:center;">No chapters</div>
        </div>
    </div>
	<div id="summary-modal">
        <div class="summary-header">
            <h3>READING INSIGHTS</h3>
            <button class="close-icon" onclick="closeSummary()">✕</button>
        </div>
        <div class="summary-controls">
            <button class="summary-option-btn" onclick="triggerSummary('chapter')">
                <span class="btn-title">CURRENT CHAPTER</span>
                <span class="btn-sub">Context analysis</span>
            </button>
            <button class="summary-option-btn" onclick="triggerSummary('recent')">
                <span class="btn-title">LAST 1000 WORDS</span>
                <span class="btn-sub">Quick recap</span>
            </button>
        </div>
        <div id="summary-result-area">
            <div class="summary-placeholder">Select a mode to generate a summary...</div>
        </div>
    </div>

    <div id="reader-container" onclick="togglePlay(event)">
        <div class="focus-line top-line"></div>
        <div id="rsvp-display">
            <span class="left-part" id="word-left">Tap</span>
            <span class="center-char" id="word-center">t</span>
            <span class="right-part" id="word-right">o Start</span>
        </div>
        <div class="focus-line bottom-line"></div>
    </div>

    <div id="side-slider-container">
        <input type="range" min="100" max="1000" step="10" value="300" class="vertical-slider" oninput="updateWpm(this.value)">
    </div>
	
    <script>
        // STATE
        let wordObjects = []; 
        let currentIndex = 0;
        let isPlaying = false;
        let wpm = 300;
        let timer = null;
        let totalPages = 0;
        let currentFileName = "";
        let features = { ramp: true };
        let library = JSON.parse(localStorage.getItem('void_library_v17')) || [];

        // KEYBOARD SUPPORT (For Desktop)
        document.addEventListener('keydown', (e) => {
            if (document.getElementById('start-screen').style.display !== 'none') return;
            if (e.code === 'Space') { e.preventDefault(); togglePlay(); }
            if (e.code === 'ArrowUp') { updateWpm(Math.min(1000, parseInt(wpm) + 25)); updateSlider(); }
            if (e.code === 'ArrowDown') { updateWpm(Math.max(100, parseInt(wpm) - 25)); updateSlider(); }
            if (e.code === 'ArrowLeft') { currentIndex = Math.max(0, currentIndex - 10); renderWord(); }
            if (e.code === 'ArrowRight') { currentIndex = Math.min(wordObjects.length-1, currentIndex + 10); renderWord(); }
        });

        function getORPIndex(word) {
            const len = word.length;
            if (len <= 1) return 0;
            if (len <= 5) return 1;
            if (len <= 9) return 2;
            if (len <= 13) return 3;
            return 4;
        }

        function renderWord() {
            if (currentIndex >= wordObjects.length) { isPlaying = false; return; }
            const obj = wordObjects[currentIndex];
            const word = obj.t;
            const orp = getORPIndex(word);
            document.getElementById('word-left').innerText = word.substring(0, orp);
            document.getElementById('word-center').innerText = word.charAt(orp);
            document.getElementById('word-right').innerText = word.substring(orp + 1);
            document.getElementById('page-display').innerText = `PG ${obj.p} / ${totalPages}`;
            document.getElementById('progress-percent').innerText = Math.floor((currentIndex / wordObjects.length) * 100) + "%";
        }

        function runLoop() {
            if (!isPlaying) return;
            renderWord();
            const word = wordObjects[currentIndex].t;
            let delay = 1.0;
            if (word.endsWith('.') || word.endsWith('?')) delay = 2.0;
            else if (word.endsWith(',')) delay = 1.5;
            else if (word.length > 10) delay = 1.2;

            if (features.ramp && currentIndex % 50 === 0 && currentIndex > 0 && wpm < 1000) {
                updateWpm(parseInt(wpm) + 5);
                updateSlider();
            }
            currentIndex++;
            timer = setTimeout(runLoop, (60000 / wpm) * delay);
        }

        function togglePlay(e) {
            if (e && (e.target.closest('.header') || e.target.closest('.modal') || e.target.closest('#side-slider-container'))) return;
            isPlaying = !isPlaying;
            if (isPlaying) { closeAllModals(); runLoop(); } else { clearTimeout(timer); saveProgress(); }
        }

        function goHome() {
            document.getElementById('start-screen').style.visibility = 'visible';
            document.getElementById('start-screen').style.opacity = '1';
            isPlaying = false; clearTimeout(timer);
            try { saveProgress(); } catch(e){}
        }

        function saveProgress() {
            if (!currentFileName || wordObjects.length === 0) return;
            library = library.filter(b => b.name !== currentFileName);
            library.unshift({
                name: currentFileName, index: currentIndex, wpm: wpm,
                total: wordObjects.length, date: new Date().toLocaleDateString()
            });
            if (library.length > 20) library.pop();
            localStorage.setItem('void_library_v17', JSON.stringify(library));
        }

        function openLibrary() {
            const list = document.getElementById('library-list');
            list.innerHTML = "";
            if (library.length === 0) {
                list.innerHTML = "<div style='color:#666; font-size:12px; text-align:center; margin-top:50px;'>NO ARCHIVES FOUND</div>";
            } else {
                library.forEach(book => {
                    const percent = Math.floor((book.index / book.total) * 100);
                    const div = document.createElement('div');
                    div.className = 'book-card';
                    div.innerHTML = `
                        <div style="flex:1">
                            <span style="font-weight:700; display:block; margin-bottom:5px;">${book.name}</span>
                            <span style="font-size:11px; opacity:0.6; font-family:monospace;">${book.date} • ${book.wpm} WPM</span>
                            <div style="width:100%; height:3px; background:#333; margin-top:8px; border-radius:2px;">
                                <div style="width:${percent}%; height:100%; background:var(--accent-color); border-radius:2px;"></div>
                            </div>
                        </div>
                        <div style="color:var(--accent-color); margin-left:15px; font-size:20px;">›</div>
                    `;
                    div.onclick = () => loadFromLibrary(book);
                    list.appendChild(div);
                });
            }
            document.getElementById('library-overlay').style.display = 'flex';
        }

        function closeLibrary() { document.getElementById('library-overlay').style.display = 'none'; }
        
        function loadFromLibrary(book) {
            alert(`Resuming "${book.name}". Please re-select the file.`);
            document.getElementById('file-input').click();
            window.restoreTarget = book;
            closeLibrary();
        }

        // HELPERS
        function updateWpm(val) { wpm = val; document.getElementById('wpm-display').innerText = wpm + " WPM"; }
        function updateSlider() { document.querySelector('.vertical-slider').value = wpm; }
        function toggleModal(id) {
            const m = document.getElementById(id);
            const was = m.style.display === 'block'; closeAllModals();
            if (!was) { m.style.display = 'block'; isPlaying = false; clearTimeout(timer); }
        }
        function closeAllModals() { document.querySelectorAll('.modal').forEach(m => m.style.display = 'none'); }
        function setTheme(name) {
            document.body.classList.remove('theme-void', 'theme-paper', 'theme-neuro');
            document.body.classList.add('theme-' + name);
        }
        function toggleFeature(key) {
            features[key] = !features[key];
            const el = document.getElementById('t-ramp');
            if(el) el.classList.toggle('active');
        }
        function jumpToPage(p) {
            const idx = wordObjects.findIndex(o => o.p >= p);
            if (idx !== -1) { currentIndex = idx; renderWord(); closeAllModals(); }
        }

        // PARSER
        document.getElementById('file-input').addEventListener('change', async function(e) {
            const file = e.target.files[0];
            e.target.value = ''; // FORCE RESET
            if (!file) return;
            
            currentFileName = file.name;
            const btn = document.querySelector('.upload-btn');
            const originalText = btn.innerText;
            btn.innerText = "PROCESSING...";

            const finish = () => {
                if (window.restoreTarget && window.restoreTarget.name === currentFileName) {
                    currentIndex = window.restoreTarget.index; updateWpm(window.restoreTarget.wpm); 
                    updateSlider(); window.restoreTarget = null;
                } else { currentIndex = 0; }
                btn.innerText = "UPLOAD BOOK";
                document.getElementById('start-screen').style.opacity = '0';
                document.getElementById('start-screen').style.visibility = 'hidden';
                renderWord();
            };

            try {
                if (file.type.indexOf("epub") > -1) {
                    const zip = await JSZip.loadAsync(file);
                    let text = ""; let files = [];
                    zip.forEach((path, entry) => { if(path.match(/\.(html|xhtml)$/i)) files.push(entry); });
                    files.sort((a,b) => a.name.localeCompare(b.name));
                    for(const f of files) {
                        const html = await f.async("string");
                        const doc = new DOMParser().parseFromString(html, "text/html");
                        text += doc.body.textContent + " ";
                    }
                    wordObjects = text.split(/\s+/).filter(w=>w.length>0).map(w=>({t:w, p:1}));
                    totalPages = 1;
                    document.getElementById('chapter-list').innerHTML = "<div style='padding:20px;opacity:0.5;text-align:center'>EPUB chapters unavailable</div>";
                    finish();
                } else {
                    const data = new Uint8Array(await file.arrayBuffer());
                    const pdf = await pdfjsLib.getDocument({data, disableWorker:true}).promise;
                    totalPages = pdf.numPages;
                    wordObjects = [];
                    for(let i=1; i<=totalPages; i++) {
                        const p = await pdf.getPage(i);
                        const c = await p.getTextContent();
                        const s = c.items.map(i=>i.str).join(" ");
                        s.split(/\s+/).filter(w=>w.length>0).forEach(w=>wordObjects.push({t:w, p:i}));
                    }
                    
                    const list = document.getElementById('chapter-list');
                    list.innerHTML = "";
                    const outline = await pdf.getOutline();
                    let hasValid = false;
                    if (outline && outline.length) {
                        for(const item of outline) {
                            let ref = Array.isArray(item.dest) ? item.dest[0] : null;
                            if (ref) {
                                try {
                                    const idx = await pdf.getPageIndex(ref);
                                    if (idx !== -1) {
                                        const pNum = idx + 1;
                                        const b = document.createElement('button');
                                        b.className = 'modal-item';
                                        b.innerHTML = `<span class="chapter-title">${item.title}</span><span class="chapter-page">Pg ${pNum}</span>`;
                                        b.onclick = ((pg)=>()=>jumpToPage(pg))(pNum);
                                        list.appendChild(b);
                                        hasValid = true;
                                    }
                                } catch(e){}
                            }
                        }
                    }
                    if (!hasValid) {
                        for(let i=1; i<=totalPages; i+=Math.max(1, Math.floor(totalPages/10))) {
                             const b = document.createElement('button');
                             b.className='modal-item'; b.innerHTML=`<span>Section ${Math.ceil(i/10)}</span><span class="chapter-page">${i}</span>`;
                             b.onclick=((pg)=>()=>jumpToPage(pg))(i);
                             list.appendChild(b);
                        }
                    }
                    finish();
                }
            } catch(e) { console.error(e); alert("Error reading file"); btn.innerText = "UPLOAD BOOK"; }
        });
	function jumpToUserPage() {
    const input = document.getElementById('page-jump-input');
    if (!input) return;
    const target = parseInt(input.value);
    
    if (target >= 1 && target <= totalPages) {
        const idx = wordObjects.findIndex(w => w.p >= target);
        if (idx !== -1) {
            currentIndex = idx;
            renderWord();
            closeAllModals();
            input.value = '';
        }
    } else {
        alert("Page " + target + " not found. Max: " + totalPages);
    }
}
	// --- LOGIKA RECAP (V17 COMPATIBLE) ---
        function openSummary() {
            isPlaying = false; clearTimeout(timer);
            closeAllModals(); // Zamyka settings/chapters jeśli otwarte
            document.getElementById('summary-modal').style.display = 'flex';
        }

        function closeSummary() {
            document.getElementById('summary-modal').style.display = 'none';
        }

        function getTextContext(mode) {
            if (currentIndex < 10 || wordObjects.length === 0) return null;

            // Helper do wyciągania tekstu z obiektów V17
            const extractText = (start, end) => wordObjects.slice(start, end).map(o => o.t).join(" ");

            if (mode === 'recent') {
                const start = Math.max(0, currentIndex - 1000);
                return extractText(start, currentIndex);
            } 
            
            if (mode === 'chapter') {
                let lookbackIndex = currentIndex;
                const limit = Math.max(0, currentIndex - 12000);
                
                while (lookbackIndex > limit) {
                    const w = wordObjects[lookbackIndex].t.toLowerCase();
                    if (w.includes('chapter') || w.includes('rozdział') || w.includes('part') || w.includes('book')) {
                        break;
                    }
                    lookbackIndex--;
                }
                if (lookbackIndex <= limit) lookbackIndex = Math.max(0, currentIndex - 5000);
                return extractText(lookbackIndex, currentIndex);
            }
        }

        async function triggerSummary(mode) {
            const resultArea = document.getElementById('summary-result-area');
            const textToAnalyze = getTextContext(mode);

            if (!textToAnalyze || textToAnalyze.length < 50) {
                resultArea.innerHTML = "<div class='summary-placeholder'>Not enough data to analyze yet.</div>";
                return;
            }

            resultArea.innerHTML = "<div class='processing-anim'>ANALYZING TEXT FLOW...</div>";

            let promptPrefix = "";
            if (mode === 'chapter') promptPrefix = "Provide a concise summary of the current chapter based on this text. Focus on plot progression:";
            else promptPrefix = "Summarize the last 1000 words read. Focus on the immediate context:";

            const finalPrompt = `${promptPrefix} \n\n ${textToAnalyze}`;

            try {
                const response = await fetch(`https://text.pollinations.ai/${encodeURIComponent(finalPrompt)}`);
                if (!response.ok) throw new Error("Service busy");
                const data = await response.text();
                let formatted = data.replace(/- /g, "<br>• ");
                resultArea.innerHTML = formatted;
            } catch (err) {
                resultArea.innerHTML = `<div class='summary-placeholder' style='color:#a44'>Analysis unavailable offline.<br>Check connection.</div>`;
            }
        }
    </script>
</body>
</html>